Agregando brillo a los encabezados

Esta es una sencilla forma, mediante JavaScriptt, de agregar un poco de efecto gloss a los encabezados:


Enlace | Dynamic Text Gloss Effect
Vía | delicious

Leer más

Va a llover?

Is it going to rain? es un pequeña aplicación hecha por los chicos de superblock.net, el cual geo-localiza la IP y en un simple sí o no te dice si va a llover y cual es la expectativa del tiempo en tu ciudad.



Por supuesto, para el día de hoy (en mi caso), sólo hubiese bastado con sacar la cabeza por la ventana; en Buenos Aires, lluvia todo el día.
No bastó con lo de ayer?

Leer más

Menú de navegación accesible

En entradas anteriores, he comentado ya sobre lo accesible que resulta la implementación de un menú de navegación, para un sitio Web, basándose en listas desordenadas.
Esta técnica no sólo es accesible para las personas sino, también, para los crawlers que recorren el sitio, siguiendo los enlaces.


En CSS Menu Builder disponemos de una aplicación que a modo de asistente, te permite construir este tipos de menúes, basados en HTML y CSS.
Las opciones, son de 3 tipos:

• menú horizontal
• menú vertical
• menú de migas de pan (breadcrumb)

Para el total de combinaciones, según los presets actuales, hay una disponibilidad de poco más de 1000 menúes de navegación.
Hay opciones de fondos e imágenes para seleccionar o, de otra manera, elegir las combinaciones de color (hexadecimales o RGB).
En todos los casos, está disponible el código HTML, el CSS y las imágenes (si las hubiera) que lo componen.
De otra manera, te podés bajar el archivo ZIP con toda la info.

Enlace | CSS Menu Builder
Licencia | MIT License
Entradas relacionadas
Como hacer un menú en CSS
37 formas diferentes de hacer un menú accesible
Menú de navegación con listas

Leer más

Tu propia tapa (falsa) de revista (III)

En Soy Portada tenés la oportunidad de obtener tu propia tapa falsa de revista.


Las tapas o covers disponibles son los siguientes:

• as
• Marca
• solo bici
• Sport Life
• AR
• ¡Hola!
• teleNOVELA
• autopista
• BMW MOTO
• COCHE actual
• Motociclismo
• TIME
• Interviú
• casa diez
• micasa
• Nuevo Estilo
• Cosmopolitan
• Elle
• Crecer
• Ser Padres
• deViajes
• zero
• El País
• Liberation
• GEO
• Muy Interesante
• National Geographic
• Quo
• CARAS
• pront
• RAGAZZA
• MAXI tuning

A diferencia de otros aplicaciones similares, este servicio está en castellano. Permite agregar a tu propia revista (opcionalmente) 2 líneas de texto (16 y 25 caracteres, respectivamente).



Finalmente, ofrece un enlace directo a la imagen de la revista creada. Como así también el código necesario para insertar en HTML y el correspondiente para insertar en foros.

enlace | Soy portada
entradas relacionadas
Tu propia tapa (falsa) de revista
Tu propia tapa (falsa) de revista - 2da entrega

Leer más

Como reducir el tamaño de las imágenes

smush.it! es un servicio gratuito que disponemos a la hora de optimizar y reducir el tamaño de las imágenes antes de publicarlas en la Web.
No hablamos acá de aumentar el grado de compresión de un archivo JPG para reducir su tamaño a expensas de pérdida de calidad.
Esta aplicación trabaja sobre la optimización y eliminación de bytes innecesarios sin pérdida de datos; de modo de mantener la calidad y el aspecto visual de los originales.

El método de carga de imagen, puede ser:

• selección de imágenes desde la PC
• lista de URLs
• extensión firefox
• instalación de bookmarklet

Finalmente, el resultado puede ser descargado en formato ZIP.



Para una de las tantas pruebas que he llevado a cabo, la imagen de muestra superior muestra la optimización de una imagen PNG de 450 × 788 px de 148 Kb.
El resultado final fue de 107 Kb, representando una reducción del tamaño de la imagen de casi un 28%.

Los formatos de imágenes soportados son:

• JPG
• PNG
• GIF
• GIF animado

Extensión Firefox | Instalar
Enlace | smush.it!

Leer más

Favthumbs | delicious en miniaturas

Favthumbs es una herramienta que complementa el uso de delicious.
Por lo que permite visualizar mediante miniaturas (thumbs) los enlaces guardados.

El uso es gratuito, no requiere siquiera registración. Sólo hace falta ingresar el nombre de usuario para ver los últimos enlaces guardados.
El ingreso de la contraseña, la cual es opcional; permite visualizar todos los marcadores y mantenerlos sincronizados con la cuenta de delicious.
Dicha visualización está disponible en forma de grilla o bien, tipo carousel.
Los tags o etiquetas que fueron oportunamente utilizados, sirven aquí también para filtrar las búsquedas y en formato grilla, el tamaño de las miniaturas es escalable.

Enlace | Favthumbs
Demo | mis marcadores

Leer más

9 íconos de globos terráqueos

Recientemente, en Siah Design, han publicado un set de 9 íconos sobre globos terráqueos.
Las imágenes están vectorizadas, en formato EPS.
No existen limitaciones para el uso de estas imágenes, las mismas pueden ser utilizadas tanto en proyectos personales como así también en comerciales.

enlace | Siah Design
descargar | 9 vectores de globos terráqueos

Leer más

Reproductor multimedia

Leer más

632 texturas gratis | AVA 7 Patterns

Con poco más de 150 páginas, visualizando 4 miniaturas por cada una, en la propuesta hay una enorme cantidad de imágenes para ser utilizadas como fondos o backgrounds.
Está disponible el botón preview para ver en forma inmediata la imagen seleccionada. La cual, al bajar, está disponible en formato PNG.

Vía | WebAppers
Enlace | AVA 7 Patterns
Licencia | gratis - se agradece un backlink al sitio, aunque no es obligatorio - no podés re-vender las imágenes

Leer más

Como insertar un reproductor de mp3

MP3 Player es un reproductor para mp3 de código abierto, gratis y absolutamente personalizable.

Disponible en 5 opciones:

1. mini
   • este es el reproductor de menor tamaño en Kb


2. normal
   • el primer reproductor de la serie


3. maxi
   • el más amplio en cuanto a funcionabilidades


4. multi
   • soporta lista de ejecución


5. js
   • sin interfase gráfica, controlado por JavaScript

Una interesante alternativa para quienes se preocupan en insertar audio en blogs o páginas web.
Enlace | http://flash-mp3-player.net
Descarga | player_mp3
Licencia | Creative Commons BY SA aunque el autor hace explícito su uso sin citarlo

Leer más

Tu cuenta de mail temporal

El servicio que presta la aplicación es simple, sencillo y eficaz.
Uno introduce el nombre de una cuenta de correo propietaria y la aplicación devuelve una temporal.



Es interesante el punto, que se puede prefijar el alcance en el tiempo de esta cuenta:

• 3 hs
• 6 hs
• 12 hs
• 24 hs

Como anteriormente comenté, la aplicación devuelve una dirección temporal. Desde Melt Mail no podemos manejar la cuenta; esto es: enviar, recibir, etc. Como bien se puede hacer en 10 Minute Mail.
Todo mensaje que tenga por destino la cuenta temporal, será re-enviado a la cuenta de correo que inicialmente informamos.
Se preseta como útil cuando necesitamos una inscripción en algún sitio que luego, seguramente, no volveremos a visitar. Para recibir un enlace de descargas y para cuanto escenario uno pueda imaginarse y darle utilidad.
Está presente un política de privacidad sobre el tiempo en que la dirección de correo que brindamos, queda almacenada. La cual, por cierto, luego es borrada

Enlace | Melt Mail

Leer más

Como buscar íconos | ICONlook

Basado en una interfase sencilla, este motor de búsqueda tiene por finalidad la búsqueda de íconos.
Aunque por defectos busca en todos los tamaños, la búsqueda puede ser selectiva para reducir la cantidad de resultados.

• 12 × 12
• 16 × 16
• 22 × 22
• 32 × 32
• 48 × 48
• 64 × 64
• 128 × 128

Al elegir entre los resultados, la aplicación suministra:

• el tipo de licencia con la cual es distribuída la imagen
• la opción de visualizar el resto de la colección (si el que el ícono está contenido dentro de una)

Como búsqueda alternativa, pude utilizarse la nube de etiquetas.
Enlace | ICONlook

Leer más

Sé válido o morí aprendiendo

Tal es el epígrafe o slogan que acompaña al logo de esta aplicación.
En resumen, esta no es una herramienta que reemplaza a las rutinas de validación de W3C, XHTML y CSS, respectivamente:

• Markup Validation Service
• CSS Validation Service

Simplemente es la oportunidad de llevar a cabo ambas comprobaciones en un sólo lugar y al mismo tiempo.
Por cierto, soporta encoding y doctype diversos y hasta CSS3 también.

Leer más

Accesibilidad | WAVE Toolbar

WAVE, una herramienta de comprobación automática para Accesibilidad Web; ha lanzado recientemente una extensión compatible para Firefox 3, la Toolbar WAVE 1.0 beta 1.
La extensión de WAVE para Firefox, instala la barra de herramientas en el navegador. La cual provee el mecanismo para ejecutar la aplicación en forma directa.
De otra manera, la aplicación puede ejecutarse on-line, vía la siguiente URL

http://wave.webaim.org/

Con un marcado énfasis en la privacidad, esta aplicación asegura ser 100% privada y segura en cuanto a los reportes generados.


Puede llevar a cabo el anáilisis sobre intranets, páginas protegidas por contraseña y contenido generado dinámicamente.
Los reportes se basan en la inclusión de íconos sobre la página sometida a análisis.

Lectura recomendada | Accesibilidad: la revisión automática no alcanza
Enlace | WAVE v4.0
Descargar | WAVE Toolbar 1.0 Beta 1 Firefox 3.0 o superior - WAVE Toolbar 0.9.4 Firefox 2.x

Leer más

Google | Guía SEO en español

En línea con mi anterior, Google: 1 manual SEO + 1 manual SEM donde comentaba la iniciativa de Google de publicar una Guía SEO, en inglés. Está disponible en EL Blog para Webmasters la versión en español.

Pensamos que sería útil crear una guía compacta repasando mejores prácticas que tanto equipos dentro de Google como webmasters externos puedan seguir para mejorar el rastreo y la indexación de sus páginas web.

Esta versión, es sensiblemente de mayor tamaño (sólo de archivo) que la anterior; poco más de 800 Kb; sin lugar a dudas, un excelente material para quien en SEO se inicia.
Visto en | El Blog para Webmaster
Descarga | Guía de Google para Principiantes sobre Optimización en Motores de Búsqueda

Leer más

Una guía para elegir colores para tu marca

Visto en Swiss Miss

Leer más

Internet Explorer 8

Leo en IEBlog (el blog de Internet Explorer) la entrada que firma Dean Hachamovitch, Director General de Internet Explorer IE8: What’s After Beta 2.
Donde anuncia, que la versión candidata a transformarse en la próximo release de IE estará disponible en el primer trimestre del 2009.


No dudo ni critico las próximas capacidades de este navegador; aunque en rigor de verdad los alcances de la funcionabilidad Compatibility View (Vista de Compatibilidad) no dejan de asombrarme:

Internet Explorer 8's built-in Compatibility View button enables you to display websites that were designed for older browsers. Simply press the Compatibility View button if you see display problems on a website like misaligned text, images, or text boxes. It's located next to the Refresh button on the Address Bar.

Aquí mi traducción libre:
Internet Explorer 8 cuenta con un botón de Vista de Compatibilidad para mostrar sitios web que fueron diseñados para navegadores antiguos. Simplemente presioná el botón de Vista de Compatibilidad si obtenés problemas de visualización en un sitio web como texto desalineado, imágenes o cajas de texto (...)

No quiero entender que aquí se refiera a versiones como la 5.0 ó anteriores; debe estar, seguramente, en línea con la buena cuota de uso que todavía tiene la versión 6.0

Esta versión, la 6.0, no se precia por ser, precisamente, un navegador que interprete adecuadamente los estándares. De hecho, es cierto, muchos sitios están diseñados para verse en este navegador y cuando a dichos sitios se accede con navegadores que sí siguen estos estándares, éstos no se ven bien.

Presumo que con la inclusión de esta nueva funcionabilidad, el camino hacia el buen renderizado se encuentra en un horizonte cercano.
Pero ¿hay que premiar a quienes le dieron la espalda a hacer bien lo deberes?

- Por lo pronto, señores. No se preocupen. Si sus desactualizados diseños no se ven bien, IE8 dará una herramienta al usuario final para ver sus sitios, como Uds los diseñaron...

Leer más

Principios del diseño

Lectura recomendada | Principios del diseño de interacción importantes para la accesibilidad

Leer más

SEO | factores internos de la página

Interesante entrega la que está llevando a cabo Taller SEO.
Que a través del siguiente slideshow (17 diapositivas de Google Docs) ejemplifica los factores fundamentales que debe contar cualquier documento HTML para un correcto posicionamiento en los resultados de búsquedas orgánicas de los motores de búsqueda.

Enlace | SEO factores internos

Leer más

Iconos gratis | Icon Eden

Icon Eden tiene disponibles 3 set gratis de íconos:

• Fresh
• Milky
• Bright!

Las imágenes están en formato EPS y PNG.
Por lo que el tamaño de cada archivo es sensiblemente superior a los 20Mb; aunque cada uno tiene poco más de 100 imágenes.
La cantidad es de 59, 131 y 148 imágenes respectivamente.

E incluyen los siguientes tamaños:

• 16 × 16 px
• 24 × 24 px
• 32 × 32 px
• 48 × 48 px
• 64 × 64 px
• 128 × 128 px
• 256 × 256 px

Enlace | Icon Eden

Leer más

JavaScript explicado con fotos (Flickr)

Esta es la tercera entrada en la que cito el trabajo de Webstandard, al respecto. El primero fue
CSS explicado con fotos (de Flickr)
Luego, comenté
HTML explicado con fotos (de Flickr)
Ahora, nos sorprenden con un tema basado en JavaScript, los eventos que muestran son:

• onclick / onkeydown
• stop
• onerror
• open
• close
• if - else
• captureEvents
• back
• onchange
• getTime
• OnMouseOver
• setTimeout

Para muestra, me quedo con el condicional:



Vía | CSS Globe

Leer más

SingsBOX: música en la Web

SingsBOX es una alternativa más para escuchar música en la Web. Su uso no requiere registración y su motor de búsqueda se encarga de rastrear contenidos en Internet para luego reproducirlos.
Para el manejo de listas de ejecución, playlist, es necesario registrarse; lo cual es rápido y gratuito.
No poseen contenido propietario; excepto, claro está, sólo el reproductor que permite al usuario insertar el track en cualquier página web, foro o blog.
Para muestra del reproductor:

Lila's Dance - Mahavishnu Orchestra

El cual, por si interesa, está basado en JW FLV Media Player

Entradas relacionadas:
Escuchar música, insertar un reproductor de mp3
Rockola.fm
Jogli: una buena experiencia con videos de música
Buscar música en la Web
Escuchando música en la Web
Donde bajar las tapas de mis CDs

Leer más

El arte y la ciencia del CSS

Este es el título del texto escrito oportunamente por

• Cameron Adams
• Jina Bolton
• David Johnson
• Steve Smith
• Jonathan Snook

El cual, a partir de ayer (me he enterado por el blog de Enrique Rodríguez Vallejo aka ERVDESIGN) está disponible vía SitePoint.com


Hay 2 formas de ahorrarse los $29.95 del costo y es consiguiendo el enlace para llevar a cabo la descarga gratuita.

1. Seguirlos a través de Twitter
2. Proveer una dirección de correo válida en el formulario disponible en http://twitaway.aws.sitepoint.com/

Si no tenés un dirección de correo para tales efectos, podés utilizar el recurso 10 Minute Mail (a mí me ha sido útil).
La vigencia de esta oportunidad es hasta el 2 de diciembre (horas más, horas menos).
En el archivo ZIP (23.1 Mb) está contenido el texto en formato PDF.
Sin lugar a dudas, un excelente manual de CSS.

Leer más

Los blogs que te interesan en un solo feed

Olga Carreras (una de las referencias en cuanto a usabilidad/accesibilidad del panorama hispano) no deja de sorprenderme. Tiempo atrás, comenté acerca de la iniciativa que tuvo al respecto de poner a disposición un buscador especializado en temas relacionados con la accesibilidad y la usabilidad web. Basándose, precisamente, en la tecnología Google para crear un motor de búsqueda personalizado.
Ahora, sacando partido de Planetaki ha compartido, haciendo público, los feeds que ha reunido en su planeta (esa es precisamente la filosofía de Planetaki) llamado Blogs preferidos de Usable y Accesible
El mismo cuenta con un canal de sindicación

http://www.planetaki.com/usableyaccesible.xml

Lo cual resulta atractivo para seguir dicho planeta desde tu propio lector de noticias.
Al momento de escribir estas líneas, ya participan 44 sitios en el planeta de Olga.
Además, puede que haya otros planetas que te intereren...

Leer más

HAML construyendo un HTML en abstracto

Haml (XHTML Abstraction Markup Language) es una forma abstracta de escribir documentos en XHTML. Actualmente sólo está implementado en Ruby. El cual es usado principalmente con el framework Ruby on Rails y su librería ActionView.



Como claramente se ve en el ejemplo

• no deben cerrarse etiquetas
• se utiliza # para definir DIVs con ID
• se utiliza . para definir CLASSes
• para el elementos HTML se debe utiliza
  

Ejemplo | Haml Lab
Documentación | Module: Haml
Enlace relacionado | Haml, el haiku de las páginas web
Via | seraccesible

Leer más

Requiem por PC Magazine

La mítica revista PC Magazine acaba de anunciar que a partir del próximo número de enero de 2009, discontinuará y dará por finalizada su edición en papel.
De esta manera, esta publicación, que nos ha mantenido informados desde 1982, cesa sus actividades.
Su editor, el grupo Ziff Davis Media; a comunicado que dados los bajos ingresos publicitarios, finalmente se ha declarado en bancarrota.
No obstante, el grupo mantendrá la edición digital; disponible en pcmag.com

fuente: blogs.pcmac.com | Finanzas

Leer más

Let me Google that for you

Cito, textuamente (aunque traduzco), "Esto es para toda aquella gente que encuentra más conveniente molestarte que preguntarle a Google por ella misma".
Es una aplicación, que me ha resultado entretenida.
En la página inicial, bien podemos completar el cuadro de búsqueda con los términos que deseamos buscar en Google, para lo cual la aplicación devuelve un enlace del tipo:

http://letmegooglethatforyou.com/?q=se+ve+mal+en+explorer

Para la consulta (ejemplo) que he realizado.

Luego, a título de uso inmediato, podemos utilizar el enlace (cuando el tema lo amerite) en el foro que participamos.
Si la respuesta estaba en Google...
;-)

Supongo que cualquier otro uso, es bienvenido

Leer más

Ver la Web como la ve un bot

Los crawlers, arañas o bots que utilizan los motores de búsquedas, no ven la Web como la ve cualquier usuario.
Las animaciones Flash (aunque recientemente el contenido puede ser indexado por Google), JavaScript y otras tecnologías no son ampliamente soportadas por estos programas que rastrean los sitios web para indexar los contenidos.
Seebot.org utiliza Lynx para mostrar el contenido de la página, de la forma en que un bot la ve.

SEO y Accesibilidad Web

La optimización para los motores de búsqueda comienza, necesariamente, por comenzar haciendo accesible los contenidos a los motores de búsqueda.


Vía | Accesibilidad en la Web

Leer más

Google anuncia Sktool

Google, recientemente (en su blog Inside AdWords) ha anunciado el lanzamiento de Sktool: Search-based Keyword Tool.
Sktool representa un buen recurso a la hora de buscar palabras claves (keywords) para los usuarios de AdWords, de forma de ayudar a identificar cuales, siendo importantes para el negocio, no están siendo utilizadas en la cuenta (mediante la comprobación de la URL).


Resulta además de un uso potencial si, de todas maneras, no somos anunciantes de AdWords.
Es de esperar, así lo anuncia Google, que próximamente estén disponibles otros mercados de análisis.
El lanzamiento sólo contempla los mercados del Reino Unido y Estados Unidos.

Herramientas de Google relacionadas:
Google Insights
Google Trends

Leer más

Como generar un PDF

doPDF se encuentra entre los utilitarios de escritorio que más uso a cotidiano; su función es, precisamente, generar archivos PDF.
Este utilitario, que por cierto es gratuito, se visualiza como una impresora virtual.
Tras la instalación (el archivo de instalación sólo pesa 1.42 Mb) esta impresora virtual aparece dentro de la lista de impresoras como doPDF.

Entre los beneficios de utilizar esta aplicación; puedo, simplemente, nombrar:

• Es gratis | tanto para uso personal como para el comercial


• Soporte para 64-bits | funciona correctamente bajo sistemas operativos de 64-bits.


• No requiere de terceras partes | no requiere de otros programas para generar un archivo PDF


• Ajuste de resolución | puede fácilmente configurarse para salidas entre 72dpi y 2400 dpi


• Ajuste de página | soporta los tamaños estándares: carta, oficio, A4 o un tamaño definido por el usuario


• PDF y SEO | este formato es completamente amigable para publicaciones Web, ya que los motores de búsqueda pueden recorrerlo e indexarlo


• Soporte multi-lenguaje | la aplicación soporta la configuración del idioma, disponible poco más de 20 idiomas


• Cuida al planeta! | si el resultado no lo exige ¿para qué imprimir sobre papel?


• Baja utilización de recursos | la utilización de memoria y CPU es muy bajo comparado con aplicaciones de pago.
  

Nota | para ver el contenido de estos archivos es necesario contar con Adobe Reader
Compatibilidad | Windows XP, Vista, 2000/2003/2008 Server (32 y 64-bits)
Enlace | doPDF
Descarga | doPDF

Leer más

Como maximizar un juego en Flash

Flash Game Maximizer es una extensión para Firefox que te permite, precisamente, maximizar los juegos en Flash.
La extensión detecta cualquier elemento Flash insertado en la página; ante lo cual el flash status cambia de color; al clickear sobre el mismo, la ventana emergente permite elegir entre los elementos susceptibles a ser maximizados.
Por tratarse de una extensión experimental, Firefox Add-ons requiere estar registrado para tal efecto (lo cual, por cierto, es gratuito).

Enlace | Flash Game Maximizer

Leer más

20 recomendaciones para CSS

Manteniendo el CSS organizado

1. Evitá utilizar CSS inline or CSS in-page

   
   Los estilos CSS pueden ser aplicados de 4 maneras diferentes:
   

   CSS inline

   
   

   
   <p style="margin-left: 20px;></p>

   
   

   CSS mediante enlace

   
   

   
   <link rel="stylesheet" href="nombre-estilo.css" type="text/css">
   </head>
   <body>
   




CSS on-page




<style type="text/css" media="screen"%gt;
#lista li
{
list-style: none;
padding: 0.25em;
border-top: 1px dashed #00BFFF;
margin-right: 2em;
}
</style>




CSS @import


Para importar estilos dentro de otras hojas de estilo.



2. Utilizá clases e identificadores en forma apropiada

   
   Especialmente aquellos que se inician con CSS, se les suele armar una verdadera confusión al momento de establecer una diferencia entre class e ID.
   La línea de razonamiento que ayuda a aclarar esto, es la siguiente. Si algo ocurre sólo una vez a lo largo de la página, usá entonces ID. Para múltiples ocurrencias debe utilizarse un CLASS.
   Es importante, en tiempo de diseño, considerar los cambios futuros. Si existe algún cambio este estilo se repetirá en la página? Si la respuesta es sí o tal vez, entonces usá CLASS.



3. Utilizá un estilo consistente

   
   Tené presente que podés escribir los estilos CSS, en línea
   

   
   p {font-size: 10px; margin-bottom: 1em;}
   

   
   O bien en bloque
   

   
   p {
   font-size: 10px;
   margin-bottom: 1em;
   }
   

   
   Existe una amplia variedad de preferencias personales al respecto. Algunos desarrolladores encuentran que la utilización del estilo en línea le resulta más fácil para luego encontrar selectores. En cambio, la utilización de un estilo en bloque facilita encontrar propiedades más rápidamente.



4. No especifiques el mismo selector más de una vez

   
   Una pobre organización de la estructura del documento CSS, o tal vez por pereza, puede resultar en consecuencia que algunos selectores sean especificados más de una vez. Por ejemplo, podés especificar algunas propiedades para lista al inicio de la hoja de estilos, luego si decidís agregar alguna propiedad adicional no deberían estar al final de la hoja de estilos sino, al inicio; junto con las declaraciones originales.
   Antes de agregar un selector, es una buena práctica asegurarse si no fue agregada previamente.
   



5. Utilizá selectores en minúsculas

   
   Los selectores son caso sensitivo, lo cual significa que #Header no es lo mismo que #header. En orden de evitar errores, siempre es mejor especificar los selectores en minúsculas. Esta práctica, ayuda a ser consistente en el uso de los caracteres. De mano de otro ejemplo, para evitar errores usá siempre guión bajo o guión, pero no ambos.
   



6. Utilizá convenciones estándares para los IDs comunes

   
   La mayoría de los diseñadores web ha llegado a un acuerdo (tácito, por cierto) en cómo nombrar determinados elementos. Para aquellos de habla inglesa el header es #header y el footer es #footer. Así también como es nuestro idioma es una práctica común nombrar los Ids como #cabecera y #pie.
   Esto ayuda a que otros comprendan nuestro código y nosotros el de los demás.
   ¿Qué sentido tiene inventar para el pie un ID que se llame #contenedor-final?
   



7. Utilizá nombres de selectores con significado

   
   Mientras que te sea posible, poné en práctica nombres semánticos (que tengan significado) para tus selectores.
   No sólo para que otros desarrolladores puedan comprender tu código. Sino, lo más importante, cuando tengas que hacer vos miso un futuro mantenimiento del sitio.
   Si, por ejemplo, tenés una clase que aplica una alineación a la izquierda (de una imagen) ¿qué mejor que nombrarla .image-left, .img-left o .imagen-izquierda?
   Para qué darle otro nombre?
   



8. Cuando te sea posible, abreviá

   
   Es muy común comenzar a escribir una hoja de estilos y a los pocos minutos, tener algo así como:
   

   
   ul {
   margin-left: 20px;
   margin-top: 10px;
   margin-bottom: 10px;
   }
   

   
   Cuando ya veas que tenés eso, simplificá. Menos es más (y es lo mismo)
   

   
   ul {
   margin: 10px 0 10px 20px;
   }
   

   
   De idéntica manera, cuando uno se acostumbra al método abreviado, ya escribe:
   

   
   p {
   margin: 6px 0;
   }
   

   
   Lo cual es lo mismo que
   

   
   p {
   margin: 6px 0 6px 0;
   }
   

   
   



9. Ordená las propiedades en el selector

   
   Las siguientes declaraciones no se ven mal, por cierto
   

   
   ul#navegacion {
   background-color: #600;
   color: #fff;
   font-size: 12px;
   height: 24px;
   margin: 90px auto 0;
   padding: 0;
   text-align: right;
   width: 768px;
   }
   

   
   Pero las siguientes, a mi gusto, se ven mejor
   

   
   ul#navegacion {
   width: 768px;
   height: 24px;
   padding: 0;
   margin: 90px auto 0;
   text-align: right;
   font-size: 12px;
   background-color: #600;
   color: #fff;
   }
   

   
   ¿Por qué?
   Me gusta ordenar las cosas por su propósito y objetivo.
   En este ejemplo, las propiedades del modelo de caja, están todas juntas. Las propiedades del texto, también. Y, finalmente, el color de fondo y de la fuente, también están juntas.
   



10. Acostumbráte a resetear los estilos de los navegadores

    
    Todos los navegadores tienen por defecto un valor para controlar como se visualizan los elementos básicos.
    Es una buena práctica cargar al inicio, una hoja de estilos que haga un resete de todos y cada uno de eso valores.
    Al respecto, Eric Meyer, mantiene actualizada una verdadera CSS reset.
    Conviene cargarla al inicio del CSS o, como hago yo, tener una hoja aparte llamada reset.css, que carga antes que otra.
    



11. Dividí tu hoja de estilos en secciones específicas

    
    Arreglando los selectores dentro de grupos para diferentes propósitos ayuda a mantenerlos más ordenados. Esto asegura que las secciones mantengas los selectores relacionados, por lo que así se evita que un selector sea llamado más de una vez.
    Por ejemplo:
    
    • reseteo de la hoja de estilo
    • elementos básicos (body, p, ul, ol, li)
    • clases más comunes (como en el ejemplo .anterior, .image-left)
    • selectores específicos para ciertas partes de la página
    • diseño de la plantilla
    
    
    
    
    • contenedores
    
    
    • encabezado
    
    
    • navegación
    
    
    • contenido
    
    
    • pie de página
    
    
    
    
    
    

La razón por la que organizo de esta manera es principalmente por la filosofía de cascada en CSS. El reset CSS y los elementos básicos necesitan ir primero a fin que puedan ser sobreescritos posteriormente por selectores más específicos. Esto es útil si tengo que encontrar las clases comunes y los elementos más frecuentes, mientras que la plantilla de diseño rara vez cambia.



12. Agregar un encabezado a cada sector del CSS

    
    

    
    /* CSS reset */
    /*--------------pie de página----------------*/
    /*========= clases comunes ==================*/
    

    
    Teniendo en mente que lo que está contenido entre /* y */ no es interpretado por el navegador porque son comentarios de CSS, es una buena práctica identificar los bloques (por lo menos el inicio de cada uno).
    



13. Incluí los colores de referencia

    
    Cuántas veces has tenido que buscar cual es el correcto valor hexadecimal para los colores utilizados en el diseño. Tenerlos especificados, mediante comentarios, al inicio del CSS ayuda a ubicarlos luego más fácilmente. Está técnica, puede bien verse así en tu hoja de estilos:
    

    
    /*
    Verde principal: #d7ecaa
    Verde claro: #f1fcdb
    Verde muy claro: #e8f7c4
    Marrón: #a66c38
    Marrón claro: #632f00
    */
    

    
    



14. Usá comentarios sólo cuando sea necesario

    
    Si todas las declaraciones están escritas en forma correcta, entonces hay muy poco que explicar o comentar. Cualquiera puede comprender lo que el CSS dice. Evitar hacer comentarios innecesarios mantendrá el tamaño del archivo bien pequeño.
    Lo que sí no está de más, por ejemplo, incluir un comentario acerca de una propiedad extra para corregir un problema de visualización en algún navegador en particular.
    



15. Considerá dividir tu CSS en archivos separados

    
    Si tu archivo CSS es muy extenso, tal vez debas considerar separar el contenido según la funcionabilidad.
    Por ejemplo. Si una parte del CSS contiene la presentación de un formulario, que sólo es utilizado en una sección del sitio ¿para qué tenerlo en el CSS que carga en todas las páginas?
    Podés bien tener diferentes archivos:
    
    
    
    • reset.css
    
    
    • plantilla.css
    
    
    • contenido.css
    
    
    • formulario.css
    
    
    
    



16. Evitá utilizar hacks específicos

    
    Comúnmente los hacks explotan el mal renderizado de determinados navegadores.
    El primer inconveniente con ellos es que comúnmente no están bien documentados.
    Para determinadas visualizaciones es común encontrar el uso de voice-familiy, para hacer que IE, por ejemplo, se comporte de tal o cual manera.
    En el correcto aprendizaje de CSS hay que evitar el uso de estos, especialmente cuando la función que tienen, en forma básica, es distinta.
    



17. Utilizá comentarios condicionales para determinados navegadores

    
    Los comentarios condicionales para IE, por ejemplo, es una práctica para que sólo este navegador pueda verlo. Ello permite cargar CSS para determinada versión o rango de versiones.
    Por ejemplo, este condicional cargará ie.css sólo para Internet Explorer:
    

    
    <!--[if IE]>
    <link rel="stylesheet" href="ie.css" type="text/css" />
    <![endif]-->
    

    
    Para versiones IE6 y anteriores:
    

    
    <!--[if lte IE 6]>
    <link rel="stylesheet" href="ie6bugs.css" type="text/css" />
    <![endif]-->
    

    
    



18. Utilizá al mínimo la especificidad

    
    En CSS los selectores más específicos sobreescribirán los selectores más generales.
    

    
    div#contenedor ul li {
    padding: 4px 0;
    }
    

    
    Si #contenedor es un DIV que contiene toda la página, todas las listas tendrán un padding superior e inferior de 4px; ahora si yo quiero que las listas dentro del DIV #contenido tengas menos padding, habrá que hacer lo siguiente:
    

    
    div#contenido ul li {
    padding: 2px 0;
    }
    

    
    Se ve claramente que esto lleva a más y más selectores complejos. A más selectores que agregues más debés sobreescribir las propiedades. Para evitar estos inconvenientes es mejor llevar al mínimos la especificidad de los selectores (utilizando unos pocos selectores en cuanto sea posible). De una manera más simple, lo siguiente:
    

    
    li {
    padding: 4px 0;
    }
    #contenido li {
    padding: 2px 0;
    }
    

    
    



19. Utilizá completamente los selectores CSS

    
    No es necesario poner un CLASS o un ID por cada elemento que pensemos va a tener un estilo diferente. Es bueno, por eso, entender acerca de los selectores que tenemos disponibles.
    Un ejemplo, podés tener un menú de navegación de la siguiente forma:
    

    
    <div id="navegacion">
    <ul>
    <li class="enlace_nav"><a href="enlace1.html" class="enlace">link 1</a></li>
    <li class="enlace_nav"><a href="enlace2.html" class="enlace">link 2</a></li>
    <li class="enlace_nav"><a href="enlace3.html" class="enlace">link 3</a></li>
    </ul>
    </div>
    

    
    Para lo cual el CSS podría bien ser el siguiente:
    

    
    #navegacion ul {
    margin: 0;
    display: inline;
    }
    #navegacion .enlace_nav {
    float: left;
    }
    #navegacion .enlace_nav a.enlace{
    color: #fff;
    background-color: #600;
    text-decoration: none;
    padding: 2px 10px;
    }
    #navegacion .enlace_nav a.enlace:hover {
    background-color: #666;
    }
    

    
    El principal inconveniente con esto es que uno termina con una buena cantidad extra de CLASSes en el documento HTML, el cual no es necesario. Simplemente hay que utilizar selectores descendentes para aplicar estilo CSS a las listas dentro de la barra de navegación:
    

    
    <ul id="navegacion">
    <li><a href="enlace1.html">link 1</a></li>
    <li><a href="enlace2.html">link 2</a></li>
    <li><a href="enlace3.html">link 3</a></li>
    </ul>
    

    
    De esta forma, el CSS queda así:
    

    
    #navegacion ul {
    margin: 0;
    display: inline;
    }
    #navegacion li {
    float: left;
    }
    #navegacion a {
    color: #fff;
    background-color: #600;
    text-decoration: none;
    padding: 2px 10px;
    }
    #navegacion a:hover {
    background-color: #666;
    }
    

    
    El resultado es código HTML más sencillo y un CSS más claro.
    



20. Redundancia o dependencia

    
    Para quienes han escrito CSS durante un tiempo, probablemente han tenido este problema. Es normal tener una buena cantidad de elementos con características similares de visualización. Después de todo, un estilo visual consistente es el secreto de un buen diseño. El inconveniente es que podés estar escribiendo las mismas propiedades a lo largo del CSS.
    Una alternativa es segmentar los grupos comunes dentro de CLASSes propias o utilizar selectores para aplicar un conjunto de propiedades genéricas.
    Estas CLASSes serán aplicadas a los elementos que lo requieran. Pero ¿qué ocurre si uno quiere modificar una de estas propiedades aplicadas a uno de esto elementos?
    Es necesario agregar selectores más específicos para el elemento que lo necesita.
    Siguiendo con este método, terminás con una buena cantidad de selectores aplicando CSS al mismo elemento y al cambiar una propiedad se obtienen resultados inesperados en algún lugar del resto del diseño.
    Sería más fácil separar las propiedades CSS para cada selector? Bueno, entonces volvemos donde empezamos: reescribiendo el mismo CSS varias veces.
    En definitiva, cualquiera de ambos métodos forma parte del gusto personal y cómo uno, en particular, se siente más cómodo diseñando. Pero la tendencia es: la redundancia trabaja mejor para pequeños proyectos que para los grandes. Sitios muy complejos se benefician más de mano del uso de la dependencia que los simples y pequeños.
    Dave Shea ha profundizado mucho, al respecto en su entrada (en inglés) Redundancy vs. Dependency
    

Referencia: aPaddedCell
Licencia: este artículo es publicado bajo una licencia Creative Commons

Leer más

El bueno de la semana se llama MALO

[offtopic]

[/offtopic]

MALO es una pequeña librería (8 líneas: 0.25 Kb) para diseñar sitios Web.

• es flexible
• personalizable
• fácil de usar

MALO está basado en el criterio que cada columna puede ser dividida en 2, 3, 4 ó 5 partes.

• 100% = 50% + 50%
• 100% =~ 33,33% + 33,33% + 33,33%
• 100% = 25% + 25% + 25% + 25%
• 100% = 20% + 20% + 20% + 20% + 20%

Las partes de la grilla del layout está conformada por CLASSes flotadas a la izquierda utilizando un hack para IE:

display: inline; *margin-left:-0.04em;

Hay que tener un especial cuidado si se cambia la declaración por defecto 1em = 16px



MALO deriva de su hermano mayor Emastic CSS Framework.
Compatibilidad | IE:5.5,6,7,8(beta), Firefox 3, Opera 9.23, Safari 3.1(Win), Chrome 0.3
Enlace | http://code.google.com/p/malo/
Licencia | GNU General Public License v2
Descargar | MALO CSS Library 1.0 (beta)

Leer más

Como convertir PDF a DOC

Mediante la aplicación on-line, disponible en Convert PDF to Word fácilmente se puede convertir un archivo PDF al formato DOC de Word.
En el resultado final, la aplicación mantiene cualquier imagen que esté incrustada (no hay pérdida de datos, en este sentido).
Contratiempos, pues que los hay; como toda vez que se lleva a cabo alguna conversión de formatos.
En las pruebas que he llevado a cabo, no se obtienen resultados si el archivo PDF está protegido contra copia.
Asimismo, en el resultado final en lugar de trabajar con párrafos o encabezados, la aplicación muestra el contenido dentro de marcos (el usuario de Word, sabe bien a qué me refiero acá).
Y para cada fin de línea, la aplicación inserta, sistemáticamente, un marca de fin de párrafo. Lo cual, puede hacer un poco bastante tedioso el trabajo a la hora de llevar a cabo la post-edición.
Aunque con estos detalles, el resultado que se obtiene es un documento de Word.

Leer más

Google Maps: Argentina

Aunque la novedad se esperaba para el día de hoy, muchos supusieron que iba a ser a primera hora, durante la mañana.
No. nada que ver; a pocas horas antes de terminar el día pudo verse finalemente el mapa de Google en Argentina.

View Larger Map

En este aspecto, Live Maps viene ya llevando la delantera. Por ello es que Microsoft espera ofrecer la funcionabilidad de viaje punto a punto para inicios de diciembre.
Aunque en Google Maps, por lo pronto puede verse el sentido vehicular de las calles.

Leer más

Mp3gle: para escuchar y bajar MP3

Mp3gle está orientado a buscar (y a escuchar) música a través del criterio del nombre del artista, banda o como quieras mejor ubicarla.
En los resultados de búsqueda, aparece disponible bajar el mp3 correspondiente. Lo cual proviene del viejo y bien conocido Music Free Downland; el cual, por cierto, nunca logró tener un eficiente buscador.
Además, de un buena dosis de publicidad contextual, aparece también algunos videos desde YouTube. Al accederlos (igual para lo que tiene que ver escuchar el audio de los resultados de búsqueda), hay que estar atentos a la correspodiente ventana emergente (pop-up); que si están bloqueadas, no conseguirás ver/escuchar nada.

Leer más

Iconos gratis | Icon Easy

La cantidad y diversidad y la calidad de íconos que se encuentran en Icon Easy se segmentan en las siguientes categorías, los números entre paréntesis representan la cantidad disponible a la fecha:

• íconos de animales | (279)


• íconos de aplicaciones | (1947)


• íconos de arte | (99)


• íconos de avatares | (157)


• íconos de marcas | (157)


• íconos de negocios | (99)


• íconos de caricaturas | (183)


• íconos de cultura | (175)


• íconos de emoticones | (241)


• íconos de tipos de archivs | (295)


• íconos de banderas | (190)


• íconos de carpetas | (1207)


• íconos de comida y tragos | (145)


• íconos de juegos | (324)


• íconos de hardware | (657)


• íconos de vacaciones | (223)


• íconos de Internet y Web | (888)


• íconos de chicos | (108)


• íconos de ocio | (42)


• íconos de amor | (30)


• íconos de media | (346)


• íconos de películas y TV | (570)


• íconos de naturaleza |(97)


• íconos de objetos |(586)


• íconos de teléfonia |(148)


• íconos de fotografía |(90)


• íconos de deporte |(399)


• íconos de sistemas operativos |(6684)


• íconos de transporte |(63)

Cada pack de íconos tiene, bien explícita, las condiciones de uso. Algunos requieren un uso no comercial, otros solicitan un enlace al autor.
Como el sitio tiene actualizaciones, cuenta con una canal de noticias RSS o bien por suscripción por correo.

Leer más

Ver la IP de una página: showIP

ShowIP es una extensión de Firefox, que muestra la dirección IP de la página actual en la barra de estado y permite llevar a cabo consultas a diferentes bases de datos.

Ver imagen abajo:

La info mostrada es de color rojo para una dirección IPv4 y de color verde para una dirección IPv6.
De todas maneras, estas características son personalizables mediante el menú Preferencias.
Con un click (izquierdo) se puede obtener información sobre el nombre del host de la página actual. Además, pueden agregarse o removerse servicios.



La IP que se muestra puede, opcionalmente, ser visualizada en formato

• decimal
• octal
• hexadecimal
• DWord

Página oficial | firefox-showip
Licencia | GNU General Public License v2
Enlace de descarga | showIP

Leer más

Como insertar un video YouTube en PowerPoint

Precisamente PowerPoint no es una de mis aplicaciones favoritas. Lo cual debe ser por la cantidad de presentaciones que a cotidiano recibo de amigos, familiares, conocidos, vecinos y parientes.
Existen varias técnicas. Las hay medianamente complejas, las que requieren varios pasos y conversiones de archivo y bueh! (con el mismo título de este post, se encontrarán varias de ese tipo).
Acá, mi aporte; para quien le interese y le sea útil.
El secreto consiste en instalar un add-in de terceras partes: YouTube Video Wizard.


Luego, todo el conocimiento necesario para poder llevar a cabo insertar el video, es precisamente conocer la URL que aparece en la barra de dirección del navegador.
Del resto se encarga el asistente.

El video de YouTube ya insertado no se ejecutará si no disponés de una conexión a Internet. No vale, en este caso, descargar el PPS para verlo después.

Enlace | YouTube Video Wizard (instrucciones para la instalación y modo de uso, en inglés)
Descarga | PowerPoint 2003 y anteriores | PowerPoint 2007

Leer más