The Sea of Ideas » No, HTML5 does not have a performance issue.
http://paulbakaus.com/2013/05/13/no-html5-does-not-have-a-performance-issue
Well, not any worse than any other cross-platform technology. This has been bugging me for a while now. You know, the clueless managers that ask you questions like “HTML5 seems to have a performance issue, it doesn’t run well on my Internet Explorer 6!”. This has to stop.
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
Et une bonne visualisation de la propriété timing-function
►http://css3.bradshawenterprises.com/transitions
« Automatic Figure Numbering with CSS Counters »
http://tympanus.net/codrops/2013/05/02/automatic-figure-numbering-with-css-counters
Dans le #html5, nouvel élément <figure> :
Basically, instead of adding your images this way:
<!— This is not good enough —>
<img src='http://static3.seenthis.net/cute-kitty.jpg' alt="This is a cute kitty!" />
… you can do something like this:
<!— This is good and semantic —>
<figure>
<img src='http://static3.seenthis.net/cute-kitty.jpg' alt="" />
<figcaption>This is a cute kitty!< / figcaption>
< / figure>
Et dans le #css, un compteur de <figure> :
We want to number our images so that they are prefixed by “Fig. 1 – …”, “Fig. 2 – …” and so on, right? Let’s do it simply.
.article {
counter-reset: figures;
}
.figure {
counter-increment: figures;
}
.figure figcaption:before {
content: ’Fig. ’ counter(figures) ’ - ’;
}
Those 3 lines of CSS are enough to number our figures automagically. Isn’t that awesome?
Figure et figcaption n’ont pas de balise de fermeture ?
si, bien vu : c’est seenthis qui enlève les / (je tente en ajoutant des espaces)
Merci, c’est pour mon confort intellectuel.
Particulièrement difficiles à styliser les figcaption, elles comprennent mal les widhts (ou c’est moi qui, encore une fois, n’a rien compris)
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
« Mobilisons-nous ! Pas de DRM dans le HTML5 et les standards W3C »
http://www.framablog.org/index.php/post/2013/03/22/stop-drm-html5
La question de savoir si oui ou non il y a aura des DRM dans le HTML5 est absolument fondamentale pour le Web de demain. Ce n’est pas une question technique, c’est une question de partage (ou pas).
C’est pourquoi nous vous avions proposé la cinglante réponse de Cory Doctorow à Tim Berners-Lee. C’est pourquoi aussi nous avons traduit cet article très clair de l’Electronic Frontier Foundation qui en appelle à se mobiliser, par exemple en signant la pétition lancée par la Free Software Foundation.
http://www.framablog.org/public/_img/others/hollyweb-small.jpg
Article original :
https://www.eff.org/deeplinks/2013/03/defend-open-web-keep-drm-out-w3c-standards
Les propositions sur les DRM au W3C sont là pour une raison simple : il s’agit d’une tentative d’apaiser Hollywood, qui est irrité par Internet au moins depuis que le Web existe, et a toujours réclamé qu’une infrastructure technique avancée permette de contrôler ce qui se passe sur l’ordinateur du public. Le sentiment est que Hollywood ne permettra jamais la distribution des films sur le Web s’il n’est pas possible de les accompagner de DRM. Mais la crainte que Hollywood puisse récupérer ses billes et quitter le Web est illusoire. Chaque film que Hollywood distribue est déjà disponible pour ceux qui veulent réellement pirater une copie.
#drm #html5 #w3c #partage #majors #industrie_du_divertissement
Cascade Framework
http://jslegers.github.com/cascadeframework/index.html
Also different from Twitter Bootstrap or other CSS Frameworks out there, Cascade Framework can be used for modern browsers and older browsers alike. All features of Cascade Framework support Internet Explorer from IE6 upwards or degrade gracefully.
#HTML5 #CSS #framework #JavaScript
#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
<mode geek>en train de rendre les #podcasts de divers sites #spip compatibles #html5 & tablettes, et après diverses tentatives pour ne pas perdre l’affichage flash qui reste quand même le plus sympa sur PC, trouvé cette solution qui semble en effet multi-plateformes et simple : http://forum.alsacreations.com/topic-5-57748-1-Dewplayer--balise-ltaudiogt.html#p398981
cela dit, ça va être une belle zone, en html5, si on doit mettre le même fichier son sous format propriétaire pour certains navigateurs, et sous format libre pour d’autres</mode geek>
Tu as le lecteur de #Mediaspip qui fait ça tout seul (quand on lui fournit les bons formats, bien sûr).
http://www.mediaspip.net/technical-documentation/plugins-used-by-mediaspip/html5-player-video-sound-media
et
http://zone.spip.org/trac/spip-zone/browser/_plugins_/mediaspip_player/trunk
Et il y a d’autres plugins dans le même projet qui permettent aussi d’encoder automatiquement un média dans plusieurs formats prédéfinis, ce qui permet de n’en balancer qu’un seul par le rédacteur, le reste se faisant automatiquement en arrière plan (mais là c’est un peu plus compliqué à installer).
http://www.mediaspip.net/technical-documentation/plugins-used-by-mediaspip/spipmotion
oui, c’est un beau projet, j’ai pas mal fouiné dedans - en fait, j’ai testé sur un site et j’ai eu des erreurs qui me paraissaient plus longues à résoudre que la solution flash + balise audio ; mais en effet, je vais tenter sur un autre site
même si ça semble parfois un peu plus long qu’un bricolage perso, il est toujours gagnant, à terme, de mettre en commun (#partager) les devs ; sur le coup, tu donnes certes un peu de ton temps, mais au total tu bénéficies de tout le temps que chaque membre de la communauté a donné à son tour, et donnera par la suite (par exemple, quand quelqu’un d’autre résoudra le bug 853987 de la compatibilité de mediaspip avec le kindle 2019 sur android, ce qui t’évitera de t’y casser les dents)
@fil : j’en suis bien convaincue, mais pas assez calée pour l’instant pour contribuer de cette façon-là - j’y travaille ;)
@intempestive Question sotte : tu développes en local, non ? Alors, tu fais un double de ton projet et là tu joues à essai-erreur
@speciale : ouips, mais là c’était visiblement lié au serveur mutualisé (si l’on en croit la note
http://player.mediaspip.net/documentation/article/utilisation-dans-spip#nb1)
en tous cas, commencé à tester ce matin sur mon site perso, hébergé ailleurs, ça a l’air de fonctionner nickel :D
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)
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
Popcorn Maker
https://popcorn.webmaker.org
Nouveau projet #outil #web 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.
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