Imagen de Search Engine Land

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.

Factores internos de posicionamiento

Factores externos de posicionamiento

Factores con posible penalización

Tipos de bloqueos

Estas fuentes podrán ser utilizadas mediante la Google Font API con el fin de implementarlas en nuestros diseños de manera rápida y sencilla. Tan sólo necesitamos crear un enlace a la Google Font API, especificando el tipo de fuente que vamos a utilizar y aplicarla mediante selectores CSS en donde deseemos:

h1 { font-family: 'Crimson Text', arial, serif; }

Este nuevo método propuesto por google supone muchas ventajas, porque las fuentes se comportan como texto normal, sin canvas ni otros objetos, son indexables y además son accesibles a todo tipo de lectores de pantalla. Internet Explorer 6 también soporta la Google Font API sin ningún tipo de hack ni derivados.

Para usuarios más avanzados se ha liberado una librería de JavaScript llamada WebFont Loader. Además tienes la opción de usar la librería TypeKit para personalizar las fuentes aun más. Por si fuera poco también nos han ofrecido un visualizador de fuentes. Por último aquí teneis un video explicativo de la aplicación (en ingles).

Una de las mayores preocupaciones de los desarrolladores, es saber como se visualizará su página en los diferentes navegadores y plataformas. El simple echo de que Windows no permita desplegar y ejecutar las diferentes versiones de IE en paralelo, ha provocado que las pruebas de sitios web en IE6, IE7 e IE8 sean un constante quebradero de cabeza. Aunque existen soluciones alternativas, no todas son fiables.

Para intentar paliar el problema que ellos mismos has creado, Microsoft ha publicado Expression Web SuperPreview, que estará incluido en futuras versiones de Expression Web, aunque de momento queda como un producto externo. Mediante este programa podremos comparar el render de nuestras páginas para las diferentes versiones de Explorer. Todo ello directamente sobre una maqueta y en la misma máquina. Por ahora se limita a los motores de Internet Explorer, aunque se prevé que soporte más navegadores en el futuro.

Lo bueno

Tras un primer análisis, parece una herramienta fiable con una interfaz muy limpia y intuitiva. Tiene varias vistas para visualizar las páginas de maneras diferentes, zoom , reglas y guías. También lee etiquetas DOM, pero no permite modificarlas y la información que ofrece que éstas es más bien escasa.

Sin duda alguna lo mejor de la herramienta es el modo de superposición de vistas, para comparar exactamente las diferencias de visualización entre navegadores.

Lo no tan bueno

Pero también tiene puntos negativos que deberán mejorar para la versión final:

• Ocupa mucho espacio (250 MB).
• Hay que instalarlo.
• Requiere .NET Frameworws 3.5 SP1.
• No se puede interactuar en tiempo real con el navegador.
• Ofrece información y nula interacción de los objetos DOM.
• Por ahora no visualiza JavaScript
• Al menos en mi máquina, el render es extremadamente lento.

Enlaces

• Página de Expression Web SuperPreview
• Descargarse el Trial de Expression Web SuperPreview (gratuita)
• Descargarse el Trial de Expression Web SuperPreview con firefox (prueba de 60 días)

La intención de este artículo es introducir varias técnicas y metodología que optimizarón la calidad y legibilidad los textos de nuestras webs.

En primer lugar vamos a explicar la diferencia entre un lector de material impreso y un usuario web. Hay que tener en cuenta varias consideraciones:

• La lectura en un monitor es más incómoda que en un texto impreso.
• El usuario es impaciente y voraz , porque tiene a su disposición millones de alternativas a la tuya.

¿Por qué debo adaptar la redacción de mis textos para la web?

• En la web el contenido es lo más importante: recuerda que lo usuarios se mueven buscando información. Si no presentas tu contenido de forma legible y agradable no será leída por mucha gente, por muy buena y útil que esta información sea.
• Atraerás visitas: si tienes buenos contenidos, bien estructurados y fáciles de leer, será más probable que otros usuarios quieran compartirlos mediante enlaces a tu web o en redes sociales.
• Ayudará a mejorar tu posicionamiento: será más fácil para los robots de búsqueda rastrear tu contenido mejorando tu posicionamiento.
• Tu página será más accesible: esta manera de jerarquizar y escribir contenidos, hará que tu página sea más accesible para personas con discapacidad, aumentando tu número potencial de usuarios.

Técnicas y estrategias

Debemos entender que la forma de estructurar los textos en Internet está determinada más por razones funcionales que por simples razones estéticas, literarias o artísticas. Teniendo en cuenta esto, vamos a ver varias técnicas que pueden ayudar a los usuarios a retener mejor nuestros textos

• Estilo de escritura en pirámide invertida : una manera de organizar nuestro contenido es jerarquizándolo de mayor a menor interés, esto es comenzar con las conclusiones. Este estilo es muy eficaz porque nos asegurará que el usuario lea la información más importante cuando abandone nuestro sitio.
• Mensajes clave: siguiendo la filosofía del punto anterior, el mensaje principal que quieras dar debe ser evidente desde el primer párrafo. La claridad y la concisión son fundamentales para redactar nuestros contenidos.
• Separación en trozos: los textos muy largos se deben dividir y agrupar el contenido en partes significativas, con su respectivos títulos descriptivos para mostrarlo en distintas páginas. Cada página se enlazará con el índice principal del artículo.

Como mejorar la legibilidad

En cuanto a la redacción:

• Utiliza frases cortas que expresen una sola idea.
• Lenguaje simple e informal: es más adecuado que el elegante o formal, ya que la lectura es más rápida en el primero.
• Contenidos escaneables: para que puedan ser mejor visualizados, es necesario maquetar nuestros textos con distintos niveles de encabezados que describan el contenido de cada página, usa listas siempre que puedas.
• Jerga: Lo más probable es que el usuario no sepa nada del tema del que habla su web por ello elimine la jerga específica de su contenido, recuerde segundo primer punto de esta lista.
• Texto Abreviado: omite palabras y frases que no aporten contenido relevante.
• Propaganda: los usurarios detestan la publicidad y aprenden pronto a ignorar los mensajes publicitarios, incluso cuando intentan aparecer como información objetiva camuflada en el texto. Además, esta forma de redacción impone a los lectores una carga mental extra, que les obliga a filtrar las exageraciones para llegar a las cuestiones concretas. Esto hace lenta su lectura y finalmente los hace huir del Sitio. El usuario viene a tu sitio en busca de información útil, no de publicidad.
• Verbos expresivos: El uso de un verbo preciso comunica con mayor fuerza lo que usted desea expresar. También elimina redundancias y reduce la longitud del texto. Por ejemplo:
  • Tomar una decisión / decidir
  • Proporcionar apoyo / apoyar
  • Hacer uso de / usar
  • Sirve para explicar / explica
  • Efectuar un examen / examinar
• Juegos de palabras y localismos: no aludas a referencias culturales o bromas de ámbito geográfico limitado. Lo que tu entiendes que puede ser gracioso para alguien de tu región, puede que no sea entendido por los usuarios de otra región distinta o en el peor de los casos, puede que sea ofensivo para ellos.
• Eufemismos: huye de ellos, muchas veces lo políticamente correcto no es más que una forma de esconder la verdad.

En cuanto al diseño:

• Deja espacio alrededor de sus textos.
• Minimiza la anchura de sus párrafos
• Usa colores de alto contraste que diferencien bien el texto del fondo.
• Usa fuentes grandes (preferiblemente 12 puntos) y si es posible sans-serif . Las fuentes pequeñas se deben dejar para el texto que poca gente lee. Por ejemplo, descargo de responsabilidad.
• Utiliza negritas para resaltar las partes más importantes de sus textos. Además será un buen recurso de color para romper la uniformidad del texto. Utilizar la negrita en exceso puede ser contraproducente.
• Es mejor evitar marcar párrafos enteros con cursivas o mayúsculas. No estamos acostumbrados a leer la letra impresa de esa manera.

La aplicación se llama Balsami Mockups. Con esta herramienta podemos enseñarle a un diseñador como queremos que sea la estructura de nuestra Web, ya el diseñador se encargará de todo lo demás. Podemos también compartir nuestros bocetos con otros que usen la misma aplicación, y así poder modificarlo dependiendo de nuestras expectativas en el diseño.

Os dejo un video demostrativo de la aplicación, así en unos minutos os podéis hacer una idea de como funciona y lo rápido y sencillo que resulta:

No sólo esta orientado al diseño Web, también a aplicaciones de escritorio, aplicaciones para Iphone, etc. La aplicación no es gratuita, pero podéis descargaros la versión de prueba que funciona al 100%. Con esta herramienta nos evitaremos gastar tinta y papel. Es muy práctico en este aspecto, ya que podemos mostrarlo al Diseñador o viceversa y compartir ideas. Finalmente os dejo el enlace de descarga de la aplicación Balsami Mockups:

Descargar Versión de prueba de Balsami Mockups

Fuente: Maestros del Web

Hace pocos días que ha sido lazanda la esperada versión 1.4 de jQuery. De hecho todavía no está disponible en la web oficial, aunque se puede descargar de jquery14.com o de los siguentes enlaces:

• jQuery 1.4 optimizado (23kb)
• jQuery 1.4 estándar(154kb)
• Alojada en Google: http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
• jQuery 1.4 Documentación

jQuery es probablemente el framework JavaScript más popular de la web, por lo que el equipo de jQuery necesita ser muy cauto respecto a los cambios en las nuevas versiones.

207 errores han sido corregidos, ahora consigue un 100% de compatibilidad en todas las pruebas en IE6, IE7, IE8, Firefox 2, Firefox 3, Firefox 3.5, Safari 3.2, Safari 4, Opera 10.10, y Chrome. Se han añadido un número considerable de nuevos métodos y dos nuevos eventos: focusIn y focusOut.

También se han publicado una serie de posibles incompatibilidades que pueden aparecer al actualizar este framework, podemos verlas aquí.

Para “alcanzar” el nivel de accesibilidad de los portales sobre la nueva recomendación de W3C, se desarrollado una nueva versión del analizador de accesibilidad TAW. Actualmente es una beta, pero funciona bastante bien

Su uso es mucho más sencillo, ya que el informe que genera la herramienta ofrece cuatro tipos de vistas: Resumen, Vista Marcada, Detalle y Listado. Lo mejor es instalarlo o usarlo a través de su Web para comprobar su funcionamiento y sus características.

Acceder a la herramienta TAW

También podemos descargar el complemento para Firefox que actualmente verifica las pautas WCAG 1.0, hasta que se lance la versión TAW con las 2.0 oficial.

Como explica en el vídeo, se trata de un plugin que nos permite convertir nuestro Internet Explorer en Google Chrome (el motor de renderizado). Mediante un tag html añadido en las páginas web activaremos o no el motor de Chrome para renderizar la página que estemos visitando.Con esto conseguiremos visualizar nuestra página exactamente igual que si fuera Google Chrome el que abre dicha página. Mostramos a continuación como implementar este curioso plugin:

HTML

Añadimos simplemente esta línea de código (meta) en el head de nuestro HTML.

Si Internet Explorer tiene instalado el plugin, hará que el motor de renderizado de HTML empleado por Google Chrome se encargue de procesar la página.
Podemos detectar si el plugin está instalado de la siguiente forma:

Este código nos permite comprobar si el plugin está instalado y ofrecer al usuario la posibilidad de instalarlo.

Este tipo de cosas (Chrome Frame) hace que Google Chrome sea cada vez más usado entre los usuarios

Fuente: anieto2k

Como hemos comentado otras veces, cada vez se usan más los frameworks para facilitar el trabajo a los desarrolladores y maquetadores Web. A parte de facilitarnos el trabajo, mejora visualmente el contenido de nuestra Web, ya que nos permite añadir nuevas funcionalidades en muchos casos dinámicas y que mejoran visualmente nuestros proyectos Web.

Javascript Framework Matrix lo podemos usar como guía de referencia para diferentes frameworks, y conocer un poquito más su uso, funcionalidades, estados, efectos, clases, etc.

El código para mostrar el archivo PDF dentro de tu página Web es el siguiente:

Tan solo usando el código que hemos puesto arriba y modificando la ruta del archivo, ya podemos visualizar documentos PDF y documentos Powerpoint en línea. Una forma muy útil de mostrar a los usuarios de forma directa nuestras presentaciones.