Standblog - Mot-clé - webglTristan Nitot sur la technologie, l'Internet et les libertés numériques2024-03-19T18:09:38+01:00Tristan Nitoturn:md5:82ecb6a121c45d09243dc58cde2a1c14DotclearLe Web n'a jamais été aussi excitant !urn:md5:24dc51c810bbab0b09974588da7f78a62010-07-28T17:35:00+02:002010-07-28T16:47:18+02:00TristanStandardscss3firefox4html5mozillastandardssvgwebgl <p>Je viens de bloguer sur la <a href="http://standblog.org/blog/post/2010/07/28/Sortie-de-Firefox-4-Beta-2" hreflang="fr">sortie de Firefox 4 Bêta 2</a>. Plus de rapidité, une meilleure interface, et plein de nouveautés pour les développeurs d'extensions (<a href="https://jetpack.mozillalabs.com/">JetPack</a>) et les développeurs Web.</p>
<p>C'est sur le développement Web que je veux m'attarder dans ce billet.</p>
<p>A mon sens, la combinaison CSS 3, nouvelles APIs (dont WebGL) et HTML 5 est un bond immense en avant pour le Web en tant que plate-forme de développement. J'ai travaillé avec l'excellent <a href="http://www.paulrouget.com/">Paul Rouget</a> pour faire une vidéo de ses démos qui mettent cela en évidence.</p>
<p>Pour ceux qui ont Firefox 4 Beta 2, une machine avec une bonne carte graphique et les drivers "qui vont bien" et ont <a href="http://www.basschouten.com/blog1.php/2010/03/02/presenting-direct2d-hardware-acceleratio">paramétré leur navigateur</a> pour l'accélération matérielle Direct2D, voici 3 démos :</p>
<ol>
<li><a href="http://demos.hacks.mozilla.org/openweb/WARMCSS/">Vidéo, CSS Transitions, @font-face, et filtres SVG</a></li>
<li><a href="http://demos.hacks.mozilla.org/openweb/LONDONPROJECT/">Vidéo, SVG Clip-Path et CSS Transitions</a></li>
<li><a href="http://demos.hacks.mozilla.org/openweb/CSSMAKESUSICK/">WebGL, vidéo, Transforms</a></li>
</ol>
<p><a href="http://www.youtube.com/watch?v=gFmuNApHFec"><img src="http://farm5.static.flickr.com/4103/4837429865_23324930d7.jpg" alt="Tournage de la vidéo avec Paul Rouget" /></a></p>
<p>Pour les autres et ceux qui veulent plus de détails techniques, <a href="http://hacks.mozilla.org/2010/07/firefox4-beta2/" hreflang="en">notre vidéo est sur Hacks.mozilla.org</a>.<sup>[<a href="https://standblog.org/blog/post/2010/07/28/Le-Web-n-a-jamais-ete-aussi-excitant#pnote-4086-1" id="rev-pnote-4086-1">1</a>]</sup></p>
<p>Regardez bien à l'écran : ce que vous voyez est une page Web, développée avec les standards en cours d'élaboration (HTML5, CSS3, SVG, WebGL, nouvelles APIs...). Ce que je trouve fascinant, c'est qu'en combinant ces technologies, on peut faire des choses qu'on croyait encore impossibles il y a peu :</p>
<ul>
<li><strong>vidéo</strong> native avec un codec libre et ouvert (WebM)</li>
<li><strong>fontes</strong> de haute qualité variées (<code> @font-face</code>, <a href="http://fr.wikipedia.org/wiki/WOFF">WOFF</a>)</li>
<li><strong>animations</strong> déclaratives (en CSS3)</li>
<li><strong>filtres et masques SVG</strong>, pour modifier des éléments HTML (ici une vidéo floutée, ou en noir et blanc ou en forme de cercle)</li>
<li><strong>3D</strong> (le coup de la vidéo WebM utilisée comme texture d'un cube en 3D qui tourne dans une page Web, c'est quand même incroyable !).</li>
<li><strong>WebSockets</strong>, pour une communication b-directionnelle persistante entre serveur et navigateur, ici utilisé pour télécommander le changement de page depuis un téléphone Android faisant tourner une pré-Alpha de Firefox mobile.</li>
<li><strong>Drag & drop</strong>, <strong>Indexed DB</strong> et <strong>Local storage</strong>, <strong>File API</strong>, <strong>Geolocation</strong>, <strong>Device Orientation</strong>, et toutes les <a href="https://standblog.org/blog/post/2010/07/28/" hreflang="en">possibilités techniques</a> que j'oublie de lister</li>
</ul>
<p>Bien sûr, le Web ouvert doit toujours faire face à des approches propriétaires comme celle des AppStores monopolistiques ou encore les plug-ins propriétaires. Il doit donc être compétitif. Mais pour cela, il n'a jamais été aussi fort, et c'est ça qui est réjouissant !</p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="https://standblog.org/blog/post/2010/07/28/Le-Web-n-a-jamais-ete-aussi-excitant#rev-pnote-4086-1" id="pnote-4086-1">1</a>] Et pour ceux qui ont un sens de l'humour en béton armé et qui préfèrent le français à l'anglais, une <a href="http://www.dailymotion.com/video/xe6i6f_firefox-4-beta-2-la-demo-a-laquelle_tech" hreflang="fr">version déjantée, ratée, et non-officielle est disponible</a>. Ca n'est pas un hasard si on la appelée "la version à laquelle vous avez échappé"... A vos risques et périls ! <img src="/dotclear2/themes/default/smilies/wink.png" alt=";-)" class="smiley" /></p></div>
En vrac, en direct de Pragueurn:md5:e2ce5f1eab397b80d77d6a4f17cd12252009-10-03T15:55:00+02:002009-10-03T15:55:00+02:00TristanEn vracaviationcarbonechromechromeframeenvironnementfiltragewebgl <p>Je suis à Prague avec 160 Mozilliens majoritairement bénévoles pour 2 jours de travail intensif dans le cadre du <a href="https://wiki.mozilla.org/EU_MozCamp_2009" hreflang="en">MozCamp Europe 2009</a> (avec un peu de temps le soir pour goûter aux bières locales, tout de même ).</p>
<ul>
<li>Ravi de voir la plate-forme Web monter en puissance avec l'arrivée de la 3D (après la vidéo). Un bonne exemple : <a href="http://hacks.mozilla.org/2009/10/webgl-in-the-wild/" hreflang="en">WebGL in the wild</a> ;</li>
<li><a href="http://blog.mozilla.com/security/2009/09/30/a-glimpse-into-the-future-of-browser-security/" hreflang="en">Content Security Policy</a>, ou comment Mozilla travaille à rendre le Web plus sûr...</li>
<li><a href="http://www.mozilla-europe.org/fr/press/2009/09/30/1327-une-semaine-intensive-de-cours-mozilla-a-l-universite-d-evry-paris" hreflang="fr">Une semaine intensive de cours Mozilla à l'Université d'Évry, Paris</a>. C'est en France, et c'est bien !</li>
<li>Finalement, Microsoft <a href="http://www.zdnet.fr/actualites/informatique/0,39040745,39708239,00.htm" hreflang="fr">ne devra pas payer 388M$ d'amende pour violation de brevet logiciel</a> ;</li>
<li><a href="http://blogs.nuxeo.com/ebarroca/2009/09/open-source-vs-proprietary-software-platforms-the-markets-perspective-.html" hreflang="en">Open Source vs. Proprietary Software Platforms: the Market's Perspective</a>, du patron de Nuxeo. IL explique pourquoi les plates-formes Libres et Open Source l'emportent par rapport à leurs concurrents propriétaires. Ca n'est pas tant pour une raison architecturale que parce qu'elles sont plus innovantes, plus économiques et surtout permettent la collaboration entre les acteurs avec un cadre juridique simplifié ;</li>
<li><a href="http://labs.mozilla.com/weave/2009/09/30/weave-0-7-released/" hreflang="en">Sortie de Weave 0.7</a>, le service qui permet de synchroniser plusieurs versions de Firefox, y compris le futur Firefox mobile (nom de code <em>Fennec</em>). Autrement dit, c'est ce qui va permettre d'ouvrir rapidement dans votre mobile un onglet ouvert dans votre Firefox au bureau ou une adresse que vous avez visité récemment sur l'ordinateur de la maison et que vous voulez retrouver ;</li>
<li><a href="http://techtoc.tv/event/300/software-development/floss--l-open-source-et-le-libre/barcampparis17--la--bidouillabilite--selon-tristan-nitot--fondateur-et-president-de-mozilla-europe" hreflang="fr">Interview sur la bidouillabilité</a>, par votre serviteur, dans le cadre de <a href="http://www.barcamp.org/BarCampParis17" hreflang="fr">BarCamp Paris 17</a> ;</li>
<li><a href="http://www.slate.fr/story/10909/chrome-pour-epaves" hreflang="fr">Chrome pour épaves</a> (bon article, à part l'enthousiasme pour Chrome Frame, qui passe à coté de problèmes techniques tels que le manque d'accessibilité numérique etc.) ;</li>
<li>Justement, <a href="http://www.eweek.com/c/a/Application-Development/Why-Google-Chrome-Frame-Makes-Mozilla-Firefox-Folks-Uneasy--448967/" hreflang="en">eWeek publie un bon article expliquant pourquoi Mozilla n'estime pas que Chrome Frame soit une bonne solution</a> à un vrai problème (malgré un titre à deux balles…)</li>
<li><a href="http://www.lemondeinformatique.fr/actualites/lire-firefox-et-chrome-continuent-de-grignoter-internet-explorer-29221.html" hreflang="fr">Firefox et Chrome continuent de grignoter Internet Explorer</a> ;</li>
<li><a href="http://www.numerama.com/magazine/14130-filtrage-de-la-pedophilie-jusqu-a-140-millions-d-euros-pour-rien.html" hreflang="fr">Filtrage de la pédophilie : jusqu'à 140 millions d'euros pour rien</a> ;</li>
<li><a href="http://news.cnet.com/8301-30685_3-10365636-264.html?tag=newsEditorsPicksArea.0" hreflang="fr">Google urges Web adoption of vector graphics</a>. Moi aussi ! <img src="/dotclear2/themes/default/smilies/wink.png" alt=";-)" class="smiley" /></li>
</ul>
<h3>Bonus écolo</h3>
<p>Allez, pour faire bonne mesure, deux liens sur l'actu Carbone/Environnement :</p>
<ul>
<li><a href="http://www.rue89.com/american-ecolo/2009/09/30/taxe-carbone-lamerique-peureuse-la-france-audacieuse" hreflang="fr">Taxe carbone : l'Amérique peureuse, la France audacieuse ?</a> ;</li>
<li><a href="http://www.technologyreview.com/energy/23561/" hreflang="en">How Aviation Can Come Clean</a>. Réponse : elle ne peut pas, du moins avec en continuant à se reposer sur le carbone. Si j'avais des actions Airbus et Air France, je les aurais déjà vendues...</li>
</ul>