9 errores que no deberías cometer mientras construyes un sitio web

Te desvelamos 9 errores que deberías evitar a toda costa si estás desarrollando tu propia página web

0
131
Código de programación web

Crear un sitio web usando HTML y CSS es bastante sencillo, pero el problema es que también es muy fácil cometer errores, así que hay algunas cosas en las que posiblemente no estés pensando durante el desarrollo de tu página web. La mayoría de las veces estos pequeños errores no marcan una gran diferencia.

Pero si nos referimos al largo plazo, estos errores pueden hacer que tu vida y la de tu sitio sean mucho más complicadas. Por eso compartiremos los 9 errores más fáciles de cometer al crear un sitio web, pero que al arreglarlos en pocos minutos tu sitio web se verá mucho mejor.

Errores a evitar al construir una página web

Estilo de línea (Inline Styling)

Una de las principales ventajas del HTML y CSS es que nos permiten darle formato a cualquier línea de texto siempre que queramos. Pero esto no quiere decir que siempre tenemos que aprovechar dicha capacidad.

Aquí tienes un ejemplo de un estilo de línea (inline Style) que puede usarse para hacer más grande un párrafo y resaltarlo cambiándole el color.

<p>Tu texto aquí</p>

Esto le agrega al párrafo un estilo CSS que termina junto con el párrafo. Bastante sencillo en realidad.

Pero hay un problema: si quieres cambiar varias cosas de tu sitio web vas a tener que encontrar cada instancia de estilo en línea y cambiarlo. Es decir, si tienes 100 párrafos diferentes que tienen un tamaño al 120% y está en rojo, necesitarás encontrar esos 100 códigos y cambiarlos por el formato que desees usar ahora.

Lo mejor que se puede hacer es usar una CSS Stylesheet u hoja de estilo CSS. Aquí está el estilo que usaste para el párrafo de arriba.

p.important {

size: 120%;

color:blue;

}

Ahora, en lugar de usar el estilo de línea, puedes solo usar esta línea.

<p class="important">Your text here.</p>

Así tu párrafo será más grande y rojo. Y cuando quieres hacer un cambio en tu CSS, todos cambiarán al mismo tiempo.

Tablas de estilo

Antes los diseñadores solían usar tablas para darle formato al diseño de una página web. Usando una tabla se pueden organizar los elementos de una página en columnas y filas, así como aplicar distintas alineaciones y estilo. Hasta las tablas unicelulares se usan para obtener contenido bien alineado. Pero lo cierto es que el uso de las tablas es generalmente mal visto.

De la misma forma que los estilos en línea, usar CSS en lugar de tablas HTML para el diseño es mucho más fácil y recomendable. Así, si quieres hacer cambios a decenas o miles de páginas, es mucho más sencillo usar una hoja de estilo (stylesheet) que ir de página en página haciendo los cambios y ajustando las tablas.

Además de que de esta forma puedes dar un mantenimiento más sencillo, leer los esquemas CSS es mucho más fácil que leer tablas HTML, sobre todo si terminas juntando muchos niveles de tablas. Esto puede ser bastante molesto al momento de tener que volver entre tu documento HTML y tu hoja de estilo para ver exactamente qué es lo que está pasando, el contenido de tu página será más claro y más fácil de editar con una hoja de estilo.

Generalmente es más sencillo jugar con el CSS, así que si estas creando unas tablas multi-niveles muy grandes, lo mejor es que consideres darle un nuevo formato con CSS.

Usar HTML obsoleto

Al igual que con cualquier otro lenguaje de programación, el HTML va cambiando constantemente. Las etiquetas que se reconocen de forma oficial van cambiando y algunas van quedando obsoletas. Incluso si algunas etiquetas viejas siguen funcionando, lo mejor es evitarlas.

Por ejemplo, puede ser que estés acostumbrado a usar la etiqueta “<b>” en las negritas y la etiqueta “<i>” para las cursivas, pero tienes que saber que “<strong>” y “<em>” son las etiquetas estándar ahora. Otras como <center>, <aling>, <color> y <size> también se han vuelto obsoletas.

La mayoría de las etiquetas obsoletas han sido sustituidas por CSS, por lo que tendrás que usar estilos (recuerda el consejo 1) para obtener el mismo efecto. Si no estás muy seguro de lo que tienes que cambiar, puedes ver la documentación oficial de HTML.

JavaScript en línea (inline)

Una gran cantidad de páginas usan JavaScript para agregar funcionalidades, de forma que sus páginas sean muy interactivas: validar el texto conforme se va introduciendo, dar respuestas, añadir animaciones, etc. Puede ser muy útil para agregar un comportamiento añadido.

De la misma forma que el CSS, se puede agregar JavaScript en línea al HTML. Igual que con el CSS, esto no es muy recomendado. Ya que además de que puede ser muy complicado de mantener, hay varias razones que justifican que no sea recomendado.

Cuando se usa JavaScript en línea (Inline) se puede ocasionar un mayor ancho de banda que un script que esté vinculado desde un archivo distinto. Un proceso que se llama minificacion (minification) comprime el HTML y el CSS antes de que se envíe el usuario. Pero el JavaScript en línea no puede ser minificado además de que tampoco se almacena en el caché, pero un archivo JavaScript independiente si puede ser almacenado en el caché.

Usar múltiples etiquetas H1

Las etiquetas de cabecera son muy importantes. Hacen que todo sea más sencillo y son geniales para el SEO, además de que pueden ser usados para enfatizar ciertos puntos.

Pero hay seis niveles de títulos por alguna razón. No debe de haber más de una etiqueta H1 en una página. Generalmente son usados para los títulos de los post de los blogs. Algunos piensan que poner varias etiquetas H1 ayudan a que Google los vea con mejores ojos, pero eso no podía estar más lejos de la verdad.

En realidad, esto sólo hace que tu sitio sea más confuso de leer, lo que afecta su SEO. Su mejor es usar un H1, un H2 y H3 a lo largo de la página.

Ignorar los atributos “Alt” de las imágenes

A todas las imágenes se les puede dar un atributo “Alt” que muestra información específica en una línea de texto, el cual se mostrara en caso de la que la imagen no pueda mostrarse.

Tal vez esto no te parezca gran cosa, especialmente con los navegadores modernos que no tiene problemas para mostrar casi todo. Pero no poner este atributo es un gran error, especialmente para la navegación en móviles.

No cerrar las etiquetas

Lo cierto es que hay una gran cantidad de etiquetas HTML que pueden funcionar sin cerrarlas, tales como <p> y <li>. Los navegadores saben cuándo empieza otro párrafo y cuando el anterior ha terminado. Pero eso no quiere decir que no deberías de cerrar las etiquetas.

Aunque los navegadores web han avanzado mucho, existe la posibilidad de que muestren tu contenido incorrectamente. Además de que aplicando estilos puedes producir algunos resultados impredecibles.

No incluir una declaración DocType

Al comienzo de un documento HTML usualmente se puede ver una declaración DOCTYPE, justo como esta:

<!DOCTYPE html>

Es algo de lo que no se habla mucho, pero realmente es un aspecto importante de la página web. La declaración DOCTYPE le informa al navegador qué tipo de HTML se está usando. Esto permite que el HTML sea renderizado correctamente.

Si no pones la declaración DOCTPE, la página se renderizará en “modo capricho” (quirks mode). Esta es la defensa de los nuevos navegadores ante páginas anticuadas y cambia la forma en la que se muestra una página. Un vistazo rápido a los navegadores muestra algunos cambios sensibles, propiedades de la página que no se muestran bien en las tablas, tamaños de letra que se calculan diferentes, etc.

Desatender el marcador de esquemas

El marcador de esquemas, conocido como Schema Markup, ayuda a los motores de búsqueda a tener una mejor idea de lo que hay en una página. Específicamente, el marcador les dice a los buscadores sobre lo que estas escribiendo en cada sección.

Por ejemplo, dentro de un artículo, el marcador de esquemas le dice al buscador el título, el autor, la fecha y todo tipo de información muy útil.

Si conoces otros errores comunes a la hora de construir un sitio web, no dudes en dejarnos tus comentarios y sugerencias en la sección que hay más bajo.

COMPARTE
Viajero, fotógrafo apasionado, fanático del cine y usuario "hardcore" de las redes sociales. Cada día trato de aprender algo nuevo.