Meteoclimatic
Bricolaje y otras manualidades => Creacion de páginas personales meteorológicas => Mensaje iniciado por: Lraso en 01 de Febrero del 2021, 22:18:10 pm
-
Hola.
Ando liado con la puesta en marcha de la web de cumulus MX para mi estación de Bejís. Después de hacer la traducción al castellano de la página del índice me surgen algunas dudas provocadas por algunos aspectos que veo que se pueden mejorar. La URL de la web es esta para que podáis observar lo que comento:
https://www.uv.es/rasoluis/estacion/index.htm
1) El primer aspecto que me falla es que debería aparecer una imagen de la luna al lado de donde se indican los datos de salida y puesta de la luna, fase lunar y la imagen no aparece.
2) La segunda cuestión es que cuando pongo algún acento, parece que no se reconoce este caracter y la letra que debe de llevar el acento aparece con un interrogante. ¿Se puede solucionar de alguna forma que no sea omitir el acento.
3) Un tercer punto es que el índice THW no aparece calculado. No se si hay que indicar algo dentro de Cumulus para que lo saque.
4) En el menú selectachart que yo he traducido como "gráficos" no me aparece nada.
5) No se como se podría poner el título de la web "el tiempo en bejís" en mayúsculas, ya que aunque lo ponga de esta forma me lo pasa a minuscula (me imagino que será por el tipo de letra), pero no tengo ni idea de como se puede cambiar.
6) Por último me gustaría saber si se puede insertar la pastilla de meteoclimatic de mi estación en esta página de índice.
Bueno, siento formular tantas preguntas, pero soy novato en todo esto y antes de seguir dando pasos con el resto de apartados de la web me gustaria tener estas cosas claras.
Gracias de antemano y saludos
-
Hola Luis
Veamos si puedo contestar a la mayoría de preguntas ...
1) La luna. Tienes que marcar la casilla Include Moon image file y como dice en su comentario también tienes que marcar la casilla Generate Moon image que hay más abajo en Moon Image. Todo eso en la configuración de internet de MX.
2) Acentos. Tema de codificaciones. Todas las páginas tienen que tener en su cabecera (entre las etiquetas <head> y </head> esta etiqueta <meta charset="utf-8">. Además tienes que editarlas con un editor que lo haga en UTF-8 sin BOM. Te recomiendo Notepad++ (https://notepad-plus-plus.org/downloads/). Cuando edites una página en él asegúrate que tienes en el menú de Codificación marcado Codificar en UTF-8 sin BOM. También ahí mismo te da la opción de convertirlo si no está. Aparece el formato actual abajo a la derecha de notepad++.
3) El índice THW. Creo que solo lo ofrece de las estaciones Davis que sí lo suministran al igual que el THWS.
4) Al abrir esa página el navegador busca un script llamado selectachart.js el cual no está en tu servidor. He buscado por las carpetas de Mx y tampoco lo encuentro... si lo veo te lo paso pero es raro que pongan algo sin el script para que funcione....
5) Cosa de los estilos. Abre el archivo weatherstyle.css que tienes en tu servidor. Es el CSS en el que se dan los estilos. Exactamente ese título está en una etiqueta h1 en ese archivo es el tercero entre llaves. Verás que tiene una propiedad llamada text-transform: lowercase;. Eso hace que todo lo que pongas dentro de esa etiqueta esté siempre en minúsculas. Ignoro porque lo pusieron así. Quita la línea. Hay más líneas de esas en otros selectores de ese archivo.
6) La pastilla ?? Claro. Pon en la página el siguiente código:
<div style="width: 180px; height: 108px; margin: auto;"><a href="http://www.meteoclimatic.net/perfil/ESPVA1200000012430A" target="_blank"><img src=" http://www.meteoclimatic.net/pastilla/ESPVA1200000012430A.gif" width="180" height="108" border="0" alt="Meteoclimatic" /></a></div>
Creo que las he respondido todas... como ves hay alguna que de momento no tiene solución. Ve haciendo lo que digo y también échale un vistazo a la wiki de MX donde se explica cómo poner un sitio web simple en marcha:
https://cumuluswiki.org/a/Simple_Website_setup
Lo malo, está en inglés *+* *+*
A ver si se va quedando +- bien.
-
Hola de nuevo,
He podido ir retocando todo lo que me has indicado.
1) Ya aparece la imagen de la luna
2) Ya están las palabras acentuadas
3) Ya aparece la pastilla de meteoclimatic
Lo único que no he conseguido es lo de las minúsculas. El archivo weatherstyle.css lo tuve que modificar en C y luego transferirlo al servidor porque directamente en el servidor no me dejaba. Eliminé la etiqueta de minúsculas (text-transform: lowercase) en todas las lineas del archivo. Pero en la web siguen apareciendo en minúscula. No tengo ni idea que he hecho mal.
-
Más cosas que aprender :)
Generalmente los navegadores para cargar "más rápidos" y ponerse medallas de que son los más rápidos dejan los archivos CSS de estilos y JS de JavaScript en su caché.... caché del francés "escondido" porque lo ponen en una zona del disco duro del PC donde guardan esos archivos. Así cargan esos archivos más rápidamente que solicitándolos al servidor.
Por lo tanto te encuentras que aún modificando esos archivos en el servidor te aparece el antiguo de la caché sin los cambios que has hecho al del servidor.
Si abres la página desde un dispositivo en el que no la hayas visto todavía la bajará del servidor y verás la nueva.
Soluciones.
Hay varias soluciones, una rápida es en el navegador del PC recargar del servidor pulsando CTRL y F5 a la vez.
Otra es cada vez que edites el CSS o js ponerle un query (petición) a su URL en la página. Por ejemplo en las primeras líneas del index que editas verás esta línea <link href="weatherstyle.css" rel="stylesheet" type="text/css" /> donde se llama a ese archivo de estilo. Si en vez de href="weatherstyle.css" le pones href="weatherstyle.css?v=1.0" el navegador ve que es otra versión del archivo, no es exactamente el mismo y lo descarga. Así en su caché tendrá uno llamado weatherstyle.css y otro llamado weatherstyle.css?v=1.0 poniéndote este último que es el que solicita tu página. El archivo sigue teniendo el mismo nombre en el servidor pero se llama de diferente manera.
En futuras modificaciones puedes cambiarle la versión, por ejemplo le pones weatherstyle.css?v=1.1 y así sucesivamente.
Le he puesto ?v=1.0 a continuación del nombre del archivo y nótese que tiene que haber un signo de exclamación ? que solicita el query con lo que le viene detrás, que perfectamente podría haber sido "pericodelospalotes" pero con lo de las versiones llevas una idea de porqué versión vas *+* *+*
-
Hola de nuevo JM,
Finalmente el tema del cahché lo resolví por la vía rápida (CTRL + F5).
Sigo haciendo retoques con la web. Ahora estoy con la página del panel de instrumentos. He eliminado los relojes que no ofrecen ningún dato, ya que me estación no tiene esos sensores. También he eliminado las lecturas de la humedad y temperatura interior. Me ha quedado bastante bien, pero tengo un par de cosillas que no se como resolver (pongo enlace para que puedas ver fácilmente de lo que hablo: https://www.uv.es/rasoluis/estacion/gauges.htm)
1) Aparece la palabra "weather" bajo el título EL TIEMPO EN BEJIS y no se muy bien por qué. Me gustaría eliminarla.
2) He realizado la traducción de las leyendas/opciones de los relojes que las tienen, así como del selector de unidades de medida que aparece al final del panel, pero siguen apareciendo en Inglés. ¿Como se puede solucionar?
De momento eso es todo. Sigo avanzando con tu ayuda.
-
Todo eso se edita desde el script que maneja el funcionamiento de los instrumentos. En tu servidor lo tienes en
estacion/lib/steelseries/scripts/gauges.js
Edita ese archivo gauges.js y en las primeras líneas tendrás una en la que sale esto:
var strings = LANG.EN, // Set to your default language. Store all the strings in one object
En las líneas inferiores a esa te aparecen diversas opciones como cuáles esferas o datos de ellas quieres que aparezcan, poniendo false las deshabilitas y poniendo true las habilitas.
Cambia LANG.EN por LANG.ES y te saldrá todo traducido al español, incluido lo de weather que si lo quieres quitar editas gaugesT.html en tu Cumulus MX y en las primera líneas quitas <span id='lang_weather'>weather</span>, solo y exactamente eso. Posiblemente tengas que subir manualmente el archivo a tu servidor si no lo sube MX.
Como dije antes para recargar scripts del servidor CTRL y F5
El archivo para los gráficos está en la carpeta de MX webfiles/js llamado selectachart.js súbelo a tu servidor a la carpeta estación y ya deberían quedar habilitados. En esa carpeta de MX hay también dos scripts más. Ponlos en tu servidor porque posiblemente hagan falta para el funcionamiento de otras páginas.
Como ves son tres los actores en juego... archivos htm (o html son lo mismo) que estructuran la página, podría decirse que son los contenedores, archivos CSS que son los estilos para "decorar" la página, colores, tipo de letras, imágenes etc etc y los scripts (JavaScript) que son los que hacen funcionar instrumentos, gráficos etc etc. Más o menos hay que saber de las tres cosas ya que se llaman todas entre sí desde diferentes archivos.
Si abres las herramientas de desarrollador del navegador con F12 podrás ver todo eso en acción y los errores que hayan. Una herramienta muy útil para ir depurando la página. Al principio quizás no te enteres de mucho pero conforme vayas familiarizándote y buscando info por la web podrás ir cambiando todo lo que quieras :)
-
El archivo para los gráficos está en la carpeta de MX webfiles/js llamado selectachart.js súbelo a tu servidor a la carpeta estación y ya deberían quedar habilitados. En esa carpeta de MX hay también dos scripts más. Ponlos en tu servidor porque posiblemente hagan falta para el funcionamiento de otras páginas.
Pues los he subido y no hace nada. Siguen sin aparecer los gráficos de ese menú.
Por cierto, has sido muy didáctico con la última explicación sobre los actores en juegos y la herramienta para desarrolladores.
¡Cada día aprendo algo nuevo contigo!
Saludos.
-
El archivo para los gráficos está en la carpeta de MX webfiles/js llamado selectachart.js súbelo a tu servidor a la carpeta estación y ya deberían quedar habilitados. En esa carpeta de MX hay también dos scripts más. Ponlos en tu servidor porque posiblemente hagan falta para el funcionamiento de otras páginas.
Pues los he subido y no hace nada. Siguen sin aparecer los gráficos de ese menú.
Fallo mío....lo busca en la carpeta js así que ponlo en estacion/js
Supongo que estará esa carpeta y si no créala.
Por cierto, has sido muy didáctico con la última explicación sobre los actores en juegos y la herramienta para desarrolladores.
¡Cada día aprendo algo nuevo contigo!
Por ahí también se llega con click derecho del ratón sobre la página y Ver código fuente de la página donde podrás ver su código fuente, y si pones el ratón sobre un elemento con el derecho del ratón podrás Inspeccionar el elemento donde te dirá en el inspector sus reglas css y podrás editarlas y ver sus cambios en el navegador directamente sin tener que estar modificando página y subiéndola al servidor para ver los cambios. Eso sí, los cambios que hagas en el navegador no son en el archivo por lo que tendrás que ponerlos en él y subirlos al servidor, pero como digo te ahorra estar subiendo el archivo continuamente para ver los cambios.
Lo de didáctico....soy un intento fracasado de profesor *+* *+*
Saludos
-
Lo de didáctico....soy un intento fracasado de profesor *+* *+*
Saludos
Hola JM
Pues pienso que habrías sido un excelente profesor.
Te escribo porque ya tengo la página mas o menos lista. He traducido todo lo que me ha dejado, pero hay algunas cosas que se quedan sin traducción, que son aquellas etiquetas que coge automáticamente de Cumulus, como por ejemplo la predicción del tiempo o la fase lunar. Me pregunto si habría forma de traducir esto... si no hay forma, pues así se queda.
Por otra parte me surgen algunas cuestiones que quería ver si son posibles:
1) Generar un apartado más donde pudiera poner una galeria de fotos que iría renovando periódicamente yo desde el servidor.
2) Poner una predicción del tiempo más elaborada en el apartado "Ahora", como la que tienes en tu web que coges de meteored.
Ya me dices...
Saludos
-
Hola Luis
Ya veo que va quedando +- bien :)
Lo de las traducciones es cosa interna de Cumulus, es cierto, pero tiene archivos editables para los textos en otros idiomas como por ejemplo los pronósticos etc.
Dentro de su carpeta principal hay un archivo llamado samplestrings.ini, en él van unas secciones con traducciones para las diferentes cosas de Cumulus.
Nunca lo he personalizado pero atendiendo a la wiki de Cumulus (https://cumuluswiki.org/a/Strings.ini) hay que crear un archivo llamado strings.ini y copiar el contenido de samplestrings.ini e ir traduciendo. Ahí en su wiki creo que está el zip de los archivos en español en algún enlace, pero parece tener ya mucho tiempo y puede no tener la traducción deseada.
Una vez traducido guárdalo y reinicia Cumulus a ver si tiene efecto.
En cuanto a lo de las fotos tendrás que crear una página al estilo de las demás. Puedes copiar una existente y modificar su contenido borrando lo que no quieras e incluyendo las fotos en divs con imágenes. Tendrás que editar enlaces en el pie de página al igual que en todas las demás para la nueva.
Lo del widget de mi página con buscar por Google widget tiempo.com te saldrá en el primer resultado. Hay otras páginas más que generan widgets de previsión como tiempo.es, aemet etc por nombrar solo unas. Configuras el widget y generan un código que tendrás que insertar donde quieras en tu página.
Esos son los próximos deberes ;)
Saludos
-
Jmviper es nuestro master
-
Jmviper es nuestro master
No cabe duda alguna. apla3
-
Lo del widget de mi página con buscar por Google widget tiempo.com te saldrá en el primer resultado. Hay otras páginas más que generan widgets de previsión como tiempo.es, aemet etc por nombrar solo unas. Configuras el widget y generan un código que tendrás que insertar donde quieras en tu página.
Esos son los próximos deberes ;)
Saludos
Finalmente, tras algunas pruebas con varios widgets de diferentes páginas, he puesto el de AEMET. En los navegadores del PC y del iMac se visualizan bien, pero no me aparece ni en la tablet ni en el movil (ambos de IOS). ¿Sabes a que puede deberse?
-
Jmviper es nuestro master
Exagerao *+* *+*
Menos mal que hago caso de tu firma:
Las opiniones que pueda escribir no suponen asesoramiento profesional. Cada usuario tomará sus decisiones bajo su propio riesgo. *-* *-*
-
Lo del widget de mi página con buscar por Google widget tiempo.com te saldrá en el primer resultado. Hay otras páginas más que generan widgets de previsión como tiempo.es, aemet etc por nombrar solo unas. Configuras el widget y generan un código que tendrás que insertar donde quieras en tu página.
Esos son los próximos deberes ;)
Saludos
Finalmente, tras algunas pruebas con varios widgets de diferentes páginas, he puesto el de AEMET. En los navegadores del PC y del iMac se visualizan bien, pero no me aparece ni en la tablet ni en el movil (ambos de IOS). ¿Sabes a que puede deberse?
Lo siento pero ahí te puedo ayudar poco.
Verás, cada navegador es un mundo y puede presentar las cosas de igual o de diferente forma que otros. Eso es un quebradero de cabeza para los desarrolladores que tienen que buscar compatibilidad en sus páginas para que se vean en todos de más o menos igual forma.
Sé que esos "widgets" inyectan un iframe y que los navegadores los tratan de diferente manera, incluyendo navegadores de diferentes SO. Yo no tengo iPad o iPhone y no te puedo decir qué es lo que pasa en ellos.
-
Pues es curioso el tema, porque en los Android no hay problema con la visulización del widget de AEMET. Debe ser cosa del SO de los iphone/ipad, porque a igual navegador (Safari, Chrome) si que lo visualizo en el iMac, pero no en tablet y teléfono.
No tengo ese problema con el widget de Meteored, que se ve en todos los dispositivos, independientemente del navegador, pero personalmente me gusta mas el de AEMET porque detalla por franjas de 12 horas.
Sé que queda un poco cutre, pero he dejado ambos widgets para al menos poder ver uno en iphone/ipad.
-
En cuanto a lo de las fotos tendrás que crear una página al estilo de las demás. Puedes copiar una existente y modificar su contenido borrando lo que no quieras e incluyendo las fotos en divs con imágenes. Tendrás que editar enlaces en el pie de página al igual que en todas las demás para la nueva.
Esos son los próximos deberes ;)
Buenas JM,
Como ves, voy cumpliendo con los deberes que me pusiste. Ya utilice el archivo samplestrings para las traducciones del pronóstico y algunas cosillas mas. El archivo con las traducciones en español de la web de Cumulus la verdad que me ayudo mucho, y además tenía cierto toque de humor... un cachondo el que lo hizo... *+*
Ahora estoy liado con lo de la galeria de imágenes. Mas o menos ya tengo la plantilla, a falta de editar las barra de navegación para incluir esta página, pero antes me gustaría saber como podría poder las imágenes para que quedaran una al lado de otra. He estado leyendo algunas buscando con google pero no me acabo de aclarar. A ver si me puedes echar un cable... Te dejo aqui la dirección de la galería: https://www.uv.es/rasoluis/estacion/images.htm
Gracias.
-
Te podría servir como modelo la antigua página de imágenes de Cumulus en la cual puedes incorporar miniaturas, con muy pocas modificaciones la tendrías.
-
Muchas gracias Ubik. ¿Me podrías indicar la ruta de acceso a la antigua página de imágenes de Cumulus que comentas?
-
Tendrás que descargar una versión del Cumulus, y en la carpeta Web hay una archivo html de nombre images. Esa página sería la que te pudiera servir de base.
Mira aquí:http://www.meteovillavieja.es/images.htm te quedarías las fotos como las vez, pero bueno, no te fijes mucho en la página en sí ya que no es la original, pero sí está basada en la propia de Cumulus.
-
Hola de nuevo, Ubik.
He revisado la carpeta que comentas en Cumulus y no encuentro ningún archivo html con el nombre de images. Tal vez se encuentre en una versión de Cumulus que ya no esté disponible para su descarga... yo he descargado esta versión que es la que he podido encontrar en su web. https://cumuluswiki.org/Downloads/CumulusSetup.exe. No se si tu dispones de ese archivo html que lleva por nombre images. Si es así, tal vez me lo podrías adjuntar por aquí o enviármelo vía mail...
Gracias de antemano.
-
El elemento que contiene las imágenes es <figure> y es un elemento de bloque (block element) por lo que ocupa todo el ancho del contenedor en el que está y el siguiente al no haber espacio se pone debajo.
Añade una regla al archivo weatherstyle.css al final:
figure{
display: inline-block;
}
Con eso ocupará solamente el ancho de la foto y si cabe otra se pondrá al lado.
No te olvides recargar del servidor con CTRL + F5 una vez subido el css editado.
Son cosas básicas de HTML que irás aprendiendo ya que entre HTML y CSS puedes variar los elementos y su posición.
-
Conseguido José Manuel. Sin duda alguna, el alias ("el mago") que leí el otro día con los que algunos te identifican se queda corto. Contigo todo esto se me hace super fácil. Gracias una vez mas por tu inestimable ayuda.
apla3
-
jejejeje todo lo que sé es a un nivel básico, pero como dice el nombre me sirve de base para googleando un poco ver más cosas. Creo que más o menos sabes cómo funciona esto de la enseñanza y el autodidactismo ;)
saludos