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.
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.
