#html5

Je crois que c’est mon plus beau #shameless_autopromo : on vient d’effectuer avec Mosquito la mise en ligne des Très Riches Heures du Duc de Berry, qualifié de « Joconde des manuscrits », 206 feuillets réalisés au cours du XVe siècle, conservé au château de Chantilly :
►https://les-tres-riches-heures.chateaudechantilly.fr

https://les-tres-riches-heures.chateaudechantilly.fr/squelettes-responsive/imgs/duc-berry-1024.jpg

Initialement nous avions réalisé une table tactile installée dans la bibiothèque du château. Table que j’avais évidemment codée en #HTML5, et motorisée par #SPIP. Comme le résultat a beaucoup plu, on nous a dans un deuxième temps demandé de réaliser une version « Web » responsive. (Ça a été une gageure, à la fois côté technique et ergonomique.)

Le principe a consisté à présenter le manuscrit sous forme de « livre » dont les pages se tournent de manière fluide, mais le contenu de chaque page devant être une image en « méga-zoom », et dotée de points d’intérêt (hotspots) donnant des explications supplémentaires. Évidemment les scripts de « tourne-pages » ne sont pas conçus pour faire ce genre de chose, et afficher des centaines d’images « méga-zooms » interactives n’est pas non plus totalement anodin, si on veut que l’ensemble reste fluide. Mais au final, ça fonctionne bien…

Une autre caractéristique, plus technique, était que je voulais pouvoir gérer intégralement les contenus et les images dans SPIP, notamment sans devoir fabriquer « manuellement » les tuiles des images méga-zoom (qui existent en version « une page » et en version « double-page ») sur l’ordinateur. Là les images méga-zooms sont fabriquées automatiquement sur le serveur, depuis #SPIP et les hotspots sont directement définis dans mon interface. Ce qui permet de lier directement la gestion des hotspots et les tuiles méga-zooms, sans risque de travailler sur des versions différentes des images.

Et de manière désormais habituelle sur mes contenus de ce genre : c’est instantanément multilingue (on change de langue à l’endroit même où l’on se trouve, sans rechargement de contenus).

C’est donc un travail dont je suis particulièrement content, ce n’était pas gagné d’avance d’arriver à une interface fluide et responsive, une gestion des contenus relativement simple (tout se passe dans une interface SPIP), à partir d’une interface initialement conçue pour un grand écran de taille fixe, entièrement tactile, avec derrière un PC avec un SSD ultra-rapide et une carte graphique de compétition (un des rares avantages de développer sur Mac : au moins je n’ai pas une carte graphique de compétition, ça oblige à optimiser un peu le truc…).

Et évidemment, c’est gratifiant d’avoir travaillé sur la mise en ligne d’un des plus beaux chef-d’œuvre du monde.

En juin 2021, nous avons livré avec Mosquito une table interactive pour présenter le Concorde au musée de l’Air et de l’Espace du Bourget.

▻https://vimeo.com/512931837

L’interface principale est une vue 3D en temps réel, que l’on peut manipuler, du Concorde. Le rendu est aussi réaliste que possible. Des hotspots dans l’espace permettent de déclencher des compléments d’information, avec animations 3D precalculées.

Évidemment c’est du #HTML5 motorisé par #SPIP. C’est le premier projet que j’ai réalisé entièrement en 3D avec A-Frame, et beaucoup de réglages et d’essais pour trouver les bons formats de fichier et les bons réglages d’éclairages pour obtenir un rendu satisfaisant du Concorde.

#shameless_autopromo

Je suis très en retard sur mes #shameless_autopromo…

En mai 2021, avec Mosquito, on a livré une table interactive présentant la collection de maquettes du XIXe siècle de l’Amiral Pâris, au musée de la Marine de Port-Louis, en face de Lorient :

▻https://vimeo.com/552374272

Évidemment c’est du #HTML5 sous #SPIP. L’originalité ici, c’est que l’interface principale de consultation est en 3D sous A-Frame.

Comme le résultat a bien plu, le musée nous a demandé de réaliser une déclinaison pour le Web :
▻https://musee-marine-multimedia.fr/paris

C’est la même base que la table tactile, mais avec un jeu de squelettes adaptés pour être responsive (même si le smartphone n’est pas forcément le support idéal).

Vizzu Library
▻https://vizzuhq.com/index.html

https://vizzuhq.com/images/logo/vizzu-twitter.png

Vizzu is a free, open-source #Javascript/C++ library utilizing a generic #dataviz engine that generates many types of #charts and seamlessly animates between them. It can be used to create static charts but more importantly it is designed for building animated data stories and interactive explorers as Vizzu enables showing different perspectives of the data that the viewers can easily follow due to the animation.

Main features:

– Designed with animation in focus;
– Defaults based on data visualization guidelines;
– Automatic data aggregation & data filtering;
– #HTML5 #canvas rendering;
– Written in C++ compiled to WebAssembly;
– Dependency-free.

Via @fil sur github

Brython
▻https://brython.info

Brython is designed to replace Javascript as the scripting language for the Web. As such, it is a #Python 3 implementation (you can take it for a test drive through a web console), adapted to the #HTML5 environment, that is to say with an interface to the #DOM objects and events.

Du python dans le navigateur...

<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/brython@3.9.5/brython.min.js">
    </script>
</head>
<body onload="brython()">
<script type="text/python">
    from browser import document
    document <= "Hello !"
</script>
</body>
</html>

▻https://brython.info/static_tutorial/en/index.html

HTML Sectioning Elements : ARIA Landmarks Example
▻https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html

Correspondance des attributs HTML « role » avec les balises de sectionnement (main, nav, header, footer, aside)

#HTML5 #role #attribut_html #balise_sectionnement #aria

#HTML5UP Spectral v2 pour #SPIP

(ré-)Adaptation pour SPIP du squelette « Spectral » de html5up

▻https://contrib.spip.net/HTML5UP-Spectral-v2

https://pbs.twimg.com/media/EtxWzmgWYAIbTQC.jpg https://pbs.twimg.com/media/EtxW0sUXEAEvERy.jpg

#SPIP_blog #intégration

#HTML5up Escape Velocity pour #SPIP

Adaptation pour SPIP du squelette « ESCAPE VELOCITY » de html5up

▻https://contrib.spip.net/HTML5up-Escape-Velocity

https://contrib.spip.net/IMG/jpg/screenshot_2020-10-14_escape_velocity_by_html5_up.jpg https://contrib.spip.net/IMG/jpg/screenshot_2020-10-14_no_sidebar_-_escape_velocity_by_html5_up.jpg

#SPIP_blog #intégration

BigBlueBotton (▻http://docs.bigbluebutton.org)
▻https://diasp.eu/p/10726317

BigBlueBotton

#BigBlueBotton is an #OpenSource web conferencing system for online #learning.

A valid alternative to ms #teams, google #hangouts, ms #skype, #zoom, ...

#BigBlueButton is an #HTML5 based #web #application

We stated above that #BigBlueButton extends many of its core features to focus on enabling the instructor to engage students. There are four main use cases for engagement: 1. #Tutoring/ virtual #office hours 1. Flipped #classroom 1. Group #collaboration 1. Full online classes

If you are an instructor, BigBlueButton helps you engage students with: 1. Multi-user #whiteboard 1. Break out #rooms 1. #Chat (public and private) 1. #Polling 1. Shared #notes 1. #Emojis

Tutorial Videos: ▻https://bigbluebutton.org/html5 Server installation: (...)

HTML5UP Hyperspace V3 pour #spip

Adaptation pour SPIP du squelette « Hyperspace » de #html5up

▻https://contrib.spip.net/HTML5UP-Hyperspace-V3-5240

https://contrib.spip.net/IMG/png/screenshot_2020-02-22_hyperspace_by_html5_up_1_.png https://contrib.spip.net/IMG/png/screenshot_2020-02-22_generic_-_hyperspace_by_html5_up.png

#spip_blog #intégration

HTML5UP Forty pour #SPIP

Adaptation pour SPIP du squelette « FORTY » de #html5up

▻https://contrib.spip.net/HTML5UP-Forty

https://contrib.spip.net/IMG/jpg/screenshot_2020-01-28_forty_by_html5_up.jpg https://contrib.spip.net/IMG/jpg/screenshot_2020-01-28_landing_-_forty_by_html5_up.jpg https://contrib.spip.net/IMG/png/screenshot_2020-01-28_generic_-_forty_by_html5_up.png

#spip_blog #intégration

▻http://html5pattern.com
#regex #pattern #html5

Éléments HTML5 de structure - romy.tetue.net
▻http://romy.tetue.net/elements-html-5-de-structure

Le mémo de romy.tetue.net pour l’organisation de la structure d’une page en HTML5
Sur les imbrications section/article voir aussi : ▻https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
Sur la structuration implicite du plan des éléments de la page généré par ces balises, voir : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document

#html5 #layout #structure #section #article

Responsive Images : comprendre srcset et sizes - Alsacreations
▻https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html

Images responsives : les attributs srcset et size de la balise <img> pour utilisation de multiples source et taille pour une image
Voir aussi : ▻https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web

#srcset #size #img #image #responsive #adaptive_image #HTML5 #CSS

Paradigm Shift (#HTML5up)

Squelette « one page » adapté du thème Paradigm Shift de HTML5 UP pour #SPIP

▻https://contrib.spip.net/Paradigm-Shift-HTML5up

Attention : contrib en chantier

https://contrib.spip.net/IMG/png/screenshot_2019-06-22_paradigm_shift_by_html5_up.png

#spip_blog

How to Section Your HTML
▻https://css-tricks.com/how-to-section-your-html

https://css-tricks.com/wp-content/uploads/2019/06/rectangle-pattern.png

The sectioning elements in #HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section.

#documentation

Solid State (HTML5up)

Squelette adapté du thème Solid State de #HTML5_UP

▻https://contrib.spip.net/Solid-State-HTML5up

https://contrib.spip.net/IMG/jpg/accueil-9.jpg

#spip #spip_blog #intégration #web

Chrome, Safari et d’autres navigateurs ne vont plus permettre de désactiver l’audit de lien, qui permet de suivre les clics sur les liens de sites
▻https://www.developpez.com/actu/255113/Chrome-Safari-et-d-autres-navigateurs-ne-vont-plus-permettre-de-desactiv

L’article original : ▻https://lapcatsoftware.com/articles/Safari-link-tracking.html

L’audit de lien dont il est question ici est l’attribut « ping » des balises « a » (= lien hypertexte) qui entraîne un POST tout à fait irrespectueux de la vie privée sur l’URL donnée dans la valeur de l’attribut : cf la doc de cet attribut sur MDN : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Element/a#attr-ping qui précise bien :

Cet attribut est généralement utilisé pour tracer un utilisateur.

Cet attribut a été introduit par la version 5.3 de HTML5 : cf ▻https://www.w3.org/TR/html53/links.html#sec-hyperlink-auditing
A noter un début de discussion remettant en cause la pertinence technique du mécanisme utilisé qui pose clairement ses enjeux pour le W3C :

Hyperlink auditing is important because advertising and referral-based user tracking are two of the primary means of generating revenue via Web sites. However, by its very nature, such tracking must be comprehensive, accurate, and unavoidable by a typical user or it simply won’t be relied upon by site owners and advertisers.

(cf le premier message de ▻https://lists.w3.org/Archives/Public/public-html/2009Dec/thread.html#msg183)

...ce qui donne un exemple typique des intérêts et de la partialité du W3C dans la fabrication des standards du web !

#navigateur #vie_privée #ping #hyperlink-auditing #html5 #w3c #standard #lobby

HTML5 Pre-resize images before uploading - Stack Overflow
▻https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading

Exemple de manipulation d’image par le navigateur (redimensionnement) avant son POST vers un serveur
Le billet original sur mozilla-dev : ►https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader

La doc de l’API File de HTML5 : ▻https://developer.mozilla.org/fr/docs/Web/API/File/Using_files_from_web_applications

#image_upload #redimensionner #API_file #HTML5

TouchEvent | MDN
▻https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

La documentation de l’API TouchEvent pour gérer les évènements de type « touch » dans une application web

#TouchEvent #html5 #api #mdn #documentation

What Web Can Do Today
▻https://whatwebcando.today

panorama des fonctionnalités HTML5 pour les progressives web apps :
– support
– description et liens vers documentations

#pwa #navigateurs_mobiles #html5

Signaler les champs obligatoires
▻http://romy.tetue.net/signaler-les-champs-obligatoires

Comment bien signaler les champs de saisie obligatoire ? Avec l’astérisque conventionnelle, mais attention : c’est moins simple qu’il n’y paraît ! Voyons cela pas à pas… Baliser les champs obligatoires comme tels Cela se fait très simplement avec l’attribut HTML5 dédié, required, qui s’utilise comme suit…

#required #HTML5 #a11yDesign #a11y #formulaires #forms #astérisque #tutoriel

Zbeul Sim
▻https://corpsmoderne.itch.io/zbeul-sim-2018

https://framapic.org/VhwDhcDWqMMh/Avqx6Syn2k1d.png

Un vrai jeu (en HTML5) pour refaire “l’épique bataille de la vaillante armée du zbeul contre la triste milice du capital”. Le pire (ou le meilleur) c’est qu’on y prend goût...

#game #riot_game #html5 #html_game #black_bloc #totoï #insurrection_qui_vient

Bringing #html5 #games to life. Launching Eulercoder Games — QuickGames
▻https://hackernoon.com/bringing-html5-games-to-life-launching-eulercoder-games-quickgames-dddd9

https://cdn-images-1.medium.com/max/1024/1*3BZYZyK4cVHJanh-pHnZRg.jpeg

Photo by Pawel Kadysz on UnsplashHello!Long wait is over. We are launching our latest product in the global marketplace today. Eulercoder is launching QuickGames — a global distributor of HTML5 and Android Games. We spent past three months in curating, building and testing our HTML5 games and today is the day we are ready to hit the market.QuickGames (An Eulercoder company) already partnered with many channel partners to distribute our games globally. We have over 230+ HTML5 games that we are distributing worldwide through our channel partners. Our simple pricing model and integration APIs make the integration of our games seamless and easy.This article covers all the information about QuickGames, our services, products, pricing model and basic FAQs.So let’s get started…QuickGames Partner (...)

#game-development #gaming #gamenews

Using Ractive.js and #html5 Fetch API to consume #rest API
▻https://hackernoon.com/using-ractive-js-and-html5-fetch-api-to-consume-rest-api-f03c47904202?so

https://cdn-images-1.medium.com/max/1000/1*5Rzyj2z4kdAy53qHP1S8bg.jpeg

credit: ▻https://burst.shopify.com/photos/developer-reviewing-javascriptRecently I was given a task to consume an open rest based API from Open Weather using Ractive.js and HTML5’s Fetch APIThe sample app here takes the city name as input and shows the corresponding weather information below it.Get the OpenWeather API keys for FREE!!!In order to get the JSON data from OpenWeather’s REST API, the first thing we need to do is get their free API key. The API can be called by simply passing in this app id as query parameter. That’s it!Setting the UI containerCreate an HTML5 element to be used as the front of the app. In our case, it’s div#container.Implement responsiveness using BootstrapJust for implementing the responsiveness, we’ve included the Bootstrap reference. The classes .row .col-md-6 (...)

#ractivejs #es6 #javascript