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.

Phonegap, ejemplos de código y posibilidades

El phonegap es una herramienta muy interesante a la hora de crear tus propias aplicaciones móviles sin necesidad de saber los lenguajes de programación de android (java) ni de iOs (Objetive-c). Mediante html, css y js podrás tener una aplicación multiplataforma (te ahorrarás muchas líneas de código).

Las APIS que posee el Apache Cordova (phonegap) y con las cuales se pueden jugar:

  • Acelerómetro – Con él se puede acceder al acelerómetro del dispositivo y guardar las modificaciones del movimiento relacionadas con la orientación.
  • Cámara – Con esta librería se puede acceder a la cámara y a la galería de imágenes de un dispositivo. (Utilizada en F2L, aunque había que insertar plugins)
  • Capturador de ficheros media – Grabar ficheros de audio, capturar imágenes o grabar vídeos.
  • Compás – Se puede obtener la dirección a la cual el dispositivo está apuntando.
  • Conexión – Se puede ver el tipo de conexión que tenemos (None, Ethernet, WiFi,Cell_2G,….).
  • Contactos – Se puede trabajar con la base de datos de contactos del dispositivo.
  • Dispositivo – Se puede obtener el modelo, la versión de phonegap, el nombre del sistema operativo, el identificador único y la versión del sistema operativo.
  • Eventos – Se puede ver cuando Cordova está cargado, cuando la aplicación se pone en segundo plano, cuando se vuelve a pasar a primer plano, si está online o no, el estatus de la batería,… (Utilizada en F2L)
  • Ficheros – Se puede escribir, leer y eliminar los ficheros en el sistema de un dispositivo.
  • Geolocalización – Se puede obtener información de geolocalización de un dispositivo desde el GPS, la dirección IP, RFID, direcciones WiFi y Bluetooth Mac, e ids GSM/CDMA de móviles.
  • Globalización – Permite obtener información de la lengua preferida, el localename, convertir fechas a cadenas y viceversa, obtener la moneda, el primer día de la semana,…
  • InAppBrowser – Se pueden lanzar urls en otras instancias del navegador.  (Utilizada en F2L)
  • Media – Grabar y reproducir ficheros de audio.
  • Notificaciones – Con esta opción se puede acceder a la notificaciones visuales, de audio o de vibraciones de un dispositivo.
  • Splashscreen – Muestra y oculta la pantalla splash de aplicaciones. (Utilizada en F2L)
  • Almacenamiento – Se pueden almacenar variables en el mismo móvil y después volverlas a recuperar. (Utilizada en F2L)

Cosas a parte de esas que se pueden hacer:

  • Hacer traducciones (con ayuda por ejemplo de apis como http://mymemory.translated.net )
  • Integración con Facebook.
  • Integración con Google Maps.
  • Realizar un carrito de la compra.
  • Tener bases de datos internas.
  • Integración con Twitter
  • Utilización del canvas para HTML
  • Utilizar cualquier API que se quiera a la que se pueda acceder mediante ajax

 

Ejemplos de aplicaciones con código disponible:

 

Página con un montón de aplicaciones que han utilizado phonegap http://phonegap.com/app/, ejemplos:

 

Espero que os haya valido para algo (yo al menos tengo un lugar al que acudir para acceder a los links que he encontrado).

(Actualización Junio 2015) He encontrado una página en donde te explican paso a paso cómo hacer un gestor de ingresos y gastos, aquí os lo dejo: http://www.sitepoint.com/creating-an-expense-manager-app-with-apache-cordova/

El tinymce elimina mis etiquetas style

Hoy me he encontrado ante este problema…

Tengo una serie de datos que tienen unos estilos (<style>blablabla</style>). Sí, se que es algo muy sucio, pero los necesito porque resulta que lo que estoy tocando son plantillas para mails, y como todos sabemos, es necesario que tengan dentro del mail todos los estilos.

Y os preguntaréis donde está el problema…. y es que cuando editaba las plantillas mediante el tinymce me eliminaba todo lo que hubiera entre dichas etiquetas.

Cómo se soluciona:

Simplemente añadiendo dentro del tinyMCE.init la línea

valid_children : "+body[style]"

El problema tenía lugar como se explica aquí debido a que las etiquetas style no son válidas en XHML, y por ello el TinyMCE deshabilita la posibilidad de ponerlos.

Aquí podéis ver otra url con información.