HTML5.- Construyendo Formularios en WebMatrix Parte 3


Continuando con los post sobre todo lo que nos trae HTML5 para la construcción de formularios hay algo muy importante que aclarar y para ir elaborando un resumen de lo aprendido; que el aplicar los respectivos type para el control a emplear nos otorgara:

Mayor semántica: Al identificar el type empleado nos queda claro el uso de dicho control.

image

Con esto a simple vista podemos definir que se va a solicitar un texto que podría ser un nombre del usuario seguido de su teléfono y dirección de correo electrónico.

Soporte a dispositivos táctiles: Al acceder a nuestros formularios al posicionar el foco en cada control veremos como nuestro teclado móvil se adapta para el ingreso de lo datos que fue diseñado ese tipo de input.

localhost android

Para los interesados aquí estamos emulando la vista de la página en un Samguns Galaxy S con la extensión Browser Stack de WebMatrix

Ayuda a el autorelleno: Gracias al emplear correctamente los types veremos como el navegador rellena los campos automáticamente ya que al tener reconocido el tipo de entrada que se solicita el mismo proporciona los datos requeridos en caso de que estos hallan sido guardados previamente.

Reglas de validación: Cuando se ingresa los datos el navegador lo comprueba con el tipo de input que se esta empleando y restringe el envió de la información del lado del cliente evitando que se envíen datos con parámetros no afines al tipo de input empleado.

image

Otro punto importante es para el caso de los navegadores que no reconozcan algunos de los <input type=” ”> para ese caso es recomendado trabajar con framework de detección como modernizr.

Ahora si luego de aclarado estos conceptos vamos a dar un último vistazo a otro grupo de <input type=””> con este grupo finalizaremos este articulo sin más recordarle que si probablemente se me este escapando alguno no dudes en compartirlo con un coment Guiño

<input type=»search»>

image

Este tipo de entrada se debe usar receptar una cadena para realizar consultas, en que nos beneficia esto ahora cuando empieces a digitar contenido en la casilla el navegador si encuentra en nuestro historial ingresos previos nos dará sugerencias de autocompletado.

image

<input type=»number»>

image

Este tipo de entrada debe usarse para trabajar con números, en que nos beneficia esto ahora cuando empieces a digitar contenido en la casilla el navegador en el caso de teléfonos móviles desplegará el teclado numérico. Y ahora te preguntaras en que se diferencia su uso con el <input type=”tel”> la respuesta es simple en el valor semántico que le otorga a la etiqueta.

image

Además de esto se le suma que al nivel de navegadores de escritorio solo el Google Chrome soporta al 100% la etiqueta ya que muestra los respectivos controles para incrementar y decrementar los dígitos.

image

Aparte el propósito de esto es que con el atributo step se puede fijar de cuando a cuenta va a ser el incremento o decremento.

image

<input type=»color»>

image

Este tipo de entrada debe usarse para trabajar en casos de requerir un selector de color. Vale la pena acotar que esto solo es de momento soportado por Google Chrome.

image

<input type=»tel»>

image

Vuelta con este tipo de control al visitar desde un dispositivo móvil y realizar touch en el control veremos como se despliega en el teclado numérico en vez del acostumbrado teclado general.

<input type=»url»>

image

Con este tipo de controles al intentar enviar una cadena que no tenga el formato de una URL enviara una alerta y evitara el envió de los datos no validos.

<input type=»date»>

image

Con este tipo de control nos permite trabajar de manera sencilla con un datepicker sin algún tipo de control o programación avanzada; vale la pena rescatar que por el momento es soportado por Google Chrome.

<input type=»time»> image

Al implementar este control nos permite formatear lo que se ingresa con el formato de hora y aparecen los controles para incrementar o disminuir los dígitos.

<input type=»password»>

image

Al implementar este control ocultara por defecto todo lo ingresado (soporta Firefox, Google Chrome, Internet Explorer 9). Además de que el navegador nos brindara la opción de guardar la contraseña al enviar los datos (soporta Firefox), ya que gracias a el aporte que le hace las etiquetas HTML5 al valor semántico el navegador detecta y se comporta de acuerdo al tipo de control con el que se esta trabajando.

image

Atributo maxlength

image
Con maxlength controlamos la longitud máxima del campo. Vale la pena rescatar que como esta y otras implementaciones expuestas con anterioridad antes se las cubría estas validaciones del lado del cliente con javascript pero con la llegado de HTML5 esto ya es un peso menos, siempre y cuando nos preocupemos con manejar la detección del soporte con modernizr probando siempre en todos los navegadores y dispositivos con WebMatrix, además de no olvidar siempre de realizar la respectiva validación del lado del servidor sea el lenguaje que estés implementando siempre debe estar validar de ambos frentes.

Eso es todo por hoy muchach@s recuerden visitar el pensum del curso y de realizar sus consultas en formspring o déjanos tu comentario Wink

No olvides seguir en twitter a:

Para estar al día con las entradas de la comunidad Avanet.

WebMatrix.- Plantilla HTML5 Boilerplate


Si amigos como lo están leyendo ahora WebMatrix soporta la plantilla para front end más popular de la web “Boilerplate”.

image

 

Bueno y ahora te preguntaras que me ayuda Boilerplate para que sirve ???

Esta plantilla basada en HTML5 nos ayuda a construir aplicaciones o sitios web rápidos, robustos y adaptables. Ahora con esto puedes comenzar tú proyecto web combinando el conocimiento y esfuerzo de tus mejores años de desarrollador, todo esto te lo brinda un paquete pequeño.

 

Ahorre tiempo. Cree con confianza.

 

Que tiene Boilerplate, que lo hace tan especial?

 

image

Analytics, Iconos, y Más

Una plantilla HTML amigable para dispositivos móviles, código optimizado para Google Analytics, iconos de marcado de posición de dispositivos táctiles, y documentos adicionales que cubre docenas de consejos y trucos.

 

Normalize.css y Helpers

Incluye Normalize.css v1.0.x que hace que los navegadores muestren los elementos más coherente y de acuerdo con los estándares modernos. Este precisamente se centra sólo en los estilos que necesitan ser normalizados. Además de esto tenemos otros estilos populares que son base del diseño, también tenemos los helpers, media queries, y estilos de impresión.

 

jQuery y Modernizr

Recibe las últimas versiones reducidas de las mejores librerías: JQuery ( vía Google’s CDN, con retorno local (local fallback) y Modernizr que es es una biblioteca JavaScript que detecta características HTML5 y CSS3  en el navegador del cliente.

 

Alto Rendimiento

Viene con una configuración de Apache que nos ayuda a lograr un rendimiento excelente al sitio. De forma independiente se mantienen otras configuraciones de servidor, un node build script y un ant build script.

 

A continuación les dejo un video del sitio oficial de Boilerplate que nos muestra su potencial y un screenshot de lo que nos da esta plantilla en Webmatrix.

 

Una introducción de HTML5 Boilerplate

 

image

 

Y quien usa HTML5 Boilerplate?

Google, Microsoft, NASA, Nike, Barack Obama, Mercedes-Benz, ITV News, BAE Systems, Creative Commons, Australia Post, Entertainment Weekly, Racing Green, y muchos más.

 

Eso es todo por hoy muchach@s recuerden realizar sus consultas en formspring o déjanos tu comentario Wink

Y no olvides de descargar:

Y de unirte a:

WEBMATRIX USER GROUP

HTML5 y otras yerbas (feedback del WebCast)


Buenas a todos los Geeks,

En este articulo les comparto el material del livemeeting presentado por la comunidad de Avanet en compañía de mi colega Oscar Rendon, el pasado sábado 21 de Abriel del 2012. Durante la sesión tratamos HTML5 y todo el ecosistema que lo rodea como: CSS3, Canvas, Modernizr, Geolocalización, etc Guiño.

Link :

La herramienta a emplear para las demos por mi parte es WebMatrix y los invito a conocer un poco más del producto aquí y a comenzar la carrera de WebMatrix dentro de este gran recurso que Microsoft nos comparte MVA (Microsoft Virtual Academy).

Y si desean trabajar a la par y compartir sus experiencias con una comunidad los invito a formar parte de:

WebMatrix User Group

  • Recuerden que puedes realizar tus consultas en formspring o déjanos tu comentario Wink

Mail: peter.conchar@fcmf.ug.edu.ec

No olvides seguir en twitter a:

@ORendon

@PeterConchaR

@Avanet

@SoreyGarcia

Para estar al día con las Curso de Introducción de HTML5 desde cero en WebMatrix.