HTML: Formularios - Parte 2

En esta entrada continuaremos con la programación de formularios en HTML.

Select

Con <select> podemos definir en formularios listas desplegables y listas de selección múltiple. Entre sus atributos tenemos:

• name: Al igual que todos los controles que forman un formulario, <select> tiene este atributo. Es el nombre de la lista que se está definiendo.
• multiple: Con el atributo "multiple" estamos indicando que se pueden seleccionar varios elementos de la lista.

Option

Con <option> vamos a definir los elementos que componen nuestras listas. Esta es una etiqueta que tiene etiqueta de cierre. Su forma básica es la siguiente: 

<option value="valor">

     texto

</option>

• value: En este atributo se especifica el valor que será enviado cuando el usuario haya seleccionado este elemento. Cuando se despliegue la lista se mostrará el "texto" especificado entre las etiquetas de apertura y cierre.

Optgroup

Con <optgroup> podemos crear agrupadores de opciones. De esta forma le damos una mejor presentación a nuestra lista. Los elementos agrupadores se muestran en la lista; pero no son seleccionables.

<optgroup label="texto"

     <option value="valor">texto</option>
     <option value="valor">texto</option>

</optgroup>

• label: El "texto" indicado en este atributo es el que será mostrado en la lista desplegable, al principio de todos los elementos que agrupa.

Textarea.

Para poder agregar texto con más de una linea disponemos de la etiqueta <textarea>.

• name: Es el nombre del campo tipo <textarea>.
• cols: Permite indicar el ancho del control <textarea>. Por defecto es de 20 caracteres. 
• rows: Con "rows" especificamos el alto de nuestro control. Por defecto es de "2" filas.

Ejemplo:

<textarea name="observaciones" cols="40" rows="5"</textarea>

Label

La etiqueta <label> permite asociar un texto a un control, de tal manera que cuando el usuario haga click sobre este texto, el foco lo reciba su control asociado.

• for: Mediante este atributo se asocian el control especificado y el texto entre las etiquetas de apertura y cierre. 

<label for="nombres">Nombres: </label>

<input type="text" name="nombres" id="nombres" />

<br />

Estamos viendo que existe el atributo "id" que puede ser utilizado con las diferentes etiquetas que nos permiten definir controles del formulario. Este atributo define un identificador para el control, mediante el cual se puede utilizar para identificar el control. En este caso permite asociar la etiqueta <label> con la etiqueta <input>.

Fieldset

Permite agrupar distintos controles que tienen alguna relación entre sí. Por ejmplo podemos agrupar con un <fieldset> los datos personales y con otro <fieldset> los datos correspondientes a la educación de la persona. Dibuja un marco entre los componentes que estan entre las etiquetas <fieldset>....</fieldset>.

<fieldset>

     <input type="text" name="nombres" />

     <input type="text" name="apellidos" />

</fieldset>

Legend

Con <legend> podemos asignar un título a los elementos agrupados con <fieldset>. Estas etiquetas deben ir dentro de las etiquetas <fieldset></fieldset>

<fieldset><legend>Datos Personales</legend>

     <input type="text" name="nombres" />

     <input type="text" name="apellidos" />

</fieldset>

Consejos

• Usar <textarea> en lugar de <input type="text" /> cuando lo esperado es un texto de varias líneas.
• Cuando hayan más de dos opciones usar <select> en lugar de <input type="radio" ... />.
• Usar <label> para mejorar la usabilidad de los controles <input>.

Para mayor información puede consultar el siguiente vídeo:

HTML: Formularios - Parte 1

Un formulario web (en inglés web form) permite al usuario introducir datos para que sean enviados a un servidor web para que sean procesados.

Usamos formularios cuando ingresamos nuestros datos al registrarnos en un sitio web, al realizar búsquedas con un buscador, al realizar compras electrónicas. En fin los formularios están presente en prácticamente en todos los sitios web.

La intención de usar un formulario es proporcionar una forma en que nuestros usuarios puedan ingresar datos a nuestro sitio web. Los formularios actúan tanto del lado cliente (cuando el usuario ingresa los datos), como del lado servidor (cuando los datos son enviados para ser procesados o almacenados).

Etiquetas para formularios

Form

Es la etiqueta que contiene el formulario. Todo lo que se desea enviar al servidor debe estar entre las etiquetas <form> y </form>. Atributos:

• action: Es un atributo requerido en la etiqueta <form>. En "action" podemos especificar la "url" o ruta destino que va a procesar el formulario. Se puede utulizar una ruta absoluta o una ruta relativa.
• method: Es un atributo opcional. Especifica el método de envío del formulario. Puede tener dos opciones que son "GET" que es la opción por defecto de no especificarla y "POST". 
• GET: Cuando especificamos "GET", los datos son enviados al servidor unas parejas del tipo "nombre = valor" que se agregan a la url y son visibles. Esta forma de envío está limitada, cuyo límite depende del navegador usado o del sistema operativo del servidor. Usamos GET cuando la información no es importante y en formularios básicos o sencillos.
• POST: De esta forma, los datos no son visibles y se envían de una forma más segura. Por otro lado no hay limitaciones en el tamaño del envío, por lo que inclusive pueden ser enviados archivos. 
• accept-charset: Para especificar una lista de juegos de caracteres separados por comas. Los más usados son UTF-8 e ISO-8859-1 (alfabeto latino).
• enctype: Especifica el tipo de codificación.
• application/x-www-form-urlencoded: los espacios son reemplazados con signos más ("+") y los caracteres especiales son convertidos a valores HEX. Este es el valor por defecto.
• multipart/form-data: no se aplica ninguna codificación. Este valor es necesario para la subida de archivos.
• text/plain: solo los espacios son reemplazados por signos más ("+").

Input

Con <Input> podemos definir los diferentes campos de entrada de datos con los que va a contar nuestro formulario. La etiqueta <input> no tiene etiqueta de cierre. Por lo que su formato será de la siguiente forma: 

<input ....   />

Atributos de <Input>:

• name: Es el nombre del campo que va a recibir los datos ingresados por el usuario. Para campos independientes debe ser único dentro del formulario. En el caso de campos tipo "checkbox" o "radio", todos los componentes del mismo grupo deben compartir el mismo valor de "name".
• type: Define el tipo de entrada de datos. Puede tomar los siguientes valores:
• text: define un control para ingresar texto en una sola línea. Si se omite el atributo "type", por defecto se asume que el control es de tipo "text".
• checkbox: define un control de tipo casilla de verificación.
• radio: define un control de tipo casilla de opciones.
• file: muestra un botón que abrirá una ventana para que el usuario seleccione la ubicación y el archivo que se desea enviar. Es importante acotar que si deseamos permitir el envío de archivos a través de un formulario el atributo "enctype" de la etiqueta "form" debe ser iniciado a "multipart/form-data".
• password: define un control para entrada de contraseñas. Lo que se ingrese se muestra enmascarado. Todos los atributos que aplican para los campos tipo "text" funcionan con campos de este tipo.
• hidden: define un control oculto. En este tipo de controles el usuario no puede ingresar datos. Es útil para mantener valores de estado o ciertos valores útiles durante la ejecución del formulario. En los campos de este tipo sólo son útiles los atributos "name" y "value".
• button: mostrará un botón para realizar alguna acción. La utilidad de este control la podemos apreciar con el uso de JavaScript. para definir eventos intrusivos (código dentro de la página html) o no-intrusivos (ejecución de funciones en librerías externas).
• submit: por defecto mostrará un botón con el texto "Enviar" (depende del idioma del equipo cliente) que al seleccionarlo, ejecutará el envío del formulario según lo indicado en los atributos "action" y "method" de la etiqueta "form".
• image: mostrará un botón con una imagen que al seleccionarla, ejecutará el envío del formulario según el método indicado. Se desaconseja su uso y se recomienda sea sustituido por elementos de CSS.
• reset: mostrará un botón especial que al seleccionarlo, borrando los datos que haya ingresado el usuario; reiniciará el formulario.
• disabled: Este atributo deshabilita el campo. El campo se muestra; pero no puede ser utilizado ni modificado por el usuario. Para cumplir con estándares se debe colocar lo siguiente: disabled = "disabled".
• readonly: Parecido a "disabled". Con "readonly" indicamos que el contenido del campo se puede copiar para ser pegado en otro lugar.>
• value: Dependiendo del campo o control puede tener varios significados. 
• Para campos tipo "text" o "password", se almacena el valor que el campo tiene en algún momento y será desplegado en pantalla.
• Para botones tipo "checkbox" o "radio" especifica el valor que tendrá cuando éste haya sido seleccionado. Por defecto es "on".
• Para los botones, submit y reset, se utiliza para indicar el texto que será mostrado en el botón.
• Para campos tipo "hidden", "value" va a contener un valor que será enviado al servidor; pero que no se desea que el usuario vea.
• maxlength: Funciona con los campos tipo "text". En este atributo se puede indicar la cantidad máxima de caracteres que el usuario puede ingresar en el control. El valor debe ser un número entero.
• size: Es el tamaño del rectángulo o área de entrada de datos que se despliega en la pantalla. Por defecto es 20 caracteres. Se desaconseja se uso para ser reemplazado por las hojas de estilos (CSS).
• checked: Este atributo aplica para campos tipo "checkbox" y "radio". Indica que el campo está seleccionado. Para los controles que incluyan varias opciones del tipo "checkbox" cada una de ellas es independiente de la otra; de tal manera que todas pueden estar seleccionadas, algunas o ninguna. En el caso de controles tipo "radio" sólo una de las opciones del grupo puede ser seleccionada. Al seleccionar una se desmarcará la opción que tenía la marca.
• accept: Este atributo funciona para controles tipo "file" y determina el tipo de archivo que se permite seleccionar. No está implementado en todos los navegadores.
• alt: Se utiliza para botones tipo "image" para indicar un texto alternativo.
• alt: Se utiliza para botones tipo "image" para indicar la ruta de la imagen.

Consejos

• Todas los campos que desees enviar al servidor deben estar entre las etiquetas <form></form>. Los que no estén se desplegarán y funcionarán; pero no serán enviados.
• En una definición de campo "input" siempre colocar el atributo "type". Ejemplo: <input type="text" ...>
• Siempre colocar un botón "submit" para enviar el formulario. Ejemplo: <input type="submit" ...>
• Separar estructura y contenidos de los estilos. Todo lo relacionado con la parte visual del control dejarlo en la definición de CSS. Esto facilitará el mantenimiento de la página web.

Para mayor información y ejemplos consulte el siguiente video.

HTML5: Computación en la nube

Computación en la nube es un paradigma que está muy de moda a la hora de publicar esta entrada. Realmente no es nada nuevo ya que, desde la aparición de internet, se trata de ofrecer servicios a través de la web.

Poco a poco y  a medido que la web ha ido evolucionando se han ido incorporando a la web servicios cada vez más complejos orientados a cubrir una amplia gama de necesidades.

Ya no solo se habla de ofrecer un servicio específico, como la de gestionar nuestras cuentas bancarias mediante la web, sino la de trasladar toda nuestra infraestructura, computadores, servidores y nuestro más preciado activo, la información o datos, a la web.

Es decir, computación en la nube, implica que tanto las aplicaciones que usamos y los datos residen en servidores de la web y ya no necesitamos instalar en nuestro computador, por ejemplo, las herramientas de office (Word, Excel, Powerpoint, etc); sino que ingresas a un sitio web donde ofrecen el acceso a dichas herramientas y un espacio donde puedes almacenar tus archivos.

Muchos de los sitios que conocemos utilizan para implementar la computación en la nube la tecnología DHTML, que está conformada por una combinación de HTML, CSS, JavaScript y DOM, entre otras. Pero como siempre ha ocurrido desde su creación, la web sigue evolucionando. Aparece luego AJAX que permite que las aplicaciones sean servidas por el servidor y ejecutadas en el navegador cliente del usuario sin necesidad de recargar la página, mejorando la interactividad, velocidad y usabilidad de estas aplicaciones manteniendo una comunicación asíncrona en segundo plano con el servidor.

Para impulsar e implementar nuevas características de la computación en la nube (cloud computing) se ha desarrollado HTML5, que es la última versión al momento de HTML.

Entre las ventajas que tenemos de adoptar el paradigma de computación en la nube, tenemos:

• Movilidad total. Acceso a las aplicaciones y datos desde cualquier sitio donde tengas un computador con un navegador conectado a internet.
• Siempre actualizados. Ya no es nuestra tarea, la de estar atentos de las últimas versiones de las aplicaciones que utilizamos, ni de instalarlas y realizar conversiones a nuestros archivos. El proveedor del servicio se encarga de actualizar las aplicaciones a la última versión, así como las correspondientes conversiones que se requieran para que nuestros archivos y datos sean compatibles con dichas versiones. 
• Independencia de Hardware y Software. Ya no estamos atados a utilizar un determinado equipo o dispositivo con un sistema operativo específico. Podemos utilizar computadoras, tablets, teléfonos celulares inteligentes, etc. para acceder a nuestras aplicaciones y datos mediante el navegador conectado a internet.
• Mínima inversión. Con la computación en la nube no necesitamos comprar un computador. Desaparece el concepto de computador personal en el que teníamos nuestras aplicaciones y datos. Si nuestro equipo tenía alguna falla corríamos el riesgo de perder nuestra información. Ahora ya no tenemos que preocuparnos por fallas o daños, ya que cualquier computador o dispositivo con un navegador y conectado a internet es nuestro computador personal. Si se daña, nada pasa a nuestras aplicaciones y datos que están en la nube.
• Bien respaldados. Tampoco tenemos que preocuparnos por realizar respaldos o copias de seguridad de nuestras aplicaciones y datos. Nuestro proveedor se encarga de ello.
• Totalmente inmunes. Al estar nuestras aplicaciones en la nube, es tarea de nuestro proveedor mantener su plataforma protegida de virus y otras amenazas que atenten contra las aplicaciones y datos.

Como en todo, nada es totalmente perfecto. Así como hay muchas ventajas, el principal obstáculo a la hora de decidir a adoptar este paradigma, es la seguridad e integridad de nuestros datos. Las empresas proveedoras de servicios bajo este paradigma ofrecen servicios con mecanismos de protección muy sofisticados; pero siempre existe la posibilidad de romper estas barreras de seguridad.

En ocasiones estos sistemas fallaron y miles de usuarios se vieron afectados en la pérdida de su información. Tal es el caso de Facebook que en el año 2010 unos 150.000 usuarios perdieron los datos de sus contactos y fotos que habían publicado en su cuenta. También en Octubre del 2010, se publicó que alguien con pocos conocimientos era posible hackear una cuenta de Facebook. También en Febrero de 2011, miles de usuarios se vieron afectados al perder sus correos en sus cuentas GMail; servicio ofrecido por Google.

Un aspecto de suma importancia al considerar si trasladarnos a este paradigma es evaluar la disponibilidad del servicio de internet que se presta en nuestra zona de operaciones, ya que para empresas físicamente establecidas es necesaria tener una alta disponibilidad del servicio, cercana al 99.99% y más. Para contextos personales o pequeños grupos de trabajo que no tienen un asentamiento físico esto no es tan crítico, ya que con movilizarnos a otra zona que haya conectividad habremos resuelto nuestro problema y podemos acceder a nuestros datos mediante las aplicaciones que residen en la nube.

Para mayor información puede consultar el siguiente video.

Cómo se publica un sitio web en Internet (3): cliente FTP online

En este apartado se mostrará un ejemplo de cómo subir nuestro sitio web a un servicio de alojamiento usando el servicio ftp on line ofrecido el proveedor.

Se procederá a publicar el sitio web en Hostinger, quienes ofrecen entre sus herramientas de administración el servicio on line de ftp net2ftp.

Aquí la interfaz nos muestra el contenido del servidor de producción (hosting) y las diferentes funciones que se ofrecen para subir o descargar archivos, manipular directorios y archivos y hasta asignar permisos.

En el vídeo se muestra un ejemplo en vivo. Vamos a verlo.

Cómo se publica un sitio web en Internet (2): cliente FTP

En el siguiente vídeo se muestra un ejemplo del uso del cliente FTP FileZilla para copiar nuestro sitio web del servidor de desarrollo al servidor de producción.

El servidor de producción en este caso es el servicio de alojamiento Hostinger, el cual es gratuito y podemos usar para realizar pruebas.

Primero debemos ubicar el nombre del servidor ftp y los datos de usuario y contraseña, que vamos a usar para realizar la conexión al servidor de producción. Estos datos los suministra la empresa que ofrece el servicio de alojamiento.

Una vez efectuada con éxito la conexión, vamos a ver en nuestra pantalla cuatro paneles. Dos de estos corresponden a la estructura de directorio y contenido del servidor de desarrollo (local) y dos que corresponden al servidor de producción (hosting).

Podemos realizar el copiado, seleccionando los archivos a copiar y luego seleccionando la opción de "Subir archivos" o arrastrándolos desde el panel del servidor de desarrollo (local) hasta el panel del servidor de producción (hosting).

Muy importante es ubicar la carpeta que va a contener el sitio web, ya que si lo copiamos en otra ubicación, el sitio no se va a publicar y nadie tendrá acceso a él. En el ejemplo el sitio se copiará dentro de la carpeta "public_html".

Otro aspecto importante, es que dependiendo del servicio de hosting, la primera página de nuestro sitio web podría tener un nombre específico. En Hostinger, la primera página a mostrar debe ser "index.html". Si no se llama así, el servicio mostrará la página por defecto.

Para una explicación en vivo ver el siguiente video:

Cómo se publica un sitio web en Internet (1)

Crear un sitio web tiene un propósito. Ya sea que el sitio vaya a ser solo informativo, de gestión, e-commerce, etc., la intención es ofrecer un servicio. Para ello el sitio web debe estar en internet.

Cuando comenzamos su desarrollo, si el sitio web es pequeño, usamos generalmente nuestro computador personal. Para desarrollos mas complejos, donde participan varios profesionales donde cada integrante del grupo tiene una función, se utiliza un servidor en el cual todos tienen acceso para compartir información y ver, manipular o modificar los componentes del sitio. En ambos casos, el computador donde está alojado el sitio web durante su construcción o desarrollo, lo llamamos así, servidor de desarrollo.

El servidor de desarrollo generalmente no está configurado para mostrar páginas en internet. Para los desarrollos pequeños en un computador personal no requiere mayor configuración que tener las herramientas o software necesario para crearlo. Un servidor de desarrollo si requiere de cierta configuración para que solo tengan acceso los integrantes del equipo de desarrollo (permisología), configuración de intranet (tcp/ip), dns, etc. En el servidor de desarrollo hacemos todo lo necesario para crear nuestro sitio web.

Finalmente, cuando ya estamos satisfechos con nuestro trabajo y se cumplan los requerimientos funcionales del cliente procedemos a su publicación en la web. El computador que aloja nuestro sitio y que sí está conectado a internet para servir a las peticiones de los usuarios, se le denomina servidor de producción.

Podríamos configurar un servidor de producción propio. Esto implica que debemos tener amplios conocimientos sobre la configuración y mantenimiento de servidores. Debemos manejar temas de seguridad, sistemas operativos para servidores (Windows Server/Linux), recuperación ante caidas, etc. Como ya hemos visto existen empresas dedicadas a ofrecer los servicios de alojamiento (hosting) de sitios web, por lo que lo más recomendable es la contratación de uno de estos servicios que se ofrecen.

Ya vemos entonces que al menos tenemos dos equipos en los cuales está alojado nuestro sitio web. El servidor de desarrollo, donde se construye y el servidor de producción donde se ejecuta y está disponible en la web para el uso de nuestros usuarios.

Para publicarlo en la web, necesitamos copiar nuestro sitio web del servidor de desarrollo al servidor de producción. Para realizar esto podemos utilizar el protocolo FTP.

Requerimos tener instalado en nuestro servidor de desarrollo un cliente FTP, que nos permita conectarnos al servidor de producción y realizar el copiado del sitio web. Existen varias alternativas en clientes FTP. Windows tiene un cliente ftp por línea de comandos, que lo puedes usar conociendo los comandos de FTP. También existen otras opciones más sencillas. Para windows tenemos winscp que es gratuito y smartftp que es de pago y con 30 días de prueba sin costo. Como servicio en la web, podemos usar net2ftp, presente en muchas empresas de alojamiento.

Para mayor información puedes consultar el siguiente video: