Vous êtes sur la page 1sur 25

Formacin

BDI

Curso HTML5 y CSS3

Andrs Guzmn F.
Profesor HTML5

Una primera Introduccin

Qu es y por qu HTML5?
Objetivos de HTML5
Primeros inicios de HTML5
Caractersticas
Navegadores habilitados HTML5
HTM5 y el mundo
Funcionalidades de HTML5
Herramientas necearas

Qu es y por qu HTML5?
Es una agrupacin de diversas
tecnologas y APIs con grandes
novedades y funcionalidades respecto a
su versin predecesora.
Trae todo el poder del escritorio y una
renovada experiencia multimedia en la
web, cuya intencin es convertir al
navegador en una plataforma de
desarrollo de aplicaciones.
Actualmente se encuentra en proceso
experimental y es regulado por el
Consorcio W3C

Qu es y por qu HTML5?
Da un importante salto en todo lo
relacionado a la interactividad y
conectividad en la web
Compatible con versiones anteriores de
HTML
Es HTML + CSS3 + JavaScript
Ligero, mejor rendimiento

Qu es y por qu HTML5?

Objetivos y diseo de HTML5


Las nuevas caractersticas se deben basar
en HTML, CSS, DOM y JavaScript,
incorporando una API en su
especificacin.
Proporciona nuevos elementos
semnticos
Mejor manejo de errores
Basado en etiquetas (marcado) por
sobre el scripting
Listo para usarse en dispositivos mviles
(Mobile)
Eliminar / reducir la necesidad de plugins
externos (como flash)

Primeros inicios de HTML5


HTML5 es una continua cooperacin
y desarrollo entre World Wide Web
Consortium (W3C) y la Web
Hypertext Application Technology
Working Group (WHATWG).
Donde la WHATWG se encarga de
tratar los web forms y aplicaciones
JS, y la W3C se encarga del XHTML
2.0 y estndares.
En 2006, ambas instituciones
decidieron dar un paso adelante para
crear la nueva versin de HTML.

Objetivos y diseo de HTML5

Navegadores habilitados HTML5


Los Browser se estn convirtiendo en
una plataforma para aplicaciones:
Google apps, Gmail, Games
Chrome es el rey de los browser con
el (37%), ms detalles aqu.

Caractersticas

Offline y almacenamiento

Adems de permitir que las


aplicaciones mantengan su estado y
almacenen sus datos sin requerir de
un servidor, la caractersticas Offline
tienen la ventaja de dar un notable
rendimiento a la aplicacin, mediante
el almacenamiento de los datos en la
memoria cach o bien poner los
datos persistente entre sesiones de
usuario y la pgina de recarga.

Caractersticas

Amplio alcance

HTML5 es
ampliamente compatible con todos
los navegadores modernos y
principales dispositivos mviles.

Compatible con versiones anteriores


de HTML
Ninguna otra tecnologa puede
ofrecer la misma ubicuidad o mbito.

Caractersticas

Mejor experiencia de
usuario: HTML5 hace que

las
aplicaciones web sean ms amistosas
al usuario final, creando una
experiencia de usuario muy semejante
que incluso rivaliza con su
contraparte de aplicaciones de
escritorio.

Caractersticas

Simple de implementar:

HTML5 simplifica nuestro desarrollo


diario, ya que permite re-utilizar la
misma pila de tecnologa y APIs a
travs de mltiples plataformas y
dispositivos
HTML5 tecnologas JavaScript, CSS
y HTML son fciles de aprender

Caractersticas

Seguridad:

Soporte Nativo de
multimedia y otras capacidades en los
diferentes navegadores actuales,
adems reduce la necesidad de plugins
y libreras externas, algunos de las
cuales han introducido diversas
vulnerabilidades en el navegador.

Caractersticas

Bajo costo y fcil


mantencin: Aplicaciones

web con
HTML5 que se ejecutan en diversas
plataformas, son ms econmicas,
fciles de mantener, portables y
hacen que el dispositivos en el que se
ejecutan sea irrelevante.
Todas estas caractersticas no slo
hace que los costos sean menores,
adems mejoran la productividad.

Todos hablan de HTM5


Steve Jobs (Apple):

El mundo se
est moviendo hacia HTML5.

Steve Ballmer (Microsoft):

El
mundo est adoptando el camino HTML5
y nosotros tambin.

Vic Gundotra (Google):

En la
web no se haba visto este nivel de
transformacin y aceleracin, en los
ltimos 10 aos ... estamos apostando
fuerte por HTML5 .

Funcionalidades HTML5
Semntica
Nuevos elementos para los
header, footer, nav, sections y
articles.
Nuevos elementos estructurales.
Nuevos elementos multimedia.
En forms nuevos elementos de
formulario, nuevos atributos,
nuevos tipos de entrada,
validacin automtica.

Funcionalidades HTML5
Presentacin
Estilos con CSS 3
2D Transformaciones &
Transiciones
3D Transformaciones
WebFonts
Nuevos atributos
Animaciones
Esquinas redondeadas
Efecto Sombra

Funcionalidades HTML5
Grficos
Elemento Canvas o lienzo
Web GL usando CSS3 2D/3D
SVG

Funcionalidades HTML5
Conectividad
Conectividad ms eficiente significa
ms chats en tiempo real, juegos ms
rpidos, y una mejor comunicacin:
Web Socket
Full-duplex canal de
comunicacin bidireccional
Mensajera Cross-domain
Eventos por lado del servidor
XMLHttpRequest2

Funcionalidades HTML5
Multimedia
Ahora Podemos acceder, controlar y
mover la lnea de tiempo de audio /
vdeo, sin la necesidad de utilizar
plugins externos como flash:
Video
Audio

Funcionalidades HTML5
Rendimiento
Ahora las aplicaciones web no tienen
nada de que envidiar al rendimiento
de las aplicaciones de escritorio:
Web Workers trabajan en procesos
Background.

Funcionalidades HTML5
Almacenamiento
Con HTML5, desarrollo de aplicaciones
web nunca a sido tan fcil con
diferentes mecanismo de
almacenamiento dentro del navegador:

Sistema de Cach
Almacenamiento local
SQL Web (obsoleto)
IndexedDB

Funcionalidades HTML5
Acceso a Dispositivos
Con HTML5, trabajar con archivos
nunca a sido ms fcil:

Geo localizacin y mapas


Provee una poderosa API para
interactuar con los datos binarios y
el sistema de archivos local.
Escribir, Leer, subir, leer
recursivamente un directorio de
archivos, arrastrar y soltar archivos
desde el escritorio al navegador etc.

Herramientas Necesarias
Editor de Texto:

Navegador: