Aujourd’hui sur Webdesigner Trends, une sélection de 10 nouveaux tutoriels du web pour créer un webdesign sous Photoshop !

On commence tout de suite avec un tutoriel de webdesign d’hôtel/restaurant, élégant et rustique :

1. Créer un webdesign d’hôtel/restaurant :

2. Créer un webdesign de portfolio :

3. Créer un webdesign d’architecte ou de vendeur de bien immobilier :

4. Créer un webdesign minimal et brillant :

5. Créer un webdesign grungy et translucide :

6. Comment créer un webdesign de portfolio :

7. Apprenez à créer un webdesign dans un style 3D :

8. Créer un webdesign de portfolio élégant :

9. Créer un webdesign de portfolio sur un fond bois :

10. Créer un thème WordPress complet :

Mention spéciale pour ce tutoriel vidéo de chez Grafikart, vraiment complet et bien réalisé ! En plus en français, alors régalez vous !

Vous avez aimé les sites du mois de novembre, voici la sélection des incontournables de décembre 2009 ! Ce mois ci, un site web horizontal, des sites Flash, beaucoup de sites avec une texture en fond, du vintage et bien sûr beaucoup de designs de toute beauté !

Mom and Popcorn

Alex Flueras

Beer Enberg

Creative Spark

Camellie

Tnvacation

Giraffe

Rype Arts

NDesign Studio

Loscoloresolvidados

Floriada Flourish

Coolar

Bandit 3

Level 2D

Mochimedia

Jare Digital

Work awesome

Cottonseedoiltour

Blackmoondev

Creativestate

By the pond

Tap Bots

Alors cette sélection de décembre ? Vous en pensez quoi ?

L’année 2009 touche bientôt à sa fin. Le web est un organisme vivant en constante évolution, qui nous réserve encore de belles (ou mauvaises) surprises pour l’avenir. Dans tous les cas, la machine est en marche et certaines technologies web actuelles continueront de façonner le web durant l’année à venir.

Dans cet article je vais mettre en lumière deux « langages », déjà en place, en constant développement et de plus en plus utilisés, HTML 5 et CSS3. Cet article est le premier d’une série présentant les dernières technologies web.

1. HTML 5/CSS 3 :

HTML5 :

Vous en avez sûrement entendu parler, ici et là sur différents blogs et autres sites spécialisés. Quelle question, comment passer à coté de HTML 5 ? Il est dors et déjà adopté par de plus en plus de créateurs de sites depuis le début de cette année. En juillet dernier, le W3C annonçait l’abandon du développement de XHTML2 au profit de HTML5. Le langage HTML4 n’a pas connu de grande évolution depuis son lancement en 1997. Son successeur est doucement mais sûrement entrain de changer nos manières de créer un site.

Rappelons-le, HTML5 intègre directement des éléments structurel de base, comme les balises <header>, <nav>, <section>, <article>, <aside>, <footer>. Elles permettent de limiter l’abus de balises structurelles comme <div id= »header »></div> par exemple. L’image ci-dessous montre la structure de base de ce que peut-être une page écrite avec HTML5.

HTML5 gère également mieux la relation avec Javascript et offre de nouvelle possibilité pour créer des applications web. Je pense notamment aux API audio et vidéo qui simplifient énormément l’insertion de médias. Les navigateurs ne sont pas tous encore au point, mais cela rend l’intégration de vidéo plus facile que jamais. Voici un exemple d’utilisation de la balise vidéo : <video width= »575″ height= »275″ src= »video_wdtrends.avi »>. Vous remarquerez l’absence de balise auto-fermante comme en XHTML. Elle peut être rajoutée sans souci mais n’est pas obligatoire pour que le code soit syntaxiquement correct.

Autre amélioration que je trouve vraiment très utile, le syntaxe du Doctype HTML5 : <! DOCTYPE html>. Vraiment simple et court, le W3C à fait le bon choix pour faciliter la tâche lors de l’écriture de la première ligne d’une page HTML.

Consultez ce document utile, HTML5 Cheat Sheet, quatre pages en PDF pour connaitre toutes les balises disponibles dans HTML5 (y compris celles qui étaient déjà présentes dans HTML4).

CSS3 :

La norme CSS3 est en travaux depuis déjà plusieurs années. Avant même que la version 2.1 soit achevée, CSS3 était au cœur de différents débats sur le web. Quoi qu’il en soit, on trouve de plus en plus de sites avec un webdesign stylisés avec des feuilles de style CSS3. Cette nouvelle version contient de nouvelles propriétés pour réaliser des traitements graphiques qui nécessitait avant d’utiliser des images ou d’autres astuces visuelles. Voici quelques-unes de ces nouvelles propriétés :

• Text-shadow permet de créer des ombres portées.
• Border-raduis pour des coins arrondis.
• Opacity pour la transparence d’un élément.
• @font-face pour incorporer des polices de caractère.
• …

Le plus intéressant sont toutes les propriétés concernant la mise en page et le positionnement. Elles sont toutes décrites présicement par le W3C : Presentation Levels, Template Layout, Multi-column Layout, Grid Positioning et Flexible Box Layout…

Voici un exemple de site utilisant CSS3 :

Sur la capture ci-dessus avec Firefox 3.5.6 on peut voir fonctionner la propriété text-shadow sur le message de bienvenue. Sur la capture ci-dessous avec Internet Explorer 8 le texte est écrit sans la propriété CSS3.

On peut vraiment ce demander si l’internaute remarquera vraiment les différentes nouvelles mises en page. En tout cas pour le webdesigner, CSS 3 est un outil réellement bénéfique qui permet de vraiment programmer proprement et créer des designs pas vus auparavant.

Pour rester à la page CSS3.info permet de suivre l’actualité et l’avancement de la nouvelle norme de feuilles de style.

Conclusion :

Véritable révolution ou évolution mineure dans la façon de créer un site web ? Avec un contenu mieux organisé, une syntaxe plus claire et allégée, des standards pour les traitements graphiques, l’avenir du web semble être désormais en marche. Reste à savoir si l’évolution des navigateurs permettra d’exploiter totalement toutes ces technologies. Ils seront déterminants pour faire exploser le couple HTML5/CSS3 dans les prochains mois ou seulement dans quelques années…Affaire à suivre !

Pour en savoir plus sur le CSS 3 et le HTML 5 css3gallery.net propose plus de 70 tutoriels sur ces nouveaux standards.

Le prochain article de la série de traitera des librairies Javascript.

Souvenez-vous, le premier article de Webdesigner Trends tentait de donner des pistes pour définir ce qu’est le webdesign et le métier de webdesigner. Gilles Vauvarin de Pixenjoy, apporte à nouveau des éléments de réponse lors de sa conférence au Paris Web 2009.

La conférence intitulée « Webdesigner, l’homme qui parlait à l’oreille des intégrateurs », tente entre autres de positionner le webdesigner : doit-il être un illustrateur, une infographiste, un concepteur, un intégrateur … ? L’intervenant passe également en revue certains sites web, avec les problèmes que l’on peut rencontrer lors de leur conception…Ce n’est pas une nouvelle très fraîche mais elle vaut le coup et si comme moi vous n’avez-pas pu assister au Paris Web 09, suivez cette conférence très enrichissante en vidéo.

Source : Pixenjoy

Depuis cet été, les tutoriels sur le CSS 3 se font de plus en plus nombreux. Découvrez un tuto proposé par Tutorialzine pour créer une galerie avec CSS3, PHP et Jquery.

Je ferai prochainement un article pour vous apporter des éléments de réponses sur le développement de CSS 3 et son utilisation à l’heure actuelle en terme de webdesign. En attendant, je vous invite à découvrir le tutoriel de Tutorialzine (en anglais…) et à mettre les mains dans le code !

Sur le web,  il existe des centaines de tutoriels en tout genres pour convertir un design de site réalisé sous Photoshop, en vrai site exploitable avec XHTML/CSS. Je vous propose une sélection de tutoriels (en anglais) pour progresser dans l’intégration web !

Je vous invite à partager des liens si vous connaissez des tutoriels de qualités sur l’intégration PSD/XHTML en français !