ASIGNACION DE GRUPOS DE TRABAJO PROYECTO

Mayo-3-17

El dia de hoy se organizaron los grupos para el proyecto grupal 

repasar conceptos anterior periodo como algoritmos ,pseudocodigo , dfd

/* Todos los elementos de la pagina */
* { font: 1em/1.3 Arial, Helvetica, sans-serif; }
 
/* Todos los párrafos de la pagina */
p { color: #555; }
 
/* Solo los párrafos contenidos en #primero */
#primero p { color: #336699; }
 
/* Todos los enlaces la pagina */
a { color: #CC3300; }
 
/* Los elementos em contenidos en #primero */
#primero em { background: #FFFFCC; padding: .1em; }
 
/* Todos los elementos em de tipo especial en toda la pagina */
em.especial { background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
 
/* Elementos span contenidos en .normal */
.normal span { font-weight: bold; }

Validacion de formularios con HTML5

type=”number” Podemos enviar enteros, estableciendo un mínimo y un máximo como input de texto.
type=”range” Podemos enviar enteros, estableciendo un mínimo y un máximo utilizando un control gráfico.
type=”color” Nos permite seleccionar desde un “color picker” un color y enviarlo como hexadecimal.
type=”date” Nos permite seleccionar una día concreto. En los navegadores más avanzados aparece un calendario.
type=”month”, type=”week”, type=”time” Nos permiten seleccionar distintas unidades de tiempo: mes, semana o año.
type=”email” Permite enviar una dirección de email con una pobre validación a nivel de cadena.
type=”url” Permite enviar una url con una pobre validación a nivel de cadena.
type=”tel” Para el envío de números de teléfono.
type=”search” Para definir campos de búsqueda, aunque realmente se comporta como un campo de tipo texto





Validaciones Regulares

Nombre: Admitiremos nombres de cualquier nacionalidad, incluyendo nombres compuestos y la mayoría de normas de acentuación. El número de caracteres será como mínimo 3 y como máximo 32. La verdad es que es una expresión regular ciertamente compleja, pero debemos de tener en cuenta la mayoría de las posibilidades. Esto nos dejaría un código similar a esto:


<div>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,48}" required/>
</div>

Password: Por último vamos a solicitar una cadena como contraseña, la cual podrá contener letras mayúsculas, minúsculas, números y los caracteres !?-. Su tamaño: entre 8 y 12 caracteres.


<div>
<label for="pass">Contraseña</label>
<input type="password" name="pass" id="pass" pattern="[A-Za-z0-9!?-]{8,12}" required/>
</div>

Email: HTML5 ya provee de un tipo de campo email, aunque su validación es bastante pobre. Podríamos complementarla con una expresión más compleja.

<div>
<label for="correo">Correo electrónico</label>
<input type="email" name="correo" id="correo" pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required/>
</div>

Usuario: Vamos a solicitar para el usuario de acceso al servicio una cadena de letras minúsculas, con un número opcionalmente de hasta dos dígitos al final. La cadena completa tendrá entre 5 y 12 caracteres.


<div>
<label for="usuario">Usuario</label>
<input type="text" name="usuario" id="usuario" pattern="^([a-z]+[0-9]{0,2}){5,12}$" required/>
</div>

PSEUDOCLASES EN CSS PARA LA VALIDACIÓN

En CSS3 se añadieron dos pseudoclases relacionadas con la validez de los campos: :valid e :invalid que nos van a permitir dotar de mayor visibilidad a los errores y aciertos de los usuarios al completar los formularios. Por supuesto con un soporte desigual entre los distintos navegadores como verás en el siguiente gráfico:



Añadiendo un poco de CSS podemos hacer que sea un poco más vistoso el resultado válido al introducir un campo.


input:valid {
  background-color: #BBFFF0;
}




AÑADIENDO UN POCO MÁS DE ESTILO CON FONT AWESOME

Como ya he hablado en otros posts soy un gran fan de las webfonts, que nos permiten incluir diseño gráfico de forma muy sencilla, fácilmente reutilizables y con una muy baja penalización en el rendimiento web.

Nuevamente voy a volver a utilizar CSS y Font Awesome para incluir algo más vistoso en la validación. Para ello incluyo en el header la página un link a Font Awesome.


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">




A continuación incluyo el siguiente código HTML después de cada input, con el icono check que me proporciona Font Awesome.


<i class="fa fa-check check-ok"></i>




Por último solo quedan incluir las siguientes lineas CSS que me permiten por medio del selector de siblings (hermanos o parientes) mostrar el check cuando el contenido del input sea válido u ocultarlo cuando no.


.check-ok {
  color: lime;
}
 
input:invalid ~ .check-ok {
  display: none;
}
 
input:valid ~ .check-ok {
  display: inline;
}




Con esto ya tendremos completamente operativo el formulario, mostrando además un check al lado del campo en cuanto los datos introducidos sean válidos.

CONCLUSIÓN

En este artículo hemos podido ver cómo las nuevas posibilidades de añadir validación con expresiones regulares en HTML5 a los campos de formulario han mejorado bastante las posibilidades y ya no hacen tan imprescindible el uso de JavaScript en formularios pequeños. Sin embargo, ¿esto hace innecesario JavaScript? Personalmente opino que no, salvo en formularios muy sencillos como este. Paso a argumentar dicha opinión.

Se mezclan las capas de validación y presentación en nuestro código. Algo que prefiero mantener diferenciado teniendo por un lado la capa de presentación en HTML y la validación con programación Javascript.
Existen algunos tipos de validaciones que exigen programación. Funciones como por ejemplo la típica en el que se nos solicita incluir dos veces una contraseña para su cotejamiento con otro campo del formulario anterior, que sólo es posible realizar por JavaScript dado que requiere una comparación con otro valor.
Exige estar repitiendo una y otra vez los patrones en cada campo aunque sean los mismos. Algo que en las librerías de JavaScript está mucho mejor resuelto. Existen numerosas librerías, muchas de ellas basadas en jQuery, y que hacen incluso más sencilla la implementación de validación en formularios sin la necesidad de conocer expresiones regulares.
El soporte de ciertos tipos de campos no están implementados en todos los navegadores o de forma desigual. Además de que aún tenemos un importante número de usuarios que siguen funcionando con IE9… Lo de siempre: la única manera de mantener un interfaz unificado todavía sigue siendo el empleo de librerías JS como JQueryUI o validadores como JQuery Validator.


En cualquier caso aquí dejo el ejemplo y mis reflexiones por si a alguien le interesa. Estoy abierto a vuestras opiniones y comentarios.

Apellidos: Del mismo modo aceptaremos cualquier carácter independientemente de la nacionalidad, con una tamaño entre 2 y 64 caracteres.

<div>
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,64}" required/>
</div>