Upload
nicolas-borda
View
120
Download
1
Embed Size (px)
DESCRIPTION
Tecnicas y Herramientas para pasar diseños a Drupal.
Citation preview
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