El portal Search Engine Land, ha creado una imprescindible infografía que organiza como si de una tabla periódica se tratase, algunos factores que impactarán de manera positiva o negativa en el posicionamiento de una web.

Hay disponibles dos versiones de la tabla para descarga: la versión en formato extendido (con las descripciones y leyenda completa) y en formato reducido (solo el esquema).

En este artículo podréis encontrar un breve resumen y sobretodo el significado de las abreviaturas de la tabla para poder decodificarla correctamente.

Seguir leyendo »

Cuando se habla de Web Móvil se está haciendo referencia a una Web en la que el usuario puede acceder a la información desde cualquier lugar, independientemente del tipo de dispositivo que utilice para ello.

La Web móvil se presenta como un auténtico reto tanto para usuarios como para desarrolladores ya que, por un lado, el usuario encuentra problemas al intentar acceder a los sitios Web desde los dispositivos móviles, y por otro, los proveedores de contenido encuentran dificultades para crear sitios Web que funcionen adecuadamente en todos los tipos de dispositivos y configuraciones. Con la Web Móvil se intenta llegar a más usuarios y que ellos puedan acceder desde cualquier dispositivo móvil a la Web.

Este documento especifica las Mejores Prácticas para el contenido Web de dispositivos móviles. El objetivo principal es mejorar la experiencia del usuario de la Web cuando se accede desde estos dispositivos.

Las recomendaciones se refieren a la entrega de contenido y no a los procesos por los cuales se crea, ni a los dispositivos o agentes de usuario al que se entrega.
Principalmente a los desarrolladores y operadores de sitios Web. Con este documento se intenta familiarizados con la creación de sitios Web, y tener una familiaridad con las tecnologías que intervienen, tales como servidores Web y HTTP.

Buenas prácticas Web Móvl

• Consistencia temática: Mantener una temática coherente para los distintos dispositivos móviles.
• Capacidades: Explotar las capacidades del dispositivo para proporcionar una mejor experiencia al usuario.
• Deficiencias: Toma las medidas oportunas para evitar implementaciones deficientes.
• Pruebas: Lllevar a cabo las pruebas sobre los dispositivos, así como los emuladores.
• URLs: Usar URLs cortas.
• Barra de Navegación: Oferecer como mínimo un menú navegación en la parte superior de la página.
• Equilibrio en los enlaces: Tener en cuenta el equilibrio entre tener demasiados enlaces en una página y pedir al usuario a seguir demasiados enlaces para llegar a lo que están buscando
• Navegación: Proporcionar mecanismos de navegación coherentes.
• Claves de Acceso (Acces Keys): Asignar claves de acceso a los enlaces en los menús de navegación y a los enlaces que son visitados frecuentemente.
• Identificar los enlaces: Identificar claramente el objetivo de cada vínculo.
• Mapa de imágenes: No usar mapa de imágenes a menos que sepas que el dispositivo lo soporta eficazmente.
• Pop-Ups o Ventanas emergentes: No utilices Pop-Ups sin informar al usuario.
• Auto Refresh: No utitlizar auto refresh (auto refrescar página) en la página a menos que se le haya informado al usuario.
• Redireccionamiento: No utilices marcar para redirigir las páginas automaticamente. Configura el servidor para que el mismo lo haga de forma automática.
• Recursos externos: Mantén el número de recursos externos al mínimo.
• Contenedido conveniente: Asegúrese de que el contenido es conveniente para su utilización en un contexto móvil.
• Claridad: Utiliza un lenguaje claro y sencillo.
• Limitación del contenido: Limite el contenido a lo que el usuario ha solicitado.
• Tamaño de páginas usable: Mantener el peso de página limitado para que no ralentice la navegación del usuario.
• Tamaño de páginas limitado: Asegurarse de que el tamaño global de la página es adecuado para las limitaciones de memoria del dispositivo.
• Desplazamiento o Scroll: Límite el desplazamiento de la página en una dirección, en el caso de que el desplazamiento secundario se pueda evitar.
• Imágenes para el espaciado: Nunca utilicemos imágenes para el espaciado.
• Tamaño de imágenes: No utitlizar imágenes con una alta resolución y peso elevados. Para una mayor prestación y carga del dispositivo.
• Uso del color e imágenes: Asegurarse que la información que proporcionamos con colores e imágenes también esta disponible sin el uso de estas.
• Contraste de color: Mantener un contraste claro entre el color de fondo y el color del contenido.
• Imágenes de fondo: Cuando utilices imágenes de fondo aseguúrate de que el contenido sigue siendo legible en el dispositivo.
• Título de página: Ofrecer un breve pero descriptivo título de la página.
• No Frames: No utilizar frames (marcos) en ninguna página.
• Estructura: Usar las características del lenguaje para crear una estructura lógica en el documento.
• Tablas: Antes de usar las tablas asegúrate de que el dispositivo las soporte eficazmente.
• Tablas anidadas: No utilizar tablas anidadas.
• Tablas para diseño: No utilices las tablas para diseñar la página.
• Tablas alternativas: Siempre que sea posible, utiliza una alternativa a la presentación de datos o presentación tabular.
• Texto alternativo: Proporcionar un texto alternativo para todo elemento no textual.
• Objects o Scripts: No utilizar objetos incrustados o script, ya que actulamente la mayoría de los dispositivos no los soportan.
• Especificación en el tamaño de las imágenes: Especifica el tamaño de las imágenes a descargar para aquellas que tengan un peso alto.
• Redimensionamiento de imágenes: Cambiar el tamaño de las imágenes en servidor para aquellas que tengan un peso demasiado alto.
• Marcado Válido: Crea documentos que validen satisfactoriamente.
• Medidas: No utilizar medidas en píxeles ni unidades absolutas..
• Uso de CSS: Utiliza una hoja de estilos para controlar la presentación y disposición de la página, a menos que el dispositivo no lo soporte.
• Soporte CSS: Organiza los documentos de modo que si es necesario puedan ser leídos sin hojas de estilo.
• Tamaño de la hoja de estilos CSS: Mantener y minimizar el tamaño de la hoja de estilos.
• Minimizar: Utilizar un marcado conciso y eficiente.
• Soporte de formatos: Enviar contenido en un formato que se sepa que es soportado por el dispositivo.
• Formato preferido: Siempre que sea posible, enviar el contenido en un formato preferido.
• Codificación de caracteres: Asegúrese de que la codificación de caracteres del documento es soportado por el dispositivo.
• Uso de la codificación: Indicar la codificación de caracteres que se utilice.
• Mensajes de Error: Proporcionar información útil en los mensajes de error.
• Cookies: No se basan en cookies disponibles.
• Caché: Proporcionar la información en caché de las respuestas HTTP.
• Fuentes: No contar con la herencia en estilo de fuente.
• Minimizar acciones del teclado: Matener el número de pulsaciones o acciones del teclado del dispositivo al mínimo, para una mayor rapidez del usuario.
• Inputs o entradas de texto libre: Evitar la entrada de texto libre, siempre que sea posible.
• Valores por defecto: Ofrecer pre-seleccionado los valores por defecto cuando sea posible.
• Inputs: Especifique un modo de entrada de texto por defecto, el lenguaje y/o formato de entrada, si el dispositivo se sabe lo soporte.
• Orden de tabulación: Crear un orden lógico a través de los enlaces, controles de formulario y objetos.
• Cotrol de Labels: Etiqueta todos los controles de forma adecuada y explícitamente asociados con las etiquetas..
• Posición de controles: Posicionar las etiquetas de modo que se establecen correctamente en relación a la forma que se refieren a los controles.

Por útlimo os proprociono el validador de las Buenas Prácticas en Web Móvil:
Validador Web Móvil

Fuente: W3C Web Móvil

Todos nos hemos encontrado con el problema de la diferencia de estilos por defecto que hay entre los distintos navegadores. Sobretodo con “nuestro amigo” IE6. Para evitar minimizar ese problema, podemos establecer una serie de estilos que reseteen la página y la dejen con unos estilos iguales de partida para todos los navegadores.

Con el reseteo de estilos, nos aseguramos un comportamiento parecido en los distintos navegadores. Por supuesto, esto no va a hacer que si maquetamos para el navegador X, se vea todo correcto en el navegador Y. Pero si nos aseguramos que los elementos partan con unos estilos iguales.

Por ejemplo, ¿como se comporta por defecto una lista no numerada tipo “ul” en los distintos navegadores? Pues cada uno hace las cosas a su manera, cambia el bullet, los margenes, el padding, etc. Con el reseteo, podemos dejar la lista “limpia” para aplicar nuestros propios estilos.

Yo uso el de Eric Meyer’s CSS Reset y me va bastante bien.

Aqui tienen una buena colección de reseteadores.

Cuando los enlaces apuntan a un documento en vez de a una dirección es recomendable informar el tipo de contenido que nos vamos a encontrar. Así la etiqueta <a> permite el atributo type al que le decimos el MIME correspondiente.

Ejemplo:

Documento de ejemplo

Lista de tipos MIME:

Siempre a veces las circunstancias del proyecto nos exigen que la Web que hemos maquetado se vea también bien cuando la imprimos. Y para ellos personalizamos una hoja de estilo únicamente para esto. Por este motivo adjuntamos una hoja de estilos geénerica para el modo de impresión de la página.

/*basado en http://code.google.com/p/hartija/ y mejorado por Technosite */
*{
background-color:#fff !important;
background-image:none !important;
border:0 !important;
bottom:auto !important;
float:none !important;
height:auto !important;
left:auto;
margin:0 0 .5em !important;
min-height:1px !important;
padding:0 !important;
overflow:visible !important;
position:relative !important;
right:auto !important;
text-align:left !important;
top:auto !important;
width:auto !important
}
/* */
#leftContent, #header, #footer, #migas{
display:none
}
#rightCol{
width:95%
}
/* Links */
a:link[href^="http://"]:after, a[href^="http://"]:visited:after{
content:" (" attr(href) ") ";font-size:x-small
} a[href^="http://"]{
color:#000
}