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

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.

Cómo comenzar con Backbone js

backbonejsLogo
Hoy toca un minitutorial de lo que es backbone, para qué sirve y cómo hacer para instalarlo, ¡espero que os guste!

Primeramente decir que backbone es librería javascript con una interface REST hecha en JSON y que está basada en MVC (Modelo-Vista-Presentación). Es conocido tanto por ser muy ligero de ejecutar como también de tener dos dependencias, que son dos librerías de javascript: Underscore.js y Jquery.

Su función principal es la de formar parte de las aplicaciones web de una única página (single-page web applications).

Descargas para comenzar el desarrollo en backbone.js

  • Ir a la página http://backbonejs.org/ y descargarte la versión más actual que esté en producción.
  • Ir a la página http://underscorejs.org/ y descargarte la versión actual de underscore.
  • Ir a la página https://jquery.com/ y descargarte la última versión (la 1.XX soporta internet explorer 6, 7 y 8, mientras que las versiones 2.XX ya no).
  • Crear un fichero html e introducir las siguientes líneas:

<script src=”jquery-2.1.3.min.js”></script>
<script src=”underscore-min.js”></script>
<script src=”backbone-min.js”></script>

Cómo hacer un get y un post con backbone

<script>
//creamos la clase del modelo
var Usuario = Backbone.Model.extend({});
//creamos una instancia de ese modelo
var miUsuario1 = new Usuario({
nombre: “Yises”
});
//asignamos un valor a la propiedad “url”
miUsuario1.url = “/usuarios”;
//guardo este usuario
miUsuario1.save();
//recupero datos de un usuario
miUsuario1.fetch();
</script>

Esto al ejecutarlo nos dará lo siguiente si visualizamos la consola:

Consola del Backbone post y getComo podéis ver por una parte hemos intentado hacer un post (mediante el save) y por otra un get (mediante el fetch) de una forma muy fácil.

Cómo utilizar los eventos de backbone

Una de las posibilidades que tiene backbone es que, a cualquier objeto javascript se le pueden extender (gracias a underscore) todos y cada uno de los eventos de backbone, de la siguiente forma.

//creo un objeto cualquiera con Javascript, usando notación JSON
var objeto = {};
//extiendo ese objeto con la clase Backbone.Events
_.extend(objeto, Backbone.Events);
objeto.on(“evento_primero”, function(msg) {
alert(“Se ha desencadenado el ” + msg);
});
objeto.trigger(“evento_primero”, “evento que acabamos de crear.”);

Mediante el trigger lo que haremos será llamar al evento_primero que habíamos creado para “objeto” (y con esto tendríamos nuestro primer “Hola mundo” 😉 )

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?

Ejemplo sencillo de Scorm 1.2

Siguiendo con el tema surgido en el post anterior hoy pondré un ejemplo de cómo obtener información de un lms con scorm 1.2 y como introducir dicha información en el lms.

Como resumen inicial el scorm, al fin y al cabo, es un standard que permite la comunicación entre un lms y un curso que esté realizando un alumno. Toda la información que se quiera almacenar de dicho curso no se introducirá en el paquete scorm, sino que se pasará a dicho lms, que se encargará de su almacenamiento.

Hoy estudiaremos el recurso que nos proporcionan desde pipwerks (http://pipwerks.com/downloads/). Más concretamente el link de Javascript Scorm Api Wrapper (en caso de no poder descargarlo tenéis aquí un link).

Ahí podremos descargarnos un ejemplo típico de cómo podemos almacenar y cómo podemos recoger datos a través de este estándar scorm. Los pasos son los siguientes:

  • Cargar la librería llamada SCORM_API_wrapper.js
  • Iniciar la comunicación con el lms (pipwerks.SCORM.init()). Nos devolverá true o false dependiendo de si nos hemos conectado a dicho lms o no.
  • Cargar los datos que necesitemos, por ejemplo el lesson_Status. pipwerks.SCORM.get(“cmi.core.lesson_status”);
    Otro ejemplo de obtención de datos es el del nombre del estudiante. pipwerks.SCORM.get(“cmi.core.student_name”);
  • Guardar los datos utilizando la función set en vez de la función get que hemos visto justo antes. Ej.scorm.set(“cmi.core.lesson_status”, “completed”);
  • Desconectarnos del LMS: pipwerks.SCORM.quit();

Espero que os haya valido

Como habilitar peticiones ajax en el yii2

Este es el estado: desde un js estoy realizando una petición post a un servidor yii2 (del modelo avanzado, el que tiene backend y frontend). Y el problema que me encontraba era que siempre me daba un CSRF (). En la versión 1 de yii no había ese problema puesto que por defecto no estaba habilitado, pero ahora así.

¿Cómo se deshabilita entonces el CSRF en el yii2?
Es algo muy simple, y se puede hacer de dos formas diferentes:

Forma 1: Sólo un controlador.
Es necesario entrar en el controlador en cuestión, y en la función beforeAction simplemente pegaremos este trozo de código:

public function beforeAction($event){
    $this->enableCsrfValidation = false;
    return true;
}

 

Forma 2: Toda la aplicación
Accediendo al main.php de la aplicación añadiremos dentro de components las líneas:

'request' => [
    'enableCsrfValidation' => false,
],

Una vez realizado ya funcionará todo correctamente y el javascript en cuestión recibirá los datos que le enviemos

keydown, keypress o keyup

En resumen tendremos lo siguiente:

  • El evento keydown se activa cuando el usuario presiona una tecla. Se repite mientras el usuario mantenga la tecla presionada.
  • El evento keypress se activa justo cuando el caracter presionado está siendo insertado. Se repite mientras el usuario mantenga la tecla presionada.
  • El evento keyup se activa cuando el usuario deja de presionar una tecla. DESPUÉS que la acción por defecto de esa tecla ha sido realizada.

El problema que tenía: Había puesto un evento keydown al rellenar una caja de texto. Cuando tecleaba y comprobaba qué texto teníamos en el input no se encontraba la última letra. Al cambiarlo a keyup dejé de tener dicho problema puesto que lo que obtenía es lo que iba tecleando.

Más info en http://quirksmode.org/dom/events/keys.html

Phonegap – Frameworks que se pueden utilizar para ayudarnos en la programación

Hoy traigo un listado de varios frameworks que pueden utilizarse para la creación de apps puesto que son compatibles con phonegap.

Su uso nos facilitará en gran medida el que podamos realizar aplicaciones rápidamente, y cada uno tiene sus ventajas y sus inconvenientes, aquí os presento un resumen pequeñito de ello:

jQuery Mobile

  • Ventajas: Es el más extendido y se puede encontrar muchísimos ejemplos y aplicaciones hechas con este dispositivo.
  • Inconvenientes: Necesita jquery y puede llegar a cargar demasiado el dispositivo, no está hecho mediante MVC.
  • Ejemplos de aplicaciones: link

 

Ionic

  • Ventajas: No corre sobre jquery y ha sido diseñado pensando en la velocidad de carga.
  • Inconvenientes: Está todavía a día de hoy en alfa y no hay prácticamente aplicaciones ni ejemplos de código.
  • Ejemplos de aplicaciones: link
  • Ejemplos de código: link

 

 

Sencha Touch

  • Ventajas: Está hecho para HTML5, tiene gran cantidad de funcionalidades (podéis verlas aquí), Es más fluido que jqueryMobile y sigue la filosofía MVC, tiene muy buena documentación.
  • Inconvenientes: Es únicamente javascript, con lo cual puede ser peor para los nuevos desarrolladores. Es muy difícil debuguear los errores en el framework. El Sencha Touch IDE es una aplicación por la cual hay que pagar (no así el Sencha Touch UI).
  • Ejemplos de aplicaciones: link
  • Ejemplos de código: link

 

Kendo UI Complete

  • Inconvenientes: De pago…

 

AppGyver’s Steroids

  • Ventajas: Gratuito, rápido y fluido
  • Inconvenientes: Muy poca gente lo utiliza actualmente
  • Ejemplos de aplicaciones: link
  • Ejemplos de código: link

 

Otros frameworks que pueden usarse son…

Enyo

TopCoat

 

Espero que os haya sido útil el artículo, y es que las soluciones que hay son muchísimas, varían desde librerías orientadas a css (como topcoat) a librerías basadas en MVC con sets de controles móviles. Si os ha gustado también podéis ir a este artículo con información muy útil de phonegap y con un mayor número de ejemplos de código

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

Obtener el datetime actual a través de jquery

Con estas líneas de código lo que haré será que cuando clique en un enlace, automáticamente se me situe el datetime actual en un input, listo para ser enviado y almacenado como campo DateTime en mySql

Código HTML

<input id=”inputFecha” type=”text” name=”User[delete_date]” value=”” />
<a id=”enlace” href=”#”>Enlace</a>

 

Código Javascript utilizado

$(document).ready(function(){
$('#enlace').click(function(event){
	event.preventDefault();
	var param1 = new Date();
	var param2 = param1.getFullYear() + '-' + (param1.getMonth()+1) + '-'
 + param1.getDate() + ' ' + param1.getHours() + ':' + param1.getMinutes()
 + ':' + param1.getSeconds();
	$('#inputFecha').val(param2);
});
});

Y es que como sabéis al final el datetime en sql tiene que ser del tipo: 2013-12-11 11:25:00