SlideShare ist ein Scribd-Unternehmen logo
1 von 95
Downloaden Sie, um offline zu lesen
No más curva.
Por su amigo @leivajd
José Leiva
leivajd.com / @leivajd
Drupal para diseñadores,
venciendo la curva de
aprendizaje.
Drupal para diseñadores,
venciendo la curva de
aprendizaje.
todos
Drupal para diseñadores,
venciendo la curva de
aprendizaje.
http://groups.drupal.org/node/172434
Porqué hay tan pocos
diseñadores?
No más curva.
mito!
No más curva.
No más curva.
No más curva.
No más curva.
No más curva.
Puerta abierta para
diseñadores!
5
vías
1
el lenguaje
No más curva.
Lo siento, pero hay
que leer.
No más curva.
No más curva.
No más curva.
No más curva.
2
el enfoque
Drupal no es un CMS
terminado, es un framework
para crear uno.
No más curva.
No más curva.
No más curva.
No más curva.
No más curva.
No más curva.
No más curva.
No más curva.
No más curva.
No más curva.
No más curva.
No más curva.
Antes de escribir código
definir alcance
estructurar contenido
configurar lo básico
lo podemos contruir con lo
que tenemos?
8020
3
la relación
Diseñador + Developer,
no contra.
Server local / Drush / Terminal / Git
4
pierda el
miedo
La única manera es
trabajando
No más curva.
No más curva.
Nunca pierda la
oportunidad de aprender
No más curva.
No más curva.
No más curva.
No más curva.
camp2013.drupalcr.org
5
km extra
Todos los días
aprendemos algo nuevo.
No más curva.
No más curva.
HTML5
No más curva.
No más curva.
No más curva.
No más curva.
Style Guide
No más curva.
No más curva.
No más curva.
No más curva.
RWD
100% artesanal.
No más curva.
Grid Flexible
Media Flexible
@Media Queries
Grid Flexible
target / contexto = resultado
ejem. 960 grid

grid_4: 300px

300px / 960px = 0.3125
target           contexto   x100 = 31.25%
Media Flexible
           img,
           video {
             max-width: 100%;
             height: auto;
           }
No más curva.
Media Queries
Cambiar el layout cuando sea necesario.
Cambiar estilo de elementos.
Cambiar base font-size
RWD Tips
- Grid Flexible FTW!
- Jerarquía del contenido
- Pixel perfect
- No más pixeles
- Em para font-size
- Aprender haciendo
Extra
http://drupal.org/project/themes
Quick links
Documentación para iniciar con theming.

• http://drupal.org/getting-started/install-contrib/themes
• http://drupal.org/documentation/theme
• About theming http://drupal.org/node/221881
• Video http://aprende.drupal-centroamerica.org/node/9
http://bit.ly/ICTCnd
en resumen
1
el lenguaje
2
el enfoque
3
la relación
4
pierda el
miedo
5
km extra
unicornios
Más en
leivajd.com/nocurva

Weitere ähnliche Inhalte

Andere mochten auch

Contabilidadambientalcriticamodelo 110130110926-phpapp02
Contabilidadambientalcriticamodelo 110130110926-phpapp02Contabilidadambientalcriticamodelo 110130110926-phpapp02
Contabilidadambientalcriticamodelo 110130110926-phpapp02Alfonso Ucc
 
Violencia de género
Violencia de géneroViolencia de género
Violencia de géneroMocel
 
14 tesis defensa al 8 noviembre 2011
14 tesis defensa al 8 noviembre 201114 tesis defensa al 8 noviembre 2011
14 tesis defensa al 8 noviembre 2011Adalberto
 
Mapa capítulo 3
Mapa capítulo 3Mapa capítulo 3
Mapa capítulo 3elweedo
 
Programaprocesoinicial2011
Programaprocesoinicial2011Programaprocesoinicial2011
Programaprocesoinicial2011Luis Gutierrez
 
Julio 8 de 2012
Julio 8 de 2012Julio 8 de 2012
Julio 8 de 2012escmauxi
 
Observen como clonan_en_un_cajero-accio_ntv2009-ok
Observen como clonan_en_un_cajero-accio_ntv2009-okObserven como clonan_en_un_cajero-accio_ntv2009-ok
Observen como clonan_en_un_cajero-accio_ntv2009-okeosorio
 
Reflexión de 27 de Nov 2011
Reflexión de 27 de Nov 2011Reflexión de 27 de Nov 2011
Reflexión de 27 de Nov 2011escmauxi
 
Maestria Maestro Y Aprendizaje
Maestria Maestro Y AprendizajeMaestria Maestro Y Aprendizaje
Maestria Maestro Y AprendizajeAdalberto
 
Gacetilla Municipal 21 De Mayo
Gacetilla Municipal 21 De MayoGacetilla Municipal 21 De Mayo
Gacetilla Municipal 21 De Mayoguest6faf50e5
 
2. casos y-patrones-de-la-violencia-a-b[1]
2. casos y-patrones-de-la-violencia-a-b[1]2. casos y-patrones-de-la-violencia-a-b[1]
2. casos y-patrones-de-la-violencia-a-b[1]Adalberto
 
Favorece la convivencia en el liceo
Favorece la convivencia en el liceoFavorece la convivencia en el liceo
Favorece la convivencia en el liceoasde5
 
Libro El Sistema Empresa 5
Libro  El Sistema Empresa 5Libro  El Sistema Empresa 5
Libro El Sistema Empresa 5trashrudeboy
 
Installacion De Open Suse 11.0
Installacion De Open Suse 11.0Installacion De Open Suse 11.0
Installacion De Open Suse 11.0Ivan Acosta
 
PresentacióN De La Tesis
PresentacióN De La TesisPresentacióN De La Tesis
PresentacióN De La TesisGEOVAN21
 

Andere mochten auch (20)

Pepsi Cola
Pepsi ColaPepsi Cola
Pepsi Cola
 
Contabilidadambientalcriticamodelo 110130110926-phpapp02
Contabilidadambientalcriticamodelo 110130110926-phpapp02Contabilidadambientalcriticamodelo 110130110926-phpapp02
Contabilidadambientalcriticamodelo 110130110926-phpapp02
 
Violencia de género
Violencia de géneroViolencia de género
Violencia de género
 
14 tesis defensa al 8 noviembre 2011
14 tesis defensa al 8 noviembre 201114 tesis defensa al 8 noviembre 2011
14 tesis defensa al 8 noviembre 2011
 
Mapa capítulo 3
Mapa capítulo 3Mapa capítulo 3
Mapa capítulo 3
 
Los Pensamientos y Salud
Los Pensamientos y SaludLos Pensamientos y Salud
Los Pensamientos y Salud
 
Programaprocesoinicial2011
Programaprocesoinicial2011Programaprocesoinicial2011
Programaprocesoinicial2011
 
Julio 8 de 2012
Julio 8 de 2012Julio 8 de 2012
Julio 8 de 2012
 
Observen como clonan_en_un_cajero-accio_ntv2009-ok
Observen como clonan_en_un_cajero-accio_ntv2009-okObserven como clonan_en_un_cajero-accio_ntv2009-ok
Observen como clonan_en_un_cajero-accio_ntv2009-ok
 
Reflexión de 27 de Nov 2011
Reflexión de 27 de Nov 2011Reflexión de 27 de Nov 2011
Reflexión de 27 de Nov 2011
 
Maestria Maestro Y Aprendizaje
Maestria Maestro Y AprendizajeMaestria Maestro Y Aprendizaje
Maestria Maestro Y Aprendizaje
 
Gacetilla Municipal 21 De Mayo
Gacetilla Municipal 21 De MayoGacetilla Municipal 21 De Mayo
Gacetilla Municipal 21 De Mayo
 
Hombre
HombreHombre
Hombre
 
2. casos y-patrones-de-la-violencia-a-b[1]
2. casos y-patrones-de-la-violencia-a-b[1]2. casos y-patrones-de-la-violencia-a-b[1]
2. casos y-patrones-de-la-violencia-a-b[1]
 
Agua y Coca Cola
Agua y  Coca ColaAgua y  Coca Cola
Agua y Coca Cola
 
Favorece la convivencia en el liceo
Favorece la convivencia en el liceoFavorece la convivencia en el liceo
Favorece la convivencia en el liceo
 
Libro El Sistema Empresa 5
Libro  El Sistema Empresa 5Libro  El Sistema Empresa 5
Libro El Sistema Empresa 5
 
Notaprensa
NotaprensaNotaprensa
Notaprensa
 
Installacion De Open Suse 11.0
Installacion De Open Suse 11.0Installacion De Open Suse 11.0
Installacion De Open Suse 11.0
 
PresentacióN De La Tesis
PresentacióN De La TesisPresentacióN De La Tesis
PresentacióN De La Tesis
 

Ähnlich wie No más curva.

Branding práctico: el Drupal Visual Language Guide
Branding práctico: el Drupal Visual Language GuideBranding práctico: el Drupal Visual Language Guide
Branding práctico: el Drupal Visual Language GuideIgnacio Segura
 
[DrupalCampSpain2022] Introducción al desarrollo de módulos en Drupal 9
[DrupalCampSpain2022] Introducción al desarrollo de módulos en Drupal 9[DrupalCampSpain2022] Introducción al desarrollo de módulos en Drupal 9
[DrupalCampSpain2022] Introducción al desarrollo de módulos en Drupal 9Keopx
 
Plantillas en Drupal 6
Plantillas en Drupal 6Plantillas en Drupal 6
Plantillas en Drupal 6Manuel Garcia
 
Proyectos escalables con Drupal
Proyectos escalables con DrupalProyectos escalables con Drupal
Proyectos escalables con DrupalPablo Cerda
 
Por qué Drupal es un potente gestor de contenidos #OpenExpoDay 2014
Por qué Drupal es un potente gestor de contenidos #OpenExpoDay 2014Por qué Drupal es un potente gestor de contenidos #OpenExpoDay 2014
Por qué Drupal es un potente gestor de contenidos #OpenExpoDay 2014OpenExpoES
 
Por qué Drupal es un potente gestor de contenidos
Por qué Drupal es un potente gestor de contenidosPor qué Drupal es un potente gestor de contenidos
Por qué Drupal es un potente gestor de contenidosJuampy NR
 
Marketing, Comunidad, Empleo y Negocio Internacional basado en Drupal
Marketing, Comunidad, Empleo y Negocio Internacional basado en DrupalMarketing, Comunidad, Empleo y Negocio Internacional basado en Drupal
Marketing, Comunidad, Empleo y Negocio Internacional basado en DrupalLa Drupalera
 
Drupal, mucho más que un CMS
Drupal, mucho más que un CMSDrupal, mucho más que un CMS
Drupal, mucho más que un CMSCristian Mamani
 
Introduccion a Drupal 6 e-ghost
Introduccion a Drupal 6 e-ghostIntroduccion a Drupal 6 e-ghost
Introduccion a Drupal 6 e-ghostKeopx
 
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intentoDiseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intentoAna Cirujano
 
Drupal 7: mucho más que una nueva versión (para desarrolladores)
Drupal 7: mucho más que una nueva versión (para desarrolladores)Drupal 7: mucho más que una nueva versión (para desarrolladores)
Drupal 7: mucho más que una nueva versión (para desarrolladores)Ymbra
 
Si tu aplicación no responde rápido pierdes clientes
Si tu aplicación no responde rápido pierdes clientesSi tu aplicación no responde rápido pierdes clientes
Si tu aplicación no responde rápido pierdes clientesJesús Franco
 
Presentacion de dreamweaver
Presentacion de dreamweaverPresentacion de dreamweaver
Presentacion de dreamweavergeo-cualchi
 
Presentación Drupal Commerce en OpenExpo Ecommerce
Presentación Drupal Commerce en OpenExpo EcommercePresentación Drupal Commerce en OpenExpo Ecommerce
Presentación Drupal Commerce en OpenExpo EcommerceOpenExpo
 
Presentación Jornada Drupal Sevilla Febrero 2015
Presentación Jornada Drupal Sevilla Febrero 2015Presentación Jornada Drupal Sevilla Febrero 2015
Presentación Jornada Drupal Sevilla Febrero 2015Javier Prada Oliva
 
Revista hdmagazine
Revista hdmagazineRevista hdmagazine
Revista hdmagazineJorge Brunal
 

Ähnlich wie No más curva. (20)

Drupal8 Symfony2 en DrupalCS
Drupal8 Symfony2 en DrupalCSDrupal8 Symfony2 en DrupalCS
Drupal8 Symfony2 en DrupalCS
 
Branding práctico: el Drupal Visual Language Guide
Branding práctico: el Drupal Visual Language GuideBranding práctico: el Drupal Visual Language Guide
Branding práctico: el Drupal Visual Language Guide
 
Cw15 conoce drupal_v28
Cw15 conoce drupal_v28Cw15 conoce drupal_v28
Cw15 conoce drupal_v28
 
[DrupalCampSpain2022] Introducción al desarrollo de módulos en Drupal 9
[DrupalCampSpain2022] Introducción al desarrollo de módulos en Drupal 9[DrupalCampSpain2022] Introducción al desarrollo de módulos en Drupal 9
[DrupalCampSpain2022] Introducción al desarrollo de módulos en Drupal 9
 
Plantillas en Drupal 6
Plantillas en Drupal 6Plantillas en Drupal 6
Plantillas en Drupal 6
 
Proyectos escalables con Drupal
Proyectos escalables con DrupalProyectos escalables con Drupal
Proyectos escalables con Drupal
 
Por qué Drupal es un potente gestor de contenidos #OpenExpoDay 2014
Por qué Drupal es un potente gestor de contenidos #OpenExpoDay 2014Por qué Drupal es un potente gestor de contenidos #OpenExpoDay 2014
Por qué Drupal es un potente gestor de contenidos #OpenExpoDay 2014
 
Por qué Drupal es un potente gestor de contenidos
Por qué Drupal es un potente gestor de contenidosPor qué Drupal es un potente gestor de contenidos
Por qué Drupal es un potente gestor de contenidos
 
Frontend Developer
Frontend DeveloperFrontend Developer
Frontend Developer
 
Day01
Day01Day01
Day01
 
Marketing, Comunidad, Empleo y Negocio Internacional basado en Drupal
Marketing, Comunidad, Empleo y Negocio Internacional basado en DrupalMarketing, Comunidad, Empleo y Negocio Internacional basado en Drupal
Marketing, Comunidad, Empleo y Negocio Internacional basado en Drupal
 
Drupal, mucho más que un CMS
Drupal, mucho más que un CMSDrupal, mucho más que un CMS
Drupal, mucho más que un CMS
 
Introduccion a Drupal 6 e-ghost
Introduccion a Drupal 6 e-ghostIntroduccion a Drupal 6 e-ghost
Introduccion a Drupal 6 e-ghost
 
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intentoDiseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
 
Drupal 7: mucho más que una nueva versión (para desarrolladores)
Drupal 7: mucho más que una nueva versión (para desarrolladores)Drupal 7: mucho más que una nueva versión (para desarrolladores)
Drupal 7: mucho más que una nueva versión (para desarrolladores)
 
Si tu aplicación no responde rápido pierdes clientes
Si tu aplicación no responde rápido pierdes clientesSi tu aplicación no responde rápido pierdes clientes
Si tu aplicación no responde rápido pierdes clientes
 
Presentacion de dreamweaver
Presentacion de dreamweaverPresentacion de dreamweaver
Presentacion de dreamweaver
 
Presentación Drupal Commerce en OpenExpo Ecommerce
Presentación Drupal Commerce en OpenExpo EcommercePresentación Drupal Commerce en OpenExpo Ecommerce
Presentación Drupal Commerce en OpenExpo Ecommerce
 
Presentación Jornada Drupal Sevilla Febrero 2015
Presentación Jornada Drupal Sevilla Febrero 2015Presentación Jornada Drupal Sevilla Febrero 2015
Presentación Jornada Drupal Sevilla Febrero 2015
 
Revista hdmagazine
Revista hdmagazineRevista hdmagazine
Revista hdmagazine
 

Mehr von Jose Leiva

Introducción a PWA
Introducción a PWAIntroducción a PWA
Introducción a PWAJose Leiva
 
CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016Jose Leiva
 
CSS, planeando para el futuro
CSS, planeando para el futuroCSS, planeando para el futuro
CSS, planeando para el futuroJose Leiva
 
Sass & Compass - DrupalCamp CR13
Sass & Compass - DrupalCamp CR13Sass & Compass - DrupalCamp CR13
Sass & Compass - DrupalCamp CR13Jose Leiva
 
Pruebas de usabilidad, guerrilla style
Pruebas de usabilidad, guerrilla stylePruebas de usabilidad, guerrilla style
Pruebas de usabilidad, guerrilla styleJose Leiva
 
HTML5 101 - Drupaleada jun12
HTML5 101 - Drupaleada jun12HTML5 101 - Drupaleada jun12
HTML5 101 - Drupaleada jun12Jose Leiva
 
Drupal - prototipos rápidos
Drupal - prototipos rápidosDrupal - prototipos rápidos
Drupal - prototipos rápidosJose Leiva
 
Año Nuevo, Herramientas Nuevas
Año Nuevo,  Herramientas NuevasAño Nuevo,  Herramientas Nuevas
Año Nuevo, Herramientas NuevasJose Leiva
 
Hablemos sobre Drupal vs WordPress
Hablemos sobre Drupal vs WordPressHablemos sobre Drupal vs WordPress
Hablemos sobre Drupal vs WordPressJose Leiva
 

Mehr von Jose Leiva (10)

Introducción a PWA
Introducción a PWAIntroducción a PWA
Introducción a PWA
 
CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016
 
CSS, planeando para el futuro
CSS, planeando para el futuroCSS, planeando para el futuro
CSS, planeando para el futuro
 
Sass & Compass - DrupalCamp CR13
Sass & Compass - DrupalCamp CR13Sass & Compass - DrupalCamp CR13
Sass & Compass - DrupalCamp CR13
 
Intro a Sass
Intro a Sass Intro a Sass
Intro a Sass
 
Pruebas de usabilidad, guerrilla style
Pruebas de usabilidad, guerrilla stylePruebas de usabilidad, guerrilla style
Pruebas de usabilidad, guerrilla style
 
HTML5 101 - Drupaleada jun12
HTML5 101 - Drupaleada jun12HTML5 101 - Drupaleada jun12
HTML5 101 - Drupaleada jun12
 
Drupal - prototipos rápidos
Drupal - prototipos rápidosDrupal - prototipos rápidos
Drupal - prototipos rápidos
 
Año Nuevo, Herramientas Nuevas
Año Nuevo,  Herramientas NuevasAño Nuevo,  Herramientas Nuevas
Año Nuevo, Herramientas Nuevas
 
Hablemos sobre Drupal vs WordPress
Hablemos sobre Drupal vs WordPressHablemos sobre Drupal vs WordPress
Hablemos sobre Drupal vs WordPress
 

Kürzlich hochgeladen

diseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxdiseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxlou lou
 
Simuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosSimuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosErickOv
 
elementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxelementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxlou lou
 
Catalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevanteCatalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevantesantiagovelez61
 
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...ORIETTA POLIFRONI
 
periodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfperiodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfacoellob
 
Espiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfEspiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfjpgaraglia03
 

Kürzlich hochgeladen (7)

diseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxdiseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptx
 
Simuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosSimuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito Electronicos
 
elementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxelementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptx
 
Catalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevanteCatalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevante
 
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
 
periodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfperiodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdf
 
Espiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfEspiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdf
 

No más curva.