diseño a drupal
DESCRIPTION
Tecnicas y Herramientas para pasar diseños a Drupal.TRANSCRIPT
![Page 1: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/1.jpg)
De diseño a DrupalTécnicas y herramientas avanzadas para convertir
diseños en temas Drupal de alta calidad
![Page 2: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/2.jpg)
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
![Page 3: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/3.jpg)
HERRAMIENTAS
![Page 4: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/4.jpg)
Extensiones Firefox
![Page 5: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/5.jpg)
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
![Page 6: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/6.jpg)
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
![Page 7: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/7.jpg)
• Te permite superponer tus diseños encima de paginas web
• Tiene multiples capas, similar a GIMP o Photoshop
![Page 8: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/8.jpg)
Drupal Para Firebug
• Bueno para corregir errores (debugging)
• Informacion de tus consultas (queries) SQL
![Page 9: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/9.jpg)
ColorZilla
• Te permite extraer colores de páginas webs con herramientas similares a GIMP o Photoshop
![Page 10: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/10.jpg)
MeasureIt
• Te permite medir elementos en tu navegador
• Se pueden tener ventanas multiples para medir
![Page 11: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/11.jpg)
GridFox
• Te permite superponer cuadrículas encima de paginas web
• Las cuadrículas son altamente personalizables
![Page 12: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/12.jpg)
GridFox
• Te permite superponer cuadrículas encima de paginas web
• Las cuadrículas son altamente personalizables
![Page 13: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/13.jpg)
Software de Escritorio
![Page 14: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/14.jpg)
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
![Page 15: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/15.jpg)
Skitch• Toma pantallazos y
súbelos a la web fácilmente
• Agrega texto, formas, garabatos, etc.
• Genial para reportar errores
• Jing (alternativa para Windows)
![Page 16: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/16.jpg)
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)
![Page 17: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/17.jpg)
![Page 18: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/18.jpg)
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
![Page 19: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/19.jpg)
![Page 20: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/20.jpg)
Módulos Drupal
![Page 21: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/21.jpg)
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
![Page 22: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/22.jpg)
Skinr
• Permite que los usuarios puedan seleccionar estilos predifinidos
• Funciona con bloques, paneles y vistas
![Page 23: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/23.jpg)
Skinr
• Permite que los usuarios puedan seleccionar estilos predifinidos
• Funciona con bloques, paneles y vistas
![Page 24: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/24.jpg)
Skinr
• Permite que los usuarios puedan seleccionar estilos predifinidos
• Funciona con bloques, paneles y vistas
![Page 25: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/25.jpg)
![Page 26: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/26.jpg)
TÉCNICAS
![Page 27: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/27.jpg)
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
![Page 28: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/28.jpg)
Sprites en CSS
• 80%+ del tiempo de carga viene desde el “front-end”
• Reduce el número de recuestas HTTP
• “Markup” limpio
![Page 29: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/29.jpg)
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:
![Page 30: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/30.jpg)
Sprites en CSS
![Page 31: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/31.jpg)
Sprites en CSS
Spritevertical
Spritehorizontal
![Page 32: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/32.jpg)
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
![Page 33: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/33.jpg)
Reemplazo de imagenes
• “Markup” limpio
• Bueno para optimizacion de listados en resultados de busquedas (SEO)
• Accesible?
![Page 34: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/34.jpg)
sIFR
• Requiere JavaScript y Flash :/
• El texto es seleccionable!
• Es difícil de controlar
![Page 35: Diseño A Drupal](https://reader033.vdocuments.co/reader033/viewer/2022050804/54c809c44a79599c368b456d/html5/thumbnails/35.jpg)
cufón
• Solo requiere JS
• Usa el elemento HTML canvas (sexy!)
• Todo el éstilo es tomado directamente del CSS