Images Proyecto terminado

Mayo 24 2017

Logramos terminar el proyecto en 5 horas y unos min.

Nuestra parte del proyecto era utilizar principalmente el atributo pattern para validar 2 cajas de texto, algo sencillo.

Lo principal para hacer eso es que entre los corchetes cuadrados se coloca los caracteres que se permiten, y en los corchetes normales se colocan de cuantos a cuantos caracteres se permiten insertar.

Images PROYECTO

mayo 17 de 2017


Empezamos el proyecto con toda!!!!

Han pasado por ahora 3 grupos, el de dfd, el de pseudocódigo y el de estructura.

La siguiente clase se continúa el proyecto. Mi base es el grupo 5 en el cual tenemos que validar el programa con html5, principalmente con el atributo pattern.

Images Día E

mayo 10 2017

No hay clase por el dia E

Images Input

Datalist:

Vamos a repasar esta etiqueta datalist de HTML5, es uno de las nuevos input, etiquetas  y atributos del form en HTML5 para formularios. Ver también atributo list HTML5.

Este nuevo elemento agrupa varios valores predefinidos que facilitan el autocompletado de un campo tipo input. De manera que el usuario según vaya escribiendo el navegador abre una lista desplegable con las diferentes opciones a seleccionar.

Lo que anteriormente veníamos haciendo con plugins en jQuery ahora lo podemos hacer fácilmente con esta nueva etiqueta de los formularios en HTML5.

En ningún momento se fuerza al usuario a elegir el valor del datalist, simplemente le sugiere ciertos valores.

Sintaxis de datalist HTML5

Voy a poneros la sintaxis de datalist extraída de su web oficial para que veáis de un vistazo su nomenclatura:

XHTML

1 2 3 4 5 6 7 8 9

<input list="listacolores">   <datalist id="listacolores">   <option value="Azul">   <option value="Rojo">   <option value="Amarillo">   <option value="Negro">   <option value="Blanco"> </datalist>

En el ejemplo de sintaxis vemos como primero declaramos un input con el nombre de la lista en el atributo ‘list’. Después ponemos la nueva etiqueta datalist con los diferentes valores de la lista y la relacionamos con el input mediante id ‘listacolores’.

Es decir, el atributo ‘list‘ del input y el ‘id’ del datalist tienen que coincidir, de lo contrario no se relacionarían y no saldría la lista de valores sugeridos.

Keygen:

Esta etiqueta sirve para enviar claves en el autentificado web. Al enviarse el formulario se crean 2 claves, una pública que se envía al servidor y que posteriormente se usará para seguir auntentificándonos en el sistema, y otra privada que se almacena localmente en el navegador.

Sintaxis de HTML5 keygen

Su sintaxis es muy sencilla, aquí os pongo su código:

XHTML

1	<keygen name="clave">

Como podéis ver, es una etiqueta a la que se le asigna un nombre.

Ejemplo de keygen HTML5

XHTML

1 2 3 4 5 6

<form action="formu.php" method="post">     User: <input type="text" name="usuario">     <!-- añadimos el campo de typo keygen -->     Pass: <keygen name="clave">     <input type="submit" value="Enviar"> </form>

En el siguiente ejemplo de keygen HTML5 veremos el valor de la clave pública enviada. Y dependiendo del navegador el tipo de cifrado que se puede elegir. Una vez pulsado el botón de envío, veréis como sale un recuadro calculando la clave.

Os pongo el código PHP para obtener la clave pública enviada por POST.

PHP

1 2 3 4

<?php if ($_POST['clave']) echo "clave pública enviada: " .$_POST['clave']; ?>

Atributos importantes de Keygen

1. keytype: Tipo de clave enviada, por defecto es RSA. Otros tipos de clave son: EC y DSA.
2. challenge: Especifica si la clave cambia tras el envío del form.
3. form: Id del form al que pertenece la clave.

Images PROYECTO

3 de mayo de 2017

Se ponen las pautas para el proyecto.

Información valdación html5:

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

<input title="Se necesita un nombre" type="text" name="nombre" required/>

El atributo «pattern» y los tipos de <input>

Con se menciono anteriormente, con required solo 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.

<input type="text" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" name="email" required/>

<input type="email" name="email" required/> para email

La pseudo clase: invalid de CSS3

Básicamente la pseudo clase: invalid representa cualquier campo invalido 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.

1 2 3 4 5 6 7 8 9 10 11 12 13

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 validos – como es de esperarse –, pero si un campo es requerido, entonces ocurre lo contrario, este por defecto será inválido.

1 2 3 4 5 6 7 8 9 10 11 12 13

/* Estilo por defecto */ input:required:invalid { border: 1px solid red; } input:required:valid { border: 1px solid green; } pattern="[A-Za-z]" para sólo letras {3} para que tenga ese numero de caracteres exactos, o sea si no hay 3 caracteres no funciona, si hay mas de 3 tampoco y si hay menos tampoco. El 3 se remplaza por el número que se quiera ".{6,}" para que haya ese numero de caracteres o más, es decir, sólo funciona si hay ese numero de caracteres o más la validación va dentro de un <form action="/action_page.php"> </form> 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> 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> 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> 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> Con este sencillo código hemos puesto un ejemplo de formulario que simplemente no realizará el envío de datos hasta que todas las condiciones no se cumplan. Obviamente todos estos campos deberán de encontrarse dentro de un formulario HTML para funcionar. Podrás encontrar más ejemplos de expresiones regulares en esta URL: http://html5pattern.com/ aunque Internet está plagada de páginas y ejemplos de expresiones regulares. Sin embargo no nos vamos a detener aquí. Vamos a comprobar cómo podemos utilizar CSS para advertir al usuario si el contenido del campo es válido o no.