Código

¿Por qué Clean Markup Matter in Web Design?

Debido a que la red es un organismo cambiante y en constante evolución, es importante construir sitios que puedan crecer con ella y montar fácilmente la corriente en lugar de ahogarse cuando se acerca una nueva ola.

El marcado limpio y la construcción con estándares web no solo lo ayudan a hacerlo, sino que le ahorrarán tiempo y dinero a largo plazo.

A medida que la web se expande, las tecnologías que usa crecen con ella. Si bien HTML ha existido durante mucho tiempo, ha adquirido bastantes sidekicks en el camino.

Primero Javascript, luego CSS, XML y más tarde AJAX. La amplia adopción de HTML 5 está a la vuelta de la esquina, con Firefox, Safari, Opera y Chrome ya disfrutando de compatibilidad casi completa con HTML 5 (el chico lento en el bloque, Internet Explorer, se está quedando atrás, como de costumbre).

En este artículo, repasaremos los conceptos básicos de los estándares web, lo que son, lo que significan para usted y algunos consejos importantes para ayudarlo a lidiar con este problema importante y, a menudo, descuidado.

¿Qué significa tener un marcado "limpio"?

En pocas palabras, significa que no hay desorden, cumple con los estándares y usa las etiquetas y las estructuras de cada idioma para su propósito previsto.

HTML desordenado hace uso escaso de las etiquetas, elimina lo extraño y lleva a cabo su tarea con el mínimo marcado que sea necesario . Evita atributos innecesarios, como CSS en línea, y deja cada documento estructurado y organizado.

Del mismo modo, el CSS libre de desorden debería evitar repetirse, aprovecharse de herencia (recuerde, CSS significa Hoja de Estilo en Cascada ) y reutilice las clases siempre que sea posible.

Cumple con las normas significa que sus páginas validan con los estándares establecidos por el W3C para HTML, CSS y XML. Significa usar los validadores W3C gratuitos para buscar errores, corregirlos y volver a probarlos hasta que esté lo más cerca posible del 100% .

¿Por qué debería importarme? Funciona, ¿no es suficiente?

Cada proyecto tiene una fecha límite agresiva y cada cliente quiere que su sitio se lance ayer. Así que, como desarrolladores y diseñadores web, estamos bajo presión constante para trabajar más rápido y de manera más eficiente.

Es fácil caer en la trampa de pensar rápido debe significar descuidado , y ese marcado limpio, que cumple con los estándares toma más tiempo. Es fácil decir "funciona y eso es todo lo que importa".

Claro, funciona ... por ahora, para ti. ¿Qué tal el próximo año o dentro de tres años? ¿Qué hay de los nuevos navegadores? ¿Qué hay de la accesibilidad?

¿De verdad crees que los principales motores de búsqueda se adhieren a métodos de codificación especiales y descuidados? Son meticulosos, y si no eres compatible con los estándares, estás pateando el ranking de búsqueda en la cara .

¿Qué pasa con la próxima pobre savia que tiene que editar estas páginas que ha creado? ¿Qué sucede si te atropella un autobús, dejas de ir de mochilero a Alaska o te secuestran extraterrestres? Alguien más tiene que continuar donde lo dejaste y estará mirando tu código, tratando de darle sentido. ¿Será fácil, o le dará dolor de cabeza y le hará maldecir tu nombre?

Hazlo bien la primera vez. Esta no es solo una lección de vida paternal y molesta. En realidad, le ahorrará tiempo y dinero, y hará que los que le siguen tengan un tiempo más fácil.

Puede pensar que es más rápido simplemente colocar el CSS en línea en lugar de agregar correctamente una nueva clase a su hoja de estilos. Y puede pensar que es más rápido arrojar cualquier HTML que pueda escupir sin considerar la estructura general del documento.

Cuando llega el momento de actualizar ese documento más tarde o rediseñar todo el sitio, perderá mucho más tiempo para compensar el código descuidado de lo que alguna vez ahorró al apresurarse a través de él en primer lugar. Cuando creas una nueva hoja de estilos, esos molestos estilos en línea que agregaste apresuradamente volverán a perseguirte y pasarás horas cazándolos y quitándolos.

Extensibilidad, accesibilidad, traducción y pruebas futuras

La navegación móvil está creciendo como Godzilla en los esteroides atómicos. En lugar de ser relegado a los adictos a Blackberry de jet-setting de hace 5 años, hoy todos usan su teléfono para navegar por la web.

La tecnología de asistencia, como lectores de pantalla para ciegos y dispositivos de interfaz alternativos para discapacitados, es común, y no desea perder una venta o alejar el tráfico simplemente porque no tomó eso en cuenta.

Es probable que su sitio se traduzca a media docena de idiomas a medida que lectores de todo el mundo encuentren su contenido. Gracias a Archivo de Internet , Caché de Google y otras, las páginas que publica hoy seguirán por mucho, mucho tiempo, incluso después de que hayan sido eliminadas de su sitio en vivo.

El marcado limpio y el cumplimiento de las normas contribuirán en gran medida a garantizar que sus sitios funcionen en cada uno de estos escenarios.

Normas:

  • SÍ use etiquetas como están destinadas. Por ejemplo: h1 es el primer elemento de nivel superior en la página, luego h2, h3, etc. Solo debe haber una etiqueta h1 por página.
  • Nombra tus clases de CSS e ID con términos significativos, y pregúntate si alguien más sabrá lo que una clase / ID hace solo por su nombre. ¿Qué convención de nomenclatura tiene más sentido: # box12 o # comment-footer?
  • HAGA un buen uso de la herencia de CSS. Por ejemplo: si configura una fuente en un contenedor, no necesita especificarla nuevamente en cada elemento secundario, a menos que ese elemento hijo necesite usar una fuente diferente. Esto mantendrá sus hojas de estilo delgadas y rápidas de cargar.
  • HAGA la validación de su HTML, CSS y XML y corrija tantos errores como sea posible. Presta atención a las advertencias generadas también.
  • HAGA doble control WYSIWYG código generado y limpiar según sea necesario. Son conocidos por escupir marcado abultado e hinchado con montones de basura innecesaria e inválida.
  • NO inyecte estilos en línea o etiquetas y atributos extraños solo porque tiene prisa.
  • NO se conforme con "funciona". El hecho de que una página lo represente no significa que la marca bajo el capó sea compatible con los estándares, sin problemas o con motores de búsqueda.

Lectura adicional y recursos


Escrito exclusivamente para WDD por Jeff Couturier.

¿Sigues los estándares web en tus sitios web? ¿Por qué o por qué no? Por favor, comparta sus comentarios con nosotros.

diseño estándares web marca limpia