Dock Menu con Jquery

JQuery es una Librería Javascript al igual que Dojo, Prototype, Mootools y muchas mas, que nos ayudan a construir paginas web interactivas para el lado del usuario.
El Dock es muy conocido en el mundo de Mac, en Windows se podria llamar ¿Menú de Inicio?.
DockMenu es muy sencillo de usar y muy practico para algunos proyectos web.

Primero creamos el HTML incluyendo los dos Javascript y la hoja de estilo, en este DockMenu ya biene el fix para solucionar problemas de imagenes PNG para internet explorer :

[html]
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<!–[if lt IE 7]>
<style type="text/css">
div, img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>
<link href="style.css" rel="stylesheet" type="text/css" />
[/html]

Luego debemos crear en el Body un div y dentro una lista de links que sera nuestro DockMenu.

[html]
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#">
<span>Home</span><img src="images/home.png" alt="home" />
</a>
<a class="dock-item2" href="#">
<span>RSS</span><img src="images/rss.png" alt="rss" />
</a>
</div>
</div>
[/html]

Para Terminar debemos de hacer un poco de código Javascript para hacer funcionar el DockMenu ( Esto también se escribe dentro del Body ).

[javascript]
$(document).ready(
function()
{
$(‘#dock2’).Fisheye(
{
maxWidth: 60, //m&aacute;ximo de expansi&oacute;n
items: ‘a’, //etiqueta de Items
itemsText: ‘span’, //etiqueta del texto del Item
container: ‘.dock-container2’, //contenedor del dockmenu
itemWidth: 40, //tamaño inicial del Item
proximity: 80, //aproximaci&oacute;n del mouse para la expansi&oacute;n
alignment : ‘left’, //alineaci&oacute;n de item
valign: ‘bottom’, //alineaci&oacute;n vertical del item
halign : ‘center’ //alineaci&oacute;n del dockmenu
}
)
}
);
[/javascript]

Eso es todo, ya tienes el DockMenu como en Mac. Puedes ver la Demo aquí.

Recursos:

Control de Versiones OpenSource

i alguna vez has colaborado con otras personas en un proyecto, entenderas la frustración constante de intercambio de archivos. Algunos lo hacen por correo electrónico, a través de archivo de algunos servicios de carga y de algunos otros métodos. Se trata de un dolor de cabeza, y cada diseñador y programador lo sabe. El Sistema de control de versiones es una excelente manera de combatir el problema de compartir archivos entre los trabajadores.
La mayoría de los desarrolladores web probablemente han trabajado con algún tipo de revisión del sistema de control, pero los diseñadores pueden encontrarlo en un concepto extranjero. El beneficio más evidente de la utilización de revisión de control es la capacidad de tener un número ilimitado de personas que trabajan en el mismo proyecto, sin tener que enviar archivos constantemente hacia adelante y hacia atrás.
Sin embargo, los desarrolladores y diseñadores pueden beneficiarse con el uso de sistemas de control de revisión para mantener copias de sus archivos y diseños. Puede navegar en su repositorio y volver a versiones anteriores si algo sucede.
Este artículo muestra diversos sistemas de control de versiones open source y herramientas que hacen que la creación de un sistema de control de versiones sea fácil.

CVS

Tortoise CVS
Es el abuelo de revisión de los sistemas de control. Fue liberado en 1986 y es el estándar prácticamente en todas partes. Sin embargo, la base de código no es tan completo como SVN u otras soluciones.
Si bien el CVS puede ser una tecnología más antigua, es todavía muy útil para cualquier diseñador o programador para hacer copias de seguridad y compartir archivos.
Recursos:

Clientes CVS:

SVN

Tortoise SVN
Subversion es probablemente el sistema de control de versiones con la más amplia adopción. La mayoría de código abierto proyectos de uso de Subversion como repositorio porque otros proyectos de mayor envergadura, tales como SourceForge, Apache, Python, Ruby y muchos otros, lo utilizan también. Google Code utiliza Subversion exclusivamente para la distribución de código.
Debido a la popularidad de Subversion, muchos clientes de Subversion están disponibles. Si eres un usuario de Windows, TortoiseSVN es un gran explorador de archivos para visualizar, editar y modificar su base de código de Subversion. Si estás en un equipo Mac, el Xcode es el entorno de desarrollo de Apple y cliente de Subversion.
SVN Recursos

Clientes SVN

Utilidades SVN

CoverFlow con Javascript

CoverFlow con Javascript

Un CoverFlow a lo iTunes en una web seria muy atractiva. Ya sea para ponerla como una galería de fotos o Albums de nuestros grupos favoritos, hacer esto se hace mas sencillo con la librería Javascript ImageFlow, en su versión 0.9.
La librería la encontre navegando y tuve la necesidad de modificarlo para que sea mas simple de usar. Les brindo el tutorial y la librería modificada para descargar.

Archivos necesarios para su funcionalidad:

  • imageflow.js
  • screen.css
  • slider.png
  • loading.gif
  • y la carpeta img con los archivos de imagen para el CoverFlow.

Ahora creamos un archivo index.html en el adjuntamos el javascript y la hoja de estilo.

<link rel="stylesheet" href="screen.css" type="text/css" />
<script type="text/javascript" src="imageflow.js"></script>

ahora creamos un div con el id imageflow. Este sera el contenedor de la precarga, la galería, y el scroll para la galería

<div id="imageflow"> </div>

Si quieren que el tamaño de las imagenes cambien solo tendrán que modificar este estilo. Yo le puse 150px para que se acomode al medio de la pantalla.

#imageflow
{
margin-left:150px;
margin-right:150px;
}

Ahora dentro del div imageflow ponemos los divs loading, images, caption y scrollbar

<div id="loading">
<p>Loading images</p>
<img src="loading.gif" width="208" alt="loading" />
</div>
<div id="images">
<!-- Aquí irán las Imagenes. -->
</div>
<div id="captions"></div>
<div id="scrollbar">
<div id="slider"></div>
</div>

Luego podremos poner las imagenes que pretendamos aparezcan en el coverflow.

<img src="img/img.jpg" longdesc="img/img.jpg" alt="Desc" />

Y ya tenemos nuestro propio CoverFlow estilo iTunes.

Enlace:

ImageFlow

Descargas:

ImageFlow
ImageFlow (script + librería modificada)

Programas para crear páginas Web.

Constructores y Destructores

strong>Constructores:
PHP 5 nos trae muchas funcionalidades y entre ellas los “Metodos Magicos” dos de ellos son los Constructores y Destructores, estos se ejecutan automaticamente, el Constructor se dispara cada vez que instancias un Objeto de la Clase con el constructor, y el Destructor se ejecuta cuando eliminas el Objeto ya instanciado.
Ejemplo de un Constructor :

class MiClase
{
  public function __construct()
  {
    echo "Llamando al Constructor.";
  }
}

Nota: Los constructores padres no son llamados implicitamente si la clase hijo define un constructor. Para poder ejecutar el constructor de la clase padre, se debe hacer una llamada a parent::__construct() dentro del constructor de la clase hijo.
Ejemplo:

class SubClase extends BaseClass
{
  public function __construct()
  {
    parent::__construct();
    print "Llamando al Constructor de Sub Clase.";
  }
}

Destructores:
PHP 5 introduce un concepto de destructor similar a los otros lenguajes de programación orientada a objetos. El método destructor será ejecutado tan pronto como todas las referencias a un objeto en particular sean removidas o cuando el objeto sea explícitamente destruido, o en cualquier orden en la finalizacion de la ejecución.
Ejemplo de un Desctructor:

class BaseClass
{
  public function __destruct()
  {
    echo "Llamando al Destructor.";
  }
}

Al igual que los constructores, los destructores de la clase padre no serán llamados explícitamente por el compilador. Para ejecutar un destructor padre, se debe tener una llamada explícita a parent::__destruct() en el cuerpo del destructor hijo.
Nota: Al trata de arrojar una exepcion dentro de un destructor (durante la finalizacion del script) producira un error fatal.
Dominios y Hosting

Autocarga de Objetos en PHP

Siguiendo con el curso de Clases y Objetos con PHP, en esta segundo Post escribo sobre la autocarga de Clases con PHP.
Qué es?:
Al programar Oriendato a Objetos no vemos en la necesidad de crear un archivo por cada clase, esto es para mantener ordenado y podamos incluir solo los archivos que necesitamos para utilizar cada clase.
Pero al utilizar muchas clases en un proceso, tenemos que hacer include() de todos los archivos contededores de Clases. Para solucionar este problema en PHP5 solo se tiene que llamar a la funcion
__autoload($nombreClase). Esta funcion se ejecutara y detectara la Clase justo antes que PHP detecte el error.
Ejemplo de uso :

function __autoload($nombreClase)
{
require_once $nombreClase.'.php';
}
$miclase = new MiClase();
echo $miclase->getNombre();

Errores que tenemos que evitar :
Un error comun que podemos cometer es escribir el nombre del archivo diferente al de la clase.
Lo que debemos hacer es seguir el Standard y poner el nombre del archivo .php y el nombre de la clase identicos.
nombre de archivo: “MiClase.php”
nombre de clase : “MiClase”
Errores a solucionar :
Al querer capturar el error de autocarga por alguna razon y pasarla a una excepcion el catch() no sera posible de esta manera. Al no ser esto posible PHP detectara que ha ocurrido un error fatal.

try
{
$miclase = new MiClasse();
echo $miclase->getNombre();
}
catch(Exception $e)
{
echo $e->getMessage();
}

Resultado del error:
Warning: require_once(MyClasse.php) [function.require-once]: failed to open stream.
Fatal error: require_once() [function.require]: Failed opening required ‘MyClasse.php’
Evitando el error

  1. Primero verifiquemos que el nombre de la clase o interface existan:
  2. if(class_exists($nombreClase,false) || interface_exists($nombreClase,false))
    {
    return;
    }
  3. hacemos un control de excepcion con try catch, dentro incluimos la clase sin pintar errores, verificamos si la clase o la interfaz no existen e instanciamos Exception en caso la clase ni la interface existan.
    try
    {
    @require_once($nombreClase. '.php');
    if (!class_exists($nombreClase, false) || !interface_exists($nombreClase, false))
    {
     throw new Exception('Class ' . $nombreClase . ' no encontrada');
    }
    }
    catch (Exception $e)
    {
    echo $e->getMessage();
    }

La Funcion completa nos quedaria de esta manera:

function __autoload($class)
{
if (class_exists($class, false) || interface_exists($class, false))
{
 return;
}
try
{
 @require_once($class . '.php');
 if (!class_exists($class, false) || !interface_exists($class, false))
{
   throw new Exception('Class ' . $class . ' not found');
 }
}
catch (Exception $e)
{
 echo $e->getMessage();
}
}

Diseñar páginas Web.

Clases y Objetos con PHP

n este capitulo iniciaremos con algo de teoría que debemos saber sobre PHP5 que ya ha estado mucho tiempo liberado, pero que en esta oportunidad quiero entrar en mas profundidad.
Introducción:
PHP5 viene con muchas nuevas, desde que salió esta versión la fortaleza y robustez de PHP se ha elevado mucho, ya que se puede decir que es orientado a objetos, con algunas faltas como namespaces.
El manejo de PHP fue reescrito por completo, dándonos así un mejor desempeño y muchas mas características.
La Clase:
Si han desarrollado en otros lenguajes orientado a objetos como Java por ejemplo se les ha hecho muy fácil acostumbrase a PHP5.
Cada definición empieza con la palabra “class” todo en minúsculas seguida por su el nombre de la clase en mayúsculas “Persona”, las cual no tiene que estar en la lista de palabras reservadas de PHP.

class Persona
{
protected $_nombre;
function __construct($nombre)
 {
  $this->_nombre = $nombre;
 }
 public function setNombre($nombre)
 {
  $this->_nombre = $nombre;
 }
 public function getNombre()
 {
  return $this->_nombre;
 }
}

Aquí vemos que declaramos una función __contruct(), esta función sirve como un constructor para PHP lo cual nos permite al momento de instanciarla llamar automáticamente a este método, dentro del método guardamos el parámetro en una variable protegida de la clase. Que luego la podemos recuperar llamando al método getNombre().
A esta característica de la clase que arme se le llama encapsulamiento de datos. La cual nos sirve para proteger nuestras variables teniendo como intermediarios a los métodos get y set para acceder a ella. (El encapsulamiento de datos se usa mucho en La Programación Modular y Orientada a Objetos).
Los métodos creados fíjense que tiene antepuesto la palabra public, esto hace que al momento de instanciar la Clase tengan el permiso suficiente para poder tratar con el, si en vez de public le hubiesen puesto private, el método solo permitiría ser accesado desde dentro de la clase (rutinas internas).
Ejemplo de lo escrito

$cesar = new Persona('Cesar Mancilla');
echo $cesar->getNombre;

Pero diran el método set?
Pudo ser así:

$cesar = new Persona();
$cesar->setNombre('Cesar Mancilla');
echo $cesar->getNombre;

el usar el constructor o no, va a depender en que situación estén al momento de armar la lógica en la programación.
Aquí dejo algunos enlaces que me parecen interesantes para una introducción a la programación orientada a objetos con PHP.
[Enlaces]
Programación Orientada a Objetos
Encapsulamiento de Datos
Constructores y Destructores
Palabras reservadas de PHP
MySQL, PHP Hosting