dimanche 10 décembre 2017

Comment démarrer automatiquement une vidéo Youtube ?

Comment démarrer automatiquement une "embedded" vidéo Youtube ?
<p style="text-align: center;">
<iframe width="640" height="360" src="https://www.youtube.com/embed/07chOTXooJg?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe></p>

La "formule magique" à rajouter au bout de l'URL de la vidéo et bien à l'intérieur des guillemets. Bien sûr, les dimensions de la vidéo sont modifiables.

?rel=0&autoplay=1

Exemple:
Pour info, il s'agit ici d'une webcam positionnée sur le port de Gustavia sur l'île de St Barthélémy (ou St Barth) où notre "Johnny national" va être ou a été inhumé. Donc le flux est permanent sauf en cas de panne. Il ne s'agit donc pas d'une vidéo enregistrée. 



Truc pour rester dans les bonnes proportions
: créez une image de 640x360 dans votre logiciel de dessin ou photo préféré. Ensuite: "Redimensionner l'image" en conservant les proportions. Reportez ces dimensions dans le code html ci-dessus.

Pourquoi démarrage automatique? J'évite en général de le faire car c'est agaçant surtout s'il y a de l'audio et aussi quand la connexion n'est pas fameuse, on a envie de l'économiser. Mais il n'y a pas de son ici. De plus, mon public est généralement assez âgé et n'a pas toujours la présence d'esprit de cliquer où il faut pour démarrer la vidéo.

Toujours pour info, j'ai moi-même une webcam à St Martin en bord de mer (île de St Martin) mais les lignes téléphoniques ont été détruites par l'ouragan Irma et je n'ai plus d'Internet pour le moment.

Liens:


vendredi 8 décembre 2017

Chrome Mobile: mettre la barre de navigation en bas

Compatible avec le précédent truc: "cacher automatiquement la barre de navigation"

Tapez dans la barre de navigation
chrome://flags
Recherchez "Home"

Cliquez sur le bouton "Chrome Home" et mettez-le sur "activer" ou "enable"

Redémarrez 2 fois votre navigateur



Crédit image: prodigemobile.com

Chrome Mobile: cacher automatiquement la barre de navigation

Il suffit de rajouter dans votre page web le méta-tag suivant:

<meta name="mobile-web-app-capable" content="yes">

Redémarrez votre Chrome Mobile après la modification de votre site. Quand vous scrollez dans votre page vers le haut pour descendre dans votre page, la barre de navigation disparaît automatiquement. Quand vous scrollez vers le bas, elle réapparaît.


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"