La programmation orientée objet des interfaces et des animations en JavaScript
Déplacez le pointeur de la souris sur la vidéo.
Cliquez dans la vidéo ou appuyez sur la barre d'espace pour en démarrer la lecture. Cliquez ou appuyez sur la barre d'espace pour la mettre en pause, la relancer.
Utilisez les flèches droite et gauche pour avancer ou reculer d'une seconde, appuyez en même temps sur la touche Maj ou la touche Ctrl pour avancer ou reculer de dix secondes ou de cent millisecondes.
Appuyez sur la touche 0 pour revenir au début.
Appuyez sur la touche plus pour accélérer la lecture, sur la touche moins pour la ralentir, sur la touche astérisque pour revenir à la vitesse normale.
NOTE : Ces commandes sont disponibles pour tous les types de clips.
Activez le son.
IMPORTANT : La disposition et le style d'une interface sont à la discrétion du programmeur. Aucun modèle graphique n'est imposé.
Les exemples utilisent les icônes de Font Awesome.
Modifiez la largeur ou la hauteur de la vidéo en pixels.
NOTE : L'éditeur préserve la rapport d'affichage et ajuste automatiquement l'autre dimension.
Inversez l'affichage dans le sens horizontal ou vertical.
Essayez un effet grisé ou un effet sépia.
Floutez l'affichage.
Modifiez le contraste, la luminosité, la saturation, la teinte de la vidéo.
Essayez les boutons Défaire et Refaire.
Rechargez la page. Les modifications sont enregistrées.
Tapez quelques mots, e.g. Paris • London • .
Appuyez sur Entrée pour valider le texte.
NOTE : Le texte est toujours affiché en lettres capitales.
Modifiez la taille de la police.
Cochez la case pour mettre le texte en gras.
Changez la police du texte en entrant le nom d'une police de Google Fonts, e.g. Slackey ou Righteous.
Choisissez la couleur du texte, e.g. #CB6.
Ajustez les dimensions du clip.
Changez la durée en nombre de secondes de l'animation et du délai au démarrage.
Essayez différents effets d'animation, e.g. linear ou ease-in-out.
NOTE : L'animation s'exécute deux fois en alternant le sens de rotation.
La durée totale du clip est égale à 2 fois la durée de l'animation + le délai au démarrage.
Cliquez sur l'emblème pour démarrer l'animation. Cliquez de nouveau pour la mettre en pause, la relancer.
RAPPEL : Les commandes au clavier sont effectives pour tous les types de clips.
Déplacez le pointeur de la souris sur l'emblème.
Appuyez sur la touche plus pour accélérer l'animation, sur la touche moins pour la ralentir, sur la touche astérisque pour revenir à la vitesse normale.
Cliquez dans l'image pour démarrer l'animation. Cliquez de nouveau pour l'arrêter.
Placez le pointeur de la souris sur l'image et appuyez sur la barre d'espace.
Glissez le clip dans la <div> qui le contient avec la souris ou avec un doigt sur un écran tactile.
Déplacez le clip près du bord droit de la <div>. Essayez de la redimensionner.
Appuyez sur le bouton de lecture pour démarrer la lecture de l'audio.
Appuyez sur le bouton pause pour la mettre en pause.
Activez ou désactivez la lecture en boucle.
Le lecteur passe automatiquement à la piste suivante si la lecture en boucle est désactivée.
Cliquez sur le nom d'une piste pour la charger dans le lecteur.
Un lecteur audio peut aussi charger un fichier audio à partir du disque local, enregistrer une audio avec un microphone, envoyer un fichier audio chargé localement ou enregistré à un serveur, détruire un fichier audio sur un serveur.
Toutes les fonctionnalités sont optionnelles.
Cliquez dans l'image.
Sélectionnez un fichier JPG, PNG, GIF ou SVG.
NOTE : La taille maximum du fichier est configurée à 1 Mo et la largeur maximum de l'affichage à 320 px.
Replacez la souris sur l'image pour afficher ses dimensions.
Ouvrez un dossier contenant des images avec l'explorateur de votre système de fichiers. Faites glisser et déposer un fichier JPG, PNG, GIF ou SVG sur l'image.
Éditez la largeur ou la hauteur de l'image. L'autre valeur est automatiquement calculée afin de préserver le rapport d'aspect de l'image.
Essayez d'enregistrer sur votre disque et de charger le logo de Chrome, de Firefox ou le sigle en SVG. NOTE : Un SVG n'a pas de taille maximum et ses dimensions dépendent de la largeur maximum de l'affichage (320 px).
Changez le titre du graphique à Plotly & Objective.js.
Cochez l'option pour afficher la légende du graphique.
Utilisez le sélecteur pour éditer les données et la couleur d'une série de barres.
Appuyez sur les flèches pour déplacer la série de barres sélectionnée vers la gauche ou vers la droite.
Cliquez sur le bouton de remise à zéro pour réinitialiser le graphique.
Rechargez la page. Les modifications sont enregistrées.
Étudiez l'organisation du code d'un éditeur qui coordonne les échanges entre un modèle de données, des inspecteurs qui éditent les valeurs du modèle, une vue qui affiche en temps réel l'état du modèle et un délégué en charge de l'enregistrement automatique des données du modèle.
Construisez un éditeur qui permet à l'utilisateur de charger ou de glisser et déposer une image à partir du disque local, d'en définir les dimensions et de télécharger l'image et ses dimensions sur un serveur distant.
Éditez les données et les paramètres de configuration d'un graphique linéaire et d'un graphique à barres réalisés avec la librairie fournie par Plotly et voyez le résultat.
Construisez des applications interactives sophistiquées.
Fiez-vous à une architecture MVC simple et solide.
Travaillez avec vos outils de développement habituels.
