Para esta cuarta parte del tutorial quiero asegurarme que vayamos en sintonía, pueden revisar las partes anteriores en estas ligas:

http://bensite.info/2011/09/tutorial-yii-framework-parte-3/

http://bensite.info/2011/09/tutorial-yii-framework-parte-2/

http://bensite.info/2011/09/tutorial-yii-framework-parte-1/

Antes de comenzar recapitulemos un poco:

Archivos del Tutorial

Estamos usando un repositorio gratuito provisto por los servicios de Google Project, les recomiendo que si no usan SVN y repositorios, comiencen a usarlos, tan pronto lo prueben no los podrán dejar. Aquí tengo un tutorial para que se inicien en ello usando Eclipse, pero tambien pueden usar aplicaciones gratis, las cuales hay para todos los sistemas operativos, aqui no veremos como usarlas tal ves mas adelanta escriba algo mas detallado pero si les dejo esta liga donde se listan muchos aplicaciones para este fin: http://www.sliksvn.com/en/download

La liga del proyecto en google http://code.google.com/p/yii-framework-tutorial

(Sin embargo comenzare a agregar un zip con los archivos a partir de este punto, los subiré como quedaron en la parte inmediata anterior con el objetivo de que realicen los pasos siguientes, en la siguiente entrega subiré el código con estos pasos )

Descargar ZIP hasta parte 3  Descomprimir el contenido en una carpeta llamada tutorial la cual deberá ir dentro de su carpeta pública web (wwwroot, htdocs, etc. según sea el caso) y recuerden que igual dentro de su carpeta pública deberán tener el framework yii. (dudas? revisen parte 2 del tuto).

Comencemos con parte 4

En la parte 3 aprendimos un poco del MVC, no desistan si lo ven complicado ya que con el uso en realidad se vuelve muy sencillo y creanme les hara el trabajo mas sencillo adoptar una metodología de desarrollo. Vimos como existen 3 carpetas importantes en nuestro proyecto: controllers, models, views y que contenido hay dentro de ellas. También vimos como crear un nuevo controlador con acciones en su código y sus respectivas vistas y como se comportan al navegarlas via Web. Hasta aquí no hay problema verdad? pueden dar un repaso a la parte 3 si tienen alguna.

Sin embargo puede resultar tedioso el estar creando controladores manualmente con sus respectivas vistas, Yii nos ayuda y trae una herramienta que automatiza esta tarea, esta herramienta es Web y viene desactivada por default, activemosla, en nuestro archivo de configuración:

tutorial/protected/config/main.php

busquemos la parte en la cual se activan/desactivan modules (modulos), encontrarán un modulo comentado llamado “gii”, (así con “g”) el fragmento de código es el siguiente:

'modules'=>array(
// uncomment the following to enable the Gii tool
/*
'gii'=>array(
'class'=>'system.gii.GiiModule',
'password'=>'Enter Your Password Here',
// If removed, Gii defaults to localhost only. Edit carefully to taste.
'ipFilters'=>array('127.0.0.1','::1'),
),
*/
),

quitemos los comentarios /* y */. como verán habilitamos el modulo el cual usa la clase system.gii.GiiModule y nos pide un password, cambiemos “Enter Your Password Here” por “admin” y ejecutemos nuestra aplicacion visitando la siguiente ruta http://localhost/tutorial/index.php?r=gii nos deberá aparecer la pantalla de login, ingresemos admin y veremos la siguiente pantalla:

La herramienta “Yii Code Generator” es muy poderosa, comencemos a probarla generando controladores y sus respectivas vistas, en las siguientes entregas veremos como aprovecharla al máximo y como es que prácticamente hará el trabajo pesado por nosotros. Demos clic en “Controller Generator”, nos aparecera un formulario para crear controladores y sus respectivas acciones y vistas, llenemoslo de la siguiente forma, vamos a crear el controlador “contacto”, con las acciones:index, ubicacion, formulario. Justo como se ve en la imágen:

Nota: el campo Controller ID es sensible a mayúsculas/minúsculas les recomiendo siempre ingresar el nombre en minúsculas. (esto para respetar la notación “CamelCase” que es usada en base a las convenciones de Yii).

Demos clic en “preview” y veremos algo como esto:

Yii automaticamente esta generando un controlador con 3 acciones y sus respectivas vistas, ademas de que crea las carpetas correspondientes de ser necesario, es importante recalcar que aún no se generan los archivos, esto sucederá hasta que demos clic en el boton “Generate” esto con el objetivo de que primero revisemos el código que la herramienta propone y una ves revisado lo generemos. Demos clic en cada uno de los vinculos del controlador y vistas para ver el código que propone Yii aparecerán pantallas como esta:

Demos clic en “Generate” y una ves generado el código tendremos la pantalla de confirmación siguiente:

Nota: Si ocurre un error en estos pasos muy probablemente tengamos un problema de permisos en escritura, ya que la herramienta trata de generar archivos y carpetas nuevas. Podemos ajustar permisos a nuestra carpeta del proyecto e intentar de nuevo.

Podemos dar clic en try it now y ver que tenemos ya un controlador funcional y ajustando nuestras rutas a r=contacto/ubicacion y r=contacto/contactanos podemos acceder a las distintas acciones y vistas, tambien revisemos nuestros archivos y verán el nuevo controlador y la carpeta dentro de views para dicho controlador con sus respectivas vistas. Genial no? Podría parecer simple pero ya es de gran utilidad.

Hay otros puntos a tomar en cuenta cuando usamos esta herramienta

Por ejemplo que sucede si intentamos crear un controlador que ya existe o vistas que ya existen, bueno la herramienta es muy inteligente y nos avisa ademas de que inclusive puede mostrarnos la diferencia de código entre el archivo que genera y el archivo que ya tenemos. Por ejemplo abri mi archivo generado ContactoController y le agrege una linea nueva, despues en la herramienta volví a dar clic en preview y me marco que ya existían los archivos y me permitio ver la diferencia, algo asi como la siguiente pantalla, pueden intentarlo uds. si gustan.

Recapitulando

Como aprendimos la herramienta “gii” es muy útil y lo que vimos en realidad es de lo mas simple, tambien nos puede generar controladores y acciones que consulten, inserten, borren o actualicen información en una base de datos (el famoso CRUD). Con solo configurar una base de datos y una tabla y  automaticamente Gii escribirá el código por nosotros. Veremos un ejemplo en la parte 5. Esten al pendiente.

Si les surgen problemas o comentarios no duden en postearlos.

Antes de comenzar, recapitulemos lo que ya deben conocer y los archivos que necesitan:

1.- En su carpeta www o htdocs deben tener el framework yii en esta ruta:

/*Mac*/

Applications/MAMP/htdocs/yii/framework/

/*Pc*/

ArchivosdePrograma/WAMP/www/yii/framework/

2.- En su carpeta www o htdocs deben tener la carpeta tutorial con la webapp generada por la herramienta yiic: (aprendimos a generarla en la parte 2 del tutorial)

/*Mac*/

Applications/MAMP/htdocs/tutorial/

/*Pc*/

ArchivosdePrograma/WAMP/www/tutorial/

Si tuvieron problemas para generar esta carpeta y la webapp con la herramienta acá la pongo en un zip, solo tienen que descargarlo y descomprimirlo en la ruta mencionada. Download Zip

Teniendo el framework y la aplicación comencemos, primero nos vendría bien algo de teoría, para comprender el funcionamiento de Yii Framework, tenemos que entender como funciona el modelo MVC (Modelo Vista Controlador).

¿MVC?

Según Wikipedia el Modelo Vista Controlador es es un patrón de arquitectura de software que separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres componentes distintos. El patrón de llamada y retorno MVC, se ve frecuentemente en aplicaciones web, donde la vista es la página HTML y el código que provee de datos dinámicos a la página. El modelo es el Sistema de Gestión de Base de Datos y la Lógica de negocio, y el controlador es el responsable de recibir los eventos de entrada desde la vista.

Existen muchos sitios Web en los cuales se nos da una descripción detallada del modelo, inclusive hay algunos donde se explican las variantes que puede tener, para fines prácticos de este tutorial solo vamos a describir sus partes ya que con el uso de Yii iremos clarificando mas el MVC.

Obviamente el modelo se compone de 3 partes:

Modelo.- Volvamos a Wikipedia,  “Esta es la representación específica de la información con la cual el sistema opera. En resumen, el modelo se limita a lo relativo de la vista y su controlador facilitando las presentaciones visuales complejas. El sistema también puede operar con más datos no relativos a la presentación, haciendo uso integrado de otras lógicas de negocio y de datos afines con el sistema modelado”,  de tal manera que el modelo se encarga de la parte de los datos, mas claro: de la base de datos y la relación de la información con la vista y el controlador. Todas las operaciones CRUD (Create, Read, Update, Delete) se harán en este componente y después se pasaran al controlador y este a su vez a la vista para ser presentada al usuario.

Vista.- “Este presenta el modelo en un formato adecuado para interactuar, usualmente la interfaz de usuario.” La vista es en si la pagina Web que el usuario ve y con la cual interactua, la Vista recibe estas interacciones y las pasa al controlador el cual se encarga de procesarlas y de crear mas vistas para el cliente o bien de apoyarse con el modelo para así consultar la base de datos y regresar esta información hacia la vista.

Controlador.- “Este responde a eventos, usualmente acciones del usuario, e invoca peticiones al modelo y, probablemente, a la vista.” El controlador es la parte que une todo, por medio de la vista se invocan acciones o métodos del controlador y este a su vez puede usar librerías, helpers, funciones, usar los modelos, todo para generar una respuesta al usuario por medio de una vista.

El siguiente gráfico es un ejemplo del funcionamiento de Yii a nivel código, ingresemos a la siguiente URL en nuestro entorno: http://localhost/tutorial/index.php?r=site/index

1. Un usuario solicita la pagina http://localhost/tutorial/index.php?r=site/index el servidor maneja la petición primero con el archivo bootstrap index.php. (mas sobre bootstrap aquí)
2. El archivo bootstrap crea una instancia de la aplicación y la inicializa
3. La aplicación obtiene información detallada del usuario del componente de Yii “request”
4. La aplicación determina el controlador y la acción a ejecutar con ayuda del componente de Yii “urlManager”. En este ejemplo el controlador es “site” y la acción es “index” la cual es una función que corresponde a “actionIndex” dentro de la clase SiteController del archivo SiteController.php de la carpeta controllers.

   
   class SiteController extends Controller
   {/**
   * This is the default 'index' action that is invoked
   * when an action is not explicitly requested by users.
   */
   public function actionIndex()
   {
   // renders the view file 'protected/views/site/index.php'
   // using the default layout 'protected/views/layouts/main.php'
   $this->render('index');
   }}
   

5. La aplicación crea una instancia de la clase SiteController y determina que la acción index se refiere al método llamado actionIndex en la clase. Entonce crea y ejecuta el método.
6. En caso de que se requieran datos del modelo de la base de datos es en este punto donde se consultan y se regresan al controlador.
7. La acción Index por medio de su método dentro de la clase SiteController hace un “render” de la vista llamada index que corresponde al controlador y es en este punto donde se puede pasar a la vista un objeto del modelo. La función $this->render('index'); se encarga de hacerlo
8. La vista lee y despliega la información al usuario. La vista se encuentra dentro de la carpeta “views” y a su ves existe una carpeta para cada controlador, en este caso nuestro controlador es SiteController asi que existe una carpeta dentro de views llamada site la cual a su vez tiene un archivo por cada método, en este ejemplo index es el método invocado así que nuestro archivo de vista es index.php dentro de esta carpeta.
9. Aquí se renderean algunos widgets también como paginadores, breadcrumbs, etc.
10. La vista se renderea con el motor de plantillas de Yii y se une con el “layout” general del sitio para formar la pagina.
11. La acción termina mostrando la pagina final al usuario.

En la imagen se muestran estas 3 partes del MVC, la carpeta Controllers (Controlador), la carpeta Models (Modelo) y la carpeta Views (Vistas).

Intenten navegar el sitio y descubrir como es que el controlador SiteController despliega la información que ven, recuerden que dentro de nuestra carpeta views se encuentra una carpeta por cada controlador, en este caso site y dentro un archivo php por cada funcion o metodo, index, contact, error, logi,n etc.

Hagamos un pequeño ejercicio

Es hora de poner manos a la obra:

Paso1. En la carpeta controllers vamos a crear un archivo nuevo al que llamaremos “PostController.php” es importante usar la nomenclatura adecuada por ejemplo nuestro controlador siempre comenzara con mayuscula y sera acompañado por la palabra Controller, dentro pongamos el siguiente codigo:

<?php

class PostController extends Controller
{

public function actionIndex(){

$this->render('index');

}

public function actionMensaje(){

$this->render('mensaje');

}

}

Paso2. En nuestra carpeta views crearemos una carpeta llamada “post” y dentro de esta el archivo index.php y el archivo mensaje.php a continuación el código de ambos:

Codigo de index.php

<?php $this->pageTitle=Yii::app()->name; ?>

<h1>Accion post/index</h1>

<p>Desde el controlador post invocamos esta vista con la funcion index:</p>
<ul>
<li>Ruta de esta vista: <tt><?php echo __FILE__; ?></tt></li>
</ul>

Codigo de mensaje.php

<?php $this->pageTitle=Yii::app()->name; ?>

<h1>Accion post/mensaje</h1>

<p>Desde el controlador post invocamos esta vista con la funcion mensaje:</p>
<ul>
<li>Ruta de esta vista: <tt><?php echo __FILE__; ?></tt></li>
</ul>

Paso3. Si accedemos a http://localhost/tutorial/index.php?r=post/index o bien a http://localhost/tutorial/index.php?r=post/mensaje accederemos a cada una de las acciones del controlador y a cada una de las vistas. Ambas vistas hacen uso del archivo “main” dentro de “layouts” en la carpeta views el cual es nuestro template por default (mas adelante veremos un poco mas como funcionan los templates y layouts por ahora solo noten que Yii arroja un codigo html completo y nuestra vista solo completa la parte de contenido). La variable “r” significa “route” o “ruta” y es responsable de pasar a Yii el controlador/vista que queremos mostrar, en nuestros ejemplos es Controlador: Post, Vista: Index y alternando vista: mensaje.

Como se darán cuenta es muy sencillo crear controladores nuevos e ir creando sus respectivas vistas; en este ejemplo lo hicimos desde cero y creando todo el código, sin embargo Yii Framework nos evita hacer eso gracias a una herramienta de generación de codigo, asi es, no tenemos que escribir las clases de controladores y sus respectivas vistas sino que usando la herramienta automáticamente Yii hará esto por nosotros y muchas funciones mas. Aprenderemos mas sobre esa herramienta en el proximo tutorial. Actualizare el código que agregamos ahora en nuestro repositorio. http://code.google.com/p/yii-framework-tutorial/

Antes de comenzar vamos a colocar la lista de requerimientos a usar a lo largo del tutorial, el cual constara de varias sesiones.

• IDE Eclipse, considero que este entorno de desarrollo es el mejor que podemos elegir, tiene muchas opciones de personalización ademas de que se integra fácilmente con sistemas de control de versiones que usaremos en este tutorial también. Les recomiendo que revisen unos tutoriales anteriores que detallan la instalación de Eclipse y un sistema SVN.
• Obviamente necesitaremos de un servidor con soporte PHP y Base de Datos (usaremos Mysql) la solución para esta necesidad la proveerá MAMP (WAMP). No entraremos en detalles sobre como instalar este software.
• Usaremos Google Project Hosting para versionar nuestro proyecto.

Creando el repositorio

Creamos una cuenta de Google Project Hosting sugiero siempre usar repositorios para almacenar nuestros proyectos. En este repo iré subiendo el avance http://code.google.com/p/yii-framework-tutorial/

Descargando Yii

Vamos a http://www.yiiframework.com/ y descargamos la última versión del framework (v1.1.8) descomprimimos el paquete viendo que nos arroja una estructura de archivos similar a esta:

El contenido de las carpetas es muy obvio, incluyendo el framework en si ademas de una carpeta con demos, cabe señalar que la carpeta requirements contiene un verificador de requerimientos muy util a la hora de validar si nuestro entorno de desarrollo cumple con los requisitos para usar Yii. En un momento daremos un vistazo a esta carpeta, comenzemos renombrando la carpeta que contiene todo esto solamente a yii y copiemos esa carpeta dentro de nuestro folder del servidor local htdocs o www.

Una vez hecho esto accedamos a nuestro server para verificar que la carpeta yii sea accesible por medio de nuestro navegador de la siguiente forma:

Si navegamos hacia la carpeta requirements veremos la siguiente pantalla con una lista de las validaciones realizadas de la configuración de nuestro servidor:

Una ves comprobada esta validación y teniendo un entorno con los requisitos minimos para el buen funcionamiento del framework podemos comenzar a trabajar.

Generando nuestro proyecto

Una de las grandes ventajas a la hora de iniciar un proyecto con Yii Framework es su herramienta de linea de comando para automatizar tareas: yiic, esta se encuentra dentro de la carpeta framework y se usa desde la linea de comandos, usando una terminal pueden acceder a este archivo y ejecutarlo, su uso varia un poco dependiendo si usan Mac o PC a continuación pongo un ejemplo de ambos casos:

Usaremos a lo largo de estos tutoriales MAC OS X pero tratare de poner la versión en Windows para realizar las tareas donde sea conveniente. Si tienen problema con alguna versión no duden en escribir.

Abrimos una terminal en la cual realizaremos los siguientes pasos:

1. Nos dirigimos a la carpeta framework dentro de yii
2. Listamos los archivos
3. Ejecutamos php yiic
4. Al ejecutar el comando nos mostrara un error y un mensaje con los comandos disponibles, en este caso el comando que nos interesa es webapp

Creamos la aplicacion de la siguiente forma:

1. Ejecutamos el comando php yiic webapp ../../tutorial (donde ../../tutorial es la ruta y la carpeta que contendrá nuestra aplicación de tal forma que le estamos diciendo al comando webapp que cree la aplicación dos niveles arriba del nivel actual, es decir salimos de la carpeta framework, salimos de la carpeta yii y creamos el proyecto tutorial dentro de la carpeta htdocs pronto se familiarizaran con este comando, pueden hacer las pruebas que gusten).

1. El comando nos preguntara si queremos crear la aplicación y nos pondrá la ruta donde lo creara permitiendo continuar con Y o cancelar con N, tecleamos Y y damos Enter.
2. Se creara toda una serie de carpetas y al finalizar tendremos un mensaje de confirmación de creación del proyecto.

En el caso de Windows ejecutaran desde una linea de comandos yiic usando el archivo php.exe que esta dentro de la carpeta php de Wamp, comunmente la ruta sera algo como:

C:\wamp\bin\php\phpVersion\php.exe pueden navegar hasta esa carpeta en la terminal y cuando comprueben que ven el archivo php.exe ejecutar esto:

php.exe C:\wamp\www\yii\framework\yiic webapp ../../../www/tutorial

Para fines practicos en Windows es algo como:

ruta_hacia_php/php.exe ruta_hacia_yii_framework/yiic webapp ruta_hacia_htdocs/tutorial

Recuerden que webapp tratara de crear la aplicacion tutorial a partir de la ruta en que se encuentre asi que tendran que subir los niveles necesarios en la parte final del comando donde pasan el nombre de la aplicación.

Con esto tendremos el proyecto listo, pueden ir a su servidor localhost/tutorial y verificar la aplicación que esta creada y funcionando, ya tienen su primer sitio con el framework. =)

Naveguen el sitio, verán que ya cuenta con funcionalidad y un tema básico, exploren un poco el código de su aplicación, en el próximo tutorial veremos como funciona nuestra aplicación y que contiene cada una de las carpetas que se crearon.

¿Framework? ¿Porque usarlos?

Muy comunmente cuando comenzamos a aprender PHP y desarrollamos nuestras aplicaciones Web no empleamos ninguna metodología, basandonos en experiencia de otros lenguajes tratamos de organizar nuestros proyectos lo mas que podemos en base a nuestra experiencia, inclusive con el paso del tiempo logramos automatizar ciertas tareas creando algunas funciones o hasta clases propias que constantemente re-usamos en nuestros proyectos. Justo esto ultimo es la base conceptual de un framework, segun wikipedia un framework es: “una estructura conceptual y tecnológica de soporte definida, normalmente con artefactos o módulos de software concretos, con base en la cual otro proyecto de software puede ser organizado y desarrollado” y aplicado a Web un framework esta diseñado para: “apoyar el desarrollo de sitios web dinámicos, aplicaciones web y servicios web. Cuyo objetivo es intentar aliviar el exceso de carga asociado con actividades comunes usadas en desarrollos web. Por ejemplo, muchos framework proporcionan bibliotecas para acceder a bases de datos, estructuras para plantillas y gestión de sesiones, y con frecuencia facilitan la reutilización de código.”

En términos simples un framework es un conjunto de librerías, clases, objetos que nos ayudaran a desarrollar de una manera mas fácil, rápida y ordenada las distintas tareas que envuelven el desarrollo Web.

¿Porque Yii Framework?

Despues de probar Codeigniter y Zend Framework, que junto con Yii son de los mas importantes frameworks php de desarrollo Web y gracias a varios artículos en la Web me di cuenta que usando Yii todo tenia mas lógica y lo manejaba con mas intuición, Codeigniter me pareció bueno con una gran comunidad apoyandose mutuamente y una documentación clara y simple al momento de probarlo era compatible con php4 lo cual significaba una gran serie de parches para que funcionara al mas puro estilo OOP ahora segun revise ya prescindieron de su compatibilidad con php4 y ajustaron algunas caracteristicas que en lo personal no me gustaban, sin embargo ya uso Yii ahora. Zend framework por su parte es muy robusto pero la curva de aprendizaje me parecía mayor y la documentación dejaba mucho que desear, ademas de que para realizar tareas “simples” se requería mas código que con Yii.  El punto clave fue la facilidad de Yii para el manejo de Bases de Datos con Active Record y su performance que va por sobre los demás frameworks (pueden verlo aqui).

¿Que es Yii en si?

Yii es un framework de desarrollo de aplicaciones Web escrito en PHP usando el paradigma de programación OOP (POO Programación Orientada a Objetos). Algunas de sus caracteristicas principales son:

• Usa el patrón de Arquitectura de Software MVC (Modelo Vista Controlador) que separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres componentes distintos.
• Provee un Nivel de Abstracción hacia la Base de Datos (DAO, Data Access Object)  y se apoya en el patrón de arquitectura de datos “Active Record”.
• Incluye soporte para autenticación de usuarios basado en el modelo RBAC role-based access control o control de acceso basado en roles.
• Herramientas para automatización y validación de Formularios
• Widgets Ajax ready usando jQuery
  
• Avanzado control de Themes
• Web services, herramientas para simplificar la tarea de generar y consumir servicios Web en diferentes formatos.
• Internacionalización y Localización.
• Sistema de manejo de cache.
• Manejo de Errores.
• Manejo de Seguridad (Sql injection, XSS, CSRF, cookie tampering, etc.).
• Generador de código automático, muy util a la hora de implementar formularios o bien operaciones CRUD. Ademas de que el código generado cumple XHTML standards.
• Amigable y extensible, por lo cual se pueden usar sin problemas librerías de terceros como Pear, Zend, etc.

Comencemos a revisarlo, y que mejor manera que realizando un proyecto, poco a poco iremos realizando actividades que son comúnmente necesarias a la hora de desarrollar un Sitio Web. Tan pronto estén listas acá irán apareciendo las ligas que conformaran todo el tutorial.

La gestión o administración de proyectos es una disciplina fundamental para planificar y organizar a un grupo de trabajo y recursos con el objetivo de cumplir los objetivos y llevar a buen termino el proyecto, tomando en cuenta tiempos, costos, sin situaciones de presión o estrés.

En el Desarrollo de Software se convierte en una tarea que siempre se realiza (a veces inconscientemente) y casi nunca de una manera ordenada ni practica; emails perdidos, postits en la basura, desconocimiento de fechas de entrega, etc. son solo algunos tropiezos con los que nos encontramos y suficiente razón por lo cual en las empresas sean grandes o pequeñas siempre a lo largo del proceso de desarrollo se van presentando contratiempos, cuellos de botella y faltas de organización que afectan en tiempo o en calidad al proyecto.

Sin embargo no todo esta perdido, existen aplicaciones cuyo objetivo es exactamente el ayudar a evitar que el “barco se vaya a pique” muchas son las empresas que se han dado a la tarea de buscar soluciones prácticas para estas necesidades, Microsoft con software como Project ademas de soluciones de terceros desarrolladores, Apple con soluciones de terceros como Merlin y así por el estilo van surgiendo distintas apps. Recientemente están cobrando mucha importancia aplicaciones que no dependen de un sistema operativo sino que viven en un servidor Web y pueden ser usadas con la facilidad de un navegador o un dispositivo móvil.

De estas últimas hay una grán cantidad en Internet, algunos ejemplos son: Basecamp, Huddle, Wrike, Zoho, ActiveCollab, etc. Pero sin duda a la hora de evaluar la solución adecuada para nosotros notaremos algunos “detalles” en cada una de estas apps, algunas son de paga, otras no tienen herramientas que otras si, otras son gratuitas pero tienen limitantes, etc.

Teamlab

Teamlab es un portal con una aplicación para gestión de proyectos, es sin duda una de las mas completas que he visto siendo gratis, su gran soporte en idioma español le da una facilidad de uso inigualable y que te llevan de la mano coordinando un proyecto y a un grupo de trabajo para lograr los objetivos propuestos, pueden ver algunas de sus caracteristicas en el siguiente video, ademas de visitar su sitio web Teamlab en español

Teamlab es un portal comunitario empresarial, al cual toda la empresa tiene acceso (en algunas ocaciones algunos clientes) y que tiene herramientas como: la posibilidad de crear equipos, asignar tareas a equipos o personal, crear blogs, foros, compartir documentos y editarlos en línea, chat en vivo con sus compañeros de trabajo, versión móvil, calendario de actividades.

Aprovechando estas herramientas un administrador del portal funge como director del proyecto, asigna tareas, adjunta documentos y propone fechas límite de cumplimiento de estas, el personal es notificado por la aplicación e interactua con la misma para presentar informes, cumplir la tareas y lograr metas (o hitos) propuestos por el director.

Es una forma amena y controlada de trabajo en la cual todos participan haciendo sus actividades y de esta forma siendo mas eficientes. Vale la pena que tomen el tour y la descripción de la aplicación, así verán cuanta falta les había hecho en todo este tiempo.

Continuando el tutorial, terminamos con el IDE listo y ya con el proyecto en SVN, es importante recalcar que se mantendra una copia en nuestro workspace con nuestra versión y podremos hacer commits que se guardaran en el repositorio en línea en el sitio www.riouxsvn.com

• Iniciemos creando un simple archivo php en el trunk, damos clic derecho sobre la carpeta trunk y elegimos del menu contextual New > Php File nos aparecera una ventana como:

• Ingresamos un nombre al archivo y damos clic en Finish, tendremos dentro de trunk nuestro archivo y tanto la carpeta como el archivo tendran unos simbolos a los cuales nos iremos acostumbrando veamos:

1. 1. 1. Primeramente la carpeta trunk al igual que la carpeta del proyecto tendra un simbolo de “asterisco” el cual significa que dentro de esa carpeta hay un cambio pendiente de hacer “commit” al SVN
      2. El archivo newfile.php tiene un simbolo de interrogación, quiere decir que es nuevo y se desconoce la versión del archivo
      3. El area 3 solo nos muestra el contenido del archivo

• Así que hagamos nuestro primer “commit” damos clic con el boton derecho del mouse sobre la carpeta principal (en el ejemplo bensite) y del menu contextual elegimos: Team > Commit

• A continuación se nos presenta la pantalla de dialogo del commit, en la cual se nos mostrara un informe de los archivos que serán enviados al repositorio, ya sea porque se agregarón, como en este caso o bien porque fueron modificados, borrados, etc. Es importante siempre agregar un comentario al commit, ya que este comentario lo verán los participantes del proyecto y ayudará a llevar un control de los cambios y el porque fuerón realizados.

• Damos clic en ok y el envío sera realizado al repositorio (ademas de que seguiremos conservando nuestra copia local). Notemos que los iconos de cambios por realizar (el asterisco) y el archivo por versionar (signo de interrogación) desaparecieron.
• Si revisamos via web nuestro repositorio podremos ver la versión del proyecto, los cambios y los comentarios, así como quien realizo el cambio y en que momento

De esta forma comenzaremos nuestro proyecto el cual estara siempre en el repositorio, lo importante aquí es que muchos usuarios pueden repetir el proceso de conectarse al SVN y estos descargaran la versión mas reciente del proyecto, pudiendo de esta forma participar creando archivos y modificando archivos existentes, pero siempre concentrando los cambios en el repositorio.

Hay varios puntos a contemplar de aquí en adelante sobre funcionalidades que nos da un SVN por ejemplo:

• Podemos regresar a distintas versiones de un archivo, dando clic sobre el archivo con el boton derecho y en el menu contextual eligiendo: Team > Update to version… ahí se nos presentara un historial de los cambios que ha sufrido un archivo.
• Podemos ponerle candado a un archivo para que nadie más pueda hacerle un commit dando clic sobre el archivo con el boton derecho y en el menu contextual eligiendo: Team > Lock… ahi se nos pedira una razon por la cual ponemos el candado de esta forma no perderemos cambios ni entraremos en conflictos cuando mas de un usuario quieren modifica el mismo archivo a la vez.
• Podemos dando clic sobre el archivo con el boton derecho y en el menu contextual eligiendo: Compare with…  comparar un archivo contra sus versiones anteriores para ver que cambios ha sufrido a lo largo del desarrollo

Las posibilidades son muchas, basta con ir probandolas, ahora que tienen su repositorio porque no juegan con el y postean sus dudas aca.

En el último Post comentaba las ventajas de usar un SVN para desarrollo de aplicaciones, a continuación veremos como sacar provecho a esta herramienta con este pequeño tutorial de uso de Subversion. Usaremos el IDE Eclipse para Php. (el tutorial esta hecho en Mac, pero existen versiones de eclipse para Windows y Linux) El tutorial esta hecho en 2 partes, la primera es la instalación y puesta a punto y la segunda un poco del uso del Svn, commits, etc. (la segunda parte aquí)

Instalando Eclipse (no ahondaremos mucho en el uso de Eclipse, solo lo básico)

• Vamos a el sitio: http://www.eclipse.org/downloads/packages/eclipse-php-developers/heliossr2 y descargamos la versión para nuestro sistema operativo.
• Descomprimimos el paquete y nos arrojara una carpeta que contiene la aplicación, debe verse de esta forma:

• Lo recomendable es copiar la carpeta eclipse a sus aplicaciones o carpeta de programas y listo, podemos ejecutar la aplicación Eclipse pueden crear accesos directos.
• Ejecutamos Eclipse y veremos el entorno de desarrollo:

• Ahora necesitamos instalar el Plugin para que tengamos soporte SVN, vamos a esta direccion http://subclipse.tigris.org/ y una vez estando en el sitio damos clic en “Download and Install” y buscamos la versión para Eclipse en este caso la mas reciente:

Copiamos la dirección, http://subclipse.tigris.org/update_1.6.x no damos clic en ella ya que el proceso de descarga e instalación se hace desde Eclipse.

• Ya con la dirección http://subclipse.tigris.org/update_1.6.x nos dirigimos a Eclipse y vamos al menú Help > Install New Software… damos clic y nos aparecera la siguiente ventana en la cual pondremos el sitio de subclipse.

• En esta ventana en el primer campo “Work with” pegamos la dirección de subclipse dando clic en el boton Add, le podemos poner un nombre a este sitio, puede ser Subclipse y damos OK.
• La ventana nos cargara el software que podemos instalar en una lista en forma de arbol, de la cual elegiremos tal como aparece en la imagen anterior y damos clic en Next.
• Eclipse calculara las dependencias necesarias y nos mostrara un resumen del software a instalar, ojo: nos pedira aceptar términos de licencia.

• Y damos clic en Finish, Eclipse descargara e instalara todo el software necesario y al finalizar pedira reiniciar Eclipse (si durante el proceso pide mas mensajes de confirmación o autorización los aceptaremos)
• Al reiniciar Eclipse estaremos listos para trabajar con SVN ahora viene lo más importante:

Tener un Repositorio SVN disponible

• Existen muchas opciones de repositorios Github, Google Code, etc. inclusive existen algunos con costo, dependiendo de nuestras necesidades elegiremos el adecuado, ya que muchos solo permiten el alojamiento de proyectos Open Source. Les recomendare el siguiente: http://www.riouxsvn.com/ el cual es un sitio de alojamiento de proyectos que permite tener repositorios comerciales y por lo tanto cerrados a los ojos del público de forma Gratuita, personalmente lo he usado y me ha funcionado bastante bien.
• Así que abran una cuenta en el sitio y una vez logeados verán la siguiente pantalla:

• Una ves adentro tenemos nuestro Dashboard el cual nos presentara un resumén de la última actividad de la cuenta y los repositorios que tengamos, vamos a crear nuestro primer repositorio:

• Ingresamos el nombre del Repositorio asi como el fragmento del url para identificarlo, Next step

• Podríamos importar datos de otro proyecto, en este caso iniciamos uno desde cero, Next step

• Damos permisos a usuarios, si tuvieramos mas usuarios que participan en el proyecto aquí es donde les dariamos privilegios (que esa es la idea de un repositorio SVN trabajo en equipo ) pero no se preocupen mas adelante pueden otorgar permisos a usuarios que se sumen al desarrollo. Damos clic en Set permissions

• Listo, damos clic en Confirm Creation y tendremos listo nuestro repositorio, este último paso nos regresara al Dashboard donde tendremos ya listado nuestro repositorio, damos clic en el y nos encontraremos en la siguiente pantalla:

• Esta pantalla se ira actualizando conforme vayamos creando archivos, podemos dar clic en la parte derecha en “Manage Team” para agregar usuarios y permisos al proyecto y el punto mas importante, en la barra del lado derecho tenemos la URL del SVN algo como: http://riouxsvn.com/svn/bensite <- aquí el nombre que eligieron para su repositorio.
• Copiamos esa url completa y regresamos a Eclipse para conectarnos a nuestro repositorio.
• En Eclipse damos clic en el menú File > New Project… y nos aparecera algo como:

• Gracias a que instalamos SVN nos aparece la carpeta SVN y de ahí elegimos “Checkout Projects from SVN” y damos clic en Next
• Nos aparecera la siguiente pantalla en la cual elegiremos “Create a new repository location” y damos next

• Al dar clic en siguiente nos solicitara el url del repositorio, ahi pegamos el url de riouxsvn

• A continuación nos solicitara autentificarnos, así que ingresaremos nuestro username y password de nuestra cuenta de riouxsvn.com

• Damos clic en OK y Eclipse nos traera el repositorio, seleccionamos el nodo padre (el url) y damos clic en Next

• Se nos presentara la siguiente pantalla en la cual nos preguntara que hacer con los archivos, seleccionamos la opcion “Check out as project in the workspace” con ello decimos que se creara una carpeta en nuestras carpetas de trabajo configuradas en Eclipse y ahi se descargara el proyecto, las demas opciones las dejamos como se muestra a continuacion y damos clic en next.

• Se nos pedira la ruta de trabajo en este caso yo tengo configurado Eclipse hacia mi wwwroot de WAMP server, uds pueden elegir su carpeta publica del servidor que usen si es que tienen, o la carpeta que gusten.

• Damos clic en Finish y Listo tendremos el proyecto via SVN en nuestra PC (les aparecera un mensaje que dice que al parecer estamos recuperando el proyecto, etc… damos clic en Yes)
• Tendremos ahora en nuestro entorno el proyecto del lado izquierdo y las carpetas por default que nos creo el repositorio, ahora estamos listos para codificar, crearemos nuestros archivos en la carpeta trunk.

la segunda parte aquí

Casi siempre, como desarrolladores nos vamos haciendo de técnicas, usos, estilos propios a la hora de trabajar. Cada quien considera que tiene su mejor forma de organizarse y administrar todos los elementos de un proyecto. Sin embargo que hay cuando se tiene que trabajar en un proyecto formando parte de un equipo de desarrolladores, es aquí cuando muchas veces nos encontramos con problemas de comunicación y control del proyecto, ocasionando esto retrasos, perdida de información  y en general un caos por falta de organización.

Es en este punto donde un Sistema de Control de Versiones nos es muy útil, pero que es exactamente un “Subversion” o también conocido como SVN.

Son aplicaciones, programas o software que se encarga de llevar el control sobre los cambios que se van realizando sobre los elementos de un proyecto, cada archivo, imagen, carpeta, etc. va formando parte de un sistema y es relacionado a una versión.

El modelo Subversion es centralizado es decir que tiene un repositorio central que almacena todo el código y los diferentes cambios que va sufriendo el proyecto en su etapa de desarrollo, dando la oportunidad de regresar o ver versiones anteriores del proyecto o de determinado archivo. A este repositorio los usuarios (programadores)  con acceso se conectan y pueden descargar la mas reciente versión del proyecto, así como hacer cambios en este código de tal forma que los cambios se vean reflejados en todos los usuarios.

De esta forma solo existe un lugar en el cual se tiene el último código fuente y todos los programadores hacen cambios o agregan mas archivos y estos se concentran en el repositorio evitando perdida de información. Inclusive SVN tiene herramientas muy utiles como por ejemplo:

• Permite bloquear archivos por un usuario, para evitar que otro usuario pueda hacer uso de el y evitar así perdidas de codigo
• También permite hacer un “merge” o union de 2 diferentes versiones, suponiendo que el usuario “A” cambio la linea 1 del archivo “X” y el usuario “B” cambio la línea 3 del mismo archivo “X”, se hace un merge para obtener una tercera versión del mismo archivo que tiene el cambio realizado por ambos usuarios
• Inclusive se puede regresar un archivo o más a una versión anterior del mismo o compararlo contra una versión atras para ver que cambios sufrió.
• Cada usuario que hace un cambio en archivos y realiza un “commit” (acción de actualizar los archivos al repositorio) tiene la oportunidad de incluir un comentario con información que crea relevante de los cambios que hizo, permitiendo así tener un mejor control de cambios y versiones.
• Evita la perdida de archivos ya que a pesar de que los usuarios (programadores) tienen una versión del proyecto en sus computadoras siempre existe la versión del repositorio.
• Es muy fácil agregar mas usuarios, ya que usando su aplicación SVN preferida (en mi caso Eclipse con el plugin SVN) simplemente se conectan al repositorio y se descargan la última versión del proyecto.

Tanto en proyectos personales (freelance) como en el trabajo acostumbro usar un Sistema de Control de Versiones y siempre mantengo el repositorio en linea gracias a www.riouxsvn.com que es un proyecto que provee SVN de forma gratuita.

Estoy trabajando en un tutorial sobre como usar un SVN para un proyecto. Pronto lo verán aquí.

Recientemente Google lanzo su Api “Google Font” la cual nos permite usar en nuestras páginas web fuentes especiales, más bonitas, mas legibles, totalmente personalizables, etc. sin temor de que nuestro visitante no la tenga instalada en su sistema. Todo esto sin recurrir a ciertos hacks como la generación de imagenes o archivos Flash.

Como funciona esta Api?

1.- Solicitemos la fuente deseada

<!-- Donde en el parametro family va la fuente que necesitamos -->

<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css' />

Existe una lista de fuentes aquí

2.- Usando CSS ya disponemos de la fuente

body{
font-family:'Droid Sans', Lucida Grande, Verdana, Sans-serif;
}

En caso de que el navegador no soporte “Google Font” simplemente nos mostrara la siguiente fuente disponible. Pueden ver la lista de navegadores disponibles en las FAQ del sitio.

Deben de tomar en cuenta que el comportamiento de esta Api varía dependiendo del navegador, en Firefox primero se renderea el texto usando una fuente disponible del sistema (lo cual me parece genial) mientras se carga la fuente del sitio de Google, en otros navegadores los textos no se renderean ( ={ ) hasta cargar por completo la fuente. Ademas notemos que se agregara peso al sitio por la descarga de la fuente a usar, ustedes evalúen si usan esta Api o no. Yo creo que si valen la pena unos kb’s mas por la satisfacción visual de nuestros visitantes.

A continuación algunas de las herramientas indispensables para desarrollar en sus rubros correspondientes:

En cualquier sistema operativo puedes desarrollar Web ya que existe software multiplataformas o bien hay alternativas, en mi caso mucho tiempo use Windows y no estaba mal; su version XP es muy estable y manteniendolo limpio y actualizado creo que no da problemas.

Ahora uso Mac OS X en su versión Snow Leopard y definitivamente no lo cambio ya que la facilidad de uso del sistema es lo que principalmente me a hecho quedarme con este S.O.

A final de cuentas cada quien puede usar el Sistema que le agrade mas o bien el que tenga a la mano, ya que con practica y adaptabilidad todo mundo le saca el provecho requerido.

Concentremonos en Desarrollo Web, excluyendo un poco contenidos como multimedia o flash, vamos al html, css, php, etc.

Editor HTML y CSS ?

Considero que Adobe Dreamweaver es una herramienta muy completa para estas tareas, si estas maquetando tu sitio y haciendo el diseño Html, Dreamweaver te hará la vida mas facil. Ademas de que te permitirá tener tu código mas claro y ordenado.

Editor PHP?

Creo que el mejor editor de desarrollo que existe es Eclipse -www.eclipse.org- en su version Galileo que es la mas reciente podemos crear proyectos Php y “Compilarlos” o hacerles un Build de forma que si nuestro proyecto consta de muchos archivos, clases, objetos, funciones, etc. Eclipse nos ayude a la hora de programar activando opciones de autoacompletar o informándonos sobre los parámetros que necesitan las funciones o los tipos de datos de las variables, etc. Ademas también nos informa de errores de código y nos los subraya de forma que errores “de dedo” que a veces nos quitan tiempo no ocurran nunca mas.

Eclipse no es un editor exclusivamente Php, también funciona para html, css, java, js, etc. Así que puedes editar todo tu proyecto Web con esta herramienta, pero falta lo mejor… es completamente Gratis.

Framework PHP ?

Muchos aun dudan de la necesidad de usar o no un Framework y creo que esto se debe en ocasiones al tamaño de los proyectos, sin embargo creo que para estandarizar tu codigo y mejorarlo es necesario usar un Framework. En este sitio http://www.phpframeworks.com/ se hace una comparación de la mayoria de Frameworks que existen por ahi, aqui va en cuestion de gusto y practica, el Framework que les recomiendo es sin duda el de Zend.

Zend Framework es gratuito y (una vez que lo entiendes) facil de usar, te simplifica el trabajo y te ayuda a generar codigo seguro, ya tiene mas de diez millones de descargas y en su sitio tienen una guia de desarrollo y una gran cantidad de ejemplos. Si van por este framework, no pueden ir mal: http://framework.zend.com/

Extras

Cliente FTP: Transmit, Filezilla

Administrador de Base de Datos: En este caso uso Mysql y el administrador que prefiero es Mysql Administrator el cual tiene todo lo necesario para crear y administrar nuestras bases de datos.

Navegador: Firefox con el Add-on Firebug

Servidor de Pruebas: MAMP

Cual es el software que usan ustedes? Debería cambiar tajantemente alguno?