viernes, 7 de julio de 2017

El Atributo Pattern: Expresiones Regulares Sin Javascript

El atributo pattern es otro de los agregados en HTML5 que tiene asombrado a más de un desarrollador. Consiste, basicamente, en expresiones regulares SIN javascript.

Si, así como lo leíste, con el atributo pattern (en español: patrón) de un input, podemos especificar una expresión regular (regex) para el valor del campo contra la que verificar. Por lo tanto este atributo nos permite implementar validaciones para cosas tan variadas como fechas, emails, códigos de productos o lo que se nos ocurra. Y es tan simple como suena: incluir una expresión regular en un atributo de HTML5:

1
2
3
4
5
6
7
<form onsubmit="alert('Fecha ingresada.');return false;">
   <input type="text" required=""
     pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}"
     name="pattern_fecha" id="pattern_fecha"
     placeholder="Ingrese una fecha" />
   <input type="submit" value="Ingresar" />
</form>

Si estás familiarizado con las expresiones regulares, sabrás que este patrón: [0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01]) acepta solo fechas en el siguiente formato: DD.MM.AAAA.

Chrome, Firefox, Opera 9.5+, Safari 5+, Internet Explorer 10 son los únicos navegadores que soportan el atributo pattern por el momento.

Al probar esto en los distintos navegadores podrás ver que al ingresar un valor que no cumple con la expresión regular que está en el atributo pattern, el navegador nos mostrará un mensaje (nativo del navegador) diciendo que el campo es inválido y no disparará el evento submit del formulario hasta que el campo sea corregido. Todo esto sin una sola línea de javascript



Como cambiar el color de fondo del placeholder de un imput con HTML5

El atributo placeholder introducido en HTML5 sin dudas nos provee un forma muy fácil de mostrar el texto previo de un input, y es demasiado fácil de recordar como usarlo, sin embargo, no es tan fácil de recordar cómo aplicarle estilos.

El siguiente código CSS funciona en todos los navegadores, pero necesitamos una propiedad para cada uno:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #ccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #ccc;
   opacity: 1 /* esto es porque Firefox le reduce la opacidad por defecto */;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #ccc;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #ccc;
}

Guardar un Objeto o Array en LocalStorage

La API de localStorage es muy utilizada debido a su simpleza para guardar datos del lado del cliente. Persistir un objeto o array de javascript en el navegador es fácil…

La clave está en que localStorage solos nos permite guardar un string. Así que primero debemos convertir nuestro objeto a string con JSON.stringify() como en el siguiente ejemplo:

1
2
3
4
var miObjeto = { 'marcado': 'html5', 'estilo': 'css3', 'comportamiento': 'js' };

// Guardo el objeto como un string
localStorage.setItem('datos', JSON.stringify(miObjeto));

A la hora de obtener lo guardado anteriormente hacemos lo opuesto, usando JSON.parse():

1
2
3
4
// Obtengo el string previamente salvado y luego 
var guardado = localStorage.getItem('datos');

console.log('objetoObtenido: ', JSON.parse(guardado));

Manera muy simple de persistir datos en el lado del cliente gracias a HTML5.


Crear boton personalizados con HTML5 y CSS3

Los botones son una parte fundamental de nuestra web. Aparte de ser un simple lugar donde puedes hacer clic, los botones deben saber llamar la atención al usuario sin ser excesivamente molestos, se deben entender y tener un acabado profesional. Para ello me propongo a enseñaros como crear botones personalizados con HTML5 y CSS3. Se trata de una tarea sencilla, de nivel muy básico, práctica y muy flexible, que nos permitirá personalizar 100% nuestro botón.

Pasos para crear nuestro boton

El código HTML5

Para crear nuestros botones personalizados lo primero que debemos hacer es teclear el código HTML5, el cual deberemos colocarlo allí donde queramos ubicar nuestro botón. Para ello podríamos utilizar dos elementos, el elemento <a> , o el elemento <input> ambos tipos son personalizables, pero el elemento <input> trae consigo estilos por defecto que pueden alterar nuestro botón en los diferentes navegadores y dispositivos. Por eso, para hacerlo más sencillo, utilizaremos el elemento <a> el cual también tiene estilo por defecto pero resulta mucho más manejable.

El código CSS3

Ahora que ya hemos creado nuestro botón, toca personalizar su aspecto a través del código CSS3. Este código debes pegarlo entre las etiquetas <head> y </head> de tu documento HTML. También puedes utilizar hojas css. Debemos tener en cuenta que deberemos crear la clase con el nombre que le hemos asignado al atributo class en nuestro código HTML5.

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
  .boton_personalizado{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: #1883ba;
    border-radius: 6px;
    border: 2px solid #0016b0;
  }
</style>

El hover

Ahora falta definir qué ocurre cuando pasamos el ratón por encima de nuestro botón, esto lo haremos asignándole un hover a nuestra clase. Por lo que nuestro código CSS3 quedaría así.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type="text/css">
  .boton_personalizado{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: #1883ba;
    border-radius: 6px;
    border: 2px solid #0016b0;
  }
  .boton_personalizado:hover{
    color: #1883ba;
    background-color: #ffffff;
  }
</style>