HTML5 – Work Wild Web @ b2bWeb.fr

Posts Tagged ‘HTML5’

Paris JS 13 – Readr.js (So cute ! I’ve made a talk)

In Molokoloco | 7 Dec 2011 | Laisser un commentaire

Merci à @bobylito qui vient de mettre les vidéos (du live) en ligne sur Dailymotion.

On trouve entre autre ma présentation sur readr.js . Mais aussi plein de super autres sujets (http://www.dailymotion.com/ParisJS #ParisJS)

Ça fait drôle de se voir en vidéo, et ça fait drôle de parler devant beaucoup de gens avec plein de lumière dans les yeux :)

ReadR.JS by Julien Guézennec (@molokoloco) – ParisJS 13

Tags : HTML5, Interface, JavaScript, jQuery, Molokoloco, Multimedia, Open Source, UI, WebApp

jQuery.ReadR.js – Slides pour la conf #ParisJS 13

In Coding Projects,Molokoloco | 1 Dec 2011 | Laisser un commentaire

“My Book ReadR” La présentation que j’ai faite hier soir à la conférence #ParisJS 13 (parisjs.org).

http://www.b2bweb.fr/bonus/my-book-readr/ (Slides)
https://github.com/molokoloco/My-Book-ReadR/ (Code)
http://www.dailymotion.com/video/xmt4wi_paris-js-13-readr-js_tech [Update] (Vidéo du talk)

Tags : HTML5, Interface, JavaScript, jQuery, Multimedia, Open Source, UI, WebApp

Emitter Sprites/Particules factory with jQuery & CSS3

In Coding Projects,Molokoloco | 23 Oct 2011 | Laisser un commentaire

[UPDATE : Projet en cours de refonte ici : https://github.com/molokoloco/jQuery.boxFx]

J’ai voulu tester ce que pouvais donner un émetteur de particule en DOM jQuery/CSS (Sans canvas)…

C’est un plugin léger et hyper-customisable, son principe et de (re)générer, X fois par secondes, un élément HTML, de lui appliquer des propriétés CSS3 (de départ), de l’insérer dans le DOM.

Le plugin applique quasi immédiatement les propriétés CSS de fin, et, au bout d’un certain temps, recycle l’élément : L’animation n’est pas faite avec jQuery $.animate() mais grâce aux propriétés CSS3 de transition, afin de bénéficier de l’accélération matériel (GPU)

Live Demo V0.7 : http://jsfiddle.net/molokoloco/aqfsC/
Plain demo : http://www.b2bweb.fr/framework/jquery.emitter/jquery.emitter.html
Github repository : https://github.com/molokoloco/jquery.emitter
Cloud9ide editor : http://cloud9ide.com/molokoloco/jquery_emitter

En arrière plan, le plugin contient quelques méthodes qui permettent aux propriétés “cssFrom” et “cssTo” de supporter automatiquement l’ajout du “browser prefix” :

Fix and apply styles on element with correct browsers prefix
$(e).crossCss({borderRadius:’10px’}) >>> $(e).css({WebkitBorderRadius:’10px’})
Use Modernizer : https://github.com/Modernizr/Modernizr/blob/master/modernizr.js
Modernizr.prefixed(“borderRadius”); // e.g FF3.6 ‘MozBorderRadius’, FF4 ‘borderRadius’

$.fn.crossCss = function(css) {
	return this.each(function() {
		var $this = $(this);
		if (typeof css != 'object') return $this;
		for (var p in css)
			if (Modernizr.prefixed(p))
				css[Modernizr.prefixed(p)] = css[p];
		return $this.css(css);
	 });
};

Support cross-browser : Transition, borderRadius, borderImage, maskImage, Transform, boxShadow, etc

Le plugin écoute (bind) plusieurs événement via des méthodes publiques : start, stop, update, …
Exemple d’utilisation :

// Permet de mettre à jour, depuis n'importe quelle fonction, une ou des propriétés de l'émetteur
$emitter1.trigger('update', [{emitterRadius:16, rate:0}]);

Il envois (trigger) un évènement à chaque emission de particule (Cf. source) :

// Ecouter si un nouveau sprite à été émis
$emitter1.bind('emit', function(e, $sprite) { 
    $sprite.html('Ok'); // On modifie en live le contenu
});

Si la valeur “options.rate” est mise à Zéro, le plugin utilise la fonction “requestAnimationFrame()”, à la place de “setTimeout()”, afin de maximiser les performance.

Pour le moment il fait des bulles dans l’espace… mais on peu tout imaginer, des tweets, une cascade verticale, des images, beaucoup beaucoup de possibilités… de la synchro audio/vidéo,… Par exemple tapez une lettre entre les deux balises “<div></div>”
C’est pour cela que le code est ouvert sur Github ! :)

J’ai fais ce que j’ai pu pour chasser les bugs, mais il doit bien en rester ^^, vos commentaires sont les bienvenus…

PS : Cette ancienne démo est rigolote aussi :
http://jsfiddle.net/molokoloco/wRS8A/

Tags : Code, CSS3, Framework, HTML5, JavaScript, jQuery, Molokoloco, Plugin

Blobby Particules Factory with jQuery & CSS3 V0.1

In Coding Projects,Molokoloco | 13 Oct 2011 | Laisser un commentaire

@paulrouget à lancé un défis a @GeoffreyDorne pour refaire la bannière de son blog :
https://twitter.com/#!/paulrouget/status/123672623761719296

J’ai voulu tester ce que pouvais donner un émetteur de particule en DOM jQuery/CSS plutot qu’en canvas, histoire de comparer les performances…

C’est un plugin très customisable avec un principe d’emitter de particules contenu dans une div.
L’animation n’est pas faite avec $.animate() mais grâce aux propriétés CSS3 de transition, ce qui permet de bénéficier de l’accélération matériel (GPU)

La petite démo est ici (V0.1) : http://jsfiddle.net/molokoloco/KASGN/
La grosse démo est ici (V0.3) : http://jsfiddle.net/molokoloco/NGm4M/

[Update ! New code here http://www.b2bweb.fr/molokoloco/emitter-sprites-particules-factory-with-jquery-css3/]

Tags : CSS3, HTML5, jQuery, Molokoloco

Pixels polished jQuery & CSS3 analogue clock

In Coding Projects,Molokoloco | 8 Oct 2011 | Laisser un commentaire

Je voulais partager mon nouveau plugin jQuery d’horloge analogique. C’est un script léger, sans image, et uniquement basé sur CSS3 et jQuery.
J’ai essayé d’écrire un code compatible sur les différents navigateurs et c’est commenté… Merci à cet article “quick-look-math-animations-javascript” et d’autres, pour l’inspiration…

La petite démo est ici : http://jsfiddle.net/molokoloco/ajcRz/

La grosse démo (V2) est ici : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]

—

I want to share my new jQuery analogue clock plug-in.
This is à lightweight code, with no images, and only powered with jQuery and CSS3.
I’ve intended to write a annotated cross-browser -past and futur-proof CSS3 code and a simple as possible jQuery extend… Thank to this article “quick-look-math-animations-javascript” and others, for the inspiration…

You can watch the demo here : http://jsfiddle.net/molokoloco/ajcRz/

Demo V2 : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]

GitHub sources :

Tags : CSS3, Framework, HTML5, jQuery, Molokoloco, Plugin

Les petits tweets (et des news…)

In Molokoloco | 27 Sep 2011 | Laisser un commentaire

Astuces HTML5 :

@html5guy: So #HTML5 validation is not triggered when you submit a form with JS, but is tied to the click of the submit button… http://t.co/uvgsQ5r4
@azaaza Want your CSS rotates and scales to be beautifully antialiased ? For webkit, add “box-shadow: 0 0 1px transparent” and it will be.
@coffeetable Using the Page Visibility API - Google Chrome – Google Code —t.co/KhKUnhLZ
@GoogleCode Swiffy, our experimental Flash to HTML5 conversion tool, gets new features and a new home. t.co/RzDSLU3
@html5guy #Adobe Edge Preview 2 is now available to download. t.co/pjX8t5M #html5 #css3 #js: #Adobe Edge Preview 2 … t.co/EWWjO5A
@molokoloco WebAudio Drum Machine 1.0 t.co/VeE06oZN #HTML5 #audio #API
@molokoloco Quelqu’un à déjà teste jCanvaScript ? t.co/B3eJBzky ça à l’air assez complet et propre…

Facebook :

@Fredzone Facebook : nouveau profil, nouveau graph social et musique pour tout le monde ! t.co/U82NYYwE #fredzone
@redcrew Ongoing saga of Facebook tracking even when you’re logged out, they’re fixing some cookie issues : t.co/PWFGXREY
@pressecitron Comment activer votre timeline Facebook sans attendre t.co/56LWkSC3
@JeremyBenmoussa LOL RT @brunofridl : Il parait que youporn va créer son apps pour le nouveau Facebook. Post en live des films que vous regardez !
@nlesconnec You can’t signup to Spotify without a fb account anymore t.co/HXAel5LD And spotify staff’s advice is “create fake fb accounts” #weird
@BrentDPayne If you don’t like what Facebook is serving to you. Don’t click on it. Their algorithm learns from your actions and will stop serving it.
@SocialTimes New blog post: Why Is Facebook Punishing Highly Engaging Brands ? t.co/PZrYrPlv
@GeoffreyDorne Platlas, un atlas pour voir autrement votre Facebook ! t.co/vOfOk3XZ #graphismfr #fb

Google :

@Fredzone AlloStreaming et AlloShowTV supprimés de Google ! t.co/fEPdSlKi #fredzone
@mattcutts Stats from today’s YouTube live stream: 500+ simultaneous viewers, >1200+ people total. Thanks for all your great questions!
@googlewmc Today’s webmaster video : We did a live stream! t.co/uPtdFMIx
@bdescary Google+ : assistez à une Vidéo-bulle depuis votre iPhone :http://dsy.me/1ts #fb
@sc72__ w3sh magazine – [Infographie] En 13 ans, Google a remplacé votre cerveau! t.co/Ma3halIM
@sh1mmer Omg. Chrome is awesome. “Other users are also experiencing difficulties connecting to this site, so you may have to wait a few minutes.”
@GoogleCode Google Apps Script gets bigger and stronger with three new APIs. t.co/8fIgPfa6
@clochix Dash est une déclaration de guerre de Google contre l’Open Web “We will (…) encourage Google developers start off targeting Chrome-only”
@levanhen Up to date Google Goggles brings Automated scanning carry out, makes your digital camera smarter: Android Mobile… t.co/x4eyz2Aq

Politique :

@edwyplenel De Karachi à Takieddine, toute l’histoire était sur Mediapart. Elle est maintenant devant le juge Van Ruymbeke. Et c’est une affaire d’Etat
@PetulaMoore Qui a financé le RPR/UMP/Magouille&Cie ? / Liliane Bettencourt ☑ / Les dirigeants africains ☑ / Les rétrocommissions de l’affaire Karachi ☑
@virginie06 La CNIL adresse un carton rouge au pompage des réseaux sociaux – Numerama t.co/MVidjq62
@PartiPirate RT @UnGarage: Important : faites-vous entendre sur la concertation Télé connectée pour défendre la neutralité du Net ! t.co/tUECFe5
@mikiane Vous voulez agir pour la net neutralité ? t.co/XZrW1UlF
@PetulaMoore Si mes calculs sont exacts, 58,000 postes ont été supprimés dans l’éducation nationale depuis 2007. Ça va les jeunes ? Pas trop entassés ?
@JuBox Orelsan “Suicide social” http://t.co/7aZ7how6 > titre dévastateur blindés de punchlines et clip de furieux #ClapClap

En vrac :

@tomconte Mise à jour du Training Kit Windows Azure – Septembre 2011 : http://j.mp/oHN1Iu - la ressource exhaustive pour se former à Windows Azure
@Fredzone uTorrent : partage et conversion pour Android, iPhone, iPad, PS3 et Xbox 360 t.co/CaHGNoys #fredzone
@paulrouget Future of Firefox: Fullscreen API, CSS 3D,new flexbox model,multiprocess, WebRTC, joystick API, IonMonkey, mobile, HTML5 Context Menu… Yumi!
@jdelacr Le guide du parfait débutant Diaspora t.co/X4hPD4WN #joindiaspora via @xtof_fr
@jorgecasar Useful Node.js Tools, #Tutorials And #Resources - Smashing Coding http://sho.tc/est #JavaScript
@tbassetto Congrats to @hexapode for launching HackerJobs http://hackerjobs.fr (in French) #reverserecruiting

Tags : Facebook, Google, HTML5, Politics, Privacy, Twitter, Web2

Twitter Bootstrap Toolkit for Kickstart Web Development

In Shared Items | 27 Sep 2011

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. With the help and feedback of many engineers at Twitter, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns.

Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox. Bootstrap comes complete with compiled CSS, uncompiled, and example templates.

Source : http://www.webappers.com/2011/09/15/twitter-bootstrap-toolkit-for-kickstart-web-development/

Tags : Code, Framework, HTML5, Open Source, Tool

My Book ReadR V1.12 – HTML5 / jQuery polished “Page as a Book” reader

In Coding Projects,Molokoloco | 29 Aug 2011 | Laisser un commentaire

[UPDATE 30/11/11 - Présentation en ligne : http://www.b2bweb.fr/bonus/my-book-readr/]

J’ai passé pas mal de temps pour réécrire complétement le code du lecteur de livre en ligne que j’avais publié avant les vacances.

My Book Readr, c’est un code source ouvert qui peut permettre à tout à chacun de publier un long texte sur Internet via une page dédiée à la lecture en ligne.

Voici donc un code tout frais, inspiré des recommendations officielles de la team jQuery.

Je ne suis pas parti dans un code purement orienté object, mais dans un concept qui me parait beaucoup plus souple, et adapté à une forte customisation de tous les paramètres.

Le mieux que vous puissiez faire, c’est jeter un coup d’oeuil sur le fichier JavaScript principal (Cf. lien plus bas…)

Au menu de cette V1.12 :

Mise en page simple, claire et typographique, compatible HTML5
Création d’un sommaire automatique, à partir des balises de titres (Ex. <H4>) du texte
Le texte est redimensionnale en largeur (Poignée à droite dans la marge) et en taille de police (CSS basé sur les .em)
Gestion du défilement vertical de la page, pour ne pas se perdre dans le texte
- Un indicateur sur le paragraphe en cours de lecture pour stabiliser visuellement le défilement vertical (Repère)
- Assouplissement du défillement par défaut de la molette, comportement progressif suivant la vitesse
- Le défilement des chapitres est indiqué dans le sommaire, fixe à l’écran
- Vignettes dynamiques indiquant le nombre “d’écrans” de la page (Nombre variant suivant l’affichage) et la position verticale actuelle
- Le fond de page est cliquable et peut glisser de haut en bas
- Flèches Haut/Bas pour défiler de page en page : Flèches Droite/Gauche pour défiler doucement
- Fonction de lecture automatique (La touche “Entrée” active un défilement vertical continu réglable)
Commentaires dynamiques
- Chaque paragraphe accueil un mini-forum Disqus. API gratuite, qui accepte plusieurs type d’identification (Open ID, Facebook, Google, Twitter, Disqus, etc))
- Possiblité de commenter le texte en utilisant les petites bulles sur la gauche
- Sélection du texte pour annoter, copier ou éditer
Edition WYSIWYG et HTML du texte, avec téléchargement d’une sauvegarde possible
Création de notes à partir d’extraits de texte et sauvegarde au format .txt
Défaut : Testé uniquement sous Firefox 6 et Chrome 14… (mais avec un code normalement générique !)

Utilisation du clavier

“Espace” ou “Entrée” : Lecture automatique
- Touches 1,2,3,…,9 pour régler la vitesse (5, valeur par défaut)
Flèches “Haut” et “Bas” : Défilement de la page
- Flèches “Gauche” et “Droite” : Défilement doux
“+” et “-” ~~ou “Ctrl” + “Molette de la souris“~~ : Ajustement de la taille du texte
… et “F11” pour le plein écran !

Exemple de code, créé pour l’application…

My Book ReadR V1.12 – Polished HTML5/CSS3 and jQuery powered “read-a-book” page

This start from the idea to design a page specially engineered to read a long book on the web…

Demo : http://www.b2bweb.fr/bonus/piratons-la-democratie.html
Infos : http://www.b2bweb.fr/molokoloco/my-book-readr-v1-12-html5-jquery-polished-page-as-a-book-reader/
Main Script : https://github.com/molokoloco/My-Book-ReadR/blob/master/js/jquery.readr.js
GIT Sources : https://github.com/molokoloco/My-Book-ReadR/

RESSOURCES :

BoilerPlate HTML5 starter pack : https://github.com/paulirish/html5-boilerplate
TinyMCE, JS WYSIWYG HTML editor (jQuery version) : http://tinymce.moxiecode.com
jQuery Waypoints v1.1 : https://github.com/imakewebthings/jquery-waypoints/
jQuery Mousewheel : http://adomas.org/javascript-mouse-wheel/
Copy to clipboard with ZeroClipboard.swf : http://www.steamdev.com/zclip/
DISCUS comment system API : http://docs.disqus.com/developers/universal/
Google Plus API : https://code.google.com/intl/fr/apis/+1button/
Twitter API : https://twitter.com/about/resources/tweetbutton
Facebook API : https://developers.facebook.com/docs/reference/plugins/like/
Use Google Fonts API : http://www.google.com/webfonts/v2

[Appel] Ce projet manque de contributeurs sur GitHub !!!

Il reste quelques pétouilles à corriger (évidemment… ;), deux ou trois TODOs dans les commentaires, et surtout, prendre un peu de temps pour le faire tourner sur les i-machins et autres Droids…

Tags : Code, HTML5, jQuery, Media, Molokoloco, Multimedia, Open Source, Tool, WebApp

My Book ReadR V0.91

In Molokoloco | 14 Jul 2011 | Laisser un commentaire

[EDIT] New release here – Stay tuned !

I come again, this time with a jQuery “polished” HTML5 “page-as-a-book”

Paul Da Silva a écrit un livre « Piratons la démocratie », hélas distribué au format PDF. Il était difficile à lire à l’écran… J’ai donc récupéré le texte pour le mettre dans une page HTML(5!)…

Et voila !

Features :

Mise en page simple claire et typographique, compatible HTML5
Création d’un sommaire automatique, à partir des balises <H4> du texte
- Le défilement des chapitres est indiqué dans le sommaire fixe
Gestion du défilement vertical de la page, pour ne pas se perdre dans le texte
- Barre d’espace pour défiler de page en page (et les flèches Haut/Bas)
- Flèches Droite/Gauche pour Agrandir/Reduire le texte
- Un indicateur visuel sur l’article en cours de lecture pour stabiliser le défilement vertical
- Assouplissement du scrolling par défaut de la “mousewheel“
Chaque paragraphe est linkés avec un forum via l’API DISQUS, ce qui permet d’annoter le texte (API gratuite, qui accepte plusieurs type d’identification (Open ID, Facebook, Google, Twitter, Disqus, etc))
Défaut : codé en une nuit, uniquement testé Firefox 4 et Chrome 12 ;)