background preloader

The HTML5 Media Framework

The HTML5 Media Framework

http://popcornjs.org/

Related:  WebdocumentaireWebdoc/Video/html5 (video et code)code

Créez un Webdocumentaire enrichi et interactif gratuitement html5 Terminer les diaporamas, créez un Webdocumentaire enrichi et interactif gratuitement html5. Prise en main, installation et création d'un projet deux heures avec le tutoriel ci-dessous. Le principe : 1- Titre du webdocumentaire enrichi 2- Titre séquence 3- Extras avec plusieurs options (infos, crédits…) 4- Vidéos, images, sons… 5- Compléments avec plusieurs options 6- Notes de marges avec plusieurs options 7- Miniatures de la partie 4 avec plusieurs options 8- Timeline avec durée, sommaire, bouton arrêt/marche et d'autres options

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. HTML5… et une surcouche JS Apprendre le code en ligne Cette semaine sortait Dash, un site pour apprendre le HTML en ligne. L'occasion pour moi de vous décomplexer par rapport à ce langage Ô combien utile de nos jours et Ô combien accessible au plus grand nombre. Si vous êtes nés avant les années 80 et que vous avez étudié en France, je peux dire, sans trop me tromper, que vous avez certainement eu un rendez-vous manqué avec les langages informatiques. C, Pascal, Fortran, COBOL, autant de langages de programmation que l’école française a voulu nous enseigner au lieu du langage de marquage qu'est le HTML.

Réaliser des graphiques avec JavaScript, 12 outils Le besoin de créer des interfaces métier interactives et "illustrées" via les applications web revient de plus en plus souvent. Bien nous en fasse à nous développeurs web où, enfin, nos pairs de l'applicatif lourd sont contraints de ne plus nous prendre pour des rigolos (yeah fuck). Mais après tout, une appli de gestion sans un histogramme, un camembert ou encore des courbes, c'est pas vraiment une appli cool pour nos "managers" Je vous propose donc de faire un tour rapide de ce qui existe pour générer des graphiques avec JavaScript. N'hésitez surtout pas à partager à propos de ce que vous connaissez/utilisez, comme d'hab. Raphaël Les URLs sont pour les Humains, Pas pour les Ordinateurs Nous sommes tous familiers avec les URLs : la chaîne identifiant uniquement le document demandé. Néanmoins, nous n’avons toujours pas imaginé qu’elles sont plus que cela : Les URLs font face à l’utilisateur et devraient être considérées comme des éléments importants de l’interface-utilisateur. Elles devraient être propres, compréhensibles, sémantiques, hiérarchiques et pas trop longues. Si l’URL ressemble à une poubelle les gens ne cliqueront pas dessus

Webdocumentaire, jouer au petit journaliste L’année 2011 a été, une fois de plus, l’occasion de découvrir de nombreux webdocumentaires et certains particulièrement captivants. Les moyens de productions se développant, la production tend à s’homogénéiser vers un même format. Par leur interactivité et leurs contenus, les webdocumentaires apparaissent comme des outils intéressants pour l’éducation aux médias. 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

Ergonomie et référencement : les meilleures pratiques pour 2013 Vous avez été plus de 300 à nous suivre lors de la conférence du salon e-Commerce Paris 2012. C’est avec un grand plaisir que nous vous livrons ici les Best Practices 2013 en matière d’optimisation du référencement et de l’ergonomie. Tout d’abord, un bref rappel des conventions et règles ergonomiques déjà en vigueur… Le fichier htaccess Les fichiers .htaccess sont des fichiers de configuration du serveur Apache, le serveur le plus répandu sur le Web. Ils se présentent sous la forme suivante : un simple fichier nommé .htaccess (pas d’extension, juste le nom « htaccess » avec un point au début pour le cacher sur Linux). Ils ont beaucoup de possibilités qui vous permettront d’améliorer vos sites, que ce soit pour l’ajout de nouvelles fonctionnalités, pour l’expérience utilisateur, le SEO, les performances Web, etc. Ils vous permettront même parfois de simplifier la vie du développeur et de lui faire gagner de la productivité. Autrement dit, tout ce qu’il faut pour « bien faire le web », selon la formule consacrée d’Openweb. Attention, certaines propriétés de ces fichiers peuvent être extrêmement puissantes et, à la moindre erreur de syntaxe, le serveur répondra à toute demande par une erreur 500.

Les attributs async et defer pour <script> Deux attributs HTML permettent de modifier le comportement des balises <script> et plus particulièrement pour le chargement des ressources JavaScript : async : charger/exécuter les scripts de façon asynchrone. defer : différer l'exécution à la fin du chargement du document. STAINSBEAUPAYS, le webdoc Par Simon Bouisson et Elliot Lepers C’est la rencontre interactive entre deux réalisateurs parisiens touche-à-tout et une vingtaine d’ados de 14 ans en classe de 3ème à Stains dans le 93. Ensemble, pendant un an, ils ont écrit, et réalisé un webdoc qui raconte cette banlieue et sa jeunesse. L’objet regroupe les douze films courts de la classe, entrecoupés de portraits de leurs auteurs. Stains vu par les stanois, Stains vu par les parisiens, Paris vu par Stains… Les regards se croisent, se répondent et se complètent. Le projet, présenté comme “infini”, n’a ni début ni fin.

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+) #LeWeb : 11 opportunités et 14 conseils prodigués par Google pour tirer profit de Google+ Bonjour à toutes et à tous. Comme je vous le précisais il y a quelques jours, l’un des évènements qui m’intéressaient le plus lors de cette seconde journée de #LeWeb était un workshop animé par Kate Alessi, « Head of Social, Strategy & Solutions » chez Google pour la région SEEMEA (Sud et Est de l’Europe, Moyen Orient et Afrique), sur la thématique « Build your brand with Google+ ». L’atelier a été à la hauteur de mes espérances car « à jour », la présentation des bonnes pratiques étant celle du Q4 2013.

Jeux de caractères et interclassements de connexion Considérez le problème suivant : vous avez une colonne dont les données sont stockées en UTF-8, et votre client (par exemple, un script PHP) utilise ISO-8859-1. Comment manipuler les données de la colonne ? Il faudrait d'abord convertir les données envoyées en UTF-8, puis les données reçues en ISO-8858-1...

Related:  WebdocumentairewebVideo editing/makingHTML5FuzzieHTML5 + WebGLHTML5 Part 1storytelling