De diseño a Drupal
Té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.net
twitter.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)

1
CONCEPT / DESCRIPTION
[Logo]
1.0 As explained in the final report, this page is designed to target VR's potential and existing
6.0 collaborators / supporters and beneficiaries are invited to a separate landing page (6.0 -
Beneficiaries landing page).
3 With the new layout, a left sidebar is no longer required. A right sidebar is added to hold
5.0 2.0 3.0 4.0 Support us Work with us Contact contextual content
2 NOTES
About us Our services Our projects Information & resources Volunteer with us Hi! How can we help? Youth
Type Element Description
4
12 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
Donate now 3 Link Secondary menu Links to landing pages that are relevant to smaller
number of audiences
5 4 Image Banner An eye-catcher photo that communicates VR's activities /
Creating opportunities, changing lives 5 Text Description
sense of value to visitors
A one-liner on VR and summary of its ethos
Vital 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 6 Text Description and link A brief description about VR and link to 'About us' page
enterprise. Our vision is for everyone to have equal expectations and opportunities in
life and not to be seriously disadvantaged by where they live. 7 Text Description and link A brief description about VR's work and link to 'Our
Learn more >> 5.0 specialities' page
6 8
8 Image Image and Few images and descriptions of case studies
Michael, 19 description in
carousel
9 Text Feed An automatically generated list of the latest news.
Displays three direct links to the news articles and a link
Our services 2.0 to a page where users can access all news articles
composed his own music album
Lorem ipsum dolor sit amet with Studio + 10 Text Feed A link and photo to a featured case study
consectateur nonummy lorenzino.
Interdum volgus videt, est ubi 9
11 Text Feed A list of links to featured events. The thumbnail links to
peccat. Latest News the event detail page
7
05.07.09 12 Image Link Donate online image linked to donation functionality
Lorem ipsum dolor sit amet, consectetuer 9.0
adipiscing elit.
Support us 6.0
05.07.09
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer
consectateur nonummy lorenzino. adipiscing elit.
Interdum volgus videt, est ubi peccat.
DATE TITLE DWG NO.
Vital Regeneration - registered charity: #1110882 Privacy policy Media centre 05.18.2009
AUTHOR
Mori Home page 1.0

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
ANTES DESPUES
Número de recuestas HTTP: Número de recuestas HTTP:
Tamaño total de imágenes: Tamaño total de imágenes:
EJEMPLO EJEMPLO
Credit: http://css-tricks.com/css-sprites/

Sprites en CSS

Sprites en CSS
Sprite
vertical
Sprite
horizontal

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