SlideShare una empresa de Scribd logo
1 de 37
Estándares web y el soporte
en navegadores
Demóstenes García
¿Cómo se originan?
El Problema
• 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 = ☺☺☺
¿Qué son los estándares
        web?
¿Qué son?
Especificaciones técnicas.

Definen y describen aspectos de la WWW.

Tendencia, buenas prácticas, filosofías.

Recomendaciones.

Punto en común.
¿Qué incluyen?
Recomendaciones HTML, XHTML, SVG.

Recomendaciones CSS.

Estándares ECMAScript (JavaScript).

Recomendaciones DOM.

URI, HTTP, MIME.

Recomendaciones para accesabilidad y semántica.
Ok… pero ¿cuál es el fin?
Consistencia
Facilidad de implementación
Reduce costos
Experiencia de Usuario
Nuevos exploradores
¿Cómo sigo los estándares?
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
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>
El soporte en los navegadores
Muchos de donde escoger…
•   Google Chrome.
•   Opera.
•   Firefox.
•   Internet Explorer.
•   Maxthon.
•   SeaMonkey.
•   Amaya.
•   Safari.
•   Konqueror.
Lastimosamente, no todos son 
          iguales…
   (y algunos se encargan de darnos 
  horas innecesarias de trabajo extra)
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).
Los “Acid Tests”
¿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.
Respuestas Acid2 y Acid3




    Más información: http://www.acidtests.org/
Resultados Acid3
Explorador          Versión   Puntaje
Internet Explorer   6         12/100
Internet Explorer   7         14/100
Internet Explorer   8         20/100
Internet Explorer   9         95/100
Firefox             3.7       96/100
Firefox             4         97/100
Google Chrome       4 a 10    100/100
Safari              5         100/100
Opera               11        100/100
Blackberry          BB OS 6   100/100
Opera               Mini 5    98/100
Recomendaciones finales
Para usuarios
• Escoge un explorador adecuado.
• Mantén tu explorador actualizado y usa
  exploradores que lo hagan a menudo.
• Contribuye con la educación.
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 ☺
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/
Contacto
•   Web:       http://www.demogar.com
•   Blog:      http://blog.demogar.com
•   Twitter:   @demogar
•   E-mail:    me@demogar.com
•   Github:    http://www.github.com/demogar
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/

Más contenido relacionado

La actualidad más candente

Sobre los navegadores de internet
Sobre los navegadores de internetSobre los navegadores de internet
Sobre los navegadores de internet
etelvinagrefa
 
Dn12 u3 a1_maj
Dn12 u3 a1_majDn12 u3 a1_maj
Dn12 u3 a1_maj
janethnna
 
Ventajas y desventajas de los navegadores
Ventajas y desventajas de los navegadoresVentajas y desventajas de los navegadores
Ventajas y desventajas de los navegadores
Juangonzsa
 
Dn11 u3 a4_ccl
Dn11 u3 a4_cclDn11 u3 a4_ccl
Dn11 u3 a4_ccl
LaaowW
 
4. cuadro de los browser mas utilizados
4. cuadro de los browser mas utilizados4. cuadro de los browser mas utilizados
4. cuadro de los browser mas utilizados
martineznorvertoo
 
2. mapa conceptual medios de transmision
2. mapa conceptual medios de transmision2. mapa conceptual medios de transmision
2. mapa conceptual medios de transmision
martineznorvertoo
 

La actualidad más candente (17)

Sobre los navegadores de internet
Sobre los navegadores de internetSobre los navegadores de internet
Sobre los navegadores de internet
 
Dn12 u3 a1_maj
Dn12 u3 a1_majDn12 u3 a1_maj
Dn12 u3 a1_maj
 
Navegadores
NavegadoresNavegadores
Navegadores
 
Ventajas y desventajas de los navegadores
Ventajas y desventajas de los navegadoresVentajas y desventajas de los navegadores
Ventajas y desventajas de los navegadores
 
Webs
Webs Webs
Webs
 
Browser más utilizados características ventajas y desventajas
Browser más utilizados características ventajas y desventajas  Browser más utilizados características ventajas y desventajas
Browser más utilizados características ventajas y desventajas
 
Tutorial 3
Tutorial 3 Tutorial 3
Tutorial 3
 
Navegador seamonkey
Navegador seamonkeyNavegador seamonkey
Navegador seamonkey
 
Navegadores cuadro comparativo
Navegadores cuadro comparativoNavegadores cuadro comparativo
Navegadores cuadro comparativo
 
Que son navegadores web
Que son navegadores webQue son navegadores web
Que son navegadores web
 
Dn11 u3 a4_ccl
Dn11 u3 a4_cclDn11 u3 a4_ccl
Dn11 u3 a4_ccl
 
Melanie Giselle Rojas Linares
Melanie Giselle Rojas Linares   Melanie Giselle Rojas Linares
Melanie Giselle Rojas Linares
 
Internet
InternetInternet
Internet
 
CMS
CMSCMS
CMS
 
4. cuadro de los browser mas utilizados
4. cuadro de los browser mas utilizados4. cuadro de los browser mas utilizados
4. cuadro de los browser mas utilizados
 
2. mapa conceptual medios de transmision
2. mapa conceptual medios de transmision2. mapa conceptual medios de transmision
2. mapa conceptual medios de transmision
 
Unidad 1 taller 3
Unidad 1 taller 3Unidad 1 taller 3
Unidad 1 taller 3
 

Destacado (8)

Elicitacion de requerimientos
Elicitacion de requerimientosElicitacion de requerimientos
Elicitacion de requerimientos
 
Requirements Elicitation
Requirements ElicitationRequirements Elicitation
Requirements Elicitation
 
BABoK V2 Requirements Elicitation (RE)
BABoK V2 Requirements Elicitation (RE)BABoK V2 Requirements Elicitation (RE)
BABoK V2 Requirements Elicitation (RE)
 
Metodología para la elicitación de requisitos de sistemas software
Metodología para la elicitación de requisitos de sistemas softwareMetodología para la elicitación de requisitos de sistemas software
Metodología para la elicitación de requisitos de sistemas software
 
Doc. lista de requerimientos ver. 1.0
Doc. lista de requerimientos ver. 1.0Doc. lista de requerimientos ver. 1.0
Doc. lista de requerimientos ver. 1.0
 
13 matriz de rastreabilidad de requisitos PMI
13 matriz de rastreabilidad de requisitos PMI13 matriz de rastreabilidad de requisitos PMI
13 matriz de rastreabilidad de requisitos PMI
 
Requerimientos funcionales y no funcionales de la aplicación
Requerimientos funcionales y no funcionales de la aplicaciónRequerimientos funcionales y no funcionales de la aplicación
Requerimientos funcionales y no funcionales de la aplicación
 
Listado de-requerimientos
Listado de-requerimientosListado de-requerimientos
Listado de-requerimientos
 

Similar a Estándares web y soporte en navegadores

Programación en ambiente web - Semana 2.pptx
Programación en ambiente web - Semana 2.pptxProgramación en ambiente web - Semana 2.pptx
Programación en ambiente web - Semana 2.pptx
NoraDenisseOcampo1
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
Avanet
 
Html5 - El futuro de la web
Html5 - El futuro de la webHtml5 - El futuro de la web
Html5 - El futuro de la web
Joan Fernández
 
Dispositivas de informatica
Dispositivas de informaticaDispositivas de informatica
Dispositivas de informatica
agi1992
 

Similar a Estándares web y soporte en navegadores (20)

Web matrix. armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix.  armando nuestros sitios dinámicamente con html5, php y mysqlWeb matrix.  armando nuestros sitios dinámicamente con html5, php y mysql
Web matrix. armando nuestros sitios dinámicamente con html5, php y mysql
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Cookies y otras tecnologías de monitorización en internet
Cookies y otras tecnologías de monitorización en internetCookies y otras tecnologías de monitorización en internet
Cookies y otras tecnologías de monitorización en internet
 
Programación en ambiente web - Semana 2.pptx
Programación en ambiente web - Semana 2.pptxProgramación en ambiente web - Semana 2.pptx
Programación en ambiente web - Semana 2.pptx
 
Webinar: Migrar el testing a open source
Webinar: Migrar el testing a open sourceWebinar: Migrar el testing a open source
Webinar: Migrar el testing a open source
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Html5 - El futuro de la web
Html5 - El futuro de la webHtml5 - El futuro de la web
Html5 - El futuro de la web
 
Clientes web
Clientes webClientes web
Clientes web
 
navegadores
navegadoresnavegadores
navegadores
 
"Al rico" PHP
"Al rico" PHP"Al rico" PHP
"Al rico" PHP
 
Introduccion html5
Introduccion html5Introduccion html5
Introduccion html5
 
Trabajo tutoria 3
Trabajo tutoria 3Trabajo tutoria 3
Trabajo tutoria 3
 
ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
Web20
Web20Web20
Web20
 
Presentación RodrigoPolo.com @ Barcamp Guatemala '09
Presentación RodrigoPolo.com @ Barcamp Guatemala '09Presentación RodrigoPolo.com @ Barcamp Guatemala '09
Presentación RodrigoPolo.com @ Barcamp Guatemala '09
 
Estandares Web
Estandares WebEstandares Web
Estandares Web
 
Liferay Symposium 2014 - Business case: RACE
Liferay Symposium 2014 - Business case: RACE Liferay Symposium 2014 - Business case: RACE
Liferay Symposium 2014 - Business case: RACE
 
Dispositivas de informatica
Dispositivas de informaticaDispositivas de informatica
Dispositivas de informatica
 
Backbeam
BackbeamBackbeam
Backbeam
 

Último

140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
ilvrosiebp
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
meloamerica93
 

Último (20)

140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
Bianchi_Susana_Historia_social_del_mundo-34-43.pdf
Bianchi_Susana_Historia_social_del_mundo-34-43.pdfBianchi_Susana_Historia_social_del_mundo-34-43.pdf
Bianchi_Susana_Historia_social_del_mundo-34-43.pdf
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS  EN LA LIBERTADINTERVENCIONES DE CARRETERAS  EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 

Estándares web y soporte en navegadores