Códigos HTML5 que te sacarán de más de un apuro

HTML es un lenguaje de marcado sencillo de implementar, pero a la hora de crear sitios webs casi siempre tienes que echar mano de los mismos códigos, como por ejemplo, crear formularios. En este artículo te mostramos unos cuantos códigos HTML que te vendrán de maravilla. Simplemente solo tendrás que copiarlos y agregarlos a tu proyecto web. Sin más dilación, vamos a ver estos fragmentos de HTML.

Plantilla de inicio HTML5

Cuando comenzamos un nuevo proyecto, necesitamos una plantilla de la cual partir. Aquí tienes una sencilla y clara que te servirá como base para tus proyectos HTML5.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sin titulo</title>
    <meta name="description" content="Ejemplo de metadescripcion">
    <link rel="stylesheet" type="text/css" href="theme.css">

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

Carga asíncrona de Javascript

Una de las mejores características de HTML5 es la posibilidad de cargar ficheros Javascript de manera asíncrona. ¿Cómo? Muy sencillo. Simplemente debes agregar el atributo async en los tags script.

<script src="https://cdn.ejemplo.com/script.js" async></script>

Este fragmento de código ejemplifica la carga asíncrona de un fichero Javascript. Esto hace que la página cargue mucho más rápida ya que el navegador cargará simultáneamente tanto el archivo HTML como el JavaScript.

Definir el viewport para diseños responsives

Cuando construimos sitios webs responsives, debemos definir el viewport. Para ello, debes insertar este código dentro de la sección head de tu documento.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

Este código HTML define la vista en todas las pantallas en una relación de aspecto 1 × 1 y elimina la funcionalidad predeterminada de los iPhones y otros dispositivos móviles que muestran los sitios web a plena vista y permiten a los usuarios ampliar el diseño pellizcando la pantalla.

Formulario para obtener una dirección

Aquí tienes un código sencillo pero potente que te permite crear un formulario donde el usuario puede ingresar su ubicación para obtener direcciones del lugar en concreto. Muy útil para formularios de contacto.

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Introduce tu ubicacion</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="Atocha (Madrid)" />
   <input type="submit" value="Obtener direcciones" />
</form>

Validar un email con una expresión regular

HTML5 te permite, entre otras cosas, validar direcciones de correo utilizando expresiones regulares. Simplemente debes utilizar el atributo pattern del campo input y agregar ahí la expresión regular adecuada. En el caso de una dirección de correo, sería esta:

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

Formulario de login con Bootstrap

Plantilla que contiene un simple formulario en Bootstrap, la cual puede mejorarse y modificarse en base a tus necesidades. Utiliza esta plantilla como base a la hora de crear tus formularios, sean del tipo que sean. Como por ejemplo, formularios de login, formularios de contacto, formularios de suscripción...

<form role="form">
  <div class="form-group">
    <label for="email">Direccion de email:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Contraseña:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Recuerdame</label>
  </div>
  <button type="submit" class="btn btn-default">Enviar</button>
</form>

Embeber un archivo flash

¿Aún sigues embebiendo archivos Flash en tus páginas HTML? Si la respuesta es sí, será mejor que guardes el código válido para embeber flash en HTML5. Te vendrá bien de cara a futuro.

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

Insertar un vídeo HTML con soporte flash

Otra gran característica de HTML5 es, definitivamente, el tag video, el cual te permite embeber de manera sencilla, archivos de video. Desafortunadamente, los navegadores más antiguos no pueden gestionar este tipo de videos en HTML5. Por eso, te traigo este fragmento HTML que cuenta con soporte flash para que puedas reproducir vídeos en el navegador que quieras. Tanto antiguos, como modernos.

<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>

Enlaces para llamar por teléfono y enviar un SMS

Con el lanzamiento del iPhone, Apple introdujo una manera rápida de realizar llamadas y enviar sms a través de la web. Aquí tienes el código que te indica cómo hacerlo. Guárdalo en tu lobrería de snippets porque te hará falta...

<a href="tel:+34699999999">Llamar a 699 999 999</a>
<a href="sms:+34699999999">Nuevo mensaje SMS</a>

Autocompletador con datalists de HTML5

Mediante el elemento datalist de HTML5 podemos crear un listado de datos que posteriormente utilizaremos en un elemento input como autocompletador. ¡Es super útil! Más abajo tienes el código de ejemplo para que veas cómo implementarlo.

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

<datalist id="frameworks">
	<option value="Chihuahua">
	<option value="Dogo Aleman">
	<option value="Pastor Aleman">
	<option value="Pug">
	<option value="Yorkshire">
</datalist>

Archivos descargables

HTML5 te permite forzar la descarga de ficheros utilizando el atributo download. En el siguiente snippet puedes ver un simple enlace en el que se fuerza la descarga de un fichero.

<a href="/files/fichero.pdf" download="fichero.pdf">Descarga el fichero pdf</a>

Reducir las subidas a Mime Types especificos

El atributo accept fue introducido en HTML5. Utilizado en un elemento input type=”file”, restringe la subida de ficheros a aquellas extensiones especificadas.

<input type="file" name="imagenes" accept="image/gif,image/jpeg,image/jpg,image/png">

Crashear IE6

Supongo que en 2019 la mayoría de la gente finalmente terminó de utilizar el horrible Internet Explorer 6 que le dio pesadillas a todos los desarrolladores front-end durante años. Pero vamos, seguro que hay gente que a dia de hoy lo utiliza. Si deseas librarte de dicho navegador prehistórico para siempre, aquí tienes código muy divertido que debes incluir en tus páginas HTML. Este código lo único que hace es crashear IE6. Chulo, ¿verdad?

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

COMPARTE ESTE ARTÍCULO

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