Programación Hipermedia 1

Práctica 3: HTML (2)

1. Objetivos

2. Recursos

¿Qué etiquetas existen en HTML? ¿Qué atributos existen y qué valores pueden tomar? ¿Cómo se emplean las etiquetas?

¿Cómo puedo saber que el código HTML que he escrito es correcto?

¿Cómo puedo comprobar que la página web se visualiza correctamente en diferentes navegadores?

¿Existe alguna herramienta que me pueda ayudar a escribir el código HTML?

¿Cómo puedo saber si una etiqueta de HTML5 es compatible con la mayoría de los navegadores web?

3. ¿Qué tengo que hacer?

En esta práctica tienes que diseñar e implementar un formulario que aproveche las novedades que incorpora HTML5. Aunque en un desarrollo real hay que ser muy cuidadoso a la hora de emplear las últimas novedades de una tecnología, en esta práctica puedes experimentar y puedes utilizar todo lo que ofrece HTML5, aunque no sea compatible con algunos navegadores actuales.

El formulario en una nueva opción accesible desde la parte privada del sitio web. Por tanto, también debes realizar el típico formulario de control de acceso a la parte privada de una aplicación web.

Importante: por ahora, estas páginas simplemente tienen que mostrar datos estáticos de ejemplo y no deben realizar ningún tipo de cálculo o comprobación, ya que no se dispone de una base de datos ni de la capacidad de programar las páginas web. En próximas prácticas se irá mejorando el funcionamiento de la aplicación.

En concreto, tienes que modificar o crear las páginas que se indican con un color de relleno oscuro en la Figura 1.


PIC


Figura 1: Diagrama de páginas que componen el sitio web


Página formulario control de acceso
Contiene un formulario en el que se solicita el nombre de usuario y la contraseña necesarios para acceder a la parte privada. Esta página no es necesaria si el formulario de control de acceso se incluye en la página principal. En la figura se ha omitido porque el formulario de acceso está incluido en la página principal.
Página menú usuario registrado
Contiene enlaces con las funciones que puede realizar un usuario registrado: modificar sus datos, darse de baja, visualizar sus álbumes, crear un álbum nuevo y solicitar un álbum impreso.
Página “Solicitar álbum”
Contiene un formulario con los datos necesarios para solicitar un álbum impreso.
Respuesta “Solicitar álbum”
Muestra una confirmación de que se ha registrado la solicitud de un álbum y también muestra el coste del álbum.

El formulario de solicitud de un álbum impreso contiene lo siguiente:

3.1. Nota

La parte privada de la aplicación y su integración con la parte pública la puedes plantear de varias formas. Dos formas típicas son:

Separada
La parte privada es completamente independiente de la parte pública, posee su propio menú o barra de navegación e incluso puede poseer su propio estilo visual (CSS). Evidentemente, debe existir una opción en el menú o barra de navegación que permita pasar de la parte pública a la parte privada y viceversa.
Integrada
La parte privada se integra como una opción más en el menú o barra de navegación de la parte pública. La parte privada aparece como un apartado más de la parte pública, que sólo está disponible cuando el usuario se ha identificado.

En la realización de esta práctica puedes aplicar cualquiera de estas dos estrategias o cualquiera similar.

Por ejemplo, en el gestor de contenidos WordPress se emplea una solución mixta. Cuando un usuario propietario de un blog no se ha identificado, el usuario visualiza el blog como cualquier otro usuario (Figura 2).


PIC


Figura 2: Parte pública de un blog en WordPress cuando el usuario no está identificado


Cuando el propietario se identifica (Figura 3), accede a la parte privada de WordPress (Figura 4), en la que el propietario tiene acceso a todas las opciones para administrar su blog: entradas, comentarios, apariencia, plugins, usuarios, etc. La parte privada no guarda ninguna relación con la parte pública: la estructura y la presentación de la página es totalmente diferente.


PIC


Figura 3: Formulario de identificación en WordPress



PIC


Figura 4: Parte privada de WordPress


Cuando el propietario regresa a la parte pública del blog, si sigue identificado (no ha pulsado en “Cerrar sesión”) sobre el blog se muestra una barra de herramientas que le permite acceder a ciertas opciones de administración directamente desde la parte pública (compara la Figura 2 con la Figura 5).

Estas opciones son realmente accesos rápidos o atajos a las opciones correspondientes en la parte privada del blog (Figura 6).


PIC


Figura 5: Parte pública de un blog en WordPress cuando el usuario sí que está identificado



PIC


Figura 6: Parte privada de WordPress


4. ¿Cómo lo hago?

Primero, realiza un borrador o prototipo (mockup) de la página que vas a diseñar con un montaje apropiado donde la información quede bien organizada y esté legible y fácil de encontrar. Un ejemplo podría ser el mostrado en la Figura 7.


PIC


Figura 7: Prototipo del formulario de solicitud de un álbum


Usando como plantilla alguna de las páginas HTML diseñadas en la práctica anterior, implementa el montaje del mockup. Usa las etiquetas y atributos de HTML5 necesarios.

Para el formulario, usa las etiquetas y atributos nuevos de formularios de HTML5 con el fin de contemplar las características y prestaciones que dice el enunciado. En algunos casos tendrás que tomar decisiones sobre que tipo de control necesitas para recoger adecuadamente los datos del usuario. Intenta utilizar el más adecuado en cada caso, el que proporcione la mejor usabilidad al usuario final.

Indica los campos que sean obligatorios. Para aquellos campos que sean difíciles de entender, añade alguna explicación o aclaración como ayuda. Si algún campo requiere un formato determinado en los datos de entrada, explicado y pon algún ejemplo.

HTML5 añade tipos de campos nuevos que puedes usar en tus formularios, en la Cuadro 1 tiene una enumeración de los campos de formulario soportados por HTML5 con una breve explicación.






EtiquetaAtributo

Descripción

Nuevo en

HTML5




input type="text"

Campo de texto normal

No




input type="password"

Campo de texto velado para contraseñas

No




input type="email"

Un cuadro de texto que verifica que su contenido sea una dirección de correo electrónico correcta





input type="url"

Un cuadro de texto que verifica que su contenido sea una dirección de internet (web) correcta





input type="tel"

Un cuadro de texto para contener un número de teléfono





input type="number"

Crea un campo con contenido numérico, permite rangos y otros modificadores





input type="radio"

Crea un botón de radio (excluyente)

No




input type="checkbox"

Crea un botón de comprobación que permite marcar más de un valor

No




input type="submit"

Botón, que al recibir un clic envía el formulario al servidor

No




input type="reset"

Botón que limpia o reinicia los controles del formulario

No




input type="button"

Crea un botón sin comportamiento asociado por defecto

No




input type="color"

Permite escoger un color a partir de una paleta de colores





input type="range"

Define un campo que contendrá un valor dentro de un rango





input type="search"

Usado para campos en los que se introducen criterios de búsqueda





input type="date"

Define un campo que permite seleccionar o escribir una fecha. Según el navegador, la fecha se puede seleccionar a partir de un selector de fechas





input type="datetime"

Define un campo que permite seleccionar o escribir una fecha. Según el navegador, la fecha se puede seleccionar a partir de un selector de fechas





input type="datetime-local"

Define un campo que permite seleccionar o escribir una fecha. Según el navegador, la fecha se puede seleccionar a partir de un selector de fechas





input type="week"

Permite escoger una semana año. Algunos navegadores muestran un selector gráfico





input type="month"

Permite escoger un mes del año. Algunos navegadores muestran un selector gráfico





input type="time"

Permite escoger una hora y minuto. Algunos navegadores muestran un selector de hora gráfico.





select

Muestra una lista desplegable que permite seleccionar uno o varios valores

No




datalist

Genera una lista para asociarla a un campo de texto y así acotar los valores posibles a modo de ayuda al usuario





textarea

Campo de texto multilínea

No




button

Define un botón

No




keygen

Permite establecer un método para asegurar envíos de formularios generando claves entre el navegador y el servidor





output

Muestra el resultado de un cálculo sobre unos valores y realizado mediante un script de cliente





label

Define una etiqueta asociada a un campo de formulario

No




fieldset

Crea grupos de campos de formulario y los relaciona visualmente

No




legend

Define un título o etiqueta de un conjunto de campos definidos con fieldset

No





Cuadro 1: Controles de formulario en HTML5

5. Recomendaciones

El objetivo de la asignatura es construir una aplicación web mediante el desarrollo de un prototipo que se irá refinando y ampliando en las diferentes prácticas. Antes de ponerte delante del ordenador a escribir páginas web puedes hacer (y es muy recomendable) un mockup (modelo a escala, maqueta) de cómo piensas que será el sitio web. Un mockup lo puedes hacer en papel, con una herramienta de diseño gráfico o con el mismo Microsoft PowerPoint.

Aunque puedes usar todas las novedades que incorpora HTML5, debes tener en cuenta que no todas las etiquetas y atributos de HTML5 son soportadas por todos los navegadores que se emplean en la actualidad, por lo que debes ser muy cuidadoso en un desarrollo real.

Importante: almacena cada práctica en un directorio independiente; al final de la asignatura debes tener un directorio por cada práctica semanal.

Importante: el fichero de la página principal de un sitio web suele tener el nombre index.html.

Importante: ten cuidado con los nombres de los ficheros: utiliza únicamente letras del alfabeto inglés y números, no uses espacios en blanco y emplea únicamente minúsculas.

1http://www.w3schools.com

2http://www.w3.org

3http://floele.flyspray.org/htmlcheatsheet-ncr.pdf

4http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/

5http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/

6http://html-tags.info/

7http://validator.w3.org

8http://addons.mozilla.org/es-ES/firefox/addon/249

9http://htmlhelp.com/tools/validator/

10http://browsershots.org

11http://www.totalvalidator.com/

12http://www.browsercam.com/

13http://notepad-plus.sourceforge.net/es/site.htm

14http://www.sublimetext.com/

15http://htmledit.squarefree.com/

16http://online-html-editor.org/

17http://cgi.w3.org/cgi-bin/tidy

18http://caniuse.com/

19https://html5test.com/

20http://html5readiness.com/