Entorno de desarrollo web perfecto en Mac Os X.

Es este tutorial, veremos como montar un entorno de desarrolo perfecto usando Mac Os X, enfocado a desarrolloar webs usando PHP como lenguaje de lado del servidor. Intentaremos usar aplicaciones gratuitas en la medida de lo posible… pero en ocasiones (por usabilidad, y por tal grado de estandarización) tendremos que ir a morir a aplicaciones de pago.

Firefox + Firebug

Para mi gusto, la mejor opción para ver que está fallando en la maquetación que estamos haciendo, ver y debugear errores javascript, inspeccionar el DOM de la página en la que estamos trabajando… y un largo etcétera. Los demás navegadores ofrecen alternativas similares, pero bajo mi punto de vista, ninguna es tán completa ni versatil. Creo haber leido que firebug está disponible para safari 5, pero prefiero dejar safari lo más liviano posible para navegar por la red y firefox para tareas de desarrollo.

Obviamente, tendremos instalados todos los navegadores posibles para testear al máximo nuestros proyectos. No sería mala idea tener una máquina virtual para poder ejecutar windows XP y windows 7 con nuestro “querido” explorer, que seguro nos dará alguna sorpresa en cada desarrollo.

Descarga Firefox.

Descarga Firebug.

Apache, MySql y PHP

Usaremos MAMP, que instala de un tirón y de forma automática Apache (servidor web), MySql (servidor de base de datos) y PHP (lenguaje interpretado del lado de servidor orientado al desarrollo web).

Una vez instalado, entramos en aplicaciones/MAMP e instalamos el widget, de forma que desde el dashboard podamos iniciar y parar los servicios rápida y cómodamente.

He elegido la versión gratuita. Sinceramente, con lo que ofrece, es suficiente para el desarrollo web, en serio.

Las webs, las iremos poniendo en aplicaciones/MAMP/htdocs/

Nota: La versión de Apache incluida con MAMP está configurada para trabajar en el puerto 8888, pero esto lo podemos cambiar en conf/apache/httpd.conf y poner el puerto que deseamos (seguramente, el 80 no?).

Descarga MAMP aquí.

Netbeans y Coda

Me encanta la versión para PHP de netbeans. Te ofrece todo lo que te puede ofrecer el mejor editor de código fuente, totalmente orientado a php, y encima gratis. Tiene un buen autocompletado en dicho lenguaje, podemos agregarle snippets de código para ir más rápido… en serio, pruébalo, es genial.

Por otro lado, me encanta también Coda. No creo que esté a la altura de netbeans si miramos el editor de código, pero supera a este en otra muchas cosas, como el modo de edición CSS, la gestión de sitios, el modo edición con la vista previa…. Coda también es genial, pero a diferencia de netbeans, es de pago. No puedo dejar de usar ninguno de los dos, así que me quedo con ambos.

Como he dicho, estos dos programas son mi elección. Hay muchísimas alternativas, tengo pendiente ponerme con TextMate por que no paran de recomendármelo. También podemos usar espressso en vez de coda, como alternativa a netbeans podríamos citar, por ejemplo, Aptana. También tenemos smultron, que es gratuito.

Y no, no hay Dreamweaver. Maquetando en código es más fácil, cuando tengamos un problema, solucionarlo, ya que el código lo hemos escrito nosotros. Además, pondremos las etiquetas que queramos, donde queramos. No miraremos el código y de repente tendremos etiquetas en blanco, parrafos para los espacios, etc. etc. También nos quitamos de encima un programa que es carísimo y lentísimo. Y lo más importante, la página web la hacemos nosotros, y aprendemos en el proceso. Me encanta cuando alguien hace una web así y cuando hay algún problema de maquetación se queda a cuadros.

Descarga Netbeans.

Descarga Coda.

Photoshop

No hay mucho que comentar de photoshop, es un standard, y lo vamos a usar todos los días… lástima el precio que tiene. Como alternativa (de uso, no de precio) tenemos Fireworks, también de Adobe.

Como alternativa gratuita podemos poner GIMP, y como alternativa más económica pero con grandes funcionalidades tenemos Pixelmator.

Descarga Photoshop.

Extras

No debería llamarlo extra, ya que para mí es obligado: Dropbox. El que no conozca dropbox, ya está tardando en leer qué es en su página web.

Dropbox nos va a dar mucho juego, primero, nos olvidamos de las copias de seguridad. El disco externo con Time Machine siempre lo voy a tener enchufado, pero con dropbox voy a tener absolutamente todas las versiones de todos los archivos que estoy editando (esto también lo hace automáticamente netbeans con el “local history”), pero además las tenemos online. Si tenemos varios ordenadores con dropbox, se actualizan todos automáticamente, lo podemos instalar en el móvil, y si nos hace falta algo cuando estmos fuera de casa lo tenemos a mano….

La carpeta de dropbox no está dentro de la carpeta en la que apache sirve las páginas web. Yo lo soluciono creando una carpeta “webs” dentro de dropbox, y luego creo un enlace simbolico a dicha carpeta en aplicaciones/mamp/htdocs/dropbox, de forma que, si empiezo un nuevo proyecto, lo creo dentro de dropbox en webs/proyectonuevo, y podré acceder a el en localhost/dropbox/proyecto nuevo…. en todos mis ordenadores!

Dropbox es, lo uses para lo que lo uses, un Must Have en toda regla, así que si no lo tenéis, ya estáis tardando. Ah, la cuenta gratuita es de 2 gigas, suficiente para los desarrollos webs que tengamos en marcha.

Descarga dropbox aquí.