Usando atributos de HTML para dar forma a una página web
En una entrada que hice hace poco se habló de flotar imágenes dentro de una página. El método que recomendamos –sin obligación alguna—es utilizar CSS en vez de utilizar los atributos de HTML. Existen varias razones por las cuales los profesionales de este campo no usan atributos de HTML en sus proyectos para tocar aspectos de una página web:
- Separar el contenido de la presentación.
- Mayor control y flexibilidad de cambios.
- Más posibilidades de posicionamiento que un simple
right,leftybaseline. - Menos código
Separar el contenido de la presentación
El concepto es simple y beneficioso, tanto para el programador, diseñador, jefe de proyecto, gestor de contenidos como para el cliente que utiliza la página. Separar el contenido en una capa de desarrollo y la presentación por otra permite al equipo trabajar de una forma más flexible. El gestor de contenidos escribe y no tiene porque diseñar. El programador pone etiquetas genéricas y el diseñador con lo que tiene da forma y vida al tema. Ninguno de los tres tiene que aprenderse demasiado la profesión del otro y los proyectos saldrán igual.
Los proyectos son independientes desde el primer nivel (el interno) haciendo de éste un lugar ideal para el paso de nuevos talentos. Por ejemplo, si todo está separado, pueden entrar nuevos programadores a trabajar en el proyecto sin tener que aprenderse grandes detalles de diseño o normas gráficas.
Mayor control y flexibilidad de cambios
Si no se separa el contenido de la presentación pueden aparecer problemas muy comunes. La falta de control hace que existan variaciones gráficas y de estructura. Con el paso del tiempo, se pueden ver diferentes versiones de material escrito con etiquetas de HTML de varios trabajadores, cada una a su rollo sin seguir una línea. El control visual pasa en manos de todo un equipo en vez de una persona encargada y con expertise.
Si no se depende de los atributos de HTML se pueden realizar cambios masivos con resultados increíbles. Fijaros en esta web y verán que las dos mil y pico notas están con la misma línea gráfica.
Más posibilidades de posicionamiento que un simple right, left y baseline
Los atributos de HTML no te permiten hacer de forma resumida y ordenada cambios visuales significativos. Además de llenar la página una y otra vez con más bytes de texto que puede ser sustituido con una simple regla en una hoja de estilos que se guardará en el cache del navegador de cada persona, ahorrando cientos de megas de ancho de banda y acelerando la descarga de la página. Volviendo al tema de posibilidades, con una clase se puede hacer más cosas que flotar una imagen hacia una dirección. Se puede poner color de fondo, tamaños, márgenes, naturaleza de las etiquetas, bordes, almohadillas, contenido dinámico, posicionarse de forma fija, relativa, etc.
Menos código
¿Se imaginan una página que tiene 300 fotos listadas y todas con atributos de carácter visual? Cuanto código, cuánto trabajo si debes hacerlo a mano. Las páginas que separan el contenido de la presentación siempre pesan menos, siempre tienen menos código encima y son más legibles para corregir o hacer nuevas cosas. No es lo mismo:
<img src="/images/neng.png" alt="Foto" width="51" width="51" valign="top" align="center" border="1" title="¡que pasa neng!" />Que esto:
<img src="/images/neng.png" alt="Foto" class="icon" title="¡que pasa neng!" />Podrán observar una cantidad extra de información en el primer ejemplo que luego será repetida la cantidad de veces necesaria en todo el sitio. El segundo en cambio, depende sólo de un valor para tener reacciones gráficas: class="icon".
Algunas entradas que he escrito sobre este tema:
8 Respuestas a la entrada “Usando atributos de HTML para dar forma a una página web”
Escrito por Topopardo
Agosto 2nd, 2005 at 10:14 am
Me encanta que estés volviendo a esta serie de artículos técnicos y de opinión. Si me permites la crítica, en los últimos meses habías bajado un poco el listón, pero lo estás recuperando muy rápidamente
Escrito por AlmaOscura
Agosto 2nd, 2005 at 1:40 pm
Opino lo mismo.
Me enganché a esta bitácora por los artículos de diseño, estándares, etc. que se han dejado ver poco en los últimos meses.
Me alegro de que hayan vuelto de nuevo.
Escrito por ^_^
Agosto 2nd, 2005 at 5:03 pm
Suscribo lo dicho por Todopardo #1 y AlmaOscura #2
Aunque creo que hierras al hablar de html y css para conseguir la separación de contenido y presentación. Si realmente quieres conseguir esa separación lo que se debe usar es xml y xslt. Lástima que esta tecnologia este tan lejos de ser usada masivamente.
No dudo que el uso de tecnología estandar sea beneficioso para el proyecto pero la forma que has elegido para presentar sus ventajas deja bastante que desear. Para empezar, dices que ninguno de los tres tiene que aprenderse demasiado de la profesión del otro. Esto es falso porque si cualquiera de los 3 quiere evolucionar debe preocuparse de entender como afectan el trabajo de los demás al suyo propio. Y así conseguir ampliar el abanico de resultados a los que se aspira. En todo caso para que cada cual se preocupe de lo suyo. El proyecto ha de disponer de un detallado libro de estilo.
“Menos código” Hombre el codigo que lleve es el que tiene que llevar class=columnaDerecha no parece un buen nombre para una clase generica pero para un diseño concreto podría ser el nombre perfecto y mejor que class=colRigth que sino con aquello de es menos codigo acabaremos todos con class=q1…qn y no de eso no se trata.
“Fijaros en esta web y verán que las dos mil y pico notas están con la misma línea gráfica.” Mal ejemplo, si tu bitacora presenta los contenidos con el mismo look no se debe al uso exclusivo de estandares sino más bien al uso de un CMS que te premite con gran facilidad cambiar ese look que quieres en este sitio. La prueba más evidente es que por ejemplo desde aquel look líquido de color naranja que tenias a 2 columnas con un simple cambio de css no podrías ser capaz de llegar a este otro diseño a 3 columnas. Es más si no me equivoco hace un par de años el contenido de las columnas era lo primero que aparecia en el html. Has evolucionado y lo has cambiado pero eso no hace este formato más correcto que el anterior.
En fin no creo que el uso de atributos, que son de hecho válidos dentro del HTML, sea una mala idea. Tan solo es algo que tiene que ver con el proyecto en si mismo. Usar atributos allí no es más que una forma más. Y se ha de elegir aquella que más nos convenga para cada situación.
Escrito por mini-d
Agosto 2nd, 2005 at 6:29 pm
_ te respondo. Creo que me he expresado mal. Separar el contenido de la presentación, en el caso de este sitio es ideal. Cuando me refieron a separar el contenido de la presentación me refiero que, con una plantilla logro que 2000 y pico de notas se vean con una línea visual muy uniforme. O sea, los resquicios del tipo: menu derecha contenido, tres menus y un div de contenido es sólo otra cuestión.
No es un gran esfuerzo montar un diseño totalmente alternativo al que me ofrece un weblog, porque no tengo que modificar muchas cosas.
Por ejemplo, ahora estoy haciendo la versión 2 de mercadelia, créeme he tocado código XHTML unicamente para reemplazar información que aparecerá. El resto es puro retoque de CSS.
El concepto de separar el contenido de la presentación es meramente una forma de trabajar y de montar algo. Siempre tocaras estructuras en ambas partes, pero será insignificante.
Por lo de aprender, eso es otro tema que podemos discutir. Por ejemplo, siempre sirve tener un conocimiento adicional del normal, te permite entender lo que te hablan los programadores y otros. Pero nunca te pondrás a programar PHP por el programador, ni el programador tendrá que instalarse Photoshop y ponerse a diseñar. No es su tarea.
Saludos!
Escrito por show
Agosto 2nd, 2005 at 7:07 pm
Todo el mundo recomienda lo mismo, el html sólo es semántico y el CSS lo hace bonito.
El problema es que pocos hacen caso.
Escrito por viktor
Agosto 2nd, 2005 at 11:26 pm
creo que si se debe estandarizar los nombres de algunas clases e identificadores, ya que a pesar de dar “libertad” a la hora de nombrarlas muchos exageran o nombran de cierta forma que a la hora del diseño la columna derecha quedó en la izquierda o se nombra columna derecha 2 (???) como alguna vez vi en un sitio.
más orden en la estructura y el nombrado de las clases y los Ids son siempre recomendados
saludos
Escrito por Federico
Agosto 3rd, 2005 at 1:15 am
«estandarizar los nombres de algunas clases e identificadores».
Eso se llama microformatos
Escrito por Chema
Agosto 3rd, 2005 at 6:00 pm
¿Alguien sabe cómo se podrían poner pies a las fotos utilizando CSS y HTML, sin tener que echar mano de tablas?