Tercer artículo de la serie Estandarizando el Web, donde se sientan las bases de lo que significa dicha estandarización.
Esta es la tercera parte de una serie de artículos sobre estándares que publicaremos en Maestrosdelweb, Aqui puedes ver la lista completa
Si vamos a pasar los siguientes meses hablando de "Estandarización", lo más prudente es que estandaricemos nuestro concepto, lo que significa, lo que implica y la responsabilidad que ello conlleva.
La definición
Podría hacerte perder algunos minutos dilucidando sobre la deficición conceptual de la estandarización, pero creo que es mejor que le deje eso a los expertos…
Su aplicación en el WEB
Estandarizar no significa que todas las páginas deban lucir igual, ni siquiera que las secciones de un sitio deban llamarse de una o de otra manera, significa que las páginas web deben construirse en base a unas normas.
Estas normas son establecidas y controladas por un grupo de expertos, este equipo se conoce como el WWW Consortium, W3C son sus siglas en inglés. Esta es su página, y en ella se encuentran las definiciones de los diversos tipos de documentos, lenguajes y sistemas unificados que controlan la red de redes.
Sin embargo dichas normas rara vez son seguidas al pie de la letra por los desarrolladores de páginas, excepción hecha de las grandes firmas internacionales… ¿será por eso que son grandes e internacionales?. Y lo más irónico es que estas normas están disponibles para TODOS. Así que ¿por que no apegarnos a ellas y ampliar nuestras posibilidades de competir con los grandes?
¿Estandarizarme significa que ahora debo usar XHTML y CSS? – ¡NO!
Bueno, al menos NO NECESARIAMENTE, estandarizarse significa utilizar las herramientas en la forma y para el fin para el que fueron creadas. Puedes usar HTML 1.0, y si lo usas tal como lo dicta la definición del lenguaje… estarás estandarizado.
ENTONCES PARA QUE ME PONGO A APRENDER XHTML Y CSS, podrías estarte preguntando ahora, y la respuesta es: para que aproveches todas las virtudes de estos lenguajes, entre ellas la separación de contenido y presentación, pues ya hemos hablado de esta carencia en el HTML. Otra buena razón es que cada día hay más empresas que se están tomando en serio su presencia en internet, y buscan apoyarse de casas desarrolladoras que dominen estos lenguajes. Tal vez esta última sea mas contundente para tu bolsillo 😉
Lo prometido es deuda
En mi anterior artículo te ofrecí hablar sobre el uso correcto de las etiquetas, y eso es un punto crucial durante la estandarización, así que vayamos al grano, estas son algunas de las etiquetas peor usadas por los desarrolladores, incluso por muchos que ya dominan XHTML y CSS.
<p>
Esta etiqueta se debe usar para escribir párrafos. El mal uso de esta etiqueta no es por que sea usada para otras cosas, sino porque muchas veces ni siquiera se usa. El desarrollador simplemente comienza a meter texto donde mejor le conviene, dentro de una celda <td>, despues de un título, o ahí donde caiga. Y también es común ver <p>’s usados para escribir encabezados, notas, etc. La regla: Si vas a escribir un párrafo, mételo en un <p>.
<table>
Las tablas fueron creadas para agregar contenido tabular en una página, no para acomodar elementos gráficos, ni para distribuir el contenido en tu layout. He tenido el infortunio de encontrarme con páginas que para conseguir su diseño final usan hasta 30 tablas anidadas. Recuerda que los navegadores consideran todo lo que está dentro de una tabla como un solo elemento, y no lo muestran hasta que se ha cargado por completo la tabla. Tus visitantes pueden ir a tomarse un café antes de que termine de cargar todo tu contenido.
<ul>
Este elemento es muy peculiar, pues su MAL USO comenzó con la introducción de las hojas de estilo. Hoy en día es muy común que los diseñadores que usan CSS desarrollen sus menús usando listas desordenadas como base. La regla: Usa las listas para listar elementos, no para construir menús.
<div>
Esta etiqueta tiene un fin muy particular, sirve para identificar bloques de información que pertenecen a un mismo entorno lógico ó jerárquico. Por ejemplo <div id="menu_principal"> ó <div id="articulos">. Desafortunadamente es muy común verlo utilizado para colorear backgrounds, o para escribir encabezados.La regla: Los DIV dividen tu página en sectores con uso ó contenido similar.
<h1>
Esta, así como todas las etiquetas de header (h1 al h6), son de las más útiles, pero también de las menos usadas, tal vez porque sin las hojas de estilo era muy dificil darles un formato atractivo, pero ahora ya no hay pretexto. La regla: Usa los niveles de encabezados para estructurar tu documento de forma lógica. Ejemplo: h1 para el título principal de cada sección, h2 para los sub-temas principales, h3 para indicar categorías de ese sub-tema, h4 al h6 para dar formato a los encabezados y sub-encabezados de tus artículos. El objetivo es que te ayuden a visualizar la estructura de tu documento.
Bueno, por el momento me despido, te veo en el próximo episodio de este drama de la vida real… Estandarizando el Web.
Saludos, y hasta la próxima!
Me llama la atención la explicación de las etiquetas donde mencionas que está mal utilizado el UL para crear menús. En este caso que sería la correcto entonces? Usar DIVs para separar cada uno de los items en un menú?
Todo dependerá del tipo de menú.
Pero si definieramos menú como grupo de ligas, pues ahí está la respuesta… un menú es un conjunto de LIGAS ““. Por lo tanto lo más básico o apegado a la definición sería un conjunto de ‘s agrupados en un.
Item 1
Item 2
Item 3
Item 4
Suena lógico, no?
Recordemos que UL es una lista desordenada (o mejor dicho sin orden) que tiene un uso muy específico. Listar elementos de una lista usando viñetas.
Lo primero que nos debe dar la pauta para ver que estamos mal-usando un elemento es que para obtener el resultado final debemos quitarle sus características mas representativas…
Si me compro una camioneta de pasajeros y para poder usarla en el reparto de Tomate debo llevarla a que le quiten el techo de la parte trasera, quiere decir que de entrada escogí mal el tipo de camioneta, no? Lo ideal en ese caso es comprarse una pick-up y usarla tal cual sale de la agencia.
Lo mismo con las viñetas, si para que me den el servicio que busco debo quitarle las viñetas y el indentado… bueno, pues algo malo sucedió al escoger mi elemento… 😉
Todo esto siempre podrá ser tema de discusión. Y mientras haya algo para debatir… habrá razon de ser de foros y comunidades!! 😀
Saludos!
Hola.
En un mensaje que puse en el Foro de (X)HTML, PatomaS me comenta que el DTD que aparece en la página:
http://www.maestrosdelweb.com/editorial/haciaxhtml/
< !DOCTYPE html PUBLIC "-//WC3//DTD HTML 1.0 Transitional//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
debería ser:
< !DOCTYPE html PUBLIC "-//WC3//DTD [COLOR=Red]X[/COLOR]HTML 1.0 Transitional//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Saludos, :adios:
Uy, un pequeño error de dedo…
Efectivamente, voy a corregirlo. Gracias por el typo 😉
Excelente la aclaración de los UL.
Segun con lo que lei div para el posicionamiento del contenido entonces debemos usar div#enlaces para hacer un menu
En versiones anteriores a html 4.01 existia un elemento llamado menu que tenia las misma propiedades que ul si fue desaprobado es por que cumplia la misma funcion que ul ¿no? los menus del w3c
La misma W3c usa ul il para mostrar sus menus
se me hace totalmente correcto usar estas etiquetas mejor preguntarle al validador a ver si tira algun error que diga que li no puede tener
saludos
pues si no es con
Aqui me encontre esto que nos quitara de dudas
el manual del w3c dice:
El elemento DIR (desaprobado) fue diseñado para crear listas multicolumna de directorios. El elemento MENU (desaprobado) fue diseñado para listas de menú de una sola columna. Ambos elementos tienen la misma estructura que UL, y únicamente varía su representación. En la práctica, un agente de usuario representará una lista DIR o MENU exactamente igual que una lista UL.
Recomendamos encarecidamente usar UL en lugar de estos elementos
el enlace http://www.sidar.org/recur/desdi/traduc/es/html401-es/struct/lists.html#h-10.4
Que cada quien le de el diseño que prefiera es por que pasa eso fueron creadas las CSS y en lugar de limitarnos hay que segui experimentando.
saludos
Tienes toda la razón. De hecho en algunos casos yo también he usado UL para crear menus.
Pero si te fijas en el menu izquierdo de w3c, verás que es usado como una lista con viñetas, situación que justifica el uso de UL. Sin embargo el menu principal (arriba) es un
El objetivo es NO MODIFICAR (forzar) las propiedades esenciales de un elemento para lograr cierta apariencia.
Algunos ejemplos de elementos mal forzados para cumplir un cometido distinto al suyo son:
(Una lista con viñetas quitandole las viñetas)
ul {
list-style: none;
text-indent: 0px;
margin: 0px;
}
(Un titulo convertido a texto normal)
h1 {
font-size: 10pt;
font-weight: normal;
display: inline;
}
Como podrás notar, ambos ejemplos cambian por completo las caracteristicas del elemento. Pudiendo usar otras cosas mucho más fácilmente. En el primer caso el elemento UL bien podría ser un
sin cambios, en el segundo podría ser un simple . De esta forma usas menos lineas de CSS, situación que mejorará el rendimiento del sitio y el ancho de banda consumido.
No se trata de validar o no validar, pues al validador no le interesa si por ejemplo usas un
con viñetas para hacer una lista, mientras el CSS sea correcto sintácticamente… eso es cuestión de sentido común, y ganas de hacer las cosas más simples.
Saludos!
😉
Lo que mencionas tiene que ver mas con usabilidad que con estandares, lo mejor seria preguntar en un foro de usabilidad. sobre usar o no viñetas en las listas
Si estubiera mal usar la propiedad none del selector list-style el w3c no hubiera aprobado la recomendacion de las CSS2.1 si no exisitera la propiedad esto seria un ejemplo de mal forzar las listas
list-style-image:url(transparente.gif); pero no es el caso ya que si esta ahi es para usarse
ejemplos de usabilidad en menus usando UL pueden sobrar , lo mejor es romper con los paradigmas que no nos permiten ver mas alla de lo que podemos lograr.
saludos
No estoy de acuerdo, un menu es una lista (en ocasiones aninada) de elementos “a”, el hecho de quitarles las viñetas y el indentado es puramente visual.
Sin embargo se hecha de menos un elemento “menu” en el cual puedas definir funciones mas especificas (horizontal, vertical, anidado, desplegable, ect..) en mi opinion aunque un menu no sea mas que una lista de enlaces el hecho de disponer de un elemento propio permite llamarlo independientemente del resto del contenido (p.e en un medio auditivo el oyente dice menu y automaticamente el lector le vuelve a decir las opciones sin perder el foco de donde se encontraba leyendo).
Siendo una separacion de contenido, no solo incluiria menu sino que ademas incluiria indices automaticos (no empieza a sonar como si quisiera que xhtml fuera como latex XD)
En mi caso, aunque siempre intento utilizar el menor numero de tablas podibles, muchasveces termino con varias tablas aninadas. Si la hay (q no la conozco), me gustaria saber como organizar contenido grafico en sin hacer uso de ellas.
se que es un comentario fuera de tiempo con respecto ala fecha de publicacion de este editorial… pero ahi menciona sobre el mal uso de los ul…
si entran a ver el codigo de esta pagina veran que sus menus de arriba fueron diseñados con
,, hechenle un vistaso..
saludos!!!
mammmela verga
no opino nada
esta pagina no sirve para nada el que la creo es un pobre tonto… no seas tan bruto chamo mejor create una pagina pornografica y ases que te estas metiendo un consolador por el culo…
si no utilizo ul para construir menus entonces que seria lo objetivo
buenas soy un novato en la edicion de paginas web, no me pueden recomendar un buen libro que enseñe como hacer paginas web en bases en los estandares xhtml, css, y dom, uno que no sea solo referencia, sino que te enseñe como manejarlo. Y no si pueda decirnos que paginas son el mejor ejemplo de crear menus sin UL de manera correcta.
Como se puede estandarizar?
que formas existen?
si me pudieran colaborar en eso xfa… Gracias
Por que no le hacen casos a los comentarios ?? alli dice que hacen mal uso de las listas.. uds usan listas para crear menus.. si van a hablar de estandares creo que los que deberian dar el ejemplo son Uds… Gracias…
[…] de las personas que desarrollan sitios webs, no lo hacen como deberían hacerlo, los conceptos de estandarización web y un poco de accesibilidad, se encuentran netamente nulos, y prácticamente como decimos en buen […]
[…] Definiendo Estandarización […]
no mames taba buscando ke putas es estandarizacion y dice puras mamadas
jajajajjajajajajaajjajaj
cojan juicio inmaduros y no hagan perder tiempo malditos imbeciles
[…] páginas deban lucir igual, o que las secciones de un sitio deban llamarse de una o de otra manera. Descargar este archivo Red de portales: ConocimientosWeb – Cursos online – Diario Tecnológico – Zips del […]
[…] tanto los establecidos a nivel de la empresa como los nacionales e internacionales. Estos estándares pueden establecerse sobre el formato de los datos para facilitar su intercambio, pueden ser […]