Widgets et Objets multimédia dans vos pages web

Page 8 sur 27

Images dans les paragraphes

Depuis l'étape des rubriques de TOWeb sélectionnez la rubrique puis le paragraphe où vous souhaitez ajouter votre image. Si votre paragraphe n'a pas encore le moindre objet, sélectionnez Ajouter une image ( ) soit depuis la liste Objet située dans la barre latérale gauche de TOWeb, soit depuis le bouton ( + ) affiché dans le menu contextuel qui apparait au survol d'un paragraphe. Si votre paragraphe possède déjà un objet que vous souhaitez conserver, alors ajoutez un nouveau paragraphe avec ou sans aucun texte initial, dans lequel vous ajouterez votre image puis déplacez ensuite ce nouveau paragraphe comme vous le désirez dans la page c'est à dire : en choisissant la position de votre image par rapport au texte de votre paragraphe à l'aide des imagettes de présentation proposées, en modifiant l'alignement de vos paragraphes entre eux par un changement de leur largeur si vous désirez aligner des paragraphes les uns à côté des autres et créer ainsi des colonnes, les déplacer également les uns avant ou après les autres pour obtenir l'ordre de présentation désiré.

Fonctions & propriétés d'une Image

Dans la barre latérale gauche, TOWeb vous propose différentes fonctions pour vous permettre d'ajouter ou remplacer votre image, d'effectuer un "coller" d'une image (si celle-ci est déjà présente suite à à un "copier" dans votre presse-papier Windows), d'utiliser l'éditeur d'image de TOWeb pour la modifier mais également :

  • d'indiquer un titre à votre image. Ceci est important si vous voulez que votre image puisse être correctement référencée par les moteurs de recherche tels que Google Images. IMPORTANT : les nom des fichiers images contenus dans votre site sont basé sur les noms des fichiers originaux lorsque vous les ajoutez dans votre site. Si vous voulez que le nom du fichier image soit "parlant" il est important de lui donner un nom de fichier significatif avant de l'ajouter dans votre paragraphe (par exemple d'ajouter une image "ordinateur-portable.jpg" au lieu de son nom de fichier original "DSC34663.JPG")
  • de choisir la largeur de votre image affichée dans votre paragraphe parmi la liste des tailles proposées par TOWeb
  • d'appliquer ou non un effet de bordure pour encadrer votre image
  • de sélectionner une éventuelle action lors du clic sur l'image qui peut être soit un effet zoom ou bien un lien vers une autre page web
  • d'ajouter un ruban colorisé dans le coin supérieur droit de votre image contenant un petit mot ou un chiffre
  • d'appliquer un effet de zoom au survol de l'image à la souris
  • d'ajouter un badge à votre image c'est à dire une image complémentaire de petite taille qui s'affichera à côté de votre image. Ceci peut être utile pour ajouter une information en votre image complémentaire comme par exemple pour afficher un badge -20% de réduction sur la photo d'un produit en promotion
  • d'ajouter des images supplémentaires (voir chapitre suivant sur les "images multiples")

Images Multiples : mini-album & diaporama intégrés à un paragraphe

Utilisez le bouton Images multiples ( ) pour ajouter d'autres images à votre objet image. Cette fonction est utile si vous souhaitez afficher différentes images sur un même sujet (comme par exemple différentes photos d'un produit) en les présentant sous la forme d'un mini-diaporama ou d'un mini-album à l'intérieur de votre paragraphe. Vos images devront toutes avoir la même taille si vous ne voulez pas que le contenu de la page web "bouge" lors de la navigation d'une image à une autre. Si vous avez au moins 2 photos à l'intérieur du même objet image alors vous pouvez choisir un affichage de type:

  • album : une liste de vignettes apparaît alors sous l'image sélectionnée et en cliquant sur chacune de ces petites photos elles apparaitront agrandies dans l'objet image situé au-dessus
  • diaporama : avec un animation à vitesse ajustable

Pour changer l'ordre des images, vous devez enfoncer la touche CTRL de votre clavier tout en cliquant sur les boutons de navigation dans les images multiples.

Enfin pour chaque image vous pouvez définir différents liens à l'aide du bouton action et en choisissant lien (si vous souhaitez que lors d'un clic sur une image cela redirige vers des pages de votre choix) ou bien en choisissant l'action zoom (pour que chaque image puisse être agrandie en plein écran et en surimpression dans la même page).

Support des images Retina

Chaque fois que cela est possible, TOWeb rajoute dans le code source de vos pages des URLs vers des images de densité supérieure pour que les écrans Retina (c'est à dire les écrans ayant des densités de pixels supérieures à 1, comme par exemple 2x pour de nombreux smartphones) utilisent ces images "ultra-nette". 

Pour qu'une image de votre site puisse être affichée en haute densité, il faut que TOWeb dispose de cette image sous une taille au moins 2 fois supérieure à celle que vous désirez afficher. Si par exemple dans un paragraphe vous affichez une image en 300 pixels de large, alors l'image originale à insérer dans TOWeb devra avoir une largeur supérieure à 600 pixels (2 x 300) pour pouvoir être affichée en mode Retina. Si tel est le cas alors une icône symbolisant un oeil () s'affichera dans TOWeb à côté de la liste déroulante de sélection de largeur d'image pour indiquer la prise en compte du support de cette image en mode Retina.

Filigrane pour protéger vos images

TOWeb vous offre la possibilité d'ajouter un filigrane aux images de votre site c'est à dire d'altérer toutes vos images ayant une  taille suffisamment large par l'ajout d'un texte incrusté en surimpression qui contiendra par exemple le nom de votre site web ou votre nom personnel afin de mentionner vos droits d'auteur (copyright) et empêcher ainsi la réutilisation de vos images par des internautes.

  • si vous désirez que le filigrane soit appliqué à toutes les images de votre site il vous faudra utiliser la fonction filigrane située dans "Options > Sécurité & HTML > Filigrane sur les images"
  • si en revanche vous souhaitez appliquer un filigrane seulement aux images d'une rubrique bien précise alors vous devrez utiliser la fonction filigrane depuis cette rubrique de la manière suivante :
    • en utilisant le bouton " Filigrane sur les images" situé dans les options de "Sécurité" de votre rubrique
    • ou bien, si vous avez sélectionné un paragraphe de votre rubrique et que celui-ci comporte une image, en cliquant sur le bouton (  ) situé parmi les actions possibles sur votre image
L'ajout d'un filigrane sur des images est une opération irréversible, cela signifie que la seule manière d'annuler cette action une fois appliquée consistera à quitter TOWeb et fermer votre site sans enregistrer vos modifications. Et si jamais vous avez enregistré vos changements mais ne désirez revenir à la situation antérieure sans filigrane sur vos images alors dans ce cas il vous faudra
  • soit remplacer une à une les images de votre site en utilisant le bouton (  ) "Restaurer l'image d'origine" situé au niveau de chaque image,
  • soit restaurer une ancienne sauvegarde que vous aurez conservé (fichier WGA contenant toutes les données de votre site) de manière à repartir d'une ancienne version de votre site qui ne contenait aucun filigrane sur vos images.
D'autre part les images sur lesquels vous avez déjà appliqué un filigrane ne peuvent pas recevoir un second filigrane. Par conséquent seules les nouvelles images dernièrement ajoutées à votre site (celles ne contenant pas encore un filigrane) vous seront proposées lorsque vous réutiliserez de nouveau la fonction filigrane.

Icônes dans les textes

En édition d'un titre ou d'un texte de paragraphe (par double-clic), placez vous à l'endroit désiré et utilisez le bouton icône ( ) pour insérer, modifier ou supprimer une icône. TOWeb vous propose une liste d'icônes prédéfinies dont la taille est proportionnelle à la taille de la police de caractères utilisée sur votre site et ces icônes peuvent être colorisés. Vous pouvez également parcourir et ajouter votre propre fichier icône si vous en avez. Les icônes peuvent être ajoutées n'importe où à l'intérieur de vos textes, y compris dans des boutons liens pour mieux les mettre en valeur.

Albums

Pour créer un album, cliquez sur le bouton Ajouter une nouvelle rubrique ( ) situé dans la barre d'outil en haut puis sélectionnez le type de rubrique Album ( ). Ajoutez et sélectionnez alors vos images à la liste, puis saisissez un nom court pour votre album (ce sera celui affiché dans le menu de votre site mais également celui affiché dans la liste de vos rubriques) avant de cliquer ensuite sur le bouton "Ajouter cette rubrique à mon site".

Chaque album est constitué d'une page d'index contenant toutes vos photos et de plusieurs pages photos (1 page par photo) avec les images affichées en grande taille, avec éventuels titres et commentaires.
Si vous souhaitez ajouter, supprimer ou modifier l'ordre de vos photos à l'intérieur d'un album, vous pouvez le faire à partir du menu contextuel par un clic-droit sur l'image ou utiliser la fonction Organiser ( ) qui vous permet de déplacer vos images par glisser-déposer pour les déplacer plus facilement et/ou pour les supprimer plus rapidement.

Vous pouvez également créer des mini-albums et diaporama à l'intérieur d'un paragraphe avec l'objet image d'un paragraphe.

Vidéos

Depuis l'étape des rubriques de TOWeb sélectionnez la rubrique et le paragraphe où vous souhaitez ajouter votre vidéo. Si votre paragraphe n'a pas encore le moindre objet il vous suffit de sélectionner l'ajout de l'objet Vidéo HTML5 ( ) ou Vidéo YouTube ( ) ou Vimeo ) soit depuis la liste Objet située dans la barre latérale gauche de TOWeb, soit depuis le menu contextuel en effectuant un clic-droit sur votre paragraphe. Si votre paragraphe possède déjà un objet que vous souhaitez conserver, alors ajoutez un nouveau paragraphe (avec ou sans texte) dans lequel vous ajouterez votre vidéo puis déplacez ensuite votre nouveau paragraphe.
Une vidéo vous sera proposée par défaut. Pour la remplacer par la vôtre, saisissez ou copiez/collez l'URL de votre vidéo. Dans le cas d'une vidéo HTML5, trois formats vidéos seront acceptés (MP4, WebM et OGV) et il vous faudra indiquer au moins une URL d'un de ces formats.
Une fois votre vidéo ajoutée à votre paragraphe, vous pouvez choisir son positionnement par rapport aux textes en utilisant les différentes possibilités de présentation proposées, modifier l'alignement de vos paragraphes entre eux en changeant simplement leur largeur afin de pouvoir en disposer plusieurs les uns à côté des autres, et les déplacer également les uns avant ou après les autres pour obtenir la présentation désirée dans votre page.

Google Maps

Depuis l'étape des rubriques de TOWeb sélectionnez la rubrique et le paragraphe où vous souhaitez ajouter votre objet carte ( ) Google Maps. Si votre paragraphe n'a pas encore le moindre objet il vous suffit de sélectionner l'objet carte, soit depuis la liste Objet située dans la barre latérale gauche de TOWeb, soit depuis le menu contextuel en effectuant un clic-droit sur votre paragraphe. Si votre paragraphe possède déjà un objet que vous souhaitez conserver, alors ajoutez un nouveau paragraphe (avec ou sans texte) dans lequel vous ajouterez votre carte et déplacez ensuite votre nouveau paragraphe à l'endroit désiré.
Une fois que votre objet carte est ajouté à votre paragraphe, remplissez alors les 2 champs suivants .

  • Centre de carte : entrez une adresse ou bien une latitude et une longitude séparées par une virgule. Si vous laissez le champ vide de la carte sera centrée sur le premier marqueur.
  • Marqueurs : entrez une adresse par ligne suivie d'un éventuel commentaire précédé d'un caractère double point ( : ). Les commentaires ne fonctionneront que sur des cartes dynamiques.

Exemples :

Paris, Texas
Paris, Texas : J'habite ici !
33.6608333 , -95.5652778 : Je travaille ici !

Enfin, sélectionnez le type d'affichage et le niveau de zoom désiré pour votre carte ainsi que sa largeur et sa hauteur d'affichage pour l'intégrer au mieux dans votre paragraphe et la présentation de votre page.

IMPORTANT: depuis le 22 juin 2016, Google oblige l'utilisation d'une clé API pour les cartes. Si votre site n'affiche pas correctement vos cartes et/ou si vous n'utilisez pas encore de clé API, alors vérifiez cela au niveau de vos Services Google.

Widget Twitter

L'ajout d'un Widget Twitter dans un paragraphe de votre site nécessite d'avoir déjà un compte Twitter sinon il vous faudra en créer un depuis le site Twitter. Une fois connecté à votre compte Twitter vous pourrez alors créer un ou plusieurs Widgets Twitter, qu'il vous faudra copier/coller dans l'assistant d'ajout d'objet Twitter Widget de TOWeb en procédant comme suit : depuis l'étape des rubriques de TOWeb sélectionnez la rubrique et le paragraphe où vous souhaitez ajouter votre objet (  ) Widget Twitter. Si votre paragraphe n'a pas encore le moindre objet il vous suffit de sélectionner l'objet Twitter Widget, soit depuis la liste Objet située dans la barre latérale gauche de TOWeb, soit depuis le menu contextuel "Modifier" affiché au survol de votre paragraphe. Si votre paragraphe possède déjà un objet que vous souhaitez conserver, alors ajoutez un nouveau paragraphe (avec ou sans texte) dans lequel vous ajouterez votre Widget Twitter et déplacez ensuite votre nouveau paragraphe à l'endroit désiré (et avec l'éventuelle largeur sohaitée). 

Le flux des messages Twitter ayant généralement d'une importance complémentaire et/ou secondaire dans une page, il peut être préférable de placer votre objet Widget Twitter dans un panneau latéral plutôt que dans un paragraphe.

Vos Widgets pourront être modifiés depuis le site de Twitter et s'il s'agit de Widget déjà présents sur votre site alors vos changements seront appliqués à votre site sans avoir besoin de le republier. TOWeb propose également des options de personnalisation mais si vous les changez alors il vous faudra republier votre site pour que les internautes puissent voir vos changements. 

Objet graphique

L'objet graphique vous permet d'afficher des données sous différentes formes et styles. Depuis l'étape des rubriques de TOWeb sélectionnez la rubrique et le paragraphe où vous souhaitez ajouter votre objet (  ) Graphique. Si votre paragraphe n'a pas encore le moindre objet il vous suffit de sélectionner l'objet graphique, soit depuis la liste Objet située dans la barre latérale gauche de TOWeb, soit depuis le menu contextuel "Modifier" affiché au survol de votre paragraphe. Si votre paragraphe possède déjà un objet que vous souhaitez conserver, alors ajoutez un nouveau paragraphe (avec ou sans texte) dans lequel vous ajouterez votre graphique et déplacez ensuite votre nouveau paragraphe à l'endroit désiré.
Une fois que votre objet graphique ajouté à votre paragraphe, vous avez le choix entre 6 formes de graphiques différents :

  • Line 
  • Bar
  • Radar
  • Polar area
  • Pie
  • Doughnut 

avec pour chaque graphique des possibilités de personnalisation comme notamment celles du choix des couleurs, de l'affichage ou non d'une grille, d'une légende ou d'une animation (qui n'apparaitra que lors de son premier affichage). Ci-dessous quelques exemples de résultats possibles. 

Exemple 1 : Bar

Exemple 2 : Radar

Exemple 3 : Line

Exemple 4 : Pie

Compteur de temps écoulé & Compte à rebours

TOWeb permet d'afficher dans vos pages des compteurs de temps fonctionnant comme un compte à rebours et/ou comme un compteur de temps écoulé en fonction de la date et heure d'un événement que vous avez précisé. Une fois la date de l'événement survenue vous avez la possibilité soit d'afficher un message du compteur expiré, soit de laisser le compteur repartir dans l'autre sens (c'est à dire de fonctionner comme compteur de temps écouler depuis la date de l'événement déjà passé). 

Depuis l'étape des rubriques de TOWeb sélectionnez la rubrique et le paragraphe où vous souhaitez ajouter votre objet (   ) compteur de temps. Si votre paragraphe n'a pas encore le moindre objet il vous suffit de sélectionner l'objet compteur, soit depuis la liste Objet située dans la barre latérale gauche de TOWeb, soit depuis le menu contextuel "Modifier" affiché au survol de votre paragraphe. Si votre paragraphe possède déjà un objet que vous souhaitez conserver, alors ajoutez un nouveau paragraphe (avec ou sans texte) dans lequel vous ajouterez votre compteur puis déplacez ensuite votre nouveau paragraphe à l'endroit désiré.

Une fois votre objet compteur ajouté à votre paragraphe, vous pourrez alors fixer la date de votre événement, choisir si vous souhaitez afficher ou non les jours/heures/minutes/secondes, personnaliser les couleurs, les dimensions et le comportement une fois la date de l'événement survenue.

Exemple 1 : Compte à rebours en jours, heures, minutes et seconde jusqu'au jour de l'an 2019.

Exemple 2 : Compteur de temps écoulé en heures, minutes et seconde depuis le 1er décembre 2017

Plan & Prix

L'objet "Plan & Prix" vous permet d'afficher une ou plusieurs fiches de caractéristiques contenant les tarifs et éventuels liens vers vos différents produits ou services. La présentation des fiches est personnalisable (style, couleur, etc) et une mise en valeur spécifique peut éventuellement être également appliquée afin de faire ressortir une fiche particulière parmi les autres pour l'indiquer comme étant celle généralement recommandée / conseillée.

Exemple:
DébutantElementum ornare sapien
4,49€/ mois
  • At vero eos
  • Aliquam facilisis purus
  • Fusce condimentum
  • Ut non libero
  • Consecte adiping elit
ProOfficia deserunt mollitia
9,99€/ mois
  • At vero eos
  • Aliquam facilisis purus
  • Fusce condimentum
  • Ut non libero
  • Consecte adiping elit
ExpertMauris vitae bibendum
18,69€/ mois
  • At vero eos
  • Aliquam facilisis purus
  • Fusce condimentum
  • Ut non libero
  • Consecte adiping elit

Fiche

L'objet "Fiche" vous permet de mettre en valeur une ou plusieurs photos avec l'éventuelle présence à chaque fois d'un titre et/ou descriptif ainsi qu'un lien. Son utilisation peut-être multiple et variée selon les besoins comme par exemple pour l'affichage d'un trombinoscope (comme ci-dessous) ou d'une page de présentation de photos, albums, catalogues produits, etc.

Exemple:

Jane Smith

Elementum ornare sapien

John Doe

Officia deserunt mollitia

Dolores Kilgore

Mauris vitae bibendum

Pourcentage

L'objet "Pourcentage" vous permet d'afficher un ou plusieurs pourcentages avec une mise sous la forme de jauge pour les mettre en valeur et les rendre plus visuels. Cet objet peut être particulièrment utile par exemple lorsque vous désirez mettre en avant certaines caractérisques de vos produits, l'état d'avancement de différents aspects d'un projet, les niveaux de compétences atteints dans différents domaines, etc.

Exemple:

Qualité

100%

Prix

60%

Style

40%

Chiffre clé

L'objet "Chiffre clé" vous permet d'afficher un ou plusieurs chiffres clefs de votre société ou d'un projet avec une mise en forme pour les mettre en valeur.

Exemple:

15

Projets

124

Employés

49

Compétences

Note

L'objet "Note" vous permet d'afficher un message dans un cadre coloré "façon Post-it" dans une page de votre site.  Selon vos besoins vous pourrez y saisir un titre et/ou un texte et/ou un nom d'auteur en utilisant différentes options d'affichage (angle inclinaison, couleurs, épingle, etc). Cet objet peut être particulièrement utile par xeemple dans ces cas de figures :

  • lorsque vous avez des citations
  • lorsque vous désirez mettre en valeur un point essentiel de votre page comme par exemple un conseil important, un texte d'aide, une conclusion, etc
  • ou en utilisant plusieurs "Notes" placées les unes à coté et en dessous des autres afin de "simuler" la vue d'un bureau sur lequel serait posés toutes les choses importantes à connaitre d'un produit, d'un projet, etc
Exemple:
TOWeb V7
Logiciel de création de site web responsive
Lauyan Software
TOWeb V7
Logiciel de création de site web responsive
Lauyan Software

Frise chronologique

L'objet frise chronologique vous permet d'afficher des événements de manière linéaire et chronologique dans un diagramme vertical. La ligne de temps peut contenir des "étapes" servant à classer/regrouper vos événements selon vos besoins (par exemple par jours, par mois, par projets, etc) et vos messages peuvent éventuellement être "typés" par l'utilisation d'un style différent selon qu'ils sont situés à gauche ou à droite. En fonction de vos besoins, TOWeb vous propose également différents choix prédéfinis pour le formatage des date/heure de chaque événement ou bien la possibilité de saisir votre propre texte personnalisé à la place, ce qui peut être utile particulièrement dans les cas suivants:

  • lorsque vous souhaitez afficher non pas des dates mais par exemple des sous-titres à vos événements ou bien des noms de projets au niveau de vos "étapes" 
  • si vous désirez afficher non pas une date mais une période comme par exemple "Vacances du 9 au 19 mars" ou "Période de la Renaissance" ou afficher une date plus libre comme par exemple "Hier", "J-1", "2000 ans avant J-C.", etc
  • si vous désirez utiliser la Frise chronologique juste dans le but de présenter les différentes étapes d'une procédure à suivre (étape 1, étape 2, etc) sans forcement vouloir faire apparaitre la moindre notion de date mais une simple chronologie à suivre.

Remarque: si vous désirez créer une frise chronologique à partir d'un fichier iCalendar (ics) vous pouvez le faire par l'ajout d'une nouvelle rubrique de type "Un Planning/Calendrier" où ce choix vous sera proposé après avoir sélectionné l'option "Frise chronologique"

Exemple 1 : Evénements journaliers classés de manière anti-chronologique et délimités par des étapes mensuelles  
  • Bonne St Valentin

    14/02/2018

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

  • Bon anniversaire

    05/02/2018

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    Plus...
  • Février 2018
  • Bonne année !

    01/01/2018

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

  • Janvier 2018

Exemple 2 : Echange de messages affichés de manière chronologique par heure selon les jours

  • Avant-hier
  • 1

    16:33

    John Doe

    Lorem ipsum dolor sit amet.

  • 2

    16:34

    Jane Smith

    Ut enim ad minim veniam.

  • Aujourd'hui
  • 3

    17:33

    John Doe

    Consectetur adipisicing elit.

Autres objets

Pour l'ajout d'autres objets plus interractifs entre vous et les internautes consultez les i-services : sondages, blogs, formulaires et mailing lists.

Enfin pour l'ajout d'objets non supportés ou non proposés par défaut par TOWeb, il vous faudra vous procurer les lignes de code HTML ou scripts appropriés à vos besoins et les intégrer dans des paragraphes de votre site en utilisant les champs Scripts TOWeb.