Diseñorama » Articulos

Más allá del HTML

Escrito por danieloso en 13.07.04

La Problemática

El engendro

Supongamos que hemos construido un edificio de 4 pisos de alto, supongamos que nuestro edificio cuenta con una buena Arquitectura, buenos cimientos, buenos materiales y con todos los servicios necesarios para dar alojamiento a sus habitantes. ¿Que sucedería si una vez concluido nuestro edificio se nos solicitara agregarle un piso más? Seguramente no nos agradaría mucho la idea puesto que la cimentación original estaba planeada para 4 pisos, por lo tanto si agregamos otro piso más estaríamos poniendo en peligro la estabilidad del edificio. Ahora bien, que tal si en lugar de agregar un piso extra tuviéramos que agregar 10 pisos, dos elevadores, un helipuerto, una piscina, dos balcones y un estacionamiento subterráneo. Seguramente ya no estaríamos hablando de un edificio, estaríamos hablando de un engendro.

Exactamente la misma situación ha sucedido con el lenguaje HTML. Un lenguaje que originalmente fue creado para (mediante etiquetas) dar formato y estructura a un documento, ha tenido que ser deformado al máximo para satisfacer las crecientes necesidades de los diseñadores y de los programadores Web.

¿Que tanto es tantito?

El origen de la incompatibilidad con los navegadores Web surgió por la falta de reglas claras en la visualización del contenido. En un principio los estándares solo se enfocaron a definir el formato y estructura semántica de un documento. Si un fragmento de texto estaba etiquetado como <h1>, este debería ser un texto GRANDE, a su vez si un texto estaba etiquetado con <h2>, este debía ser un texto GRANDE pero no tan grande como el <h1>. Este tipo de especificaciones ambiguas provoco que los creadores de los navegadores Web INTERPRETARAN la forma en como el navegador debería presentar la información en pantalla. — Nunca seria lo mismo decirle a un niño "Golpea fuerte" que decirle al campeón mundial de peso completo "Golpea fuerte"—. Cuando no existen especificaciones específicas la interpretación termina convirtiéndose en ambigüedad y esta a su vez en incompatibilidad.

<parches> , < mañas> y < trucos>

Bastaría con mirar el código fuente de "casi" cualquier pagina Web, para darnos cuenta de la gran cantidad de PARCHES, MAÑAS y TRUCOS de los cuales se valen los desarrolladores para lograr que los sitios se visualicen tal cual fueron concebidos. (Imágenes transparentes, infinidad de tablas anidadas, son algunos de los trucos mas frecuentes entre los desarrolladores)

Más y más pisos

La W3C no solo fue creada para establecer los estándares del HTML, también fue creada para establecer los estándares de otros muchos lenguajes de marcación como lo son el MathML (Lenguaje de Marcación Matemático), CML (Lenguaje de Marcación Químico) por citar solo algunos. De modo tal que la W3C se ha dado cuenta de lo difícil que resulta el desarrollo de "EDIFICIOS" perdón, de complejos estándares mundiales que satisfagan las necesidades de todos. La W3C se ha dado cuenta que, sin importar cuanto pisos le agregue a su edificio, siempre se necesitaran mas y mas de los que ella puede construir

La Solución

Evolución retrospectiva.

Una vez que la W3C se dio cuenta que por más etiquetas que agregara al HTML nunca terminaría de satisfacer las crecientes necesidades del mundo de la informática tomo una sabia decisión. Evolucionar hacia atrás, evolución retrospectiva. En lugar de crear o AMPLIAR un lenguaje de marcación que satisficiera las necesidades de todos los desarrolladores, la W3C regresaría a un lenguaje de marcación más simple y genérico, el XML (Extensible, Markup, Language). En una analogía, la W3C dejaría de construir edificios y se dedicaría a producir ladrillos, varillas y concreto.

XML Simple y poderoso

Para aquellos ciber-ignorantes que pensábamos que todos los lenguajes con nombres raros ( XHTML, XSLT, XSL, XFORMS, XLINKS) seguramente serian un descendiente directo del HTML, ¡NOTICIAS!, el HTML como todos los lenguajes mencionados son lenguajes de marcación basados en el XML (Lenguaje extensible de marcación) el XML es el padre de todos estos lenguajes de marcación. A su vez el XML es un lenguaje paralelo a y derivado del SGML (Lenguaje estándar generalizado de marcación).

El lenguaje XML esta basado en un puñado de reglas bastante simples y claras que nos permiten crear documentos donde nosotros creamos etiquetas con valores y propiedades, de ese modo logramos tener los elementos necesarios para etiquetar nuestra información de una manera estándar. Ejemplo:

<? xml version="1.0" encoding="UTF-8"?>
< correo>
            < asunto>Saludo</asunto>
            < mensaje>Hola Mundo</mensaje>
            < autor> danieloso</autor>
</ correo>

Este muy, pero muy básico ejemplo de un documento XML resulta relativamente fácil de comprender. Las etiquetas <correo>, <asunto>, <mensaje>, <autor> no corresponden a ningún elemento HTML o ningún elemento específico, simplemente son etiquetas creadas arbitrariamente para ETIQUETAR información. De este modo es posible administrarla y manipularla de una manera más lógica y personalizada.

XHTML, lo mejor de dos mundos

El estándar del HTML es más INCONSISTENTE que el estándar de un documento XML, básicamente podríamos decir que un documento HTML es un documento XML mal formado. Las inconsistencias más comunes del HTML radican en la forma en que abrimos y cerramos las etiquetas, mientras que en el HTML etiquetas como < br> o < img> no requieren cerrarse, en un documento XML eso provocaría un error de procesamiento. (Léase cerrar una etiqueta a crear un principio y un fin <etiqueta>Mi texto</etiqueta>).

Para lograra una SUAVE transición entre el HTML y el XML se ha creado un metalenguaje intermedio el XHTML. Este retoma lo mejor de los dos mundos. Por parte del HTML toma todos los elementos utilizados para establecer el formato y la estructura semántica del documento. Por parte del XML toma la capacidad de crear etiquetas personalizadas y se rige por las reglas simples y claras del propio XML.

Hablar de un documento XTHML es básicamente hablar de un documento XML.

DTDs y Schema

En un mundo tan diverso como el de Internet, donde nuestro código va ser visualizado por una infinidad de medios, servidores y aplicaciones ¿Cómo sabrá el navegador la forma correcta para interpretar dichos elementos?, ¿Cómo puede un lenguaje ser el estándar si cada quien puede crear sus propios lenguajes? La respuesta resulta bastante tonta. Tendremos que decirle al navegador el "como".

Si uno visita un sitio Web y uno echa un vistazo al código fuente, (si corremos con un poco de suerte y el autor tuvo un poco de cuidado) podremos encontrar en las primeras líneas de dicho código alguna de las siguientes etiquetas.

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

Estas líneas de código rescriben al navegador el tipo de documento que esta presentando y le indica la ruta o dirección en donde se encuentran publicadas las reglas de visualizasen para dicho documento. ( DTD, Document, Type, Definition), (Definición de tipo de documento)

Aquí un ejemplo de una sección de la DTD correspondiente al elemento < table>.

 <!ELEMENT table
     ( caption?, ( col*| colgroup*), thead?, tfoot?, ( tbody+|tr+))>
<!ELEMENT caption   %Inline;>
<!ELEMENT thead     ( tr)+>
<!ELEMENT tfoot     ( tr)+>
<!ELEMENT tbody     ( tr)+>
<!ELEMENT colgroup ( col)*>
<!ELEMENT col       EMPTY>
<!ELEMENT tr        ( th|td)+>
<!ELEMENT th        %Flow;>
<!ELEMENT td        %Flow;>
 
<! ATTLIST table
  % attrs;
  summary      %Text;          #IMPLIED
  width        %Length;        #IMPLIED
  border       %Pixels;        #IMPLIED
  frame        % TFrame;        #IMPLIED
  rules        % TRules;        #IMPLIED
  cellspacing %Length;        #IMPLIED
  cellpadding %Length;        #IMPLIED
  align        % TAlign;        #IMPLIED
  bgcolor      %Color;         #IMPLIED
  >

El segmento de especificación mostrado describe las propiedades validas de un elemento < table> así mismo le indica al navegador como debe interpretar los elementos anidados dentro de ella. Aun cuando una DTD pueda contener unas 1200 líneas de código, dichas líneas nunca serán suficientes para crear una especificación que contemple todos los posibles conflictos de visualización. Por ello actualmente en los documentos XML están utilizando un sustituto llamado XML Schema, esta última resulta ser más flexible y practica para especificar las características de cada elemento XML.

DTDs a la carta

Si bien la creación de especificaciones a la carta es una exageración para el desarrollador común y corriente, esta posibilidad es como agua en el desierto para aquellos desarrolladores que están involucrados en proyectos muy extensos y complicados, donde la creación de etiquetas personalizadas no satisface sus necesidades.

¡Las CSS llegaron Ya!

En 1998 fue aprobada por la W3C las hojas de estilo en cascada CSS ( Casading Style Sheet) como un estándar para dar formato a los documentos HTML. Las hojas de estilo en cascada han sido uno de los pasos mas importantes en la evolución del HTML hacia la posibilidad de separar completamente la presentación de la información.

Gracias a la adopción del estándar de hojas de estilo CSS se logró asentar sólidas bases para la visualización de los documentos HTML. Con las hojas de estilo se pueden definir los elementos de un documento HTML como "CAJAS", dichas cajas comparten propiedades con cualquier objeto grafico. (Ancho, alto, contorno, color de fondo, etc.)

La Implementación

Divide y venceréis

No existe frase mas cierta en el mundo del Internet. Divide tu información de la presentación y vencerás.

¿Cuantas veces un desarrollador se a quebrado la cabeza por tratar de realizar una pequeña modificación al diseño de un sitio que ya esta completamente terminado? Un pequeño anuncio en la esquina superior derecha, o una pequeña tabla de noticias en la parte inferior del sitio puede fácilmente convertir un buen proyecto en todo un ENGENDRO. (Si este mismo no esta bien planeado desde un principio).

Los actuales documentos HTML pueden resultar lógicos en su modo de presentación para el ser humano (paginas Web) pero en la mayoría de los casos carecen de una lógica estructural que bien podría ser de utilidad para un buscador o para un dispositivo que necesitara extraer solamente un segmento de dicha información.

Gracias a las nuevas tecnologías o mejor dicho, gracias a que los desarrolladores adoptan con más frecuencia los estándares, ahora es más fácil remodelar todo un sitio sin necesidad de reformar la estructura del mismo.

Información - Presentación - Programación

En "Un mundo Perfecto" los diseñadores nunca tendría que meterse en conflicto con los programadores y los editores de contenido jamás tendrían que pedir soporte técnico para actualizar un sitio Web. Aun cuando en la realidad esto no sucede a menudo, estamos cada vez mas cerca de lograr esta utopía. Conforme los desarrolladores apliquen mas los estándares a sus proyectos y cuanto mas las compañías exijan que su información sea manipulada con forme a dichos estándares, mas nos estaremos cercando a esta utopía y mas lógica estructural le iremos heredando a Internet.

Mirar el código de un documento HTML era como mirar un cuadro de Salvador Dalí.

La Conclusión

1960 ¿El futuro?

La informática cada vez más parece apuntar hacia el XML como el lenguaje universal para el intercambio de información. Estamos viviendo tiempos contradictorios, al mismo tiempo que existen empresas como Adobe, Macromedia o Sun Microsystems que apuestan por aplicaciones poderosas que respetan y utilizan los estándares, existen otras empresas importantes que están desarrollando aplicaciones cerradas como hace 10 años.

Es importante mencionar que los estándares de la W3C no están ahí para que seamos POLÍTICAMENTE CORRECTOS, están ahí porque las personas que los inventaron son las mismas que ayudaron al desarrollo del Internet y de muchas de las tecnologías que hoy utilizamos. Si ellos han dado las bases para dichos estándares es porque saben que son efectivos y necesarios.

Utilizar los estándares no hace daño por el contrario, si experimentamos un poco con ellos posiblemente nos daremos cuenta que hoy en pleno siglo XXI no estamos inventando el agua tibia, hoy en pleno siglo XXI apenas estamos aprendiendo a implementar tecnologías y metodologías que fueron creadas desde la década de 1960.

Comentarios

1. 14 julio 2004, 07:45irene

   ¡¡Me encantó este post!!
   Me dejó claras unas cuantas cosas que no me animaba ni a preguntar.
   

2. 14 julio 2004, 22:22Vicente Pazo

   Muy bueno el artículo. Me gusta la frase “un documento HTML es un documento XML mal formado”. Soy “más programador que diseñador” y estoy totalmente de acuerdo en la parte de que “los diseñadores nunca tendría que meterse en conflicto con los programadores”, pero creo que ese punto podría haberse extendido más. Las páginas web son mucho más que diseño y poco a poco aparecen tecnologías que separan ambos mundos (por ejemplo .Net). También pienso que no existe una filosofía de “aprovechar la potencia de xml”, a ver como lo encaminamos.
   
   Enhorabuena otra vez por el artículo.
   

3. 15 julio 2004, 02:55DANIELOSO

   Me agrada mucho que les gustara el articulo, originalmente estaba acompañado de un pequeño caso de estudio donde se ponía en practica el DIVIDE Y VENCERÉIS, en este articulo no se incluyó porque pensé que ya seria demasiado. Pero ya estamos trabajando en ello y pronto lo publicaremos como otro articulo.
   
   Si desean que algún punto sea ampliado con gusto lo tomaremos en cuenta para desarrollar nuevos artículos.
   
   Saludos!!
   
   

4. 15 julio 2004, 06:59Andres Felipe Higuita C.

   Excelente articulol, ojala sigan ampliando mas conceptos que muchos aun no conocemos!
   
   PD: Me encanto el formulario de “¡COMENTA AHORA!
   

5. 16 julio 2004, 15:00sosa

   Felicidades por este artículo.
   Hace poco estaba pensando en que no hay mucho material en castellano sobre CSS y Estándares web que hasta estaba pensando en escribir algo.
   Que bueno que no lo hice porque el tuyo es genial!
   
   Por cierto, que éste es el mejor formulario de comentarios que he vist en mucho tiempo. Felicidades!
   

6. 23 julio 2004, 15:56Daniel Garcia

   Un artículo genial. Os animo encarecidamente a que escribais más articulos de este tipo, a ver si aquellos diseñadores atascados en las y otras “malas costumbres” se deciden a incorporar los estándares en sus páginas web.
   

7. 9 agosto 2004, 14:09José Fidel

   Se ve interesante de lo que hablas pero deja mucho de que desera.
   
   ok
   
   ATTE
   Fuy
   

8. 11 agosto 2004, 13:29Luis

   Muy bueno…, muy claro…. , muy efectivo….., por favor escriban mas de estos articulos
   

9. 4 septiembre 2004, 03:13Clemente

   Tu artículo es muy interesante, espero que pronto escribas más acerca de este tema.
   

10. 17 septiembre 2004, 16:01adrmx

    Estubo muy chido el Articulo, aunque creo que se debería de hablar más de como como implementarlo.
    

11. 1 octubre 2004, 12:21orochies

    Holapues la verdad si que me quedo todo muy clarito con este articulo…
    
    Ahora bien si hay algo que me parece un poquito enredado es
    
    ¿Que lenguaje me vendria bien estudiar aparte del html que ya conosco?
    
    Seria a caso el xhtml o el xml pues la verdad estoy interesado en estos dos pero no se con cual me quedo…
    
    _Saludos…
    
    

12. 6 octubre 2004, 05:16Jesus

    Excelente, la claridad es estupenda. Ojalá no sea el último artículo en esta serie.
    :)
    

13. 3 noviembre 2004, 04:47Seba

    Muy bueno el artículo. Como diseñador lamentablemente debo reconocer que sí tenemos la obligación de conocer el código, y aunque no seamos expertos, saber qué significa las líneas que estamos escribiendo.
    

14. 4 noviembre 2004, 23:00Quiltro

    Muy bueno, claro y simple en lenguaje el artículo. Lo necesario para explicar un tema que a mi en lo particular se me pone complejo hacerlo.
    
    Ahora una duda… no lo he investigado mucho pero bueno aquí va.
    
    XHTML según entiendo será solo un lenguaje de transición a XML, es decir ya tiene fecha de vencimiento?
    

15. 9 mayo 2005, 17:37dominpe

    Excelente artículo. Una opinión que compartimos muchos de los que trabajamos con Web.
    

16. 24 diciembre 2006, 18:31doodle

    Felicidades Danieloso,
    espero no llegar demasiado tarde para comentar sobre este artículo y que alguien lea lo que voy a escribir si le es útil en el momento de tomar una decisión.

    Durante casi 6 años di clases de diseño web y no sabéis lo difícil que era hace 8 años convencer a la gente de que usase CSS, CSSP y HTML bien formado cuando había una explosión de Frontpage, Dreamweaver y Flash que arrasaba el mercado, yo daba cursos de 300 horas de diseño web y tenía que dar 100 horas de asistentes (frontpage, dreamweaver y flash) para que los alumnos tuvieran “un sentido por el que esperar”, durante las otras 200 horas impartía HTML, Javascript, DHTML, CSS, CSSP y un poco de CGI (más bien scripts de servidor, SSI).

    Cuando llegábamos a Frontpage o Dreamweaver algunos alumnos descubrían que los asistentes eran limitados y tenían errores sintácticos que hacían que se viesen mal las páginas de sus sitios web en Netscape Navigator u Opera por ejemplo… otros alumnos estaban tan deslumbrados por un entorno “más Windows” que me replicaban el porqué habíamos pasado 200 horas con el block de notas.

    Cuando llegábamos a Flash la algarabía era bestial, todos querían hacer un curso de Flash avanzado y PHP, pero muy pocos veían el gran potencial de CSS y la separación de contenidos… sólo una vez me pidieron un curso de XHTML y fue porque les metí el gusanillo desde el comienzo mientras les iba enseñando las etiquetas de HTML (tags).

    Curiosamente hoy en día, dos años después de separarme un poco del mundo web resurge todo aquello, a veces ni yo mismo sé qué hacer exactamente con los feeds, rss y todos los posibles CMS que han surgido y que prometen ser la panacea.

    He probado varios CMS (Drupal, Joomla, Mambo, PHPNuke, Moodle, Wordpress…) y para mí hasta ahora los mejores son Moodle si vas a impartir cursos o Wordpress si quieres un CMS muy amigable.

    Ahora he descubierto b2evolution como CMS enfocado a blogs y Textpattern como CMS general y estoy bastante entusiasmado en aprender algo más de ellos… pero la carrera que ha dado esto en 2 años no había ocurrido en los 6 anteriores porque todo el mundo estaba obsesionado con Macromedia Flash, sobre todo los diseñadores… parecía que para los alumnos que tenía que eran diseñadores no existía sino Macromedia Flash y Dreamweaver.

    Bueno, ¿porqué os cuento todo esto? pues porque al leer el artículo de Danieloso he sentido que de repente de alguna forma podemos volver a cegarnos por el impulso y no fijarnos en los stándares que de verdad lo son, quizás dejándonos llevar por los pasos intermedios.

    Me explico, XHTML1.1 no es soportado por los navegadores correctamente, XHTML2.0 no será compatible hacia atrás con lo cual habrá cosas de XHTML1.0 y 1.1 que serán desaconsejadas (deprecated en inglés para usar el término exacto del W3C) para un DTD strict, HTML5 saldrá en breve con mejoras sólidas sobre HTML4 y aparentemente lo más aconsejable es seguir desarrollando en HTML4 que sí será compatible en mayor medida con HTML5 al ser compatible hacia atrás, lo que no ocurrirá con XHTML y esperar a que apareciera XHTML 2.0 que es el que va a marcar la nueva estandarización.

    Ya que SGML no es soportado ni en broma por los navagadores y XML ha quedado en una “fase de producción” pero no de representación eficaz ¿Qué estamos entonces haciendo todos (yo incluido) con los CMS que usamos y que mayoritariamente muestran XHTML en su código fuente?

    Referencias para demostrar lo que digo hay por sacos en Internet, pero los enlaces que he logrado reunir tras leer el artículo de Danieloso son:

    XHTML is not for begginers
    http://lachy.id.au/log/2005/12/xhtml-beginners

    Why XHTML ™?
    http://www.elementary-group-standards.com/html/why-xhtml.html

    Why do you use HTML4?
    http://www.elementary-group-standards.com/html/why-do-you-use-html-4.html

    Os diré que incluso un diseñador tan prestigoso para mí como Roger Johansson (456 Berea st)
    usa HTML 4 strict en el código fuente de sus páginas.

    ¿A que dá que pensar? ;-)

    Te felicito nuevamente Danieloso por tu artículo, es difícil sintetizar tantos datos hablando de DTDs diferentes con tanta precisión y hacerlos comprensibles para el público general.

17. 13 abril 2007, 06:08Lalo

    Muy bueno el artículo, a pesar de que lo leí mucho tiempo después de que se publicó, sigue siendo muy útil. Como diseñador, con este artículo aprendí muchas cosas sobre los lenguajes, como que HTML viene del XML. Me parece muy interesante que se retome lo mejor de estos dos mundos, como dice el artículo. Sería muy útil y práctico, para los que no conocen bien los códigos y lenguajes, que hicieran un artículo sobre las etiquetas más utilizadas en XHTML y sus diferencias con el HTML y XML.

18. 21 septiembre 2007, 15:55luz

    hola tu articulo esta bueno pero necesito ayuda disculapa que te lo pida , no encuentro lo que son etiquetas o instrucciones ya no permitidas en el html 4.01 quisiera saber si alguien me puede ayudar con eso