Cristalab

---

Validar formularios de forma nativa con HTML5 Posted: 29 Mar 2012 01:46 AM PDT La validación de formularios del lado del cliente ha sido un problema que siempre se ha solucionado con la utilización de Javascript, ya sea con código propio o de terceros. Esto es debido a que en el pasado era siquiera impensable el tener una solución con HTML puro, pero con la llegada del conjunto de especificaciones y tecnologías que componen el actual HTML5, ahora esto es posible, aunque con la clara desventaja de que todavía no es soportado por la mayoría de los navegadores y quienes los soportan tienen su forma particular de ejecutarse, sin embargo es importante tenerlo presente, ya que en el futuro próximo será de una utilidad invaluable. [nota:a1ae15b1f7] para los ejemplos expuestos en este artículo, se ha utilizado Google Chrome versión 18 por ser el navegador que más funcionalidad de HTML5 ha implementado a la fecha.[/nota:a1ae15b1f7] El atributo «required» Al incluir el atributo required dentro de un elemento <input>, automáticamente se hace obligatorio su llenado y al ser un atributo tipo booleano, solo se requiere su presencia sin más. Código : <input type="text" name="nombre" required> En el momento en que se encuentra un error de validación se ejecuta la acción por defecto del navegador, normalmente aparece un pequeño globo emergente (tooltip) conteniendo un texto de advertencia. Añadiendo el atributo title en la etiqueta <input>, se puede extender la información mostrada. Código : <input type="text" name="nombre" title="Se necesita un nombre" required> El atributo «pattern» y los tipos de <input> Como se mencionó anteriormente, con required sólo se necesita de cualquier valor en el elemento <input> para ser válido, pero utilizando el atributo pattern en conjunto, se logra que se verifique no solo la presencia de un valor, sino que este valor debe contener un formato, una longitud o un tipo de dato especifico. Esto último se logra definiendo un patrón con expresiones regulares. Código : <input type="text" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" name="email" required> Con el patrón anterior se valida un formato valido de correo electrónico (mail@example.com), pero en la práctica esto resulta un tanto absurdo, ya que definiendo un tipo email en la etiqueta <input>, el navegador por sí mismo hace la validación del tipo en cuestión. Código : <input type="email" name="email" required> Es lo mismo con el resto de los tipos de <input>: search, url, tel, email, password, date pickers, number, checkbox, radio y file. Por lo tanto el potencial del atributo pattern recae en ser más específico en el tipo de formato y longitud que se requiere. Por ejemplo, supongamos que se necesita que el usuario ingrese una dirección valida de IPV4, lo hacemos de la siguiente manera: Código : <input type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" title="0.0.0.0" name="ipv4"> Cuatro bloques de uno a tres dígitos divididos por puntos, es la notación punto-decimal de una dirección válida de IPV4. La pseudo clase :invalid de CSS3 Básicamente la pseudo clase :invalid representa cualquier campo inválido que sea resultado de una validación (valga la redundancia), lo opuesto ocurre con su contraparte: :valid. Esto facilita que si un campo contiene un valor inválido pueda adoptar una apariencia acorde, de esta forma ayudando al usuario a identificar los campos que necesitan ser verificados. Código :   input:invalid {     border: 1px solid red;   }   /* Estilo por defecto */   input:valid {     border: 1px solid green;   } Un aspecto que es importante resaltar, es que por defecto todos los campos son válidos – como es de esperarse –, pero si un campo es requerido, entonces ocurre lo contrario, este por defecto será invalidado. Código :   /* Estilo por defecto */   input:required:invalid {     border: 1px solid red;   }   input:required:valid {     border: 1px solid green;   } Conclusión Esta es una más de las grandes bondades que trae consigo HTML5, sin embargo la validación de formularios de manera nativa aun se encuentra en una etapa temprana de desarrollo, especialmente con lo que respecta a la manera de notificar la existencia de un campo no válido, ya que no existen etiquetas CSS para personalizar el estilo del tooltip, al menos en caso de Google Chrome. Escrito por Jonathan Javier { Twitter: @jonasanx } Referencias W3C: The required attribute W3C: The pattern attribute HTML5 <input> required Attribute Mozilla Developer Network: :invalid Expresión regular

Leer JSON con Javascript y PHP Posted: 08 Mar 2012 12:03 AM PST En estos días he estado trabajando con la API de Vimeo para un par de proyectos, pero me encontré en la necesidad de tener que hacer el llamado directamente a un archivo JSON y entonces me puse a investigar qué es eso de JSON. [nota:d876898b21] Anexo ejemplos directos del parseo de JSON con el ejemplo de la API de Vimeo, sin embargo, este tutorial no está enfocado a revisar el uso de la API.[/nota:d876898b21] ¿Qué es JSON? Es el acrónimo de JavaScript Object Notation. Si conoces XML, se podría decir que es una alternativa a un sistema de envío y recepción de datos. El "parseo" o "parsear" es leer o administrar una base de datos o conjunto de texto. La estructura o sintaxis es de la siguiente manera: Código : { "objeto" : valor } El siguiente ejemplo de estructura está tomado de la API de Vimeo algo recortada: Código : [{   "title":"titulo",   "description":"Lorem Ipsum Dolor sit Amet", }] Parseo con Javascript La manera más fácil de pasear un JSON con javascript es a través de jQuery + Ajax con la función $.getJSON que es equivalente a: Código : $.ajax({   url: url,   dataType: 'json',   data: data,   success: callback }); El cual se utiliza de la siguiente manera: Código : $.getJSON( url [, data] [, success(data, textStatus, jqXHR)] ) El siguiente código lo apliqué para extraer título y descripción de una petición a la API de Vimeo Código : $.getJSON('http://www.vimeo.com/api/v2/video/31894179.json?callback=?', {format: "json"}, function(data) { $("h1").html(data[0].title); $("p").html(data[0].description); }); Básicamente estoy accediendo con la función $.getJSON a la url que me proporciona la documentación de la API de Vimeo para obtener un JSON (aquí), defino qué formato estoy usando, y ejecuto una función a partir del mismo. Dentro de ésta, con la función .html, "extraigo" el campo del título y descripción y se los "pongo" a la etiqueta <h1></h1> y <p></p>. Existe el selector data[0] porque solamente estoy obteniendo la primera parte del JSON, si tuviera por ejemplo varios videos, le agregaría 0, 1, 2 respectivamente para seleccionar las otras partes. Parseo con PHP Para realizar el parseo antes que nada necesitamos saber si la estructura JSON está dentro del archivo a ejecutar o afuera. Si está afuera puedes utilizar cURL para leer el archivo. Necesitamos también de una función llamada json_decode, esta sirve para convertir un string JSON a una variable que funciona en PHP. El siguiente ejemplo sirvió para llamar título y descripción de un video utilizando la API de Vimeo. Código : //Url donde esta nuestro JSON $req = 'http://vimeo.com/api/oembed.json?url=http://vimeo.com/31894179'; //Iniciamos cURL junto con la URL $cVimeo = curl_init($req); //Agregamos opciones necesarias para leer curl_setopt($cVimeo,CURLOPT_RETURNTRANSFER, TRUE); // Capturamos la URL $gVimeo = curl_exec($cVimeo); //Descodificamos para leer $getVimeo = json_decode($gVimeo,true); //Asociamos los campos del JSON a variables $titulo = $getVimeo['title']; $descripcion = $getVimeo['description']; $thumbnail = $getVimeo['thumbnail_url']; Cada vez que llamamos a la variable $getVimeo estamos leyendo el archivo JSON, como ya está descodificado gracias a la función json_decode es posible buscar los campos "title" y "description". Ya después es cuestión de llamarlas o agregarlas a nuestro HTML con un echo o lo que quieras. Ya sabes la base y con un ejemplo bastante simple. El parseo es igual en cualquier otro JSON, quizás solo varíe en el número de secciones que tenga el JSON. Google es tu mejor amigo. Cualquier duda quedo a sus órdenes, puedes dejarme un comentario o preguntarme vía twitter @kinduff

You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610