Así como se limpia a fondo una casa periódicamente, el código HTML de tus páginas Web también deben someterse a limpiezas periódicas. Cuando se hacen cambios y actualizaciones a la página, el código puede quedarse en desorden con alborotos innecesarios, retrasando tiempos de carga de la página y afectando la eficacia de tu página Web.
El HTML desordenado también puede afectar seriamente el Ranking en los motores de búsqueda.
Esto es especialmente cierto si estás utilizando un editor Web, del tipo WYSIWYG (lo que vés es lo que tienes) tal como Frontpage o Dreamweaver. Estos programas acelerarán tu creación del Web site, pero no son eficientes en la creación de un código limpio de HTML.
Centraremos esta discusión en la codificación real del HTML, no haciendo mención de otros lenguajes de programación que se puedan utilizar en una página tal como Javascript.
En los ejemplos del código, se aplicará usando los paréntesis () en vez de los soportes de ángulo usados en HTML < > de modo que los ejemplos de código se exhiban correctamente en este directorio de artículos.
Hasta hace poco tiempo al cifrar una página en HTML estaríamos utilizando etiquetas tales como la etiqueta (font) y (p) etiquetas de párrafo.
Entre estas etiquetas está nuestro contenido, texto, imágenes y enlaces de la página.
Cada vez que se realiza un cambio del formato en la página, en la que nuevas etiquetas son utilizadas, seccionan por completo el formato.
Recientemente Hemos ganado más capacidad al utilizar las hojas con estilo en cascada, permitiendo que escribamos el formato una vez y después, nos refiramos a ese formato varias veces dentro de una página Web.
Para acelerar tiempos de carga de la página necesitamos tener pocos caracteres en la página cuando están a la vista en un editor de HTML.
Puesto que realmente no deseamos quitar nuestro contenido visible, necesitamos revisar el código.
Limpiar este código significa quitar caracteres, de tal modo que resulte una página Web más pequeña (en código, mas no en contenido) de tal modo que cargue más rápidamente.
El HTML en un corto tiempo ha cambiado y ahora tenemos diversas maneras de hacer la misma cosa.
Un ejemplo sería el código usado para demostrar una tipografía en negrilla ( bold type face ).
En el HTML tenemos dos opciones principales, la etiqueta (strong) y la etiqueta (b).
Como puedes ver la etiqueta (strong) utiliza 5 caracteres más que la etiqueta (b), y si consideramos las etiquetas de cierre también vemos eso al usar el par de etiquetas (strong) (/strong) 10 caracteres más que (b) (/b) un par de etiquetas que reducen el código.
Éste es nuestro primer principio del código limpio de HTML: Utilizar el método más simple de codificación disponible.
El HTML tiene la capacidad de anidar código dentro de otro código.
Por ejemplo podríamos tener una línea con tres palabras donde la palabra del medio esté en negrilla.
Esto podría lograrse cambiando el formato totalmente cada vez que el formato visible cambia.
Considere este código:
(font face= " times ") this (/font)
(font face="times")(strong)BOLD(/strong)(/font)
(font face="times")Word(/font)
esto tiene 90 caracteres.
Éste es un HTML muy mal escrito y es lo que conseguirás de vez en cuando al usar un redactor del tipo WYSIWYG.
Desde las Tags (font) están repitiendo la misma información que podemos anidar simplemente con las etiquetas (Strong) dentro de las etiquetas (font), y mejor aún usando la etiqueta (b) en vez de la etiqueta (Strong). Esto nos daría este código:
(font face="times)This (b)BOLD(/b) Word(/font),
usando solamente 46 caracteres.
Éste es nuestro segundo principio del código limpio de HTML:
Utilizar las etiquetas anidadas cuando sea posible.
Siendo consciente que los editores del WYSIWYG pondrán al día con frecuencia el formato, agregando capa tras capa de código anidado y redundante. El cual estarás limpiando.
Un problema grande al usar etiquetas del HTML surge por que necesitamos repetir la codificación de la etiqueta, siempre que cambiemos el formato. El advenimiento del CSS nos dá una gran ventaja en la codificación limpia, permitiéndonos disponer de un sólo formato, el cual estará disponible para todos los documentos, lo que quiere decir que ese formato será el mismo una y otra vez para todas las paginas.
Si tuviéramos seis párrafos en una página que cambian entre dos diversos tipos de formato, tales como headings en Azul, Bold, Arial, size 4 y paragraph text en Negro, Times, size 2 usando etiquetas necesitaríamos enumerar ese formato completo cada vez que realizamos un cambio.
Entonces repetiríamos esto para cada título y párrafo, lo que representa toneladas de HTML.
Con el CSS, podríamos crear los estilos CSS para cada tipo del formato, enumerar los estilos una vez en el Header de la página, y después hacer referencia al estilo cada vez que realizamos un cambio.
(head)
(style type="text/css")
(!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 24px;
}
.style2 {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
}
--)
(/style)
(/head)
(body)
(p class="style1")Heading(/p)
(p class="style2")Paragraph Text(/p)
(/body)
Notar que los estilos están creados en la sección Head de la página y después referidos simplemente a la sección del body.
Pues si agregamos más formato continuaríamos simplemente haciendo referencia a los estilos previamente creados.
Éste es nuestro tercer principio del código limpio de HTML:
Utilizar los estilos del CSS siempre que sea posible.
El CSS tiene varias ventajas adicionales, tales como poder poner los estilos del CSS en un archivo externo, de tal modo que reducimos el tamaño de la página aún más, y la capacidad de poner al día rápidamente el formato de todo el sitio, simplemente poniendo al día el archivo externo del estilo CSS.
Tan solo con una limpieza simple de tu código de HTML puedes reducir fácilmente el tamaño de los archivos, hacer que carguen más rápidamente, y tener una página Web en serio.
Recursos de Autor:-
George Peirson
George Peirson es un empresario exitoso y un instructor del Internet. Él es el autor de más de 30 títulos de tutoriales de entrenamiento basados en multimedia que cubren asuntos tales como Photoshop, flash y Dreamweaver. Para ver sus sistemas del entrenamiento visitar http://www.howtogurus.com
![[Valid RSS feed]](http://www.articulos.crear-negocios.com/images/icon_Rss.png "XML Feed For RSS"){kind=icon}
Category Rss Feed
Imprimir Este Artículo
Agregar A Favoritos
![[Valid RSS feed]](http://www.articulos.crear-negocios.com/images/rss.jpg "XML Feed For RSS")