drupal themes 2010 spanish

960 Grid + Drupal Themes

Guía de supervivencia

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.


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.


1. Ques es Drupal?


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á.


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.


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.


3. Problemas con el HTML normal?.


4. Wire frames a Regiones

Mazda USA Media Home Page


Image should always fit the unit grid


Mazda USA Media Home Page


Primary Links

Header

New Region # 1

Right Sidebar

Footer

Content



5. HTML a Drupal Variables de Tema


6. Sobreescribiendo CSS

Orden de sobre escritura del HTML.


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



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



Template por ruta, usando alias



8. Depurando un Tema


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


9. Que es 960 Grid


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


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.



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



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>



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="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>



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="prefix-3 grid_6 suffix-3"><?php print $content; ?></div>

</div>



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); ?>



Agregando Clases basado en el contexto

[email protected]


drupal themes 2010 spanish

Documents

grid drupal camp guatemala

tema drupal camp guatemala

que es drupal

regiones drupal camp

drupal variables

grid es

drupal themesgua

drupal es gratuito