El desarrollo de una página web

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.

¡Sincronicemos nuestros marcadores!

En el momento en que uno empieza a usar diferentes navegadores y/o diferentes equipos, el tener los marcadores ("favoritos" en la nomenclatura de Microsoft) ordenados y siempre disponibles es bastante útil.

Hasta hace unos años, casi todos procedíamos a copiar el archivo (bookmarks.html, por ejemplo) en un diskette y llevarlo al otro equipo, o subíamos el archivo a un FTP, o lo poníamos en algún sitio web ...

Ahora existen opciones que, basándose en el mismo principio (dejar una copia de nuestros marcadores "colgada" en Internet y actualizar desde allí los demás equipos), son más cómodas de usar y ofrecen funcionalidades adicionales.

Uno de los primeros servicios de este tipo que conocí (y que sigo utilizando asiduamente) fue del.icio.us
Permite organizar los marcadores por etiquetas ("tags"), compartirlos y/o publicarlos, enviar marcadores a otros usuarios, ... También ofrece unos botoncitos para nuestro navegador que permiten agregar cómodamente a nuestra cuenta de del.icio.us las páginas que vamos visitando y que nos interesan.

En mi caso, reconociendo la utilidad de del.icio.us, no es exactamente lo que necesito. En del.icio.us tengo cientos de enlaces bien clasificados que me sirven de referencia, pero no quiero tener mi menú de marcadores con cientos de elementos.

Existe una extensión para Firefox (Foxmarks) que sirve para sincronizar nuestro menú de marcadores. Es extremadamente fácil de usar y además ofrece una página personalizada con nuestro menú de marcadores en my.foxmarks.com por si los necesitamos consultar desde otro navegador o equipo.
En las versiones más recientes, también permite guardar las contraseñas (están cifradas, obviamente) de los sitios que visitamos.

El navegador Opera también ofrece un servicio similar (Opera Link) con una ventaja adicional: también sincroniza los marcadores de nuestro teléfono móvil si usamos el navegador Opera Mini.

Si nos instalamos la "Google Toolbar" (para Internet Explorer y Firefox) obtendremos una funcionalidad similar. Entre otras funcionalidades, esta herramienta permite tener nuestros marcadores disponibles en cualquier ordenador.

¿Y qué hay de nuestra privacidad?

Aunque todos nos aseguran que los datos que guardamos son privados y que están seguros, nadie puede estar seguro al 100% de esto. ¿Considera usted que sus marcadores o páginas favoritas son un conjunto de datos altamente sensibles? Mi recomendación: no use estos servicios y llévese sus marcadores de un equipo a otro en una memoria USB, a ser posible, cifrada.

El maravilloso mundo de la tipografía

Reconozco que no tengo ni idea de este tema, pero lo poquito que he leído me ha parecido apasionante.

La tipografía es (definición aproximada) el arte de diseñar, seleccionar y colocar adecuadamente los tipos (las letras) a la hora de imprimir un texto. Es un arte con cientos de años a sus espaldas que, sin embargo, ha evolucionado con los tiempos y sigue teniendo hoy en día una vigencia plena.

Insisto, no conozco casi nada de este tema (sólo soy un pobre programador), si quieren profundizar más les dejo unos enlaces al final del texto. Con esta entrada sólo pretendo despertar su curiosidad e interés.

Hay muchas formas de clasificar los distintos tipos de letras. Existen clasificaciones históricas, según la forma, el espaciado, ...
En la web se utilizan fundamentalmente tres tipos de letra: con "serifa" (serif), sin "serifa" (sans-serif) y monoespaciadas.

• Las letras con serifa son las típicas con adornos en los remates. Ejs: Times y Georgia.
  
  Times
  
  Georgia
  


• Las letras sin serifa son las que no tienen estos adornos. Ejs: Verdana, Arial, Helvetica.
  Arial
  
  Helvética
  


• Las monoespaciadas son aquellas en las que cada carácter tiene el mismo ancho, independientemente de la letra que se esté representando. Ej: Courier.
  
  Courier
  

Esta no es una clasificación estricta, ya que la distinción serif y sans-serif se refiere a la forma mientras que la distinción entre monoespaciadas y ajustadas se refiere al interespaciado entre caracteres.

Tradicionalmente se ha dicho que las tipografías sans-serif son más apropiadas para documentos en una pantalla, ya que se ven mejor que los tipos serif (ya que no hay remates ni adornos que mostrar).

Aunque cada vez se ve más tipografía serif en la web (por ejemplo en www.publico.es los titulares y cuerpo de las noticias van con Georgia y las entradillas en Arial), casi toda la tipografía que se utiliza por defecto en el escritorio es sans-serif.

En las siguientes capturas de pantalla puede apreciarse como prácticamente todos los elementos que contienen texto en el escritorio (rótulos de los iconos, texto en las barras de herramientas, texto de los menús, cuadros de diálogo, etc.) utilizan una tipografía sans-serif (están con la configuración por defecto).

Linux:


Mac OSX:


Windows:


Algunos enlaces de interés:

• Tipografía - Wikipedia, la enciclopedia libre


• Introducción a la tipografía


• dafont.com (Un buscador de fuentes)