Sección: diseño

Selectores CSS: la intersección entre diseño y programación

El uso de selectores CSS en los “frameworks” para JavaScript más conocidos ha permitido lo que hace unos años era impensable: los diseñadores entienden el código de los programadores y los programadores pueden comprender el CSS de los diseñadores.

jQuery es especialmente adecuado: no distingue entre selectores “por id” ni selectores por “clase” (Prototype tiene dos funciones diferentes, $() y $$(), para estas tareas).

$('.lateral a.externo').click(function(ev) {
    // Código  a ejecutar
})

Este sencillo código es fácil de entender y un diseñador al verlo rápidamente intuye que en todos los tags A dentro de la “capa” lateral que tengan la clase externo se hará algo al hacer click.

.lateral a.externo {color: red; padding: 5px; margin: 0;}

Este fragmento de CSS afecta a los mismos elementos que el javascript anterior. Un desarrollador enseguida ve también a qué elementos afecta.

Lo bueno es que si el diseñador y el programador hablan en el mismo lenguaje (selectores CSS), el desarrollo es muy fácil y se puede trabajar en paralelo fácilmente.

Comentarios

Las elecciones desde el punto de vista informático

Pasada la resaca electoral, les voy a contar un poco por encima cómo trabajamos y lo que hacemos cuando hay elecciones.

Lo habitual es contactar unas semanas antes con el organismo responsable y solicitar una acreditación. En las elecciones que hemos cubierto hasta ahora (Generales 2009, Galicia y País Vasco 2009) el mecanismo ha sido similar: el organismo nos facilita una página web de acceso restringido desde la cual podemos descargar los ficheros con los datos de los recuentos.

Por lo general, antes del día “D” se ofrece una simulación con datos de prueba para que los medios podamos comprobar que nuestros desarrollos funcionan.

El formato de los datos no es estándar, cada organismo ofrece el que mejor le parece. En las pasadas elecciones generales se nos ofrecían un fichero de texto (comprimido) con los datos del recuento a nivel estatal, autonómico y provincial y otro conjunto de ficheros (también comprimidos) con el desglose del recuento por municipios.

Con antelación se nos facilitó la documentación sobre el formato de estos ficheros (por ejemplo: campo 1, tres posiciones, código del municipio; campo 2, dos posiciones, provincia; ….; campo n, código del partido, campo n+1, votos, …)

Por fortuna, en las elecciones gallegas han utilizado un sistema informático similar, que emitía ficheros de datos muy parecidos, así que gran parte del trabajo ya lo teníamos hecho. Variaba la forma de desglosar: a nivel autonómico, provincial, comarcal y por municipios.

El Gobierno Vasco facilitaba los datos en un fichero XML único, en el cual también se desglosaban los datos a nivel autonómico, provincial y por municipios.

Una vez que hemos escrito el programa o “script” que analiza estos ficheros de datos, lo más conveniente es guardarlos en una base de datos relacional y escribir las consultas contra esta base de datos.

Como los ficheros de datos se van actualizando cada poco tiempo, lo más práctico es dejar que la computadora haga ella sóla el trabajo. En el caso de los datos del País Vasco, la dirección y nombre del fichero de datos ha sido toda la noche la misma, con lo que pudimos dejar un “script” corriendo cada minuto mientras pedíamos una pizza.

Los ficheros de datos del recuento en Galicia cambiaban de nombre cada vez que se actualizaba el recuento. Esto nos obligó a hacer un poco de trabajo manual, aunque lo teníamos también “semi-automatizado”: llamábamos a un “script” pasándole el nombre de fichero de datos y se disparaba la actualización.

Por otra parte, en la página web se iba mostrando una especie de “marcador” con los datos parciales, el porcentaje escrutado, etc. Obviamente, estos datos provenían de nuestra base de datos, pero no podíamos arriesgarnos a que cada página vista disparase una consulta a la base de datos: saturaríamos los (ya bastante congestionados) servidores rápidamente.

La solución que adoptamos fue la siguiente: un “script” generaba un fragmento de HTML (haciendo las pertinentes consultas) cada 30 segundos, lo escribía en un fichero y lo que la página web mostraba era este HTML “precompilado”. Bueno, bonito y barato ;-) Por otra parte, el lunes por la mañana, previendo que íbamos a tener muchas consultas para buscar municipios, resultados por comarcas, etc, en las páginas de resultados, decidimos “cachear” o guardar los resultados de las consultas, ya que estaba todo escrutado. De esta forma nos ahorramos muchas consultas a la base de datos, que suele ser el cuello de botella de las aplicaciones web.

Si usted busca los resultados electorales de su pueblo y la página tarda un poco en mostrarle los resultados, está de enhorabuena: es usted la primera persona que busca los resultados de este municipio, y, además, los siguientes usuarios que busquen los resultados de este mismo sitio tendrán una respuesta mucho más rápida.

Espero que les haya interesado esta entrada. Si quieren que les cuente algo más, dejen un comentario. Contestaré lo que mejor pueda.

Comentarios (3)

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.

Comentarios (9)

Novedades en www.publico.es/cine

En los últimos meses hemos recibido bastantes sugerencias de los lectores para la sección de cine, así que en las últimas semanas hemos desarrollado algunas mejoras en nuestra sección de cine, www.publico.es/cine

Lo más destacado es lo siguiente:

  • Se separan en distintas secciones las carteleras y las salas de cada población.
  • Las películas que son estrenos salen destacadas en el inicio.
  • Se puede acceder rápidamente a las películas que se emiten en cada sala de una determinada población.
  • Hemos incorporado un buscador por título.
  • Tenemos dos secciones nuevas y diferenciadas: noticias sobre cine y “Público te invita” donde periódicamente se harán públicas invitaciones a películas o preestrenos.
  • Ahora hay RSS de las noticias, promociones, cartelera en ciudades y en cines.

Seguiremos mejorando esta sección, es una de nuestras predilectas.

Comentarios (10)

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

    Times

    Georgia

    Georgia

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

    Arial

    Helvetica

    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

    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:
tipografialinux.png

Mac OSX:
tipografiamac.png

Windows:
tipografiawin.png

Algunos enlaces de interés:

Comentarios (14)

Siguiente Página »      artículos anteriores ->