Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Estándares web y soporte en navegadores

1,774 views

Published on

Document Freedom Day 2011, Panama

Published in: Design
  • Be the first to comment

  • Be the first to like this

Estándares web y soporte en navegadores

  1. 1. Estándares web y el soporteen navegadoresDemóstenes García
  2. 2. ¿Cómo se originan?
  3. 3. El Problema
  4. 4. • El cliente = Usuario final del sitio.• El zapatero = El desarrollador del sitio. No tendrá que hacer múltiples versiones.• Medidas predefinidas = estándares web.• Resultado = todos felices = ☺☺☺
  5. 5. ¿Qué son los estándares web?
  6. 6. ¿Qué son?Especificaciones técnicas.Definen y describen aspectos de la WWW.Tendencia, buenas prácticas, filosofías.Recomendaciones.Punto en común.
  7. 7. ¿Qué incluyen?Recomendaciones HTML, XHTML, SVG.Recomendaciones CSS.Estándares ECMAScript (JavaScript).Recomendaciones DOM.URI, HTTP, MIME.Recomendaciones para accesabilidad y semántica.
  8. 8. Ok… pero ¿cuál es el fin?
  9. 9. Consistencia
  10. 10. Facilidad de implementación
  11. 11. Reduce costos
  12. 12. Experiencia de Usuario
  13. 13. Nuevos exploradores
  14. 14. ¿Cómo sigo los estándares?
  15. 15. Sigue el checklist:¿Usas un correcto Doctype? (strict, etc.)¿Usas un correcto Character set?¿Escribes código válido (HTML, CSS, etc.)?¿Qué tal es el rendimiento?¿Separaste el CSS y el HTML?¿Verificaste si es fácil de acceder (alt, forms, em en vez de px, etc.)?¿Sigue una jerarquía? ¿Funciona sin estilos? Revisar semántica
  16. 16. Código XHTML estandarizado<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0  Transitional//EN"  Doctype "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐ transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" /> Charset <title>Hola Mundo</title> <style type="text/css" media="screen"> body {font‐size : 1.1em} CSS separado </style> </head> <body> <h1>Hola Mundo</h1> Jerarquía <p>Lorem Ipsum dolor sit amet</p> Y semántica </body></html>
  17. 17. El soporte en los navegadores
  18. 18. Muchos de donde escoger…• Google Chrome.• Opera.• Firefox.• Internet Explorer.• Maxthon.• SeaMonkey.• Amaya.• Safari.• Konqueror.
  19. 19. Lastimosamente, no todos son  iguales… (y algunos se encargan de darnos  horas innecesarias de trabajo extra)
  20. 20. Motores de renderizado• Gecko: Mozilla -> Firefox, SeaMonkey.• Trident: Microsoft -> Internet Explorer.• Presto: Opera.• KHTML engine: KDE -> Konqueror – WebKit: Apple -> Safari, Google -> Chrome• Javascript: Nitro (Safari), TraceMonkey (Firefox 4), Carakan (Opera), V8 (Chrome), Chakra (IE 9).
  21. 21. Los “Acid Tests”
  22. 22. ¿Qué son los “Acid Tests”?• Son pruebas hechas por la WSP.• Ponen a prueba los navegadores.• Revisan el soporte de los navegadores y los estándares soportados.• Acid1 (1998): CSS 1.0.• Acid2 (2005): HTML, CSS 2, PNG, data URI.• Acid3 (2007): Acid2 + DOM Nivel 2 y ECMASscript.
  23. 23. Respuestas Acid2 y Acid3 Más información: http://www.acidtests.org/
  24. 24. Resultados Acid3Explorador Versión PuntajeInternet Explorer 6 12/100Internet Explorer 7 14/100Internet Explorer 8 20/100Internet Explorer 9 95/100Firefox 3.7 96/100Firefox 4 97/100Google Chrome 4 a 10 100/100Safari 5 100/100Opera 11 100/100Blackberry BB OS 6 100/100Opera Mini 5 98/100
  25. 25. Recomendaciones finales
  26. 26. Para usuarios• Escoge un explorador adecuado.• Mantén tu explorador actualizado y usa exploradores que lo hagan a menudo.• Contribuye con la educación.
  27. 27. Para desarrolladores• Siempre implementar con estándares.• Mantenerse actualizado.• Si no has leído sobre CSS3 y HTML5 ya es hora de comenzar.• Promueve el uso de navegadores que cumplen con estándares.• Promueve las buenas prácticas.• Usa el checklist ☺
  28. 28. Links de interés• http://www.webdevout.net/browser- support• http://www.acidtests.org/• http://en.wikipedia.org/wiki/Comparison_o f_web_browsers• http://www.webstandards.org/• http://www.w3.org/
  29. 29. Contacto• Web: http://www.demogar.com• Blog: http://blog.demogar.com• Twitter: @demogar• E-mail: me@demogar.com• Github: http://www.github.com/demogar
  30. 30. Estándares Web y el Soporte en Navegadores by Demostenes Garcia is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported License. http://creativecommons.org/licenses/by-nc-sa/3.0/

×