Babelia

Siempre diseñamos para web con tipografías de sistema, pero ¿sabemos exactamente cuáles son?

Ahora sí:

• Kays kreations

Vía mqaccesibilidad

Con respecto a este tema hay una gran discusión, ya que hay personas que opinan que en la actualidad es mejor usar el estándar HTML 4 ya que el XHTML 1.0 no supone un gran avance al HTML 4.

En este artículo sólo pretendo reflejar una serie de razones (sacadas del libro “Diseño con estándares Web” de Jeffrey Zeldman) que pueden ayudar a decidirnos por el XHTML, seguro que algunas pueden ser discutidos. Por supuesto, que no pretendo que nos pasemos todos al XHTML, eso ya es decisión de cada uno que tendrá que valorar las ventajas e inconvenientes de cada una de las opciones que tenemos.

Asi pues, algunas de las razones para realizar la conversión a XHTML son las siguientes:

1. XHTML es el estándar de marcado actual, que ha sustituido a HTML 4.
2. XHTML se ha diseñado para funcionar correctamente con otros lenguajes de marcado, aplicaciones y protocolos basados en XML.
3. XHTML es más coherente que HTML, por lo que es menos probeble que provoque problemas de funcionamiento y representación.
4. XHTML 1.0 es un puente a futuras versiones de XHTML. Si el borrador de la especificación XHTML 2 alcanza el estado de recomendación final, resultará más sencillo adaptarse a la misma (si lo quiere hacer) desde XHTML 1.0 que desde HTML.
5. Los navegadores antiguos se sienten tan cómodos con XHTML como con HTML. A este respecto, XHTML no presenta ninguna ventaja especial pero tampoco ningún inconveniente.
6. A los nuevos navegadores les encanta XHTML (en especial XHTML 1.0) y muchos les conceden un tratamiento especial que no se ofrece a páginas creadas con HTML 4. En muchos casos, esto hace que XHTML sea más predecible que XML.
7. XHTML funciona con la misma corrección en dispositivos inalámbricos, lectores de pantalla y otros agentes de usuario especializados que en navegadores de escritorio tradicionales, y en muchos casos elimina la necesidad de crear versiones de marcado inalámbrico especializadas y permite que los sitios lleguen a un mayor número de usuarios con menos trabajo y a menor precio. No podemos garantizar la relación causa efecto, pero muchos sitios HTML se ven cargados de versiones inalábricas, versiones sólo texto y páginas especiales para impresión, mientras que la mayoría de los sitios XHTML no sufren estos estorbos: un documento vale para todo. (En la mayoría de los casos, un documento sirve para todo si cuenta con el estilo correcto para varios medios, función que desempeña CSS).
8. XHTML forma parte de una familia de estándares Web (en la que se incluye CSS y el DOM del W3C) que le permite controlar el comportamiento y el aspecto de páginas Web entre diferentes plataformas, navegadores y dispositivos.
9. La creación en XHTML puede ayudarle a abandonar el hábito de escribir marcado de presentación lo que, a su vez, le puede ayudar a evitar problemas de accesibilidad e incoherencias de representación entre navegadores de escritorio de diferentes fabricantes.
10. Al crear en XHTML se acostumbrará a probar sus trabajos mediante servicios de validación de marcado, que le ahorrarán horas de pruebas y depuración, y le ayudarán a evitar los princiaples errores de accesibilidad, como la no inclusión de un atributo alt en todas las etiquetas IMG.

Vía Serviweb.es

Las tablas existen y existieron desde el comienzo en HTML, pero no se crearon para diseñar un sitio, sino para la presentación de datos tabulares. La utilización del “border=0” y las imágenes transparentes hicieron posible crear una rejilla que permitió a los diseñadores organizar textos e imágenes, establecer tamaños y ubicar objetos. Pero ésto es sencillamente incorrecto. Las tablas no se crearon para maquetar y no deben utilizarse para eso, porque de esta forma se mezclan presentación y contenido.

La solución es clara: CSS+HTML/XHTML. Afortunadamente, cada vez son más las empresas que deciden dejar atrás las tediosas tablas y evolucionar desarrollando sus sitios respetando los estándares establecidos por la W3C (organización internacional que desde hace unos 12 años se dedica al desarrollo de pautas y estándares web), lo que facilita la accesibilidad y la correcta visualización de las páginas en los navegadores que respeten dichos estándares.

Algunas de las ventajas de la maquetación con CSS:

• Separación de forma y contenido. Generalmente CSS y HTML se encuentran en archivos separados, lo que facilita el trabajo en equipo porque diseñador y programador pueden trabajar independientemente. Por otro lado, permite el acceso a distintos navegadores y dispositivos.
• Tráfico en el servidor. Las páginas pueden reducir su tamaño entre un 40% y un 60%, y los navegadores guardan la hoja de estilos en la caché, ésto reduce los costos de envío de información.
• Tiempos de carga. Por la gran reducción en el peso de las páginas, mejora la experiencia del usuario, que valora de un sitio el menor tiempo en la descarga.
• Precisión. La utilización de CSS permite un control mucho mayor sobre el diseño, especificando exactamente la ubicación y tamaño de los elementos en la página. También se pueden emplear medidas relativas o variables para que la pantalla o la caja contenedora se acomode a su contenido.
• Mantenimiento. Reduce notablemente el tiempo de mantenimiento cuando es necesario introducir un cambio porque se modifica un solo archivo, el de la presentación, sin tener que tocar las páginas que contienen la estructura con el contenido.
• Diseño unificado y flexibilidad. Es posible cambiar completa o parcialmente el aspecto de un sitio con sólo modificar la hoja de estilos. Por otro lado, el tener el estilo de una web en un solo archivo permite mantener la misma apariencia en todas las páginas.
• Posicionamiento. Las páginas diseñadas con CSS tienen un código más limpio porque no llevan diseño, sólo contenido. Esto es semánticamente más correcto y la página aparecerá mejor posicionada en los buscadores. Google navega obviando el diseño.

Vía Héctor Fernandez

La verdad es que es el post perfecto y más cuando pretendo centrar el blog en este ámbito, pero leído en NBSP voy a hacerle referencia a las cuatro principales razones.

• Universalidad: nos aseguramos que nuestras páginas se muestran igual independientemente del navegador que use el usuario.
• Portabilidad: si separamos el contenido de la forma, el código se simplifica. Así, realizar cualquier cambio en la apariencia de la página o adaptarla a distintas plataformas nos será más sencillo.
• Mejor indexación en los buscadores: los robots de los buscadores analizan sintácticamente el contenido de los documentos (X)HTML. Así, adquieren más importancia los títulos de las páginas, cabeceras …
• Accesibilidad: usar estándares ayuda a que nuestras páginas sean más accesibles.

A lo que yo añado.

Por que te aseguran que todos los visitantes de tu Web puedan leer el contenido que les ofreces, de manera independiente de con que dispositivo lo hagan o desde donde. Favorecen la accesibilidad y la independecia de dispositivo.

Mejoran la velocidad de carga del sitio. Separando el contenido (información) de la presentación (aspecto gráfico).

Mejora la indexación en los motores de busqueda como Google. Piensa que Google es un ser que solo lee de forma plana el código de tu página y de ahí el tiene que ser capaz de añadir a sus busquedas el contenido importante de tu web. Pongámoselo facil a Google.

Las páginas son más sencillas y rápidas de mantener y actualizar, con lo que lleva menos costes, y eso al cliente es lo que más le gusta.

¿Por qué ser accesible?

Y digo yo, ¿Y por qué no?. ¿Para que quieres tener tu presencia en internet, si no te pueden ver?, mejor será cuanto mayor sea el númnero de personas que puedan acceder a la Web, ¿no?. De eso trata la accesibilidad de proporcionar una web donde todos puedan acceder independientemente de con que discapacidad o dispositivo lo hagan.

¿Y usable?, ¿qué es eso de la usabilidad?

Del mismo modo que tu quieres poner a lavar tus calcetas o grabar el especial de Noche Vieja de la tele con solo pulsar un botón, en una web, lo que quieres es poder leer esa noticia de prensa, comprarte el último libro de tu escritor favorito, buscar la mejor oferta de vuelos a tu destino estival de una forma sencilla, sin complicaciones, donde tengas todas las opciones necesarias de una forma rápida e intuitiva, para que el tiempo que pases en una web lo inviertas en aquello por lo que has entrado y no perdido buscando el botón “Comprar”. Facil, claro, sencillo y transparente para el usuario.

Vía Maestros del Web

Corren ríos de tinta sobre las técnicas SEO y este artículo no pretende desautorizar ninguno de ellos sino ser un compendio, mejorando lo que otros han dicho, o atribuyendo la autoría de lo que mejor se ha dicho.

No quiero que sea muy detallado, sino simplemente mencionar las áreas en que hay que incidir si se quiere que una campaña SEO toque todos los aspectos necesarios para lograr el éxito.

Hay enlaces a muchos sitios web, tanto en castellano como en inglés, que ayudarán enormemente a seguir las directrices que en este artículo detallo. Cabe mencionar que para la aplicación de todo lo expuesto aquí se requiere algún tiempo, ya que la optimización para motores de búsqueda (SEO) es una técnica larga, dura y difícil.

Aspectos internos

1. Redacción apropiada de contenidos internos:

Aunque no hay que redactar todo el contenido como si sólo los buscadores fueran a leerlo, hay que cuidar la densidad de palabras y frases clave y mantener un equilibrio entre lo que los visitantes y los buscadores.

• Cuando la escritura atrae
• Herramientas (con hache) para escribir bien (con be)

2. Optimización técnica de la página:

Para la elección correcta del contenido de las etiquetas meta puedes usar herramientas como:

• Keyword Suggestion Tool: da la frecuencia con que un término o frase es buscada por día.
• Keyword Selector Tool: da el número de veces que un término o frase ha sido buscado en el último mes.
• SubmitExpress: varias herramientas que validan la densidad de palabras clave.

Aspectos a tomar en cuenta:

• Introducir mala ortografía de las palabras clave que suelen ocurrir al teclear rápido. Por ejemplo: “compar” en vez de “comprar”.
• Usar nombres de archivo que contengan frases clave. Por ejemplo: si se puede llamar http://www.tuweb.com/comprar-mi-producto.html, no lo llames solamente ../comprar.html
• No usar guiones bajos en nombres de archivo largos, usar guiones normales (-).
• Usar palabras clave en el título de la página.
• Utilizar título y etiquetas meta diferentes para cada página.
• Usar cabeceras (h1, h2, h3…) para definir importancia en el contenido y colocar en ellas las palabras clave.
• Utilizar palabras clave en el “anchor text” de los enlaces, rellenar todas las etiquetas alt de las imágenes y title de los enlaces.
• Servirnos de la mejor tecnología para que la página cargue rápido y el usuario no tenga que esperar.
• No utilizar frames.
• Imprescindible un mapa del sitio visual (para el usuario), otro en XML (para los buscadores), y el archivo robots.txt.
• En cualquier página web sobre posicionamiento SEO se pueden encontrar más técnicas como estas por docenas: SEOmoz, tiene un ranking de técnicas de posicionamiento elaborado por los más prestigiosos SEO a nivel internacional. Dirson, 1-en-buscadores, etc.

3. Actualizaciones, creación de datos:

Los buscadores indexan con más frecuencia las webs que cambian de contenido continuamente; por lo tanto si mantenemos un contenido de calidad, y un nivel de creación de datos aceptable, la escalada en los buscadores se hará más rápidamente.

4. Link building:

Este es uno de los capítulos más relevantes del top 10. La construcción de enlaces hacia tu sitio es lo hace aumentar el PageRank, que es el medidor de importancia de webs que utiliza Google (no olvides que quien te enlace tiene que tener buen PageRank, si no, no se consigue casi nada).

En este punto toca hacer referencia a un artículo que es toda una autoridad en el tema: 101 Link Building Tips to Market Your Website por Aaron Wall y Andy Hagans.

5. Redacción de contenidos externos:

Consiste en escribir artículos, reportajes, comentarios y respuestas en foros….siempre enlazando con la firma del pie de página, hacia tu sitio web. Aquí me gustaría hacer referencia al artículo El arte de escribir bien para comunicar mejor, que como su propio nombre indica, nos servirá de ayuda para mejorar nuestra redacción (tanto en papel como multimedia).

• Los beneficios de escribir en internet y para otros sitios web

6. Red social:

Es importante crear una comunidad virtual que genere contenido cambiante y dinámico para tu web. Esto consiste básicamente en administrar foros y mantener un blog y/o escribir en otros.

Si se disponen de más recursos, pueden construirse varias web “paralelas” con utilidades o de temática diferente, que a fin de cuentas redirijan tráfico a nuestra web principal.

• Redes Sociales en Internet
• ¿Ya tienes un blog?

7. Be famous:

Se tiene que hablar de tu sitio web. Organizar concursos online dando un premio al mejor diseño web, o al mejor diseño de un logotipo, siempre da publicidad al organizador. Y como dicen los políticos: que se hable de ti es bueno, aunque se digan cosas malas; lo malo es que nadie te haga caso.

• Cómo hacer un blog único y exitoso
• Celebra los 10 años tomándote una foto

8. Seguimiento de resultados:

Hay que mantenerse al tanto del tráfico que genera tu página web y cómo es ese tráfico. Aconsejo utilizar Google Analytics. Se tienen que corregir “imperfecciones” de tráfico, palabras clave con bajo rendimiento, etc.

Pero hay que ser cauto porque un cambio de palabras clave puede tardar mucho tiempo en hacerse notar, para bien o para mal, y se tienen que analizar bien los resultados antes de lanzarse a un cambio radical.

• Herramientas para medir las estadísticas de tu web

9. Relaciones comerciales recurrentes:

Es útil que otros nos ayuden a vender. Un programa de afiliados o de comisiones por venta realizada siempre es un buen método por tres razones fundamentalmente:

• La gente que venda los productos por nosotros está haciéndonos publicidad gratuita desde sus propias webs o tiendas.
• Las personas de nuestro programa de afiliados tienen que esforzarse en mostrar al público un producto bueno. Es decir, nos dan buena imagen.
• Mantienes a una cantidad fija de gente siempre interesada en tu sitio web, o navegando “alrededor” de él, ya que son tus comisionistas.

Si tu sitio web no vende productos, se pueden hacer otro tipo de programas de afiliados, por ejemplo, poder colaborar si es una revista online, y así beneficiará a los que colaboren (dejarán su firma con su web en el artículo), y a ti porque llenarán de contenido tu web.

• Internet: atrae publicidad e inversiones
• Publicidad en Internet: ¿Hora de cambiar el esquema de trabajo?

10. Offline:

Promoción offline que revierte en publicaciones online. Publicar en medios en soporte papel (periódicos, revistas, etc.), asistir a conferencias y congresos. Quien lea un artículo suyo en el periódico, o le haya gustado una buena conferencia, es muy problable que visite su sitio web, o publique una entrada en su blog haciéndole referencia. El boca a oreja sigue siendo efectivo. Incluso en técnicas SEO.

Toda esta información son meras DIRECTRICES. Lo que he pretendido con este artículo es hacer una guía de los puntos indispensables para una campaña SEO. El lector de este artículo debería completar la información de cada punto del que no tenga conocimiento extenso para poder iniciar así una campaña SEO viable.

Nota: los artículos listados debajo de cada punto son recomendación del grupo editorial de Maestros del Web para apoyar el contenido.

• ASNativos (Foro sobre Adobe Flash y ActionScript)
• Acceso Web (Foro sobre Accesibilidad)
• Ovillo (Foro sobre CSS)
• Cadius (Foro de la Arquitectura de Información, Usabilidad y Diseño de Interacción)
• Domestika (Foro sobre diseño y todas sus disciplinas)

• Firescope: es una extensión que se integra con Firebug para ampliarlo con material de referencia de HTML y CSS. La información muestra resultados de búsqueda con información sobre compatibilidades de navegador, normas de cumplimiento, y un breve resumen de uso.
• Extensiones SEO de Firefox
• Las 30 mejores extensiones de Firefox

Aplicación online todavía en beta pero que puede ser interesante:

• Screen Toaster

Enlace que muchas veces puede resultar útil. Se trata de una herramienta online para comparar diferencias entre archivos de texto (por ejemplo para comparar CSS de distintas versiones)

• Compare my Files