ProInf.net

Las banderas

Banderas a pantalla completa con más información y más filtros

Utilización de la aplicación

1. Al cargar la página se obtiene un listado aleatorio de 20 banderas
2. Al seleccionar un elemento de la lista se carga la bandera y los datos de la ficha
3. Al realizar una búsqueda se obtiene un nuevo listado de 20 banderas acorde al filtro. La búsqueda se realiza en:
   • El nombre del país
   • El nombre oficial del país
   • El nombre en inglés del país
   • La capital del país
   • Un año en que ya existía el país

XML

Los datos transmitidos del servidor al cliente por cada petición AJAX.

Listado aleatorio de banderas — server/banderas.php

Se produce al cargar la página o al buscar sin indicar ningún valor. El listado está ordenado por país.

<banderas aleatorio="true">
<bandera id="6" inicio="1975" fin="">Angola</bandera>
<bandera id="158" inicio="1918" fin="">Estonia</bandera>
<bandera id="209" inicio="1991" fin="">Tayikistán</bandera>
...
</banderas>


Listado filtrado de banderas — server/banderas.php?filter=ab

El filtro busca en varios campos simultáneamente. Del resultado encontrado retorna un máximo de 20 banderas. Se toma una muestra aleatoria del resultado si es que hay más de 20 banderas.

<banderas filtro="ab">
<bandera id="300" inicio="1992" fin="">Abjasia</bandera>
<bandera id="48" inicio="-1" fin="">Adís Abeba —Etiopía—</bandera>
<bandera id="302" inicio="1992" fin="">Alto Karabaj</bandera>
...
</banderas>


Ficha de una bandera — server/banderas.php?id=150

<ficha id="150">
<pais>Zimbabue</pais>
<inicio>1965</inicio>
<fin/>
<oficial>República de Zimbaue</oficial>
<country>Zimbabwe</country>
<continente>África</continente>
<gobierno>Democracia Parlamentaria</gobierno>
<idiomas>Inglés,Shona,Ndebele</idiomas>
<capital>Harare</capital>
<moneda>Dólar zimbabuense</moneda>
<poblacion>11271314</poblacion>
<extension>390580</extension>
</ficha>


La bandera

La bandera es un archivo XML en formato SVG que está almacenada en la BD. Se trata de una imagen vectorial. Este fichero no se transmite en las peticiones AJAX.

Para visualizar la bandera hay el siguiente código en el documento HTML:

<object id="bandera" data="server/bandera.php?id=" type="image/svg+xml" >

La bandera se toma del archivo bandera.php que la busca en la BD. Cuando llega los datos XML de una ficha se toma el valor del atributo id para modificar el parámetro data del código anterior.

Por ejemplo, para mostrar la bandera de Zimbaue, el código quedaría así:

<object id="bandera" data="server/bandera.php?id=150" type="image/svg+xml" >

El formato SVG en los navegadores web

El archivo SVG tiene problemas de visualización en algunos navegadores web.

• En Microsoft Internet Explorer no se visualiza si no es mediante un plugin.
• En Google Chrome y Safari no sale directamente pero sí que se ve al visualizar la bandera a pantalla completa.
• En Mozilla Firefox y en Opera funciona bien.

SQL

Obtener una bandera a partir del id.

SELECT bandera FROM banderas WHERE id={id}

Listado aleatorio de 20 banderas

SELECT * FROM (
  SELECT pais AS bandera, id, inicio, fin 
  FROM banderas 
  ORDER BY rand() 
  LIMIT 20
) a ORDER BY bandera

Listado filtrado y aleatorio de hasta 20 banderas

SELECT * FROM (
  SELECT 
    CASE 
      WHEN pais LIKE {filter} THEN pais 
      WHEN oficial LIKE {filter} THEN oficial 
      WHEN country LIKE {filter} THEN country 
      WHEN capital LIKE {filter} THEN concat(capital,' —',pais,'—') 
      ELSE pais 
    END AS bandera, 
    id,
    inicio, 
    fin 
  FROM 
    banderas 
  WHERE 
    pais LIKE {filter} OR 
    oficial LIKE {filter} OR 
    country LIKE {filter} OR 
    capital LIKE {filter} OR 
    {year} BETWEEN inicio AND coalesce(fin,9999) 
  ORDER BY 
    rand() 
  LIMIT 20
) a ORDER BY bandera

Ficha de una bandera a partir del id

SELECT 
  pais, inicio, fin, oficial, country, continente, gobierno, 
  idiomas, capital, moneda, poblacion, round(extension) as extension 
FROM banderas 
WHERE id={id}

Archivos utilizados

• Base de datos:

  La base de datos mundo en MySQL. Dentro está la tabla banderas. El campo bandera es de tipo texto y almacena la bandera en formato SVG.

• Servidor (carpeta server):
  • conexion.php — Paŕametros de conexión con la BD: servidor, base de datos, usuario y contraseña.
  • db.php — Clase para obtener arrays a partir de una sentencia SQL parametrizada.
  • xml.php — Clase que convierte arrays en cadenas XML.
  • bandera.php — Retorna la bandera en formato SVG según el parámetro id. Por ejemplo: bandera.php?id=46
  • banderas.php — Recibe las peticiones del cliente y responde en XML. Ejemplo de peticiones: banderas.php — Listado aleatorio de banderas banderas.php?filter=fr — Las banderas seleccionadas. banderas.php?id=46 — Ficha de una bandera.
• Cliente:
  • banderas.html — Estructura del documento.
  • banderas.css — Estilos en cascada.
  • banderas.js — Código cliente que realiza las peticiones al servidor, obtiene las respuestas en XML y altera la estructura del documento mediante DOM.
  • prototype.js — Ampliación de Javascript prototypejs.org

Bibliografía

• Wikipedia
  • Lista de países
  • Imperios
  • Países extintos
  • Banderas de España
• Wikimedia:SVG flags
• Wapedia: SVG flags
• Bastisoft: SVG flags
• CRW flags

Base de datos

En el archivo banderas.sql.7z hay 399 fichas en MySQL.