Introduccion a Html5
description
Transcript of Introduccion a Html5
-
HTML 5 / CSS 3
Introduccin a
HTML 5 / CSS 3
-
HTML 5 / CSS 3
INTRODUCCIN
-
HTML 5 / CSS 3
OFFLINE
Offline
WEBConectividadAcceso a ficheros
Semntica
Audio/Video
3D/Grficos
Presentacin
Rendimiento
Almacenamiento
ONLINE
Permite realizar aplicaciones web offline
- application cache- localStorage
- web SQL y BBDD- online/offline events
-
HTML 5 / CSS 3
ALMACENAMIENTO
Offline
Conectividad
Acceso a ficheros
Semntica
Audio/Video
3D/Grficos
Presentacin
Rendimiento
Almacenamiento
Permite que las aplicaciones web guardendatos en el dispositivo
-Web Storage: sessionStorage/localStorage- Web SQL Database- IndexedDB
-
HTML 5 / CSS 3
CONECTIVIDAD
Offline
Conectividad
Acceso a ficheros
Semntica
Audio/Video
3D/Grficos
Presentacin
Rendimiento
Almacenamiento
Mejora el rendimiento del acceso en tiempo real entre aplicaciones / dispositivos / servidor
- Cross Document Messaging-XMLHTTPRequest 2- Web Sockets- Server-Sent Events
-
HTML 5 / CSS 3
ACCESO A FICHEROS
Offline
Conectividad
Acceso a ficheros
Semntica
Audio/Video
3D/Grficos
Presentacin
Rendimiento
Almacenamiento Permite que las aplicaciones webs puedan acceder (a)sincronamente a ficheros del dispositivo
- File API- FileReader API- Filesystem & FileWritter API- BlobBuilder API- Blob URLs
File API
FilerReader API
Filesystem & FileWritter API
BlobBuilder API
Blob URLs
-
HTML 5 / CSS 3
SEMNTICA
Offline
Conectividad
Acceso a ficheros
Semntica
Audio/Video
3D/Grficos
Presentacin
Rendimiento
Almacenamiento
Permite el uso de nuevas etiquetas / atributos que determinan la naturaleza del contenido.
- Elementos multimedia- Elementos estructurales- Atributos semnticos- Nuevos tipos / atributos de campos de formulario - Sintaxis de Microformatos / microdata--Etc
-
HTML 5 / CSS 3
AUDIO / VIDEO
Offline
Conectividad
Acceso a ficheros
Semntica
Audio/Video
3D/Grficos
Presentacin
Rendimiento
Almacenamiento
Permite no solo incluir contenido multimedia (audio / video) sino acceder, controlar y mani-pular determinados aspectos de los mismos
Video
Audio
-
HTML 5 / CSS 3
3D/GRFICOS
Offline
Conectividad
Acceso a ficheros
Semntica
Audio/Video
3D/Grficos
Presentacin
Rendimiento
Almacenamiento
Permite crear animaciones y/o efectos visuales en websites/aplicaciones web sin necesidad de plugins adicionales (por ej: flash)
- 2D Canvas- WebGL- SVG- 3D CSS transforms
-
HTML 5 / CSS 3
PRESENTACIN
Offline
Conectividad
Acceso a ficheros
Semntica
Audio/Video
3D/Grficos
Presentacin
Rendimiento
AlmacenamientoPermite crear sitios web/aplicaciones vistosas y visualmente enriquecidas que producen mejores experiencias de usuario.
- CSS3 3D Transforms- CSS3 Transforms- CSS3 Animation- CSS3 Transition- Webfonts
3D transforms
CSS3 Transforms
CSS3 Animation
CSS3 Transitions
-
HTML 5 / CSS 3
RENDIMIENTO
Offline
Conectividad
Acceso a ficheros
Semntica
Audio/Video
3D/Grficos
Presentacin
Rendimiento
Almacenamiento
Permite crear aplicaciones que rivalizan en rendimiento a las aplicaciones nativas, ms responsivas que las aplicaciones tradicionales
- Webworkers (procesos en background)- Almacenamiento local- Carga asncrona- App cach- Webfonts
-
HTML 5 / CSS 3
2004
2005
2007
2009
2012
2020
2022
Apple, Mozilla & Opera no consiguieron crear un estndar HTML4.
En consecuencia forman la Web WHATWG
Se publica el borrador Web Applications 1.0
W3C adopta a WHATGW y publica el borrador HTML5
Finalizacin del borrador
Gracias a Google, Apple y los dispositivos mviles HTML5 surge con fuerza
Primer Release Candidate de HTML5 [previsin W3C]
Finalizacin de test [previsin W3C]
Creacin del estndar HTML5 [previsin W3C]
HISTORIA DE HTML 5
-
HTML 5 / CSS 3
ESTADO ACTUAL (MAYO 2014)
www.findmebyip.com/litmus/#html5-web-applications
-
HTML 5 / CSS 3
HTML5 = Evolucin
Mejor manejo de errores
Mayor estandarizacin
Cdigo ms semntico
Ms accesible
Soporte multimedia
BENEFICIOS
-
HTML 5 / CSS 3
BENEFICIOS
Acceso a recursos como webcams o micrfonos
Almacenamiento Local
Webworkers
Geolocalizacin
Gestin de formularios
Menor dependencia de plugins y Javascript
-
HTML 5 / CSS 3
NOVEDADES
Etiquetado del documentoDOCTYPE
-
HTML 5 / CSS 3
NOVEDADES
Etiquetado del documentoMETA
HTML 4.01 HTML5
-
HTML 5 / CSS 3
NOVEDADES
Etiquetado del documentoSCRIPT
HTML 4.01 HTML5
-
HTML 5 / CSS 3
HOJAS DE ESTILO
HTML 4.01 HTML5
NOVEDADES
Etiquetado del documento
-
HTML 5 / CSS 3
NOVEDADES
Etiquetado del documentoETIQUETA A
Acerca de
Conocequines somos
HTML 4.01 HTML5
Acerca de
Conoce quines somos
-
HTML 5 / CSS 3
Nuevas etiquetas de presentacin
NOVEDADES
-
HTML 5 / CSS 3
representa la cabecera de un
documento o seccin
representa el ttulo de una seccin.
Se usa para agrupar conjuntos de
elementos h1-h6 (ttulos y
subttulos)
Mi Blog
Esforzndome para trabajar menos
NUEVAS ETIQUETAS DE PRESENTACIN
-
HTML 5 / CSS 3
representa una seccin del
documento que contiene navegacin
home
blog
galera
contacto
NUEVAS ETIQUETAS DE PRESENTACIN
-
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIN
representa una pieza de contenido
independiente dentro de un
documento
representa una seccin del
documento (un captulo, un
apartado, etc) agrupa una serie de
contenidos con una temtica
comn
-
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIN
Ttulo del artculo
Subttulo del artculo
Lorem ipsum dolor sit amet, consecteturadipiscing elit.
Captulo 1
Lorem ipsum dolor sit amet, consecteturadipiscing elit. Integer bibendum scelerisqueneque, ac facilisis neque
Captulo 2
Lorem ipsum dolor sit amet, consecteturadipiscing elit. Integer bibendum scelerisqueneque, ac facilisis neque
-
HTML 5 / CSS 3
representa un diagrama, una
ilustracin, una fotografa, etc
Javier Gonzlez impartiendo seminarios sobre tecnologas web
representa la nota al pie del elemento incluido en
NUEVAS ETIQUETAS DE PRESENTACIN
-
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIN
representa contenidos que no estn
directamente relacionados con el resto
de contenido de la pgina o que aporta
informacin adicional
Tecnologas web
bla bla bla
Links sobre HTML5
Links sobre CSS3
-
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIN
representa el pie de una seccin o
pgina. Suele contener informacin
sobre el autor, copyright, etc
2012 Bla bla bla bla
-
HTML 5 / CSS 3
Lienzo utilizado para representar imgenes, grficos, dibujos y/o elementos visuales al vuelo con Javascript
No requiere plugins, ni codecs
Mapa de bits (no hay reescalado)
El contenido no se aade al DOM
Puede ser exportado
Tu navegador no soporta canvas
var lienzo = document.getElementById(miLienzo)
var context = lienzo.getContext('2d');
-
HTML 5 / CSS 3
width & height
autoplay
loop
source
poster
controls
Autobuffer
preload
VIDEO
-
HTML 5 / CSS 3
Descargar vdeo
VIDEO
Ejemplo de video
-
HTML 5 / CSS 3
autoplay
source
loop
autobuffer
controls
preload
AUDIO
-
HTML 5 / CSS 3
-
HTML 5 / CSS 3
FORMULARIOS
type
search
Email
phone
url
tel
range (*)
number (*)
date
datetime
datetime-local
month
colour
min (*) max (*)
http://www.findmebyip.com/litmus/#html5-forms-inputs
-
HTML 5 / CSS 3
FORMULARIOS
autofocus
required autocomplete
pattern
placeholder
on
off
Expresiones regulares
http://www.findmebyip.com/litmus/#html5-forms-inputs
Ejemplo de formulario
-
HTML 5 / CSS 3
ETIQUETAS
abbr
align
alink
archive
axis
background
bgcolor
border
cellpadding
cellspacing
char
charoff
charset
classid
clear
codebase
codetype
compact
compact
declare
hspace
link
longdesc
marginheight
marginwidth
name
nohref
noshade
nowrap
profile
rev
rules
scheme
scope
shape
size
standby
target
text
type
type
valign
valuetype
version
vlink
vspace
width
ATRIBUTOS
REDEFINIDAS
ELEMENTOS QUE DESAPARECEN
-
HTML 5 / CSS 3
document.getElementByClassName: acceso a todos los elementos del DOM que compartan la clase especificada
document.querySelectorAll(selector): acceso a todos los elementos del DOM con el selector especificado
document.querySelector(selector): acceso al primer elemento del DOM con el selector especificado
var elementos1 = document.querySelectorAll("section div.wrapper");
var elementos2 = document.querySelectorAll("div.content, div.wrapper");
var inputsText = document.querySelectorAll('[type=text]');
var elemento = document.querySelector("section div.wrapper");
JAVASCRIPT
-
HTML 5 / CSS 3
draggable (true|false): el elemento puede ser arrastrado hacia otro elemento
EVENTOS
dragstart
drag
dragenter
dragover
dragleave
drop
dragend
Ejemplo de drag&drop
DRAG & DROP
-
HTML 5 / CSS 3
Bases de datosLocales
Lgica de la aplicacin
e interfaz de usuario
data generada por el usuario,
o recursos solicitados
VSCacheALMACENAMIENTO LOCAL
-
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
Se fuerza a tener
Instalado el plugin.
Problemas con Firewalls
Se fuerza a usar un
Navegador
determinado
Poca informacin (4 Kb)
Reduce velocidad
Tcnicas de Almacenamiento Offline Previas
Navegador
Basado en Plugins
Cookies
-
HTML 5 / CSS 3
Tcnicas de Almacenamiento con HTML5
Diferentes APIs:
Web Storage (Local Storage or DOM Storage)
Web SQL Database
IndexedDB
File Storage
PRINCIPIOS:
Normas estndar para todos los navegadores.
Informacin solo accesible desde el propio navegador.
Interaccin de la API y la Base de Datos es asncrona
ALMACENAMIENTO LOCAL
-
HTML 5 / CSS 3
Web Storage
TIPOS DE DATOS:
localStorage Permanecen hasta que el usuario los borra
sessionStorage Desaparecen al cerrarse el navegador
El ms compatible.
Estructura clave-valor
Integridad de los datos.
Race conditions
http://html5demos.com/storage
http://playground.html5rocks.com/#localstorage
http://playground.html5rocks.com/#sessionstorage
ALMACENAMIENTO LOCAL
-
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
Web SQL Database
Como las DDBB tradicionales.
Estructura relacionada (joins)
Ms complejas.
IE y Firefox no son compatibles
http://playground.html5rocks.com/#async_transactions
-
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
IndexedDB
Mezcla entre Web Storage y Web SQL Database
Estructura relacionada (joins)
Transacciones de informacin.
Pocos navegadores lo soportan, pero est previsto ser
soportado por todos
-
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
FileStorage
Puedes guardar informacin binaria (como texto), y grandes
cantidades de informacin.
File Reader soportado solo por Chrome
FileWriter todava no soportado por nadie
Cuando sea soportado ser bueno para almacenar
grandes cantidades de informacin
-
HTML 5 / CSS 3
LO QUIERO USAR YA!
Por defecto usar WEB STORAGE (+ simple & + compatible )
Ayudarse de libreras como persis.js
Protegerse contra la perdida de datosNo guardar informacin privada
Los usuarios pueden borrar los datos fcilmente
Sincronizarse con el servidor frecuentemente
Securizar los datosAlto riesgo en navegadores compartidos
SessionStorage mejor que LocalStorage
Encriptar informacin
Evitar guardar cierto tipo de datos
ALMACENAMIENTO LOCAL
-
HTML 5 / CSS 3
WebSockets
Permite la comunicacin bidireccional con cualquier servidor mediante un determinado protocolo de red.
La conexin con el servidor se establece de forma asncrona, en segundo plano, y la gestin del todo su ciclo de vida se realiza a travs de callbacksque reciben eventos
Debemos utilizar "ws://" para establecer conexiones con el protocolo websocket.
El constructor admite adems un parmetro adicional para que indicar un conjunto de subprotocolos, pero an est sin definir.
var ws = new WebSocket("ws://echo.websocket.org");
la URL del cdigo de ejemplo es vlida muy til para pruebas, es un sencillo servidor websocketque acta como eco (reenva al cliente lo mismo que recibe).
-
HTML 5 / CSS 3
WebSockets
ws.onopen = function(event){
//Conexin abierta
}
ws.onmessage = function(event){
//Mensaje recibido en event.data;
}
ws.onclose = function(event){
//Conexin cerrada
}
ws.onerror = function(event){
//Error en la conexin
}
ws.send("ping");
//mandar mensaje al servidor
ws.close();
// cerrar la conexin
EVENTOS FUNCIONES
ATRIBUTOS-url (string con la direccin)- protocol (string con el protocolo)- readyState
-Conectando (0)-Abierto (1)-Cerrando (2)- Cerrado (3)
-bufferedAmount (n de bytes pendientes de enviar al server)
http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today
-
HTML 5 / CSS 3
WEB WORKERS
Tareas JavaScript que pueden lanzarse en segundo plano, a modo de threads.
Su objetivo es permitir que las aplicaciones web puedan lanzar hilos de ejecucin concurrentes con una gran carga de trabajo y duracin indeterminada.
Las tareas funcionan al margen del proceso normal de gestin de eventos de los controles de la interface de usuario, evitando bloquear la pgina durante su ejecucin.
var worker = new Worker("worker.js");
Kill
-
HTML 5 / CSS 3
WEB WORKERS
Pueden procesar eventos, callbacks, e incluso es posible crear otros workers.
Limitacin: no tienen un contexto de navegacin asociado.
No pueden acceder al DOM, window, document o parent, Pero s a navigator, location, XMLHttpRequest, timers, applicationCache o Web SQL database.
Permiten la posibilidad de ejecutar el cdigo de otros scripts
importScripts("script1.js"); //De uno en uno...
importScripts("script2.js");
importScripts("script3.js", "script4.js"); //.. o varios a la vez
-
HTML 5 / CSS 3
WEB WORKERS
Permite comunicar el hilo padre principal con el worker hijo.
La comunicacin se realiza a travs de "postMessage", y el manejador "onmessage".
Una comunicacin bsica entre padre e hijo tendra cuatro pasos:
worker.postMessage("Informacin para el worker");
self.onmessage = function(event){
//Recibe "Informacin para el worker" en event.data
};
self.postMessage("Informacin para el padre");
worker.onmessage = function(event){
//Recibe "Info para el padre" en event.data
};
1) El hilo padre manda un mensaje (evento) al worker:
2) El worker recibe el mensaje en el atributo "data" del evento
3) El worker termina su proceso y enva un mensaje (evento) al padre:
4) El padre recibe el mensaje en el atributo "data" del evento
-
HTML 5 / CSS 3
CSS 3
HTML 5 CSS 3
estructura presentacin
-
HTML 5 / CSS 3
1996
1998
2000
2002
2009
CSS 1: permite dar estilos independientemente del navegador y del HTML
CSS2: nuevas funcionalidades, pero implementacin lenta
Semilla del CSS3.
Se plantea una lista de mejoras de CSS2
Borrador de CSS3
CSS2.1: Crea lo que ahora consideramos el estndar
Implementacin en algunos navegadores de algunas partes de CSS3
2005 Empieza el desarrollo de CSS3
HISTORIA DE CSS 3
-
HTML 5 / CSS 3
Mejora en los selectores
Nuevos estilos
Sombra
Opacidad
esquinas redondeadas
Mejora en tipografas
Transformaciones
Reduce la cantidad de HTML (divitis)
Reduce las peticiones de imgenes
Nuestra pagina va a ser ms rpida!
CSS 3 VS CSS 2
-
HTML 5 / CSS 3
NOVEDADES DE CSS 3
Bordes
Fondos
Color
Text effects
Layout multicolumna
Transiciones
Animaciones
Selectores
Media Queries
-
HTML 5 / CSS 3
border-image: url(border.png)
27 27 27 27 round round;
border-image
box-shadow: 10px 10px 5px #888;
box-shadow / text-shadow
border-radius: 15px;
border-radius
BORDES
border: 5px solid #000;border-colors:#e00 #c30 #c50 #c60 #c70
border-color
http://www.webdesignerwall.com/demo/css3-dropdown-menu/
NOVEDADES DE CSS 3
-
HTML 5 / CSS 3
background: url(../topImage.jpg) top left no-repeat, url(../centerImage.jpg) top right repeat-y, url(../bottomImage.jpg) bottom center no-repeat;
top image
center image
bottom image
MULTIPLE BACKGROUNDS
http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html
NOVEDADES DE CSS 3
-
HTML 5 / CSS 3
rotate : transform: rotate(30deg);
skew :transform: skew(-30deg);
translatetransform: translate(30px,10px);
scale :transform: scale(0.5,2.0);
TRANSFORM
http://www.the-art-of-web.com/css/css-animation/
http://www.ejhansel.com/transform/
NOVEDADES DE CSS 3
-
HTML 5 / CSS 3
rgb(255,192,0,1); rgb(255,192,0,0.5);
RGBA: (Red, Green, Blue, Alpha)
Opacity: 1.0 Opacity: 0.5
Opacity
HSLA: (Hue, Saturation, Lightness, Alpha)
hsla(21,97%,52%,1); hsla(21,97%,52%,0.5);
HSL: (Hue, Saturation, Lightness)
hsl(21,97%,52%)
COLOR
NOVEDADES DE CSS 3
-
HTML 5 / CSS 3
NOVEDADES DE CSS 3
column-count
column-width
column-gap
column-rule
MULTI-COLUMN LAYOUT
-
HTML 5 / CSS 3
WebFonts
WEBFONTS
@font-face {font-family: FontName';src: url('Gondola_SD-webfont.eot');src: local(''), url(' FontName.woff')
format('woff'), url(' FontName.ttf') format('truetype'), url(' FontName.svg#webfontsgM4b18D')
format('svg');font-weight: normal;font-style: normal;
}
div {font-family: FontName;
}
http://www.fontsquirrel.com/fontface/generator
NOVEDADES DE CSS 3
-
HTML 5 / CSS 3
NOVEDADES DE CSS 3
Text-shadow
Text-shadow: Xpos Ypos Blur Color;
ejemplo de sombra
Text-overflow
Text-overflow: ellipsis-word;
Lorem ipsum dolor sit
Word-wrap
word-wrap: break-word;
This paragraph has long words
thisisaveryverylongwordthatisntreall
yoneword and again a
longwordwithnospacesinit
TEXTOS
http://lab.simurai.com/flashlight
-
HTML 5 / CSS 3
NOVEDADES DE CSS 3
:enabled
:disabled
:checked
NUEVAS PSEUDO-CLASES
-
HTML 5 / CSS 3
NOVEDADES DE CSS 3
a[href^=http://web]
a[href*=.es]
a[href$=.pdf]
[att$=val]termina por val
[att^=val]empieza por val
[att*=val]contiene val
SELECTORES DE ATRIBUTOS
-
HTML 5 / CSS 3
NOVEDADES DE CSS 3
MEDIA QUERIES
min-width & max-widthdiferentes estilos segn el tamao de la pantalla
http://mediaqueri.es/
-
HTML 5 / CSS 3
ESTADO ACTUAL DE CSS 3
http://www.w3.org/Style/CSS/current-work#table
http://www.findmebyip.com/litmus/#target-selector
-
HTML 5 / CSS 3
podemos usar CSS3 desde hoy!
Aumentamos y ensuciamos el cdigo
No todos los navegadores lo soportan
Posibles solucioneseccstender.orgless.jsFicheros .css para cada navegadorcss3generator.com
-o-border-radius: 10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px;-ms-border-radius: 10px;
ESTADO ACTUAL DE CSS 3