HTML Foundation – Cómo hacer validaciones

Hoy os presentaré el cómo hacer validaciones de formularios con Foundation así como las más típicas reglas que puedes utilizar.

Primeramente, y como sabréis, en la página en la que estáis maquetando con Foundation lo primero que tendréis que tener es incluido el jquery así como la versión de foundation con la que queréis trabajar:


<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
	$(document).foundation();
</script>

Para hacer una validación, simplemente tendréis que seguir estos pasos en el formulario:

  • Añadir la etiqueta data-abide.
  • Introducir cada campo dentro de un div diferente.
  • Poner en el input en cuestión los valores que se quieran (en este ejemplo veréis un required y un pattern que indican que es obligatorio rellenarlo y cómo hay que hacerlo correctawente).
  • Crear un elemento con la clase error que sólo se mostrará en el caso de que no cumpla la validación.
<div>
	<label>Email</label>
	<input id="email" name="email" pattern="email" required type="text" />
	<small class="error">El email es un campo requerido</small>
</div>

Tipos de patrones pueden ser: alpha, alpha_numeric, integer, number, email, url, date, time,…
Otra opción también muy útil es la de indicar que un valor tiene que ser similar a otro mediante el data-equalto, por ejemplo:

<div>
	<label>Password</label>
	<input id="password" name="password" required type="password" />
	<small class="error">El password es un campo requerido</small>
</div>
<div>
	<label>Repetir Password</label>
	<input id="repetir_password" name="repetir_password" required data-equalto="password" type="password" />
	<small class="error">Es un campo requerido y tiene que ser similar a password</small>
</div>

Podéis ver más información en este link (Tened en cuenta que aquí se indica que es necesario hacer una llamada a abide pero para todo lo que hemos hecho no ha sido necesario).

Problema con el localStorage y modo incógnito en Safari

En el día de hoy hemos tenido un problema en una aplicación web ya que no nos permitía acceder a ella. Cuando intentábamos entrar introduciendo login y password se quedaba pensando indefinidamente sin darnos ningún tipo de error. La incidencia era debida a que estábamos en safari con el modo incógnito activado y en nuestra web estábamos haciendo un localStorage, cosa que no se puede hacer.

El error más concreto que obtuvimos es:

“QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.”

¿Cómo solucionarlo?

La forma rápida: Quita el modo incógnito.

La forma más laboriosa: Inserta un try catch para controlar la excepción. Un ejemplo es:

function isLocalStorageNameSupported(){
 var testKey = 'test', storage = window.sessionStorage;
 try{
  storage.setItem(testKey, '1');
  storage.removeItem(testKey);
  return localStorageName in win && win[localStorageName];
 }catch (error){
  return false;
 }
}

Día de hackaton (Edición 1, Marzo 2015)

Hoy tengo día libre, y ¿qué significa eso? Pues que lo voy a dedicar a realizar una idea que me lleva rondando la cabeza y que me hará la vida más fácil.

La idea en cuestión es simple, necesito una herramienta que, después de seleccionar varias recetas con el número de personas para los cuales quiero hacerlo, que me diga qué tengo que comprar en el supermercado juntando todos los ingredientes.

Esta idea tiene dos objetivos:

  • Sacar dicha idea y facilitarme la vida cada vez que voy al supermercado, en donde no se qué comprar y tardo muchísimo.
  • Aprender tecnologías que no utilizo, como pueden ser backbone.js, foundation,…

¿Qué pasos he de seguir para llevar a cabo mi idea?

  1. Primero necesito saber las pantallas principales que tendrá mi aplicación. En mi caso son fundamentalmente 2: La de la lista de recetas y la del listado de ingredientes a comprar. Como podéis ver deliberadamente me he dejado tanto la parte de gestión de usuarios como de introducción de recetas,… Al final lo que buscamos es el producto mínimo viable, y a partir de ahí ya iremos añadiendo funcionalidades si realmente tenemos tiempo. (9:00-9:15)
  2. Base de datos: Utilizaré mysql. Escribo en una hoja de papel o mediante el MySQL Workbench (gratuito) un esquema simple de cómo irá y de las relaciones de cada una de las tablas. Escribir un registro en cada tabla para hacer pruebas. (9:15-9:45)
  3. Instalar el framework MVC que utilizaré. He intentado utilizar symfony, pero no tengo una versión 5.4 o posterior de php, como lo cual me decantaré por yii (ya lo utilizo diariamente, con lo cual no me pillará de nuevas). Primeramente habrá que instalarlo, después pasarle el generador automático de modelos. (9:45-10:15)
  4. Empezar a crear la pantallas básica, sin nada gráfico (10:15-11:15)
  5. Hacer el API en sí. En principio tendré 4 funciones(que después por supuesto aumentarán): Función de tomar recetas y de buscar por un texto recetas (GET), recibiendo las recetas que queremos llevar a cabo juntar todos sus ingredientes y guardar el listado de elementos (POST), tomar el listado de ingredientes totales (GET). Aquí es en donde me encuentro con el primer desafío, entender qué es backbone js, ver cómo hacer peticiones get mediante este framework y ver como almacenar igualmente datos (11:15-14:15).

Resultado

Al final he conseguido tener las páginas y el funcionamiento hecho, aunque sin diseño alguno y todo de forma muy muy básica. Es una aplicación que tendré que mejorar muchísimo y que tendrá dos partes principales en una primera etapa, una de ellas es la de introducir más recetas y otra de ellas es la de darle un mínimo diseño.

Conforme pasen los días y lo mejore un poco pondré capturas de pantalla (ahora mismo me daría vergüenza hacerlo.

Problemas que me he encontrado

Backbone js: Me lo imaginaba más sencillo e intuitivo. Es cierto que se pueden hacer cosas interesantes, pero en el momento en que te sales un poco del standar (lo único que intentaba hacer era una vista de una colección) se complica un poco.

Apps nativas vs apps basadas en web vs apps hibridas

Como todos sabréis, actualmente hay tres tipos de aplicaciones móviles: Nativas, basadas en web e híbridas.

apps_hibridwebnative

  • Una aplicación nativa es aquella que está escrita en java (en el caso de android) o en Objetive-C (en el caso de iOS). Como características decir que tiene acceso completo a las funcionalidades de hardware del dispotivo y sólo puede descargarse desde las app stores.
  • Una aplicación para web son webs que utilizan toolkits especiales de javascript (como jQuery Mobile y Sencha Touch) y css personalizados para hacer que los sitios parezcan y funcionen como apps nativas. Sin embargo, sólo pueden ser accedidas a través de navegador, no pueden ser descargadas desde la app store y no tienen acceso a las funciones de hardware del móvil/tablet.
  • Las aplicaciones híbridas están en el medio de las dos anteriores. Básicamente son webs que están embebidas dentro de código nativo. Lo bueno es que esto te permite utilizar funciones que utilicen características propias del dispositivo (como vibración, cámara, …), y todo ello conociendo únicamente HTML y JavaScript. Un ejemplo de una herramienta que sirve para el embebido de esta web en la aplicación es phonegap. El principal problema de esta forma de hacer las apps es que nunca serán tan buenas como las aplicaciones nativas (más lentas y menos usables, por mucho que se piense lo contrario).

Aquí te dejo un gráfico interesante con información de ello:

app_nativevshybrid

También os dejo una imagen que me ha encantado y que refleja como ninguna a qué problemas nos enfrentamos al escoger una u otra:

Hibrido Vs Nativo

¿Cual será la próxima que escogerás para hacer una aplicación para móviles?

Como hacer un placeholder que funcione en todos los navegadores

Hoy me he encontrado con el problema de que estaba intentando hacer un placeholder de inputs y, evidentemente, sólo me funcionaba en aquellos navegadores que soportaran mínimamente

Primeramente utilicé este truco (es perfecto hasta que intentamos hacerlo en elementos input de tipo password)

  1. Descargarme el jquery e incluirlo en la página.
  2. Incluir lo que aparece en la siguiente página.

El código es:

<input type="text" placeholder="Fill me …">

 

Y posteriormente el jquery a añadir:

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

 

Pero al final utilicé esta otra opción, que resultó perfecta tanto para los input text como para los password.

  1. Descargar el jquery e incluirlo en la página.
  2. Descargar el siguiente archivo javascript (puedes encontrarlo actualizado y con su documentación en la siguiente página).

El código a insertar es:

<input type="text" name="name" placeholder="e.g. Jesus Perez">

Y el jquery a incluir es:
$('input, textarea').placeholder();

Espero que os haya servido!!

Descarga de Página de registro con captcha incorporado en PHP

Hoy os traigo una descarga muy interesante, y es que muchas veces he necesitado una página de registro con captcha incorporado, y en todas las ocasiones me ha tocado hacerla de 0.

Básicamente será un registro de 4 campos que tendrán que ser rellenos, y un captcha que podrá ser refrescado y que el usuario tendrá que rellenar. Sólo se realizará el registro completo en el caso de estar rellenos todos los campos (son campos requeridos), el login sea único y el texto del captcha es el correcto.

Para instalarlo necesitas seguir los siguiente pasos:
1 – Crear tu tabla:
CREATE TABLE IF NOT EXISTS `users` (
`id_user` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) NOT NULL,
`login` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id_user`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

2 – Descomprimir el siguiente zip donde se quieras.

3 – Modificar en el archivo index.php la línea conectar(‘HOST’, ‘USUARIOBBDD’, ‘PASSWORDBBDD’, ‘BBDD’); y modificarlo por los valores en cuestión.

4 – Comprobar que todo funciona!! (que debería!)

Aquí os dejo también unas capturas de pantalla y de nuevo, el link al archivo descargable.

RegisterFormWithCaptcha

RegisterFormWithCaptchaOk

He utilizado para este post dos elementos:

Código para pasar lo que haya en un canvas a una imagen

Este es el javascript que permitirá mostrar en la página el screenshot del canvas cada vez que le damos a un botón con id #guardarSketch.

$('#guardarSketch').click(function(){
	var canvas = document.getElementById("sketch");

	var img = new Image();
	img.src = canvas.toDataURL();

	$('#imagenesAGuardar').append(img);
});

Muy importante el hecho de crear una nueva imagen, puesto que sino te mostrará la misma imagen muchas veces.