Validar codigo HTML y CSS

Al publicar una página web, hay comprobar si el código HTML empleado valida correctamente, es decir si no contiene errores. De encontrarlos es necesario corregirlos para asegurar que nuestras páginas respeten las especificaciones y por lo tanto funcionen y se muestren correctamente en el navegador de cualquier dispositivo.

También se debe revisar el código del o de los archivos de estilo CSS que usamos. Esto es independiente del software empleado para crear las páginas. Algunos de estos errores pueden ser fatales para el posicionamiento de nuestro sitio web en internet.

¿Es importante la validación del código HTML de las páginas?

Al usar el código de forma correcta, de acuerdo a la especificación de HTML o CSS, nos aseguramos que nuestras páginas se vean correctamente y funcionen en el navegador de cualquier PC, Laptop o de un dispositivo portable. Quizás al probarlas en nuestro equipo pensamos que todo funciona bien, pero en ocasiones no es así. La gran mayoría de las páginas que están publicadas en diversos sitios, contienen errores en mayor o menor medida y no obstante funcionan. Al usar el código de forma correcta estamos indicando limpieza, confiabilidad, compatibilidad y apego a los estándares establecidos.

Además los buscadores que escanean nuestro sitio, comprueban en su base de datos la validez de las paginas, por lo que de no existir errores mejoraremos el posicionamiento. Para nadie es un secreto que uno de los tantos factores que Google tiene en cuenta, es precisamente la validación correcta del código de las páginas.

Accede al servicio del Validador HTML del W3C usando el siguiente vínculo: http://validator.w3.org/

Definición del objetivo del sitio: A través de esta etapa se busca definir cuáles serán los objetivos centrales que deberá tener el Sitio Web y establecer la forma de cumplirlos. Se recomienda comenzar por generar un objetivo central y luego definir varios objetivos secundarios; no obstante, es importante que estos objetivos sean explicitados adecuadamente al comienzo del desarrollo, con el fin de que todo el equipo de profesionales involucrados tengan claro el horizonte del proyecto. Para generar objetivos que sean válidos y comprensibles, se aconseja escribirlos a través de frases que se inicien con verbos que expresen las acciones a realizar. Por ejemplo: Recibir preguntas de los usuarios sobre las actividades de la institución o Presentar públicamente los informes más importantes de la institución.

Definición de la audiencia: Una vez que se ha terminado adecuadamente con la definición de los objetivos, se debe dar un siguiente paso, que es el de determinar las principales audiencias (públicos) hacia las cuales se orientará el sitio. Mientras existan brechas de acceso a internet en la población, el Sitio Web no podrá atender al mismo público y las mismas necesidades que resuelve de manera presencial en ventanilla, sin embargo, la conectividad a internet crece cada año y por este motivo, se deben tener en cuenta varias consideraciones para definir qué tipos de audiencia se atenderán desde las diferentes pantallas del sitio. A continuación se hacen algunas definiciones de audiencia, las que, sin importar las características del sitio, siempre deberán estar presentes, y por lo mismo, deben traducirse en acciones para poder atenderlas adecuadamente.

Definición de contenidos: Una vez que se han identificado los objetivos del sitio y la audiencia, se debe proceder a hacer las definiciones más concretas que permitan decidir qué contenidos son los que va a tener el Sitio Web que se desarrolle. Para identificar contenidos, se deben utilizar como insumo los materiales que se hayan obtenido en la etapa de identificación de Objetivos y de Audiencias, ya que en ambos la búsqueda giró en torno a las necesidades que tenían los usuarios del sitio. Para cumplir con una norma general respecto de qué debería contener un sitio.

Elaboración de mapas del sitio.

La página web y su constitución lo define el diseño de una página web es la forma de organizar los elementos que la componen. Hay miles de formas diferentes, pero son pocas las que funcionan y adquieren el sentido que necesitamos para nuestro trabajo. Podemos recurrir a estructuras como Bootstrap o 960grid para tener un apoyo importante. Hoy en día hay muchos frameworks con los cuales podemos basarnos a la hora de diseñar un nuevo proyecto. Básicamente, los sitios web se componen y estructuran de la siguiente manera, la imagen lo representa:

Definición de los sistemas de navegación.

Una vez que se cuenta con los árboles de contenido desarrollados en el paso anterior, la tarea siguiente consiste en generar los sistemas de acceso a dichos contenidos en el Sitio Web. A través de estos, los usuarios podrán avanzar por sus diferentes áreas, sin perderse.

Textual: se refiere a que la navegación se hará a través de elementos concretos, tales como menús, guías, botones y otros elementos que deben ser claramente distinguibles dentro de la interfaz. Para generarlos se debe conseguir que cada uno de ellos represente claramente la función para la que fueron designados y no dejar lugar a dudas sobre su función ni sobre la acción que desarrollarán al ser usados. Es decir, un botón debe parecer tal y no sólo un parche de color sobre la pantalla. Adicionalmente, es muy importante que las palabras escogidas para indicar acciones (etiquetado de menús), sean claras y precisas. En este sentido, si un botón necesita ser explicado, es mejor desecharlo y buscar otra solución.

Contextual: es todo lo referido a cómo se presenta la información, utilizando para ellos elementos basados en texto, gráficos o bien de entorno. Los elementos relevantes en este caso, serán todos aquellos que permiten mostrar la navegación en la pantalla y ayudar al usuario en el contexto del contenido que esta vieno. Entre ellos, la gráfica utilizada, la redacción de los textos que se muestran, los contenidos relacionados, las nubes de etiquetas e incluso el nombre del dominio (URL) que permitirá que el usuario sienta que está en el lugar indicado.

¿Qué estructura que debe tener una página web?

Cada vez existen más y más modelos de páginas webs, pero cuando hablamos de una estructura web sencilla, deberás encontrar en ella los siguientes elementos:

■ Header/Cabecera: sección es la que se encuentra al principio de la web, esta contiene el logotipo o nombre de la página web. En muchos casos incluye el teléfono y correo de la empresa (para que sea sencillo para el usuario el contacto con la empresa) y una imagen principal (banner) o un slider con varias fotografías que pasan automáticamente.

■ Menú: Es una barra que se encuentra en la parte superior de la web (en la cabecera), normalmente se encuentra a la derecha del logo o bajo este, incluso hay ocasiones que lo encontrarás en un lateral. El menú es un barra donde aparecerán los principales apartados que tiene la web (quienes somos, servicios, contacto y precios y blog) Este apartado suele estar anclado en la parte superior de la web y no varía en ninguna de las secciones internas (para que puedas vero en todo momento).

■ Contenido: El contenido es todo el texto, imágenes, productos, etc que se encuentra entre la “Header” y el “Footer”. Toda esta información es la que va hacer que Google comprenda que servicios ofrecemos en nuestra web y nos posicione en su buscador. Por eso es muy importante tener buenos contenidos en todas las secciones de la página.

■ Sidebar: Los sidebar, como su nombre indica en inglés son barras laterales donde añadir los widgets de WordPress. Existen widgets de todo tipo como formularios, calendarios, buscadores, categorizadores, etc.

■ Footer: O lo que también se llama el pie de página, es la parte inferior de la web, en esta zona se aprovecha para poner secciones de la web que tengan menos interés para los usuarios (aviso legal, política de cookies, etc), datos de contacto de la empresa y las redes sociales.

■ Definición del diseño visual: El diseño web es una actividad que consiste en la planificación, diseño, implementación y mantenimiento de sitios web. No es simplemente la implementación del diseño convencional ya que se abarcan diferentes aspectos como el diseño gráfico web, diseño de interfaz y experiencia de usuario, como la navegabilidad, interactividad, usabilidad, arquitectura de la información; interacción de medios, entre los que podemos mencionar audio, texto, imagen, enlaces, video y la optimización de motores de búsqueda

■ Diseño de las estructuras de las páginas: La importancia de la estructura jerárquica de una página Web radica en que los visitantes Web no siempre ingresan por la página de inicio o principal. Y en este caso el sitio Web debe dar la respuesta a lo que se busca de manera rápida y efectiva. Si no, que los visitantes Web terminarán por irse del sitio o cerrar la página.

■ Bocetos de diseño: El diseño gráfico de una página web es un aspecto de gran importancia. La imagen transmitida por el diseño de una página web debe causar una impresión positiva en el visitante del sitio web y debe captar su atención, ofreciendo una imagen que genere confianza en dicho visitante.

■ Borradores de página: Es una versión provisional de un sitio WEB

■ Maqueta Web: La maqueta es el primer documento que da vida a tu sitio. Es una transcripción visual de tu sitio bajo la forma de imágenes que tendrás que "traducir" en HTML y CSS apoyándote en las especificaciones proporcionadas.