basura debajo del felpudo

hacia una correcta metodologia de programación

PRESENTACIÓN

Justificación

En algunas ocasiones, cuando se habla de programación ajustada a estándares, parece que se está haciendo referencia a una complicadísima metodología de desarrollo, o incluso a un nuevo lenguaje, que nada tiene que ver con lo que conocemos.

Pero lo cierto es que la programación ajustada a estándares participa ampliamente de nuestros conocimientos previos y se basa en comprender y aplicar unas reglas muy simples en su concepto, aunque quizá algo complicadas en su aplicación.

Es una forma distinta de ver las cosas, de ver la web, y el problema al que nos enfrentamos es lo mucho que cuesta cambiar ciertos hábitos ya aprendidos y con los que nos sentimos cómodos y seguros al programar.

Pero si nos decidimos a dar el salto, y con un poco de práctica, llegaremos a hacer las cosas tan rápido o más que antes, además de participar de bastantes ventajas que antes no teníamos.

Desde un punto de vista de mercado quizá nos podríamos preguntar por qué es necesario el esfuerzo que supone aprender y aplicar una nueva metodología, con el coste de tiempo y esfuerzo que ello supone. Quizá la respuesta más genérica y ambigua sea precisamente decir que “el mercado lo requiere”.

Hoy día podemos afirmar que el ámbito de internet en España se acerca a un punto maduro, todavía evidencia retraso con respecto a nuestro entorno de referencia, pero se puede decir que las primeras etapas se han sobrepasado ya, y que el mercado web comienza a demandar cierta calidad en sus sites.

Pero no sólo es la demanda lo que nos debe preocupar, también la oferta existente se hace cada vez mayor. En la actualidad son muchas las personas y estudios que se dedican a la realización de páginas web. Aunque bien es cierto que muchos de los profesionales que se dedican al desarrollo no tienen la cualificación necesaria para ofrecer un producto de calidad.

Podríamos establecer un símil con una pirámide: hoy día el sector del desarrollo web cuenta cada vez con más gente dedicándose a ello, pero vemos como un número significativo de ellos no tienen una alta cualificación, a medida que aumentan los requerimientos la gente con capacidades para resolver los problemas disminuye. Con este panorama debemos hacer un esfuerzo para diferenciarnos de la oferta masiva, por imprimir en nuestras webs un sello de calidad que las diferencie del resto. En otras palabras, debemos subir por la pirámide, de forma que la amplia oferta existente no nos engulla sino que nos impulse hacia arriba.

Objetivos de la conferencia

Con esta conferencia pretendemos exponer brevemente lo que significa la programación web ajustada a estándares, arrojar un poco de luz sobre sus conceptos más importantes y señalar también sus principales ventajas e inconvenientes.

Y también es un objetivo de esta conferencia el tratar de dejar claro que el esfuerzo merece la pena, y que lo que se trate en esta conferencia no se quede sólo aquí dentro, sino que tratéis de incorporarlo en vuestros proyectos e inculcárselo a vuestros compañeros.

Internet es Comunicación

Internet no es más que un medio para comunicarse, Internet son los dos vasos unidos por un hilo con los que jugábamos de pequeños.

Y para comunicarse a través de internet lo único que necesitamos conocer es un lenguaje apropiado. Internet habla muchos, cada uno específico para una forma de comunicación en concreto y para unas necesidades determinadas.

Estos distintos idiomas que hay que conocer para comunicarse por la red, están regulados por un organismo que establece las “normas gramaticales y ortográficas”, al igual que lo hace la Real Academia de la Lengua con la lengua castellana.

Este organismo está formado por una inmensa cantidad de personas, relacionadas de una u otra forma con internet (empresas, organismos, expertos, etc…) y se denomina World Wide Web Consortium (en adelante W3C).

HTML y (X)HTML

HTML : Breve historia

Dentro de la gran cantidad de lenguajes con los que podemos comunicarnos en internet, aquí nos vamos a centrar en uno, el HTML, que es el lenguaje en el que se programan las páginas web.

El HTML es un lenguaje interpretado, ya que a diferencia de otro tipo de lenguajes, necesita que haya un programa que “traduzca” lo que dice. Estos programas son los navegadores.

El problema que ha existido durante largo tiempo es que se producía una transferencia en la referencia del lenguaje, es decir, en las reglas (gramaticales y ortográficas) a aplicar. Los desarrolladores no acudían a la fuente original (W3C) para consultar si lo que habían escrito estaba bien o mal, se valían del traductor más popular para hacerlo, nos estamos refiriendo al omnipresente Internet Explorer de Microsoft.

En otras palabras, se podría afirmar que una página estaba bien o mal escrita en función de si se “veía bien” en Explorer o no. Evidentemente esto desplazaba sustancialmente las funciones que debía tener cada cual dentro de la cadena de internet. Pero a su vez tenía un peligroso efecto colateral, ya que le otorgaba a una aplicación el papel de juez sobre lo que está bien o mal programado en internet.

Una aplicación que estaba (y está) desarrollada por una empresa privada, con intereses privados, y que no ha dudado nunca en utilizar su poder para barrer del mapa a la competencia.

Afortunadamente, aunque poco a poco, se va tomando conciencia dentro de la comunidad de desarrolladores, de que el código que crean está regido por unas reglas que están por encima de las aplicaciones; y que si las siguen y aplican correctamente las diferencias entre las mismas se minimizan.

Esta filosofía que trata de hacer de la web algo más universal es la que vamos a tratar de reflejar aquí.

Uno de las causas más importantes (del lado de los desarrolladores) en el rápido crecimiento de internet ha sido que el HTML es un lenguaje muy sencillo, de forma que programar páginas web básicas (aunque sea a un nivel puramente amateur) no es complicado

Prueba de ello es la multitud de páginas personales que encontramos, compuestas por una especie de batiburrillo de información, links y gráficos … pero páginas HTML al fin y al cabo.

Todos estos programadores aficionados han contado con una importante ventaja, y es que el HTML no realiza ningún tipo de comprobación de errores, y no es muy estricto en cuanto a sintaxis del código.

Los navegadores se limitan a interpretar el código como pueden. Ya se puede escribir la página HTML más infame que se pueda imaginar, que la mayoría ellos no mostrarán ningún mensaje de error.

Este problema se ha visto agravado por el uso de determinadas “herramientas de autor” en la programación de páginas web (también llamados entornos WYSIWYG), que permiten crear páginas HTML de forma totalmente gráfica. Su principal inconveniente es que el código HTML que generan puede ser de mala calidad, lo que en ocasiones deja mucho que desear en lo que se refiere a claridad y exactitud.

Todos estos factores han acarreado ventajas e inconvenientes: por un lado son evidentes los problemas que esta facilidad de desarrollo trae consigo (profesionales mal preparados programando a bajo precio, una web poco accesible y universal, etc …); pero por otro lado también tenemos que darnos cuenta de que internet es hoy en día lo que es, y proporciona trabajo, porque su auge ha sido imparable, en parte gracias a la gran difusión que ha tenido y a la proliferación masiva de webs.

HTML : Errores Frecuentes

Describir todos los errores que se cometen al programar en HTML es una tarea muy laboriosa un resumen podría ser este:

  1. Etiquetas no cerradas o cerradas en orden incorrecto
  2. <strong><h2>Texto</strong></h2>
  3. Omitir partes importantes del documento HTML.
  4. <html xmlns="http://www.w3.org/1999/xhtml">
    <title>Untitled Document</title>
    <body>
    <p>texto</p>
    </body>
    </html>
  5. No distinguir entre mayúsculas y minúsculas.
  6. <Div>Esto es un div</Div>
  7. Duplicación de etiquetas o etiquetas redundantes.
  8. <font color="#990000"><font size="+2">fuente</font></font>
  9. Utilización errónea de etiquetas.
  10. <table width="400" border="0">
    <tr>
    <td>Por ejemplo tablas</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>para</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>maquetar</td>
    <td>&nbsp;</td>
    </tr>
    </table>
  11. Mezclar presentación y contenido.
  12. <td><font size="+3">Por ejemplo</font></td>

XML + HTML = (X)HTML

Para tratar de solucionar estos errores se formuló un nuevo estándar denominado XHTML, basado en otros dos: HTML y XML.

El (X)HTML es un lenguaje muy similar al HTML, ya que va a seguir conservando todas las etiquetas ya existentes (aunque algunas sufrirán algún cambio menor), pero a su vez va a presentar una serie de características heredadas del XML, más estrictas en cuanto a sintaxis del lenguaje, pero que harán que los sitios web sean más fiables y con menos errores

Al contrario que en HTML, e incorporando esta características del XML, en el (X)HTML hay que definir un tipo de documento mediante el llamado DTD, que reúne las características y formato de dicho documento. En otras palabras, en los DTDs se especifica qué etiquetas podemos utilizar, su nombre, sus atributos, características, etc … es decir, es un marco de referencia donde se recogen las reglas que debe cumplir una determinada página.

Los DTD no son obligatorios, sino que son utilizados para validar los documentos que estamos utilizando, es decir, para comprobar si cumplen con las reglas establecida o no. Si el código no cumple dichas reglas se producirá un error, y dicho documento no se procesará.

Para que la migración de página escritas en HTML al nuevo (X)HTML sea menos traumática, se han definido 3 tipos de DTD distintos, con una aplicación de las normas realizada de forma gradual.

Estos distintos DTDs van a permitir a su vez distintas implementaciones del lenguaje (X)HTML, variando la exactitud con la que van a exigir un código XHTML bien formado. De esta forma es posible elegir entre dos sistemas validación de sus documentos XHTML, que puede intercambiar dependiendo de sus necesidades.

La declaración del DTD se hace mediante la etiqueta DOCTYPE del documento, y los 3 tipos de DTD definidos por el W3C para XHTML 1.0 son:

  1. Validación estricta: El nivel más estricto de cumplimiento del XHTML. No permite etiquetas obsoletas y el formato habrá de ser dado mediante CSS o XSL.
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. Validación transicional: Un nivel más “relajado” de adhesión a XHTML.
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. Validación frameset: Incluye los elementos para creación de sistemas de frames.
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Además XML hace otras aportaciones al (X)HTML como por ejemplo las reglas XML referentes a sintaxis:

Las reglas que acabamos de ver son muy simples y sencillas de aplicar, y si las tenemos en cuenta una gran mayoría de los errores de validación de nuestras páginas serán eliminados, con lo que el camino hacia una web estándar estará en parte recorrido.

Pero dentro de la filosofía del XML hay dos grandes aspectos, no tan sencillos de formular y aplicar, pero mucho más importantes a la hora de valorar la estructura de nuestras páginas web

Código con Significado

Cuando se hace referencia a código con significado o a semántica web o a código limpio, realmente se habla de que el código que forma nuestras webs nos ofrezca la máxima información posible, sin más ayuda que el propio código.

El primer paso consiste en utilizar las etiquetas para aquellos usos para los que fueron pensadas, por ejemplo si queremos introducir un titular en el código será interesante utilizar la etiqueta <h1>, en lugar de un simple <span> con un código asociado.

A su vez para multitud de etiquetas existen infinidad de atributos que ayudan a aportar información adicional sobre los elementos, como los alt de las etiquetas <img>, o los title de los enlaces.

Pero no es únicamente utilizar el código de manera apropiada con lo que vamos a alcanzar todas nuestras metas, sino que la propia estructura del XHTML influye. Por ejemplo a la hora de pensar cómo va a leer la página un navegador de voz, será interesante posicionar primero aquellos elementos de información más relevante (por ejemplo texto antes que iconos, pero ojo, en el código, independientemente de cómo se visualice luego).

Otro fallo muy típico – aunque sea un fallo menor – se produce a la hora de nombrar los IDs en una página web. Parece que por el simple hecho de utilizar esta etiqueta, y posicionarla mediante CSS ya está todo el trabajo hecho. De esta forma es muy corriente encontrarnos con IDs tipo “menu_izquierda”; en primer lugar ese nombre está haciendo referencia a la presentación de la página, ¿qué pasaría se cambiamos el diseño y lo ponemos a la derecha?, entonces nos veríamos obligados a cambiar su nombre o resignarnos a que ofreciese información (poca, pero información) errónea. Para ese caso sería mucho mejor utilizar un nombre que describa realmente la funcionalidad de ese menú, por ejemplo menu_principal o menu_secundario, con lo que tendríamos claro con lo que estamos trabajando, y si en un futuro lo cambiamos de posición no habría que tocar el código para nada.

En definitiva se trata de que, con echar un vistazo a nuestro código, seamos capaces de comprender cual es exactamente la estructura de la web (nos da igual su presentación) y que además este código nos brinde toda la información posible (y puede llegar a dar mucha más información que la presentación real de la página).

CSS

Separación Contenido / Presentación

Quizá uno de los aspectos más complicados de abordar respecto a la programación con estándares sea la separación del contenido y la presentación del mismo. Aunque la ventajas que nos aporta también son muchas.

Dentro de la información relativa a la presentación de un documento hacemos referencia a cualquier tipo de dato que no aporta nada al contenido propiamente dicho: estructura visual de la página, tipos de fuentes utilizadas, colores, espacios, etc … Evidentemente, que un texto sea azul o rojo no influye para nada en la información que ese texto nos muestra.

El HTML empezó siendo un lenguaje que definía la estructura e información contenida en un documento. Posteriormente fue ampliado para que incluyese capacidades para dar formato a dicha información (etiquetas <font> <marquee> <blink>, etc …), que además solían ser incompatibles entre diferentes navegadores.

Y cuando no existían etiquetas para conseguir el diseño que se buscaba se recurría a otras, cuyo uso había sido originariamente otro, pero de las que se abusaba para otros fines.

En este punto hay que parar y hacer referencia a uno de los usos más habituales y extendidos de la web hoy día, el uso de las tablas para maquetar las páginas web.

Las tablas fueron concebidas en su día para mostrar conjuntos de datos tabulados (por ejemplo resultados deportivos), pero pronto los desarrolladores web se dieron cuenta de que se podían utilizar para “contener” la estructura principal de un documento.

Desde ese momento, la maquetación mediante tablas fue ampliamente utilizada por programadores y diseñadores, construyendo auténticas “obras de arte” con el fin de controlar, píxel a píxel, la presentación de un documento.

No nos vamos a extender aquí demasiado en todos los motivos por los que es un error utilizar tablas para maquetar un documento, los resumiremos en:

Para evitar el uso de tablas es mejor recurrir a posicionamiento CSS.

Como regla general podemos decir que toda la estructura e información del documento debe estar contenida en la página (X)HTML y todo lo demás debe estar fuera de ella.

Por ejemplo, y aunque sea posible incluirla en la misma página, toda la información de estilos y los scripts deben colocarse en archivos externos, convenientemente enlazados desde nuestro documento principal.

Toda la presentación del documento se realizará mediante CSS (Cascading Style Sheets), que es el lenguaje mediante el cual se deben controlar todos los detalles relativos formato de una página web.

Escapa a esta conferencia es relatar todos los aspectos relativos al CSS, cuyo contenido podría ser objeto claramente de un curso entero, pero aún así vamos a tocar ciertos aspectos que son importantes (y que puden ser los más problemáticos) a la hora de programar correctamente.

Formas de enlazar las hojas de estilos

Básicamente hay tres formas de aplicar estilos mediante CSS:

Display

La propiedad display controla cómo se va a ver un elemento que posicionamos en nuestra página web. Dejando de lado la posibilidad de hacer que estos elementos se oculten (con varias opciones), lo que más nos interesa es la forma que tienen de ocupar el espacio, habiendo dos posibilidades:

Se pueden aplicar estilos a cualquiera de los elementos existentes en (X)HTML. Cuando se trata de aplicar estilo a una sección no definida por un elemento existente, se puede crear dicha sección mediante las etiquetas <div> y <span>, utilizadas para secciones en bloque y en línea respectivamente.

Herencia

Los estilos que se aplican a un documento se heredan desde los elementos ascendentes hacia los descendientes.

De esta forma podemos definir normas generales, que afectarán a toda la estructura del documento, y normas específicas que afectarán únicamente a ciertos elementos.

La prioridad en la aplicación de estilos está definida en función de orden de declaración de los estilos. Es decir aquellos estilos declarados en último lugar tendrán preferencia sobre los declarados anteriormente.

Selectores CSS

Un selector es la parte de la regla CSS que indica sobre qué elemento del código (X)HTML se aplica la regla (<body> <h1> etc..). Existen multitud de forma de seleccionar un elemento concreto, algunas de ellas de una sofisticación muy alta, de forma que podemos controlar genéricamente muchísimos tipos de estructura.

Aquí vamos a hablar solamente de los principales elementos, que son:

El modelo de cuadro

El modelo de cuadro es una herramienta visual de presentación que indica que en torno a cualquier elemento se crea un cuadro que lo contiene, dicho cuadro tiene las siguiente propiedades:

De todas estas propiedades se pueden controlar multitud de aspectos (colores, tipos de borde, alineaciones, etc…) que escapan al objeto de esta conferencia, pero si que vamos a tratar una de sus características principales las dimensiones.

Cuando declaramos un valor para el tamaño de un elemento (width) estamos declarando el tamaño del contenido de dicho elemento. Si posteriormente le damos valores a los respectivos tamaños para el padding, el border y el margin; el tamaño total del cuadro comprende la suma de todas sus partes.

Aunque este es el comportamiento correcto según la especificación CSS, el navegador Explorer 5 y 5.5 hacían una interpretación errónea de este modelo, al incluir el border y el padding en la definición de la propiedad width. Para corregir este fallo en navegadores antiguos se puede recurrir a distintos tipos de recursos.

Hay que hacer una salvedad en cuanto los tamaños definidos para la propiedad margin de un cuadro. Cuando los elementos se sitúen verticalmente uno respecto del otro, los márgenes superior e inferior se superponen, o según indica la especificación CSS, entran en colisión. Por lo tanto la distancia entre los bordes de esos elementos no es la suma de ambos márgenes, sino solamente el tamaño del margen más grande.
Los márgenes que se tocan en los lados izquierdo y derecho no entran en colisión, sino que actúan según lo esperado. La distancia entre los bordes será la suma de los márgenes adyacentes.

VENTAJAS DEL USO DE LA PROGRAMACIÓN AJUSTADA A ESTÁNDARES

Universalidad

La mejor forma de asegurarse que nuestras páginas web sean lo más universales posibles, es decir, que sean mostradas igual sea cual sea el navegador, es precisamente respectar los estándares web, ya que teóricamente es en éstos en los que se basan las compañías a la hora de programas sus aplicaciones.
Además de esta forma se presionará de algún modo a dichas compañías a ser respetuosas con los estándares, es decir, si la mayoría de los desarrolladores web tienen como referencia estos estándares, a las compañías desarrolladoras de software no les quedará otra salida que respetarlos también, si quieren que su producto sea aceptado.

Portabilidad

La simplificación del código, así como el usar posicionamiento mediante CSS hace que la labor de modificar o adaptar un diseño web sea muy sencilla. Si un documento (X)HTML está bien estructurado bastará con cambiar el archivo CSS para que la apariencia del sitio cambie por completo, o se pueda adaptar a distintas plataformas o entornos.

Reducción de peso

La disminución del peso de las páginas al utilizar posicionamiento CSS frente al uso de tablas es más que evidente, y en sitios de alto tráfico justificaría por si sola el migrar todo un sitio web.

Mejora de la indexación en buscadores

Realmente un buscador no es más que un navegador solo texto que envía todo el contenido textual de una web a una base de datos. Estos robots analizan sintácticamente el contenido de los documentos (X)HTML de forma que confieren más importancia a títulos de página, cabeceras, elementos resaltados, etc … de forma que un código con significado será vital a la hora de posicionar nuestra web.

Accesibilidad

El uso de estándares contribuye a que nuestros sitios web sean más accsibles, este punto de la conferencia lo desarrollará Mariano Klein

Borja Delgado :: DMSTK.org // ORANGESIDE.org