jueves, 17 de noviembre de 2016

Mis Problemas con la WIFI

MIS PROBLEMAS CON LA WIFI

He estado unos días intentando mejorar la wifi en mi casa y os comento las opciones que he estado mirando y las posibilidades que tiene cada una.

En las instalaciones normales (caseras) de wifi nos encontramos con un conjunto de aparatos que, conectados a la línea de teléfono son capaces de darnos línea de teléfono, línea de datos, wifi e incluso televisión.
El conjunto de aparatillos es el siguiente:
Router (que hace la función de puerta de enlace con el exterior, dirige la información desde el exterior a el aparato en concreto que la ha solicitado en el interior y modula y demodula (mo-dem) la señal para transformar el formato de la información entre el interior y el exterior).
y Punto de acceso inalámbrico (que crea una red wifi a partir de una conexión en la red local(cableada)).
hoy es normal que estos dos se hayan juntado en uno solo, entonces se llama ‘router wifi’, que es un aparato que lo hace todo.
Si tienes televisión también hay otro aparato mas llamado ‘descodificador’ para descodificar la señal (y que incluye una salida hdmi o similar para enchufarlo a la tele y un mando a distancia, tan útil si estas viendo la tele desde el sofá). El descodificador esta conectado al router para recibir la señal de televisión y esta conexión puede hacerse por cable o por wifi.

Entonces, para no irse por las ramas, en una instalación casera de wifi puedes tener uno, dos o tres aparatos.
  • Un router y un punto de acceso wifi o bien un router wifi
  • y opcionalmente un decodificador para la TV (si es el caso).

El descodificador para la tele lo tendrás muy cerca de la misma, encima o debajo de esta generalmente.
El router y el punto de acceso…. en el peor sitio posible, seguro. Por eso estas leyendo estas líneas…

Hay una imagen de un articulo acerca de wifi (Articulo WIFI) que da una idea muy clara de como se trasmite la señal wifi por tu casa...





Como puedes ver, la señal, no atraviesa las paredes con toda facilidad, por no hablar de los muros, suelos o techos, que es mucho peor. La distancia es también un factor muy a tener en cuenta.

Deberías tu hacerte esta esquema mental (o sobre el papel) con tu propia instalación wifi:

Esquema de tu instalación wifi:

Esquema de como se debilita la señal según la distancia:

Esquema de como se debilita la señal según la distancia y las paredes del apartamento:
Como ves, de tu ideal mapa inicial, la señal se ha ido degradando por diversos factores y en la imagen final ya hay zonas oscuras (y esto es un apartamento pequeño)… si es en esos puntos donde vas a tener tu receptor (tu ordenador), vas a tener mala señal wifi.
(Techos y suelos son mucho peores que las paredes, la escayola no, que es un material ligero y sin entramado interior, pero el techo o suelo tiene mucho mas grosor y masa y generalmente entramado metálico también)
Vale, ya hemos intentado ponernos en situación, ahora vamos a pensar en posibles soluciones.

Las soluciones se pueden aplicar en tres sitios diferentes. En el origen (en el emisor), en el destino (en el receptor) o a mitad de camino (en la señal mientras que esta viajando).
Revisa las soluciones, analiza cual crees que es tu caso, e intenta aplicarlas, las hay muy baratas (prácticamente de coste 0) hasta mas caras y/o complejas.

Mejoras que se pueden realizar en el emisor:

  • 1.- Reposicionar un poco el emisor.
  • 2.- La lata de cerveza (puede ser lata de Cocacola, pero no queda tan bien como titular)
  • 3.- Cambiar el emisor por otro mas potente
  • 4.- Utilizar mas de un punto de acceso simultáneamente
Mejoras a mitad de camino:

  • 5.- Utilizar un repetidor (amplificador) de señal.
Mejoras en el receptor.
  • 6.- Antenas y receptores dedicados

Detalle de las posibles soluciones:

1.- Reposicionar el emisor:

Si, esto es lo primero que debes intentar, si tienes tu wifi en una esquina de una habitación recóndita, prueba a estirar lo que puedas los cables (estirar sin romper, me refiero a no dejarlos recogidos sino estirarlos hasta una posición mas céntrica de tu casa, en ocasiones solo 5 metros ya marcan la diferencia.

En este caso es interesante saber que la escayola no es un problema, por lo tanto, si ‘el centro’ de tu casa es un pasillo, podrías poner la wifi en ese pasillo, si eso no queda bonito en el pasillo, puede estar alojado en el techo del pasillo, sobre la escayola, en el hueco que queda entre la escayola y el techo.

Esta solución, (en mi caso ha funcionado muy bien) requiere llevar cables hasta el techo del pasillo (cable de fibra óptica de entrada de linea en mi casa, y cables de alimentación de corriente)



2.- La lata de cerveza:

Solo busca ‘lata de cerveza wifi’ en Internet y veras a que me refiero, encontraras una colección de artículos y videos para fabricar accesorios para las antenas wifi, para amplificar su señal en una dirección concreta.


Tengo que decir que este invento yo no lo he probado, pero teniendo en cuenta los materiales necesarios, es una prueba que merece la pena realizar.



3.- Cambiar el emisor por otro mas potente.

En este caso, tienes que validar las características de tu emisor wifi y validar si son lo mas adecuadas para tus necesidades. Existen wifis mas potentes que otras, en diversos anchos de banda, de largo alcance o para zonas de alta densidad de conexiones (imagina lo diferente que es la necesidad que tienes en tu casa donde hay tres o cuatro usuarios conectados y un montón de paredes que la necesidad en un aula de clase, donde, en un espacio pequeño,
sin paredes, a todos los asistentes se les dice, ‘miren en Internet esto o aquello’).
Si vas a cambiar de emisor wifi, dedícale un tiempo a analizar que características tiene tu actual wifi y que hay en el mercado que resuelva tu problemática.





4.- Utilizar (añadir) otro ‘punto de acceso’.

En tu instalación actual, puedes añadir otro punto de acceso wifi adicional, esto es otro aparatillo, muy parecido al router que ya tienes pero que solo genera una red wifi a partir de una conexión por cable ethernet (cable de red), exteriormente es parecido al router wifi pero interiormente tiene menos componentes y por lo tanto es mas sencillo y mas económico, añadir otro punto de acceso requiere poner un cable desde el router inicial al nuevo router, pero si hay zonas en tu casa sin wifi es la mejor solución. En casas de dos plantas es mucho mas sencillo poner un cable de una planta a la otra y añadir un nuevo punto de acceso wifi que intentar amplificar la señal para que sea capaz de atravesar suelo y paredes.

Para este caso, si ya disponías de un antiguo router wifi, este antiguo router wifi se puede configurar para que haga la función de punto de acceso adicional para el que ya tienes en funcionamiento. La configuración no es compleja, pero requiere un poquito de conocimientos, si este es tu caso, tu presupuesto seria solo del cable de red entre los dos routers (merece la pena esta opción).

En la imagen un punto de acceso TP-Link TL WA801.



5.- Utilizar un repetidor – amplificador intermedio.

Otro de los aparatos que existen para redes wifi caseras es el amplificador o repetidor de señal, es un aparato que se conecta a la corriente solamente (no requiere cable de red) y es capaz de amplificar la señal de tu red actual. Tienes que elegir el sitio donde ponerlo, no lo puedes poner donde ya no hay cobertura wifi, sino en un punto intermedio entre el área que SI tiene buena wifi y el área que NO tiene wifi. Posiblemente debas hacer varias pruebas hasta encontrar las mejor posición.

Esta es una solución muy rápida y limpia. No requiere cableado y no requiere conocimientos de configuración, solo hay que emparejar tu amplificador de red con el router (y esto se hace con un simple botón llamado WPS).

Aquí tenéis una foto de un repetidor, como veis es pequeño y discreto.




6.- Antenas y receptores dedicados.

También puedes hacer mejoras en el aparato que esta utilizando la wifi (no siempre, si es un teléfono, probablemente no, pero si es un ordenador seguro que si) es decir en ved de intentar mejorar la señal, intentar mejorar el aparato que recibe y utiliza esta señal (el ordenador).

Existen en el mercado diferentes tipos de antenas wifi para portátiles o sobremesa, que se conectan por puerto USB, y que pueden poner en la misma habitación que usas el pc o en otra (con su cable usb) e incluso que se pueden montar en el exterior de tu casa. De estas antenas la primera decisión es si la quieres unidireccional o bien omnidireccionales (todas direcciones). Las primeras se utilizan si sabes donde esta el emisor de la wifi a la que quieres conectarte, la segunda para cualquier antena emisora alrededor, en general, dependiendo de las características de la antena si puedes conseguir mejorar tu conexión wifi. En general si buscas mas información de antenas, veras que se consiguen largas distancias (mas de 1 Km) si no hay objetos entre el emisor y el receptor, es decir si hay una visión directa entre emisor y receptor. Arboles, paredes, casas, etcétera interfieren en la recepción de la señal.



Ejemplos de antenas omnidireccionales.



y de antenas unidireccionales.



Espero que esta información ‘Mis problemas con la wifi’ haya servido para cambiar a ‘Mis soluciones con la wifi’.

Todo esto, y por supuesto, el asesoramiento que requiere lo podéis encontrar en cualquiera de vuestras tiendas Beep (www.beep.es)

viernes, 22 de abril de 2016

¿Quieres más?. Aqui hay más, todo lo que quieras!!

Siempre llega el momento en el que quieres más, quiero más y más y más.... Siempre hay una funcionalidad que debe mejorarse en determinado punto, hay una opción que no esta lo bastante desarrollada, un tema que no ha sido tratado todavía, una vinculación que podría mejorarse, una integración posible no desarrollada, efectivamente, siempre falta algo más.

Bien, TU puedes añadir eso que falta. En esta publicación, te entrego la guía de desarrollo de nuevas funcionalidades para MyFamilyServerV2. Una guía para añadir nuevos desarrollos en MyFamilyServer. Ya no hay escusas, cualquier cosa que puedas necesitar, tienes un documento para guiarte en el desarrollo. TODO el software utilizado en MyFamilyServer esta disponible en internet de forma gratuita y en la web y blog de MyFamilyServer están las guías para hacerlo funcionar.

Tienes todo el software, la documentación, y las herramientas para hacerlo, esto es todo, tu le pones nombre a la nueva funcionalidad y adelante.



Anexo a este bonito post esta disponible la documentación para realizar nuevos desarrollos en MyFamilyServerV2. El documento esta disponible en formato PDF en Dropbox. Es un documento que he escrito en ingles, y que explica como incorporar nuevos desarrollos en la aplicación siguiendo el orden de ejecución, al seguir el orden de ejecución puedes ir ejecutando cada componente que desarrollas dentro de la aplicación y ver los resultados paso a paso. Hay explicación para crear nuevas entradas en el menú, elegir entre las diversas posibilidades que te da el controlador (o mejorarlas), definir como es el proceso de negocio y sus funcionalidades y finalmente definir la capa de presentación (integrada con el resto de la aplicación), y como no, en multi-lenguaje y utilizando arquitectura MVC. 

martes, 12 de abril de 2016

MVC en MyFamilyServer


Hoy no traigo cosas nuevas en el blog de MyFamilyServer, esta vez le toca a un clásico, la arquitectura de desarrollo MVC, Modelo Vista Controlador. 
La arquitectura de desarrollo Modelo Vista controlador es algo que hace años que nos acompaña, pero muchas veces, es más fácil y rápido desarrollar algo (pequeño en un principio) de forma ordenada y estructurada, bien documentada... pero mezclando presentación, con acceso a datos y con flujo de ejecución. Esto al principio resulta bien pero según avanzamos se convierte en una carga un poco más pesada.
He redactado un documento que no cuenta nada nuevo, todos conocemos o hemos oído hablar de arquitecturas de desarrollo y, como no, de la arquitectura MVC, pero este documento te va a ayudar a pensar como aplicar la arquitectura MVC, en particular, como yo he aplicado la arquitectura MVC en MyFamilyServer; sé que no es nuevo, pero muchas veces, necesitas que te lo recuerden o necesitas volver a leerlo para dar un pasito más en el desarrollo de calidad profesional.
El documento parece extenso (26 páginas) pero no es así, esta escrito en tamaño de letra 14, que se lee fácil y rápido y he incluido gráficos y dibujos siempre que me ha parecido que la explicación se dejaba más clara con una representación gráfica. Incluye muestras de código realizado en PHP y HTML.


Este documento, forma parte de la documentaron generada para MyFamilyserver V2, como el resto de documentación de myFamilyServer V2 lo he escrito en ingles ya que tengo más demanda de información en ese idioma.

Aquí os dejo el vinculo para realizar la descarga desde Dropbox.

viernes, 18 de marzo de 2016

Cálculo de las fases lunares



Poniéndole el lazo al calendario de MyFamilyServer (V2) incluí en el calendario la posibilidad de ver las temperaturas y precipitaciones previstas para los próximos días, el santo del día y también la fase en la que estará la luna.

Hoy escribo acerca del cálculo de la fase de la luna.

Solo os presento cálculo, ya que la presentación de la luna como un icono (una fuente) ya está explicado en publicaciones anteriores de este blog.

Me he basado únicamente en dos datos que (según mi información) son correctos y con esos dos datos he realizado todos los cálculos.

  • Primer dato: Una fecha /hora en la que ha habido luna llena.
  • Segundo dato: Cuánto tiempo dura un ciclo lunar completo.
Primer dato. Cuándo ha sido luna llena. He tomado la primera luna llena de 2016, Ha habido luna llena el 24 de enero de 2016 a las 02:46:20.
Segundo dato. Cuánto dura un ciclo lunar. Un ciclo lunar completo dura 29 días, 12 horas, 43 minutos y 12 segundos.

Con estos dos datos la cosa es sencilla, a partir del 24 de enero, cada 29 días y medio tendremos luna llena de nuevo.

Los cálculos los realizo en segundos, que es la forma natural de trabajar con fechas para el servidor.

El cálculo es el siguiente:

Ha habido luna llena el 24 de enero de 2016 a las 02:46:20

A partir de esta momento, cada 29 días, 12 horas, 43 minutos y 12 segundos sera de nuevo luna llena.

    29 días en segundos es:    29 * 24 * 60 * 60 = 2.505.600
    12 horas en segundos es:         12 * 60 * 60 =      43.200
    43 minutos en segundos es:             43 * 60 =        2.580
    12 segundos en segundos:                       12 =             12
                                                                  + _____________
    Resultado:                        Cada ciclo lunar son  2.551.392 segundos.

Debemos también conocer cuántos segundos han pasado desde el 24 de enero hasta la fecha en la que queremos conocer la fase lunar. Esto es una simple resta (recordar que estamos operando en segundos y obtenemos el resultado en segundos).

El resultado de esa resta es el número de segundos entre la luna llena que conocemos y la fecha actual. Ahora dividimos esa cantidad de segundos entre el tiempo que dura un ciclo lunar (también en segundos) y nos quedamos con el resto de la división. Con esa operación no sé (no me interesa) cuántos ciclos lunares completos han pasado pero SI sé cuánto tiempo en segundos ha pasado del ultimo ciclo lunar (el de la fecha que queremos conocer).

Supongamos que quiero dividir el ciclo lunar en 8 fases:

Luna-llena, Luna-gibosa-menguante, Cuarto-menguante, Luna-menguante, Luna-nueva, Luna-nueva-visible, Cuarto-creciente y Luna-gibosa-creciente.

A partir del resto de la división anterior, si el resto que he obtenido está comprendido entre 1 y 318.924 segundos estamos en la primera fase.
Si el resto que he obtenido está comprendido entre 318.925 y 637.858 estamos en la segunda fase.
Si el resto que he obtenido está comprendido entre 637.859 y 956.782 estamos en la tercera fase y así sucesivamente.

Básicamente esto es todo, hay una operación más que es restar algo de tiempo al inicio, ya tengo el momento exacto de luna llena del 24 de enero, debo restarle la mitad del tiempo de una fase (159.462 segundos) para considerar que la fase de luna llena comienza media fase antes y termina media fase después.

Ahora os muestro el código utilizado para el cálculo, curiosamente es más fácil codificarlo que explicarlo. Veréis que el código es sencillo.



function calcula_fase_lunar($fecha){
#   $lunallena = mktime(hora, minuto, segundo, mes, dia , año );
    $lunallena = mktime(02, 46, 20, 01, 24, 2016);
#   24 de enero de 2016 a las 02:46:20
#   inicio de la luna llena es :
    $iniciolunallena = $lunallena - 159462;
    $fecha = strtotime($fecha);
    $year = date('Y', $fecha);
    $month = date('n', $fecha);
    $day = date('j', $fecha);
    $estanoche = mktime(23, 50, 00, $month, $day, $year);
#   calculamos la luna que de esta noche. El dia entregado a las 23:50:00
    $segundosentrelllen = $estanoche - $iniciolunallena;
#   Segundos entre luna llena y esta noche
#   resto de la division entre el tiempo de un ciclo y los segundos desde luna llena hasta ahora
    $resto = $segundosentrelllen % 2551392;
#   Si es entre      1 y 318924  - Primera fase
#   Si es entre 318924 y 637858  - Segunda fase
#   Si es entre 637858 y 956782  - Tercera fase y asi sucesivamente
    for ($fase = 0; $fase <= 8; $fase++) {
        if ($resto >= 318924) {
            $resto = $resto - 318924;
        } else {
            break;
        }
    }
#  ahora ponemos el calculo en letras (el array debe estar bien ordenado)
    $fase_array = array(
        'Luna-llena', 'Luna-gibosa-menguante', 'Cuarto-menguante', 'Luna-menguante',
        'Luna-nueva', 'Luna-nueva-visible', 'Cuarto-creciente', 'Luna-gibosa-creciente'
    );
    $fase = $fase_array[$fase];
    return $fase;
}

Es así de fácil, ya podéis calcular la fase lunar y utilizarla en cualquier sitio con un sencillo cálculo matemático.

La verdad es que no sé si hay desviaciones a largo plazo, yo lo he validado con fechas de los próximos 10 años y me ha resultado correcto. Si conocéis mejoras en el calculo, no dejéis de comentar.

miércoles, 9 de marzo de 2016

Incorporar el santoral a tu web



En anteriores publicaciones he explicado como incorporar datos del tiempo o de la fase lunar a tu web (o a tu calendario).
Yo, para completar mi calendario le he incorporado el santo del día.
He realizado varios intentos buscando algún API del santoral (un sitio donde un ordenador pueda hacer una llamada pasando algo de información -la fecha por ejemplo- y recibir el santo correspondiente a esa fecha) y no lo he conseguido, no he encontrado ningún API del santoral, SI he encontrado varios widgets y he sacado la información de los mismos.

En este articulo te explico como extraer la información del widget del santoral para integrarla en tu web o tu calendario, y además podrás utilizar esta idea para trabajar con cualquiera otra integración.

A modo de ejemplo, aquí tienes varias direcciones de componentes para integrar en tu web el santo del día:




Si lo que necesitas es un widget, encontrarás documentación fácil en las webs respectivas de cómo integrarlo, en este post quiero explicar como trabajar con el contenido que te proporcionan para extraerlo y darle otros usos.

Esta función recupera el string (el nombre) del widget que proporciona santopedia.com.


function recuperar_santoral($fecha) {
    # Aqui voy a recuperar el santoral desde http://www.santopedia.com
    $url = "http://www.santopedia.com/widget.html";
    $widgetsantoral = file_get_contents($url);
    $posini = strpos($widgetsantoral, 'target="_blank">');
    if (!($posini === false)) {
        $santo = substr($widgetsantoral, $posini + 16, 150);
        $posfin = strpos($santo, '</a>');
        if (!($posfin === false)) {
            $santo = substr($santo, 0, $posfin);
        }
    }
    return $santo;
}

Vamos a explicarlo un poco:
En la definición de la función recibo una fecha (que no utilizo para nada, ya que el widget te da el santo de hoy, sin que le pases parámetros).
Defino la variable $url con la url que voy a invocar.
y utilizo la instrucción 'file_get_content'. Con esta instrucción en vez de presentar en pantalla el resultado que me entrega el widget, lo que hago es almacenarlo en una variable, ahora busco dentro del contenido de esa variable el santo de hoy.
Hay que analizar el contenido (hay que poner la url en el navegador, ejecutarlo y con el widget en pantalla seleccionar 'view page source').

Esto es lo que presenta el widget:










Y esta es la información que te entrega 'view page source':




















Entre la información, hay que buscar dentro del <body> el texto que estamos buscando, en este caso 'San Juan de Dios', e identificar el string constante anterior que le precede. El string que encuentras delante es 'target="_blank">'.
Con esto ya sabemos donde buscar.
A continuación identificar el string constante que encuentras detrás de 'San Juan de Dios' , que es '</a>' y ya lo tenemos.
Ahora identifico en que posición aparece el string anterior y recorto a partir de ese punto (16 caracteres más ya que mi string de búsqueda es de 16 caracteres), Elimino también los caracteres a partir de </a> y finalmente en la variable $santo me queda el texto 'San Juan de Dios'.

Los comandos clave que he utilizado son sencillos: 
  • file_get_contents para obtener y mantener la información que me entrega la web del santoral.
  • strpos para identificar en que posición esta la información que busco.
  • substr para recortar de toda la página la información necesaria.

¿Como he utilizado esta función?:
Estoy presentando, en la cabecera de mi calendario diario, algo de información adicional (Santoral, fase lunar, tiempo actual), esta información la presento en un cuadro, justo por encima de la agenda del día.
En el calendario es configurable qué información se presenta en este cuadro.
Toda la información la compongo en una variable llamada '$contenido' que finalmente presento en pantalla.

Así es como incorporo el santo del día a mi cabecera del calendario:


$santo = recuperar_santoral($identificador);
$contenido = $contenido . '. Santo de hoy: ' .
      '<acronym title="Informacion gracias a www.santopedia.com">' .
      $santo . ' </acronym>';
Es importante, SI, es importante, mantener la información de la fuente o vínculos que el widget nos estaba entregando, nuestra intención no es robar la información, solo es adaptarla a nuestro formato, por lo tanto debemos presentarla en nuestra pantalla también con la referencia a su origen, tal como nos la han entregado en el widget. En este caso he definido el santo como un acrónimo, con esta definición aparece subrayado (seleccionable) y al poner el ratón encima nos muestra la información contenida en title. Esta información es importante mantenerla.

Cualquier duda... comentar.

miércoles, 2 de marzo de 2016

Incorporar la previsión del tiempo a tu web (II)


Hace unos días, publiqué una entrada acerca de como incorporar los datos del tiempo a tu web, en esa idea he estado trabajando para incorporar los datos del tiempo y la fase lunar en MyFamilyserver V2...
He pasado unos días buscando iconos (fuentes en realidad) que me gustaran para incorporar los datos del tiempo a MyFamilyServer y hacer una pequeña representación de la fase de la luna, la verdad es que no he encontrado nada que me haya convencido completamente, así es que he creado una fuente específica para ello, con los signos del tiempo que me gustan y las fases lunares y lo he codificado con la misma codificación que entrega Openweathermap de tal modo que sean fáciles de utilizar (en la medida de lo posible). También he creado una hoja de estilos sencilla para utilizar las fuentes (y un procedimiento para cachear los datos del tiempo en un fichero .json y hacer llamadas sólo cuando la información de previsión del tiempo en el servidor es más antigua de una hora, pero del procedimiento de cacheo no hablo en esta publicación ya que me extiendo demasiado) .

En este post os explico cómo hacer todo esto paso a paso para que podáis incorporarlo también a vuestras aplicaciones (podéis utilizar las fuentes que he creado o generar nuevas con herramientas gratuitas que os propongo).

Vamos a verlo como siempre muy muy despacio.

En la anterior publicación, os expliqué cómo realizar la llamada a la web del tiempo para recuperar la previsión de hoy o de los próximos días.
(ver entrada: 
Supongo que has leído y comprendes lo que se explica en esa publicación, por lo tanto, ya dispones de un procedimiento para llamar a la web del tiempo y recuperar la información que necesitas, ahora vamos a plantear cómo ponerla en fuentes. (Es decir, este post es más de fuentes que de tiempo).
En este caso intervienen dos componentes más: un fichero con la definición de una fuente y una hoja de estilo que te ayuda a trabajar con la fuente.
El fichero de definición de fuentes es un fichero .ttf que he generado con la herramienta FontForge.
La hoja de estilos para trabajar con la fuente que debes incorporar a tu desarrollo es un fichero del tipo .css .
Con las fuentes y la hoja de estilo ya lo tienes todo resuelto.

Parte 1: Las fuentes.
Por supuesto, en internet encontrarás diversas herramientas para trabajar con fuentes, más sencillas, más complejas con más y menos funciones. Yo he elegido FontForge. Es muy completa, se puede instalar en Linux, Windows y Mac, y permite la definición de las fuentes al 100% trazo por trazo y con múltiples opciones y además es gratuita. Os explico un poco cómo utilizarla para que podáis trastear con las fuentes que he creado (o no, y utilizarlas tal cual que están muy monas).
Esta es una imagen de las fuentes que he creado para el tiempo:


Si quieres cambiarlas o necesitas crear otras fuentes SI tienes que utilizar la herramienta FontForge, si estas te gustan, no necesitas ninguna herramienta (y puedes pasar al paso 2).
Fontforge tiene sus sitios web donde descargar y también mucha documentación disponible. En este ejemplo vamos a utilizar poquitas cosas (para no liarnos).
1.1 FontForge: Instalación.... seguir los pasos de instalación según el sistema operativo (siento no dar más instrucciones, pero es así).
1.2 Abrir el fichero mfs-owf1.tff (el nombre viene de las iniciales MyFamilyServer -OpenWeatherFonts 1. El fichero lo podéis descargar de mi cuenta de dropbox, no necesitas registrarte, solo sigue el enlace al pie del post) que contiene estas fuentes y trastear.
Las fuentes están codificadas igual que la codificación del tiempo de OWM (openWeatherMaps.org) con una C delante (C200 es buen tiempo, C321 es tormenta y C601 es nieve)
Las fases de la luna están codificadas de forma consecutiva desde C370 hasta C377.
Vale, ya tienes la herramienta instalada, y te has descargado las fuentes en el mismo directorio donde ejecutas tus programas en php (lo ordenado es tener un directorio especifico de fuentes, pero para empezar vamos a tener los tres ficheros: fuentes, css y php juntos). Ejecutas la herramienta FontForge y lo primero que te pide es el archivo de fuentes con el que vas a trabajar, buscas por tu disco donde lo has dejado (se llama mfs-owf1.tt) y seleccionas OK. Verás una cuadricula con todas las fuentes (recuerda están en el rango de las C200 -C900, es decir mucho mas abajo). Si seleccionas, por ejemplo, la fuente C370 (Luna menguante) verás un cuadro de trabajo como este.


En este cuadro de trabajo puedes añadir, quitar, cambiar romper... de todo, debes leer el manual de la herramienta disponible en:  http://designwithfontforge.com/en-US/index.html
Vale, ya has trasteado un poco, lo has estirado, colocado, añadido, quitado... al final tienes que hacer dos acciones: grabar (en File - Save all. y lo grabas con el mismo nombre de fichero) y a continuación generar las fuentes (en File - Generate Fonts), por ahora vamos a generar TrueType (debes seleccionar True Type en el cuadro que hay bajo la lista de ficheros y generarlas con el mismo nombre, el programa te propondrá un fichero del tipo .ttf al seleccionar TrueType, como ves hay muchos formatos de fuentes, tu trabajas con la herramienta y generas los formatos que necesites, por ahora vamos a generar solo .ttf). Al grabar es posible que te avise de que hay algunos errores en las fuentes, dale a grabar en todo caso.
Ok, genial ya tienes tu fichero de fuentes como tu lo quieras, ahora vamos a utilizarlo.
Para utilizar este fichero de fuentes a nuestro antojo, necesitamos de una hoja de estilo (css).

Parte 2. La hoja de estilo.
La hoja de estilo es un fichero del tipo .css que acompaña a las aplicaciones web para dar formato a las páginas web, en general en las páginas .html se define el contenido y en los ficheros .css se define el formato.
Tu hoja de estilo debe contener:
La instrucción @font-face, que define que nombre le das a la fuente y donde encontrar el fichero de fuentes.
La propiedad font: donde se especifica el formato de la fuente definida en @font-face.
Tantas definiciones de fuentes como necesites.
Aquí va un ejemplo muy muy sencillo:
Fichero mfs-owftest.css para mostrar una de nuestras fuentes:


@font-face {
  font-family: 'mfsowfont';
  src:  url('mfs-owf1.ttf') format('truetype');
}
.mfsowf { font: normal normal normal 14px/1 mfsowfont;  }
/*  Luna menguante   */
.mfsowf-370:before
{ content: "\C370"; }
Un poco de explicación:
En @font-face definimos un nombre (atributo font-family) y definimos donde encontrar nuestro fichero de fuentes, en este ejemplo los tres ficheros -fuentes, css y html - están en el mismo directorio, por eso sólo se especifica el nombre del fichero, si lo cambias de directorio debes especificar ruta y nombre de fichero.
En la siguiente declaración definimos una clase con la definición de atributos de la fuente, los atributos de una fuente son: font-style font-variant font-weight font-size/line-height font-family y hemos definido todos ellos 'normal' para la fuente declarada anteriormente.
Finalmente le damos un 'nombre' a cada fuente (en este ejemplo solo para la fuente C370).


Vamos a completar el ejemplo con un .php que utiliza esta hoja de estilo para mostrar el icono de la luna (es una mezcla .html y .php para hacer un ejemplo en pocos pasos, no debes mezclar presentación y lenguaje de programación, no es una buena práctica):
Fichero HelloWorldWeathertest.php:


<html lang="es" >
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
        <link href="mfs-owftest.css" rel="stylesheet" type="text/css">
        <title>Hello WeatherFonts</title>
    </head>
    <body>
        <?php
        $icono = "mfsowf mfsowf-370";
        echo '<i class="' . $icono . '"></i>';
        ?>
    </body>
</html>
Un poquito de explicación para este programa:
En la cuarta linea, definimos que la hoja de estilo a utilizar es mfs-owftest.css (la que hemos definido un poco más arriba), es bueno que en un programa puede haber más de una hoja de estilo, así que puede utilizar una para estas fuentes y otra para el resto de estilos que ya estabas utilizando, sin tener que mezclarlas.
En el cuerpo defino la variable $icono con el valor de la clase y la fuente definida y con el comando echo lo presento en pantalla.

La ejecución de este programa solo muestra una luna menguante (en el hemisferio norte, creciente en el hemisferio sur) en pantalla, la luna es una fuente (un carácter), no una imagen o una foto.
Si ves una pequeña luna en pantalla YA LO TIENES!! genial, has conseguido definir fuentes, declararlas en una hoja de estilos y utilizarlas en un programa. Muy Bien.
Ya que todo va bien, vamos a complicarlo un poquito más.

En la hoja de estilos, define tamaños. Añade las líneas:

/* Definición de tamaños  */
.mfsowf-2x { font-size: 2em;}
.mfsowf-3x { font-size: 3em;}
.mfsowf-4x { font-size: 4em;}
Y en tu programa utiliza estos tamaños:

$icono = "mfsowf mfsowf-370";
echo '<i class="' . $icono . '"></i>';
echo '<i class="' . $icono . ' mfsowf-2x"></i>';
echo '<i class="' . $icono . ' mfsowf-3x"></i>';
echo '<i class="' . $icono . ' mfsowf-4x"></i>';
(Atención a las comillas y los espacios)

Puedes ponerle un cuadrito a los caracteres, en la hoja de estilos, define borde. Añade las lineas:

/* Definición de borde */
.mfsowf-border {
    padding: .2em .2em .2em;
    border: solid 0.08em #eeeeee;
    border-radius: .1em;
}
Y en tu programa utiliza estos nuevos bordes (y ya que te pones, también color):

$icono = "mfsowf mfsowf-370";
echo '<i class="' . $icono . '"></i>';
echo '<i class="' . $icono . ' mfsowf-2x"></i>';
echo '<i class="' . $icono . ' mfsowf-3x"></i>';
echo '<i class="' . $icono . ' mfsowf-4x"></i>';
echo '<i class="' . $icono . ' mfsowf-2x mfsowf-border"></i>';
echo '<i class="' . $icono . ' mfsowf-3x mfsowf-border"></i>';
echo '<i class="' . $icono . ' mfsowf-4x mfsowf-border" style="color:#FF0000"></i>';
Y finalmente define la lista completa de fuentes: (Aquí solo un ejemplo, en anexo la lista completa).

/* thunderstorm with light rain */
.mfsowf-200:before { content: "\C200";}
/* thunderstorm with rain */
.mfsowf-201:before { content: "\C201";}
/* thunderstorm with heavy rain */
.mfsowf-202:before { content: "\C202";}
/*  light thunderstorm  */
.mfsowf-210:before { content: "\C210";}
/*  thunderstorm  */
.mfsowf-211:before { content: "\C211";}

Bueno, con esto puedes definir fuentes, definir bordes, tamaños, colores, y también utilizar con confianza otras fuentes chulas, como por ejemplo las fuentes de Font-Awesome (https://fortawesome.github.io/Font-Awesome/) o cualquiera otras que te gusten. En anexo dejo la hoja css con todas las fuentes definidas (para el tiempo y la luna), el fichero ttf con las fuentes en si y un sencillo programa que te muestra todas las fuentes en pantalla.

Seguro que te será de gran utilidad.

(Los anexos se encuentran en Dropbox, el vinculo que dejo aquí te permite descargarlos libremente)
Anexo1: Fuentes  mfs-owf1.ttf
Anexo2: Hoja de estilo mfs-owfandnight.css
Anexo3. Sencillo programa para mostrar las fuentes HelloWorldWeather.php


Finalmente unos consejos:
Cuando hagas pruebas verás que los servidores 'cachean' de todo, la hoja de estilo, las fuentes... si has cambiado algo pero no cambia la ejecución, vas a tener que reiniciar para que todo vuelva a leerse (yo uso un pequeño truco que es llamar a la hoja de estilo con un parámetro cualquiera que cambio cada vez que necesito asegurarme de que se carga de nuevo la hoja de estilo, href="mfs-owftest.css?a=3", el parámetro 'a' no lo utilizo para nada, solo cambio el 3 por un 4 y así sucesivamente cuando quiero asegurarme de que se carga de nuevo la hoja de estilos).
PD. si necesitáis conocer la fase de la luna, encontré un cálculo en internet que funciona bien, si no lo encontráis, escribirme y lo busco y re-publico.

jueves, 11 de febrero de 2016

Incorporar la previsión del tiempo a tu web (I)

En los últimos días, en la construcción de MyFamilyServer V2, he estado trabajando para tener un calendario mensual, semana y diario y se me ocurrió que podía incorporar algunos datos del mundo exterior al calendario en MyFamilyServer.

He realizado este documento para explicar como incorporar los datos del tiempo a MyFamilyServer, lo voy a explicar muy despacio, con ejemplos en php y html para que tú puedas incorporarlos a tu propia web. He buscado un conjunto de información gratuito (como todo en MyFamilyServer) que tú puedes incorporar de forma gratuita también en tu web (cumpliendo el acuerdo que propone el proveedor de la información del tiempo).
Con un poco (muy poco) de desarrollo podrás presentar en tu web el tiempo actual y la previsión de tiempo para los próximos días. El proveedor de estos datos es http://openweathermap.org/ 

Hay que agradecer a openweathermap.org que nos entregue los datos del tiempo actualizados y la previsión para los próximos días, así como una api para poder acceder desde tus programas e incorporarlos a tú web.

Es muy sencillo vamos manos a la obra.

Un pre-requisito necesario es registrarse en openweathermap para conseguir un identificador de acceso, este se obtiene de forma gratuita al registrarse.

Vale, el proceso consiste en hacer una llamada a la api, con un conjunto de parámetros y la api te contesta con un fichero (en diversos formatos) con un conjunto de información bien identificada. Una vez dispones de la información, la tratas y extraes los parámetros que mas te convienen.

Primero vamos a conocer el tiempo ahora.

La llamada a la api se realiza a esta url:

http://api.openweathermap.org/data/2.5/weather

y se le añaden los parámetros que necesites, es totalmente necesario indicar tu identificador (que obtuviste al registrarte) y definir donde (ciudad por ejemplo).
El parámetro para tu identificador es APPID=xxxxxx 
(xxxxxx debes sustituirlo por el identificador que obtienes al registrarte)
El parámetro para tu cuidad es id=yyyyyy
Con estos dos parámetros ya puedes realizar una llamada. Ejemplo:

http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxx&id=yyyyyy

El identificador para la cuidad de Madrid, España es '6359304'. Prueba a realizar la llamada directamente en tu navegador con tu identificador (en ved de los caracteres xxxxxx y el identificador de Madrid en ved de yyyyyy)

El resultado (lo veras directamente en tu navegador) es algo como esto:

{"coord":{"lon":-3.68,"lat":40.49},
"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10n"}],
"base":"cmc stations",
"main":{"temp":285.491,"pressure":954.83,"humidity":93,"temp_min":285.491,"temp_max":285.491,"sea_level":1027.23,"grnd_level":954.83},
"wind":{"speed":7.89,"deg":252.5},
"rain":{"3h":0.3825},
"clouds":{"all":88},
"dt":1455126919,
"sys":{"message":0.0036,"country":"ES","sunrise":1455088467,"sunset":1455126239},
"id":6359304,
"name":"Madrid",
"cod":200}

Esto que ves es un fichero en formato JSON con el tiempo de Madrid  en el momento que yo hice el request.

Puedes añadir algún otro parámetro que es útil como por ejemplo:
El parámetro para definir el idioma es lang=ll (Siendo II el código de idioma, el el momento de publicar este articulo, los idiomas soportados son:  en, ru, it, es (or sp), uk (or ua), de, pt, ro, pl, fi, nl, fr, bg, sv (or se), zh_tw, zh (or zh_cn), tr, hr, ca.
El parámetro para definir unidades de medida es units=zzzzzz (Pudiendo entregarlo en metric o imperial).
El parámetro para definir el formato de salida es mode=xml o bien mode=html, si no especificas formato de salida es json.
El identificador de la ciudad puede ser sustituido por el parámetro q= y en ese caso se identifica la cuidad por nombre (o nombre y país) o puede ser sustituido por latitud y longitud.
A continuación muestro varios ejemplos del estos parámetros

Misma llamada al tiempo actual en Madrid pero en idioma español y utilizando el sistema métrico como unidad de medida:
http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxx&id=6359304&units=metric&lang=es 

Misma llamada al tiempo actual en Madrid pero utilizando el nombre de la cuidad:

http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxx&q=madrid&units=metric&lang=es

Misma llamada para la cuidad de Londres *!!!
http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxx&q=londres&units=metric&lang=es

y para London:
http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxx&q=london&units=metric&lang=es

y por ultimo especificando cuidad y país (París, Francia):
http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxx&q=paris,fr&units=metric&lang=es

(* Cuidado: Como veras en los resultados si pones London o Londres son muy distintos, uno de ellos te entrega datos de Gran Bretaña y el otro de Argentina, por lo tanto utiliza un identificador que sepas que es correcto)
Para obtener el identificador de cualquier cuidad puedes consultar la web de openweathermap (url de descarga de todos los códigos de ciudades: http://bulk.openweathermap.org/sample/)


Todos estos ejemplos los puedes ejecutar directamente en tu navegador para ver como funciona. Eso si, necesitas obtener un identificador registrándote en la web de openweathermap.

Ahora vamos a integrar esto en nuestro programa php en cuatro líneas, superfacil:
El siguiente programa llama a el API del tiempo, recupera los datos de Madrid en español y con unidades en sistema métrico en formato JSON, convierte el fichero JSON a un array en PHP y presenta algunos datos recuperados (para el ejemplo presento solo algunos datos, hay muchos mas disponibles)

<?php

# La url para la invocación:
$url="http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxx&q=madrid,es&units=metric&lang=es";

# Recupero los datos en la variable $json
$json=file_get_contents($url);

# convierto la variable $json en un array php llamado $data
$data=json_decode($json,true);

# Presento en pantalla algunos datos:
echo 'Temperatura: '.$data['main']['temp']."<br>";
echo 'Tiempo actual: '.$data['weather'][0]['main'].', ' . $data['weather'][0]['description']."<br>";
echo 'Nubosidad: '.$data['clouds']['all']." %<br>";
echo 'Velocidad de viento: '.$data['wind']['speed']."<br>";
echo 'Salida del sol: '. date ('H:i:s', $data['sys']['sunrise'])."<br>";
echo 'Puesta de sol: '. date ('H:i:s',$data['sys']['sunset'])."<br>";

?>





Que, ¿Ha sido facil?, superfacil !!.



Ahora te toca a ti investigar un poco mas para decidir que otros datos te interesa presentar.

Este ha sido un ejemplo para presentar el tiempo ahora (son datos en tiempo real del estado del tiempo), a continuación vamos a ver como recuperar el forecast (previsión del tiempo).

El procedimiento es exactamente el mismo, pero llamamos al procedimiento 'forecast' en ved e llamar a 'weather' como hemos hecho hasta ahora.
Puedes probar en tu navegador con las mismas variables, solo tienes que cambiar la palabra 'weather' por 'forecast'.

Ejemplo de llamada:
http://api.openweathermap.org/data/2.5/forecast?APPID=xxxxxx&q=madrid,es&units=metric&lang=es 

Ejemplo de respuesta:
{"city":{"id":3117735,"name":"Madrid","coord":{"lon":-3.70256,"lat":40.4165},"country":"ES","population":0,
"sys":{"population":0}},"cod":"200","message":0.0036,"cnt":40,"list":[{"dt":1455202800,"main":{"temp":14.32,
"temp_min":12.81,"temp_max":14.32,"pressure":953.58,"sea_level":1025.95,"grnd_level":953.58,"humidity":95,
"temp_kf":1.51},"weather":[{"id":500,"main":"Rain","description":"lluvia ligera","icon":"10d"}],"clouds":
{"all":88},"wind":{"speed":5.9,"deg":263.501},"rain":{"3h":0.385},"sys":{"pod":"d"},"dt_txt":"2016-02-11
 15:00:00"},{"dt":1455213600,"main":{"temp":13.61,"temp_min":12.18,"temp_max":13.61,"pressure":954.95,
 
 etcetera etcetera etcetera ...
 


La respuesta, esta vez, es mucho mas larga, con esta invocación obtenemos una previsión del tiempo para 5 días con estimación de tiempo cada tres horas. En información recuperada encontraras la fecha y la hora y la informacion del tiempo previsto.

En el caso de previsión del tiempo también puedes obtener información diaria e indicar el número de días.
Ejemplo de llamada para recuperar una prevision diaria para 10 días (véase el parámetro cnt=10):
http://api.openweathermap.org/data/2.5/forecast/daily?APPID=xxxxxx&q=madrid,es&units=metric&lang=es&cnt=10  

Vamos a incorporar la previsión a nuestro programa para dar la previsión del tiempo en los próximos 10 días:

<?php

# La url para la invocación:
$url = "http://api.openweathermap.org/data/2.5/forecast/daily?APPID=xxxxxx&id=6359304&units=metric&lang=es&cnt=10";

# Recupero los datos en la variable $json
$json=file_get_contents($url);

# convierto la variable $json en un array php llamado $data
$data=json_decode($json,true);

# Presento en pantalla algunos datos:
echo 'Previsión del tiempo en: '.$data['city']['name'].', '.$data['city']['country']."<br>";
echo 'Se muestra la previsión de los próximos '.$data['cnt'].' días: '."<br>";

# Recorro la información de cada día   
foreach ($data['list'] as $dia) {
    echo '<b>Previsión para el día: '.date('d-m-Y', $dia['dt'])."</b><br>";
    echo 'Temperaturas: Max '.$dia['temp']['max'].' mínima: '.$dia['temp']['min']. "<br>";
    echo 'Tiempo previsto: '.$dia['weather'][0]['main'].', '.$dia['weather'][0]['description']. "<br>";
}
       
?>
!! Que facil y que bien funciona !!, Seguro que a vosotros tambien os funciona perfectamente.
La información que se obtiene en el fichero JSON es mucho mas completa, por favor, revisa la documentacion en http://openweathermap.org/api para completar o modificar la información que necesites.

Ahora vamos a realizar otro cambio, no mas funcionalidad, pero mas chula. Vamos a mostrar un icono del tiempo.

Esta misma web del tiempo que estamos utilizando te proporciona información del icono a utilizar. La información se encuentra en el campo 'icon'. (en nuestro ejemplo, podrías añadir    $dia['weather'][0]['icon']    a la linea de tiempo previsto y así ves la codificación del icono a utilizar.

Esta web que estamos utilizando proporciona tambien sus propios iconos (en la siguiente dirección http://openweathermap.org/weather-conditions). Los iconos estan disponibles como recursos en la web, la url para obtener el icono que necesitas se compone con la url del sitio /img/w y el código del icono que quieres recuperar.

Prueba a poner en tu navegador:

http://openweathermap.org/img/w/01d.png

http://openweathermap.org/img/w/01n.png 

http://openweathermap.org/img/w/10d.png 


http://openweathermap.org/img/w/13d.png 

Ya tienes la idea, ahora vamos a ver como lo integramos en el programa que hemos hecho hasta ahora.

<?php

# La url para la invocación:
$url = "http://api.openweathermap.org/data/2.5/forecast/daily?APPID=xxxxxx&id=6359304&units=metric&lang=es&cnt=10";

# Recupero los datos en la variable $json
$json=file_get_contents($url);

# convierto la variable $json en un array php llamado $data
$data=json_decode($json,true);

# Presento en pantalla algunos datos:
echo 'Previsión del tiempo en: '.$data['city']['name'].', '.$data['city']['country']."<br>";
echo 'Se muestra la previsión de los próximos '.$data['cnt'].' días: '."<br>";

# Recorro la informacion de cada dia  
foreach ($data['list'] as $dia) {
    echo '<br><b>Previsión para el día: '.date('d-m-Y', $dia['dt'])."</b><br>";
    echo 'Temperaturas: Max '.$dia['temp']['max'].' mínima: '.$dia['temp']['min']. "<br>";
    echo 'Tiempo previsto: '.$dia['weather'][0]['main'].', '.$dia['weather'][0]['description'];
    $icono = 'http://openweathermap.org/img/w/'.$dia['weather'][0]['icon'].'.png';
    echo '<IMG src='.$icono.'> <br>';
   
}
      
?>


Hemos terminado. Ya tienes un conjunto de ejemplos con resultados sencillos para hacer una llamada y recuperar cualquier dato del tiempo actual o de la previsión del tiempo a tu propia web, incluso incorporar un icono para dar una descripción del tiempo mas visual y en menos espacio.

Como ideas adicionales, estos iconos son bonitos, pero puede que quieras otros con el fondo transparente o mas sencillos, yo he encontrado varias propuestas, de iconos esquemáticos y muy adaptables a tu propia web (ya que en realidad son fuentes y se integran mas con los tamaños que dispongas y el fondo transparente). Mira la propuesta de Erik Flowers, de Alessio Atzeni o Deniz Fuchidzhiev (este ultimo ya te entrega una .css con la misma codificación que el id de openweathermap así no hay que hacer conversiones), son trabajos muy bien realizados. Incorporar estos diferentes iconos te generará mas trabajo ya que la codificación de openweathermap y la que utilizan otros autores no es siempre la misma, y deberás realizar alguna tabla de conversion (lo cual, como puedes imaginar, no esta dentro del ambito de este documento)

En la web de openweathermap encontraras documentación completa y actualizada, acude a esta web para mejorar lo que aquí se presenta o hacer cosas mas chulas. (La documentación es completa y clara yo solo he encontrado un fallito en como realizar la invocación, que ya he reportado a openweathermap, y algún detalle poco documentado de la respuesta, pero cosas menores, en general la documentación es amplia y clara).  

Espero que esta publicación te haya resultado útil y clara.