D3.js para representar matrices Origen/Destino

Viendo un gráfico de Uber, he encontrado una posibilidad muy buena para representar las matrices Origen/Destino de transporte público, peatones, bicicletas o cualquier elemento de Movilidad.

Esta imagen la he tomado de un curso que estoy haciendo de Big Data en unimooc.com

Mirando las posibilidades para representar este tipo de diagrama, que puede venir muy bien para una MOD, tenemos la librería D3.js.

En esta librería encontramos D3 Chord.

https://github.com/d3/d3-chord

Iré completando este post con los pasos a seguir para visualizar los datos .

 

Software para generar gráficos de cuerdas: http://circos.ca/

Opendata en tu web

http://opendefinition.org/

Botones para añadir a tu web, indicando que tienes Opendata disponible:

http://opendefinition.org/buttons/

Botones de contenido, datos y conocimiento abierto.

Mi primer mapa con Leaflet

En primer lugar, entro en la web de descarga de Leaflet:

http://leafletjs.com/download.html

Y me descargo la versión estable (en este caso era la Leaflet 1.0.3). Descomprimo el zip en mi directorio de trabajo (en una carpeta llamada js, lógicamente hay que tenerlo todo ordenado).

Si no queremos hacer esto, podemos directamente:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js">script>

Si miramos lo que hemos descargado, vemos que tenemos un fichero con Leaflet minimizado (leaflet.js), otro fichero con las css (leaflet.css), una carpeta con imágenes, un fichero js con el fuente legible de Leaflet (leaflet-src.js).

Por lo tanto, en nuestro head tendremos que poner:

 
 

En el body de nuestra página deberemos poner un DIV con ID sobre el que queramos poner un mapa:

 

Asegúrate que le pones altura en los CSS a este DIV:

     #mimapaleaflet{
           height:180px;
     }

Después del código que inserta el DIV, insertaremos un script javascript para cargar una capa base:

var mymap = L.map('mimapaleaflet').setView([51.505, -0.09], 13);

L.map es la clase central de la API. Se usa para crear y manipular el mapa. En el mapa establecemos unas coordeanas de la vista y un nivel de zoom.

A continuación añadimos un mapa base como tile layer, en este caso las imágenes de OSM. Crear un tile layer lleva implícito establecer la URL, el texto con la atribución y el máximo nivel de zoom de la capa:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 18
}).addTo(map);

Añadimos un control de escala:

     L.control.scale().addTo(mymap);

Y un marcador (un POI), que se podrá mover al establecerlo como draggable.

     L.marker([51.50, -0.071],{draggable: true}).addTo(mymap);

El resultado es algo así:

Añadir un popup:

Es simple, únicamente hay que añadir a la sentencia de creación del marcador:

     .bindPopup(«<b>Hello world!</b><br>I am a popup.»);

Con esto añadimos un popup que, aparece al hacer clic sobre el marcador y desaparece al hacer clic sobre otro marcador.

.

Hosting gratuito y sin publicidad?

Aquí voy a ir poniendo algunas de las que he utilizado. Iré borrando o modificando según vayan cayendo.

 

http://www.hostinger.es/

En castellano. 2Gb. PHP y MySQL. Posibilidad instalar CMS.

---

 

http://www.000webhost.com/

1.5GB. PHP y MySQL. Recuerdo que me hice una web aquí, desapareció el hosting y luego volvió. Se ve que es como el Guadiana.

---

 

http://byethost.com/

1GB. PHP y MySQL. También incluye Automatic Script Installer (Like Fantastico).

---

 

http://www.110mb.com/

Freemind

Para hacer mapas conceptuales me acabo de instalar Freemind.

Es Opensource y lo puedes descargar en:

http://freemind.sourceforge.net/wiki/index.php/Main_Page

Lo voy a empezar a utilizar para hacerme un mapa de mis ficheros PHP de mi sitio web, para ver las dependencias, quién llama a quién, etc.

Además tiene muchas más funcionalidades. Iré publicando alguna cosilla.

Además, lo tenemos en castellano, que eso es un punto a su favor.

Puedes exportar a HMTL, PNG, XML, etc es decir, a muchísimos formatos.

Wireframing: gliffy.com

Voy a hacer un prototipo de un sitio web en el que estoy liado, así que empezaré a utilizar gliffy.com, ya comentaré cómo va.

 

Me he dado de alta y tienes 15 días de prueba. Puedes guardar tus diagramas y exportar a distintos formatos gráficos.

Bootstrap

http://getbootstrap.com/

En esta página se encuentra un framework que permite hacer aplicaciones web rápidamente. Sobre todo destacan sus botones y menús, así como los grids.

Tiene algunos ejemplos. Como el siguiente, con su barra de navegación y sus columnas con contenido.

La página online de Red Eléctrica Española lo utiliza. http://www.ree.es

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

Solucionar problemas con el cotejamiento UTF8 – ISO 8859-1

Resulta que tengo una base de datos cuyo cotejamiento es ISO 8859-1.

No tenía ningún problema al mostrar los datos en mi página web debido a que tenía puesta la siguiente directiva:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

Además, los ficheros php que componen mi página los había generado con el Bloc de Notas, por lo que todo estaba correcto, todo funcionaba correctamente.

Desde que utilizo Aptana, me apetece migrar la página a UTF8. Se puede configurar en el Aptana para que los ficheros generados estén en ISO 8859-1, pero prefiero migrarlo todo a UTF8.

Comienzo a redactar la página, todo bien, en Aptana, con mis ficheros en UTF8, pero entonces surge un problema. Quiero hacer una página dinámica que lea de la base de datos. Por ahora no quiero migrar la base de datos a UTF8, debo mantenerla en ISO8859-1, ya que la página antigua sigue funcionando.

Si leo datos de la base de datos y los muestro en la página, aparecen caracteres raros para las ñ, tildes, diéresis y demás. ¿Cómo se soluciona esto?

Con PHP es fácil:

$cadenabien = utf8_encode($row[1]);

Suponiendo que $row es el resultado de una sentencia mysql_fetch_row.

La función utf8_encode() recibe una cadena de caracteres y la transforma al juego de caracteres UTF8.

Elegir un CMS

Estoy pensando migrar cierto sitio de cierto servidor web a CMS para poder gestionar más fácilmente los contenidos del sitio.

Este sitio cuenta con Apache + MySQL + PHP, lo que me va a restringir las posibilidades de elección de CMS.

Hoy he encontrado un documento de BILIB que realiza una comparativa de CMS.

El enlace de presentación del documento es http://www.bilib.es/noticias/noticia/articulo/estudio-de-los-sistema-de-gestion-de-contenidos-w/ 

y el documento en sí se encuentra en este PDF.

Primero habrá que definir CMS:

Gestor de Contenidos Web (WCM).

Un Sistema de Gestión de Contenido Web es una herramienta que permite crear, editar, modificar y publicar contenidos Web, especialmente portales Web, ya estén dirigidos a una audiencia interna o externa.

Un WCM puro incluye de forma más habitual otras funcionalidades avanzadas no específicas de estos sistemas como por ejemplo gestión de permisos, sistemas de búsquedas, entornos colaborativos, etc.

En el estudio se realiza una selección final de los CMS se han tenido en cuenta un conjunto muy diverso de características, las más relevantes han sido: licencia de uso, posicionamiento en el mercado, valoración por los expertos, confianza del proyecto y modelo comercial. Tras la investigación del marco referencial, los CMS seleccionados han sido:

Drupal

Ezpublish

Joomla

Liferay

OpenCms

Plone

Typo3

WordPress

Sobre los anteriores voy a ir desechando las distintas opciones para ajustarme a mi proyecto de migración.

Sistema operativo:

Todos son independientes del sistema operativo.

Servidor web:

Plone no utiliza Apache, por lo que lo desechamos. La lista de posibilidades se reduce a:

Drupal
Ezpublish
Joomla
Liferay
OpenCms
Typo3
Wordpress

Bases de datos:

Todos soportan MySQL

Licencia:

Libre

Lenguaje de programación:

Desechamos los CMS Liferay y OpenCms porque el lenguaje que utilizan es Java y no PHP, que es el que utilizamos. Así que la lista se queda en:

Drupal
Ezpublish
Joomla
Typo3
Wordpress

Autenticación:

WordPress no presenta Autenticación Kerberos ni LDAP. ¿Esto es suficiente para desecharlo? Esperamos para ver si realmente necesitamos esta autenticación.

Registro de Auditoría:

Joomla no lo tiene. WordPress está limitado.

Captcha:

WordPress no lo tiene. El resto son complementos gratuitos.

Lenguaje de plantillas:

WordPress no lo tiene.

Contenido drag-n-drop

Joomla no lo tiene.

WAI

Sólo Ezpublish. Drupal limitado. El resto no.

etc. etc. etc.

En fin, en el documento hay muchas opciones.

Mis conclusiones

Antes de leer el documento, si me hubiera tenido que decantar por alguno, probablemente habría sido WordPress o Drupal, desechando Joomla. El resto ni los conocía.

Ahora pienso que instalaría Typo3.

http://typo3.org/

Con respecto al Multiidioma es el mejor.

Puntos a mejorar:

• La información general de proyecto se encuentra solo disponible en Inglés y sería muy recomendable que estuviese disponible en más idioma, y más teniendo en cuenta que si existe diferente documentación que puede consultarte en varios idiomas.
• La instalación y actualización del sistema no está automatizada por lo que el proceso puede llegar a ser algo complejo.

Aunque creo que WordPress es el mejor CMS en cuanto a la facilidad de instalación y actualización.

Tipo de portal.

Si el portal es muy simple, lo recomendable es Joomla o WordPress.

Si el portal es complejo u orientado a la creación de Intranet se recomienda Typo3.

La facilidad de uso no es la caraterística más destacable de Typo3, así que hay que estar atentos.

Estructura de un sitio web

Vamos a imaginar el desarrollo de un sitio web.

Primero realizamos el desarrollo en local, en nuestro disco duro. Lo normal es crear una carpeta que contendrá todo el sitio. En nuestro ejemplo la carpeta la he llamado Mi sitio.

Dentro de esta carpeta estarán todas las páginas web, imágenes, iconos, formularios, scripts y hojas de estilo que necesitemos. Pero, para organizar la información, lo recomendable es que en la carpeta Mi sitio, en la raiz de nuestro sitio web, sólo tengamos un fichero, se llamará de alguna de las siguientes formas:

• indice.html
• indice.htm
• indice.php
• index.html
• index.htm
• index.php

El resto de ficheros estarán contenidos en carpetas, estructurando el sitio. Esto nos permitirá tenerlo todo organizado y perfectamente accesible.

Es importante que el nombre de las carpetas no sea excesivamente largo, no utilizar tildes, espacios en blanco o ñ, e intentar que esté siempre en minúscula.

Enlaces entre páginas del sitio.

Imaginemos que en la carpeta temas hay un fichero llamado temario.html

Si desde indice.html quiero hacer un enlace a temas/temario.html debo hacerlo de la siguiente manera:

<a href=»temas/temario.html»>Mis temas</a>

Si desde temas/temario.html quiero poner un enlace para volver al índice de mi sitio, debo poner lo siguiente:

<a href=»../indice.html»>Volver</a>

Notar que con ../ consigo subir un nivel en la jerarquía de carpetas.

Imaginemos que en la carpeta imagenes tengo un fichero llamado flor.jpg que quiero insertar en la página indice.html que está en el raíz de mi sitio. Escribiré lo siguiente:

<img src=»imagenes/flor.jpg» alt=»florecilla»></img>

¿Y si quiero insertarla en el fichero temas/temario.html?

<img src=»../imagenes/flor.jpg» alt=»florecilla»></img>

Con ../ subo un nivel en la jerarquía (ya estaría en la carpeta raiz) y con imagenes/ entro dentro de la carpeta imagenes.

Vamos a complicar algo el asunto. Ahora imaginemos que dentro de la carpeta temas/tema1 tenemos un fichero que se llama t1.html. ¿Cómo puedo poner un enlace en indice.html hacia este fichero?

<a href=»temas/tema1/t1.html»>Tema 1</a>

¿Cómo hago para insertar un enlace en t1.html que me permita volver al indice de temas, es decir, al documento temas/temario.html?

<a href=»../temario.html»>Ir a Temario</a>

¿Y cómo consigo insertar un enlace en t1.html para ir a indice.html?

<a href=»../../indice.html>Volver al índice</a>

¿y si quisiera insertar la imagen imagenes/flor.jpg en el fichero temas/tema1/t1.html?

<img src=»../../imagenes/flor.jpg» alt=»florecilla»></img>