Progressive Enhancement

492 views

Published on

El cambio permanente que vivimos en el mundo del desarrollo web requiere que todos nos pongamos al día permanentemente respecto a todas las opciones que tenemos a nuestro alcance, y más importante aún, las opciones que los usuarios poseen. Esta charla pretende recorrer las distintas opciones y técnicas que podemos implementar hoy en día para mejorar la experiencia de todos nuestros usuarios, tanto en código HTML y CSS así como también el uso correcto de JavaScript.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
492
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Progressive Enhancement

  1. 1. JavierEspaña PROGRESSIVE ENHANCEMENT HACIENDO DE LA WEB UN LUGAR PARA TODOS El cambio permanente que vivimos en el mundo del desarrollo web requiere que todos nos pongamos al día permanentemente respecto a todas las opciones que tenemos a nuestro alcance, y más importante aún, las opciones que los usuarios poseen. Esta charla pretende recorrer las distintas opciones y técnicas que podemos implementar hoy en día para mejorar la experiencia de todos nuestros usuarios, tanto en código HTML y CSS así como también el uso correcto de JavaScript. Introducción Prácticas ConsultasUn repaso de la charla y mis más de 10 años Plantearemos las opciones de desarrollo que Escucharé sus preguntas y trataremos deen diseño y desarrollo web. poseemos hoy en día. llegar a resoluciones aptas. Contacto©JavierEspaña Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana
  2. 2. SI TE INTERESA LA CHARLA Y quieres que la exponga en un evento, empresa o conferencia no dudes en contactarme a: info@javierespana.com Por favor no robes este materialJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 1DISEÑO Y DESARROLLO WEB
  3. 3. PEQUEÑA INTRODUCCIÓNJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 2DISEÑO Y DESARROLLO WEB
  4. 4. UNAS PALABRAS SOBRE MÍ javierespana.comJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 3DISEÑO Y DESARROLLO WEB
  5. 5. ALGUNOS DE MIS TRABAJOS MTV EMA 2011 Steve Argyle Kid’s Choice Awards 2011 http://ema.mtv.co.uk/ http://www.steveargyle.com/ http://kca.mundonick.com/JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 4DISEÑO Y DESARROLLO WEB
  6. 6. ALGUNOS DE MIS TRABAJOS Cuenca D’Amico MTV at the Movies Sunmesa Events http://www.cuencadamico.com.ar/ http://movies.mtv.co.uk/ http://www.sunmesaevents.com/JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 5DISEÑO Y DESARROLLO WEB
  7. 7. ACERCA DE ESTA CHARLAJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 6DISEÑO Y DESARROLLO WEB
  8. 8. PROGRESSIVE ENHANCEMENTJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 7DISEÑO Y DESARROLLO WEB
  9. 9. ¿QUÉ ES? ¿PARA QUÉ SIRVE? Es una manera de encarar el desarrollo web para mejorar la experiencia del usuario >JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 8DISEÑO Y DESARROLLO WEB
  10. 10. ¿SUENA FAMILAR? Es fácil confundir el término con “Graceful Degradation”, pero no es lo mismoJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 9DISEÑO Y DESARROLLO WEB
  11. 11. TÉCNICAS HTMLJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 10DISEÑO Y DESARROLLO WEB
  12. 12. MEJOREMOS EL CONTENIDO Prestemos atención para usar tags semánticamente correctos >JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 11DISEÑO Y DESARROLLO WEB
  13. 13. NUEVAS DECLARACIONES Aprovechemos las nuevas definiciones de documentos de HTML5 >JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 12DISEÑO Y DESARROLLO WEB
  14. 14. USEMOS MICROFORMATOS Con estos formatos a nuestro alcance podemos lograr mejoras en nuestros sitios >JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 13DISEÑO Y DESARROLLO WEB
  15. 15. TAGS HTML5 Podemos usarlos hoy en día sin problemas, con o sin plug-ins >JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 14DISEÑO Y DESARROLLO WEB
  16. 16. TÉCNICAS CSSJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 15DISEÑO Y DESARROLLO WEB
  17. 17. SELECTORES COMPLEJOS Tomemos como un beneficio que ciertos navegadores no los soporten +JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 16DISEÑO Y DESARROLLO WEB
  18. 18. BLOQUES @MEDIA Cada usuario tiene sus necesidades y para nosotros es fácil diferenciarlos +JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 17DISEÑO Y DESARROLLO WEB
  19. 19. MEJORAS CON CSS3 Hoy en día podemos aprovechar al máximo muchos aspectos de CSS3 sin problemas >JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 18DISEÑO Y DESARROLLO WEB
  20. 20. MEJORAS CON CSS3 Hoy en día podemos aprovechar al máximo muchos aspectos de CSS3 sin problemas >JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 19DISEÑO Y DESARROLLO WEB
  21. 21. TÉCNICAS JAVASCRIPTJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 20DISEÑO Y DESARROLLO WEB
  22. 22. SCRIPTS UNOBSTRUSIVE Mantener los scripts separados del markup y lo más genéricos posibles >JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 21DISEÑO Y DESARROLLO WEB
  23. 23. ¿USUARIOS SIN JS? Siempre estar preparados para todos nuestros posibles visitantes >JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 22DISEÑO Y DESARROLLO WEB
  24. 24. DUEÑOS DE SU MARKUP Aprovechando la separación dejemos que el JS cree los elementos que necesite >JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 23DISEÑO Y DESARROLLO WEB
  25. 25. CUIDADOS GENERALESJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 24DISEÑO Y DESARROLLO WEB
  26. 26. IMPORTANTES DETALLES Cosas para no olvidar en nuestros desarrollos Validar Minificar Técnicas / ScriptsJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 25DISEÑO Y DESARROLLO WEB
  27. 27. ¡MUCHAS GRACIAS!JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 26DISEÑO Y DESARROLLO WEB
  28. 28. SIGAMOS EN CONTACTO Web: javierespana.com Blog: moonward.net Twitter: @javierespana ¿PREGUNTAS?JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 27DISEÑO Y DESARROLLO WEB
  29. 29. ¡GRACIAS POR TODO!JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 28DISEÑO Y DESARROLLO WEB

×