HTML KickStart HTML Elements & Documentation
▻http://www.99lime.com/elements
HTML KickStart HTML Elements & Documentation
▻http://www.99lime.com/elements
Transitions CSS3 - Alsacréations
▻http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html
Animer les pages web uniquement à l’aide de styles CSS, sans apport de JavaScript : le module CSS3 Transitions
#animation #html5 #transition #css #css3
Modèles de présentations HTML5 pour remplacer PowerPoint | Le blog de NicoLargo
▻http://blog.nicolargo.com/2012/07/modeles-de-presentation-html5-pour-remplacer-powerpoint.html
L’avenir est dans le web.(Permalink)
Est-ce que quelqu’un ici arrive à faire fonctionner la GamePad API du HTML5, telle que décrite ici :
▻http://www.gamepadjs.com
et théoriquement testable là :
▻http://sgraham.github.io/gamepad.js/example
Sur mon Mac, je n’arrive rigoureusement à rien :
– Chrome ne me propose pas, dans chrome ://flags, d’activer quoi que ce soit concernant une manette de jeu ;
– Firefox répond au javascript qu’il connaît cette API, mais n’interagit pas du tout avec mes manettes (mais aucune d’elle n’est un contrôleur Xbox, ce sont de banales manettes USB – dont celle de la Freebox).
Et sous Parallels avec Windows XP, pas mieux.
Et tu vas pas le croire : on répond à un appel d’offre dans lequel ce serait top-kikou que je puisse contrôler une appli HTML5 avec un joystick. #mouahaha
#DRM dans #HTML5 : la réponse de Cory Doctorow à Tim Berners-Lee - Framablog
▻http://www.framablog.org/index.php/post/2013/03/14/drm-html5-doctorow
Ajouter des DRM au standard HTML aura des répercussions importantes qui seront incompatibles avec les règles fondamentales du W3C.
Un Web construit sur le modèle économique de l’infection urinaire : plutôt que d’innover dans un flot sain, chaque nouvelle fonctionnalité doit venir d’une petite goutte contractée et douloureuse : quelques centimes si vous voulez la lier à un temps spécifique de la vidéo, encore quelques centimes si vous souhaitez intégrer un lien provenant de la vidéo dans une page web, encore plus si vous souhaitez mettre la vidéo sur un autre appareil ou la décaler dans le temps, et ainsi de suite.
L’industrie du logiciel a bien compris qu’il valait mieux faire payer x fois 1 € pour un soft ( pardon une app....!).
On ne paye plus un « logiciel complet » mais une simple fonctionnalité cela fidélise « le client ».
C’est le principe de la mise à jour payante me direz-vous...?
Ce n’est alors plus de l’achat c’est de la location « ad vitam... ».
Oracle Announces General Availability of NetBeans IDE 7.3
▻http://www.oracle.com/us/corporate/press/1910978
“Oracle continues to closely align the NetBeans IDE with Java EE to help developers be more productive in building enterprise applications. With support for HTML5-based client development, NetBeans IDE 7.3 …
Source: Oracle
How It Works - 99Lime.com
▻http://www.99lime.com/how-it-works
Un framework HTML léger après Boilerplate et Bootstrap, pas essayé mais ça à l’air simple et clair.
La gestion du plein-écran sur Flip-Zone. (Je commence la description des détails techniques de la refonte de Flip-Zone.)
Le mode « plein-écran » est visible dans les animations de présentation des collections (anciennement : les « flipbooks »). Il y a un bouton dans le coin de l’animation. Par exemple là :
►http://www.flip-zone.com/fashion/swimwear/janine-robin
L’idée, c’est que dans la version précédente, cette grande animation était entièrement en Flash. Donc j’y gérais le plein écran via Flash. En abandonnant le Flash, je ne voulais pas perdre le plein écran (qui constituait un des aspects spectaculaires de Flip-Zone, que les « autres » magazines de mode ne présentent pas de façon aussi chouette).
Donc : j’utilise l’API #Fullscreen du #HTML5. Curieusement utilisée rigoureusement nulle part, cette API est pourtant épatante et largement utilisable.
– Il faut commencer par utiliser un petit framework qui fasse fonctionner l’API sur Firefox, Safari, Chrome avec leurs implémentations non standard. Pour ça, j’utilise :
►https://github.com/kayahr/jquery-fullscreen-plugin
– J’ai cependant patché ce petit script, parce que désormais Opera aussi a implémenté l’API, mais cette fois en respectant la recommandation officielle. (Je l’ai déjà signalé : il n’existe aucun framework qui ait implémenté la recommandation officielle, si bien que le seul navigateur qui l’ai implémenté est le seul sur lequel aucune des démos ne fonctionne !)
►http://www.flip-zone.com/squelettes/javascript/jquery.fullscreen-mod.js
– Mais je ne passe non plus directement par les fonctions de gestion du plein écran, parce que je veux aussi gérer le cas où l’API n’est pas implémentée (et il y a du monde). Dans ce cas, j’ajoute une classe au conteneur que je veux passer en plein écran, classe qui dit que tout cela est en position fixed, width à 100% et height à 100%. Façon lightbox, en gros.
– Du coup, le mode « plein écran » est relativement transparent (sauf quand les brouteurs, comme Firefox, ont implémenté ça de manière paranoïaque en te demandant de valider 2000 fois un gros bouton autorisant à passer en plein écran…). Même sur MSIE 8 (par exemple), on gagne à passer en « plein écran ».
Pour des raisons économiques évidentes, malheureusement, je conserve le bandeau de publicité à droite en mode plein écran. Sans le bandeau, c’est carrément spectaculaire (si vous avez adblock ou similaire, vous pourrez profiter de l’intégralité de l’écran).
À noter : le mode « plein écran », même non implémenté avec l’API, est très agréable pour utiliser confortablement Flip-Zone sur un smartphone.
– Pour ceux qui n’ont pas suivi : ça n’est pas du tout la même chose que de passer volontairement la fenêtre du navigateur en plein écran. Dans le mode que j’utilise ici, seule l’animation de présentation des collections passe en plein écran, à la façon d’une animation Flash.
Donc : j’utilise l’API #Fullscreen du #HTML5. Curieusement utilisée rigoureusement nulle part...
Mais si elle est utilisée cette API, le plugin #GIS pour #SPIP la propose pour ses cartes depuis 8 mois :p
Mais si elle est utilisée cette API, le plugin #GIS pour #SPIP la propose pour ses cartes depuis 8 mois :p
ah monsieur @b_b veut se la jouer à coup de dates ???
Sur le lecteur de mediaspip (démo par là : ▻http://player.mediaspip.net/demos/videos/article/exemple-complet) c’est deux jours avant cf : ▻http://svn.aires-de-confluxence.info/changeset/6600/plugins_spip/html5/trunk/javascript/mediaspip_player.js
#mega_shameless_autopromo_tambien #b_b_est_un_copieur #bouhouhou_le_vilain ;) #mais_je_n_etais_surement_pas_le_premier_puisque_j_ai_pompe_le_code_quelque_part (ce dernier hashtag montre la puissance de seenthis... sur twitter il prendrait la moitié de l’espace possible)
Allez, allez ! Les enfants, on se range deux par deux, la récré est #finite ! :D
LeanBack Player | HTML5 Media Player UI
►http://leanbackplayer.com
un player de media video et audio basé sur HTML5 <audio> et <video>
Compatible tous navigateurs et OS mobile, skinnable par CSS, fonctionnalités extensible via des extensions
#player #javascript #html5 #media #mobile
#HTML5 Bones: The template that goes back to basics
Popcorn Maker
▻https://popcorn.webmaker.org
Nouveau projet #outil de la fondation #Mozilla qui a l’air très intéressant pour faire du #montage, ça marche avec #Youtube, #Vimeo, #Soundcloud et n’importe quel fichier multimédia en #HTML5 (pas encore testé).
▻http://popcorn.webmadecontent.org/videos/popcornmakerteaser2.mp4
[embed #seenthis_todo ?]
Popcorn Maker makes it easy to enhance, remix and share web video. Use your web browser to combine #video and #audio with content from the rest of the web — from text, links and maps to pictures and live feeds.
testé - pas mal mais assez sommaire encore, faudra voir si des gens s’en saisissent et l’améliorent. Par exemple on ne peut intégrer des tweets qu’en sélectionnant un @ ou un # et afficher seulement le dernier ou les 10 derniers (ie. pas d’intégration possible d’un tweet seul à partir de son URL) ; et quand on veut intégrer une page Wikipédia, ça n’affiche que l’introduction de ladite page ; autrement c’est très facile, très intuitif, ça fonctionne très bien avec les images et le texte : on charge son média et on « l’augmente » sur une timeline multipiste.
Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video, today. This is also known as an “HTML5 Video Player”. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn’t supported, and also provides a consistent JavaScript API for interacting with the video.
HTML5 Please - Use the new and shiny responsibly
►http://html5please.com/#polyfill
“Use the new and shiny responsibly.
Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. tell me more
When Can I Use tells you the browser support story, while Modernizr gives you the power of feature detection. HTML5 Please helps you out with recommendations for polyfills and implementation so you can decide if and how to put each of these features to use.
The recommendations below represent the collective knowledge of developers who have been deep in the #HTML5 trenches. We hope they serve you well”
La grosse nouveauté sur #Seenthis : c’est recodé en #html5, et surtout c’est en #media-queries, c’est-à-dire que le site Web s’adapte à la taille de l’écran.
Bon, c’est pas terminé, mais j’ai essayé de faire le maximum dans la journée. Théoriquement, ça devrait se déployer au fur et à mesure, et vous pouvez donc tester sur votre iDroidPhone préféré pour voir.
Testé sur mobile, c’est nickel !
Beau travail @seenthis, vous avez bien mérité vingt minutes de sommeil.
+1000, #seenthis_ça_roxxe
J’attends un petit peu que la peinture sèche avant de remonter (d’éventuels et légers) soucis :)
Sous Android 4.1 avec le brouteur standard la barre de recherche/login saute, cad elle se met bien en bas de l’écran mais quand on fait bouger le contenu vers le haut, la barre bouge avec avant de se remettre à sa place en bas de l’écran. Même chose quand on pousse la page vers le bas, mais là c’est moins gênant.
Ah oui, mon dernier « billet » est hyper-chiant, car il est tellement long et ennuyeux, on peut « scroller » pendant des minutest avant d’arriver à sa fin. Une fonction pour plier/déplier des messages longs serait la bienvenue.
Par contre c’est super la navigation en bas de l’écran une fois qu’on est connecté. Chapeau !
Sous Google Chrome pour Android le problème avec la barre de recherche/login sautillante ne se produit pas.
Je continue avec mon Google Nexus S /Android 4.1 :
Und fois connectė une surface grise se glisse par des su l’ėcran quand on scrolle. Elle saure vers le bas pour faire Palace au comtenu et à als Barre de navigatio (Google Chrome).
Ecrire des commentaires marche trres bien - si seulement Chrome n’essayait pas de corriger mes « Fa Utes » pour en rajouter d’énormes erreurs.
Encore sous Android, cette fois avec Firefox mobile c’est encore mieux. Quand on est connecté c’est quasiment parfait, on peut scroller à n’importe quelle vitesse, pas de surface grise ou noire provoquée par le trop rapide mouvement. Quand on n’est pas connecté par contre l’effet est présent sous une forme légèrement différente que dans Chrome et le brouteur Android.
Zut, mon Firefox sous Android vient de crasher, il n’y a même pas de capture d’écran dans le menu Android des derniers apps utilisées comme il y a d’habitude.
Avant je venais de remarquer qu’on peut se connecter mais que le dialogue est pénible à remplir sous tous les brouteurs car il disparait sous le clavier virtuel.
Bonne nuit et félicitations pour cette beta impressionnante. C’est pleinement utilisable !
Sous Android, je ne peux pas me connecter. Le pop up de connexion entre en conflit avec le clavier virtuel quand je veux taper le mot de passe.
Je pense faire une page séparée de connexion, parce que de toute façon ça pose beaucoup de difficultés :
– code pourri pour gérer les erreurs en Ajax (pas dément),
– dépliage qui semble déconner (même sur PC) sur certains brouteurs,
– confusion ergonomique avec l’inscription,
– espace drôlement rikiki.
@monolecte Tu peux te connecter sous Android en faisant glisser le dialogue de connexion vers le haut pour le faire réapparaître.
si je perçois bien les choses, ça veut dire qu’on a plus la possibilité quand on dézoome une page de rétrécir la police en même temps ?
Si vous forcez le rechargement des CSS, il y a une foule de petits détails qui ont été changés. Notamment à destination des très petits écrans (éviter les colonnes de texte trop étroites).
Ben oui, mais j’ai un gros nécran avec une colonne perdue au milieu !
Ça a l’air mieux qu’avant sur Nokia S40 et Opera Mini en tt cas, merci !
@fil : oui, ça c’est pas du tout traité : virer un certain nombre de trucs masqués qui apparaissent au survol, vu que c’est assez bloquant en interface tactile.
Pour ceux qui s’y interessent j’ai trouvé ces points de cassure là dans les css de Seenthis
/ Media queries - points de cassure Seenthis /
/ Moins large que 1000px (devices et navigateurs) /
@media all and (max-width : 1000px){
}
@media all and (max-width : 900px){
}
@media all and (min-width : 780px) and (max-width : 1000px){
}
@media all and (max-width : 680px){
}
@media all and (max-width : 500px){
}
/ Mobile portraits et paysages /
@media all and (max-width : 400px){
}
Aaron Koblin, c’est un des gars qui a travaillé sur le fameux clip « HTML5 / mashup » de la chanson « The Wilderness Downtown » d’Arcade Fire.
Sa dernière réalisation : ►http://www.aaronkoblin.com/Aaronetrope
Assez bluffant... (via @hakimel)
addyosmani/getUserMedia.js
►https://github.com/addyosmani/getUserMedia.js
@kent1 une librairie qui permet de jouer avec getUserMedia pour accéder à la webcam depuis le navigateur (fallback en flash pour les vieux bouzins).
getUserMedia.js is a cross-browser shim for the getUserMedia() API (a part of WebRTC) that supports accessing a local camera device from inside the browser. Where WebRTC support is detected, it will use the browsers native getUserMedia() implementation, otherwise a Flash fallback will be loaded instead.
cHTeMeLe – le jeu de plateau certifié HTML5
Le principe est relativement simple… chaque participant joue le rôle d’un navigateur : Firefox, Safari, Opéra, Chrome, IE. Chaque joueur a 6 cartes en main et doit avec les autres joueurs construire LA page HTML. Il existe différents types de cartes : balises (ouvrantes, fermantes, seules), attributs, textes, et les cartes interactives. Vous posez les différentes cartes en suivant les règles des standards du web et accumulez les points… celui qui pose la carte /HTML finit la partie, celui qui a le plus de point gagne. Les cartes interactives vous permettent de mettre un peu de piquant dans la partie : faire cracher un navigateur (ce qui veut dire lui prendre 2 cartes au pif et lui en redonner deux), lui envoyer un bug flash (le navigateur redémarre, donc il est hors jeu pendant un ou deux tours suivant le navigateur), vous pouvez aussi vous défendre en utilisant la carte Firebug ou les cartes W3C, ou encore faire une mise à jour de votre navigateur… il en existe encore d’autre, mais je préfère garder un peu de suspense.
►http://www.travailleursduweb.com/wp-content/uploads/2012/09/tdw_chtemele1.jpg
►http://www.travailleursduweb.com/2012/09/16/chtemele-le-jeu-de-plateau-certifie-html5-dispo-en-pre-commande-s
Bones - The #HTML5 Wordpress Starter Theme
►http://themble.com/bones
Bones is a #WordPress #Theme for Developers
Built around the HTML5 Boilerplate, Bones is a rock solid foundation to start any WordPress project. Keep what you need, remove what you don’t.
Blank & Bare #WordPress #HTML5 Frameworks | DesignWoop
►http://designwoop.com/2012/01/wordpress-html5-frameworks
If your looking to give your WordPress theme a new design or simply looking to upgrade your code to more modern technologies such as HTML5/CSS3, you will these free WordPress HTML5 frameworks very handy. These HTML5 WordPress frameworks are stripped back bare and mostly include little or no styling which provides a perfect HTML5 framework for you to build your new WordPress site on.
Scale-adaptive Web Maps
▻http://cartography.oregonstate.edu/demos/AdaptiveCompositeMapProjections
“The goal of this research is to develop web maps that take advantage of the latest web techniques, such as HTML5 Canvas and WebGL, which allow for very fast geometric manipulation and rendering of vector data on the web client. This allows us to adjust the projection of the web map to the current scale and the area displayed.”
Uun projet qui déboîte bien, la démo en vidéo sur vimeo :
#map #projections #html5 #canvas #webgl
#cartographie #visualisation #échelle
Superbe trouvaille, merci BB et merci Fil
HTML5 : deux versions pour diviser les développeurs
►http://www.numerama.com/magazine/23240-html5-deux-versions-pour-diviser-les-developpeurs.html
Les #navigateurs deviennent donc tout puissants. Ce n’est plus un organisme indépendant et impartial, le W3C, qui décidera des caractéristiques du langage mais des firmes comme Google, Mozilla ou Apple qui développent les navigateurs. Et si les éditeurs avaient déjà un pouvoir si important à la fin des années 1990, l’impact de leurs décisions était proportionnel à l’usage du #web, qui était moins important qu’aujourd’hui.
Or, on peut douter de leur #neutralité. Rien, aujourd’hui, ne peut plus garantir que les choix technologiques liés au web ne seront pas fait dans l’intérêt financier de ces entreprises. L’économie numérique s’est structurée ces 15 dernières années, passant d’un phénomène naissant à l’une des industries les plus puissantes du monde. Un tournant inquiétant pour l’avenir des internautes que l’on pourrait priver d’avancées technologiques au profit de considérations financières.
Une carte du ciel en #HTML5 qui utilise vos données de géolocalisation pour afficher la carte relative à l’endroit où vous vous trouvez.
►http://www.nakshart.com