• l'utilisation de l'outil Blogger est supposée connue
• ce document n'est pas spécialement ordonné de manière logique...
• il n'est pas exhaustif, il se complète au fur et à mesure des besoins
• on privilégiera systématiquement le travail d'édition en mode "HTML", des copier/coller de séquences de code permettant de finaliser articles et pages
• pour visualiser une page en cours de modification, il est préférable de cliquer sur le bouton Aperçu de l'interface Blogger plutôt que de passer en mode Rédiger
Astuces générales utiles :
clic-droit n'importe où dans une page HTML affichée Afficher le code source de la page ouverture d'un onglet présentant le code HTML de la page
clic-droit sur un objet sélectionné de la page Inspecter code de l'objet sélectionné
Ressources générales utiles :
• en plus des bibliothèques mentionnées dans la suite de ce document (Jquery et autres), l'utilisation dans le HTML de la police d'icônes Awsome permet des présentations agréables. Pour pouvoir l'utiliser dans nos pages, il faut la déclarer (partie HEAD de la page) : <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> ; pour son contenu, on peut aller sur ce site, et pour l'intégrer on utilise ce code : <i class="fa fa-info-circle"><i> ce qui donne à l'affichage avec cet exemple :
• pour les polices "exotiques", voir l'article dédié.
Un dernier bon conseil : penser à sauvegarder régulièrement les éléments constitutifs du blog, ça pourra éviter les frustrations...
• les pages : Ctrl-A Ctrl-C Ctrl-V dans un éditeur de texte externe comme par exemple Notepad++ (éditeur avec coloration syntaxique) ;
• le modèle du blog : Thème > Sauvegarder/Restaurer ;
• le contenu : Paramètres > Autre > Sauvegarder le contenu.
STRUCTURE DU BLOG
Le blog https://tlcbarberaz.blogspot.com est associé au compte Google tlc73000barberaz@gmail.com (mot de passe : ●●●●●●●●). A l'instar de WordPress (système open source largement utilisé - c'est la cas de l'ancien site de l'Association TLC www.tlc-barberaz.fr), le système actuel permet de gérer du contenu de manière plutôt souple et évolutive, adaptée aux besoins généralement rencontrés dans la création d'un blog. L'outil se nomme Blogger, c'est un service de Google, que nous serons amené à ausculter dans les pages qui suivent.
La première grande caractéristique de notre blog est d'offrir au concepteur la possibilité de mixer des données "évanescentes" et "stables", correspondant respectivement aux articles et aux pages.
Les articles sont classés historiquement, visibles dans le corps du blog tant qu'ils ne sont pas enfouis par de nouveaux articles plus récents - le dernier publié en date se trouvant en sommet de pile. Des mécanismes prévus par Blogger permettent de retrouver d'anciens articles, soit par leurs index, soit par leurs dates de publications. Un article peut être typiquement le compte-rendu d'un événement (exemple : concert de Noël à l'église de Coise), avec du texte et des médias reliés à l'événement.
Les pages sont indépendantes, écrites en HTML, généralement accessibles par un MENU. Leur contenu est relativement stable, plus proche de pages d'informations : comment faire ceci ? où trouver ma fiche d'inscription ? etc...
Le menu du blog est à ce jour le suivant :
ACCUEIL
L'ASSOCIATION
Présentation
①
Adhésion
②
Infos administratives
③
NOS ACTIVITÉS
Descriptif
④
Planning
⑤
DOCS MÉDIAS
Photos
⑥
Vidéos
⑦
Presse
⑧
TÉLÉCHARGEMENT
Bulletins
⑨
Autres documents
⑩
CONTACT
⑪
11 pages indépendantes sont associées à ce menu...
• l'entrée ACCUEIL affiche la page par défaut du blog ; c'est une page non gérée en tant que telle, c'est celle qui s'affiche au lancement du blog et qui permet de voir les articles ;
• l'entrée ouvre l'accès à l'administration du blog - à condition d'être connecté au compte Google de TLC.
Stockage des données
Google Drive
les PDF, les ZIP, les fichiers AUDIOS, les images, les documents HTML
les bibliothèques Javascript, les fichiers CSS (ressources mutualisées)
* Pour accéder aux données, il faut être connecté au compte Google de TLC.
• Pour intégrer un objet Google Drive dans le code : voir plus bas le paragraphe INSERTION DANS LE BLOG D'UN OBJET PRESENT SUR GOOGLE DRIVE .
INSERTION D'UN MEDIA VIDEO DANS UN ARTICLE OU DANS UNE PAGE
On utilise la balise HTML5 <video> - le HTML5 a grandement facilité l'insertion des objets médias dans les pages HTML. Cependant, plutôt que d'incruster la vidéo dans l'article ou dans la page, on opte pour l'ouvrir et la lire dans une "lightbox responsive", c'est à dire qui s'adapte à la taille de la fenêtre parent, celle du navigateur donc. Pour celà, on utilise les bibilothèques Javascript JQUERY et HTML5LIGHBOX - elles sont déclarées une bonne foi pour toutes dans le modèle du blog (partie HEAD) de la manière suivante :
Modèle de code pour l'insertion d'une vidéo YouTube
<a class="html5lightbox" data-width="720" data-height="448" href="https://www.youtube.com/watch?v=sm54zs6lcjs" title="Ti'Fanfare fête ses 10 ans">Ti'Fanfare fête ses 10 ans</a>
• le paramètre title permet de légender la vidéo (la longueur du texte n'est pas limitée, le texte s'adapte à la taille de la fenêtre)
• l'URL de la vidéo est la valeur du href, c'est le lien délivré par YouTube après upload.
• les dimensions de la vidéo sont celles de data-width (la largeur) et de data-height (la hauteur) ; elles valent respectivement 720 et 448, valeurs exprimées en px ; ce qui donne sur notre page : Ti'Fanfare fête ses 10 ans
A propos des vidéos
Les vidéos destinées au web streaming doivent être adpatées, et pour rendre streamable une vidéo sortie toute belle d'un montage Full HD, il faut accepter un certain niveau de dégradation de qualité. On a plusieurs façon de faire :
• soit le logiciel de montage permet de le faire, et on récupère une vidéo exportée en MP4 prête au streaming ;
• soit on utilise Youtube, et la plateforme fait le travail d'adaptation (je ne sais pas quelles sont les limites fixées par YouTube sur les vidéos - taille, format) ;
• soit on utilise un logiciel tiers comme Handbrake.
Plaçons-nous dans ce dernier cas :
• en définition, on peut fixer les dimensions à 1280x720 (c'est à dire du HD en 16/9 et c'est bien suffisant)
• en débit binaire (kilobits/seconde ~ kb/s), on peut retenir ces valeurs :
240p
360p
480p
720p
1080p
Définition
426x240
640x360
854x480
1280x720
1920x1080
max
700
1000
2000
4000
6000
recommandée
400
750
1000
2500
4500
min
300
400
500
1500
3000
Car bien entendu, tout le monde n'a pas le tuyau qui arrive chez lui permettrant d'absorber le gros débit binaire exigé pour la lecture d'une vidéo 1080p de haute qualité. D'autre part, la configuration du serveur supportant la vidéo joue aussi un rôle : une bande passante sur un serveur mutualisé peut s'avérer très insuffisante et devenir un goulot d'étranglement pour le flux à streamer. Personnellement, sur le serveur halbox.mimetik.org, avec du 720p, je fixe le débit à 2000 kb/s - voir cette copie d'écran pour la vidéo sur le Concert Saint-Roch.
A propos de Handbrake...
Handbrake est un logiciel de transcodage vidéo open source, capable d'importer de nombreux formats et d'exporter en MP4 - encodage en H.264 (vidéo) et AAC (audio) communément utilisé sur le web. Il correspond tout à fait à notre besoin qui est de mettre en ligne des vidéos optimisées pour le web tout en étant de bonne qualité.
L'interface utilsateur est celui-ci. Un clic sur Open Source permet d'aller chercher le fichier à traiter..
Les onglets Résumé, Dimensions et Vidéo sont utiles :
• l'onglet Résumé présente les grandes caractéristiques du projet : exemple ; ne pas oublier de cocher "Optimisé pour le web"
• l'onglet Dimensions permet de fixer la définition de la vidéo à produire ; la vidéo de départ est en 4K (3840x2160 16/9, cf Source), on veut produire du HD 16/9, on fixe donc les dimensions à 1280x720 dans cet écran - ne pas oublier les cases à cocher/décocher ;
• dernier écran de paramétage avec l'onglet Vidéo ; on choisit un débit constant à 2000 kb/s et un encodage en 2 passes ;
• on clique sur Start Encoding et l'encodage se lance ; on récupére en fin de processus un ficher suffixé .m4v : c'est du mp4, on change m4v en mp4
• on tranfère sur YouTube et c'est fini.
INSERTION D'UN MEDIA AUDIO DANS UN ARTICLE OU DANS UNE PAGE
Avec HTML5 (et l'abandon progressif de FLASH), l'insertion d'un doc audio est grandement facilité : il suffit d'utiliser la balise <audio> et d'indiquer l'url de la source audio localisée sur Google Drive.
Modèle de code pour l'insertion d'un doc audio Google Drive
La valeur de le_type dépend du type de fichier : mpeg pour MP3, ogg pour OGG VORBIS, wav pour WAV. ATTENTION : le fichier audio doit être PUBLIC.
Exemple avec le générique de l'émission TV "Ce Soir Ou Jamais" (OGG VORBIS) uploadé sur Google Drive et dont on a récupéré l'identifiant de valeur 16cqjtA_rv1LCHYyAV6RbIm_ikGjHxPQp :
Les sources audios peuvent bien entendu avoir plusieurs origines. Une source peut par exemple être issue d'un enregistrements obtenu grâce à un smartphone (sa propre voix, la voix d'un conférencier, d'une personnalité, etc) ; cet enregistrement est souvent suivie d'une opération de montage réalisée avec Audacity, un logiciel open source et multiplateforme largement utilisé et simple à l'usage.
A propos d'Audacity...
INSERTION D'UNE SERIE DE PHOTOS DANS UN ARTICLE OU DANS UNE PAGE
On appelle "série de photos" une juxtaposition de N photos, séparées entre elles par x espaces, occupant n lignes d'une page ou d'un article, et faisant l'objet d'un enchaînement en cliquant sur les icônes ou (photo suivante / photo précédente) et pour stopper la lecture. La série à enchaîner est identifiée par la valeur du paramètre rel, lequel doit être sélectif pour la série et elle seule - c'est à dire qu'un même rel pour 2 séries placées dans une même page provoquera l'enchaînement des 2 séries - et ce n'est pas nécessairementt ce que l'on veut, donc attention !
On va assumer le fait que les photos ne sont pas hébergées sur notre serveur mais chez Google (Google Drive / Google Photos). Elles sont uploadées via Blogger, et on récupère en retour une séquence de code comme celle-ci (exemple pour une seule photo) :
Les URL des photos sont des hashcodes (un peu compliqués) générés par Blogger :
• href : URL de l'image en grand,
• src : URL de l'image-miniature (même valeur que href sauf s1600 qui devient s320),
• width, height, data-original-width, data-original-height des valeurs de définition en px.
Pour N images, on aura une concaténation Z de N séquences de ce type. On sélectionne Z (Ctrl-A), on copie Z (Ctrl-C) et on colle Z (Ctrl-V) dans un éditeur de texte basique (de préférence avec coloration syntaxique). Puis, pour obtenir le résultat expliqué plus haut, nous opérons sur Z trois substitutions :
substitution n°1 = ajout des attributs class rel title pour respectivement l'affichage en mode lightbox, l'enchaînement des images et les légendes des photos : <a href= remplacé partout dans la séquence par <a class="fancybox" rel="sV0918" title="" href= (la classe "fancybox" permet d'ouvrir la photo en mode lightbox ; la valeur de rel est ici sV0918, elle est décidée par le webmaster afin d'être sélective pour la série, et elle permet l'enchaînement des photos ayant la même valeur de rel ; le titre title contient entre les guillemets un texte libre (voir plus bas pour sa valorisation). Attention : le signe = est collé à gauche à l'attribut et à droite à sa valeur placée entre guillemets.
substitution n°2 = modification de la définition de l'image-miniature : width="320" height="240" data-original-width="1280" data-original-height="960" remplacé partout dans la séquence par
width="90" (90 est une valeur en px, et c'est ici un exemple)
substitution n°3 = ajout d'un ou plusieurs espace entre 2 images successives (3 espaces dans notre exemple) : </a><a remplacé partout dans la séquence par </a> <a (attention aux espaces : le code HTML de l'espace est et c'est ce qu'il faut utiliser dès que l'on veut introduire plus d'un espace).
Ces substitutions étant faites, on valorise maintenant le paramètre title pour chaque photo (exemple title="Bordure Est du plateau d'Ambel", ou alors on laisse vide le titre (c'est la valeur par défaut) - attention : pas de guillemet dans le titre, car il sert de séparateur - on peut utiliser en remplacement une double apostrophe.
Compte tenu de la géométrie de la page, 116px est la largeur de la miniature, avec 2 espaces entre deux photos successives, c'est à dire ce qui permet d'occuper totalement la ligne en présentant 6 photos par ligne (sauf la dernière ligne qui peut être incomplète).
Modèle de code pour l'insertion d'une série (1 ligne de 6 photos) :
C'est en réalité le travail amont de préparation des photos qui prend le plus de temps. Il faut en effet les choisir (ce n'est pas toujours facile), parfois les retoucher (contraste, luminosité), les retailler (sélection d'une zone particulière), quelquefois les assembler (montage de 4 photos en 1, par exemple), puis finalement les redimensionner à la définition HD 1280x720 ou 1280x960 (format 16/9 et 4/3 respectivement) avant de les uploader.
Exemple d'une série de 5 photos (présentation avec les 5 photos visibles et cliquables) :
On peut aussi lancer le diaporama en cliquant sur la 1ère image de la série, seule visible sur la page, ce qui donne ceci :
On fait ainsi une économie de place sur la page et, pour montrer qu'il s'agit d'un diaporama, on peut modifier l'image miniature de la première photo :
Bibliothèques JS et fichiers CSS utilisés pour obtenir notre affichage/enchaînement :
Nous allons examiner comment utiliser une police spécifique, en la plaçant sur le serveur et en la déclarant pour utilisation dans un CSS ; car il faut bien comprendre qu'une police présente sur son PC et utilisée dans son HTML pourra être absente des PC des visiteurs, et par conséquent remplacée par une police alternative tout à fait différente. NB : Font Squirrel est un excellent site pour trouver des polices. On va prendre pour exemple "1942", une police TTF (True Type Fonts) téléchargée sur le site Font Squirrel. Elle doit être déclarée de la manière suivante (localisation : la police a été uploadée sur halbox.mimetik.org) :
Cette séquence de code fait la déclaration de la police '1942' directement dans le code de la page avec la balise style. On utilise ensuite cette police dans du code HTML d'une manière simple, par exemple dans un span :
<span style="font-family:1942; font-size:24px; color:navy;"> pom pom pom pom... ici Londres !</span>, ce qui donne à l'affichage : pom pom pom pom... ici Londres !
Avec les Google Fonts, c'est plus simple :
• on spécifie le lien de la polise choisie dans Google Fonts, par exemple : <link href="https://fonts.googleapis.com/css?family=Yesteryear" rel="stylesheet">
• puis on l'utilise simplement : <span style="font-family:'Yesteryear',cursive; font-size:24px; color:navy; "> pom pom pom pom... ici Londres !</span>, ce qui donne à l'affichage : pom pom pom pom... ici Londres !
SCROLLING HAUT DE PAGE
C'est à la fois pratique et esthétique de cliquer sur un bouton pour remonter en sommet de page. Pour réailser cette action, il faut :
• marquer le sommet de la page ; on le fait en plaçant une ancre <div id="top_page"></div> ; cette ancre est une div identifiée par un nom quelconque - ici top_page ;
• placer en bas de page une image comme celle-ci et qui est un lien vers la div du haut de page.
Ce qui fait qu'une page a la structure suivante :
Haut de la page
<div id="top-page"></div>
Contenu de la page
code HTML de la page, avec le nom de la page en tête
...
Attention : toute mofification de la page en mode Rédiger modifie la valeur du lien href (noté en rouge) par autocomplétion, ce qui le rend inopérant ; il faut donc rétablir sa valeur en mode HTML, c'est à dire href='#top_page'.
REPERES UTILES DANS LE MODELE DU BLOG
Le modèle du blog est accessible par l'interface d'admnistration de Blogger menu Thème puis Modifier le code HTML. Il faut être très prudent quand on modifie, supprime ou ajoute du code dans cette page. Le risque est que le blog ne fonctionne plus correctement. On prévient ce risque en faisant une sauvegarde du code : Ctrl-A, Ctrl-C puis Ctrl-V dans un éditeur externe et on sauve le fichier (c'est du HTML, on peut le sauver avec l'extension .html). A la suite de quoi, on peut intervenir dans le code, oui mais où dans les 2500 lignes que compte la page... On va donc repérer maintenant par leur n° les entités HTML raisonnablement susceptibles d'évoluer :
• le CSS : c'est tout ce qui est écrit entre <b:skin> (ligne n°23) et </b:skin> (ligne n°347) ; on trouve dans cette partie tout ce qui relève du style ; c'est modifiable, c'est extensible en rajoutant par exemple des classes comme celles définies pour le descriptif des activités : .desc_titre {font-family:'times new roman',serif; font-weight:bold; color:#6aa84f; font-size:18px; line-height:1.5em;}
.desc_org {font-family:'times new roman',serif; font-weight:bold; color:#000000; font-size:18px; line-height:1.0em;}
.desc_txt {font-family:'times new roman',serif; font-weight:normal; color:#000000; font-size:16px; text-align:justify; line-height:1.0em;}
• le MENU : on le trouve entre <div class='nav3'> (ligne n°1106) et </div> (ligne n°1141) ; on peut ajouter des items au menu, modifier les intitulés, supprimer des items. Attention : ajouter un item, c'est ajouter la création d'une page indépendante, qu'il est préférable de créer d'abord en repérant bien son URL afin de la reporter sans erreurs dans la nouvelle entrée du menu.
• le BANDEAU-TITRE : l'image PNG est référencée à la ligne n°1030 ; sa définition est 960x180 px, réalisée par GIMP.
• les GADGETS : on les trouve dans la colonne de droite ; leur positionnement relatif se fait en passant par le menu Mise en page de l'interface Blogger ; il sont modifiables directement en cliquant sur l'icône qui ouvre une fenêtre popup ; le code est alors accessible et peut être modifié - attention : il est judicieux d'en faire une sauvegarde avant modification, car il n'est pas rare qu'une erreur syntaxique supprime carrément le gagdget !
La photo présentée en en-tête (le CA de TLC) est un GADGET HTML/JAVASCRIPT particulier, créé dans la colonne de droite et déplacé au centre pour sa persistance ; son code est tout simplement l'URL de l'image uploadée sur Google Photos ; la définition de cette image est 615x355 px.
Le bloc d'info NOTRE ACTUALITÉ est également un gadget HTML/JAVASCRIPT, déplacé de gauche au centre pour la même raison que l'image d'en-tête.
INSERTION DANS LE BLOG D'UN OBJET PRESENT SUR GOOGLE DRIVE
Nous avons vu plus haut que Google Drive est utilisé pour stocker nos fichiers de type PDF, ZIP, AUDIOS[1], HTML[2]... Pour déposer un objet sur Google Drive, on se connecte au compte Google du blog TLC, puis à Google Drive, et on fait des drags & drops de fichiers depuis son PC vers le Drive.
Pour intégrer dans le blog un objet présent sur Google Drive, il faut :
• se connecter à Google Drive (en étant préalablement connecté au compte Google du blog TLC) ;
• sélectionner un objet de la liste, puis clic droit > Obtenir le lien partageable ---> le lien est copié dans le presse-papier ; par exemple, pour le n°102 des Echos de TLC, on obtient : https://drive.google.com/open?id=1BQXbiMQtEiwiGhpP1IckDMSN8rlOtZ63
• puis dans le blog, insérer cette valeur dans le lien qui va nous permettre d'ouvrir l'objet <i class="fa fa-file-word-o"> </i><a href="https://drive.google.com/open?id=1BQXbiMQtEiwiGhpP1IckDMSN8rlOtZ63">Les Echos de TLC (N°102 - Décembre 2018)</a>
[1] L'intégration d'un doc AUDIO a été vue plus haut.
[2] Les documents HTML sont produits par Google Sites, un service qui permet la construction interactive de site ainsi que l'import et la modification de page HTML existante, en l'occurrence sur le PC ---> c'est l'option utilisée pour le présent tuto TLC-Barberaz.
[3] Attention : le sélecteur open devient uc lorsque l'on veut seulement référencer un objet (par exemple une image) dans le code HTML, et non pas l'ouvrir.
LE FLASHINFO
On utilise Mailchimp dont les caractéristiques essentielles sont les suivantes :
• MailChimp est gratuit jusqu’à 2 000 contacts et 12 000 emails envoyés par mois - la version gratuite ne donne pas accès à toutes les fonctionnalités, mais il semble que le "nécessaire et suffisant" soit disponible ;
• le service a la confiance de millions d’utilisateurs à travers le monde, c’est une référence ;
• MailChimp est un logiciel simple à utiliser, avec la possibilité de créer ses propres templates ;
• lire cet article pour une information plus détaillée ;
1• lire cet autre article pour les infos sur l'utilisation du logiciel.
Passons sur un certain nombre d'actions sur lesquelles nous reviendrons... Mais au terme de la configuration, de la conception d'un premier mail, de la création d'une liste de contacts et de l'envoi du mail, nous avons droit à cet écran, tout semble OK pour Freddie.
CREATION SUR BLOGGER DU FORMULAIRE D'ABONNEMENT AU FLASHINFO
Lors du processus de création du compte Mailchimp, nous avons configuré un formulaire d'inscription au Flashinfo ; c'est du code HTML généré par Mailchimp et intégrable dans toute page web - pour nous, ce sera dans un gadget HTML/Javascript de Blogger. Après quelques retouches pour adaptation au blog, nous créons le formulaire et le plaçons en haut de la colonne de droite. Pour information (et conservation) le code du gadget est le suivant (en rouge : ce qui a été changé dans le code généré par Mailchimp) :
ATTENTION : ce formulaire pointe vers une liste de contacts précise gérée par Mailchimp ; pour nous → TLC contacts (liste importée du système de gestion de TLC).
CREATION DU FLASHINFO
Nous examinons dans ce qui suit la gestion des contenus : création d'un contenu Flashinfo, gestion de la liste des contacts - ces opérations sont accessibles via le menu général Mailchimp après connexion au compte.
• Création d'un contenu
L'item Campaigns permet de créer, envoyer et gérer les "campagnes" d’emailing - pour nous, ce sera l'envoi de documents Flashinfo dont le contenu devrait rester simple. Un clic sur cet item ouvre une page listant les campagnes déjà réalisées, et permettant de créer une nouvelle campagne (c'est à dire un nouveau Flashinfo) en cliquant sur le bouton Create Campaign
On entre alors dans la création du mail : fenêtre 1 ---> fenêtre 2 ---> fenêtre 3 (les éléments du mail : images, texte, expéditeur, destinataires (la liste existante)) ---> et pour finir choix d'un modèle sauvegardé, et on expédie le mail à la liste courante des contacts - a priori une liste unique, mais on peut gérer des listes différentes (exemple : adhérents d'une activité TLC précise). En consultant les campagnes (item Campaigns), on constate que la nouvelle campagne a bien été ajoutée avec ses stats de consultation. Exemple de mail reçu par un contact de la liste et envoyé par Mailchimp.
• Gestion des contacts
L'item Lists permet de gérer les listes de contacts. Pour l'instant, cette liste est unique, elle contient les Emails des adhérents qui se sont inscrits via Blogger et ceux qui ont été inscrits via Mailchimp par l'administrateur : voir la fenêtre Lists. Pour voir la liste des contacts, on clique sur le nom de la liste.
INFORMATIONS DE SUIVI
Nous avons indiqué plus haut les conditions qui garantissent la gratuité du service : 2000 contacts au plus et un max mensuel de 12000 Emails envoyés. On peut vérifier où l'on se situe par rapport à cette contrainte en ouvrant le menu Paramètres (bouton v en haut à droite) et en sélectionnant Account ; on affiche cet écran qui fait le point de la situation.
CODES EN STOCK
Image cliquable insérée à gauche dans un texte justifié [présentation post]
Le vitrail est une composition de verre formée de pièces de verre. Celles-ci peuvent être blanches ou colorées et peuvent recevoir un décor. Le mot vitrail désigne une technique tandis que la fermeture d'une baie fixe avec du verre s'appelle une verrière. Depuis le début du Moyen Âge, ces pièces sont assemblées par des baguettes de plomb, appelées de la même manière, « plomb ». Ce procédé, bien qu'aujourd'hui toujours dominant, n'est pas le seul en usage, d'autres techniques existent telles que celles du ruban de cuivre (aussi appelée méthode Tiffany, de son concepteur Louis Comfort Tiffany), de la dalle de verre enchâssée dans le béton ou le silicone, de collages (avec des résines ou des polymères), de thermoformage, de fusing et du vitrail à verre libre, peuvent être utilisées ou combinées.
Le samedi 30 et le dimanche 31 mars, l'atelier "Vitrail" fera une présentation de son activité, suivie d'une démonstration sur le verre ( découpe, meulage et mise au fil de cuivre), d'une exposition de travaux d'élèves avec vente d'objets et de la projection d'un film sur le travail du plomb et la peinture sur verre. De 9h à 12h et de 14h à 18h dans la Salle associative à Barberaz.
Code de la séquence (en rouge → positionnement et définition de l'image, positionnement et présentation du texte) :
<a class="fancybox" rel="une valeur ou rien" href="url de l'image"><img border="0" src="url de la miniature de l'image" style="float:left;margin-right:1.0em;margin-bottom:0.2em;" width="128"></a><div style="text-align:justify;">Début du texte<br />Suite du texte</div>
Texte avec un paragraphe distingué (retrait, italique, image à gauche) [présentation post]
Un « Blog », qu’est-ce que c’est ? C’est d’abord la contraction des mots anglais « Web Log » c’est-à-dire tout simplement « carnet de bord » qui, lorsqu’on le consulte, ressemble à un site internet mais est structuré différemment. Les auteurs y publient régulièrement des articles au fil du temps, organisés en catégories. Concrètement cela signifie une approche beaucoup plus claire, des textes plus lisibles, des renseignements plus faciles à trouver et une mise à jour simplifiée. Notre site internet souffrait de multiples inconvénients. Pas toujours bien lisible, une certaine confusion dans les informations, des difficultés à s’y retrouver, une lourdeur dans sa gestion avec surtout une mise à jour peu aisée. Un site internet doit vivre et ne pas accumuler d’informations périmées. C’est pourquoi est née l’idée de le remplacer par un blog.
Vous trouverez dans ce Blog, les infos d’actualité dans la rubrique ACCUEIL, la présentation de l’association dans la rubrique ASSOCIATION, un descriptif détaillé et tous les plannings des activités proposées par TLC dans la rubrique ACTIVITES, des photos et vidéos souvenirs des uns et des autres dans la rubrique DOCS MEDIAS, des documents divers et les bulletins trimestriels dans la rubrique TELECHARGEMENTS et dans la rubrique CONTACT toutes les informations et coordonnées administratives. Sur la colonne de droite, vous retrouverez facilement les articles classés par ordre chronologique puis alphabétique ainsi que des liens pour accéder aux blogs amis.
Née il y a 30 ans, Tourisme Loisirs Culture - Barberaz est la plus importante association de Barberaz ; ses adhérents se recrutent à présent dans un secteur qui dépasse largement les limites de la commune, voire du département. L’association, plus connue sous l’appellation TLC, propose à tous une vingtaine d'activités accessibles gratuitement ou moyennant une participation aux frais, que ce soit pour ceux qui aiment voyager et découvrir, ceux qui veulent garder la forme, ceux qui veulent en apprendre plus, les artistes ou amateurs de jeux de société ou encore les amoureux de la danse.
Code de la séquence :
<div style="text-align:justify;">Début du texte<br /><br /><div style="font-style:italic;margin-left:100px;padding-left:5px;border-left:5px solid gray;"><div style="float:left; margin-right:0.8em;margin-bottom:0em;"><img src="url de l'image" width="64"></div>Le paragraphe distingué</div><br />Suite du texte.</div>
TITRE ARTICLE
Il est parfois utile de se positionner en début d'un article lorsque l'on clique sur un lien pointant sur cet article. Pour cela, on ajoute devant le titre de l'article lors de sa création la séquence de code suivante (on appelle ça une ancre) :
<a id="top_article"></a>
Puis, lorsque l'on veut pointer vers cet article, on complète la valeur du lien en ajoutant après l'URL la séquence :
#top_article
Ce qui donne avec un exemple : https://tlcbarberaz.blogspot.com/2019/03/exposition-de-latelier-vitrail.html #top_article ; l'URL "normale" est complétée par l'ancre top_article, ce qui permet la positionnement en début d'article (ou presque, ça dépend de la longueur de l'article).
NOTE : pour connaître l'URL d'un article, cliquer sur LIRE LA SUITE et copier la valeur du lien qui figure dans la barre d'adresse.
