Investigación de tecnologías web de cliente

1. HTML5
Universidad de las Fuerzas
Armadas - ESPE
Bravo Marco
García Jorge
Merino Johnny
Torres Dilan

2. Definición
Cuando hablamos de HTML5 lo primero que tenemos que saber es
que es la última versión de la tecnología HTML, cuyas siglas
corresponden a “HyperText Markup Language”, que tiene el
siguiente significado:

3. ● HyperText, cuyo significado es hipertexto, que no es más que un texto que enlaza
con otros contenidos, que pueden ser otro texto u otro archivo. Esto es la base del
funcionamiento de la web tal y como la conocemos, que no es más que páginas y
recursos interconectados.
● Markup, que significa marca o etiqueta, ya que todas las páginas web están
construidas en base a etiquetas, desde las primeras versiones hasta las últimas
etiquetas de HTML5. Un ejemplo de una etiqueta HTML es la que identifica a un
párrafo, que se compone de la etiqueta, el contenido de la etiqueta y el cierre del
párrafo: <p>HOLA</p>.
● Languaje, cuyo significado es lenguaje, porque HTML es un lenguaje, es decir,
tiene sus normas, tiene su estructura y una serie de convenciones que nos sirven
para definir tanto la estructura como el contenido de una web.
Definición

4. Algunas de las nuevas características de HTML5
● Nuevas etiquetas semánticas para estructurar los documentos HTML,
destinadas a reemplazar la necesidad de tener una etiqueta <div> que
identifique cada bloque de la página.
● Los nuevos elementos multimedia como <audio> y <video>.
● La integración de gráficos vectoriales escalables (SVG) en sustitución de
los genéricos <object>, y un nuevo elemento <canvas> que nos permite
dibujar en él.
● El cambio, redefinición o estandarización de algunos elementos, como
<a>, <cite> o <menu>.
● MathML para fórmulas matemáticas.
● Almacenamiento local en el lado del cliente.

5. HTML4 VS HTML5
Diferencias
- HTML5 permite incluir elementos de SVG y
MathML.
- Además incorpora mejoras de las API, como:
getElementsByClassName() y innerHTML.
- Algunos atributos desaparecen, como: align,
background, bgcolor, etc.
- Se introducen nuevos elementos, como:
section, article, aside, header, footer, etc.
- Para definir el juego de caracteres se
introduce un nuevo atributo para la etiqueta
<meta>:<meta charset=”UTF-8″>.
Similitudes
- HTML5 define una sintaxis que es
compatible con HTML4 y XHTML 1.0.
De manera que gran parte del código
tiene gran similitud.
- HTML5 ha introducido una gran
cantidad de nuevos elementos para
varios elementos e incluye los que ya
se disponen en la versión 4 como
target, autofocus y form, etc.

6. Evolución de HTML
en su quinta versión
En su revisión definitiva número 5 publicada
en octubre del 2014, se incorpora por primera
vez el desarrollo en paralelo de HTML y
XHTML.
HTML5 establece una serie de nuevos
elementos y atributos que reflejan el uso típico
de los sitios web modernos. Algunos de ellos
son técnicamente similares a las etiquetas ya
existentes en la versión anterior pero, con un
significado semántico diferente que dotan de
nuevas capacidades al lenguaje markup.
Esta nueva versión permite estructurar y
presentar el contenido de mejor manera a
través de la web, haciendo que los
navegadores sean una plataforma para el
impulso de aplicaciones con la ayuda de CSS y
Javascript.

7. Novedades de la
nueva versión
● Incorpora etiquetas (canvas 2D y 3D, audio,
vídeo) con codecs para mostrar los
contenidos multimedia. Actualmente hay
una lucha entre imponer codecs libres
(WebM + VP8) o privados (H.264/MPEG-4
AVC).de la nueva versión.
● Etiquetas para manejar grandes conjuntos
de datos: Datagrid, Details, Menu y
Command. Permiten generar tablas
dinámicas que pueden filtrar, ordenar y
ocultar contenido en cliente.
● Mejoras en los formularios. Nuevos tipos de
datos (eMail, number, url, datetime …) y
facilidades para validar el contenido sin
Javascript.
● Drag & Drop. Nueva funcionalidad para
arrastrar objetos como imágenes.

8. Audio y video en
HTML5

9. Semántica
Se refiere a la información o significado
extra que otorgan los elementos o
etiquetas del lenguaje, información que
define o describe el contenido, función o
sección que contiene.
● Añade etiquetas para manejar la Web semántica
(Web 3.0)
● Como parte del nuevo esquema y secciones para un
documento se integran: <section>, <article>, <nav>,
<header>, <footer>, <aside>.

10. Migración HTML5
En esta sección se presenta
como convertir del
XHTML(HTML4) al HTML5,
sin hacer cambio de su
contenido o estructura
original.
EJEMPLO:

11. Convenciones de
codificación HTML
Los desarrolladores web a menudo no
están seguros sobre el estilo de
codificación y la sintaxis para usar en
HTML.
Entre 2000 y 2010, muchos
desarrolladores web se convirtieron
de HTML a XHTML.
Con XHTML, los desarrolladores se
vieron obligados a escribir código
válido y "bien formado".
HTML5 es un poco más descuidado
cuando se trata de validación de
código