HTML5

TECNOLOGÍAS DE INTERNET
HTML 5
Profesor: Ing. Carlos David Zacarías Vélez

1
Correo: carlos.zacarias@udep.pe
CONTENIDOS
 HTML 5
 ¿Cómo inició HTML5?
 Soporte del navegador para HTML5 .
 Nuevas funciones.
 Estructura global.
 Estructura del cuerpo.
 Estructura dentro de la información principal.
 Nuevos tipos de Input en los formularios.
 Elementos video y audio.
 Elemento Canvas.
 Ejemplos del elemento canvas 2
HTML 5
Es la quinta revisión más importante del lenguaje de etiquetas. Es una
actualización de HTML. Asimismo es considerado un termino de marketing
para agrupar las nuevas tecnologías de desarrollo Web: HTML5, CSS3 y
nuevas capacidades de JavaScript.
- HTML5 se encarga de la estructura (ESTRUCTURA).

- CSS3 se encarga de presentar la estructura (ESTILO).
- JavaScript hace el resto (FUNCIONALIDAD)
3
HTML 5
 HTML5 es todavía un trabajo en progreso. Sin embargo, los principales
navegadores son compatibles con muchos de los nuevos elementos que
ofrece la nueva versión.
 La versión HTML 4.01, carece de características necesarias para la
creación de aplicaciones modernas.
- JavaScript
NECESIDAD (Framework JQuery)
- Flash
(incorporar audio, video)
4
¿Cómo inició HTML5?
 HTML5 es una colaboración entre el Consorcio World Wide Web (W3C)
y el Grupo de Trabajo de hipertexto Aplicación de Tecnología Web
(WHATWG).
 En 2006 mientras WHATWG trabajaba con los formularios y aplicaciones
Web, y la W3C trabajaba con XHTML 2.0, decidieron cooperar y crear
una nueva versión de HTML , para esto decidieron establecer reglas.
- Las nuevas características se deben basar en HTML, CSS, DOM y
JavaScript.
- Reducir la necesidad de plugins externos (como Flash)
- Mejor manejo de errores.
- Más marcado para reemplazar scripting.
- HTML5 debe ser independiente del dispositivo.
- El proceso de desarrollo debe ser visible para el público.
5
Soporte del navegador para HTML5
 HTML5 todavía no es un estándar oficial, y no todos los navegadores lo
soportan por completo. Sin embargo, los principales navegadores
(Safari, Chrome, Firefox, Opera, Internet Explorer) continúan agregando
nuevas características de HTML5 a sus últimas versiones.
6
Nuevas funciones
 Algunas de las más interesantes nuevas características de HTML5:
- El elemento <canvas> para el dibujo 2D

- Los elementos <video> y <audio> para la reproducción de medios.
- Soporte para almacenamiento local.
- Nuevos elementos de contenido específico, como <article>, <footer>,
<header>, <NAV>, <section>
- Nuevos controles de formulario, como el calendario, la fecha, la hora, email,
URL, búsqueda.
7
Estructura global
Los documentos HTML se encuentran estrictamente organizados. Cada

parte del documento está diferenciada, declarada y determinada por
etiquetas específicas.
<! DOCTYPE>
Nos ayuda a indicar el tipo de documento. En esta versión es muy
sencillo y debe ser la primera línea del archivo.
8
Estructura global
<html> </html>
Este elemento envolverá al resto del código. Contiene un único atributo
llamado “lang” el cual define el idioma humano del contenido del
documento que estamos creando.
Un documento HTML se divide en dos secciones: cabecera y cuerpo.

Las dos secciones se escriben en el orden mencionado.
9
Estructura global
<head> </head>
La etiqueta <head> va primero y dentro de ella se define:
- El título de nuestra página Web (la única parte visible al usuario)

- El set de caracteres correspondientes.
- Proveeremos información general acerca del documento.
- Incorporaremos los archivos externos: estilos, códigos javascript o
imágenes.
10
Estructura global
<title> </title>
La etiqueta <title>define el tìtulo del documento.
11
Estructura global
<meta>
Esta etiqueta es incluida para declarar información general sobre el
documento, pero esta información no es mostrada en la ventana del
navegador, es sólo importante para motores de búsqueda y
dispositivos que necesitan realizar una vista previa del documento u
obtener un sumario de la información que contiene.
12
Estructura global
<link>
Este elemento es usado para incorporar estilos, códigos javascript,
imágenes o íconos desde archivos externos.
El atributo type fue eliminado, el cual especificaba el tipo de estilo que
usábamos. El atributo rel que tiene el valor stylesheet le dice al
navegador que el archivo miestilos.css es un archivo CSS con estilos
requeridos para presentar la página en pantalla.
13
Estructura global
<body> </body>
El cuerpo representa la parte visible de todo documento.
14
Estructura del cuerpo
Historia
 Uno de los primeros elementos provistos para este propósito fueron
las tablas. Éstas permitían a los diseñadores acomodar datos, texto,
imágenes dentro de las filas columnas, esto causo una revolución y
un paso hacia adelante con respecto a la visualización de los
documentos y la experiencia ofrecida a los usuarios.
 Luego la etiqueta <div> comenzó a dominar la escena. Con el
surgimiento de webs más interactivas y la integración de HTML, CSS
y JavaScript.
 El uso de etiquetas <table> y <div> se volvió una práctica más
común, pero ambos no proveen tanta información tampoco algún
indicio sobre qué clase de división es y cual es el propósito o qué
contiene.
 Para los usuarios finales no es importante los propósitos, pero para
los navegadores la correcta interpretación de qué hay dentro del 15
documento es importante en muchos casos.
Cabecera
Barra de navegación
Información
Barra Lateral
principal
Institucional
16
 Cabecera <header></header>: Provee información introductoria
como: logo, título, subtítulos, y una corta descripción del sitio web.
Difiere con respecto a la etiqueta <head> porque ésta refiere
información de todo el documento, <header> es sólo usado para el
cuerpo o secciones específicas dentro del cuerpo.
 Barra de navegación <nav></nav>: En la cual casi todos los

desarrolladores ofrecen un menú o lista de enlaces con el propósito de
facilitar la navegación a través del sitio.
 Información principal <section> </section>: Contiene la

información más relevante del documento. Podría contener una lista
de artículos, descripción de productos, entradas de un blog o cualquier
otra información importante.
17
 Barra lateral <aside></aside>: Normalmente contiene datos
relacionados con la información principal pero que no son relevantes o
igual de importantes. No tiene una posición definida ya que podría
estar ubicado del lado derecho o izquierdo de nuestra página Web. El
elemento sólo describe la información que contiene, no el lugar dentro
de la estructura.
 Institucional <footer></footer>: Es el área donde normalmente se

muestra información del sitio Web, el autor o la empresa. Además de
enlaces con respecto a reglas, términos y condiciones y toda
información adicional que el desarrollador considere importante
compartir.
18
<header> </header>
19
<nav> </nav>
20
<section> </section>
21
<aside> </aside>
22
<footer> </footer>
23
Nuevos tipos de Input en los formularios
 Dentro de la gran cantidad de novedades
que nos ofrece el HTML5, una muy
interesante son los nuevos valores para el
atributo type del elemento input.
 Estos nuevos tipos de campos hacen que
los navegadores adopten distintos
comportamientos que, sin dudas, van a
hacer la vida de los desarrolladores de
sitios web más fácil.
NOTA: Estos elementos todavía no son
soportados por todos los navegadores
modernos, el uso de los mismos no
afectará de ningún modo en los
navegadores que no los soporten,
actuarán simplemente como si fuesen del
tipo text. 24
Search: Al ingresar texto en el campo, el navegador muestra una cruz
a la derecha para borrar todo lo que hemos escrito.
25
26
Number: Para este input tenemos los atributos min y max para
establecer el máximo y el mínimo que acepta el campo. En un
smartphone aparece automáticamente el teclado numérico.
27
Range: El input de tipo range se presenta como un control para
arrastrar con el mouse (o con el dedo en un móvil con pantalla táctil).
Este campo también acepta los atributos min y max.
28
Color: El navegador presenta de forma nativa un selector de color.
29
Teléfono: Al momento de completar este input, un smartphone,

iPhone o Tablet convierte su teclado a números.
Dirección url: En este campo, el teclado del iPhone, smartphone o

Tablet es qwerty pero en modo “url”, ya que ofrece teclas
fundamentales para escribir una dirección web como son el punto, la
barra “/” o la tecla “.com”.
30
Email: También el teclado es qwerty teniendo también la tecla “@”.
Se autovalida.
31
Date: Al cliquear en el campo verás un calendario muy completo que
el navegador dispone de forma totalmente nativa.
32
Month: Al cliquear en el campo verás un calendario que te permite
seleccionar el mes de un año específico.
33
Week: Al cliquear en el campo nos permite elegir el número de
semana del año.
34
Time: El input está con el formato de hora, con los dos puntos “:”
correspondientes y las flechas para subir o bajar el horario.
35
Elementos video y audio
HTML5 introduce soporte integrado para el
contenido multimedia gracias a los elementos
<audio> y <video>.
Problema:
Con el aumento del ancho de banda, los contenidos
de vídeo han ido aumentando de forma
vertiginosa hasta convertirse en una de las
mayores necesidades de ancho de banda en la red.
Soluciones alternativas:
Por excelencia a la hora de reproducir vídeo a través de
un navegador ha sido utilizar el plugin de Flash o
Silveright.
Solución óptima futura:
Usar las etiquetas <video> y <audio> de HTML5.
36
Video <video>
La guerra entre fabricantes de navegadores sobre que formato de
vídeo que debe de ser el estándar para la nueva especificación y por
supuesto no todos reproducen los mismos formatos de forma nativa.
1: Disponible si OpenCodecs está instalado.

2: Disponible si XiphQT está instalado.
3: Disponible en Windows si la extensión Windows Media Player para HTML5 está
instalada.
4: Disponible en Windows si el códec VP8 está instalado. 37
Video <video>
El elemento video dispone de los atributos:
- autoplay,
- loop
- preload.
En la etiqueta de apertura se puede especificar la fuente de un archivo
usando el atributo ”src” o bien usando el elemento ”source” entre las
etiquetas de apertura y cierre. Asimismo puedes utilizar los controles
que te ofrece el navegador de forma nativa utilizando el atributo
“controls” o bien puedes ofrecer tus propios controles en JavaScript.
38
Video <video>
39
Video <video>
Otros atributos como:
- Ancho (width)
- Alto (height)
- Imagen representativa (poster)
40
Audio <audio>
Este nuevo elemento permite el uso de diferentes formatos de archivo
puesto que los formatos que soportan los diferentes navegadores no
son parte del estándar sino que depende de la implementación de
cada fabricante.
41
Audio <audio>
El elemento video dispone de los atributos:
- autoplay,
- loop
- preload.
En la etiqueta de apertura se puede especificar la fuente de un archivo
usando el atributo ”src” o bien usando el elemento ”source” entre las
etiquetas de apertura y cierre. Asimismo puedes utilizar los controles
que te ofrece el navegador de forma nativa utilizando el atributo
“controls” o bien puedes ofrecer tus propios controles en JavaScript.
42
Audio <audio>
43
Elemento Canvas
 En HTML el elemento canvas es completamente nuevo. En él puede
definirse un entorno para crear imágenes dinámicas. Para usarlo
sólo se debe especificar sus dimensiones.
 Cualquier etiqueta y comentario que se escribe entre etiqueta de
apertura y cierre será interpretado solamente por navegadores
que no soportan aún la nueva etiqueta.
 El potencial del elemento canvas reside en que permite actualizar su
contenido en tiempo real. Si usamos esa habilidad para responder
a eventos de usuario, podemos crear herramientas y juegos que
anteriormente a la nueva especificación hubiesen requerido de un
plugin externo como Flash.
44
Elemento Canvas
 Canvas trabaja solo JavaScript para esto primero debemos
referenciar el elemento canvas y adquirir su contexto (API)
haciéndolo de la siguiente forma.
NOTA: Para ejemplos rápidos del elemento canvas se trabajará con

dos dimensiones.
45
Ejemplo del elemento Canvas
 Rectángulo.
46
Ejemplo del elemento Canvas
 Rectángulo con relleno.
47
Ejemplos del elemento Canvas
 LINEA
48
 CURVA
49
 CURVA
50
 NUBE
51

HTML5

Загружено:

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

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

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

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

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

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

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

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

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

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

HTML5

Загружено:

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

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

TECNOLOGÍAS DE INTERNET

Profesor: Ing. Carlos David Zacarías Vélez

- HTML5 se encarga de la estructura (ESTRUCTURA).

- El elemento <canvas> para el dibujo 2D

Los documentos HTML se encuentran estrictamente organizados. Cada

Un documento HTML se divide en dos secciones: cabecera y cuerpo.

- El título de nuestra página Web (la única parte visible al usuario)

 Barra de navegación <nav></nav>: En la cual casi todos los

 Información principal <section> </section>: Contiene la

 Institucional <footer></footer>: Es el área donde normalmente se

Teléfono: Al momento de completar este input, un smartphone,

Dirección url: En este campo, el teclado del iPhone, smartphone o

1: Disponible si OpenCodecs está instalado.

NOTA: Para ejemplos rápidos del elemento canvas se trabajará con

Вам также может понравиться