En primer lugar, ¡no te apresures a empezar! Haz dos preparativos mentales antes de hacer cualquier cosa. Esto es lo más importante para tu proceso de aprendizaje:
El aprendizaje lleva tiempo y debe hacerse paso a paso;
Habrá contratiempos en el camino.
Pero no está solo: muchos de nosotros estamos invirtiendo en aprender y utilizar estándares web. Hay una comunidad en constante expansión para ayudarlo a aprender más fácilmente, veteranos que han tenido muchas dificultades para aprender técnicas y técnicas, y recién llegados afortunados (incluido yo mismo) que se beneficiarán de su sudor y lágrimas.
Cuando finalmente domine el uso de métodos de diseño basados en estándares web (haciendo que esos métodos tradicionales basados en tablas parezcan eclipsados), mirando hacia atrás, se sorprenderá de que diseñar páginas con CSS no es tan difícil. Ah, por supuesto, si los navegadores convencionales tuvieran un mejor soporte para algunas operaciones en la especificación CSS2, en realidad podría ser más fácil de usar.
Bueno, parece que estoy un poco fuera de tema.
Entonces, comencemos de inmediato con la información realmente útil. En primer lugar, compre una copia de "Diseñar con estándares web" (Nota 1), no lo piense demasiado, hágalo de inmediato. ¿Ya tienes uno? Bueno, léelo ahora y no dejes que acumule polvo. Cada punto que quiero resaltar se explica en detalle en el libro. El libro se divide en dos partes iguales, un manifiesto (por qué deberías hacer lo que haces) y un tutorial (cómo lo haces). Esto puede resultarle útil.
Ahora, lo primero es establecer un concepto de sistema ideológico de XHTML, ya sea que elija HTML4.01 o Una tarea alucinante), todos los documentos comienzan con la selección de un DOCTYPE. Decirle al navegador qué lenguaje de marcado utiliza su documento evitará errores de rendimiento innecesarios que, de otro modo, lo volverían loco con resultados deficientes en la visualización de la página. Por ejemplo: si quiero volar a Chicago, debo informar a la agencia de viajes adónde quiero ir; de lo contrario, puedo volar a Viena sin rumbo fijo. Para mostrar HTML o XHTML, primero debe decirle al navegador que configurar DOCTYPE garantiza que llegue al "destino".
Próximo objetivo: logotipos formateados rigurosamente. Esto es muy fácil de dominar. Cita todos los atributos (por ejemplo: <a href="link">); anida las etiquetas correctamente; cierra todas las etiquetas abiertas (por ejemplo: <input type="text" />). Cada logotipo o elemento debe estar cerrado.
Nota rápida: no sé cuándo las etiquetas se convirtieron en elementos. Tienen el mismo significado pero diferentes formas de decirlo. Como sea que los llames, el nombre correcto parece ser "elementos" ahora, tal vez fue así al principio, no lo sé y nadie me lo dijo.
De todos modos, cada elemento debe cerrarse correctamente. Si usa HTML4.01, puede ignorar elementos individuales como <br>, <hr> y <input>. Si usa XHTML, los elementos individuales también deben cerrarse agregando una barra al final, por ejemplo: <br. > se convierte en<br />.
A continuación, hay una regla un tanto confusa sobre los atributos XHTML: todos los atributos deben tener un valor y, si no hay ningún valor, se utiliza el valor en sí. Por ejemplo <tipo de entrada="radio" marcado="marcado" />. En HTML4.01 el valor marcado no es obligatorio, pero en XHTML sí lo es.
Finalmente, XHTML requiere que escriba todo el código en minúsculas. HTML no distingue entre mayúsculas y minúsculas, pero XHTML sí y sigue las reglas de la sintaxis XML.
¡Eso es todo sobre los cambios de logotipo! ¡Ya lo sabes todo! Respira hondo, bebe una cerveza y relájate. Porque ese es sólo el primer paso.
Sección 2
Ahora, comenzamos a aprender a escribir HTML/XHTMLL correcto y validarlos en el validador (validador) de la organización W3. Si lo escribiste correctamente, verás un mensaje de éxito con texto amarillo sobre fondo azul. Intenta que te guste esta combinación de color y fuente, será tu mejor amiga.
¿Por qué es tan importante la verificación? ¿Importa? Porque los logotipos mal escritos (aleatorios, imprecisos) traerán una total imprevisibilidad. La "vida o muerte" de una página depende completamente del método de manejo de errores del navegador. Aunque la mayoría de los navegadores también admiten logotipos mal escritos, este es un hábito incorrecto. Hola, ¿qué nos acostumbra a los no estándares? La primera razón es la guerra de los navegadores. En 1995, Microsoft pudo competir y ganar cuota de mercado frente a Netscape porque IE manejaba los errores de las páginas web exactamente igual que Netscape.
Otra perspectiva: la validación le ayuda a encontrar código erróneo y garantiza que sus páginas se comporten de forma más coherente. Verificar el código es lo primero que hago al depurar un diseño, y creo que usted también lo hará.
Bien, cuando verifiques tu primer sitio por primera vez, probablemente tendrás que soportar setenta u ochenta mensajes de error increíbles. Desafortunadamente, si bien la suma de verificación es útil, no es perfecta y solo la mantienen unos pocos voluntarios. La buena noticia es que esos errores están relacionados. Si descubre que falta una etiqueta </p> y la corrige, es probable que los siguientes 24 errores desaparezcan. En resumen, puede parecer que el resultado de la verificación es malo, pero a menudo no lo es.
Ahora ha pasado la validación y su código cumple. En este punto, usted se adhiere a una pauta estricta pero, en primer lugar, no comprende completamente por qué lo hace.
Sección 3 El siguiente paso es refactorizar la documentación que ha creado utilizando marcas bien formadas, eliminando los atributos de la capa de presentación que cada vez más se enumeran como "obsoletos" en los DOCTYPE recientes y colocándolos en un archivo separado. Ésta es la controvertida "separación de rendimiento y estructura", razón por la cual CSS es tan importante.
He aquí una analogía: su texto es contenido. El contenido está completo, pero no hay indicios de la estructura del contenido (como espacios, secciones, títulos, listas, etc.). Lo que obtiene es simplemente un texto desordenado, que no es nada fácil de usar. La capa estructural es adicional. Se agregan elementos individuales al documento para transmitir información estructural adicional para dividir el texto desordenado y hacerlo más lógico y organizado. Pero esos elementos no controlan la apariencia predeterminada del texto. Por ejemplo, a menudo encontrará que el título de la primera página es más grande que la fuente del texto. Esto no es una función de la estructura.
Es hora de que aparezca la "capa de presentación". La representación es una sugerencia de formato, que indica que el título de la primera página debe estar en rojo, en cursiva y que el tamaño de fuente debe ser el 150% del cuerpo de la fuente. La capa de presentación es una capa adicional por encima de la capa de estructura del documento. CSS pertenece a la capa de presentación y puede transformar documentos en formas asombrosas mediante etiquetas simples en el documento; visite CSS Zen Garden para ver ejemplos.
Entonces, ¿cuál es la mejor manera de separar el desempeño de la estructura? Tomemos como ejemplo un fragmento de código tradicional, que contiene elementos o atributos HTML utilizados para proporcionar una presentación. Es hora de eliminar esas etiquetas bgcolors y <center>. Hagamos una prueba informal:
En el siguiente código de demostración, ¿qué atributos y etiquetas de presentación deberían eliminarse?
<center><h1><font face="Verdana">Este es mi primer sitio web.</font></h1></center> <table border="0" cellpadding="0"cellspacing="0" > <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <td bgcolor="#ffffff" valign="top" align="center">< p>Vienen a llevarme...</p></td>
¿Estás listo con tu respuesta? Bien, el resultado correcto se enumera a continuación, que es un código estructurado limpio sin rastros de rendimiento:
<h1>Este es mi primer sitio web.</h1> <table> <body> <td><p>Vienen a llevarme...</p></td>
¿eso es todo? Eso es todo.
Aunque este código no se ajusta explícitamente a ninguna especificación, la mayor importancia de esta separación es que se utilizan los elementos correctos. El uso del diseño de tablas es un problema secundario. En el ejemplo anterior, el método de uso de tablas es incorrecto. Desde una perspectiva prudente y a largo plazo, los elementos <table> y <td> deben eliminarse. Aunque su uso está en desuso, las tablas siguen siendo muy útiles y se pueden usar cuando sea apropiado: en datos organizados en forma de tabla.
Bueno, hemos eliminado el formato de nuestras páginas, ¡hurra! ¿Qué más haces ahora? Eso solo deja algunos elementos feos, texto y líneas en fuente Times-New-Roman. No es nada gracioso, ¿dónde están las páginas brillantes y hermosas que nos prometieron?
Volviendo al ejemplo del Jardín Zen, ¿ves el bonito diseño? ¿Qué tan diferentes se ven? El punto es: debajo de ese hermoso diseño está el mismo XHTML que es tan aburrido como el documento sin formato que acabas de crear. ¿No es así?
De hecho, lo aburrido y lo feo tiene una buena base. Es posible que hayas notado que este HTML sin formato se ve tan mal como la web en 1994. Con algunas excepciones, estos elementos son tan antiguos como la propia web, ya que <h2> existe desde los días del navegador Mosaic.
Los beneficios ciertamente no terminan ahí, con facilidad de uso (para esas necesidades especiales), SEO integrado, costos reducidos de ancho de banda, etc. Jeffrey Veen ya había escrito "El valor empresarial de los estándares web" el año pasado, y Roger Johansson también explicó las técnicas y beneficios del diseño basado en estándares en su reciente "Desarrollo con estándares web".
CSS es compatible con los principales navegadores actuales y existen innumerables recursos para ayudar a aprender la sintaxis de CSS, el diseño basado en CSS y técnicas avanzadas. Recomiendo algunos buenos: westCiv ofrece un curso CSS gratuito y continuo que le ayudará a empezar y dominarlo rápidamente. Andrew Fernandez ha creado una enorme lista de recursos CSS que le resultarán útiles tanto si es nuevo en CSS como si no. Eric Meyer ha escrito un paquete de libros que puede guardar en su escritorio y consultar en cualquier momento. Estos libros incluyen Eric Meyer sobre CSS, basado en casos, y Más Eric Meyer sobre CSS. El libro de referencia de CSS: "La guía definitiva de CSS" publicado por O'Reilly Publishing House se publicó para la segunda edición y será mejor que lo guarde en su escritorio. También están disponibles "The Designer's Edge" de Molly Holzschlag y "Designing CSS Web Pages" de Chris Schmitt.
Entrar en detalles sobre la aplicación de CSS y la creación de diseños llevaría demasiado tiempo. No diré mucho más. El anterior es el consejo que puedo dar a los diseñadores que están empezando a prestar atención a los estándares web. Lea y comparta sus opiniones y crezcamos como comunidad. Muchos de nosotros estamos promoviendo activamente los estándares web. Aprovéchelo.
Notas 1. "Designing With Web Standards" es un libro escrito por Zeldman para promover los estándares web. La versión china se presentó y publicó en mayo de 2004. El libro se titula "Reconstrucción de sitios web: diseño con estándares web".