Avisar de contenido inadecuado

Reset CSS para HTML5

Ya os hablamos en CSS: Consejos y buenas prácticas sobre la importancia de resetear las propiedades CSS para eliminar diferencias entre navegadores desde el principio. Pues ahora os traemos de la mano de html5doctor.com un nuevo reset CSS adaptado a HTML5. Incluye las nuevas etiquetas y elimina las que ya no están permitidas en este lenguaje de marcado.


/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

Puedes descargar el código del proyecto html5resetcss en google code.

{
}

jQTouch - plugin de jQuery para desarrollo web para móviles

jQTouch¿Estás pensando en adaptar tu web al iPhone o al Android?, o quizá ¿quieres desarrollar una aplicación web para dispositivos móviles? Pues esto te puede interesar. Se trata de un plugin de jQuery para desarrollo web móvil para iPhone, iPod Touch y otros dispositivos con visión de futuro.

Este plugin te permite mediante una fácil configuración animaciones nativas de WebKit, precarga de imágenes, eventos callback, plantillas flexibles y extensiones. Dispone de una ámplia documentación y multiples ejemplos, por lo que no te costará poner en marcha la aplicación que tienes en mente.

Puedes descargarlo del proyecto jQTouch en Google Code.

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?

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.

{
}

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

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?

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