Date post: | 28-Jan-2016 |
Category: |
Documents |
Upload: | ximenez-rincon |
View: | 218 times |
Download: | 0 times |
960 Grid + Drupal Themes
Guía de supervivencia
Drupal Camp | Guatemala 2010
Drupal Camp | Guatemala 2010
Drupal TemasGuí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.
9. 960 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 2010
1. Ques es Drupal?
Drupal Camp | Guatemala 2010
1. 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 2010
2. Que es un tema
2. 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 2010
3. Problemas con el HTML normal?.
Drupal Camp | Guatemala 2010
4. 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 2010
5. HTML a Drupal Variables de Tema
Drupal Camp | Guatemala 2010
5. HTML a Drupal Variables de Tema
Drupal Camp | Guatemala 2010
5. HTML a Drupal Variables de Tema
Drupal Camp | Guatemala 2010
6. 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 2010
7. Sobreescribiendo HTML
Template por contentido
http://drupal/page-front.tpl.php
http://drupal/userpage-user.tpl.php
http://drupal/storynode-story.tpl.php
http://drupal/contactpage-contact.tpl.php
http://drupal/aboutpage-about.tpl.php
Drupal Camp | Guatemala 2010
7. Sobreescribiendo HTML
Template por ruta, usando alias
Drupal Camp | Guatemala 2010
7. 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 http://www.drupal.org/project/devel_themer
9. 960 Grid
Drupal Camp | Guatemala 2010
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
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.
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
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:
<div class="container_12">
<div class="grid_4"><?php print $sidebar; ?></div>
<div class="grid_8"><?php print $content; ?></div>
</div>
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.
<div class="container_12">
<div class="grid_2 alpha"><?php print $sidebar; ?></div>
<div class="grid_6"><?php print $content; ?></div>
<div class="grid_2"><?php print $region_photo; ?></div>
<div class="grid_2 omega"><?php print $region_ads;?></div>
</div>
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:
<div class="container_12">
<div class="prefix-3 grid_6 suffix-3"><?php print $content; ?></div>
</div>
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.
<?php ns('grid-16', $neighbor_a, 3, $neighbor_b, 4); ?>
9. 960 Grid CSS Classes
Drupal Camp | Guatemala 2010
Agregando Clases basado en el contexto
Presentation preparada por:Eduardo Garcia
Drupal Camp | Guatemala 2010
©Anexus IT