Conociendo XHTML

XHTML (eXtensible Hypertext Markup Language -  lenguaje extensible de marcación hipertexto) es un lenguaje similar a HTML, es básicamente HTML expresado como XML válido.

Es algo más estricto a nivel técnico que HTML, pero permite su posterior modificación más fácil. (También facilita la búsqueda de errores  entre otras cosas).

Existen  algunas diferencias entre HTML y XHTML que hacen que XHTML sea más robusto y aconsejable para la modelación de páginas web.  HTML tiene diferentes versiones, que han ido cambiando  con respecto a la idea inicial. Al surgir necesidades como la incorporación de vídeo, sonido, animaciones complejas, etc., HTML se ha visto superado por las necesidades de las empresas y desarrolladores y ha crecido muchas veces sin atender al plano director creado desde el W3C.

Está basado en…

Una de las tecnologías que más ha llamado la atención de los creadores de estándares abiertos para web es el XML, un lenguaje de marcación que sirve como base para crear otros lenguajes multidisciplinares, que solucionan muchas necesidades de documentación de distintos tipos de colectivos en la nueva sociedad de la información.

XML es un lenguaje que también funciona por etiquetas, igual que HTML, pero cuyas reglas de creación de documentos son mucho más estrictas que las del propio lenguaje HTML, lo que da pie a la posibilidad de procesarlos automáticamente por programas informáticos. Ese pequeño detalle, realmente es la base para toda una serie de ventajas que hacen que XML sea una herramienta ideal para el momento actual, donde la información circula sin límite por las redes globales y XHTML intenta aprovecharse de ello.

A modo de resumen…

Por tanto, podemos decir que XHTML es la versión XML de HTML. Desde el punto de vista del desarrollador, veremos que XHTML hereda la rigidez de XML, con lo cual no se puede escribir documentos XHTML de cualquier manera, como ocurría con HTML, sino atendiendo a unas normas. Ese detalle, que en principio pueda parecer una limitación, en realidad tiene una serie de ventajas.

• Procesar su contenido por cualquier programa informático (igual que ocurre con el XML)
• Los navegadores no tienen por qué volverse locos intentando interpretar lo que el desarrollador ha querido escribir ni solucionar los posibles errores de código cometidos, como ocurría con HTML.

·         Pero atención a este punto, puesto que XHTML no es sólo un HTML con sintaxis XML. En realidad XHTML incorpora una nueva concepción o si lo preferimos, una nueva filosofía de modelación de las páginas web, que busca la creación de una web semántica.

·         HTML tiene muchas etiquetas como FONT, B, I... que expresan la forma con la que tiene que mostrarse un elemento, es decir, sirven para definir el aspecto de los contenidos de la página. Del mismo modo, existen muchos atributos, como align, bgcolor, vspace, que sirven también para definir asuntos relacionados son aspecto de los elementos de la página. Todo eso, con el tiempo de uso de HTML y la evolución de la web, se ha demostrado que era incorrecto.

·         Lo ideal es que las personas, que realizan una página escribiendo HTML, escriban el contenido de manera que se exprese qué es cada cosa y no cómo tiene que verse cada cosa. De ese modo, la web sería semántica, porque se especificaría sólo el significado de cada elemento y no cómo se debe de visualizar.

Algunas ventajas…

 Las principales ventajas del XHTML sobre el HTML son:

• Se pueden incorporar elementos de distintos espacios de nombres XML (como MathML y Scalable Vector Graphics).
• Un navegador no necesita implementar heurísticas para detectar qué quiso poner el autor, por lo que el parser puede ser mucho más sencillo.
• Como es XML se pueden utilizar fácilmente herramientas creadas para procesamiento de documentos XML genéricos (editores, XSLT, etc.).

XHTML procura acercarse a ese ideal, por lo que se suprimen todas las etiquetas y atributos que sirven para definir el aspecto y sólo se dejan las etiquetas que sirven para definir el significado de cada elemento de la página.

Por ejemplo, la etiqueta <strong> sirve para definir que una información está destacada. Es correcto, porque sirve para definir qué es ese contenido (un texto a resaltar). Sin embargo, otras etiquetas como B no son correctas desde el punto de vista de la web semántica, porque sirven para definir cómo debe mostrarse un texto en concreto (en Bold, negrita).

La web semántica permite separar el contenido de la presentación y eso es algo que se lleva intentando desde hace años y un asunto que se ha puesto especialmente en práctica en el XHTML.

Algunas de las reglas propuestas para que XHTML «parezca» HTML son:

• No usar instrucciones de proceso.
• Los elementos vacíos (como <br>) deberán escribirse <br />, es decir en forma abreviada y con un espacio antes de «/».
• No se debe utilizar la forma abreviada para elementos no vacíos que no tengan contenido, es decir: no se debe escribir <p/>.

La siguiente lista muestra algunas reglas de XHTML 1.0 que lo diferencian de HTML 4.01. Muchas de estas diferencias vienen con el cambio de ser una aplicación SGML a ser una aplicación del más estricto XML:

·         Debe estar escrito en minúsculas.

• Todas las etiquetas deben ser cerradas:
• Los elementos vacíos deben cerrarse siempre:
•  <br></br> o <br/> o <br />
  Nota: Cualquiera de las tres formas es válida en XHTML. Para compatibilidad según el "Apéndice C" debe usarse <br />.
• Los elementos no vacíos también deben cerrarse siempre:
•  <p>Primer párrafo</p><p>Segundo párrafo</p>
• Los elementos anidados deben tener un correcto orden de apertura/cierre (el que se abre último, debe cerrarse primero).
•  <em><strong>Texto</strong></em>

·         Los documentos tienen que estar “bien formados”. Existen validadores de documentos.

Sección <head> obligatoria y <title> dentro de ella

·         Utiliza atributo ID en vez de NAME.

o    <img src=”/imagenes/imagen.jpg” id=”mifoto” />

·         No se puede usar sintaxis abreviada.

• Hay que usar sentencia DOCTYPE para indicarle al navegador como procesar el documento.
• Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles).
• <td rowspan=3>
• <td rowspan="3">
• <td rowspan='3'>
• Los nombres de elementos y atributos deben ir en minúsculas.
•  <a href="http://www.domname.com">Domname</a>
• No está permitida la minimización de atributos (se usa el nombre del atributo como valor).
•  <textarea readonly="readonly">Solo-lectura</textarea>
• Los atributos desaprobados en HTML 4.01 no forman parte de XHTML.
•  <span style="color: #0000FF;">Blue text</span>

Introducción Modelo Vista Controlador (MVC)

Si vamos a trabajar con JAVA, JSP, SEVLETS…, tecnologías semejantes o complementarias a estas, debemos saber que significa MVC Model View Controller, traducido Modelo Vista Controlador.

Modelo Vista Controlador (MVC) es un patrón de arquitectura de software que tiene como objetivo, separar los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres componentes distintos. 

El patrón MVC se ve frecuentemente en aplicaciones web, donde:

-          La vista es la página HTML y el código que provee de datos dinámicos a la página.

-          El modelo es el Sistema de Gestión de Base de Datos y la Lógica de negocio.

-          El controlador es el responsable de recibir los eventos de entrada desde la vista. En el controlador reside la lógica de control que nos permitirá accionar adecuadamente las acciones que el usuario realice en la aplicación.

Además de la clara separación de las capas de la aplicación, su reutilización y su mantenimiento, reducen las líneas de código en la parte de usuario, y por tanto,  nos permite realizar pruebas unitarias de una forma mucho más extensa.

MVC se dio a conocer en 1979, sin embargo, en los últimos años se ha incrementado notablemente su uso y hoy día es comúnmente usado en muchas aplicaciones Web, dónde casi sustituye a los formularios Web.

Haciendo referencia de nuevo a la definición de MVC:

-          El Modelo (M) se encargará de manejar los datos de nuestra aplicación y de persistir los datos.

-          La Vista (V) tendrá como objetivo representar o mostrar los datos. Es la parte más cercana al usuario, la interfaz de usuario propiamente dicha, y tiene como misión, no contener ninguna lógica de negocio. La idea es que las vistas no contengan ningún archivo .cs o .vb enlazadas a las páginas Web ASP.NET, es decir, se utilizarán páginas Web ASP.NET puras sin enlace a código.

-          El Controlador (C) es como hemos indicado ya, el intermediario o capa intermedia entre la Vista y el Modelo.

Existen multitud de Frameworks que implementan este patrón, como Struts, Spring, Asp.NET MVC…

Crear Servlet (con Request)

Vamos a crear una página HTML, que será un formulario "index" (CLIENTE), al pulsar el botón “enviar” se llamara al servlet “miServlets.java” , este recogerá los datos introducidos en el formulario y generará como respuesta una página dinámica que será mostrada de nuevo al cliente.

En la entrada Instalación de TOMCAT  y Configurar TOMCAT en ECLIPSE , ya se explicaba como configurar el contenedor de Servlets Apache Tomcat.

Crearemos un proyecto web dinámico en Eclipse:

Debemos de tener especial cuidado con la estructura de carpetas donde debe encontrarse cada fichero. En eclipse al crear el proyecto web dinámico nos aparece una estructura de carpeta que debemos respetar. Nuestro proyecto quedara así:

          

Deberíamos saber que en “Java Resources / src ”  es donde crearemos las clases, lo normal es crear una estructura de paquetes (en nuestro caso el paquete ale.objetos) para tenerlas organizadas. En el directorio "webContent" colocaremos todas las aplicaciones web que hagamos (servlets, jsp, ejb, etc). Dentro de esta carpeta nos encontramos con dos directorios  "WEB-INF" y “META-INF”. En "WEB-INF" es donde crearemos el archivo “web.xml“. 

Crearemos primero nuestra página html “Index.html” (dentro de "webContent")

<!--Param.html    Lectura de parámetros con formularios + servlets -->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD><TITLE>Index.html</TITLE></HEAD>

  <BODY BGCOLOR="#CCCCFF">

  <P></P>

  <H2>Debe identificarse como usuario:</H2><BR>

    <HR></HR>

    <CENTER>

       <FORM NAME="FORM1" METHOD="GET"

            ACTION="http://localhost:8080/miFormServlets/miServlets">

         <TABLE BORDER>

            <TR>

              <TD><B>Usuario:</TD>

              <TD><INPUT TYPE=TEXTBOX NAME="USU" SIZE="25" VALUE=""></TD>

            </TR>

            <TR>

              <TD><B>Password:</TD>

              <TD><INPUT TYPE=TEXTBOX NAME="PAS" SIZE="20" VALUE=""></TD>

            </TR>

         </TABLE>

         <P></P>

         <INPUT TYPE=SUBMIT VALUE="Enviar">

         <HR></HR>

              Formulario HTML que invocará a un servlet

         </FORM>

      </CENTER>

  </BODY>

</HTML>

Ahora crearemos nuestro Servlet, yo he creado un paquete dentro de “Java Resources / src” llamado  “ale.objetos” donde creare el servlet “miServlets.java”, con el siguiente código:

package ale.objetos;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.*;
/**
 * Servlet implementation class miServlets
 */
//@WebServlet("/WebContent")
public class miServlets extends HttpServlet {
      private static final long serialVersionUID = 1L;
      public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
            // Obtenemos un objeto Print Writer para enviar respuesta
            res.setContentType("text/html");
            PrintWriter pw = res.getWriter();
            pw.println("<HTML><HEAD><TITLE>Leyendo parámetros</TITLE></HEAD>");
            pw.println("<BODY BGCOLOR=\"#CCBBAA\">");
            pw.println("<H2>ACCESO CORRECTO</H2><P>");
            pw.println("<UL>\n");
            pw.println("Usuario " + req.getParameter("USU") + "<BR>");
            pw.println("Password "  + req.getParameter("PAS") + "<BR>");
            pw.println("</BODY></HTML>");
            pw.close();
      }
}

Ahora nos quedaría crear el fichero web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"

    version="2.4">

  <display-name>miFormServlets</display-name>

  <description>

     Servlets de ejemplo para practicar

  </description>

<!-- Publicamos nuestro servlet aqui -->

    <servlet>

      <display-name>miServlets</display-name>

        <servlet-name>miServlets</servlet-name>

        <servlet-class>ale.objetos.miServlets</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>miServlets</servlet-name>

        <url-pattern>/miServlets</url-pattern>

    </servlet-mapping>

   

    <welcome-file-list>

      <welcome-file>

            index.html

      </welcome-file>

           

   </welcome-file-list>

<!-- Fin de la publicacion de servlets -->

</web-app>

Análizando etiquetas “web.xml”:
web-app es la etiqueta raíz.
servlet es la etiqueta que usa para definir un servicio, tenemos que indicarle el nombre (servlet-name) y la clase, en nuestro caso: "ale.objetos.miServlets "
servlet-mapping: es la etiqueta que nos dice qué "caminos" nos llevan hasta el servlet (esto lo aclararemos más adelante).
welcome-file-list: es la lista de páginas que el servidor intentará mostrar como página de inicio cuando reciba una solicitud que no especifica una página.

Llegado a este punto ya tenemos los tres ficheros necesarios para realizar nuestras prueba, si ejecutamos eclipse haciendo click con el botón derecho del ratón en el nombre del proyecto, “RUN AS\ Run on Server” eclipse se encarga de realizarlo todo y nos levanta la web index.html. Un consejo que doy es que copiemos la ruta, en este caso http://localhost:8080/miFormServlets/
y la peguemos en el explorador, y desde este ya rellenar el formulario y pulsar el botón enviar.
 

Al introducir los datos y pulsar el botón Enviar, el sevlet hara que se devuelva al explorador lo siguiente: 

Algunas veces cuando al ejecutar nos da un erro, aunque arreglemos el código, puede ser que al ejecutarlo nos siga dando el error anterior, puede ser porque se quede en CACHE o por algún otro motivo que desconozco. Para subsanar esto podemos eliminar el proyecto del despliegue del Tomcat, de la siguiente manera:

Situado en nuestro proyecto dentro del despliegue de Tomcat, con el botón derecho del ratón nos aparece la siguiente lista desplegable:

Al pulsar “REMOVE” desaparecerá de la lista de proyectos desplegados. Para asegurarnos limpiaremos el tomcat de posibles despliegues, pulsando sobre Tomcat con el botón derecho y seleccionando “CLEAN”