Generar Thumbnails con CSS

Una de las propiedades de CSS 2.1 es clip, una propiedad que nos sirve para generar efectos visuales que recortan los bordes de un elemento.
Esta es una útil alternativa para ya no generar un Thumbnail con PHP para cada imagen, de esta manera ahorraríamos espacio en nuestro servidor o hosting.
Este ejemplo nos muestra la manera en que se recorta una imagen con la propiedad clip, requiere de coordenadas que están en el siguiente orden: Arriba, Derecha, Abajo, Izquierda (TRBL).

Esta es la imagen que vamos a reducir y cortar

Para lograr este objetivo lo único que tenemos que hacer es crear los estilos para la imagen en el head del html

.clipout{
  position:relative;
  width:136px;
  height:105px;
}
.clipin{
  position:absolute;
  clip:rect(50px 218px 155px 82px);
  top:-50px;
  left:-82px;
}

Después insertar los siguientes elementos dentro del BODY.

<div class="clipwrapper">
    <div class="clip">
        <img src="castle.jpg" />
    </div>
</div>

El resultado es este:

Nota: Esta propiedad de CSS se recomienda usar en casos no tengan muchas imagenes en pantalla, para un listado es mejor llamar imagenes ya recortadas y no hacer muy pesada nuestra página web.
Mas detalles: Seifi.org

VirtualBox: maquina virtual OpenSource

VirtualBox es una maquina virtual Open Source que nos permite virtualizar varios tipos de Sistemas Operativos como Microsoft Windows (Windows XP, Windows, Vista, Windows 2008), Linux (Ubuntu, Red Hat, Mandrila, Fedora, Debian…), Solaris, BSD, y otros, este programa podría ser una alternativa a VMWare que tiene casi el mismo rendimiento.
Este programa actualmente se ejecuta en Windows, Linux, Mac y OpenSolaris bajo la licencia GPL (General Public Licence) y esta siendo desarrollado activamente obteniendo una creciente lista de características.

Estos artículos te podrán ayudar a ver detalladamente el funcionamiento y mejor optimización de VirtualBox.
Optimizing the desktop using Sun VirtualBox
VideoTutoriales
Documentation

Pueden descargar el instalador aquí.

Instalar Mac OS X Leopard en una Netbook

Boing Boing Gadgets ha lanzado una lista actualizada con las Netbooks que son compatibles con el Sistema Operativo Mac OS X Leopard.
Si tienes una Netbook o piensas en comprarte una o quieres aprender a instalar Mac OS X Leopard en una Netbook, te recomiendo que veas esta lista para saber que modelos y marcas de Netbooks son las mejores para poder instalar este Sistema Operativo y podrás probar que tanto es el desempeño de Leopard en una Netbook.
Lista de Netbooks con sus caracteristicas

Actualmente las Netbooks Dell Mini 9, Eee 1000H y HP Mini 1000 que cuestan entre $500 aprox. son casi perfectas para este Sistema Operativo que tiene compatibilidad con todas sus características
Este tutorial te enseñara paso a paso como instalar Mac OS X Leopard en una Netbook dándote los requerimientos necesarios para instalarlo.
Instalar Mac OS X Leopard en una Netbook.

Vamos a probar que tan poderosa puede ser una Netbook.
Información detallada: Gizmodo.

10 Plugins para mejorar WordPress

Cuando creamos nuestro blog por primera vez con WordPress, siempre hay cosas que configurar para optimizar, mejorar el rendimiento, facilitar la navegación al usuario, mejorar la apariencia de nuestro blog, entre otras cosas más.
Pongo en este articulo unos plugins para WordPress muy buenos para realizar fácilmente algunas de las tareas mencionadas como evitar es SPAM, optimizar nuestro blog para los diferentes motores de búsqueda, etc.
Si alguien usa algún plugin más lo puede compartir en este blog.
Akismet
Es uno de los mejores filtros de SPAM para los comentarios de nuestro blog, existe un plugin para WordPress el cual ya viene pre instalado.

All in one SEO Pack
Este plugin nos ayudara a optimizar nuestro blog para los diversos motores de búsqueda, mediante los meta tags nos ayudara a posicionar mejor nuestro blog.
La configuración es sencilla, debemos poner el titulo, una buena descripción, y los keywords por donde queremos que nos encuentren.

Google XML SiteMaps
Este Plugin nos permitirá genera SiteMaps para nuestro Blog automáticamente, tan solo tenemos que cambiar algunos permisos a la carpeta wp-content.

FeedBurner FeedSmith
Si tenemos una Feed creado en FeedBurner seria bueno que nuestro antiguo Feed (tednologia.com/feed) redireccione a nuestro Feed en FeedBurner para así llevar una estadística de visitantes.

WordPress Related Posts
Genera post relacionados mediante los tags de WordPress, y también se pueden ver en los feeds, de esta forma los usuarios encontraran artículos con la misma temática en el blog.

WP Super Cache
Este Plugin genera páginas estáticas html para cada post, mejorando el rendimiento de nuestro blog al no hacer consultas a la base de datos en vano.

WP-phpMyAdmin
Este plugin nos permitirá tener un PHPMyAdmin dentro de nuestro WordPress, así podremos hacer Backups fácilmente, crear tablas, entre muchas funciones más.

WP-PageNavi
Permite tener fácilmente un paginador con estilo, muy útil para la navegación en nuestro blog.

WP-SWFObject
Este Plugin es ideal para insertar Flash en nuestros post usando la librería SWFObject.

Sociable
Este plugin cuenta con opciones de muchas redes sociales agregando iconos de tu preferencia al final de cada post, esto hará que los usuarios puedan compartirlo en twitter, facebook, delicious, entre otros.

8 mejores lectores y agregadores de feed

Un Agregador o Lector de Feed es un software o aplicación Web que te facilita la lectura de estos agregando su contenido como titulares de noticias, blogs, podcast en un solo lugar.
Pongo a su disposición 10 de los Agregadotes de Feeds que utilizan mis suscriptores para leer mi blog.
Este Ranking esta basado en los resultados de mi FeedBurner, dando a conocer que lectores son los mas usados para mi sitio.
Google Reader (Google Feedfetcher)
Este es mi preferido y veo que también el preferido de mis suscriptores, es practico muy fácil de usar y tienes muchas opciones que me ayudan a destacar los mejores blogs.

Bloglines
Este agregador de blogs es una aplicación Web sin duda muy fácil de usar y la tercera más preferida de mis suscriptores.

FeedReader
Esta es una aplicación para Windows y tiene licencia libre.


Firefox Live Bookmarks

Esta opción que nos brinda Firefox es muy buena, facilitando la lectura de blogs en nuestros marcadores favoritos.

Netvibes
Esta es otra aplicación muy buena para lectura no solo de blogs sino de muchas redes sociales como Twitter, Facebook, Delicious, etc.

NewsGator Online
Una aplicación Web con buena interfaz que facilita la lectura de nuestros blogs.

Universal Feed Parser
Un Agregador de Feeds libre desarrollado en Python por Mark Pilgrim.

NetNewsWire
Este es un fácil lector de noticias para Mac OS X.

Esta lista puede estar en desorden a la verdadera lista de mejores lectores y agregadores de feed. Para mi el mejor es Google Reader, cual es el tuyo?

RPX: logueate desde Facebook, Twitter y mas

RPX es un servicio web que permite a sus sitio web conectarse con
Facebook, Google, Yahoo, Twitter, MySpaceID, AOL, Windows Live,
y muchos proveedores, todas las conexiones desde un solo punto a través de su API.

Esta es una lista de los beneficios que tendremos
* Incrementar los registros de usuario por la flexibilidad y facilidad de hacerlo.
* Comentar en su blog a través de OpenID, Google, Yahoo, Facebook, MySpace, Windows Live ID, y Twitter.
* Crear nuevas cuentas sin tener que registrarse y manteniendo la misma clave.
Para poder comenzar a implementar este sistema en sus Web deben seguir estos pasos:
Paso 1: Crear una cuenta en RPX

Puedes crear 3 tipos de cuenta, hay una Básica que no cuesta nada, puedes crearte una cuenta o
ingresar mediante algunos servicios que se muestran como Google, Twitter, Facebook y muchos más.
Paso 2: crear nuestra primera aplicación

En este formulario colocaremos el nombre para nuestra aplicación y los dominios permitidos para nuestra
aplicación (si tenemos mas de uno los ponemos separados por “,”).
Paso 3: configurar nuestros proveedores

El registro básico (sin pagar) nos brinda tan solo 16 proveedores de los cuales solo podremos elegir 6 (espero que aumenten el limite).

Algunos proveedores como Twitter, Facebook, MySpace y otros, requieren de activaciones previas en las cuentas respectivas, luego podremos saber los códigos fácilmente.
Paso 4: Agregar la interfaz de sign-in en nuestra web

Para este paso entraremos a la sección “Integration guide” que esta en el menú principal.
Aquí nos muestra dos maneras de ponerlo, por JavaScript y por Embed, yo elegiré por Javascript.
Paso 5: Recibir la información de autenticación

Después de la autenticación en RPX, esta nos redireccionara a nuestro sitio web con parámetros que nos permitirán obtener información del usuario.
Para hacer mas fácil esto, RPX nos brinda una clase escrita en diversos lenguajes de programación (C#, Java, PHP, o Ruby on Rails.).
Nota: Esta clase por cierto requiere que nuestro servidor soporte CURL y DOM XML parsing.
Para los que utilizan WordPress, hay un plugin : RPX.

Su utilización es simple, lo descargas, después instalalo en tu WordPress y te pedirá una API Key, la pueden encontrar en tu pagina inicial de RPX.

Introduccion a JSON

JSON (JavaScript Object Notation) es un formato de intercambio de datos que se ha estado usando ya desde hace un buen tiempo, esta tecnología es una manera de transportar datos por Ajax, comparándola con XML (Extensible Markup Language) que también se ha usado como tal, resulta ventajoso usar JSON por su sintaxis mas reducida, limpia y fácil de escribir.
Este formato no solo puede ser interpretado por Javascript, sino también por otros lenguajes de programación, PHP 5 trae implementado funciones (json_encode, json_decode) que realizan la serializacion de JSON desde un array, y viceversa
Vamos a realizar una comparación de estructuras entre JSON y XML

Formato JSON

{'detalles': {
    'id': 1,
    'tipo': 'libro',
    'titulo': 'Introduccion a JSON',
    'detalle': {
        'paginas': 800,
        'precio': {
            'us': 19.99,
            'ca': 19.99
        }
    }
}}

Formato XML

<detalles id="1" tipo="libro">
<titulo>Introduccion a JSON</titulo>
<detalle>
<paginas>783</paginas>
<precio us="19.99" ca="19.99" />
</detalle>
</detalles>

A simple vista uno se da cuenta que JSON es mas descriptivo en sus datos debido a su simplicidad mientras que el XML es mas dificil de leer y utiliza mas codigo.
Esta explicación resolverá algunas dudas de antiguos y futuros artículos en este blog, espero sus comentarios y sugerencias!.

Tabs CSS simples con jQuery

os Tabs CSS son una forma popular de navegación que permiten mostrar distintas areas de contenido al usuario mediante la selección de una pestaña.
Este tutorial de Soh Tanaka nos mostrara como crear tabs sencillos con CSS y jQuery, para comenzar tenemos que tener la ultima version de jQuery(1.3.2).

 

Paso 1: Realizar la estructura HTML

<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
</div>
</div>

 

Paso 2: Estructurar la hoja de estilos

CSS para los tabs

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px;
	line-height: 31px;
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
	background: #fff;
	border-bottom: 1px solid #fff;
}

 

CSS para el contenido del tab

.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}

 

Paso 4: Incluir la libreria jQuery en el head del html.

Ponemos incluir la libreria jQuery por medio de Google, de esta manera no consumiriamos mas recursos de nuestro hosting.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

 

Paso 4: Crear el JavaScript para el funcionamiento de los tabs.

$(document).ready(function()
{
	$(".tab_content").hide();
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
	$("ul.tabs li").click(function()
       {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).find("a").attr("href");
		$(activeTab).fadeIn();
		return false;
	});
});

Ver demo