Crear nuevos skins para el portal.
La forma más sencilla de crear una nueva skin para el portal es copiar una skin existente y modificarla para que se adapte a nuestras necesidades. Antes de copiar una skin debemos de encontrar aquella skin que ya exista en el portal y que se parezca lo más posible a nuestro nuevo diseño ya que de esa forma simplemente nos tendremos que enfocar en cambiar pequeños detalles como los colores, iconos etc... Ya que conseguir que el layout sea de nuestro agrado es una operación mucho más compleja y laboriosa. Por supuesto nuestra skin puede tener cualquier layout siempre y cuando se realiza con CSS.
Lo primero que hay que hacer es localizar el directorio con las skins de la pagina que queremos modificar, dicho directorio se encuentra en /Data/site/SiteID/skins donde SiteID es la ID de la pagina que queremos modificar. Esta jerarquía permite que las skins de diferentes páginas estén separadas en el caso de que nuestra instalación se hiciera con la intención de hostear más de una página. Para asegurar esto, durante la instalación todas las skins comunes del portal son copiadas de /Data/skins a /Data/sites/SiteID/skins asegurándose de que todas las paginas tenga una instancia de cada una de las skins. Una vez realizada la instalación cualquier skin personalizada deberá de ser puesta en /Data/sites/SiteID/skins para que se pueda utilizar.
Todas las skins que viene por defecto en el portal han sido creadas sin utilizar tablas. Históricamente muchos diseñadores web han utilizado tablas para realizar el diseño de sus páginas. Desafortunadamente el atributo table no fue diseñado para este propósito y se recomienda no utilizar este estilo de diseño y utilizar tablas solo para mostrar datos al usuario. Como regla general se remcomienda utilizar (x) HTML para mostrar datos mientras que se recomienda utilizar CSS para crear el diseño de la pagina. Otra de las cosas que se ha de tener en cuenta es debemos de esforzarnos en que nuestras páginas sean ligeras y el uso de CSS facilita esto. El diseñador de las paginas no está obligado a seguir esta recomendaciones en ninguno de los casos, pero esta explicación has sido añadida para exponer el caso del use de CSS en el diseño de las paginas.
Una skin del portal está formada por:
- Un directorio con el nombre de la skin
- layout.Master
- theme.skin => no se recomienda usarlo para el diseño de la página, aunque es posible.
- style.css => la CSS principal que importa todas las demás.
- stylelayout.css
- stylecolors.css
- styleborders.css
- styleimages.css
- styletext.css
- styletextmedium.css
- styletextlarge.css
- IESpecific.css => Una CSS específica para IE 6.
- IE7Specific.css => Una CSS específica para IE 7.
- favicon.ico => el icono que se muestra en la url de la pagina.
El motivo por el que algunas definiciones esta en CSS separas es que se ha intentado reducir el tamaño de las CSS. El tamaño influye de una forma importante en el rendimiento de la página.Cuando se diseña una nueva página la mayoría del trabajo que se lleva a cabo es en layout.Master y las diferentes CSS. Los siguientes links dan más información al respecto.
Para obtener mas información también puedes estudiar la skins que existen actualmente en mojoportal y preguntar en los foros.
Columnas en el Portal
Hay dos técnicas diferentes para crear un skin que contenga columnas en mojoportal.
Utilizar position:absolute
Esta técnica utiliza position:absolute tanto para la columna izquierda como para la columna derecha.
Utilizar esta técnica tiene los siguientes pros:
Es mejor para optimizar la búsqueda: este formato permite al buscador enfocarse en el contenido central de la página, lo que en teoría es lo más importante de la página.
contras:
Las columnas se sacan fuera del contexto: Al utilizar absolute position sacamos a las dos columnas del contexto del documento lo que hace que las columnas no puedan hacer que el pie de la página se empuje hacia abajo.
Utilizar float:left
Esta técnica no tiene los problemas de la anterior pero es pero para los buscadores ya que el contenido se lee de izquierda a derecha siendo la columna de la izquierda la primera en leerse antes del contenido central.