Como grabar llamadas de Skype

November 26th, 2009 § 0

Por si usan Skype seguido y desean grabar sus llamadas, pueden utilizar este programa gratis llamado iFree Skype Recorder. Puede grabar cualquier llamada de skype y tiene opciones como grabar solo su voz o solo grabar la de la otra persona o ambas. Las llamadas se guardan en formato MP3.

Descargar iFree Skype Recorder

Abre tus aplicación usando solo movimientos del mouse

November 26th, 2009 § 0

MouseShaker es una aplicación con la cual podemos utilizar “Mouse gestures” para abrir cualquier programa, carpeta o incluso realizar acciones como mostrar el escritorio o minimizar sus ventanas. Un mouse gesture es un movimiento del mouse predefinido, como por ejemplo hacer un circulo con el puntero puede ser un mouse gesture.

La verdad es que a mi me funciona bastante y me ahorra tiempo, y también impresiona a mis compañeros de trabajo cuando llegan a pedirme que les envié algún documento y solo hago un movimiento del mouse en “Z” para abrir mis documentos y lo envío.

Descargar Mouse Shaker

Funcionan los libros de programación?

November 23rd, 2009 § 0

La mayoría de cosas que se las he aprendido directamente en la practica y con poca teoría, debido a esto yo nunca he creído en los libros de programación. Si fueran gratis probablemente creería en ellos y estoy seguro que fueran de mejor calidad, pero desafortunadamente son objetos comerciales y las compañías que los publican buscan hacerlos mas largos para poder aumentar su precio, incluso cuando esta información que adicionan es en muchos casos innecesaria, es por eso que es mas eficiente aprender en la practica.

Sin embargo, hace poco compre mi primer libro en Amazon (en realidad me lo regalo un amigo), se llama Wordpress plugin development. Lo que el libro busca es enseñar todo a pura practica y poca teoría. Desde el comienzo el libro empieza por ir creando un plugin de wordpress paso a paso y el resto del libro son mas plugins paso a paso pero cada plugin es cada ves mas complejos. Llego un punto en el que las funcionalidades de los plugins eran tan especificas que probablemente nunca lo hubiera llegado a necesitar. La verdad es que el libro me enseño varias cosas que no sabia, pero lo que mas me sirvió fueron cosas que ni siquiera son de programación, si no que me enseño a como buscar mas eficientemente en la documentación de proyectos open source.

Libros vs Google

Que tan mejor son los libros de programación en comparación a lo que pueden encontrar en Google? La verdad es que no toda la información de un libro esta en google (a menos que hallen el libro completo pirateado). La mayoría de cosas que hallaran en google son ejemplos prácticos en escenarios comunes, o teoría que probablemente viene de la documentación del framework que esten utilizando, la cual no sirve de mucho porque no hay quien la explique. Los libros de programación tienen la ventaja que explican la teoría y luego nos llevan a la practica.

Los libros pueden facilitar o frustrar nuestro camino tratando de aprender un nuevo framework o un nuevo lenguaje, mi recomendación es que primero traten de aprender nada mas utilizando google, luego pueden reforzar ese conocimiento que tienen con un libro, porque lo que si es cierto, es que un libro siempre les va enseñar algo nuevo, aunque sean pocas cosas, generalmente son cosas que aunque sean pocas tienen un gran valor.

Conclusión

No acostumbro a escribir este tipo de posts pero bueno no quería desperdiciar el tiempo que invertí escribiéndolo. Así que para terminar, creo que si vale la pena comprar un libro pero solo para reforzar el conocimiento que tengan, tratar de aprender desde cero con un libro rara vez trae buenos resultados, a menos en mi caso.

Usando Blueprint CSS

November 21st, 2009 § 0

Blueprint CSS es un framework CSS, posiblemente el concepto de frameworks CSS sea un poco nuevo para ustedes pero el concepto es parecido a los frameworks de desarrollo web, es decir, una parte del trabajo ya viene hecha. En el caso de Blueprint nos trae estilos ya predefinidos basados en lo que son las mejores practicas para el diseño basado en CSS. Por ejemplo, una ves aplicamos las hojas de estilo de Blueprint, nuestros tipos de letra automáticamente reciben formatos basados en reglas básicas de buena tipografía. Pero la razón de ser principal de estos frameworks como Blueprint es facilitar el diseño basado en grid.

El diseño basado en grid quiere decir que yo mi documento lo convierto en un grid de cierta cantidad de columnas, en el caso de blueprint son 24. Una ves ya tengo mi grid, al posicionar yo mis divs solamente especifico la cantidad de columnas del grid que deseo que ocupen, sin tener que especificar el ancho en pixeles. Esto facilita el diseño bastante y ahorra tiempo, como dice el lema de blueprint, nos permite mas tiempo pasar innovando que diseñando.

Creando el diseño

Paso 1. Descargar Blueprint CSS

Descarguen Blueprint de la pagina oficial, el link esta al entrar a la pagina en su lado superior derecho.

Este es el diseño que vamos a crear, es de un blog que cree con unos amigos pero que ninguno de nosotros tuvo la dedicación para continuarlo (perdon Ofo).

Como podrán ver el diseño tiene 3 columnas, se van a sorprender lo fácil que es crear este diseño con blueprint a comparación de que si lo hiciéramos a mano.

Paso 2. Crear el documento HTML y referenciar los archivos CSS de Blueprint

Como podrán ver Blueprint no es nada mas que un conjunto de archivos CSS de los cuales los siguientes tenemos que referenciar en nuestras paginas:
screen.css
print.css
ie.css

Pueden empezar por crear el siguiente documento HTML:

<html>
<head>
<title>Bloquiemos.com</title>
<link rel=”stylesheet” href=”blueprint/screen.css” type=”text/css” media=”screen, projection” />
<link rel=”stylesheet” href=”blueprint/print.css” type=”text/css” media=”print” />
<!–[if IE]><link rel=”stylesheet” href=”blueprint/ie.css” type=”text/css” media=”screen, projection” /><![endif]–>
</head>
<body>
</body>
</html>

Como podran ver, referenciamos los archivos que les mencione anteriormente.

Paso 3. Agregando nuestro div “contenedor”

Ahora vamos a crear el div principal de nuestro disenio el cual contendra el resto de nuestros divs. A este div se le asigna la clase “container” la cual pertence a blueprint.

<div class=”container”>
 </div>

Ahora vamos a creer el div del encabezado y del menu de la siguiente manera:

<div class=”container”>
  <div id=”header” class=”span-24 last”>
    <h1>Bloguiemos.com</h1>
   <hr/>
    <div>
    <div id=”menu” class=”span-24 last”>
    Inicio | Deportes | Tecnologia | Videos
   <hr/>
   </div>
  </div>

Como podrán ver el div de encabezado lleva una clase que se llama “span-24 last”, se acuerdan que les mencione que nuestro grid tiene 24 columnas? entonces por medio de esta clase estamos especificando que nuestro div del encabezado abarcara las 24 columnas del contenedor y la clase “last” especifica que es el ultimo div en la fila, mas adelante van a entender mejor este concepto. Si yo quisiera que mi div solo utilizara 12 columnas, entonces la clase a asignar seria “span-12”. Vamos agregar mas divs para que vayan comprendiendo.

Ahora vamos agregar los primeros div de contenido(el div de la noticia principal, el de aplicaciones y el de herramientas). Estos 3 div van estar dentro de otro div con el id “contenido” de la forma siguiente:

<h1>Bloguiemos.com</h1>

<hr/>

<div>

Inicio | Deportes | Tecnologia | Videos

<hr/>

</div>

<h1>Se murio alguien</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

</div>

<div id=”aplicaciones” class=”span-4?>

<h4>Aplicaciones</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div id=”herramientas” class=”span-4 last”>

<h4>Herramientas</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</div>

</div>

como podran ver ahora especificamos que nuestros divs utilicen menos columnas, aparte de eso utilizamos la clase “colborder”, esto es para que nuestro div muestre un borde a la derecha como el borde gris que separa cada parte del contenido en nuestro disenio. Hasta ahorita asi se deberia de ver el disenio:

Ahora solo nos falta agregar los dos side bars de la derecha, el que contiene los últimos posts, y el de los videos. Para hacerlo solo necesitamos agregar dos div mas que ocupen el resto de columnas del grid. Hemos utilizado nueve columnas del grid hasta ahorita, ya que el div que contiene los ultimos 3 divs que agregamos le pusimos span-8 mas el borde que ocupa una columna, serian 9, así que tenemos 15 columnas para los demás divs.

Agreguemos la columna de últimos posts así:

<div id=”ultimos_posts” class=”span-4 colborder”>

<h3>Breaking News</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

Y la columna de videos asi:

<div id=”sidebar” class=”span-10 last”>

<h3>Breaking News</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.