Consejos de Diseño Front accesible para buscadores
Posted by maximiliano | Posted in Accesibilidad, Buenas Prácticas, HTML, Validación | Posted on 24-09-2007
13
Cuando Jorge comenta en su blog que hay que diseñar para google se refiere a Diseño Front no a Diseño de interfaz.
¿Y qué es el Diseño Front?
Conceptualmente es el eslabón que transforma el Diseño Visual en código, para que se vea en los distintos navegadores y dispositivos. Formalmente es Diseño de código, XHTML, CSS… la maquetación.
¿Y cómo se diseña para los buscadores?
En un 33% en el <head> y principal, que es donde está la información relativa a la página, lo que los buscadores necesitan saber para catalogar, indexar, evaluar:
- Tipo de documento: para que las máquinas sepan qué es lo que leerán y lo interpreten así
- Familia de caracteres usados por ejemplo UTF-8
- Idioma principal en que está escrito
- Título: parece obvio pero si fuera tan obvio no estría plagado de páginas sin nombre solo hay que buscar
- Etiquetas Meta para Descripción, Autor, Keyword, etc.
- Links de estilos
- otros…
Es como seguir un manual de buenas costumbres. Buenos días, soy Maximiliano, Diseñador, hablo español y les voy a exponer sobre Diseño Front.
y en un 33% en el <body> (este si que es importante) creando un código semántico donde los títulos deben ser títulos, las listas listas, los párrafos párrafos, las citas citas, etc. aunque suene obvio, esto significa que:
- los títulos deben ser <h1>, <h2>…<h6>. No un<p class=”tituloGrande”>Lorem ipsum<p>, un buscador no entiende que la clase asignada le da propiedades visuales
- las listas deben ser <ul>, <ol> o <dl> con sus respectivos <li>, <dt> y <dd>.
- los párrafos <p>
- las citas <cite>
- el contenido principal debe estar antes de banners, contenido secundario, etc.
- evitar al máximo el código basura como <div> que solo están para implementar el diseño y no contener-contenido :(
en definitiva se deben usar las etiquetas HTML correspondientes para lo que fueron creadas. Es primordial conocer y dominar las etiquetas que existen.
Y el 33% que falta lo completa la calidad del contenido, el que debe ser consecuente con las definiciones del <head>, debe estar vinculado con otros documentos de temas relativos y/o complementarios.
Hay que informar a los buscadores, entregarles lo que buscan, para que indexen correctamente las páginas. Son otro tipo de usuarios y hay que hablarles en su lenguaje… en Hungría no entienden español :)
Grande Chef Max!
Sólo un Chef como tu podía explicarlo tan bien.
Saludos
Gracias :)
estas pequeñas aclaraciones son las que estructuran nuestro discurso
Gran post, merece un meneo.. o un fresqui. Claro como el agua y sin tecnisismos, que es lo mejor.
Punto aparte. Me gusta esta onda blogger en AV. Ojalá sea contagioso.
Saludos
Muy buen trabajo, coincido en todo. Probablemente quien no domina el código no le dé importancia a lo que planteas y crea que escribiendo bien, usando el marketing adecuado y con buenos enlaces, está resuelto.
Apoyo tu idea de que eso es sólo un tercio de las preocupaciones y hay mucho más para hacer. Creo que has dado con una buena forma de explicar por qué los bancos, por ejemplo, no son primeros a la hora de hacer una búsqueda de sus productos en Google.
Saludos
jcc
Excelente!
[...] atraer a un lector, por ejemplo, en Fresqui o en los resultados de búsqueda de Google si tenemos bien estructurado el HTML de nuestro [...]
Juan Carlos, en relación a lo que comentas el tema se centra en que quienes elevan los requerimientos deben tener nociones básicas y sin tecnicismos de los estándares (un poco en el tono de este post).
Para exigirnos, a los desarrolladores, un trabajo profesional de nivel mundial. Es como lo que hicieron ustedes con la Guía Web para orientar a los responsables gubernamentales.
Gracias Gabriel.
Buenos temas en tu blog :)
[...] Hay que darle un sentido, el mismo al que apunta el contenido, Front accesible. [...]
[...] Front Primero la aclaración sobre ¿Qué es Diseño Front y cómo se relaciona con el Look & Feel? Formalmente es la traducción del diseño visual a la [...]
[...] más accesible aprender lenguajes como HTML y CSS por ser más acotados. En el pasado expliqué ¿Qué es el diseño Front? y teniendo eso en cuenta, lo [...]
que bien explicado esta. por aquí le llamamos maquetador al que realiza ese trabajo. no conocia tu blog. ahora lo recomendare. saludos desde la habana
Hola Orlando,
que bueno que se entienda. Eres bienvenido por estos lares.
Saludos desde Viña del Mar