Want to make creations as awesome as this one?

No description

More creations to inspire you

Transcript

4.4 : Stratégies de l’interactivité

- 4.4.1 : interactivité multimédia, à l’écran - 4.4.2 : approche de la création de site internet, interaction, web 2.0, référencement - 4.4.3 : la création d’un message internet (intranet, site web corporate (communication sur le groupe ou l'entreprise), blog, réseaux sociaux)

Exemple : sujet de prod

Liens + interactivitéimages, vidéos, dimension responsive de la pageRéférencement (mots clés)

Rapports Textes / images/ taille des écrans(15-24 ans donc sur mobiles)

Etude de Mc Kinsey réalisée en 2007 sur le Web 2.0, puis actualisée

Définition : interactivité

Lacommunication interactive (ou e-communication) désigne« la possibilité pour une ou plusieurs personnes de communiquer alternativement comme émetteur et récepteur avec une ou plusieurs personnes en temps réel, synchrone (site Web) ou de manière décalée, asynchrone (e-mail) » De La Giraudière, 2007.

Il s’agit donc pour les entreprises d’offrir à leurs parties prenantes la possibilité de devenir émettrices, et sortir de leur statut passif.

2016 utilisateurs sur mobiles et tablettesdépassent celles sur ordinateurs

Définition : web 1.0

Dans les années 90, les méthodes de référencement étaient principalement centrés sur le site internet, via des mots clés, où le visiteur se positionnait non pas comme acteur mais lecteur sur un Web 1.0 statique.

Définition : web 2.0

Le Web 2.0 a révolutionné les paramètres en incluant les réseaux communautaires dans le processus de visibilité de nos pages web. Ainsi, la communauté est devenue le centre actif du référencement naturel.

Définition : web 3.0

Le Web 2.0 a évolué en Web « sémantique » (3.0)

Des données (data)qui interpretent de façonautonome (programmée)d'autres données etquifont du sens

Pourquoi penser et créer en étant mobile friendly ?

Source : agence SEO.fr Évolution des utilisateurs d’internet dans le monde : Mobile VA ordinateur de 2007 à 2015 (Morgan Stanley Resarch)

Les attributs du multimédia

https://journals.openedition.org/alsic/1549

L'hypertexte(liens) est en effet la première caractéristique du multimédia= passer, grâce à un simple clic sur une zone sensible, d'un texte à un autre (ou à des images, du son ou de la vidéo).Les deux usages de l'hypertexte sont la simple consultation ou la création de nouveaux hypertextes.Métaphore agricole sur les usages de l'hypertexte (l'extraction, la transformation et le jardinage ou butinage).

combinaison de plusieurs média

Lamulticanalité ou coexistence de divers canaux de communication sur un même support a ceci denouveau qu'elle est pilotée par ordinateur ou mobile et ainsi d'accès facile. L'intérêt de cette multicanalité réside dansla pertinence et la richesse des liens créés entre les médias et de la convergence des écrans.1 page peut contenir du texte, des images fixes, animées, vidéos, des sons, des données dynamiques (qui s'actualisent), des boutons d'interactivité, des fenêtres d'interaction, des affichages synchrones, asynchrones, des affichages externes (embed, iframe), ...Comportement du webmestre : usage en mode responsiveAdaptabilité des contenus à la taille des écrans des interface

Les attributs du multimédia

combinaison de plusieurs média

Définition : responsive

Le Responsive Web Design (RWD) ajuste automatiquement l’affichage d’une page web à la taille d’écran du terminal utilisé.

Le Responsive design a été traduit en français par Design réactif/adapté/réceptif. Ce design permet de modifier la mise en page d’un site afin que le contenu s’adapte à l’écran quel que soit le terminal utilisé (smartphone, tablette, ordinateur de bureau, TV…). Il s’agit d’adapter le site à toutes les résolutions. Autrement dit, les blocs de contenus (textes et images) se redimensionnent et se réorganisent en fonction de l’espace disponible sur l’écran.

3 interfaces :- ordinateur- tablette- mobile

En mai 2010, Ethan Marcotte, designer, publie un article sur le webzine « A List Apart ».Il y aborde pour la première fois le concept de Responsive Design, qu’il développe dans un livre (« Responsive Web Design ») un an plus tard.- Centraliser les contenus en gérant les CSS (données séparées, affichées par des feuilles de style à part)- Création et maintenance de sites plus rapide et plus facile- Design et contenus identiques, donc familiers pour l’utilisateur

Le CSS3 a rendu possible le Responsive Web DesignLe Responsive Web Design a bénéficié de l’arrivée des Media Queries de CSS3 (gestion dynamique des feuilles de style). Un site pensé en Responsive Web Design est conçu ainsi :- Une seule base de code HTML identique pour tous les terminaux.- Un système de grilles fluides (largeur x hauteur en % / page)où se placent les contenus de la page.- L’utilisation des CSS3 Media Queries pour appliquer la feuille de style adéquate.- Des images flexibles/adaptatives dont la taille/résolution s’ajuste automatiquement (affichage en %)

L’interface du site web est lisible et utilisable sur tous les appareils. Le contenu se rétrécit et s’agrandit à volonté sans changer. Il est possible de cacher un contenu. Par exemple, une image ou un texte peuvent n’être visibles que sur le site web en mode ordinateur (desktop) et tablette, et absents pour un affichage sur mobile (gain de place, meilleure lisibilité à l'écran).

Site pour vérifier le paramètre responsive https://bluetree.ai/screenfly/

Feuilles de style

Contenu affiché pour internaute

http://mediation.centrepompidou.fr/education/ressources/ENS-identite-visuelle/identite03.html

Démo mode "inspecter" sur page internetAffichage contenu / feuille de style Affichage Instagram comme sur mobile

Lamultiréférencialité (liée à hypertexte et multicanaux)permet de relier un documentavec beaucoup d'autres en fonction de diverses logiques. Thierry Lancien distingue la multiréférencialité intra ouintertextuelle (sources, versions différentes, etc.), contextuelle (informations parallèles au sujet traité) etcréative.

Les attributs du multimédia

L'interactivité enfin, mot magique qui s'entend ici comme "réactions différenciées d'une machine par rapport à une intervention humaine" et qui constitue la richesse essentielle du multimédia.Mais attention :- problèmes de navigation (règle d'efficacité : contenu accesssible en moins de 3 clics)- surcharge cognitive et de superficialité des approches et découvertes

Distinction entre interactivité et interaction

· L'interactivité appartiendrait donc à l'ordre de la relation homme/machine : l'interactivité fonctionnelle gère le protocole de communication entre l'utilisateur et la machine, elle concerne la capacité qu'a l'utilisateur d'interagir avec les outils, machines, logiciels, applicationsutilisées (liens internet ou hypertextes, lancer une vidéo, télécharger un contenu, image en roll-over, ...).· L'interaction appartiendrait à la relation entre interlocuteurs, non co-présents, relation médiatisée par une interface (échanges en visio, chats 1ère génération).

Exemples d'interactivités sur page web https://www.w3schools.com/howto/default.asp

Effets identiques avec codes différents https://www.templatemonster.com/blog/create-rollover-image-effect-css-html-js/

Interaction transformée en interactivité (programmation) https://www.profartspla.info/index.php/orientation/1615-qui-a-dit-que-l-art-n-avait-pas-de-debouches-jema-journees-europeenne-des-metiers-d-art

C'est un exemple d'interactivité :clic sur l'image > déclenche ouverture de fenêtre en pop up

Le référencement

Le SEO (Search Engine Optimization), plus communément appelé référencement naturel, est une activité dont le but est de faire remonter un site le plus haut possible dans les résultats de recherche Google. Il s’oppose directement au SEA (Search Engine Advertising), nécessitant quant à lui un paiement à Google Ads en échange d’un positionnement sponsorisé en haut de page. Le SEO est incontournable pour augmenter la visibilité d'un site et donc de son contenu.

Comment ?- Optimiser ses Meta Title et Descriptions Situés dans l’en-tête HTML de la page (entre <head> et </head>) les balises Meta Title et Descriptions sont des éléments phares de l’optimisation éditoriale SEO.(démo page fonction "inspecter" et code html)- Publier régulièrement du nouveau contenu.- Publier un sitemap (le référencer sur Google)- Placer du netlinking est également appelé link building ou encore linking externe : lien entrant (Backlinks = depuis réseaux, autres site avec même thématiques, ...) pointant sur votre site et le moins de lien sortant (pour ne pas perdre le jus de référencement)- Diversifier les sources des liens entrants, 100 liens provenant de 100 sites différents seront plus efficaces que 100 liens provenant d’un même site.

Les "messages" internet

La communication sur Internet : pages internet, messageries électroniques (classiques et instantanées), réseaux sociaux, forums, blogs, newsletter, campagnes de mailing, chat, notifications, flux RSS, commentaires, ...

L’industrie du numérique, une source de pollution croissante. Céline Deluzarche, Futura

Idée reçue :Un e-mail non imprimé est plus écologiquequ'une lettre envoyée par la poste ...

Les "messages" internet

au service de la communication avec vos internautes

Newsletter : abonné à votre infolettre, l'internaute reçoit directement l'information et n'a plus besoin de la chercher (c'est l'info qui vient à lui).Exemple à expliquer :

https://perezartsplastiques.com/

Flux RSS : abonné à votre site, l'internaute reçoit directement les mises à jour et n'a plus besoin de naviguer sur votre site pour prendre connaissance des dernières publications (mises à jour).Exemple avec CDI du lycée :Mailing list ou listes de diffusion : envois de mails groupés en grand nombre.

https://sites.ac-nancy-metz.fr/lyc-la-communication/feed/ (données brutes)

https://feedly.com/

site de lecture et d'abonnement de flux rss

https://sites.ac-nancy-metz.fr/lyc-la-communication/cdi/

Autre exemple avec flux Instagram https://sites.ac-nancy-metz.fr/lyc-la-communication/galerie-virtuelle-des-realisations-deleves-de-seconde-premiere-et-terminale-specialite-et-option-arts-plastiques/

La fonction "embed" et "iframe"Les Boutons "partager"

Code d'intégration d'une vidéo de Youtube :<iframe width="560" height="315" src="https://www.youtube.com/embed/MWNATLgDwSM?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

?rel=0 morceau de code à ajouter pour désactiver la pub

Exemple d'iframehttps://developer.mozilla.org/fr/docs/Web/HTML/Element/iframeExemple dans un netboard :

https://cbourdenet.netboard.me/netboard_carnet/?link=LNvMfnlt-uIGLwIuu-zkAX04au#

De l'interdiction d'inclure des pages internet dans d'autres... aux codes fournis pour le faire !

Mise en pratique (site test sous WIX) :https://artsplastiquescbv.wixsite.com/btscomAccès en mode édition :

https://www.wix.com/website/builder