Nube es un término que se empezó a utilizar a partir de 2010.
La computación en la nube, conocido también como servicios en la nube, informática en la nube, nube de cómputo o nube de conceptos, (del inglés cloud computing), es un paradigma que permite ofrecer servicios de computación a través de Internet._Fuente Wikipedia
Lo que ofrece la nube es la posibilidad de ejecutar directamente en la Web, a través de un navegador, aplicaciones que en el pasado requerían la instalación previa del software en el ordenador.
DHTML (Dinamic HTML) permite crear sitios web interactivos, combinando HTML. CSS, JavaScript y DOM.
HTML5 - Computación en la nube
Gracias a HTML5 se extiende la computación en la nube. Los datos se almacenan de forma permanente en servidores de internet y se envían al navegador bajo demanda.
Ventajas de computación en la nube
- Se puede acceder a la aplicación y datos desde cualquier dispositivo con un navegador y conectado a internet.
- Las aplicaciones están siempre actualizadas y no es necesario descargarlas.
- Las aplicaciones se pueden utilizar desde cualquier ordenador con cualquier sistema operativo. Solo es necesario disponer de un navegador web.
- No son necesarias las copias de seguridad porque el proveedor de la aplicación web se encarga de ello.
- Como las aplicaciones se ejecutan en la nube no hay problema de virus u otras amenazas.
Inconvenientes de computación en la nube
- Se supone que en la nube los datos están más protegidos pero no siempre es así.
- Si no hay internet no hay acceso a datos ni a la aplicación.
Formularios
Un formulario web (en inglés web form) permite al usuario introducir datos para que sean enviados a un servidor web y sean procesados.
Cuando se realiza una búsqueda en un buscador y se introduce la palabra a buscar, se está utilizando un formulario web.
Cuando alguien se registra en un sitio web y se introducen los datos personales, se está utilizando un formulario web.
Cuando se realiza una compra y se introducen los números de tu tarjeta de crédito, se está utilizando un formulario web.
Cuando se realiza una actividad de tipo test en un curso o encuesta, se está utilizando un formulario web.
En definitiva, un formulario web es un elemento básico en cualquier sitio web.
Un formulario se compone de dos partes, la parte cliente y la parte servidor.
La parte cliente es la creación del formulario.
La parte servidor es la encargada de recibir los datos para procesarlos, como por ejemplo insertarlos en una base de datos.
Según la W3C, un formulario HTML es una sección de un documento que contiene contenido
normal, código, elementos especiales llamados controles, y rótulos para esos controles.
Los usuarios normalmente rellenan un formulario modificando sus controles, antes de enviar el
formulario a un agente para que lo procese (a un servidor web, a un servidor de correo, etc.)
Se usa para para permitir que el usuario envíe información al servidor.
normal, código, elementos especiales llamados controles, y rótulos para esos controles.
Los usuarios normalmente rellenan un formulario modificando sus controles, antes de enviar el
formulario a un agente para que lo procese (a un servidor web, a un servidor de correo, etc.)
Se usa para para permitir que el usuario envíe información al servidor.
Los formularios se envían mediante dos métodos,
- GET, el envío está limitado y la información enviada es visible. Es útil para poder guardar el resultado en marcadores o favoritos. Los datos son visibles en la web. Está limitado este envío que dependerá de cada navegador. Se usa cuando el resultado del envío sea siempre el mismo y se puedan guarda los resultado. Por ejemplo los formularios de búsquedas.
- POST, el envío no tiene limitación y los datos no son visibles en la URL, además, permite la subida de archivos. Es un método algo más seguro para el envío. Los datos no son visibles en la URL. No tienen límite en el envío y posibilita la subida de ficheros. Por ejemplo, un formulario de registro.
Etiquetas para formularios
<form></form>
Es fundamental para que el resto de elementos puedan ser enviados. No tiene representación gráfica.
Es posible utilizar elementos de formulario fuera de estas etiquetas porque serán visibles, pero no se enviará la información.
action es el único atributo necesario para la etiqueta form. Hay que indicarle una ruta URL absoluta o relativa con el destino.
method indica la forma en la que se envía la información. Acepta dos valores, GET (por defecto) y POST.
accept-charsed espera un juego de caracteres separados por comas. No se suele usar.
enctype especifica el tipo de codificación.
- Por defecto “application/xwwwformurlencoded” convertirá todos los espacios en signos....suma (+) y caracteres especiales en valores ASCII HEXadecimal
- “multipart/formdata” se utiliza cuando se suben ficheros mediante el formulario
- “text/plain” solo convierte los espacios en signos de sumar (+), pero los caracteres especiales no son convertidos.
<input...../>
Es de las màs usadas en los formularios y permiten definir la mayor parte de los controles de los formularios, como entradas de tipo texto, casillas de verificación y de opción (conocidas como radio), archivos, contraseñas, campos ocultos y botones varios.
No tiene etiqueta de cierre.
name es un atributo común en todos los campos de formulario. Espera una cadena de texto que indica el nombre que recibirá el campo al ser enviado. Si, por ejemplo, enviamos un formulario con un elemento cuyo atributo name=“email”. El servicio responsable de procesar ese formulario podrá trabajar con un campo de nombre “email”. Ej. <input name="email"/>
type es uno de los atributos más importantes ya que define en qué se convertirá el control. Pese a que no es obligatorio, es recomendable su uso.
Los controles asignados al atributo type son,
- Por defecto el atributo type es de tipo “text".
- "checkbox" indica que es una casilla de verificación.
- "radio" dibujará una casilla de opción o botón tipo radio.
- "file" muestra un botón para seleccionar un archivo, también muestra el nombre del archivo y su ruta (dependiendo del navegador".
- "password" genera un campo de texto enmascarado para contraseñas.
- “hidden” es un campo oculto para almacenar información que el usuario no vaya a introducir de forma activa. Por ejemplo, podríamos incluir el tiempo que ha tardado el usuario en rellenar el formulario.
- "button" muestra un botón.
- "submit" muestra un botón "Enviar" que al pulsar enviará el formulario.
- "image" es igual que submit pero en lugar de un botón hay una imagen (ahora se usa poco).
- "reset" es un botón que reinicia el formulario borrando todos los dsatos introducidos.
disabled deshabilita el campo para que no pueda ser utilizado. Para cumplir con estándares (argumento=“valor”), “disabled” se iguala a la cadena “disabled”.
La representación depende del navegador, pero el campo queda totalmente inutilizable.
Por ej. <input type="text" value"hola" disabled="disabled"/>
readonly funciona parecido a disabled pero permite seleccionar el texto y copiarlo.
Por ej. <input type="text" value"hola" readonly="readonly"/>. El usuario puede verlo, copiarlo pero no modificarlo. El texto lo determina el programador.
value permite completar la funcionalidad de los campos.
Atributos de tipo texto
maxlength es un atributo de tipo texto o tipo pasword, que permite limitar el número de caracteres que se insertan. Esto es útil, por ejemplo, para controlar que ciertos campos, que en base de datos están limitados, no lleguen con más datos de los que se pueden almacenar. El valor debe ser un número entero.
size también espera un número que indica el ancho del campo del input en píxeles. Como está relacionado con el estilo es preferible no usarlo.
value indica el valor que tiene el campo por defecto (el valor inicial del control). El usuario tendrá que borrarlo para insertar sus propios valores. Se realiza mediante JavaScript o nuevos componentes de HTML5.
Atributos de tipo checkbox
Insertan casillas de verificación.
name es importante que tenga el mismo nombre en todas las casillas de verificación del mismo grupo porque así el servicio destino al recibirlas sabe que esos valores corresponden al mismo campo. Esto se debe a que las casillas de verificación suelen organizarse en grupos de selección múltiple.
checked toma como valor el texto “checked” cuando indica que la casilla aparece marcada por defecto. Ej. <input type="checkbox" checked=checked/>Casa <input type="checkbox"/>Piso. Habrá dos casillas de verificación, la de Csa estará marcada y la de Piso no.
value es imprescindible en este tipo porque le indica al formulario qué valor debe enviar si la casilla está activada. Si no se declara, el formulario enviará información imposible de procesar.
Atributos de tipo radio
Se representan como casillas de opción (o botones radio). En estas casillas, a diferencia de las de verificación, solo es posible seleccionar una de las opciones.
name. Para que el control funcione correctamente es necesario que todos los elementos de cada grupo de casillas de opción, tengan el mismo valor para el atributo “name”.
Ej. <input type="radio" name="tema"/>Casa <input type="radio" name="tema"/>Piso.
checked mostrará la opciòn seleccionada por defecto. Ej. <input type="radio" checked=checked/>Casa <input type="radio"/>Piso.
value el atributo seleccionado será el que se envíe en el formulario. Ej. <input type="radio" value="Casa"/>Casa <input type="radio" value="Piso"/>Piso.
Atributos de tipo file
Permite al usuario subir o adjuntar ficheros.
accept con este atributo accept es posible especificar los tipos de archivo que aparecen para ser seleccionables pero ni está implementado por todos los navegadores mayoritarios, ni supondrá filtro alguno ya que la opción de “Todos los archivos” permitirá al usuario subir cualquier tipo de archivo.
Ej. <input type="file" accept="image/gif"/>
La representación depende del navegador, pero el campo queda totalmente inutilizable.
Por ej. <input type="text" value"hola" disabled="disabled"/>
readonly funciona parecido a disabled pero permite seleccionar el texto y copiarlo.
Por ej. <input type="text" value"hola" readonly="readonly"/>. El usuario puede verlo, copiarlo pero no modificarlo. El texto lo determina el programador.
value permite completar la funcionalidad de los campos.
Atributos de tipo texto
maxlength es un atributo de tipo texto o tipo pasword, que permite limitar el número de caracteres que se insertan. Esto es útil, por ejemplo, para controlar que ciertos campos, que en base de datos están limitados, no lleguen con más datos de los que se pueden almacenar. El valor debe ser un número entero.
size también espera un número que indica el ancho del campo del input en píxeles. Como está relacionado con el estilo es preferible no usarlo.
value indica el valor que tiene el campo por defecto (el valor inicial del control). El usuario tendrá que borrarlo para insertar sus propios valores. Se realiza mediante JavaScript o nuevos componentes de HTML5.
Atributos de tipo checkbox
Insertan casillas de verificación.
name es importante que tenga el mismo nombre en todas las casillas de verificación del mismo grupo porque así el servicio destino al recibirlas sabe que esos valores corresponden al mismo campo. Esto se debe a que las casillas de verificación suelen organizarse en grupos de selección múltiple.
checked toma como valor el texto “checked” cuando indica que la casilla aparece marcada por defecto. Ej. <input type="checkbox" checked=checked/>Casa <input type="checkbox"/>Piso. Habrá dos casillas de verificación, la de Csa estará marcada y la de Piso no.
value es imprescindible en este tipo porque le indica al formulario qué valor debe enviar si la casilla está activada. Si no se declara, el formulario enviará información imposible de procesar.
Atributos de tipo radio
Se representan como casillas de opción (o botones radio). En estas casillas, a diferencia de las de verificación, solo es posible seleccionar una de las opciones.
name. Para que el control funcione correctamente es necesario que todos los elementos de cada grupo de casillas de opción, tengan el mismo valor para el atributo “name”.
Ej. <input type="radio" name="tema"/>Casa <input type="radio" name="tema"/>Piso.
checked mostrará la opciòn seleccionada por defecto. Ej. <input type="radio" checked=checked/>Casa <input type="radio"/>Piso.
value el atributo seleccionado será el que se envíe en el formulario. Ej. <input type="radio" value="Casa"/>Casa <input type="radio" value="Piso"/>Piso.
Atributos de tipo file
Permite al usuario subir o adjuntar ficheros.
accept con este atributo accept es posible especificar los tipos de archivo que aparecen para ser seleccionables pero ni está implementado por todos los navegadores mayoritarios, ni supondrá filtro alguno ya que la opción de “Todos los archivos” permitirá al usuario subir cualquier tipo de archivo.
Ej. <input type="file" accept="image/gif"/>
Atributos de tipo password
Son campos que parecen de texto pero al escribir sobre ellos salen asteriscos o puntos. Estos campos tienen las mismas opciones que los campos de tipo texto. A veces es interesante trabajar con campos ocultos para enviar información útil pero que el usuario no insertará de forma directa.
Por ejemplo, mediante un método en Javascript, contabilizar el tiempo que tarda el usuario en rellenar el formulario e introducirlo en el campo antes de enviarlo.
Por ejemplo, mediante un método en Javascript, contabilizar el tiempo que tarda el usuario en rellenar el formulario e introducirlo en el campo antes de enviarlo.
Atributos de tipo hidden
Solo son útiles los atributos “name” y “value”, puesto que no son visibles para el usuario.
Atributos de tipo botón
Los botones son otro elemento común en los formularios. Cada vez se ven menos con el estilo del navegador por defecto porque no son muy atractivos.
Para cada botón se usa un tipo de <input/> diferente.
- Botón tipo submit dibuja un botón con el texto “Enviar” que envía el formulario al destino marcado en el atributo “action” de la etiqueta <form>. Usa los atributos "type" y "value"
- Botón tipo “reset” suele tener un texto similar a “Restablecer”. Este botón reinicia el formulario, dejándolo como si el usuario no hubiese modificado nada. Usa los atributos "type" y "value"
- Botón tipo button inserta botones con otro tipo de acciones. Usa los atributos "type" y "value". Para dotar de acción a estos botones, es necesario trabajar con eventos Javascript o mediante atributos como “onclick” (intrusivo) o haciendo uso de librerías o scripts no incrustados en HTML (no intrusivo).
- Botón tipo image se usa muy poco y consiste en usar una imagen como botón. No es aconsejable porque están a medio camino entre estructura y diseño y para eso es más aconsejable hacer uso de CSS. Usa el atributo "alt" para incluir un texto alternativo, también usa el atributo "src" para especificar la ruta a la imagen. El atributo “value” se emplea en botones en los que se especifica un texto que aparece en el botón; salvo en el caso de los botones de tipo imagen que, obviamente, no muestran texto.
<select>..</select>
Permite seleccionar elementos de una lista dentro de un formulario, generar listas desplegables y listas de selección múltiple
Tiene tantas etiquetas option como opciones nos permita la lista.
Sus atributos son,
name es fundamental para el manejo de los datos enviados por el formulario, al igual que en el caso de <input>
multiple para generar listas de selección múltiple
Esta etiqueta trabaja con dos etiquetas.
1._ Para definir cada una de las opciones de la lista, hay que usar la etiqueta <option> cuyo atributo
“value” será el valor del elemento <select> cuando se envíe el formulario.
Entre <option> y </option> incluimos el texto que queramos mostrar al usuario.
“value” será el valor del elemento <select> cuando se envíe el formulario.
Entre <option> y </option> incluimos el texto que queramos mostrar al usuario.
<option value="valor">texto</option>
Ejemplo de lista desplegable,
<select multiple="multiple">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</select>
Para seleccionar más de un valor, es necesario mantener pulsada la tecla “Ctrl” en PC o la tecla “command” en Mac antes de hacer clic sobre los elementos a seleccionar a partir del segundo.
2._También se puede usar la etiqueta <optgroup> para agrupar las opciones encerrándolas entre etiquetas <optgroup> y </optgroup> y así facilitar el uso de listas con muchos elementos.
<optgroug label="texto">
<option></option>
<option></option>
..
</optgroup>
Ejemplo con agrupaciòn de opciones,
<select>
<optgroup label="HTML5">
<option value="tables">Tablas</option>
<option value="forms">Formularios</option>
</optgroup>
<optgroup label=CSS">
<option value="colors">Colores</option>
</optgroup>
</select>
La etiqueta <optgroup> tiene un atributo “label” mediante el cual se especifica el texto que aparece en el desplegable.
Los títulos de grupo no son seleccionables
Los títulos de grupo no son seleccionables
<textarea>..</textarea>
Permite instertar grandes cantidades de texto sin usar la etiqueta <input> de tipo texto.
Sus atributos son,
name es necesario igual que en las etiquetas anteriores.
cols define la anchura, por defecto 20 (número de caracteres)---cols="20"
rows define la altura, por defecto 2.....rows="2"
Es posible usar INTRO para introducir saltos de línea
<label>..</label>
Esta etiqueta no muestra absolutamente nada en pantalla pero mejora la usabilidad y accesibilidad de los formularios asociando un texto a un control, de forma que al pulsar sobre ese texto, se activa el control asociado en la mayoría de los navegadores.
Además, relaciona el control con su propósito, fundamental para usuarios que utilicen algún tipo de ayuda a la navegación.
Además, relaciona el control con su propósito, fundamental para usuarios que utilicen algún tipo de ayuda a la navegación.
for se utiliza para relacionar un <label> con su control de formulario. Este atributo espera el identificador del control de formulario con el que se va a asociar.
En este ejemplo se puede ver cómo el atributo “for” coincide con el atributo “id” del componente de formulario con el que se quiere asociar.
<form>
<label for="html">HTML</label>
<input type="radio" name="tema" id="html" />
<br />
<label for="css">CSS</label>
<input type="radio" name="tema" id="css" />
</form>
Al pulsar sobre el texto de las etiquetas <label>, se activará la casilla asociada, mejorando la usabilidad. Es importante incluir el atributo “value” que se ha omitido para mejorar la legibilidad del código.
<fieldset>..</fieldset>
Agrupa elementos de un formulario que están relacionados entre sí.
Por ejemplo, podríamos agrupar los datos personales de un usuario en un <fieldset> y los datos bancarios en otro.
Además, este control dibuja un marco alrededor de los componentes encerrados entre <fieldset> y </fieldset>.
Por ejemplo, podríamos agrupar los datos personales de un usuario en un <fieldset> y los datos bancarios en otro.
Además, este control dibuja un marco alrededor de los componentes encerrados entre <fieldset> y </fieldset>.
1._Para facilitar la lectura del formulario, es posible dotar de un título a los componentes agrupados, escribiéndolo entre las etiquetas <legend> y </legend>.
Por supuesto, la etiqueta <legend> se debe ubicar entre <fieldset> y </fieldset>.
El siguiente ejemplo es un formulario en el que un usuario incluiría su nombre y correo electrónico y los temas que quiere cursar. Mediante la etiqueta <fieldset> se han agrupado los datos personales en un grupo, y los temas en otro. Utilizando la etiqueta <legend> se ha titulado el primer grupo como “Perfil” y el segundo como “Temas”.
<fieldset><legend>Perfil</legend>
Nombre: <input type="text"><br />
Email: <input type="text"><br />
</fieldset>
<fieldset><legend>Temas</legend>
<input type="checkbox">HTML
<input type="checkbox">CSS
</fieldset>
Consejos
- Utilizar <textarea> en lugar de <input /> de tipo texto cuando el usuario vaya a escribir cantidades de texto considerables
- Usar <select> en lugar de <input /> de tipo “radio” cuando se ofrezcan tres o más posibilidades al usuario.
- Y, en la medida de lo posible, facilitar el trabajo a los usuarios mediante la etiqueta <label>.
No hay comentarios:
Publicar un comentario