960 Grid + Drupal Themes Guía de supervivencia Drupal Camp | Guatemala 2010.

Presentación del tema: "960 Grid + Drupal Themes Guía de supervivencia Drupal Camp | Guatemala 2010."— Transcripción de la presentación:

1 960 Grid + Drupal Themes Guía de supervivencia Drupal Camp | Guatemala 2010

2 Drupal Temas Guía de supervivencia Agenda

3 1.Que es Drupal?. 2.Que es un tema. 3.Problemas con HTML normal?. 4.Wire Frames a Regiones. 5.HTML A Drupal Variables de Tema. 6.Sobreescribiendo CSS. 7.Sobreescribiendo HTML. 8.Depurando un tema. 9.960 Grid 10.Preguntas. Drupal Camp | Guatemala 2010 Agenda

4 Drupal es gratuito, software libre que puede ser usado por personas o grupos de usuarios – aun si no tienen conocimientos técnicos – para crear y administrar de manera amigable diferentes tipos de sitios web. La plataforma incluye un sistema de administración de contenido y un framework usado en desarrollo. Drupal Camp | Guatemala 2010 1. Ques es Drupal?

5 Drupal Camp | Guatemala 2010 1. Que es Drupal?

6 En en el contexto de Drupal, el termino "tema" significa un conjunto de archivos que son son responsables por la apariencia de un sitio web. Otros sistemas usan diferentes nombres para los archivos que llevan acabo la misma función El termino mas comúnmente utilizado es "template.“ Conceptualmente, un tema es un contenedor visual usado para dar formato y desplegar información en una pantalla. Expresado en términos simples: Los temas determinas como tu sitio lucirá. Drupal Camp | Guatemala 2010 2. Que es un tema

7 Un tema genérico cubre el 80% de las necesidades de un proyecto; el restante 20% es lo que se llama una personalización del tema que abordaremos mas adelante. Recuerda, sabes que hiciste un buen tema, cuando los desarrolladores pueden instalarlo y usarlo con tres clics. Drupal Camp | Guatemala 2010

8 Aun is nuestra transformacion de PSD a HTML luce bien, Esta representacion solo trabaja en escenarios estaticos. Problemas en esta solucion. CSS ignora Estilos de Drupal. HTML maneja datos crudos. Nosotros necesitamos informacion. HTML no es esta orientado a contenido dinamico. Drupal Camp | Guatemala 2010 3. Problemas con el HTML normal?.

9 Drupal Camp | Guatemala 2010 4. Wire frames a Regiones

10 Mazda USA Media Home Page Drupal Camp | Guatemala 2010 Image should always fit the unit grid 4. Wire frames a Regiones

11 Mazda USA Media Home Page Drupal Camp | Guatemala 2010 Primary Links Header New Region # 1 Right Sidebar Footer Content 4. Wire frames a Regiones

12 Drupal Camp | Guatemala 2010 5. HTML a Drupal Variables de Tema

13 Drupal Camp | Guatemala 2010 5. HTML a Drupal Variables de Tema

14 Drupal Camp | Guatemala 2010 5. HTML a Drupal Variables de Tema

15 Drupal Camp | Guatemala 2010 6. Sobreescribiendo CSS

16 Orden de sobre escritura del HTML. Drupal Camp | Guatemala 2010 Búsqueda en archivo del tema activo (Si no existe una función definida entonces...)‏ Archivo de del Theme Engine (Si no existe una funcion definida entonces...)‏ Archivos por defecto de Drupal 7. Sobreescribiendo HTML

17 template.php Drupal Camp | Guatemala 2010 7. Sobreescribiendo HTML

18 Template por contentido http://drupal/ page-front.tpl.php http://drupal/user page-user.tpl.php http://drupal/story node-story.tpl.php http://drupal/contact page-contact.tpl.php http://drupal/about page-about.tpl.php Drupal Camp | Guatemala 2010 7. Sobreescribiendo HTML

19 Template por ruta, usando alias Drupal Camp | Guatemala 2010 7. Sobreescribiendo HTML

20 8. Depurando un Tema Drupal Camp | Guatemala 2010 Usando el modulo de devel para Drupal 6 es posible depurar e inspeccionar nuestro tema. Note que este modulo inyecta marcadores adicionales en nuestro DOM document, esto es necesario para lograr la magia de la depuración Este modulo podría causar que algunos módulos se comporten erraticamente o con menos funcionalidades. Theme Developer (Solo en Drupal 6 http://www.drupal.org/project/devel_themer

21 9. 960 Grid Drupal Camp | Guatemala 2010

22 9. Que es 960 Grid Drupal Camp | Guatemala 2010 960 Grid es un framework de CSS que nos facilita la vida en un mil por ciento (si lo sabemos utilizar). Este grid se creó por la necesidad de tener un “estándar” en el ancho de los sitios web. Es por eso que un grupo de personas decidió crear este sistema de maquetado basado en 960px de ancho, con configuraciones de 12 y 16 columnas para poder combinar entre sí y así crear nuestros layout de una forma simple y rápida. www.1kbgrid.com

23 9. 960 Grid CSS Classes Drupal Camp | Guatemala 2010 Clase.container-N.container-[N] ([N] debe ser un valor numero ) representa la subdivisión del ancho total (960 pixeles). Los valores validos serian.container-12 o.container-16. Dependiendo de cual es usando, cada unidad del grid (clase.grid-[N] ) será de 80 pixeles para el grid 12 o de 60 pixels para el grid de 16. Todos los grid incluyen un margen de 10 pixeles a la derecha y la izquierda. Esto significa que entre cada columna tendremos un total de 20 pixeles de espacio.

24 9. 960 Grid CSS Classes Drupal Camp | Guatemala 2010 Clase.show-grid Si agregamos la clase.show-grid al tag body de nuestro theme. Esto agregrara un fondo que representara el grid que estamos usando ya sea de 12 o de 16 grid. Lo cual nos ayudara a identificar cuantas columnas agregar a nuestros elementos

25 9. 960 Grid CSS Classes Drupal Camp | Guatemala 2010 Clase.grid-N El sufijo “N” que debe ser un numérico, indica cuantas subdiviciones serán usadas dentro del layout de nuestra pagina. Por ejemplo, si se desean 2 columnas en nuestro container para representar el sidebar y el content, podemos hacerlo de esta forma:

26 9. 960 Grid CSS Classes Drupal Camp | Guatemala 2010 Márgenes Como ya mencionamos cada columna tiene un margen de 10 pixeles a cada lado. EL problema es que cada columna tendría margen a la izquierda y la derecha, pero la primera columna y la ultima no necesitan margen a la izquierda y derecha respectivamente, la solución es usar las clases.alpha y.omega.

27 9. 960 Grid CSS Classes Drupal Camp | Guatemala 2010 Clases.prefix-N /.suffix-N En caso de que necestemos llenar un espacio en blanco en nuestro contenido podemos hacer uso de las clases.prefix-[N] y.suffix-[N]. Por ejemplo.prefix-4 agregara 4 grids a la izquierda de nuestro contenido. Si queremos centrar un grid podemos hacer lo siguiente:

28 9. 960 Grid CSS Classes Drupal Camp | Guatemala 2010 Agregando Clases basado en el contexto El tema 960 grid provee la funcion "ns()" que puede ser usada para agregar clases contextualmente. l primer argumento debe ser el ancho maximo para nuestro grid, los parámetros siguientes seran valores pareados ($variable,Num-grid) los cuales en caso existir seran restados del ancho maximo.

29 9. 960 Grid CSS Classes Drupal Camp | Guatemala 2010 Agregando Clases basado en el contexto

30 Preguntas? enzo@anexusit.com Drupal Camp | Guatemala 2010

31 Presentation preparada por: Eduardo Garcia Drupal Camp | Guatemala 2010 ©Anexus IT