GRADO EN INFORMACIÓN Y DOCUMENTACIÓN...directamente a los profesionales de la información y documentación que deben garantizar el acceso a la información al mayor número de personas

FACULTAD DE COMUNICACIÓN Y DOCUMENTACIÓN

GRADO EN INFORMACIÓN Y DOCUMENTACIÓN

TRABAJO FIN DE GRADO

AUTOR: FRANCISCO-JAVIER POVEDA-SOTO

REALIZADO BAJO LA TUTELA DEL PROFESOR:

JULIO 2018

ORIGEN Y EVOLUCIÓN DE LOS LENGUAJES DE MARCADO:A PROPÓSITO DE XHTML Y HTML5

FRANCISCO JAVIER MARTÍNEZ MÉNDEZ

坎

双重的牢坎

有诚信

维持内心的亨通

行为得到奖赏。

KANLo Abismal; El Agua.

Si eres veraz, tendrás logro en tu corazóny lo que hicieres tendrá éxito.

�e Abysmal; �e Water.If you are truthful, you will have achievement

in your heart and what you do will be successful.

周易-易經— Zhouyi - Yijing (Siglo 10 a.C.)

Dedicatoria

iviv

1. ÍNDICE GENERAL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv

1.1. ÍNDICE DE FIGURAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vi

1.2. ÍNDICE DE ANEXOS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

2. RESUMEN. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

3. INTRODUCCIÓN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.1. ASPECTOS FORMALES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3.2. JUSTIFICACIÓN DEL TEMA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.3. OBJETIVOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4. METODOLOGÍA. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

5. MARCO TEÓRICO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

5.1. CONCEPTO DE MARCADO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

5.2. TIPOS DE LENGUAJES DE MARCADO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

5.2.1. Lenguaje puntuacional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

5.2.2. Lenguaje presentacional. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

5.2.3. Lenguaje procedimental. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

5.2.4. Lenguaje descriptivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

5.2.5. Lenguaje referencial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

5.2.6. Lenguaje de metamarcado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

5.3. CONCEPTO DE LENGUAJE DE PROGRAMACIÓN . . . . . . . . . . . . . . . . . . . . . . . 24

5.4. COMPONENTES DE HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

5.4.1. Elementos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

5.4.2. Etiquetas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

5.4.2.1. Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

5.4.2.2. Valores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

5.4.2.3. Atributos especiales. Identificadores de etiqueta id y class . . . . . . 28

5.4.3. Declaración de Tipo de Documento (DOCTYPE/DTD) . . . . . . . . . . . . . . . . 28

5.4.4. Entidades de caracteres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

1. ÍNDICE GENERAL

vv

5.5. ESTRUCTURA DE UN DOCUMENTO HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

5.5.1. MIME type. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

5.6. MODELO DE OBJETO DE DOCUMENTO (DOM). . . . . . . . . . . . . . . . . . . . . . . . . 32

5.7. JAVASCRIPT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

5.8. INTERFAZ DE PROGRAMACIÓN DE APLICACIONES (API). . . . . . . . . . . . . . 34

5.9. LENGUAJE DE ESTILOS CSS (CASCADING STYLE SHEETS). . . . . . . . . . . . . . 35

5.10. DISEÑO WEB ADAPTATIVO (RESPONSIVE WEB DESIGN, RWD) . . . . . . . . 38

5.11. LA WEB SEMÁNTICA (MICROFORMATOS, RDFA Y MICRODATOS) . . . . . 39

6. RESULTADOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

7. CONCLUSIONES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

8. BIBLIOGRAFÍA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

9. ANEXOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

9.1. ABREVIATURAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

vivi

1.1. ÍNDICE DE FIGURAS

Figura 1. Marcas o signos de supresión . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Figura 2. Clasificaciones de los lenguajes de marcado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Figura 3. Open Web Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Figura 4. Ejemplo de un objeto con HTML, CSS y JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Figura 5. Ejemplos de entidades de carácter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Figura 6. Ejemplo de la estructura de un documento web en XHTML y HTML5 . . . . . . . . . . 30

Figura 7. Ejemplo de pagina HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Figura 8. Ejemplo de sintaxis y codificación de una regla CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Figura 9. Ejemplo de un estilo CSS dentro de un documento HTML5. . . . . . . . . . . . . . . . . . . . 37

Figura 10. Ejemplo de modelo básico de caja CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Figura 11. Línea de tiempo de lenguajes de marcado y otras tecnologías. . . . . . . . . . . . . . . . . . 42

Figura 12. Evolución de HTML y XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Figura 13. Tendencia anual de XHTML y HTML5 para la creación de sitios web . . . . . . . . . . 44

Figura 14. Tendencia anual de versiones HTML y XHTML para la creación de sitios web. . . 44

Figura 15. Tabla comparativa entre XHTML y HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Figura 16. Tabla de elementos HTML5. Nuevos o modificados . . . . . . . . . . . . . . . . . . . . . . . . . 47

viivii

1.2. ÍNDICE DE ANEXOS

Anexo 1. Número de usuarios de internet en el mundo desde el año 2000 al 2016. . . . . . . . . . 58

Anexo 2. Número de usuarios de internet en España desde el año 2000 al 2015. . . . . . . . . . . . 58

Anexo 3. Porcentaje de usuarios de internet en el mundo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Anexo 4. Medidas de tráfico de datos, escala byte y equivalencias. . . . . . . . . . . . . . . . . . . . . . . . 60

Anexo 5. Número total de sitios web desde 1991 hasta 2017 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Anexo 6. Ejemplo de marcas de corrección tipográfica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Anexo 7. Organizaciones influyentes en la estandarización web . . . . . . . . . . . . . . . . . . . . . . . . . 63

Anexo 8. Niveles de madurez en los documentos de proceso del W3C . . . . . . . . . . . . . . . . . . . 63

Anexo 9. Clasificación de elementos HTML según su función. Parte I . . . . . . . . . . . . . . . . . . . 64

Anexo 10. Clasificación de elementos HTML según su función. Parte II. . . . . . . . . . . . . . . . . . 65

Anexo 11. Ejemplo de elementos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Anexo 12. Tipos de declaraciones Doctype de HTML y XHTML . . . . . . . . . . . . . . . . . . . . . . . . 67

Anexo 13. Ejemplo de un Modelo de Objeto de Documento (DOM). . . . . . . . . . . . . . . . . . . . . 68

Anexo 14. Ranking TIOBE de lenguajes de programación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Anexo 15. Ranking PYPL de lenguajes de programación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Anexo 16. Ranking de lenguajes más activos en el repositorio GitHut . . . . . . . . . . . . . . . . . . . . 71

Anexo 17. Ejemplo de código JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Anexo 18. Niveles CSS y módulos de Recomendación CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Anexo 19. Crecimiento del tráfico de datos móviles en 2016 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Anexo 20. Pronóstico mensual de tráfico de datos móviles en 2021 . . . . . . . . . . . . . . . . . . . . . . 74

Anexo 21. Ejemplo de Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Anexo 22. Ejemplo de mashup API de geolocalización . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Anexo 23. Directorio de ontologías. Iniciativa LOV (Linked Open Vocabularies) . . . . . . . . . . . 76

Anexo 24. Datos de tendencia anual de versiones HTML para la creación de sitios web. . . . . 77

88

2. RESUMEN

Este trabajo analiza el origen, evolución y clasif icación de los lenguajes de marcado

computacionales, cuya importancia repercutirá en una aplicabilidad práctica y un mejor desarrollo

de los profesionales dedicados a la gestión de la información y documentación. El primer paso

es establecer un marco teórico para proporcionar un mayor entendimiento de la estructura y

creación de un documento web, así como de las tecnologías asociadas a este proceso. Los resultados

muestran la evolución que han tenido los lenguajes de marcado y esas tecnologías, constatándose

un cambio de paradigma producido entre mediados de 2013 y principios de 2014 con la adopción

de HTML5, en detrimento de XHTML, como principal lenguaje de marcado de sitios web. Para

finalizar se lleva a cabo una comparación entre estos dos lenguajes de marcado.

Palabras clave: Lenguajes de marcado, historia de la Web, Plataforma Web Abierta, XHTML,

HTML5.

ABSTRACT

This work analyzes the origin, evolution and classification of computational markup languages,

whose importance will impact on a practical applicability and better development of professionals

dedicated to the management of information and documentation. The first step is to establish a

theoretical framework to provide a better understanding of the structure and creation of a web

document, as well as the technologies associated with this process. The results show the evolution

of the markup languages and these technologies, confirming a change of paradigm produced

between mid-2013 and early 2014 with the adoption of HTML5, to the detriment of XHTML,

as the main language for marking websites. Finally, a comparison between these two markup

languages is carried out.

Keywords: Markup languages, History of Web, Open Web Platform, XHTML, HTML5.

Lenguajes de marcado

9

Francisco-Javier Poveda-Soto

3. INTRODUCCIÓN

Quisiera comenzar esta introducción si se me permite, centrando al lector perteneciente o no a

esta disciplina, en lo que se a va encontrar durante el desarrollo y exposición de este Trabajo Fin de

Grado (TFG). Antes de exponer los aspectos formales del trabajo, creemos interesante mencionar

la figura del belga Paul Otlet (1868-1944) considerado el fundador de la Biblioteconomía y

Documentación (Library and Information Science). Dicha disciplina atraviesa tiempos de cambios,

como prácticamente todas las profesiones ligadas en mayor o menor medida a las Tecnologías

de la Información y Comunicación (TIC), y muy pocas son las que “escapan” a este paradigma.

En 1895 (fecha de la defensa de su tesis), hace ya más de un siglo, Otlet intuyó tecnologías que no

existían en su tiempo, un mundo conectado mediante una bibliografía universal, una red global

“analógica” de información llamada Mundaneum. Estas teorías las plasmó en su obra Traité de

Docummentation publicada en 1934 (Ayuso, 1995: 50-52). Fue un concepto muy parecido a lo que

hoy entendemos como la web, capaz de poner libremente el conocimiento a disposición de todo

el mundo. Por azares de la historia, o más bien por haber sufrido dos guerras mundiales, su obra

caería en el olvido, difundiéndose mayoritariamente esta visión de red global desde un origen

americano con los primeros científicos de la computación hasta la aparición de internet (Wright,

2014: 15).

Actualmente la web, también conocida como la Plataforma Web Abierta (Open Web Platform,

OWP)[1] es una red global de recursos de información usada por más del 46% de la población

mundial y en España supera el 76 % (ver Anexo 1, Anexo 2 y Anexo 3), diseñada entre otras

tecnologías, con lo que se conoce como lenguajes de marcado o de marcas (markup languages,

ML). El presente TFG pretende analizar el origen, evolución y clasificación de los lenguajes de

marcado con el fin de esclarecer los motivos que han llevado a la comunidad web a optar por el

uso mayoritario del lenguaje de marcado HTML5 en detrimento de XHTML. Para llevar a cabo

esta tarea se va a seguir una metodología descriptiva que analiza un fenómeno y sus componentes

mediante la medición, descubrimiento, comprobación y posibles asociaciones de las variables de

investigación (Behar, 2008: 17). La creación del marco teórico, la base conceptual estructurada

sobre la que se diseña este estudio, servirá para ordenar y sistematizar el objeto de estudio. Los

resultados que se prevén mostrarán la evolución que han tenido los lenguajes de marcado a lo largo

del tiempo y las tecnologías asociadas más relevantes. También permitirán conocer el mayor o

1 "Es la denominación que utiliza el consorcio W3C para referirse a 'La Web'. Es únicamente un término para definir un ecosistema abierto de tecnologías interoperables que permiten crear applicaciones y servicios sobre los protocolos de la Web" (Álvarez-Espinar, 2018. Responsable de la oficina del consorcio W3C en España).


10

Francisco-Javier Poveda-SotoINTRODUCCIÓN

menor uso que hacen los desarrolladores y diseñadores web de los diferentes lenguajes de marcado,

principalmente entre XHTML y HTML5. Las conclusiones que se esperan obtener implicarán

directamente a los profesionales de la información y documentación que deben garantizar el

acceso a la información al mayor número de personas posibles, independientemente de si tienen

algún tipo de discapacidad. Sin duda alguna, conocer el lenguaje que utiliza la web y la sintaxis

para crear los contenidos afecta directamente a la difusión y a la accesibilidad de la información.

3.1. ASPECTOS FORMALES

Con el fin de permitir una homogeneidad entre los sistemas de educación en Europa se inicia el

proceso de Bolonia con la Declaración de Bolonia en 1999 que sienta las bases para la implantación

oficial del Espacio Europeo de Enseñanza Superior (EEES). Esto supuso desarrollar un sistema

de grados académicos que permitieran una homogeneidad reconocibles y comparables a nivel

europeo, así como la garantía de una enseñanza de calidad. Actualmente está implantado en

48 países[2]. En España, el EEES aparece con el Real Decreto 1393/2007 de 29 de octubre por el

que se ordenan las enseñanzas universitarias oficiales, modificado por el RD 861/2010 (última

actualización de 3 de junio de 2016), donde se establece la realización de un trabajo para finalizar

los estudios de grado, mediante el cual se evalúan las competencias adquiridas al título y que

acredita una formación general para el desempeño profesional (García y Martínez, 2012: 30). La

Universidad de Murcia cuenta con el reglamento por el que se regulan los estudios universitarios

oficiales de Grado de la Trabajos de Fin de Grado (TFG) y de Fin de Máster (TFM)[3] aprobado

en el Consejo de Gobierno del 30 de abril de 2015 y modificado el 22 de abril de 2016. En este

reglamento se define el TFG como un trabajo que debe ser personal y autónomo (art. 2.1) que

permitirá evaluar los resultados del aprendizaje en términos de competencias[4] adquiridas

asociadas al título que acredita (art. 2.2).

2 Fuente: Comisión Europea. Educación y formación. El Proceso de Bolonia y el Espacio Europeo de Educación Superior. 2 febrero 2017, [consulta: 13 mayo 2017, 20:51]. Disponible en: http://ec.europa.eu/education/policy/higher-education/.bologna-process_es.

3 Fuente: Reglamento por el que se regulan los Trabajos de Fin de Grado y de Fin de Máster. Universidad de Murcia. Facultad de Comunicación y Documentación [consulta: 26 mayo 2017, 14:10]. Disponible en: http://www.um.es/web/comunicacion/contenido/normativa.

4 Competencias es un término más extendido que resultados del aprendizaje. Se establecen como términos de responsabilidad y autonomía. Ambos indican lo que un estudiante debe saber, entender y ser capaz de hacer al finalizar sus estudios. Las competencias o resultados del aprendizaje no deberían ser una lista de deseos sino un conjunto de declaraciones alcanzables por los estudiantes y una herramienta para mejorar el proceso de enseñanza. Fuente: ANECA, Guía de apoyo para la redacción, puesta en práctica y evaluación de los resultados del aprendizaje, versión 1.0 [en línea]. 2013 [consulta: 26 mayo de 2017]. Disponible en: http://www.aneca.es/Documentos-y-publicaciones/Otras-guias-y-documentos-de-evaluacion.

http://ec.europa.eu/education/policy/higher-education/bologna-process_es

http://ec.europa.eu/education/policy/higher-education/bologna-process_es

http://www.um.es/web/comunicacion/contenido/normativa

http://www.um.es/web/comunicacion/contenido/normativa

http://www.aneca.es/Documentos-y-publicaciones/Otras-guias-y-documentos-de-evaluacion

http://www.aneca.es/Documentos-y-publicaciones/Otras-guias-y-documentos-de-evaluacion


11


3.2. JUSTIFICACIÓN DEL TEMA

La primera justificación o motivación para elegir este tema es un interés personal en conocer

todo lo relacionado con los lenguajes de marcado. Fue a raíz de tener que mejorar mi primer blog

cuando descubrí gratamente que, usando el lenguaje de marcado para modificar el código interno

del blog se cambiaba totalmente la presentación del texto o la disposición de las imágenes. El blog

fue la chispa que encendió mi curiosidad. Con la práctica de escribir código HTML me di cuenta

de la importancia de la gestión de los contenidos de un sitio web y lo necesario que es, entre otras

competencias, el conocimiento básico de estos lenguajes. En aquel momento no imaginaba que

llegaría a sorprenderme tan gratamente. Cuanto más tiempo pasaba construyendo el blog más

me gustaba corregir pequeños detalles de líneas de código, dando como resultado una mejor

presentación y organización del contenido.

Una segunda justificación, que enlaza con la anterior, es la importancia de los lenguajes de

marcado en la gestión de la información. La gran cantidad de documentos en soporte electrónico

que utilizamos diariamente así como la que almacenamos, la generalización de internet como

medio de difusión y transferencia de la información, su crecimiento exponencial (Tramullas, 2006:

136; Eito, 2008: 416) y la reducción de costes en las TIC contribuyen al incremento de documentos

en diferentes formatos electrónicos. Hilbert y López (2011: 80) exponen que desde el año 2007 el

99,9% de la información está disponible en formato digital (ver Anexo 4). Debemos tener en cuenta

también que en 2014, 23 años después desde que apareció la web, se superó la cifra de 1 billón de

sitios web en el mundo[5], aunque descendió posteriormente ese año. En 2017 (ver Anexo 5) con

tan solo tres años de diferencia, casi se alcanzó la cifra de los 2 billones de sitios web. Es un hecho

que la lingua franca de la web es HTML y como se expondrá más adelante, existen diferentes

lenguajes de marcado, pero este TFG se centra en la comparación de XHTML y HTML5 cuya

aplicación está destinada a dar estructura a los contenidos en sitios web.

3.3. OBJETIVOS

El objetivo general del presente TFG es analizar el origen, evolución y clasificación de los lenguajes

de marcado. Dicho análisis nos aportará suficiente información para cumplir con los siguientes

objetivos secundarios: entender mejor la creación de un documento HTML, su estructura y las

5 Fuente: Internet Live Stats. Total number of Websites. [consulta: 13 abril 2018, 12:50]. Disponible en http://ww w.internetlivestats.com/total-number-of-websites/#screenshots

http://www.internetlivestats.com/total-number-of-websites/#screenshots



12


tecnologías asociadas que intervienen en su creación. Y esclarecer los motivos que han llevado a la

comunidad web a optar por el uso mayoritario del lenguaje de marcado HTML5 en detrimento de

XHTML.

4. METODOLOGÍA

Como se ha comentado en la introducción, este TFG aplica un método descriptivo que servirá

para ordenar y sistematizar el objeto de estudio. Para acceder a las fuentes primarias y secundarias

de la bibliografía ha sido necesario aplicar técnicas de recuperación de la información mediante

motores de búsqueda generalistas y bases de datos especializadas en información científica. A

continuación se enumeran los pasos de su desarrollo:

1. Delimitación del tema a investigar.

2. Determinación de la estructura general del TFG.

3. Búsqueda e identificación de la literatura publicada de referencia. Durante este proceso se manejarán diferentes motores de búsqueda web, bases de datos de bibliografía especializada en investigación, monografías, artículos de revistas, sitios web y blogs de instituciones y fundaciones. La mayoría pertenecen a repositorios de acceso abierto.

4. Selección, ordenación, sistematización y análisis de la información encontrada.

5. Creación del marco teórico. Donde se establecen los antecedentes y fundamentos teóricos del trabajo.

6. Análisis de los resultados y redacción de las conclusiones.

A través de este proceso metodológico se pretende alcanzar un conocimiento suficiente del tema

que permita reflexionar y cumplir los objetivos que se han propuesto.

5. MARCO TEÓRICO

Este TFG hace hincapié en el marco teórico para exponer los fundamentos generales y específicos,

así como los antecedentes históricos de los lenguajes de marcado computacionales. Con especial

atención a la evolución de HTML y XHTML. Hemos decidido dividir el marco teórico en once

epígrafes en los que intentaremos contextualizar el objeto de estudio.


13

Francisco-Javier Poveda-SotoMARCO TEÓRICO

Primeramente, nos centramos en el concepto de marcado. Las marcas tipográficas usadas

desde tiempos de la imprenta, son los orígenes de los lenguajes de marcado computacionales. Se

presentan los principales lenguajes de marcado y diferentes tipos de clasificaciones. A continuación

se expone una evolución cronológica de tecnologías que ayudaron a la aparición del lenguaje de

marcado HTML y que dieron paso a versiones cada vez más sofisticadas, como es la quinta versión

de HTML y cuya adopción es cada vez más importante frente al lenguaje XHTML. Lo que nos

dará como resultado una línea de tiempo con el orden de aparición que muestra en la Figura 11.

A continuación se define el concepto de lenguaje de programación. Se exponen los componentes

de un documento HTML, su estructura y algunas de las tecnologías necesarias para su mejor

comprensión, como son: el modelo de objeto de documento (DOM), el lenguaje de programación

JavaScript, el interfaz de programación de aplicaciones (API) y el lenguaje de estilos en cascada

(CSS). La proliferación de dispositivos móviles ha llevado a establecer nuevas técnicas de desarrollo

y diseño web. Se explica en qué consiste el diseño web adaptativo (Responsive Web Design), cuya

función es mejorar el consumo de contenido web en cualquier dispositivo independientemente

del tamaño de la pantalla. Se describen los tres componentes básicos para crear un sitio web

adaptable. Por último no podemos dejar de mencionar el impacto que tienen estas tecnologías en

la accesibilidad web y la web semántica.

5.1. CONCEPTO DE MARCADO

En la composición de textos desde el incio de la imprenta hasta nuestros días seguimos usando

algún tipo de marcado o marcación. Toda escritura manuscrita o impresa implica de alguna u

otra forma un marcado, fenómeno generalizado en la comunicación humana (Coombs, Renear y

DeRose, 1987: 934; Schreibman, Siemens y Unswort, 2004: 219). Se entiende por marcas aquellas

indicaciones que se hacen al margen o dentro del texto para referir un cambio o ampliar el sentido

de lo escrito. Con el avance tecnológico, las técnicas utilizadas en la impresión mecánica han

pasado al mundo digital, como son las llamadas y signos empleados en la corrección de estilos[6],

corrección tipográfica, diacrisis tipográfica, etc. (Martínez, 2012: 193-198). La Figura 1 es un

ejemplo de marcas de imprenta. (Ver Anexo 6)

6 La corrección de estilos se regula mediante el estándar internacional ISO 5776:2016 Graphic technology - Symbols for text proof correction y otras normas nacionales. En España: UNE 54051:2016 Signos de corrección de imprenta.


14


Según White (1996: 9), el marcado no forma parte del contenido intelectual de una obra escrita,

simplemente proporciona información sobre cómo se estructura, cómo debe interpretarse y

ser presentada. En algunos escritos antiguos, el texto aparece en scriptio continua, sin ningún

tipo de separación entre las palabras o signos de puntuación. Era responsabilidad del lector

entender las relaciones que había dentro del texto, sin ninguna orientación estructural del autor.

Afortunadamente, los textos ya no están redactados en scriptio continua sino que tienen de forma

implícita, lo que se conoce como un lenguaje de marcado de tipo puntuacional. Así, el lector puede

saber dónde empieza o termina una palabra, las frases que componen una oración y por tanto las

ideas. La codificación o el marcado de un texto es el proceso de explicitar lo que es conjetural o

implícito. De hecho, cualquier texto está implícitamente marcado o etiquetado, desde la separación

de las palabras, los espacios en blanco, el tamaño de letra, etc. Un ejemplo sencillo estaría en la

portada de un libro, probablemente sabríamos identificar su título porque estará centrado, con

letras grandes y cerca estará el nombre del autor o autora de la obra. Es decir, por el mero hecho de

observar “descodificamos” las marcas implícitas que tiene la composición de la portada.

Tal y como se ha expuesto anteriormente, a medida que se automatizaba el formato y la impresión

de los textos, los signos de marcado se fueron ampliando hasta abarcar todo tipo de códigos

especiales insertados en los textos electrónicos para controlar el formateado, la impresión u

otro tipo de procesamiento. El proceso de inserción de dichos marcadores explícitos para las

Signo

[1] Eliminar una letra,indicando al margenel signo con deleátur.

Eliminar un espacioentre letras y palabras,indicando al margenel signo con deleátur.

Eliminar un signode puntuación,indicando al margenel signo con deleátur.

Eliminar un signodiacrítico o acento,indicando al margenel signo con deleátur.

[2]

[3]

[4]

Significado En el texto En el margen *

ne ón

e

el libro

casa,léon

léonítalia

león

león

Figura 1. Marcas o signos de supresiónFuente: Norma UNE 54051:2016 Signos de corrección de imprenta


15


características textuales implícitas se denomina “marcado” (markup) o en ocasiones de manera

equivalente “codificación” (encoding). Y se utiliza el término “sistema de codificación” o “lenguaje

de marcado” para denotar el conjunto completo de reglas asociadas con el uso de marcado en un

contexto dado (TEI Consortium, 2017: XXV). Por tanto, el marcado es el medio capaz de hacer

explícito la interpretación de un texto. Por ejemplo, añadiendo información sin que forme parte

del contenido del texto pero a la vez que esté presente en el documento. Se verá a continuación que

existen diferentes clasificaciones de los lenguajes de marcado dependiendo de las funciones que

realicen.

5.2. TIPOS DE LENGUAJES DE MARCADO

Existen numerosas clasificaciones de lenguajes de marcado. En la Figura 2 se representan seis

tipos de clasificaciones. De todas ellas, nos vamos a centrar en la clasificación de Coombs que es

la más conocida. Y veremos también que los lenguajes de marcado pueden resumirse en tres tipos.

Coombs, Renear y DeRose (1987: 933) afirman que los lenguajes de marcado pueden cambiar

la forma en el proceso de pensamiento y escritura de crear obras: “Mientras que el lenguaje

procedimental y presentacional retardan el proceso de creación, el lenguaje descriptivo lo acelera y

permite a los autores prestar más atención en el contenido”.

5.2.1. Lenguaje puntuacional

Consiste en el uso bien definido de un conjunto de marcas de puntuación que aportan información

sintáctica o retórica sobre cómo debe leerse el texto del documento. Hay autores que a menudo

Coombs, Renear y De Rose, (1987: 935)

White (1996: 9)

Sánchez y Bia (2001: 3)

Gotázar, Martínez y Fresno (2012: 194)

Poggi (2015: 12)

Reid (2015: 6)

PuntuacionalPresentacionalProcedimentalDescriptivoReferencialMetamarcado

PuntuacionalPresentacionalProcedimentalDescriptivoReferencial

PuntuacionalPresentacionalProcedimentalDescriptivo

PresentacionalProcedimentalEstructural o DescriptivoHíbrido (combinación de los anteriores)

PresentacionalProcedimentalDescriptivoReferencialMetamarcado

PresentacionalProcedimentalDescriptivo

Figura 2. Clasificaciones de los lenguajes de marcado Fuente: elaboración propia


16


reemplazan el marcado puntuacional con otro tipo de marcado como el procedimental o el

marcado descriptivo (Poggi, 2015: 12).

El ejemplo muestra la misma frase con signos y separaciones diferentes:

—“Tú sabes que no; debemos perdonarlo.”

—“Tú sabes que no debemos perdonarlo.”

5.2.2. Lenguaje presentacional

Cuando se introducen elementos en la obra de forma intencionada para que sea más legible y

ordenada, como la numeración, justificación del texto, espacio horizontal y vertical, etc. Suele

considerarse parte del texto. La mayoría de los procesadores de texto de tipo WYSIWYG[7] utilizan

el lenguaje presentacional a modo de código incrustado en el documento pero no proporcionan

información sobre la estructura del documento (Talens-Oliag, 2006); está diseñado para el

programa específico y no pretende ser legible por un humano (Reid, 2015: 6).

Ejemplos:

1. Epígrafes, capítulos, subcapítulos, secciones, etc.

2. Tamaños y tipos de letra, color, etc.

3. Hojas de estilo CSS (Cascade Style Shetting)[8]

5.2.3. Lenguaje procedimental

Consiste en comandos o instrucciones que indican o invocan un procedimiento de formateo y

están asociadas a macros (scripts). Y de forma separada, el procesador o editor de texto genera una

versión presentacional.

Ejemplos:

1. JavaScript, puede comportarse como lenguaje procedimental.

2. RTF (Rich Text Format) de Microsoft

3. PostScript de Adobe Systems

4. MIF (Maker Interchange Format) de Adobe Frame Maker

5. TeX, LaTeX

7 WYSIWYG es el acrónimo de What You See Is What You Get (en español, “lo que ves es lo que obtienes”). Se aplica a los procesadores de texto y otros editores de texto con formato que permiten escribir un texto viendo directamente el resultado final.

8 Las hojas de estilo fueron usadas mucho antes de la aparición de la web, por lo que su uso era habitual en el formateo para la impresión de documentos.


17


5.2.4. Lenguaje descriptivo

El lenguaje descriptivo identifica las partes lógicas o intrínsecas de un texto, de las partes

específicamente gráficas de una presentación particular del documento (Schreibman, Siemens y

Unswort, 2004: 222). Es decir, el lenguaje descriptivo permite separar la estructura lógica de los

documentos de su estructura física o de procesamiento. Aquí las etiquetas “describen” fragmentos

del contenido sin especificar cómo deben ser representados. Este tipo de marcado necesita hojas de

estilos (style sheets) para ser representados o visualizados. Es también conocido como lenguaje de

marcado semántico.

Ejemplos:

1. SGML (Standard Generalized Markup Language)

2. XML (Extensible Markup Language)

3. HTML (HyperText Markup Language)[9]

5.2.5. Lenguaje referencial

Son aquellas entidades externas al documento físicas o electrónicas que serán importadas

y colocadas en la secuencia adecuada durante el procesamiento. También puede referirse a los

signos de puntuación dependientes del dispositivo para abreviaturas. O bien son las entidades

almacenadas en un archivo separado o incluso en un sistema de computación diferente. Sin

embargo, en la mayoría de los casos, el lenguaje referencial está asociado al lenguaje descriptivo

(Coombs, Renear y DeRose, 1987: 937).

5.2.6. Lenguaje de metamarcado

El lenguaje de metamarcado (o metalenguaje) permite controlar y ampliar los vocabularios según

las necesidades del autor.

Ejemplos:

1. SGML (Standard Generalized Markup Language)

2. XML (Extensible Markup Language)

9 Según Schreibman, Siemens y Unswort (2004: 230), desde el principio la relación entre SGML y HTML fue defectuosa porque HTML comenzó a ser usado sin que tuviera un DTD que lo definiera. Además, incluía elementos de presentación como fuente, alineación, color, etc. Esto motivó la creación del lenguaje XML.


18


A partir de estos seis tipos de lenguajes de marcado podrían considerarse solos tres de ellos:

presentacionales, de procedimiento y descriptivos. Ya que los otros generalmente están siempre

disponibles en los sistemas que usan uno de esos tres paradigmas (Talens-Oliag, 2006; Reid, 2015:

6). Llegados este punto, podemos afirmar, sin temor a equivocarnos, que el lenguaje descriptivo

es el nivel más alto de abstracción, de tal forma que identifica la función de cada fragmento del

texto. El marcado presentacional y procedimental pueden aplicarse automáticamente basados en el

marcado descriptivo y en un conjunto de reglas, normalmente recogidas en una plantilla u hoja de

estilo CSS (Sánchez y Bia, 2001: 3). A menudo se confunde el lenguaje procedimental con el lenguaje

descriptivo porque este último permite usar etiquetas procedimentales. Cualquier documento

rigurosamente etiquetado con lenguaje descriptivo puede ser transportado de un sistema a otro.

Esto es así porque permite un mapeado uno a uno entre los elementos lógicos y el marcado (Coombs,

Renear y DeRose, 1987 en White, 1996: 10).

La promoción que se hizo del marcado descriptivo para la edición digital y procesamiento de

textos tuvo tres eventos importantes: 1. La presentación de William Tunnicliffe. 2. Un proyecto

del diseñador de libros Stanley Rice con el desarrollo de un catálogo universal de etiquetas de

“estructura editorial” que simplificaría el diseño y producción editorial. 3. El trabajo en el lenguaje

de macros de procesamiento de texto GML liderado por Charles Goldfarb en IBM (Schreibman,

Siemens y Unsworth, 2004: 201).

“Históricamente, los manuscritos electrónicos contenían códigos de control o macros que hicieron que el documento fuera formateado de una manera particular (“la codificación específica”)[10]. Por el contrario, la codificación genérica, que comenzó a finales de los años 60, utiliza etiquetas descriptivas (por ejemplo ‘el título’, en lugar de ‘formato 17’). Muchos acreditan el comienzo del movimiento de la codificación genérica a una presentación hecha por William Tunnicliffe, presidente de Graphic Communications Association (GCA) Composition Committee, durante una reunión en el Canadian Government Printing Office en septiembre de 1967: su tema –La separación del contenido de la información de los documentos de su formato” (Goldfarb y Rubinsky, 1990: 567).

Tunnicliffe lideró el proyecto Gencode (Generic Code) donde se utilizaban etiquetas que describían

el formato de presentación y composición por separado (Goldfarb, 1996; Ray, 2003: 12). A finales

de 1969, Charles Goldfarb, Edward Mosher y Raymond Lorie, dirigían un proyecto de IBM

10 La codificación específica es sinónimo de lenguaje procedimental y la codificación genérica de lenguaje descriptivo.


19


para diseñar un sistema de edición, almacenamiento, búsqueda y gestión de documentos legales

construyendo un sistema de formateo estructural al que, en un principio, se denominó GML

(Generalized Markup Language)[11] (Martínez González, 2015: 32). GML no solo se basaba en

la idea de Gencode sino que además introdujo el concepto de definición de tipo de documento

o DTD (Document Type Definition)[12]. Ante el éxito que tuvo GML, el Comité de Información

ANSI (American National Standards Institute) junto con el Comité Gencode de la GCA en 1983

crearon el primer borrador del lenguaje estandarizado GML y más tarde se convertiría en el

lenguaje de marcado SGML (Standard Generalized Markup Language)[13] que corresponde al

estándar internacional ISO 8879:1986.

Internet fue otro importante avance que apareció en la misma década. Llamada originalmente

ARPANET y desarrollada en Estados Unidos por la agencia de defensa DARPA (Department of

Defense Advanced Research Projects Agency).

“Internet se define como el conjunto de todas las infraestructuras que permiten interconectar a millones de redes y de ordenadores a nivel mundial, por este motivo también es conocida como la red de redes. Dentro de estas infraestructuras se incluyen la parte hardware (routers, puntos de acceso inalámbricos, cableado, etc.) y la parte software (fundamentalmente, la pila de protocolos TCP/IP). De manera sencilla, la parte hardware permite conectar físicamente a los equipos y la parte software permite que estos se puedan comunicar y entender” (Cacheda, 2011: 157).

En el año 1945, Vannevar Bush imaginó un dispositivo llamado Memex que almacenaría

documentos asociados entre ellos, con senderos (trails) o estructuras de texto asociativas

(associative text structures) con el fin de crear un sistema de recuperación de información (Nelson,

1991: 249). Basándose en la idea de Bush, Theodor H. Nelson acuñó en 1965 el término hipertexto

(hypertext). La teoría del hipertexto de Nelson se hizo realidad con los trabajos de: Andries van

Dam con su sistema HES (Hypertext Editing System) en 1967 y Douglas Engelbart que desarrolló

OLS (On Line System) en 1968.

“Permítanme introducir la palabra “hipertexto” para referirme a un cuerpo de

11 GML son las iniciales de los tres investigadores: Goldfarb, Mosher y Lorie.12 Una DTD es un modelo de datos que define el tipo de estructura que debe cumplir un documento y sirve para

la validación del mismo.13 Con la llegada de SGML y posteriormente XML, el lenguaje de marcado de tipo descriptivo fue el que adquirió

más popularidad (Poggi, 2015: 14)


20


material escrito o pictórico interconectado de una manera tan compleja que no podría convenientemente ser presentado o representado en papel. Puede contener resúmenes o mapas de su contenido y sus interrelaciones; puede contener anotaciones, adiciones y notas a pie de página de los expertos que lo han examinado. Permítanme sugerir que tal objeto y sistema, correctamente diseñado y administrado, podría tener un gran potencial para la educación, aumentando el rango de opciones del estudiante, su sentido de libertad, su motivación y su comprensión intelectual. Un sistema de este tipo podría crecer indefinidamente, incluyendo gradualmente cada vez más el conocimiento escrito del mundo. Sin embargo, su estructura interna de archivos tendría que ser construida para aceptar crecimiento, cambio y arreglos informativos complejos” (Nelson, 1965: 96).

El hipertexto describe un mecanismo que se asemeja al proceso del pensamiento humano que

implica la libre asociación de ideas en lugar de las limitaciones del texto lineal o secuencial (Díaz

et al. en Pinto 2002: 22). De hecho, la escritura no secuencial tiene sus raíces en la antigüedad,

por ejemplo, el Talmud con el uso de anotaciones y comentarios anidados o las epopeyas hindúes

como el Ramayana o Mahabharata se componen de historias ramificándose a otras historias

(White, 1996: 5). El hipertexto tendrá un papel fundamental en la creación de la web. Y de alguna

manera, estas ideas representan los inicios del lenguaje de marcado HTML.

“La historia y desarrollo del lenguaje de marcado Hypertext Markup Language (HTML), es una historia llena de necesidades y desarrollos realizados en un entorno de innovación totalmente dinámico y colaborativo, en el cual se mezclan intereses de empresas privadas, con deseos de estandarización de consorcios, intereses de usuarios generalistas y hasta impulsos personales” (Abbate, 2000 en Gutiérrez, 2012: 58).

En 1989, Tim Berners-Lee y Robert Caillau presentaron una propuesta al CERN (European

Organization for Nuclear Research) para desarrollar un sistema de hipertexto global que decidieron

llamarlo World Wide Web y cuyo código fue escrito en 1990. Dicho código fue el HTML[14],

estandarizado en 1991 (Berners-Lee, 1989). HTML es uno de los lenguajes de marcado que existen

y en sus inicios, para algunos autores no era el de mayor reputación (Musciano, 2006: 8). Sin

embargo, el hecho de lograr implementar por primera vez el hipertexto[15] en una red y de estar

14 HTML es básicamente un conjunto de etiquetas específicas un vocabulario restringido de SGML. Fuente: WESLEY LONGMAN, A., 1998. 3 On SGML and HTML. En: W3C Consortium [en línea] [consulta: 11 enero 2017, 19:35]. Disponible en: https://www.w3.org/TR/html401/intro/sgmltut.html.

15 Existía un antecedente del uso de hipervínculos con otra tecnología llamada Hypercard, pero estos solo funcionaban dentro del mismo ordenador, no enlazaba con documentos en cualquier parte del mundo como es el caso de la web. Fuente: W3C Consortium. 2 - A history of HTML. 1998, [consulta: 11 enero 2017, 19:50]. Disponible en: https://www.w3.org/People/Raggett/book4/ch02.html.

https://www.w3.org/TR/html401/intro/sgmltut.html

https://www.w3.org/People/Raggett/book4/ch02.html


21


formado por un número limitado de etiquetas y atributos, le hizo muy popular por la facilidad de

su manejo y también por estar basado en otro lenguaje de marcado habitualmente usado hasta la

fecha como era SGML (Berners-Lee y Connolly, 1995).

“La World Wide Web (WWW) es una red de recursos de información. La web se basa en tres mecanismos para hacer que estos recursos estén fácilmente disponibles al público más amplio posible[16]:

1. Un esquema de nomenclatura uniforme para localizar recursos en la web (por

ejemplo, URI).

2. Protocolos, para el acceso a los recursos nombrados a través de internet (por

ejemplo, HTTP).

3. Hipertexto, para una fácil navegación entre los recursos (por ejemplo, HTML)” (W3C, 1999).

Hasta el momento, hemos visto como el concepto de marcado, en el entorno de la impresión de

textos, se utiliza en el entorno computacional con los vocabularios o conjuntos de etiquetas que

conforman lo que se denomina lenguajes de marcado tales como, GML o SGML creados antes de

la aparición de la web. A continuación veremos cómo estas marcas combinadas con la tecnología

de internet y el hipertexto, conformarán el principal lenguaje de marcas de la web, el HTML. El

nombre de hipertexto se refería, en un principio, únicamente a documentos de texto enlazados

unos con otros a través de hipervínculos, vínculos más allá del propio documento. Sin embargo, el

concepto se ha ampliado para referirse a todo tipo de documentos como imágenes, audio, vídeo o

animaciones; por lo que también se le conoce por el término de hipermedia (hypermedia).

Tim Berners-Lee se dio cuenta del potencial de combinar el concepto de documento vinculado

con la tecnología de internet (Brooksher, 2005: 181). Su invento, el lenguaje HTML, trajo implícito

el primer navegador web, el primer servidor y la primera página o documento web[17]. En 1992

apareció el primer navegador “popular” de la web, ViolaWWW (Visually Interactive Object-

oriented Language and Application) (Castellucio, 2007: 57) preparado para interpretar HTML y

visualizar los documentos, aunque las imágenes se visualizaban en una ventana separada. Más

tarde, se impuso el uso de Mosaic como el primer navegador que integraba gráficos y textos en la

misma ventana (Jones, 2006: 47).

16 Fuente: W3C Consortium. 2 Introduction to HTML 4. [consulta: 11 enero 2017, 21:50]. Disponible en: https://www.w3.org/TR/html4/intro/intro.html.

17 Puede verse la primera página web (el nacimiento de la web) en: http://home.cern/topics/birth-web

https://www.w3.org/TR/html4/intro/intro.html

https://www.w3.org/TR/html4/intro/intro.html

http://home.cern/topics/birth-web


22


En octubre de 1994 en el laboratorio de informática del MIT (Massachusetts Institute of

Technology), en colaboración con el CERN, Tim Berners-Lee fundó el consorcio W3C (World Wide

Web Consortium). El objetivo principal del consorcio W3C es la creación de estándares y pautas

para que la web alcance su máximo potencial: “Las tecnologías web más importantes deben ser

compatibles entre sí y permitir que cualquier hardware y software, utilizado para acceder a la web,

funcione conjuntamente” (W3C, 2005).[18]

Crear estándares web[19] requiere de un proceso controlado a través de varias etapas como son los

niveles de madurez de los informes técnicos, antes de ser declarada una nueva tecnología como una

recomendación del W3C[20]. Estos estándares están sujetos a la política de patentes del consorcio

W3C de tal manera que aseguran el uso libre, gratuito y sin restricciones de las recomendaciones

W3C. En el Anexo 7 se muestran los diferentes niveles de madurez en los documentos de proceso (el

Anexo 8 muestra organizaciones de estandarización web). En sus primeras versiones, como HTML2

normalizado por el IETF en 1995 y HTML3.2 en 1997 por el consorcio W3C, era difícil de editar

y modificar porque el contenido, las instrucciones del formato y la estructura estaban en el mismo

documento (Castro, 2007: 33). Para superar estas dificultades se empezó a aplicar un lenguaje para

las instrucciones de formato del documento HTML conocido como hojas de estilo en cascada CSS

(Cascading Style Sheets). La primera versión de CSS fue estandarizada en 1996 y permitió definir

todos los elementos de una página web, haciendo que el contenido y la presentación (visualización)

pudieran estar separados y permitiendo así su modificación indistintamente. Ese mismo año,

también comenzó a desarrollarse el lenguaje XML (eXtensible Markup Language). En realidad no

es un lenguaje sino un metalenguaje que permite crear lenguajes de marcado y está orientado al

intercambio y almacenamiento de datos y no a la visualización o presentación (Morrison, 2000:

6). XML surgió como un subconjunto, una simplificación de SGML, ambos con la capacidad

de disponer de un formato de procesamiento y de intercambio de documentos estructurados

independientemente del sistema operativo o tipo de computador, como necesidad de superar las

limitaciones de HTML por tener un vocabulario limitado de etiquetas (Eito, 2008: 20). Estos tres

lenguajes de marcado comparten ciertas características como son la sintaxis y las etiquetas entre

corchetes, pero no tienen el mismo grado de rigurosidad.

18 Fuente: W3C Consortium. Sobre el World Wide Web Consortium. 2004-2005, [consulta: 15 enero 2017, 11:52]. Disponible en: http://www.w3c.es/Consorcio/about-w3c.html.

19 Fuente: W3C Consortium. Standards. 2017, [consulta: 21 enero 2018, 16:20]. Disponible en: https://www.w3.org/standards/. Fuente: W3C Consortium. All Standards and Drafts. [consulta: 21 enero 2017, 16:50]. Disponible en: https://www.w3.org/TR/#tr_HTML.

20 Fuente: W3C Consortium. World Wide Web Consortium Process Document. 1 febrero 2018, [consulta: 15 marzo 2018, 18:35]. Disponible en: https://www.w3.org/2018/Process-20180201/.

http://www.w3c.es/Consorcio/about-w3c.html

https://www.w3.org/standards/

https://www.w3.org/TR/#tr_HTML

https://www.w3.org/TR/#tr_HTML

https://www.w3.org/2018/Process-20180201/


23


En 1998, con la versión HTML4.0, se dio un paso importante, al añadir la funcionalidad de hojas

de estilo CSS, los scripts del lado del cliente y la compatibilidad con la sintaxis de XML. Ese mismo

año se estandarizó una de las primeras aplicaciones de XML, la reformulación de HTML que dio

lugar a XHTML (eXtensible HyperText Markup Language). XHTML es prácticamente igual que

HTML4.0 pero con algunas restricciones que lo hacen compatible con el estándar XML (Ray,

2001: 85). En 1999, se estandarizó la versión HTML4.01 que corregía errores de la versión anterior.

Con esta versión se resolvieron ciertas carencias que hacían que los desarrolladores web usaran

incorrectamente la sintaxis para crear páginas y los navegadores no interpretaban por igual su

contenido. Existen tres versiones de HTML4.0, HTML4.01 y XHTML1.0: Strict (no permite el

uso de lementos desaprobados), Transitional (permite algunos de los elementos desaprobados) y

Frameset (permite el uso de marcos) (Castro, 2007: 57).

No fue hasta 2004 cuando se comenzó a prestar más atención a los contenidos dinámicos, un

enfoque dirigido al concepto de la Web 2.0 con las primeras redes sociales, blogs, tiendas en

línea. La creación de la infraestructura que permitirá búsquedas web avanzadas en la web y

gestión del conocimiento mediante RDF (Resource Description Framework) y OWL (Web Ontology

Language). Ese mismo año se creó del grupo WHATWG (Web Hypertext Application Technology

Working Group)[21]. WHATWG publicó en 2005 el primer borrador de Aplicaciones Web 1.0.

Con su adopción por parte del consorcio W3C en 2008, se convertiría en el primer borrador de la

especificación HTML5 (Hawkes, 2011: 2). En 2009, el grupo de trabajo HTMLWG (HTML Working

Group) abandonó la línea de investigación de XHTML2.0 para unir fuerzas en el desarrollo de

HTML5 iniciado por WHATWG que rechazaba la idea de promocionar XHTML.

Gran parte de los avances que había tenido hasta el momento la web habían sido gracias al uso de

componentes de software llamados plugins[22]. Su empleo suponía muchos inconvenientes para

el usuario porque tenía que descargarlo y esto conllevaba posibles conflictos con otros plugins y

sus correspondientes peligros ante ataques de seguridad (Bengston, 2013: 393). HTML5 soluciona

muchos de estos problemas al contener numerosas capacidades para aplicaciones basadas en

web con más interacción. Se adapta a cualquier dispositivo, ya sea a ordenadores de escritorio,

21 El grupo de trabajo WHATWG fue fundado en 2004 por desarrolladores de Apple, Fundación Mozilla y Opera Software, preocupados por crear nuevas especificaciones de HTML frente a XHTML, que le daba más importancia el consorcio W3C. Fuente: WHATWG. WHATWG - FAQ. [consulta: 12 abril 2018, 18:20]. Disponible en: https://whatwg.org/faq.

22 Un plugin es una pieza pequeña de software que se añade a los navegadores web. Otros navegadores, como Microsoft Explorer usaban un software normalizado diferente llamado ActiveX Control. El plugin amplía la capacidad del navegador para hacer funcionar archivos multimedia (Navarro, 2003: 274).

https://whatwg.org/faq


24


móviles, tabletas o televisores. Es una plataforma abierta desarrollada bajo los términos de

licencia libre. El término HTML5 se suele utilizar para dos fines: para referirse a un conjunto de

tecnologías que conforman la futura Plataforma Web Abierta (Open Web Platform, OWP) y para

la especificación HTML5, que también es parte de es plataforma[23]. En la Figura 3 se muestra un

conjunto de tecnologías que irán aumentando con el tiempo. El 28 de octubre de 2014 el consorcio

W3C publicó oficialmente HTML5 como un estándar web. La versión HTML5.2 fue lanzada a

finales de 2017[24]. La quinta revisión del lenguaje de marcado utilizado para construir páginas y

aplicaciones web es la base para la OWP.

5.3. CONCEPTO DE LENGUAJE DE PROGRAMACIÓN

Según Ghezzi y Jazayeri (2008: 51), un lenguaje de programación es una notación formal para

la descripción precisa de algoritmos que serán ejecutados mediante computador. Los lenguajes

constan de dos componentes principales: la sintaxis y la semántica. La sintaxis define la estructura

23 “La Plataforma Web Abierta (Open Web Platform) es una colección de estándares abiertos (libres de derechos) donde cualquiera puede implementar componentes de software sin necesidad de otras homologaciones o la renuncia a los derechos de licencia. La OWP sería la primera generación de sistema operativo de la web. Para ello deben desarrollarse varios subsistemas o fundaciones” (Jaffe, 2014).

24 Fuente: W3C Consortium. HTML 5.2. W3C Recommendation. 14 diciembre 2017, [consulta: 10 marzo 2018, 16:35]. Disponible en: https://www.w3.org/TR/html52/.

Security & PrivacyIdentity, crypto API, multi-

factor authenticationUsability & Accesibility

Content and softwareaccessibility, internationalization

Common ServicesSocial, payments,

annotation,Web of data

Performance & TuningProfiling, enhancements,

responsive design

Device InteractionSensors, orientation,

vibration, touch,bluetooth, etc.

Open Web PlatformApplication Foundations

Core Web Design &Development

HTML, style, layout, graphics,animations, tpography

Media & Real-TimeCommunications

WebRTC, streaming media,second screen

Application LivecycleOffline, push, geofencing, sync

Figura 3. Open Web PlatformFuente: Jaffe, 2014 https://www.w3.org/appfoundations/

https://www.w3.org/TR/html52/

https://www.w3.org/appfoundations/


25


permitida, son las reglas formales en un lenguaje, cómo pueden combinarse las letras, dígitos y

otros caracteres. La semántica es el significado de cada combinación correcta sintácticamente. El

lenguaje natural evoluciona de forma espontánea y los lenguajes de programación son notaciones

que evolucionan formalmente. Los lenguajes de programación tienen un propósito general

mientras que los lenguajes de marcado (Markup Language, ML) son notaciones formales que

solo describen la información, estructuran el contenido, lo formatean pero no tienen propósitos

de funciones o algoritmos ni tampoco son de propósito general. En particular, HTML sólo está

indicado para crear documentos web. Los sitios web creados solo con lenguajes de marcado son

estáticos en comparación con aquellos que añaden líneas de código (scripts), por ejemplo del

lenguaje de programación JavaScript. La Figura 4 representa un ejemplo con los tres lenguajes

más usados para la creación de sitios web, en este caso es un objeto. HTML aporta estructura y

semántica al contenido; CSS le confiere al objeto un estilo de presentación y JavaScript permite

notaciones aritméticas que cambian el comportamiento. El resultado es un renderizado en

perspectiva que permite girar el objeto[25].

25 Otros ejemplos pueden verse https://d3js.org/. D3.js es una librería de JavaScript para manipular documentos basados en datos.

{CSS}

EstiloPresentación

<HTML>

EstructuraContenido

Javascript()

FunciónComportamiento

Figura 4. Ejemplo de un objeto con HTML, CSS y JavaScriptFuente: modificado a partir de Dukett et al., 2014: 44 - Iconos: https://bit.ly/YklbAF

https://d3js.org/

https://commons.wikimedia.org/wiki/Main_Page


26


5.4. COMPONENTES DE HTML

Como con cualquier lenguaje, antes de empezar a usarlo necesitamos conocer su sintaxis.

Los componentes básicos de HTML son: elementos, etiquetas, atributos, valores, entidades de

caracteres y DOCTYPE.

5.4.1. Elementos

La manera de asignar cierto significado y estructura a un documento HTML es mediante los

elementos de marcado que conforman los bloques de construcción HTML y describen cada

pieza del documento. Los navegadores web interpretan los elementos y sus especificaciones para

mostrar el documento en pantalla. Cada elemento se compone de etiquetas, atributos y valores.

El conjunto de etiqueta de apertura y de cierre se denomina elemento y cuando nos referimos a

una etiqueta individual se le conoce simplemente por el nombre de “etiqueta” (Gauchat, 2013: 26).

Según Mavrody (2015: 15) un elemento es una representación conceptual de una etiqueta HTML,

mientras que la etiqueta puede contener atributos y otras etiquetas “hijo”. Los elementos también

pueden contener a su vez otros elementos anidados. Con el fin de evitar los solapamientos en la

anidación de elementos se debe respetar la regla “ first in, last out” (“la primera etiqueta que se

inicia es la última en cerrarse”).

5.4.2. Etiquetas

Todos los elementos con etiquetas pares están formados mediante una etiqueta de inicio o

apertura rodeada por dos delimitadores representados con el signo menor que “<” y mayor que “>”,

también denominados corchetes angulares (angular brackets). La etiqueta es un texto semántico

perteneciente al conjunto o vocabulario de cada lenguaje de marcado. Seguidamente está la pieza

de texto del documento o contenido y otra etiqueta final o de cierre precedida por el carácter

o signo de barra “/”. Es importante recordar que los elementos vacíos no encapsulan texto (por

este motivo se denominan vacíos) y por tanto no requieren una etiqueta de cierre. Ejemplo de un

elemento: <p>Texto</p> ; Ejemplo de un elemento vacío: <img src=”BNE.jpg” />

En la etiqueta de inicio se puede insertar texto de comentario, imagen, enlace de descarga,

grabación sonora, etc. En HTML no hay obligación de cerrar las etiquetas y se permite escribir

texto con mayúsculas o minúsculas (case-insensitive). En cambio, la sintaxis de lenguajes de


27


marcado estricto como XML o XHTML es sensible a mayúsculas y minúsculas (case-sensitive); los

elementos deben incluir etiqueta final o de cierre y solo se permiten etiquetas y atributos escritos

en minúsculas. Cuando XML y XHTML se estandarizaron por primera vez ningún navegador los

admitió de forma nativa, de manera que, para evitar la incompatibilidad, en las etiquetas de cierre

se solía dejar un espacio en blanco antes del signo de barra para hacer el texto compatible con los

navegadores web antiguos (Stachowiak, 2006; W3C, 2002).

Existen diferentes formas de clasificar los elementos. Según el grupo de trabajo WHATWG[26], los

elementos tienen diferentes modelos de contenido y pueden dividirse en:

1. Elementos vacíos: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track>, <wbr>.

2. El elemento <template>3. Elementos de texto sin formato <script>, <style>4. Elementos de texto sin formato escapables <textarea>, <title>5. Elementos con espacio de nombres <MathML> y <SVG> .6. Elementos normales: todos los demás elementos HTML permitidos son elementos

normales.

En el Anexo 9 y Anexo 10 se muestra la clasificación de elementos HTML del consorcio W3C,

agrupados por categorías según su función.[27]

5.4.2.1. Atributos

Para modificar el comportamiento de un elemento se utilizan los atributos que asignan otras

funcionalidades al elemento. Todo atributo debe contener un valor. El nombre del atributo se

coloca dentro de la etiqueta de inicio separado por un espacio en blanco y le antecede un signo

igual “=” seguido del valor del atributo. Una etiqueta puede contener varios atributos globales o

específicos del elemento pero no está permitido duplicar el mismo atributo. Los atributos globales

son aquellos que pueden ser utilizados en todos los elementos del lenguaje HTML. Ejemplos:

<elemento atributo=”valor atributo”> ; <elemento atributo=valor_atributo>.

26 Fuente: WHATWG. HTML Living Standard. The HTML syntax. 13 junio 2018, [consulta: 17 junio 2018, 20:10]. Disponible en: https://html.spec.whatwg.org/multipage/syntax.html#syntax

27 Fuente: W3C Working Draft. HTML: The Markup Language (an HTML language reference) [consulta: 16 junio 2018, 19:00]. Disponible en: https://www.w3.org/TR/2012/WD-html-markup-20121025/elements-by-function.html#edits-elements

https://html.spec.whatwg.org/multipage/syntax.html#syntax

https://www.w3.org/TR/2012/WD-html-markup-20121025/elements-by-function.html#edits-elements

https://www.w3.org/TR/2012/WD-html-markup-20121025/elements-by-function.html#edits-elements


28


5.4.2.2. Valores

La longitud de los valores está limitada a 1024 caracteres (Musciano y Kennedy, 2006: 38). Todos

los valores de atributo se cierran entre comillas dobles o simples en XHTML o XML. Sin embargo,

la sintaxis de HTML5 admite los valores con o sin comillas siempre que el nombre del valor no

tenga espacios en blanco. En el Anexo 11 se muestran ejemplos de elementos, etiquetas, valores y

atributos HTML. Ejemplo: <a href=#capitulo_2> ; <a href=”#capitulo 2”>.

5.4.2.3. Atributos especiales. Identificadores de etiqueta id y class

Desde la versión HTML4 existen dos tipos de atributo de etiqueta con funciones que amplían la

semántica de los elementos (Crowther, 2013: 4), el atributo de identidad id y el atributo de clase

class. Como veremos más adelante, un uso habitual de estos atributos especiales está en las

hojas de estilo CSS. En ocasiones se necesita aplicar una declaración a un selector en concreto o

bien reutilizar la misma declaración en diferentes selectores. Esto es posible mediante el uso de

atributos HTML como selectores: atributo de clase (class attribute) y atributo de entidad (identity

attribute), respectivamente.

5.4.3. Declaración de Tipo de Documento (DOCTYPE/DTD)

Los documentos basados en lenguajes de marcado comienzan con una primera línea de texto

llamada Declaración de Tipo de Documento (Document Type Declaration), conocida en el lenguaje

HTML como DOCTYPE y DTD en el lenguaje XML. Esta declaración condiciona al agente de

usuario (el navedator web) a iniciar en modo estándar y le informa que el documento ha sido

escrito siguiendo la sintaxis específica de dicho lenguaje de marcado. En el Anexo 12 se muestra

una relación de tipos de declaraciones HTML y XHTML.

5.4.4. Entidades de caracteres

Para la creación de páginas web se pueden usar todo tipo de caracteres con lenguaje natural. Sin

embargo, hay caracteres reservados que tienen un significado sintáctico en el lenguaje de marcado,

se denominan entidades de caracteres y no pueden ser utilizadas directamente en el texto natural.

Para insertar una entidad de carácter se utiliza el método de codificación de caracteres. De esta

forma, el navegador web no la interpretará como parte del lenguaje de marcado sino como parte


29


del lenguaje natural[28]. Otra característica diferente, es el conjunto de caracteres (charset) que

utiliza un navegador para interpretar una página web. Inicialmente, los documentos HTML

usaban el conjunto limitado de caracteres ASCII y más tarde el estándar ISO-8859-1 o Latin-1.

Los caracteres que no estaban incluidos en dicho conjunto se tenían que codificar con su valor.

En la Figura 5 se muestran las tres formas de sintaxis para codificar un carácter. Por ejemplo, en

HTML5 el conjunto de caracteres predeterminado es UTF-8[29] que abarca todo tipo de caracteres

internacionales y emoticonos.

5.5. ESTRUCTURA DE UN DOCUMENTO HTML

Como hemos explicado anteriormente, el navegador web renderiza las páginas para mostrar al

usuario todo su contenido. Para acceder al código fuente del documento, desde las opciones de

desarrollador del navegador, veríamos una estructura escrita en un simple texto plano (plain

text) con todos los elementos que la componen: atributos, valores, enlaces de imágenes, etc. Esta

28 Fuente: W3C Consortium. Character Model for the World Wide Web: String Matching. W3C Working Draft 20 April 2018, [consulta: 9 mayo 2018, 20:10]. Disponible en: https://www.w3.org/TR/charmod-norm/ Fuente: W3schools. HTML Character Sets [consulta: 10 mayo 2018, 17:00]. Disponible en: https://www.w3schools.com/CHARSETS/default.asp

29 Fuente: W3C Consortium. Character encodings: Essential concepts. Ishida, 2010 [consulta: 10 mayo 2018, 20:00]. Disponible en: https://www.w3.org/International/articles/definitions-characters/index.es

&EntityName; &#EntityNumber;

Sintaxis 2Número decimal

Entidadde caracter

Entidad

Sintaxis 1Nombre de la entidad

& &&

&#EntityNumber;

Sintaxis 3Número hexadecimal

Signo Númeroo Hash

Signo Númeroo Hash

SignoPunto y coma

Signo Eto Ampersand

SignoPunto y coma

Signo Eto Ampersand

SignoPunto y coma

Signo Eto Ampersand

&

< << <

ñ ññ ñ

🐵 🐵

Figura 5. Ejemplos de entidades de carácterFuente: elaboración propia - Icono: https://bit.ly/2JoiCoJ

https://www.w3.org/TR/charmod-norm/

https://www.w3schools.com/CHARSETS/default.asp

https://www.w3schools.com/CHARSETS/default.asp

https://www.w3.org/International/articles/definitions-characters/index.es

https://commons.wikimedia.org/wiki/File:Emojione_1F435.svg


30


característica es esencial en el caso de la conversión de los documentos de un lenguaje de marcado

a otro, de HTML a XHTML, por ejemplo. Los elementos que conforman la estructura básica

de un documento HTML son: el elemento <!DOCTYPE>, la declaración que analiza el navegador

para conocer la versión de HTML o XHTML utilizada. El elemento <html> inicia y finaliza el

documento HTML, contiene todos los elementos del documento web y por tanto es el elemento

raíz para la estructura del DOM (ver epígrafe 5.6). El elemento <head> representa el encabezado y

contiene el título de la página o sección; <meta /> es un elemento para contener metadatos, está

insertado en <head> y establece el conjunto de caracteres utilizado en el documento; el elemento

<title> contiene el título que aparecerá en la pestaña del navegador web; el elemento <body>

contiene el texto principal del documento, con todas las imágenes, enlaces, etc.; el elemento

<footer> es el pie del documento y normalmente contiene la fecha y autor del documento

(copyright); el elemento de comentarios  permite al autor anotar aclaraciones al código.

En la Figura 6 se muestra la misma estructura de un documento web creado con dos lenguajes

de marcado. En HTML5 la semántica de los elementos contextualiza cada área de contenido,

mientras que en XHTML se utiliza el elemento <div>, para dividir las mismas áreas de contenido

(también llamadas contenedores) con atributos id para representar el mismo grado de significado.

XHTML HTML5

<div id="header">

<body>

<di

v id

="n

av">

<div id="footer">

<div id="header">

<div id="section">

<di

v id

="a

side

">

<div id="hgroup">

<div id="article">

<div id="footer">

<div id="hgroup">

<div id="article">

<div id="footer">

<header>

<body>

<nav>

<footer>

<header>

<section>

<aside>

<hgroup>

<article>

<footer>

<hgroup>

<article>

<footer>

<h1-h3>

<h1-h3>

<h1-h3>

<h1-h3>

Figura 6. Ejemplo de la estructura de un documento web en XHTML y HTML5 Fuente: modificado a partir de Mavrody, 2015: 20


31


El elemento <header> ,por ejemplo, puede contener el encabezado o ayudas de navegación;

<section> es el elemento que divide en partes más pequeñas un artículo, una colección

semántica o temática de contenido; el elemento <article> representa una parte independiente

del documento, por ejemplo en la sindicación del contenido; <nav> es el elemento específico que

contiene los elementos de navegación, enlaces a otros documentos; <aside> equivale al elemento

<section> porque puede agrupar varios elementos pero estos no tienen una relación directa con el

contenido del documento principal; <hgroup> es el elemento que representa el encabezamiento de

una sección; <footer> contiene la información del pie de página del documento o de la sección. La

Figura 7 muestra un ejemplo básico de página web con elementos de HTML5.

El efímero Lino azul

Estoy sorprendido por la belleza de las flores del Lino azul que han aparecido en mi jardín. Inundan de color las mañanas y sin embargo ni una sola flor permanece por la tarde. Son la definición misma de lo efímero.

Es seguro https://mi-experimento-tfg.es/ejemplos/pagina_html

Lino azul (Linum lewisii)

1 <!DOCTYPE html><html lang"es"><head>

<meta charset="utf-8" /><title>Lino azul (Linum lewisii)</title>

<h1>El efímero lino azul</h1><img src="blueflax.jpg" width="300" height="175" alt="Lino Azul (Linum lewisii)" /><p>Estoy <em>sorprendido</em> por la belleza de las flores del<a href="http://https://commons.wikimedia.org/wiki/File:BlueFlax_Linum_lewisii.jpg" href="external"title="Saber más sobre el Lino azul"> Lino azul</a> que han aparecido en mi jardín.Inundan de color las mañanas y sin embargo ni una sola flor permanece por la tarde.Son la definición misma de lo efímero.</p>

</head></body></article>

</article></body></html>

234567891011121314151617181920

Figura 7. Ejemplo de pagina HTML5Fuente: modificado a partir de Castro y Hyslop, 2012: 3

Imagen: DCRJSR, 2010 https://bit.ly/2JyDkGE

https://commons.wikimedia.org/wiki/File:BlueFlax_Linum_lewisii.jpg


32


5.5.1. MIME type

Los clientes y servidores web dependen de los tipos de contenido estandarizados para procesar

la información. MIME type[30] (Multipurpose Internet Mail Extensions). Se trata de un estándar

desarrollado y adoptado por la comunidad internacional IETF en la nota técnica RFC 1521

(Navarro Schlegel, 2003: 228; Gauchat 2013: 200) para dar formato a la información que se

intercambia a través de correo electrónico. Actualmente es habitual que los mensajes incluyan

además de texto, otros tipos de objetos enriquecidos como imágenes, audio, vídeo, JavaScript,

etc. Y por este motivo este estándar también se le conoce con el nombre de Media type. Masinter

(2010) lo define como un espacio de nombre para describir cómo iniciar la interpretación de

un mensaje. Una variante de MIME Type es la extensión multipropósito segura de correo de

internet S/MIME (Secure Multipurpose Internet Mail Extensions); regulada en la nota técnica

RFC2311 que permite la encriptación de correos electrónicos y firmarlos digitalmente; debido a

que una práctica de ataque informático es precisamente la suplantación de identidad (spoofing) del

MIME. El estándar MIME type se especifica dentro del elemento meta con el atributo content

incluyendo el valor tipo/subtipo del recurso. Por ejemplo: <meta http-equiv=”Content-Type”

content=”text/html; charset=utf-8” />. En la versión HTML5 esta declaración se ha reducido

considerablemente: <meta charset=utf-8” />.

5.6. MODELO DE OBJETO DE DOCUMENTO (DOM)

El modelo de objeto de documento DOM (Document Object Model) es un modelo de representación,

acordado por convenio, de todo el contenido de un documento web independientemente del tipo

de navegador[31] que se esté utilizando. Se representa mediante la estructura lógica de todos los

nodos con sus relaciones jerárquicas en forma de árbol. Cada nodo se trata como un objeto. En

30 IANA. Media Types. 15 mayo 2018. [consulta: 16 mayo 2018, 11:10]. Disponible en: https://www.iana.org/assignments/media-types/media-types.xhtml.

31 Es importante recordar que había muchas incompatibilidades para abordar de forma consistente lo objetos de un documento web y esto dio como resultado a finales de 1995 la denominada “Guerra de navegadores”. Microsoft y Netscape competían por mantener el dominio del mercado con tecnologías que funcionaban solo con sus propios navegadores (Tabarés Gutiérrez, 2015: 37-40). A causa de la competencia, en 1998 Netscape estaba en quiebra y como último intento de mantenerse en el mercado, liberó su navegador que pasó a llamarse Mozilla; apareció la Recomendación DOM1 del consorcio W3C que remediaba alguna de las incompatibilidades. Microsoft dominaba el mercado, más del 85% de los ordenadores funcionaban con Windows (Schement, 2002: 470) y con una cuota de mercado con su navegador Internet Explorer del 96%. Para Ian Hickson (en Tabarés Gutiérrez, 2015:201) los estándares han evitado la injerencia tan agresiva por parte de las compañías, pero sigue habiendo otras “guerras” con tecnologías asociadas a los navegadores.

https://www.iana.org/assignments/media-types/media-types.xhtml

https://www.iana.org/assignments/media-types/media-types.xhtml


33


el Anexo 13 se muestra un ejemplo de DOM. En realidad, el DOM se comporta como una API

(Application Programmer Interface) que provee al usuario de un interfaz para interactuar con los

objetos del documento web. Por ejemplo, con JavaScript mediante propiedades, métodos y eventos,

se puede modificar dinámicamente, crear o borrar cualquier objeto mientras está guardado en

memoria. Son objetos todos los elementos y atributos del documento web; los objetos JavaScript y

aquellos que son creados por el usuario. A través del DOM se accede a la estructura del documento

web, incluso antes de que el contenido sea visible en el navegador (Carey, 2011: 29). Para mejorar

las actualizaciones, el DOM estándar del W3C está dividido en niveles y secciones separadas. El

DOM4 es la recomendación vigente. Por último y aunque no sea parte del estándar, también se

pueden modificar los objetos del navegador (Browser Object Model, BOM).

5.7. JAVASCRIPT

JavaScript es un lenguaje de programación o de secuencias de comandos (scripting) creado por

Netscape Corporation en 1995. Muchos de los lenguajes de programación dirigidos al desarrollo

web se les conoce como lenguajes de scripting. Son generalmente más simples que los lenguajes de

programación y pueden realizar tareas con pocos comandos. Aunque popularmente se habla de

JavaScript, se utiliza la versión estandarizada ECMAScript (Schafer, 2010: 330). En el desarrollo

web hay dos tipos de scripting: del lado del servidor (back-end) y del lado del cliente (front-end).

JavaScript es un lenguaje de tipado débil interpretado en el lado del cliente. Es decir, suele ser

interpretado en el navegador web y permite dinamizar páginas web mediante objetos JavaScript

y objetos DOM (Lecomte y Boulanger, 2009: 259). JavaScript no debe confundirse con el lenguaje

Java.

Ambos lenguajes fueron fuertemente influenciados por la sintaxis del Lenguaje C (Fawcett, 2012:

617). En el Anexo 14 y el Anexo 15 se muestran los rankings TIOBE y PYPL de los lenguajes de

programación más usados. En el Anexo 16 se muestran los lenguajes más activos en el repositorio

de códigos GitHub. Las nuevas versiones de navegadores web, incorporan un módulo de JavaScript

y junto con HTML5 proporcionan la reproducción nativa de archivos multimedia sin necesidad

de usar plugins[32]. Con el aumento de sitios web desarrollados con HTML5, ha habido un

32 Como hemos comentado anteriormente, un plugin es una pieza pequeña de software que se descargaba en el ordenador del usuario. Los plugins más conocidos eran Flash y ActiveX. Cuando un usuario accede a una página web, ésta comprueba si el usuario tiene descargado la última versión de plugin para visualizar correctamente el archivo multimedia (Castro, 2007; 436). Desde el año 2010 está tecnología se ha ido sustituyendo en la mayoría de los navegadores web hasta que desaparezca por completo.


34


crecimiento paralelo en el uso de JavaScript con el fin de ampliar su funcionalidad (Pfeiffer y

Green, 2015: 67). JavaScript es el lenguaje de scripting que supera las limitaciones de CSS y HTML5

por medio de programación de cualquier elemento del DOM. Dado que JavaScript se ejecuta en

el lado del cliente, utiliza solo los recursos del computador del usuario y esto hace que la página

web no se vea relentizada por el intercambio a través de la red hasta que no se requiera guardar

información del usuario en el servidor. Para interactuar JavaScript con HTML necesita acceder

al DOM y lo hace a través del lenguaje de definición de interfaz WebIDL[33]. Todos los objetos

de HTML estructurados en el DOM se muestran en la API y mediante IDL (Interface Definition

Language) se accede a manipularlos remotamente. (Ver Anexo 17)

Estas son algunas de las tareas que JavaScript puede hacer (Ducket, 2010: 481):

1. Leer y escribir nuevas etiquetas en un documento.

2. Manipular o mover texto.

3. Realizar cálculos matemáticos en los datos.

4. Reaccionar a eventos, como un usuario haciendo clic en un botón.

5. Recuperar la fecha y la hora actuales de la computadora de un usuario o la última vez que se modificó un documento.

6. Determinar el tamaño de la pantalla que está utilizando el usuario, la versión del navegador o la resolución de la pantalla.

7. Realizar acciones basadas en formatos condicionales. Por ejemplo mostrando alertas si el usuario introduce información incorrecta en un formulario.

5.8. INTERFAZ DE PROGRAMACIÓN DE APLICACIONES (API)

Una API (Application Programming Interface) es básicamente la capa de comunicación a través de

código que da acceso a una tecnología específica (Percival, 2013: 121). Las APIs de JavaScript junto

con sus librerías se incluyen de forma nativa en los navegadores. Antes de la aparición de HTML5

se crearon APIs externas y librerías para mejorar las limitaciones de los navegadores. Entre las

librerías polpulares se encuentra JQuery (Gauchat, 2013: 173). Otro ejemplo de APis externas

33 Fuente: W3C. WebIDL Level 1 W3C Recommendation 15 Diciembre 2016. [consulta: 16 mayo 2018, 11:10]. Disponible en: https://www.w3.org/TR/WebIDL/

https://www.w3.org/TR/WebIDL/


35


son MSAA, UI-AUTOMATION, ATK, AXAPI[34] que mejoran la accesibilidad web usadas por

tecnologías de asistencia como son los lectores de pantalla para personas con discapacidad visual.

HTML5 define nuevos tipos de elementos semánticos llamados “roles” con propiedades y estados

predeterminados que mejoran la experiencia de usuario frente a la accesibilidad web. HTML5

incluye otro tipo de APIs que no están directamente relacionadas con los elementos HTML como

son por ejemplo: API de orientación, API de geolocalización, API de almacenamiento web, API de

caché para trabajar desconectado de la web (offline), etc. (W3C, 2016).

5.9. LENGUAJE DE ESTILOS CSS (CASCADING STYLE SHEETS)

Los lenguajes de marcado de tipo descriptivo no contienen especificaciones de presentación.

HTML sigue teniendo activas algunas etiquetas de presentación, a partir de la versión HTML4

estos elementos están desaconsejados y el consorcio W3C ha creado CSS como nuevo lenguaje

de marcado para instrucciones de formato (Castro, 2007: 33). Las diferentes versiones de CSS

(ver Anexo 18) se clasifican en niveles: CSS1, CSS2, CSS3 y CSS4[35]. A partir del nivel CSS3,

las versiones se dividen en módulos independientes y específicos para las diferentes tecnologías:

sombreados, transparencias, vértices redondeados, etc. Los estilos CSS pueden ser: 1. Estilo en la

etiqueta dentro de un elemento; 2. Estilo insertado en el encabezado del documento; 3. Estilo en

una hoja externa con todos los estilos y vinculada mediante el elemento <link>; 4. Estilo mediante

referencias; por palabras clave; mediante el atributo id; mediante el atributo class.

Las reglas de estilo CSS se basan en tres componentes principales: selectores, propiedades y valores

(Lowery y Fletcher, 2011: XX). El selector se utiliza para seleccionar elementos o subelementos de

uno o varios documentos HTML, seguido de una o más propiedades y un conjunto de valores

(Schafer, 2010: 463). Es decir, el selector indica a qué elemento o subelemento afectará la definición

de estilo CSS. Las propiedades y valores están separados por dos puntos (colon) “:” y finalizan con

punto y coma (semicolon)”;”. La agrupación de propiedad y valor conforman una declaración y los

signos de llaves representan un conjunto o bloque de declaración “{}”. En la Figura 8 se muestra

un ejemplo de sintaxis y codificación de una regla CSS.

34 Fuente: consorcio W3C. HTML Accessibility API Mappings 1.0. 30 mayo 2018, [consulta: 2 junio 2018, 12:28]. Disponible en: https://www.w3.org/TR/html-aam-1.0/

35 Fuente: W3C Consortium. CSS current work and how to participate. Bert Bos 6-06-2018 [consulta: 11 junio 2018, 10:00]. Disponible en: https://www.w3.org/Style/CSS/current-work

https://www.w3.org/TR/html-aam-1.0/

https://www.w3.org/Style/CSS/current-work


36


Mediante los selectores se puede aplicar un control muy preciso en cualquier elemento o en el

contenido del documento HTML. Existen seis tipos de selectores: Selectores de elementos (a veces

llamados selectores de tipo), selectores <class>, selectores id, selectores de atributos, selectores de

pseudo-clase y pseudo-elementos. En la figura Figura 9 se muestra un ejemplo de aplicación de

estilo CSS dentro del documento con el elemento <style>. Con la nueva versión CSS4, los estilos

también pueden añadirse dentro del elemento <body>.

Por ejemplo, la diferencia de aplicar un estilo a un atributo id o class. El atributo id se utiliza

cuando la información es única e irrepetible, y por lo tanto, el estilo se aplicará una sola vez. En

cambio, si se quiere reutilizar un estilo CSS se aplicará a los atributos class. Los conceptos clave

de los estilos o plantillas CSS son: el principio de cascada. Las reglas tienen asignadas por defecto

niveles de importancia o prioridad de mayor a menor (creadas por el diseñador, el usuario, o el

navegador). Este orden de presentación visual puede ser modificado por ejemplo para aplicar

reglas que mejoren la accesibilidad web. El segundo concepto clave es el principio de herencia.

Los elementos obtienen las propiedades de otros elementos. Y el tercer concepto es el principio de

(1)

(3)

(1) Sintaxis CSS; (2) (3) Codificación de una regla de estilo CSS

Selector { }propiedad: valor;

Declaración

Regla

(2)

p { color: yellow;

Declaración 1

Propiedad 1 Valor 1

Propiedad 2 Valor 2

Selector

Regla

}font-size: 1.5em ;

Declaración 2

Bloque de declaración

Separador

p { color: yellow; font-size: 1.5em;}

Figura 8. Ejemplo de sintaxis y codificación de una regla CSSFuente: modificado a partir de McFarland, 2013: 38


37


especificidad. Prevalecen las reglas específicas frente a las genéricas y entre reglas iguales prevalece

la última que ha sido definida.

Todos los elementos que hay en un documento HTML ocupan un determinado espacio o área de

contenido. Los espacios son como cajas cuadradas que albergan el contenido de cada elemento.

Existen varios tipos de modelos de caja y son el patrón fundamental en el diseño CSS. En la Figura

10 se muestra el modelo básico de caja CSS.

Hola Mundo! Hello World! Salut Monde! Ciao mondo!

Este es mi primer ejemplo de estilo CSS

Es seguro https://mi-experimento-css-tfg.es/ejemplos/css

Mi experimento CSS

1 <!DOCTYPE html><html><head>

<meta charset="utf-8"/><title>Mi experimento CSS</title><style>

h1 {color: rgb(255,0,0);background-color: #D3D3D3;border: 2px solid red;text-align: center;

}p {

color: #0000ff;text-align: center;

}</style>

</head><body><h1>Hola Mundo! Hello World! Salut Monde! Ciao Mondo!</h1><p>Este es mi primer ejemplo de estilo CSS</p></body></html>

23456789101112131415161718192021222324

Figura 9. Ejemplo de un estilo CSS dentro de un documento HTML5Fuente: elaboración propia


38


5.10. DISEÑO WEB ADAPTATIVO (RESPONSIVE WEB DESIGN, RWD)

En la última década el diseño web se ha orientado hacia las pantallas de ordenadores de escritorio y

portátiles. El ancho de banda y las resoluciones de pantalla han ido creando nuevos estándares. El

auge de los dispositivos móviles ha favorecido el crecimiento del diseño y desarrollo web. Aunque

los sitios web optimizados para dispositivos móviles existen desde hace más de una década, el

cambio importante se encuentra en su arquitectura (Carver, 2015: 4). Hay desarrolladores web que

están cambiando la tendencia y diseñan primero para dispositivos móviles y luego para pantallas

de escritorio. El índice de redes de CISCO[36] refleja un aumento del tráfico mundial de datos

móviles. Creció un 63 por ciento en 2016 y se prevee que desde los teléfonos inteligentes se llevarán

a cabo el 53.1% de las conexiones de dispositivos en 2021. (Ver Anexo 19 y Anexo 20)

Fue Ethan Marcotte quien propuso una nueva técnica para diseñar páginas web. Se trata del

diseño web adaptable, también conocido como diseño web adaptativo o responsivo. Marcotte

36 Fuente: CISCO. Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update, 2016–2021 White Paper. 28 Marzo 2017 [consulta: 13 de mayo de 2017, 17:00] https://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/mobile-white-paper-c11-520862.html

Esta es el área de contenido de la caja. El contenido puede incluir texto, imágenes u otros elementos. El espacio entre el texto y el borde se llama “margen interno (padding)”. El área dentro del borde negro se llama “fondo (background)”.

heig

ht (a

lto)

width (ancho)

mar

gin-

right

(mar

gen

exte

rno

dere

cho)

margin-bottom (margen externo inferior)

padding-bottom (margen interno inferior)

padding-top (margen interno superior)

margin-top (margen externo superior)

padd

ing-

right

(mar

gen

inte

rno

oder

echo

)

padd

ing-

left

(mar

gen

inte

rno

izqu

ierd

o)

mar

gin-

left

(mar

gen

exte

rno

izqu

ierd

o)

border-bottom (borde inferior)

border-top (borde superior)

bord

er-r

ight

(bor

de d

erec

ho)

bord

er-le

ftt (

bord

e iz

quie

rdo)

Figura 10. Ejemplo de modelo básico de caja CSSFuente: modificado a partir de Mavrody, 2015: 98

https://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/mobile-white-paper-c11-520862.html

https://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/mobile-white-paper-c11-520862.html


39


acuñó en 2010 el término Responsive Web Design (RWD)[37] en su artículo para A List Apart

(Frain, 2015:2; Fielding, 2014:2; McFarland, 2013:406; Fox, 2012:121; Castro y Hyslop, 2012:33).

Esta técnica permite la adaptación automática del sitio web de acuerdo con las dimensiones de la

pantalla del dispositivo.

Para crear un sitio web adaptable se necesitan tres componentes clave: las consultas de medios

(media queries), los puntos de corte (breakpoints) y capas de rejillas f lexibles ( f lexible layouts).

Mediante los puntos de corte se establece un punto de inflexión que determina el tamaño de la

ventana gráfica. Pero esto está cambiando actualmente, ahora se agregan puntos de corte cuando

el contenido ya no es fácil de consumir. Este cambio de enfoque permite que los puntos de corte

sean específicos del contenido y no del dispositivo (Carver, 2015). Las consultas de medios son

un módulo que forma parte del lenguaje CSS de nivel 3 y cuya función es lanzar una pregunta

al dispositivo para obtener información sobre las dimensiones de la pantalla, cómo interactúa el

usuario mediante el uso de un lápiz óptico, el tacto, un ratón, etc. Dependiendo de la información

obtenida se aplica una hoja de estilo CSS diferente. Junto con las consultas de medios y las capas

con rejillas flexibles se crea un diseño fluido (liquid design) capaz de adaptarse a cualquier tipo de

pantalla (Marcotte y Keith, 2014: V). El 4 de junio de 2018 Apple anunció actualizaciones en su

reloj inteligente con WatchOS 5 que incluye soporte para contenido web HTML. En el Anexo 21 se

muestra un ejemplo de sitio web adaptado a diferentes tamaños de pantallas.

5.11. LA WEB SEMÁNTICA (MICROFORMATOS, RDFA Y MICRODATOS)

En 1998 Tim Berners-Lee[38] mencionó el término de “web semántica” pero el concepto no fue

formalmente introducido hasta mayo de 2001[39] y ampliado en 2009[40]. El término de datos

enlazados (Linked Data) introducido en 2004 y el término web semántica, se han convertido

en dos conceptos que son prácticamente intercambiables: publicar y consumir datos legibles

37 MARCOTTE, E. Responsive Web Design. A List Apart [en línea] 25 de mayo de 2010, nº 306 [consulta: 2 de marzo de 2017, 12:30]. ISSN 1534-0295. Disponible en: http://alistapart.com/article/responsive-web-design

38 BERNERS-LEE, T., 1998. What a semantic can represent. [en línea]. W3C. [consulta: 12 enero 2017]. Disponible en: https://www.w3.org/DesignIssues/RDFnot.html.

39 BERNERS-LEE, T., HENDLER, J. y LASSILA, O., 2001. The semantic Web: a new form of Web content that is meaningful to computers will unleash a revolution of new possibilities. Scientific American [en línea], vol. 284, no. 5, pp. 34-43. ISSN 0036-8733. Disponible en: https://www.scientificamerican.com/magazine/sa/2001/05-01/#article-the-semantic-web.

40 Consorcio W3C. W3C Semantic Web Frequently Asked Questions. 12 noviembre 2009, [consulta: 12 mayo 2017, 12:20]. Disponible en: https://www.w3.org/2001/sw/SW-FAQ

http://alistapart.com/article/responsive-web-design

https://www.w3.org/DesignIssues/RDFnot.html

https://www.scientificamerican.com/magazine/sa/2001/05-01/#article-the-semantic-web

https://www.scientificamerican.com/magazine/sa/2001/05-01/#article-the-semantic-web

https://www.w3.org/2001/sw/SW-FAQ


40


por máquina (Yu, 2014: 416). La web semántica es un conjunto de estándares y tecnologías que

permiten a las máquinas y a las personas comprender el significado de los datos y su reutilización

mediante un modelo de representación y una sintaxis de marcado. A mediados de la década del

año 2000 el marcado semántico se puso de moda con XFN (XHTML Friend Network) y luego

con los microformatos. Ambas soluciones válidas con XHTML. Más tarde el grupo de trabajo

W3C de XHTML2 creó la especificación RDFa basada en marcos de descripción de recursos

que permitía la reutilización de atributos XHTML. Como veremos más adelante, en HTML5

el enfoque es distinto, con una nueva sintaxis para añadir una estructura semántica adicional

(Schmitt y Simpson, 2012: 117)

En la práctica, Linked Data se refiere al uso del modelo de datos RDF para publicar datos

estructurados en la web y el uso de enlaces RDF para vincular datos de diferentes vocabularios[41]

ya existentes que definen formalmente cada dato. Una vez enlazados y definidos, los datos

pueden ser procesados y extraerse información adicional de las relaciones semánticas sin que

estén explícitamente representadas en el conjunto de datos, es lo que se denomina una ontología

(Schorlemmer, 2011: 31). De manera que los datos estructurados pueden ser usados por

aplicaciones basadas en el uso de la web (web apps). Por ejemplo, cualquier tipo de API publicada

por grandes compañías como Google, Amazon, eBay, etc. Las aplicaciones que consumen estas

APIs se denominan mashups[42]. En 2005 GoogleMaps fue una de las primeras APIs en usar

mashups (creados mediante XHTML, CSS y JavaScript). (Ver Anexo 22)

En el año 2009, Google presentó esta tecnología como fragmentos enriquecidos (Rich Snippets) que

se comportan como mashups semánticos (Yu, 2014: 416) y que pueden ser mucho más eficientes

y más útiles que los mashups tradicionales, generados automáticamente mediante microdatos o

microformatos. Los microdatos son datos que pueden ser procesados, organizados, estructurados

o presentados en un contexto dado. Es la forma que tiene HTML5 para proporcionar contenido

(descripciones semánticas) legible por máquina dentro (embedded) de un documento web,

normalmente de personas, organizaciones, eventos, reseñas, productos y enlaces (Sikos, 2011:

261). Los microdatos, optimizan los motores de búsqueda ayudando a entender el contenido

de un documento. No son visibles en el documento, son datos semánticos puros. Para usuarios

41 La iniciativa LOV (Linked Open Vocabularies) es un directorio de ontologías en constante crecimiento, actualmente gestiona 650 vocabularios, cuya misión es gestionar y facilitar la reutilización de vocabularios. Ver Anexo 23.

42 El término mashup tiene su origen en el mundo de la música. Un mashup musical es una mezcla de dos o más canciones (Deitel y Deitel, 2012: 1449)


41


avanzados, los microformatos son similares a los microdatos, pueden usar varios vocabularios

(difíciles de combinar), no usan el mecanismo de espacio de nombres, pueden describir cualquier

recurso y usan clases HTML. En cambio, RDFa puede describir cualquier recurso pero su sintaxis

es bastante compleja y no se valida en HTML4 o HTML5. Debido a que se consideró que RDFa era

demasiado difícil de escribir para los autores (Google realizó investigaciones que demuestran que

los autores cometen un 30% más de errores con RDFa que con otros formatos), los microdatos son

la respuesta de HTML5 a la necesidad de integrar semántica en documentos HTML (W3C, 2016).

Uno de los inconvenientes que tiene el uso de la web semántica es la limitación de usar motores

de búsqueda específicos. Los microdatos, permiten hacer descripciones semánticas capaces de ser

reconocibles por los motores de búsqueda en los navegadores habituales. Veamos a continuación,

cómo podemos agregar una capa semántica adicional al marcado de HTML5 con la nueva sintaxis

de microdatos. Los microdatos usan pares simples de nombre-valor para definir elementos. Cada

par nombre-valor identifica una propiedad del elemento (recurso) y un valor de esa propiedad.

Usan tres atributos globales[43]: <itemscope> para crear un item (recurso, elemento); <itemtype>

es la URL absoluta que identifica el item dentro de un vocabulario (es el espacio de nombre);

<itemprop> identifica la propiedad del item creado (normalmente contiene el valor de la propiedad,

del item que se está describiendo). Existen aplicaciones que pueden facilitar la práctica de generar

código sencillo. Por ejemplo, Web Code Tools (https://webcode.tools/microdata-generator).

Por último, es importante mencionar otros modelos de datos semánticos: RDFSchema, OWL,

JSON-LD y SPARQL. Todos ellos son recomendaciones del consorcio W3C para la representación,

almacenamiento, intercambio o consulta de datos vinculados. Si estos datos se destinan a páginas

con acceso abierto bajo una o varias licencias abiertas que permitan su reutilización, se denominan

datos abiertos vinculados (Linked Open Data).

43 Fuente: Consorcio W3C. HTML Microdata W3C Working Draft. 26 abril 2018, [consulta: 15 julio 2018, 13:30]. Disponible en: https://www.w3.org/TR/microdata/. Fuente: Sechema.org. Getting started with schema.org using Microdata. [consulta: 20 enero 2018, 18:00].Disponible en: https://www.w3.org/TR/microdata/. Fuente: WHATWG. Living Standard. 11 julio 2018, [consulta: 15 julio 2018, 12:30]. Disponible en: https://html.spec.whatwg.org/multipage/microdata.html#microdata.

https://webcode.tools/microdata-generator

https://www.w3.org/TR/microdata/

https://www.w3.org/TR/microdata/

https://html.spec.whatwg.org/multipage/microdata.html#microdata

https://html.spec.whatwg.org/multipage/microdata.html#microdata


42


6. RESULTADOS

La Figura 11 muestra la evolución que han tenido los principales lenguajes de marcado y las

diferentes versiones HTML y XHTML, así como algunas de las tecnologías asociadas. Las fechas

varían ligeramente en función de las fuentes consultadas.

TYPSETRUNOFF

Mundaneum(Paul Otlet)

HypertextXanadu Project

(Ted Nelson)

Memex(Vannevar Bush)

DARPA

ASCIIGenCode

(W. Tunnicliffe)HES (Andris van Dam)

OLS (Douglas Englebart)

ARPANET(Internet)

GML

EthernetGUI; NCP; OOP

Xerox Parc Z39.50

WYSIWYG

First Personal Computer(Alan Kay)

TCP/IP

Enquire

IBM PC

Adobe SystemsPostScript

DNSMacintosh (Apple)

TeX

Windows (Microsoft)

IETFSGML (ISO 8879)

HyperCard

IANAICANN

InformationManagement:

A Proposal(Tim Berners-Lee)

First server in NEXTURL

HTTP

First Server (EUROPE)HTTPHTML

World Wide WebLinux

Gopher

First Server (USA)ISOC; JPEG

Macromedia Inc.TIFF

The Web is declaredpublic domain

(CERN, 30/04/1993)HTML+

PDFViolaWWW

NCSA MosaicLycos

NetscapeOpera

SSLWeb-Crawling

W3C Consortium

Altavista; AmazonApache Server

Dublin Core; EbayHTML2 (IETF)

Internet Explorer; Java; JavaScript; PHP; Yahoo!

ActiveXCSS1 (R)

Flash PlayerXML (WD)

ECMAScriptHTML3.2 (R)

HTML CougarMSN; RDF (WD)

Terra; WAI

CSS2 (R)DOM1 (R)

GoogleHTML4.0 (R)

MozillaNapster (P2P)

XHTMLXML1.0 (R)

BaiduBlogger

HTML4.01 (R)WCAG1.0

CSS3 (WD)DOM2 (R)

HTML (ISO 15445)URI

XHTML1.0 (R)Yandex

BitTorrent; JSONMedia Queries (WD)

RSS 1.0; Semantic WebSVG; Wikipedia

XHTML1.1

EmuleFirefox

TorWeb Services

XHTML2.0 (WD)

LinkedInRSS / Atom

SafariXforms

DOM3 (R)Facebook

OWLWHATWGWEB 2.0

AjaxWeb Apps 1.0 (WD)

Youtube

CSS2.1Twitter

W3C & WHATWG

CSS2.2EPUB

WebIDL (WD)

Chrome; DuckDuckGoHTML5 (WD)

RDFa; SPARQLWCAG2.0

XHTML Basic 1.1 (R)

BingOWL2 (R)

XHTML2.0 (cerrado)

Responsive Web DesignWOFF1.0

XHTML Basic 1.1 (R) (Second Edition)

Escisión de W3Ccon WHATWG

LaTeX

CSS3 (CR)HTML5 (CR)

Media QueriesOWL2 (R)

(Second Edition)

Geolocation API (R)Widget Interface (R)

20 Aniversario W3CCSS3 Levels module

JSON-LD 1.0 (R)WAI-ARIA 1.0 (R)

HTML5 (R)

DOM4 (R)Edge

HTTP/2

HTML5.1 (R)IMS

TTML W3C & IDPF (EPUB)

WebIDL1 (R)

DOM 4.1 (WD)EPUB 3.1

HTML5.2 (R)WCAG 2.1 (WD) (WD): Working Draft

(CR): Candidate Recommendation (R): Recommendation

19641934 1966 1969 1974 1978

1981 1984 1986 1988 1990 1992

1994 1996 1998 2000 2002 2004

2006 2008 2010 2012 2014 2016

19651945 1967 1970 1975 1980

1982 1985 1987 1989 1991 1993

1995 1997 1999 2001 2003 2005

2007 2009 2011 2013 2015 2017

19641934 1966 1969 1974 1978

1981 1984 1986 1988 1990 1992

1994 1996 1998 2000 2002 2004

2006 2008 2010 2012 2014 2016

19651945 1967 1970 1975 1980

1982 1985 1987 1989 1991 1993

1995 1997 1999 2001 2003 2005

2007 2009 2011 2013 2015 2017

Figura 11. Línea de tiempo de lenguajes de marcado y otras tecnologíasFuente: elaboración propia


43

Francisco-Javier Poveda-SotoRESULTADOS

El gráfico de la Figura 12 muestra la evolución de las diferentes versiones de lenguajes de marcado.

La aparición de GML, normalizado posteriormente como SGML, hizo posible que se impusiera la

codificación genérica frente a la codificación específica (solo en entornos propietarios), haciendo

compatible el marcado con otras aplicaciones y que fuese universal (de uso público). SGML se

convirtió en un lenguaje de metamarcado, es decir, un lenguaje usado para facilitar la creación de

otros lenguajes como fue HTML y más tarde XML por la necesidad de suplir sus carencias.

HTML es una simplificación de SGML con un conjunto limitado y predefinido de elementos.

El consorcio W3C junto con la agencia DARPA y la Unión Europea diseñaron una versión más

extensible y ampliable conocida como XML (Mckinnon, L. y Mckinnon 2003: 17). Su sintaxis fue

compatible con los navegadores web a partir de HTML4.0, lo que dio lugar a una reformulación

de HTML con la aparición de XHTML. En 2002 apareció el primer borrador de la versión

XHTML2, abandonado definitivamente en 2009. Esto supuso un impulso de aunar fuerzas para

crear un estándar capaz de admitir las especificaciones de versiones anteriores y aquellas que los

desarrolladores necesitaban y estaban comenzado a aplicar con la especificación de Aplicaciones

Web 1.0 en 2005. La amalgama de todas estas especificaciones dio lugar a HTML5.

WHATWG

WebApps1.02005

HTML52014

XHTML22002

XHTML22009

XHTML1.12001

XHTML1.02000

XML1.01998

HTML21995

HTML4.01998

HTML4.011999

SGML1986 XHTML5

2014

HTML1991

HTML3.21997

Figura 12. Evolución de HTML y XHTMLFuente: modificado a partir de Bradford y Haine, 2011: 3


44


Los datos de la Figura 13 corresponden a la tendencia anual de adopción de HTML frente a

XHTML desde 2010 hasta 2017.

Los datos de la Figura 14 corresponden a la tendencia anual de creación de sitios web con las

diferentes versiones de HTML y XHTML desde julio de 2008 hasta mayo de 2018. Han sido

cedidos por cortesía de PowerMapper. Por problemas técnicos en los servidores, se descartan los

datos de los meses de octubre, noviembre y diciembre de 2010 y abril, mayo y junio de 2011. Las

tablas de todos los datos se encuentran en el Anexo 24.

2010 2011 2012 2013 2014 2015 2016 2017HTML 45,70% 38,10% 35,40% 38,90% 49,40% 59,10% 67,40% 73,50%XHTML 55,10% 63,00% 65,60% 62,10% 51,40% 41,50% 33,10% 27,00%

0%

10%

20%

30%

40%

50%

60%

70%

80%

2010 2011 2012 2013 2014 2015 2016 2017

HTML XHTML73,50%

HTML5

27,00%

XHTML

Figura 13. Tendencia anual de XHTML y HTML5 para la creación de sitios webFuente: https://w3techs.com/technologies/history_overview/markup_language/ms/y

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

jul-08 sept-09 feb-11 jul-12 sept-13 feb-15 ene-17 sept-17 may-18

Ago 2013

87,26%

7,80%

HTML5

XHTML

HTML 4.01

HTML 4.0

No doctype

HTML 3.2

HTML 5.0

XHTML 1.0

XHTML 1.1

2015Ene

2015Ago

2016Ene

2016Mar

2017Ene

2017Mar

2018Ene

2018Mar

HTML5 69,25% 75,09% 77,99% 79,15% 81,89% 84,92% 85,48% 87,26%XHTML 1.0 24,22% 17,47% 16,44% 15,11% 12,29% 10,26% 8,77% 7,80%

Figura 14. Tendencia anual de versiones HTML y XHTML para la creación de sitios webFuente: PowerMapper, 2017 https://try.powermapper.com/Stats/HtmlVersions

https://w3techs.com/technologies/history_overview/markup_language/ms/y

https://try.powermapper.com/Stats/HtmlVersions


45


La Figura 15 muestra una comparación entre XHTML y HTML5. En general, la especificación

HTML5 tiene cuatro líneas de estudio[44]: 1. Define un único idioma llamado HTML que se puede

escribir en sintaxis HTML y en sintaxis XML. 2. Define modelos de procesamiento detallados

para fomentar implementaciones interoperables. 3. Mejora el marcado de documentos. 4. Presenta

marcado y API para expresiones emergentes, como aplicaciones web.

44 Fuente: Consorcio W3C. HTML5 Differences from HTML4 W3C. Working Group Note 9. Diciembre 2014, [consulta: 2 mayo 2018, 22:00]. Disponible en: https://www.w3.org/TR/html5-diff/.

XHTML HTML5

No admite sintaxis HTML. Es una versión más estricta y limpia que HTML 4.01.

Lenguaje poliglota, admite tanto la sintaxis HTML como XML (conocida como XHTML5 o HTML5x).

Cierre de etiquetas Todos los elementos deben ser cerrados explícitamente. Incluso los elementos vacíos.

Algunos elementos no necesitan una etiqueta de cierre. Los elementos vacíos no deben tener una etiqueta de cierre.

Declaración DTD/DOCTYPE <? xml version=“1.0” encoding=“UTF-8”?> <html xmlns=“http://www.w3.org/1999/xhtml”>

<!DOCTYPE html>

Si se utiliza la sintaxis XML, cualquier Doctype puede ser utilizado u omitido. Ya que los documentos con MIME Type XML, el navegador los analiza en modo estándar.

Declaración de codificación de caracteres

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<meta charset=”UTF-8”>

Espacios de nombre Se necesita declarar el espacios de nombre. No necesita declarar espacios de nombre.

Mayúsculas/minúsculas Los elementos y atributos distinguen mayúsculas y minúsculas. Todas deben ser minúsculas.

Los elementos y atributos son insensibles a las mayúsculas y minúsculas.

Nuevas APIs HTML5

HTML5 permite usar APIs que proveen funcionalidades nativas enriquecidas que mejoran la experiencia del usuario sin necesidad de plugins externos

Application Cache (Offline Web Apps)Audio & VideoCanvas (2D & 3D)Cross-document messagingDrag and DropFormsGeolocationIndexed databaseMathMLMicrodataScalable Vector Graphics (SVG)Server-Sent eventsWeb origin conceptWeb storageWeb WorkersWebSocket API and protocolXMLHttpRequest Level 2

Valores Los valores de los atributos deben estar entre comillas.

Los valores de los atributos pueden escribirse sin estar entre comillas (si no hay espacios en blanco).

Figura 15. Tabla comparativa entre XHTML y HTML5Fuente: www.w3schools.com, 2018; Lubbers, Salim y Albers, 2011: 7

https://www.w3.org/TR/html5-diff/

http://www.w3schools.com


46


La Figura 16 muestra solamente los nuevos elementos HTML5 o aquellos que han sido

modificados. No se incluyen los elementos que siguen siendo válidos de versiones anteriores.

Elementos de contenido de agrupación

<figcaption> Denota un título para un elemento de figure (figura, ilustración) Nuevo HTML5

<figure> Denota una figura (ilustración) Nuevo HTML5

<hr> Denota una ruptura temática a nivel de párrafo Modificado

<li> Denota un elemento en un elemento ul, ol o menu Modificado

<ol> Denota una lista ordenada de elementos Modificado

<p> Denota un párrafo Modificado

<ul> Denota una lista desordenada de elementos Modificado

Elementos de creación de formularios

<button>Indica un botón que enviará o restablecerá el formulario (o que puede usarse como un botón genérico)

Modificado

<datalist> Define un conjunto de valores sugeridos para el usuario Modificado

<fieldset> Denota un grupo de elementos de formulario Modificado

<form> Denota un formulario HTML Modificado

<input> Denota un control para recopilar datos del usuario Modificado

<keygen> Genera un par de claves públicas / privadas Nuevo HTML5

<label> Denota una etiqueta para un elemento de formulario Modificado

<output> Denota el resultado de un cálculo Nuevo HTML5

<select> Presenta al usuario un conjunto fijo de opciones Modificado

<textarea> Permite al usuario ingresar múltiples líneas de texto Modificado

Elementos de creación de tablas

<caption> Agrega un título a una tabla Modificado

<col> Denota una sola columna Modificado

<colgroup> Denota un grupo de columnas Modificado

<table> Denota una tabla Modificado

<tbody> Denota el cuerpo de una tabla Modificado

<td> Denota una celda de tabla individual Modificado

<tfoot> Denota un pie de página para una tabla Modificado

<th> Denota una celda de encabezado individual Modificado

<thead> Denota un encabezado para una tabla Modificado

<tr> Denota una fila de celdas de tabla Modificado

Elementos de documento y elementos de metadatos

<body> Denota contenido en un documento HTML Modificado

<DOCTYPE> Denota el inicio de un documento HTML Modificado

<html> Indica el inicio de HTML en un documento Modificado

<link>Define una relación con un recurso externo, generalmente una hoja de estilo o un favicono (icono de página)

Modificado

<meta> Proporciona información sobre el documento Modificado

<script> Define un bloque de script, ya sea en línea o en un archivo externo Modificado

<style> Define un estilo CSS Modificado

Elementos de texto

<a> Crea un hipervínculo Modificado


47


<b> Compensa un lapso de texto sin énfasis o importancia adicional Modificado

<cite> Denota el título de otro trabajo Modificado

<del> Denota el texto que se ha eliminado del documento Nuevo HTML5

<i>Indica una extensión de texto que es de una naturaleza diferente a la del contenido circundante, como una palabra de otro idioma

Modificado

<ins> Denota el texto que se ha agregado al documento Nuevo HTML5

<mark> Denota el contenido que se resalta debido a su relevancia en otro contexto Nuevo HTML5

<rp> Denota los parámetros para usar con el elemento ruby Nuevo HTML5

<rt> Denota una notación para usar con el elemento ruby Nuevo HTML5

<ruby>Denota una notación para colocar arriba o a la derecha de los caracteres en un lenguaje logográfico (Este Asiático)

Nuevo HTML5

<s> Denota el texto que ya no es preciso Modificado

<small> Denota letra pequeña Modificado

<time> Denota una hora o fecha Nuevo HTML5

<u> Compensa un lapso de texto sin énfasis o importancia adicional Modificado

<wbr> Indica un lugar donde un salto de línea se puede colocar con seguridad Nuevo HTML5

Elementos de incrustar contenido

<area> Denota un área para un mapa de imagen del lado del cliente Modificado

<audio> Denota un recurso de audio Nuevo HTML5

<canvas> Proporciona un lienzo de gráficos dinámicos Nuevo HTML5

<embed> Incorpora contenido en un documento HTML con un complemento Nuevo HTML5

<iframe> Inserta un documento en otro creando un contexto de exploración Modificado

<img> Incrusta una imagen Modificado

<map> Denota la definición de un mapa de imagen del lado del cliente Modificado

<meter>Incrusta una representación de un valor numérico que se muestra dentro del rango de valores posibles

Nuevo HTML5

<object>Incorpora contenido en un documento HTML y también se puede usar para crear contextos de navegación y crear mapas de imágenes del lado del cliente

Modificado

<progress>Incorpora una representación del progreso hacia un objetivo o la finalización de una tarea

Nuevo HTML5

<source> Denota un recurso de medios (multimedia en general) Nuevo HTML5

<svg> Denota contenido vectorial estructurado (escalable) Nuevo HTML5

track Denota una pista de medios suplementaria, como un subtítulo Nuevo HTML5

video Denota un recurso de video Nuevo HTML5

Elementos de secciones de contenido

<address> Denota la información de contacto de un documento o artículo Nuevo HTML5

<article> Denota un bloque independiente de contenido Nuevo HTML5

<aside>Denota contenido que está tangencialmente relacionado con el contenido circundante

Nuevo HTML5

<details> Crea una sección que el usuario puede expandir para obtener detalles adicionales Nuevo HTML5

<footer> Denota una región de pie de página Nuevo HTML5

<header> Denota una región de encabezado Nuevo HTML5

<hgroup>Oculta todo menos el primero de un conjunto de encabezados del esquema del documento

Nuevo HTML5

<nav> Denota una concentración significativa de elementos de navegación Nuevo HTML5

<section> Denota un concepto o tópicos significativos Nuevo HTML5

<summary>Denota un título o descripción para el contenido en un elemento de detalles adjuntos

Nuevo HTML5

Figura 16. Tabla de elementos HTML5. Nuevos o modificadosFuente: Freeman 2011: 108-114


48


7. CONCLUSIONES

Las conclusiones a las que se ha podido llegar por el desarrollo de este trabajo son principalmente

tres: el establecimiento del marco teórico sobre la materia estudiada, fijar el cambio de paradigma a

favor del uso de HTML5 frente a otros lenguajes (XHTML en concreto) y, finalmente, la influencia

que tiene el acceso a la web vía teléfonos móviles en los últimos años.

En primer lugar, se ha de destacar la importancia de haber podido establecer un marco teórico

en relación con los lenguajes de marcado a pesar de la escasa bibliografía disponible de forma

específica sobre esta materia. Así pues, se cumple el objetivo principal de este trabajo por el cual

nos propusimos analizar el origen y la evolución, además de su clasificación, de los lenguajes

de marcado. La importancia de esto se puede observar tanto a nivel práctico como a nivel

teórico; ya que, por una parte, un mayor conocimiento acerca de estas cuestiones por parte de

los profesionales dedicados a la gestión de la información y de la documentación les permitirá

su aplicabilidad práctica a un mejor desarrollo de su profesión y, por otra parte, ello constituye,

además, una base teórica que será susceptible de ampliación en futuras investigaciones.

En segundo lugar, a partir del marco teórico establecido, ha sido posible constatar el cambio de

paradigma producido entre mediados del 2013 y principios del 2014 conducente a la adopción

de HTML5, en detrimento de XHTML, como principal lenguaje de marcado en el desarrollo

de sitios web. Se han podido establecer también los motivos a los que responde este cambio,

uno de los dos objetivos secundarios de este trabajo. En cuanto, al otro objetivo secundario,

esto es, el de poder alcanzar un mayor entendimiento de la estructura y creación, además de las

tecnologías intervinientes en la misma, de un documento HTML, creemos que ha sido alcanzado

satisfactoriamente al igual que los otros.

En último lugar creemos que ha quedado suficientemente plasmado el cambio de tendencia

acaecido sobre el modo de acceso de los usuarios a la información, especialmente por parte de

aquellos conocidos como “nativos digitales”, y la necesidad por parte de los profesionales del sector

de la documentación de poder responder a ese reto dando unas soluciones que sean cada vez más

eficaces respecto a la visibilidad, accesibilidad y usabilidad de los recursos bibliotecarios.


49

Francisco-Javier Poveda-SotoCONCLUSIONES

CONCLUSIONS

The conclusions that have been reached by the development of this work are mainly three: the

establishment of the theoretical framework on the subject studied, set the paradigm shift in favor

of the use of HTML5 versus other languages (XHTML in particular) and , finally, the influence of

access to the web via mobile phones in recent years.

First of all, the importance of having been able to establish a theoretical framework in relation to

the markup languages, despite the limited bibliography available specifically on this subject, must

be highlighted. Thus, the main objective of this work is met by which we set out to analyze the

origin and evolution, as well as its classification, of the markup languages. The importance of this

can be observed both on a practical level and at a theoretical level; since, on the one hand, a greater

knowledge about these issues on the part of the professionals dedicated to the management of

information and documentation will allow them its practical applicability to a better development

of their profession and, on the other hand, this constitutes , in addition, a theoretical base that will

be susceptible of expansion in future investigations.

Secondly, based on the theoretical framework established, it has been possible to verify the

paradigm shift produced between mid-2013 and early 2014, leading to the adoption of HTML5,

to the detriment of XHTML, as the main markup language in the development of sites. Web.

We have also been able to establish the reasons to which this change responds, one of the two

secondary objectives of this work. As for the other secondary objective, that is, to be able to reach

a greater understanding of the structure and creation, in addition to the technologies involved in

it, of an HTML document, we believe that it has been achieved satisfactorily as well as the others.

Finally, we believe that the change in the trend of the way users access information has been

sufficiently captured, especially by those known as “digital natives”, and the need for professionals

in the sector documentation of being able to respond to this challenge by providing solutions

that are increasingly effective with respect to the visibility, accessibility and usability of library

resources.


50


8. BIBLIOGRAFÍA

La presente bibliografía está clasificada alfabéticamente de acuerdo con la norma UNE-ISO

690:2013. Este estándar no representa ningún estilo en concreto de referencia o cita (como lo

son APA, Vancouver, etc.) sino que, se refiere a directrices que indican los datos mínimos de

mención que debe tener una referencia bibliográfica. Tampoco se consideran preceptivos el estilo y

puntuación de los ejemplos que aparecen en la norma. Solo se debe usar un esquema uniforme de

estilo, formato y puntuación para todas las referencias mencionadas.

[1]. ANDERSON, L. K., 1994. Handbook for proofreading. Lincolnwood, IL: NTC Business Books. ISBN 978-0-8442-3266-9.

[2]. AYUSO GARCÍA, M. D., 1995. Conceptos fundamentales de la teoría de la documentación. Estudio terminológico y versión española del Traité de la documentation de Paul Otlet [en línea]. Tesis doctoral. [S.l.]: Universidad de Murcia [consulta: 14 abril de 2017]. Disponible en: https://dialnet.unirioja.es/servlet/tesis?codigo=94828.

[3]. BEHAR RIVERO, D. S., 2008. Metodología de la investigación. [s.l.]: Ediciones Shalom. ISBN 978-959-212-783-7.

[4]. BENGTSON, J., 2013. What Is HTML5 and What Do You Need To Know About It? Journal of Hospital Librarianship [en línea], vol. 13, no. 4, pp. 392-398. [Consulta: 14 marzo 2016]. ISSN 1532-3269. DOI 10.1080/15323269.2013.834184. Disponible en: http://dx.doi.org/10.1080/15323269.2013.834184.

[5]. BERNERS-LEE, T., 1989. Information Management: A Proposal. W3C [en línea]. Disponible en: https://www.w3.org/History/1989/proposal.html [consulta: 5 de abril de 2016].

[6]. BRADFORD, A. y HAINE, P., 2011. HTML5 Mastery: Semantics, Standards, and Styling [en línea]. Berkeley, CA: Apress [consulta: 1 febrero de 2017]. ISBN 978-1-4302-3861-4. Disponible en: http://dx.doi.org/10.1007/978-1-4302-3862-1.

[7]. BROOKSHEAR, J.G., 2005. Computer science: an overview. Boston: Pearson/Addison Wesley. ISBN 978-0-321-26971-3.

[8]. CACHEDA SEIJO, F., FERNÁNDEZ LUNA, J. M. y HUETE GUADIX, J. F., 2011. Recuperación de información. Un enfoque práctico y multidisciplinar. Madrid: RA-MA. ISBN 978-84-9964-112-6.

[9]. CAREY, P. y VODNIK, S., 2014. New Perspectives on XML, Comprehensive. 3ª ed. Boston, MA: Cengage Learning. ISBN 978-1-285-07582-2.

[10]. CARVER, M., 2015. The responsive web [en línea]. Shelter Island, NY: Manning Publications. [Consulta: 19 diciembre 2017]. ISBN 978-1-61729-124-1. Disponible en: http://proquestcombo.safaribooksonline.com/9781617291241.

https://dialnet.unirioja.es/servlet/tesis?codigo=94828

http://dx.doi.org/10.1080/15323269.2013.834184

http://dx.doi.org/10.1080/15323269.2013.834184

https://www.w3.org/History/1989/proposal.html

http://dx.doi.org/10.1007/978-1-4302-3862-1

http://proquestcombo.safaribooksonline.com/9781617291241

http://proquestcombo.safaribooksonline.com/9781617291241


51

Francisco-Javier Poveda-SotoBIBLIOGRAFÍA

[11]. CASTELLUCCIO, M. (ed.), 2007. The Big Blue Onion. Strategic Finance, 11, vol. 89, no. 5, pp. 57-58 Retrieved from http://search.proquest.com/docview/229774330?accountid=17225

[12]. CASTRO, E., 2007. HTML, XHTML y CSS. Madrid: Anaya Multimedia. ISBN 978-84-415-2183-4.

[13]. CASTRO, E. y HYSLOP, B., 2012. HTML5 and CSS3: Visual QuickStart Guide. 7ª ed. Berkeley, CA: Peachpit Press. ISBN 978-0-321-71961-4.

[14]. COOMBS, J. H., RENEAR, A. H., y DeROSE, S. J., 1987. Markup systems and the future of scholarly text processing. Communications of the ACM [en línea]. Nueva York, NY: ACM, vol. 30, no. 11, pp. 933-947 [consulta: 5 de abril de 2016]. ISSN 1557-7317. Disponible en: https://doi.org/10.1145/32206.32209.

[15]. CROWTHER, R., 2013. Hello! HTML5 & CSS3 a user-friendly reference guide. Shelter Island, NY: Manning. ISBN 978-1-935182-89-4.

[16]. DEITEL, P.J. y DEITEL, H.M., 2012. Java how to program. 9ª ed. Upper Saddle River, NJ: Prentice Hall. ISBN 978-0-13-257566-9.

[17]. DUCKETT, J., RUPPERT, G., MOORE, J. y STONE, E., 2014. Web design with HTML, CSS, JavaScript and jQuery set. S.l.: s.n. ISBN 978-1-118-90744-3.

[18]. EÍTO BRUN, R., 2008. Lenguajes de marcas para la gestión de recursos digitales aproximación técnica, especificaciones y referencia. Gijón: Trea. ISBN 978-84-9704-347-2.

[19]. FAWCETT, J., QUIN, L. R. E. y AYERS, D., 2012. Beginning XML. 5th Ed. Indianapolis, Ind.: John Wiley & Sons. ISBN 978-1-118-16213-2.

[20]. FIELDING, J., 2014. Beginning Responsive Web Design with HTML5 and CSS3. Berkeley, CA: Apress. ISBN 978-1-4302-6695-2.

[21]. FOX, R., 2012. Being responsive. OCLC Systems and Services: International digital library perspectives, vol. 28, no. 3, pp. 119-125. ISSN 1065-075X. DOI 10.1108/10650751211262100.

[22]. FRAIN, B., 2015. Responsive web design with HTML5 and CSS3 build responsive and future-proof websites to meet the demands of modern web users. 2ª ed. Birmingham, UK: Packt Publishing. ISBN 978-1-78439-826-2.

[23]. FREEMAN, A., 2011. The Definitive Guide to HTML5. Berkeley, CA : Nueva York: Apress. ISBN 978-1-4302-3960-4.

[24]. GARCÍA SANZ, M. P. y MARTÍNEZ CLARES, P., 2012. Guía práctica para la realización de trabajos fin de grado y trabajos fin de máster. Murcia: EDITUM, Servicio de publicaciones de la Universidad de Murcia. ISBN 978-84-8371-973-2.

[25]. GAUCHAT, J. D., 2013. El gran libro de Html5, CSS3 y JavaScript. Barcelona: Marcombo. ISBN 978-84-267-1770-2.

[26]. GHEZZI, C. y JAZAYERI, M., 2008. Programming language concepts. New Delhi: Wiley India. ISBN 978-81-265-1861-6.

https://doi.org/10.1145/32206.32209

https://doi.org/10.1108/10650751211262100


52


[27]. GOLDFARB, C.F . y RUBINSKY, Y., 1990. The SGML Handbook. S.l.: Clarendon Press. ISBN 978-0-19-853737-3.

[28]. GORTÁZAR BELLAS, F., MARTÍNEZ UNANUE, R. y FRESNO FERNÁNDEZ, V., 2012. Lenguajes de programación y procesadores. Madrid: Editorial Universitaria Ramón Areces. ISBN 978-84-9961-070-2.

[29]. GUTIÉRREZ, R.T., 2016. El surgimiento de HTML5; un nuevo paradigma en los estándares Web. Teknokultura [en línea], vol. 13, no. 1, pp. 169-192. [Consulta: 10 febrero 2017]. ISSN 1549-2230. DOI http://dx.doi.org/10.5209/rev_TK.2016.v13.n1.52152. Disponible en: http://revistas.ucm.es/index.php/TEKN/article/view/52152.

[30]. HAWKES, R., 2011. Foundation HTML5 canvas. Nueva York, NY: Friends of ED. ISBN 978-1-4302-3292-6.

[31]. HILBERT, M. y LÓPEZ, P., 2011. The world’s technological capacity to store, communicate, and compute information. Science [en línea]. Nueva York, NY: AAAS, vol. 332, no. 6025, pp. 60-65 [consulta: 5 de abril de 2016]. ISSN 1095-9203. Disponible en: https://doi.org/10.1126/science.1200970.

[32]. JAFFE, J., 2014. Application Foundations For The Open Web Platform. En: W3 Consortium [en línea]. 14 octubre 2014 [consulta: 12 febrero 2017]. Disponible en: https://www.w3.org/blog/2014/10/application-foundations-for-the-open-web-platform/.

[33]. JONES, G., ELGAN, M. y POTTER, V., 2006. Fif teen World-Widening Years. InformationWeek. Manhasset, NY: CMP Publications, Sep. 18, no. 1106, pp. 41, 42, 45, 47-49. ISSN 8750-6874.

[34]. LECOMTE, S. y BOULANGER, T., 2009. XML práctico: bases esenciales, conceptos y casos prácticos. Cornellà de Llobregat, Barcelona: Ediciones ENI. ISBN 978-2-7460-4958-1.

[35]. LOWERY, J. y FLETCHER, M., 2011. HTML5 24-Hour Trainer. Indianapolis, IN: Wiley Publishing, Inc., ISBN 978-0-470-64782-0.

[36]. LUBBERS, P., SALIM, F. y ALBERS, B., 2011. Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. 2ª ed. Neva York: Apress. ISBN 978-1-4302-3864-5.

[37]. MARCOTTE, E. y KEITH, J., 2014. Responsive web design [en línea]. S.l.: s.n. [Consulta: 23 julio 2018]. ISBN 978-0-13-418869-0. Disponible en: http://proquest.safaribooksonline.com/?fpi=9780134188690.

[38]. MARTÍNEZ DE SOUSA, J., 2012. Manual de estilo de la lengua española (MELE 4). Gijón: Trea. ISBN 978-84-9704-606-0.

[39]. MARTÍNEZ GONZÁLEZ, M., 2015. Derecho y sistemas de datos: el uso del XML jurídico. Valencia: Tirant lo Blanch. ISBN 978-84-9086-010-6.

[40]. MAVRODY, S., 2015. Sergey’s HTML5 and CSS3 Quick Reference: HTML5, CSS3 and APIs. 3ª ed. Henderson, NV: Belisso. ISBN 978-0-9833867-4-2.

http://dx.doi.org/10.5209/rev_TK.2016.v13.n1.52152

http://revistas.ucm.es/index.php/TEKN/article/view/52152

https://doi.org/10.1126/science.1200970

https://doi.org/10.1126/science.1200970

https://www.w3.org/blog/2014/10/application-foundations-for-the-open-web-platform/

https://www.w3.org/blog/2014/10/application-foundations-for-the-open-web-platform/

http://proquest.safaribooksonline.com/?fpi=9780134188690

http://proquest.safaribooksonline.com/?fpi=9780134188690


53


[41]. MCFARLAND, D.S., 2013. CSS3: the missing manual : the book that should have been in the box ; [covers HTML5]. Sebastopol, Calif.: O’Reilly. ISBN 978-1-4493-2594-7.

[42]. MCKINNON, L. y MCKINNON, A., 2003. XML in 60 minutes a day. Indianapolis, Ind.: Wiley Pub. ISBN 978-0-471-48097-6.

[43]. MORRISON, M., 2000. XML al descubierto. Madrid: Pearson. ISBN 978-84-205-2964-6.

[44]. MUSCIANO, C. y KENNEDY, B., 2006. HTML and XHTML: The Definitive Guide. 6ª ed. Sebastopol, CA: O’Reilly Media, Inc. ISBN 978-0-596-52732-7.

[45]. NAVARRO SCHLEGEL, A., 2003. Diccionario de términos de comunicaciones y redes. Madrid: Pearson Educación. ISBN 978-84-205-3471-8.

[46]. NELSON, T. H., 1965. Complex information processing: a file structure for the complex, the changing and the indeterminate. En: Proceedings of the 1965 20th National Conference [en línea]. Cleveland, O: ACM, pp. 84-100 [consulta: 5 de abril de 2016]. Disponible en: https://doi.org/10.1145/800197.806036.

[47]. NELSON, T. H., 1991. As we will think. From Memex to hypertext. San Diego, CA: Academic Press Professional, Inc., pp. 245-260. ISBN 9780125232708

[48]. PERCIVAL, J., 2013. HTML5 Advertising. Berkeley, CA: Apress. ISBN 978-1-4302-4603-9.

[49]. PFEIFFER, S. y GREEN, T., 2015. Beginning HTML5 Media Make the most of the new video and audio standards for the Web. 2ª ed. Nueva York, NY: Springer Science. ISBN 978-1-4842-0460-3.

[50]. PINTO MOLINA, M., GARCÍA MARCO, F.J. y AGUSTÍN LACRUZ, M.C, 2002. Indización y resumen de documentos digitales y multimedia: técnicas y procedimientos. Gijón, Asturias: Ediciones Trea. ISBN 978-84-9704-023-5.

[51]. POGGI, F., 2015. Structural patterns for document engineering: from an empirical bottom-up analysis to an ontological theory [en línea]. Tesis doctoral. [S.l.]: Alma Mater Studiorum Università di Bologna [consulta: 20 enero de 2017]. Disponible en: https://dx.doi.org/10.6092/unibo/amsdottorato/7123.

[52]. POWELL, T.A., 2010. HTML and CSS: The Complete Reference. 5ª ed. Nueva York: McGraw-Hill Education. ISBN 978-0-07-149629-2.

[53]. RAY, E.T., 2001. Learning XML. S.l.: O’Reilly Media, Inc. ISBN 978-1-4493-7887-5.

[54]. REID, J., 2015. HTML5 Programmer’s Reference. Berkeley, CA: Apress. ISBN 978-1-4302-6367-8.

[55]. SÁNCHEZ QUERO, M.. y BIA PLATAS, A., 2001. Diseño de un procedimiento de marcado para la automatización del procesamiento de textos digitales usando XML y TEI. En: JBIDI ’2001 [en línea]. S.l.: Universidad de Castilla-La Mancha, pp. 153-165. [consulta: 16 mayo 2017]. ISBN 84-699-6276-0. Disponible en: https://dialnet.unirioja.es/servlet/ articulo?codigo=977384.

https://doi.org/10.1145/800197.806036

https://dx.doi.org/10.6092/unibo/amsdottorato/7123

https://dx.doi.org/10.6092/unibo/amsdottorato/7123

https://dialnet.unirioja.es/servlet/ articulo?codigo=977384

https://dialnet.unirioja.es/servlet/ articulo?codigo=977384


54


[56]. SCHAFER, S. M., 2010. HTML, XHTML y CSS. Madrid: Anaya Multimedia. ISBN 978-84-415-2767-6.

[57]. SCHEMENT, J. R., 2001. Encyclopedia of Communication and Information. Nueva York, NY: Macmillan Reference USA. ISBN 978-0-02-865386-0.

[58]. STACHOWIAK, M, 2006. Understanding HTML, XML and XHTML. En: Webkit [en línea]. Disponible en: https://webkit.org/blog/68/understanding-html-xml-and-xhtml/.

[59]. SCHMITT, C. y SIMPSON, K., 2012. HTML5 cookbook. Sebastopol, CA: O’Reilly Media. ISBN 978-1-4493-9679-4.

[60]. SCHORLEMMER, M., 2011. Diez años construyendo una web semántica. Lychnos [en línea]. Madrid: Fundación General CSIC, no.7, pp. 26-31 [Consulta: 28 mayo de 2017]. ISSN 2171-6463. Disponible en: http://www.fgcsic.es/lychnos/upload/publicacion.11.ficPDF_castellano.Lych_07_cast_web.pdf.

[61]. SCHREIBMAN, S., SIEMENS, R. y UNSWORTH, J. (eds.), 2004. A Companion to Digital Humanities. Malden, MA: Wiley-Blackwell. ISBN 978-1-4051-0321-3.

[62]. SIKOS, L., 2014. Web Standards: Mastering HTML5, CSS3, and XML. 2ª ed. Berkeley, CA: Apress. ISBN 978-1-4842-0884-7.

[63]. TABARÉS GUTIÉRREZ, R., 2015. La belleza del código. Influencia de la Web 2.0, los medios sociales y los contenidos multimedia en el desarrollo de HTML5 [en línea]. Tesis doctoral. S.l.: Universidad de Salamanca [consulta: 14 mayo de 2016]. Disponible en: http://gredos.usal.es/jspui/handle/10366/128285.

[64]. TALENS-OLIAG, S., 2006. Agile Documentation Tools. V Jornades Programari Lliure [en línea]. Instituto Tecnológico de Informática [Universidad Politécnica de Valencia]. [Consulta: 13 mayo 2017]. Disponible en: https://www.uv.es/sto/charlas/2006_07_V_JornadesPL/adt-vjpl.html.

[65]. TEI CONSORTIUM, 2017. P5: guidelines for electronic text encoding and interchange [en línea]. Editado por: Text Encoding Initiative Consortium [consulta: 15 marzo de 2017].

[66]. TRAMULLAS SAZ, J., 2006. Tendencias en documentación digital. Somonte-cenero, Gijón: Ediciones Trea. ISBN 978-84-9704-270-3.

[67]. VANDENBUSSCHE, P.-Y., ATEMEZING, G.A., POVEDA-VILLALÓN, M. y VATANT, B., 2017. Linked Open Vocabularies (LOV): A gateway to reusable semantic vocabularies on the Web. Semantic Web [en línea], vol. 8, no. 3, pp. 437-452. [consulta: 7 mayo 2017]. ISSN 1570-0844. Disponible en: https://doi.org/10.3233/SW-160213.

[68]. W3C Consortium, 2002. XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) C. HTML Compatibility Guidelines. [en línea]. Disponible en: https://www.w3.org/TR/xhtml1/#guidelines.

https://webkit.org/blog/68/understanding-html-xml-and-xhtml/

http://www.fgcsic.es/lychnos/upload/publicacion.11.ficPDF_castellano.Lych_07_cast_web.pdf

http://www.fgcsic.es/lychnos/upload/publicacion.11.ficPDF_castellano.Lych_07_cast_web.pdf

http://gredos.usal.es/jspui/handle/10366/128285

http://gredos.usal.es/jspui/handle/10366/128285

https://www.uv.es/sto/charlas/2006_07_V_JornadesPL/adt-vjpl.html

https://www.uv.es/sto/charlas/2006_07_V_JornadesPL/adt-vjpl.html

https://doi.org/10.3233/SW-160213

https://www.w3.org/TR/xhtml1/#guidelines

https://www.w3.org/TR/xhtml1/#guidelines


55


[69]. W3C Consortium, 2016. HTML5 tutorial, W3Cx. HTML5 Coding Essentials and Best Practices. [consulta: 2 febrero de 2016]. Disponible en: https://www.edx.org/course/html5-part-1-html5-coding-essentials-w3cx-html5-1x-0.

[70]. WHITE, B., 1996. HTML and the Art of Authoring for the World Wide Web. Norwell, MA: Kluwer Academic Publishers. ISBN 0-7923-9691-X.

[71]. WRIGHT, A., 2014. Cataloging the World: Paul Otlet and the Birth of the Information Age. Oxford, Nueva York, NY: Oxford University Press. ISBN 978-0-19-993141-5.

[72]. YU, L., 2014. A Developer’s Guide to the Semantic Web [en línea]. 2ª ed. 2014. [Corr. 3rd printing 2015 edition]. Nueva York: Springer [consulta: 10 marzo de 2016]. ISBN 978-3-662-43795-7. Disponible en: https://dx.doi.org/10.1007/978-3-662-43796-4.

https://www.edx.org/course/html5-part-1-html5-coding-essentials-w3cx-html5-1x-0

https://www.edx.org/course/html5-part-1-html5-coding-essentials-w3cx-html5-1x-0

https://dx.doi.org/10.1007/978-3-662-43796-4


56


9. ANEXOS

9.1. ABREVIATURAS

ANECA Agencia Nacional de Evaluación de la Calidad y Acreditación ANSI American National Standards Institute API Application Programming Interface ARIA Accessible Rich Internet Applications ARPANET Advanced Research Projects Agency Network ASCII American Standard Code for Information Interchange CERN European Organization for Nuclear Research CSS Cascading Style Sheets DARPA Defense Advanced Research Projects Agency DNS Domain Name System DOM Document Object Model DTD Document Type Definition ECMA European Computer Manufacturers Association EEES Espacio Europeo de Enseñanza Superior EPUB Electronic publication GCA Graphic Communications Association GenCode Generic Code GML Generalized Markup Language GUI Graphical User Interface HES Hypertext Editing System HTML HyperText Markup Language HTMLWG HTML Working Group HTTP Hypertext Transfer Protocol ICANN Internet Corporation for Assigned Names and Numbers IETF Internet Engineering Task Force IMS IP Multimedia Subsystem IP Internet Protocol IRI Internationalized Resource Identifier ISO International Organization for Standardization ISOC Internet Society JPEG Joint Photographic Experts Group LCS Laboratory of Computer Science MIF Maker Interchange Format MIT Massachusetts Institute of Technology NCP Network Control Program NCSA National Center for Supercomputing Applications OLS On Line System OOP Object-oriented Programming OWL Web Ontology Language OWP Open Web Platform PDF Portable Document Format PHP Hypertext Preprocessor


57

Francisco-Javier Poveda-SotoANEXOS

RD Real Decreto RDF Resource Description Framework RESS Responsive Design + Server-side Components RSS Really Simple Syndication RTF Rich Text Format RWD Responsive Web Design SGML Standard Generalized Markup Language TCP Transmission Control Protocol TEI Text Encoding Initiative TFG Trabajo de Fin de Grado TFM Trabajo Fin de Máster TIC Tecnologías de la Información y Comunicación TIFF Tagged Image File FormatTor TTML Timed Text Markup Language URI Uniform Resource Identifier URL Uniform Resource Locator URN Uniform Resource Name ViolaWWW Visually Interactive Object-oriented Language and Application W3C World Wide Web Consortium WAI Web Accessibility Initiative WCAG Web Content Accessibility Guidelines WEB World Wide Web WHATWG Web Hypertext Application Technology Working Group WOFF Web Open Font Format WYSIWYG What You See Is What You Get Xforms XML forms XHTML Extensible Hypertext Markup Language XML Extensible Markup Language


58


Year Internet Users** Penetration (% of Pop.)

World Population

Non-Users (Internetless)

1Y User Change

1Y UserChange

World Pop. Change

414.794.957 6.126.622.121502.292.245 6.204.310.739665.065.014 6.282.301.767781.435.983 6.360.764.684913.327.771 6.439.842.408

1.030.101.289 6.519.635.8501.162.916.818 6.600.220.2471.373.226.988 6.681.607.3201.575.067.520 6.763.732.8791.766.403.814 6.846.479.5212.023.202.974 6.929.725.0432.231.957.359 7.013.427.0522.494.736.248 7.097.500.4532.728.428.107 7.181.715.1392.956.385.569 7.265.785.9463.185.996.155 7.349.472.0993.424.971.237 7.432.663.275

0

1.000.000.000

2.000.000.000

3.000.000.000

4.000.000.000Usuarios de Internet en el mundo **

* estimate for July 1, 2016

** Internet User = individual who can access the Internet at home, via any device type and connection.

2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015* 2016*

2000 6,80% 5.711.827.164 47,30% 133.257.305 1,28%2001 8,10% 5.702.018.494 21,10% 87.497.288 1,27%2002 10,60% 5.617.236.753 32,40% 162.772.769 1,26%2003 12,30% 5.579.328.701 17,50% 116.370.969 1,25%2004 14,20% 5.526.514.637 16,90% 131.891.788 1,24%2005 15,80% 5.489.534.561 12,80% 116.773.518 1,24%2006 17,60% 5.437.303.429 12,90% 132.815.529 1,24%2007 20,60% 5.308.380.332 18,10% 210.310.170 1,23%2008 23,30% 5.188.665.359 14,70% 201.840.532 1,23%2009 25,80% 5.080.075.707 12,10% 191.336.294 1,22%2010 29,20% 4.906.522.069 14,50% 256.799.160 1,22%2011 31,80% 4.781.469.693 10,30% 208.754.385 1,21%2012 35,10% 4.602.764.205 11,80% 262.778.889 1,20%2013 38,00% 4.453.287.032 9,40% 233.691.859 1,19%2014 40,70% 4.309.400.377 8,40% 227.957.462 1,17%

2015* 43,40% 4.163.475.944 7,80% 229.610.586 1,15%2016* 46,10% 4.007.692.038 7,50% 238.975.082 1,13%

3.424.971.237

Anexo 1. Número de usuarios de internet en el mundo desde el año 2000 al 2016Fuente: Internet Live Stats, 2017 http://www.internetlivestats.com/internet-users/

0

12.500.000

25.000.000

37.500.000

50.000.000

2000 2004 2006 2008 2010 2015

Usuarios Población

AÑO Usuarios Población % Pop. Fuente de uso

2000 5.387.800 40.827.300 13,20% ITU

2004 14.095.451 43.435.136 32,50% Nielsen // NetRatings

2006 19.765.032 45.003.663 43,90% Nielsen // NetRatings

2008 27.028.934 40.491.051 66,80% Nielsen en línea

2010 29.093.984 46.505.9 63 62,60% Nielsen en línea

2015 35.705.960 46.439.864 76,90% IWS

Anexo 2. Número de usuarios de internet en España desde el año 2000 al 2015Fuente: Internet Live Stats, 2017 http://www.internetworldstats.com/eu/es.htm

http://www.internetlivestats.com/internet-users/

XHTML vs HTML5 ANEXOS Francisco-Javier Poveda-Soto

59

Mapa basado en Longitud (generado) y Latitud (generado). El color muestra detalles acerca de País. El tamaño muestra promedio de Uso de Internet. La vista se filtra en Latitud (generado) y Longitud (generado). El filtro Latitud (generado) conserva solo los valores no nulos. El filtro Longitud (generado) conserva solo los valores no nulos. (10/05/2017)

Uso de Internet

0,1%

20%

40%

60%

80%

Anexo 3. Porcentaje de usuarios de internet en el mundoFuente: elaboración propia a partir de datos de Tableau Desktop, 2017 https://www.tableau.com/es-es/products/desktop

https://www.tableau.com/es-es/products/desktop


60


† Roy Williams, “Data Powers of Ten,” 2000.

‡ Según un cálculo de 2006 de la Facultad de Medicina de la Universidad de Pensilvania, la retina transmite información al cerebro a 10 Mbps.

Todas las demás cifras son estimaciones de Cisco

Una biblioteca digital de todos los libros catalogados del mundo en todos los idiomas

La cantidad de datos producidos en un solo minuto por el nuevo colisionador de partículas en el CERN

Una transcripción de todas las palabras habladas †

Una grabación de video de todas las reuniones que tuvieron lugar el año pasado en todo el mundo

La cantidad de datos que navegaron por Internet sólo en 2012

La cantidad de datos que ha navegado por Internet desde su creación

La cantidad de información visual transmitida desde los ojos al cerebro de toda la raza humana en un solo año ‡

Una instantánea holográfica de la superficie de la tierra

480 Terabytes

100 Petabytes

5 Exabytes

100 Exabytes

400 Exabytes

1 Zettabyte

300 Zettabytes

20 Yottabytes

1.000 Terabytes o

250.000 DVDs

1 Petabyte

1.000 Petabytes o

250 millones de DVDs

1 Exabyte

1.000 Exabytes

250 billones de DVDs

1 Zettabyte

1.000 Zettabytes

250 trillones de DVDs

1 Yottabyte

Anexo 4. Medidas de tráfico de datos, escala byte y equivalenciasFuente: Cisco VNI Mobile, 2016 https://goo.gl/cQFj6M


61


0

450.000.000

900.000.000

1.350.000.000

1.800.000.000

2000 2002 2004 2006 2008 2010 2012 2014 20162001 2003 2005 2007 2009 2011 2013 2015 2017

968.882.453

1.766.926.408199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017

110

1302.738

23.500257.601

1.117.2552.410.0673.177.453

17.087.18229.254.37038.760.37340.912.33251.611.64664.780.61785.507.314

121.892.559172.338.726238.027.855206.956.723346.004.403697.089.489672.985.183968.882.453863.105.652

1.045.534.8081.766.926.408

Anexo 5. Número total de sitios web desde 1991 hasta 2017Fuente: Internet Live Stats, 2017 http://www.internetlivestats.com/total-number-of-websites/#screenshots



62


Anexo 6. Ejemplo de marcas de corrección tipográficaFuente: Anderson, 1994: 58


63


Organización Abreviatura Sitio web Principales estándares y especificaciones

Dublin Core Metadata Initiative

DCMI www.dublincore.org Metadatos Dublin Core

ECMA International ECMA www.ecmainternational.org ECMAScript

International Organizationfor Standardization

ISO www.iso.org Ingeniería de sitios web y otros estándares de TI, como los estándares de interfaz de usuario; especificación funcional de PNG.

Internet Assigned Numbers Authority

IANA www.iana.org Nombres de Dominio, coordinación de direcciones IP, asignación de protocolos.

Internet Engineering Task Force

IETF www.ietf.org Estándares de internet STD (Internet Standard), documentos técnicos RFC (Request for Comments). Por ejemplo el uso adecuado de HTTP, MIME y URI.

Unicode Consortium UNICODE www.unicode.org Estándares Unicode, informes técnicos Unicode (UTRs).

Web Hypertext Application Technology Working Group

WHATWG www.whatwg.org HTML5, microdatos, aplicaciones web, formularios web, desarrolladores web.

World Wide Web Consortium

W3C www.w3.org Recomendaciones. Por ejemplo HTML, XHTML, CSS, DOM, XForms, SVG, RDF, GRDDL, OWL.

Anexo 8. Organizaciones influyentes en la estandarización webFuente: Sikos, 2014: 6

Last CallWorking Draft

Working Draft (WD)

Recommendation (R)

CandidateRecommendation (CR)

ProposedRecommendation (PR)

Anexo 7. Niveles de madurez en los documentos de proceso del W3CFuente: https://www.w3.org/Consortium/Process-20010208/tr.html

Fuente: https://www.w3.org/2017/Process-20170301/

https://www.w3.org/Consortium/Process-20010208/tr.html


64


1. El elemento raíz(The root element)

<html> root element

2. Metadatos del documento(Document metadata)

<head> document metadata container<title> document title<base> base URL<link> inter-document relationship metadata<meta> metadata (Modificada - HTML5)<style> style (presentation) information

3. Niveles de texto semánticos(Text-level semantics)

<a> hyperlink (Modificada - HTML5)<em> emphatic stress<strong> strong importance<small> small print (Modificada - HTML5)<s> struck text (Modificada - HTML5)<cite> cited title of a work (Modificada - HTML5)<q> quoted text<dfn> defining instance<abbr> abbreviation<time> date and/or time (Nueva - HTML5)<code> code fragment<var> variable or placeholder text<samp> (sample) output<kbd> user input<sub> subscript<sup> superscript<i> offset text conventionally styled in italic (Modificada - HTML5)<b> offset text conventionally styled in bold (Modificada - HTML5)<u> offset text conventionally styled with an underline (Modificada - HTML5)<mark> marked (highlighted) text (Nueva - HTML5)<ruby> ruby annotation (Nueva - HTML5)<rt> ruby text (Nueva - HTML5)<rp> ruby parenthesis (Nueva - HTML5)<bdi> BiDi isolate (Nueva - HTML5)<bdo> BiDi override<span> generic span

4. Formularios(Forms)

<form> user-submittable form<fieldset> set of related form controls<legend> title or explanatory caption<label> caption for a form control<input> input control (Modificada - HTML5)<button> button<select> option-selection form control<datalist> predefined options for other controls (Nueva - HTML5)<optgroup> group of options<option> option<textarea> text input area<keygen> key-pair generator/input control (Nueva - HTML5)<output> result of a calculation in a form (Nueva - HTML5)<progress> progress indicator (Nueva - HTML5)<meter> scalar gauge (Nueva - HTML5)

5. Scripting <option>script – embedded script<option>noscript – fallback content for script

Anexo 9. Clasificación de elementos HTML según su función. Parte I Fuente: W3C, 2018 https://bit.ly/2liZi1K

https://www.w3.org/TR/2012/WD-html-markup-20121025/elements.html


65


6. Secciones(Sections)

<body> document body<section> section (Nueva - HTML5)<nav> group of navigational links (Nueva - HTML5)<article> article (Nueva - HTML5)<aside> tangential content (Nueva - HTML5)<h1>, <h2>, <h3>, <h4>, <h5>, <h6> heading<hgroup> heading group (Nueva - HTML5)<header> header (Nueva - HTML5)<footer> footer (Nueva - HTML5)<address> contact information

7. Agrupaciones de contenido(Grouping content)

<p> paragraph<hr> thematic break (Modificada - HTML5)<br> line break<pre> preformatted text<blockquote> block quotation<ol> ordered list<ul> unordered list<li> list item<dl> description list<dt> term or name<dd> description or value<figure> figure with optional caption (Nueva - HTML5)<figcaption> figure caption (Nueva - HTML5)<div> generic flow container

8. Contenido incrustado(Embedded content)

<img> image<iframe> nested browsing context (inline frame)<embed> integration point for plugins (Nueva - HTML5)<object> generic external content<param> initialization parameters for plugins<video> video (Nueva - HTML5)<audio> audio stream (Nueva - HTML5)<source> media source (Nueva - HTML5)<track> supplementary media track (Nueva - HTML5)<canvas> canvas for dynamic graphics (Nueva - HTML5)<map> image-map definition<area> image-map hyperlink

9. Tablas(Tables)

<table> table<caption> table title<colgroup> table column group<col> table column<tbody> table row group<thead> table heading group<tfoot> table footer row group<tr> table row<td> table cell<th> table header cell

10. Elementos interactivos(Interactive elements)

<details> control for additional on-demand information (Nueva - HTML5)<summary> summary, caption, or legend for a details control (Nueva - HTML5)<command> command (Nueva - HTML5)<menu> list of commands (Modificada - HTML5)

11. Edits <option>ins – inserted text<option>del – deleted text

Anexo 10. Clasificación de elementos HTML según su función. Parte IIFuente: W3C, 2018 https://bit.ly/2liZi1K

https://www.w3.org/TR/2012/WD-html-markup-20121025/elements.html


66


<a href="#top"> Enlace para volver al principio de la página </a>

Texto semántico de la etiqueta Nombre del atributo

Valor del atributo

Contenido o textodel documento afectado

Atributo

Elemento ancla (en el propio documento)

<p style="text-align:center"> Biblioteca Nacional de España </p>

Texto semántico de la etiqueta Nombre del atributo

Propiedad del atributo

Contenido o textodel documento afectado

Atributo

Elemento párrafo

Valor del atributo

<img src="BNE_72ppp.jpg" alt ="Biblioteca Nacional de España" />

Etiqueta deincio

Etiqueta�nal

Etiqueta deincio

Etiqueta�nal

Etiqueta impar(o etiqueta simple)

Atributo 1 Atributo 2

Elemento imagen

Texto semántico de la etiqueta Nombre del atributo 1 Nombre de atributo 2

Valor del atributo 2Valor del atributo 1

Anexo 11. Ejemplo de elementos HTMLFuente: elaboración propia


67


<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

Declaración Doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN""http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN""http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

HTML 2.0

HTML 3.2

HTML 4.0 Transitional

HTML 4.0 Frameset

HTML 4.0 Strict

HTML 4.01 Transitional

HTML 4.01 Frameset

HTML 4.01 Strict

HTML5

XHTML 1.0 Transitional

XHTML 1.0 Strict

XHTML 1.0 Frameset

XHTML 1.1

XHTML 2.0

XHTML Basic 1.0

XHTML Basic 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN""http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

Versión HTML o XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN""http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

XHTML + RDFa

<!DOCTYPE html>????

XHTML5

Anexo 12. Tipos de declaraciones Doctype de HTML y XHTMLFuente: modificado a partir de Powell, 2010: 15


68



Mi experimento DOM


Mi experimento DOM

Esta página es un ejemplo sencillo

1

2

3

4

5

6

78

1

2

3 4

5 6 7

8

2 <html xmlns="http://www.w3.org/1999/xhtml">

3 <head>

4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

5 <title>Mi experimento DOM</title>

5 </head>

7

8 <body>

9 <p>Esta página es un <strong>ejemplo sencillo</strong></p>

10 </body>

11 </html>

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title><meta>

<body>

<p>

“Esta página es un”“Mi experimento DOM”“http-equiv=...” <strong>

“ejemplo sencillo”

document

root element

window

element

elementelement

element

element

texttexttext element

Text

DOM - Document

DOM - Object

DOM - Model

Anexo 13. Ejemplo de un Modelo de Objeto de Documento (DOM)Fuente: elaboración propia


69


JavaCC++PythonC#Visual Basic .NETPHPJavaScriptSQLRuby

TIOBE Index for April 2018

4 5 Python 5.803% +2.35%

5 4 C# 5.265% +1.69%

6 7 Visual Basic .NET 4.947% +1.70%

7 6 PHP 4.218% +0.84%

8 8 JavaScript 3.492% +0.64%

9 - SQL 2.650% +2.65%

10 11 Ruby 2.018% -0.29%

11 9 Delphi/Object Pascal 1.961% -0.86%

12 15 R 1.806% -0.33%

13 16 Visual Basic 1.798% -0.26%

14 13 Assembly language 1.655% -0.51%

15 12 Swift 1.534% -0.75%

16 10 Perl 1.527% -0.89%

17 17 MATLAB 1.457% -0.59%

18 14 Objective-C 1.250% -0.91%

19 18 Go 1.180% -0.79%

20 20 PL/SQL 1.173% -0.45%

Apr 2018 Apr 2017 Change Programming Language Ratings Change

1 1 Java 15.777% +0.21%

2 2 C 13.589% +6.62%

3 3 C++ 7.218% +2.66%

Anexo 14. Ranking TIOBE de lenguajes de programaciónFuente: Tiobe, 2018 https://www.tiobe.com/tiobe-index/

https://www.tiobe.com/tiobe-index/


70


PYPL PopularitY of Programming LanguageMay 2018

Rank Change Language Share Trend

1 Python 22.8 % +5.5 %

2 Java 22.5 % -0.7 %

3 Javascript 8.57 % +0.2 %

4 PHP 8.33 % -1.6 %

5 C# 7.87 % -0.7 %

6 C/C++ 6.26 % -1.2 %

7 R 4.22 % +0.2 %

8 Objective-C 3.56 % -1.0 %

9 Swift 2.8 % -0.7 %

10 Matlab 2.33 % -0.4 %

11 Ruby 1.69 % -0.4 %

12 TypeScript 1.56 % +0.4 %

13 VBA 1.37 % -0.0 %

14 Scala 1.16 % -0.1 %

15 Visual Basic 1.14 % -0.3 %

16 Kotlin 0.94 % +0.8 %

17 Go 0.86 % +0.3 %

18 Perl 0.76 % -0.1 %

19 lua 0.39 % -0.1 %

20 Rust 0.34 % +0.0 %

Worlwide, May 2018 compared to a year ago:

© Pierre Carbonnelle

JavaPythonPHPC#JavascriptC/C++Objective-CRSwiftMatlabVBA

2005 2010 2015

1%

10%

Anexo 15. Ranking PYPL de lenguajes de programaciónFuente: Carbonnelle, 2018 http://pypl.github.io/PYPL.html

http://pypl.github.io/PYPL.html

XHTML vs HTML5 ANEXOS Francisco-Javier Poveda-Soto

71

HutA SMALL PLACE TO DISCOVER LANGUAGES IN GITHUB

Git

TOP ACTIVE LANGUAGESA split by language view of active repositories

Q2/12 Q3/12 Q4/12 Q1/13 Q2/13 Q3/13 Q4/13 Q1/14 Q2/14 Q3/14 Q4/14

1M

2M ACTIVE REPOSITORIES

JavaScriptJava

PythonCSSPHP

RubyC++

CShell

C#Objective-C

RVimL

GoPerl

CoffeeScriptTeX

SwiftScala

Emacs LispHaskell

LuaClojureMatlab

ArduinoMakefile

GroovyPuppet

RustPowerShell

REPOSITORYLANGUAGE

ACTIVEREPOSITORIES

0 350k0350k

TOTALPUSHES

0 3.5M03.5M

PUSHESPER REPOSITORY

0 12012

NEW FORKSPER REPOSITORY

0 6.506.5

OPENED ISSUESPER REPOSITORY

0 12012

NEW WATCHERSPER REPOSITORY

0 18018

APPEAREDIN YEAR

April 2018

323.938 3.461.415

1.810.013164.585

3,87

6,10

9,66

9,33

5,24

4,91

11,00

10,69

19951996

Anexo 16. Ranking de lenguajes más activos en el repositorio GitHutFuente: Gihut, 2017 http://githut.info/

http://githut.info/


72


Es seguro https://mi-experimento-tfg.es/ejemplos/codigo_javascript.html

Añadiendo JavaScript a

1 <!DOCTYPE html><html lang"es"><head><title>Añadiendo Java Script a una página web</title><meta charset="utf-8" />

$(document).ready(function() {alert=("Mi experimento JavaScript!");

});

</head></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script type="text/javascript">

<body></body></html>

23456789

1011121314151617

Esta página dice

Aceptar

Mi experimento JavaScript!

Anexo 17. Ejemplo de código JavaScriptFuente: elaboración propia


73


CSS2.1

CSS3

CSS1

PseudoClasses

BoxProperties

TextProperties

CSSSyntax

Color +Background

FontProperties

VisualEffectsBox

Model

MediaTypes

Selectors

GeneratedContent

PagedMedia

Transforms

Transitions

Ruby

Extensions

Frameworks

LayoutEngines

GridLayout

SelectorsL4

Masking

Basic UI

FlexibleLayout

WebAnimations

GeneratedContent

StyleAttributes

MediaQueries

SelectorsL3

NameSpaces

ColorL3

MathML

Tables

PagedMedia

SyntaxL3

Speech

Multi-column

Background+

Borders

Cascade

W3C Recommendation

Candidate Recommendation

Last Call

Working Draft

Obsolote or inactive

Related non-W3C Technologies

Anexo 18. Niveles CSS y módulos de Recomendación CSS3Fuente: Mavrody, 2015: 93


74


96%

71%

66%

64%

52%

44%

0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

North America

Western Europe

Central and Eastern Europe

Latin America

Asia Pacific

Middle East and Africa

Anexo 19. Crecimiento del tráfico de datos móviles en 2016Fuente: Cisco VNI Mobile, 2017 https://goo.gl/uwCcHu

Exabytesper Month

02016 2017 2018 2019 2020 2021

10

20

30

40

50

60

7 EB11 EB

17 EB

24 EB

35 EB

49 EB

Anexo 20. Pronóstico mensual de tráfico de datos móviles en 2021Fuente: Cisco VNI Mobile, 2017 https://goo.gl/uwCcHu


75


20:49

Anexo 21. Ejemplo de Responsive Web DesignFuente: modificado a partir de Foundation Zurb, 2018 https://bit.ly/2Jpz4oI y Frimufilms, 2018 Freepik.com

Universidadde Murcia

BibliotecaGeneral

Serviciosde investigación

136

A-7 A-30

A-7 A-30

A-7 A-30

A-7 A-30

A-7 A-30

A-7 A-30

rte

orte

Cost

era Norte

pinardo

rdo

Anill

o Ca

mpu

s de

Esp

inar

d

nard

o

Anill

o Ca

mpu

s de

Esp

inar

doAn

illo

Cam

pus

de E

spin

ardo

Anill

o Ca

mpu

s de E

spin

ardo

Anill

o Ca

mpu

s de

Espi

nard

o

e Ramón del Valle In

Calle Gustavo Adolfo Bécquer

Ronda Parque Un

Calle Miguel de U

namuno

Aven

ida

Pío

Baro

ja

aroja

Call

Calle de

Calle del Álamo

Calle del A

Paseo

ímica

mica

Costera

mino verde

Cam

ino

verd

e

Vía

Verd

e de

l Nor

oest

e (A

ntig

ua v

ía M

urci

a-Ca

rava

ca)

Cam

ino

verd

e

L1

L1

Campusde Espinardo

CentrComer

El Tir

EstadioMonte

Romero

Centrode Atencióna la Infancia

BibliotecaGeneral

Parrode SaTom

BiciCampusFacultad

de Educación

MUyBICI:Universidadde Murcia

UMU

BiciCampusPlaza Rector

Sabater

MonteRomero

C.C. ElTiro

Facultadde Veterinaria

y HospitalClínico

Veterinario

Facultadde Comunicacióny Documentación

Facultadde Economía

y Empresa

Facultadde Educación

AularioGeneral

y Facultadde Matemáticas

CAID

Facultadde Cienciasdel Trabajoy Escuela

U. deTrabajoSocial

AularioGinerde losRíos

EdificioLuis

Vivesy Facultad

de Filosofía

EdificioRectorSoler

Escuelade Negocios

-ENAE-

Serviciode Controlde Accesos

e Información

Peda

nía d

e El

Pun

tal

BiciCampus

Facultad de Comunicación y Docu

Calle Campus Universitario, 8, 30100 Murcia

868 88 39 28

um.es

Facultad de Comunicación yDocumentación

Universidad

Cómo llegar

Anexo 22. Ejemplo de mashup API de geolocalizaciónFuente: modificado a partir de www.openstreetmap.org

https://bit.ly/2Jpz4oI

https://www.freepik.com/free-photos-vectors/background


76


dcterms dce

foafvann

skos

cc

vsschema

prov

geogr time

event

void

org

bibo

admsdctype

qb

ssn

sioc

doapgspfrbr

dcatvoaf

dulgnvcard

dbpedia

obo

lodeoa

bio

rdac

seas-s

prv

scovo

rdfg

mo

bbcpr

cpa

bbcconrl

pep

rdaw

opmvsim wdrs

spin

ocp-pla

ecrm

pcqudt

rdaf

nao

vaemolo

rovatts

swrcsio skos

vso

ov ptop

info

nie

acl

gf

ao

ext

locn

situ

rdam

rdaa

xhv

rel

spat

aktbasi

nas

gm

odr

ont

om

col

lgd

tmirw

dcaiol

cal

lmmspfowomn

tag

h2o

rdarsssro

partvcore

ncovin

pergeo

cnt

deo

sd

md

lsw

pri

dqsf

rda

ucuwl

sos

ssn

rda

foo

nge

wlo

msm

doc

m3l

bio

os

os

ju

lv

da

re

in

wo

pn

odma

ac

se

rl

gr

gs

icla

dtfr

pn co

go

re

se ig

lssn

pali

ofis ls ma

bb

un

tr

sa

atol ds

qu

tx ak

awpr te

dios

btsh g

t

t

o

k

t

le

c

c

s

f

c

d

p

o

p

b

l

g

s

d

d

c

s

s

c

e

n

n

i

cd

d

tw

v

p

m

v

t

r

o

c

v

p

f

g

g

g

w

eah

p

cl

bt

mm

oosd

ibtc

sr

l

eb

rec

wosc

flt

pp

l

oo

bo

s

p

c

t

t

s

r

s

t

oc

omh

o

a

vo

h

x

c

m

o

l

p

t

c

m

l

o

s

n

o

l

e

e

l

n

s

a

d

s

i

e

r

s

o

z

o

u

u

v

m

l

r

c

l

sr

r

e

lj

k l

d

e

p

t

c

w

p

ce

a

f

aa

ms

c aa s

bm

cc f

l

pg

ir

sh

v w

g d

mm

go

c mt r

rp

h

l

i

l

f

oo

e mm c

c o

cp

o

gg

oi m

b

g

l

gu

s

p

ol

s

r

n

l

t

c

l

f

p

kc

d

w

d

d

d

s

e

g

e

g

s

o

i

p

k

p

i

p

p

l

p

o

i

p

p

p

o

d

o

b

j

s

n

d

md

d

dd

i

c

p

g

t

e

c

n

g

s

p

m

l

v

w

v

a

b

s

l

h

h

tbb

d

d

lss

ssc

rl

rcb

cbr

s

ilda

o

l

l

dw

m

cuc

c

sgc

dsh

hav

ta

xw

d

sss

w

vd

l

r

m

s

s

s

d

b

c

h

u

r

e

ei

Sia

s

x

cp

d

d

d

v

e

s

u

s

a

w

c

s

r

r

r

p

o

p

l

d

v

q

r

l

o

d

s

a

t

r

i

b

c

s

p

c

c

c

c

s

a

s

s

e

f

s

a

s s

c

f

b

c

o

n

m

t

p

p

p

ps

s

sv f

d tb

di

p t

ev

id

oa

t

o d

s e

o

Anexo 23. Directorio de ontologías. Iniciativa LOV (Linked Open Vocabularies)Fuente: Vandenbussche et al., 2017


77


Versión jul.-08 ago.-08 sept.-08 ene.-09 feb.-09 mar.-09 jul.-09 ago.-09 sept.-09 ene.-10 feb.-10 mar.-10 jul.-10

No doctype 0,156055 0,138728 0,191759 0,119629 0,133434 0,142337 0,109197 0,103902 0,084484 0,092155 0,092543 0,093331 0,072454

HTML 3.2 0,006866 0,000000 0,004754 0,004842 0,001662 0,002661 0,003090 0,002147 0,001900 0,001088 0,001275 0,001873 0,001568

HTML 4.0 0,053683 0,020809 0,067353 0,037119 0,031426 0,027375 0,025582 0,022048 0,020393 0,023626 0,016420 0,019048 0,013369

HTML 4.01 0,229713 0,153757 0,249604 0,200222 0,226557 0,194357 0,150518 0,134747 0,203082 0,169038 0,161412 0,157791 0,156090

HTML 5.0 0,000000 0,000000 0,000000 0,000000 0,000000 0,000000 0,089052 0,082901 0,070635 0,077449 0,078355 0,077393 0,072124

XHTML 1.0 0,547441 0,686705 0,482567 0,627194 0,594928 0,624799 0,598981 0,640534 0,603462 0,624549 0,640190 0,640845 0,668922

XHTML 1.1 0,006242 0,000000 0,003962 0,010995 0,011992 0,008472 0,023579 0,013721 0,016044 0,012096 0,009804 0,009718 0,015473

Versión ago.-10 sept.-10 ene.-11 feb.-11 mar.-11 jul.-11 ago.-11 sept.-11 ene.-12 feb.-12 mar.-12 jul.-12 ago.-12

No doctype 0,085250 0,059900 0,066596 0,059624 0,062781 0,043842 0,053201 0,050771 0,043852 0,046606 0,041936 0,053758 0,036414

HTML 3.2 0,000532 0,001416 0,001666 0,003024 0,000406 0,000309 0,007851 0,000393 0,000800 0,002445 0,000880 0,000469 0,000613

HTML 4.0 0,012564 0,013614 0,012952 0,023512 0,025775 0,010695 0,008594 0,008673 0,008353 0,008287 0,010742 0,005859 0,011720

HTML 4.01 0,133912 0,133885 0,129717 0,113733 0,158369 0,127241 0,113094 0,107434 0,112954 0,100907 0,126898 0,059496 0,091947

HTML 5.0 0,090284 0,061352 0,076848 0,092001 0,100224 0,079011 0,107979 0,105017 0,161382 0,175427 0,187386 0,217805 0,269812

XHTML 1.0 0,665180 0,716874 0,693900 0,695090 0,641785 0,726562 0,679573 0,705893 0,658753 0,645257 0,608801 0,650531 0,574827

XHTML 1.1 0,012278 0,012960 0,018322 0,013016 0,010659 0,012340 0,029708 0,021819 0,013906 0,021071 0,023357 0,012082 0,014668

Versión sept.-12 ene.-13 feb.-13 mar.-13 jul.-13 ago.-13 sept.-13 ene.-14 feb.-14 mar.-14 jul.-14 ago.-14 sept.-14

No doctype 0,041624 0,036761 0,055612 0,031435 0,030542 0,028310 0,038418 0,023971 0,026611 0,025357 0,041451 0,027881 0,023788

HTML 3.2 0,000277 0,000316 0,000570 0,000971 0,000326 0,000355 0,000990 0,000782 0,000662 0,000489 0,000316 0,000438 0,000541

HTML 4.0 0,007510 0,005774 0,003108 0,002923 0,003858 0,004770 0,003272 0,004849 0,004206 0,004902 0,001980 0,002991 0,002871

HTML 4.01 0,090855 0,081297 0,131570 0,078494 0,061441 0,048387 0,057005 0,049556 0,046327 0,052876 0,039966 0,039874 0,031730

HTML 5.0 0,257171 0,334068 0,335718 0,388330 0,398855 0,454648 0,453986 0,537947 0,538843 0,564821 0,610426 0,627384 0,660245

XHTML 1.0 0,588790 0,528148 0,464505 0,488002 0,493012 0,451990 0,436924 0,372173 0,369835 0,336599 0,296209 0,294041 0,272007

XHTML 1.1 0,013773 0,013637 0,008917 0,009845 0,011966 0,011540 0,009405 0,010723 0,013515 0,014956 0,009652 0,007392 0,008818

Versión ene.-15 feb.-15 mar.-15 jul.-15 ago.-15 sept.-15 ene.-16 feb.-16 mar.-16 ene-17 feb-17 mar-17 abr-17

No doctype 0,022198 0,028609 0,027337 0,028709 0,033419 0,030584 0,023946 0,023734 0,024805 0,023138 0,022385 0,021193 0,021674

HTML 3.2 0,000419 0,000271 0,000499 0,000440 0,000732 0,000334 0,000520 0,000339 0,000286 0,000496 0,000679 0,000359 0,000572

HTML 4.0 0,003721 0,002552 0,003551 0,003271 0,003469 0,003095 0,003149 0,001948 0,001882 0,002103 0,001789 0,001021 0,001536

HTML 4.01 0,033444 0,029040 0,031260 0,030991 0,032344 0,027862 0,024244 0,029896 0,027652 0,028095 0,019354 0,023606 0,023267

HTML 5.0 0,692511 0,705948 0,705715 0,738162 0,750917 0,772180 0,779965 0,782407 0,791568 0,818928 0,846819 0,849206 0,853116

XHTML 1.0 0,242150 0,225373 0,226343 0,194459 0,174720 0,161865 0,164486 0,158024 0,151110 0,122948 0,107637 0,102680 0,097328

XHTML 1.1 0,005557 0,008207 0,005295 0,003969 0,004399 0,004080 0,003692 0,003651 0,002697 0,004293 0,001337 0,001935 0,002506

Versión may-17 jun-17 jul-17 ago-17 sept-17 oct-17 nov-17 dic-17 ene-18 feb-18 mar-18 abr-18 may-18

No doctype 0,020468 0,022010 0,020786 0,022201 0,022621 0,020446 0,022903 0,023423 0,030009 0,029019 0,025716 0,020486 0,019798

HTML 3.2 0,000353 0,000348 0,000877 0,000257 0,000311 0,000446 0,000846 0,000612 0,000684 0,000237 0,000745 0,000630 0,000726

HTML 4.0 0,001635 0,001428 0,002353 0,001315 0,001412 0,001323 0,001887 0,002003 0,001461 0,001415 0,001340 0,001442 0,001461

HTML 4.01 0,016820 0,020618 0,018729 0,025120 0,025993 0,015246 0,020312 0,018833 0,023518 0,028053 0,020674 0,012161 0,011236

HTML 5.0 0,865158 0,858165 0,860458 0,868978 0,862775 0,871322 0,849124 0,854105 0,854892 0,863504 0,872640 0,888681 0,900588

XHTML 1.0 0,093742 0,095973 0,095468 0,080611 0,084973 0,089540 0,103558 0,099968 0,087797 0,076451 0,078060 0,075339 0,065200

XHTML 1.1 0,001824 0,001457 0,001328 0,001519 0,001914 0,001678 0,001371 0,001057 0,001638 0,001321 0,000824 0,001261 0,000992

Hoja 1

Hoja 2

Hoja 3

Hoja 4

Hoja 5

Anexo 24. Datos de tendencia anual de versiones HTML para la creación de sitios webFuente: PowerMapper, 2018 https://try.powermapper.com/Stats/HtmlVersions

Documents

GRADO EN INFORMACIÓN Y DOCUMENTACIÓN...directamente a los profesionales de la información y documentación que deben garantizar el acceso a la información al mayor número de personas