Archivo de la categoría: Internet

Herramientas de color para desarrolladores web

[internet]

Desde que empecé a trabajar como desarrollador web hace ya más de 8 años, siempre he trabajado en el frontend y el backend. Pero como no soy diseñador, aunque con el tiempo he ido aprendiendo que funciona y que no, elegir colores es algo que siempre me ha costado mucho esfuerzo. Es por eso que he ido recopilando herramientas que me permitan jugar e inspirarme para encontrar el color adecuado para cada ocasión. Aquí dejo una lista de las que uso más a menudo.

color-hex

Esta es probablemente la más sencilla, pero también la que más visito. Básicamente se trata de una base de datos con todos lo colores web existentes. Al introducir un color te muestra toda su información, distintas variaciones y como queda al ser usado sobre distintos colores de fondo. También te da ejemplos de código por lo que es muy útil cuando quieres convertir un color de hexadecimal a su nomenclatura rgb.

Name that Color

Desde hace un par de años estoy usando SASS para generar mi código CSS, y una de los cosas que intento es usar siempre variables para los colores. Cuando tienes un par de colores no hay mucho problema, pero cuando tienes más y más colores, y paletas de grises, empieza a ser complicado darle un nombre distintivo a cada uno. Ahí es donde esta página entra en juego, le das un código de color y te dice su nombre. ¡Perfecto para nombrar variables!

Coolors

Esta es la herramienta perfecta cuando quieres jugar con el color. Te permite tener hasta cinco colores a la vez y modificar todos sus parámetros en cualquiera de sus modelos de color (RGB, HSB y CMYK). Además, también le da nombre a los colores, por lo que si la página anterior me da un nombre repetido, siempre puedo usar esta para obtener otro.

HTML Color Codes

Esta es la última herramienta que he incorporado, y le doy un uso muy específico. En concreto, generar los colores triádicos y cuadráticos a partir de un color. Sin duda es la herramienta que menos uso, pero siempre viene bien tener algo con lo que poder generar colores complementarios.

Cómo saber cuando se actualizó una web por última vez

[internet] [programación]

Evidentemente esto solo funcionará en páginas estáticas, pero más de una vez me he encontrado con alguna librería de PHP o JQuery que no mostraban ninguna fecha de última actualización en su web. Para esas situaciones, podemos abrir el Firebug y en la consola escribir lo siguiente:

javascript:alert(document.lastModified)

Saltará una alerta con la fecha de la última modificación.

Excluir tus propias visitas de las estadísticas de Google Analytics

[internet]

Aquí hay un buen tutorial sobre como hacer esto mediante una cookie, a diferencia de hacerlo con el filtrado de IP, ya que si no tienes una IP estática, no es una solución satisfactoria.

Sin embargo, la solución que se ofrece en el enlace no funciona con el código asíncrono que utiliza actualmente Google Analytics. La solución es usa la función push para almacenar la variable:

_gaq.push(['_setVar','stop_counting_me']);

Podemos meter esta línea dentro del código del Google Analytics en la página stopcountingme.html, quedando de la siguiente manera:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
_gaq.push(['_setVar','stop_counting_me']);
(function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();

Extensiones imprescindibles para Firefox

[internet] [software]

Estoy seguro que esta lista crecerá con el tiempo, pero por el momento estas son las extensiones que han pasado a ser imprescindibles en mi uso del Firefox:

Adblock Plus

Francamente, me resultaría muy difícil tener que volver a navegar sin esta excelente extensión bloqueando toda la publicidad de internet.

Firebug

Otra extensión que me resulta imprescindible, en esta ocasión para la creación de páginas web. Los navegadores están incorporando mejores herramientas para desarrolladores, pero por el momento Firebug sigue siendo la herramienta más versátil y fácil de usar.

Web Developer

Otra excelente herramienta para desarrollar webs, en esta ocasión con una gran variedad de utilidades para redimensionar, medir tamaños, limpiar caché/cookies, etc.

Stylish

Ya he hablado con anterioridad de Stylish, y es que esta sencilla extensión te permite modificar por completo el aspecto de cualquier página web para adecuarlo a tus gustos y necesidades. Eso unido a la gran variedad de temas existentes te permite ver las páginas a tu manera.

Brief

Este lo he empezado a usar hace poco, y se ha vuelto rápidamente en un imprescindible. Básicamente te avisa cuando hay algo nuevo en las webs que tengan RSS y las añadas a marcadores. Al menos me ha quitado el impulso de recorrer todas las webs buscando algo nuevo. Entre Brief y Twitter, casi todas las novedades me llegan automáticamente.

BlockSite

Esta extensión te permite bloquear una web para que ya no sea accesible. En ocasiones detecto que una web me está consumiendo más tiempo del que debería, sobre todo webs chorras, así que las voy añadiendo a la lista de bloqueadas para recordarme a mi mismo que debería estar haciendo otras cosas más productivas… 😛

Oscureciendo la web

[internet]

Últimamente, al final del día me duelen los ojos y la cabeza. Me paso el día frente a la pantalla del ordenador y la mayoría de aplicaciones que utilizo y webs que visito tienen un fondo blanco o muy claro, produciendo mucha luminosidad. He pensado que tal vez, si cambio esos fondos tan brillantes por otros más oscuros, me acabará doliendo menos la cabeza. Algunas webs ofrecen distintos temas que permiten cambiar los colores, pero la mayoría tienen un estilo único.

Aquí es donde entra Stylish en acción. Básicamente, es un complemento para Firefox que permite añadir código CSS a cualquier página web, y que este código se vuelva a cargar cada vez que visites la web (como si hicieses cambios con el Firebug, y los cambios siguen ahí cuando refrescas la página). En userstyles.org hay un montón de temas que ha subido la gente para una buena variedad de páginas web. Estas son las que estoy usando actualmente:

NeoGAF

NeoGAF Pro Dark: No solo lo vuelve oscuro, sino que además añade algunos estilos que lo hacen más bonito. NeoGAF ha lanzado su nuevo aspecto para 2013 y esta nueva versión trae la posiblidad de cambiar a un tema oscuro, así que ya no es necesario usar Stylish. Ha salido también la nueva versión de este estilo, y oscurece un poco más la web, así que vuelve a valer la pena usarlo.

Twitter

[Actualización: 7/2/2014] Con los últimos cambio en la interfaz online de Twitter, la combinación de estilos que usaba hasta ahora ya no es efectiva. Por suerte he encontrado Dark Twitter by Batmop que casi me gusta más que la conbinación anterior.

Twitter Dark CALM Blue Glow: Versión oscura con algunos toques de azul. Tiene algunos fallos, pero son facilmente corregibles.

Twitter Wide 1020px: Hace Twitter más ancho para aprovechar más la pantalla.

Gmail

Gmail Dark Theme Fix: ¡Este lo he hecho yo! Básicamente, le da un fondo oscuro a los mensajes, que actualmente es blanco.

Youtube

Black Youtube by Panos: Su nombre lo dice todo, Youtube con un fondo negro.

Youtube centered, no recomendations, no comments: Este también es creación mía. Elimino la barra derecha de recomendaciones y elimino los comentarios. Después hago más grande el vídeo y lo pongo todo centrado. Junto con el estilo de Panos para hacer Youtube oscuro se consigue una muy buena combinación.

Google

Black Google By Panos: Como su nombre indica, es Google pero en negro. La pena es que solo funciona para la búsqueda de texto. Para imágenes falla bastante y en el resto de aplicaciones de Google no parece hacer nada.

Wikipedia

Wikipedia – Dark, blue, simple: Como su nombre bien indica, fondo oscuro con letras blancas y enlaces en azul.

Wikipedia – Layout, enhanced: Este funciona en conjunción con el anterior, logrando un resultado muy agradable. Esconde todos lo menús en una barra superior, dejando en pantalla solo el texto para una mejor lectura.

Ocultar con Adblock un div que no tiene ni “class” ni “id”

[internet]

Ya expliqué en un artículo anterior como bloquear un div que tenía una clase. Ocultar un div que tiene un “id” es igual de sencillo:

Ocultar div con clase: ##div.la-clase

Ocultar div con “id”: ##div#el-id

¿Pero que ocurre cuando un div no tiene ni clase ni “id”? Entonces tendremos que recurrir a filtrar según sus atributos. Supongamos que tenemos este div:

<div style="width: 200px; height: 150px; background-color: blue; border-style: dotted; border-color: red;">
...
</div>

En este caso podriamos hacer un filtro con el contenido del “style”:

##div[style="width: 200px; height: 150px; background-color: blue; border-style: dotted; border-color: red;"]

Pero tal vez hay otros divs similares, con el mismo borde pero distintos tamaños, entonces haríamos lo siguiente:

##div[style*="border-style: dotted; border-color: red;"]

El asterisco indica cualquier elementos que incluya esos estilos.

En la documentación del Adblock tienen una completa lista de ejemplos de filtros.

La pregunta es, ¿se podría ocultar un div que no tiene clase, ni “id”, ni ningún atributo?

Ocultar “A quién seguir” en twitter usando AdBlock Plus

[internet]

Yo uso Twitter vía web, y sigo a poca gente y no me apetece tener un cuadro ofreciéndome seguir a gente que no me interesa, así que indagando un poco vi que se puede usar AdBlock Plus para ocultarlo con mucha facilidad. Esto es lo que hay que hacer:

  1. Instalar AdBlock Plus.
  2. En el menú del ABP, vamos a Preferencias de filtros…
  3. Pulsamos el botón Añadir grupo de filtros. Como nombre le he puesto Twitter.
  4. En el desplegable de Acciones para el filtro de Twitter seleccionamos Mostrar/ocultar filtros.
  5. Pulsamos en Añadir filtro y escribimos ##div.wtf-module

Y ya está, así de fácil. Los corchetes ## indican que queremos ocultar, div indica que lo que queremos ocultar es un div y .wtf-module indica que el elemento a ocultar tiene la clase wtf-module.

En la página de ABP tenéis una excelente documentación sobre como escribir filtros.

WordPress Error 403 – Forbidden: Access is denied

[internet]

Ayer por la noche terminé de ver el último anime que tenía pendiente de esta temporada, así que me metí en el blog para terminar el artículo con las recomendaciones. Lo escribí sin problemas, pero cuando intentaba previsualizarlo me llevaba a la página principal de Leadhoster. Se que algunos hostings gratuitos no soportan las páginas de error, así que imaginé que debía de estar dando algún error, y aunque me extrañó, no le di mayor importancia.

Termino el artículo, lo publico, y voy a la página principal para ver como ha quedado…. cuando para mi sorpresa me redirige de nuevo a la página del hoster. Claro, la primera impresión es “algo he tocado”. Antes funcionaba y después de publicar, ya no va. Intento mirar si hay algo raro con el artículo, pero es todo normal. Pienso que tal vez es algún plugin, ya que he instalado un par recientemente y los desactivo. Nada, sigue fallando. Tal vez es mi propio plugin, el acordeón de artículos, que con el cambio de mes (coincide que es 1 de octubre) puede estar dando algún error. Lo desactivo pero nada. Pienso en desactivar el resto, pero no veo como pueden estar afectando a la página principal.

Vuelvo a los articulos e intento previsualizar uno de ellos, ¡y funciona! Empiezo a visualizar el resto de artículos y todos funcionan. Puedo mostrar las categorías, puedo moverme por los artículos y el panel de control sigue funcionando sin problemas. El problema afecta únicamente a la página principal.

En la consola de errores de javascript no hay nada, y si es un error de php, no tengo forma de detectarlo. En ese momento me acuerdo del mejor complemento del mundo mundial, ¡el Firebug!

Abro la función de red para ver que peticiones se realizan, y veo que al cargar la página principal salta un error y hace una redirección. Demasiado rápido para leerlo. Reintento y esta vez detengo la carga.

Error 403 – Forbidden: Access is denied WTF! Empiezo a pensar que no va a ser culpa mía…..

Me pongo a buscar en Google el error, y parece bastante común. Las soluciones más planteadas fueron 3:

  1. El fichero o directorio no tiene los permisos adecuados. Hice la comprobación y estaban todos a 755, así que descartado.
  2. El fichero .htaccess está mal. Tal vez se había modificado de alguna manera, pero lo comparé con la copia de seguridad y estaba todo correcto. Descartado.
  3. Un problema con el servidor Apache. Ummm, si este es realmente el problema, teniendo en cuenta que no tengo acceso al servidor, estoy en un callejón sin salida.

Como ninguna de estas alternativas me proporcionaba una solución, opte por mi aproximación favorita a los problemas, ¡MATAR MOSCAS A CAÑONAZOS!

Me pongo a buscar un nuevo hosting, encuentro Freehostia que tiene muy buena pinta (además de un nombre gracioso ¡Hostias gratis para todos!). Subo la copia de seguridad por FTP, exporto/importo la base de datos, cambio los DNS del domino y ¡tachán! Migración express. Y oh! sorpresa! El blog vuelve a funcionar.

Así que ya tengo actualizado el artículo con la comparativa de hostings que hice hace un tiempo.

Cambio de dominio (again!)

[blog] [internet]

Y con este creo que ya son 4 dominios distintos los que ha tenido este blog… Pero con un poco de suerte este será el definitivo!

Al final me decidí por un .com ¿Por qué? Pues sencilla razón. Si Google puede decidir dejar de indexar un dominio gratuito, nada me asegura que lo vuelva a hacer con el siguiente, así que .com y voy sobre seguro.

Después de mirar un poco las tarifas de dominios, me decidí por comprarlo en 1and1, que por 6€ al año me parece un buen precio (gracias @davidinchi por la recomendación! :D)

Los próximos pasos serán volver a tener en marcha las herramientas para Webmasters, el analytics y volver a meter la URL en el resto de buscadores (bueno, Bing y Yahoo).

Ya actualizaré comentando los progresos.

Resuelto el misterio de la indexación

[blog] [internet]

Hará cosa de un mes Google dejó de indexarme. No solo eso, sí no que además eliminó todas las búsquedas a este blog. El mensaje en las herramientas para Webmasters era el siguiente:

Es posible que este sitio esté cometiendo una infracción de las directrices de calidad de Google

Revisé las directrices y no vi nada raro, así que rellené un formulario para que lo reconsideraran. Pasados unos días me llegó una respuesta automática indicando que se reconsideraría y que el proceso podría tardar unas semanas…..

Hoy, ya harto de esperar y que la situación no cambiara, me he puesto a investigar, y menuda sorpresa me he llevado…

Google ha expulsado todas las direcciones con dominio CO.CC!!!

En realidad las expulsó todas el 7 de julio, como se explica en esta noticia de El Pais.

WTF! Señor Google, tan difícil era dar alguna pista en las herramientas para Webmasters??? No se, algo del tipo “Su domino no será indexado por bla, bla, bla…“

Pues nada, cambio de dominio al canto. Buscaré otro gratuito, y si no me paso a un .com

Que forma más tonta de empezar el día cabreado…..