De diseño a DrupalTécnicas y herramientas avanzadas para convertir

diseños en temas Drupal de alta calidad

Nicolas Borda

• Creo y mantengo temas Drupal que contribuyo al proyecto

• He creado temas para otros proyectos de software libre como ProjectPier y proximamente Open Atrium

• Trabajo con muchas agencias de Drupal creando temas para sus clientes de manera freelance

nic.ipwa.nettwitter.com/ipwa

drupal.org/user/130909

HERRAMIENTAS

Extensiones Firefox

Firebug

• Examina fácilmente el HTML, CSS y JS

• Edita el HTML, CSS y JS en vivo

• Visualiza el padding y margin de los objetos

YSlow

• Una herramienta que te de un análisis y puntaje de performance

• Te da sugerencias en como mejorar el puntaje de tú página

http://wimleers.com/article/improving-drupals-page-loading-performance

• Te permite superponer tus diseños encima de paginas web

• Tiene multiples capas, similar a GIMP o Photoshop

Drupal Para Firebug

• Bueno para corregir errores (debugging)

• Informacion de tus consultas (queries) SQL

ColorZilla

• Te permite extraer colores de páginas webs con herramientas similares a GIMP o Photoshop

MeasureIt

• Te permite medir elementos en tu navegador

• Se pueden tener ventanas multiples para medir

GridFox

• Te permite superponer cuadrículas encima de paginas web

• Las cuadrículas son altamente personalizables

GridFox

• Te permite superponer cuadrículas encima de paginas web

• Las cuadrículas son altamente personalizables

Software de Escritorio

xScope

• Reglas en-pantalla

• Mide facilmente dimensiones en tu pantalla

• Superpon tamaños de pantallas comunes

• Guías y cursores de retículo en cruz

Skitch• Toma pantallazos y

súbelos a la web fácilmente

• Agrega texto, formas, garabatos, etc.

• Genial para reportar errores

• Jing (alternativa para Windows)

OmniGraffle• Genial para hacer

esqueletos

• Muy bueno para todo tipo de diagramas

• Genial para planear la experiencia del usuario

• Gliffy (alternativa grátis)

• Visio (alternativa para Windows)

TITLE DWG NO.DATE

AUTHOR

Type Element Description

NOTES

CONCEPT / DESCRIPTION

As explained in the final report, this page is designed to target VR's potential and existing collaborators / supporters and beneficiaries are invited to a separate landing page (6.0 - Beneficiaries landing page).With the new layout, a left sidebar is no longer required. A right sidebar is added to hold contextual content

1.0Home page05.18.2009

Mori

Latest News

Creating opportunities, changing livesVital Regeneration is a charity working to transform London’s most deprived neighbourhoods. We develop social, environmental and economic programmes, so that people and communities fulfil their potential through learning, employment and enterprise. Our vision is for everyone to have equal expectations and opportunities in life and not to be seriously disadvantaged by where they live.

1

2

4

5

1 Image Header logo Vital Regeneration logo linked to the homepage

2 Nav Primary menu Links to landing pages that are relevant to larger number of audiences

3 Link Secondary menu Links to landing pages that are relevant to smaller number of audiences

4 Image Banner An eye-catcher photo that communicates VR's activities / sense of value to visitors

5 Text Description A one-liner on VR and summary of its ethos

9 Text Feed An automatically generated list of the latest news. Displays three direct links to the news articles and a link to a page where users can access all news articlesOur services

Lorem ipsum dolor sit amet

consectateur nonummy lorenzino.

Interdum volgus videt, est ubi

peccat.

10 Text Feed

Support us

Lorem ipsum dolor sit amet

consectateur nonummy lorenzino.

Interdum volgus videt, est ubi peccat.

2.0

6

7

11 Text Feed

6 Text Description and link A brief description about VR and link to 'About us' page

7 Text Description and link A brief description about VR's work and link to 'Our specialities' page

8 Image Image and description in carousel

Few images and descriptions of case studies

9

A link and photo to a featured case study

A list of links to featured events. The thumbnail links to the event detail page

6.0

9.0

Donate now

12 Image Link Donate online image linked to donation functionality

12

3

05.07.09

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit.

05.07.09

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit.

Learn more >> 5.0

Michael, 19

composed his own music album

with Studio +

8

Our services Our projects YouthAbout us

Support us

Volunteer with us

Work with us

[Logo]1.0

5.0 2.0

6.0

3.0 4.0 Contact

Hi! How can we help?Information & resources

Vital Regeneration - registered charity: #1110882 Privacy policy Media centre

Módulos Drupal

Theme Developer

• Parte del módulo devel

• Al apretar el cursor en cualquier elemento te de la función que creo el HTML

• Facilita saber que función tienes que sustituir

Skinr

• Permite que los usuarios puedan seleccionar estilos predifinidos

• Funciona con bloques, paneles y vistas

Skinr

• Permite que los usuarios puedan seleccionar estilos predifinidos

• Funciona con bloques, paneles y vistas

Skinr

• Permite que los usuarios puedan seleccionar estilos predifinidos

• Funciona con bloques, paneles y vistas

TÉCNICAS

Sprites

• Una imagen o animación de dos o tres dimensiones que se integra a una escena más grande

• Se empezo usando en video juegos y software

Sprites en CSS

• 80%+ del tiempo de carga viene desde el “front-end”

• Reduce el número de recuestas HTTP

• “Markup” limpio

Sprites en CSS

Credit: http://css-tricks.com/css-sprites/

ANTES DESPUES

EJEMPLO EJEMPLO

Número de recuestas HTTP: Número de recuestas HTTP:

Tamaño total de imágenes: Tamaño total de imágenes:

Sprites en CSS

Sprites en CSS

Spritevertical

Spritehorizontal

Sprites en CSS

• 16 kb para toda la interfaz

• El sprite vertical permite repetir patrones y gradientes

• Aplicas una solucion para PNGs transparentes en IE6 a un solo elemento

Reemplazo de imagenes

• “Markup” limpio

• Bueno para optimizacion de listados en resultados de busquedas (SEO)

• Accesible?

sIFR

• Requiere JavaScript y Flash :/

• El texto es seleccionable!

• Es difícil de controlar

cufón

• Solo requiere JS

• Usa el elemento HTML canvas (sexy!)

• Todo el éstilo es tomado directamente del CSS