Développement Intelligent

jQuery Scroll Path

2012-09-11T17:18:00.000+01:00

jQuery Scroll Path

jQuery Scroll Path is a plugin that lets you define your own custom scroll path. What this means exactly is best understood by checking out the demo. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initiating the plugin.

Scrolling can be done with the mouse wheel, up/down arrow keys and spacebar. The space bar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scroll bar is also included, which allows click and drag scrolling. The scroll bar is enabled by default.

Filters: Nice jQuery Filter Plugin

2012-07-06T12:41:00.000+01:00

Filters is a jQuery plugin (similar to Quicksand) that allows items in a list to be filtered using a custom cool animation.
Items can be faded in and out, moved using a standard css3 animation or you can create your own custom animation.

The plugin is free for non commercial use but a commercial license is otherwise required from jsCraft.

Requirements: jQuery
Website: http://www.jscraft.net/demo/plugins/filters/
Licence: Non Commercial / Commercial

Brackets: Web-Based Code Editor By Adobe

2012-07-01T18:16:00.001+01:00

Brackets is an open source code editor (IDE), built by Adobe, which iscreated with only client-side web technologies like HTML-CSS and JavaScript.

The editor focuses on simplicity and, rather than too many panels, the quick-edit UI is the main thing.

A "live development" feature syncs a browser with the editor and displays any changes instantly.

It is integrated with the Chrome's Developer Tools and JSLint for debugging.

Brackets, although being web-based, works in a native shell (Win & Mac versions available) to reach the filesystem.

Requirements: Windows or Mac
Website: http://brackets.io/
Download: https://github.com/adobe/brackets

jQuery & Handsontable: Create an Excel Style Table Editor

2012-06-29T11:43:00.001+01:00

Handsontable is a jQuery plugin that can create an editable Excel or Google Spreadsheet style table from data stored as a JavaScript array.
It features:

Auto expanding editable cells.
Legends.
Scrollable in a container.
Fill handle to drag content to new cells.
Autocomplete (when used with the bootstrap type ahead plugin).
Context menu to modify rows and columns
Callbacks to do things like validate and save data back to a database.

It also has a number of options and methods that are well documented on github.

Demos

Documentation: Available plugin methods and configuration options are listed in README.md on GitHub .

Download: You can download this project in either zip or tar formats.You can also clone the project with Git by running:

$ git clone git://github.com/warpech/jquery-handsontable

License: Licensed under the MIT license

Authors : Marcin Warpechowski / Giraffe

Google Shows Startups How to Master SEO in 10 Minutes

2012-06-27T10:27:00.000+01:00

How to Master SEO in 10 Minutes

Rekapi, keyframe animations with JavaScript.

2012-06-16T11:09:00.003+01:00

English:
Rekapi is a library which brings keyframe animations to JavaScript. It allows us to define the objects, keyframes, animations and control the state of the scene (play, pause, stop).
The drawing of elements is not part of the library and that process can be accomplished by the favorite solution of each developer.

Also, Rekapi can export your DOM animations to CSS3 @keyframes for enhanced performance

It is very well documented, supports a wide list of browsers and works with Node.js too.

Français:
Rekapi est un framework javascript qui nous aide à réaliser des animations comme sur flash, il permet la définition d'objets, keyframes, animations, et le contrôle de l'animation (pause,play,stop).

Le framework ne permet par contre pas le dessin d'éléments, cela peut être accompli par d'autres solutions selon chaque développeur.

En outre, Rekapi peut exporter vos animations DOM en CSS3@Keyframes pour des performances améliorées.

Il est très bien documenté, prend en charge une large liste de navigateurs et se base sur Node.js .

Requirements: Underscore & Shifty
Compatibility: All Modern Browsers
Website: http://rekapi.com/
Demo: http://rekapi.com/demo/bargraph.html
Download: https://github.com/jeremyckahn/rekapi

Adobe ® Shadow facilite le développement web pour les appareils mobiles

2012-06-09T11:58:00.000+01:00

Adobe ® Shadow est un nouvel outil d'inspection et de prévisualisation qui permet aux développeurs et concepteurs Web de travailler plus rapidement et plus efficacement en rationalisant le processus d'aperçu, ce qui rend plus facile à personnaliser des sites Web pour les appareils mobiles. Shadow sera mis à jour régulièrement afin de rester en phase avec les standards du web, mises à jour du navigateur Web et de soutien pour les nouveaux appareils mobiles qui entrent sur le marché, tout en intégrant les commentaires des utilisateurs pour offrir la meilleure fonctionnalité et l'expérience possible.

Démonstration et téléchargement

jQuery Transit

2012-06-09T11:40:00.000+01:00

Jusqu'à maintenant, il était difficile de recommander jQuery pour développer des sites web mobiles. Sa méthode animé (), qui est si bien utilisé sur le bureau, fonctionne mal sur les appareils mobiles, où CSS3 est fortement optimisé. Bien sûr, vous pouvez gérer et déclencher des transitions CSS3, mais cela implique d'écrire beaucoup de CSS. C'est là que vient la widget jQuery transit. Ceci est un plugin jQuery qui fonctionne de la même manière que la méthode animate(), mais tout est alimenté par les transitions CSS3. Vous bénéficiez alors d'animations fluides sur n'importe quel périphérique, avec une syntaxe que vous connaissez déjà et que vous allez adorez.
Rico Sta. Cruz est est l'auteur Transit jQuery.

Démonstration et téléchargement

Mise à jour de Microsoft Internet Explorer 5.5-8 pour être compatible aux navigateurs modernes.

2012-05-22T16:12:00.000+01:00

IE9.js est une bibliothèque JavaScript qui améliore le fameux Microsoft Internet Explorer et rend son comportement comme un navigateur conforme aux standards d’IE9. Elle corrige de nombreux problèmes HTML et CSS et rend transparent le travail PNG correctement sous IE5, IE6, IE7 et IE8.

Développée par Dean Edwards, on en trouve 3 versions IE7.js, IE8.js et IE9.js, mais puisque IE9 s'avère la dernière version stable de MSIE vaut mieux intégrer IE9.js.

Je l'ai intégré au travail et j'ai commencé à le tester vers un mois maintenant et pour l'instant fini les bugs IE8, je vous invite alors à l'utiliser et à partager votre retour d'expérience.

Utilisation

Il suffit de mettre ce bout de code en fin de votre page

PNG

Enfin pour remédier au problème de la transparence des .PNG sous les versions MSIE < 9 il faudra aussi définir une variable globale avant l'intégration de la bibliothèque

Téléchargement

HTML5 Please

2012-05-02T14:48:00.002+01:00

HTML5 Please

In this nice page you will 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.

http://html5please.us/

Tutoriel jQuery : jQueryUI Sortable

2012-04-27T14:49:00.000+00:00

http://www.grafikart.fr

Tutoriel jQuery : jQueryUI Slider

2012-04-27T14:45:00.005+00:00

http://www.grafikart.fr

Tutoriel jQuery : jQuery UI Datepicker

2012-04-27T14:40:00.000+00:00

Grafikart est un site web qui partage avec nous son expérience en mode NTIC par ses sympas tutoriels pour le développement web. J'en ai fait une sélection que j'ai adorée et que je repartage à mon tour avec vous.

http://www.grafikart.fr/

Soon: Buying stocks on Facebook on 3 clicks

2012-04-27T09:01:00.000+00:00

The social network Facebook will soon allow its users to buy shares of their favorite companies directly on their pages fans. Why not click on the button "Like" while two additional clicks allow you to enter the capital of the company.

Advanced technology

If your smartphone is designed in the medium-term to become your bank cards, it's the same with your Facebook account. Indeed, we learn that the authorization was given by the NASDAQ, the largest electronic stock market in the world, to allow the purchase of shares directly on the site.

The new "Like"

The stock will be made in a few clicks, as for putting a "Like" on the page of a celebrity or company. Chris Kelly, head of private data in Facebook feels it is "the development of a like button in many areas." Ease of access that will allow the number of families owning shares of fat. They are only 18% in the U.S., which still represents nearly 14 million homes.

Loyal3

The company is in charge of this project is called Loyal3 and it already offers to purchase shares out of Facebook. But soon it will be possible to do directly from the social network. For example, you can on the page of a fan of Coca-Cola, buy stock in just three clicks via a widget on the page of the company concerned. Loyal3's CEO, Barry Schneider, sees this possibility as a general public access to the world of finance, not only for an elite of Wall Street, of owning a business. Or at least some matter how small it.

Activez Google Drive

2012-04-25T11:51:00.000+00:00

The hard drive From Google called Drive is finally available. You can enable this new Google service now at the following address: drive.google.com/start . and get 5 GB for free.

Get started with 5 GB of free space. Upgrade to 25 GB for less than $2.50 a month, and you can store practically everything for next to nothing.

MultiSelect UI

2012-04-22T00:07:00.000+00:00

Introduction

MultiSelect UI transforme l’élément Select d'HTM en un vrai widget élégant avec le soutien Themeroller permettant ainsi de faire des multiple sélections, un joli filtre integré, etc... le widget hérite du core de jQueryUI toutes ses fonctionnalités, ses effets et est facilement intégrable.
Cette widget a été crée en base par Eric Hynds, j'ai repris son code et j'ai apporté les améliorations suivantes:

La gestion du width se fait d'une façon dynamique au lieu de fixer pour chaque select un width spécifique le width du multiselect s'adapte au texte de l'option sélectionné,
L'intégration se fait d'une façon plus facile vu que le nom et les Class du Select sont reportés sur le nouveau MultiSelect, pour éviter de changer vos services de base ni vos scripts JavaScript de base,
Une option Open a été rajouté pour créer des selects toujours ouvert sur la page,
Les boutons radio sont remplacés par des checkbox ce qui rend l'utilisation de plusieurs selects avec le même name possible.
Une gestion plus correcte du height a été rajouté,

Démonstration

Utilisation:

L'intégration de cette widget est facile. D’abord vous incluez les fichiers ci-dessous:

jQuery 1.4.2+
jQuery UI 1.8 la gestion des widgets et le core Ui est indispensable, les effets de jQueryUI sont à intégrer si seulement vous voulez les utiliser
Un thème jQuery UI
le widget jquery.multiselect.js
le fichier CSS jquery.multiselect.css
le widget du filtrage jquery.multiselect.filter.js
le fichier CSS du filtre jquery.multiselect.filter.css

Après vous construisez un Select Html normal

<select id="exemple" name="exemple" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>

Et enfin, vous initialisez le widget dans $(document).ready({}); pour ceux qui utilisent jQuery sinon dans le window.onload

$(document).ready(function(){
   $("#exemple").multiselect();
});

Options:

Pour la personnalisation de notre Multiselect, cette dernière accepte dans sa création une ou plusieurs options cités ci dessous:

// exemple:
$("select").multiselect({

    checkAllText: "Cocher tout!",

    autoOpen: "true!",

    height: "250",

    classes: "ui-multiselect-menu-block",
});

Option	Description	Valeur par Default
header	Soit une valeur booléenne indiquant si oui ou non afficher l'en-tête, ou une chaîne de carctère . Si vous passez une chaîne, les valeurs par défaut "Cocher tout", "Décocher tout",et "Fermer" liens seront remplacés par le texte spécifié .	true
height	Hauteur du conteneur des options (zone de défilement) en pixels. Si réglé sur "auto", la hauteur sera calculée en fonction du nombre de cases à cocher dans le menu.	175
minWidth	La largeur minimale du widget entier en pixels. Le réglage à "auto" permet du désactiver .	225
checkAllText	Le texte du lien “Cocher tout”.	Check all
uncheckAllText	Le texte du lien “Décocher tout”.	Uncheck All
noneSelectedText	Le texte affiché par défaut dans le multiselect quand aucune option n'a été sélectionné.	Select options
selectedText	Le texte à afficher dans le multiselect lorsque les options sont sélectionnées (si selectedList est initialisée à faux ). Le signe dièse (#) sera automatiquement remplacé par le nombre des checkboxes sélectionnés. Si deux signes dièse sont présents dans ce paramètre, le second sera remplacé par le nombre total des checkboxes disponibls. Exemple : " # sur # sont séléctionné(s) " . Ce paramètre accepte également une fonction anonyme avec trois arguments: le nombre des checkboxes cochés, le nombre total des checkboxes, et un tableau DOM des checkboxes cochés . Voir les exemples pour l'utilisation .	# selected
selectedList	Une valeur numérique (ou booléenne "faux" pour la désactivation) indiquant si oui ou non le widget listera les options sélectionnés sur le multiselect, et combien. Un nombre supérieur à 0 indique le nombre maximum des options de la liste à afficher avant de basculer sur l'option selectedText. Une valeur de 0 ou faux pour la désactivation .	false
show	L'effet qui va être utilisé quand le menu du multiSelect s'ouvre. Pour contrôler la vitesse utiliser un tableau: `['slide', 500]`	empty string
hide	L'effet qui va être utilisé quand le menu du multiSelect se ferme. Pour contrôler la vitesse utiliser un tableau: `['explode', 500]`	empty string
autoOpen	Une valeur booléenne indiquant si oui ou non le menu sera automatiquement ouvert lorsque le widget est initialisée .	false
multiple	Si cette option est mise à "false" une seule option pourra être sélectionné (comme dans un select non multiple)	true
classes	Les Classes supplémentaire(s) que vous voudrez appliquer à la fois au bouton ou menu du widget pour une personnalisation plus poussée. Séparez plusieurs classes par un espace. Vous aurez besoin de faire la différence entre le bouton et menu à la portée de votre CSS : /* button / .ui-multiselect.myClass {} / menu */ .ui-multiselect-menu.myClass {}	empty string
position	Cette option vous permet de positionner le menu où vous voulez par rapport au bouton; centrée, au dessus, au dessous (valeur par défaut ), etc... Elle fournit également la détection de collision pour retourner le menu au dessus de son bouton lorsqu'il se retrouve en bas de la fenêtre. Si vous ne définissez pas cette option ou si l'utilité de position n'a pas été inclus, le menu s'ouvre en dessous du bouton. Nécessite l'utilitaire jQuery UI 1.4.3+ et jQuery position utility.	empty object

Événements

Lier un des événements ci dessous à votre multiselect, soit à travers le gestionnaire d'événements ou pendant l'initialisation.

// Lier à un évènement bind

  $("#multiselect").bind("multiselectopen", function(event, ui){
     // Mettre l’évènement ici
  });
// Passé pendant initialisation
  $("#multiselect").multiselect({
     open: function(event, ui){
             // Mettre l'événement ici
    }
  });

évènement	Description
create	Se déclenche lorsque le widget est créé pour la première fois. Nécessite l'utilitaire jQuery UI Core 1.8.6+
beforeopen	Se déclenche juste avant que le menu s'ouvre. Empêche le menu de l'ouverture en retournant false au gestionnaire.
open	Se déclenche après l'ouverture du widget.
beforeclose	Se déclenche juste avant la fermeture du menu. Empêche le menu de fermeture en retournant false au gestionnaire.
close	Se déclenche après la fermeture du widget.
checkall	Se déclenche lorsque toutes les options sont cochées soit en cliquant sur le lien "cocher tous" dans l'en-tête, ou quand la méthode "checkall" est appelée dans le script (voir la section suivante).
uncheckall	Se déclenche lorsque toutes les options sont décochées soit en cliquant sur le lien "décocher tous" dans l'en-tête, ou quand la méthode "uncheckall" est appelée dans le script (voir la section suivante).
optgrouptoggle	Se déclenche lorsqu'un groupe d'option est cliqué. Cet événement reçoit l'objet d'événement d'origine comme premier argument, et une table de valeurs comme seconde argument: $("#multiselect").bind("multiselectoptgrouptoggle", function(event, ui){ /* event: l'objet de l'événement d'origine, souvent "click" ui.inputs: un tableau de checkboxes (éléments DOM) à l'intérieur du optgroup (groupe d'option) ui.label: le libellé de l'optgroup (groupe d'option) ui.checked: si oui ou non les cases à cocher ont été cochées ou décochées dans le toogle (booléen) */ });
click	Se déclenche lorsqu'un checkbox a été coché ou décoché $("#multiselect").bind("multiselectclick", function(event, ui){ /* event: l'objet de l'événement d'origine, souvent "click" ui.value: la valeur du checkbox ui.text: libellé du checkbox ui.checked: si oui ou non les cases à cocher ont été cochées ou décochées (boolean) */ });

Méthodes

Après l'initialisation d'une instance, vous pouvez interagir avec le widget en appelant l'une des méthodes ci dessous:

      // exemple:

      $("#multiselect").multiselect("nom_de_méthode");

Méthode	Description
open	Ouvre le menu du widget
close	Ferme le menu du widget
refresh	Recharge les options du select. Si vous ajouter/supprimer dynamiquement des options du select original depuis l'ajax ou à travers les méthodes du manipulation du DOM appeler "refresh" afin d'appliquer les changements sur le widget.
disable	Désactive le widget (menu et button).
enable	Active le widget (menu et button).
checkAll	Coche tous les checkbox.
uncheckAll	Décoche tous les checkbox.
isOpen	Retourne un booléen dénotant si le widget est actuellement ouvert ou non.
getChecked	Retourne un tableau des checkbox cochés.
widget	Retourne le conteneur menu (tous les checkbox à l'intérieur).
option	Modifie ou retourne la valeur d'une option de création du multiSelect même après l'initialisation du widget. La modification d'une option prend effet immédiatement.
destroy	Détruis le widget, et réaffiche le select original.

Le plugin filtrage:

Un widget de filtrage est disponible qui, une fois initialisé sur une instance de sélection multiple, permet d'insérer une zone de texte à l'intérieur de l'en-tête du widget pour filtrer les options correspondants à l'entrée.

      // exemple de création d'un multiselect avec filtre:
      $("#multiselect").multiselect("").multiselectfilter();

Batch pour concaténation, minification et compression de vos fichiers Js

2012-04-18T10:54:00.000+00:00

Un site web c'est bien, un joli site web intégrant toutes les nouvelles fonctionnalités JQuery / JQueryUI, des Framework c'est mieux, mais un joli site web rapide à être télécharger ça c'est super.

Ces derniers temps je me suis penché sur la question d'optimisation des JavaScripts (Minification, compression) mais j’ai mis presque deux jours pour générer un batch qui permet de concaténer des fichiers JavaScript (listés sur un fichier texte pour respecter les dépendances), minifier l'ensemble puis compresser le fichier sous la forme .gz que les explorateurs comprennent heureusement, en total vous gagner 400% à 500% de la taille mais ce n'est pas tout car au lieu d'envoyer 5 requêtes à votre serveur http, vous n'envoyez qu’une.

Bon assez parlé, pour que ça marche vous devez avoir :

- Gzip ou 7Zip (http://www.7-zip.org/)

- Jsmin dont vous pouvez avoir le fichier exécutable Ici ou encore le code source fait en C Ici

- Un fichier texte dont le quel vous allez lister en respectant l'ordre des dépendances vos fichiers Js, dans cet exemple je l'ai nommé "liste_js_files.txt" vous pouvez changer son nom mais à condition de le changer dans le code du .bat

- Compact_code.bat que vous pouvez télécharger Ici