Mi rincón en Internet

Me ha dado mucha envidia José Pujol con sus “posts” en los que explica el día a día de su trabajo, así que en esta entrada voy a hacer lo mismo.

En la web de Público tenemos dos partes muy diferenciadas: el gestor de contenidos y las páginas que genera (básicamente, la portada, las subportadas y las páginas con noticias) y el resto (blogs, video, sección de cine, archivos estáticos, etc).

Hoy voy a tratar de contar cómo hemos construido la página web del concurso Foto Libre.

Lo primero que hicimos fue reunirnos con la gente del periódico que organizaba el concurso (departamentos de fotografía, “marketing” y sistemas). En esta reunión se estableció la mecánica del concurso desde un punto de vista genérico, sin entrar en detalles técnicos.
Esta fase se suele denominar “toma de requisitos” y es fundamental para que un proyecto salga adelante. Tienen que quedar perfectamente especificadas todas las características deseables.

Con esta información, desde la parte de diseño y programación web (nosotros) se hicieron unos bocetos o esquemas de las páginas. Por ejemplo: “pantalla de inicio, desde ahí el usuario puede ir al formulario de registro o a la galería de fotos”, o “pantalla de registro, el usuario introduce sus datos para participar y se le envía un correo de confirmación”, etc.
Existe un término llamado “casos de uso” que sirve para documentar las posibles interacciones y flujo de trabajo de una aplicación.
En este punto, todavía no se ha escrito nada de código, pero son pasos necesarios para que todo salga bien. Si no está claro qué se quiere obtener, difícilmente el proyecto será del gusto del peticionario.

Cuando todos los implicados han dado el visto bueno a estos bocetos, empieza el trabajo de los diseñadores (Matteo y Daniel) y programadores (Rodrigo y el autor de estas líneas).

El separar funciones es bueno y productivo y permite avanzar en paralelo. Mientras los diseñadores van esbozando las distintas pantallas, los programadores vamos haciendo el trabajo “de trastienda”: diseño de la base de datos (si es necesaria, claro), elección de la tecnología que se utilizará en el desarrollo (lenguajes de programación, “frameworks”, etc), diseño funcional de la aplicación (separación de las distintas funcionalidades de la aplicación), etc.

En este punto, los diseñadores nos proveen con algunos archivos HTML y CSS estáticos. Los programadores los “desmenuzamos” y asignamos a cada parte de la aplicación una labor, algunas de estas unidades funcionales son las que se encargan de generar el HTML de forma dinámica (obteniendo los datos de las fotos de una base de datos, validando los datos que introducen los usuarios cuando se registran o suben fotos, etc).
Es la llamada “capa de presentación”.

Hoy en día muchas webs se diseñan siguiendo un patrón o modelo muy conocido: MVC (Modelo, Vista, Controlador).
La capa M (modelo) abstrae, representa y ofrece mecanismos de acceso a los datos “crudos” de la aplicación, la capa C (controlador) se ocupa de gestionar las peticiones de las distintas páginas y solicitar los datos para generar estas páginas.
Por último, la capa V (vista o presentación) “pinta” o representa los datos en un formato determinado (en nuestra aplicación de Foto Libre, en HTML).

Para muchas páginas web sencillas o informales esta separación está casi más en la mente de las persona que escribe el código, pero en desarrollos de mayor entidad conviene separar físicamente estas funcionalidades.

Espero no haberles aburrido mucho. Es difícil condensar en unas pocas líneas tanta información. Otro día les contaremos más cosas sobre el trabajo que hacemos.

La emulación de un dispositivo por parte de otro no es nada nuevo, pero es relativamente reciente en los sistemas “de escritorio”.

Existen sistemas que pueden ser emulados por un ordenador con relativa facilidad: una máquina recreativa “arcade” (1), un dispositivo móvil (2), etc. Sin embargo, lo más ambicioso es emular un ordenador completo y que la máquina virtual que ejecutemos sea utilizable (que no sea extremadamente lenta, que pueda ejecutar un sistema operativo más o menos moderno con fluidez, ….)
Hoy en día esto es posible y existen muchos productos, (los hay comerciales, gratuitos y de código abierto [ver enlaces]) que dan un rendimiento excelente, siendo posible ejecutar varios sistemas operativos simultáneamente con un rendimiento bastante decente.

En estas configuraciones existe un sistema operativo “anfitrión” que ejecuta el programa de emulación o virtualización. Este programa se encarga de crear “máquinas virtuales”, cada una con sus propias características (memoria RAM, disco duro, procesador, dispositivos, etc) que pueden ejecutar su propio sistema operativo (”huésped”) y programas (3).

¿Para qué sirve tener un ordenador corriendo “dentro” de otro ordenador?
Las aplicaciones son numerosas, enumero algunas de las más típicas:

• Probar programas en distintos sistemas.
  Existen muchos lenguajes y herramientas de programación que pueden ejecutarse en distintos sistemas operativos (”cross-platform”). Es vital probar cómo se ven estos programas, ya que cada sistema funciona diferente en la gestión de ventanas, tamaño de los elementos visuales (botones, menús, fuentes), etc.
  Teniendo varios sistemas virtualizados se puede probar el mismo programa sin necesidad de tener varios ordenadores diferentes o reiniciar el ordenador con otro sistema operativo.
  En la siguiente captura de pantalla (4) se muestra el típico programa de ejemplo (una ventanita que dice “¡Hola, mundo!”) en los sistemas operativos MacOSX (anfitrión), Linux y Windows (huéspedes).
• Centros de soporte a usuarios.
  Cuando se distribuye un programa, aunque esté diseñado para funcionar sobre sólo un sistema operativo, se pueden encontrar múltiples combinaciones de versiones, actualizaciones, parches, etc. Por ejemplo, podemos tener sistemas Windows XP con diferentes “Service Pack”, diferentes versiones de Internet Explorer, algunos con la versión “Home Edition”, otros con la “Professional”, etc.
  Se puede tener un conjunto de máquinas virtuales con todas las combinaciones posibles y probar los programas en estas configuraciones con suma facilidad.
• Servidores dedicados.
  Cada vez es más frecuente que se ofrezcan servidores dedicados que realmente son una máquina virtual corriendo sobre un servidor real. Al usuario que contrata este servidor dedicado la impresión que le queda es que tiene una máquina para su uso exclusivo, sin embargo, la máquina “real” es compartida por más usuarios, cada uno con su máquina virtual.
• Evitar reinicios y/o cambios de ordenador.
  Existen programas que sólo se ejecutan sobre un sistema operativo. Si disponemos de una máquina virtual con este sistema y el programa en cuestión instalados, podemos trabajar habitualmente con nuestro sistema preferido y arrancar la máquina virtual cuando necesitemos el programa en cuestión.
  No siempre esto es posible, puede que este programa requiera muchos recursos y no funcione bien en una máquina virtual, o que necesite un controlador de vídeo específico, etc, pero en muchos casos, es una solución viable. Las máquinas virtuales se pueden ejecutar a pantalla completa y su velocidad es bastante buena en muchos casos (5).

¿Algún lector nos puede poner más usos y ejemplos? Si tienen alguna captura de pantalla puedo incorporarla a esta entrada.

Captura 2: emulación de un teléfono móvil. El programa es el entorno de desarrollo Netbeans.

Captura 3: un ordenador con MacOSX (anfitrión) ejecutando dos máquinas virtuales (huéspedes) corriendo Linux y Windows (pulsar para ver a pantalla completa).

Captura 4: el típico “¡Hola, mundo!” en tres sistemas operativos diferentes (pulsar para ver a pantalla completa).

Captura 5: se muestra una sesión de trabajo en la que un anfitrión Linux ejecuta una máquina virtual Windows, a pantalla parcial y pantalla completa.

Enlaces:
VMware: ofrece varios productos, unos gratuitos (VMware Player) y otros comerciales.
VirtualBox, Qemu, Bochs, Xen: gratuitos y de código abierto.

Leíamos el otro día una noticia en la que nos contaban que un científico había conseguido sintetizar el sonido de cierto fonema pronunciado por un neandertal.
Realmente es muy sencillo sintetizar los sonidos del habla con un ordenador (especialmente las vocales). El parámetro clave en la síntesis de los sonidos vocales son los formantes (el artículo de la Wikipedia lo explica muy bien).

Lo interesante de la investigación de este antropólogo (Robert McCarth) es que sabemos las frecuencias de los formantes de los humanos actuales porque conocemos la anatomía de nuestro tracto vocal, pero no las de un neandertal, y esto ha sido lo que este investigador ha “calculado”.Créditos: el programa que se aprecia en la captura de vídeo es un programa de ejemplo que proporcionan los autores de Snack, una “librería” para desarrollar programas de tratamiento de sonido.

El patrón “Singleton”

Uno de los patrones de diseño más conocidos es el patrón “Singleton“. Con este patrón se garantiza que sólo hay una instancia activa de una determinada clase.

Supongamos que tenemos una base de datos y queremos mantener una única conexión activa. Otro caso puede ser una clase que se dedique a grabar registros o trazas en un fichero. Imaginemos un objeto que descarga ficheros por FTP.

En todos estos casos puede ser conveniente tener un único objeto que realice el trabajo y garantizar que no hay varias instancias, por ejemplo, para no saturar una base de datos con conexiones, o no tener accesos simultáneos al mismo fichero, etc.

En la documentación oficial de PHP se muestra un ejemplo de este patrón para este lenguaje.

Otros patrones de diseño

Por motivos profesionales, últimamente casi programo exclusivamente con PHP. En developerWorks hay un artículo muy interesante donde amplían otro artículo anterior en el que presentaban cinco patrones básicos.

Explican y ponen ejemplos en PHP para los patrones “Adapter”, “Iterator”, “Decorator”, “Delegate” y “State”. Es una lectura obligatoria para cualquier desarrollador de PHP.

Nos contaba hace un par de días Blanca Salvatierra en un artículo la existencia de una página web que instaba a los usuarios del navegador Internet Explorer 6 a actualizarse o cambiar de navegador.

Realmente es un dolor tener que desarrollar páginas web que se vean bien en todos los navegadores. Aunque la mayoría de los diseñadores y programadores ya se saben los “trucos” para conseguirlo, no deja de ser una gran pérdida de tiempo y esfuerzo.

A día de hoy, los lectores de Público.es utilizan cinco navegadores principalmente (porcentajes aproximados): Internet Explorer 7 (~ 30 % de los usuarios) , Internte Explorer 6 (~ 30%), Mozilla Firefox (~ 30%), Apple Safari (~ 2%) y Opera (~1%).

De estos cinco navegadores, el Internet Explorer 6 (abreviado como IE6) es el menos compatible, para que una página que se ve bien en el resto se vea en IE6 muchas veces hay que recurrir a trucos y “chapucillas”.

¿Cómo puede ser ésto? Las páginas web actualmente se basan (principalmente) en tres “lenguajes” con funciones diferenciadas, todos ellos estandarizados por organizaciones de internacionales: HTML, CSS y JavaScript.
El lenguaje HTML es el que contiene el texto o contenido significativo de una página web, el CSS se encarga de formatear y dar estilo a este texto. Finalmente, con JavaScript podemos hacer que el usuario interaccione con una página web de diferentes formas.

El problema es que en teoría todos los navegadores soportan estos tres lenguajes, pero en la práctica, cada uno lo hace a su manera, y de todos ellos, el IE6 es el que más extraño se comporta.

Supongamos que tenemos el siguiente fragmento de HTML (simplificado):

<head>
 <title>Prueba con HTML</title>
</head>
<body>
 <div id="contenedor">
  <div id="contenido">
   <div id="cabecera">
    <h1>Título del documento</h1>
   </div>
   <div id="cuerpo">
    <div id="colizda">
     <h2>Listado de palabras</h2>
     <ul>
      <li>Palabra 1</li>
      <li>Palabra 2</li>
      <li>Palabra 3</li>
      <li>Palabra 4</li>
      <li>Palabra 5</li>
     </ul>
    </div>
    <div id="coldcha">
     <p>Esto es un párrafo de texto, párrafo de texto,
     párrafo de texto,párrafo de texto, párrafo de texto,
     párrafo de texto, párrafo de texto.</p>
     <p>Esto es otro párrafo de texto, párrafo de texto,
     párrafo de texto, párrafo de texto, párrafo de texto,
     párrafo de texto, párrafo de texto.</p>
    </div>
   </div>
   <div id="pie">
    <p>Esto es un texto en el pie de la página.</p>
   </div>
  </div>
 </div>
</body>
</html>

Este documento se vería así en los distintos navegadores (pulsar para ampliar):

No hemos especificado ningún estilo, así que los navegadores formatean el texto como les parece, aunque el resultado es muy parecido en todos los casos.

Ahora establecemos que este HTML utilice el siguiente CSS que lo formateará. Este CSS es bastante ingenuo, ya que no tiene en cuenta las peculiaridades de los distintos navegadores. Lo que pretende es establecer una página centrada, con una cabecera gris, un cuerpo azul con dos columnas, verde y amarilla y un pie de página rojo:

#contenedor {
 border: solid 1px black;
 padding: 10px;
 width: 750px;
 margin: 0 auto;
}
#cabecera {
 background-color: gray;
 width: 730px;
}
#cuerpo {
 background-color: blue;
 width: 730px;
}
#pie {
 background-color: red;
 width: 730px;
}
#colizda {
 width: 180px;
 background-color: green;
 float: left;
 padding: 10px;
}
#coldcha {
 width: 510px;
 background-color: yellow;
 float: left;
 padding: 10px;
}

Las diferencias entre navegadores son notorias:

	Mozilla Firefox
	Opera
	Safari
	Explorer 7
	Explorer 6

Hacemos algunos ajustes adicionales conseguimos al fin que en todos se vea igual:

body {
 /* Para centrar en IE6 */
 text-align: center;
}
p, ul {
 margin: 0;
 padding: 0;
}
ul {
 list-style: none;
}
#contenedor {
 margin: 0 auto;
 width: 770px;
}
#contenido {
 border: solid 1px black;
 padding: 10px;
 width: 750px;
 /* Para expandir la capa hacia abajo en
 Safari, Opera y Firefox */
 float: left;
 /* Para compensar el apaño de IE6 en body */
 text-align: left;
}
#cabecera {
 background-color: gray;
 float: left;
 width: 750px;
}
#cuerpo {
 background-color: blue;
 float: left;
 width: 750px;
}
#pie {
 background-color: red;
 float: left;
 width: 750px;
}

Y éste es el resultado:

	Mozilla Firefox
	Opera
	Safari
	Explorer 7
	Explorer 6

Lo más chocante es que para que en IE6 se vea la página centrada tenemos que establecer una propiedad ilógica: que el texto en la etiqueta “body” esté centrado (text-align: center;)
Por otra parte, los dos Internet Explorer expanden y muestran la capa contenedora de las columnas (fondo azul), mientras que en los demás hay que hacerla visible explícitamente.

En general el comportamiento de IE7, Firefox, Opera y Safari es muy similar, los problemas siempre los suele dar el IE6.

Se comprende entonces que los diseñadores de páginas web estén hartos del Explorer 6 y su peculiar forma de interpretar los estándares.