mercredi 2 août 2017

Rediriger / rafraîchir une page automatiquement

Je me suis créé une page d'information il y a déjà plusieurs semaines à afficher en permanence sur ma vieille Eeebox équipée de Manjaro Linux. À l'origine, elle devait afficher des infos diverses y compris de l'actualité et de la météo mais peu à peu le projet a dérivé vers la météo seule, qui reste ma grande passion.

En réalité, ma page "infopanel" (vous pouvez la voir) est constituée de 3 pages actuellement très proches, seul le zoom de l'image satellite change pour l'une et on passe en satellite "visible" pour la 3e. Il y a aussi différentes petites variantes d'une page à l'autre. Je voulais donc que ma page se redirige elle-même sur ces différentes variantes tous les 5 mn (en fait seules 2 variantes sont utilisées: normale et zoom / infra-rouge. La version dite "visible" n'étant justement pas visible la nuit, elle m'intéresse moins. Mon idée est de prochainement y ajouter une page "actualités". Mon panel météo est affiché dans une "ChromeApp" que l'on peut faire avec n'importe quelle page dans Paramètres > Plus d'outils > Ajouter au Bureau.

Malheureusement, mes méthodes habituelles pour la redirection (balises META dans le <head>)  ne fonctionnaient pas ou rarement sur l'Eeebox et curieusement très bien sur mon ordi de travail (plus récent et puissant et aussi sous Manjaro).

J'ai cherché une nouvelle méthode qui cette fois fonctionne parfaitement. Il s'agit d'un script:

<script>
    setTimeout(function(){location.href="http://url-redirection.html"} ,
 300000);
</script>

Notez  qu'il faut remplacer (en bleu) "http://url-redirection.html" par votre URL. Pour un simple "refresh", mettez l'URL de votre page courante.
300000 est le temps avant rafraîchissement en millisecondes c'est-à-dire 300 secondes= 5 minutes. Pour convertir les secondes en millisecondes, il suffit de rajouter 3 zéros au bout (1000 milisecondes=1 seconde)
Le script peut être mis n'importe où entre <body> et </body> et peut-être même dans le <head> (je n'ai pas essayé)

Capture:
De gauche à droite et de haut en bas:

  • La météo automatique WeatherUnderground (Pour Anguilla, Antilles), 
  • image satellite personnalisée Wublast (Wunderground). Quand on clique sur l'image, ça lance l'animation satellite. On remarquera en haut à droite, en superposition, les liens pour passer d'une page à l'autre. 
  • Date avec + IP. 
  • En dessous: National Hurricane Center (cyclones). Les bulletins en RSS sont affichés par dessus, en superposition. 
  • En bas à droite: Détecteur d'orages (WeatherBug).

Anguilla est à 10 km en face de chez moi. Je préfère cette station qui est plus fiable que celle qui est à 2 km.
Je ne garantis pas que mon "panel" fonctionnera partout. Je l'ai fait pour moi seul avant tout.




Si vous êtes intéressé par cette page "Infopanel", je pourrai faire un petit tuto plus tard. Mais il y a certainement moyen de faire mieux!

*Actualités oui, mais pas Google News qui ne supporte pas la mise-en-boîte... heu, pardon, la mise en iframe et c'est indispensable pour la redirection. Pour le moment, j'utilise FranceInfo.

lundi 31 juillet 2017

Comment récupérer facilement l'URL d'un flux RRS dans Chrome (ou dérivés)

Récupérer, copier-coller une adresse complète et en clair d'un flux RSS complet n'a jamais été une sinécure avec Google Chrome. Je doute d'ailleurs fort que des personnes peu férues d'Internet n'en soient capable et préfèrent abandonner...

Si vous ouvrez bêtement le flux RSS avec l'icône ad-hoc en haut à droite de votre Chrome / Chromium, et que vous copiez l'URL obtenue, vous allez obtenir ça (pour ce blog):


 chrome-extension://nlbjncdgjeocebhnmkbbbdekmmmcbfjd/subscribe.html?http%3A%2F%2F
blogtricker.blogspot.com%2Ffeeds%2Fposts%2Fdefault%3Falt%3Drss


Pas génial pour s'y retrouver...! Et même si vous amputez votre URL de son "en-tête", vous n'obtiendrez rien d'utilisable tel-quel (par exemple si vous voulez afficher le RSS sur votre blog via un site comme Feedroll).

Il y a bien-sûr moyen de traduire http%3A%2F%2F par http:// et le reste aussi à condition de s'en souvenir...

Il y a pourtant une solution beaucoup plus simple, mais là-aussi, il faut s'en rappeler d'une fois sur l'autre (on ne fait pas ça tous les jours)...


  1. Clic gauche sur l'icône RSS en haut à droite
  2. Clic droit dans la bulle ouverte sur Blognotes - RSS (ou - Atom)
  3. Puis "copier le lien"
  4. Collez-le tout dans votre éditeur de texte:
 http://blogtricker.blogspot.com/feeds/posts/default?alt=rss

C'est quand même plus exploitable comme ça, non ?



Capture





lundi 17 juillet 2017

Tableau de 100% de hauteur et 100% de largeur

S'il n'est pas difficile d'attribuer 100% de largeur à un tableau, par contre. c'est crise de nerfs garantie pour ce qui est de la hauteur. Ce n'est pas reconnu par le HTML... sauf si on bricole un peu le CSS.

Le CSS ici est de type "embarqué" c'est-à-dire qu'il est inséré directement dans le HTML

 <html style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
<table align="center" border="1" cellpadding="1" cellspacing="1" style="height: 100%; width: 100%;">
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

Exemple: http://bit.ly/2txRX07


HTML / CSS: Rogner (crop) une image facilement...

C'est plutôt du CSS (embarqué)...

On aimerait parfois rogner une image distante sur laquelle on ne peut malheureusement par agir directement puisqu'on n'en est pas propriétaire...


C'est le cas ci-dessous. Cette image représente la situation météorologique en Atlantique Tropical Nord (NOAA). Elle est dotée de larges marges en haut et en bas (on se demande bien pourquoi...). Cette image est dynamique, c'est à dire qu'elle change périodiquement.
Je lui ai mis une bordure pour qu'on visualise bien la marge. La taille de l'image originale est de 1720x1260 pixels. Ici, elle est redimensionnée à 640 px de largeur pour s'adapter à ce blog.


Jusqu'à présent, je bidouillais l'image via un iframe et des décalages (positionnements) pour cacher ces marges gênantes tant bien que mal. On peut aussi mettre l'image en background d'un tableau et là aussi jouer sur le positionnement. Inconvénients notables de ces solutions, l'image devient invisible dans un email (mon site météo propose en effet des abonnements par email) mais aussi, les décalages peuvent avoir parfois des effets inattendus sur le reste de la mise en page...





Mais j'ai trouvé bien plus simple!

Un container DIV avec la propriété overflow:hidden; (qui cache tout ce qui dépasse du container) et des marges du bas et du haut négatives pour l'image. En gras: les éléments les plus importants.

 <div style="text-align:center; width:640px; overflow:hidden; margin-left: auto; margin-right: auto; "><img src="http://www.opc.ncep.noaa.gov/UA/Atl_Tropics.gif" style="margin-bottom:-120px; margin-top:-110px; width:640px; height: 469px;" /></div>

margin-left: auto; margin-right: auto; sert à centrer le container DIV et donc l'image. style="text-align:center; est donc peut-être superflu ici. Les largeurs du container et de l'image sont identiques. La hauteur de l'image n'a pas vraiment besoin d'être spécifiée (c'est automatique) mais c'est mieux de la déterminer (ici 469 px). Pour connaître la hauteur proportionnellement à la largeur, il suffit de télécharger puis d'éditer l'image dans une application graphique comme Gimp ou PhotoFiltre. Mais il y a d'autres solutions...


Et voilà! l'image rognée (cropped en Anglais), sans ses marges...




Ci-dessous, un arrangement un peu différent. L'image est recoupée aussi à gauche et à droite ce qui permet d'optimiser l'espace disponible et de zoomer (l'image de base est ici plus grande).

Seule grosse différence: margin-left: -120px (pas de margin-right) qui est aussi négative.

 <div style="text-align:center; width:640px; overflow:hidden; margin-left: auto; margin-right: auto; "><img src="http://www.opc.ncep.noaa.gov/UA/Atl_Tropics.gif" style="margin-bottom:-250px; margin-left:-120px; margin-top:-230px; width:1000px" /></div>




Dans les exemples précédents, il n'y a pas de possibilité d'insérer l'image dans un texte (image à gauche par exemple). Ci-dessous, un exemple avec un tableau pour contourner le problème. Mais il y a certainement d'autres solutions à base de DIV. À cogiter!



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor sed ipsum id feugiat. Fusce blandit sem in suscipit lacinia. Quisque porttitor ac eros ut congue. Nulla quis eros posuere, sollicitudin mauris quis, imperdiet enim. Nunc sodales, orci nec ornare bibendum, ipsum diam fermentum turpis, eget finibus tellus justo sed nisi. Nunc consequat congue nulla. Etiam dapibus mauris at eleifend ultrices. Cras tempor iaculis enim id tempus. 
Nam ultrices mauris mollis dolor rutrum congue. Nunc eu iaculis sapien.Vestibulum hendrerit elit justo, sit amet sodales velit mattis quis. Nulla ex est, viverra et arcu interdum, tincidunt finibus odio. 

Ci-dessous, le code:

<table align="center" border="0" cellpadding="0" cellspacing="10" style="width: 640px;"><tbody>
<tr>    <td style="width: 300px;">
<div style="overflow: hidden; text-align: left; width: 300px;">
<a href="http://www.ssd.noaa.gov/goes/east/pr/h5-mloop-avn.html" target="_blank"><img src="http://www.ssd.noaa.gov/goes/east/pr/avn.jpg" style="height: 480px; margin-bottom: -125px; margin-left: -305px; margin-right: -150px; margin-top: -110px; width: 720px;" title="Clic pour l'animation! Click to loop!" /></a></div>
</td>    <td style="text-align: left; vertical-align: middle;">
<span style="color: #666666;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor sed ipsum id feugiat. Fusce blandit sem in suscipit lacinia. Quisque porttitor ac eros ut congue. Nulla quis eros posuere, sollicitudin mauris quis, imperdiet enim. Nunc sodales, orci nec ornare bibendum, ipsum diam fermentum turpis, eget finibus tellus justo sed nisi. Nunc consequat congue nulla. Etiam dapibus mauris at eleifend ultrices. Cras tempor iaculis enim id tempus.&nbsp;</span>
<span style="color: #666666;">Nam ultrices mauris mollis dolor rutrum congue. Nunc eu iaculis sapien.Vestibulum hendrerit elit justo, sit amet sodales velit mattis quis. Nulla ex est, viverra et arcu interdum, tincidunt finibus odio.&nbsp;</span></td>   </tr>
</tbody> </table>




Sources:

Openclassrooms.com/forum/sujet/rogner-une-image-sans-la-redimensionner (merci à Alban Cornuau)
NOAA (National Oceanic & Atmospheric Administration)
Mon site Météo: NBBCmeteo (Île de St Martin, Antilles Fr.)
Propriété CSS "overflow"


mercredi 3 mai 2017

Un MINI-GMAIL, ça existe...

Marre de Gmail, lourd et plein de pubs?



Oui-oui! Il y a un moyen très simple, c'est d'utiliser l'ancien Gmail pour téléphones mobiles. Y'a pas plus léger, minimaliste et rapide! Sans pubs, mais aussi sans images, malheureusement. Mais pas besoin de chercher longtemps pour trouver ses rares possibilités... Mais quel calme!



Il est ensuite possible d'en faire une Chrome App en allant dans Paramètres -> Plus d'outils -> Ajouter au Bureau puis de mettre un lanceurs dans votre "dock", "panel" ou sur votre Bureau.

Pour info, dans XFCE (un environnement Linux), les ChromeApps se retrouvent dans le Menu principal -> Applications Chrome.

Pour d'autres OS, il faudra peut-être chercher un peu...



Le lien est ici:

http://m.gmail.com/



Et voici même un aperçu en "ChromeApp"





mardi 21 mars 2017

Comment intéger une Google Map sur son site ou Blog ?


  • Ensuite, en haut à gauche, cliquez sur "Partager"
  • Une fenêtre pop-up s'ouvre, choisissez l'onglet "intégrer la carte". 
  • La dimension est "moyenne" par défaut (450 x 600 px) mais vous pouvez choisir "petite, grande ou personnalisée". Remarque: Quelque soit votre choix, il sera toujours possible de changer les dimensions de l'iframe ultérieurement.





Voici le code obtenu.
C'est donc bien un iframe. 
Il suffira de l'intégrer dans le body de votre page à l'endroit que vous voulez. 
Truc: En mode WYSIWYG, vous pouvez taper "ICI" (ou "Rédiger" dans Blogger), le centrer ou ce que vous voulez, passer en mode HTML, rechercher (Ctrl+f) et repérer le "ICI" et coller le code de l'iframe à la place...

Retour au mode WYSIWYG, et normalement votre iframe est visible.


<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d2703.2995152679!2d-3.1549771225145995!3d47.347550071567504!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sus!4v1490111725203" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Et voilà votre "map" est prête!




Et pour un trajet:



Notes

  • Elle peut ne pas être bien centrée comme vous le voulez. Il faudra donc -peut-être...- faire plusieurs essais ou bidouiller le code de l'iframe
  • Les informations touristiques peuvent vites devenir obsolètes

lundi 30 janvier 2017

Styles de fonts dans BlueGriffon


Icône de BlueGriffon
BlueGriffon est un logiciel libre d'édition de pages web WYSIWYG, successeur de Mozilla Composer et Nvu. C'est un logiciel libre multiplateforme sous triple licence MPL/GPL/LGPL développé par le Français Daniel Glazman et fondé sur la plateforme Mozilla (Firefox). C'est le seul logiciel de ce genre pas trop bogué, très complet et gratuit sous Linux. On n'y trouve cependant pas les iframes.

Pour avoir la version complète, il faut payer le prix: version license basique: 70 € HT et version complète: 195 € mais la version gratuite est généralement suffisante.

Pour les éléments qui me manquent, j'utilise en parallèle CKEditor (celui-ci est sur mon serveur) et aussi BlueFish (non-Wysiwyg) notamment pour les Iframes. Ce dernier, comme BlueGriffon est multiplateforme (existent sur Mac, Linux et Windows). CKEditor n'est pas un logiciel mais une application en ligne (c-à-dire un site Web)


Les styles ne sont très pas intuitifs dans BlueGriffon et bien des utilisateurs se demandent comment appliquer une couleur ou un surlignage à un texte (ou autres styles).

En fait, il suffit d'aller dans le Menu en haut » Panneaux (panels) » cocher "Styles CSS" et le panneau des styles va s'afficher dans toute sa splendeur... à droite.

À partir de là, c'est très intuitif, je m'abstiendrai donc de rentrer dans les détails. Sachez seulement que vous trouverez beaucoup de choses pour les Fonts dans "Général" ainsi que dans "Couleur". Attention, n'oubliez pas de repérer vos éléments "stylés" avec des "class". BlueGriffon vous le demandera d'ailleurs.

Pour installer BlueGriffon voir cette page: http://www.bluegriffon.org/#download

Attention, pour obtenir les DEB pour Ubuntu ou Debian, cliquez plutôt sur ces liens:

http://bluegriffon.org/freshmeat/2.2/bluegriffon_2.2-1ubuntu1_amd64.deb  (pour 64 bits)
ou
http://bluegriffon.org/freshmeat/2.2/bluegriffon_2.2-1ubuntu1_i386.deb (pour 32 bits)


LIENS:




mardi 27 décembre 2016

Texte défilant

Bonne Année 2017 !                                                                                                       Happy New Year 2017!



Ce n'est pas nouveau mais une "piqure de rappel" ne fera pas de mal...





Attention! La "code-box" ci-dessus remplace temporairement mes anciennes code-box qui sont altérées ou ne sont plus acceptées par Blogger. En fait, c'est une "Textarea". Vous pouvez donc modifier le code à l'intérieur si ça vous chante... Mais il ne sera pas sauvegardé.


Beaucoup d'éléments dans le code du texte défilant peuvent être modifiés: les arrondis, les ombres, la couleur du texte, du fond, la vitesse de défilement, les dimensions, etc...
Si vous désirez insérer de longs espaces dans votre texte, il faut utiliser &nbsp;
Par exemple: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

La balise (Tag) qui permet de faire défiler le texte est "marquee". En savoir plus sur cette balise: http://www.bernardquevillier.fr/toposnew/marquee.htm