lbsquat » Webdesign http://blog.lbsquat.com Graphisme web geek life... Wed, 28 Jul 2010 10:35:46 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Créer une galerie pour votre portfolio grâce à jQuery http://blog.lbsquat.com/creer-une-galerie-pour-votre-portfolio-grace-a-jquery http://blog.lbsquat.com/creer-une-galerie-pour-votre-portfolio-grace-a-jquery#comments Thu, 08 Apr 2010 08:20:19 +0000 lbsquat http://blog.lbsquat.com/?p=64 Voici un petit tutoriel enfin plutôt une compilation de différentes ressources jQuery qui va vous permettre de mettre en place un slider qui contiendra différentes vignettes animées qui laisseront apparaitre les informations que vous souhaiterez, y compris un bouton pour pouvoir afficher une image en grand, visible grâce à une lightbox.
Bien entendu tout est possible via les css, cette présentation n'est qu'un exemple.


Pour ce tutoriel vous aurez besoin de 3 choses:

Et puis aussi un éditeur de texte, perso je vous conseil quand même Notepad++

Dans l'archive que je vous propose en téléchargement il y a tout ce dont vous avez besoin il vous suffit donc de copier les différents dossiers / fichiers / images de la même façon que sur l'exemple mais faites bien attention aux urls qui appellent vos fichiers.

Démonstration Download

Voici pour les explications:

Le slider

Nous allons commencer par mettre en place le slider.

Pour cela ouvrez votre fichier index ou header (selon votre cas) et dans la balise head nous allons appeler les fichiers néccessaire au bon fonctionnement et copiez aussi le dossier images_slider à la racine de votre site.

la bibliothèque jQuery

  1. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>

les fichiers css et javascript

  1. <!--slideshow-->
  2. <link href="./slideshow.css" rel="stylesheet" type="text/css" />
  3. <script type="text/javascript" src="./js/slideshow.js"></script>

Et voilà vous avez les fichiers nécessaire pour afficher le slider.

Maintenant ouvrez le fichier ou vous voulez placer votre slider, et copier ceci

  1. <!-- Slideshow HTML -->
  2.   <div id="slideshow">
  3.     <div id="slidesContainer"> 
  4. <div class="slide">
  5.         <h2>Titre</h2>
  6.         <p>Le texte que vous voulez afficher</p>
  7.     <div class="boxgrid_link">
  8.     <a rel="clearbox[ gallery=photos,,slideshowtime=10 ]" href="./galerie/leaf.jpg" title="charger l'image">visualiser</a>
  9.     </div><!--/boxgrid_link-->
  10. </div><!--/slide-->
  11.                
  12.     </div><!--/slidescontainer-->
  13.   </div><!--/slideshow-->
  14. <!-- Slideshow HTML -->

L'attribut rel va servir dans l'appel de la lightbox et ce qui se trouve entre les crochets sera pour créer le diaporama mais on verra ça plus tard.

Là vous avez une miniature pour en ajouter il suffit de copier la div="slide" et tout ce qui est dedans et de coller en dessous ou au dessus de celle présente.

  1. <div class="slide">
  2.         <h2>Titre</h2>
  3.         <p>Le texte que vous voulez afficher</p>
  4.     <div class="boxgrid_link">
  5.     <a rel="clearbox[ gallery=webdesign,,slideshowtime=10 ]" href="./galerie/leaf.jpg" title="charger l'image">visualiser</a>
  6.     </div><!--/boxgrid_link-->
  7. </div><!--/slide-->

Maintenant on va passer au css pour donner forme à tout ça.
Créer une nouvelle feuille css et enregistré la à la racine de votre site en la nommant slideshow.css et collé ça dedans.

  1. #slideshow {
  2.         margin: 10px auto 0 auto;
  3.         width: 767px;
  4.         height: 365px;
  5.         background: transparent;
  6.         position: relative;
  7.         }
  8. #slideshow #slidesContainer {
  9.   margin: 0 auto;
  10.   padding: 0;
  11.   width: 687px;
  12.   height: 365px;
  13.   overflow: auto;
  14.   position: relative;
  15.         }
  16. #slideshow #slidesContainer .slide {
  17.   margin: 0 auto;
  18.   padding: 0;
  19.   width: 667px;
  20.   height: 365px;
  21.         }
  22. .slide img {
  23.         float: right;
  24.         margin: 0;
  25.         border: none;
  26.         }
  27. .slide p {
  28.         line-height: 1.5em;
  29.         margin: 0;
  30.         }
  31. .slide a {
  32.         color: #000;
  33.         font-weight: bold;
  34.         text-decoration: none;
  35.         padding: 0 0 2px 0;
  36.         border-bottom: 1px dotted #181818;
  37.         }
  38. .control {
  39.        display: block;
  40.        width: 39px;
  41.        height: 270px;
  42.        text-indent: -9999px;
  43.        position: absolute;
  44.        cursor: pointer;
  45.         }
  46. #navDiapo{
  47.         display: block;
  48.         width: 15px;
  49.         height: 16px;
  50.         position: absolute;
  51.         right: 25px;
  52.         bottom: 10px;
  53.         cursor: pointer;
  54.         }
  55. #leftControl {
  56.   top: 0;
  57.   left: 0;
  58.   background: transparent url(images_slideshow/control_left.png) no-repeat 0 0;
  59.         }
  60. #rightControl {
  61.   top: 0;
  62.   right: 0;
  63.   background: transparent url(images_slideshow/control_right.png) no-repeat 0 0;
  64.         }

Et voilà votre Slider est fait !!

Toute la documentation et les options disponible ici

Animation sur image

Maintenant on va donner un petit effet sympa à vos miniatures qui permettra de dévoiler les divers informations.
Dans votre fichier index on va appeler (toujours dans la balise head) le fichier boxgrid.css (on va voir ça juste en dessous) et mettre le javascript nécessaire au bon fonctionnement.

  1. <!--sliding boxes-->
  2. <link rel="stylesheet" type="text/css" href="./boxgrid.css" />
  3. <script type="text/javascript">
  4.                         $(document).ready(function(){
  5.                                 //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
  6.                                 //Horizontal Sliding
  7.                                 $('.boxgrid.slideright').hover(function(){
  8.                                         $(".cover", this).stop().animate({left:'180px'},{queue:false,duration:300});
  9.                                 }, function() {
  10.                                         $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
  11.                                 });
  12.                         });
  13. </script>

Et pour le css il vous suffit de coller ça dans une nouvelle feuille nommée boxgrid.css et enregistrée la à la racine de votre site.

  1. .boxgrid{
  2.         width: 180px;
  3.         height: 90px;
  4.         font-family: Verdana, sans-serif;       
  5.         margin: 4px 22px;
  6.         float:left;
  7.         background: #f3f3f3;
  8.         border: solid 1px #aaa;
  9.         overflow: hidden;
  10.         position: relative;
  11.         }
  12. .boxgrid h3 {
  13.         font-size: 12px;
  14.         font-weight: bold;
  15.         padding: 2px 2px 0 2px;
  16.         }
  17. .boxgrid  img{
  18.         position: absolute;
  19.         top: 0;
  20.         left: 0;
  21.         border: 0;
  22.         }
  23. .boxgrid p{
  24.         font-size: 10px;
  25.         padding: 2px 2px 0 2px;
  26.         margin: 0 0 2px 0;
  27.         color:#404040;
  28.         }
  29. .boxgrid_link {
  30.         margin: 0 5px 0 0;
  31.         }
  32. .boxgrid a {
  33.         width: 15px;
  34.         height: 13px;
  35.         display: block;
  36.         text-indent: -9999px;
  37.         text-decoration: none;
  38.         float: right;
  39.         background: transparent url("images_slider/preview.png") no-repeat top;
  40.         }
Toute la documentation et les options disponible ici

Et voilà l'animation est bonne !!

L'affichage de vos images via clearbox3

Cela va vous permettre d'afficher votre image en grand et en plus en toute beauté !! Dans cette galerie on va opter pour un diaporama histoire d'avoir une navigation plus sympa.
Clearbox3 est pour moi la meilleur des lightbox (que je connaisse) pleins d'options sont disponible et très pratique, vous verrez !!

Copiez le dossier clearbox ainsi que le fichier clearbox.js dans votre dossier js.

Dans votre fichier index et entre la balise head

  1. <!--clearbox-->
  2. <script src="./js/clearbox.js" type="text/javascript"></script>
  3. <script src="./js/clearbox.js?config=myconfig" type="text/javascript"></script>

Pour en revenir à la fonction diaporama, en fait il suffit donc de rajouter l'attribut

  1. rel=""

Puis clearbox

  1. rel="clearbox"

Définir un nom pour la galerie ce qui aura pour effet d'afficher toutes les images comportant ce nom de galerie

  1. rel="clearbox[ gallery=photos ]"

Et maintenant le timing du diaporama, soit 10 secondes

  1. rel="clearbox[ gallery=photos,,slideshowtime=10 ]"

Et voilà pour l'affichage de vos images.

Toute la documentation et les options disponible ici

Bon bah c'est fini !!

Démonstration Download

J'espère que tout est assez clair si toutefois vous avez des soucis n'hésitez pas à le signaler dans les commentaires ;)

]]> http://blog.lbsquat.com/creer-une-galerie-pour-votre-portfolio-grace-a-jquery/feed 3 29 webdesigns très nature http://blog.lbsquat.com/29-webdesigns-tres-nature http://blog.lbsquat.com/29-webdesigns-tres-nature#comments Thu, 01 Apr 2010 20:28:28 +0000 lbsquat http://blog.lbsquat.com/?p=62 Voiçi une petite sélection de webdesigns venant de Deviantart sur le thème de la "nature", ouais j'suis vert en ce moment ^^


imagine_air by mindfuckx
imagine_air

fairy by detrans
fairy

great_pakistan by naseemhaider
great_pakistan

book_store by downsign
book_store

my_portfolio by sencerbugrahan
my_portfolio

kenrico_redone by juliusx
kenrico_redone

designers_weblog by harm-less
designers_weblog

renueva_consultores by sogaso
renueva_consultores

designers_junior by fictionfourtyfour
designers_junior

kindergarten by phil-sn
kindergarten

pro_bass_tours by loveinjected
pro_bass_tours

path by crazyclouds
path

waterfall by coloformia
waterfall

v5 website by v5design
v5_website

gamer portfolio by princepal
gamerfolio

AVG blog by antoniavg
avgblog

bakalland by t3t5uo
bakalland

buntzel muehle by carl06
buntzel_muehle

honduras guia by eamejia
honduras_guia

ruonis by kntz
ruonis

furniture makers by VictoryDesign
furniture_makers

papugi by sinvar
papugi

eastern drilling by nas-wd
eastern_drilling

mint magazine by lumberpack
mintmagazine

ridge agency by cryogenicdreams
ridge_agency

villaggio by ducoradini
villaggio

pixelzeesh by pixelzeesh
pixelzeesh

wlt city v2 by hkgood
wlt_city_v2

cute creations by cute creations
cute_creations

Que l'inspiration vous soit verte !! :lol:

]]> http://blog.lbsquat.com/29-webdesigns-tres-nature/feed 4 Après le blog le portfolio aussi subit son lifting http://blog.lbsquat.com/apres-le-blog-le-portfolio-aussi-subit-son-lifting http://blog.lbsquat.com/apres-le-blog-le-portfolio-aussi-subit-son-lifting#comments Wed, 31 Mar 2010 08:25:21 +0000 lbsquat http://blog.lbsquat.com/?p=63 Et oui c'est également le printemps pour mon portfolio, maintenant il est aussi "nature". Pour cette nouvelle version j'ai opté pour un site "à l'horizontal", certains diront, c'est bien ça change, d'autres diront qu'un site horizontal c'est pas bien... moi j'ai juste voulu tester (c'est mon premier) et puis en même temps je trouve ça sympa !!


Bon concernant les petites choses que j'ai utilisé, il y a:

http://portfolio.lbsquat.com ou ici pour une prévisualisation
]]> http://blog.lbsquat.com/apres-le-blog-le-portfolio-aussi-subit-son-lifting/feed 7 Tutoriels Photoshop #2: 15 tutos pour réaliser un design de site http://blog.lbsquat.com/tutoriels-photoshop-3-6-superbes-tutos-de-site-web http://blog.lbsquat.com/tutoriels-photoshop-3-6-superbes-tutos-de-site-web#comments Thu, 17 Dec 2009 12:31:48 +0000 lbsquat http://blog.lbsquat.com/?p=43 Voici une sélection de différents tutoriels Photoshop sur la conception d'un design de site web.

How to Make a Highly-Textured Site Layout in Photoshop
wood_website

Create a Watercolor-Themed Website Design with Photoshop
watercolor_webdesign

Design an amazing 3d hosting layout
grafpedia

Create a Promotional iPhone App Site in Photoshop
i_love_my_apps

Cloud9 Web Design Layout
clouds_design

Design a Clean Portfolio Website Layout in Photoshop
ourtuts

How to Make a Creative Blog Layout
grafpedia_blog

How To Create a Clean and Colorful Web Layout – Photoshop Tutorial
griminati

How to Create a Unique Wordpress Theme
grafpedia_wptheme

Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!
manilla

Wordpress Layout #6
wordpress

How to Create a Unique Colorful Site Layout
tourwebsite

Theatre: design an elegant, dark portfolio site
tutsarena

Business Layout #6
yourbusiness

Design a Clean and Colorful Portfolio in Photoshop
osdesigner

]]> http://blog.lbsquat.com/tutoriels-photoshop-3-6-superbes-tutos-de-site-web/feed 0 lewebdefi.com les résultats du concours #1 http://blog.lbsquat.com/lewebdefi-com-les-resultats-du-concours-1 http://blog.lbsquat.com/lewebdefi-com-les-resultats-du-concours-1#comments Fri, 11 Dec 2009 20:51:36 +0000 lbsquat http://blog.lbsquat.com/?p=33 Et voilà les résultats du premier concours lewebdefi.com

51 designs ont été envoyés à cette première édition qui consistait donc à créer le design de la page d'accueil du site organisateur en n'oubliant surtout pas d'insérer les 3 objets imposés, pour l'occasion c'était une chaussure, une boite d'allumettes et une main gauche. J'avais participé au concours avec ce design et j'ai pas gagner :lol: .

Voici donc les résultats:

Le vainqueur:

Windels
01

Les coups de coeur:

Raphaël Beau
02

Romain
03

Anthony Huynh
04

Simon Fayolle
05

Et félicitation à tout les participants!!!
Rendez-vous au mois de janvier pour la deuxième édition.

Liens

Voir les commentaires du jury
lewebdefi.com

]]> http://blog.lbsquat.com/lewebdefi-com-les-resultats-du-concours-1/feed 2 Mon portfolio se paye un nouveau design!! http://blog.lbsquat.com/mon-portfolio-se-paye-un-nouveau-design http://blog.lbsquat.com/mon-portfolio-se-paye-un-nouveau-design#comments Thu, 10 Dec 2009 18:35:19 +0000 lbsquat http://blog.lbsquat.com/?p=35 L'ancien design ne me plaisait plus vraiment et c'est donc tout naturellement que je me suis penché sur Photoshop puis sur Notepad++ pour m'en refaire un nouveau, et ouais je suis addict!!

Au début j'ai opté pour un défilement horizontal, l'occasion de réaliser le premier et puis l'idée est sympa même si elle n'est pas appréciée par tout le monde. Et puis là..., trouble d'inspiration, problème d'organisation, j'ai finalement oublié l'idée peut être pour mieux y revenir et j'ai décidé de rester conventionnel en revenant sur un bon vieux défilement vertical c'était peut être pas la meilleure idée :/ .

Ce portfolio tient sur une seule page, la navigation se fait grâce à des ancres (avec l'utilisation de SmoothScroll), concernant la galerie j'ai utilisé clearbox3 (comme d'hab!!) pour afficher les images, je trouve cette lightbox vraiment très facile à utiliser et en plus elle dispose de pas mal d'options très utile :love: .

Vous avez les liens en dessous ;)

Liens

Visualiser une capture d'écran
Visiter mon portfolio >> http://portfolio.lbsquat.com

]]> http://blog.lbsquat.com/mon-portfolio-se-paye-un-nouveau-design/feed 0 Un nouveau concours sur le web: lewebdefi!! http://blog.lbsquat.com/un-nouveau-concours-sur-le-web-lewebdefi http://blog.lbsquat.com/un-nouveau-concours-sur-le-web-lewebdefi#comments Fri, 04 Dec 2009 19:04:47 +0000 lbsquat http://blog.lbsquat.com/?p=34 Qu'est-ce que ce nouveau concours??? tout simplement un petit concours vraiment très sympathique à l'initiative d'une agence web canadienne, OLA agence interactive et en partenariat avec WebDesignMag.
Ce concours consiste à (re)réaliser la page d'accueil du site organisateur mais bien entendu avec quelques règles à respecter, normal, non??


La principale règle réside dans le slogan "3 objets pour 1 site" c'est à dire 3 objets imposés qui devront apparaitre sur le design, et pour le reste c'est en dessous:

* Votre site doit être conçu pour une résolution minimale de 1024 x 768, mais doit sembler sexy même en 1920 x 1200.
* Vous devez concevoir votre site à partir des 3 objets du mois et seulement ces 3 objets. Vous pouvez toutefois utiliser des aplats de couleurs et diverses typos pour appuyer votre design. Nous devons également y retrouver tous les éléments du site web (logo, navigation, icônes réseaux sociaux, crédit OLA et le contenu) qu’il vous faut adapter à votre concept.
* 1 image en format .jpg est nécessaire pour soumettre votre concept : la page d'accueil du site de Web Défi.
* Utilisez le mode de couleurs RGB en 72ppp... C'est le W-E-B défi!
* Vous élaborez un site qui serait programmé en HTML/CSS, et non pas en flash.
* Pensez ergonomie!

Concernant les lots, et oui on peut gagner quelque chose!!! Pour le vainqueur il y a un prix de 500$ usd et une parution sur le blog du partenaire. Un coup de coeur sera aussi élu. Comme vous pouvez vous en douter j'ai tenté ma chance avec ce design, et oui pourquoi pas, en sachant qu'il fallait respecter la liste des 3 objets qui était: une chaussure, une boite d'allumettes et une main gauche:

concours lewebdefi

Malheureusement je suis en grand retard sur la présentation de ce concours car il est déjà terminé... mais en fait il ne fait que commencer car c'est la première édition, lewebdéfi recommence à partir de Janvier 2010, alors rendez-vous pour le prochain!!! :)

Liens

lewebdefi.com

]]> http://blog.lbsquat.com/un-nouveau-concours-sur-le-web-lewebdefi/feed 0 Webdesign #1: 14 coups de coeur http://blog.lbsquat.com/webdesign-1-14-coups-de-coeur http://blog.lbsquat.com/webdesign-1-14-coups-de-coeur#comments Sat, 28 Nov 2009 15:49:44 +0000 lbsquat http://blog.lbsquat.com/?p=25 Voici ma première sélection de webdesigns que je trouve tout particulièrement bien réussi, une bonne source d'inspiration.

frenzylabs

momandpopcorn

the_shark_lab

dawghouse

justbcoz

lemonstandapp

84colors

piipeonline

mathieufurnon

showandtellsale

abductionlamp

floridflourish

matt_mullenweg

dna

]]> http://blog.lbsquat.com/webdesign-1-14-coups-de-coeur/feed 1 lbsquat.com, nouveau look!! http://blog.lbsquat.com/lbsquat-com-nouveau-look http://blog.lbsquat.com/lbsquat-com-nouveau-look#comments Sat, 28 Nov 2009 15:16:14 +0000 lbsquat http://blog.lbsquat.com/?p=29 Voici la nouvelle version de l'accueil de lbsquat.com :)
Rien de bien compliqué et étant donné que c'est un "accueil" il n'y a qu'une page avec juste un soupçon de .js ^^


Juste parce que je trouvais l'ancien vraiment pas au top (voir ci-dessous)

Liens

Ancien design

Côté design c'est pas l'explosion de couleurs étant donné que je voulais quelque chose de sobre et plutôt dans le foncé. En ce qui concerne le reste j'ai utilisé clearbox3 pour l'affichage du texte (cliquer sur le bouton welcome) easyTooltip pour les info-bulles et enfin la méthode de "Image Swapping" pour les bulles du milieu (aext.net).

C'est quand même mieux comme ça... non??

ps: Si vous constatez des trucs bizarres dans l'affichage de votre navigateur merci de m'en informer ;)

Liens

lbsquat.com
Voir l'image

]]> http://blog.lbsquat.com/lbsquat-com-nouveau-look/feed 0