Javascript & Webdesign » Tutoriel

Devenez un p***** de développeur

Bruno Bichet — Wed, 04 Jan 2012 14:01:15 +0000

Programming, motherfucker est une communauté de développeurs humiliés depuis des années par les programmes, les méthodologies et le management, tous centrés sur les heures facturables et les tests sans intérêt. Alors que le développeur veut surtout… développer. Tiens, en parlant de développement web, voici une sacrée liste de tutoriels qui devrait faire de vous un p***** de développeur ^__^

Graphics Programming

GPU Gems
GPU Gems 2 - ch 8,14,18,29,30 as pdf
GPU Gems 3
Graphics Programming Black Book
ShaderX series
DirectX manual (draft)
Learning Modern 3D Graphics Programming (draft)

Language Agnostic

ASP.NET MVC

NerdDinner Walkthrough

Assembly Language

Bash

C / C++

Delphi / Pascal

Django

Djangobook.com

Erlang

Learn You Some Erlang For Great Good

Flex

Getting started with Adobe Flex (PDF)

F#

The F# Survival Guide
F Sharp Programming in Wikibooks
Real World Functional Programming (MSDN Chapters)

Forth

Git

Grails

Getting Start with Grails

Haskell

HTML / CSS

Java

JavaScript

Eloquent JavaScript
Crockford’s JavaScript
jQuery Fundamentals (starts with JavaScript basics)
Mozilla Developer Network’s JavaScript Guide
Essential Javascript & jQuery Design Patterns for Beginners

JavaScript (Node.js specific)

Latex

The Not So Short Introduction to LATEX (perfect for beginners)

Linux

Advanced Linux Programming

Lisp

Lua

Programming In Lua (for v5 but still largely relevant)
Lua Programming Gems (not entirely free, but has a lot of free chapters and accompanying code)

Maven

Mercurial

Nemerle

Nemerle

.NET

C# School (covers C# 1.0 and 2.0)
Visual Studio Tips and Tricks (VS 2003-2005 only)
Entity Framework
Charles Petzold’s .NET Book 0
Threading in C#
C# Yellow Book (intro to programming)
C# Programming – Wikibook
C# Essentials
Data Structures and Algorithms with Object-Oriented Design Patterns in C#
Nemerle

NoSQL

Oberon

Programming in Oberon (PDF)

Objective-C

The Objective-C Programming Language

OCaml

Oracle Server

Oracle’s Guides and Manuals

Oracle PL/SQL

Parrot / Perl 6

Using Perl 6 (work in progress)

Perl

PHP

Symfony2
Practical PHP Programming (wiki containing O’Reilly’s PHP In a Nutshell)
Zend Framework: Survive the Deep End

PowerShell

Mastering PowerShell

Prolog

PostgreSQL

Practical PostgreSQL

Python

R

Ruby

Ruby on Rails

Ruby on Rails Tutorial: Learn Rails By Example

Scala

Programming in Scala, First Edition
A Scala Tutorial for Java programmers (PDF)
Scala By Example (PDF)
Programming Scala
Xtrace (Github)
Lift (Github)
Pro Scala: Monadic Design Patterns for the Web
Exploring Lift (published earlier as « The Definitive Guide to Lift »,PDF)

Scheme

The Scheme Programming Language (Edition 4)

Smalltalk

Free Online Smalltalk Books (meta-list)
Squeak By Example (Smalltalk IDE)

Subversion

SQL

Developing Time-Oriented Database Applications in SQL
Use The Index, Luke! (a guide to SQL database performance for developers)
Learn SQL The Hard Way

Vim

Emacs

Merci à :

@yann_madeleine yann-madeleine.com
@DirtyF frank.taillandier.me

Apprendre jQuery

Bruno Bichet — Thu, 08 Sep 2011 18:41:38 +0000

La série Decoding jQuery proposée par Shi Chuan (créateur de Mobile Boilerplate et faisant partie de l’équipe de HTML5 Boilerplate) nous propose une immersion (en anglais) dans le code source de jQuery. Après 4 parties consacrée aux bases du framework et aux subtilités de la programmation objet dans jQuery, l’auteur attaque les fonctions et les méthodes principales qui font le charme de jQuery ( extend(), isWindow(), parseXML(), globalEval() et toArray() ) pour le moment.

jQuery Core

OOP and jQuery part 1
OOP and jQuery part 2
OOP and jQuery part 3
OOP and jQuery part 4
jQuery.extend() – Objects inherit from objects
jQuery.isWindow() – Detecting window object
jQuery.parseXML() – Cross-browser XML parsing
jQuery.globalEval() – Evaluates a script in a global context
.toarray() – slice, call and everything else

Codecademy : un cours Javascript interactif et ludique

Bruno Bichet — Sat, 03 Sep 2011 19:23:58 +0000

Apprennez les bases de la programmation Javascript de manière interactive et pro-active avec Codecademy. Ce site propose une console dans laquelle l’apprenant est inviter à saisir des lignes de code pour voir ce que ça donne. Très simple, voire basique, cette initiative permettra néanmoins à celles et ceux qui veulent se lancer dans la programmation d’avoir quelques bases tout en s’amusant. Vous pourrez partager votre avancement dans les leçons avec vos amis pour une saine émulation et un système de badges vous donnera des jalons pour mesurer vos progrès. Via roget.biz

73 tutoriels pour faire défiler vos contenus (Slideshow, Sliders & Diaporama)

Bruno Bichet — Mon, 15 Aug 2011 02:24:12 +0000

Les diaporamas et autres Slideshows sont devenus un passage quasi-obligé pour les sites qui veulent présenter un grand nombre d’informations tout en ménageant l’espace disponible. Voici une liste condensée de 73 tutoriels ou scripts jQuery détaillés pour mettre en avant vos contenus texte et/ou image.

→ Source : 80+jQuery Image Slideshow and Content Slider Tutorial

Développer une application avec HTML5 et Javascript

Bruno Bichet — Fri, 15 Jul 2011 11:54:21 +0000

Ce tutoriel HTML5 intitulé «Retours sur un développement HTML5 & JavaScript avec Visual Studio 2010» présente les différentes étapes pour réaliser un mur d’images et avoir la possibilité de zoomer sur une carte et de dézoomer pour retrouver une vue d’ensemble. Le tutoriel est composé de 12 parties que je vous laisse découvrir :

→ Lire Retours sur un développement HTML5 & JavaScript avec Visual Studio 2010

Un diaporama pleine-page avec jQuery

Bruno Bichet — Tue, 08 Mar 2011 14:34:04 +0000

Full background image slider est un script qui permet d’afficher un diaporama occupant toute la fenêtre du navigateur (ou le container que vous voulez). Outre le changement de background de votre site — ce qui pourrait s’avérer fatiguant pour les yeux –, ce script pourra se rendre utile pour présenter des visuels sur une page séparée.

→ Voir la démonstration,
→ Télécharger le script.

Coda Slider Effect — Navigation par onglets accessible avec effet de Slide

Bruno Bichet — Tue, 01 Feb 2011 17:26:49 +0000

Coda Slider Effect est un des nombreux excellents tutoriels proposés par Remy Sharp sur jQuery for Designers. Au menu de Coda Slider Effect : un système de navigation par onglets accessible avec effet de Slide du plus bel effet composé de plusieurs plugins tels que scrollTo, localScroll et serialScroll. Dégradation grâcieuse en l’absence de Javascript, effet de slide respectueux de votre CPU et maintient de la navigation courante via les «hash».

Lightbox CSS avec tabindex et pseudo-classe :focus

Bruno Bichet — Tue, 21 Dec 2010 08:36:24 +0000

Lightbox sans Javascript – Les Lightbox s’affichent généralement suite à un événement `click` capturé par Javascript. CSS ne possède pas de pseudo-classe `:click`, mais cela n’a pas empêché Jérémy Barbe (@capitainemousse) de créer une Lightbox full CSS en remplaçant l’événement `click` par la pseudo-classe `:focus` et la propriété `tabindex` pour permettre aux images d’avoir le «focus». Voir la démonstration.

Voir aussi :

Navigation à onglets avec jQuery & CSS

Bruno Bichet — Fri, 17 Dec 2010 15:30:30 +0000

Simple Tabs w/ CSS & jQuery est un tutoriel expliquant de manière concise les différentes étapes pour réaliser un système de menu à onglets. Soh Tanaka détaille le balisage HTML, le script jQuery et la feuille de style CSS.

Voici le marquage HTML nécessaire :


        Gallery
        Submit

Voir la démonstration.

Galerie d’images avec jQuery

Bruno Bichet — Mon, 01 Nov 2010 14:54:56 +0000

Rédigé sur Alsacréations par Benjamin De Cock, ce tutoriel pour faire une galerie d’image avec jQuery est un cas d’école pour qui veut obtenir le résultat le plus simple possible visuellement tout en prenant en compte l’accessibilité le plus largement possible avec une démarche non intrusive. Je vous laisse avec la démo qui vaudra sûrement mieux qu’un long discours.

JQuery Slide Effect — Animation de texte au survol d’une image

Bruno Bichet — Sat, 30 Oct 2010 08:05:27 +0000

JQuery Slide Effect est un tutoriel concis mais complet qui explique comment parvenir à un effet d’animation de texte (slide) sur une image pour faire apparaitre des informations complémentaires (titre, description, lien, etc.) au survol d’icelle. La démo du Slide sera sûrement plus parlante ;)

Content Switcher — Un diaporama qui fonctionne aussi sans Javascript

Bruno Bichet — Thu, 14 Oct 2010 12:03:55 +0000

Content Switcher est un Slider avec un menu de navigation qui a la particularité de fonctionner parfaitement en l’absence de Javascript et de permettre l’utilisation du bouton retour du navigateur. La version Javascript améliore l’ordinaire avec un effet de fading réalisé avec jQuery pour les transitions entre les slides. Le marquage HTML et les CSS sont très simples à mettre en place :

HTML

CSS

#content-slider {
    width: 650px;
    overflow: hidden;
    height: 300px;
}

#content-slider-inside {
    list-style: none;
    height: 320px; 	/* these 3 lines */
    overflow: scroll;	/* help Opera */
    overflow-y: hidden;	/* behave */
}

#content-slider-inside li {
    width: 650px;
    height: 300px;
}

Content Switcher est basé sur le principes dans ancres internes, ce qui oblige à préciser les identifiants de chaque élément de la liste pour faire la correspondance avec les liens de la navigation.

Voir la démonstration de Content Switcher sans Javascript et avec jQuery.

Evénement jQuery : Return False, preventDefault() ou bien ?

Bruno Bichet — Wed, 22 Sep 2010 09:52:30 +0000

Dans jQuery Events: Stop (Mis)Using Return False, Douglas Neiner nous explique, avec moult exemples, toutes les subtilités relatives aux événements dans jQuery. Une des premières choses que l’on apprend en Javascript est d’empêcher les comportements par défaut liés aux liens ou aux formulaires (le lien sur lequel on l’applique n’est pas suivi par le navigateur, le formulaire ne « submit » plus, etc.).

Typiquement, ça donne le résultat suivant…

$("a.toggle").click(function () {
    $("#mydiv").toggle();
    return false; // Prevent browser from visiting `#`
});

… alors qu’on cherche généralement à obtenir quelque chose comme :

$("a").click(function (e) {
    // e == our event data
    e.preventDefault();
});

Le premier exemple changera bien la visibilité de `#mydiv` sans pour autant nous amener jusqu’à l’ancre `#mydiv`. Ce que l’on sait moins, c’est que `return false` provoque trois effets : `preventDefault()`, `stopPropagation()` et `stopImmediatePropagation()` !

J’avoue que ces notions un peu complexes me donnent parfois mal à la tête. Si quelqu’un(e) pouvait compléter le deuxième exemple pour arriver au même résultat que le premier, je suis preneur. Merci d’avance ;)

Webographie

http://www.w3.org/TR/[...]#Events-Event-preventDefault — merci à Anthony Ricaud (@rik24d) pour avoir partagé cette ressource avec tact et gentillesse.

Du rythme pour vos colonnes avec le pseudo sélecteur CSS :nth-child() et jQuery

Bruno Bichet — Wed, 15 Sep 2010 21:55:04 +0000

Outre un nouveau design sombre que je trouve très réussi, Soh Tanaka nous offre une belle leçon de choses en utilisant le pseudo sélecteur `:nth-child()` et une pincée de jQuery (compatibilité Internet Explorer oblige) pour donner du rythme à une liste de produits contenant des éléments récurrents de tailles différentes. Rassurez-vous, le concept est très bien expliqué avec moult illustrations dans l’article Advanced Columns using the :nth-child(N) ;)

Enterprise jQuery — Passez du côté client

Bruno Bichet — Tue, 20 Jul 2010 20:26:07 +0000

Enterprise jQuery est un site Web qui s’adresse aux développeurs front-end. Il leur permettre de trouver des solutions aux défis auxquels ils sont confrontés dans leur travail au sein des moyennes ou grandes entreprises. Chacun trouvera matière à améliorer ses connaissances sur jQuery, qu’il s’agisse de bouts de codes prêts à l’emploi ou des bonnes pratiques de développement.

Transformer un plugin jQuery en extension WordPress

Bruno Bichet — Sat, 03 Jul 2010 21:21:08 +0000

jQuery et WordPress ont en commun leur modularité : les plugins jQuery et les extensions WordPress permettent d’étendre les fonctionnalités de nos outils préférés. Le tutoriel montre comment utiliser les extensions WordPress pour insérer n’importe quel plugin jQuery dans le panneau des extensions WordPress, de manière propre et efficace.

Lire How to turn any jQuery plugin into a WordPress one.

jQuery Fundamentals — Manuel de survie pour jQuery

Bruno Bichet — Fri, 18 Jun 2010 21:27:45 +0000

jQuery Fundamentals synthétise les éléments de syntaxe de jQuery sur une page web. La navigation s’effectue via un sommaire précis et structuré comprenant également un index des nombreux exemples utilisés.

Distribué sous licence Creative Commons par Rebecca Murphey.

jQuery Fundamentals est disponible sur GitHub.

Retina Display — Effet loupe façon «iPhone 4» avec jQuery

Bruno Bichet — Thu, 17 Jun 2010 07:37:44 +0000

Apple-like Retina Effect With jQuery est un tutoriel qui vous permettra de refaire chez vous l’effet loupe «Retina Display» proposé par Apple sur lav version 4 de l’iPhone. Vraiment bluffant, d’autant plus que le marquage HTML nécessaire est des plus simples :

Démonstration !

Via @LaFermeDuWeb

Fancy Sliding Form — Affichez vos formulaires sous forme de Slideshow

Bruno Bichet — Tue, 08 Jun 2010 06:59:01 +0000

Fancy Sliding Form — Ce script jQuery découpe un formulaire en autant de parties qu’il contient de `fieldset`, accessibles via un menu qui les fait apparaitre sous forme de Slideshow. Cerise sur le gâteau, un symbole apparait sur chaque entrée de menu si les champs n’ont pas été renseignés. Ce tutoriel explique chaque étape : le marquage HTML, les feuilles de style CSS et le code Javascript. Jetez un oeil sur la démonstration. Via @LaFermeDuWeb.

Sliding Panel Photo Wall Gallery — Mur d’image et Lightbox avec jQuery

Bruno Bichet — Fri, 21 May 2010 12:17:42 +0000

Sliding Panel Photo Wall Gallery est un tutoriel qui explique pas à pas (CSS, script jQuery) comment réaliser un mur d’images miniatures qui prennent toute la place de l’écran lorsqu’on clique dessus.

Des boutons «suivant» et «précédent» permettent de naviguer parmi les images.

Un clic sur l’image en taille réelle laisse de nouveau la place à la mosaïque d’images dont l’esthétique simple, élégante et irréprochable fera le bonheur des plus difficiles.

Voir la démonstration.

Via Path-Tech.

Bloc de login à la Twitter avec jQuery

Bruno Bichet — Tue, 20 Apr 2010 12:21:46 +0000

Perfect signin dropdown box likes Twitter with jQuery est un tutoriel qui explique comment faire un bloc de login dynamique comme celui qui se trouve sur la page d’accueil de Twitter. Il suffit d’un formulaire HTML, d’une bonne pincée de CSS et d’une rasade de jQuery. Via Path-Tech.

Créer une arborescence de fichier avec jQuery

Bruno Bichet — Sun, 11 Apr 2010 14:18:57 +0000

Jay Salvat nous propose la première partie d’une série de 8 tutoriels sur la création d’une arborescence de fichiers à l’aide de jQuery. Au menu :

Transformer une liste HTML en arborescence dossiers/fichiers
Ajouter un compteur de fichiers à chaque dossier
Ouvrir et fermer les dossiers
Ouvrir des dossiers par défaut dès l’ouverture
Déplacer les dossiers et fichiers en drag and drop
Supprimer un fichier de l’arbre
Sérialiser le résultat
Déclencher et utiliser des événements

Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery

Bruno Bichet — Tue, 16 Mar 2010 07:58:05 +0000

Optimiser le chargement des AdSense – J’ai eu la chance d’avoir l’explication IRL mais j’attendais avec impatience le billet de Mehdi pour vous en parler. Le principe consiste à réserver les emplacements des publicités là où vous voulez les afficher, de placer les scripts fournis par Google Adsense à la fin de votre page et d’ajouter une pincée de CSS et un soupçon de jQuery pour remettre chaque publicité à sa place quand la page est chargée. J’ai mis cette technique en place sur ce blog et sur css 4 design et ça marche niguel ghrome :D

Créez des sélecteurs personnalisés avec jQuery

Bruno Bichet — Mon, 15 Mar 2010 09:10:27 +0000

Custom jQuery Selectors aborde la création de sélecteurs personnalisés au cas où ceux proposés par jQuery ne suffiraient pas. Dans l’exemple donné, il s’agit de parcourir le DOM à la recherche des balises HTML possédant un attribut `rel` renseigné :

$.expr[':'].withRel = function(obj){
    var $this = $(obj);
    return ($this.attr('rel') != '');
};
// Usage:
$('a:withRel').css('background-color', 'yellow');

Lire également Custom jQuery selectors with parameters. Via Un Y@B sur la toile.

13 Tutoriels jQuery pour Webdesigners

Bruno Bichet — Mon, 08 Mar 2010 07:00:01 +0000

jQuery Tutorials for Designers – La force de jQuery par rapport à d’autres frameworks Javascript est sa capacité à plier le DOM selon notre bon plaisir. Toutefois, la volonté de faire tel ou tel effet ne suffit pas : encore faut-il les connaissances algorithmiques pour y parvenir. Malgré sa simplicité et sa courbe d’apprentissage à la portée de tous, il est toujours bon d’avoir quelques bouts de code sous le tapis de souris pour faire face aux situations récurrentes en matière de webdesign.

A l’exception du premier lien qui mène sur la documentation de jQuery, les autres mènent directement sur une page de démonstration individuelle des tutoriels jQuery :

Atteindre un élément du DOM,
Afficher-masquer un bloc,
Faire disparaitre un élément,
Enchainer les effets de transition,
Faire un menu en accordéon partie 1,
Faire un menu en accordéon partie 2,
Afficher une bulle d’aide animée partie 1,
Afficher une bulle d’aide animée partie 2,
Rendre un bloc entièrement cliquable,
Faire des panneaux coulissants (comme Gmail),
Imiter le back-office de gestion des commentaires à la WordPress,
Faire une galerie d’images,
Afficher des icônes selon le type de fichier.

Les explications sont claires et concises et les exemples visuels sont d’une aide précieuse. Les démonstrations individuelles sont rassemblées sur cette page. Par ailleurs, une archive zip est disponible pour décortiquer ces pépites tranquillement à la maison.

Choisir jQuery ou Mootools en connaissance de cause

Bruno Bichet — Mon, 15 Feb 2010 20:28:07 +0000

Choisir une bibliothèque Javascript n’est pas anodin. Une fois qu’on s’est familiarisé avec une librairie, il est souvent difficile de faire marche arrière et la tentation est grande de ne pas aller voir ailleurs si l’herbe est plus verte. Aaron Newton a eu la bonne idée de faire une comparaison éclairée intitulée jQuery vs Mootools en mettant en évidence les qualités et les défauts de ces deux frameworks Javascript, en toute objectivité.

Dans les grandes lignes

Si jQuery et MooTools ne sont pas très différents l’un de l’autre, il ressort que jQuery est plus simple à apprendre et permet de manipuler le DOM plus efficacement. Mootools, en revanche, propose une syntaxe plus précise que jQuery. Cette force a comme contrepartie de rendre Mootools un peu plus verbeux que jQuery. Ceci dit, le but de Mootools est de rendre Javascript plus simple à utiliser, alors que celui de jQuery est de vous servir le DOM sur un plateau.

En bref

Si vous devez bâtir une application complexe — comme Ajax Push Engine –, Mootools sera un compagnon plus rigoureux, tandis que jQuery donnera le meilleur de lui-même pour créer des effets visuels ou manipuler le DOM pour plier les pages web selon votre bon plaisir.

Merci à Geekarlier et jChavarria pour m’avoir remis cette excellent comparatif sous la souris ;)

Créez votre framework Javascript

Bruno Bichet — Thu, 04 Feb 2010 15:19:01 +0000

Les frameworks Javascript sont aussi répandus que les critiques qui les accompagnent : trop lourds, pas assez rapides, des bugs, des mises à jour trop espacées ou trop rapprochées, etc. S’il vous est déjà arrivé de tenir tout ou partie de ses propos vous êtes peut-être mûrs pour mettre en place votre propre framework Javascript, suivant en cela l’adage selon lequel on n’est jamais si bien servi que par soi-même !

Comment faire ?

Suivez simplement les conseils prodigués par Teylor Feliz qui ont été traduits par KalyParker dans Comment créer facilement un framework JavaScript Partie 1 et Partie 2. Au menu, vous trouverez des conseils concernant la méthode à utiliser pour : créer l’objet principal de votre framework (constructeur vs objet littéral) ; naviguer dans le DOM ; concevoir une méthode de chainage, etc.

Les articles originaux

Au cas où, voici les tutoriels en anglais :

Google Fade — Faire apparaitre des éléments au mouvement de la souris

Bruno Bichet — Tue, 02 Feb 2010 09:53:00 +0000

Google Fade est un script disponible pour Mootools et jQuery qui permet de reproduire chez vous un effet intéressant introduit récemment par Google sur sa page d’accueil : certains éléments de navigation apparaissent suite au mouvement de la souris sur la page ou lorsqu’on quitte le champs de recherche.

C’est très pratique pour éviter d’encombrer l’espace avec des choses inutiles pour ceux qui se contentent de saisir les mots-clés dans la boite de recherche qui a le focus au chargement de la page.

On notera au passage que Mootools requiert plus de lignes que jQuery pour le même résultat. Cerise sur le gâteau, David Walsh a pensé à ceux qui n’ont pas activé Javascript.

Thumbnail Zoom — Effet de zoom et apparition d’une légende au survol

Bruno Bichet — Mon, 01 Feb 2010 11:00:17 +0000

Thumbnail Zoom — Voici un effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris qui fera certainement son petit effet sur vos pages web. Ce tutoriel explique pas à pas le code HTML (liste non-ordonnée), les CSS et la pincée de jQuery nécessaire au bon fonctionnement de l’ensemble. Via colegramist.

Diaporama avec navigation au clavier (flèche droite et flèche gauche)

Bruno Bichet — Sat, 30 Jan 2010 08:11:05 +0000

Adding Keyboard Navigation est un tutoriel expliquant pas à pas la mise en place d’un diaporama avec la possibilité d’utiliser le clavier (flèche droite et flèche gauche) pour passer à l’image suivante ou précédente. Chez Remy Sharp, les tutoriels sont vraiment très bien fait. On trouve le tutoriel proprement dit avec les explications de code, la démonstration pour juger sur pièce et le code prêt à être copié-collé, sans oublier les commentaires, souvent utiles.