Pimeo.fr » Tutoriaux

Timthumb : générez vos miniatures à la volée

pimeo — Wed, 17 Aug 2011 23:14:09 +0000

Je viens tout juste d’apprendre sur le site binarymoon que la version 2 de TimThumb était disponible sur les serveurs de google. Des corrections de bugs importantes et quelques nouveautés!

Timthumb, un nom plutôt cool en apparence, mais c’est un script php très utile qui a conquis des millions de fans. Peut-être en avez vous déjà entendu parler ? Ce script est surtout connu pour son implémentation dans les thèmes WordPress (pouvoir générer autant de miniatures que de dimensions souhaitées), mais il peut très bien être intégré à un site quelconque qui utilise du langage php.

oui oui mais que fait-il ?

Comme décrit dans la petite vignette ci-dessus (il faut avoir l’oeil!), il permet de générer des miniatures à la volée d’une quelconque image, à partir d’une requête http, et il enregistre le tout dans un répertoire nommé cache, ce qui lui évitera de refaire appel une nouvelle fois à son script si une miniature de mêmes dimensions et de mêmes caractéristiques a déjà été générée!



http://www.toto.com/timthumb.php?src=http://www.toto.com/images/image1.jpg&h=200&w=100&q=100

La requête ci-dessus va récupérer 4 paramètres (GET) :

src : le paramètre le plus important : c’est celui qui définit l’url de l’image. Les images peuvent être soit en interne (images propres à son site), soit en externe (images provenant d’autres sites).
h : définit la hauteur (height) de la miniature (en pixel).
w : définit la largeur (width) de la miniature (en pixel).
q: définit le taux de compression de la future miniature (quality). Si il est a 100, cela signifie qu’aucune compression ne sera effectuée à la miniature.

Petite note : ce script utilise du curl pour réafficher l’image une fois qu’elle a été créée. Un article en parle sur Pimeo!

J’hésitais à créer toute une page de démonstrations, mais je ne pouvais pas égaler les exemples de son concepteur! Donc je vous affiche les différents liens vers ces exemples ainsi qu’une petite mise en bouche de ce que vous pourrez y trouver!

Démonstration #1 : Quelques exemples basiques
http://www.binarymoon.co.uk/demo/timthumb-basic/

Démonstration #2 : Génération et redimensionnement de miniatures à partir d’images externes.
http://www.binarymoon.co.uk/demo/timthumb-external/

Démonstration #3 : Quelques exemples de filtrages couleur et d’ajout d’ombres
http://www.binarymoon.co.uk/demo/timthumb-filters/

Démonstration #4 : Exemples avancés de recadrage (croppage) de miniatures
http://www.binarymoon.co.uk/demo/timthumb-cropping/

Démonstration #5 : Pour avoir des miniatures parfaites c’est ici!
http://www.binarymoon.co.uk/demo/timthumb-zoom-crop/

Note importante pour les utilisateurs de WordPress et pour les personnes qui utilisent ce script pour leur(s) site(s):

Une version 2 est sortie il y a maintenant quelques jours, suite à un problème de sécurité. Cette nouvelle version, totalement réécrite (en POO), a pour but d’éviter toute injection de fichiers ou de codes frauduleux. Pour celles et ceux qui utilisent ce script, il est nécessaire de le mettre à jour!

Extrait de l’article (en anglais) :

» TimThumb 2.0 is a total, ground up, rewrite – written with security in mind from the start. There have been a whole heap of improvements to security making this the strongest TimThumb release ever. In addition the code has been remade in an object oriented fashion, and there have been some new features added that will hopefully make the script even more popular than before.
If you hadn’t guessed already this update is a required one. »

Vous pouvez désormais télécharger le script Timthumb à partir de Google Codes.

Images : Images libres de droit trouvées sur sxc.hu

Des fautes de frappe ou d’orthographe? Une critique ? Une suggestion ?
N’hésitez pas à laisser un commentaire!

hébergement : alternative à la fonction php file_get_contents

pimeo — Mon, 15 Aug 2011 04:49:11 +0000

Cette fonction donne du fil à retordre pour les développeurs php. Beaucoup d’hébergeurs comme 1and1 bloquent cette fonction pour éviter une quelconque attaque. Manuel php.net : file_get_contents — Lit tout un fichier dans une chaîne.

En gros, grâce à cette fonction, nous pouvons lire un fichier à partir d’une url. Celle-ci peut être très utile pour générer des miniatures et les afficher par la suite. Mais son plus gros problème est qu’elle n’est pas trop appréciée des hébergements, car on pourrait facilement la détourner de son but principal afin d’usurper du contenu sans autorisation.

Pour infos : voici un topic qui en parle

Il existe plusieurs façons de débloquer cette fonction auprès des hébergeurs, mais une doit retenir votre attention.

La première consiste à débloquer l’option de configuration allow_url_fopen.

Sa définition (très claire!) : Cette option active les versions étendues des fonctions d’accès aux fichiers, qui savent exploiter les URL. Les extensions par défaut permettent d’accéder aux fichiers distants avec les protocoles FTP ou HTTP. Certaines extensions comme zlib, peuvent ajouter d’autres fonctionnalités.

Vous pouvez soit la mettre en début de votre fichier php, ou alors dans un fichier php.ini.

// DEBUT D'UN FICHIER PHP
ini_set('allow_url_fopen', 'On');
// DEBUT DU FICHIER INI.PHP
allow_url_fopen = On

Grâce a cette petite astuce, la fonction file_get_contents devrait fonctionner, mais pour combien de temps. Sur la plupart de mes projets, j’utilisais cette fonction, mais elle est pour ma part trop instable. Beaucoup d’hébergeurs n’aiment pas trop que l’on ajoute des fichier de configuration en ( extension ini). On pourrait par exemple autoriser d’autres options bêtement comme register_globals mais quand on navigue un peu sur la toile, on peut remarquer que cette option est à proscrire!

Donc voyons un moyen d’obtenir le même rendu avec quelques lignes de codes différentes! Nous allons pour ce faire utiliser les fonctions de la librairie curl (si vous avez de la chance, cette librairie est incluse dans php). Curl permet de faire beaucoup de choses vachement cool comme récupérer des fichiers xml et afficher un flux RSS d’un site blog sur son site, ou encore de communiquer entre plusieurs serveurs, par le biais de protocoles comme HTTP, FTP ou encore FILE.

Par défaut, elle est désactivée sur les serveurs locaux : Pour l’activer -> (menu wampserver) -> PHP -> Extensions PHP -> (si extension php_curl décoché, cliquez dessus)

Appliquons-le à notre exemple :

// On sait que notre script affichera une image donc on définit les bons en-têtes
header('Content-type:image/jpg');

// Un exemple d'une variable contenant l'url d'une miniature que nous venons de créer (je vous passe le traitement)
$urlThumb = 'http://www.pimeo.fr/dossier1/images/thumb/toto_230x50.jpg';

// Pour commencer nous initialisons une connexion
$ch = curl_init();

// Nous lui demandons de retourner le resultat dans une variable que nous définirons plus bas.
// au lieu de l'afficher directement dans le navigateur
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

// on lui définit une url (celle de l'url de la miniature)
curl_setopt($ch, CURLOPT_URL, $urlThumb);

// on exécute la requete curl que l'on retourne dans notre variable $data
$data = curl_exec($ch);

// on affiche enfin le résultat de cette variable
echo $data;

Et hop, plus besoin de la fonction file_get_contents. Bien entendu il faut se renseigner à l’avance si la librairie libcurl est activée sur votre hébergeur! 2 façons de le savoir :

1. Utiliser la fonction phpinfo();
2. Faire un petit test en php

// Condition si la méthode curl_init fonctionne : retourne un booléen
if(function_exists('curl_init')){
//si oui on effectue le traitement
echo 'ma fonction curl existe! je suis sauvé!';

// .... traitements
}
else{
//sinon elle n'existe pas sur le serveur
echo 'curl n\'est pas disonible sur mon serveur... je suis perdu!';
}

Documentation de la librairie curl
Des fautes de frappe ou d’orthographe? Une critique ? Une suggestion ?
N’hésitez pas à laisser un commentaire!

Plugin Jquery : QapTcha

pimeo — Tue, 22 Mar 2011 18:01:16 +0000

Serait-ce bientôt une révolution dans la manière de valider un formulaire ? QapTcha, un plugin jQuery, permet de remplacer les captcha par un système de bouton, qui en le slidant, activer le bouton de soumission du formulaire.

Un quoi ?

Tout d’abord, qu’est-ce qu’un captcha ? ce sont ces petites images, qui comportent des lettres et/ou des chiffres, et permettent de différencier un humain d’un ordinateur (source : Wikipédia).

A quoi sert vraiment un captcha ?

Sur le net, il existe énormément de scripts automatisés qui spamment les systèmes de commentaire. Ils contrent les scripts, remplissent les champs automatiquement et les valident. Plus un site est référencé, plus il est susceptible d’avoir un nombre affolant de spams! Hors, lorsqu’un captcha est ajouté, une machine est incapable de le retranscrire, puisque c’est une image. La seule façon est donc de lire ces images, et de les reproduire dans un champ texte pour valider le formulaire. Seul un humain est capable de faire cela, mais voilà, quand le captcha est difficile à lire, ou trop long, ce n’est pas forcément motivant d’ajouter un commentaire.

Pour contrer ce problème et rendre une validation de formulaire plus interactive (nous sommes aussi des fainéants!), le plugin QapTcha peut être une alternative.

En quoi consiste ce plugin ?

Peu de choses changent! Pour un formulaire de commentaire par exemple, vous écrivez vos informations et votre message dans des champs de texte. Pour l’envoyer au serveur, il vous suffira de slider un bouton, qui activera le bouton de soumission. Vous n’avez plus qu’à cliquer dessus pour enregistrer votre commentaire. Gain de rapidité et surtout de réflexion!

Comment savoir si les robots ne spammeront pas ?

Oui, mais le problème, comme je l’ai dis précédemment, c’est que les robots désactivent les scripts. Depuis la venue des frameworks javascripts comme jQuery ou MooTools, l’utilisation du langage javascript ( validation, notifications, système d’upload de fichiers, liens interactifs..) s’est démocratisée. Cenpendant , il est possible de les désactiver à partir du navigateur, ce qui désactive toutes les fonctionnalités en rapport avec javascript. C’est pour cela qu’il faut toujours effectuer des vérifications côté client (javascript), mais surtout côté serveur (php, mysql). Utilisez donc ces frameworks à bon escient et pensez toujours à la sécurité.

Sans plus attendre, je vous conseille d’aller voir le site internet du créateur de ce script, qui se nomme myjqueryplugins, où vous trouverez plus de documentation, ainsi que d’autres scripts utiles.

Comment QapTcha peut-il contrer ce problème ?

Le plugin utilise du javascript, mais aussi du php. En effet, lorsque l’uitlisateur déverouille le bouton de soumission, le script effectue une requête en ajax en utilisant la méthode POST. L’action est vérifiée dans un fichier php. Une variable de session iQaptcha est instanciée et prend la valeur vrai ou faux selon l’existence ou non d’une erreur. Un champ de texte caché prend aussi pour valeur une chaîne de caractères aléatoires, définie par le script QapTcha.jquery.js.

A la présence de ces deux variables, on peut dès lors définir qu’un humain et non pas un script automatisé, a effectué le slide du bouton. Et le bouton d’envoi devient cliquable.

A noter que si un navigateur désactive son javascript, il est tout de même impossible d’ajouter un commentaire.

Comment vérifier que tout fonctionne sans javascript ?

Rien de tel que de tester :

Tout d’abord, allez sur la page de démonstration :

Si vous êtes sur Chrome ou sur Firefox, ouvrez la console de débogage et accédez au code du bouton de soumission. Vous devriez voir cela :

Supprimez disabled= et vous obtiendrez ceci :

En ayant supprimé ce morceau de code, le bouton de soumission devient comme par magie actif! Cliquez dès à présent dessus et regardez la notification. Faites de même en réactualisant la page, en slidant le bouton, et en cliquant sur le bouton de soumission. Le résultat de la notification est différente.

Présentation, documentation et téléchargement du script : QapTcha.

Des mots et encore des mots.. Passons aux choses sérieuses et Testez à présent la démonstration!

Des fautes de frappe ou d’orthographe? Une critique ? Une suggestion ?
N’hésitez pas à laisser un commentaire!

Plugin Jquery : Autoclear

pimeo — Fri, 04 Feb 2011 12:31:40 +0000

Autoclear est un petit plugin jQuery tres utile afficher ou cacher le contenu d’un champ de texte.

Plus d’aide sur :

Pour comprendre un peu son utilité et sa simplicité, je vous montre ici deux formulaires : le premier possède une fonction javascript avec le framework jQuery, mais sans utiliser Autoclear. Le second formulaire utilise aussi le framework jQuery, mais la fonction Autoclear gère automatiquement les champs.

Démonstration

Le plugin peut-être personnalisable sur le site officiel de Matt Lunn, le concepteur de ce plugin.

Des fautes de frappe ou d’orthographe? Une critique ? Une suggestion ?
N’hésitez pas à laisser un commentaire!

Vectoriser et Colorer le héro Flash

pimeo — Tue, 16 Nov 2010 21:27:41 +0000

Apprenez à vectoriser, puis à coloriser le super-héro Flash avec Fabian sous Illustrator.

Un nouveau tutoriel est de retour! Mais cette fois-ci, il n’est pas de moi mais de Fabian (ou Fab pour les intimes!). Il vous propose aujourd’hui de bons conseils sur la vectorisation et la colorisation du fameux super héro Flash sous Illustrator.

Fabian est actuellement en deuxième année d’SRC. Il aime le dessin, les mangas, les bandes dessinées et bien entendu, Adobe Illustrator! Je tiens à le remercier pour ce tutoriel, qui est pour lui son premier sur pimeo.fr.

Sommaire

1. Vectorisation dynamique
2. Préparation de la colorisation
3. La colorisation
4. Rendu final

Cette image provient du site internet de Francis Manapul et a été admirée sur le site d’Abduzeedo.

Passons au vif du sujet : La vectorisation d’une image en noir et blanc, puis sa colorisation (Tintintiiiiin !)

Tout d’abord, choisissons une image pas trop compliquée pour l’exemple. On peut voir que les différentes teintes de ce dessin sont bien définies ce qui rendra la vectorisation bien plus exacte. Copiez-collez l’image sur votre espace de travail Illustrator.

1. VECTORISATION DYNAMIQUE

Cliquez sur l’image, et il apparaît alors un menu spécial, juste en dessous de la barre de menu habituelle. Choisissez « Live Trace » et cliquez sur la petite flèche pour choisir les options suivantes :

Ici, utilisez le mode Black and White (vu que c’est une image en noir et blanc) et jouez avec la barre de « Treshold » pour trouver un rapport entre le noir et le blanc qui vous convient.
(En ce qui me concerne, pour cette fois, je l’ai mis a environ 200, mais cela dépend vraiment de l’image)
Conseil : cochez la case preview qui vous permettra de jauger plus facilement l’isohélie (treshold en anglais).

Quand cela vous convient, Appuyez sur « Trace », puis sur « Expand » pour enfin transformer l’image en données vectorielles.

Pensez à dégrouper le tout (Ctrl+Maj+G) pour séparer le tracé (en noir) et le fond (en blanc).

Pensez à séparer votre œuvre sur plusieurs calques ! C’est bien plus pratique pour s’y retrouver, pour vous, et pour les autres.

Conseil : Sauvegardez souvent votre travail! Un petit Ctrl+S, ça fait de mal à personne, et ça peut sauver des vies (la vôtre, quand vous verrez votre œuvre peaufinée pendant plusieurs heures disparaître dans les limbes insondables de l’informatique, après un bug d’Adobe [Merci Adobe]).

2. PREPARATION DE LA COLORISATION

A présent, on va séparer les formes et les contours. Grossomodo, le noir et le blanc.

Pour pas s’embêter a sélectionner CHAQUE tracé, il suffit d’utiliser cette méthode :
Select > Same > Fill Color, ce qui permet de sélectionner tous les objets avec la même couleur.

Attention : il faut au préalable avoir sélectionné un objet, sinon, ça ne marche pas (étrange non ?).

On créé un nouveau calque, on le nomme « Tracé », et on le place tout en haut de la pile de calques. Puis on déplace les éléments sélectionnés (le noir) sur ce calque, et on le verrouille.

Logiquement, on ne devrait plus avoir besoin d’y toucher. Nommez l’autre calque (celui où il reste les formes, le blanc quoi) « Couleur ».

Pour mieux se rendre compte des formes qu’il y a, j’ai pris l’habitude de faire un Ctrl+A pour sélectionner toute les formes blanches (le calque Tracé doit être locké) et de changer la couleur en une qui ne sera pas utilisée dans la colorisation. Un violet dégueux, un vert clair, essayez juste de ne pas prendre une couleur qui explose les yeux, car vous allez la voir un moment celle-là …

A quoi ça sert ? Simple, juste a visualiser quelle forme sont colorées, et quelles formes il reste à colorer. Ça évite les oublis!

Note : Il se peut qu’après la vectorisation dynamique, l’image soit en Grayscale (niveau de gris).

Il suffit d’aller à droite dans la palette de couleurs et de le remettre en RVB ou CMJN. Le format dépend de ce que vous voulez faire de cette image :
RVB : Publications web.
CMJN : Affiches, print.

Voilà, vous êtes fin prêt à débuter la colorisation (Tintintintiiiiin !)

3. LA COLORISATION

Voilà, on y est enfin. Je sens votre cœur palpiter et vos doigts s’agiter fébrilement sur votre souris : Cette fois, c’est parti !

Je plaisante, il reste une petite chose à faire pour que votre super-héro soit réaliste :

Quelle couleur utilise-t-on ? Du rouge et du jaune non ? Ouais, mais lequel ? Un simple clic sur la palette des couleurs vous donne un aperçu du nombre titanesque de teintes différentes pour une seule couleur. Je vous invite donc à faire une mini-recherche Google pour vous documenter un peu sur les couleurs qui sont utilisées.

Quelques sites pour trouver des palettes de couleur :

- Adobe Kuler : site internet full flash qui vous propose des milliers de gammes de couleurs! Vous y trouverez forcément votre bonheur!

- Colourlovers :site internet qui vous propose des couleurs, des gammes, et même de définir une gamme de couleurs en fonction d’une image. Ce site n’est pas en flash

Hop, un petit copier-coller de deux trois images triées sur le volet, on les met sur un autre calque et voilà..

Après, un petit coup de pipette et votre palette de couleur est remplie.
(Pour utiliser la pipette, on clique sur la couleur qu’on veut sur l’image, et ensuite, il suffit de déplacer cette couleur de votre carré de couleur, à votre palette : voir l’image ci-dessous).

MAINTENANT, on peut commencer ! Sauf que directement, Paf, on a un souci… une des formes (celle du torse) et vraiment énorme, et lui appliquer plusieurs couleurs n’est pas possible. Il faut donc la découper.

Créez un nouveau calque (par habitude, je l’appelle « isol » ce qui représente assez bien son but). Il va en effet servir à isoler une forme, pour la découper sans être gêné par les autres formes.

Pour le découper, on utilisera le pathFinder, et une fonction peu connue, qui se trouve dans Object > Path > Divide Objects Below (diviser les objets inferieurs).

Cette fonction permet à un tracé sélectionné de découper une forme. Elle nécessite un peu de temps pour parfaitement la comprendre, mais c’est une option vraiment tres utile ! Un exemple ?

En utilisant cette méthode, on découpe, redécoupe, et re-redécoupe les forme jusqu’à ce que cela nous convienne. Pour les membres non finis découpez grossièrement la partie sans contour, nous verrons plus tard comment bien l’arranger

Après quelques découpes, et un coloriage rapide (avec une telle image, même pas besoin de s’ennuyer a faire des ombrages compliqués pour lui donner du dynamisme), voici ce que ça peut nous donner :

Il ne nous reste plus qu’a peaufiner un peu, notamment en ce qui concerne les deux bras.
Formez donc plusieurs formes patatoïdesques (avec la plume, ou par pathfinder pour des formes simples) sous le héro.

On va maintenant les distordre pour leur donner une impression de dynamisme : Effect > Distord & Transform > Roughen

On étend l’apparence (Object > Expand Appearence)

A présent, réorganisez les formes distordues comme vous le désirez. Si besoin, vous pouvez les modifier avec la flèche blanche ou la plume, point par point, ou même, tout simplement les supprimer.

Après quelques déplacements, suppressions, corrections, rajouts … voici où on en arrive :
Pour finir on va déplacer la signature, qui n’est plus aussi visible qu’avant. Pour cela, on verrouille tous les calques sauf le calque « tracé ». On sélectionne la signature, et on la déplace.

4. RENDU FINAL

Des fautes de frappe ou d’orthographe? Une critique ? Une suggestion ?
N’hésitez pas à laisser un commentaire!

Découper et intégrer un site internet part2

pimeo — Wed, 27 Oct 2010 15:35:02 +0000

Apprenez à découper, à intégrer et à optimiser un site internet!
Partie 2 : L’intégration.

Sommaire :

Partie 1 : La découpe du template
Partie 2 : L’intégration du template

Continuons ce long périple! Au cours de cette deuxième partie (revoir la partie 1), nous allons aborder le codage (ma partie préférée!). Je vais vous montrer quelques techniques pour gagner du temps, et de la légèreté dans votre code.

Comme je vous l’ai expliqué dans la partie 1, ce template est construit selon une structure qui semble se poursuivre à l’infini. Il faut donc trouver un moyen d’afficher les images répétées x-fois TOUT EN gardant un certain équilibre au niveau de la structure des éléments (voir image ci-dessous).

Voici un schéma qui, je l’espère sera plus compréhensible. Les différentes couleurs de fond sont associées aux couleurs des grandes parties du site.

Imaginez que l’image entière soit le navigateur. Les couleurs de fond différentes représentent les images répétées x-fois. Pour obtenir un site de bonne qualité, nous allons créer 4 parties principales (qui sont représentées par le fond gris) et qui contiendra l’essentiel de notre architecture.

Et si on ne fait pas cela ?

Nous obtiendrons un site qui ne sera pas la copie conforme du fichier Photoshop (en gros, ça risque de barder pour vous si vous travaillez dans une entreprise de web design! )

Vous remarquerez que la structure du site n’aura plus le même aspect. Les deux parties noires seront la couleur de fond du navigateur, que vous aurez ajouté dans le corps (body) de la feuille de style.

Passons aux choses sérieuses !

Pour cette partie, le futur site internet va être composée de deux parties :
- La page index.html
- La feuille de style design.css

Et des ressources complémentaires telles que les images prédécoupées du template.

Le code ci-dessous est commenté. Vous ne devriez pas trop vous y perdre.

Commençons avec la partie head de la page INDEX.HTML :





	
	Website Store presentation

Continuons avec la partie header qui comprend le formulaire d’inscription :

Enchaînons maintenant avec la partie menu :



	
	
		
		
			
			

			
			
				
					
					
						
						Home
						How it Works
						Files
						Make Money
						Blog
						Help

Maintenant, la barre de recherche. Essayez de bien comprendre le principe des champs (texte et soumission) qui sont alignés horizontalement, collés et représentés sous la forme d’images.

Pour le fichier index.html, je vous préviens tout de suite le plus gros est fait!
Continuons avec le contenu principal :

Dernier point à voir : le footer. Celui-ci comporte trois colonnes ayant une hauteur fixe et égale. Le seul inconvénient que vous pourrez avoir est un calcul des hauteur des 3 colonnes, des deux barres de séparation et du centrage de l’ensemble! Que des mathématiques. Après, en ce qui concerne l’alignement horizontal, il suffit d’utiliser un attribut float (division flottante)



	
		
		
			
			
				Copyright
				All templates are copyrighted by their respective owners and may not be duplicated or reproducted without the concent of the original designer.  
			
			

			
			

			
			
				Usage
				You can use these templates in anyway you find useful but may not resell or give them away.  And blah blah blah.
			
			

			
			

			
			
				Links
				
					about | blog | help | contact

LE FICHIER DE STYLE : celui ci aussi est un gros morceau! il définit la mise en page compléte de la page index.html et est appelé par la balise link situé dans le head.

Du point de vue du style, il faut savoir qu’il n’y a pas trop de différences entre utiliser une classe (exemple css : .champs) et un id (exemple css : #champs). Je préfère garder les id pour définir mes balises principales ou bien pour caractériser des divisions avec du javascript par exemple. Il est assez rare que je l’utilise.

Dans la façon d’écrire le css, j’ai tendance à hiérarchiser mes contenus CSS afin de le cibler. Je vous donne deux exemples :

/* style attribué a chaque colonne : il y a en 3 */
#footer .contentFooter .colonne

/* attributs sur la balise a : valide sur tous mes balises a */
a{border:none}

Cibler mon code me permet de mieux m’y retrouver et d’ajouter des styles différents en fonction des balises parents :

Vous verrez plus bas que j’utilise a plusieurs reprises les classes .left et .right Elles peuvent sembler être les même mais leur cibles sont différentes en fonction de l’id parent. C’est à peu près la même chose que de mettre un fichier ‘toto.jpg’ dans deux répertoires différents. Leur chemin n’est pas le même donc on peut les modifier sans causer de problème.

Dans un premier temps, nous verrons le reset ( c’est simpliste mais ça suffit pour ce que l’on fait ) et le style attribué au corps (body).

/* Reset : suppression des marges intérieures et extérieures */
*{
padding:0;
margin:0;
}

/* CORPS - body */
body{
  background:#fff;
  height:1020px;
  font-family:'Helvetica', Myriad Pro, Arial sans serif;
  background:#d7d7d7;
}

Attaquons maintenant le style du header :

/* DEBUT HEADER */
#header{
  height:47px;
  background:url(images/ban_top.jpg) repeat-x top left;
}

/* division contenant l'ensemble du contenu de header */
#header .contentTop{
  /* on fixe ici une largeur */
  width:960px;
  /* on centre la division */
  margin: 0 auto;
  height:100%
}

/* division contenant le formulaire d'inscription */
#header .contentTop .loginForm{
  width:420px;
  float:right;
}

/* style attribué pour chaque input : des marges extérieures */
#header .contentTop .loginForm input{
  margin:9px 5px 0 0;
}

/* style attribué au formulaire de champs des inputs de connexion */
/* CREATION D'UN CHAMPS INPUT EN CSS */
#header .contentTop .loginForm .loginInput{
  color:white;
  height:30px;
  width:104px;
  background-color:#313131;
  /* chaque input va être aligné */
  float:left;
  /* CSS3 : BORDURES ARRONDIES ... */
  /* pour IE ...*/
  border-radius: 6px 6px;
   /* pour FIREFOX ...*/
  -moz-border-radius : 6px 6px;
   /* pour CHROME ET SAFARI ...*/
  -webkit-border-radius : 6px 6px;
  padding:0 10px
}

 /* pour les champ de type bouton et submit : changement du style du curseur*/
#header .contentTop .loginForm input[type=submit], #header .contentTop .loginForm input[type=button]{
  cursor:pointer
}

/* CREATION D'UN CHAMPS INPUT EN IMAGES */
/* bouton submit  */
#header .contentTop .loginForm .loginSubmit{
  height:30px;
  width:69px;
  background:url(images/boutonSubmit.png) no-repeat top left;
  float:left;
}

/* CREATION D'UN CHAMPS INPUT EN IMAGES */
/* bouton register */
#header .contentTop .loginForm .loginRegister{
  height:30px;
  width:79px;
  background:url(images/boutonRegister.png) no-repeat top left;
  float:left;
}

/* FIN HEADER */

Vous avez pu voir que j’ai intégrée des balises CSS de niveau 3.0 ; la grande nouveauté des balises de style! J’ai pu ici remplacer l’image du champ de texte par une classe contenant une couleur précise et des bordures. J’aurais pu faire pareil avec le bouton, mais il est toujours intéressant de voir les deux façons d’instancier des champs de formulaires! et surtout faire attention aux problèmes de compatibilité!

Enchaînons avec la partie menu

/* DEBUT MENU */

#menu{
 height:115px;
 background:url(images/ban_menu.jpg) repeat-x top left;
}

#menu .contentMenu{
  width:820px;
  margin: 0 auto;
}

/* classe qui contient l'image du logo */
#menu .contentMenu .left{
  margin:36px 0 0 0;
  /* alignement à gauche */
  float:left;
  width:233px;
  height:30px;
  background:url(images/logo.png) no-repeat top left;
}

#menu .contentMenu .right{
  /* alignement à droite */
  float:right;
  width:500px;
  height:37px;
  margin:35px 0 0 0;
}

/* debut de la mise en forme du menu */
#menu .contentMenu .right ul{
  /* pas de puces devant chaque liste (li) */
  list-style:none;
}

#menu .contentMenu .right ul li{
  /* alignement à gauche pour obtenir un menu horizontal */
  float:left;
  padding:10px 15px;
}

/* police, taille, couleur et autres paramètres de mise en page des liens du menu */
#menu .contentMenu .right ul li a{
  /* pas de soulignement */
  text-decoration:none;
  /* pas de puce */
  list-style:none;
  /* une epaisseur de trait de 700 */
  font-weight:700;
  /* couleur de texte : blanche */
  color:white;
  /* taille de police : 14px */
  font-size:14px;
}

/* classe active qui affiche le lien actif a l'aide d'une image :
	exemple avec le lien Home		*/
#menu .contentMenu .right ul li.active{
  background:url(images/activeAccueil.png) no-repeat top left;
}

/* FIN MENU */

Voici enfin la partie que je trouve la plus périlleuse! la barre de recherche avec son image de fond décalé par rapport a la bannière de recherche. Mais avec un peu de logique, ce problème devrait vite s’arranger!

/* DEBUT BARRE DE RECHERCHE */
#search{
  height:65px;
  /* motif répété x-fois */
  background:url(images/ban_search.jpg) repeat-x top left;
  /* NOTE : On ne précise pas la hauteur car elle est répétée! */
}

#search .contentTop{
  width:960px;
  margin: 0 auto;
  height:100%;
}

/* classe qui positionne la liste des catégories */
#search .contentTop .left{
  float:left;
  height:30px;
  width:141px;
  margin:15px 0 0 15px;
}

/* mise en page et attributs de du formulaire de sélection */
#search .contentTop .left select{
  padding:0 0 0 15px;
  width:141px;
  height:30px;
}

/* Centrer le texte dans le formulaire de selection */
#search .contentTop .left .categoryForm{
  padding:5px 0;
}

/* barre de recherche : image de fond */
#search .contentTop .right{
  float:right;
  height:73px;
  background:url(images/fond_search.png) repeat-x top left;
  width:320px;
  /* on met une marge intérieure haute en négatif pour remonter l'image de 5px; */
  margin:-5px 5px 0 0;
}

/* hauteur et marges du contenu de la barre de recherche */
#search .contentTop .right .searchForm{
  width:306px;
  margin:16px 0 0 7px
}

/* alignement des champs de texte pour qu'il s'affiche l'un a la suite de l'autre */
#search .contentTop .right .searchForm input{
  float:left;
}

/* mise en forme et affichage du fond du champs de texte */
#search .contentTop .right .searchForm .searchInput{
  color:#020202;
  font-size:13px;
  font-weight:bold;
  background:url(images/textField.png) no-repeat top left;
  width:244px;
  height:20px;
  /* marge intérieure pour eviter que le texte soit trop collé aux extrémités de l'image */
  padding:12px 10px 8px;
}
/* bouton de soumission de la barre de recherche */
#search .contentTop .right .searchForm .searchSubmit{
  background:url(images/submitField.png) no-repeat top left;
  width:42px;
  height:40px;
  cursor:pointer;
  /* on efface le contenu de la valeur du champs de soumission */
  text-indent:-9999px;
}
/* FIN BARRE DE RECHERCHE */

Difficile ? Mais non

Continuons avec le contenu principal :

/* DEBUT CONTENU PRINCIPAL */

#wrapper{
  width:1000px;
  margin:10px auto 50px;
}

/* classe qui définit l'image de fond, la largeur, la hauteur et le centrage du futur caroussel */
#wrapper .slider{
  width:960px;
  margin:0 auto;
  height:305px;
  background:url(images/slide.jpg) no-repeat top left;
}

/* marges extérieures attribuées sur la balise img pour positionner l'image dans le caroussel */
#wrapper .slider .slideImg{
  margin:10px 10px;
}

/* titre recentTheme */
#wrapper .recentTheme{
  margin:30px 0 10px 28px;
  width:184px;
  height:21px;
  background:url(images/recentTheme.png) no-repeat top left
}

/* titre featuredTheme */
#wrapper .featuredTheme{
  margin:30px 0 10px 25px;
  width:207px;
  height:21px;
  background:url(images/featuredTheme.png) no-repeat top left
}

/* position des divisions contenant les miniatures*/
#wrapper .box{
  width:960px;
  margin:0px auto;
  height:160px;
  background:url(images/boxTheme.png) no-repeat top left;
}

/* position de la première miniature de chaque bloc de miniature */
#wrapper .box .boxImg:first-child{
  margin-left:8px;
}

/* position des miniatures */
#wrapper .box .boxImg{
  float:left;
  margin:8px 5px;
  /* correction du bug de firefox : bordures sur image */
  border:none;
}

/* FOOTER CONTENU PRINCIPAL */

Allez! presque terminé! Plus que le footer!

/* DEBUT FOOTER */
#footer{
  height:151px;
  background:url(images/ban_footer.jpg) repeat-x top left;
}

/* Contenu des 3 colonnes */
#footer .contentFooter{
  width:960px;
  margin:10px auto 0;
}

/* position et dimension d'une colonne */
#footer .contentFooter .colonne{
  float:left;
  width:260px;
  height:80px;
  margin: 10px 5px;
  padding:10px 20px;
}

/* ligne de séparation entre deux colonnes */
#footer .contentFooter .line{
  float:left;
  width:3px;
  height:120px;
  background:url(images/line2.png) repeat-y top left;
  margin:15px 5px
}

/* grand titre  */
#footer h1{
  color:white;
  font-size:20px;
}

/* corps de texte */
#footer h2{
  color:#cadef2;
  font-size:12px;
  margin-top:20px;
  font-weight:normal;
}

/* lien (normal, survol, visité) */
#footer a, #footer a:hover, #footer a:visited{
  color:#cadef2;
  font-size:12px;
  text-decoration:none;
}

/* FIN FOOTER */

Rajoutons maintenant quelques styles afin d’éviter les bugs (moches! oui on peut le dire! ) de certains navigateurs

/*		STYLES PAR DEFAUT	*/

/* suppression des divisions flottantes (float:left et float:right)
	permet un positionnement sous les divisions contenant un float     */
.clear{clear:both}

/* suppression des bordure bleu(safari), jaune(chrome) et en pointillé(firefox)
	au survol d'un champs de texte 	*/
input{outline:none;border:none}
/* suppression de la bordure des liens pour le navigateur firefox */
a{border:none}

Tester la démo ?

Ce tutoriel est enfin terminé! Prenez le temps d’analyser la structure du site, et dans le meilleur des cas, de le refaire! On apprend très vite comme ça!

Nous verrons très bientôt comment optimiser ce template en lui rajoutant quelques fonctions dynamiques, ainsi qu’un slideshow (ou carrousel!) et un design plus jolis pour contrer le problème d’affichage du formulaire de sélection de catégories.

28-10-2010 :
- Correction apportée sur le problème d’alignement des images sur Firefox, lié à une bordure intempestive!
- Correction sur le centrage vertical du texte dans la barre de recherche ainsi que dans la liste des catégories.
- Les fichiers sources sont mis à jour et sont maintenant sous le format .zip.

Des fautes de frappe ou d’orthographe? Une critique ? Une suggestion ?
N’hésitez pas à laisser un commentaire!

Découper et intégrer un site internet part1

pimeo — Wed, 27 Oct 2010 14:33:00 +0000

Apprenez à découper, à intégrer et à optimiser un site internet!
Partie 1 : La découpe.

Les vacances sont le plus souvent synonymes de repos. Mais pas tant que ça. Pour monter efficacement ce premier tutoriel, il m’a fallu presque deux semaines. Autant dire que ça n’a pas été si simple!

Sommaire :

Partie 1 : La découpe du template
Partie 2 : L’intégration du template

En quoi va consister ce tutoriel ?

Je vais vous montrer ici une manière de coder un site internet. A l’heure actuelle, il y a différentes façons d’intégrer un site :
- avec des tableaux pour les aventuriers
- avec des divisions (ce que je vais vous montrer aujourd’hui)
- avec des nouvelles balises issues du langage HTML 5

J’ai hésité pour intégrer le site en HTML 5 et cela en deux points : premièrement, on se facilite plus les choses : des balises header, footer, section, article, enfin une architecture plus simple à comprendre, et puis deuxièmement, c’est un langage qui vient tout juste de sortir et son utilisation permettra de faire pas mal de belles choses (vous êtes curieux ? Allez faire un tour vers la balise canvas en HTML5 et découvrez ce qu’elle a dans le ventre! ).

Mais après une réflexion très très longue, j’ai décidé de coder ce site qu’en divisions avec des id et des classes, par soucis de compatibilité. Rappelons que HTML5 est tout récent! testez-le sur un navigateur IE 6 ou 7, le résultat sera pitoyable, même après avoir passé des heures sur votre code!

Petite note avant de commencer ce tuto : le template utilisé est gratuit et est disponible sur devisefunction.com.

Je précise que je ne fais que découper, intégrer et voire même rendre dynamique ce site internet. En aucun cas je ne modifie ce template.
Un tutoriel sur la création du template est par ailleurs disponible a cette adresse : template store by Matthew Heidenreich

Dans cette première partie, je vais vous montrer la technique que j’utilise pour découper un site internet à partir de Photoshop.

Prenons un aperçu du template et essayons de décrire l’architecture générale du site :

Mes études très poussées en Photoshop sont ici remarquées par la création de rectangles de couleurs différentes! Trêve de plaisanteries et mettons nous au travail!

Chaque grande partie du template est dans un rectangle d’une certaine couleur. On remarque :
- Le header (ou en-tête) qui contient un formulaire de deux champs, avec deux boutons, puis en dessous un logo à gauche et un menu à droite.
- La barre de recherche accompagnée d’un champ de listes.
- Le contenu principal comportant un slider (ou caroussel), ainsi que deux autres sections comprenant dans chaque 3 miniatures.
- Le footer (ou pied de page) qui contient trois colonnes dont une avec des liens.

Structurer un site internet et l’imaginer avant sa découpe est un bon atout! Cela vous donne une vue d’ensemble pour le programmer et surtout, vous ne partez pas les deux pieds dans le plat en vous disant au bout de 5 minutes.. Qu’est ce que je fais avec ça ?

Reprenons maintenant l’aperçu du site et cherchons les difficultés (parce qu’il y a en toujours) :

Regardez bien cette image et dites moi ce que vous en pensez ? (même si je ne vous entends pas! il est toujours bon de se faire une opinion sur les éventuelles difficultés que l’on va rencontrer!)

Une idée ?

- le plus gros problème de ce template est que les images d’arrière-plan du header, du menu, de la barre de recherche et du footer sont répétées x fois.

(????!)

Besoin d’explication ? une image peut être utilisée dans 2 formes différentes :
- soit elle n’est pas répétée donc je vois mon image une seule fois.
- soit elle est répétée donc elle se comporte comme un motif ; je peux alors la répéter sur un axe horizontal (axe x), sur un axe vertical (axe y) ou bien sur les deux!

Pourquoi est-ce un problème ?

Quand vous créez un site internet, il existe deux structures différentes :

Rien de tel que de le montrer avec un exemple. Sur l’image ci-dessous, on remarque un fond blanc. Le site possède une hauteur et une largeur définie. Ce site internet n’a pas ici cet aspect de continuité. Le codage d’un tel site est plus simple. Pour vous faire une idée, imaginez une feuille au dimensions fixes et ajoutez tous ce que vous voulez a l’intérieur! vous serez sur que rien ne sortira de cette feuille!

En revanche, dans cette deuxième image, nous perçevons bien la continuité du site au delà du navigateur. Notre maquette de site est surtout orientée vers cette structure. Coder un template de ce type demande un peu plus de temps. En effet quelque soit la résolution de votre écran, les images répétés x ou y fois vont se faire sur tout votre navigateur. Il faut donc afficher cette image répétée et créer par dessus une division avec des hauteurs & largeurs fixes.

Ce n’est pas très grave si vous n’avez pas tout compris, nous reverrons cette technique lors du codage du template.

Pour revenir aux difficultés du template, les autres soucis que nous pourront rencontrer seront l’alignement des liens du menu, le style de la barre de recherche, les positions du logo et du menu ainsi que la création des colonnes. Beaucoup de travail en perspective!

Voici un croquis (j’ai bien dis croquis!) des différents éléments à découper :

Parmi tout ce fouillis de rectangles gris et rose, que faire ?

Tout d’abord, quand vous essayez de découper un template, essayez de voir simple! Par exemple, ne vous amusez pas a découper les grands titres du footer. Une classe avec une police, une taille, une couleur et une épaisseur du trait de caractère fera amplement l’affaire! Dites vous aussi qu’une image est un fichier externe qui est plus ou moins lourd, donc qui mettra du temps à charger (il existe encore des lieux où l’adsl n’est pas disponible! Une pensée pour ces pauvres gens! )

Une actuce ?

- Hauteur signifie longueur de la page web.
- Largeur signifie largeur de la page web.

Exemple : 1024 x 768 => hauteur de 1024 pixels et largeur de 768 pixels.

Reprenons avec nos très chères images répétées : les barres de recherche (en bleu) et du header (en noir) n’ont pas de motif spécifique et pas de transparence. Un simple échantillon des largeurs des barres sur des hauteurs de 2 à 3 pixels en format jpg fera l’affaire!
Quant aux images de fond du menu et du footer, elles sont identiques. Cependant, elles possèdent des motifs (des bulles) donc il nous faut récupérer un échantillon qui ne coupe aucune bulle, sous peine d’obtenir un motif coupé! Pour ma part, j’ai choisi une hauteur de 90px sur une largeur égale à la largeur totale de la barre du menu.

Pour le formulaire de connexion, deux cas sont possibles : soit une découpe des images des champs de texte et des boutons, soit créer le tout en format html et css. Je vais vous montrer les deux cas : je vais designer en css les champs de texte et faire une découpe des images des boutons.

Pour le logo, je vais tout simplement récupérer l’image devant le texte + le texte en lui même et l’enregistrer sous le format png, pour récupérer la transparence. Si par hasard je l’enregistre en format jpg, je vais récupérer le fond du menu et donc ça ne fera pas propre du tout!

Parlons maintenant du menu. C’est une partie qui va essentiellement s’effectuer en css. Cependant, il nous faut juste découper ce qui sert de repère actif à notre page (ce qui permet de nous situer sur le site).

La barre de recherche est composée d’une image de fond avec une opacité définie dans le fichier Photoshop. L’enregistrer au format png nous suffira. Pour le champ de texte et le bouton d’envoi, il nous suffit de découper un premier morceau qui servira à écrire notre recherche et un deuxième morceau qui nous servira de bouton. On regroupera le tout en html et css.
Nous reviendrons plus tard sur le listing des catégories à gauche de la barre de recherche.

Le contenu principal est la partie la plus simple. Découpez les 4 images (la grande + les 3 miniatures) en format jpg, ainsi que le grand rectangle et le petit rectangle en format jpg aussi.

Reste à récupérer les 2 titres au format png.

Pour conclure cette partie (un peu longue!), rappelons nous que le fond du menu est le menu que celui du footer, faisons donc des économies de temps et d’énergies et ne nous amusons pas à découper à nouveau ce motif. Mais, nous pouvons récupérer la ligne de 2px de hauteur, qui sépare les 3 colonnes! Enregistrez-la au format png.

Nous voici donc arrivés au terme de ce découpage long et périlleux! Il est possible que j’ai oublié des choses en cours de route! mais pour une version écrite, les images seront bien plus utiles pour comprendre!

Comme c’est un template gratuit, les sources sont bien entendu à votre disposition! Ainsi que les images découpées, mais dans la partie 2 de ce tutoriel!

Des fautes de frappe ou d’orthographe? Une critique ? Une suggestion ?
N’hésitez pas à laisser un commentaire!