Vendredi c’est Graphism ! | Geoffrey Dorne
►http://owni.fr/2012/07/06/vendredi-cest-graphism-sncf-wtf
Cette semaine : musique et robots, interface numérique géologique, #datavisualisation et html5, une once de dessin à la main avec Google, des petits oiseaux en tissu et un WTF spécialement dédicacé à la SNCF. C’est vendredi et c’est graphism’. Amen.
#Chronique #Cultures_numériques #Graphisme #Art #création #design #dorne #geoffrey #graphisme #HTML5 #peluche #sncf #vendredi-graphisme #visualisation
Using full-screen mode - MDN
►https://developer.mozilla.org/en/DOM/Using_full-screen_mode
The full-screen API provides an easy way for web content to be presented using the user’s entire screen. This article provides information about using this API.
How to Use the HTML5 Full-Screen API - SitePoint
►http://www.sitepoint.com/html5-full-screen-api/#fbid=dSh7Oq6ngAf
“For some bizarre reason, you must repeat the styles in their own blocks or they won’t be applied”
Attention à bien déclarer les pseudos styles :full-screen sur des lignes séparées si on utilise les préfixes proprios.
#html5 #fullscreen #css
Avec mon copain de Mosquito, on a fait un chouette mini-site événementiel pour la nouvelle expo du MacVal, Situations :
►http://www.macval.fr/situations
D’habitude, les mini-sites événementiels, j’y touche pas trop, parce que c’est en Flash et que Flash, j’y touche pas trop. Sauf que là, c’est pas du tout du Flash, c’est du HTML de chez HTML.
Et c’est évidemment du pur #SPIP, en #HTML5, avec une animation en jQuery, des #transitions_CSS, de l’interactivité (tu peux participer, si t’es du genre ’tistique).
Petite attention rigolote : c’est entièrement Ajax, mais chaque rubrique et chaque article existent réellement et sont indexés dans Gougoule, sur la base d’un seul squelette et ses includes (les mêmes utilisés en Ajax).
@arno : Ça a l’air drôlement bien, et cela m’a permis de retomber là dessus avec émotion (c’est que Chris Burden and Co c’est un peu toute ma formation)
►http://www.youtube.com/embed/3Tz-K4EC8hw
Il fonctionne très bien ce site, vraiment très bien. Et de se dire que c’est tout fait en SPIP, là c’est carrément la classe
je suis allée voir l’expo qui m’a beaucoup plu, et le site est chouette et beau, pour une fois pas un copié-collé de l’expo qui y est liée. merci !
On vient de livrer le nouveau site de l’Orchestre symphonique de Bretagne :
►http://o-s-b.fr
J’ai fait ça avec mon copain de Mosquito. Côté technique : c’est (évidemment) du #SPIP, c’est mon premier site en tout en #HTML5, vidéos et audio gérés directement en balises HTML5, avec Flash pour les brouteurs qui ne comprennent pas le HTML5 ou qui n’acceptent pas H264 (ça permet de n’utiliser qu’un seul fichier, sachant que c’est le même fichier qui est lu par Flash en roue de secours), #webfonts super-typées, animations uniquement en transitions CSS.
En plus, je trouve le graphisme de Mosquito particulièrement réussi.
Très chouette en effet, mais le rendu des fontes est pas au top : un peu d’antialiasing ferait du bien.
Edit : tiens ça le fait pas sur IE. C’est peut-être mon firefox qui est pas à jour.
@lou tu as un Firefox sous Windows, non ? donc je te confirme que c’est assez fréquent (je le soupçonne d’avoir son moteur de rendu qui cause mal avec le Cleartype de Windows). Aucun souci avec Firefox sous Ubuntu.
J’ai modifié mon code d’appel des Webfonts pour corriger le problème de Firefox. Pffff, et tout ça est documenté par les corbeaux…
Du coup, j’ai modifié mon histoire de catastrophe industrielle (là où-c’-que j’explique comment je retraite les webfonts) :
►http://seenthis.net/messages/44936
Et Dieu créa le #HTML5… pour jouer | Adrien Carpentier
►http://owni.fr/2012/05/29/html5-html-jeux-video
HTML5, WebSocket et WebGL : ces termes cryptiques annoncent peut-être l’avenir du jeu vidéo, et, au-delà, des nouvelles formes de narration propres aux mondes numériques. Ces technologies-là, qui permettent de jouer directement dans son navigateur #Internet, préparent une petite révolution.
#Cultures_numériques #Reportage #jeux_vidéo #browserquest #HTML #jeux-vidéo #mozilla #navigateurs #websocket
Encore un bon article, d’un gourou connu, sur le débat « Apps vs. Navigateur » avec de bons arguments techniques pour les deux choix.
►http://www.tbray.org/ongoing/When/201x/2012/05/02/Web-Futurez
#html5 #html5_apps #mobile #webdev
Slideshows with Swipe...
►http://digitalpublishing.tumblr.com/post/11776138737/slideshows-with-swipe-creating-image-slideshows
Creating Image Slideshows like in the iPhone image gallery, that is to say by swiping instead of fading, is a much requested feature for the Adobe Digital Publishing Suite. Currently, slideshows only support fading images to each other.
You can build these swiping galleries for publications with Adobe DPS but you need to build them in HTML. I found a great javascript tool handling the swiping and displaying and is easy to use (and even has a ton of other features I am not using here).
#iPad #tablettes #html5 #JavaScript #css3
FileSystemDB
►https://developer.mozilla.org/fr/demos/detail/filesystemdb
This is a WIP implementation of the FileSystemAPI (and FileWriter API) using IndexedDB.
In the code there are a few tests and a demo written by a Google developer to showcase the FileSystemAPI.
The demo is a terminal emulator with UNIX commands (cd, mkdir, rm, etc.). To add files, you can drag and drop them from the desktop.
#html5 #interfaces #web #unix
Treesaver: HTML5, JavaScript library for creating magazine style layouts for iPad and web
►http://thechangelog.com/post/3156706920/treesaver-javascript-library-for-creating-column-and-pag
Treesaver from Filipe Fortes is a new JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. Weighing in at just 25KB, Treesaver’s feature set is impressive providing support for grid and column layouts, custom UI’s, repeating content, cover pages, figures and illustrations, and analytics.
En train de basculer toutes les vidéos de Flip-Zone en H264, histoire de passer en #html5_video, avec Flash en roue de secours (et compatibilité iPad, qui représente désormais beaucoup de monde sur ce site). Ça fonctionne bien.
Sauf qu’en fabriquant les fichiers MP4 (.m4v) dans Handbrake, j’ai oublié de cocher « optimisé pour le Web ». Résultat, après 2 heures de compression, j’ai mis 5 heures à réuploader des fichiers vidéo qui ont, tous, les headers à la fin du fichier. Ça fait tousser Varnish (tiens donc ?) et, même en attaquant Apache directement, les vidéos ne se déclenchent qu’une fois l’intégralité du fichier chargé (genre 200Mo).
Histoire de pas tout retélécharger/recompresser (et dégrader la qualité une fois de plus), j’ai utilisé ce petit script directement sur le serveur. Ça se contente (ultra-rapide !) de déplacer le header du fichier vidéo en début de fichier. Et là, cool ma poule, ça roule.
danielgtaylor/qtfaststart · GitHub
►https://github.com/danielgtaylor/qtfaststart
Quicktime/MP4 Fast Start
Enable streaming and pseudo-streaming of Quicktime and MP4 files by moving metadata and offset information to the front of the file.
This program is based on qt-faststart.c from the ffmpeg project, which is released into the public domain, as well as ISO 14496-12:2005 (the official spec for MP4), which can be obtained from the ISO or found online.
The goals of this project are to run anywhere without compilation (in particular, many Windows and Mac OS X users have trouble getting qt-faststart.c compiled), to run about as fast as the C version, to be more user friendly, and to use less actual lines of code doing so.
Simple Cross-Browser HTML5 video with a single H.264 file and fallback options | John Dyer’s Code
►http://johndyer.name/simple-cross-browser-html5-video-with-a-single-h-264-file-and-fallback-op
The code is fairly simple. It just checks if the browser understands the <video> tag by checking for the “canPlayType” function, then it uses canPlayType to determine if the browser can play an H.264/MP4. If not, it inserts Flash as a fallback.
Vendredi c’est Graphism | Geoffrey Dorne
►http://owni.fr/2012/03/30/vendredi-cest-graphism-html5-jeu
Selon des documents exclusifs obtenus par OWNI, et comme OWNI l’avait révélé il y a deux ans, c’est confirmé : aujourd’hui c’est vendredi. Et « Vendredi c’est graphism ». Rendez-vous des graphistes et des créateurs de beaux pixels, organisé depuis sa cuisine par un garçon qui sait rendre la toile plus belle, Geoffrey Dorne (même s’il joue encore à #Batman malgré son état post-pubère).
#Chronique #Cultures_numériques #Graphisme #affiche #design #geoffrey_dorne #graphisme #HTML5 #jeu #piano #typographie #vendredi-graphisme
Picturefill pour des img responsive
►http://scottjehl.com/picturefill
<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<!— smallest size first - no @media qualifier —>
<source src='https://seenthis.net/img_m.jpg'>
<!— medium size - send to viewport widths 400px wide and up —>
<source src='https://seenthis.net/img.jpg' media="(min-width: 400px)">
<!— large size - send to viewport widths 800px wide and up —>
<source src='https://seenthis.net/img_z.jpg' media="(min-width: 800px)">
<!— extra large size - send to viewport widths 1000px wide and up —>
<source src='https://seenthis.net/img_b.jpg' media="(min-width: 1000px)">
<!— extra large size - send to viewport widths 1300px wide and up —>
<source src='https://seenthis.net/img_o.jpg' media="(min-width: 1200px)">
<!— Fallback content for non-JS or non-media-query-supporting browsers. Same img src as the initial, unqualified source element. —>
<noscript><img src='https://seenthis.net/img_m.jpg' alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
</picture>
#web #responsive #javascript #polyfill #html5
reveal.js
►http://lab.hakim.se/reveal-js
A CSS 3D slideshow
reveal.js is an easy to use, HTML based, #presentation tool.
#html5 whoau
Mes commentaires sur reveal.js : ►http://www.bortzmeyer.org/reveal-js.html
<html5> par l’exemple - Le site de démo des balises HTML5 et de test du support des navigateurs.
►http://html5demo.braincracking.org
#html5 #support #navigateur
►https://gist.github.com/350433
Un autre exemple de librairie émulant #web_storage (localStorage et sessionStorage) si le navigateur n’en est pas pourvu.
Utilise aussi le window.name pour émuler le sessionStorage (limite à 2Mb de données, apparemment).
Voir aussi : ►https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills pour d’autres librairies sur le même sujet (from @nhoizey)
►http://code.google.com/p/sessionstorage
Librairie qui propose un support de de l’API « webstorage » de html5
Ne gère que le sessionStorage, et utilise un hack un peu « funky » comme fallback (utiliser la propriété window.name comme espace de stockage local).
A Web Storage is HTML5 response to cookies limits. While the world is moving forward improving users experience and web potentiality via constantly updated browsers like Chrome, Firefox, or Safari, some Jurassic user or company could be still stuck at the origins with obsolete, deprecated, slow, and loads of bugs, browsers. The aim of this project is to bring at least one of the Web Storage in latter typology of user, or company, in a way that should simply work with a focused eye about security.
How Does This Implementation Work
Nowadays, there is not such thing: every browser, and this is the reason I put quotes in this page title. On the other hands, there are different “de facto standards”, like innerHTML and others. One of these de-facto standards is the behavior of the window name property, something I’ve played with since ages, but never before that concretely useful! window.name is an always present string, usually completely ignored by 99% of developers, but with below features:
as a string, it has no official length limit, except our RAM one. It could contain different megabytes of data without affecting performances
it persists in the same tab, being the origin of the context, and in every page surfed inside the tab, so it could be extremely unsafe to trust it for important data
it is automatically cleaned as soon as we close the tab or the browser, so used RAM will be automatically cleaned and without scripting effort
Thanks to these features, I have been able to think about a string protocol able to make window.name a sort of linear storage
Voir aussi : ►https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills pour d’autres librairies sur le même sujet (from @nhoizey)
Cut the Rope | Behind the Scenes
►http://www.cuttherope.ie/dev
#Microsoft se réjouit du support de plus en plus uniforme des #standards dans les navigateurs récents :
We did most of our testing in #IE9 on #Windows_7 and from time to time we would also test on #Firefox, #Chrome, #Safari, and in #IE10 developer preview. In general, all major browsers have a very consistent implementation of the #HTML5 features we used and, in most cases, anything we tested in Internet Explorer 9 “just worked” everywhere else.
The HTML5 test - How well does your browser support HTML5?
►http://html5test.com
The #HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications.
When can I use... Support tables for #HTML5, #CSS3, etc
►http://caniuse.com/#
Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
#html #css #compatibilité
Cross Browser #HTML5 Progress Bars In Depth
►http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth
I used to create progress bars using <div> tags, #CSS and a litle bit of math, but now I like to do it the HTML5 way using the <progress> tag. This article will discuss how this tag is rendered by default in all operating systems and browsers and how to style the progress tag with CSS, even in browsers that don’t officially support the it.