Tesis Técnico de Nivel Superior en Informatice Iacc

PROYECTO DE TÍTULO: EL CUMPLIMIENTO DE LOS ESTÁNDARES WEB ESTABLECIDOS POR LA W3C
INSTITUTO IACC
TÉCNICO DE NIVEL SUPERIOR EN INFORMÁTICA
EL CUMPLIMIENTO DE LOS ESTADARES WEB ESTABLECIDOS

POR LA W3C
NOMBRE PROFESOR(A) GUÍA: JUAN CARLOS MOLINA DUARTE

NOMBRE PROFESOR(A) METODÓLOGO: JUAN CARLOS MOLINA DUARTE
NOMBRE DEL ALUMNO(A): CARLOS ANTONIO ARAVENA DIAZ
26/11/2018
24
DEDICATORIA
A mi pareja Gladys Cristina Verdejo Riffo por su apoyo incondicional, la que me acompaño, guio y
me motivo a seguir el camino por esta hermosa carrera y por el amor que me entrega a cada
instante.
A mis suegros Sergio y Gladys por su apoyo incondicional e impulsarme día a día a estudiar.
A mi cuñado Esteban por escucharme en os momentos difíciles.
A mi cuñada Millaray por facilitarme la ayuda necesaria.
A mis familiares y amigos por creer en mí y por brindarme su apoyo.
AGRADECIMIENTOS
24
Después de un largo periodo de arduo trabajo, finalmente ha llegado a su término estos dos años y
medio llenos de emociones y sentimientos de diversas índoles, obteniendo como resultados la
entrega del trabajo de título del cual me siento enormemente orgulloso, es por eso que no puedo
dejar d agradecer a todas las personas que de una u otra forma cooperaron para que este sueño se
realizara.
Agradecer primeramente a dios por guiarme en este largo camino y darme fuerzas, igualmente a
mi familia por el apoyo, por la crianza y los valores entregados, ya que sin su ayuda no hubiera
llegado este momento.
No quiero terminar este humilde escrito sin dar las gracias a mi profesor guía por su apoyo
“Gracias profesor Jjuan Carlos Molina Duarte “.
También agradecer a todos los profesores que estuvieron estos años de estudio formándome en
este proceso educativo con su sabiduría y experiencia convirtiéndome en un profesional
competente y de calidad en mi futuro laboral. “Muchas Gracias”
1. RESUMEN
El presente trabajo de título consiste en una investigación, que tiene como objetivo general es
evaluar el de los estándares web establecidos por la W3C, en páginas web operativas en Chile de
comercio electrónico. Y sus 3 objetivos específicos son los siguientes: 1.-registrar información
sobre los estándares web establecidos por la W3C. 2.- Analizar una totalidad de 10 páginas web
operativas en Chile de comercio electrónico a través del validador Mobiready. 3.- Mencionar los
errores más comunes de dichas páginas.
24
La World Wide Web (WWW) comenzó a desarrollarse a principios de la década de los noventa
como un medio para intercambiar documentación entre científicos e investigadores. El desafío que
asumió en sus comienzos fue comunicar datos entre diferentes computadoras sin importar su
arquitectura de hardware o el software que emplearan. Como señala Berners-Lee (2000), las
computadoras simplemente no estaban facultadas para compartir información porque los
fabricantes creaban sistemas cerrados incapaces de dialogar entre sí.
El principal objetivo de la creación de los estándares web, es la “accesibilidad”. Esto es, que los
contenidos de Internet sean accesibles para todos, desde cualquier lugar. Es poner al alcance de
todo el mundo las herramientas y la información contenida en la World Wide Web, sin importar
cuáles sean las limitaciones tecnológicas, culturales o incluso físicas de los usuarios.
Finalmente, con los resultados obtenidos podre tener noción de cuáles son los errores más
recurrentes en las páginas web operativas de comercio electrónico en Chile.
24
ÍNDICE
1. RESUMEN...................................................................................................................................4
2. INTRODUCCIÓN..........................................................................................................................8
3. OBJETIVOS..................................................................................................................................9
3.1. Objetivo general.................................................................................................................9
3.2. Objetivos específicos..........................................................................................................9
4. EL PROBLEMA U OBJETO DE INVESTIGACIÓN...........................................................................10
5. JUSTIFICACIÓN DE LA INVESTIGACIÓN.....................................................................................11
6. MARCO TEÓRICO......................................................................................................................12
6.1. DEFINICIÓN DE DISEÑO....................................................................................................12
6.2. DEFINICIÓN DE WEB.........................................................................................................12
6.2.1. DEFINICIÓN DE WEB 2.0...........................................................................................14
6.2.2. DEFINICIÓN DE WEB 3.0...........................................................................................15
6.3. DEFINICIÓN DE DISEÑO WEB............................................................................................17
6.3.1. Diseño Web Adaptable.............................................................................................17
6.4. HTML 5.............................................................................................................................19
6.5. CMS..................................................................................................................................20
6.6. definicion de Estándares web...........................................................................................21
6.7. LA W3C.............................................................................................................................23
6.7.1. Historia.....................................................................................................................23
6.7.2. Principios de estándares abiertos.............................................................................23
6.7.3. Criterios de diseño....................................................................................................24
6.7.4. Web sobre todo........................................................................................................24
6.7.5. Web para la interacción rica.....................................................................................24
6.7.6. Web de confianza.....................................................................................................25
6.8. ESTANDARES WEB............................................................................................................25
6.8.1. EL DISEÑO WEB Y LAS APLICACIONES......................................................................26
6.8.1.1. HTML y CSS.......................................................................................................26
6.8.1.2. API web de JavaScript.......................................................................................26
6.8.1.3. Gráficos.............................................................................................................26
6.8.1.4. Audio y video....................................................................................................26
6.8.1.5. Accesibilidad.....................................................................................................26
6.8.1.6. Internacionalización..........................................................................................26
24
6.8.1.7. Web móvil.........................................................................................................27

6.8.1.8. Intimidad..........................................................................................................27
6.8.1.9. Matemáticas en la Web....................................................................................27
6.8.2. WEB DE DISPOSITIVOS.............................................................................................27
6.8.2.1. Web móvil.........................................................................................................27
6.8.2.2. Navegación por voz...........................................................................................27
6.8.2.3. Independencia del dispositivo y adaptación de contenido...............................27
6.8.2.4. Acceso multimodal...........................................................................................28
6.8.2.5. Web y tv............................................................................................................28
6.8.3. ARQUITECTURA WEB...............................................................................................28
6.8.3.1. Principios de arquitectura.................................................................................28
6.8.3.2. Identificadores..................................................................................................28
6.8.3.3. Protocolos.........................................................................................................28
6.8.3.4. Formatos meta..................................................................................................28
6.8.3.5. Consideraciones de protocolo y formato meta.................................................28
6.8.4. WEB SEMÁNTICA.....................................................................................................29
6.8.4.1. Datos vinculados...............................................................................................29
6.8.4.2. Vocabularios.....................................................................................................29
6.8.4.3. Consulta............................................................................................................29
6.8.4.4. Inferencia..........................................................................................................29
6.8.4.5. Aplicaciones verticales......................................................................................30
6.8.5. TECNOLOGÍA XML....................................................................................................30
6.8.5.1. XML Essentials..................................................................................................30
6.8.5.2. Intercambio eficiente........................................................................................30
6.8.5.3. Esquema...........................................................................................................30
6.8.5.4. Seguridad..........................................................................................................30
6.8.5.5. Transformación.................................................................................................30
6.8.5.6. Consulta............................................................................................................31
6.8.5.7. Componentes...................................................................................................31
6.8.5.8. Tratamiento......................................................................................................31
6.8.5.10. Publicación........................................................................................................31
24
6.8.6. WEB DE SERVICIOS...................................................................................................32

6.8.6.1. Pagos................................................................................................................32
6.8.6.2. Seguridad..........................................................................................................32
6.8.7. NAVEGADORES Y HERRAMIENTAS DE AUTOR.........................................................32
6.8.7.1. Navegadores, reproductores multimedia.........................................................32
6.8.7.2. Herramientas de autor, redes sociales..............................................................33
7. HIPÓTESIS.................................................................................................................................34
8. METODOLÓGICO......................................................................................................................35
8.1. Tipo de estudio:................................................................................................................35
8.2. Diseño de la investigación:...............................................................................................35
8.3. Población:.........................................................................................................................35
8.4. Muestra:...........................................................................................................................35
8.5. Viabilidad:.........................................................................................................................35
9. RECOPILACION DE INFORMACIÓN............................................................................................36
9.1. Antena 3 directo...............................................................................................................36
9.2. Ibikes................................................................................................................................39
9.3. Latam................................................................................................................................42
9.4. Supermercado lider..........................................................................................................45
9.5. Casa royal.........................................................................................................................49
9.6. Pc factory..........................................................................................................................53
9.7. Sodimac............................................................................................................................55
9.8. Paris..................................................................................................................................60
9.9. Falabella...........................................................................................................................62
9.10. Ripley............................................................................................................................66
10. ANÁLISIS Y RESULTADOS...........................................................................................................70
11. CONCLUSIONES........................................................................................................................72
12. GLOSARIO.................................................................................................................................73
13. BIBLIOGRAFÍA..............................................................................................................................75
24
2. INTRODUCCIÓN
Durante el desarrollo de mis estudios he podido observar que muchas páginas no dan
cumplimientos a los estándares establecidos por la W3C.
La World Wide Web (WWW) comenzó a desarrollarse a principios de la década de los noventa
como un medio para intercambiar documentación entre científicos e investigadores. El desafío que
asumió en sus comienzos fue comunicar datos entre diferentes computadoras sin importar su
arquitectura de hardware o el software que emplearan. Como señala Berners-Lee (2000), las
computadoras simplemente no estaban facultadas para compartir información porque los
fabricantes creaban sistemas cerrados incapaces de dialogar entre sí.
El presente trabajo de investigación surge a través de mi interés por estar al tanto visiblemente de
¿qué es la W3C?, cuál es su función, misión, visión, etc. Asi de esta presentación adquirir nuevos
conocimientos que me permitirán utilizarlos en el futuro laboral, obteniendo los beneficios que
esta te entrega.
El principal objetivo de la creación de los estándares web, es la “accesibilidad”. Esto es, que los
contenidos de Internet sean accesibles para todos, desde cualquier lugar. Es poner al alcance de
todo el mundo las herramientas y la información contenida en la World Wide Web, sin importar
cuáles sean las limitaciones tecnológicas, culturales o incluso físicas de los usuarios.
Sin embargo, los beneficios de implementar esas pautas no se detienen en el objetivo más que
meritorio en sí mismo, sino que traen aparejadas muchas otras ventajas por las cuales los
desarrolladores están inclinándose cada vez más hacia su puesta en práctica. Algunas de ellas son:
-Los sitios que cumplen estándares son reconocidos por todos los navegadores del mercado
(dejando atrás el grave error de que un sitio se visualizara correctamente en Internet Explorer, pero
no en otros).
-El contenido de los sitios es accesible aun para personas con discapacidades.
Estos son algunos de los beneficios que podemos disfrutar como usuarios si los diseñadores web
cumplieran con los estándares al 100%.
Es por esto que en esta investigación seleccionare 10 páginas web operativas en chile del comercio
electrónico las cuales analizare a través de un validador que me entregara información concreta de
cuáles son los errores cometidos en estas páginas, para posteriormente crear un informe de cuáles
son los errores más comunes que cometen dichas páginas web.
3. OBJETIVOS
24
3.1. OBJETIVO GENERAL
 Evaluar el cumplimiento de los estándares web establecidos por la w3c, en páginas web
operativas en Chile de comercio electrónico.
3.2. OBJETIVOS ESPECÍFICOS
 Registrar información sobre los estándares web establecidos por la w3c.

 Analizar una totalidad de 10 páginas web operativas en chile de comercio electrónico a
través del Validador MobiReady.
 Mencionar los errores más comunes de dichas páginas.
4. EL PROBLEMA U OBJETO DE INVESTIGACIÓN
24
Mi real problema de investigación es que durante mis años de estudio logré observar muchas
páginas web, y puse mi atención en que no todas las páginas logran cumplir con los
estándares establecidos por la W3C.
1. Preguntas de investigación.
¿Cómo voy a investigar?
 Mi investigación la voy a realizar principalmente recopilando información de diversos
canales, planteándome las siguientes interrogantes ¿Qué son los estándares de diseño
web?, ¿Qué es la W3C?, ¿Cuál es su visión y misión?, ¿Que normas se aplican en diseño
web y aplicaciones?, etc.
¿Por qué lo voy a investigar?
 Voy a investigar sobre los estándares de diseño web, porque he logrado observar que
muchas páginas que frecuentemente visito no cumplen con estas normas.
¿De qué manera lo voy a investigar?
 Lo voy a investigar buscando en internet, libros y diversas fuentes de información, también
páginas web operativas en chile de comercio electrónico y validar en Mobiready para
posteriormente observar si dichas páginas cumplen con los estándares web u/o cuales son
errores más comunes.
¿Bajo qué circunstancias voy a investigar?
 Voy investigar para saber si dichas páginas web dan cumplimiento a los estándares y
realizar un diagnóstico de los errores más comunes en el diseño web.
¿Qué factores podrían incidir en mi investigación?
 Los factores que podrían incidir en mi investigación son los siguientes:
24
o Que muchas de las páginas seleccionadas esten protegidas.

o El obtener resultados adversos a los que yo me he planteado, ya que, yo considero
que la mayor parte de las páginas web no respetan los estándares.

o En medio de la investigación se desvié del objetivo general de investigación.
5. JUSTIFICACIÓN DE LA INVESTIGACIÓN.
 El propósito de esta investigación es adquirir la información necesaria para que luego esta
pueda ser proporcionada a un análisis. Es conveniente llevar a cabo esta investigación
porque con los resultados obtenidos podremos evidenciar si realmente los diseñadores
web se guían bajos los estándares y observar cuáles son sus errores más comunes.
 Los beneficios que podríamos obtener a través de esta investigación es mejorar las páginas
web y asi de esta manera integrar a las personas con discapacidad (visual y auditiva). Esto
en mi futuro laboral me permitirá entregar una mejor experiencia para los usuarios en las
áreas de velocidad, la navegación, visibilidad de dichas páginas web.
24
6. MARCO TEÓRICO
6.1. DEFINICIÓN DE DISEÑO
Del italiano disegno, la palabra diseño se refiere a un boceto, bosquejo o esquema que se realiza,
ya sea mentalmente o en un soporte material, antes de concretar la producción de algo. El término
también se emplea para referirse a la apariencia de ciertos productos en cuanto a sus líneas, forma
y funcionalidades.
El concepto de diseño suele utilizarse en el contexto de las artes, la arquitectura, la ingeniería y
otras disciplinas. El momento del diseño implica una representación mental y la posterior
plasmación de dicha idea en algún formato gráfico (visual) para exhibir cómo será la obra que se
planea realizar. El diseño, por lo tanto, puede incluir un dibujo o trazado que anticipe las
características de la obra.
Al diseñar, la persona no sólo tiene en cuenta aspectos estéticos, sino también cuestiones
funcionales y técnicas. Esto exige a los diseñadores estudios, investigaciones y tareas de modelado
que le permitan encontrar la mejor manera de desarrollar el objeto que pretenden crear.
6.2. DEFINICIÓN DE WEB
Web es un vocablo inglés que significa “red”, “telaraña” o “malla”. El concepto se utiliza en el
ámbito tecnológico para nombrar a una red informática y, en general, a Internet (en este caso,
suele escribirse como Web, con la W mayúscula).
El término, de todas formas, tiene varios usos. Además de nombrar a Internet en general, la
palabra web puede servir hacer mención a una página web, un sitio web o hasta un servidor web.
Es importante establecer que este término además forma parte de lo que se conoce como World
Wide Web que es la red informática que se emplea en todo el mundo. A finales de la década de los
años 80 fue cuando nació aquella que permite que hoy cualquier ciudadano, a través de una
conexión a Internet junto a un navegador y un ordenador, pueda acceder desde cualquier rincón
del mundo a la web que desea. Lo puede hacer para informarse, para entretenerse o simplemente
por simple curiosidad.
Una página web es un documento que incluye un archivo HTML con texto, imágenes, videos,
animaciones Flash, etc. Al conjunto de páginas web que suelen formar parte del mismo dominio o
subdominio de Internet se lo conoce como sitio web. Dentro del sitio web, todas las páginas
guardan alguna relación entre sí y están vinculadas mediante vínculos (también conocidos como
enlaces, hipervínculos, hiperenlaces o links).
Muchas son las recomendaciones existentes acerca de las características imprescindibles que debe
tener una página web para ser considerada buena, útil y óptima. No obstante, entre todas ellas
destacaríamos las siguientes:
24
• Debe poseer una jerarquía perfectamente clara. Es decir, todos sus elementos deben
estar claros y organizados en una estructura comprensible.
• Es imprescindible que respete y cumpla con los estándares web establecidos.
• Debe contar con el formato más útil para abordar y tratar los asuntos a los que se refiere.
• No menos importante es que ofrezca al usuario algo más. Es decir, se trata de que este
encuentre en ella información, curiosidades y soluciones.
• Debe tener claro el público al que se dirige para así abordar las cuestiones que más le
interesen y preocupen a aquel.
• Es fundamental que permita una navegación sencilla y rápida, sin grandes tiempos de
espera para que se carguen sus elementos.
• Debe incluir material audiovisual que la haga más atractiva y dinámica.
• Tiene que permitir la interactuación de todos sus internautas.
El servidor web, por otra parte, es un programa creado para transferir páginas web a través de la
implementación del protocolo HTTP. Por extensión, se denomina servidor a la computadora donde
se ejecuta dicho tipo de software.
Web 2.0, por otra parte, es un concepto que permite nombrar a las aplicaciones de Internet que
facilitan la interacción de los usuarios. Los sitios que forman parte de la Web 2.0 posibilitan que los
internautas compartan información y desarrollen tareas de forma mancomunada.
Entre los ejemplos de Web 2.0 pueden nombrarse a las redes sociales (como Facebook), los
portales de alojamiento de videos (YouTube) e imágenes (Flickr) y los servicios wikis (Wikipedia).
6.2.1. DEFINICIÓN DE WEB 2.0
Web 2.0 es un concepto que se acuñó en 2003 y que se refiere al fenómeno social surgido a partir
del desarrollo de diversas aplicaciones en Internet. El término establece una distinción entre la
primera época de la Web (donde el usuario era básicamente un sujeto pasivo que recibía la
información o la publicaba, sin que existieran demasiadas posibilidades para que se generara la
interacción) y la revolución que supuso el auge de los blogs, las redes sociales y otras herramientas
relacionadas.
24
La Web 2.0, por lo tanto, está formada por las plataformas para la publicación de contenidos, como
Blogger, las redes sociales, como Facebook, los servicios conocidos como wikis(Wikipedia) y los
portales de alojamiento de fotos, audio o vídeos (Flickr, YouTube). La esencia de estas herramientas
es la posibilidad de interactuar con el resto de los usuarios o aportar contenido que enriquezca la
experiencia de navegación.
Es importante tener en cuenta que no existe una definición precisa de Web 2.0, aunque es posible
aproximarse a ella estableciendo ciertos parámetros. Una página web que se limita a mostrar
información y que ni siquiera se actualiza, forma parte de la generación 1.0. En cambio, cuando las
páginas ofrecen un nivel considerable de interacción y se actualizan con los aportes de los
usuarios, se habla de Web 2.0.
Cabe mencionar que las diferencias entre la primera y la segunda era de la Web no se basan en un
cambio a nivel tecnológico en los servidores, aunque naturalmente se ha dado un considerable
avance en el hardware; es el enfoque de la Red, los objetivos y la forma en la que los usuarios
comenzaron a percibir la información en línea lo que caracteriza este renacer, que tuvo lugar
silenciosa pero velozmente, a comienzos del nuevo milenio.
Hasta entonces, Internet era un universo de datos mayoritariamente estáticos, una fuente de
consulta revolucionaria que atraía a millones de personas a contemplarla pasivamente. Si bien los
foros y el chat datan de la Web 1.0, éstos se encontraban bien diferenciados de los sitios
tradicionales (tal y como ocurre en la actualidad); navegar era similar a visitar un gran centro
comercial, con infinidad de tiendas, en las cuales era posible comprar productos, pero no alterar
sus vidrieras.
Con la llegada de la Web 2.0, se produjo un fenómeno social que cambió para siempre nuestra
relación con la información, principalmente porque nos hizo parte de ella: en la actualidad, una
noticia acerca de una manifestación en contra del maltrato animal no está completa sin mostrar
cuántos usuarios de Facebook leyeron y disfrutaron de la misma, qué porcentaje de lectores está a
favor del movimiento, y los comentarios, que muchas veces aportan datos importantes o señalan
errores.
Como ocurre con cualquier hito en la historia de la humanidad, la democracia asociada a la Web
2.0 ha impactado seriamente en los medios de comunicación tradicionales, principalmente en
aquéllos que no supieron adaptarse a esta nueva ola de libertades. La última década ha visto el
nacimiento de diversos periódicos y revistas independientes que han sabido establecerse y
conseguir un gran éxito a nivel mundial, opuesto al decaimiento de antiguos colosos.
No es fácil para los periodistas aceptar que bajo un artículo que les tomó días de investigación y
elaboración los usuarios tengan el derecho a insultarlos y despreciarlos, a amenazar a sus familias
o a colgar fotomontajes con su cara; pero éstas son algunas de las consecuencias negativas de la
Web 2.0, y solamente aceptándolas y evitando astutamente los abusos es posible alcanzar el éxito
sin morir en el intento.
Algunos expertos asocian la Web 3.0 a la Web semántica, que consiste en la inclusión de
metadatos semánticos u ontológicos (que describen los contenidos y las relaciones entre los datos)
para que puedan ser rastreados por sistemas de procesamiento.
24
6.2.2. DEFINICIÓN DE WEB 3.0
La noción de web se emplea para nombrar a una red informática y, en especial, a Internet. La idea
de web 3.0 alude a una especie de extensión o de formato particular de la red tradicional.
Es importante tener en cuenta que el concepto no tiene una definición concreta, sino que suele ser
motivo de debate entre especialistas. En principio, para entender qué es la web 3.0, hay que
conocer a qué se refieren las dos “versiones” anteriores de la web.
La web 1.0 es Internet en su sentido clásico: una red descentralizada de computadoras
(ordenadores), vinculadas a través de un protocolo específico. Ingresar al sitio web de un diario
sería un ejemplo del funcionamiento típico de la web 1.0: la información se encuentra en una
computadora y los usuarios, a través de otro equipo, acceden a una copia de la misma para leerla
de forma local.
La web 2.0 se vincula a los servicios que permiten compartir datos e interactuar con gran facilidad.
Las redes sociales y las plataformas de colaboración constituyen la base de esta evolución de
Internet.
La idea de web 3.0, en este contexto, está relacionada a lo que se conoce como web semántica.
Los usuarios y los equipos, en este marco, pueden interactuar con la red mediante un lenguaje
natural, interpretado por el software. De esta manera, acceder a la información resulta más
sencillo. Dicho de otro modo, todos los datos alojados en la web 3.0 deberían ser “entendidos” por
las máquinas, que podrían procesarlos con rapidez.
La web 3.0, en definitiva, está relacionada con la inteligencia artificial. Los sitios web incluso
tendrían la capacidad de conectarse entre sí de acuerdo a los intereses del usuario.
En primer lugar, la razón de que no exista una definición formal o bien una única definición de web
3.0 se debe a que muchas personas están trabajando en su propia visión del futuro de Internet,
por lo cual cada una espera diferentes cambios y mejoras en la experiencia de navegación por la
red.
Retomando la evolución de Internet, podemos decir que en un principio cada sitio tenía su propia
información y no la compartía con otros: texto e imágenes, por ejemplo, que formaban parte del
código mismo y, por lo tanto, eran indivisibles de la página en la que se mostraban.
Las bases de datos lo cambiaron todo, ya que el contenido se desprendió de las páginas para ser
publicado en tantos sitios como las leyes lo permitan; tan sólo la posibilidad de enseñar a nuestros
amigos el artículo o el vídeo que acabamos de disfrutar a través de las redes sociales habría
parecido imposible a comienzos de los 90, y por eso es necesario hablar de web 2.0 cuando se
hace referencia al dinamismo de los datos. El paso siguiente, como ya se puede apreciar en ciertos
casos, es mejorar la accesibilidad.
Una de las barreras que la web 3.0 intenta derribar es la necesidad de operadores humanos para
evaluar y administrar el contenido en Internet. Esto no es nuevo, ya que varias compañías, entre
las que destaca Google por la popularidad de sus productos, llevan años investigando y
desarrollando tecnologías de inteligencia artificial para volver la navegación cada vez más fluida y
enriquecedora.
Actualmente podemos acceder a Internet desde un sinfín de dispositivos diferentes, y esta
variedad acarrea muchos desafíos nuevos para los desarrolladores, tanto en lo que hace a la
estética de los sitios web como en las cuestiones técnicas relacionadas con las aplicaciones y la
24
transferencia de datos. La web 3.0 apunta a que todos podamos disfrutar de la información y de las
herramientas de Internet sin importar el aparato a través del cual nos conectemos, ya que busca
una flexibilidad y una versatilidad que superen las barreras del formato y la estructura.
6.3. DEFINICIÓN DE DISEÑO WEB
El diseño web es una actividad que consiste en la planificación, diseño, implementación y

mantenimiento de sitios web. No es simplemente la implementación del diseño convencional ya
que se abarcan diferentes aspectos como el diseño gráfico web, diseño de interfaz y experiencia de
usuario, como la navegabilidad, interactividad, usabilidad, arquitectura de la información;
interacción de medios, entre los que podemos mencionar audio, texto, imagen, enlaces, video y la
optimización de motores de búsqueda. A menudo muchas personas trabajan en equipos que
cubren los diferentes aspectos del proceso de diseño, aunque existen algunos diseñadores
independientes que trabajan solos.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia
de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el
contacto directo entre el productor y el consumidor de contenidos.
24
El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en
la World Wide Web. A menudo la web se utiliza como medio de expresión plástica en sí. Artistas y
creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y
utilizarlas como un canal más de difusión de su obra.
6.3.1. DISEÑO WEB ADAPTABLE
El diseño de páginas web es la construcción de documentos de hipertexto para su visualización en

diferentes navegadores. Así como asignarle una presentación para diferentes dispositivos de salida
(en una pantalla de computador, en papel, en un teléfono móvil, etc).
Estos documentos o páginas web pueden ser creados:

• Creando archivos de texto en HTML, Asp, Aspx, JavaScript, JSP, Python, Ruby.
• Utilizando un programa visual WYSIWYG o WYSIWYM de creación de páginas.
• Utilizando Script del lado del servidor, para generar la página web.
Para el diseño de páginas web debemos tener en cuenta tres etapas:
1. El diseño visual de la información que se desea editar. En esta etapa se trabaja

distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos
multimedia que se consideren pertinentes. Es importante que antes de 'escribir' la
página web se realice un boceto o prediseño. Esto facilitará tener un orden claro
sobre el diseño.
2. Estructura y relación jerárquica de las páginas del sitio web. Para esto, y
fundamentalmente para manejar los vínculos entre documentos, se creó el
lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen
subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto,
puesto que al pulsar sobre ellos conducen a otras páginas con información
relacionada. La importancia de la estructura y arborescencia web radica en que los
usuarios no siempre entran por la página principal o inicial y en ese caso el sitio
debe darle la respuesta a lo que busca rápido, además permitirle navegar por el
sitio.
3. Posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del

contenido para mejorar la posición en que aparece la página en determinada búsqueda.
El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma de
hipertexto por agente de usuario o navegadores. Esto se puede hacer con un simple editor de
textos (debe guardarse como texto plano, sin ningún tipo de formato y con extensión .html o
.htm). Aprender HTML es relativamente fácil, así que es sencillo crear páginas web de este modo.
Esta era la única manera de generarlas hasta que aparecieron, a mediados de 1996, algunos
24
editores visuales de HTML, como MS FrontPage y Adobe Dreamweaver. Con estas herramientas no
es necesario aprender HTML (aunque sí aconsejable), con lo cual el desarrollador se concentra en
lo más importante, el diseño del documento.
Un buen diseño web es aquel que considera dentro de su desarrollo tanto los elementos básicos
del diseño gráfico (la diagramación, el color, los gráficos y las fuentes) como los fundamentos
técnicos (estructura, compatibilidad, funcionalidad e interactividad) para crear tanto el impacto
visual como la experiencia de usuario óptima para la asimilación del contenido.
El diseño web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en el
HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la
W3C y en lo referente a la web semántica. Debido a la permisibilidad de algunos navegadores web
como Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite
que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc. Esto impide
que ese documento web sea universal e independiente del medio que se utilice para ser mostrado.
La web semántica, por otra parte, aboga por un uso lógico de los elementos según el significado
para el que fueron concebidas. Por ejemplo se utilizará el elemento <P> para marcar párrafos, y
<TABLE> para tabular datos (nunca para disponer de manera visual los diferentes elementos del
documento). En su última instancia, esto ha supuesto una auténtica revolución en el diseño web
puesto que apuesta por separar totalmente el contenido del documento de la visualización.
De esta forma se utiliza el documento HTML únicamente para contener, organizar y estructurar la
información y las hojas de estilo CSS para indicar como se mostrará dicha información en los
diferentes medios (como por ejemplo, una monitor de computadora, un teléfono móvil, impreso
en papel, leída por un sintetizador de voz, etc.). Por lógica, esta metodología beneficia
enormemente la accesibilidad del documento.
También existen páginas dinámicas, las cuales permiten interacción entre la web y el visitante,
proporcionándole herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y
poseen de un panel de control de administración de contenidos. Este permite crear, actualizar y
administrar cantidades ilimitadas de contenido en la misma.
El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus
sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Para conseguir
estos objetivos de accesibilidad se han desarrollado pautas como las del W3C: Pautas de
accesibilidad al contenido Web 1.0 WCAG.
En un principio era sólo texto, pero a medida que ha evolucionado la tecnología, tanto los
ordenadores como las redes de telecomunicaciones, se ha generado nuevas formas de desarrollar
la web. La inclusión de imágenes fue la más significativa, pero también debemos mencionar el
vídeo y la animación, o los espacios 3D, lo que aporta valores estilísticos, de diseño y de
interactividad jamás imaginados antes.
El diseño de páginas web se ha desarrollado a medida que ha evolucionado Internet. En 1992 sólo
había alrededor de 50 sitios web.1 Estadísticas (2005) nos afirmaban que la cantidad de sitios web
ronda los 8000 millones de sitios, a los que diariamente se les suma a raíz de 4400 por día.
24
Rápidamente, su importancia alcanzará las mismas cuotas que la televisión o el teléfono. Datos
recientes estiman que hay alrededor de dos mil millones de páginas colgadas y se espera que en
los próximos años llegue a los ocho mil millones, excediendo el número de habitantes del planeta.
Sin embargo, sólo una fracción de este número es visitado habitualmente por la mayoría de los
usuarios (sólo alrededor de 15 000 sitios webs, el 0,4 % del total).
A partir de estos datos se puede entender la necesidad de concentrar los esfuerzos para atraer y
mantener la atención de los usuarios. Junto con un desarrollo efectivo de la estructura web y del
contenido, el diseño y el uso del color son la llave para atraer y ser identificado, formando vínculos
en el subconsciente del usuario y generar esquemas para captar y fidelizar a nuevos visitantes.
Al mismo tiempo que la evolución de los aparatos y de su introducción en los hogares, también ha
aumentado la calidad de las transmisiones a través Internet y ha bajado su precio. A medida que la
tecnología ha solventado estas dificultades, ya no nos encontramos con problemas de forma sino
de contenido.
6.4. HTML 5
La última versión de este lenguaje básico corresponde al HTML5, donde se introducen nuevos
elementos que mejoran la navegación y la usabilidad de los sitios web en los distintos
navegadores, como por ejemplo el uso de <header>, <canvas>, <video>, <section>, <article>,
<nav> y <footer>2.
Esta nueva versión no se trata solamente de cambiar y eliminar etiquetas. Va mucho más allá.
En todo sitio web hay elementos que se utilizan. El encabezado (header), barras laterales
(sidebars), el pie de página (footer), los menús de navegación (nav), se utilizarán en esta nueva
versión como etiquetas ya establecidas, brindando una mejora en la intuición para el desarrollo.
Así mismo una de las mayores mejoras es la utilización de "Canvas" o marcos de trabajo, que sirven
para utilizar animaciones sin necesidad de instalar plugins ni usar un reproductor Adobe Flash para
videos web, estándar considerado de facto. Esta opción es un gran avance, ya que Flash tiene
grandes desventajas en los gráficos web, como que los motores de búsqueda no puedan leer el
texto dentro, que pesan mucho y tardan en cargar. Al implementarse con canvas, se usará
únicamente código Javascript, aligerando el peso de la página.
También quedan obsoletos algunos elementos del HTML 4, razón por la cual es conveniente
repasar acerca de las novedades que incluye HTML5, cuyo lenguaje es regulado por W3C.
6.5. CMS
Los CMS o sistema de gestión de contenido son plataformas web que estandarizan procesos y que
permiten a los usuarios que no poseen mucho conocimiento técnico en lenguaje de programación
crear y maquetar contenido fácilmente para su página web a través de un backend o gestor de
contenido. Entre los CMS más completos y famosos del mercado encontramos a Wordpress y
Joomla. Detrás de varios CMS existe una gran comunidad de desarrolladores de complementos o
plugins que realizar trabajos específicos como administración de contenido. Estas plataformas son
famosas por la versatilidad de diseños que se pueden implementar a través de plantillas. Lo cual
24
por su parte abarata los costos de realización de la página, ya que se elimina un eslabón de la
cadena de publicación, el maquetador, y agrega la capacidad de replicar contenido con facilidad.
El lenguaje de programación utilizado normalmente por estas plataformas es PHP, HMTL5, CSS Java
Script y JQuery. El usuario puede tener acceso a la programación del sitio, lo cual vuelve muy
versátiles a estas plataformas de creación de contenido web. Son bastante escalables por su
estandarización de contenidos y su gestión dinámica de usuarios y permisos.
6.6. DEFINICION DE ESTÁNDARES WEB
Estándares web es un término muy general utilizado para referirse a estándares y otras
especificaciones técnicas que definen y describen aspectos de la World Wide Web. En años
recientes, el término ha sido frecuentemente asociado con la tendencia de aprobar un conjunto de
mejores prácticas estandarizadas para construir sitios web y a la filosofía del diseño y desarrollo
web que incluye esos métodos.
Muchos estándares y especificaciones interdependientes, algunos de los cuales gobiernan
aspectos de la Internet, no sólo de la World Wide Web, que afectan de manera directa o indirecta
el desarrollo y la administración de sitios y servicios web. Algunos aspectos a considerar son la
interoperabilidad, la accesibilidad y la usabilidad de páginas y sitios web.
Cuando se describe que un sitio o página web cumplen con ciertos estándares web, usualmente
quiere decir que la página tiene partes de código HTML, CSS y JavaScript válido o casi válido. La
parte HTML debe cumplir también ciertas guías de accesibilidad y semántica.
Cuando se discute sobre el uso de estándares, las siguientes publicaciones generalmente son vistas
como fundamentales:
• Recomendaciones para lenguajes de marcado, como el lenguaje de marcas de
hipertexto (HTML), lenguaje extensible de marcado de hipertexto (XHTML),
Scalable Vector Graphics (SVG), y XForms, de W3C.
• Recomendaciones para hojas de estilo, especialmente hojas de estilo en
cascada (CSS), de W3C.
• Estándares para ECMAScript, más comúnmente JavaScript, de Ecma
International.
24
• Recomendaciones para Document Object Models (DOM), de W3C.

• Nombres y direcciones de página correctamente formados y demás recursos
referenciados de sus (URIs), basado en RFC 2396, de IETF8
• El uso apropiado de los protocolos HTTP y MIME para desplegar la página,
regresar datos pedir otros recursos referenciados a ésta, basado en RFC 2616,
de IETF9 normalmente, la accesibilidad web se basa en las denominadas Guías
de Accesibilidad al Contenido Web10 publicados bajo la Iniciativa para la
Accesibilidad Web de W3C.
El trabajo de la organización W3C hacia una web semántica está actualmente enfocado por
publicaciones relacionadas al Marco de Descripción de Recursos (RDF), Gleaning Resource
Descriptions from Dialects of Languages (GRDDL) y Web Ontology Language (OWL).
Cuerpos de publicación de estándares
Una recomendación W3C es una especificación o un grupo de guías que luego de un extenso
consenso durante su construcción, han recibido el respaldo de los miembros y el director de la
W3C.
Un estándar de Internet IETF se caracteriza por tener un alto grado de madurez y porque
generalmente tiene la aprobación generalizada de que ese protocolo o servicio específico
beneficiará significativamente a la comunidad de Internet. A una especificación que alcance el
estado de Estándar, se le asigna un número de la serie IETF STD mientras que mantiene su número
IETF RFC original.
La presión no estándar y de propiedad del proveedor
En el actual Proyecto de Trabajo de la especificación HTML 5 documento de propuesta de norma
11, el W3C tiene una sección titulada "Relación con Flash, Silverlight, XUL y similares lenguajes
propietarios" que dice: "A diferencia de los lenguajes propietarios, esta especificación está
destinada a definir un abiertamente-producen, el vendedor un lenguaje neutro, que se aplicará en
una amplia gama de productos de la competencia, a través de una amplia gama de plataformas y
dispositivos. Esto permite a los desarrolladores escribir aplicaciones que no se limitan a la
ejecución de un fabricante o el idioma. Además, al escribir aplicaciones que se dirigen a
proveedores específicos de plataformas introduce necesariamente un costo que los
desarrolladores de aplicaciones y sus clientes o usuarios se enfrentarán a si se ven obligados a
cambiar (o deseo de cambiar) a la plataforma de otro proveedor, con una abierta producida y el
lenguaje un proveedor neutral significa que la aplicación los autores pueden cambiar de
proveedor, con poco o ningún costo. "
24
6.7. LA W3C
6.7.1. HISTORIA
En 1989, Tim Berners-Lee inventó la World Wide Web. Él acuñó el término "World Wide Web",
escribió el primer servidor de World Wide Web, "httpd", y el primer programa cliente (un
navegador y editor), "WorldWideWeb", en octubre de 1990. Escribió la primera versión de "
HyperText Markup Language "(HTML), el lenguaje de formato de documentos con la capacidad de
enlaces de hipertexto que se convirtió en el formato de publicación principal para la Web. Sus
especificaciones iniciales para URI, HTTP y HTML fueron refinadas y discutidas en círculos más
grandes a medida que se extendía la tecnología web.
El panel W3C recuenta la historia web temprana.

En octubre de 1994, Tim Berners-Lee fundó el World Wide Web Consortium (W3C) en el Instituto
de Tecnología de Massachusetts, Laboratorio de Ciencias de la Computación [MIT / LCS] en
colaboración con el CERN, donde se originó la web, con el apoyo de DARPA y la Comisión Europea.
En abril de 1995, INRIA (Instituto Nacional de Investigación en Informática y Automática) se
convirtió en el primer anfitrión europeo de W3C, seguido por la Universidad Keio de Japón
(Campus Shonan Fujisawa) en Asia en 1996. En 2003, ERCIM (Consorcio Europeo de Investigación
en Informática y Matemáticas) asumió el papel de anfitrión del W3C europeo de INRIA. En 2013,
W3C anunció Universidad de Beihang como el cuarto anfitrión.
El World Wide Web Consortium (W3C) es una comunidad internacional donde las organizaciones
miembros, un personal de tiempo completo y el público trabajan juntos para desarrollar
estándares web. Dirigido por el inventor y director de la web Tim Berners-Lee y el director
ejecutivo Jeffrey Jaffe, la misión del W3C es llevar a la web a su máximo potencial.
24
La misión del W3C es llevar a la World Wide Web a su máximo potencial mediante el desarrollo de
protocolos y directrices que aseguren el crecimiento a largo plazo de la Web. A continuación,
discutimos aspectos importantes de esta misión, todos los cuales refuerzan la visión de One Web
de W3C.
6.7.2. PRINCIPIOS DE ESTÁNDARES ABIERTOS

El 29 de agosto de 2012, cinco organizaciones mundiales líderes firmaron conjuntamente un
acuerdo para afirmar y adherirse a una serie de Principios en apoyo de The Modern Paradigm for
Standards; un modelo abierto y de empoderamiento colectivo que ayudará a mejorar radicalmente
la forma en que las personas de todo el mundo desarrollan nuevas tecnologías e innovan para la
humanidad.
6.7.3. CRITERIOS DE DISEÑO

Los siguientes principios de diseño guían el trabajo de W3C. Web para todos
El valor social de la Web es que permite la comunicación humana, el comercio y las oportunidades
para compartir conocimientos. Uno de los objetivos principales de W3C es hacer que estos
beneficios estén disponibles para todas las personas, independientemente de su hardware,
software, infraestructura de red, idioma nativo, cultura, ubicación geográfica o capacidad física o
mental.
6.7.4. WEB SOBRE TODO
El número de diferentes tipos de dispositivos que pueden acceder a la Web ha aumentado

enormemente. Teléfonos móviles, teléfonos inteligentes, asistentes digitales personales, sistemas
de televisión interactivos, sistemas de respuesta de voz, quioscos e incluso ciertos aparatos
domésticos pueden acceder a la Web.
La visión de W3C para la Web implica la participación, el intercambio de conocimientos y, por lo

tanto, la creación de confianza a escala global.
6.7.5. WEB PARA LA INTERACCIÓN RICA
La Web se inventó como una herramienta de comunicación que permitía a cualquier persona, en
cualquier lugar, compartir información. Durante muchos años, la Web fue una herramienta de
"solo lectura" para muchos. Los blogs y wikis trajeron más autores a la web, y las redes sociales
surgieron del mercado floreciente de contenido y experiencias web personalizadas. Los estándares
W3C han apoyado esta evolución gracias a los sólidos principios de arquitectura y diseño.
Algunas personas ven la Web como un depósito gigante de datos vinculados, mientras que otras lo
consideran un conjunto gigante de servicios que intercambian mensajes. Las dos vistas son
complementarias, y que utilizar a menudo depende de la aplicación.
24
6.7.6. WEB DE CONFIANZA
La web ha transformado la forma en que nos comunicamos unos con otros. Al hacerlo, también ha
modificado la naturaleza de nuestras relaciones sociales. La gente ahora se "reúne en la Web" y
lleva a cabo relaciones comerciales y personales, en algunos casos sin siquiera reunirse en persona.
El W3C reconoce que la confianza es un fenómeno social, pero el diseño de la tecnología puede
fomentar la confianza. A medida que más actividad se mueva en línea, será aún más importante
apoyar interacciones complejas entre partes de todo el mundo.
El World Wide Web Consortium logra su misión al reunir a diversas partes interesadas, bajo un
proceso claro y efectivo basado en el consenso para desarrollar estándares de alta calidad basados
en las contribuciones de los miembros del W3C, el personal y la comunidad en general.
6.8. ESTANDARES WEB
Los estándares de W3C definen una plataforma web abierta para el desarrollo de aplicaciones que
tiene un potencial sin precedentes para permitir a los desarrolladores crear experiencias
interactivas ricas, impulsadas por vastos almacenes de datos, que están disponibles en cualquier
dispositivo. Aunque los límites de la plataforma continúan evolucionando, los líderes de la
industria hablan casi al unísono sobre cómo HTML5 será la piedra angular de esta plataforma. Pero
toda la fuerza de la plataforma se basa en muchas más tecnologías que W3C y sus socios están
creando, como CSS, SVG, WOFF, la pila de Web Semántica, XML y una variedad de API.
El W3C desarrolla estas especificaciones y pautas técnicas a través de un proceso diseñado para
maximizar el consenso sobre el contenido de un informe técnico, para garantizar una alta calidad
técnica y editorial, y para obtener el respaldo del W3C y de la comunidad en general.
Si está aprendiendo sobre la tecnología web, puede comenzar con la introducción a continuación y
seguir los enlaces para obtener más detalles.
6.8.1. EL DISEÑO WEB Y LAS APLICACIONES

El diseño web y las aplicaciones incluyen los estándares para crear y renderizar páginas web,
incluidos HTML, CSS, SVG, API de dispositivos y otras tecnologías para aplicaciones web
("aplicaciones web"). Esta sección también incluye información sobre cómo hacer que las páginas
sean accesibles para personas con discapacidades (WCAG), para internacionalizarlas y hacer que
funcionen en dispositivos móviles.
6.8.1.1. HTML Y CSS
24
HTML y CSS son las tecnologías fundamentales para crear páginas web: HTML (html y xhtml) para
la estructura, CSS para el estilo y el diseño, incluidas las fuentes web. Encuentre recursos para un
buen diseño de páginas web, así como herramientas útiles.
6.8.1.2. API WEB DE JAVASCRIPT

Las API estándar para el desarrollo de aplicaciones web del lado del cliente incluyen aquellas para
Geolocalización, XMLHttpRequest y widgets móviles. Los estándares W3C para modelos de
documentos (el "DOM") y tecnologías como XBL permiten a los proveedores de contenido crear
documentos interactivos a través de secuencias de comandos.
6.8.1.3. GRÁFICOS
W3C es el hogar del formato rasterizado PNG, el formato vectorial SVG y la API de Canvas.
WebCGM es un formato más especializado utilizado, por ejemplo, en los campos de la ingeniería
automotriz, aeronáutica.
6.8.1.4. AUDIO Y VIDEO

Algunos de los formatos W3C que permiten la creación de presentaciones de audio y video
incluyen HTML, SVG y SMIL (para sincronización). W3C también está trabajando en un formato de
texto temporizado para subtítulos y otras aplicaciones.
6.8.1.5. ACCESIBILIDAD
La Iniciativa de Accesibilidad a la Web (WAI) del W3C ha publicado Pautas de Accesibilidad al
Contenido de la Web (WCAG) para ayudar a los autores a crear contenido que sea accesible para
las personas con discapacidades. WAI-ARIA proporciona a los autores más herramientas para crear
aplicaciones web accesibles al proporcionar semánticas adicionales sobre los widgets y
comportamientos.
6.8.1.6. INTERNACIONALIZACIÓN
W3C tiene la misión de diseñar tecnología que funcione en diferentes culturas e idiomas. Los
estándares W3C, como HTML y XML, se basan en Unicode, por ejemplo. Además, W3C ha
publicado una guía para autores relacionada con etiquetas de idioma de texto bidireccional (bidi),
y más.
6.8.1.7. WEB MÓVIL

W3C promueve "One Web" que está disponible en cualquier dispositivo. Las Mejores Prácticas de
Web Móvil de W3C ayudan a los autores a entender cómo crear contenido que proporcione una
experiencia razonable en una amplia variedad de dispositivos, contextos y ubicaciones.
6.8.1.8. INTIMIDAD
La web es una poderosa herramienta para comunicaciones y transacciones de todo tipo. Es
importante considerar las implicaciones de privacidad y seguridad de la web como parte del diseño
24
de la tecnología. Obtenga más información sobre el seguimiento y la seguridad de la aplicación

web.
6.8.1.9. MATEMÁTICAS EN LA WEB

Las matemáticas y las fórmulas se utilizan en la Web para informes comerciales, materiales
educativos e investigación científica. MathML de W3C permite que las matemáticas se sirvan,
reciban y procesen en la World Wide Web, al igual que HTML ha habilitado esta funcionalidad para
otros tipos de contenido.
6.8.2. WEB DE DISPOSITIVOS
W3C se enfoca en tecnologías para permitir el acceso a la Web en cualquier lugar y en cualquier
momento, utilizando cualquier dispositivo. Esto incluye el acceso a la web desde teléfonos móviles
y otros dispositivos móviles, así como el uso de la tecnología web en electrónica de consumo,
impresoras, televisión interactiva e incluso automóviles.
6.8.2.1. WEB MÓVIL

W3C promueve "One Web" que está disponible en cualquier dispositivo. La iniciativa web móvil de
W3C ayuda a garantizar la mejor experiencia de usuario en dispositivos móviles, teniendo en
cuenta las capacidades del dispositivo, la ubicación y otra información de contexto.
6.8.2.2. NAVEGACIÓN POR VOZ

El marco de la interfaz de voz de W3C es un conjunto de especificaciones (por ejemplo, VoiceXML)
que integra la tecnología web y la interacción de voz. VoiceXML, PLS, SISR, SRGS, SCXML y CCXML
contribuyen al marco de la interfaz de voz.
6.8.2.3. INDEPENDENCIA DEL DISPOSITIVO Y ADAPTACIÓN DE CONTENIDO

Los dispositivos vienen en muchas formas, capacidades y tamaños que definen restricciones en el
contenido que estos dispositivos pueden manejar. Las descripciones de dispositivos, las pautas de
transformación de contenido, las API de dispositivos y CC / PP ayudan a los desarrolladores a
optimizar la experiencia del usuario.
6.8.2.4. ACCESO MULTIMODAL

Cada vez más, las interacciones con los dispositivos no solo ocurren con el teclado, sino también a
través de la voz, el tacto y los gestos. La arquitectura multimodal W3C y sus componentes (EMMA,
InkML) permiten a los desarrolladores adaptar las aplicaciones a los nuevos modos de interacción.
6.8.2.5. WEB Y TV
Con la llegada de los dispositivos basados en IP, los televisores conectados avanzan a un ritmo
acelerado y la transmisión de TV tradicional está evolucionando rápidamente hacia una
experiencia más inmersiva en la que los usuarios pueden interactuar con aplicaciones ricas que, al
24
menos en parte, se basan en tecnologías web. Hay un fuerte crecimiento en la implementación de

dispositivos que integran tecnologías web normales como HTML, CSS y SVG, junto con varias API
de dispositivos.
6.8.3. ARQUITECTURA WEB
La arquitectura web se centra en las tecnologías y los principios fundamentales que sustentan la
web, incluidos los URI y HTTP.
6.8.3.1. PRINCIPIOS DE ARQUITECTURA

Los principios de la arquitectura web ayudan a diseñar tecnologías al proporcionar orientación y
articular los problemas en torno a algunas opciones específicas.
6.8.3.2. IDENTIFICADORES
Compartimos las cosas por sus nombres. URL, URI, IRI es la forma de nombrar cosas en la Web y
manipularlas. Algunas necesidades de direccionamiento adicionales en la pila de servicios web
motivaron algunas capas adicionales.
6.8.3.3. PROTOCOLOS
Los protocolos son el vehículo para intercambiar nuestras ideas. HTTP es el protocolo central de la
web. W3C también está trabajando en Protocolos XML y SOAP en relación con los servicios web.
6.8.3.4. FORMATOS META

XML, el lenguaje de marcado extensible, se usa para crear nuevos formatos a bajo costo (debido a
las herramientas ampliamente disponibles para manipular el contenido en esos nuevos formatos).
RDF y OWL permiten a las personas definir vocabularios ("ontologías") de términos como parte de
la Web Semántica.
6.8.3.5. CONSIDERACIONES DE PROTOCOLO Y FORMATO META

Los documentos en la Web son piezas unidas por identificadores. Crea un laberinto de
interacciones ricas entre protocolos y formatos.
W3C ha trabajado con la comunidad en la internacionalización de identificadores (IRI) y un modelo
de carácter general para la Web.
6.8.4. WEB SEMÁNTICA
Además de la clásica "Web de documentos", W3C está ayudando a construir una pila de tecnología
para admitir una "Web de datos", el tipo de datos que se encuentran en las bases de datos. El
objetivo final de la Web de datos es permitir a las computadoras realizar un trabajo más útil y
24
desarrollar sistemas que puedan admitir interacciones de confianza a través de la red. El término
"Web Semántica" se refiere a la visión de W3C de la Web de los datos vinculados. Las tecnologías
de Web semántica permiten a las personas crear almacenes de datos en la Web, crear vocabularios
y escribir reglas para el manejo de datos. Los datos vinculados están habilitados por tecnologías
como RDF, SPARQL, OWL y SKOS.
6.8.4.1. DATOS VINCULADOS

La Web Semántica es una red de datos, fechas, títulos, números de pieza, propiedades químicas y
cualquier otra información que pueda concebir. RDF proporciona la base para publicar y vincular
sus datos. Varias tecnologías le permiten incrustar datos en documentos (RDFa, GRDDL) o exponer
lo que tiene en bases de datos SQL, o ponerlo a disposición como archivos RDF.
6.8.4.2. VOCABULARIOS
A veces puede ser importante o valioso organizar los datos. Usando OWL (para construir
vocabularios u “ontologías”) y SKOS (para diseñar sistemas de organización de conocimiento) es
posible enriquecer los datos con un significado adicional, lo que permite que más personas (y más
máquinas) hagan más con los datos.
6.8.4.3. CONSULTA
Los lenguajes de consulta van de la mano con las bases de datos. Si la Web semántica se ve como
una base de datos global, entonces es fácil entender por qué se necesita un lenguaje de consulta
para esos datos. SPARQL es el lenguaje de consulta para la Web Semántica.
6.8.4.4. INFERENCIA
Cerca de la parte superior de la pila de la Web Semántica se encuentra la inferencia, el
razonamiento sobre los datos a través de reglas. El trabajo de W3C sobre reglas, principalmente a
través de RIF y OWL, se centra en traducir entre lenguajes de reglas e intercambiar reglas entre
diferentes sistemas.
6.8.4.5. APLICACIONES VERTICALES

W3C está trabajando con diferentes industrias, por ejemplo, en Salud y Ciencias de la Vida,
Administración Electrónica y Energía, para mejorar la colaboración, la investigación y el desarrollo,
y la adopción de la innovación a través de la tecnología de la Web Semántica. Por ejemplo, al
ayudar a la toma de decisiones en la investigación clínica, las tecnologías de la Web Semántica
unirán muchas formas de información biológica y médica en todas las instituciones.
6.8.5. TECNOLOGÍA XML
24
Tecnologías XML que incluyen XML, espacios de nombres XML, esquema XML, XSLT, intercambio
eficiente de XML (EXI) y otros estándares relacionados.
6.8.5.1. XML ESSENTIALS

XML está respaldado por un conjunto de tecnologías esenciales, como el conjunto de información
y los espacios de nombres. Tratan los problemas al usar XML en contextos de aplicaciones
específicas.
6.8.5.2. INTERCAMBIO EFICIENTE

Los estándares XML son omnipresentes en la informática empresarial y forman parte de la base de
la Web. Debido a que los estándares son altamente interoperables y asequibles, las personas han
querido usarlos en una amplia variedad de aplicaciones. Sin embargo, en algunas configuraciones
(en dispositivos con poca memoria o poco ancho de banda, o donde el rendimiento es crítico), la
experiencia ha demostrado que se requiere una forma más eficiente de XML.
6.8.5.3. ESQUEMA
Las descripciones formales de vocabularios crean flexibilidad en los entornos de autoría y las
cadenas de control de calidad. El esquema XML, SML y las tecnologías de enlace de datos de W3C
proporcionan las herramientas para el control de calidad de los datos XML.
6.8.5.4. SEGURIDAD
La manipulación de datos con XML requiere a veces integridad, autenticación y privacidad. La firma
XML, el cifrado y los xkms pueden ayudar a crear un entorno seguro para XML.
6.8.5.5. TRANSFORMACIÓN
Con mucha frecuencia, uno quiere transformar el contenido XML en otros formatos (incluyendo
otros formatos XML). XSLT y XPath son herramientas muy poderosas para crear diferentes
representaciones de contenido XML.
6.8.5.6. CONSULTA
XQuery (compatible con XPath) es un lenguaje de consulta para XML para extraer datos, similar a la
función de SQL para bases de datos, o SPARQL para la Web Semántica.
6.8.5.7. COMPONENTES
El ecosistema XML utiliza herramientas adicionales para crear un entorno más rico para usar y
manipular documentos XML. Estos componentes incluyen hojas de estilo, xlink xml: id, xinclude,
xpointer, xforms, xml fragmentos y eventos.
6.8.5.8. TRATAMIENTO
Un modelo de procesamiento define qué operaciones deben realizarse en qué orden en un
documento XML.
24
W3C ha trabajado con la comunidad en la internacionalización de XML, por ejemplo, para
especificar el idioma del contenido XML.
6.8.5.10. PUBLICACIÓN
XML surgió de la comunidad de publicaciones técnicas. Utilice XSL-FO para publicar incluso
documentos XML multilingües grandes o complejos en HTML, PDF u otros formatos; incluir
diagramas SVG y fórmulas MathML en la salida.
6.8.6. WEB DE SERVICIOS
Web of Services se refiere al diseño basado en mensajes que se encuentra con frecuencia en la
web y en el software empresarial. La Web de servicios se basa en tecnologías como HTTP, XML,
SOAP, WSDL, SPARQL y otras.
6.8.6.1. PAGOS
W3C busca integrar los pagos sin problemas en la plataforma web abierta. El resultado será nuevas
oportunidades de negocios, una mejor experiencia de usuario para transacciones en línea, una
reducción del fraude y una mayor interoperabilidad entre las soluciones tradicionales y las futuras
innovaciones de pago.
6.8.6.2. SEGURIDAD
24
La transferencia de datos de un dominio a otro dominio o entre aplicaciones a veces requiere una
transacción segura y una autenticación de documentos bien definida. El cifrado XML y la firma XML
son piezas clave de la pila de seguridad XML.
La internacionalización de los servicios web se refiere a las descripciones de los servicios, la
comunicación del idioma y la configuración regional, y la internacionalización de los mensajes
legibles por personas intercambiadas por los servicios.
6.8.7. NAVEGADORES Y HERRAMIENTAS DE AUTOR
La utilidad y crecimiento de la web depende de su universalidad. Deberíamos poder publicar

independientemente del software que usemos, la computadora que tengamos, el idioma que
hablemos, ya sea que estemos cableados o inalámbricos, independientemente de nuestros modos
sensorial o de interacción. Deberíamos poder acceder a la web desde cualquier tipo de hardware
que pueda conectarse a Internet, ya sea fijo o móvil, pequeño o grande. W3C facilita esta escucha
y mezcla a través de estándares web internacionales. Estos estándares aseguran que toda la locura
brillante continúe mejorando una web que está abierta para todos nosotros.
6.8.7.1. NAVEGADORES, REPRODUCTORES MULTIMEDIA

Existen muchos tipos de herramientas que nos permiten leer la Web, incluidos navegadores,
reproductores multimedia, plataformas de publicación, redes sociales, bots, agregadores, foros y
sitios para compartir medios.
6.8.7.2. HERRAMIENTAS DE AUTOR, REDES SOCIALES

La web no es un medio de solo lectura. Hay muchos tipos de herramientas para publicar contenido,
incluyendo herramientas y entornos de autoría, sistemas de gestión de contenido (CMS), páginas y
aplicaciones de perfiles de redes sociales, herramientas y sitios de blogs, herramientas de
microblogging, marcadores sociales, foros y uso compartido de videos y fotos, entre otros.
24
7. HIPÓTESIS
Las actuales páginas web operativas en la red de mercado electrónico en chile solo trabajan en
diseño web a través de aplicaciones y es por eso que tienen mayor cantidad de errores en el
diseño de sus páginas web.
24
8. METODOLÓGICO
8.1. Tipo de estudio:

El presente estudio corresponde a una investigación cualitativa debido a que investigare páginas
web y su cumplimiento de los estándares analizándolas a través de un validador y poder cuales son
los errores que tienen en común estas páginas.
8.2. Diseño de la investigación:
Esta investigación es cualitativa ya que realizaré recogida de datos, los validare y analizare para
posteriormente mencionar en un informe los errores más comunes de estas páginas.
8.3. Población:
La población que fue considerada para esta investigación son 10 páginas web operativas en chile
de comercio electrónico.
8.4. Muestra:
Se analizarán 10 páginas web operativas en chile de comercio electrónico, para saber si dan
cumplimiento a los estándares web establecidos por la W3C, a través del validador “Mobiready”
8.5. Viabilidad:
24
Tiempo:
El seminarista tendrá el tiempo suficiente (alrededor de dos meses aproximadamente) para llevar a
cabo su investigación.
24
9. RECOPILACION DE INFORMACIÓN
9.1. Antena 3 directo
24
Soporte ETag
Todos los recursos de la página deben usar los encabezados Etag adecuados
para habilitar el almacenamiento en caché del lado del cliente y acelerar las
futuras cargas de páginas
No se encontró el encabezado de Etag.
Ubicación de JavaScript
Las inclusiones de JavaScript siempre deben incluirse al final del documento para evitar bloquear la
carga de la página.
JavaScript encontrado dentro de la cabeza
Medidas CSS
Deben evitarse las dimensiones y posiciones absolutas en las directivas CSS, ya que no se
representarán correctamente en todos los tipos de dispositivos.
Control de almacenamiento en caché

Los componentes dinámicos y estáticos de la página deben usar controles de almacenamiento en
caché apropiados para acelerar la carga de la página.
24
Directivas internas de CSS

Las hojas de estilo externas deben usarse para permitir que el cliente
almacene en caché CSS por separado al contenido.
Ventanas emergentes
Deben evitarse los destinos de enlace de _self, _parent o _top, ya que
solo el escritorio es totalmente compatible con la experiencia de
navegación con pestañas.
JavaScript en línea
El código de JavaScript en línea no debe usarse, en su lugar, se debe recopilar JavaScript en un
único archivo de inclusión minificado.
Minimizar JavaScript
Los archivos JavaScript siempre deben minimizarse para reducir el tiempo de tránsito y ayudar a
acelerar la carga de la página.
Javascript contiene demasiados espacios en blanco al 34.32%
parahttp://d1lxhc4jvstzrp.cloudfront.net/scripts/js3caf.js
CSS minimizar
CSS debe minimizarse para reducir el tiempo de tránsito y acelerar la carga de la página tanto
como sea posible
CSS contiene demasiados espacios en blanco en 28.75%

parahttp://d1lxhc4jvstzrp.cloudfront.net/themes/MobileCleanDark_b102cc69/style.css
24
9.2. Ibikes
24
DOM demasiado grande
El número total de elementos DOM debe ser inferior a 700 para

evitar la complejidad que afectará la representación y la experiencia
del usuario.
El conteo de elementos DOM es alto en 1791.
Soporte ETag
Todos los recursos de la página deben usar los encabezados Etag adecuados para habilitar el
almacenamiento en caché del lado del cliente y acelerar las futuras cargas de páginas.
Búsquedas de DNS
Una página no debe hacer referencia a más de 6 dominios distintos, ya que cada uno imparte una
penalización de velocidad directa.
Colocación de hojas de estilo

Las hojas de estilo deben incluirse en la parte superior del documento para evitar la visualización
temblorosa del contenido de la página.
Marcos
Los documentos no deben contener marcos, marcos o iframe, ya que no se reproducirán bien en
los tipos de dispositivos.
Medidas CSS

24
Sprites CSS
Los recursos de imagen CSS deben combinarse en archivos sprite para

evitar costosos gastos generales de HTTP.
Importación CSS
La directiva de importación de CSS no se debe usar, ya que es mejor

para integrar los datos de la hoja de estilo en un archivo minificado.
Imagen vacía
Las etiquetas de imagen siempre se deben rellenar con orígenes de archivos o se deben crear en
tiempo de ejecución con JavaScript.
Las hojas de estilo externas deben usarse para permitir que el cliente almacene en caché CSS por
separado al contenido.
Ventanas emergentes
Deben evitarse los destinos de enlace de _self, _parent o _top, ya que solo el escritorio es
totalmente compatible con la experiencia de navegación con pestañas.
El código de JavaScript en línea no debe utilizarse, en su lugar, se debe recopilar JavaScript en un

Etiqueta de imagen alt
Las etiquetas de imagen en el marcado deben tener etiquetas alt descriptivas o deben dejarse
vacías para los elementos de diseño sin importancia.
Imagen especificar tamaño
Las dimensiones de la imagen siempre deben incluirse y las imágenes no deben volver a
muestrearse en tiempo de ejecución ya que esto ralentizará la representación de la página.
24
9.3. Latam
24

El número total de elementos DOM debe ser inferior a 700 para evitar
la complejidad que afectará la representación y la experiencia del
usuario.
Soporte ETag
Todos los recursos de la página deben usar los encabezados Etag
adecuados para habilitar el almacenamiento en caché del lado del
cliente y acelerar las futuras cargas de páginas.
Búsquedas de DNS
penalización de velocidad directa.

Marcos
Medidas CSS

24
Sprites CSS
Los recursos de imagen CSS deben combinarse en archivos sprite
para evitar costosos gastos generales de HTTP.
Importación CSS
La directiva de importación de CSS no se debe usar, ya que es
mejor para integrar los datos de la hoja de estilo en un archivo
minificado.
Imagen vacía

Ventanas emergentes


24
9.4. Supermercado lider
24
Colocación de JavaScript
incluídos en JavaScript sempre deben incluírse ao final do

documento para evitar bloquear a carga da páxina.
Marcos
Los documentos no deben contener marcos, marcos o iframets, ya

que no se reproducirán bien en los tipos de dispositivos.
Medidas CSS

caché apropiados para acelerar la carga de la página
24
Los componentes dinámicos y estáticos de la página deben ser controles

de almacenamiento y almacenamiento adecuados para acelerar la carga
de la página.
Importación CSS
La directiva de importación de CSS no se debe usar, ya que es mejor para

integrar los datos de la hoja de estilo en un archivo minificado.
Se deben usar hojas de estilo externas para permitir que el cliente almacene en caché CSS por
Ventanas emergentes
El código de JavaScript en línea no debe utilizarse, en su lugar, se debe recopilar JavaScript en un

HTML minimizar
El marcado HTML debe minimizarse para reducir el tamaño del archivo y acelerar el tiempo de
tránsito entre el servidor y el navegador.
HTML contiene demasiados espacios en blanco en 26.7%.
Javascript contiene demasiados espacios en blanco en 45.84%.
24
CSS minimizar
como sea posible.
CSS contiene demasiados espacios en blanco en 30.79%.
Juego de caracteres
La codificación de caracteres de la página se debe establecer en UTF-8 u otro esquema de

codificación de página adecuado. No se encontró el conjunto de caracteres o el conjunto de
caracteres no coincide con 'utf-8'.
24
9.5. Casa royal
24

El número total de elementos DOM debe ser inferior a 700 para evitar la
complejidad que afectará la representación y la experiencia del usuario.
Soporte ETag
cliente y acelerar las futuras cargas de páginas.
Medidas CSS
Redimensionamiento de imagen
Las imágenes no deben redimensionarse dinámicamente en tiempo de ejecución y siempre deben
tener las dimensiones correctas especificadas.

24
Sprites CSS
Los recursos de imagen CSS deben combinarse en archivos sprite para evitar costosos gastos
generales de HTTP.
Importación CSS
La directiva de importación de CSS no se debe usar, ya que es mejor para integrar los datos de la
hoja de estilo en un archivo minificado.
Imagen vacía

Ventanas emergentes

HTML minimizar
24
CSS minimizar
como sea posible.

Recursos externos
El recuento de recursos externos no debe exceder de 20, ya que cada activo adicional cargado
afectará directamente el tiempo de carga de la página.
24
9.6. Pc factory
24
viewport meta
La metaetiqueta de la ventana gráfica debe existir para definir la escala del
dispositivo
No se encontró la etiqueta meta de la ventana gráfica en el encabezado de

la página.
Soporte ETag
almacenamiento en caché del lado del cliente y acelerar las futuras cargas de páginas
favicon
El favicon se descargará automáticamente, por lo que debería tener un
tamaño inferior a 2kb y debería tener un encabezado de Expires para el
futuro lejano
El tamaño de Favicon es de aproximadamente 26KBytes.

Las hojas de estilo externas deben usarse para permitir que el cliente
almacene en caché CSS por separado al contenido

vacías para los elementos de diseño sin importancia
Imagen encontrada sin texto alternativo<img src="/public/pics/basck-full.jpg" width="1024"

height="768" style="margin: 0 auto; height:auto;width:80%;max-width 1024px" />
24
9.7. Sodimac
24

El número total de elementos DOM debe ser inferior a 700 para
evitar la complejidad que afectará la representación y la experiencia
del usuario
Soporte ETag
Búsquedas de DNS
penalización de velocidad directa
El conteo de dominio único alcanzó 9

Etiqueta de estilo encontrada en el cuerpo.
Marcos
Etiqueta iframe encontrada.
Medidas CSS
Medidas absolutas de CSS encontradas
24

No se detectó ningún encabezado de control de caché.
24
Sprites CSS
evitar costosos gastos generales de HTTP
108 imágenes individuales se utilizan en esta página. Se

recomienda usar CSS Image Sprites.
Importación CSS
La directiva de importación de CSS no se debe usar, ya que es mejor para integrar los datos de la
hoja de estilo en un archivo minificado.
Se encontró la directiva de importación CSS.
Tabla anidada
Las tablas HTML anidadas nunca deben usarse, ya que no se mostrarán correctamente en todos los
tipos de dispositivos.
Tabla anidada detectada.
Mesas
Las tablas HTML no deben usarse, ya que es poco probable que se representen bien en todos los
tipos de dispositivos.
Etiqueta de tabla detectada.

Estilo en línea encontrado.
Ventanas emergentes
Popup _blank encontrado.
Javascript en línea onclick encontrado.
24

Imagen encontrada sin texto alternativo<img src="/static/header/2018/images/img-menu-01.jpg"

class="img-responsive" />
Javascript contiene demasiados espacios en blanco al 30.4%

parahttps://www.sodimac.cl/static/react/lib/react-dom-0.14.8.js?vid=5796

Las dimensiones de la imagen siempre deben incluirse y las imágenes no se deben remuestrear en
tiempo de ejecución ya que esto ralentizará la representación de la página.
Etiqueta de imagen sin atributos de ancho o altura<img src="/static/header/2018/images/img-

menu-01.jpg" class="img-responsive" />
Recursos externos
El recuento total de recursos externos alcanzó 138:

21 archivos Javascript. 109 archivos de imagen. 8 archivos CSS.
Juego de caracteres
codificación de página adecuado.
No se encontró el conjunto de caracteres o el conjunto de caracteres no coincide con 'utf-8'.
24
9.8. Paris
24
Medidas CSS
Deben evitarse las dimensiones y posiciones absolutas en las
directivas CSS, ya que no se representarán correctamente en todos

enhttp://www.paris.cl/store/styles_20181019201521.css

caché apropiados para acelerar la carga de la página
El control de caché parece estar deshabilitado.
Sprites CSS
Los recursos de imagen CSS deben combinarse en archivos sprite para evitar
costosos gastos generales de HTTP.
24 imágenes individuales se utilizan en esta página. Se recomienda usar

CSS Image Sprites.
Juego de caracteres
codificación de página adecuado
24
9.9. Falabella
24

El número total de elementos DOM debe ser inferior a 700 para evitar
la complejidad que afectará la representación y la experiencia del
usuario
Soporte ETag

temblorosa del contenido de la página
Etiqueta de estilo encontrada en el cuerpo
Medidas CSS
representarán correctamente en todos los tipos de dispositivos
Medidas absolutas de CSS encontradas enhttp://www.falabella.cl/static/assets/33/css/browse.css?

vid=33

No se detectó ningún encabezado de control de caché.
24
ERROR MENOR
favicon
El favicon se descargará automáticamente, por lo que debería tener
un tamaño inferior a 2kb y debería tener un encabezado de Expires
para el futuro lejano.
El tamaño de Favicon es de aproximadamente 2KBytes.
Sprites CSS
Los recursos de imagen CSS deben combinarse en archivos sprite para evitar costosos gastos
generales de HTTP.
146 imágenes individuales se utilizan en esta página. Se recomienda usar CSS Image Sprites.
Importación CSS
La directiva de importación de CSS no se debe usar, ya que es mejor para integrar los datos de la hoja
de estilo en un archivo minificado.

Ventanas emergentes
Popup _blank encontrado
único archivo de inclusión minificado

Imagen encontrada sin texto alternativo<img src="/static/RDF/site/content/evento/ev-

blackfriday/2018/multicategorias/gif/mc2-linea-blanca-081118-AY.gif" <="" />
HTML minimizar
HTML contiene demasiados espacios en blanco al 31.83%
24

Las dimensiones de la imagen siempre deben incluirse.
Etiqueta de imagen sin atributos de ancho o altura<img

src="//falabella.scene7.com/is/image/Falabella/H-BF-logo-061118-mobile?scl=1&fmt=png-
alpha" alt="Black Friday" />
Recursos externos

Juego de caracteres
codificación de página adecuado.
24
9.10. Ripley
24
Soporte ETag
cliente y acelerar las futuras cargas de páginas

temblorosa del contenido de la página
Etiqueta de estilo encontrada en el cuerpo
Marcos
Etiqueta iframe encontrada
Medidas CSS
representarán correctamente en todos los tipos de dispositivos
24
Sprites CSS
evitar costosos gastos generales de HTTP
En esta página se utilizan 79 imágenes individuales. Se

recomienda usar CSS imagen Sprites.
Importación CSS
La directiva de importación de CSS no se debe usar, ya que es mejor
para integrar los datos de la hoja de estilo en un archivo minificado.
Se encontró la directiva de importación CSS
Imagen vacía
tiempo de ejecución con JavaScript
Etiqueta de imagen vacía encontrada

separado al contenido
Ventanas emergentes
Popup _blank encontrado
único archivo de inclusión minificado

Imagen encontrada sin texto alternativo<img data-

src="https://minisitios.ripley.cl/minisitios/boxes/assets/img/bx-flashsale20180911_mb.jpg" />
24

Etiqueta de imagen sin atributos de ancho o altura<img src="//home.ripley.cl/assets-

email/images/clubes-logo.svg" alt="Clubes Ripley" />
Recursos externos
afectará directamente el tiempo de carga de la página

24
10. ANÁLISIS Y RESULTADOS
Medidas CSS.
Marcos o iframe .
cache.Control de almacenamiento en
Ubicación Javascript.
Soporte Etag.
Dom demaciado grande.
Búsqueda de DNS.
Redimensionamiento de imagen.
Colocación de hojas de estilo.
Meta viewport.
ERRORES
GRAVES
PÁGINAS
ANTENA 3 X X X X 4 errores
DIRECTO
IBIKES X X X X X X X X 8 errores
LATAM X X X X X X X X 8 errores
LIDER X X X X 4 errores
CASA ROYAL X X X X X X 6 errores
FALABELLA X X X X X X 6 errores
PARIS X X 2 errores
SODIMAC X X X X X X X X 8 errores
PC FACTORY X X 2 errores
RIPLEY X X X X X 5 errores
TOTAL
10
9/10 8/10 8/10 8/10 5/10 5/10 5/10 3/10 1/10 1/10
PAGINAS
WEB
Como podemos observar en la tabla anterior el error más recurrente dentro de las páginas web del
estudio es medidas css, esto debido a que en 9 de 10 páginas web contienen esta falencia.
El segundo error más recurrente dentro de las páginas web de estudio es la ubicación de
JavaScript, junto con Soporte Etag y control de almacenamiento en caché encontrándose en 8 de
10 páginas web, seguido a estas faltas se encuentran los errores de Marcos, Dom demasiado
grande y colocación de hoja de estilo en la cual estas falencias se localizan en 6 de 10 páginas web.
24
El sexto error que se puede observar es el de Dom demasiado grande en la cual se detecta en 5 de
10 páginas web estudiadas.
El octavo error que se puede observar es el de búsqueda de DNS en la cual se detecta en 3 de 10

páginas web estudiadas.
El noveno y décimo error ya menos frecuente que podemos encontrar en las páginas web de
estudios es redimensionamiento de imagen y Meta viewport que se encuentran en 1 de 10 páginas
web analizadas.
Como también podemos observar las páginas web IBIKES, LATAM Y SODIMAC obtuvieron 8 errores
en su totalidad, mientras que la pagina CASA ROYAL Y FALABELLA obtuvo 6 errores, le sigue la
página de RIPLEY la cual se le detecto 5 errores, las páginas de ANTENA 3 DIRECTO Y LIDER
obtuvieron 4 errores, la página de PARIS Y PC FACTORY se le detecto 2 errores, debemos tener en
cuenta que estos errores son considerados graves para el desempeño de los estándares web
establecidos por la W3C.
24
11. CONCLUSIONES
El propósito de este trabajo de título fue evaluar el cumplimiento de los estándares web
establecidos por la W3C, en páginas web operativas en Chile de comercio electrónico.
Con respecto a los objetivos específicos planteados, como registrar información sobre los
estándares web establecidos por la W3C, logre adquirir mucho conocimiento y lenguaje técnico
que aún no manejaba muy bien.
En relación al segundo objetivo específico que era analizar una totalidad de 10 páginas web
operativas en Chile de comercio electrónico a través del validador MobiReady, fue un trabajo arduo
y minucioso para lograr obtener los errores cometidos por dichas páginas.
Y finalmente aplicando el último objetivo específico que es mencionar los errores más comunes de
dichas páginas web, logre observar que más de la mitad de las páginas web obtuvieron más de 5
errores graves detectadas por el validador MobiReady y que solo 3 páginas web tienes menos de 5
errores.
Los errores que se detectaron se pueden revertir para que así los administradores puedan brindar
a sus usuarios una mejor experiencia y también de esta forma obtener el beneficio económico que
requieren.
12. GLOSARIO
24
CMS: es un software que ayuda a los usuarios a crear, administrar y modificar contenido en un sitio
web sin la necesidad de conocimientos técnicos especializados.
HTML: es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se

trata de la sigla que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de
Hipertexto.
CSS: traducido literalmente al español, como Hojas de estilo en cascada, es un lenguaje

para especificar cómo los documentos se presentan a los usuarios.
API: es un conjunto de funciones y procedimientos que cumplen una o muchas funciones con el fin de
ser utilizadas por otro software. Las siglas API vienen del inglés Application Programming Interface. En
español sería Interfaz de Programación de Aplicaciones.
JavaScript: es un lenguaje de programación creado por Netscape con el objetivo de integrarse en

HTML y facilitar la creación de páginas interactivas sin necesidad de utilizar scripts-CGI o Java.
Accesibilidad: permite que cualquier persona pueda disponer y utilizar las edificaciones,
servicios o productos en igualdad de condiciones que los demás.
Web: en inglés significa telaraña y se refiere a la red de información que existe en internet. Se le ve
como una red o telaraña ya que internet es una compleja red de servidores que almacenan páginas
web.
Aplicación: (también llamada app) es simplemente un programa informático creado para llevar a
cabo o facilitar una tarea en un dispositivo informático.
XML: lenguaje de marcado extensible (XML) es un formato simple basado en texto para
representar información estructurada: documentos, datos, configuración, libros, transacciones,
facturas y mucho más.
Soporte Etag: protocolo para la World Wide Web. Es uno de los varios mecanismos que HTTP
proporciona para la validación de caché web, y que permite a un cliente realizar peticiones
condicionales. Los ETags también pueden ser usados para el control de concurrencia optimista,
como una manera de ayudar a prevenir que actualizaciones simultáneas de un recurso se
sobrescriban entre sí.
Almacenamiento en caché: es el proceso de almacenar datos localmente para que se pueda tener
acceso a las futuras solicitudes de esos datos más rápidamente.
DOM: modelizan tanto la ventana del navegador como el historial, el documento o página web, y
todos los elementos que pueda tener dentro la propia página, como párrafos, divisiones, tablas,
formularios y sus campos, etc. Está definido y administrado por el W3C, por lo que los distintos
navegadores simplemente aplican las especificaciones del World Wide Web Consortium, para dar
soporte al DOM en sus aplicaciones. El DOM no sólo permite modificar páginas web en HTML, sino
también documentos XML.
24
hoja de estilo: es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que
contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente, color de fondo,
párrafos, etc) de las distintas etiquetas que forman una página *.HTML.
DNS: son las iniciales de Domain Name System (sistema de nombres de dominio) y es una
tecnología basada en una base de datos que sirve para resolver nombres en las redes, es decir,
para conocer la dirección IP de la máquina donde está alojado el dominio al que queremos
acceder.
Meta Viewport: es una de las etiquetas más representativas de la web móvil, que nos permite
configurar cómo debe interpretar una página el navegador web para móviles.
Estándar: es un documento establecido por consenso, aprobado por un cuerpo reconocido, y que
ofrece reglas, guías o características para que se use repetidamente.
24
13. BIBLIOGRAFÍA
 (https://definicion.de/diseno/)
 (https://definicion.de/web/)
 (https://definicion.de/web-2-0/)
 (https://definicion.de/web-3-0/)
 (https://es.wikipedia.org/wiki/Dise%C3%B1o_web)
 (https://es.wikipedia.org/wiki/Est%C3%A1ndares_web)
 (HTTPS://WWW.W3.ORG/CONSORTIUM/)
 (https://www.w3.org/standards)
24

Tesis Técnico de Nivel Superior en Informatice Iacc

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tesis Técnico de Nivel Superior en Informatice Iacc

Загружено:

Авторское право:

Доступные форматы

PROYECTO DE TÍTULO: EL CUMPLIMIENTO DE LOS ESTÁNDARES WEB ESTABLECIDOS POR LA W3C

EL CUMPLIMIENTO DE LOS ESTADARES WEB ESTABLECIDOS

NOMBRE PROFESOR(A) GUÍA: JUAN CARLOS MOLINA DUARTE

A mi cuñado Esteban por escucharme en os momentos difíciles.

A mi cuñada Millaray por facilitarme la ayuda necesaria.

A mis familiares y amigos por creer en mí y por brindarme su apoyo.

6.8.1.7. Web móvil.........................................................................................................27

6.8.6. WEB DE SERVICIOS...................................................................................................32

3.1. OBJETIVO GENERAL

3.2. OBJETIVOS ESPECÍFICOS

 Registrar información sobre los estándares web establecidos por la w3c.

4. EL PROBLEMA U OBJETO DE INVESTIGACIÓN

estándares establecidos por la W3C.

¿Cómo voy a investigar?

 Mi investigación la voy a realizar principalmente recopilando información de diversos

web y aplicaciones?, etc.

¿Por qué lo voy a investigar?

muchas páginas que frecuentemente visito no cumplen con estas normas.

¿De qué manera lo voy a investigar?

 Lo voy a investigar buscando en internet, libros y diversas fuentes de información, también

páginas web operativas en chile de comercio electrónico y validar en Mobiready para

errores más comunes.

¿Bajo qué circunstancias voy a investigar?

realizar un diagnóstico de los errores más comunes en el diseño web.

¿Qué factores podrían incidir en mi investigación?

 Los factores que podrían incidir en mi investigación son los siguientes:

o Que muchas de las páginas seleccionadas esten protegidas.

que la mayor parte de las páginas web no respetan los estándares.

pueda ser proporcionada a un análisis. Es conveniente llevar a cabo esta investigación

áreas de velocidad, la navegación, visibilidad de dichas páginas web.

6.1. DEFINICIÓN DE DISEÑO

6.2. DEFINICIÓN DE WEB

6.2.1. DEFINICIÓN DE WEB 2.0

6.2.2. DEFINICIÓN DE WEB 3.0

6.3. DEFINICIÓN DE DISEÑO WEB

El diseño web es una actividad que consiste en la planificación, diseño, implementación y

6.3.1. DISEÑO WEB ADAPTABLE

El diseño de páginas web es la construcción de documentos de hipertexto para su visualización en

Estos documentos o páginas web pueden ser creados:

Para el diseño de páginas web debemos tener en cuenta tres etapas:

1. El diseño visual de la información que se desea editar. En esta etapa se trabaja

3. Posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del

6.6. DEFINICION DE ESTÁNDARES WEB

• Recomendaciones para Document Object Models (DOM), de W3C.

El panel W3C recuenta la historia web temprana.

6.7.2. PRINCIPIOS DE ESTÁNDARES ABIERTOS

6.7.3. CRITERIOS DE DISEÑO

6.7.4. WEB SOBRE TODO

El número de diferentes tipos de dispositivos que pueden acceder a la Web ha aumentado

La visión de W3C para la Web implica la participación, el intercambio de conocimientos y, por lo

6.7.5. WEB PARA LA INTERACCIÓN RICA

6.7.6. WEB DE CONFIANZA

6.8. ESTANDARES WEB

6.8.1. EL DISEÑO WEB Y LAS APLICACIONES

6.8.1.1. HTML Y CSS

6.8.1.2. API WEB DE JAVASCRIPT

6.8.1.4. AUDIO Y VIDEO

6.8.1.7. WEB MÓVIL

de la tecnología. Obtenga más información sobre el seguimiento y la seguridad de la aplicación

6.8.1.9. MATEMÁTICAS EN LA WEB

6.8.2. WEB DE DISPOSITIVOS

6.8.2.1. WEB MÓVIL

6.8.2.2. NAVEGACIÓN POR VOZ