dimanche 29 mai 2022

IFRAME "RESPONSIVE"

Pour simplifier, les éléments "responsive" (qui s'adaptent) sont indispensable pour créer un site qui s'adapte non seulement au navigateur d'un PC mais aussi à celui d'un téléphone ou d'une tablette. Je tenterai de faire un exemple ici, mais sans modifier le code CSS, c'est pas gagné!
Un exemple sera publié ensuite sur une page spécifique mais pas pour Youtube. Je connaissais déjà comment rendre une vidéo Youtube responsive et j'ai enfin trouvé comment le faire pour un iframe ordinaire. Je ne me lancerai pas dans de grandes explications. Il s'agit là de simples modèles à adapter. Allez faire aussi un tour sur la page Responsive Iframe Generator (attention la copie du CSS ne fonctionne pas chez moi) pour voir les "aspects ratio"
Voici le code CSS pour un aspect ratio de 1:1 soit un carré. Pour le ratio, c'est padding-top qui change. En orange, ce qui peut être personnalisé. À mettre entre <head> et </head>.
<style>
.iframe-container {
overflow: hidden;
padding-top: 100%;
position: relative;
}

.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
</style>
Ici, le code html à placer où on veut:
<div class="iframe-container"><iframe loading="lazy" src="https://embed.windy.com/embed2.html?lat=18.05&amp;lon=-63.097&amp;detailLat=18.05&amp;detailLon=-63.083&amp;zoom=9&amp;level=surface&amp;overlay=rain&amp;product=ecmwf&amp;menu=&amp;message=true&amp;marker=true&amp;calendar=now&amp;pressure=true&amp;type=map&amp;location=coordinates&amp;detail=&amp;metricWind=km%2Fh&amp;metricTemp=%C2%B0C&amp;radarRange=-1"></iframe></div>
Seule l'URL est à changer



Ci-dessous, modèle pour une vidéo Youtube. Même principe mais bien plus compliqué. J'ai d'ailleurs l'intention d'adapter si possible le précédent code aux vidéos. Ici, le CSS est à mettre entre <head> et </head>. 56,25% correspond au ratio 16:9 et cette fois il est dans padding-bottom. Ne me demandez pas pourquoi! Mais c'est la même utilité que précédemment.
<style>
  .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
  }

  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }

  .youtube-player img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
  }

  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
  }

  .youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url('//i.imgur.com/TxzC70f.png') no-repeat;
    cursor: pointer;
  }
</style>


Mettez ce script où vous voulez (plutôt au début ou à la fin du <body> si vous utilisez CKEditor qui a tendance à casser les scripts dans sa version gratuite. Dans ce cas, vous pourrez facilement ne pas copier cette partie et ne pas l'éditer en WYSIWYG). Pour ma part, je n'ai rien changé dans le script. Le "background" est seulement la flèche de "play".
<script>
  /*
   * Light YouTube Embeds by @labnol
   * Credit: https://www.labnol.org/
   */

  function labnolIframe(div) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0');
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', '1');
    iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
    div.parentNode.replaceChild(iframe, div);
  }

  function initYouTubeVideos() {
    var playerElements = document.getElementsByClassName('youtube-player');
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;
      var div = document.createElement('div');
      div.setAttribute('data-id', videoId);
      var thumbNode = document.createElement('img');
      thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId);
      div.appendChild(thumbNode);
      var playButton = document.createElement('div');
      playButton.setAttribute('class', 'play');
      div.appendChild(playButton);
      div.onclick = function () {
        labnolIframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }

  document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script>

Et enfin, le lecteur minimaliste avec l'ID de la vidéo Youtube à changer bien sûr.
<div class="container">
	<div class="item vert">
	<div class="youtube-player" data-id="6NXrFApPurE"></div>
	</div>
	</div>
* Light YouTube Embeds by @labnol
* Credit: https://www.labnol.org/

mardi 10 mai 2022

Proxifier (?) une image distante avec Google Translate

L'image en question (url produite par GTranslate): Vue vers le sud-ouest (Océan Atlantique Tropical). Lieu: Casa-Mellow à Island Harbour, Anguilla


Toujours dans les images... et la même que dans le précédent article, en plus!


Mon problème cette fois était bien différent: voulant me servir d'une image *.jpg d'une webcam dont je ne suis pas le propriétaire, j'ai été confronté au fait que l'image en question ne parvenait pas à s'afficher sur mon site dans Chromium desktop et au contraire parfaitement bien sur Android (navigateur Duckduckgo mais pas seulement).

L'image est utilisée en arrière-plan du titre pour montrer seulement les nuages (voir le code + bas. c'est le titre d'un site météo)


L'image: http://casamellow.dyndns.org/jpg/1/image.jpg (j'ai récupéré les différentes URL y compris video)
Et le code de mon titre avec l'url de l'image transformée:

<div class="container">
<div class="bleu item">
<div style="padding-top:-70px; background-image:url('https://casamellow-dyndns-org.translate.goog/jpg/1/image.jpg?_x_tr_sch=http&_x_tr_sl=en&_x_tr_tl=fr&_x_tr_hl=fr&_x_tr_pto=wapp'); background-repeat:no-repeat; background-size:100%">
<div style="padding-bottom:10px; padding-left:5px; padding-right:30px; padding-top:20px"><span style="font-size:48px"><span style="color:#ffd700"><strong>NBBC</strong></span></span><span style="color:#ecf0f1"><span style="font-size:36px">meteo</span></span></div>
</div>
</div>
</div>

Explication: j'ai pris l'url de l'image seule et ai tenté de la faire passer à la moulinette de Google Translate: 


Et GTranslate est tombé dans le panneau! ÇA MARCHE!


J'ai remplacé l'URL standard de mon image par celle obtenue avec G Translate, et ça a marché! Mon titre s'est aussitôt affiché dans Chromium (Un-googled en fait) avec l'image en arrière-plan. Apparemment, ça fonctionne aussi sous Android mais je me méfie du cache. Bon, espérons que ça va continuer de fonctionner.


Pourquoi cette image ne voulait-elle pas rentrer dans le rang? Peut-être parce que de type http:// au lieu de https:// ? Pourtant, j'en avais utilisé une autre tout autant "http" et qui fonctionnait parfaitement. Pourquoi ça fonctionne via Google Translate? Je n'en sais trop rien mais il ya quelques années, on pouvait s'en servir comme proxy


Pour info, la webcam est située dans un hôtel sur la côte nord de l'île britannique d'Anguilla (szerait le domaine personnel de la Reine d'Angleterre, paraît-il). Elle se trouve à 8-10 km de mon île de St-Martin (partie française)




jeudi 28 octobre 2021

Rafraîchir automatiquement une image

Pas d'explications mais ça fonctionne y compris sur Blogger (ici réglé sur 3 sec)
<div style="font-family:&quot;Times New Roman&quot;text-align:center"><img id="casamellow" alt="" height="450" onload="javascript:(function(){setTimeout(function(){document.getElementById('casamellow').src=document.getElementById('casamellow').src.split('?')[0]+'?time='+new Date().getTime();},3000);}())" src="http://casamellow.dyndns.org/jpg/1/image.jpg?clock=1" width="800" /></div>
Vous pouvez créer facilement votre code ici:

Descendez jusqu'au formulaire "Fill out the form below and click the Create Image Auto Refresh HTML button to have the HTML code created for you".


Image rafraîchie tous les 3 secondes (il est possible qu'elle dépasse du cadre). 
La webcam se trouve à Anguilla au nord des Petites Antilles (Îles-Sous-Le-Vent) à 15 km de la partie française de St Martin. Il y a peu d'activité car c'est la morte saison (fin oct 2021) et qu'ici aussi, il y a la pandémie.


samedi 1 mai 2021

Extraire une image d'une vidéo Youtube

Voici l'URL d'une image taille optimale. Il suffit de récupérer l'ID de la vidéo (en orange). Ici, il s'agit d'une webcam "live" de St Barth (Antilles Françaises). En dessous, l'URL normale de la webcam. Notez que l'image jpg ne peut se rafraîchir seulement toutes les 30 mn. Il faudra en tenir compte si vous voulez un rafraîchissement automatique par script.

https://img.youtube.com/vi/6NXrFApPurE/maxresdefault.jpg
https://www.youtube.com/embed/6NXrFApPurE

D'autres infos et options ici: https://braindegeek.com/tuto-recuperer-limage-dune-video-youtube-miniature-thumbnail/



St Barth(élémy), rade de Gustavia, la capitale, dont le nom rappelle qu'elle fut un temps suédoise. C'est à St Barth que Johnny Hallyday a été inhumé.



mercredi 24 février 2021

Afficher des images transparentes: résolu

J'ai trouvé comment retrouver les images transparentes grâce à l'aide Google Blogger US:

Il suffit d'ajouter ce code à votre CSS avant le dernier b:skin entre <head> et </head>, et c'est tout. Redémarrer votre blog.
J'aurais pas trouvé tout seul!

.post-body img, 
.post-body .tr-caption-container, 
.Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0;
background: none;
box-shadow: none;
}
Vous pouvez tester avec ce code dans un nouveau message:
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><table align="center" border="1" cellpadding="0" cellspacing="0" style="height: 1000px; width: 998px;">
   <tbody>
    <tr>
     <td background="https://cdn.star.nesdis.noaa.gov/GOES16/ABI/SECTOR/car/13/GOES16-CAR-13-1000x1000.gif" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZtrhrdyNImfNYd3A2sCC6k5MpeEMDCe2axaSMaLAKE0oPSPtyuQsk4drCkZgH2GTGHuiHe0sHHXcPsM9bQohhsdtsmWar95a2LJ4otBPEU8imMU3_AyZhQRGA6YBYNi8cKN3YVAY84AH/s1000/GOES16-CAR-13-1000x1000-CALQUE.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1000" data-original-width="1000" height="960" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZtrhrdyNImfNYd3A2sCC6k5MpeEMDCe2axaSMaLAKE0oPSPtyuQsk4drCkZgH2GTGHuiHe0sHHXcPsM9bQohhsdtsmWar95a2LJ4otBPEU8imMU3_AyZhQRGA6YBYNi8cKN3YVAY84AH/w640-h640/GOES16-CAR-13-1000x1000-CALQUE.gif" width="970" /></a>
      </td>
    </tr>
   </tbody>
  </table>
</div>

ATTENTION! DE NOMBREUX ARTICLES SONT OBSOLÈTES DU FAIT DE CHANGEMENTS CHEZ GOOGLE

Par exemple, les i-frames ne fonctionnent plus, pas plus que les "bricolages" avec des images transparentes (entr'autres). Ça devient fatiguant...

vendredi 16 octobre 2020

utiliser CKEditor pour contourner la nouvelle interface de Blogger


On voit ci-dessus que l'interface est très complète dans cette version "Full-All"

L'article sera amélioré plus tard. Je donne seulement ici le code pour lancer cet éditeur HTML et WYSIWYG bluffant. Je l'utilise depuis des années. Ses possibilités sont bien plus nombreuses que celui de Blogger. Par exemple, on peut créer des Iframes. Attention, cependant, si l'adresse de votre site en iframe commence par http, rien ne s'affichera. Il faut impérativement une adresse (dans l'iframe) commençant par https (sécurisée). On peut essayer de "hacker" l'URL en la passant à la moulinette d'un "URL shortener" mais je ne garantis rien.

Voici donc le code à coller dans un éditeur de texte simple: 
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>CKEditor</title>
                <script src="https://cdn.ckeditor.com/4.4.5.1/full-all/ckeditor.js"></script>
        </head>
        <body>
                <textarea name="editor1"></textarea>
                <script>
                        CKEDITOR.replace( 'editor1' );
                </script>
        </body>
</html>

Que faire de ce code?

iL doit être enregistré dans un éditeur de texte (Notepad sous Windows?) sous cette forme: ckeditor.html qu'on lancera ensuite avec le navigateur habituel (Chrome par exemple). Il suffit de faire un clic droit sur le fichier puis "ouvrir avec..." ou quelque chose de ce genre sans oublier de le mettre en favori. Si Notepad (quel entêté!) a nommé votre fichier en .txt, il suffira de le renommer en .html.


Ckeditor.html est placé chez moi dans les dossiers systèmes /srv/http/CKE/ (serveur local sous Linux mais ça devrait le faire dans d'autres OS) et on peut le placer où on veut en fait..

Si vous désirez tout avoir en local, téléchargez ckeditor.js et placez-le dans le même dossier que ckeditor.html sans oublier de changer le code dans ckeditor.html. Par contre, vous ne bénéficierez plus des mises-à-jour automatiques.

NOTES: 
  • il existe de nombreuses variantes de CKEditor, des plus basiques aux plus compliquées. C'est en fonction du ckeditor.js qui est appelé. Ici, c'est (en principe) la version la plus complète (full-all) mais des développeurs ont pu sortir de leur côté des versions plus évoluées. 
  • Il existait une version "Blogger" qui "travaillait" directement dans ce dernier et donc se substituait à son éditeur de base. Malheureusement, elle ne fonctionne plus.
  • Les versions accessibles gratuitement, ne permettent pas d'enregistrer un fichier depuis le menu (classiquement). Il faut passer en "source", "sélectionner tout" et copier-coller le contenu ailleurs (par exemple dans blogger en mode HTML)
  • Attention! Si vous copiez-collez un article mis en page avec CKEditor dans Blogger, celui-ci risque fort de "casser" votre style lors du passage en mode "rédiger". Donc, prenez l'habitude de ne pas le faire.
  • On peut faire un raccourci pour transformer la page en webapp. C'est très facile dans Chrome et ses variantes. Dans Chromium Linux, c'est dans les paramètres (3 points superposés) > Plus d'outils > Créer un raccourci
Site CKEditor: https://ckeditor.com/
Les fichiers des différentes versions sont souvent dénommés "demo" si vous voulez chercher.

dimanche 27 septembre 2020

NE FONCTIONNE PLUS! revenir à l'ancienne interface même si elle n'est plus disponible

La nouvelle interface de Blogger ne fait pas que des heureux... Dans mon cas, elle rend mon PC lent et je la trouve peu intuitive.

Dans certains cas, l'option de revenir à l'ancienne version continue d'être visible mais pas toujours. Aucun sujet d'aide n'a réussi à me dépanner.

Voici ma méthode

C'est au niveau de l'URL qu'il va falloir se battre. Attention d'ailleurs, les anciennes URL comme les nouvelles peuvent varier. Il faudra peut-être faire plusieurs essais.

1. Voici l'ancienne URL de démarrage pour ce blog (TuxNote).
https://www.blogger.com/blogger.g?blogID=6524020777825382210&useLegacyBlogger=true#allposts
6524020777825382210 est l'ID du blog. On notera /blogger.g?blogID= et &useLegacyBlogger=true#allposts à la fin

La nouvelle URL (dans mon cas) est plus simple:
https://draft.blogger.com/blog/posts/6524020777825382210#editor
Il suffit de la bidouiller avec les éléments de l'ancienne comme je l'ai fait et ne pas oublier de la modifier vos favoris! Je ne sais pas combien de temps ça pourra marcher car Google semble tenir à sa nouvelle interface...
De plus, si vous ouvrez un blog depuis le tableau de bord, il y a de grandes chances de se retrouver à nouveau dans la nouvelle interface.

Note: on peut modifier plusieurs URL en quelques secondes en utilisant un éditeur amélioré permettant de chercher-remplacer des chaînes de caractères.