Solutions gratuites pour créer graphiques et tableaux - Dev Web Ressources - winpix. Un tableau ou un graphique est une représentation visuelle des données, dans laquelle les données sont représentées par des symboles, tels que les barres, lignes, ou des tranches. Ces symboles peuvent représenter des tableaux de données numériques, des fonctions ou certains types de structures qualitatives. Actuellement, il ya plus d'une centaine de milliers de ressources disponibles sur le web. Ci-dessous, vous trouverez une collection de ressources essentielles et gratuites pour la création de tableaux et graphiques. Ces solutions ont pour objectif d'augmenter votre productivité. Ressources Javascript Highcharts Highcharts est une ressource écrite en JavaScript, offrant un moyen facile d'ajouter des tableaux interactives à votre site ou application Web. Site officiel Démo Download Flot Flot est une ressource écrite en Javascript pour Jquery. Site officiel Démo Download Moochart Site officiel Démo Download Google Chart Tools Site officiel JS Charts Site officielDémo Download TufteGraph pChart.
Article : 50 Snippets jQuery qui peuvent vous aider dans vos projets JavaScript. Introduction Voici la traduction de l'article d'Addy OSMANI, décrivant 50 Snippets jQuery qui peuvent vous aider dans vos projets JavaScript.source : 50 jQuery Snippets That Will Help You Become A Better JavaScript Developer Présentation Dans ce, je vais vous montrer 50 Snippets jQuery qui peut vous aider dans vos projets JavaScript.
Certains de ces fragments font appel à de nouvelles fonctions de jQuery 1.4.2, tandis que d'autres sont des fonctions réellement utiles ou des méthodes qui peuvent vous aider à faire les choses mieux ou plus vite. J'ai essayé de garder à l'esprit l'optimisation des performances avec ces extraits de code. Si vous pensez que certains de ces snippets pourraient être mieux faits, n'hésitez pas à me le faire savoir. J'espère que vous trouverez cette page utile. Comment créer un filtre imbriqué Un filtre vous permet de réduire l'ensemble des éléments correspondant à ceux qui correspondent à un sélecteur de données. .filter(":not(:has(.selected))") Utilisation :
AngularJS Panels - simple portal widget with RESTful backend. To understand how this component works you need to know AngularJS, at least a little. In case of any doubts please look at AngularJS documentation. The structure of the code is typical to every AngularJS application. First of all, we need controller which will also contain our JSON model: As you can see it's very easy to create model with full RESTful backend. Ok, we have a proper controller, now it's time for our portal widget itself: The only interesting thing which you can see there is custom tag ui:panels which is a marker for our portal widget. model property is set to the name of our model (which should be in JSON format). The last thing which we need to do is to create JSON file with model: As you can see structure looks like that: Both header and content are strings and except plain text can also contain HTML tags.
Les Anonymous développent leur propre Pastebin nommé AnonPaste, une alternative « anonyme » Alerté par mon collègue Charly hier, le groupe hacktiviste Anonymous et le groupe Peoples Liberation Front semblent avoir décidé de proposer leur propre Pastebin ! En effet, le groupe désormais mondialement connu des Anonymous a créé un site de partage de données appelé AnonPaste, non pas destiné à recueillir des fichiers ou autre contenu, mais plutôt des portions de code et d’autres messages et ce, sans aucune modération évitant ainsi la censure de l’information affichée. Ce nouveau site, accessible en cliquant sur ce lien, utilise un domaine .tk disponible gratuitement, et permet aux utilisateurs de fixer un délai d’expiration pour votre message. Les Anonymous affirment que les données sont cryptées et décryptées dans votre navigateur en utilisant le chiffrement AES (Advanced Encryption Standard) de 256 bits, de sorte que le serveur ne voit pas toute l’information contenue dans le paste.
Le site indique qu’il fonctionne à l’aide de dons sous la forme d’WePay ou BitCoins. La validation des formulaires avec jQuery Validate | Pierre FAY. 6 avril 2011 Vous voulez faire la vérification de vos formulaire en javascript simplement et rapidement ? Vous avez besoin d’une librairie qui va vous permettre de pouvoir vérifier qu’un champ est bien un email, une carte de crédit, une adresse ou encore un code postal etc… ? Vous voulez placer vos messages d’erreurs où et comme vous voulez ? Alors cet article va vous aider ! Dans cet article, nous allons voir comment mettre en place un système de validation de vos formulaires en javascript grâce au plugin « jquery validate ». Vous pouvez consulter la documentation du plugin sur le site officiel de jquery à l’adresse suivante : Pourquoi utiliser cette méthode ? Bref, toute façon vous êtes entrain de lire cet article et si vous allez jusqu’au bout vous serez convaincu donc pas besoin de trop justifier mon choix, vous verrez par vous même - jQuery : - jQuery validate : prenez le fichier jquery.validate.min.js.
Les librairies JavaScript vraiment utiles. JSTweener est une librairie de gestion des transitions ( tween en anglais) basé sur la classe Tweener utilisée dans le code ActionScript de Flash. $fx() est une librairie JavaScript légère (moins de 4Ko) d'animation d'éléments HTML. Elle vous permet de modifier n'importe qu'elle propriété CSS progressivement avec un paramétrage simple. Vous pouvez aussi combiner les effets en les enchainant ou en les synchronisant. Enfin, de nombreux callbacks vous offrent beaucoup de liberté dans la gestion de vos effets. Cette librairie vous offre beaucoup de possibilités pour améliorer leur page Facebook avec juste une ou deux lignes de code. Toutes les animations sont basées sur les CSS, donc une bonne connaissance de CSS est utile. A noter qu'il existe une version open-source fonctionnant en dehors de Facebook.
Autres librairies : FX , Animator.js , jsAnim SoundManager importe et améliore l'API Sound de Flash et la rend disponible en JavaScript. Taffy DB est une librairie AJAX libre. CSS3Pie, styles CSS3 pour Internet Explorer. CSS3 pointe son nez apportant son lot de propriétés de mise en forme très pratiques. Certaines fonctionnalités de CSS3 ont aujourd’hui un bon support dans les versions récentes des navigateurs (Firefox, Chrome, Safari, Opera… mais aussi Internet Explorer 9 et le futur IE10), mais bien entendu pas dans les anciennes versions d’Internet Explorer qui restent très présentes sur le marché. Comment gérer cette situation? Le script CSS3 PIE, qui permet d’imiter le support de certaines propriétés CSS3 dans les anciennes versions d’Internet Explorer, est un début de solution.
Sommaire Dans l'astuce « Utiliser CSS3 aujourd'hui, outils et ressources » sont proposés un certain nombre d'outils permettant de pallier le manque de compatibilité des anciennes versions d'Internet Explorer avec les standards CSS3. Parmi ceux-là, il fait mention de CSS3 Pie. Qu'est-ce que CSS3 Pie ? CSS3 Pie a pour but de rendre quelques styles CSS3 compatibles avec les versions 6, 7, 8 et 9 d'Internet Explorer. Exemple : 5 conseils pour développer avec JQuery. Pour prolonger la série des tutorials et conseils sur JQuery, je propose un article pour livrer quelques astuces que j’ai découvert par moi-même ou glanées sur le web dans le but de mieux coder et d’optimiser le code JQuery. En effet, si celui-ci n’est pas bien optimisé, les perfomances peuvent être détérioriées en fonction des capacités de la machine de visiteur.
Le JavaScript est un langage côté client, il ne faut pas négliger les visiteurs ayant une machine de moindre puissance ! 1 – Optimisation des sélecteurs Pour commencer, un petit rappel de l’ordre des sélecteurs de JQuery en fonction de leurs vitesses d’interprétation (la liste n’est pas exhaustive) : $(" #monbloc") $("p") $(".laclasse") Quelques explications s’imposent. Le deuxième sélecteur est basé sur la fonction JavaScript getElementByTagName(). Dernier petit conseil concernant les sélecteurs, il est toujours mieux de donner un contexte au sélecteur si l’on doit utiliser une classe : 3 – La chainabilité ).
Par exemple :
Closure Compiler Service. 50 Useful New jQuery Techniques and Tutorials - Smashing Magazine. 60 More AJAX- and Javascript Solutions For Professional Coding - Smashing Magazine. Advertisement When it comes to design of modern web-applications, Ajax is considered as a standard approach. Interactive solutions for lightboxes, form validation, navigation, search, tooltips and tables are developed using Ajax libraries and nifty Ajax scripts. Ajax is useful and powerful. However, when using Ajax, one should keep in mind its drawbacks in terms of usability and accessibility. Nevertheless, it’s important to know what’s possible, particularly since you can develop new ideas further, improving the quality of your web applications.
This post presents over 60 new useful Ajax scripts, libraries and solutions which you can use in your future projects. You might want to consider checking out the following related posts: Please notice: the overview presented below is not just a yet-another-one-collection of Ajax-scripts. Useful Ajax Scripts Mocha UI6 Mocha is a web applications user interface library built on the Mootools javascript framework. FancyUpload8 Swf meets Ajax. Plugin jQuery : PicNet Table Filter, filtrer les données de vos tableaux. Plugin jQuery : In-Field Labels, placer vos labels dans les champs de formulaires.
Apprise, modifier les alertes javascript. Plugins jQuery. Zoomooz est un plugin jQuery qui permet de zoomer sur des éléments d’une page web. Continue la lecture Chocolat permet de visualiser une ou plusieurs images sans quitter la page. Le choix est laissé à l’utilisateur de regrouper une série d’image sous un lien, ou de laisser apparaître les images sous forme de miniatures. La visionneuse apparaît soit en pleine page, soit dans bloc de la page. Continue la lecture Apprise, est un plugin jQuery qui va vous permettre de modifier les fonctions javascript alert() ou encore confirm(). Continue la lecture Pour vous prémunir du spam dans vos formulaires de contact, il y avait : une question piège (3+2=?)
Et bien maintenant il y a un slider avec QapTcha. Continue la lecture Formation est un plugin jQuery qui va vous permettre de créer et valider un formulaire sans écrire de code HTML. Elle est pas belle là vie de développeur web ? Continue la lecture Après MarkItUp! Continue la lecture Le tout en utilisant jQuery et PDO. Liens : A suivre donc Continue la lecture.
Fonctions diverses mais bien utiles :-) Chargez Jquery en asynchrone avec Head.js. Charger dynamiquement les frameworks javascript (Mootools, JQuery, etc...) grâce à Google API | Aymeric's blog. By Aymeric on septembre 27th, 2009 Petite astuce que j’ai découvert il y a quelques jours : la possibilité de charger grâce à Google API les fichiers javascript nécessaires au fonctionnement des frameworks javascript comme Mootools , jQuery , DoJo , etc… ( liste complète disponible ici ). Les serveurs de Google sont surement plus rapides que celui qui héberge votre site web Le poids de la page est diminué Economie de la bande passante Même si Google API prévoit un système de versionning dans son appel aux libraires, il permet de toujours avoir la dernière version sortie de la librairie.
L’inconvénient que beaucoup avanceront sera le fait que vous dépendez de Google, si il connait une défaillance, la librairie sera indisponible. Il suffit d’inclure entre les balise de votre site le code suivant : afin de charger l’API Google. Interagir avec le DOM au cours du chargement | Border-Labs. Problématique En termes d’ergonomie, il est souhaitable qu’une page HTML se charge le plus vite possible ou en tout cas que les composants graphiques qu’elle comporte soient manipulables dès que possible par l’utilisateur. Lorsqu’on utilise un framework javascript (et qu’on n’utilise pas la méthode du partage de code cf. dernier article), il faut charger le code correspondant. Sur la plupart des navigateurs actuels, l’interprétation du code javascript est bloquante vis-à-vis de l’interprétation du DOM.
Autrement dit, si la page est en train de se charger, qu’elle rencontre une balise SCRIPT, l’HTML cesse d’être interprété pendant que le contenu de la balise SCRIPT (le code javascript) est exécuté. Pour cette raison, il est préférable d’interpréter le code javascript à la fin de la page ou après le onload (le DOM étant totalement chargé à ce moment). Les seules choses qu’on peut paralléliser sont le déclenchement du chargement de fichier javascript en parallèle. Introduction On sait que : jQuery Mobile. jQuery plugin: Tablesorter 2.0. Author: Christian Bach Version: 2.0.5 (changelog) Licence: Dual licensed (just pick!) Under MIT or GPL licenses. Please with sugar on top! Don't hotlink the tablesorter.js files. Download it and host it on your servers. Update! New version! Helping out! Comments and love letters can be sent to: christian@tablesorter.comchristian at tablesorter dot com. tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.
Multi-column sorting Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. TIP! To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document: tablesorter works on standard HTML tables. Start by telling tablesorter to sort your table when the document is loaded: NOTE!