Clase No. 32- Noviembre 4

• Acumulativo IV Período, en base al manual No. 47 de HTML5.

Clase No. 31- Octubre 28

• Refuerzo, solución de dudas, resolución de ejercicios con dificultad.

Clase No. 30- Octubre 21

• Recuperación de indicadores:

         - Defina geek:

         Geek es aquella persona fascinada con la tecnología y la informática. 

         - Defina fputs:
       Línea o comando que se utiliza para trabajar archivos planos. Todo lo que se escribe en esta línea se guardará en un archivo plano y se ubicará en la parte inferior del mismo.
                

      

Información adicional

Formularios HTML y lo nuevo en HTML5

En este artículo trataremos sobre los formularios en HTML y las nuevas etiquetas y características agregadas en HTML5 a los formularios, su funcionamiento, atributos y como usarlo correctamente.

En este Articulo hablaremos sobre los formularios html ¿como funciona un formulario? y las nuevas funcionalidades de los formularios en HTML5. Un formulario es una parte muy importante para la web, tanto por parte del usuario como por parte de los administradores de la web.

Creación de un formulario

La estructura HTML del formulario es bastante simple, se defineen un bloque de código encerrado por las etiquetas:
Dentro de las etiquetas form se incluyen todas las etiquetas o campos que conforman el formulario.
Cada formulario tiene asociada una accion que indica el script que va a procesar los datos introducidos en dicho formulario, para el envío de esos datos la etiqueta form tiene dos parámetros que son obligatorios: action y method.

Parámetros de la etiqueta FORM

• action: sirve para indicar la aplicación o script que procesará los datos introducidos en los campos del formulario.
• method: este atributo indica el modo de transmisión de los datos. El modo GET utiliza la dirección URL para pasar los valores introducidos en los campos del formulario, da como resultado una url paresida a esto (www.domini.com/loguin.php?Apellido=lopez&Nombre=Carlos). El modo POST envía los datos como parte de la entrada estándar(no visible en la url).
• name: Identifica el nombre del formulario, este nombre facilita identificar el formulario desde el escript.
• target: Indica la ventana de destino diferente a la del envió de los datos.
• accept-charset: Espesifica el el juego de caracteres que el servidor utiliza para gestionar los datos del formulario.
• auto-complete: puede ser ON u OFF. Para desactivar el activado y desactivado del formulario.

Los atributos anteriores son los específicos para un formulario, naturalmente también pueden utilizar los atributos comunes para casi todas las etiquetas html(class, id, dir, style etc).

Etiquetas de formulario

Las etiquetas además de ser de distintos tipos, tienen sus atributos propios que se añaden a los comunes de todas las etiquetas.

Las etiquetas de control de formulario son las siguientes:

Etiqueta INPUT

Esta es la etiqueta más utilizada y también la que presenta más opciones. El atributo TYPE le permite indicar la clase de entrada de datos. El valor predeterminado es TEXT y representa una linea de entrada de datos como esta: 

Listado de tipos de datos aceptados en la etiqueta INPUT antes de HTML5

• TEXT
• CHECKBOX
• RESET
• RADIO
• PASSWORD

• BOTTON
• FILE
• HIDDEN
• IMAGE
• SUBMIT

Atributos de la etiqueta input

El principal atributo de la etiqueta INPUT es TYPE, ya que es el que le indica el tipo de datos que debe recibir. A continuación mostraremos las larga lista de atributos que se le pueden agregar a la etiqueta INPUT.

• TYPE:Mencionado anteriormente, es el que indica el tipo de control de datos que se ha elegido.
• SRC:Indica el origen de los datos.
• STEP:Permite establecer la cantidad de valores posibles dentro de un rango.
• VALUE:Indica el valor que devuelve el control.
• REQUIERED:(HTML5) Valor booleano que nos indica que es una información obligatoria.
• PLACEHOLDER:(HTML5) Texto que sirve de información o guia al usuario y desaparece al pulsar dentro del campo, anteriormente este efecto se creaba con javaScript
• AUTOCOMPLETE: Indica se se activa (on)o se desactiva (off) el auto completado de la entrada de datos.
• ALT:Se utiliza cuando el tipo es una imagen y no se puede cargar en la interfaz del usuario, se muestra este texto alternativo.
• CHECKED: Para indicar si el elemento está seleccionado por defecto, solo se utiliza en algunos tipos.
• DISABLED: Es un valor booleano que indica que el elemento está desactivado, con lo cual no admite entrada de datos.
• READONLY: Valor booleano que indica que el campo no se puede modificar, solo lectura.
• FORMENCTYPE: Indica el modo de envío de los datos.
• FORMACTION: Es la dirección Url que se utiliza al activar el elemento.
• FORMNOVALIDATE: Es un valor boobleano que indica que el formulario no se valida antes de enviarse.
• FORMTARGET: Ventana del destino del formulario.
• HEIGHT: Altura del campo en cuestión.
• WIDTH: Anchura del campo en cuestión.
• SIZE: Indica la cantidad de caracteres que se pueden introducir en el campo.
• MAX: Valor máximo que se puede entrar en el elemento de datos.
• MIN: Valor Mínimo que se puede entrar en el elemento de datos.
• MAXLENGTH: Longitud máxima de la entrada de datos.
• list: Es un identificador de una lista que se define con DATALIST
• MULTIPLE: Valor booleano que indica que se permite la selección de valores múltiples.
• NAME: Nombre que identifica al campo de datos.
• PATTERN: Expresión regular que se utiliza para validar entradas de datos. Este atributo permite hacer validaciones muy complejas y utilizado correctamente puede ahorrarse muchas lineas de código.

Tipos de entrada de datos (tipos de campos de formulario)

Input Type:Text (ver ejemplo)

El tipo texto representa una linea de texto, como en casi todos los campos de formulario su valor se puede inicializar utilizando el atributo value. Este campo tiene la peculiaridad que si se omite el type, se asume Text.

Podemos ver un ejemplo con el siguiente código.

Input Type:Password (ver ejemplo)

Representa una entrada de datos de texto que se visualizan asteriscos pero al enviarse se envían los datos reales, el datos introducido en el campo se asigna al atributo value.

Input Type:Hidden

Es un dato que se mantiene oculto a la vista pero que se pasa al servidor junto con el resto de los campos del formulario. Es un campo adecuado para pasar información de una página a otra y que se puede utilizar en los script como un dato más. Al ser un dato oculto, el usuario no puede ni ver ni modificar el dato. El dato se le asigna al atributo value.

Input Type:Checkbox (ver ejemplo)

Es una dato que es representado al usuario por una casilla de verificación; por lo tanto, sólo puede tener dos valores: seleccionado o no seleccionado. Si se utiliza el atributo checket, el campo se muestra seleccionado por defecto.

Input Type:Radio(ver ejemplo)

Es un dato que le presenta al usuario con botones de opción; una variable asignada a un grupo de botones en el que solo uno puede estar seleccionado. Si se utiliza el atributo checked, el campo aparece seleccionado por defecto, para informarle a HTML que todos los botones forman parte de un grupo de opciones, estos comparten el atributo name.

Input Type:SUBMIT

Este tipo ya lo estamos usando desde el primer ejemplo, este tipo de dato es representado por un botón que al ser pulsado enviar los datos recogidos por el formulario al que este asociado, en este caso el atributo value se utiliza para poner el texto dentro del botón.

Input Type:RESET

Es un dato que se representa por un botón que al ser pulsado reinicia los campos del formulario con los valores predeterminados. El atributo value se utiliza como texto del botón.

Input Type:IMAGE (Ver Ejemplo)

Este atributo ejerce la misma función del input sutmit, con la diferencia de que este atributo es representado por una imagen, la imagen a mostrar es llamada por el atributo src. Al hacer clic en la imagen se enviar el formulario.

Input type:File (Ver Ejemplo)

Este atributo permite enviar archivos al servidor utilizando el protocolo HTTML mediante el método POST. En el navegador se muestra un botón examinar o seleccionar para que podamos elegir el archivo que se requiere enviar.

Nuevos tipos de entrada de datos en formularios HTML5

En HTML5 se han incluido nuevos tipos de entradas de datos para los formularios,algunos de estos nuevos tipo de entrada tienen la capacidad de comprobar si el valor introducido coincide con su tipo de dato lo que nos ayuda bastante a la hora de solucionar la validación de los datos que el usuario introduce.

Con el uso de estas nuevas características en los formulario HTML5 nos evitamos tener que crear script para validar los datos del lado del cliente, en esta parte del articulo tratare de explicar brevemente estos tipos de entrada que nos trae HTML5, aquí un listado de los nuevos tipos de entrada de datos que nos trae HTML5.

• tel
• url
• search
• email
• datetime
• date

• month
• week
• time
• datetime-local
• number
• range
• color

Input type:tel (Ver Ejemplo)

Para números de telefonos utilizaremos el tipo de entrada (type=”tel”). A diferencia de los tipos url y email, el tipo tel no impone un sintaxis o patrón determinado.

Tanto las letras y los números son validos. ¿Raro verdad? Si, pero existe una buena razón para ello: La mayoría de los

países tienen diferentes tipos de números de teléfonos validos, con varias longitudes;por lo tanto, seria imposible especificar

un solo formato como estándar.

Por ejemplo: En EE.UU. +1(316)222-5555 se entiende igual que 415.222.5555

De todas forma podemos crear nosotros mismos el formato que nos interese utilizando javascript u el atributo

pattern en el formulario para especificar dicho formato, siempre avisando al usuario el formato de teléfono que debe introducir.

Puedes encontrar un lista muy interesantes de expresión regular o patrones de datos en esta web, te sirven tanto para este tipo de datos como para otros como tarjeta de crédito, códigos postales etc.

Input type:url (Ver Ejemplo)

Esta entrada de datos se utilizan para especificar una dirección web. Se muestra como un simple campo de texto normal. En muchas pantallas táctiles, el teclado se optimizará para la entrada de direcciones web, con una barra (/) y una tecla de método abreviado (.com)

Con el código anterior no puede estar seguro de que los datos introducidos en este campo realmente sean una url valida ya que solo se valida el formato general de esta; por lo tanto sss://miurl.ccc se considerara valido, auqneu sss:// no es un protocolo real y .ccc no sea un dominio real de primer nivel.

Si quieres asegurarte de que el dato introducido sea realmente una url valida, solo debemos proporcionar a los usuarios un patrón de url que debe introducir y ademas utilizar el atributo pattern para asegurarse que es correcto, podemos utilizar pattern="expresión regular" con el formato que desees validar. como he mencionado anteriormente aquí puedes encontrar expresiones regulares.

Input type:search (Ver Ejemplo)

El tipo d entrada de datos Search(type="search"),proporciana un campo de búsqueda, es muy parecido a un campo de texto normal. Muchos navegadores aplican estilos a este campo de manera coherente con el navegador o las casillas de búsqueda del sistema operativo, algunos navegadores han agregado la posibilidad de de borrar la entrada de datos con un solo clic al proporcionar un icono X una vez que se a escrito algo en el campo.

En estos momentos solo crome y safari proporcionan un botón para el borrado del campo, aunque hay poca diferencia entre usar un type=”text” o un type=”search” recomiendo utilizar cada typo de datos para lo que lo necesite, para eso se han creado y es preferible hacer las coas bien.

Dirección de correo electrónico con Input type:email (Ver Ejemplo)

El tipo email(type=”email”) como e de esperarse, se utiliza para especificar una o más direcciones de correo electrónico. Soporta el atributo booleano multiple, para permitir varias direcciones separadas por coma.

Este campo de email sigue pereciendo un campo de texto normal, almeno visualmente, sin embargo existen diferencia, si se intenta enviar el formulario y el datos introducidos no es un correo electrónico, alguno navegadores ofrecen un mensaje de error, los mensajes de error predeterminados de algunos navegadores los muestro a continuación.

Un uso muy interesante de este campo esta en los dispositivos móviles, cuando estamos escribiendo en un dispositivo móvil y pulsamos sobre este campo email, el teclado del dispositivo móvil cambia a una forma optimizada para la introducción de correos electrónicos, agregando un acceso directo para el símbolo @.

Input type:number (Ver Ejemplo)

El tipo number(input=”number”) proporciona una entrada de dato para agregar un número. Normalmente se trata de un cuadro donde se puede escribir un número o hacer clic en las flechas arriba o abajo para seleccionarlo.

Esta entrada de datos cuenta con los atributos max y min para especificar los valores mínimo y máximos permitidos, tambien puede utilizar el atributo step, este determina la cantidad a disminuir o aumentar cuando hace clic en las flechas.

Los atributos max,min y step son soportados por Opera y aquellos que trabajan con Webkit.

Input type:range(Ver Ejemplo)

Este tipo de entrada de datos nos proporciona un deslizador en aquellos navegadores que lo soportan, al igual que el tipo number es soportado por Opera y los navegadores que trabajan con WebKit.Al igual que number, permite los atributo min,max y step. La diferencia entre numbre y range, según la HTML 5 Specification, es que en el campo tipo range no es relevante obtener el el valor exacto del número. Por ejemplo para recoger datos de valoración de usuarios, que elijan entre un rango numérico(1-10).

Input type:color (Ver Ejemplo)

Este tipo de dato proporciona al usuario un selector de color, soportado por el momento por Opera, Safari y Crome, este selector devuelve un valor RGB hexadecimal, como #FFF.

Los navegadores que trabajan con WebKit soportan el tipo de entrada de datos de color y pueden indicar si es valido, pero no proporcionan todavía un selector como lo hace Opera.

Fechas y Horas en Formularios HTML5 (Ver Ejemplo)

Existen varios tipos nuevos de entrada de datos de fecha y hora, incluido date, datetime,datetime-local, month, time y wiek. Todas aseptan datos formateados de acuerdo a al estándar ISO 8601.

Input Type=”Date”:

Esto engloba la fecha(año,mes,dia) pero no la hora; Ejemplo,2008-06-22,Podemos seleccionar el año,mes y día.

month: Solo incluye el año y mes; ejemplo, 2012-10

Clase No. 29- Octubre 14

• Previo indicador práctico en parejas, con apuntes. 

Clase No. 28- Octubre 7

INVESTIGACIÓN:

• Select From: la sentencia FROM permite consultar los datos almacenados en una tabla de la base de datos. La palabra clave FROM indica que los datos serán recuperados de la tabla. La cláusula WHERE es la instrucción que permite diltrar el resultado de una sentencia SELECT. Habitualmente no se desea obtener toda la información existente en la tabla, sino que se quiere obtener sólo la información que resulte útil en ese momento. La cláusula WHERE filtra los datos antes de ser devueltos por la consulta.
• Select Into: crea una nueva tabla en el grupo de archivos predeterminados e inserta las filas resultantes de la consulta en ella.
• UPDATE: es la instrucción del lenguaje SQL que sirve para modificar los registros de una tabla. Como para el caso de DELETE, se necesita especificar por medio de WHERE cuáles son los registros en los que se quiere hacer efectivas las modificaciones. Además se tiene que especificar cuáles son los nuevos valores de los campos a actualizar. La sintaxis sería de este tipo:

            Update nombre_tabla 

            Set nombre_campo1 = valor_campo1, nombre_campo2 = valor_campo2, ...

            where condiciones_de_seleccion

• DELETE: esta instrucción permite eliminar registros de una tabla, su sintaxis es simple, puesto que solo se debe indicar qué registros se desean eliminar, mediante la cláusula WHERE.
• DROP: para eliminar una tabla de una base de datos se tiene la sentencia DROP TABLE. Con ella se quita una o varias definiciones de tabla y todos los datos, índices, desencadenadores, restricciones y especificaciones de permisos que tengan esas tablas. Las vistas o procedimientos almacenados que hagan referencia a la tabla eliminada se deben quitar explícitamente con DROP VIEW ó DROP PROCEDURE. Su sintaxis es:

           DROP TABLE [nbBaseDatos.[nbEsquema].[nbEsquema].nbTabla[,...n]][;]

• Evaluación.