Gana una invitación a Google Wave

Hace poco me llego la tan ansiada invitación a Google Wave, me parecio una muy buena alternativa de comunicación pero solo con algun problema: como no esta abierto a todos no es muy probable que todos cuenten con una cuenta.
Justo ayer me llego el mensaje para invitar a 8 usuarios más, así que, si no tienen aun una cuenta en Google Wave pueden dejar su comentario que sorteare estas 8 invitaciones.

Quien dice yo?

jfdghjhthit45

Zen Coding: Acelera la escritura de HTML/CSS

Zen Coding es una herramienta que nos ayudara en acelerar la escritura de nuestro código HTML y CSS utilizando una sintaxis muy intuitiva que nos generara automáticamente con presionar ctrl+, la estructura real de nuestro código.
Esta Herramienta esta disponible online, de manera que no necesitamos instalar nada para probar su funcionalidad.

Si usamos algún IDE para codificar como: Aptana, Coda, Espresso, podemos descargar plugins para integrarlo con estos programas.
Este video nos muestra de que muestra la manera rápida de codificar y obtener el resultado sea código HTML o CSS.

Expandir Abreviación

La funcion de expandir abreviación tranforma los selectores que digitamos en codigo HTML, esta es una lista de algunas de las abreviaturas mas usadas.

  • E: Nombre del elemento (div, span, p, h1).
  • E#id : Elemento con identificador (div#content, p#intro).
  • E.class : Elemento con clase (div.menu, spam.error).
  • E#id.class : Se pueden combinar atributos de un elemento ( div#top.header, span#close.blue).
  • E>N : Crear un elemento padre con hijo (div>p, span>a).
  • E+N : Crear dos elementos juntos: (div#header+div#content+div#footer).
  • E*N : Crear elementos multiples (div*5, span*2).
  • E$*N : Elementos numerados (ul>li.item$*5).

Atajos de Teclado

  • Ctrl+, : Expandir Abreviación.
  • Ctrl+M: Convinar pares.
  • Ctrl+H: Envolver con abreviatura.
  • Shift+Ctrl+M: Combinar lineas.
  • Ctrl+Shift+←: Anterior elemento.
  • Ctrl+Shift+→: Siguiente elemento.
  • Ctrl+Shift+↑: Ir a elemento padre o hijo.

Testear Zen Coding online.

Ver Demo

Plugins con todas las funcionalidades.

Plugins con solo: “Expandir Abreviación”.

Más información : SmashingMagazine.

jfdghjhthit45

Lightbox JavaScript con TopUp y jQuery

TopUp es un plugin JavaScript para realizar Lightbox, esta desarrollado con jQuery y la librería jQuery UI los cuales nos brindan la posibilidad de tenerlos en nuestra Web.
Actualmente TopUp soporta distintos tipos de lightbox, aparte de realizar la función para imágenes, podemos poner Flash, Videos Youtube, Windows Media, RealPlayer, Quicktime, iframes y html.

Implementándolo en nuestra Pagina Web.

Paso 1: Incluir dentro del la librería TopUp.

Si poseemos un hosting propio, podemos descargarlo y subirlo a una carpeta para llamarlo, sino podemos llamarlo desde la misma Web que lo brinda.


Paso 2: Configurar los enlaces que abrirán el lightbox.

En este simple paso tan solo agregaremos la clase “top_up” a los enlaces que deseemos abran un lightbox.

Youtube

Así de simple logramos implementar un Lightbox con TopUp, una muy buena alternativa dentro de su categoría.
Ver Demo Descargar

zp8497586rq
zp8497586rq
jfdghjhthit45

Screencast: Instalar Chrome OS en VirtualBox

i muchos ya vieron los videos e imágenes sobre El nuevo Sistema Operativo desarrollado por Google: Chrome OS, habrán notado que es casi idéntica al navegador Google Chrome.
Luego del anuncio oficial que tubo Google, ahora podemos descargar el archivo .vmdk que es una extensión para VMWare y probarlo en una maquina virtual, pero como sabrán VMWare es licenciado, es por eso que lo instalaremos en VirtualBox que es libre y sin ningún problema de funcionamiento con este tipo de archivos.
He preparado un Screencast, donde soluciono de manera rápida todas las necesidades que tuve al momento de instalarlo, como por ejemplo: la descarga desde gdgt.com necesita registro, así que otra alternativa es thepiratebay.org, luego la descarga es por torrent, yo no uso ningún cliente y no quise instalarlo, probé con torrent2exe.com que es un servicio donde subes el .torrent y te descargue un .exe que te hará la descarga del archivo automáticamente, y todo esto esta en este corto Screncast de 5 minutos.

Instalando Chrome OS en VirtualBox.

Descargar

zp8497586rq

jfdghjhthit45

Tema para WordPress Gratuito: deStyle

Themeshift es una Web de venta de temas para WordPress, navegando por la red la encontré, y de paso encontré este grandioso tema que no solo es gratuito, sino que tiene un diseño muy agradable y características que lo hacen muy valorable.
Entre sus mejores características están el menú con multi-nivel, un gestor de anuncios 125×125, plantillas personalizadas para páginas, Integración con Twitter, Flickr, generación de Thumbnail en la portada, y otras muy buenas.

Menu con Dropdown Multi-nivel

Plantillas para Páginas personalizadas

Menu de opciones dentro del administrador

Avisos predefinidos mediante CSS

Hilo de comentarios y Trackbacks separados

Ver Demo Descargar

zp8497586rq

Ordenar columnas de una tabla con Javascript y TinyTable

rdenar columnas de una tabla con Javascript y TinyTable
TinyTable es una librería con el fin de ordenar columnas de una tabla, esta funcionalidad la realiza con JavaScript, sin peticiones al Servidor de Base de Datos.
Esta librería no solo tiene la opción para ordenar, también nos permite: Paginar, customizar el numero de filas por pagina, buscar por contenido en la tabla, entre otras cosas.

Estos son los pasos para implementar TinyTable en nuestra aplicación web.
Previamente hemos tenido que descargar el script, descomprimirlo y solo copiar a otra carpeta para la demo los archivos script.js, style.css y la carpeta “images”.

Paso 1: Crear nuestro HTML.

En este paso generaremos un archivo .html e incluiremos los archivos script.js y style.css.



  


    
    
    


Paso 2: Crear la estructura de la grilla.

Esta estructura se reemplazara en el .html en lugar de .

ID

Name

Phone

Email

Birthdate

Last Access

Rating

Done

Salary

Score

1 Ezekiel Hart (627) 536-4760 tortor@est.ca 12/02/1962 March 26, 2009 -7 7% $73,229 6.9
2 Jaquelyn Pace (921) 943-5780 in@elementum.org 06/03/1957 October 20, 2006 -7 33% $130,752 4.9

Paso 3: inicializar el ordenamiento.

Lo colocaremos dentro de la estructura html en reemplazo del tag .

var sorter = new TINY.table.sorter('sorter','table',{
    headclass:'head',  // clase de la cabecera
    ascclass:'asc',    // clase para orden ascendente
    descclass:'desc',  // clase para orden descendente
    evenclass:'evenrow', // clase de filas 1
    oddclass:'oddrow',   // clase de filas 2
    evenselclass:'evenselected',// clase de filas seleccionadas 1
    oddselclass:'oddselected',// clase de filas seleccionadas 2
    paginate:true, // paginacion (true or false)
    size:10, // filas por pagina
    colddid:'columns', // dropdown de columnas para buscar
    currentid:'currentpage', // mostrar pagina actual
    totalid:'totalpages', // mostrar total de paginas
    startingrecid:'startrecord', // numero de registro inicio
    endingrecid:'endrecord', // numero de registro final
    totalrecid:'totalrecords', // total de registros
    pageddid:'pagedropdown', // dropdown de paginado
    navid:'tablenav', // ID de elemento de navegacion
    sortcolumn:1, // columna inicial a ordenar
    sortdir:1, // direccion de orden 1 o -1
    sum:[8], // columnas que se sumaran
    avg:[6,7,8,9], // columnas que se promediaran
    columns:[
        {index:7, format:'%', decimals:1},
        {index:8, format:'$', decimals:0}],
    // opciones adicionales de columnas
    init:true // Iniciar ahora? true o false
});

Hemos dado un vistazo de como implementar TinyTable de manera básica, solo con el ordenamiento, pero podríamos agregar elementos html con sus respectivos identificadores para agregar funciones de búsqueda, paginado y demás opciones de manera automática que nos provee esta increíble librería.
Ver DemoDescargar

zp8497586rq

jfdghjhthit45

Pack de iconos gratuito: Aplication icon set

a target=”_blank” href=”http://www.webiconset.com”>Web Icon Set es un Website donde puedes encontrar sets de iconos, esta vez nos trae este pack de iconos, contienen 10 diferentes imagenes en PNG de alta calidad.
Puedes utilizarla en distintos tipo de aplicaciones Web personales o comerciales, ya que cuenta con distintos tipos de iconos: registro, configuracion, base de datos, chat, usuarios, login, añadir, eliminar, editar, entre otros.

Este pack es gratuito y puedes descargarlo desde este link:
Descargar

zp8497586rq

jfdghjhthit45

Qué es Chrome OS?

Chrome OS es el nuevo Sistema Operativo de Google, que hoy ha sido anunciado oficialmente por ellos, su objetivo es reemplazar o ser una alternativa a los ya conocidos Windows, Linux, Mac y otros.
Este Sistema operativo se caracteriza por esta basado en el ya popular navegador web Google Chrome, por lo que la interfase es casi igual a este.
Este video nos ayuda a tener una idea de como seria el Chrome OS.

zp8497586rq
jfdghjhthit45

10 Excelentes plugins jQuery para formularios

os formularios siempre son indispensables en cualquier website, ya sean formularios para mandar un simple mail, hasta formularios muy completos de registro.
El objetivo de este post es tratar de convertir los simples formularios html en formularios más útiles y fáciles de llenar para el usuario, convirtiéndolo en una alternativa para familiarizar el formulario al cualquier usuario.

Esta es una lista de 10 plugins jQuery que serán muy útiles en nuestros formularios:

1. Password Strength

Nos muestra la fortaleza de la clave digitada, este plugin calcula la fortaleza de la clave y nos muestra cuanto tiempo tomaria en hackear la contraseña.
DemoDescargar

2. Dropdown Check List

Este plugin convierte simples elementos select multiple, en un dropdown con elecciones multiples mediante checkbox.
DemoDescargar

3. Autocomplete

El autocompletado de palabras es una ayuda muy valiosa, con este plugin podemos buscar facilmente palabras y obtendremos resultados inmediatos en forma de lista.
DemoDescargar

4. Ajax Fancy Captcha

Este es un particular captcha que funciona arrastrando la imagen correcta al area señalada.
DemoDescargar

5. Highlight

Este plugin incrementa la usabilidad no solo de formularios, sino tambien de grids o tablas, su funcion es resaltar el area que esta activa para el usuario.
DemoDescargar

6. Uniform

Con Uniform podemos convertir muy facilmente elementos select,radio y checkbox en elementos con un estilo particular y atractivo.
Descargar

7. Boxy

Es un lighbox al estilo Facebook, con opciones para arrastrar y redimensionar la caja de dialogo.
DemoDescargar

8. jQuery Validation

Con este fabuloso plugin podemos agregar a nuestro formulario una manera muy agradable de validacion de campos.
DemoDescargar

9. Masked Input

Masked Input facilita a los usuarios colocar distintos tipos de datos en un campo, ya sean campos de fecha, telefonos, etc.
DemoDescargar

10. Uploadify

Esta herramienta nos permite realizar un upload de archivos multiple, utilizando flash para lograr el objetivo.
DemoDescargar

Más info : WebDesignLedger

zp8497586rq

zp8497586rq

jfdghjhthit45

Obtener el número de retweets de Tweetmeme

Tweetmeme es un servicio para realizar retweets y de esta manera agregar algún aporte a un tweet, al realizar el retweet podemos contabilizar el numero de retweets hechos para un determinado tweet.

Este servicio nos brinda un script para mostrar el número de retweets hechos por los usuarios y un enlace que nos lleva a ver las estadísticas de esos retweets.

Si queremos personalizar este botón tendremos que utilizar la API de Tweetmeme, con esto podremos obtener información en formato XML y JSON, y poder mostrarlo de una manera diferente en nuestro Website.

Este es el resultado de la petición en formato JSON de una url.

{
  "status": "success",
  "story": {
    "title": "10 maneras de evitar el SPAM en WordPress | Craftyman Blog",
    "url": "http://tednologia.com/10-maneras-de-evitar-el-spam-en-wordpress/",
    "media_type": "news",
    "created_at": "2009-11-17T15:31:04+00:00",
    "url_count": 4,
    "tm_link": "http://tweetmeme.com/story/282576007",
    "comment_count": 0,
    "excerpt": "10 maneras de evitar el SPAM en WordPress | Craftyman Blog: http://bit.ly/3akyy",
    "thumbnail": "http://tweetmeme.s3.amazonaws.com/thumbs/282576007.jpg"
  }
}

Esta es una función que nos devolverá el número de retweets mediante un parámetro que será la url.

function retweet_count($url){
    $content = file_get_contents("http://api.tweetmeme.com/url_info.json?url=".$url);
    $content = json_decode($content);
    return $content->story->url_count;
}

Para ponerlo en algún post en WordPress podemos pegar este script en nuestro archivo single.php

echo retweet_count($post->permalink);

En la página oficial de Tweetmeme podemos obtener más información sobre la documentación.

zp8497586rq
jfdghjhthit45