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

Drupal Temas Guía de supervivencia Agenda

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 Grid 10.Preguntas. Drupal Camp | Guatemala 2010 Agenda

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 Ques es Drupal?

Drupal Camp | Guatemala Que es Drupal?

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 Que es un tema

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

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 Problemas con el HTML normal?.

Drupal Camp | Guatemala Wire frames a Regiones

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

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

Drupal Camp | Guatemala HTML a Drupal Variables de Tema

Drupal Camp | Guatemala HTML a Drupal Variables de Tema

Drupal Camp | Guatemala HTML a Drupal Variables de Tema

Drupal Camp | Guatemala Sobreescribiendo CSS

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

template.php Drupal Camp | Guatemala Sobreescribiendo HTML

Template por contentido page-front.tpl.php page-user.tpl.php node-story.tpl.php page-contact.tpl.php page-about.tpl.php Drupal Camp | Guatemala Sobreescribiendo HTML

Template por ruta, usando alias Drupal Camp | Guatemala Sobreescribiendo HTML

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

Grid Drupal Camp | Guatemala 2010

9. Que es 960 Grid Drupal Camp | Guatemala 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.

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.

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

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:

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.

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:

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.

Grid CSS Classes Drupal Camp | Guatemala 2010 Agregando Clases basado en el contexto

Preguntas? Drupal Camp | Guatemala 2010

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