Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Cursohtml 5
Cursohtml 5
HTML 5 / CSS 3
HTML 5 / CSS 3
INTRODUCCIÓN
HTML 5 / CSS 3
OFFLINE
Offline
Almacenamiento
Conectividad
Acceso a ficheros
WEB ONLINE
Semántica
Audio/Video Permite realizar aplicaciones web offline
3D/Gráficos - application cache - web SQL y BBDD
- localStorage - online/offline events
Presentación
Rendimiento
HTML 5 / CSS 3
ALMACENAMIENTO
Offline
Almacenamiento
Conectividad
Acceso a ficheros Permite que las aplicaciones web guarden
datos en el dispositivo
Semántica
-Web Storage: sessionStorage/localStorage
Audio/Video - Web SQL Database
3D/Gráficos - IndexedDB
Presentación
Rendimiento
HTML 5 / CSS 3
CONECTIVIDAD
Offline
Almacenamiento
Conectividad
Acceso a ficheros Mejora el rendimiento del acceso en tiempo
real entre aplicaciones / dispositivos /
Semántica
servidor
Audio/Video
- Cross Document Messaging
3D/Gráficos -XMLHTTPRequest 2
- Web Sockets
Presentación - Server-Sent Events
Rendimiento
HTML 5 / CSS 3
ACCESO A FICHEROS
Offline
Almacenamiento Permite que las aplicaciones webs puedan
acceder (a)sincronamente a ficheros del
Conectividad dispositivo
Acceso a ficheros - File API
- FileReader API
Semántica
- Filesystem & FileWritter API
Audio/Video - BlobBuilder API
- Blob URLs
3D/Gráficos
Presentación
Rendimiento
File API
FilerReader API
BlobBuilder API
Blob URLs
HTML 5 / CSS 3
SEMÁNTICA
Offline
Almacenamiento
Conectividad
Acceso a ficheros Permite el uso de nuevas etiquetas / atributos
que determinan la naturaleza del contenido.
Semántica
- Elementos multimedia
Audio/Video - Elementos estructurales
- Atributos semánticos
3D/Gráficos - Nuevos tipos / atributos de campos de formulario
- Sintaxis de Microformatos / microdata
Presentación --Etc
Rendimiento
HTML 5 / CSS 3
AUDIO / VIDEO
Offline
Almacenamiento
Conectividad
Permite no solo incluir contenido multimedia
Acceso a ficheros (audio / video) sino acceder, controlar y mani-
pular determinados aspectos de los mismos
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento
Video
Audio
HTML 5 / CSS 3
3D/GRÁFICOS
Offline
Almacenamiento
Conectividad
Acceso a ficheros
Semántica
Permite crear animaciones y/o efectos visuales
Audio/Video en websites/aplicaciones web sin necesidad
3D/Gráficos de plugins adicionales (por ej: flash)
- 2D Canvas
Presentación - WebGL
- SVG
Rendimiento
- 3D CSS transforms
HTML 5 / CSS 3
PRESENTACIÓN
Offline
Almacenamiento
Permite crear sitios web/aplicaciones vistosas
Conectividad y visualmente enriquecidas que producen
mejores experiencias de usuario.
Acceso a ficheros
- CSS3 3D Transforms
Semántica - CSS3 Transforms
- CSS3 Animation
Audio/Video - CSS3 Transition
- Webfonts
3D/Gráficos
Presentación
Rendimiento
3D transforms
CSS3 Transforms
CSS3 Animation
CSS3 Transitions
HTML 5 / CSS 3
RENDIMIENTO
Offline
Almacenamiento
Conectividad
Acceso a ficheros
Permite crear aplicaciones que rivalizan en
Semántica rendimiento a las aplicaciones nativas, más
Audio/Video responsivas que las aplicaciones tradicionales
- Webworkers (procesos en background)
3D/Gráficos - Almacenamiento local
- Carga asíncrona
Presentación - App caché
- Webfonts
Rendimiento
HTML 5 / CSS 3
HISTORIA DE HTML 5
Gracias a Google, Apple y los dispositivos móviles HTML5 surge con fuerza
HTML 5 / CSS 3
ESTADO ACTUAL (MAYO 2012)
www.findmebyip.com/litmus/#html5-web-applications
HTML 5 / CSS 3
BENEFICIOS
HTML5 = Evolución
Mayor estandarización
Más accesible
Soporte multimedia
HTML 5 / CSS 3
BENEFICIOS
Almacenamiento Local
Webworkers
Geolocalización
Gestión de formularios
HTML 5 / CSS 3
NOVEDADES
HTML 5 / CSS 3
NOVEDADES
<meta http-equiv=‛Content-Type‛
content=‛text/html; charset=UTF-8‛> <meta charset=‛UTF-8‛>
HTML 5 / CSS 3
NOVEDADES
<script type=‛text/javascript‛
<script src=”file.js”></script>
src=‛file.js‛> </script>
<script type=‛text/javascript‛>
<script>
………
</script> ………
</script>
HTML 5 / CSS 3
NOVEDADES
HTML 5 / CSS 3
NOVEDADES
HTML 5 / CSS 3
NOVEDADES
<div> <article>
<div> <aside>
<div> <section>
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup> <header>
<nav> representa la cabecera de un
documento o sección
<article>
<hgroup>
<aside>
<section>
representa el título de una sección.
Se usa para agrupar conjuntos de
elementos h1-h6 (títulos y
<footer>
subtítulos)
<header>
<hgroup>
<h1>Mi Blog</h1>
<h2>Esforzándome para trabajar menos</h2>
</hgroup>
</header>
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup> <nav>
<nav> representa una sección del
documento que contiene navegación
<article>
<aside>
<section>
<nav>
<ul>
<footer> <li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">galería</a></li>
<li><a href="#">contacto</a></li>
</ul>
</nav>
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup>
<article>
<nav>
representa una pieza de contenido
<article> independiente dentro de un
documento
<aside>
<section>
<section>
representa una sección del
<footer>
documento (un capítulo, un
apartado, etc) agrupa una serie de
contenidos con una temática
común
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup> <article>
<hgroup>
<nav> <h1>Título del artículo</h1>
<h2>Subtítulo del artículo</h2>
<article> </hgroup>
<p>Lorem ipsum dolor sit amet, consectetur
<aside> adipiscing elit.</p>
<section>
<section>
<h1>Capítulo 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur
<footer> adipiscing elit. Integer bibendum scelerisque
neque, ac facilisis neque</p>
</section>
<section>
<h1>Capítulo 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Integer bibendum scelerisque
neque, ac facilisis neque</p>
</section>
</article>
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup> <figure>
<nav> representa un diagrama, una
ilustración, una fotografía, etc
<article>
<aside>
<figcaption>
<section>
representa la “nota al pie” del elemento
incluido en <figure>
<footer>
<figure>
<img src=‚javier.jpg" alt=‚Javier González">
<figcaption> Javier González impartiendo seminarios
sobre tecnologías web</figcaption>
</figure>
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup>
<aside>
representa contenidos que no están
<nav>
directamente relacionados con el resto
<article> de contenido de la página o que aporta
información adicional
<aside>
<section>
<article>
<footer>
<header><h1>Tecnologías web</h1></header>
<p>bla bla bla</p>
<aside>
<ul>
<li><a href=‚#‛>Links sobre HTML5</a></li>
<li><a href=‚#‛>Links sobre CSS3</a></li>
</ul>
</aside>
</article>
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup> <footer>
<nav> representa el pie de una sección o
página. Suele contener información
<article>
sobre el autor, copyright, etc
<aside>
<section>
<footer>
<footer>
<p>© 2012 Bla bla bla bla</p>
</footer>
HTML 5 / CSS 3
CANVAS
Lienzo utilizado para representar imágenes, gráficos, dibujos y/o elementos visuales
“al vuelo” con Javascript
• http://www.whatwg.org/specs/web-apps/current-work/#2dcontext
http://code.google.com/p/explorercanvas/
http://billmill.org/static/canvastutorial/index.html
HTML 5 / CSS 3
VIDEO
autoplay controls
loop Autobuffer
preload
source
HTML 5 / CSS 3
VIDEO
Ejemplo de video
HTML 5 / CSS 3
AUDIO
autoplay
source
loop
autobuffer
controls
preload
HTML 5 / CSS 3
AUDIO
<audio controls>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
<object type="application/x-shockwave-flash‚ data="player.swf?soundFile=song.mp3">
<param name="movie" value="player.swf?soundFile=song.mp3">
<a href="song.mp3">Descargar canción</a>
</object>
</audio>
Ejemplo de audio
HTML 5 / CSS 3
FORMULARIOS
search
Email
phone
<input> type url
tel
range (*)
number (*)
min (*) max (*) date
datetime
datetime-local
month
colour
http://www.findmebyip.com/litmus/#html5-forms-inputs
HTML 5 / CSS 3
FORMULARIOS
placeholder autofocus
required
<input> autocomplete
on
off
http://www.findmebyip.com/litmus/#html5-forms-inputs
Ejemplo de formulario
HTML 5 / CSS 3
ELEMENTOS QUE DESAPARECEN
ETIQUETAS ATRIBUTOS
<acronym> <frameset> abbr codetype scheme
<applet> <isindex> align compact scope
alink compact shape
<basefont> <noframes> archive declare size
axis hspace standby
<big> <s> background link target
<center> <strike> bgcolor longdesc text
border marginheight type
<dir> <tt> cellpadding marginwidth type
cellspacing name valign
<font> <u> char nohref valuetype
<frame> charoff noshade version
charset nowrap vlink
classid profile vspace
clear rev width
REDEFINIDAS codebase rules
<small> <cite>
<b> <i> <a>
HTML 5 / CSS 3
JAVASCRIPT
HTML 5 / CSS 3
DRAG & DROP
EVENTOS
Ejemplo de drag&drop
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
Cache
VS Bases de datos
Locales
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
Diferentes APIs:
Web Storage (Local Storage or DOM Storage)
Web SQL Database
IndexedDB
File Storage
PRINCIPIOS:
Normas estándar para “todos” los navegadores.
Información solo accesible desde el propio navegador.
Interacción de la API y la Base de Datos es asíncrona
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
Web Storage
TIPOS DE DATOS:
localStorage Permanecen hasta que el usuario los borra
http://html5demos.com/storage
http://playground.html5rocks.com/#localstorage
http://playground.html5rocks.com/#sessionstorage
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
Más complejas.
http://playground.html5rocks.com/#async_transactions
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
IndexedDB
Transacciones de información.
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
FileStorage
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
HTML 5 / CSS 3
WebSockets
HTML 5 / CSS 3
WebSockets
EVENTOS FUNCIONES
<script> <script>
ws.onopen = function(event){ ws.send("ping");
//Conexión abierta //mandar mensaje al servidor
} ws.close();
ws.onmessage = function(event){ // cerrar la conexión
//Mensaje recibido en event.data;
} </script>
ws.onclose = function(event){
//Conexión cerrada
}
ws.onerror = function(event){ ATRIBUTOS
//Error en la conexión -url (string con la dirección)
} - protocol (string con el protocolo)
</script> - 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
Su objetivo es permitir que las aplicaciones web puedan lanzar hilos de ejecución
concurrentes con una gran carga de trabajo y duración indeterminada.
Las tareas funcionan al margen del proceso normal de gestión de eventos de los
controles de la interface de usuario, evitando bloquear la página durante su
ejecución.
<script>
var worker = new Worker("worker.js");
</script>
HTML 5 / CSS 3
WEB WORKERS
<script>
importScripts("script1.js"); //De uno en uno...
importScripts("script2.js");
importScripts("script3.js", "script4.js"); //.. o varios a la vez
</script>
HTML 5 / CSS 3
WEB WORKERS
<script> <script>
worker.postMessage("Información self.postMessage("Información para
para el worker"); el padre");
</script> </script>
2) El worker recibe el mensaje en el atributo "data" del evento 4) El padre recibe el mensaje en el atributo "data" del evento
<script> <script>
self.onmessage = function(event){ worker.onmessage = function(event){
//Recibe "Información para el worker" //Recibe "Info para el padre" en event.data
en event.data };
}; </script>
</script>
HTML 5 / CSS 3
CSS 3
HTML 5 CSS 3
estructura presentación
HTML 5 / CSS 3
HISTORIA DE CSS 3
1996 CSS 1: permite dar estilos independientemente del navegador y del HTML
HTML 5 / CSS 3
CSS 3 VS CSS 2
Mejora en los selectores
Nuevos estilos
Sombra
Opacidad
esquinas redondeadas
…
Mejora en tipografías
Transformaciones
HTML 5 / CSS 3
NOVEDADES DE CSS 3
• Bordes
• Fondos
• Color
• Text effects
• Layout multicolumna
• Transiciones
• Animaciones
• Selectores
• Media Queries
HTML 5 / CSS 3
NOVEDADES DE CSS 3
BORDES
border-radius border-color
border-radius: 15px; border: 5px solid #000;
border-colors:#e00 #c30 #c50 #c60 #c70
http://www.webdesignerwall.com/demo/css3-dropdown-menu/
HTML 5 / CSS 3
NOVEDADES DE CSS 3
MULTIPLE BACKGROUNDS
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
http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html
HTML 5 / CSS 3
NOVEDADES DE CSS 3
TRANSFORM
• rotate : • skew :
transform: rotate(30deg); transform: skew(-30deg);
http://www.ejhansel.com/transform/
• scale : • translate
transform: scale(0.5,2.0); transform: translate(30px,10px);
http://www.the-art-of-web.com/css/css-animation/
HTML 5 / CSS 3
NOVEDADES DE CSS 3
COLOR
• Opacity • HSL:
(Hue, Saturation, Lightness)
• RGBA: • HSLA:
(Red, Green, Blue, Alpha) (Hue, Saturation, Lightness, Alpha)
HTML 5 / CSS 3
NOVEDADES DE CSS 3
MULTI-COLUMN LAYOUT
• column-count
• column-width
• column-gap
• column-rule
HTML 5 / CSS 3
NOVEDADES DE CSS 3
WEBFONTS
@font-face {
WebFonts 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
HTML 5 / CSS 3
NOVEDADES DE CSS 3
TEXTOS
Text-shadow
Text-shadow: Xpos Ypos Blur Color;
Text-overflow: ellipsis-word;
HTML 5 / CSS 3
NOVEDADES DE CSS 3
NUEVAS PSEUDO-CLASES
• :enabled
• :disabled
• :checked
HTML 5 / CSS 3
NOVEDADES DE CSS 3
SELECTORES DE ATRIBUTOS
<a href=“http://web.com/home.html”>
a[href^=“http://web”]
<a href=“http://web.com/img.jpg”>
<a href=“http://web.com/img.gif”>
<a href=“http://site.es/home/index.pdf”>
<a href=“http://site.com/home.html”>
HTML 5 / CSS 3
NOVEDADES DE CSS 3
MEDIA QUERIES
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
ESTADO ACTUAL DE CSS 3
Posibles soluciones
eccstender.org
less.js
Ficheros .css para cada navegador
css3generator.com
HTML 5 / CSS 3