Prefacio
La primera vez que navegué por Internet utilicé un terminal tonto. En poco tiempo, un monitor monocromático en Minnesota pudo reproducir la película "Monty Python y el Santo Grial" a través de un servidor. No había mouse, ni una buena interfaz de usuario, y mucho menos color de 24 bits. Gopher es la única herramienta disponible. La búsqueda solo puede utilizar Archie y Veronica. Nadie había oído hablar de W3 (World Wide Web) y la web parecía adecuada en ese momento.
Nota del traductor:
1. Terminal tonta. Muy parecido a un PC, pero sin CPU, memoria ni disco duro propios. Las transacciones se procesan a través de un host común.
2.Gofre. Una aplicación cliente/servidor que muestra toda la información al usuario final en forma de menú mediante transferencia FTP, inicio de sesión remoto, búsqueda Archie, etc., lo que permite al usuario explorar una gran cantidad de información. De esta manera, los usuarios no necesitan saber (o ingresar) sus direcciones cuando acceden a los recursos de Internet.
3.Archie es el primer programa que indexa automáticamente archivos de sitios web FTP anónimos en Internet, pero todavía no es un verdadero motor de búsqueda.
4.Veronica es un recurso tipo Gopher que puede utilizar para recuperar todos los elementos del menú que contienen palabras especiales específicas en el espacio Gopher.
Después de un tiempo, un código extraño comenzó a inundar mis resultados de búsqueda. Aún podía leer lo que necesitaba, pero era molesto. Un colega me dijo que era HTML, un lenguaje gráfico para Internet. Había aprendido algunos métodos para intentar filtrar HTML. Posteriormente aparecieron los monitores de 256 colores y la primera versión del navegador Mosaic, y todo empezó a cambiar.
Ha pasado mucho tiempo desde entonces, la tecnología ha mejorado increíblemente y las interfaces web han sido revisadas, repensadas y reinventadas innumerables veces. Desde que comencé a trabajar como diseñador web, he experimentado de primera mano las diversas fases del diseño basado en tablas, los problemas de JavaScript, los problemas de CSS y, lo que es más importante, los estándares web más universalmente aceptados.
Al principio, Internet sólo se creó según las ideas de los geeks (fanáticos de la tecnología). En Internet sólo había contenido puro. No tenían en cuenta los colores de fondo ni las imágenes bonitas. Pero la verdad es que a la gente le gusta ver expresiones más ricas cuando navega. La aparición del método de diseño de tablas resuelve esta dificultad. ¡Podemos controlar el diseño a través de tablas! Todos empezamos a "engañar" al sistema. ¿No podemos hacer una línea delgada de 1 píxel? Simplemente inserte un punto GIF transparente en la fila de la tabla y establezca un color de fondo y ¡listo! ¿No puedes controlar las fuentes? ¡Entonces usa otra etiqueta <font>!
Antes de conocer CSS y los estándares web, había estado diseñando con tablas durante muchos años. El método de diseño de los estándares web es completamente diferente al anterior, es eficiente y encantador. Me enamoré profunda y apasionadamente de los nuevos métodos de diseño. Puede usar código significativo para separar el contenido del diseño, pero aun así mantiene los espacios en blanco y un hermoso diseño. Inmediatamente "me gusta lo nuevo y odio lo viejo" y ya no uso los métodos de diseño antiguos.
Hasta hoy.
Ha habido mucha discusión sobre los estándares web y CSS. Como toda buena palabra clave, se convertirá en el próximo "gran nombre" en la historia del desarrollo de la tecnología web. Comenzó con Dougl como Bowman rediseñando Wired.com y ha seguido evolucionando. En 2003, se publicó el libro "Diseñar con estándares web" escrito por Zeldman, que nos permitió a todos ver la luz. Los diseñadores de todo el mundo abrazaron y aplaudieron el nuevo método de diseño. Está estructurado, es semántico, es rápido y liviano.
Sin embargo, todavía hay algunas personas que todavía usan el método tradicional de diseño de tablas e incluso usan la etiqueta <font>. Dicen que el método tradicional es más fácil, más conveniente para el mantenimiento y el desarrollo rápido. ¿Quién tiene razón?
Decidí hacer un experimento yo mismo para ver cómo cambiaban las cosas y qué método elegimos era mejor.
desafío
Diseñé un sitio web hipotético utilizando software de gráficos. Luego, primero use HTML4.01 para hacerlo, use tablas sin CSS como comparación, luego use XHTML1.0 Transitional para hacerlo, el código se ajusta a las especificaciones de usabilidad y accesibilidad, y usa CSS para evitar tablas tanto como sea posible. (a menos que la tabla se utilice para representar datos tabulares).
El proceso de producción se divide en tres etapas, el proceso se registra en detalle y se comparan los pros y los contras para ver qué obtuvimos. ¿Qué se ha perdido? ¿De qué lado deberíamos estar?
Fase uno: diseñar el sitio
Empecé a diseñar un sitio ficticio. Supongo que estoy creando un sitio web para una organización llamada "Asociación de Observadores de Mariposas". Jaja, este es probablemente mi mejor cliente y no participará en el proceso de diseño. Intenté hacerlo lo más realista posible, imaginando a los usuarios objetivo del sitio web, utilizando un diseño tradicional y fuentes autorizadas.
Quiero que el sitio sea compacto, eficaz y conciso. Además, pensé que debería haber mariposas en la página, así que busqué en todas partes una imagen de mariposa adecuada y pronto encontré una en stock.xchng. La mariposa azul que descansa entre las hojas verdes encaja perfectamente con la imagen del sitio. Después de algún procesamiento y modificación, esta imagen se convierte en el encabezado de nuestra página.
Durante el proceso de diseño, seguí algunos principios de usabilidad. Por ejemplo, intente mantener el tamaño del archivo de imagen lo más pequeño posible. Al principio, planeé usar la fuente Garamond para la navegación. Luego, considerando que la máquina del usuario podría no tener esta fuente, decidí usar la fuente Georgia (esta fuente es similar a Times New Roman y, en el peor de los casos, se puede reemplazar por fuente Times New Roman). Pero para la imagen del encabezado, seguí usando Georgia porque es una imagen.
El texto tiene un fondo gris y usa la fuente Trebuchet MS; las noticias usan la fuente Verdana, que también se ve bien cuando se reduce. Existe una regla general no escrita para utilizar 4 fuentes en un diseño y realmente no estoy de acuerdo con eso.
La segunda etapa: "Utilice el método anterior y utilice imágenes GIF transparentes para controlar el espaciado".
Si ya eres un diseñador web y has participado en múltiples proyectos, la siguiente estructura te resultará muy familiar:
<table bgcolor="#ffffff" cellpacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454" ><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src=" Blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">El contenido va aquí.</td> <td bgcolor=" #545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="# 545454"><img src="blank.gif" width="1" height="1" alt=""></td></tr> </table>
Estamos acostumbrados a utilizar tablas para hablar porque son nuestros "bloques de construcción" más básicos. Por ejemplo: use imágenes GIF transparentes para controlar el espaciado y use varios atributos de tablas para controlar la posición. Alguien lo explicó de esta manera: ¡Las tablas son confiables y las páginas diseñadas con tablas pueden ser compatibles con versiones posteriores! Ningún CSS se atreve a competir con las tablas, las tablas pueden adaptarse a todos los navegadores, etc.
Empecemos reproduciendo paso a paso todo el proceso de diseño.
hora 1
Vaya. Parece que podemos retroceder en el tiempo. ¿Cómo podemos definir el color de fondo sin usar CSS? Oh, sí... es bgcolor, gracias por el consejo. Bien, comencemos a crear el formulario y obtengamos una vista previa del efecto. Definí "align=center" para que quede centrado en todos los navegadores, genial, ¡qué fácil es! La forma no se ve mal y siento que me reencuentro con un viejo amigo. Utilicé de manera experta imágenes GIF transparentes para controlar el espaciado, ¡y el trabajo fue rápido! ¿amabilidad? ¿Por qué hay un espacio en blanco entre el encabezado y el menú? Oh, resulta que hay un espacio adicional después del código de la imagen y el navegador IE lo mostrará. Esto es fácil de cambiar, simplemente elimine los espacios.
Hora 2
Utilizo javaScript para crear un efecto de giro para el menú de navegación:
<td ... onMouseOver="chBg(esto);" onMouseOut="chBg2(esto);" >...</td>
JavaScript está escrito así:
función chBg(obj) { obj.bgColor = "#E1E5DB" } función chBg2(obj) { obj.bgColor = "#CBD1C3";
Aparte del hecho de que me he olvidado un poco de los antiguos métodos de diseño, todo el progreso fue bastante rápido. Aunque intenté reducir el anidamiento de tablas tanto como fuera posible, el código todavía parecía un poco complicado, así que agregué algunos comentarios para que fuera más fácil encontrar los lugares que necesitamos modificar.
Encontré un pequeño problema: no puedo eliminar el subrayado del enlace sin usar CSS. Quizás haya una solución, busquémosla en google.
Hora 3
Después de buscar en Google, todavía no encuentro la manera. ¿Cómo puedo hacer un enlace sin subrayado? ¡Debe haber una solución!
4ta hora
Echemos un vistazo a los resultados de las primeras 4 horas en navegadores distintos de IE6. ¡Vaya! Muy feo en Firefox, se ve bien en Opera y Netscape.
Hora 5
Continúe y codifique..., depure y modifique.
En el trabajo, me di cuenta de las limitaciones de la etiqueta <font> para controlar el tamaño de fuente. No podía definir varios tamaños. ¡Maldita sea!
También encontré problemas con el diseño del texto en la sección Noticias. Para poder sangrar, tuve que usar más anidamiento de tablas para lograr el efecto. Para organizar las imágenes de mariposas en el texto a la derecha del texto, también tuve que agregar una tabla para resolver el problema. Este tipo de composición tipográfica "trampa" me hace sentir impotente.
Hora 6
El diseño está terminado y se ve prácticamente igual que el diseño original, puedes hacer clic aquí para echarle un vistazo.
Haga clic aquí para ver cuántas tablas se incluyen.
Fase 3: ¡No necesitamos formularios!
A continuación veremos qué es un diseño basado en estándares web y maquetado con CSS. Comenzaré con la identificación del contenido. Intentaré que el logotipo sea semántico y evitaré etiquetas redundantes.
El encabezado es una imagen, pero también es un título, así que escribo el código así:
<h1>Asociación de Observadores de Mariposas. Revolotean. Las observamos.</h1>
Pensaré en cómo mostrar este título correctamente más adelante (lo ideal es que nos preocupemos lo más posible por el contenido y lo menos posible por el diseño). Otros títulos (noticias, avistamientos y membresía) se identificarán como <h2>.
Un menú es básicamente una lista desordenada (list), por lo que será identificado como una lista. No es necesario clasificar los párrafos (utilizamos selectores de herencia para "colgarlos" en la capa contenedora). Lo compararé con el texto del contenido original para ver cuántas etiquetas adicionales necesito agregar para lograr el diseño (intentaré evitar agregar etiquetas tanto como sea posible).
Este es el texto del contenido original. Eche un vistazo al código original, se ajusta a la especificación de transición xhtml1.0. Observe que todos los elementos ya están contenidos dentro de <div> con nombres definidos. También se ha agregado la fecha en las noticias con la clase de fecha. Puedes ver que el código es muy simple.
hora 1
Defina el borde de la capa "contenedor" para que sea de 1 px. Centra el contenido definiendo "text-align: center" en el estilo del cuerpo. Para estar centrado en todos los navegadores, margin: 0 auto (que significa arriba=0, derecha=auto, abajo=0, izquierda=auto) también se define en "contenedor". El centrado se puede realizar tan fácilmente como con las mesas.
Defina los valores de relleno "superior" e "inferior" de "cuerpo" para que sean 20 píxeles (no definir directamente el relleno en "contenedor" es adecuado para todos los navegadores).
La lista desordenada (li) debe definirse como "display:inline" para que el menú se muestre en una línea. Agregué íconos de navegación entre menús. Estos íconos de navegación se definen utilizando el método de fondo no repetido, que puede definir con precisión la posición (x, y), similar a esto:
fondo: url (menuBullet2.gif) sin repetición 4px 9px; el efecto de cambio de color del clic del menú adopta el estilo de desplazamiento del enlace y ya no requiere JavaScript.
Configuré la imagen de la mariposa en el encabezado de la página como fondo de <h1>, para no tener que preocuparme por la facilidad de uso y el título se puede leer normalmente en dispositivos que no pueden mostrar imágenes (como pantallas lectores y robots de búsqueda).
Hora 2
El primer elemento del menú (INICIO) usa un ícono diferente y tuve que ocultar el fondo original y agregar una identificación adicional (primero) al menú INICIO:
#hMenu ul li #primero
Otro icono (CONTACTO):
fondo: URL transparente (menuBullet3.gif) sin repetición 615px 9px; no puedo usar CSS para controlar que las dos columnas tengan la misma altura. Afortunadamente, puedo usar una imagen de fondo para solucionarlo. Definí un "contenedor" que repite el fondo verticalmente.
fondo: #fff url (bgMain.gif) repetir-y;
Hora 3
Los cuadros de definición CSS son mucho más convenientes que las tablas, especialmente las muchas propiedades de los bordes que son muy útiles.
Ahora empiezo a definir el encabezado <h2>. La definición del icono es la misma que la anterior.
Muevo la capa "noticias" a la derecha de "avistamientos" y "membresía". Defina la capa "derechos de autor" con "clear: ambos;" para que siga a la capa flotante. Haga flotar la imagen de la mariposa en el texto hacia la derecha y el texto se ajustará automáticamente a la imagen. Definir el borde de 1 px de la imagen y establecer la distancia de relleno puede lograr el efecto de anidamiento de las dos tablas originales.
Se descubrieron algunos problemas: la capa de derechos de autor y la capa de contenido se superponen parcialmente.
4ta hora
El error mostrado está relacionado con la definición float:right; de "avistamientos" y "membresía". Flotarlos hacia la izquierda resuelve este problema, que parece extraño. Utilicé Firefox para la primera prueba. Bueno, no se ve mal, excepto que los íconos del menú se han desplazado unos pocos píxeles.
Existen algunas técnicas CSS que pueden corregir el efecto de visualización en navegadores que no son IE, como proporcionar diferentes valores de propiedad a diferentes navegadores.
Utilicé el valor importante en la definición del mismo elemento. La misma definición escrita al principio se puede ejecutar primero. Este valor no es compatible con el navegador IE.
fondo: url (menuBullet2.gif) sin repetición 4px 6px! Importante;
fondo: url(menuBullet2.gif) sin repetición 4px 9px;
En CSS, si hay varias definiciones para el mismo elemento, la última es válida. Pero debido a que IE no admite! Importante, IE usará el segundo valor definido y otros navegadores usarán el primer valor definido.
Todo listo, mira los resultados aquí.
en conclusión
diseño basado en tablas
Probé la página utilizando todos los navegadores que pude encontrar, incluidos los de plataformas Linux, Windows y Macintosh. Las páginas de diseño de tabla tienen el mismo aspecto en diferentes navegadores. "Es sólida como una roca", es el primer comentario que se hace sobre la disposición de la mesa.
Sin embargo, cuando es necesario modificar parte del contenido de la página, cambiar el diseño de la tabla es bastante laborioso. Esto es un problema si utilizamos un CMS (sistema de gestión de contenidos), será problemático formatear el contenido.
Todo el tiempo de diseño es un poco largo porque olvidé el método anterior. Si lo hiciera de nuevo, creo que podría ahorrar entre 1 y 2 horas.
Describo el diseño basado en tablas como una gran cantidad de "trabajo duro", aunque a menudo me sorprenden las técnicas de diseño avanzadas. Con diseños basados en CSS puro, normalmente estoy acostumbrado a desglosar el diseño y analizar errores paso a paso. Sin embargo, usar el diseño de tablas no requiere este trabajo. Solo necesita seguir agregando tablas al diseño. Veamos el proceso CSS nuevamente.
Diseño basado en CSS
Diseñar con CSS se siente mucho mejor. Los cambios de código son directos y transparentes y puedo controlar claramente todo el proceso. Por el contrario, el diseño de la mesa es como colocar ladrillos. Cuanto mayor sea el cambio en la página, más conveniente y eficiente será el diseño CSS.
El diseño CSS también es muy importante para ahorrar ancho de banda. Extraer todos los estilos en archivos separados y usar uno o varios archivos de hojas de estilos para todo el sitio puede hacer que todo el sitio sea más pequeño.
Separar la información de diseño del contenido también tiene muchos beneficios. En el futuro, podré renovar todo el sitio en cualquier momento sin cambiar nada, al igual que CSS Zen Garden. También aumenta la facilidad de uso, facilitando que los robots de búsqueda descubran su página (recuerde: Google es su fuente más importante de visitantes).
Aunque la eficiencia de su trabajo es muy alta cuando está familiarizado con el diseño basado en CSS, debe dedicar mucho tiempo a aprender las reglas, las diferencias en los modelos de cajas, las técnicas de procesamiento del navegador y mucha teoría, y se requiere práctica continua para dominarlo. . En resumen, CSS es más simple que las tablas, pero si desea diseñar usando CSS puro, prepárese para invertir mucho tiempo en aprenderlo. Incluso si es un desarrollador experimentado, debe estar preparado para lidiar con varios errores. A veces puede llevar varias horas solucionar un error.
ganador
CSS y el diseño basado en estándares web ganan. Con solo mirar el código de ambos métodos es suficiente para tomar una decisión. CSS ofrece muchos más beneficios (principalmente en términos de facilidad de uso). De hecho, la razón fundamental es mi pereza. Si utilizo un diseño de mesa y el cliente se pone en contacto conmigo un año después y me dice que es necesario revisarlo, puedo decirle que me he alistado en el ejército y que estoy en un país extranjero. Si estuviera usando CSS, lo cambiaría para el cliente sin pensarlo dos veces porque no tendría que reinventar la rueda.