The future of layout with CSS: Grid Layouts. In this article we'll take a look at the wonderful world of the CSS Grid Layout, a relatively new W3C specification that has partially started to see the day in some browsers.
But before we dive into what this new CSS technique is all about and how to use it, let's quickly review grid theory. My really short introduction to grid theory I am not a designer nor did I know much about grid theory before stumbling upon the CSS Grid Layout specification, so don't take my word for it and go look it up yourself, but if you don't care to, here's my pitch about it: In essence, a grid is a set of invisible vertical and horizontal lines that the various design and content pieces of a web page, magazine or newspaper are positioned on.The goal of a grid is to serve as a base for placing the various pieces of content and to make sure these pieces are aligned and spaced out evenly.A grid, even if not visible, provides the viewer with a way to navigate content visually.
So what has CSS got to do with it? Mobile ou tablette en Javascript ? - BeHuman. Le webdocumentaire, entre approximation et expérimentation / E-dossier : Le documentaire, un genre multiforme. Bruno Masi est auteur et journaliste, responsable des filières Journalisme, Jeux vidéo et Transmédia à Ina Expert .
En 2011, il coréalise le documentaire transmédia La Zone, Retour à Tchernobyl (composé d’un webdocumentaire diffusé sur lemonde.fr, d’une installation à la Gaîté Lyrique et d’un livre aux éditions Naïve) qui remporte le prix RFI-France 24 du meilleur webdocumentaire et le prix de l’œuvre interactive au Festival du Nouveau Cinéma à Montréal la même année. Il est l’auteur de l’expérience web « 14, dernières nouvelles » qui sera lancée par Arte en janvier 2014 et de la web-série « ANNA », une fiction écrite pour France Télévisions et Radio Canada et produite par Agat Films & Cie / Ex Nihilo et KNGFU qui devrait voir le jour début 2015. Le webdocumentaire, un certain avenir du documentaire ? Webdoc versus documentaire, une question de regard En 1973, le réalisateur français Jean-Daniel Pollet part pour Spinalonga. . « L’Ordre », de Jean-Daniel Pollet, 1974©Jean-Daniel Pollet. [PUBLICATION] « Le webdoc existe-t-il ? » – en vente ! Le Blog documentaire sort de vos écrans… pour atterrir dans vos mains !
![[PUBLICATION] « Le webdoc existe-t-il ? » – en vente !](http://cdn.pearltrees.com/s/pic/th/publication-documentaire-98576346)
Première publication sur le papier, après plus de trois ans d’entretiens et d’analyses livrés ici – et de longs mois de gestation. Une somme de plus de 600 pages, comme un état des lieux des forces et faiblesses du « webdocumentaire » aujourd’hui. Overview · lmccart/p5.js Wiki. p5.js is a JavaScript library that starts with the original goal of Processing—to make coding accessible for artists, designers, educators, and beginners—and reinterprets this for today's web.
Beyond the canvas · lmccart/p5.js Wiki. As you have seen, createCanvas creates an HTML5 Canvas, a special element you can draw graphics into.
Reference. p5.js. L’audio / vidéo en HTML5. Utiliser de l’audio ou de la vidéo n’est plus aujourd’hui l’apanage d’une animation Flash.
Depuis HTML5 de nouvelles balises prévues à cet effet sont apparues, et les navigateurs peuvent lire de tels flux en mode natif. Nous allons donc au cours de cet article effleurer quelques unes de ces nouvelles possibilités. Avant toute chose quelle est donc la couverture ? À la différence des autres balises apparues avec HTLM5, il ne suffit pas d’ajouter la librairie de Rémy Sharp, html5shiv, pour que le navigateur puisse prendre en compte les deux balises <video> ou <audio>.
Certes, il prendra en compte les deux éléments en tant qu’élément de structure, mais le navigateur ne se dotera certainement pas des pouvoirs d’un lecteur de média, et donc les flux ne se liront pas. Les balises et attributs à disposition Comme vu précédemment, il faut user conjointement de multiples balises <source> qui pointent chacune vers un format de lecture lié aux diverses navigateurs ;
Comment créer un lecteur audio HTML5. Ce tutoriel va démontrer comment s'interfacer avec un lecteur audio HTML5.
On connait tous le lecteur mais je veux aller complètement ailleurs ici. Évidemment, tous les fureteurs ne rendent pas le même résultat visuellement et vous ne voulez pas briser votre design. Donc, je vais démontrer comment créer votre propre lecteur en HTML/CSS en utilisant l'API Javascript de la balise audio en HTML5. La balise audio dans IE9, Chrome, FireFox et Safari. L'audio et la vidéo. Créer un plugin Popcorn.js. Popcorn est une librairie javascript créée par la team Mozilla qui enrichit les contenus vidéos.
La balise vidéo des spécifications html est très pratique mais il manque certaines foncitonnalitées, c’est pourquoi popcorn nous offre la possibilité d’avoir des média vidéo plus interactifs pour le web. Introduction a la librairie La documentation de popcorn est très bien faite et très simple d’utilisation, c’est pourquoi je vous propose aujourd’hui non pas de voir comment l’utiliser mais plutôt de créer votre propre plugin. Il existe déjà de nombreux plugins pour cette librairie pour interagir avec facebook, twitter, google map ou encore pour ajouter du contenu additionnel a des instants T etc … la listes des plugins officiels est disponible ici.
Mise en place du projet. HowTo : organiser un Learning Lab Popcorn.js « Sur la route de la Geek. Ceci est une traduction d'un article de Michelle Thorne, qui travaille chez Mozilla.
Ce genre d'événement d'enseignement aurait une belle place dans le Mozilla Space dont je parlais plus tôt, d'où la traduction. Learning Lab Popcorn Un labo d'enseignement Popcorn (ou Learning Lab Popcorn) est un événement permettant aux développeurs et aux réalisateurs de films de se familiariser avec la technologie Popcorn.js, une bibliothèque HTML5 Javascript qui permet d'intégrer les technologies du Web dans la production de médias. Les participants peuvent créer de nouvelles extensions, bidouiller des modèles et coder des démonstrations qui mélangent des informations à des vidéos, en utilisant des outils ouverts et un design collaboratif. Popcorn.js Documentation.
Popcorn.js is a JavaScript library that allows video, audio and other media to control and be controlled by arbitrary elements of a webpage.
Combining open source web technologies, authors can let their media be the “conductor” of interactive and immersive experiences. While no prior HTML or JavaScript experience and knowledge is necessary — it is helpful and will make the process of creating your first Popcorn experience easier. To get started, you’ll first include the Popcorn.js script in a basic HTML file — you may use just the core or the fully loaded Popcorn.js (includes modules, effects, plugins, players, parsers, etc).
HTML Videos. How To: Create a Playlist for HTML5 Audio. Update: New article! What’s New in Tumult Hype 2.5. Logiciels pour créer un webdoc. Timesheets.js. The goal of this project is to rely on declarative W3C standards (namely, SMIL Timing and SMIL Timesheets) to synchronize HTML content. These demos rely purely on our Timesheet Scheduler: 100% declarative and standard-based, no specific JavaScript code is used. Adobe ActionScript 3.0 * Contrôle de la lecture de la vidéo.
La classe NetStream comporte quatre méthodes principales pour contrôler la lecture vidéo : Remarque : il n'existe pas de méthode stop(). Pour arrêter la lecture de la vidéo, il est nécessaire de la mettre en pause et de retourner au début du flux vidéo. Remarque : la méthode play() ne reprend pas la lecture, elle est destinée au chargement de fichiers vidéo.
HTML5 Professor - FullScreen API. Dans ce court tutoriel, je vais vous présenter une des toutes dernières fonctionnalités de l'HTML 5 : le mode fullscreen (plein écran). Celle-ci peut s'utiliser dans de nombreux cas, comme par exemple pour visionner une vidéo ou des diapos, mais on peux aussi passer n'importe quel élément de la page en plein écran (une iframe, une div, une image, etc...). Les navigateurs compatibles : comme d'habitude Firefox (9+) et Google Chrome (15+) Synchroniser du contenu et une vidéo avec : Hype 2.5, Popcorn.js et Nivo Lightbox. Capturing Audio & Video in HTML5. Introduction. HTML5 – ce qu’il faut savoir sur la balise VIDEO - Stanislas Quastana's blog on TechNet. HTML5, aujourd’hui tout le monde en parle et si on se concentre sur la partie langage de balise (c’est à dire à dire tout sauf CSS3, SVG, WebGL, WebSocket…), certaines nouveautés ont le vent en poupe, notamment la balise vidéo et la balise audio.
Quand on parle de son / musique joués dans un navigateur Web, on se rappelle tout d’abord les formats ou lecteurs d’un passé pas si éloigné (Quicktime, Real Player, voire Windows Media). Html5 : intégrer une vidéo compatible avec tous les navigateurs. La version 5 du langage html a apporté le support natif de la vidéo, qui n’était auparavant possible qu’à travers un plugin (le plus répandu étant Adobe Flash). Ce billet propose une méthode pour intégrer une vidéo dans une page Web, qui puisse être affichée par le plus grand nombre de navigateurs possible. Html5, balise <video> et codecs Le langage html, mis au point au début des années 1990 par Tim Berners-Lee, est un langage structuré par des balises.
Une balise peut indiquer par exemple si une partie du texte est un lien vers une autre page Web (lien hypertexte), un titre, un paragraphe, un tableau, etc. Au départ ce langage était essentiellement concentré sur le texte, puis est apparue la possibilité d’intégrer des images fixes. Le html5 a apporté, entre autres, le support natif de la vidéo. HTML5 – ce qu’il faut savoir sur la balise VIDEO - Stanislas Quastana's blog on TechNet. The HTML5 Media Framework. Introduction to HTML5 video. Player Audio JQuery, HTML5 et CSS3 avec Playlist. Voici un player audio que je vous propose en téléchargement et qui vous permettra de faire découvrir aux visiteurs de votre site une sélection de vos morceaux préférés. Celui-ci intègre toutes les fonctionnalités de controle d'un player classique avec, en plus, la possibilité de switcher d'un morceau à l'autre.
Démonstration Voir la demoTelecharger les fichiers sources Intégrer le player dans votre page. Audio Player, un lecteur audio HTML5 customisé avec jQuery. Audio Player est un plugin jQuery qui permet de personnaliser le lecteur audio généré par la balise HTML5 audio. Ainsi, vous pouvez créer un lecteur totalement custom et cross-browser qui hérite parfaitement des capacités HTML5 natives comme le préchargement du fichier, la lecture automatique ou encore la boucle de lecture.
Utilisation des marqueurs. HTML5 Video. Tag HTML5 - Balise VIDEO. « Partie précédente | Index | Partie suivante » La balise <video> permet de lire des fichiers ou des flux vidéo directement dans la page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause, positionnement dans la vidéo et contrôle du volume. Lorsque le fichier vidéo n'est pas trouvé ou que son format n'est pas supporté, le lecteur n'est pour certains navigateurs pas visible.
La balise <source> permet de définir au sein de l'élément <video> plusieurs ressources alternatives au cas où le navigateur ne supporterai pas le format initialement spécifié dans l'attribut "src" (il faut alors supprimer l'attribut "src" et spécifier les différents fichiers par ordre de priorité dans les balises <source>). Avec la balise video, une API est également disponible et permet de gérer en javascript beaucoup de paramètres pour gérer le flux.
Popcorn Maker. Synchroniser du contenu et une vidéo avec : Hype 2.5, Popcorn.js et Nivo Lightbox. What's New in Tumult Hype 2.5. Vidéo intéractive en HTML5. Cacophony - An interactive video player in HTML5 and Javascript.