CSS J! Basico

Maquetación para Joomla!

joomlaEn esta sección se enseñan los primeros pasos hacia la creación de una página web pero enfocados especialmente en la creación de plantillas para el CMS Joomla.

Está destinada al novato en diseño web, al que recién empieza. No se incluyen temas de programación PHP ni nada similar, simplemente se explica cómo armar una maqueta o plantilla y su estilización mediante el lenguaje de CSS y la incrustación de las librerías de Joomla.

Pueden bajarse la versión completa en PDF desde aquí.

Por: Tux Merlín : Buru

SITIOS WEB

Martes, 14 Abril 2009
(Tiempo estimado: 1 - 2 minutos)
  • Joomla! : Sitio Oficial de los creadores de este magnífico CSS.
  • JoomlaCode : Sitio del desarrollo de Joomla
  • Comunidad Joomla en castellano
  • Solojoomla: Contenidos Joomla en Español y donde está este manual. El mejor sitio de Joomla!
  • JED : Repositorio de extensiones para Joomla en inglés.
  • DEJE beta: Repositorio de extensiones para Joomla en castellano.
  • W3C : Word Wide Web Consortium, sitio obligado de todo desarrollador web
  • Especificaciones HTML en W3C : Sitio de las especifícaciones técnicas de HTML v4.01
  • Cristalab : Comunidad de diseño y desarrollo web. Quizás el mejor sitio para aprender mucho sobre CSS en español.
  • CSSPlay : idem anterior en inglés.
  • Yahoo Developer : Sitio de los desarroladores de Yahoo!

[...]

Por: Tux Merlín : Buru

Ya vimos como hacer una plantilla para Joomla desde cero hasta darle una personalización casi completa, por lo menos podemos llegar a eso si nos adentramos en profundidad en todos los estilos de Joomla (pufff… son demasiados no? :-)

Ahora vamos a ver cómo hacer que esa plantilla se adapte al monitor que la muestra, es decir que se autoajuste a la resolución del monitor del navegante.

En primer lugar tenemos que decidir si queremos que toda nuestra plantilla sea autoajuste o solamente alguna/s parte/s. En el caso que vamos a ver como ejemplo, usaremos como sección fija solamente la lateral derecha, es decir, donde está el Menú Principal, el buscador y el formulario de login. La cabecera o “header”, la barra de navegación superior y el pie o “footer” tendrán fijadas sus alturas pero no sus anchos. Y el cuerpo será flexible o ajustable 100%.

Martes, 14 Abril 2009
(Tiempo estimado: 5 - 9 minutos)

El ejemplo que veremos fue testeado y funciona correctamente sin necesidad de hacks en los siguiente navegadores:
- Internet Explorer v7
- Opera v9.5
- Safari v4
- Firefox v3.08

[...]

Por: Tux Merlín : Buru

Aquí les presento todas las clases que utiliza Joomla!, tanto pora el Front-End como para el Back-End...

Martes, 14 Abril 2009
(Tiempo estimado: 5 - 9 minutos)

Suerte!

[...]

Por: Tux Merlín : Buru

Lo que vamos a hacer ahora es darle un poco más de “estilo” a nuestra plantilla utilizando las clases e identificadores propios de Joomla! Eso significa que trabajaremos de ahora en más, solamente sobre nuestro archivo “template.css”.

Martes, 14 Abril 2009
(Tiempo estimado: 4 - 8 minutos)

Para nuestro primer proyecto hemos utilizado CSS con identificadores propios pero Joomla! tiene los suyos predeterminados de forma inequívoca y que sirven para darle estilo a cada una de sus partes. La lista de estilos es muy extensa así que solamente veremos los más importantes y al final pondré una lista de todos los que incorpora la versión 1.5 de este genial CMS.

Primeramente pongamos un comentario dentro del archivo CSS para separar lo que son “nuestros“ estilos de los que son de Joomla!.

[...]

Por: Tux Merlín : Buru

Este archivo es el “instalador” de la plantilla. Cuando cargamos el archivo zip desde el back-end de Joomla –“Extensiones” - “Instalar/Desinstalar”- éste busca primero el archivo “xml” dentro del zip y sino lo encuentra no instala la plantilla. Además el archivo contiene en su interior, como verán en su código, dónde va a estar situado cada componente (imágenes, css y demás).

Martes, 14 Abril 2009
(Tiempo estimado: 3 - 6 minutos)

Joomla lo utiliza también para saber las posiciones que contiene y otras informaciones relacionadas a su confección. Asimismo carga de este archivo la descripción y otros datos que serán mostrados en el “Gestor de Plantillas” del back-end.

[...]

Joomla-GNU.com not affiliated with or endorsed by Open Source Matters or the Joomla! Project. The Joomla!, logo and name is used under a limited license from Open Source Matters in the United States and other countries.