3 juillet 2008 par Yohann CIURLIK
Mais jusqu’où ira la popularité et l’utilisation de JQuery ?! JQuery est une bibliothèque Javascript Open source qui porte sur l’interaction entre JavaScript (comprenant l’Ajax) et HTML, et a pour but de simplifier des commandes communes de Javascript.
Cet exemple (JQuery Air) montre encore une fois la puissance de la librairie. A vrai dire, je n’aurais jamais pensé à une telle chose…
2 juillet 2008 par Yohann CIURLIK
WP JS est un plugin très pratique pour Wordpress.
Il permet de compresser vos fichiers Javascript en un seul fichier zippé. Il utilise l’algorithme GZIP et JSMin. Les fichiers sont concaténés en un seul.
A la vue de ce graphique, on voit bien la différence entre une version non compressé et sa version optimisée via WP JS.
Pour utiliser le script, il suffit de l’installer en insérant une ligne du type :
-
<script src="<?php wp_js(’/javascript/global.js’) ?>" type="text/javascript" charset="utf-8"></script>
20 juin 2008 par Yohann CIURLIK
Il est parfois difficile de gérer aisément le chargement, l’organisation de ces scripts Javascript. Surtout lorsque les fichier sont nombreux et/ou que les librairies ne sont pas toutes compatibles entre elles. Il n’est pas toujours utile de charger toutes les librairies Javascript pour une page donnée.
Voici deux nouveaux Ajax Loader ou plutôt Javascript Loader dans le même genre que la Google Ajax Librairies que je vous avez déjà présenté.
L’idée étant de délégué à un framework ou un outil la gestion de vos différentes sources Javascript.
Module.Js
Ce framework très léger permet de charger, inclure, déclarer, cacher des sources de script via quelques lignes de codes.
Par exemple
- Un chargement de fichier :
-
<script src="modules.js?<strong>./index.js</strong>"></script>
Archetypes.js
C’est un framework plus puissant qui en plus de traiter ce genre de problème permet également de fournir une architecture type sur laquelle vont reposer tous vos développements de Javascript.
C’est une sorte de templatisation de vos sources Javascript. Vous suivez donc un modèle bien particulier. Ce sont de bonnes pratiques.
Les dépendances sont gérées ainsi :
-
dependencies: {
-
components: {
-
slideManager: "Slidy.components.slideManager",
-
slideChangeHandler: "Slidy.components.slideChangeHandler",
-
slideCounter: "Slidy.components.slideCounter"
-
},
-
lib: ["Slidy.libs.shjs.sh_main", "Slidy.libs.shjs.sh_javascript", "Slidy.libs.shjs.sh_html"],
-
css: ["Slidy.css.slidy", "Slidy.css.w3c-blue", "Slidy.libs.shjs.sh_typical"],
-
html: {
-
main: "Slidy.templates.container"
-
}
-
}
En plus de la gestion de dépendances, vous pouvez également faire de la programmation orientée composant via ce puissant framework. Ce qui augmente la lisibilité du code et permet une maintenance plus facile. Ce schéma résume parfaitement l’idée du framework Archetype : Une approche orientée MVC et composant.
Le code est donc simplement organisé :
-
Archetype.Component.Extend(["Archetype.component.graphicalComponent"], {
-
name:"Sample.component.graphicalFoobar",
-
/**
-
* Set up the Component dependencies
-
*/
-
setup:{
-
dependencies: {
-
components:{foobar: "Sample.components.foobar"},
-
lib:[],
-
css:[],
-
html:{main: "Sample.templates.foobarComponent"}
-
}
-
},
-
/**
-
* Start the Component itself
-
* @constructor
-
*/
-
initialize: function() {
-
this.options = {
-
max: 5,
-
date: new Date(0),
-
table: ["a","b","c","d","e"]
-
}
-
this.anchor = $("bodyContent");
-
-
Logger.debug("foobarGraphical has been instanciated!");
-
-
new this.components.foobar();
-
Logger.debug("foobar launched from foobarComponent!");
-
-
this.render(this.anchor);
-
Logger.debug("foobarGraphical rendered!");
-
},
-
/**
-
* Listen to "DateUpdate" event
-
*/
-
onDateUpdate: function(eventName, date) {
-
this.options.date = date;
-
this.render(this.anchor);
-
Logger.debug("foobarGraphical received a date: " + date);
-
},
-
/**
-
* Render the Component view and return it
-
*/
-
renderViewAsString: function() {
-
return this.templates.main.evaluate(this.options);
-
}
-
});
16 juin 2008 par Yohann CIURLIK
Jeux
Sony prépare le firmware 4.00 pour la PSP via Engagdet.
Un jeu de tank plutôt sympa via FredZone.
WordPress
Une semaine de plus avec Wordpress via Fran6art.
Un guide pour optimiser votre blog vis à vis des moteurs de recherche via blogPerfume.
Mobilité
Le téléphone mobile : un danger pour la santé ? via 01Net.
Du retard pour le HTC Touch Diamond, snif ! via BusinessMobile.
Un EEE pour les militaires, si si ça existe ! via bestofMicro.
Des premières images de Mozilla (mobile) Fennec via GNT.
Systèmes d’exploitations
6 OS pour l’ASUS EEE par Lyxia.org.
Une superbe liste de 65 Web OS via logiste.be.
Divers
Des brochures et du design de qualité via Smashing Magazine.
Un effet glissant pour vos menus en Javascript via WebInventif.
Soutenez Mint, la radio Pop Rock via Bleebot !!!
Et SURTOUT … n’oubliez pas le Firefox Download Day, pensez donc à télécharger Firefox 3 demain !!! Merci Guillaume de nous le rappeler encore une fois de plus …
Bonne semaine à tous !
9 juin 2008 par Yohann CIURLIK
Après la Debug Bar, un outil hyper pratique de débuggage Javascript sous Internet Explorer, voici IETester.
IETester est un navigateur gratuit qui possède le moteur de rendu et de Javascript de IE8, IE6, IE5.5 sous Vista et XP.
C’est encore une version Alpha mais le concept est bien pensé. Pouvoir avoir un rendu rapidement des multiples moteurs d’Internet Explorer permet aux développeurs de pages web de débugger rapidement leur code.
