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...
HERRAMIENTAS
Extensiones Firefox
Firebug

•   Examina fácilmente el
    HTML, CSS y JS

•   Edita el HTML, CSS y JS
    en vivo

•   Visualiza el padding y...
YSlow
          •    Una herramienta que te
               de un análisis y puntaje
               de performance

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

•   Tiene multiples capas,
    similar a GIMP o
    P...
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
    med...
GridFox

•   Te permite superponer
    cuadrículas encima de
    paginas web

•   Las cuadrículas son
    altamente
    pe...
GridFox

•   Te permite superponer
    cuadrículas encima de
    paginas web

•   Las cuadrículas son
    altamente
    pe...
Software de Escritorio
xScope
•   Reglas en-pantalla

•   Mide facilmente
    dimensiones en tu
    pantalla

•   Superpon tamaños de
    pantall...
Skitch
•   Toma pantallazos y
    súbelos a la web
    fácilmente

•   Agrega texto, formas,
    garabatos, etc.

•   Geni...
OmniGraffle
•   Genial para hacer
    esqueletos

•   Muy bueno para todo
    tipo de diagramas

•   Genial para planear la...
1
                                                                                                                        ...
Módulos Drupal
Theme Developer
•   Parte del módulo devel

•   Al apretar el cursor en
    cualquier elemento te de
    la función que cr...
Skinr

•   Permite que los usuarios
    puedan seleccionar
    estilos predifinidos

•   Funciona con bloques,
    paneles ...
Skinr

•   Permite que los usuarios
    puedan seleccionar
    estilos predifinidos

•   Funciona con bloques,
    paneles ...
Skinr

•   Permite que los usuarios
    puedan seleccionar
    estilos predifinidos

•   Funciona con bloques,
    paneles ...
TÉCNICAS
Sprites

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

•   ...
Sprites en CSS

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

•   Reduce el número de
    recuestas HTT...
Sprites en CSS

 ANTES                      DESPUES
Número de recuestas HTTP:   Número de recuestas HTTP:



Tamaño total ...
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

...
Reemplazo de imagenes

•   “Markup” limpio

•   Bueno para optimizacion
    de listados en resultados
    de busquedas (SE...
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 de...
Diseño A Drupal
Diseño A Drupal
Diseño A Drupal
Upcoming SlideShare
Loading in …5
×

Diseño A Drupal

4,674 views

Published on

Tecnicas y Herramientas para pasar diseños a Drupal.

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,674
On SlideShare
0
From Embeds
0
Number of Embeds
100
Actions
Shares
0
Downloads
81
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Diseño A Drupal

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

×