Zen Coding | el nirvana del HTML

Si creías que eras eficiente escribiendo HTML... a partir de acá escribir HTML toma otra dimensión.


Zen Coding es un proyecto alojado en Google Code y te permite escribir HTML mediante un método abreviado.

Yo—particularmente—bajé de Google Code la versión en ZIP para Notepad++ pero, además, están disponibles las versiones para:

• Sublime
• Dreamweaver
• Coda
• Aptana
• TextMate
• textarea
• PSPad
• Espresso
• TopStyle
• AkelPad
• Ultraedit
• SlickEdit
• WebIDE e IntelliJ IDEA
• Netbeans

Para Notepad++ la cosa es muy simple desZIPeás el archivo en la carpeta plugins y reiniciás Notepad++



Si miraste con detenimiento la imagen superior del post, es lo que—de resultas—solamente tenés que tipear para que este plugin transforme eso en lo que ves en la imagen superior.

En resumen, escribís:

div#menu>table>tr>td*5>a.nav

y obtenés:

<div id="menu">
 <table>
  <tr>
   <td><a href="" class="nav"></a></td>
   <td><a href="" class="nav"></a></td>
   <td><a href="" class="nav"></a></td>
   <td><a href="" class="nav"></a></td>
   <td><a href="" class="nav"></a></td>
  </tr>
 </table>
</div>

También existe un plugin para CSS ¿y por qué no?

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Sitio Web | Zen Coding
Vía | Download Squash

Texturas sin bordes | florales

Texturas florales sin bordes en Patterrific

Patterrific es uno de los sitios de diseño al cual suelo estar suscripto vía RSS, en especial atención por la suerte de recursos que suelen ofrecer.

En el día de hoy han publicado 8 texturas sin bordes > vía CSS (por ejemplo) las podés repetir que no se notará el tamaño ni el borde de la imagen inicial.

Los detalles:

• Contenido: 8 patterns
• Dimensiones: 300 x 300 px
• Formato: JPG
• bordes: sin bordes
• Instalación: Descomprimir, abrir Photoshop, ir a Edita > Definir textura
• Uso: Personal y no Comercial
• Tamaño de archivo zip (1.04 Mb)

Sitio Web | Patterrific

0 URLs indexadas

Hacía poco más de 6 meses que en Webmaster Help Forum Announcements, Google no publicaba un anuncio. Y hoy han tenido que hacerlo para poner un poco de paños fríos sobre el caliente asunto. Porque verdaderamente a muchos se nos atragantó el café de la mañana.

Ya que hoy, los que nos levantamos temprano, vimos que muchos de los sitios (para algunos casi todos) que administramos aparecía con 0 URLs indexadas.

Sin palabras. Cuando esto ocurre, comúnmente significa que desapareciste de los índices de Google pero, en esta ocasión no:




Así que, a pesar de la alarma; esto no afecta los resultados de búsqueda.

—En Twitter, tuve oportunidad de avisar un poco antes.

Luego, claro está de intercambiar algún mail y establecer contactos con algunos colegas; mal de muchos consuelo de tontos.

Vía | Webmaster Help Forum Announcements

Todas las teclas de atajo para Google

Google Shortcuts es un proyecto alojado en Google Code que además permite ser instalado en Firefox mediante una extensión.

Su finalidad, es precisamente permitir al usuario configurar adecudamente y en un solo lugar (toolbar) las aplicaciones de Google a las cuales se desee acceder con sólo un click.



Tiene soporte de idioma—incluído el español—y se perfila prontamente a 1.5 millón de descargas ¿interesante, no?


Sitio Web | Google Code > Google Shortcuts
Instalar extensión | Google Shortcuts

Wallpapers | no como otro cualquiera

Wallpapers Wide es un sitio Web que reúne un calidad y cantidad—poco más de 1000—wallpapers.



Más allá de las categorías en que está organizado el sitio e independientemente del uso de las etiquetas; que hacen muy fáciles las cosas al momento de llevar a cabo las búsquedas; la mayor fortaleza de este sitio Web, está precisamente en la amplia posibilidad de formatos de bajada con que contamos.

Todas las siguientes medidas, en pixels

• Estandard 4:3 800 x 600 1024 x 768 1152 x 864 1280 x 960 1400 x 1050 1440 x 1080 1600 x 1200 1680 x 1260 1920 x 1440 2048 x 1536 2560 x 1920
• Estandard 5:4 1280 x 1024
• Ancha 16:10 960 x 600 1152 x 720 1280 x 800 1440 x 900 1680 x 1050 1920 x 1200 2560 x 1600
• Ancha 5:3 800 x 480 1280 x 768
• Alta definición 16:9 960 x 540 1024 x 576 1280 x 720 1366 x 768 1600 x 900 1920 x 1080 2048 x 1152 2400 x 1350 2560 x 1440
• Móvil VGA 320 x 240 640 x 480
• Móvil WVGA 400 x 240 800 x 480
• Móvil PSP 480 x 272
• Móvil Phone 220 x 176

Esto nos evita el resampleo de la imagen—si ocurriera—y la posterior degradación de la misma.

Sitio Web | Wallpapers Wide

App móviles | Bubiloop

Motores de búsquedas alternativos

En estos tiempos donde las aplicaciones para móviles parecen estar por doquier, Bubiloop es un interesante recurso donde se pueden descargar aplicaciones para

• Android
• iPhone
• Blackberry
• Windows Mobile

Los desarrolladores, esperan implementar también la disponibilidad de App para

• Maemo
• Symbian
• JME
• FlashMobile
• WebMobile

No sólo se presentan aplicaciones móviles de pago, si no que se encuentran—también—aplicaciones gratis.

Por cierto, está disponible una extensión para Firefox, además.

Sitio Web | Bubiloop
Instalar extesnión | Bubiloop

GridFox

GridFox es una extensión para Firefox que permite configurar la visualización de un overlay sobre cualquier página Web para llevar a cabo o simplemente comprobar un diseño basado en grillas o cuadrículas



Sitio Web | GridFox
Instalar extensión | GridFox

Como enviar grandes archivos | iSendr

iSendr es un recurso interesante si se necesita enviar grandes archivos de un punto a otro (aka P2P).

Sólo es necesario indicar el archivo que deseamos enviar para que la aplicación devuelva un enlace. El cual una vez comunicado a nuestro destinatario y abierto en el navegador dará inicio a la transferencia.



La conexión utiliza una protocolo de encriptación 128-bit AES, además, puede adjucarse un password para acceder a la URL de trabajo.

En este tipo de transferencias se ahorra mucho tiempo, en especial atención a que la descarga/subida comienza cuando el destinatario accede a la URL.

Sitio Web | iSendr
Entrada relacionada | Transfiriendo archivos - Jetbytes
Vía | Kabytes

Como insertar un botón para Twitter | Followme

Si ya te has convertido en usuario de Twitter y estás buscado usuarios que te sigan, quizás estás buscando—también—uno de esos botones para insertar en tu sitio Web o blog.



Twitter Buttons Script te lo pone bien fácil, sólo debés acceder al sitio Web poner tu nombre de usuario de Twitter y copiar el código que te ofrecen. Luego, sólo, pegarlo donde quieras que aparezca.

Nada más, sólo es la imagen (en el servidor de ellos) y un enlace a tu cuenta de Twitter.

Sitio Web | Twitter Buttons Script
Vía | Feedmyapp

Como hacer botones redondeados | online

En iwebtoolsonline.com tienen disponible una herramienta online donde fácilmente se pueden obtener botones (elásticos) con bordes redondeados.



Se puede optar por utilizar colores sólidos o bien degradados; como así también, configurar el efecto hover
Por resultado, se obtiene—además de la muestra visual—el archivo ZIP que contiene:

• 2 imágenes
• archivo HTML de muestra
• archivo CSS

—Ideal para principiantes (aka dummies)

Sitio Web | HTML and CSS Rounded Corner Button Generator

Buscá eso en Google

lmgtfy.com es una aplicación que estuve tentando en etiquetarla como cosas inútiles pero a la hora de publicar estos comentarios me arrepentí.

Es cierto, no le da un valor agregado a lo que estés haciendo pero es divertido.

Ya que, además, es una manera elegante de responder en foros—por ejemplo—preguntas que facilmente encuentran respuestas en Google.

Supongamos que alguien publica una inquietud del tipo: "donde está la oficina de google en argentina"

Una forma elegante de responder es:

1. ir a la página de lmgtfy.com
2. tipear en la caja de búsqueda la búsqueda "donde está la oficina de google en argentina"
3. elegir la URL corta, por ejemplo
4. publicar el enlace http://tinyurl.com/y3hnhoa

Independientemente del consejo, cualquier otro uso es bienvenido.

Sitio Web | www.lmgtfy.com

Leer está de moda

El video del viernes

Un video inteligente que muestra a las claras los beneficios de un producto sin precedentes ¿o sí?

Video | 3:20 min


—Gracias Ricardo por enviarme el enlace!

Sitio Web | Leer está de moda

Mapa de caracteres Unicode

Free Online Unicode Character Map es una interesante aplicación online que fácilmente convierte caracteres Unicode a entidades HTML


Sitio Web | Free Online Unicode Character Map
Entrada relacionada | Unicode Input Tool Converter
Vía | Google Directory > Character Encoding

Tu navegador soporta HTML5?

HTML5 va en camino de convertirse en un estándard; aunque no es fácil determinar cuando.

html5test.com lleva a cabo una serie de comprobaciones, basadas precisamente en los actuales borradores de W3C.

Sólo he llevado a cabo la comprobación con Firefox v3.6.3 obteniendo 101 sobre 160 puntos posibles.


La lista de comprobación incluye:

• Doctype
• Canvas
• Video
• Audio
• Geolocation
• Storage
• Offline Web Applications
• Workers
• Section elements
• Grouping content elements
• Text-level semantic element
• Forms
• User interaction

Y varios y muchos sub-ítems más, entonces ¿Tu navegador soporta HTML5?

Sitio Web | html5test

Variaciones sobre un mismo tono

0to255.com es una interesante recurso online para trabaja con colores, más precisamente con variaciones más oscuras o más claras; a partir de uno informado.



Sólo es necesario—para su utilización—elegir alguno de los colores que se nos presenta en pantalla o, de un modo más intuitivo (y no documentado) completar la URL con el color deseado—en hexadecimal—De otra manera, en pick a color se puede proceder al ingreso.
El resultado son 30 tonos:

• +15 son más oscuros
• +15 son más claros

Sitio Web | 0to255.com
Vía | Wwwhat´s New

+200 texturas de papel

En Naldz Graphics han llevado a cabo una interesante recopilación con más de 200 texturas de papel; recabando y analizando poco más de 30 fuentes diferenetes.

El acuario de Okinawa Churaumi

El video del viernes

El acuario de Okinawa Churaumi es el segundo acuario más grande que existe en el mundo.

El tanque Kuroshio con una capacidad de 7500 m³ ofrece en un costado un panel (acrílico?) que nos separa de la vida marina y tiene por dimensiones 8.2 m × 22.5 m y un espesos de 60 cm (hay un empuje de 7500 toneladas, no es poca cosa)

Desdes tiburones ballenas a rayas y un sinnúmero de especies habitan en este formidable acuario.

Desde el año 2007 ha recibido, a la fecha, poco más de 20 millones de visitantes.

video | 4:34 min


Sitio Web | Okinawa Churaumi Aquarium
Visto en Jon Rawlinson Productions

El 69% del tiempo se mira la mitad izquierda de la pantalla

Así lo rebela un alerta de Jakob Nielsen, desde su sitio Web; en la entrada publicada Horizontal Attention Leans Left

El nivel de atención del usuario, varía de la izquierda a la derecha de la pantalla, según el siguiente gráfico:



Cada barra, representa la cantidad de tiempo que el usuario dedica cada 100 pixels recorriendo la pantalla de izquierda a derecha.

La mayoría de los usuarios, dedican más del doble de tiempo—en cuanto a la atención que prestan—de la mitad de la pantalla hacia la izquierda, que a la derecha.

Vía > Twitter > geosdigital

Como crear el menú de inicio de Win7 con CSS3

En el blog de Janko at Warp Speed ha publicado un excelente tutorial que muestra como crear el menú de inicio de Windows 7 con CSS3

#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
             -moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
             box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#619bb9;
             background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
             background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }

Insertar código en el HTML | hilite.me

hilite.me es una aplicación basada en Google App Engine que te permite copiar código en la misma y obtener el código HTML necesario para ser mostrado en cualquier sitio Web, blog o foro.

En lo particular, utilizo en este blog Syntax Highlighter, pero ahora voy a prescindir de él y mostraré a continuación cual es el resultado del uso de esta interesante aplicación:

/* globals */
html { height: 100%; min-height: 100%; margin: 0; padding: 0; }
body { background-color: #f1efe6; color: #333; font: 12px 'Lucida Grande',Arial,Helvetica,sans-serif; height: 100%; min-height: 100%; margin: 0; padding: 0; }

Soporta varios estilos de presentación y una variedad muy amplia de lenguajes. Los cuales evito citar para evitar el tedio de enumerarlos/leerlos.

En resumen, un excelente recurso para mostrar en forma amigable código en nuestras páginas sin contar con plug-ins, CSS externos o Javascript para tal efecto.

Sitio Web | hilite.me

La naturaleza por números

El video del viernes

No es mi visión de esta sección el publicar videos de +2 minutos; pero el que les muestro a continuación tiene ese ritmo tan fresco, tan llevadero que—más allá de la temática—quiero hacer una excepción.

Este corto, de Cristóbal Vila, está inspirado en los números, la geometría y la naturaleza; el número de oro, la sección áurea, el crecimiento basado en ángulos eficientes y las secciones homogéneas.

Video | 3:44 min

La música: Often a bird de Wim Mertens