Javascript es un leguaje de scripting interpretado orientado a pseudo-objetos, esto es, que no existe herencia, aunque se puede conseguir clonando una clase y añadiendo más métodos o propiedades. Casi todos los navegadores existentes pueden interpretar Javascript, ya que es de hecho un estándar: ECMAScript (ECMA = European Computer Manufacturers Association).

Pero sólo con el lenguaje JavaScript no podremos hacer nada en una página web. También necesitaremos el DOM (Document Object Model). El DOM es una estructura de objetos que representa absolutamente todos los elementos que componen una web, y mediante él conseguiremos acceder a información de la página web, añadir nuevos elementos, o modificarlos.

Todos estos métodos pertenecen a objetos del DOM: window, document , y element.

Función1: getElementById()

Uso: var elemento = document.getElementById(id);

Este método pertenece al objeto document. Con él obtendremos el objeto que hace referencia al elemento con un id concreto. Por ejemplo, queremos obtener el objeto del elemento “status”:

<div>
      <span id=”status”>Hola mundo...</span>
</div>
<script type=”text/javascript”>
// Obtenemos el elemento “status”
var el = document.getElementById(“status”);
// Mostramos mediante una alerta el contenido del elemento
alert(el.innerHTML);
</script>

Función 2: getElementsByTagName()

Uso:var array_elementos= elemento.getElementsByTagName(tag);

Sirve para obtener un array con todos los elementos con un tag concreto que están contenidos dentro de un elemento. Veamos una ejemplo. Queremos cambiar el color del texto de todos los elementos con tag “A” contenidos dentro del elemento con id “links”:

<a href=”/”>Home</a>
<div id=”links”>
      <a href=”http://google.com”>Google</a>
      <a href=”http://ubuntu.com”>Ubuntu</a>
      <a href=”http://debian.org”>Debian</a>
</div>
<script type=”text/javascript”>
// Obtenemos el elemento con id “links”
var el = document.getElementById(“links”);
// Ahora obtenemos todos los elementos con tag A que hay
// dentro del elemento 'el'
var as = el.getElementsByTagName(“A”);
// Y finalmente recorremos el array de elementos para
// cambiarles el color a cada uno
for (var i=0; i<as.length; i++) {
      as[i].style.color = '#000'; // negro
}
</script>

Función3: join()

Uso: var string = array.join(string);

El método join() pertenece al objeto Array (todos los arrays en JavaScript son un objeto Array), y nos servirá para unir todos los elementos de un array para forma una cadena de texto. Es el equivalente en PHP a implode(). Ejemplo: Queremos unir todos los nombres de un array mediante comas:

// Creamos el array de nombres
var nombres = ['Luis','Javier','Sancho','Roberto','Rafael','Manuel'];
// Unimos todos los elementos separándolos por comas
var juntos = nombres.join(“, “);
// Y lo mostramos
alert(juntos); 

Función4: split()

Uso:var array = string.split(string);

Al igual que join(), split() también es un método del objeto Array, aunque sirve exactamente para lo contrario: dividir una cadena de texto en un array. Siguiendo con el ejemplo anterior:

var juntos = “Luis, Javier, Sancho, Roberto”;
var nombres = juntos.split(“, “);
for (var i=0; i

Truco: Usados ambos métodos conjuntamente podremos crear una función para sustituir un texto por otro en una cadena dada:

function str_replace(cadena, cambia_esto, por_esto) {
      return cadena.split(cambia_esto).join(por_esto);
}
alert(str_replace('Hola mundo!','mundo','world')); 

Función5: addEventListener() / attachEvent()

Uso: Internet Explorer: elemento.attachEvent(“on”+evento, funcion);
Resto de navegadores: elemento.addEventListener(evento, funcion, false);

Ambos métodos hacen exactamente lo mismo, sólo que, como ocurre en otros cientos de ocasiones, Microsoft usa su propia implementación del DOM. Con este método añadiremos eventos a cualquier elemento de la página web, tal como onclick, onmouseover, onmouseout, etc.

Veamos un ejemplo. Crearemos una función para la abstracción de navegadores, es decir, para que funcione tanto en IE como en Firefox o cualquier otro navegador; y después añadiremos el evento onclick a varios elementos DIV para que muestre su contenido mediante una alerta al hacer clic sobre ellos.

<div id=”frases”>
      <div>Hola mundo!</div>
      <div>Foo bar</div>
      <div>Lorem Ipsum</div>
</div>
<script type=”text/javascript”>
// Creamos la funcion para añadir eventos
function nuevo_evento(elemento, evento, funcion) {
      if (elemento.addEventListener) {
            elemento.addEventListener(evento, function, false);
      } else {
            elemento.attachEvent(“on”+evento, function);
      }
}
// Obtenemos los elementos DIV a los que queremos añadir nuestro evento onclick
var divs = document.getElementById(“frases”).getElementsByTagName(“DIV”);
// Recorremos todos los divs
for (var i=0; i<divs.length; i++) {
      // Añadimos el evento onclick al div
      nuevo_evento(divs[i], “click”, function(){
            // Hacemos que muestre el contenido del DIV
           alert(this.innerHTML);
      });
}
</script>

Cuando hagamos clic en uno de los DIV, se nos mostrará una ventana de alerta con su contenido.

Función6: focus()

Uso: elemento.focus();

Con este método conseguiremos pasar el foco a un elemento de un formulario. Ejemplo:

form>
      <input type=”text” id=”nombre” value=”Javier” />
      <input type=”text” id=”apellidos” value=”Perez” />
</form>
<a href=”#” onclick=”document.getElementById(“nombre”).focus()”>Nombre</a>
<a href=”#” onclick=”document.getElementById(“apellidos”).focus()”>Apellidos</a> 

Función7: createElement() / appendChild()

Uso: var elemento = document.createElement(tag);

Con éste método del objeto document crearíamos un nuevo elemento con un tag determinado. Ejemplo: var div = document.createElement('DIV');

Uso: elemento1.appendChild(elemento2);

Con este método añadiremos el elemento “elemento2” a “elemento1”. En el siguiente ejemplo, añadiremos elementos a una lista de forma dinámica:

<input type=”text” id=”texto” />
<input type=”button” value=”Crear” onclick=”crear()” />
<ul id=”lista”></ul>
<script type=”text/javascript”>
function crear() {
      // Obtenemos el valor entrado en la caja de texto
      var valor = document.getElementById(“texto”).value;
      // Creamos un nuevo elemento LI
      var li = document.createElement(“LI”);
      // Añadimos el valor introducido al nuevo elemento
      li.innerHTML = valor;
      // Añadimos el elemento LI a la lista UL
      var ul = document.getElementById(“UL”);
      ul.appendChild(li);
      // Vaciamos la caja de texto
      document.getElementById(“texto”).value = “”;
}
</script> 

Función8: removeChild()

Uso: elemento.removeChild(hijo);

Este método es el usado para eliminar elementos. Se elimina el elemento hijo del objeto. Si queremos eliminar un objeto concreto, tendremos que hacerlo de la siguiente manera:

// Obtenemos el elemento
var el = document.getElementById(“elemento-a-eliminar”);
// Obtenemos el padre de dicho elemento
// con la propiedad “parentNode”
var padre = el.parentNode;
// Eliminamos el hijo (el) del elemento padre
padre.removeChild(el);

Función9: setTimeout() / setInterval()

Uso:var temporizador = setTimeout(funcion, milisegundos);
var intervalo = setInterval(funcion, milisegundos);

Ambos métodos (objeto window) nos sirven para ejecutar código javascript cada x milisegundos, bien para que se ejecute una sóla vez (setTimeout) o bien para que se ejecute ilimitadamente (setInterval). Ambos se pueden cancelar mediante clearTimeout(temporizador) y clearInterval(intervalo). Veamos un ejemplo, donde se muestra la hora y fecha del sistema cada segundo en un DIV:

<div id=”fecha”></div>
<script type=”text/javascript”>
      setInterval(function(){
            document.getElementById(“fecha”).innerHTML = new Date();
      },1000);
</script> 

Función10: alert() / confirm() / prompt()

Uso: alert(mensaje);
var resultado = confirm(mensaje);
var resultado = prompt(mensaje, valor);

Con estos métodos (objeto window) mostraremos ventanas modales al usuario. Con alert() simplemente, como hemos visto en otros puntos, mostraremos un mensaje. Con confirm() haremos exactamente lo mismo, pero además obligará al usuario a seleccionar entre dos opciones, una positiva y otra negativa, que se devolverá como parámetro (boolean). Y con prompt() pediremos al usuario que introduzca un texto en una ventana modal. Veamoslo con un ejemplo:

// Pedimos al usuario que introduzca su nombre
var nombre = prompt(“Introduzca su nombre”);
// Pedimos confirmación
if (confirm(“¿Seguro que su nombre es ”+nombre+”?”)) {
      // Respuesta afirmativa...
      alert(“Hola ”+nombre);
}

confirm() es muy útil para confirmar clics en enlaces comprometidos, que hagan operaciones críticas como eliminación de datos.

<a href=”http://miweb.com/delete/record?id=123” onclick=”return confirm('¿Está seguro?');”>Eliminar registro</a>

Existen muchos más métodos a nuestra disposición, aunque hay que tener en cuenta que Internet Explorer no cumple el estándar ECMAScript/DOM (entre otros tantos estándares web), y puede que un método no funcione igual en IE que en Firefox o Safari.

Aprenderse el DOM es fundamental para poder llegar a ser un buen profesional, pero por suerte para nosotros existen librerías Javascript que nos harán la vida mucho más fácil, como jQuery, la sensación del momento entre los programadores Javascript.

Referencia

• Manual de referencia del DOM de Gecko

En el desarrollo web tenemos unas herramientas para el diseño, otras para la maquetación, otras para la programación, y para la depuración. Todas las herramientas que usemos son muy importantes, desde el Sistema Operativo hasta el comando más insignificante, y por ello debemos elegir la más adecuada a nuestras necesidades y capacidades.

Sistema Operativo

Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo, como es lógico, y su elección no es tan trivial. Hay que tener en cuenta las aplicaciones de las que dispone el Sistema Operativo y sus costes.

Por ejemplo, tenemos Microsoft Windows, cuyas aplicaciones son muy caras, como Photoshop, Dreamweaver, Fireworks, ASP .NET… Y por otro lado tenemos GNU/Linux, con GIMP, Inkscape, Amaya, Aptana, PHP (aunque todos ellos también están disponibles en Windows).

Otra característica a tener en cuenta es las facilidades que el Sistema Operativo aporta al desarrollador, y en este sentido GNU/Linux se lleva de calle a Windows. Y esto es porque Windows no fue diseñado para los desarrolladores, sino para personas que no tienen muchos conocimientos sobre informática.

Y por el contrario GNU/Linux fue creado por desarrolladores, y para desarrolladores; y por lo tanto en GNU/Linux podemos encontrar infinidad de herramientas que nos harán la vida mucho más fácil, que además son libres.

Fases de desarrollo de una web

Para elegir las herramientas a utilizar, antes debemos identificar las fases del proceso que forman el ciclo de vida de un desarrollo web.

• Diseño:

  el diseño consiste en crear esbozos de la web final mediante una herramienta gráfica, como Photoshop, GIMP o Inkscape.

• Maquetación HTML/CSS:

  la maquetación consiste en convertir los esbozos creados en la fase anterior en plantillas HTML, su respectiva hoja de estilos, y las imágenes usadas. Es posible saltarse la fase anterior para comenzar directamente con esta fase, dependiendo de si dominamos herramientas como Photoshop o no.

• Programación cliente:

  la programación cliente consiste básicamente en Javascript. Una web puede no tener necesidad de hacer programación cliente, como puede ser una pequeña web corporativa con poca información estática, o puede que requiera enormes esfuerzos en esta fase, como ocurre con los proyectos Web 2.0.

• Programación servidor:

  en esta fase, que se desarrolla junto con la anterior, crearemos la aplicación web en un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc.

• Depuración:

  esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas unitarias, aserciones, trazas, etc.

• Pruebas en local:

  en nuestro servidor local haremos todas las pruebas posibles.

• Subir ficheros al hosting:

  una vez nuestra web esté completada y bien testeada en nuestro servidor local (desarrollo), la subiremos al servidor del hosting elegido (producción). Dependiendo del hosting, podremos usar FTP, SFTP (SSH), WebDAV, o incluso Subversion. Yo aconsejo usar Subversion si así lo permite el servidor, por su comodidad y rapidez, además de por su principal utilidad, que es la de control de versiones.

• Pruebas en hosting:

  realizaremos las últimas pruebas en el servidor del hosting para comprobar que el cambio de servidor no ha afectado a nada. Para evitar problemas, nuestro servidor local debe tener exactamente la misma configuración que el servidor del hosting.

Herramientas: desarrollo en PHP

A continuación enumeraré las herramientas básicas para el desarrollo de una web en PHP, en sus diferentes fases de diseño e implementación.

Fases: diseño y maquetación

• Adobe Photoshop:Esta aplicación sólo está disponible en Windows, y es el más caro, aunque es el más usado y gracias a ello dispone de una gran comunidad de usuarios con los que poder contar ante cualquier problema. Con él crearemos el diseño, así como las imágenes que usemos en la maquetación.
• GIMP: Es el equivalente de software libre más próximo a Photoshop. Al ser libre es posible conseguirlo gratuitamente, y de hecho cualquier distribución GNU/Linux lo incluye. Al igual que en Photoshop, con él podremos crear el diseño y las imágenes de la maquetación HTML. También disponible en Windows

Fase: maquetación

• Inkscape: El equivalente en Windows es Adobe Fireworks. Es un excelente editor gráfico vectorial con el que poder crear iconos, banners, y demás dibujos de forma muy fácil y sencilla, incluso para aquellos que no tengan demasiados conocimientos en edición gráfica digital.
• Adobe Fireworks: El editor de gráficos vectoriales más fácil de usar que he tenido la oportunidad de usar, aunque no lo eché de menos cuando descubrí Inkscape. Al igual que su compañero Photoshop es muy caro, y más aún si tenemos una gran alternativa gratuita como es Inkscape.

Fases: maquetación, programación cliente

• Dreamweaver, Aptana, Amaya: Estas herramientas las describí en mi anterior artículo sobre los principales editores web del mercado, así que os remito a él para más información. Con ellos crearemos el código HTML/CSS (maquetación), siendo Aptana la opción más profesional para la programación cliente (Javascript).

Fase: programación servidor

• Zend Studio: Sin duda el mejor IDE existente en el mercado para desarrollo web con PHP. Es comercial, aunque no demasiado caro teniendo en cuenta la excelente herramienta que es. Además es posible descargarlo desde la web de Zend para probarlo durante 30 días.

  Con él crearemos fácilmente la aplicación web en PHP. Aunque podremos usar igualmente cualquier editor. Una muy buena alternativa es Eclipse con el plugin PHP.

  Otra aplicación muy útil que está muy ligada a Zend Studio es Zend Platform, un módulo para Apache que permite depurar una web directamente en el navegador (Internet Explorer o Firefox), además de otras funciones más complejas, como alertas configurables para que nos envíe un email por cada error ocurrido en la web, o cuando un script sobrepase un tiempo determinado de ejecución, por ejemplo.

Fase: prueba local

• Apache Instalar un servidor web Apache en la máquina donde desarrollamos es fundamental. De esta manera haremos pruebas rápidamente: editamos un fichero PHP, vamos al navegador, actualizamos, y vemos los cambios.

Fases: pruebas en local, depuración

• Firefox / Firebug / Web Developer Extension: Firefox es sin duda la mejor herramienta creada en los últimos tiempos para los desarrolladores web, y con Firefox sus dos extensiones más útiles para nuestra profesión: Firebug y Web Developer.

  Con Firebug podremos depurar Javascript, editar HTML y CSS en la misma página para ver los cambios en tiempo real, consultar los tiempos de carga de la página en conjunto, de las imágenes, javascripts, hojas de estilo, etc, así como sus tamaños, etc. Y Web Developer nos ofrece herramientas muy útiles como ver las cookies de la web, ocultar imágenes, cambiar el tamaño del navegador a resoluciones estándar, etc.

Subir ficheros al servidor del hosting

Una vez hayamos concluido todas las fases anteriores, y nuestro proyecto esté listo, deberemos subirlo al servidor del hosting.

La herramienta a utilizar dependerá de las opciones que nos ofrezca el hosting, que desgraciadamente en la mayoría de los casos es solamente el antiguo FTP. En Dreamweaver y Zend Studio tenemos un cliente FTP y SFTP (SSH), y la tarea consistirá simplemente en configurar el FTP y copiar y pegar los directorios que queramos subir.

Confío en que esta guía sirva de ayuda a la hora de afrontar un desarrollo web. Hay que tener muy en cuenta las fases de desarrollo y usar las herramientas adecuadas: la que nos resulte más fácil de usar, la más económica, la que mejor conozcamos, etc.

Son muchos los editores web existentes en el mercado (Dreamweaver, Front Page, CoffeCup HTML Editor, Homesite) cada uno con sus propias peculiaridades, aunque en realidad no son muy distintos unos de otros.

Las características principales que observamos en todos ellos son edición WYSIWYG, cliente FTP, control de versiones, autocompletado de código, resaltado de sintaxis, soporte de lenguajes de servidor, depuración, documentación en línea.

Y cada uno de nosotros le dará más valor a unas u otras dependiendo del entorno en el que trabaje y el trabajo específico que realice. Por ejemplo, un desarrollador novel encontrará muy útil la edición WYSIWYG, pero no así un desarrollador más experimentado, que rara vez lo utilizará.

Primeros editores

Desde CoffeeCup HTML Editor, el primer editor HTML del mercado allá por 1994, mucho ha crecido la web, y con ella los editores web.

En aquella época las webs eran muy sencillas, construidas básicamente con HTML, y se podían crear usando cualquier editor de texto, como el Bloc de Notas, o el Vi. Eran tiempos de frames, imágenes animadas horribles, y sin ningún tipo de diseño.

Hoy día no sólo se usa HTML para crear una web, que incluso se usa una variante de éste, XHTML . Ahora tienen la misma importancia (X)HTML, CSS, Javascript/ECMAScript, o lenguajes de servidor como PHP, Java o .NET/ASP. Aún es posible crear una web con Bloc de Notas o vi, pero, a riesgo de ser un poco menos geek, los principales editores web del mercado nos harán la vida mucho más fácil.

Como en cualquier aspecto de la informática, no existe una única aplicación que sirva para todo, y el amplio mundo del desarrollo web no es una excepción. Cada cual utilizará la aplicación que mejor se adapte a sus necesidades. Hay que tener en cuenta si se necesita control de versiones (CVS, Subversion), cliente FTP o WebDAV, documentación en línea, lenguajes soportados, autocompletado de código, WYSIWYG (What You See Is What You Get), depuración de código, etc.

Pero una herramienta común para todos los desarrolladores web, es sin duda alguna Firefox. Depurar una página web nunca fue tan fácil y rápido, gracias a las extensiones de las que disponemos, como Web Developer o Firebug.

Con ésta última podremos modificar por completo una página web, conviertiéndose así en un WYSIWYG imprescindible, además de un inmejorable inspector del DOM, y un maravilloso depurador Javascript. Pero desgraciadamente no debemos olvidar que nuestra web también debe visualizarse correctamente en Internet Explorer, donde la depuración de nuestras webs es mucho más tediosa.

Editores Windows

CoffeeCup HTML Editor:

Las principales características del CoffeeCup HTML Editor son sus asistentes (inserción de imágenes, enlaces, menús DHTML, etc.) tratando a los elementos HTML como objetos con sus propiedades, resaltado de sintaxis (HTML, CSS, PHP, ASP…), editor de múltiples ficheros, cliente FTP, editor visual drag&drop (WYSIWYG), y poco más. Ha quedado un tanto desfasado, aunque sigue siendo muy válido como editor HTML.

Adobe Dreamweaver:

Muchos hemos aprendido HTML y CSS gracias al producto de Macromedia Dreamweaver (ahora propiedad de Adobe). Es muy similar a CoffeeCup aunque con mayores prestaciones, aunque también es mucho más caro.

En la última versión (CS3) dispone de un muy mejorado soporte de CSS, que junto a su funcionalidad de autocompletado de atributos CSS (ideal para los que empiezan) lo convierte quizás en uno de los editores más cómodos para trabajar con CSS, y por ello quizás también sea el más usado por los diseñadores web.

Al igual que CoffeeCup, sus asistentes harán las delicias de los más novatos, aunque de poca utilidad para los más avanzados. Incluye lo que han llamado Spry, una librería de widgets y efectos mediante Javascript, que en mi opinión ha llegado demasiado tarde y mal, puesto que existen fabulosas librerías de widgets/efectos, como Dojo Toolkit, jQuery, script.aculo.us, etc. Podrían haber creado asistentes para usar dichas librerías, pero han preferido usar las suyas propias.

Linux / Multiplataforma

Amaya:

Amaya es más una curiosidad que una herramienta popular. Está desarrollado por la W3C (World Wide Web Consortium), la asociación que se encarga de construir los estándares web.

Es un navegador y un editor web, cuya peculiaridad es que permite editar directamente cualquier página web que se visualice, y que permite editar SVG y MathML, para codificar e integrar junto con HTML. Es bastante espartano y carece de asistentes, pero sus modos de vistas pueden resultar muy interesantes.

Aptana:

Este editor está basado en Eclipse, e incluso puede usarse como plugin en éste. Su asistente de código (HTML, CSS y Javascript) es único, mostrando documentación en línea de todos y cada uno de los elementos, como en qué navegadores está soportada una función de Javascript o un atributo CSS.

Además muestra información en línea sobre las funciones Javascript propias. Viene con cliente FTP y depurador de Javascript. Pero lo mejor es verlo en funcionamiento .Es el editor web más completo del mercado y además es libre (gratuito y con código fuente abierto).

Zend Studio:

Más que un editor web, Zen Studio es todo un entorno de desarrollo para PHP. Tiene autocompletado de código HTML (no para Javascript y CSS) además de para PHP, y no es posible editar en modo WYSIWYG, aunque el resaltado de sintaxis les podría valer a los desarrolladores más expertos.

Su punto fuerte está en su editor y depurador PHP, que a día de hoy no existe nada mejor. Su soporte para gestionar bases de datos (MySQL, MS SQL Server, Oracle, PostgreSQL, …), cliente FTP, y soporte de control de versiones integrado (CVS y Subversion), lo convierte en el mejor entorno de desarrollo web para PHP existente.

En conclusión

A pesar de la extensa variedad de productos que existen, sólo unos pocos son los más usados, y a pesar de ello aún queda mucho por hacer, y no existe el editor perfecto. WYSIWYG está bien para hacer una maqueta inicial, para aprender HTML y CSS, y poco más. Y es que nada se ha avanzado con este sistema de edición en toda una década, y los profesionales experimentados ni siquiera lo usan.

Aptana es por contra el editor más innovador, y aún le queda mucho por decir en ese sentido. Quizás el próximo paso sea el soporte para arquitectura MVC con lenguajes de servidor (edición de vistas, RAD , etc.), arquitectura que es casi un estándar en desarrollo web, y que sin embargo no disponemos de un editor que lo soporte.

Lecturas de referencia

• HTML Editor en Wikipedia (inglés)

Cuando empezamos a desarrollar con PHP solemos hacerlo usando málas prácticas, como mezclar PHP y HTML/CSS en el mismo fichero. Pero quizás lo hacíamos porque desconocíamos un motor de plantillas tan potente y completo como Smarty.

El lenguaje PHP es completamente abierto, en el sentido de que no requiere desarrollar en alguna arquitectura concreta, sino que un fichero puede contener un millón de líneas con código PHP y código HTML intercalados, lo cual tiene severas desventajas y problemas:

• Un diseñador tendrá muy difícil manejar el código HTML/CSS de esa página.
• La escalabilidad es prácticamente nula.
• Mantener una aplicación así se complica progresivamente.
• La depuración de ese tipo de aplicaciones se hace muy complicada.

Pero podemos escribir aplicaciones PHP usando motores de plantillas que separan la presentación (HTML/CSS) del código (PHP), solventando de este modo todos esos problemas, y ofreciéndonos además multitud de ventajas adicionales. Este es el caso de Smarty, un motor de plantillas ya veterano en el mercado.

Estas son las funcionalidades que podremos disfrutar con Smarty:

• Plantillas limpias fáciles de usar por los diseñadores.
• Escalabilidad.
• Mantenimiento más sencillo (al igual que la escalabilidad, únicamente con la separación de código y presentación no se consigue un mantenimiento más sencillo, también se requerirá de una buena codificación).
• Depuración óptima del código, al tener ficheros pequeños únicamente con código PHP.
• Posibilidad de introducir comentarios dentro de las plantillas que no se enviarán al servidor. Ejemplo: {* comentario smarty *} en lugar de <!-- comentario HTML -->
• Funciones integradas que facilitan el tratamiento de variables. Ejemplos: {foreach}{/foreach}, {if}{else}{/if}.
• Funciones asistentes para generación de código HTML. Ejemplos: {html_image file=”banner.jpg”} generaría <img src="banner.jpg" alt="" width="700" height="55" />
• Expandir Smarty con más funcionalidades mediante plugins.

Veamos un sencillo ejemplo de una aplicación hecha con Smarty:

index.php

<?php
include('libs/Smarty.class.php');
$frutas = array(
      array(
            'name'  => 'malus rosaceae',
            'url'  => 'http://es.wikipedia.org/wiki/Manzana',
            'image'  => 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Fuji_apple.jpg/200px-Fuji_apple.jpg'
      ),
      array(
            'name'  => 'fragaria',
            'url'  => 'http://es.wikipedia.org/wiki/Fresa',
            'image'  => 'http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Chandler_strawberries.jpg/225px-Chandler_strawberries.jpg'
      ),
      array(
            'name'  => 'citrus sinensis',
            'url'  => 'http://es.wikipedia.org/wiki/Naranja_%28fruta%29',
            'image'  => 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Citrus_sinensis.jpg/300px-Citrus_sinensis.jpg'
      ),
);
$frutas_list = array('manzana','fresa','naranja');
$tpl = new Smarty();
$tpl->template_dir = './';
$tpl->compile_dir = './';
$tpl->config_dir = './';
$tpl->cache_dir = './';
$action = isset($_GET['action']) ? $_GET['action'] : 'list';
switch ($action) {
      case 'list':
            $tpl->assign('frutas',$frutas_list);
            $tpl->display('list.tpl');
            break;
      case 'detail':
            $id = isset($_GET['id']) ? intval($_GET['id']) : 0;
            $tpl->assign('fruta', $frutas[$id]);
            $tpl->display('detail.tpl');
            break;
}

Con esta aplicación necesitaremos dos plantillas: list.tpl y detail.tpl

list.tpl

<html>
<head>
      <title>Listado de frutas</title>
</head>
<body>
<form>
      {* Con esta sentencia crearemos el HTML de un SELECT/OPTION *}
      {html_options options=$frutas name=id}
      <input type='hidden' name='action' value='detail' />
      <input type='submit' value='Ver' />
</form>
</body>
</html>

detail.php

<html>
<head>
      <title>{$fruta.name}</title>
</head>
<body>
      <h1>{$fruta.name}</h1>
      <a href="{$fruta.url}"><img src="{$fruta.image}" /></a>
      <br />
      <a href=?action=list>Volver</a>
</body>

Alternativa a Smarty

Otra opción totalmente válida es usar nuestro propio motor de plantillas, útil por ejemplo para proyectos pequeños que no requieran de todas las funcionalidades que ofrece Smarty.

TemplateEngine.class.php

?php
define('TEMPLATES_DIR', './templates/');
class TemplateEngine extends stdClass {
      public function fetch($__tpl) {
            foreach (get_object_vars($this) as $__name=>$__value) {
                  $$__name = $__value;
            }
            require(TEMPLATES_DIR . $__tpl);
      }
}

index.php

<?php
include('TemplateEngine.class.php');
$tpl = new TemplateEngine();
$tpl->frutas = array('manzana','pera','fresa','platano','mandarina');
$tpl->fetch('ficha.tpl');

Lo que en Smarty sería algo como:

<?php
include('Smarty.class.php');
$smarty = new Smarty();
$smarty->assign('frutas', array('manzana','pera','fresa','platano','mandarina'));
$smarty->display('ficha.tpl');

./templates/ficha.tpl

<html>
<head>
      <title>Sistema de plantillas sin Smarty</title>
</head>
<body>
      <ul>
      <?php foreach ($frutas as $fruta) : ?>
            <li><?=$fruta?></li>
      <?php endforeach; ?>
      </ul>
</body>
</html>

Equivalente a la plantilla Smarty:

<html>
<head>
      <title>Sistema de plantillas sin Smarty</title>
</head>
<body>
      <ul>
      {foreach from=$frutas item=fruta}
            <li><{$fruta}</li>
      {/foreach}
      </ul>
</body>
</html>

Ya no hay excusa para hacer una aplicación web en PHP de calidad. Con un motor de plantillas como Smarty podremos crear una aplicación profesional invirtiendo muy poco tiempo.

Referencia:

• Documentación de Smarty

Es difícil extraer tan sólo diez extensiones dentro de tantas existentes, y máxime cuando cada comunidad tendrá sus propias extensiones más populares (desarrolladores, bloggers, hispanos, estadounidenses, etc.).

Firefox quizás no sea el navegador web más estable (es muy conocido su problema con el consumo de memoria, y quizás tampoco el más seguro (no tiene muchos menos errores que Internet Explorer, aunque eso sí, suelen ser errores de la plataforma donde se ejecuta y son solucionados en tiempo récord), pero sí es el mejor.

¿Por qué Firefox?

Porque es el navagador más personalizable, y por lo tanto el que más productividad nos ofrece. Cada uno se construye su propio Firefox añadiendo las funcionalidades que necesite. No existen dos usuarios de Firefox que tengan exactamente el mismo Firefox, porque cada uno tiene sus propias extensiones, y su tema favorito. Es normal, teniendo en cuenta que existen alrededor de 1000 extensiones disponibles en la web oficial.

Con tantas extensiones a nuestra disposición no sólo se consigue que perdamos nuestro valioso tiempo buscando las extensiones que necesitamos, sino que además cabe la posibilidad de que pase desapercibida una extensión que nos haría la vida mucho más fácil. Por ello, a continuación muestro las diez extensiones más populares.

1. FlashGot

Los que usamos Firefox encontramos a su gestor de descargas bastante ineficiente, se nos queda corto. Además, muchos usamos gestores de descarga de escritorio, como Free Download Manager, GetRight , LeechGet(Windows), Gwget, KGet (Linux) o iGetter (Mac).

FlashGot sustituye al espartano gestor de descargas de Firefox, y además lo integra con casi todos los gestores de descarga existentes. Podremos con un sólo clic descargar todos los enlaces de una página, seleccionar cuántos ficheros descargamos a la vez, resumir una descarga que interrumpimos anteriormente, etc.

2. Adblock Plus

Adblock Plus filtra toda la publicidad gracias a su base de datos actualizada constantemente. El filtro bloqueará la mayoría de anuncios de modo totalmente automático.

A muchos nos molesta ver tanta publicidad en Internet, que a veces hasta nos dificulta la lectura. Pero con esta extensión nunca jamás volveremos a ver publicidad en Internet.

3. Gmail Notifier

Gmail Notifier sirve para alertarnos sobre la llegada de un nuevo correo en Gmail, así como tener un icono de acceso rápido a este popular Webmail.

Incluso podemos configurarlo para que reproduzca un fichero de audio cuando llegue nuevo correo.

4. Greasemonkey

Greasemonkey es una extensión que permite modificar la página web que se esté visualizando mediante scripts. Estos scripts los podemos encontrar en userscripts.org.

Un buen ejemplo es Gmail + Reader integrator , que añade un panel de Google Reader dentro de la página de Gmail, para poder leer el correo y leer a la vez nuestros blogs favoritos.

5. Download Statusbar

La extensión Download Statusbar sustituye al gestor de descargas de Firefox, sustituyendo la ventana de descargas por pequeñas barras de progreso, una por cada fichero, situadas justo encima de barra de estado.

Es totalmente personalizable, y sin duda mucho más práctico que el de Firefox.

6. Web Developer

Web Developeres ideal e imprescindible para desarrolladores web. Sus funciones son casi interminables: deshabilitar caché, cookies, javascript, eliminar o ver las cookies, modificar el CSS de una página.

Además, mostrar atributos de los elementos de la página, ver información de los formularios, validar HTML, CSS… Ningún desarrollador podrá sobrevivir sin esta extensión.

7. Firebug

Firebug es otra extensión imprescindible para el desarrollador web. Con ella podremos editar el HTML de cualquier web en tiempo real.

Además, modificar el CSS de forma visual con autocompletado, depurar javascript con breakpoints y watchlist, observar el tiempo de carga de todos y cada uno de los ficheros de la página, ver las peticiones y respuestas AJAX, etc. Nunca fue tan fácil desarrollar una web.

8. del.icio.us extension

Todos conocemos del.icio.us, una web donde poder almacenar los enlaces que nos gustan para después poder recuperarlos.

Con esta extensión nos resultará mucho más sencillo guardar un enlace en del.icio.us, y además accederemos fácilmente a sus opciones más útiles, como ver qué usuarios tienen guardado el enlace que estamos viendo, ir a la lista de enlaces más populares, etc.

9. Google Toolbar

Posiblemente nuestro Firefox lo hayamos descargado con esta extensión instalada previamente. Google Toolbar es muy útil para tener todos los servicios de Google en una barra a golpe de clic.

Por ejemplo, dispondremos de una cajita de búsqueda para poder buscar imágenes, noticias, mapas, en tu buzón de gmail… Muestra el pagerank de la página que estemos visualizando, dispondremos del corrector ortográfico de Google cuando escribamos en un formulario, traducción de una página al español, y muchas funciones más totalmente personalizables.

10. PDF Download

Cuando nos encontramos un documento PDF, tenemos que bajárnoslo y después abrirlo con el lector de PDF’s, pero con PDF Download, al hacer clic en un documento PDF, automáticamente nos lo bajará a un directorio temporal y nos lo abrirá con nuestro lector de PDF de forma rápida y automática.

Aunque también lo podemos configurar para que nos baje el documento automáticamente, o que nos lo convierta en HTML. Cada usuario tendrá su propia lista de extensiones más populares, y esa es una de las grandes bondades de Firefox, su alta capacidad de personalización.

Una lista de extensiones útiles para cada tipo de usuario sería muy interesante, podemos obtenerla consultando Mozilla Addons filtrando por categorías.

Lecturas de Referencia

• Firefox Add-ons:extensiones populares
• Firefox Add-ons: Complementos recomendados