Archivo de la categoría: Recursos

Fuente de recursos para maquetadores Web.

La tabla periódica del SEO

Publicado el por
1

Search Engine Land Periodic Table of SEO Ranking Factors

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 On page:
Area Abreviatura Significado Importancia del factor
Contenido Cq Calidad de contenido +3
Cr Investigación de las palabras clave +3
Cw Inserción de las palabras clave en el contenido +3
Ce Contenido participativo +2
Cf Contenido fresco y original +2
Código HTML Ht Título de la página +3
Hd Descripción de la página +2
Hh Encabezados de la página +1
Arquitectura Ac Página fácilmente rastreable +3
As Velocidad de carga +2
Au Construcción de la URL +1

Factores externos de posicionamiento

Factores Off page:
Area Abreviatura Significado Importancia del factor
Enlaces Lq Calidad de los enlaces entrantes +3
Lt Texto de los enlaces +3
Ln Número de enlaces que apuntan a tu sitio +2
Social Sr Reputación del sitio +2
Ss Con cuántos usuario se comparte el sitio +1
Confianza Ta Reputación del sitio +3
Th Antigüedad del dominio +1
Personal Pc País de origen de la visitas +3
Pl Ciudad de origen de la visitas +3
Ph Fidelidad de las visitas +2
Ps Opinión de tus amigos sobre el sitio +1

Factores con posible penalización

Violaciones
Abreviatura Significado Importancia del factor
Vt Contenido superficial y sin sustancia -2
Vs Utilización excesiva de palabras clave -1
Vh Ocultación de contenido -1
Vc Engañar a los robots de búsqueda -3
Vp Uso de enlaces de pago -3
Vi Creación de spam -1

Tipos de bloqueos

Bloqueos
Abreviatura Significado Importancia del factor
Bp Bloqueos personalizados -1
Bt Bloqueos masivos o totales -3

Google Font Directory, un nuevo método para insertar fuentes en la web

Publicado el por
2

La semana pasada, google presentó el Google Font API y Google Font Directory. La idea es compartir con los usuarios un repositorio de fuentes open source, conocida como Google Font Directory, alojadas en los servidores de Google. Este directorio, contiene por el momento un número reducido de fuentes disponibles.

Tipo de fuente Calibri

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).

Expression Web SuperPreview el renderizador web de Microsoft

Publicado el por
Responder

Paleta para elegir la versión de explorer que se renderizará

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.

La pantalla principal del programa

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.

modo de superposición de vistas

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

Como escribir para la web

Publicado el por
2

La Web tiene características propias que determinan como se estructura cualquier texto y el modo en que el usuario accede a la información. No hay duda alguna que el modo en que está escrito un texto afecta de manera dramática la experiencia de los usuarios. Hace tiempo hablamos precisamente de esto cuando analizando el patrón de lectura de los usuarios de la web. La conclusión fue que es un error escribir en la web de la misma manera que para un soporte impreso, puesto que los usuarios se comportaban de manera diferente.

Un boligrafo encima de un ordenador

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.

Crea bocetos para tus proyectos Web

Publicado el por
Responder

Desde Maestros del Web, nos hacen saber de una herramienta innovadora para generar bocetos para tus diseños Web. La aplicación es muy sencilla e intuitiva, de una manera rápida podemos crear un boceto de la Web que vamos a diseñar.

Ejmplo de boceto Web creado con Balsami Mockups

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

jQuery 1.4 ya disponible

Publicado el por
1

logotipo de jQuery

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 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í.

TAW para las WCAG 2.0

Publicado el por
4

Despues de la W3C haya publicado en Diciembre de 2008 las WCAG 2.0 se abren a los desarrolladores y promotores de sitios web la posibildiad de tener Webs tan accesibles como antes y al mismo tiempo más acorde con las nuevas tecnologías.

Logo TAW

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.

Convierte Internet Explorer en Google Chrome

Publicado el por
Responder

Desde el blog de anieto2k nos llega una interesantes noticia. Google ha adoptado una estrategia para “acabar con Internet Explorer”, y lo ha echo con Chrome Frame.

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

Javascript Framework Matrix, conoce los diferentes Frameworks

Publicado el por
Responder

Javascript Framework Matrix, nos proporciona una visión general de los populares frameworks JavaScript y sus funciones. Hay varios ejemplos de los frameworks y cada fragmento contiene enlaces a la documentación oficial correspondiente. La elección de un framework depende de muchos factores y no puede hacerse tan solo con este artículo. La tabla únicamente muestra los diferentes estilos de la API y las funciones de las bibliotecas JavaScript.

Javascript Framework Matrix

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.

Inscrusta archivos PDF con Google Docs

Publicado el por
Responder

Google Docs ofrece una nueva característica que te permite incrustar archivos PDF y presentaciones de PowerPoint en una página Web. Tan solo tienes que tener disponibles los archivos en línea, no es necesario subirlos a Google Docs.

Ejemplo Google Docs

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.