Le Light Painting, les explications

Pour faire du Light Painting, il est nécessaire de remplir certaines conditions. Dans un premier temps, vous aurez besoin d’un environnement le plus sombre possible. Un tunnel, une pièce mal éclairée ou un endroit visité en pleine nuit feront parfaitement l’affaire. Ensuite, dans un second temps, il vous faudra une ou plusieurs sources lumineuses quelconques, comme une lampe torche, une flamme, un laser ou les phares d’une voiture.

Côté réglages, il faudra opter pour un temps d’exposition long et vous devrez donc utiliser soit un reflex numérique, soit un appareil photo numérique ou un bridge proposant ce type d’option. Dans tous les cas, il vous faudra du matériel de qualité pour obtenir un rendu optimal.

Mais ce n’est pas tout. Car pour que l’effet soit vraiment saisissant et intéressant sur le plan artistique, il est nécessaire de créer un mouvement. Ainsi, il faudra que la source lumineuse soit déplacée ou que vous bougiez votre appareil photo pour que le résultat soit à la hauteur de vos attentes. Notons que la meilleure solution est d’opter pour une source lumineuse mobile et d’utiliser un trépied pour que l’appareil photo reste parfaitement en place.

Précisons en outre que le Light Painting peut parfaitement être adapté à la vidéo, comme nous l’ont prouvé les dernières publicités pour l’iPod.

Le Light Painting, les exemples

Pour obtenir les résultats qui suivent, il vous faudra sans doute beaucoup de patience mais vous constaterez par vous-même que le jeu en vaut la chandelle.

Le Light Painting, quelques vidéos

Et histoire de contenter nos amis adeptes de motion, voici quelques exemples supplémentaires mais en vidéo cette fois. Notons toutefois que certains effets ont été réalisés sous After Effects. Point positif, vous trouverez au moins un tutoriel avec les réglages les plus adaptés à ce type de travail.

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Alors bien sûr, ces services supposent que vous ayez au moins une couleur de base.

• DHTML Goodies : On commence par indiquer les valeurs de base de notre couleur (RGB / hexadécimal) et le service s’occupe du reste. Il nous présentera ainsi les couleurs complémentaires (triade, tetrade, analogic, monotone…) en quelques secondes. Il suffira ensuite de récupérer le code hexadécimal de la couleur pour travailler dessus.
• Color Scheme Designer : Très populaire auprès des créatifs, ce service vous propose la même chose que le site précédent mais avec beaucoup plus de détails. Très interactif, l’outil vous permettra de jongler très facilement entre les différentes couleurs proposées. Seul bémol, il ne fonctionne que sur des valeurs hexadécimales.
• ColorBlender : Ce service est un peu différent des précédents dans la mesure où il va vous permettre de créer des palettes de couleur. Un peu moins accessible que les autres, il offre cependant plusieurs options d’export intéressantes pour récupérer facilement sa palette sur Photoshop ou Illustrator. Notons qu’il est également possible de recevoir toutes les valeurs RGB des couleurs de sa palette par mail.
• Infohound Color Schemer : Doté d’une interface à la fois très simple et très dépouillée, cet outil se concentre sur l’essentiel. On indique donc la valeur hexadécimale ou RGB de sa couleur et ce dernier nous présente immédiatement les couleurs complémentaires qui s’accorderont le mieux.
• Kuler : Un service bien pratique qui nous vient tout droit des laboratoires Adobe. Avec cet outil, on peut bien évidemment trouver très facilement des couleurs complémentaires mais on peut aussi accéder aux palettes réalisées par les autres utilisateurs du service. Très pratique lorsqu’on manque d’inspiration.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Merci à Sébastien pour l’info !

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

1. Ffranz

Un portfolio aux couleurs très épurées et doté d’une structure intéressante. Les colonnes mettent bien en valeur le contenu et j’ai particulièrement apprécié le système de compétences et son système de tooltips.

2. Danieldev

Un gros travail typographique a été réalisé pour ce portfolio. Là encore, les couleurs utilisées sont neutres, douces, le contraste parfait et on appréciera la carte du monde en fond fixe à droite.

3. Ammar Ceker

Un portfolio très minimaliste mais plutôt original de par son texte aligné à droite. On notera au passage le boulot qui a été fait sur la typographie ainsi que l’originalité du bouton Twitter.

4. James Charlick

Un gros coup de coeur que ce portfolio qui prouve bien que le Georgia peut être une chouette police à utiliser dans ses projets web. Simple, professionnel et efficace.

5. Dustin Walker

Ceux qui n’aiment pas le jQuery risquent d’être déçu. En effet, ce portfolio profite au maximum des possibilités de cette librairie. On appréciera tout particulièrement la navigation verticale et le chargement progressif des images.

6. 5 Squared

Encore un gros coup de coeur. Ce portfolio met l’accent sur l’essentiel, à savoir les réalisations de son auteur. Vraiment très soigné, très épuré et un chouette effet de rollover sur les images.

7. Marty Batten

Une ambiance un peu différente pour ce portfolio très sombre mais qui repose globalement sur le même principe que le précédent. L’accent est en effet mis sur les réalisations, et rien que sur les réalisations. En revanche, on remarquera le chouette effet de rollover sur les images qui change un peu de ce qu’on a l’habitude de voir.

8. Juan Ignacio Ruiz Echazu

Pour ce portfolio, tout repose sur le contraste. Typo sombre sur fond clair, typo clair sur fond sombre, le concepteur du site a merveilleusement bien joué sur ce paradoxe. Même chose, un gros boulot a été effectué sur les miniatures des dernières réalisations. On appréciera ainsi le diaporama, le rollover et le système de tooltips qui, utilisés conjointement, donnent un effet très intéressant.

9. Jeroen Homan

Un portfolio tout en typographie. Les différentes polices utilisées, leur couleur, le rendent unique. Un travail vraiment magnifique et un gros coup de coeur pour ce portfolio pas comme les autres.

10. Jonnotie

Simple et efficace, ce portfolio est vraiment très harmonieux. Tout suggère la douceur, des couleurs utilisées à la typographie du titre en passant par les icônes minimalistes qui vont droit à l’essentiel.

11. Made by Jordan

Encore un portfolio très minimaliste, très épuré. Le visuel est accrocheur, les dernières réalisations sont bien mises en valeur et on regrettera juste que le diaporama ne soit pas géré avec une librairie comme jQuery ou Mootools.

12. Fresh 01

Sans être complètement fan des couleurs utilisées, j’avoue que ce portfolio m’a quand même agréablement surpris. La barre de navigation fixe située en haut est intéressante et on appréciera tout particulièrement l’effet de défilement dans les ronds lorsqu’on décide d’aller en bas de page.

13. Ignaty Nikulin

Ce portfolio est intéressant à plus d’un titre. Le logo, déjà, très coloré et un poil rétro, est bien mis en valeur. Point positif, l’inclinaison de la charte offre un rendu intéressant, mis en valeur par les trois bulles qui ne cessent de bouger. Là encore, un gros coup de coeur.

14. Andrew Handley

Un portfolio très original, avec très peu de texte. L’univers graphique est assez particulier, on aime ou on aime pas, mais je me demande quand même si l’absence de texte est bon pour le référencement du site.

15. Steffan Haeberle

Voilà un portfolio à la fois très sobre et très classe. Là encore, un gros coup de coeur. On appréciera tout particulièrement le diaporama original et sa très chouette animation.

16. Arbel Design

Un portfolio très original que voilà, et peut-être même le plus original de cette sélection. Doté d’une ambiance visuelle très particulière, chacune de ses rubriques est en réalité un slide faisant partie d’un diaporama qui prend toute la page. Il fallait y penser.

17. TJ Todo

Une ambiance sombre pour ce chouette portfolio. Seul bémol, son concepteur a utilisé de nombreuses images pour son menu et son accroche. Ces derniers auraient facilement pu être réalisés en CSS, ce qui lui aurait permis d’optimiser son portfolio.

18. Thiago Leao

Un portfolio très minimaliste, construit autour du diaporama centrale. A noter que l’animation de ce dernier est très original.

19. Encantado

Une structure très claire pour ce portfolio sombre qui joue sur deux couleurs : le bleu et le vert. Le diaporama, très traditionnel, n’en reste pas moins percutant car bien contrasté avec le reste du site.

20. Indo Folio

Vous avez sans doute croisé ce portfolio au détour d’autres sélections et c’est bien compréhensible puisqu’il est tout simplement magnifique. L’ambiance visuelle est unique, on appréciera également les différents fonds fixes qui donnent un effet dynamique à la scène représentée lorsqu’on redimensionne la fenêtre.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Fonds d’écran – Photographies / Retouches

Fonds d’écran – Abstract

Fonds d’écran – Illustration

Fonds d’écran – Typographie

Fonds d’écran Geek Life

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Car en effet, la police d’écriture joue un rôle primordiale dans l’élaboration d’un projet web. Il suffit d’ailleurs souvent d’en changer pour s’en rendre compte. Certains polices d’écriture mettront en valeur le contenu présenté, d’autres auront tendance à lui porter préjudice.

Sauf que voilà, lorsqu’on souhaite tester différentes polices d’écriture dans son navigateur, il est nécessaire de modifier ses CSS et ça veut très vite prendre pas mal de temps pour peu qu’elles soient mal structurées. L’objectif de FontFriend, c’est justement de vous filer un coup de pouce en vous permettant de prévisualiser un site avec la police d’écriture de votre choix.

Concrètement, donc, FontFriend se présente comme un petit bookmarklet à ajouter à votre navigateur. Une fois que c’est fait, il vous suffit de vous rendre sur le site internet de votre choix (les pages locales fonctionnent aussi) et de cliquer dessus. Une fenêtre s’ouvrira alors et vous permettra de changer en quelques clics la police d’écriture utilisée ou encore sa taille et son style. Précisons qu’il est possible en outre de définir le sélecteur qui bénéficiera de ces modifications.

Globalement, FontFriend est un très bon service web 2.0 qui ne manquera sans doute pas de vous rendre de grands services.

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

jQuery, présentation de la bibliothèque

Avant de vous présenter jQuery et de vous parler de son histoire, il est préférable de commencer par le début et de vous expliquer ce qu’est une bibliothèque. Il s’agit d’un ensemble d’outils et d’instructions permettant le développement rapide d’applications. Constituée de différentes « briques », elle propose ainsi de nombreuses fonctions destinées à faciliter le travail du développeur. Un bon moyen de ne pas perdre son temps en tout codant de zéro.

Le jQuery est donc une bibliothèque Javascript, ce qui signifie qu’elle est entièrement dédiée à ce langage et qu’elle a pour objectif de simplifier l’utilisation de certaines commandes. En effet, l’avènement du Web 2.0 a donné lieu à une véritable révolution en matière de développement web. Les sites ne se contentent ainsi plus de présenter de l’information, ils se doivent en effet de proposer une interface riche et une expérience utilisateur améliorée. C’est ainsi que l’on a vu apparaître de véritables webwares (ou applications web) finalement très proches des fonctions proposées par un logiciel traditionnel.

Pour en finir avec cette courte présentation, on ajoutera simplement que jQuery a vu le jour en 2006.

jQuery, l’installation

Bien que le terme soit assez mal choisi (on installe un programme, pas une bibliothèque), le fait est que nous allons devoir commencer par intégrer jQuery à notre site pour pouvoir profiter de toutes ses possibilités. La procédure à suivre est relativement simple. Pour commencer, il est nécessaire de se rendre sur le site officiel, http://www.jquery.com, et de télécharger notre bibliothèque, soit en version complète, soit en version compressée. Précisons juste que la différence entre ces deux versions est assez simple : la version compressée, légère mais illisible, convient aux sites en production alors que la version complète, plus lourde mais plus claire, vous permettra de mieux comprendre comment les choses se passent.

Une fois le fichier téléchargé, nous allons devoir le lier à notre site. Pour se faire, dans le code source de votre site, entre les balise <head> et </head>, nous allons simplement ajouter la ligne suivante :

1

<script src="VOTRE_FICHIER.js" type="text/javascript" />

Précisons que tous vos scripts Javascript devront nécessairement se situer après cette ligne. Sans cela, ils ne seront pas correctement interprétés. De la même manière, assurez-vous que le chemin indiqué est correct.

Tutoriel jQuery : écrire le squelette de notre boîte d’onglets

La première étape de notre tutoriel est relativement simple puisque nous allons devoir commencer par créer le squelette de notre boîte d’onglets et donc définir sa structure HTML ainsi que ses CSS. Pour se faire, vous aurez besoin d’un minimum de connaissances en la matière.

Etape 1 : la structure HTML

Notre boîte d’onglets sera constituée de plusieurs éléments. Nous aurons tout d’abord une liste horizontale comprenant nos trois onglets dotés d’un ID unique. En dessous, nous aurons trois DIV portant chacun un ID unique aussi. Globalement, votre code devrait ressembler à ça :

1
2
3
4
5
6
7
8

<ul id="cap_nav">
<li id="tab_1" class="cap_onglet cap_active" title="content_1">Onglet 1</li>
<li id="tab_2" class="cap_onglet" title="content_2">Onglet 2</li>
<li id="tab_3" class="cap_onglet" title="content_3">Onglet 3</li>
</ul>
<div id="content_1" class="cap_content">Content 1</div>
<div id="content_2" class="cap_content">Content 2</div>
<div id="content_3" class="cap_content">Content 3</div>

Dans un premier temps, je vous recommande de ne pas faire de fioritures. Une fois que vous aurez vérifié le bon fonctionnement de votre boîte à onglets, vous pourrez commencer à les personnaliser. Avoir une structure simplifiée et épurée vous permettra de résoudre plus facilement les éventuels bogues que vous pourriez rencontrer.

Précisons également que tous nos onglets portent la classe « cap_onglet » mais que nous avons ajouté la classe « cap_active » au premier pour qu’il soit affiché par défaut.

Etape 2 : les CSS

Là encore, afin de conserver une certaine lisibilité (et donc vous faciliter les choses), le morceau de code qui suit ne comporte aucune fioriture, uniquement les propriétés indispensables pour que notre boîte d’onglets puisse fonctionner dans de bonnes conditions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.cap_onglet, .cap_active {
cursor : pointer;
display : block;
float : left;
}
 
.cap_onglet {
color:#863486;
}
 
.cap_active {
color : #fff;
}
 
div#content_2, div#content_3 {
display :none;
}

Plusieurs choses à signaler ici. En premier lieu, on va utiliser deux classes pour les onglets : la classe   ».cap_onglet » et la classe « .cap_active ». Ainsi, nous pourrons modifier l’apparence de l’onglet actif (sur Weedle, ce dernier est noir). Même chose, nous ajoutons la propriété « cursor:pointer » dans un souci d’accessibilité : en passant leur curseur sur nos onglets, les internautes verront qu’ils peuvent cliquer dessus.

Enfin, par défaut, nos DIV « content_2″ et « content_3″ sont masqués. Ce n’est pas le cas de « content_1″ car il est affiché par défaut.

Tutoriel jQuery : écrire le script qui animera l’ensemble

En l’état, notre boîte d’onglets est complètement figée. Si nous cliquons sur l’un de ces derniers, rien ne se passe. C’est normal, car il manque encore une dernière étape, la plus complexe pour les néophytes : le script. Il faudra bien entendu le copier entre les balise <head> et </head>, juste après la ligne qui appelle le fichier jQuery.

Afin de le rendre plus clair pour vous, je l’ai commenté et nous allons ensuite l’expliquer en détails.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script text="text/javascript">
$(document).ready(  function() {
    	// Lorsqu'on clique sur un onglet
        $("li.cap_onglet").click(   function () {
            // On les met tous en inactif
            $(".cap_active").removeClass("cap_active");
 
            // On met l'onglet cliqué en actif
            $(this).addClass("cap_active");
 
            // On cache toutes les boîtes de contenu
            $(".cap_content").slideUp();
 
            // On affiche la boîte de contenu liée à notre onglet
            var contenu_aff = $(this).attr("title");
            	$("#" + contenu_aff).slideDown();
        });
</script>

Dans un premier temps, on attend la fin du chargement de la page (ce qui correspond à la première ligne de notre script). Ensuite, on appelle tous les onglets possédant la classe « cap_onglet ». Les lignes qui suivent ne concerneront que ces derniers.

On commence par retirer la classe « cap_active » à tous les onglets, puis on l’ajoute à celui sur lequel on vient de cliquer afin de changer son apparence. On enchaine ensuite en cachant toutes les boîtes de contenu (c’est le fameux « slideUp ») et on termine en déroulant uniquement la boîte liée à l’onglet sur lequel on vient de cliquer (le « slideDown »).

Petite précision à ce sujet. Pour trouver la boîte de contenu liée à l’onglet cliqué, on passe par le contenu de la balise « title » de ce dernier. Si vous regardez attentivement notre structure HTML, vous pourrez remarquer que tous les onglets possèdent un « title » unique qui n’est autre que l’ID du DIV rattaché.

Et pour aller plus loin

En l’état, nos onglets fonctionnent parfaitement mais il reste encore beaucoup de choses à faire, notamment au niveau des CSS de chaque élément. J’aurais pu y consacrer une rubrique dans cet article mais j’ai préféré me concentrer sur l’essentiel et ce sera donc à vous de compléter ce point.

En revanche, jQuery propose de nombreux autres effets que le « slideUp » ou le « slideDown ». Si ces derniers ne vous conviennent pas, ou si vous souhaitez en expérimenter d’autres, il suffit de vous reporter à la liste du site officiel. Au passage, vous trouverez également à cette adresse une documentation complète pour aller un peu plus loin.

Bien évidemment, je ne manquerai pas de vous proposer d’autres tutoriels sur le sujet dans les semaines qui viennent. En tout cas, j’espère que celui-ci vous aidera à mieux comprendre le fonctionnement de la bibliothèque.

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.