10 snippets de HTML5 que harán las delicias de todo programador web

HTML es supersencillo de implementar, pero cuando creas páginas web a menudo repites ciertas tareas lo que se ha un poco tedioso, como por ejemplo, la creación de formularios. En este artículo he compilado 10 snippets listos para usarse, que harán que el momento de montar el front-end sea mucho más rápido y ligero de sobrellevar.

Plantilla de inicio de HTML5

Cuando empiezas un nuevo proyecto, necesitas una plantilla de inicio. Aquí tienes una plantilla limpia y concisa que te servirá como archivo base para tus proyectos en HTML5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Untitled</title>
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		
	</body>
</html>

Formulario para obtener dirección (Google Maps)

Aquí tienes un simple, pero potente, código para un formulario donde el usuario pueda introducir su ubicación para obtener las direcciones de un sitio específico. Muy útil para páginas de contacto.

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />
</form>

Codificado en Base64 de un gif espaciador de un 1x1px

No recomiendo usar gifs espaciadores transparentes, pero aún estamos en 2016, y sé de buena tinta que hay muchos diseñadores que aún los utilizan (y los seguirán utilizando). Si tu eres uno de esos, probablemente disfrutarás con este codificado en Base64 de un gif espaciador transparente de 1x1px. Mucho mejor que utilizar una imagen.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Expresión regular para validar un email

HTML5 permite, entre otras cosas, validar emails utilizando expresiones regulares. Aquí tienes el patrón, listo para utilizarse, que debes utilizar para comprobar que una dirección de correo electrónico es completamente válida.

<input type="text" title="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}" />

Embebido de flash correctamente

¿Embebes habitualmente ficheros Flash en tus páginas html? Si es que sí, es mejor que guardes este snippet para embeber Flash para futuros usos.

<object type="application/x-shockwave-flash" 
  data="your-flash-file.swf" 
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" value="high"/>
</object>

Video en HTML5 con Flash fallback

Otra gran característica de HTML5, sin duda alguna, es el tag video que permite fácilmente embeber archivos de vídeo. Pero desafortunadamente, algunos navegadores todavía no lo soportan. Aquí tienes el código completo que debes poner, para que, en aquellos navegadores que no cuenten con esta función, se reproduzca con Flash.

<video width="640" height="360" controls>
	<source src="__VIDEO__.MP4"  type="video/mp4" />
	<source src="__VIDEO__.OGV"  type="video/ogg" />
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>

Llamadas y SMS en iPhone

Con el lanzamiento de iPhone, Apple introdujo unos nuevos links para hacer llamadas de teléfono desde el dispositivo o enviar mensajes SMS. Aquí tienes un ejemplo de este tipo de enlaces.

<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>

Autocompletador utilizando los datalist de HTML5

Mediante el elemento datalist, HTML5 te permite crear una lista de datos para un campo input que querramos que sea autocompletador. ¡Esto es superútil! Aquí tienes un código e ejemplo que puedes reutilizar en tus propios proyectos.

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Archivos descargables

HTML5 te brinda la oportunidad de forzar la descarga de ficheros utilizando el atributo download. Aquí tienes un link estándar para forzar la bajada de un archivo descargable.

<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>

Explotar IE6

Aún en 2016, mucha gente aún no ha actualizado su horrible versión de Internet Explorer 6, que solo nombrarlo ya produce pesadillas entre los desarrolladores. Es decir, muchas personas, a pesar de todo, siguen utilizándolos. Si quieres decirle adiós a ese prehistórico navegador de una vez por todas, aquí tienes un snippet muy majo para hacerlo explotar.

Con este código IE6 dirá adiós.

<style>*{position:relative}</style><table><input></table>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP