P. 1
Drupal Themes 2010 Spanish

Drupal Themes 2010 Spanish

3.5

|Views: 431|Likes:
Published by enzolutions
Presentacion para principiantes de como hacer themes usango 960 Grid CSS.

Presentation in spanish for beginners about how create drupal themes using 960 Grid CSS
Presentacion para principiantes de como hacer themes usango 960 Grid CSS.

Presentation in spanish for beginners about how create drupal themes using 960 Grid CSS

More info:

Published by: enzolutions on Jul 15, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PPT, PDF, TXT or read online from Scribd
See more
See less

02/20/2013

pdf

text

original

960 Grid + Drupal Themes

Guía de supervivencia

Drupal Camp | Guatemala 2010

Agenda

Drupal Temas
Guía de supervivencia

Drupal Camp | Guatemala 2010

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

1. Ques es Drupal?

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. Que es Drupal?

Drupal Camp | Guatemala 2010

2. Que es un tema

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

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

3. Problemas con el HTML normal?.

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

4. Wire frames a Regiones

Drupal Camp | Guatemala 2010

4. Wire frames a Regiones

Image should always fit the unit grid

Mazda USA Media Home Page
Drupal Camp | Guatemala 2010

4. Wire frames a Regiones

Header Primary Links New Region # 1 Right Sidebar

Content

Footer

Mazda USA Media Home Page

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

Drupal Camp | Guatemala 2010

7. Sobreescribiendo HTML

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
Drupal Camp | Guatemala 2010

7. Sobreescribiendo HTML

template.php

Drupal Camp | Guatemala 2010

7. Sobreescribiendo HTML

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

Template por ruta, usando alias

Drupal Camp | Guatemala 2010

8. Depurando un Tema

Theme Developer (Solo en Drupal 6 http://www.drupal.org/project/devel_themer

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.

Drupal Camp | Guatemala 2010

9. 960 Grid

Drupal Camp | Guatemala 2010

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
Drupal Camp | Guatemala 2010

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.

Drupal Camp | Guatemala 2010

9. 960 Grid CSS Classes

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

Drupal Camp | Guatemala 2010

9. 960 Grid CSS Classes

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>

Drupal Camp | Guatemala 2010

9. 960 Grid CSS Classes

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>
Drupal Camp | Guatemala 2010

9. 960 Grid CSS Classes

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>

Drupal Camp | Guatemala 2010

9. 960 Grid CSS Classes

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

Drupal Camp | Guatemala 2010

9. 960 Grid CSS Classes

Agregando Clases basado en el contexto

Drupal Camp | Guatemala 2010

Preguntas?
enzo@anexusit.com

Drupal Camp | Guatemala 2010

Presentation preparada por: Eduardo Garcia

©Anexus IT

Drupal Camp | Guatemala 2010

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->