Presentación en Aspgems html5

Introducción al HTML5
Jorge Alvarez - Enero 2011

Sumario
• Introducción
• Etiquetas y elementos estructurales
• Formularios
• Rich Media
• Nuevas A.P.I.’s
• CSS 3

Qué es HTML5
• No solo un lenguaje de marcado
• Sintaxis “relajada”
• Gestión de errores
• Mejoras en javascript
• Un caos de especiﬁcaciones y soporte entre
diferentes navegadores

Etiquetas / Elementos
obsoletos (I)
• basefont • u

• big • frame

• small (no queda obsoleto cambia la especiﬁcación) • frameset

• center • noframes

• font • acronym

• s • applet

• strike • dir

• tt • align

Etiquetas / Elementos
obsoletos (II)
• link • hspace

• vlink • vspace

• alink • cellpadding

• bgcolor • cellspacing

• height • border

• width • target

• scrolling • longdesc

• valign

Etiquetas / a nidar

<a href=”http://myweb.com/help.html”>
<h1>If you need help, just ask</h1>
<p>Conctact us from 9-5</p>
</a>

Nuevas etiquetas
• HEADER FOOTER SECTION ARTICLE
• Contenedores que agrupan contenido
relacionado
• Article no es solamente para artículos de
texto/blogs sino que los productos/servicios
de una empresa también son articles.
• Diferencia con section: Pensar si el contenido
es sindicable (RSS Atom)

Nuevas etiquetas
• ASIDE
• Indica contenido adicional o relacionado con
el contenido principal
• NO es para barras laterales. Las barras
laterales son sections no aside
• NAV
• Solo incluir en elementos de navegación
relevantes, no en cada lista de enlaces.

Nuevas etiquetas

• HGROUP
• Agrupa contenido relacionado en el
encabezado
• Generalmente varios headings (h1, h2..)
• Para el esquema o resumen de la página el
heading de menor valor será el relevante.

Nuevas etiquetas
• FIGURE FIGCAPTION
• Hace referencia a una anotación (no tiene
porqué ser una imagen) ilustrativa o aclarativa
del texto principal.
<p>Puedes programar nuestra API utilizando el siguiente código:</p>
<figure id="code98">
<figcaption>Publicación de un Twitter mediante el API</figcaption>
<pre>
<code>
# Initialize your Twitter client
client = Twitter::Client.new
# Post a status update
client.update("I just posted a status update via the Twitter Ruby Gem!")
# Read the most recent status update in your home timeline
puts client.home_timeline.ﬁrst.text
</code>
</pre>
</figure>

Ejemplo de página
<!DOCTYPE html>
<html>
<header>
<meta charset="UTF-8" />
<script src="jquery.js"></script>
<link rel="stylesheet" href="main.css" />
</header>
<body>

Ejemplo de página
<header>
<hgroup>
<h1>La web del Metal</h1>
<h2>Si te gusta el heavy o trabajas en una fundición, esta
es tu web</h2>
</hgroup>
<img src=”cuernos.png” alt=”Viva el trash, el doom y el black
metal” id=”logo” />
<nav>
<ul>
<li>Conciertos</li>
<li>Entrevistas/li>
<li>Noticias</li>
<li>Contactar</li>
</ul>
</nav>
</header>

<article>
Ejemplo de página
<header>
<h1>Entrevista con Cradle of Filth </h1>
<time datetime=”2011-01-04T22:04:49+01:00” pubdate>
Martes, 4 de Enero de 2011
</time>
</header>
<p>
Hoy tenemos con nosotros a una de las bandas mas grandes del panorama musical.
</p>
<footer>
4 comentarios <a href=”/comments” title=”Nos interesa tu opinión”>Deja tu
comentario </a>
</footer>
<aside>
<h1>Recursos sobre Cradle of Filth</h1>
<ul>
<li>Biografía</li>
<li>Letras</li>
<li>Vídeos</li>
<li>Web oficial</li>
</ul>
</aside>
</article>

Ejemplo de página
<section id=”sidebar”>
<section id=”banner”>
<img src=”/ad.png” alt=”Hay que hacer algo de caja” />
</section>
<nav id=”submenu”>
<ul>
<li>Entradas para conciertos</li>
<li>Foro de debate</li>
<li>Visita nuestra tienda</li>
</ul>
</nav>
<footer>
<small>
Las opiniones vertidas por los que hablan son de ellos nosotros no nos
hacemos responsables porque somos, básicamente, unos cobardicas.
</small>
</footer>
</section>

Ejemplo de página
<footer>
<small>
© 2011 Metaleros sin fronteras | Diseño web
Tom araya
</small>
<ul>
<li>Conciertos</li>
<li>Entrevistas</li>
<li>Noticias</li>
<li>Contactar</li>
</ul>
</footer>
</body>
</html>

Nuevas etiquetas /
Compatibilidad con IE
• IE 6, 7 y 8 no las soportan (ni esto ni casi nada
de html5)
• Aún así podemos usarlas
• Modernizr
• Crearlas mediante javascript
• http://remysharp.com/html5-enabling-script

Nuevos elementos

• MARK
• Resalta un elemento pero sin la importancia
semántica de em o de strong (span)
• Ejemplo: Resaltar resultados en una búsqueda
• <p>El perro de san <mark>roque</mark> no tiene rabo.</p>

Nuevos elementos
• TIME

• Muestra el tiempo en formato entendible tanto para
máquinas como para humanos
• (el atmosférico no, el otro)

• Heredado de los microformatos <abbr>

• El formato es el ISO 8601

• pubdate en article

• Pro Tip: @content.created_at.iso8601

<time datetime=”2011-01-04T22:04:49+01:00” pubdate>Martes, 4 de
Enero de 2011</ time>

Nuevos elementos
• METER
• Muestra medidas que forman parte de una
escala

<meter min="0" max="3000" value="250"
title=”Euros”>
Ya casi tenemos un 10% recaudado
</meter>

Nuevos elementos
• PROGRESS
• Muestra medidas de algo que está cambiando
en este momento

<progress min="0" max="90" value="60">
Ya queda menos para que acabe este rollo
</progress>

Nuevos elementos
• ADDRESS
• Sirve para indicar una dirección. Pero no
todas las direcciones de la página sino aquellas
relevantes al contenido mostrado
<address>
<a href=”/about_me.html”>Juan Doe</a><br />
Avenida de las acacias, 22<br />
Londres, 343898
</address>

Formularios / Nuevos elementos
• PLACEHOLDER
• AUTOFOCUS
• REQUIRED
• AUTOCOMPLETE
<label for="nombre">Tu nombre</label>
<input type="text" id="nombre" name="nombre"
placeholder="Tu nombre y un apellido" />
<label for="empresa">Empresa</label>
<input type="text" id="empresa" name="empresa"
autocomplete=”off” autofocus />
<form autocomplete=”off”>

Formularios / Nuevos elementos
• DATALIST
• CONTENTEDITABLE
$(function(){
var status = $("#status");
$("span[contenteditable=true]" ).blur(function(){
var field = $(this).attr("id");
var value = $(this).text();
$.post("http://localhost:3000/users/1" ,field + "=" + value,
function(data){
status.text(data);
} );
});
});
http://media.pragprog.com/titles/bhh5/code/html5_content_editable/show.html

Formularios / Input
• SEARCH • URL

• EMAIL • PHONE

<input id="query" name="query" type="search" placeholder="Busca lo que quieras" />

<input id="email" name="email" type="email">
<input id="website" name="website" type="url">
<input id="phone" name="phone" type="tel">

Formularios / Input
• RANGE • DATE

• NUMBER • COLOR

<label for="handsome">Como eres de guap@?</label>
<input id="handsome" name="handsome" type="range" min="1" max="5"
value="2" />
<label for="handicap">Que handicap tienes?</label>
<input id="handicap" name="handicap" type="number" min="0" max="36"
step=”2” />
<label for="shower">Cuando te duchaste por última vez?</label>
<input id="shower" name="shower" type="date" value="2011-01-12" />
<label for="hair">Color de pelo</label>
<input id="hair" name="hair" type="color" />

Formularios / Validación
• REQUIRED • NOVALIDATE

• PATTERN • COLOR

<input type="text" id="name" name="name"
placeholder="Tu nombre y un apellido" required />

<input id="pcode" name="pcode" pattern="[d]{5}" />

<form novalidate>
<input type="email" id="email" name="email"
novalidate />

Rich Media / Audio

• Formatos soportados
• AAC Safari 4, Chrome 3, IOS
• MP3 IE9, Safari 4, Chrome 3, IOS
• Vorbis (OGG) Firefox 3, Chrome 4, Opera 10

Rich Media / Audio
• AUTOPLAY • CONTROLS

• LOOP • AUTOBUFFER PRELOAD
<audio controls autoplay loop preload=”none”>
<source src="/Her_ghost_in_the_fog.ogg" type="audio/ogg" />
<source src="/Her_ghost_in_the_fog.mp3" type="audio/mpeg" />
<object type="application/x-shockwave-flash" data="player.swf?
soundFile=Her_ghost_in_the_fog.mp3">
<param name="movie" value="player.swf?
soundFile=Her_ghost_in_the_fog.mp3" />
<a href="Her_ghost_in_the_fog.mp3">Descargate el tema en tu
286</a>
<p>Un temazo de una de las más grandes bandas de la historia</
p>
</object>
</audio>

Rich Media / Vídeo

• Formatos soportados
• H.264 IE9, Safari 4, Chrome 3, IOS
• Thedora Firefox 3.5, Chrome 4, Opera 10
• VP8 IE9 (codec), Firefox 4, Chrome 5, Opera 10.7

Formularios / Vídeo
• POSTER • CONTROLS

<video
src="live_bait_for_the_dead.mp4"
controls width="480" height="320"
poster=”live_bait.png” autobuffer>
</video>

Canvas / 2D
<canvas id="canvas" width="480" height="320">
<p>No tienes canvas te vamos a poner una fotico pa’ disimular</p>
<img src="The_principal_of_evil_made_flesh.jpg" alt="Another top
hit">
</canvas>
var canvas
=
document.getElementById('canvas');
var draw_2d = canvas.getContext('2d');
context.lineWidth = 2;
context.beginPath();
context.moveTo(0, 40);
context.lineTo(30, 0);
context.lineTo(60, 40 );
context.lineTo(285, 40 );
context.stroke();
context.closePath();

• SVG
Canvas
• existía ya y con soporte pero se han decantado por canvas

• 3D

• Algún día

• Rgraph

• Librería para generar gráﬁcos

• WebGL

• Apple, Google, Opera y Mozilla soportan parte de las especiﬁcaciones
http://learningwebgl.com/blog/

<div id="graph_data">
Canvas / Ejemplo
<h1>Browser share for this site</h1>
<ul>
<li><p data-name="Safari 4" data-percent="15">Safari 4 - 15%</p> </li>
<li> <p data-name="Internet Explorer" data-percent="55">Internet Explorer - 5%</p>
</li>
<li> <p data-name="Firefox" data-percent="14">Firefox - 14%</p> </li>
<li> <p data-name="Google Chrome" data-percent="16">Google Chrome - 66%</p> </li>
</ul>
</div>
function canvasGraph(){
var title = $('#graph_data h1').text();
var labels = $("#graph_data>ul>li>p[data-name]").map(function(){
return $(this).attr("data-name");
});
var percents = $("#graph_data>ul>li>p[data-percent]").map(function(){
return parseInt($(this).attr("data-percent"));
});
var bar = new RGraph.Bar('browsers', percents);
bar.Set('chart.gutter', 50);
bar.Set('chart.colors', ['red']);
bar.Set('chart.title', title);
bar.Set('chart.labels', labels);
bar.Draw();
}

Drag and Drop
• Especiﬁcación creada por Micro$oft

• Es un caos

• Hay 7 eventos
• ondragstart

• ondragend

• ondragenter

• ondragover

• ondragleave

• ondrop

• ondrag

Drag and Drop
• DRAGGABLE

• auto (defecto)

• true

• false

• DROPZONE

• Copy

• Move

• Link

http://html5demos.com/drag

API’s

• Características comunes
• Sandboxed
• Quotas
• Transactions
• Events

localStorage
• Almacenamiento clave/valor
• Objetos tipo string
• Serializar/desserializar
JSON.stringify() y JSON.parse()

• window.localStorage()
• localStorage.setItem(key, value)
• var value = localStorage.getItem(key)

sessionStorage

• El contenido se borra al cerrar la sessión
• window.sessionStorage()
• sessionStorage.setItem(key, value)
• var value = sessionStorage.getItem(key)

SQL Storage
• La novia cadaver
• En noviembre de 2010 se deja de
evolucionar.
• Firefox no lo implementa.
• Safari, Chrome y IOS permiten su uso
• Utiliza sqlLite

SQL Storage
this.db = openDatabase('geomood', '1.0', 'Geo-Mood Checkins', 8192);
this.db.transaction(function(tx) {
tx.executeSql("create table if not exists " + "checkins(id integer
primary key asc, time integer, latitude float," +
"longitude float, mood string)", [], function() {
console.log("succ");
} );
});
store.db.transaction(function(tx) {
tx.executeSql(
"insert into checkins " + "(time, latitude, longitude, mood) values
(?,?,?,?);",
[checkin.time, checkin.latitude, checkin.longitude, checkin.mood],
handler, store.onError
);
});
http://www.html5rocks.com/tutorials/offline/storage/

Indexed Database

• Será el estandar que todos los browsers implementen

• noSql

• Almacenamiento clave/valor

• documentos almacenados con un id único y cada documento
almacena objetos compuestos de clave/valor

• Soportado parcialmente por Chrome y Firefox

Indexed Database
Modo síncrono

var db = indexedDB.open('books', 'Book store', false);
if (db.version !== '1.0') {
var olddb = indexedDB.open('books', 'Book store');
olddb.createObjectStore('books', 'isbn');
olddb.createIndex('BookAuthor', 'books', 'author', false);
olddb.setVersion("1.0");
}
// db.version === "1.0";
var index = db.openIndex('BookAuthor');
var matching = index.get('fred');
if (matching) {
report(matching.isbn, matching.name, matching.author);
} else {
report(null);
}

Indexed Database
Modo asíncrono

function findFred() {
var store = db.objectStore('books');
var index = store.index('BookAuthor');
var req = index.get('fred');
req.onsuccess = function(event) {
var matching = event.result;
report(matching.isbn, matching.name, matching.author);
}
req.onerror = function(event) {
report(null);
}
}
var db;
var dbRequest = indexedDB.open('books', 'Book store');
dbRequest.onsuccess = function(event) {
db = event.result;
if (db.version != "1.0") {
var versionRequest = db.setVersion("1.0");
versionRequest.ontimeout = function(event) {
throw new Error("timeout trying to set version to 1.0");
}
versionRequest.onsuccess = function(event) {
var store = db.createObjectStore('books', 'isbn');
store.createIndex('BookAuthor', 'books', 'author', false);event.transaction.onabort = function(event) {
throw new Error("error while trying to set version to 1.0");
}
event.transaction.oncomplete = function(event) {
findFred(db);
}
}
} else {
findFred(db);
}
}

Offline support
• <html manifest=”notes.manifest”>
• Pro Tip: Servir notes.manifest con mime/
type text/cache-manifest
• AddType text/cache-manifest .manifest
• Si cambiamos los ficheros cacheados
incrementamos el número de versión
• http://www.w3.org/TR/html5/offline.html

Ofﬂine support
CACHE MANIFEST
# v = 1.0.0
/javascripts/jquery.min.js
/javascripts/application.js
/images/checked.png
/images/unchecked.png

NETWORK:
payment.cgi

CACHE:
/stylesheets/screen.css
/stylesheets/main.css
# Muestra la página offline.html cuando ocurre un error trabajando en modo offline
FALLBACK:
/ /offline.html
# El wildcard sirve para indicar que está permitido el acceso a recursos de otros
sitios.
NETWORK:
*

Cross-domain
• Para enviar mensajes
• postMessage(“ping”, “http://myserver.com/cheers”)

• El receptor
$(function(){
$(window).bind("message" ,function(event){
$("#message" ).val(event.originalEvent.data);
});
});

No todos los navegadores soportan la especificación.
jQuery tiene un plugin llamado postMessages que hace lo mismo y
funciona de forma idéntica.

Geolocalización
• El navegador pregunta al usuario la primera
vez si permite o no usar la geolocalización
window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position; document.getElementById('startLat').innerHTML =
startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
}); };

Geolocalización
Para monitorizar su posición ya que
getCurrentPosition solo se ejecuta una vez, al cargar
la página.

navigator.geolocation.watchPosition(function(position
) {
document.getElementById('currentLat').innerHTML =
position.coords.latitude;
document.getElementById('currentLon').innerHTML =
position.coords.longitude;
});

Geolocalización
Si deseamos localizar al usuario a toda costa y no dispone o no nos
permite la geolocalización podemos utilizar el api de google para
localizarlo por ip

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
showLocation(position.coords.latitude, position.coords.longitude);
});
} else {
// Implementar http://code.google.com/apis/loader/#ClientLocation
};

Historico navegación
function supportsHistory(){
return !!(window.history && window.history.pushState);
}

window.history.length
window.history.go(number)
window.history.back()
window.history.forward()
window.history.pushState(data, title, [url])
window.history.replaceState(data, title, [url])

Ejemplo
history.pushState(currentPage, document.title, '?x=' + currentPage);

Todo esto ya lo hace el plugin de jQuery Addresses (y mas cosas) y es cross browser
http://www.asual.com/jquery/address/

Web Sockets
var connection = new WebSocket('ws://html5rocks.websocket.org/echo');
// Utilizamos ws como protocolo y existe también wss para los seguros

// When the connection is open, send some data to the server
connection.onopen = function () {
connection.send('Ping'); // Send the message 'Ping' to the server
};
// Log errors
connection.onerror = function (error) {
console.log('WebSocket Error ' + error);
};
// Log messages from the server
connection.onmessage = function (e) {
console.log('Server: ' + e.data);
};

Web workers
//Inicializamos
var worker = new Worker("renderiza_un_3d_complicado.js");

//arrancamos el worker
worker.postMessage();

//le mandamos un mensaje
worker.postMessage('Hello World');

//recibimos sus mensajes
worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.data);
}, false);

CSS3
• Pseudoclases • Gradientes

• Multiple columns • Transformaciones

• Media Queries • Web Fonts

• Flexible Box Model • Transiciones

• Esquinas redondeadas • Interfaces 3D

• Sombras

Recursos

• HTML5 for web designers - Jeremy Keith (A book apart)

• HTML5 & CSS3 - Brian P. Hogan (The pragmatic programmers)

• http://www.delicious.com/jorgegorka/html5

• http://www.alvareznavarro.es

Y no olviden
supermineralizarse y
supervitaminarse

Presentación en Aspgems html5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (14)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Presentación en Aspgems html5

Ähnlich wie Presentación en Aspgems html5 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (10)

Presentación en Aspgems html5