Skip to content

Autres technologies

Jump to bottom Edit New page
Matthieu PERREIRA DA SILVA edited this page Dec 17, 2019 · 3 revisions

HTTP

[Obligatoire]

LE protocole utilisé pour échanger des données entre serveur web et navigateur. Il faut savoir comment il marche pour pouvoir faire communiquer client et serveur.

Documentation à consulter:

AJAX

[Facultatif mais recommandé]

AJAX n'est pas une technologie à part entière, mais 'juste' une façon d'échanger des données de manière asynchrone entre un client (navigateur) et un serveur afin de mettre à jour une page web sans la recharger entièrement. Pour comprendre AJAX, on a besoin de comprendre : Javascript, le protocole HTTP, le format XML (ou JSON).

Documentation à consulter:

REST

[Facultatif]

REST n'est pas un protocole mais une convention pour accéder aux ressources que propose un service web. On utilise le protocole HTTP et un format de sérialisation de données (XML, JSON, etc.) pour communiquer de manière simple avec le serveur afin d'accéder à des données, les mettre à jour, en ajouter, etc. L'accès à ces ressources s'effectue de manière Stateless (le S de REST), c'est à dire que chaque requête effectué par un client est indépendantes (pas de notion de session). Si vous accédez à des données temps réel disponibles via un service web (ex: places de parking disponibles à Nantes) il se peut que vous ayez à interroger un serveur via une API REST.

Documentation à consulter:

  • La page Wikipédia de REST.
  • Une explication de ce qu'est REST.
  • Votre cours de 3ème année...

Formats de données (JSON, XML, CSV, etc.)

Généralement votre serveur va devoir envoyer des données au navigateur par le biais d'un format de sérialisation de données. Ces données peuvent provenir d'une base de données hébergée par le serveur ou d'un fichier stocké dans son arborescence. Dans tous les cas il va falloir que votre code javascript coté client puisse transformer ces données en objets javacript qu'il saura manipuler. Ce 'décodage' des données est plus ou moins direct, en fonction du format initiale renvoyé par le serveur:

  • Les données JSON sont nativement supportés par les navigateurs récents via la commande JSON.parse()
  • Les données XML peuvent être manipulés simplement avec les opérateurs classique que propose JQuery ou D3js pour le HTML
  • Il faudra passer par une libraire spécialisée pour le décodage du format CSV
  • Il faudra passer par une libraire spécialisée pour le décodage du format XLS
  • Il faudra passer par une libraire spécialisée pour le décodage du format XLSX

Quelques éléments de sécurité

[A consulter !]

Ça n'est pas le souci principal dans le cadre de ces projets Hyblab, mais attention tout de même, en particulier si vous proposez des services coté serveur.

Documentation à consulter:

Intégration de votre page sur le site du média

[Important...]

Pour des raisons techniques (tous les médias ne peuvent pas héberger du code nodejs coté serveur), vos application web seront hébergées sur les serveurs de Ouest Médialab. Les médias devront intégrer vos applications via l'utilisation une iFrame. Le problème, c'est que la page hébergée par le média n'aura pas connaissance de la taille de votre application web (qui sera affiché dans l'iFrame). Pour vous compliquer la tâche, il n'est pas directement possible (pour des raisons de sécurité) de récupérer la taille du contenu d'une iFrame à partir de la page qui la contient (si les deux contenus ne sont pas hébergés sous le même nom de domaine).

Il y a plusieurs solutions à ce petit problème:

  • N'afficher QUE votre contenu sur la page du média dédiée à votre projet. C'est le plus simple et le plus efficace. On conseil donc à votre porteur de projet d'intégrer un lien vers votre contenu sur le serveur du Hyblab.
  • Plutot que d'utiliser une simple iFrame, intégrer votre application web dans une 'box', par exemple lightcase ou venobox (plugin jQuery).
  • Utiliser des libraire tierces telles que responsiveiframe, iframe-resizer ou Pym.js. Cela nécessitera un peu de javascript du coté de votre application web et de la page du média qui l'héberge.
  • Récupérer le code html de votre application web via une requète AJAX et l'injecter dans le site du média (peut poser quelques souci... à tester)

A vous de voir ce qui est le plus adapté à votre page et votre média (qui est plus ou moins libre sur ses possibilités d’intégration). Une démo de certaines de ces solutions est présente sur le dépot GitHub. Vous pouvez tester ces solutions ici.

Trucs à la mode

Les designer vont vous parler de site one page ou parallax. Restez stoïques et hochez la tête. Puis faites une requête google ou consultez ce wiki, la solution n'est pas loin...

One page et parallax

Le principe est d'avoir tout sur une seule page. On scroll alors pour passer d'une section de la page à une autre. Le scroll peut être normal ou parallaxe (il y a plusieurs plans dans la page, qui défilent à des vitesses différentes). Une explication du concept de single page application est consultable ici.

Quelques exemples de librairie utiles pour ce genre de site:

Animations CSS

On risque de vous demander de faire voler des élements, exploser des images, etc. Divers librairies peuvent vous aider !

Attention de bien vérifier que ces scripts se comportent bien sur mobile !

Site web responsive ou adaptive

Un site web responsive est un site dont le design s'adapte à la taille du périphérique sur lequel il est affiché. Vous trouverez plus d'explications ici. On a déjà cité Bootstrap comme une libraire capable de simplifier le développement de site web adaptatif, mais il existe bien sûr d'autres solutions comme Adapt.js (très léger), Responsive, Foundation ou Restive.js.

Pour certains projets il est possible que l'on vous demande de créer un site "mobile first". Il s'agit d'un site responsive, qui est pensé avant tout pour la navigation mobile (mais qui fonctionne aussi sur de plus grand écrans, en adaptant seulement le design mobile d'origine).

Dans tous les cas, un moyen simple de créer un site web responsive 'a minima' est de n'utiliser que des unités relative a la taille du viewport pour tous vos éléments graphiques (vw et vh).

Intégration de vidéos et de son

Si vous souhaitez intégrer des vidéos dans votre site, le plus évident est bien sûr d'intégrer une video Youtube ou autre plateforme d'hébergement de vidéos. C'est d'autant plus nécessaire que l'hébergement github limite la taille des fichiers à 100Mo (sauf utilisation d'un outil particulier pour les gros fichiers). Mais vous pouvez également utiliser d'autres librairies telles que Video.js.

Pensez également à la taille des données à télécharger. De trop long temps de chargement sont mauvais poru l'expérience utilisateur. En particulier, si votre vidéo est un motion design, alors envisagez de la convertir en SVG animé ou d'utiliser Lottie et BodyMovin (cf. Animations After Effects

Il est également possible de faire interagir votre site web avec le déroulement d'une vidéo ou une bande sonore. Par exemple déclencher des animations ou modifier le contenu d'une page web en fonction du temps. Popcorn.js vous permet de faire ceci.

Add a custom footer
Clone this wiki locally