We Love Webdesign

Je pense que vous n’irez pas me contredire sur le fait qu’outre Atlantique les blogs sur le webdesign sont beaucoup plus nombreux qu’en France. Ce qui est tout à fait logique si on compare le nombre d’habitants des Etats-Unis avec le notre. Ces blogs sont des mines d’informations pour les webdesigners et web développeurs que nous sommes. Mais nous français, ne sommes pas pour autant en reste. C’est pourquoi, au travers de cet article j’ai décidé de mettre à l’honneur 12 blogs français relatifs au webdesign. Parce que nous aussi on a de la ressource !

C’est parti !

1. Alsacréations

Je commence par le site d’Alsacréations qui est à mes yeux une référence en matière de webdesign (et qui m’a bien servi à mes débuts). Toujours dédié à l’apprentissage des standards web (W3C, HTML, XHTML, CSS), Alsacréations vient de faire peau neuve.

Sa nouvelle version est désormais composée de trois univers: “Apprendre”, “Forum” et “Emploi”. Elle permet également à quiconque de participer et d’ajouter des news relatives aux web grâce à la rubriques “Actualités”.

2. Webdesign 2803

Webdesign 2803 est un blog sur le design de sites internet et des blogs, les sujets abordés sont l’ergonomie, l’accessibilité, le design… Toujours de bon tuyaux pour des ressources pour les webdesigners.

3. Babylon Design

Blog de Samuel Le Morvan, beaucoup, beaucoup d’articles très intéressants.

4. Css4design

Excellent blog de Bruno Bichet, une vraie mine d’or !

“Ce blogzine s’adresse à tous ceux qui ont la charge de concevoir un site web ou un blog d’entreprise en général et aux intégrateurs HTML et CSS en particulier.”

5. Detruk

Un blog avec de très bons articles. Des tests d’outils et de sites pour web designers toujours très complets ainsi que de nombreux tutoriaux très bien détaillés et expliqués, …

6. Fran6art

“Toute l’actulaité du blogging et du webdesign autour de wordpress”. Excellente ressource si vous cherchez des informations sur Wordpress. Notemment l’excellent tutoriel : créez votre thème Wordpress de A à Z !.

7. Fredzone

On ne présente plus la Fredzone, des articles très bien écrits, beaucoup de tests sur les services web 2.0 toujours abordés avec un point de vue intéressant. Mais aussi deux catégories dédiées au Design et au Développement Web.

8. Grafikart

Vous aimez les tutoriels vidéos ? Ne cherchez plus, Grafikart est un blog qui proposent de nombreux tutoriels vidéos aussi bien sur le Graphisme que sur le Développement web toujours très bien réalisés et détaillés.

9. Inéation

Inéation est un blog orienté 100% Drupal. Si vous souhaitez développer et mettre en place un blog avec le CMS Drupal vous y trouverez de très bon conseils.

10. Jarodxxx

Avi Teboul alias Jarodxxx, est un développeur web qui vous fera découvrir au travers de son blog de multiples astuces et autres pépites du web en matière de développement. Il y partage ses connaissances en php, css, xhtml, javascript, ajax et nous tient au courant des dernières actualités Web 2.0.

11. Pixenjoy

Pixenjoy est à mes yeux un Must dans la “webdesign blogosphère” française. Ne ratez surtout pas les tutoriels et les analyses toujours très approfondies de Gilles Vauvarin (webdesigner freelance). Un blog toujours très agréable à lire qui vient également de changer de design.

12. Vendeesign

“Vendeesign est un blog sur l’actualité multimédia du Web 2.0.”

Son auteur Benjamin Romei, blogeur professionnel, y partage sa passion pour le Web Innovant et nous fait découvrir de nombreux services à travers des tests toujours très poussés.

+ 1 petit featuring belge No Milk Today

Pour terminer cette sélection; un blog belge No Milk Today. Articles sur le webdesign abordés avec une approche très artistique et créative.

J’espère que cet article vous aura permis de faire de belles découvertes. We Love Webdesign est un blog qui vient de démarrer et qui est également orienté webdesign et développement web, n’hésitez pas à vous abonnez aux Flux Rss !

J’ai surement oublié de très bons blogs français sur le webdesign / web développement. N’hésitez surtout pas à partager et à me faire connaître vos bonnes adresses via les commentaires !

News blog, dev, français, web, web 2.0, web design, web développement, webdesign

Pour commencer Bonne Année à tous ! Oui, il n’est jamais trop tard. Pour le premier tutoriel de cette année 2009, j’aimerai partager avec vous une des tendances actuelle en matière de web design, qui est le texte incrusté (souligné d’une légère bordure blanche qui accentue l’effet de profondeur).

Pour commencer, voici une petite sélection de sites utilisant cet effet :

Voici ce que nous allons donc réaliser :

(l’exemple et le fichier .PSD sont téléchargeables à la fin du tutoriel)

Pour commencer ouvrez Photoshop et créer un nouveau document de 400 pixels de large et 55 pixels de haut.

Dans la barre d’outils à gauche, sélectionner deux gris (j’ai utilisé les couleurs d’Apple pour mon exemple), #868786 pour le foncé et #c4c4c4.

Sélectionner ensuite l’outil Dégradé ou appuyer sur la touche « g » de votre clavier. Cliquez en bas du calque, maintenez le clic et tirer jusqu’en haut du calque, puis relâcher. Voilà un beau fond dégradé.

A ce stade là vous devriez avoir ceci :

Passons maintenant à la partie la plus intéressante du tutoriel, à savoir le mise en place du texte et l’application de l’effet. Sélectionner l’outil texte, puis cliquer dans la zone de travail, un nouveau calque de texte va alors se créer automatiquement.

Taper maintenant votre texte, j’ai mis « We Love Webdesign » pour l’exemple, j’ai utilisé « LilyUPC » comme police et #2d2d2d pour la couleur.

Dans la palette des calques à droite, double cliquez sur votre calque texte, Une fenêtre intitulée « Style de calque » s ’ouvre alors. Sélectionner « ombre portée » et effectuer les réglages suivant :

• mode de fusion : normal,
• la couleur : blanc,
• l’opacité : 45%,
• un angle de : 90°,
• l’opacité : 50%,
• distance : 1px,
• grossi : 0%,
• taille : 0px,

Et voilà vous devriez obtenir quelques choses comme ci-dessous. Après a vous de jouer, essayer d’autres couleurs et changer les paramètres de l’ombre portée si vous n’êtes pas satisfaits.

J’espère que ce tutoriel vous aura rendu service, si vous n’êtes pas encore abonné au flux Rss du blog, n’hésitez pas, c’est par ici : Flux RSS

Si vous avez des questions, n’hésitez pas à laisser un commentaire.

Photoshop apple, blanc, effet, incrusté, Photoshop, texte, tutoriel

Tout comme moi vous avez forcement voulu ou eu besoin, à un moment dans votre « vie » de web designer de réaliser un rollover: technique permettant au passage de la souris sur une image, son remplacement par une autre image (en général utilisé avec un lien). La façon la plus commune de réaliser cet effet est d’utiliser du Javascript.

Il y a beaucoup de tutoriels à ce sujet sur la toile, mais en général on se contente de copier/coller le bout de Javascript dans notre code source sans même savoir comment il fonctionne. Cette technique utilisant du Javascript est à mes yeux, une mauvaise manière de réaliser des rollovers: temps de chargement lent, complexe, souvent implémentée de façon hasardeuse, …

C’est pourquoi je vous propose ce tutoriel afin de vous expliquer étape par étape une technique beaucoup plus simple et rapide à mettre en place. Celle-ci n’utilise que du CSS et du HTML.

Voici un exemple de ce que nous allons réaliser:

Home

(Le code source et l’image de cet exemple sont téléchargeable à la fin du tuto)

1er étape:

- Créez un nouveau dossier (nommez-le « Rollover » peu importe), ouvrez-le et créez à l’intérieur deux fichiers (nommez les respectivement « index.html » et « style.css »), toujours à l’intérieur du dossier « Rollover » créez un nouveau dossier que vous appelez « images ».

Vous devriez avoir quelque chose comme ça maintenant:

- Ouvrez à présent index.html avec votre éditeur de texte préféré (j’utilise Notepad ++), et copier/coller ce code à l’intérieur:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Rollover CSS</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

	<a href="#" id="exemple">Home</a>

</body>
</html>

Ici rien de bien complexe, je ne m’étends pas sur les bases HTML. # est à remplacer par le lien que vous voulez.

2nd étape:

Un rollover utilisant du Javascript à besoin de deux images différentes pour fonctionner: une pour l’état normal et une autre pour la position :hover (ça nous fait deux requêtes vers le serveur, chargement long, …). L’avantage de la technique que je vous décrits ici, est que nous avons uniquement besoin d’une image regroupant les deux états.

Voici celle que j’utilise pour l’exemple (enregistrer la dans le dossier « images » que nous avons créées précédemment):

3ème étape:

Passons maintenant au CSS. Ouvrez le fichier « style.css » et copier/coller ce code à l’intérieur:

#exemple {
background: url(images/home.png) top center;
text-indent: -9999px;
display: block;
width: 100px;
height: 36px;
}
#exemple:hover {
background-position: bottom center;
}

Quelques explications:

- Notre image (celle que j’utilise pour l’exemple) fait 100px sur 72px de haut. Pour l’état normal on veut voir uniquement la moitié de cette image, c’est à dire les 36px du haut de l’image, on écrit donc « height: 36px » et on écrit « top center » pour centrer l’image en haut.
- Pourquoi « text-indent: -9999px » ? Cette technique permet de cacher le texte « Home » présent dans le code HTML.
- Pour l’état :hover on règle la position du background sur « bottom center » ce qui à pour effet de cacher l’état normal et de faire appaître les 36px du bas de l’image.

Et voilà, testez index.html dans votre navigateur web. Vous devriez obtenir ça:

Home

Vous venez donc de réaliser un Rollover en pur CSS, beaucoup plus simple que du Javascript puisqu’il n’y a pas besoin de charger une deuxième image lors du passage de la souris.

J’espère vous avoir appris quelque chose avec cette technique qui est à mon goût la plus en vogue dans le monde du webdesign.
Si vous avez des questions, n’hésitez surtout pas à me contacter par mail à l’adresse suivante: welovewebdesign[at]gmail.com

Ceci étant le premier tuto de ce blog, je suis curieux d’avoir vos « feedbacks » (retours), n’hésitez donc surtout pas à laisser un commentaire!
N’oubliez pas de vous abonner aux Flux Rss du blog, ce n’est que le début !

CSS code, CSS, html, image, notepad++, rollover, technique, web design, webdesign

Bienvenue sur We Love Webdesign !

J’ouvre ce blog dans le but de partager ma passion pour les technologies du web et plus particulièrement pour le web design avec la communauté internet.

Mes premiers objectifs seront de publier des tutoriaux que je réalise moi-même, ainsi que de relayer des ressources et des news (en rapport avec le webdesign) trouvées sur la toile que je trouve intéressantes. Les objectifs du blog évolueront certainement dans le temps.

Voilà, restez connectés grâce aux flux RSS, les premiers tutos ne devraient pas tarder !

Moi