() translation by (you can also view the original English article)
Algunas veces, volvemos a visitar algunas de las publicaciones favoritas de nuestros lectores a lo largo de la historia de Tuts+. Este tutorial se publicó por primera vez en agosto de 2010.
Esta industria se mueve rápido, ¡muy rápido! Si no tienes cuidado, te quedarás en el polvo. Por lo tanto, si te sientes un poco abrumado con los próximos cambios/actualizaciones en HTML5, utiliza esto como un manual de las cosas que debes saber.
1. Nuevo Doctype
¿Todavía usas ese doctype XHTML molesto e imposible de memorizar?
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
2 |
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
Si es así, ¿por qué? Cambia al nuevo doctype HTML5. Vivirás más tiempo, como diría Douglas Quaid.
1 |
<!DOCTYPE html>
|
De hecho, ¿sabías que ni siquiera es realmente necesario para HTML5? Sin embargo, se usa para navegadores actuales y antiguos que requieren un tipo de doctype específico. Los navegadores que no entienden este tipo de documento simplemente renderizarán el marcado contenido en modo estándar. Por lo tanto, sin preocupaciones, no dudes en tirar la precaución al viento y abre el nuevo tipo de documento HTML5.
2. El elemento Figure
Considera el siguiente marcado para una imagen:
1 |
<img src="path/to/image" alt="About image" /> |
2 |
<p>Image of Mars. </p> |
Desafortunadamente, no es una forma fácil o semántica de asociar el título, envuelto en una etiqueta de párrafo, con el elemento de imagen en sí. HTML5 rectifica esto, con la introducción del elemento <figure>. Cuando se combina con el elemento <figcaption> , podemos asociar semánticamente subtítulos con sus equivalentes de imagen.
1 |
<figure>
|
2 |
<img src="path/to/image" alt="About image" /> |
3 |
<figcaption>
|
4 |
<p>This is an image of something interesting. </p> |
5 |
</figcaption>
|
6 |
</figure>
|
3. <small> Redefinido
No hace mucho, utilicé el elemento <small> para crear subtítulos que están estrechamente relacionados con el logotipo. Es un elemento de presentación útil. Sin embargo, en este momento usarlo sería inadecuado. El elemento small ha sido redefinido, más apropiadamente, para referirse a letra pequeña. Imagina una declaración de derechos de autor en el pie de página de tu sitio; según la nueva definición HTML5 de este elemento; el <small> sería el envoltorio correcto para esta información.
El elemento
smallahora se refiere a "letra pequeña".
4. No más Types para scripts y enlaces
Posiblemente aún agregues el atributo Type a tus etiquetas link y script.
1 |
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> |
2 |
<script type="text/javascript" src="path/to/script.js"></script> |
Esto ya no es necesario. Está implícito que ambas etiquetas se refieren a hojas de estilo y scripts, respectivamente. Como tal, podemos eliminar el atributo type.
1 |
<link rel="stylesheet" href="path/to/stylesheet.css" /> |
2 |
<script src="path/to/script.js"></script> |
5. Para Citar o no Citar.
...Esa es la pregunta. Recuerda que HTML5 no es XHTML. No es necesario que ajustes tus atributos entre comillas si no lo deseas No tienes que cerrar tus elementos. Dicho esto, no hay nada de malo en hacerlo, si te hace sentir más cómodo. Encuentro que esto es verdad para mí.
1 |
<p class=myClass id=someId> Start the reactor. |
Haz tu propia opinión sobre esto. Si prefieres un documento más estructurado, apóyate con las citas.
6. Haz tu contenido editable
Los nuevos navegadores tienen un nuevo atributo ingenioso que se puede aplicar a los elementos, llamado contenteditable. Como su nombre lo indica, esto permite al usuario editar cualquier texto contenido dentro del elemento, incluidos sus elementos secundarios. Hay una variedad de usos para algo como esto, incluida una aplicación tan simple como una lista de tareas pendientes, que también aprovecha el almacenamiento local.
1 |
<!DOCTYPE html>
|
2 |
|
3 |
<html lang="en"> |
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<title>untitled</title> |
7 |
</head>
|
8 |
<body>
|
9 |
<h2> To-Do List </h2> |
10 |
<ul contenteditable="true"> |
11 |
<li> Break mechanical cab driver. </li> |
12 |
<li> Drive to abandoned factory
|
13 |
<li> Watch video of self </li> |
14 |
</ul>
|
15 |
</body>
|
16 |
</html>
|
O, como aprendimos en el consejo anterior, podríamos escribirlo como:
1 |
<ul contenteditable=true> |
7. Entradas de correo electrónico
Si aplicamos un type de "email" para formar entradas, podemos indicarle al navegador que solo permita cadenas que se ajusten a una estructura de dirección de correo electrónico válida. Está bien; ¡la validación de formularios incorporada pronto estará aquí! No podemos confiar al 100% en esto todavía, por razones obvias. En los navegadores más antiguos que no entienden este tipo de "email", simplemente recurren a un cuadro de texto común.
1 |
<!DOCTYPE html>
|
2 |
|
3 |
<html lang="en"> |
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<title>untitled</title> |
7 |
</head>
|
8 |
<body>
|
9 |
<form action="" method="get"> |
10 |
<label for="email">Email:</label> |
11 |
<input id="email" name="email" type="email" /> |
12 |
|
13 |
<button type="submit"> Submit Form </button> |
14 |
</form>
|
15 |
</body>
|
16 |
</html>
|
En este momento, no podemos depender de la validación del navegador. Una solución del lado del servidor/cliente todavía debe ser implementada.
También se debe tener en cuenta que todos los navegadores actuales son un poco inseguros cuando se trata de qué elementos y atributos hacen y cuáles no. Por ejemplo, Opera parece ser compatible con la validación de correo electrónico, siempre que se especifique el atributo name. Sin embargo, no es compatible con el atributo placeholder del cual aprenderemos en el próximo consejo. En pocas palabras, no debes depender de esta forma de validación todavía... ¡pero aún puedes usarla!
8. Placeholders
Antes, teníamos que utilizar un poco de JavaScript para crear placeholders en los cuadros de texto. Claro, inicialmente puedes establecer el atributo value como mejor te parezca, pero tan pronto como el usuario borre ese texto y haga clic, la entrada se dejará en blanco nuevamente. El atributo placeholder soluciona esto.
1 |
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" /> |
Nuevamente, el soporte es sombrío en el mejor de los navegadores, sin embargo, esto continuará mejorando con cada nuevo lanzamiento. Además, si el navegador, como Firefox y Opera, actualmente no admiten el atributo placeholder, no hay daño.
9. Almacenamiento local
Gracias al almacenamiento local (no oficialmente HTML5, pero agrupado por conveniencia), podemos hacer que los navegadores avanzados "recuerden" lo que escribimos, incluso después de que el navegador se cierra o se actualiza.
"El localStorage establece campos en el dominio. Incluso cuando cierras el navegador, lo vuelves a abrir y vuelves al sitio, recuerda todos los campos en localStorage ".
-QuirksBlog
Aunque obviamente no es compatible con todos los navegadores, podemos esperar que este método funcione, más notablemente, en Internet Explorer 8, Safari 4 y Firefox 3.5. Ten en cuenta que, para compensar los navegadores antiguos que no reconocerán el almacenamiento local, primero debes probar para determinar si window.localStorage existe.
10. El Header semántico y el Footer
Atrás han quedado los días de:
1 |
<div id="header"> |
2 |
... |
3 |
</div>
|
4 |
|
5 |
<div id="footer"> |
6 |
... |
7 |
</div>
|
Las Divs, por naturaleza, no tienen estructura semántica, incluso después de aplicar un id. Ahora, con HTML5, tenemos acceso a los elementos <header> y <footer>. El maquetado de arriba ahora puede ser reemplazado por:
1 |
<header>
|
2 |
... |
3 |
</header>
|
4 |
|
5 |
<footer>
|
6 |
... |
7 |
</footer>
|
Es completamente apropiado tener múltiples
headersyfootersen tus proyectos.
Intenta no confundir estos elementos con el "header" y el "pie de página" o Footer de tu sitio web. Simplemente se refieren a su contenedor. Como tal, tiene sentido colocar, por ejemplo, meta-información en la parte inferior de una publicación de blog dentro del elemento de pie de página o Footer. Lo mismo es cierto para el encabezado o header.
11. Más funciones del formulario HTML5
Aprende más sobre las funciones del formulario en HTML5 en este rápido video.
12. Internet Explorer y HTML5
Desafortunadamente, Internet Explorer requiere un poco de disputas para comprender los nuevos elementos HTML5.
Todos los elementos, por defecto, tienen un
displayen línea oinline.
Para garantizar que los nuevos elementos HTML5 se procesen correctamente como elementos de nivel bloque, es necesario en este momento diseñarlos como tales.
1 |
header, footer, article, section, nav, menu { |
2 |
display: block; |
3 |
}
|
Lastimosamente, Internet Explorer ignorará estos estilos, porque no tiene idea de qué es, por ejemplo, el elemento header. Afortunadamente, hay una solución fácil:
1 |
document.createElement("article"); |
2 |
document.createElement("footer"); |
3 |
document.createElement("header"); |
4 |
document.createElement("nav"); |
5 |
document.createElement("menu"); |
Por extraño que parezca, este código parece desencadenar Internet Explorer. Para simplificar este proceso en cada nueva aplicación, Remy Sharp creó una secuencia de comandos, comúnmente conocida como HTML5 Shiv. Este script también soluciona algunos problemas de impresión.
1 |
<!--[if IE]>
|
2 |
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
3 |
<![endif]-->
|
13. hgroup*
* Desde la primera publicación de este artículo, el elemento hgroup se ha vuelto completamente obsoleto y ya no se debe usar.
14. Atributo requerido
Los formularios permiten un nuevo atributo required, que especifica, naturalmente, si se requiere una entrada en particular. Dependiendo de tu preferencia de codificación, puedes declarar este atributo de las siguientes dos maneras:
1 |
<input type="text" name="someInput" required> |
O, con un enfoque más estructurado.
1 |
<input type="text" name="someInput" required="required"> |
Cualquiera de los dos métodos servirá. Con este código, y dentro de los navegadores que admiten este atributo, no se puede enviar un formulario si esa entrada "algún input" está en blanco. Aquí hay un ejemplo rápido; también agregaremos el atributo placeholder, ya que no hay razón para no hacerlo.
1 |
<form method="post" action=""> |
2 |
<label for="someInput"> Your Name: </label> |
3 |
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> |
4 |
<button type="submit">Go</button> |
5 |
</form>
|
Si la entrada (input) se deja en blanco y se envía el formulario, se resaltará el cuadro de texto.
15. Atributo Autofocus
De nuevo, HTML5 elimina la necesidad de soluciones de JavaScript. Si una entrada en particular debe ser "seleccionada" o enfocada, de forma predeterminada, ahora podemos utilizar el atributo de enfoque automático llamado autofocus.
1 |
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus> |
Curiosamente, aunque personalmente prefiero un enfoque más XHTML (usando comillas, etc.), escribir "autofocus=autofocus" parece extraño. Como tal, nos mantendremos con el enfoque de palabra clave única.
16. Soporte para audio
Ya no tenemos que depender de complementos de terceros para reproducir audio. HTML5 ahora ofrece el elemento <audio>. Bueno, al menos, en última instancia, no tendremos que preocuparnos por estos complementos. Por el momento, solo los navegadores más recientes ofrecen soporte para audio HTML5. En este momento, sigue siendo una buena práctica ofrecer alguna forma de compatibilidad con versiones anteriores.
1 |
<audio autoplay="autoplay" controls="controls"> |
2 |
<source src="file.ogg" /> |
3 |
<source src="file.mp3" /> |
4 |
<a>Download this file.</a> |
5 |
</audio>
|
Mozilla y Webkit aún no se llevan bien cuando se trata del formato de audio. Firefox querrá ver un archivo .ogg, mientras que los navegadores Webkit funcionarán bien con la extensión .mp3 común. Esto significa que, al menos por ahora, debes crear dos versiones del audio.
Cuando Safari carga la página, no reconoce ese formato .ogg, y se saltará y pasará a la versión mp3, en consecuencia. Ten en cuenta que IE, como es habitual, no es compatible con esto, y Opera 10 y versiones anteriores solo pueden funcionar con archivos .wav.
17. Soporte para video
Al igual que el elemento <audio>, por supuesto, tenemos videos HTML5 también en los nuevos navegadores. De hecho, hace poco, YouTube anunció un la posibilidad de incrustar sus videos en HTML5, para los navegadores que lo soportan. Desafortunadamente, una vez más, debido a que la especificación HTML5 no especifica un códec específico para el video, los navegadores deben decidirlo. Aunque se puede esperar que Safari e Internet Explorer 9 admitan video en formato H.264 (que los reproductores Flash pueden reproducir), Firefox y Opera se quedan con los formatos de código abierto Theora y Vorbis. Como tal, al mostrar video HTML5, debes ofrecer ambos formatos.
1 |
<video controls preload> |
2 |
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> |
3 |
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> |
4 |
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> |
5 |
</video>
|
Chrome puede mostrar correctamente el video codificado en los formatos "ogg" y "mp4".
Hay algunas cosas que vale la pena mencionar aquí.
- No estamos técnicamente obligados a establecer el atributo
type; sin embargo, si no lo hacemos, el navegador tiene que averiguar el tipo por sí mismo. Ahorra algo de ancho de banda, y declara esto. - No todos los navegadores entienden el video HTML5. Debajo de los elementos
source, podemos ofrecer un enlace de descarga o insertar una versión Flash del video. Tu decides. - Los controles y los atributos de precarga se analizarán en los siguientes dos consejos.
18. Precargar videos
El atributo preload hace exactamente lo que seguramente adivinarías. Sin embargo, dicho esto, primero debes decidir si deseas o no que el navegador precargue el video. ¿Es necesario? Quizás, si el visitante accede a una página, que está específicamente diseñada para mostrar un video, definitivamente debe precargar el video y guardar al visitante un poco de tiempo de espera. Los videos pueden precargarse configurando preload="preload", o simplemente agregando preload. Yo prefiero la última solución; es menos redundante.
1 |
<video preload> |
19. Mostrar controles
Si estás trabajando con cada uno de estos consejos y técnicas, es posible que hayas notado que, con el código anterior, el video parece ser solo una imagen, sin ningún tipo de control. Para representar estos controles de reproducción, debemos especificar el atributo controls dentro del elemento de video.
1 |
<video preload controls> |
Ten en cuenta que cada navegador representa a reproductor de forma diferente el uno del otro.
20. Expresiones regulares
¿Con qué frecuencia te has encontrado escribiendo alguna expresión rápida para verificar un cuadro de texto en particular? Gracias al nuevo atributo pattern, podemos insertar una expresión regular directamente en nuestro marcado.
1 |
<form action="" method="post"> |
2 |
<label for="username">Create a Username: </label> |
3 |
<input type="text" |
4 |
name="username" |
5 |
id="username" |
6 |
placeholder="4 <> 10" |
7 |
pattern="[A-Za-z]{4,10}" |
8 |
autofocus
|
9 |
required> |
10 |
<button type="submit">Go </button> |
11 |
</form>
|
Si estás medianamente familiarizado con las expresiones regulares, sabrás que este patrón: [A-Za-z] {4,10} solo acepta letras mayúsculas y minúsculas. Esta cadena también debe tener un mínimo de cuatro caracteres y un máximo de diez.
¡Observa que estamos comenzando a combinar todos estos nuevos increíbles atributos!
Si las expresiones regulares son extrañas para ti, consulta aquí.
21. Detectar soporte para atributos
¿De qué sirven estos atributos si no tenemos forma de determinar si el navegador los reconoce? Bueno, buen punto; pero hay varias formas de resolver esto. Discutiremos dos. La primera opción es utilizar la excelente biblioteca de Modernizr. Alternativamente, podemos crear y diseccionar estos elementos para determinar de qué son capaces los navegadores. Por ejemplo, en nuestro ejemplo anterior, si queremos determinar si el navegador puede implementar el atributo pattern, podríamos agregar un poco de JavaScript a nuestra página:
1 |
alert( 'pattern' in document.createElement('input') ) // boolean;
|
De hecho, este es un método popular para determinar la compatibilidad del navegador. La biblioteca jQuery utiliza este truco. Arriba, estamos creando un nuevo elemento input y determinando si el atributo pattern se reconoce dentro. Si es así, el navegador admite esta funcionalidad. De lo contrario, por supuesto que no.
1 |
<script> |
2 |
if (!'pattern' in document.createElement('input') ) {
|
3 |
// do client/server side validation |
4 |
} |
5 |
</script> |
¡Ten en cuenta que esto depende de JavaScript!
22. Elemento Mark
Piensa en el elemento <mark> como un resaltador. Una cadena envuelta dentro de esta etiqueta debe ser relevante para las acciones actuales del usuario. Por ejemplo, si busqué "Abrir mi mente" en algún blog, podría utilizar algo de JavaScript para ajustar cada aparición de esta cadena dentro de las etiquetas <mark>.
1 |
<h3> Search Results </h3> |
2 |
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p> |
23. Cuándo usar un <div>
Algunos de nosotros inicialmente nos preguntamos cuándo deberíamos usar divs simples. Ahora que tenemos acceso a headers, articles, sections, y footers, ¿hay algún momento para usar un... div? Absolutamente.
Los
Divs deben utilizarse cuando no hay un mejor elemento para el trabajo.
Por ejemplo, si encuentras que debes envolver un bloque de código dentro de un elemento contenedor específicamente para posicionar el contenido, un <div> tiene perfecto sentido. Sin embargo, si en su lugar estás envolviendo una nueva publicación de blog o, quizás, una lista de enlaces en tu footer, considera usar los elementos <article> y <nav> respectivamente. Son más semánticos.
24. Qué comenzar a usar inmediatamente
Con toda esta charla sobre HTML5 no completa hasta 2022, muchas personas la ignoran por completo, lo que es un gran error. De hecho, ¡hay un puñado de funciones HTML5 que podemos usar en todos nuestros proyectos ahora mismo! Un código más simple y limpio siempre es algo bueno. En la sugerencia rápida de video de hoy, te mostraré un puñado de opciones.
25. Qué no es HTML5
Se puede perdonar a las personas por suponer que las increíbles transiciones sin JavaScript se agrupan en el todo abarcador HTML5. Oye, incluso Apple ha promovido inadvertidamente esta idea. Para los no-desarrolladores, a quienes les importa; es una manera fácil de referirse a los estándares web modernos. Sin embargo, para nosotros, aunque solo sea semántica, es importante comprender exactamente qué no es HTML5.
- SVG: No es HTML5. Tiene al menos cinco años.
- CSS3: No es HTML5. Esto es... CSS.
- Geolocalización: No es HTML5.
- Client Storage: No es HTML5. Lo fue en un punto, pero fue eliminado de la especificación, debido al hecho de que a muchos les preocupaba que, en su conjunto, se estuviera volviendo demasiado complicado. Ahora tiene su propia especificación.
- Web Sockets: No es HTML5. De nuevo, se exportó a su propia especificación.
Independientemente de la cantidad de distinción que requieras, todas estas tecnologías se pueden agrupar en la pila web moderna. De hecho, muchas de estas especificaciones ramificadas todavía son administradas por las mismas personas.
26. El atributo de datos
Ahora oficialmente tenemos soporte para atributos personalizados dentro de todos los elementos HTML. Mientras que, antes, todavía podíamos salirnos con cosas como:
1 |
<h1 id=someId customAttribute=value> Thank you, Tony. </h1> |
... ¡los validadores armarían un escándalo! Pero ahora, mientras precedemos nuestro atributo personalizado con "data", oficialmente podemos utilizar este método. Si alguna vez te haz encontrado adjuntando datos importantes a algo así como un atributo class, probablemente para el uso de JavaScript, ¡esto será de gran ayuda!
HTML Snippet
1 |
<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div> |
Recuperar el valor del atributo personalizado
1 |
var theDiv = document.getElementById('myDiv');
|
2 |
var attr = theDiv.getAttribute('data-custom-attr');
|
3 |
alert(attr); // My Val |
También se puede usar en tu CSS, como en este ejemplo de cambio de texto de CSS tonto y cojo.
1 |
<!DOCTYPE html>
|
2 |
|
3 |
<html lang="en"> |
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<title>Sort of Lame CSS Text Changing</title> |
7 |
<style>
|
8 |
|
9 |
h1 { position: relative; } |
10 |
h1:hover { color: transparent; } |
11 |
|
12 |
h1:hover:after { |
13 |
content: attr(data-hover-response); |
14 |
color: black; |
15 |
position: absolute; |
16 |
left: 0; |
17 |
|
18 |
}
|
19 |
</style>
|
20 |
</head>
|
21 |
<body>
|
22 |
|
23 |
<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1> |
24 |
|
25 |
</body>
|
26 |
</html>
|
Puedes ver una demostración del efecto anterior en JSBIN.
27. El elemento Output
Como probablemente hayas adivinado, el elemento output se usa para mostrar algún tipo de cálculo. Por ejemplo, si deseas mostrar las coordenadas de la posición del mouse o la suma de una serie de números, estos datos deben insertarse en el elemento output.
Como un ejemplo simple, insertemos la suma de dos números en un output vacío con JavaScript, cuando se presiona un botón submit.
1 |
<form action="" method="get"> |
2 |
<p>
|
3 |
10 + 5 = <output name="sum"></output> |
4 |
</p>
|
5 |
<button type="submit"> Calculate </button> |
6 |
</form>
|
7 |
|
8 |
<script>
|
9 |
(function() { |
10 |
var f = document.forms[0]; |
11 |
|
12 |
if ( typeof f['sum'] !== 'undefined' ) { |
13 |
f.addEventListener('submit', function(e) { |
14 |
f['sum'].value = 15; |
15 |
e.preventDefault(); |
16 |
}, false); |
17 |
}
|
18 |
else { alert('Your browser is not ready yet.'); } |
19 |
})();
|
20 |
</script>
|
Ten en cuenta que el soporte para el elemento output todavía es un poco inestable. En el momento de escribir esto, solo pude hacer que Opera mostrara esto agradable. Esto se refleja en el código anterior. Si el navegador no reconoce el elemento, este simplemente enviará un aviso informándote de ello. De lo contrario, encuentra el resultado con un nombre de "suma" y establece su valor en 15, en consecuencia, después de que se haya enviado el formulario.
Este elemento también puede recibir un atributo for, que refleja el nombre del elemento al que se refiere el resultado u output, similar a la forma en que funciona un label.
28. Crear controles deslizantes con la entrada de rango
HTML5 presenta el nuevo tipo de rango de entrada.
1 |
<input type="range"> |
En particular, puede recibir atributos de min, max, step, y value, entre otros. Aunque solo Opera parece ser compatible con este tipo de entrada en este momento, ¡será fantástico cuando podamos usar esto!
Para una demostración rápida, construyamos un medidor que permita a los usuarios decidir cuán asombroso es "Total Recall". No construiremos una solución de votación del mundo real, pero revisaremos cómo se podría hacer con bastante facilidad.
Paso 1: Marcado
Primero, creamos nuestro marcado.
1 |
<form method="post"> |
2 |
<h1> Total Recall Awesomness Gauge </h1> |
3 |
<input type="range" name="range" min="0" max="10" step="1" value=""> |
4 |
<output name="result"> </output> |
5 |
</form>
|
Ten en cuenta que, además de establecer los valores min y max, siempre podemos especificar cuál será el step para cada transición. Si el paso se establece en 1, habrá entonces 10 valores para elegir. También aprovecharemos el nuevo elemento output que aprendimos en el consejo anterior.
Paso 2: CSS
Ahora, lo daremos un poco de estilo. También utilizaremos :before y :after para informar al usuario cuáles son nuestros valores min y max especificados. Muchas gracias a Remy y Bruce por enseñarme este truco, a través de "Introducción a HTML5".
1 |
body { |
2 |
font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif; |
3 |
text-align: center; |
4 |
}
|
5 |
input { font-size: 14px; font-weight: bold; } |
6 |
|
7 |
input[type=range]:before { content: attr(min); padding-right: 5px; } |
8 |
input[type=range]:after { content: attr(max); padding-left: 5px;} |
9 |
|
10 |
output { |
11 |
display: block; |
12 |
font-size: 5.5em; |
13 |
font-weight: bold; |
14 |
}
|
Arriba, creamos contenido antes y después de la entrada del rango, y hacemos que sus valores sean iguales a los valores min y max, respectivamente.
Paso 3: JavaScript
Por último, nosotros:
- Determina si el navegador actual sabe cuál es la entrada de rango. Si no, alertamos al usuario de que la demostración no funcionará.
- Actualiza el elemento
outputdinámicamente, a medida que el usuario mueva el control deslizante. - Guarda el valor cuando el usuario salga del control deslizante, toma el valor y guárdalo en el almacenamiento local.
- Luego, la próxima vez que el usuario actualice la página, el rango y la salida se establecerán automáticamente en la última selección.
1 |
(function() {
|
2 |
var f = document.forms[0], |
3 |
range = f['range'], |
4 |
result = f['result'], |
5 |
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; |
6 |
|
7 |
// Determine if browser is one of the cool kids that |
8 |
// recognizes the range input. |
9 |
var o = document.createElement('input');
|
10 |
o.type = 'range'; |
11 |
if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
|
12 |
|
13 |
// Set initial values of the input and ouput elements to |
14 |
// either what's stored locally, or the number 5. |
15 |
range.value = cachedRangeValue; |
16 |
result.value = cachedRangeValue; |
17 |
|
18 |
// When the user makes a selection, update local storage. |
19 |
range.addEventListener("mouseup", function() {
|
20 |
alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
|
21 |
localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
|
22 |
}, false); |
23 |
|
24 |
// Display chosen value when sliding. |
25 |
range.addEventListener("change", function() {
|
26 |
result.value = range.value; |
27 |
}, false); |
28 |
|
29 |
})(); |
¿Listo para el mundo real? Probablemente todavía no; ¡pero sigue siendo divertido jugar y prepararse!
Descarga el código fuente y pruébalo tu mismo. Pero usa Opera.
¡Gracias por leer! Hemos cubierto mucho, pero todavía solo hemos arañado la superficie de lo que es posible con HTML5. ¡Espero que esto sirva como una cartilla útil!
