ImageMapster – Quand jQuery fait rennaître les balises oubliées…

La balise <map> et toutes ses dérivées <area> sont incontournables lorsqu’on commence à apprendre le langage HTML.

Lorsqu’on maîtrise un peu le HTML, on doit innover en apprenant le CSS. Pour ajouter un peu de dynamisme aux pages HTML, il fallait mettre une touche de JavaScript à nos pages.

HTML et CSS ont beaucoup évolués depuis. Nous en sommes maintenant au HTML5 et au CSS3. JavaScript a aussi évolué mais son évolution ne s’est pas vraiment ressenti que jusqu’à l’apparition des fameux framework tels que prototype, Dojo, Mootools et jQuery. Ces framework continuent d’exister et d’innover mais dans la course, c’est jQuery qui monte en puissance et n’est pas prêt de s’arrêter. Ceci s’explique par sa force à manipuler le DOM (Document Object Model) de votre page HTML sans pour autant ajouter une ligne de code en dur dans le corps de la page. Par manipuler le DOM, j’entends la modification dynamique des balises dans la page HTML sans toucher au fichier source. Plusieurs effets inimaginables existent avec une simple fonction (très facile à retenir et très puissante).

imageMapster est un plugin en jQuery qui permet d’ajouter plus de dynamisme aux cartes d’images. Ainsi, il est très facile d’illustrer une image. L’expérience utilisateur est bleuffant.

J’aime bien ce plugin. Je l’intègrerais surement dans les prochains projets.

#jQuerymobile vs #Senchatouch – Quel #framework pour mon application web mobile #HTML5 ?

#jQuerymobile ou #Senchatouch ? Voila 2 principales questions qu’un développeur devra se poser à partir de maintenant lorsque son client lui demande de lui créer une application web mobile avec HTML5.

En effet, comme John Resig l’avait annoncé sur son compte twitter, jQuery mobile est enfin disponible depuis ce Samedi 16 Octobre 2010. jQuerymobile est un framework développé avec jQuery. Il permet de créer des applications web pour les plateformes des téléphones mobile de type smartphones tels que IOS (iPhone), Android, Blackberry, Bada, Windows Phone, Symbian, Palm Web OS et Meego.

Senchatouch est un concurrent très sérieux de jQuerymobile. La différence est que Senchatouch ne fonctionne correctement que sur IOS et Android d’après ce qui est annoncé sur leur site officiel. Il faut payer une licence pour le faire fonctionner correctement. D’un point de vue marketing, jQuery est le gagnant dans l’histoire. Aussi, comme jQuery est plus facile d’accès et plus utilisé que Sencha, ce nouveau framework jquerymobile trouvera facilement sa place.

Mon choix portera évidemment sur jQuerymobile. Ceci parce que ce framework a de l’avenir devant lui. La communauté de développeur qui enrichit jQuery grâce à leurs plugins est très grande. Ceci ne sera pas prêt de s’arrêter avec jQuerymobile.

HTML5 fait maintenant partie du quotidien des développeurs souhaitant créer des applications mobiles. Ce qui est impressionnant, est qu’il est possible actuellement de créer des applications natives avec du HTML5, CSS et Javascript. Un logiciel propriétaire Appcelerator a commencé à se lancer dans l’aventure. Il a été suivi par Phonegap.

elRTE – L’éditeur de texte enrichi WYSIWYG nouvelle génération

Pourquoi nouvelle génération ? Euh…parce que…ben….c’est parce que j’ai envie de donner ce titre.

Trêve de plaisanterie, j’avais envie de bloguer sur ce nouvel éditeur de texte enrichi WysiWYG qui va bientôt se classer dans le rang des grands tels que tinymce, ckeditor, rtehtmlarea… Cet éditeur s’appelle elRTE.

Il s’agit d’un éditeur enrichi opensource créé avec jQuery et utilise jQuery UI pour les fonctionnalités avancées et supplémentaires.

Comme les grands RTE, en plus d’être rapide et facile à mettre en place, il est possible :

• d’Avoir une barre d’outils personnalisée.
• de Contrôler l’apparence de l’éditeur avec des CSS.
• de créer des extensions.
• de l’utiliser dans plusieurs langues.

L’autre grand atout par rapport aux autres éditeurs RTE est qu’il est accompagné nativement de elFinder, le gestionnaire de fichier opensource créé par l’éditeur même du RTE.  Il est à noter que ce gestionnaire peut être utilisé indépendamment de l’éditeur.

Je noterai quand même un point pour lequel je n’ai pas trop apprécié par rapport aux autres RTE.  Au lieu d’éxecuter ou de remplacer la valeur d’un champ de texte multiligne, cet éditeur remplace la valeur d’une DIV qu’on lui donne en paramètre lors du chargement.

Pour tester >>

Formulaires HTML5 multinavigateurs avec jQuery

Parmi les types de champs classique d’un formulaire HTML4, on a :

• Un type text (une seule ligne), textarea (champ texte multiligne) ou un password
• Un type checkbox ou bouton radio.
• Un bouton de validation submit, de réinitialisation reset ou bouton simple button
• Un bouton avancé button.
• Une liste déroulante select avec ses items option.
• Un champ fichier file.
• Un champ caché hidden.

Read the rest of this entry »

CLEditor – Editeur WYSIWYG en Jquery

Il existe des tonnes d’éditeurs WYSIWYG en Jquery. Parmi les meilleurs qui sont TinyMCE, CKeditor (anciennement FCKeditor), d’autres valent le coup de présenter ici. La raison est qu’ils sont fait en Jquery. Ce qui implique qu’il est très facile de les intégrer dans une page puisqu’ils bénéficient de toute la richesse de Jquery.

CLEditor fait partie de ces nouveaux éditeurs WYSIWYG faits avec Jquery. Voici les caractéristiques de cet éditeur :

• Il est possible d’avoir une barre d’outils personnalisée.
• Plusieurs éditeurs peuvent s’intégrer facilement dans une page.
• La taille de l’éditeur peut s’adapter automatiquement à son élement parent (soit la fenêtre du navigateur, soit le bloc de contenu dans lequel il se trouve).
• Des plugins peuvent être créés et ajouter dans la barre d’outils pour avoir une barre d’outil supplémentaire par exemple.
• S’intègre facilement dans une page avec le code suivant :

D’autres éditeurs WYSIWYG existent également en Jquery :

• jwysiwyg
• jhtmlarea
• light weight RTE
• HtmlBox

Mais aussi d’autres éditeurs destinés plutôt à des langages spécifiques telles BBCODE, Wiki :

• Markitup

le framework « ExtJs » devient « Sencha » et crée Sencha Touch (apps mobile)

Depuis le 14 Juin,  le framework ExtJS très puissant change de nom et devient maintenant Sencha. De ce fait, l’URL est désormais http://www.sencha.com/ . Sencha (dérivé d’un thé vert japonais) est une combinaison de 3 puissants produits Javascript : ExtJS, jQtouch, et RaphaelJs.

De plus, Sencha crée une application pour mobile « Sencha Touch ». Il s’agit plutôt d’application qui ressemble aux applications destinées pour les iPad, iPhone et Android. Plus précisément, les smartphones tactiles.

L’application Sencha touch est construit  entièrement en HTML5 et CSS3. C’est ce point qui m’impressionne. Lorsqu’on voit les captures d’écrans et les démonstrations, le travail réalisé est bluffant.

Géolocalisation, Ajax, des animations et plusieurs autres options sont au menus de cette nouvelle application qui vaut le détour. Je reviendrai vous livrer mes impressions lorsque je l’aurai testé . En attendant, pour faire un détour c’est par ici > http://www.sencha.com

Nivo Slider – Pareil que jQueryTransition mais en mieux…

Nivo Slider fait partie de ces plugins jQuery qui permet de faire des effets de transitions sympathiques. Récemment j’ai rédigé un billet sur jQueryTransition un autre plugin avec les mêmes fonctionnalités.

9 effets (8 pour jQTrans), possibilité d’ajouter une légende dans l’attribut title de l’image (attribut alt pour jQTrans), une barre permet d’aller directement à une image dans les 2 plugins, pèse 6Ko.

Pour rappel, c’est le fameux Smoothgallery (fait en mootools) qui a ouvert cette voie des sliders en javascripts. Depuis, plusieurs plugins ont été créés de part et d’autre sur Internet.

jqFancyTransitions – Transitions d’images en jQuery

jQFancyTransitions est un plugin qui permet de faire des transitions d’images avec 8 effets différents et magiques en jQuery.

La mise en place du plugin est très facile, basique pour un développeur connaissant déjà jQuery. Les images sont placés simultanément dans une balise de type block telle que <div> par exemple.

En plus des 8 effets, il est également possible de paramétrer la largeur et la hauteur du bloc de transition, le degré de transparence du titre, le délai entre chaque effet..

Ketchup Plugin jQuery – valider le formulaire à la volée.

keytchup est un plugin jQuery qui permet de valider un formulaire Html à la volée en Front.

Ce plugin est très flexible, peut être étendu facilement en ce qui concerne l’apparence et les fonctionnalités.

Pour qu’il puisse fonctionner, les javascript suivants doivent être ajoutés :

• jQuery
• Keytchup
• Keytchup.message
• keytchup.validation

Quicksand trie et arrange grâce à jQuery

Quicksand est un plugin jQuery qui a la particularité de faire un tri, filtre des données en ajoutant des effets de transitions shuffle lors de l’animation.

Il est possible de faire ces manipulations sur des données de type textes, images ou les 2 en même temps. L’apparence et les démonstrations visibles sur le site internet de l’éditeur ressemblent beaucoup aux Interfaces utilisateurs de MacOS.