« Browser Sign-in API » by Eiji Kitamura and Meggin Kearney, 30.07.2019
▻https://developers.google.com/web/fundamentals/security/credential-management/retrieve-credentials
#webFundamentals #authentication #webComponents
Google Developers
https://developers.google.com
0 | 20
-
-
#android #kotlin - WebView example
▻https://android--code.blogspot.com/2018/03/android-kotlin-webview-example.htmlPlein de configurations pour une webview sous Android.
-
Je continue avec Kotlin, là j’ai besoin de jouer avec #ARCore. Cette page explique comment ajouter des images de référence :
▻https://medium.com/dvt-engineering/getting-started-augmented-reality-using-android-arcore-9c2f4c3d6528 -
Pour ARCore, la page officielle pour activer le truc :
▻https://developers.google.com/ar/develop/c/enable-arcoreIl me manquait la déclaration qui va bien dans AndroidManifest.xml :
<meta-data android:name="com.google.ar.core" android:value="optional" />
(Ici : ARCore est optionnel.) -
Communication entre la Webview et l’application :
▻https://medium.com/@elye.project/making-android-interacting-with-web-app-921be14f99d8 -
Je me le note, parce que j’ai bien galéré avec ça : pour accéder à ma webview depuis un autre thread (parce que déclenchement d’une action asynchrone par une
@JavascriptInterface), il faut déclarerrunOnUiThead:runOnUiThread { //execute code on main thread myView.evaluateJavascript("…", null ) } -
Du Kotlin un peu plus complet pour ajouter des images de référence à une session ArCore :
▻https://github.com/kboy-silvergym/ARCore-Kotlin-Sampler/blob/master/app/src/main/java/net/kboy/sceneformsample/activity/ImageActivity.kt -
Pour l’instant, la seule documentation fiable que j’ai trouvé sur #ArCore en #Kotlin, c’est là :
▻https://proandroiddev.com/building-arcore-apps-using-sceneform-part-3-4cd392d6284fet le code source :
▻https://github.com/Hariofspades/SpreadLove -
A l’ajout d’un <fragment> pour AR dans mon XML, plantage systématique de l’app. Il faut ajouter les
compileOptionssuivantes dans les crochets deandroid{}dans le fichier build.gradle :android { compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } }
(les gens sur l’interwebz présupposent que je savais qu’il fallait installer ça dans dansandroid{}).
-
-
-
« Detect DOM changes with Mutation Observers » by Paul Kinlan ▻https://developers.google.com/web/updates/2012/02/Detect-DOM-changes-with-Mutation-Observers #webcomponents
-
Données sémantiques, structurées et associées, le choix JSON-LD - Alsacreations
▻https://www.alsacreations.com/article/lire/1780-donnees-semantiques-structurees-associees-le-choix-JSON-LD.htmlJSON-LD est une adaptation de JSON qui permet de servir des données associées (utilisant un vocabulaire défini par avance) et structurées sur le Web.
Successeur des microformats / microdatas HTML5, semble bien parti pour devenir LE format des données sémantiques sur le web.Voir aussi :
– la doc de Google dev pour les « données structurées » en tant qu’élément fondamental dans le référencement d’un site : ▻https://developers.google.com/search/docs/guides/intro-structured-data
– la dernière version de la spécification du w3c : ▻https://w3c.github.io/json-ld-syntax#JSON-LD #données_structurées #microformat #microdata #référencement #web_sémantique
-
Je suis très étonné par les nouveaux résultats de l’« audit » Lighthouse, disponible par exemple dans les outils développeur de Chrome. Ça me colle des scores pourris essentiellement pour une entrée spécifique :
Has significant main thread work 13 160 ms
Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this.
Exemple :
▻https://orientxxi.info/outils/la-lettre-d-information/archives/la-lettre,2766Ça me donne ceci (13 secondes ?) :
Or c’est le format de la newsletter, c’est tout de même une page particulièrement simple. Et… qui ne contient pas une ligne de Javascript.
D’après la fiche de Lighthouse, ça simule le test sur un Nexus 5X. Une appareil de 2015, qui est encore vendu (si je ne me trompe pas de modèle) encore vachement cher (plusieurs centaines d’euros). C’est loin d’être un modèle bas de gamme même de nos jours.
La même page s’affiche très bien (et plutôt rapidement) sur mon antédiluvien iPad première génération (2010… RAM notoirement insuffisante). La page s’affiche instantanément sur une petite tablette Nexus 7 de 2013. Et elle s’affiche également instantanément sur la tablette ultra-pourrie Logicom achetée 80 euros au supermarché (histoire justement de tester sur une toute petite config).
Du coup, je ne pige pas ce que sont ces chiffres qui annoncent des 13 secondes de calculs sur du Javascript qui n’existe pas, des 10 secondes avant que la page soit interactive…
-
C’est n’importe quoi. Même score (encore pire, catastrophique) de « Performance » pour la page d’accueil de Google (tu sais, juste une page vide avec un champ de formulaire pour chercher ce que tu veux) :
-
Je me demande si c’est pas l’installation locale de Lighthouse sur mon vieux Mac qui merde. Quelqu’un a essayé ?
-
Si je me réfère à la version en ligne chez Google, tu as un score de 100 pour cette newsletter.
Soit tu as fait les optimisations qui vont bien, soit le code est différent, soit c’est le matos de test ou que sais-je...
Mais je dirai que la version en ligne est plus fiable, comparativement ?
▻https://developers.google.com/speed/pagespeed/insights/?url=https://orientxxi.info/outils/la-lettre-d-information/archives/la-lettre,2766
-
-
Apprendre à coder - coder pour les enfants
Chères toutes, chers tous
Je cherche à sélectionner des logiciels ou des sites Internet pour apprendre aux enfants à coder (12 ans et 9 ans), ainsi que des sites « pédagogiques » mais rigolos pour affiner les apprentissages. J’en ai vu quelques uns via les moteurs de recherches, mais n’étant pas spécialiste - il y a ici des grands pro - je serai très heureux d’avoir vos avis et vos conseils.
L’idée est d’essayer de proposer une alternatives « viable » aux jeux vidéos débils et violent, et malheureusemnt très addictifs qui envahisent l’environnement des enfants, à l’école via les camarades de classe, au centre ville, via la pub et même jusqu’à la bibliothèque qui était jusque là préservée (et où les enfants pouvaient aller après l’école vers 14:00 pour suivre des activités, lire, voir des films sélectionnées par les bibliothécaires). Depuis quelques temps, ils ont installé dans la bibli des ordi occupés maintenant par des enfants qui jouent à Fortnite ou Roblox du matin au soir...
Voilà les données de l’équation et le défi : proposer une approche des écrans et de l’ordi avec des outils qui leur seront utiles pour plus tard, en limitant au maximum le temps de ’jeux vidéos’ (sans l’interdire, ce qui serait sans doute contre-productif, mais en recréant un équilibre jeux vidéos/apprentissage de l’ordi).
-
Ma fille (comme beaucoup d’élèves de collège, d’après ce que j’ai compris) a eu des cours de programmation en math avec #Scratch ►https://scratch.mit.edu
-
Merci @monolecte - Comme j’ai doublé ce billet sur Facebook, voici une première liste de suggstions (à ajuster avec les pros qui traine sur seenthis) :
▻https://education.lego.com/en-au/support/wedo-2/boost-and-wedo-2
►https://developers.google.com/blockly est un scratch à la mode Google (donc pas libre) peut-être à éviter parce que c’est Google :)
▻http://www.alice.org pour la programmation en 3D
▻https://www.apple.com/swift/playgrounds (de Apple donc pareil que Google) spécialement conçu pour le Ipad.
►https://twinery.org est opensource, pour créer des histoires, mais ausi ds jeux. cette initiative à lair d’être très « costaude ».
▻https://www.lego.com/.../mind.../downloads/download-software pour créer des programmes pour animr ds robits. Essayé par mon fils au centre scientifique dArendal, gros succès et très bonne pédagogie.
-
Je recommande #scratch aussi. Les gnomes accrochent bien à ce truc, et ça apprend très proprement les bases de l’algorithmique.
-
Deux de plus sur la liste (et merci à toute le monde pour les apports, une fois de plus, l’intelligence collective fait 99 % du travail) :
-
-
@reka le lien vers lego ne marche pas. En revanche toutes les infos sur leurs modules programmables sont ici :
▻https://www.lego.com/fr-fr/products/categories/coding-for-kids
C’est vrai que c’est bien fichu. J’ai vu un gamin de 11 ans s’en servir, le côté résultat matériel de la chose est super motivant pour eux. Par contre, et contrairement aux legos « classiques » qui reposent vachement sur l’autonomie, ici c’est compliqué de les laisser se dépatouiller. Seuls ils butent vite dans le mur (au sens propre comme au sens figuré !), du moins au départ. Il faut quelques séances avec adulte pour qu’ils prennent leur envol. Et pourtant le gnome en question était un cador du légo.
-
Cf Apprendre la programmation à des collégiens, vous feriez ça comment les geeks ? de @biggrizzly
▻https://seenthis.net/messages/381856Et aussi
►https://seenthis.net/messages/274141
Apprendre l’informatique sans ordinateur. La méthode complète, désormais en Creative Commons.
de @rastapopoulos -
-
-
-
-
-
Comme je joue beaucoup, ces derniers temps, avec la reconnaissance d’images (et d’objets) de ARKit (et j’interface ça avec SPIP, parce que SPIP c’est trop cool), je commence à regarder ce qui se fait en ARCore (Android). Là ça s’appelle Augmented Images :
▻https://developers.google.com/ar/develop/c/augmented-images -
The PRPL Pattern
▻https://developers.google.com/web/fundamentals/performance/prpl-pattern“PRPL is a new pattern we feel has great potential. At this stage, we welcome experimentation with it while we iterate on the ideas in the pattern and collect more data on where it offers the greatest benefits.”
-
Code.org - Cours interactifs pour enseigner la programmation informatique aux élèves du primaire et du secondaire
▻http://www.planete-education.com/recit/Code-org-Cours-interactifs-pour-enseigner-la-programmation-inform
Code.org est une association à but non lucratif, qui propose d’enseigner aux élèves du primaire et du secondaire, les rudiments de la programmation informatique. Le site adopte une méthodologie facile et accessible, le principe est d’assembler des briques programmables comme dans un casse-tête. À l’aide de blocs d’instructions simples, il faut relever les défis proposés. Au début, très facile, le niveau va croissant avec des consignes de plus en plus complexes. Que ce soit avec Minecraft, Léia, Rey et BB-8 (Star Wars), Elsa et Anna (La Reine de Neiges), Disney Infinity, Jeux Blockly, l’oiseau Flappy ou les créatures déjantées du Play Lab, chaque univers propose, une fois les premières étapes franchies, un mode « création libre » pour fabriquer de petits jeux et laisser libre court à l’imagination des élèves. Studio.code.org propose aussi des dizaines d’heures de tutoriels interactifs en ligne pour l’enseignement et l’apprentissage de la programmation informatique en classe. Une section pour les enseignants permet d’inscrire les élèves et de suivre leurs progrès.#programmation #logique #informatique #technopédagogie #TICE #enseignement #enfants
-
Blockly, un environnement de programmation utilisant un langage graphique sous licence libre ▻►https://fr.wikipedia.org/wiki/Blockly#Liens_externes ▻►https://developers.google.com/blockly
#programmation #logique #informatique #technopédagogie #TICE #enseignement #enfants
-
-
Auto-héberger les polices #Google Fonts sur #WordPress | Angristan
▻https://angristan.fr/auto-heberger-polices-google-fonts-wordpressMais c’est surtout l’aspect vie privée, qu’il est difficile de ne pas évoquer dès que l’on touche à un service Google, puisque chaque visiteur va devoir télécharger quelques fichiers depuis les serveurs de Google. Et donc on a presque un service similaire : avec votre adresse IP et votre user-agent, Google va pouvoir vous suivre sur tous les sites qui utilisent Google Fonts et donc exploiter ces donnée à des fins commerciales par exemple. Bref ça pue, ça apporte pas grand chose, alors ça dégage.
Je vous invite donc à éviter ce genre de CDN, et à lire cet article de Pepper & Carrot : « My fight against CDN libraries » .
-
mmmh. (désolé, j’ai validé mon message par erreur, et entretemps, un ami est arrivé à la maison :) )
Ça peut éventuellement suffire pour un usage commun. De façon plus pointue, il faut se méfier : les fichiers hébergés sur le service de google sont optimisés en fonction du système d’exploitation et du navigateur de l’utilisateur (ainsi, pour une fonte donnée, il maintiennent jusqu’à plusieurs dizaines de variantes en fonction du couple OS/nav).
Donc, télécharger la fonte (woff2, woff, etc...) fournie par le service peut ne donner que celle optimisée pour la plate-forme courante, et donc donner des rendus moyens pour les utilisateurs qui n’ont pas le même système d’exploitation que vous.
-
Tu peux être plus explicite ?
-
Ce comportement du service de google n’est quasiment pas documenté, mais c’est une réalité (j’ai dû creuser ce sujet pour le boulot).
▻https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#reduire_la_taille_de_police_avec_la_compress
Par exemple, Google Fonts possède plus de 30 variantes optimisées pour chaque police, et détecte et fournit automatiquement la variante optimale pour chaque plateforme et navigateur.
-
-
URLs are UI
▻https://www.hanselman.com/blog/URLsAreUI.aspx“Make it a priority that your website supports shareable URLs.”
-
Les instincts d’hier deviennent les bonnes pratiques de demain. Dommage de devoir en passer par là.
-
Ce sont de bonnes pratiques depuis déjà longtemps, en fait. Typiquement, le Cool URIs don’t change de Tim Berners Lee en 1998 : ▻https://www.w3.org/Provider/Style/URI
-
Je suis retombé sur un document synthétique de google à ce sujet
►https://developers.google.com/web/progressive-web-apps
@booz ▻https://seenthis.net/messages/523608
@klaus ▻https://seenthis.net/messages/523013 -
Dommage qu’ils n’aient pas mis le caractère « linkable » des PWA dans cette page d’intro.
C’est heureusement dans la checklist : ▻https://developers.google.com/web/progressive-web-apps/checklist#each-page-has-a-url
-
-
Getting Started with Headless Chrome
▻https://developers.google.com/web/updates/2017/04/headless-chrome#Chrome #Chromium #script #screenshots
Using headless Chrome as an automated screenshot tool
▻https://medium.com/@dschnr/using-headless-chrome-as-an-automated-screenshot-tool-4b07dffba79a -
Complexities of an infinite scroller
▻https://developers.google.com/web/updates/2016/07/infinite-scrollerTL;DR: Re-use your DOM elements and remove the ones that are far away from the viewport. Use placeholders to account for delayed data.
-
Question qui avait été postée en 2011 sur seenthis (@seenthis) :
« Et sinon, des #applis #smartphone prévues pour #Seenthis ? »
5 ans après, en 2016... est-ce qu’il y a une évolution ?
-
Concernant la lecture hors-ligne, qui me semble le seul (?) avantage potentiel d’une appli native sur la version web, il y a des choses possible désormais en javascript dans le navigateur, qui peut servir de cache et de base de donnée pour un site web mobile lisible hors-ligne,[edit] avec notifications web, et tâche de fond. Voir #pwa par exemple, et #local_storage et #IndexedDB
Cela me semblerait intéressant de creuser cela pour SPIP dans son ensemble.
-
Les notifications aussi sont un avantage, la mise à jour en tache de fond....
-
Les notifications et tâches de fond on l’air possibles également.
►https://developers.google.com/web/progressive-web-apps
Push Notifications
Web push notifications makes it easy to re-engage with users by showing relevant, timely, and contextual notifications, even when the browser is closed.▻https://w3c.github.io/ServiceWorker/spec/service_worker/index.html
This specification describes a method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.
The core of this system is an event-driven Web Worker, which responds to events dispatched from documents and other sources. A system for managing installation, versions, and upgrades is provided.
The service worker is a generic entry point for event-driven background processing in the Web Platform that is extensible by other specifications.
-
Si les magiciens de seenthis arrivaient à avoir une lecture hors-ligne, ça serait tellement utile !!!!!!
-
Le service qui serait LE truc utile pour moi serait de s’intégrer au système de partage sur Android, de manière à ce que, quand je lis un article cool, je puisse le partager sur SeenThis aussi facilement que via Twitter, courrier, SMS, etc.
-
-
Web | Google Developers | Progressive Web Applications
►https://developers.google.com/web/progressive-web-apps
▻https://lh3.googleusercontent.com/ztrksWcAyubvXbnAskphQ4hVY2sef4iEIEmxth1HJj6jZkzmB9qYe89YSXfzrProgressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They’re reliable, fast, and engaging.
On nous promet ... tout !
Instant Loading
Service workers allow your apps to load nearly instantly and reliably, no matter what kind of network connection your user is on.Add to Home Screen
Web app install banners give you the ability to let your users quickly and seamlessly add your web app to their home screen, making it easy to launch and return to your app.Push Notifications
Web push notifications makes it easy to re-engage with users by showing relevant, timely, and contextual notifications, even when the browser is closed.Fast
Smooth animations, scrolling, and navigations keep the experience silky smooth.Secure
HTTPS secures the connection between you and your users, ensuring your users information is protected and isn’t tampered with.Responsive
Modern users live on phones, tablets and laptops; your apps and websites should do the same. Learn how to structure and code your content to look great on screens of any size.Est-ce qu’on peut leur faire confiance ou est-ce que c’est encore un monstre qui pompera sur nos réserves avant de se faire la malle ?
▻https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app
Progressive Web Apps are:
Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent - Enhanced with service workers to work offline or on low quality networks.
App-like - Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push notifications.
Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
Linkable - Easily share via URL and not require complex installation. -
Que sont les Progressive Web Apps ? - Frank Taillandier
▻http://frank.taillandier.me/2016/06/28/que-sont-les-progressive-web-appsLes Progressive Web Apps apportent les fonctionnalités attendues des applications natives à l’expérience de navigation Web sur un mobile en utilisant des technologies basées sur les standards et en tournant dans un conteneur sécurisé accessible à tous sur le Web.
En somme, les Progressive Web Apps décrivent toute une série de technologies, de concepts d’architecture et d’API Web qui travaillent de concert pour proposer une expérience similaire aux applications natives sur le Web mobile. Voyons ensemble les quelques tenants de base des Progressive Web Apps.Le concept de « Progressive Web Apps » sent le marketing à plein nez mais l’idée de base est là : faire des applis web utilisables comme applis mobiles (ce qui était un des principe porté par Mozilla phone dans son concept d’OS mobile). Et au passage ça devrait permettre de se débarrasser des Truc Store et de la compilation par OS à chaque version d’une l’appli...
Voir aussi :
▻https://serviceworke.rs pour des exemples de « Service workers »
▻https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-3 et ▻https://w3c.github.io/manifest pour l’utilisation de fichier manifest.json pour installer une web apps#progressive_web_apps #service_workers #app_shell #appli_mobile #manifest.json
-
Offline Google Analytics Made Easy
▻https://developers.google.com/web/updates/2016/07/offline-google-analyticsToday, we’re happy to announce that everything you need to handle offline Google Analytics requests within your service worker has been bundled up into an npm package: npm install —save-dev sw-offline-google-analytics
#GoogleAnalytics_statistics_offline_ServiceWorker_clevermarks
-
-
cf ►http://freakonometrics.hypotheses.org/11138
sinon on avait une discussion sur twitter cet après midi ,autour de @kidscodin
-
Les créations Magik Square : ▻http://magiksquare.fr
En plus avancé : ▻http://www.c-jump.com -
cf ▻https://twitter.com/LegendumEst/status/728952841990246401
dans le même collection que « python pour les kids », il y a scratch pour les kids
(mes enfants aiment beaucoup) -
Ines a bien aimé ►https://code.org mais il faut se fader la tronche de Zuckerberg et co
-
Par un moyen détourné comme une histoire dont vous êtes le héros ?
►https://twinery.org -
dans le genre toute première initiation, un jeu avec des chaises et tout : ▻http://seenthis.net/messages/479335
-
n’empêche 5 piges pour commencer le code c’est pas un peu jeune ? J’y connaît rien, jamais rien codé, mais les petits cubes en bois toussa...
-
Et sans oublier, ça, copiable librement, et sans ordinateur :
►http://seenthis.net/messages/274141 -
Guide d’activités technocréatives pour les enfants du 21e siècle ▻http://lel.crires.ulaval.ca/public/guidev1._guide_dactivites_technocreatives-romero-vallerand-2016.pd
#programmation #logique #informatique #technopédagogie #TICE #enseignement #enfants -
Blockly, un environnement de programmation utilisant un langage graphique sous licence libre ►https://fr.wikipedia.org/wiki/Blockly#Liens_externes ►https://developers.google.com/blockly
#programmation #logique #informatique #technopédagogie #TICE #enseignement #enfants
-
-
Geolocation API removed from unsecured origins in Chrome 50
▻https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only“Starting with Chrome 50, Chrome no longer supports obtaining the user’s location using the HTML5 Geolocation API from pages delivered by non-secure connections. This means that the page that’s making the Geolocation API call must be served from a secure context such as HTTPS.”
0 | 20