Una lista de potentes herramientas online que nos permiten analizar múltiples aspectos de un sitio web, lo que nos puede servir para localizar fallos que no conocemos y encontrar soluciones:

Optimización SEO

Web SEO Analytics nos permite tener de forma rápida una visión global del éxito de nuestro sitio web. Nos ofrece desde datos sobre nuestro hosting y dominio, hasta la repercusión que tenemos dentro de las principales redes sociales. Por supuesto también nos hace un resumen de como estamos indexados dentro de los principales buscados y los directorios más importantes, así como las palabras que tienen mayor relevancia de nuestra web y los enlaces que recibimos desde paginas externas. Muy útil y completo.

webseoanalytics.com

Análisis de rendimiento

Un sitio web excesivamente lento puede hacer que perdamos muchas visitas y aunque ya tengamos uno rápido siempre hay margen para mejorar. La mayor virtud de GTmetrix es que combina las 2 mejores herramientas para analizar el rendimiento de una página web (Google Page Speed y Yahoo! YSlow), lo que nos da 2 puntuaciones diferentes y una cantidad de datos enorme sobre como acelerar la velocidad de carga. Trata desde temas tan básicos como la compresión de imágenes o el no incrustar CSS y Javascript dentro de los archivos HTML. Hasta otros más avanzados como optimizar la configuración de nuestro servidor o mejorar la forma en que los navegadores hacen cache de nuestros archivos. Muy practico, pues nos evita instalar varias extensiones en nuestro navegador para analizar el rendimiento.

gtmetrix.com

Comprobar la legibilidad del texto

A veces por cuestiones de diseño acabamos usando texto y fondos de diferentes colores, que no siempre serán fáciles de leer para todas las personas. Gracias a esta herramienta detectaremos fácilmente áreas de texto que cansarían demasiado a nuestros visitantes o supondrían un problema para gente con problemas de visión. Muy importante, pues recordemos que el contenido es lo más importante.

checkmycolours.com

¿Conoces otra herramienta que merezca estar en esta lista?

En una entrada anterior ya publiqué la salida de G.P.S. y cual era su utilidad: Gimp Paint Studio: Una gran mejora en el dibujo y la pintura.

Desde entonces Ramón ha sacado ya 4 nuevas versiones, encontrándose actualmente en la 1.4, en las que ha añadido nuevos presents y mejorado los existentes. Entre los nuevos presents están algunos para realizar bocetos simulando lápiz, grafito o carboncillo, o para recrear efectos de fuego y vegetación.

La última versión la podéis descargar desde el blog del autor: ramonmirandavisualart.blogspot.com

Pero además Ramón Miranda se ha animado ha realizar un curso, mediante videotutoriales, para enseñarnos a usar GIMP y más concretamente GIMP Paint Studio. En los que además podemos verlo dibujar y aprender técnicas de ilustración de alguien con tan buena técnica como él, todo un lujo.

Estos vídeos los podéis ver desde su canal en Youtube: youtube.com/user/TheShockito

A continuación os dejo el vídeo de presentación de su curso para GIMP Paint Studio.

GIMP 2.8 cada vez está más maduro y próximo a su presentación oficial, de momento ya podemos experimentar con las nuevas opciones que traerá gracias a la versión inestable 2.7. Y vendrá cargado de novedades muy interesantes, siendo la principal una bastante polémica: el modo en una ventana. Somos muchos los miembros de su comunidad de usuarios que lo pedimos desde hace tiempo y también son muchos los que prefieren que siga como hasta ahora. A mí personalmente sí me resulta más cómodo en una sola ventana, en gran parte por estar acostumbrado a Photoshop, es cierto, pero también es verdad que ese tipo de interfaz es el más usado en los programas de diseño, incluso en los de código abierto como Inkscape o Blender. Con este cambio el periodo de adaptación a GIMP es más corto y los diseñadores gráficos lo encontraran más cómodo desde el principio.

En este caso el cambio no sera traumático para nadie, pues es opcional, quien quiera seguir usándolo en múltiples ventanas es libre de hacerlo. Además GIMP 2.8 trae muchas más novedades:

• El modo en una única ventana.
• Navegación en los archivos abiertos con previsualización de miniatura.
• Interfaz mucho más personalizable, pudiendo acoplar a nuestro gusto ventanas, cuadros de dialogo, etc..
• Edición de texto directa sobre la imagen, sin necesidad de abrir otros menús.
• Cambios en las opciones de guardar para hacer más rápido el proceso. Ahora solo permiten guardar en el formato nativo de GIMP: XCF, dejando los demás formatos para la opción exportar.
• Por fin podemos clasificar las capas en grupos.
• Pinceles, gradientes, patrones y otros recursos ahora pueden incorporar etiquetas que nos ayuden a ordenarlos y filtrarlos.
• Rotación en los pinceles.
• La dinámica de los pinceles tiene muchas más opciones (opacidad, tamaño, color, dureza, distancia, rotación, etc..).
• Nueva opción de “bloquear pixels” en una capa para evitar modificarlos por error.
• Posibilidad de usar expresiones numéricas para asignar el tamaño de una imagen.
• Modos de capas agrupados por categorías.
• Exportación de la paleta de colores a CSS, PHP, Java, Python o texto plano.
• Menú de herramientas totalmente personalizable.
• Nuevos atajos del teclado para acelerar el trabajo.
• Nuevo tipo de degradado basado en los colores de fondo y primer plano pero sin suavizado.
• Las curvas de color ahora muestran los canales R, G y B en el fondo para un ajuste más fino.
• Soporte para JPEG2000.
• Importación de RAW 16 bits.
• Los bordes de las imágenes ahora son “magnéticos”.
• GEGL totalmente integrado en GIMP, lo que permitirá en el futuro edición no destructiva (similar a los “objetos inteligentes” de Photoshop, algo que echo bastante en falta en GIMP)
• Ahora GIMP está bajo la licencia Lesser GPL v3.

En fin, son muchas mejoras, la mayoría destinadas a mejorar la usabilidad de la interfaz o hacer el programa más cómodo y rápido. También son importantes las mejoras en la potencia de los pinceles y el soporte GEGL de cara al futuro.

Esperemos que la versión final de GIMP 2.8 sea pronto estable (aunque se habla de 2011, el software libre suele avanzar lento pero seguro). Si alguien se quiere ir probando la versión inestable: FTP GIMP.org

Fuente (en inglés y con capturas de la versión 2.7): gimpusers.com

Cada vez los teléfonos móviles tienen más importancia en el diseño web, si hace unos años casi nadie usaba Internet desde el móvil, hoy día es un sector con un enorme crecimiento gracias a modelos como el iPhone o los nuevos Android. Eso nos plantea un problema, pues es difícil crear un sitio web que sea valido tanto para resoluciones de ordenador, como para las pequeñas pantallas de los dispositivos móviles. Y si creamos 2 versiones alternativas nos surgirá otra duda, ¿cómo filtramos a los usuarios según el dispositivo desde el que accedan?

Una respuesta a ese problema nos la da el proyecto Detect Mobile Browser que facilita código libre en diferentes lenguajes de programación (Apache .htaccess, ASP, ColdFusion, JSP, Javascript, PHP, Python y Rails) para redirigir a los usuarios de navegadores móviles a una versión especial de nuestro sitio web, que previamente hayamos adaptado.

El código es simple y claro, por lo que no nos supondrá demasiado esfuerzo integrarlo en nuestros proyectos. Además, usa una lista de navegadores bastante completa y actualizada.

También nos ofrece otra alternativa, crear direcciones basadas en su propio dominio que  filtraran a los visitantes según su navegador. Yo no le encuentro demasiada utilidad, quien querría compartir una dirección como esta:

http://detectmobilebrowser.com/www.dglibre.com|www.dglibre.com/mv

No solo resulta excesivamente largo, sino que afectaría gravemente a nuestro SEO.

En este blog ya he publicado información sobre varios cursos gratuitos de programas libres para diseño gráfico. Los 2 cursos que hoy os voy a comentar están realizados por la plataforma de teleformación del CESLCAM. Ambos se pueden hacer online y no tienen ningún coste.

-Curso de diseño gráfico con software libre: Enfocado principalmente al uso de Gimp para la edición de imágenes e Inkscape para crear gráficos vectoriales. Durante el curso nos presentan la interfaz de ambos programas y las herramientas que incorporan, para luego mediante videotutoriales ver ejemplos de su uso. Teniendo también 2 ejercicios prácticos que nos puntuaran según nuestra pericia con el programa.

-Curso de diseño gráfico 3D con software libre: Dedicado íntegramente a Blender, con un temario bastante completo que va desde los conceptos más básicos a la post-producción. Cuenta con vídeos de ayuda, así como ejercicios prácticos. Además, se basa en una versión bastante actual  y también nos habla de 2 motores de render libres muy interesantes para  Blender (Yafaray y Luxrender).

Los podéis encontrar en el siguiente enlace, necesitaréis daros de alta en el sitio web: formados.ceslcam.com

Esta plataforma de teleformación también tiene cursos de pago (que incluyen tutoría por parte de los profesores) y ofrece la posibilidad de comprar el curso de Blender en un CD. Además, tienen más cursos gratuitos enfocados sobretodo a Molinux (distribución de GNU/Linux hecha en Castilla la Mancha) y ofimática.

En fin, otra opción para aprender a usar herramientas gráficas libres, en este caso con videotutoriales en español, lo que hace más ameno el aprendizaje. A ver si un día los agrupo todos en la sección de tutoriales, para que la gente encuentre todo de forma más ordenada.

Cuando un diseñador web empieza un nuevo proyecto las primeras preguntas que debe hacerse son:

-¿Un diseño fluido o estático? y de ser estático, ¿qué resolución usaran la mayoría de los visitantes en el sitio web?

Preguntas no siempre fáciles de responder pues aunque tengamos una idea aproximada de las resoluciones más usadas, no tenemos sobre la mesa estadísticas fiables.

Actualmente no cabe duda de quien tiene más datos sobre los internautas, Google. La cantidad de información que maneja es incluso preocupante pero en este caso nos resultara muy interesante. Partamos de la base de que es casi imposible que, durante un mes, un internauta no visite el buscador de Google o alguna web con Analytics, se puede decir que tienen todos los datos reales y además actualizados. Por eso la nueva herramienta resulta extremadamente útil:

Google Browser Size

Siguiendo la forma de trabajar típica de Google nos presenta los datos de forma sencilla y clara. Cuando entramos vemos una página web de ejemplo, sobre la cual se representa con colores el % de internautas que vera cada parte sin necesidad de usar las barras de desplazamiento del navegador. Además, podemos cargar nuestro sitio web como fondo para poder verlo de forma gráfica.

Como ejemplo, DGLibre debería ser vista correctamente por el 80% de los internautas (cifras peores de las que esperaba aunque supongo que los navegadores de móviles y netbooks bajan la media). Por otra parte, la zona dedicada al texto es accesible para el 99%, cifra muy positiva.

Parece que por fin podemos disfrutar de la versión final de Inkscape 0.47 tras 1 año y medio de desarrollo. Las novedades son muchas, siendo las más importantes:

• Autoguardado para no perder nunca trabajos.
• Curvas Spiro: Una novedosa forma de trabajar con gráficos vectoriales.
• Nuevos efectos.
• Herramienta Borrador.
• Nueva colección de filtros para imágenes.
• Corrector ortográfico en textos.
• Soporte para el formato SVG muy mejorado.
• Nuevas extensiones: Calendario, marcas de impresión, guías y atributos de interpolación.
• Mejoras en la exportación de los formatos EPS y PS.
• Muchos errores corregidos y pequeñas funcionales añadidas que mejorar la usabilidad.

Podéis descargar la nueva versión en la web de Inkscape:  inkscape.org

Para aprender a trabajar con este programa os vuelvo a recomendar el manual de Joaclint Istgud del que ya he hablado en esta entrada: Curso de Inkscape gratuito.

Checkmycolours es una herramienta que sirve para analizar los textos de una página web, comprobando si son legibles para cualquier persona. Lo hace comparando el contraste y luminosidad de los textos con el color de fondo. Algo que puede parecer trivial pero que muchas veces se nos olvida a los diseñadores web, pues nos concentramos en hacer un diseño atractivo y podemos acabar con textos difíciles de leer para personas con problemas de visión. Y aun entre las personas que ven bien, no es lo mismo leer un texto claro que uno capaz de cansarnos la vista con rapidez, motivo por el que podemos perder muchas visitas.

Por eso me ha parecido interesante esta herramienta, con Checkmycolours obtenemos de forma rápida un resumen de la legibilidad de los textos que tenemos en nuestro sitio web. Además, nos avisa cuando el contraste entre un texto y el fondo es insuficiente según el algoritmo propuesto por el W3C y nos permite hacer pruebas en tiempo real cambiando los colores.

Aparte hay que admitir que el creador ha conseguido una interfaz sencilla de usar y muy bonita a nivel gráfico.

Cada día son más las herramientas online que nos facilitan la vida pero de vez en cuando uno se encuentra pequeñas joyas que se vuelven imprescindibles. Es el caso de my Fontbook, uno de los mejores gestores de tipografías que he probado, siendo además gratuito y online. Por fin tenemos a mano una herramienta para visualizar y clasificar las fuentes instaladas desde cualquier navegador.

La interfaz del visor está basada en Ajax y resulta muy sencilla de manejar. Al entrar en my Fontbook por primera vez se cargaran las tipografías que tengamos instaladas (suele tardar unos minutos), luego podremos navegar entre ellas, probar textos concretos, poner etiquetas para tenerlas ordenadas, seleccionar las favoritas e incluso conocer datos técnicos sobre ellas. Otra opción muy útil que nos ofrece son las pruebas de impresión. Si seleccionas una tipografía y luego haces clic en el icono de la impresora nos saldrá una completa muestra de textos con esa tipografía a diferentes tamaños. Ideal para hacer pruebas de legibilidad en trabajos que mandaremos a imprenta.

Para usar algunas de estas opciones necesitaremos registrarnos, lo que no supone ningún problema pues es gratis y solo nos pide 3 datos. Vamos, una maravilla de herramienta que nos facilita mucho la vida a los diseñadores gráficos, acostumbrados a tener montones de tipografías acumuladas de anteriores proyectos.

Os dejo el vídeo donde el autor muestra su funcionamiento:

Siendo sinceros nunca espere gestionar mis tipografías de esta forma, un claro ejemplo de que la informática extiende rápidamente sus raíces hacía “la nube“, con las ventajas e inconvenientes que ello supone.

Cuando creamos un sitio web siempre debemos tener en cuenta como se adapta a diferentes resoluciones de pantalla. Existen herramientas que nos permiten hacerlo fácilmente, como por ejemplo la estupenda extensión Web Developer de Firefox, o también podemos cambiar a mano la resolución de nuestro escritorio aunque resulta una molestia.

Una alternativa rápida es ViewLike.us, un servicio web muy simple pero efectivo. Solo debemos de indicarle la dirección del sitio web  a probar y pulsar en el botón de la resolución deseada para que nos previsualice la web en un cuadro de ese tamaño mediante Ajax. Las resoluciones que nos ofrece son las más estandarizadas (incluyendo la Wii y el iPhone), aunque se echan de menos algunas panoramicas y sobretodo poder crear otras nuevas manualmente. No es la herramienta del año pero en ocasiones resulta útil.