Blog de la Web

13 abril 2010 in Posicionamiento Web by dacho

Mantener limpio y ordenado el codigo de una pagina web es algo realmente muy importante por dos motivos basicos: por un lado el tema del Posicionamiento Web y por el otro el hecho de la actualizacion de la pagina. Si lo vemos desde el lado del posicionamiento web, mantener limpio el codigo de nuestras paginas permitira que las arañas o los boots de los motores de busqueda puedan interpretar de mejor manera a las paginas webs, es decir, por ejemplo cuando colocamos un subtitulo en una pagina web ¿cual de estas dos opciones te permiten saber mas facilmente que es un subtitulo y no un texto:

1. Hola Soy un subtitulo
2. Hola Soy un Subtitulo

Bueno sin duda el segundo tiene mas pinta de un subtitulo porque esta mas marcado. Quienes crearon el HTML asignaron etiquetas a distintas cosas por ejemplo los titulos tienen etiquetas para ser utilizados, si los utilizamos entonces los motores de busqueda saben que es un subtitulo sino es texto simple arreglado con CSS para cambiar el color y el tamaño, pero los buscadores no toman muy en cuenta ese parametro…

En cuanto a la parte de codigo ¿es mas claro utilizar las etiquetas de titulos o las etiquetas para textos? La respuesta es obvia pero veamoslo:

Codigo incorrecto:

<p>Soy un subtitulo</p>
<p>Soy el texto bla bla.....</p>

Codigo Correcto:

<h3>Soy un subtitulo</h3>
<p>Soy el texto bla bla.....</p>

Bueno este ejemplo ilustra mejor que decirlo, el h3 nos hace ver desde el codigo que es u subtitulo, en cambio las etiquetas p son simples etiquetas de parrafos. Todos estos detalles cuando nos ponemos a actualizar una pagina web nos hacen mas facil la vida a la hora de encontrar cuales son los subtitulos y cuales son los textos.

Tips para mantener limpio el codigo de nuestra pagina web:

• Pensar la estructura del sitio completo antes de comenzar a escribir el codigo, debemos pensar bien como organizar la pagina, las estructuras y utilizar las gerarquias que nos provee el HTML, esto es utilizar por ejemplo h1 para el titulo principal, los h2 para los subtitulos, p para los parrafos, strong para las negritas, etc. Un consejo para esto es tener la pagina web hecha en un papel o en alguna imagen generada por programas como photoshop. Esto es asi porque si improvisamos todo como va apareciendo y borrando y arreglando, el resultado final sera una gran cantidad de cosas innecesarias que molestan y solo sirven para que la pagina sea mas pesada y mas dificil de actualizar.
• No mezclar HTML con CSS, es decir los elementos de html deben tener su configuracion desde un archivo CSS Externo, de esta forma por ejemplo, si queremos cambiar los colores de los titulos basta con modificar un par de lineas en el CSS externo y no necesitamos tocar nada mas
• Ser practicos, colocar la informacion y los elementos que el usuario realmente necesita, no incluir informacion que el usuario ni va a mirar solo por el hecho de que queda lindo. Esto tambien nos ayuda a ser mas claros tanto con el codigo como con la pagina web que ve el usuario.
• Tabular y organizar los elementos en el HTML
• Utilizar nombres muy claros y descriptivos para los Class y los Ids
• Orden logico de los elementos Esta muy relacionado con el punto uno de planificacion y el hecho de tabular y organizar los elementos

Realmente tomar en cuenta todos estos puntos son muy utiles y nos ahorraran muchos dolores de cabezas principalmente en el futuro, pero ademas nos permitira realizar nuestros desarrollos de forma mucho mas rapidos.