CSS, XHTML y otras hierbas

[AKB]

Sorprendido por la novedad
Siempre he pensado (con admiración) que eso de diseñar usando puro CSS y XHTML estricto era cosa de puristas, gente comprometida con los standards y con demasiado tiempo libre, ya que por la escasa información al respecto que había leído, era impresionante la cantidad de especificaciones y hacks necesarios dependiendo del navegador utilizado. Aún así, le veo un par de ventajas prácticas:
- Standarización de diseño: Independencia de navegador, todos los potenciales “clientes” de nuestra página web la verán exactamente igual.
- Libertad de código: Con el CSS podremos situar las capas en el orden que queramos dentro del código, sin afectar al diseño. Esto se revela de importancia SUMA para Google y demás motores de búsqueda, que examinan el código de arriba abajo ignorando el contenido después de x bytes.
- Compresión de código: El CSS además nos ahorra un montón de código repetitivo a la hora de aplicar estilos a enlaces, listas, menús, etc, lo que redunda en menor peso de las páginas y menos “basura” también para los motores de búsqueda.
La cruda realidad práctica
Aunque en gran parte lo achaco a mi total desconocimiento de las especificaciones XHTML y CSS, ésta ha sido mi primera experiencia con dichos standards… y no podía ser más desesperanzadora.
He tomado para las pruebas mi último proyecto, un buscador de cursos alojado en http://www.portalformativo.com, y he intentado hacer una réplica de la home con XHTML 1.0 Strict y CSS.
La url para las pruebas ha sido http://www.portalformativo.com/nuevopf.
Tras 4 horas de pruebas, lectura de documentación, calma de nervios, etc, he conseguido que el logo, el banner, el menú superior y el menú lateral se vean bien en Internet Explorer (bien significa no exacto a cómo lo tenía antes, pero muy similar) y valide como XHTML 1.0 Strict y CSS
Ni que decir tiene que un trabajo de 4 horas para tan poco resultado (que me habia llevado menos de media hora usando tablas y otras guarradas similares) no es demasiado práctico en un entorno de producción, pero he intentado consolarme con las ventajas antes mencionadas, dando la prueba más o menos por satisfactoria.
Hasta que he abierto la página en Mozilla Firefox 0.9.3…
Si algo me jode es sentirme estafado… ¿ Que pasa ? ¿ Por qué mi nuevo diseño “válido” se ve totalmente destrozado en Mozilla cuando antes, con html básico se veía cuasi idéntico ? ¿ Qué hago mal ? ¿ Donde está esa idea de la standarización para todos los navegadores ? ¿ O es que soy yo especialmente idiota ?
Desde luego, seguro que hay alguna buena explicación para esto. Mucha gente que conozco apuesta por estos nuevos standard, y no creo que todos estén equivocados… pero desde luego, después de dos horas más de investigación, todavia no sé por qué mi web se ve distinta en cada navegador, mientras que sigue validando como una campeona, burlándose de mi…
¿ alguna idea ?
¿ o mejor abandono y sigo a lo sucio pero práctico como siempre he hecho ?
un poquito de por favor… hasta los autodidactas tenemos nuestro orgullito…

http://inquieto.infosoporte.com/inde...bas/trackback/

[KnowDemon]

Saludos,

Me da gusto que te hayas atrevido a experimentar con CSS. Bueno, vamos al problema.

He notado que en tu código CSS usas cosas como esta:

\width: 300px;
w\idth: 320px;

Hasta donde yo se, eso está simplemente MAL. No puedes comentar así. No forma parte de la sintaxis CSS y algunos navegadores ignoran las sentencias que van delante del error. (Lo increíble es que haciendo pruebas, !!!al menos IE y Gecko lo interpretan!!! y no entiendo porque.) Debes usar algo como:

/*Comentario*/

(barra asterisco) para iniciar comentario.
(asterisco barra) para cerrar el comentario.

El validador se brinca las diagonales, él cree que defines varias veces el atributo, los navegadores no... (o eso creía)

Te aconsejo que si realmente deseas profundizar en el manejo de CSS, antes de intentar portar un diseño complicado de 'html tradicional', intentes cosas más 'didacticas': Diseño a dos columnas, a tres columnas, cabecera con columnas, centrar cajas (horizontal, vertical, y ambas.) Todo para que te acostumbres a la manera en que responden los diferentes navegadores a las sentencias.

Todo y más de lo que se puede hacer con 'html tradicional' se puede hacer aplicando CSS. PERO debes cambiar tu forma de pensar al diseñar. No es simplemente cambiar los atributos por las propiedades homólogas. Hay cosas que se consigen por caminos totalmente diferentes, obteniendo los mismos resultados.

En tu caso lo más seguro es que sea Mozilla y no IE el que este interpretando corrrectamente lasa sentencias CSS.

Te recomiendo:

http://www.tierradenomadas.com/indice.php?tallerweb

Sobre todo la sección de maquetación CSS, y:

http://www.sidar.org/recur/desdi/mcss/manual/indice.php

El más completo manual de CSS en español que haya visto.

Paciencia...

[TheGhost]

Es cierto, hace una semana, al igual que tu (AKB), empeze a reemplazar las tablas por capas. Tambien me llevo horas comprender, pero como me dijeron algunos por ahi, cometi el error de guiarme con el IE. Ya que guiandome de ese navegador, al finalizar mi trabajo, me fije que tanto en el mozilla, opera y otros...el completo diseño estaba por los suelos.Ten en cuenta que el IE tiene errores como bugs y demas.

Como bien dice KnowDemon, lo que hay que cambiar no tanto los codigos sino la forma de pensar para realizar la web.

Ahorita mismo me estoy leyendo esos 2 enlaces que dejo KnowDemon, y me doy cuenta de mi error.

Lo cual me deja una incognita...mudarse a XHTML implica definitivamente salirse de las tablas??

Saludos
The Ghost

[KnowDemon]

Iniciado por TheGhost

Lo cual me deja una incognita...mudarse a XHTML implica definitivamente salirse de las tablas??

Saludos
The Ghost

¡Nunca han sido necesarias las tablas! Bueno, eso es a medias. El problema es que el HTML es un lenguaje descriptor de documentos. Permite dar estructura lógica a las cosas. JAMAS estuvo hecho para diseñar. La gente, en su afán de conseguir una apariencia agradable comenzo ha aprovecharse de la forma en que los navegadores interpretaban las sentencias de estructura, y las comenzaron a usar para dar apariencia. Y se fue olvidando poco a poco su función descriptora.

En la actualidad es posible separar la estructura de la apariencia y definir, la una en el código HTML, la otra en los CSS. ¿Y por qué es importante separar la estructura de la presentación? Por que la información se vuelve más accesible y nos da un potencial de manipulación que es impensable con datos desordenados. Es como comparar un archivero lleno de montones de hojas escritas a máquina y una base de datos bien diseñada. La información se vuelve independiente del dispositivo con el cual se accesa.

Imagina que la gente realmente usara los elementos q o blockquote para definir citas. Podríamos hacer un buscador de citas. O que tal los elementos h1 ... h6 podríamos buscar, ordenar, o hacer lo que sea, por título. Podríamos saber que algo es un párrafo o una abreviación sin tener que verlo. Las personas con discapacidades visuales podrían accesar a nuestra información con los equipos adecuados, que sabrían decirles donde acaba una sección o termina una cita. (Además les podrían aclarar el origen de la misma, etc.)

En la actualidad las CSS permite obtener la apariencia que deseemos y estructurar el HTML de una manera conveniente. Todas las herramientas las tenemos a la mano. ¿Por qué no usarlas? De lo que se trata es de transmitir información. Niega que hay sitios que te han gustado mucho, no por su apariencia, más bien simplona, sino por su información y contenido.

[AKB]

KnowDemon, ante todo gracias por las url de referencia, estoy ya empollando teoría en ellas, respecto a los \width: 300px; y w\idth: 320px; son "hacks" de css que he leido por ahí que hacen que distintos navegadores lean uno u otro valor, como tú bien dices no entiendo bien el trasfondo, aunque sí más o menos cómo lo reconoce cada navegador, y por eso lo incluí.

Respecto a la separación de contenido y diseño, estoy totalmente de acuerdo, creo que lo primero que hice en php fue crear un sistema de templates, hoy por hoy lo tengo tan a mi gusto que no lo cambio ni por smarty. Sin embargo las tablas son necesarias en muchos casos, para su función original, tabular datos, y por ahora no he visto gran forma de hacerlo con css/xhtml (no dudo que seguro hay alguna). Por el momento se me ocurre hacer estilos, capas, con posicionamiento, para emular las tablas, el único inconveniente que le veo es que eso sólo serviría para tablas de tamaño (cols y rows) conocido, pero que no serviría para tablas que generemos por ejemplo con php, con datos dinámicos de los que no siempre estaremos seguros de su tamaño. Tendré que leer más aún. :)

De nuevo, gracias por vuestra ayuda.

[KnowDemon]

Tal vez haya una malinterpretación... nadie ha dicho que las tablas no deban usarse. Hay que usarlas, pero para lo que fueron hechas: presentar datos tabulados. Mostrarlos con CSS si está en chino.

Además las Tablas tienen multitud de elementos y atributos que permiten enriquecer su información lógica y estructural: summary, th, colgroup, tbody, caption, etc. que generalmente las personas no ocupan.

[sir_notos]

Line : 0 font-family: You are encouraged to offer a generic family as a last alternative

No saves como arreglar ese Warning en CSS?
je te doy el tip

Deves ofrecer una alternativa de fuente como ultima opcion ;)

Osea una fuente que este en todos los OS

Tu errores estan en
.menutitle,.submenu
al final del font-family:; Añade 'sans-serif' esta fuente.

-> font-family : verdana, arial, sans-serif;

Y ya no te va a dar Warnings

[andres_73]

hola, visité la página http://portalformativo.com/nuevopf/ de akb.

obviamente fui de cabeza al código fuente y una duda me carcome ... no encuentro ni una etiqueta "<br>"!!, sin embargo se ve claramente que hay cosas debajo de otras (y no me refiero a los submenús).

revisé los archivos .css y allí están definidos los atributos de las diferentes capas, pero no encontré en ningún caso la posición vertical de las mismas, por lo que me sigo carcomiendo.

uf... me están haciendo fumar!!!, por favor contribuyan con mis pulmones e indíquenme en que parte del código "dice" que hay cosas que van debajo de otras!

muchas gracias!!
andrés (el carcomido y futuro ex fumador)

[KnowDemon]

UFFF!!! Pues va ha estar difícil explicarlo así nomás... Sería mejor que tu mismo empezaras a experimentar con las CSS. Creo que te vas a sorprender tanto o más que lo que ya estas con la falta de <br>. Pero te puedo decir que se puede construir una Web completa sin usar un solo <br>. Si acaso, para hacer un salto de línea en el TEXTO, que es su función original.

Recuerda lo que dije arriba: para diseñar con CSS hay que cambiar tu manera de pensar...

Puedes revisar los vínculos que puse arriba también para empezar...