Suscribe Via

Parece que los creadores de sitios o páginas web se olvidan, a la hora de estructurar un sitio web, el dejar preparado para el sitio para un SEO natural, para facilitar la accesibilidad web y que este conforme a las normas W3C dentro de las posibilidades que nos permita las mejoras y avances que en ciertos momentos avanzan algo más rápido que las normas.

Aquí pretendo explicar ciertos métodos y/ o técnicas que no debemos olvidar a la hora de estructurar un sitio web y que son independientes de otros los cuales en función de los deseos de nuestros clientes, por más que lo deseemos no podremos evitar corregir.

Empezaremos una vez recibido el diseño, aceptado, preparado de las imágenes, recepción de textos…

Bien una vez recibido todo lo necesario para maquetar, desarrollar o empezar a realizar el sitio o página web, deberemos crear el archivo .html, .php, etc… dentro del HTML añadiremos (se entiende, que el que lea este artículo tiene conocimientos de HTML, XHTML, CSS y otros):
1-el doctype
2-el HEAD
3-el BODY

En el doctype haremos referencia al tipo de documento con el que trabajamos HTML, XHTML, idioma y si usamos reglas estrictas o transicionales. Bueno ya sabeis como va esto, y si trabajas con dreamweaver te facilita parte de este trabajo, que luego ajustaremos si es necesario.

En el HEAD añadiremos el “title”, las etiquetas metatags necesarias, como las de descripción, palabras claves, autor, propietario, si queremos follow o no, etc… bien cerradas dichas etiquetas, ya que me encuentro con demasiadas web las cuales los cierres de cada etiqueta son de su Padre y de su Madre, vamos que le estas diciendo a todos que no sabes si hablas chino o castellano.

Posteriormente, deberemos cuando empecemos a estructurar el BODY, añadir los enlaces a hojas de estilo, JS, RSS, etc.

Ahora toca la parte del BODY.
dentro del BODY deberemos empezar a estructurar el sitio web, es la parte que todos veremos en Internet cuando busquemos una página.

Aquí empezaremos a crear la cabecera, el contenido o cuerpo y el pié de página, esperemos que estemos utilizando etiquetas DIV.
Empezamos a dar sentido a nuestro sitio web, empezamos a añadir imagenes, textos, clases y contenedores….

Bien hemos estructurado la página y ahora vamos a crear nuestra página de estilos según las clases identificadores de cada contenedor y empezamos a maquetar y a dejar bonita la página.

Algo que seguimos olvidando es usar el reset de estilos modificando lo a tu gusto para evitar errores con los buscadores ya que tienen estilos predefinidos que nos pueden volver locos.

Es conveniente ordenar los estilos, lógicamente empezando por la cabecera….

Lo importante, dentro de lo posible, y es posible, es crear una sola página de estilos con todos los estilos a definir. A veces me encuentro con cantidad de hojas de estilo que sobran, que consumen recursos.

Lo mismo ocurre con las hojas de script, es decir con los JS, aquí sería algo más difícil, pero se puede reducir la cantidad. Por ejemplo las funciones las puedes poner todas en una sola hoja. En el caso de los jQuery las principales quedan como deben, pero como digo las funciones puedes tenerlas en una sola página.

Pasamos al tratamiento de imágenes, en la medida de lo posible, usar sprites, eso hará que el peso de la carga de imágenes se reduzca considerablemente. El sprite, si puede ser, sea uno, es una imagen que incluye varias o todas (algo más complicado esto último) las imágenes que se van a utilizar en la página o páginas y, que pueden repetirse o no, en distintas páginas. Hay varias programas en Internet que te facilitan esta tarea.