Avisar de contenido inadecuado
Expand

Firebug I: Introducción

Icono de FirebugFirebug es un complemento que no puede faltar en tu Firefox. ¿Qué no usas Firebug? ¿Cómo maquetas o desarrollas en front sin este plugin? Antes de contestar, descargate Firefox (si es que no lo tienes ya) y el complemento Firebug para Firefox. También te recomiendo una serie de complementos que añaden más potencia, aún si cabe, a Firebug:

  • Yslow: Analiza las páginas web y por qué van lentas basándose en las reglas de Yahoo! para los sitios web de alto rendimiento.
  • FireQuery: Es una colección de mejoras de Firebug cunado se usa jQuery.
  • Firecookie: Es una extensión para Firebug que permite ver y gestionar las cookies de tu navegador
  • FireRainbow: Sintaxis de Javascript resaltada para Firebug 1.3 + (Si usas Firebug 1.2: Rainbow for Firebug)

Firebug puedes editar, depurar y monitorear CSS, HTML y JavaScript en vivo en cualquier página web. Por ello es un plugin imprescindible para maquetadores y desarrolladores de front. Vamos a ver sus caracteristicas y más adelante haremos un análisis específico para maquetadores (HTML+CSS) y para desarrolladores de front (Javascript+jQuery).

  • Inspeccionar y editar HTML: Firebug facilita encontrar elementos HTML enterrados en la profundidad de la página. Una vez hayas encontrado lo que busca, Firebug te ofrece una gran cantidad de información, y te permite editar el código HTML en vivo.
  • CSS maquetación al pixel: La pestaña de CSS de Firebug te dice todo lo que necesitas saber acerca de los estilos de la  página web, y si no te gusta como está, puedes hacer cambios y verlos en el momento.
  • Ver CSS métrica: Cuando tus cajas en CSS no están alineadas correctamente puede ser difícil entender por qué. Deja a Firebug ser tus ojos y te medirá y te ilustrará todas los offset, los margins, los borders, los paddings y los tamaños.
  • Supervisar la actividad de la red: Tus páginas tardan en cargar, pero ¿por qué? ¿Te vuelves loco y escribes mucho código JavaScript? ¿Ha olvidado comprimir las imágenes? ¿Son tus servidores de anuncios los que se están echando una siesta? Firebug fracciona todo archivo por archivo.
  • Depuración y perfilador de JavaScript: Firebug incluye un potente depurador de JavaScript que te permite detener la ejecución en cualquier momento y ver el estado del mundo. Si el código es un poco lento, utiliza el perfilador de JavaScript para medir el rendimiento y encontrar rápidamente los cuellos de botella.
  • Encontrar rápidamente los errores: Cuando las cosas van mal, Firebug te permite conocer de inmediato y te proporciona información útil y detallada acerca de los errores en JavaScript, CSS y XML.
  • Explorar el DOM: El Modelo de Objetos del Documento es una enorme jerarquía de objetos y funciones que está a la epera de ser acariciada por JavaScript. Firebug te ayuda a encontrar objetos DOM rápidamente y luego editarlos sobre la marcha.
  • Ejecutar código JavaScript sobre la marcha: La línea de comandos es una de las herramientas más antiguas de la caja de herramientas de la programación. Firebug te da una buena línea de comandos para JavaScript con modernas comodidades.
  • Registo para JavaScript: Tener un fantástico depurador JavaScript es genial, pero a veces la manera más rápida de encontrar errores es sólo para volcar la mayor cantidad de información posible a la consola. Firebug te ofrece un conjunto de potentes funciones de registro que te ayudan a obtener respuestas rápidas.

Configuración de Firebug

Después de ver todas estas funcionalidades seguro que te hemos convencido y ya lo tienes instalado. Así que vamos a ver las opciones básicas de configuración para que puedas empezar a trabajar con este complemento de una manera cómoda y eficaz.

Opciones de FirebugHabrás visto que tras la instalación te aparece un pequeño escarabajo en gris en la barra de estado inferior. Cuando lo pulsas se colorea y aparece una ventana en la parte inferior del navegador. Para acceder a las opciones debemos pulsar el escarabajo de la parte superior izquierda de esta nueva ventana. Se desplegará el listado de opciones siguiente:

  • Abrir Firebug [F12]
  • Abrir Firebug en ventana nueva [Mayus+F12]
  • Open with editor
  • Tamaño del texto
  • Opciones
  • Firebug Online
  • Inspeccionar elemento [Ctrl+Shift+C | ⌘⇧C]
  • Perfilar Javascript [Ctrl+Shift+P | ⌘⇧P]
  • Linea de Comandos [Ctrl+Shift+L | ⌘⇧L]
  • Buscar [Ctrl+Shift+K | ⌘⇧K]
  • Customize shortcuts
  • About... (versión)

Te recomiendo que en el apartado Opciones selecciones las siguientes:

  • Shade box model: Cuando inspecciones elementos te mostrará el modelo de caja del elemento, coloreando de azul el contenido, de morado el padding y de amarillo el margin. Si la deshabilitas, simplemente te pondrá un borde azul en el elemento inspeccionado.
  • Enable Accesibility Enhancements: Te marca con un cadrado naranja la opción que tienes marcada, tal y como se ve en la foto anterior, donde está marcado el escarabajo
  • Activate Same Origin URLs: Con esta opción activa recordaremos el estado del Firebug mientras estemos en el mismo dominio. Si activamos Firebug en dominio.com también estará en dominio.com/folder y en foo.dominio.com.

Con estas nociones básica podeis investigar un poquillo las opciones que ofrece Firebug e ir familiarizandoos con este maravilloso plugin. En próximos artículos veremos como sacarle el máximo partido a Firebug en los diferentes entornos HTML, CSS y Javascript, así como las opciones que nos ofrecen los complementos para Firebug.

Cuentanos qué es lo que más te gusta de Firebug y cómo le sacas el máximo rendimiento. ¿Te gustaría compartir con nosotros de qué manera te ayuda Firebug en el día a día como frontend developer?

{
}
Expand

El uso de iconos en la web

En la web es muy habitual el uso de iconos o pictogramas para facilitar la navegación por una página web o cualquier herramienta con una interfaz gráfica. Los primeros iconos fueron creados para facilitar el uso de los PCs por los novatos en los años 70. Pero no se popularizaron hasta mas tarde, cuando se empezaron a usar en los Sistemas Operativos de Macintosh y Microsoft. Ahora, la finalidad sigue siendo la misma, facilitar el uso de entornos gráficos.

Con estos dibujos evitamos leer textos y obtenemos de una manera más rápida las opciones que nos presentan. Una buena elección de estos iconos es muy importante, puesto que si un usuario no es capaz de determinar su significado no hemos conseguido nuestro porpósito de ahorrarle tiempo en la visualización de la página. Un icono debe contener la menor cantidad de detalle posible, únicamente dejar los imprescindibles para la comprensión de su significado.

Otro punto importante en la elección de un icono es la estandarización, o mejor dicho, a lo que están acostumbrados los usuarios. Es muy arriesgado inovar con estos temas puesto que los usuarios son muy reticentes a los cambios y tendría que ser muy bueno el icono para que no despiste al usuario.

Si decides crearte tus propios iconos, te recomiendo que leas: 10 Mistakes in Icon Design (versión traducida: 10 errores al diseñar iconos). Sin embargo, si optas por utilizar iconos existentes, aquí te dejo unas cuantas herramientas y galerías de iconos para facilitarte el trabajo:

Buscadores de iconos:

Sets de iconos:

  • Famfamfam: Yo diría que están muy vistos, pero el set de banderas es muy socorrido.
  • Pinvoke: Mayor cantidad que Famfamfam y menos trillados.
  • Sweetie: Elegantes y limpios, con licencia Creative Commons e incluye los ficheros de Photoshop.
  • IconFactory: Muy buena calidad y por ello algunos hay que pagarlos.
  • Tango Icon Library: Una librería de iconos Open Source.
  • Glyphlab: Iconos enérgicos y coloridos con mucho nivel de detalle.
  • Greyscale: Galería de iconos en escala de grises.

Recopilaciones de iconos

Ese icono que usaste en tu web no se encontraba entre estas páginas y tu prefieres buscarlos en otros sitios, compartelos con nosotros para ampliar las opciones de búsquedas.

Expand

UpShot, revisión de bocetos colaborativa

UpShot es una herramienta que promete hacer las delícias de los diseñadores freelance. Permite compartir bocetos durante el proceso de desarrollo de un logotipo, un interfaz, etc., y que los participantes puedan marcar áreas en ese diseño para añadir comentarios, así como responder a los comentarios dejados por otros participantes. Magnífico: simple y efectivo.

Quizás el único pero es que como aplicación independiente me queda un poco pequeño. Normalmente, cuando realizamos un trabajo para un cliente externo, el proceso de bocetado y seguimiento del diseño sólo es una pequeña parte del "todo". Lo ideal sería pensar en UpShot como una herramienta integrada en algo más grande, como Basecamp, por ejemplo.

Sitio oficial | UpShot

{
}
Expand

20 aplicaciones de iPhone para diseñadores

¿Eres diseñador y tienes un iPhone? Este post es para tí. En Design Work Plan han recopilado 20 aplicaciones de todo diseñador debería conocer, y vale la pena echarles un vistazo.

152653-101524.jpg     152653-101525.jpg

Si tengo que destacar dos (las tengo instaladas y las uso bastante a menudo) me quedo con Things, la versión iPhone de un conocido gestor de tareas basado en la filosofía GTD, y del que hablé hace poco en obokaman.com, y con Color Expert, una potente herramienta para trabajar con paletas de colores.

Y tu, ¿usas alguna de esas aplicaciones? ¿Cuáles son tus favoritas?

Expand

Personalizar tu perfil de Twitter

Como posiblemente ya sabrás, Twitter es una aplicación de microblogging que ha cautivado a millones de usuarios de todo el mundo en el último año. Comunicarte con tus amigos, contactos, clientes, a través de pequeños mensajes, 140 carácteres como máximo, eso es lo que ofrecen.

Tanto ha sido su éxito que podríamos decir que para muchos Twitter se ha convertido en los principales ejes de nuestra "identidad online". Conscientes de esto, en Twitter han tenido en cuenta desde el principio que pese a la sencillez de la interfaz, los usuarios debían poder adaptar el estilo y la apariencia de sus páginas de Twitter. Y aunque las opciones de personalización que ofrecen son bastante sencillas (color de los textos, color de las cajas y una imagen de fondo), muchas veces me he sorprendido con el aspecto de algunas cuentas: verdaderos alardes de creatividad y buen gusto.

En la página de Lee Munroe han recopilado 30 perfiles de Twitter con diseños especialmente creativos que vale la pena visitar. Si estás en Twitter y aún no te has animado a personalizar tu perfil con un diseño propio, haz un repaso de esta lista. Seguro que con alguna que otra idea que puedas sacar de la recopilación y un poco de inspiración, consigues mejorar el aspecto "por defecto" de tu página en Twitter.

¡Y si lo haces, no olvides compartir el resultado con nosotros! ;-)

Via IsoPixel

Expand

¿Te apetece trabajar en Softonic?

Logo SoftonicSoftonic es una de esas empresas. Un lugar donde se vive y respira Internet las 24h del día, donde la gente puede dar rienda suelta a su creatividad, donde además de aportar sus conocimientos uno puede seguir aprendiendo de uno de los equipos técnicos mejor preparados de España, donde se valora el esfuerzo y se tiene en cuenta a las personas... una de esas empresas, en definitiva. Y no es que lo diga únicamente porque yo también trabajo allí, lo corrobora el Great Place to Work Institute.

Pues resulta que andan buscando gente para ampliar su departamento de desarrollo, así que quizás puedas estar interesado. Si quieres comprobar que todo lo anterior no son sólo palabras, y crees que puedes aportar tu granito de arena para que Softonic siga creciendo hasta convertirse en el líder mundial en las descargas de software, échale un vistazo a las ofertas de trabajo que hay abiertas ahora mismo:

Qué, ¿te animas? Y si no te acabas de decidir... echa un vistazo a nuestras nuevas oficinas. ;-)

Expand

¡Ya es posible descargar Google Chrome!

Desde hace un rato ya es posible descargar Google Chrome desde su página oficial. Ahora sólo queda probarlo a fondo, comprobar si todas las bondades que nos cuentan sobre Google Chrome son ciertas... y ¡esperar que se den prisa de desarrollar una versión para Mac! :-S

Más info | Sitio oficial de Google Chrome

Actualización: Chica Geek ha hecho una review con sus primeras impresiones sobre Google Chrome. Lectura recomendada.

Expand

37Signals dejará de dar soporte a IE6 en sus aplicaciones a partir del día 1 de octubre

124275-88505.jpgAsí, tal cual. Estos chicos juegan duro. Tal como anunciaron el pasado 3 de Julio en su blog, están a punto de poner punto y final a su relación con Internet Explorer 6, o en otras palabras, dejarán de revisar sus aplicaciones para que se vean y funcionen correctamente con este navegador. Y aunque olvidarse de Internet Explorer 6 sea el sueño de cualquier desarrollador web, no deja de parecerme un movimiento arriesgadísimo por parte de los desarrolladores de Basecamp.

Si bien es cierto que Internet Explorer 6 es un producto que tiene más de 7 años (fué publicado en 2001), su sustituto, Internet Explorer 7, no apareció hasta principios del año pasado, con lo que son muchos los usuarios que aún siguen usando la versión anterior del navegador de Microsoft. Quizás el perfil de usuarios de Basecamp sea más avanzado que el de una aplicación de blogs como OboLog, pero para que os hagáis una idea, el porcentaje de usuarios que acceden hoy en día a OboLog desde Internet Explorer 6.0 es del 40% aproximadamente. Por más que me encantaría dejar de romperme la cabeza con los problemas de renderizado de IE6, estaría "dejando fuera de juego" a casi la mitad de los usuarios que nos visitan.

Supongo que ya habrán estudiado a fondo a sus clientes y estarán seguros de que la "pérdida" no les supone ningún riesgo, pero a pesar de ello, me cuesta creer que tratándose al fin y al cabo de aplicaciones de pago, "fuercen" a sus clientes a actualizar su navegador habitual. ¿Qué pasará con aquellos usuario que accedan desde un lugar cuyas políticas les impidan modificar el software instalado en la estación de trabajo? De momento ya han avisado que alargarán el plazo hasta el 1 de Octubre para dar algo más de tiempo a los que todavía no han dado el paso. Seguiré de cerca lo que ocurra.

Expand

Google Chrome: el navegador web de Google

Google Chrome

Google prepara para hoy mismo el lanzamiento de su propio navegador web Open Source, Google Chrome. De momento aún no está disponible para descargar, y sólo han visto la luz algunos screenshots y vídeos de los propios desarrolladores, y un fantástico comic explicativo en el que el equipo de desarrollo de Google Chrome nos explica las novedades que aporta este nuevo navegador.

Aunque éstas novedades se encuentran principalmente en la manera de gestionar los recursos y de organizar los procesos que gestionan las pestañas o ventanas abiertas, también hay algunas novedades que saltan a la vista en Google Chrome, como por ejemplo:

  • La ubicación de las pestañas: Ahora las pestañas se encuentran por encima de todo, y los elementos de navegación, incluída la barra de direcciones, por debajo de éstas. Sin duda, una disposición mucho más lógica (¿os suena esta disposición "pestañas arriba - buscador abajo"? ;) ). Es sorprendente que no se le ocurriera a nadie antes.
    Pestañas en Google Chrome

A