Desarrollo Web: Tecnologías básicas. HTML.

Definición

HTML (HiperText Markup Language) fue un lenguaje que nació pensado para describir una página web o documento. No es un lenguaje de programación, así que no conviene decir que "saben programar en HTML" en LinkedIn, porque los delata. 

Sintaxis de un HTML

En HTML se definen etiquetas o tags, que se inician con un nombre que se encierra entre símbolos < y >:

<html>
<h3>
<p>

Los tags se cierran utilizando la siguiente nomenclatura: </nombre del tag>:
</html>
</h3>
</p>

La notación inline permite abrir y cerrar el tag en un mismo paso:
<img ... />
Si bien muchos browsers relajan la sintaxis de apertura y cierre de tags (como en los casos de <ul> y <br>) es una buena práctica respetar esta idea, lo que permite definir XHTML o HTMLs "bien formados".

Dentro de cada tag pueden aparecer
  • contenido, que es un texto
  • atributos, demarcados con una clave y un valor
  • otros tags, que se anidan en forma jerárquica

<tag atributo1="valor1" atributo2="valor2">contenido con <otrotag>otro subcontenido</otrotag></tag>

Contenido

Si encerramos en un tag <h2> ("heading 2") el contenido se formatea con el tamaño y la fuente del encabezado de tipo 2 por defecto:

<h2>Hola mundo</h2>

se visualiza como Hola mundo.

Atributos

El tag <a> de "anchor" permite definir un link a un recurso definiendo el atributo href

<a href="http://www.laverdad.com.ar">Conocer la verdad</a>

Tags anidados

Uno simple, al tag <p> de párrafo le incorporamos el tag <b> de negrita o bold:

<p>Se puede poner <b>negrita</b>en el texto</p>

Estructura de un HTML

Una página HTML devuelta por el browser contiene:
  • un DOCTYPE, que demarca la versión de HTML a utilizar. Para HTML 5 (la versión actual), es simplemente
<!DOCTYPE html>
para más información recomendamos ver este link.
  • el tag HTML que encierra el comienzo y final de una página, y dentro de él dos tags principales
    • el head que contiene información de encabezado de página, como 
      • el título que aparece arriba como caption del browser 
      • información relevante para el cliente, el servidor y los motores de búsqueda (meta-tags)
    • el body que contiene elementos visuales de la página web

Construir elementos visuales en una página web

En HTML contamos con tags que permiten modificar el formato del texto:
 <p> Inserta un párrafo
 <b> Marca el texto con negrita
 <i> Marca el texto en cursiva (itálica)
 <h1> / <h2> / <h6> Utiliza los encabezados (headings) del mayor (1) al menor (6)
 <hr> Inserta una línea horizontal
 <br> Inserta un enter

Otros containers de interés:
 <div>  Es un control container
 <ul>, <li>  Permite definir una lista con viñetas
<ul>
	<li>Algoritmos 3</li>
	<li>Paradigmas</li>
	<li>Base de Datos</li>
</ul>
Esto termina generando esta salida:
  • Algoritmos 3
  • Paradigmas 
  • Base de Datos
 <ol> , <li>  Idem pero permite definir una lista con números (ordenada)

Veremos a continuación otros tags interesantes. Para más información pueden consultar http://htmldog.com/reference/htmltags/.

Primer ejemplo en HTML

Cómo lo probamos

Bajamos nuetro primer proyecto de ejemplo, en https://github.com/uqbar-project/eg-formulario-webPara poder visualizarlo, tenemos dos opciones:
  1. Explorar el file system y abrir en un browser el archivo index.html dentro del directorio del proyecto
  2. Descargar el proyecto en un IDE como Eclipse y deployarlo en un Web Server
En viejas cursadas donde dábamos web del lado del server preferíamos la opción 2, pueden saltearse entonces esta explicación.

Explicación que pueden saltear (si no ven web server-side)

Si bien no es necesario instalar el servidor web, como es nuestro primer paso para luego desarrollar aplicaciones vamos a elegir la segunda opción. ¿Qué servidores podemos elegir? Varios, 
entre otros. Y en este caso nos quedamos con la suite Apache + Tomcat, que combinan un web server y un application server, respectivamente. 

Un Web Server
  • escuchar los pedidos por http
  • contestar esos pedidos mediante algún tipo de doctype (html, y más adelante veremos otros)
  • manejar los errores de http que pudieran ocurrir
Para más información puede verse: Web Server y Comparación de tecnologías de Servidores Web

Un Application Server (Tomcat)
  • Provee un ambiente para tener objetos en el web server. En el caso de Tomcat es una VM de objetos Java.
  • Permite generar HTML dinámicamente, definiendo abstracciones para

Listo. Ahora sí, el ejemplo

Abrimos un browser y escribimos
http://localhost:8080/eg-formulario-web/

¿Qué página me muestra? index.html por default, es la que contesta el servidor.

Http estaba pensado originalmente como una herramienta para poder trabajar textos con capacidades de formato y navegación a través de hipervínculos (para establecer enlaces entre documentos), por eso definir una página con links que trabaje como menú principal es bastante sencillo: 

<a href="table.html">Ejemplo de tabla</a>

¿Qué es <a href...> </a>? Es un tag html, un elemento que permite definir lo que vimos en la unidad 2 como widget/control. En nuestro caso "a" es por "anchor" (ancla). Lo que va en href es la dirección a otra página, cuyo nombre es table.html.  En el contenido va un texto que es lo que ve el usuario en el browser como link.
  
Damos click sobre "ejemplo de tabla" en el browser y vemos el efecto que tiene:
http://localhost:8080/eg-formulario-web/table.html

En la URL nos avisa que estamos en otra página: table.html, dentro de un contexto eg-formulario-web (que es el nombre del proyecto en nuestro Workspace). 

Una tabla es el concepto equivalente a la grilla que conocimos para trabajar con un conjunto de valores. Una tabla se arma con tags TABLE, TR para el comienzo de cada renglón, TD para separar cada columna de una fila/renglón, y tenemos el tag TH que permite definir una fila encabezado (header) de la tabla.

<table>
   <tr>
      <th id="para1">Primera columna</th>
      <th>Segunda columna</th>
      <th>Tercera columna</th>
   </tr>
   <tr class="verde">
      <td>Una celda</td>
      <td>Una celda</td>
      <td>Una celda</td>
   </tr>
</table>

Algunas comparaciones respecto a la grilla que conocimos en Arena (Unidad 2):
  • no existe la idea de tener un componente visual que pueda bindearse contra una colección, entonces cuando recibamos datos tenemos que armar en forma ad-hoc la tabla, separando fila y columna manualmente.
  • en realidad, la grilla no existe como control...

Estructura de un proyecto web

Analizamos la estructura de nuestro primer proyecto web de ejemplo:
> src/main/resources
  index.html
  table.html
  style.css
   

Podemos crear subcarpetas, eso afecta el link al cual debemos apuntar. Ejemplo: si creamos la carpeta "busqueda" y movemos el archivo table.html a ese directorio el link de index.html hay que apuntarlo a "busqueda/table.html", y para pedir la página en el browser la url es:
http://localhost:8080/eg-formulario-web/busqueda/table.html
   

Formularios HTML

HTML cuenta con el tag form, que permite definir un panel de carga de información. 
 
¿Qué controles tenemos?
  • Textbox: es <INPUT TYPE="TEXT" ...>
  • Combo/Selector: es <INPUT TYPE="SELECT">. Cada opción hay que escribirla dentro del tag INPUT,  con el tag <OPTION>. El atributo SELECTED del tag OPTION define qué elemento del combo está seleccionado.
  • Radio button: <INPUT TYPE="RADIO">
  • Check box: <INPUT TYPE="CHECK">
  • Password: <INPUT TYPE="PASSWORD">
  • Fecha: <INPUT TYPE="DATE">. El formato de fecha devuelvo es "AAAA-MM-DD".
  • Número: <INPUT TYPE="NUMBER">. Podemos agregarle atributos de MAX y MIN. También tenemos el atributo STEP para delimitar el salto entre cada un de los valores.
  • Rango: <INPUT TYPE="RANGE">
  • Teléfono: <INPUT TYPE="TEL">. Está pensado para dispositivos móviles. Éstos últimos reconocen el tag, y nos aparecerá el teclado telefónico para ingresarlo. 
  • Botón: tenemos
    • el SUBMIT que envía los datos de un form
    • el BUTTON que se asocia a eventos del lado cliente 
    • el RESET que vuelve cada control a su valor inicial
  • ¿La grilla? No tenemos un control así, tenemos que armarlo en forma manual por medio de una tabla HTML
  • el control oculto o Hidden: no es un control visual, sino que sirve como contenedor de un valor (para luego trabajarlo programáticamente)
A todos estos controles, podemos asignarles diferentes atributos:
  • readonly: para que el contenido solo sea de lectura (no podremos modificarlo).
  • placeholder: para darle una noción al usuario de lo que esperamos que ingrese.
  • size: para delimitar la cantidad de caracteres a utilizar. 
  • required: para inputs donde el ingreso de datos sea obligatorio.
El que envía la información a la página siguiente es el formulario de la página, mediante un botón SUBMIT por lo tanto:
  • todos los controles deben estar encerrados entre el tag FORM
  • el formulario actúa como "control" contenedor de la información que va cargando el usuario
  • el atributo ACTION define en principio una página receptora de la información del formulario. Más adelante veremos que existen otras opciones.
  • esa página receptora recibe la información a través de algún método http. Eso se define en el atributo METHOD del form. En el caso del GET los parámetros se visualizan en la misma URL de destino: 
http://localhost:8080/eg-formulario-web/ready.html?nombre=Fernando&comentarios=Legajo+36691&cbMateriaPref=algo3&cbMateria=algo2&cbMateria=algo3&tipoAlumno=Estudioso 

    • cada parámetro se puede asociar a un par clave-valor de la forma "nombre del parámetro"="valor"
    • el nombre del parámetro que va hacia el destino se basa en el identificador de cada control, el valor es lo que cargó el usuario
      • el input type text Nombre tiene un atributo name="nombre". Si el usuario carga en el textbox "Fernando", en el atributo value se asocia ese valor. ¿Cómo quedan los parámetros? "nombre=Fernando".
      • en el input type hidden, se considera name=value
      • en el control que selecciona el tipo de alumno (select/combo) el valor es la opción seleccionada al momento de submitir el form
      • en el checkbox, cada opción seleccionada se repite n veces con distintos valores (cbMateriaPref=algo3 y cbMateriaPref=algo2)
    • la forma de parsear los parámetros es heterogénea: separamos el destino y el primer parámetro con un "?", pero luego usamos el "&" para separar un parámetro de otro
  • Si la información se envía por POST esto no lo podemos ver en la URL aunque sí con herramientas del browser: podremos manejarla con tecnologías del lado del servidor.

Resumen

Repasamos entonces qué secciones tiene una página web:
  • <HEAD>, con el título y datos para el browser/web server
  • <BODY>, el cuerpo principal de la página donde van los parámetros que viajan vía POST
    • <FORM>, que define un formulario -igual que en HTML- donde van los elementos gráficos, controles o widgets.
Pueden ver la especificación W3C para más información.

Links útiles