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?

El curso consta de varios apartados, donde se explican los materiales necesarios, las diferentes técnicas que se pueden usar e incluso como corregir lo errores más comunes. Muy completo y casi imprescindible para cualquier aficionado a la fotografía.

Lo podéis ver en: nocturna.carlosserrano.org

También merece la pena visitar su galería de fotos, la mayoría son impresionantes. Un ejemplo:

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.

He hecho una especie de chuleta para tenerla siempre ha mano con los comandos más usados en la consola de GNU/Linux, muy útil tanto para refrescar la memoria a usuarios expertos, como para principiantes que se aventuran a descubrir la potencia escondida tras las ventanas gráficas.

La mayor parte de los comandos son validos para cualquier distribución de GNU/Linux, incluso para algunos Unix. En cambio los comandos de Yum son solo validos para Red Hat y sus derivados (Fedora, CentOS, etc…) que son los distribuciones que más uso actualmente.

Encendiendo y apagando el sistema.

• shutdown -h now Apaga el sistema y sin reiniciar.
• halt Apaga el sistema de la misma manera que el comando anterior.
• shutdown -h 5 Apaga el sistema en 5 minutos después de ejecutarse y no reinicia.
• shutdown -r now Apaga el sistema y reinicia.
• reboot Reinicia el sistema directamente, similar al anterior comando.
• shutdown -r 5 Apaga el sistema 5 minutos después de haberlo ejecutado y reinicia.
• startx Inicia el entorno gráfico.

Moviéndonos por directorios.

• cd /home/tux Ingresa al directorio “/home/tux”.
• cd .. Vuelve al directorio raíz.
• pwd Dice la ruta en la que estamos trabajando.

Crear un directorio.

• mkdir /home/tux Crea el directorio “/home/tux”

Listar archivos.

• ls -l Lista los archivos del directorio actual con todos sus atributos.
• ls -F Lista los archivos del directorio actual indicando su tipo.
• ls -lC Lista los archivos del directorio actual en columnas.
• ls -a Lista los archivos invisibles del directorio actual.
• ls /home/tux Lista el contenido del directorio “/home/tux”.

Comodines

• * Sustituye varios caracteres. Ejemplo: ls *.mp3 (lista todos los archivos con extensión mp3).
• ? Sustituye un solo caracter . Ejemplo: ls foto?.jpg (listaría todos los archivos jpg que se llamaran: foto1.jpg, foto3.jpg, fotok.jpg, etc..).

Copiar y mover archivos.

• cp ejemplo.txt /home/tux Copia el archivo “ejemplo.txt” dentro del directorio “/home/tux”.
• mv ejemplo.txt /home/tux Mueve el archivo “ejemplo.txt” dentro del directorio “/home/tux”.

Renombrar archivos.

• mv ejemplo.txt ejemplo2.txt Usamos el comando mv para renombrar el archivo “ejemplo.txt” a “ejemplo2.txt”.

Borrar archivos

• rm ejemplo.txt Borra el archivo con nombre “ejemplo.txt”.
• rm -R /ejemplo Borra el directorio “ejemplo” con todos los archivos que tiene dentro.
• rm -Rf /ejemplo Borra el directorio “ejemplo”  con todo su contenido y sin preguntar. Cuidado al usar este comando.

Comprimir y descomprimir archivos con tar, gzip o bzip2.

• tar -zxvf ejemplo.tar.gz Descomprime y desempaqueta el archivo “ejemplo.tar.gz”.
• tar -zcvf ejemplo.tar.gz /home/tux Empaqueta y comprime el directorio “/home/tux” dentro del archivo “ejemplo.tar.gz”.
• tar -jxvf ejemplo.tar.bz2 Descomprime y desempaqueta el archivo “ejemplo.tar.bz2″.
• tar -jcvf ejemplo.tar.bz2 /home/tux Empaqueta y comprime el directorio “/home/tux” dentro de “ejemplo.tar.bz2″.

Cambiar permisos.

• chmod 755 /home/tux/ejemplo.txt Da permisos 755 al archivo “ejemplo.txt” situado en el directorio “/home/tux”.

Abrir o editar un archivo de texto o configuración.

• nano ejemplo.txt Esto abrirá el archivo “ejemplo.txt” en el editor de texto nano que es rápido y sencillo de usar, también se pueden usar otros más complejos como vi, emacs, vim, etc..

Búsquedas

• find / -name ejemplo.txt -print Busca el archivo “ejemplo.txt” empezando por el directorio / y lo muestra en pantalla .
• whereis fichero Busca los ficheros binarios, fuentes y páginas del manual correspondientes a un paquete.

Montado de sistemas de archivos.

• mount -t iso9660 /dev/cdrom /mnt/cdrom Monta la unidad de CD-ROM en el directorio “/mnt/cdrom”.
• mount -t msdos /dev/hda1 /mnt/win_c Monta el disco “C” en el directorio especificado con partición msdos.
• mount -t vfat /dev/hda1 /mnt/win_c Monta el disco “C” con partición FAT en el directorio especificado.
• umount /mnt/cdrom Desmonta el CD-ROM.
• umount /mnt/win_c Desmonta el disco  “C”.

Administración de usuarios.

• adduser tux Agrega un usuario llamado “tux”.
• passwd tux Le asigna la clave de acceso al usuario “tux”.
• userdel tux Borra la cuenta “tux”.
• su – tux Se toma momentáneamente los privilegios del usuario “tux”.
• su Nos da privilegios de ROOT siempre que tengamos la contraseña.
• exit Sale del perfil del usuario que lo ejecuta.

Matar procesos activos

• ps axu Lista los procesos que están corriendo en ese momento.
• kill -9 mozilla Mata el proceso mozilla. Sin darle tiempo a terminar.
• kill -9 78 Mata el proceso con número de PID 78. Sin darle tiempo a terminar.
• kill 78 Fuerza a terminar el proceso pero no lo mata directamente, puede no funciona con procesos bloqueados.
• top Nos muestra el uso de CPU, cuales son los procesos que más consumen y nos permite matarlos interactivamente.

Información del Sistema

• hostname Devuelve el nombre de la maquina.
• uptime Devuelve la cantidad de tiempo transcurrido desde la última vez que se arranco el sistema.
• uname -a Información sobre el sistema operativo de la maquina.
• free -tm Información sobre la cantidad de memoria disponible y usada.
• df -h Información sobre todo los dispositivos montados en la maquina.
• du -bh /|more Información sobre el espacio ocupado por cada subdirectorio, comenzando en el directorio raíz (/).
• cat /proc/cpuinfo Información sobre el microprocesador.
• cat /proc/interrupts Información sobre las interrupciones en uso (IRQs).
• cat /proc/filesystems Información sobre los sistemas de archivos que se pueden utilizar (compilados en el kernel).
• who Información sobre los usuarios usando el sistema.
• id tux Información sobre UID, GID y GROUPS del usuario tux.
• last Información sobre los últimos usuarios que han usado el sistema.
• /sbin/ifconfig Información sobre los distintos dispositivos de red.
• netstat Información sobre la conexión de red.

Obtener ayuda sobre un comando.

• man shutdown Nos ofrece ayuda sobre un determinado comando, en este caso “shutdown”.

Vaciar pantalla.

• clear Limpia la pantalla de una terminal.

Combinaciones de teclas

• [Ctrl]+[Alt]+[Del] Shutdown Apaga el sistema de forma organizada desde una terminal texto.
• [Ctrl]+[Alt]+[F1] Cambia a la primera terminal de texto.
• [Ctrl]+[Alt]+[Fn] Cambia a la terminal de texto numero n (n=1,…,8).
• [Ctrl]+[Alt]+[Fn] Cambia a la terminal X numero n (n=7,…,12).
• [Tab] Auto-completa el nombre de un mandato, fichero, directorio, programa, cuando trabajamos en una terminal texto.
• [ArrowUp] Va editando la historia de mandatos que hemos escrito anteriormente en terminal texto.
• [Shift][PgUp] Scroll la salida de la terminal hacia arriba, en terminal texto.
• [Shift][PgDown] Scroll la salida de la terminal hacia abajo, en terminal texto.
• [Ctrl]+c Termina el proceso actual. Si no esta corriendo de fondo.
• [Ctrl]+d Termina la terminal actual.
• [Ctrl]+s Para la transferencia a la terminal.
• [Ctrl]+z Manda el proceso actual a correr de fondo.

Instalar, desinstalar o actualizar paquetes con YUM (solo valido para Fedora, Red Hat y derivados como CentOS).

• yum update Actualiza todo el sistema con todas la dependencias que sean necesarias.
• yum list gimp Busca el paquete “gimp” dentro de los repositorios que tengamos configurados.
• yum search gimp Busca paquetes que tengan relación con el nombre “gimp”, útil si no sabemos el nombre de un paquete concreto.
• yum install gimp Instala el paquete “gimp” y todos sus dependencias.
• yum groupinstall “KDE” Instala el metapaquete KDE, todos los paquetes que lo forman y sus dependencias.
• yum remove gimp Desinstala el paquete “gimp”.
• yum update gimp Actualiza solo el paquete “gimp” y sus dependencias.
• yum clean all Limpiar la cache de YUM y otros datos guardados para ahorrar espacio en disco, también puede solucionar comportamientos raros por parte de YUM.

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

Por un comportamiento bastante poco profesional por parte de la empresa de hosting donde estaba alojado dglibre.com, que han parado sus servicios 23 días antes de la fecha prevista y sin dar explicaciones. He tenido que restaurar una copia de seguridad de hace 1 par de semanas, por lo que se han perdido comentarios y la última entrada que había añadido.

El texto de la entrada lo he recuperado gracias a la cache de los buscadores, aunque sin el archivo gráfico que lo acompañaba. Y el blog ya está en otro servicio de alojamiento diferente. Así que DGLibre vuelve a estar operativo y por si alguien tuvo dudas, no, no lo he abandonado, solo ha estado caído por 1 día y medio por los problemas antes citados.

Es cierto que no le dedico al blog todo el tiempo que me gustaría pero me sigue interesando escribir entradas a modo de hobby, al fin y al cabo, no solo me sirve para compartir opiniones y conocimientos. También para aprender cosas nuevas cuando busco información para nuevas entradas, para mí la parte más interesante y divertida de mantener un blog.

Saludos

Esta es una anécdota surgida en una charla con un cliente sobre la renovación de su sitio web. Se trataba de una web obsoleta realizada hace años con Frontpage y dejando de lado su anticuada estética, además se descuadraba totalmente en navegadores que no fueran Internet Explorer.

El cliente estaba empeñado en actualizar solo su parte gráfica dejando su estructura, hecha a base de tablas html. Yo le insistía en que lo más recomendable era hacer un diseño desde cero para que fuera totalmente compatible con los estándares actuales y todos los navegadores. Pero él no estaba convencido de aumentar el presupuesto, pues en su opinión, todos los internautas usan Internet Explorer para navegar. Por lo que el tema se alargó y acabe poniéndole el siguiente ejemplo:

-Imagínate que tienes una empresa que necesita una alta seguridad y quieres que todos lo clientes antes de entrar se identifiquen. Por lo que yo te ofrezco una solución tecnológica para hacer el proceso mucho más cómodo a tus clientes, poner un sensor biométrico que identificara a los clientes habituales por su apariencia y les dejara entrar directamente. ¿Que te parecería?

-Pues muy bien, me ayudaría a ofrecer un mejor servicio.

-Bien, yo instalo el sistema y lo probamos. Funciona correctamente con la mayoría de las personas pero detectamos que falla con la gente rubia. Por alguna razón el sensor tiene problemas para distinguir el pelo de color claro y esas personas tras varios intentos, necesitan finalmente sacar su documentación e identificarse manualmente. ¿Te parecería bien usar ese sistema?

-Claro que no, afectaría a muchos clientes y acabaríamos teniendo quejas.

-Bien, un sitio web es similar a ese sistema de identificación, pues también te permite ofrecerles información y servicios de forma más rápida y cómoda a tus clientes. ¿correcto?

-Sí.

-Y si te digo que en España la gente con el pelo claro supone menos del 20% de la población. Mientras que los internautas que usan navegadores diferentes de Internet Explorer se acercan al 40%.

El cliente se quedo pensando unos segundos, tras lo cual me dijo que desarrollara la web desde cero.

Un ejemplo de que muchas empresas acaban con sitios web incompatibles por  no entender realmente el mercado al que intentan adaptarse. Pero, mediante ejemplos como el citado, podemos conseguir que vean la importancia real de causarles problemas al 40% de sus clientes.

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.