Créer un site d`entreprise de A à  Z 2/3 : Intégration HTML5 / CSS3

Créer un site d`entreprise de A à  Z 2/3 : Intégration HTML5 / CSS3

Programme : Photoshop & Dreamweaver

Difficulté : Intermédiaire à  avancé

Temps estimé : 8h

Télécharger les fichiers sources
Vous devez être logués ou enregistrés pour télécharger !

Design Spartan (Gaétan Weltzer) vous montre comment créer un site d’entreprise de A à  Z en commençant par la phase de réflexion puis le webdesign.

L’objectif de ce tutoriel assez long est d’offrir un cas pratique avec une réflexion derrière. En situation réelle pour une entreprise, comment se passe la réalisation d’un site Internet de présentation ? Par où commence-t-on et comment finit-on, voici ce que nous allons voir ensemble. Mais tout d’abord, une petite démo du rendu final :

Demo Flash


A lire avant de commencer

Plutôt que de faire un simple tutoriel de webdesign, je souhaite vous emmener dans la création d’un site Internet pour une entreprise fictive de A à  Z : de la phase de réflexion jusqu’à  la mise en ligne du site en passant par le webdesign, l’intégration et le développement. Néanmoins pour ce long exercice, nous ne nous pencherons dans la phase de réalisation que sur la page d’accueil étant donné que les autres pages sont simplement déclinées de celle-ci. Ainsi je parlerais des autres pages sans voir en détail le webdesign ou l’intégration.

Pour cet exercice, je vais vous montrer le procédé de création d’un site-vitrine qui est à  peu près le même pour la majorité des entreprises souhaitant présenter leur activité et entrer en contact avec de potentiels clients. Pour tout de même partir dans l’originalité et montrer comment on peut s’adapter au cas par cas (notamment en matière de webdesign), j’ai décidé de réaliser le site d’une entreprise de vente de thé de qualité qui possède plusieurs boutiques en France. Le but de ce tutoriel est de partir de cet exemple précis (que vous ne rencontrerez probablement jamais) pour vous apporter des connaissances, des techniques et une méthodologie propre à  la plupart des sites web, que ce soit en webdesign, en intégration, en développement ou en gestion de projet.


Tutoriel webdesign

Page du tutoriel – ce qui a été crée dans Photoshop dans la première partie et ce que nous allons maintenant intégrer en HTML5/CSS3



Ce tutoriel est découpé en 3 parties :

- La réflexion puis le webdesign : élaboration de la charte graphique et du design du site Internet

- L’intégration HTML5/CSS3

- Le développement PHP/MySQL des front et back office (administration)


2/3 : L’intégration en HTML5

Comme vous le savez, dans la première étape, nous avons réalisé la phase de réflexion ainsi que le webdesign de la page d’accueil. Dans le cadre du tutoriel, nous ne réaliserons que cette page étant donné que les autres pages en sont déclinées. Pour information, ce tutoriel est destiné à  un public intermédiaire, je n’expliquerais donc pas depuis zéro comment fonctionne l’HTML ou encore le CSS.

Nous avions donc décidé dès le début du projet de nous orienter sur les technologies HTML et CSS pour l’intégration et la navigation sur le site. Comme c’est aujourd’hui dans l’air du temps, j’ai décidé de réaliser cette page (et donc le site fictif en entier) en HTML5. Cela permettra non seulement de voir le découpage, le balisage ainsi que la mise en forme du design, mais également de découvrir certaines nouveautés dans la façon de construire ces pages.

Le choix de l’HTML5 pour ce tutoriel s’impose de lui-même : si son but est de vous apprendre de nouvelles choses ou de parfaire vos connaissances, autant le faire avec les dernières technologies ! D’autant plus qu’elles peuvent en grande partie déjà  être utilisées aujourd’hui comme nous allons le voir. Cela est tout de même à  utiliser avec parcimonie car n’importe quel projet aujourd’hui ne pourra pas forcément jouir de l’HTML5/CSS3, tout comme certaines propriétés et nouveautés ne sont pas utilisables du tout pour le moment à  cause des « vieux navigateurs ». Comme vous allez l’apprendre, beaucoup de problèmes peuvent être contournés. En route !

Note : Comme toujours, je ne m’occupe pas du tout d’Internet Explorer 6 dans le tutoriel.


Voici comment se déroulera l’intégration. Chaque intégrateur a sa propre méthodologie, la mienne est plus ou moins celle-ci :

- squelette HTML5 : écriture des balises, mise en place de la sémantique et du référencement naturel (je précise que je ne vais pas m’attarder dans ce tutoriel à  optimiser le référencement car ce n’est pas son but)

- mise en page CSS3 : j’écris le CSS et je découpe les images du webdesign en même temps, en commençant du haut de la page vers le bas

- test et débogage : tester sur les différents navigateurs et régler les différences


Ce dont vous avez besoin :

Il n’y a pas de besoin particulier pour ce tutoriel si ce n’est :

- un éditeur de texte (Dreamweaver, Notepad, etc…),

- Photoshop pour découper la maquette

- de préférence plusieurs navigateurs (Firefox, Chrome, Safari, IE, etc…)

- deux typographies déjà  utilisées précédemment à  l’étape 1 (Melbourne ainsi que Ginko)

- des connaissances de base en HTML et CSS


Et c’est parti !


Etape 1 : Le découpage

En général je découpe la maquette en même temps que j’écris le CSS pour mettre en page le site mais pour être clair au début de ce tutoriel, voici comment la maquette a été découpé. Ce n’est pas compliqué, dans Photoshop à  l’aide de l’outil Tranche, Sélection ou encore Recadrage, j’enregistre toutes mes images dans un format optimisé.

Qu’est-ce que j’entends par « optimisé » ? Tout simplement il s’agit de découper les images et images de fond de la meilleure taille possible afin de l’intégrer facilement en CSS. De même, souvent le choix entre le format Jpeg et PNG se pose. Il faut alors réfléchir à  la contrainte d’intégration, de design et de poids de l’image.

 


Découpage de la maquette

Toutes les images du site découpées depuis la maquette et prêtes à  l’emploi


Etape 2 : le squelette HTML5

On attaque ici un gros morceau ! Il faut d’une part comprendre la structure, le découpage en balises mais également ingérer les nouveautés de l’HTML5 en plus de la « logique sémantique« .

Comme vous avez dû en entendre parler, l’HTML 5 c’est plein de nouvelles choses :

- des nouvelles balises comme <video>

- des nouvelles propriétés

- mais aussi une écriture qui respecte mieux la sémantique


Oui oui vous le savez déjà … Bon alors j’arrête de radoter et on passe à  notre page d’accueil de Real Tea !


Avant d’attaquer le code, analysons la page

Etant donné que je code cette page en HTML5, j’ai préféré passer par une étape alternative afin de mieux comprendre la structure de notre page HTML. Cela m’a permis de réfléchir au découpage du site et notamment au choix des balises HTML5 les plus adaptées pour chaque bloc d’information.

Car oui, l’information est plus que jamais ce qui va orienter la structure de votre squelette HTML5 ! C’est ici pour moi que se trouve le plus grand changement. Je peux même parler de « chamboulement », mais heureusement tout s’apprend et les bénéfices sont nombreux !

Si je reprends ma maquette sous les yeux, voici ce que je peux en tirer en montrant tout de suite les balises les plus importantes pour ma page. Cela permet en un clin d’oeil de « prévoir » le code qui doit être écrit.

Structure de la page en HTML5

Structure non détaillée de notre page en HTML5

J’expliquerais au fur et à  mesure les nouvelles balises HTML5 et si la question se pose, aussi pourquoi cette balise et pas une autre.


Le début est toujours le même : le markup

Voici les premières lignes de code de notre site avec quelques nouveautés qui seront expliquées en-dessous :




<meta charset="utf-8" />
Real Tea : Tutoriel pour Living Tuts - fr.livingtuts.com

 	<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><!--[if lte IE8]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 <!--[if lte IE 7]>
 <script src="js/IE8.js" type="text/javascript"></script><![endif]-->


On peut noter un DOCTYPE écrit beaucoup plus simplement qu’avant ainsi que la définition courte du charset utf-8.

Ensuite arrivent l’appel de notre CSS ainsi qu’une feuille de style alternative pour Internet Explorer dans les conditionnelles de forme <!–[if lte IE8]><![endif]–>.

Dernière chose très importante : les 2 scripts appelés. Ils nous permettent de contourner un des premiers problèmes liés à  l’emploi de l’HTML5 aujourd’hui.

En effet, une des premières choses qu’on va vous dire est que les anciens navigateurs ne reconnaissent pas les nouvelles balises (comme <header>, <section>, etc…) et donc le navigateur ne pourra pas les interpréter et il n’affichera rien (ou une erreur). Et bien c’est vrai mais heureusement, le Javascript permet de contourner ce problème en forçant les navigateurs à  reconnaître ces balises.

Sans rentrer dans les détails, je vous redirige vers HTML5 Shiv, projet de Google que nous utilisons ici. Voici donc un point-clé à  retenir absolument si vous souhaitez créer des sites en HTML5. Ce markup classique et efficace permet de commencer n’importe quel projet HTML5 sans problème.


Le menu de navigation

Le menu de navigation est l’occasion pour nous de présenter la nouvelle balise <nav> dont le nom parle presque de lui-même.

Terminé les <div> pour faire vos menus, maintenant il y a la balise <nav> spécialement conçue pour englober les menus de navigation.

Le code n’est pas plus compliqué que ce qui suit :

</pre>
<nav id="menu_top">
<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Real tea</a></li>
	<li><a href="#">Nos thés</a></li>
	<li><a href="#">Trouvez-nous</a></li>
	<li><a href="#">Nous contacter</a></li>
</ul>
</nav>
<div class="cl"></div>
<pre>

Dans cette nouvelle balise, on utilise une liste non ordonnée <ul> pour lister les liens, tout ce qu’il y a de plus classique.


Le haut du site : la zone forte

Là  encore on intègre quelques nouveautés si vous jetez un oeil à  l’image qu’on a vu au début présentant la structure de la page.

On a tout d’abord la partie tout en-haut contenant le logo et le visuel qui est le header de notre site. Quoi de plus logique que d’utiliser la nouvelle balise <header> à  la place d’une div ?

Je n’ai même pas besoin de préciser à  quoi sert cette balise, si ? Une précision tout de même alors : il peut y avoir plusieurs balises <header> dans la même page. En effet son emploi n’est pas restreint à  la page entière mais peut aussi s’appliquer à  d’autres balises. Comme on le verra plus tard, d’autres blocs peuvent avoir une entête (exemple : la balise <article>).


</pre>
<div class="container"><header id="header_top"><a id="logo" href="#">
<h1><img alt="Real Tea : société spécialisée dans le thé rare de qualité" src="images/logo.png" /></h1>
 </a></header>

Le logo est placé dans une balise <a> puisqu’il sert aussi de lien vers la page d’accueil dans un soucis ergonomique.

Note : La div « container » ne sert ici qu’à  la mise en page comme on le verra plus tard. Sémantiquement elle n’a aucun apport.


Sous le header nous avons la zone forte qui contient la photo de la tasse de thé, le gros titre ainsi que 3 blocs de texte.

La zone forte en HTML5

</pre>
<section class="content_hp"><header><figure><img alt="Des thés rares et exceptionnels" src="images/tasse_the.jpg" /></figure>
<h2 id="titre_hp"><img alt="Des thés rares et exceptionnels... récoltés au bout du monde" src="images/h2.png" /></h2>
 <a id="header_more" href="#">Découvrir nos thés</a>
<div></div>
</header><article>
<h2 class="titre1">75 variétés de thé</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</article><article>
<h2 class="titre2">Des thés de Chine</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</article><article class="titre3">
<h2>Des conseils détente</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in..</article></section>
<pre>
 <!-- end .content --></pre>
<div class="cl"></div>
<pre>

Il y a plusieurs choses à  relever ici.

  • La première est que toute cette partie est contenue dans une balise <section> qui comme son nom l’indique représente une section de la page distincte du reste. Elle sert simplement à  découper les portions de la page (lorsqu’aucun autre type ne convient mieux comme <header>, <article>, etc…).
  • Dans cette <section>, nous avons un <header> (et oui comme je l’expliquais au-dessus, il peut y avoir plusieurs headers dans une même page). Pourquoi cette balise <header> ? Tout simplement car si on isole la <section> du reste de la page (comme si elle était la page entière), nous avons au début une image plus un gros titre qui sert ici parfaitement de header (=entête) au bloc.
  • L’emploi de la balise <figure> : elle sert à  englober un contenu qui n’est pas indispensable à  la page et est souvent associé à  une légende (pas dans notre cas)
  • Et juste en-dessous, plutôt que de faire 3 div pour les 3 colonnes de contenu, la nouvelle balise <article> a toute son utilité.

Quelques mots sur la balise <article> : En des termes simples, la balise <article> contient toute forme de texte pouvant être assimilée à  un article et pouvant être lu hors du contexte de la page sans perdre son intégrité. Par exemple : article de blog, commentaire d’un blog, texte explicatif… Une astuce pour utiliser cette balise : si votre texte contient au moins un titre et un (ou plusieurs) paragraphe et qu’il pourrait très bien être lu dans un flux RSS ou encore partagé sur unr éseau social sans perdre son sens et son intégrité, alors il s’agit d’un <article>.

Autre information concernant la balise <article> : je le répète afin que cela soit clair, même une balise <article> peut contenir plusieurs types de balises pour structurer son contenu : <h1>, <h2>, <h3>, <p>, <etc>… mais aussi un <header>, <footer>, <figure>, <div>, etc…

Note : Si on voulait pousser le vice plus loin, il aurait été tout à  fait juste pour chacun des trois <article> de rajouter une balise <header> pour chaque titre <h2>. Finalement, ce n’est pas si dur ! Allez, je sens que ça commence à  venir, accrochez-vous !



Le bloc d’actualités

Actualité html5

La balise <aside>

Le bloc d’actualités aurait très bien pu se trouver dans une balise <section> tout comme le haut du site mais j’ai choisi d’utiliser à  la place la balise <aside>. Comme vous l’avez compris maintenant, il est facile d’utiliser une balise à  la place d’une autre en HTML5 et ça peut vite devenir un casse-tête.

Conseil : Dans ce cas, rappelons-nous notre premier conseil : le choix de la balise dépend du contenu du bloc et de sa fonction au sein de son contenant.

Pour le bloc d’actualité, le contenu se réfère aux dernières actualités de la société Real Tea. Le contenant de ce bloc n’est autre que la page entière. La page entière, qui est la page d’accueil, se veut avant tout présenter Real Tea et poursuivre sa stratégie de séduction des clients. Notre bloc d’actualité ne présente pas réellement Real Tea et ses informations sont séparées du reste de la page. C’est pourquoi la balise <aside> (= « à  côté ») est parfaitement adaptée.

Originellement conçue pour les colonnes latérales, elle était même nommée <sidebar> à  ses débuts. Tout comme pour une sidebar, notre bloc d’actualités a un lien avec la page (Informations concernant la société) mais son contenu n’est pas directement lié au reste de la page qui lui présente clairement, l’entreprise, ses produits, ses bénéfices, etc… On peut donc clairement ôter notre bloc <aside> sans empêcher le bon fonctionnement et la bonne compréhension de la page entière.

« The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. »

J’ai souhaité bien insisté sur la différence entre <aside> et <section> car c’est un point assez délicat. N’oubliez pas que c’est le contenu et son contexte qui guident l’HTML5.


Les actualités

Maintenant qu’on a détaillé le contenant (<aside>), passons au contenu ! Les actualités sont ensuite découpées comme il suit :

- le titre « DERNIERES ACTUALITES » dans une balise <header>

- une liste non ordonnée <ul> pour lister les 3 dernières news

- dans chaque <li>, il y a un <article> pour chaque actualité (ici on peut facilement assimilé une actualité à  un article de blog avec son titre, sa date et son texte, même si ce n’est peut-être pas l’article entier)

- au niveau encore plus profond, chaque <article> possède un <header> et un <footer>


</pre>
<aside id="news"><header>
<h2>ACTUALITES</h2>
</header>
<ul>
	<li><article><header>
<h3><a href="#">Ouverture du nouveau Real Tea à  Strasbourg</a></h3>
</header><footer class="post-info"><time datetime="2011-01-01">01 <span>
jan</span></time> <!-- l'atribut booléen pubdate signifie que le "time" spécifié est bien celui de l'article au cas où il y aurait plusieurs <date> dedans--></footer>
<div class="contenu_article">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo dapibus blandit nec et leo.

<a href="#">Lire la suite</a></div>
<!-- /.entry-content --></article></li>
	<li><article><header>
<h3><a href="#">Ouverture du nouveau Real Tea à  Strasbourg</a></h3>
</header><footer class="post-info"><time datetime="2011-01-01">30 <span>
déc</span></time> <!-- l'atribut booléen pubdate signifie que le "time" spécifié est bien celui de l'article au cas où il y aurait plusieurs <date> dedans--></footer>
<div class="contenu_article">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo dapibus blandit nec et leo.

<a href="#">Lire la suite</a></div>
<!-- /.entry-content --></article></li>
	<li><article><header>
<h3><a href="#">Ouverture du nouveau Real Tea à  Strasbourg</a></h3>
</header><footer class="post-info"><time datetime="2011-01-01">14 <span>
déc</span></time> <!-- l'atribut booléen pubdate signifie que le "time" spécifié est bien celui de l'article au cas où il y aurait plusieurs <date> dedans--></footer>
<div class="contenu_article">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo dapibus blandit nec et leo.

<a href="#">Lire la suite</a></div>
<!-- /.entry-content --></article></li>
</ul>
</aside>
<pre>

Il y a dans ce code encore une nouvelle balise : <time>

La balise <time> définit aussi bien une heure qu’une date. Dès que vous avez une date ou une heure à  écrire, rappelez-vous de cette balise comme un automatisme.

L’attribut datetime va de pair avec <time>. Lorsque vous l’utilisez, vous pouvez écrire n’importe quoi entre les balises <time> afin d’avoir d’autres repères temporels. Exemple :

<time datetime="21:00">à  9h pour ma soirée</time>



La partie de droite : « Trouvez nos espaces thés » + Newsletter

La partie de droite

Tout ce bloc de droite est placé dans une balise <section>. Chacun des deux blocs à  l’intérieur est ensuite placé dans une <div> (et oui, cette balise existe encore !).

Pour le bloc « Trouvez nos espaces thés », le code est tout ce qu’il y a de plus simple et classique. L’espace « Newsletter » est un peu plus intéressant car il nous permet d’introduire les nouveaux formulaires HTML5 (même si ce n’est pas énorme !). Voici le code de cette section du site :

</pre>
<section id="home_bas">
<div id="store_locator">
<h2>Trouvez nos espaces thés</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul>
	<li><a href="#">Strasbourg</a></li>
	<li><a href="#">Paris</a></li>
	<li><a href="#">Lyon</a></li>
	<li><a href="#">Rennes</a></li>
	<li><a href="#">Marseille</a></li>
	<li><a href="#">Bordeaux</a></li>
</ul>
<div class="cl"></div>
</div>
<div id="newsletter">
<h2>Newsletter</h2>
Ne loupez pas le meilleur de l'actualité du thé et de Real Tea !
<form><input type="email" name="email" placeholder="Mon adresse email" required="" />


 <input type="submit" value="Je m'inscris" /></form></div>
</section>
<pre>

Je vais expliquer quelques nouveautés des formulaires <form> en HTML5.

  • En effet, toute une flopée de nouveaux types d’input ont fait leur arrivée, au total de 13. Il y a parmi eux type= »email » (pour les adresses email), type= »url » (pour les adresses URL, oui on s’en doutait…), type= »number », type= »range », etc…
  • Ce qui est génial, c’est qu’ils n’ont pas fait de nouveaux types d’input juste pour en avoir de nouveaux. Il y a une utilité et des spécificités pour ces types, par exemple avec le champ email, si vous tapez un texte qui n’a pas la structure d’un email (sans @ par exemple), le navigateur va vous le signaler. C’est d’ailleurs le cas de notre Real Tea (que vous pouvez tester vous même directement sur la page de démo) :

Champ email en HTML5

A noter que le navigateur stylise lui-même le champ email : l’ombre portée rouge tout comme la petite tooltip n’ont pas été ajouté en CSS. C’est le navigateur qui les transforme. C’est super je sais… ;)

  • Si vous avez bien analysé notre code HTML5 vous avez remarqué l’attribut « placeholder » qui permet d’afficher un texte dans le champ et de le faire disparaître lorsque l’utilisateur clique dans celui-ci. Plus besoin de Javascript !

Champ email en HTML5

  • Il y a aussi l’attribut « required » que j’ai ajouté. Fort utile, il permet au navigateur de comprendre que remplir ce champ est nécessaire avant de pouvoir envoyer le formulaire. Si je ne remplis pas le champ et que je clique sur le bouton submit, mon navigateur (moderne) va automatiquement m’avertir que je n’ai pas rempli un champ requis :

Champ email en HTML5


NB : Sous les anciens navigateurs, les types email et url entre autres sont interprétés comme des input de type text, il n’y a donc pas d’inquiétude à  avoir ! Par contre certains autres input ne se dégradent pas si bien et sont actuellement inutilisables comme l’input color ou encore l’input range.

Je ne sais pas pour vous mais ces petites nouveautés m’ont fait aimer encore plus l’HTML5 !


Le footer

Footer html5

Il n’y a pas grand chose à  dire sur le footer, il est bien entendu inclu dans une balise <footer> étant donné que c’est bien un pied-de-page. Les liens vers les réseaux sociaux sont quant à  eux placés dans une balise <aside> et le reste n’est que du texte. Rien de bien compliqué en somme !

</pre>
<footer id="footer_site"><aside>
Retrouvez-nous aussi sur :

<a href="#"><img alt="Joignez-nous sur Facebook" src="images/fb.png" /></a> <a href="#"><img alt="Joignez-nous sur Twitter" src="images/twitter.png" /></a></aside>
© Gaétan Weltzer   Tous droits réservés - tutoriel pour Living Tuts : <a href="http://www.livingtuts.com">www.livingtuts.com</a>
<div class="cl"></div>
</footer>
<pre>

  


Etape 3 : La mise en page avec CSS3

Voici l’étape la plus longue mais aussi la plus plaisante pour tout webdesigner car c’est là  que votre design prend littéralement vie en habillant votre squelette HTML.

Je vais découper le CSS pour chaque partie sans expliquer tout le code en détail. Je pars du principe que vous avez déjà  des connaissances basiques en CSS. Je n’expliquerai que les nouveautés CSS3 ainsi que 2-3 points délicats. Pour le reste, j’estime que le code ainsi que les commentaires sont suffisants. Bien entendu, toutes les propriétés et possibilités offertes par le CSS3 ne seront pas abordées dans le cas de ce tutoriel, mais j’ai cherché à  les utiliser au maximum.


L’ajout des typographies avec @font-face

Si vous avez réalisé la première étape du webdesign ou simplement si vous avez l’oeil affuté, vous aurez remarqué qu’il y a 3 polices différentes dans cette page : Arial pour les paragraphes, Melbourne pour les titres et le menu de navigation ainsi que Ginko pour le bloc d’actualités.

Melbourne et Ginko n’étant pas natives sur les systèmes d’exploitation d’aujourd’hui, je les ai incorporé dans ma page via la propriété CSS @font-face comme il suit :

</pre>
@font-face { font-family: Melbourne;
 src: url('fonts/Melbourne_regular_basic.otf');
}
@font-face { font-family: Ginko;
 src: url('fonts/GINKO.TTF');
}

Qu’est-ce que ça signifie ? bêtement que nous allons créer une nouvelle « font-family » qui pourra être appelée par la suite dans notre feuille de style. La deuxième propriété est « src » qui spécifie où se trouve le fichier de votre typographie. Cela nécessite donc d’uploader la typographie sur un serveur afin de pouvoir l’utiliser sur votre site. Grâce à  ces quelques lignes, vous avez ajouter les deux polices prêtes à  l’emploi.


Un léger reset CSS

</pre>
body {
font-family: Helvetica, Arial, Verdana, sans-serif; /*Merci à  Gili pour son commentaire ;)*/
font-size:14px;
margin: 0;
padding: 0;
color: #000;
}

ul, ol, dl, h1, h2, h3, h4, h5 {
padding: 0;
margin: 0;
font-weight:normal;
}

ul, ol {list-style-type:none;}

a img {       border: none;}

/*Prise en charge de HTML 5 - Définit les nouvelles balises HTML 5 sur display:block afin que les navigateurs sachent comment effectuer un rendu correct des balises. */
header, section, footer, aside, nav, article, figure {
display: block;
margin:0;
}

J’ai simplement repris et épuré le reset CSS que Dreamweaver m’avait généré. Il permet d’éviter certaines différences d’affichages entre les navigateurs et également de définir quelques styles de base, notamment pour body.

La ligne intéressante dans notre cas est la prise en charge des nouvelles balises HTML5. Sachant qu’elles sont récentes, certaines version de navigateurs ne connaissent pas les propriétés associés, notamment qu’il s’agit bien d’éléments de type « block » et non pas « inline ».


Classes réutilisables et style des textes

</pre>
.cl {clear:both}
.margin20 { margin-bottom: 20px;}

/* La définition du style des liens de votre site doit respecter cet ordre, y compris le groupe de sélecteurs qui créent l'effet de survol. */
a:link {color: #42413C;}
a:visited { color: #2b2a25;}
a:hover, a:active, a:focus { /* ce groupe de sélecteurs offrira à  un navigateur au clavier la même expérience de survol que celle d'une personne employant la souris. */
text-decoration: none;
}

h2 {font-size:28px;
font-family:Melbourne;
padding-bottom:6px;
background:url(images/bg_titre.jpg) no-repeat bottom left;}

J’ai pour habitude de créer plusieurs classes au début de ma feuille de style que je réutilise tout le long du site comme par exemple la classe « cl » (clear:both) ou encore des classes pour rendre des textes gras, ou des float, etc… Cela peut être très utile et peut alléger considérablement votre code dans le cas de gros sites. Ici nous n’avons qu’une seule page, c’est donc relativement léger.

Ensuite je stylise mes liens <a>, bien que souvent j’applique ensuite à  chacun un style particulier.

Enfin, dernier point, je définis un style pour tous mes titres <h2>. Il est intéressant ici de voir comment je change la police par Melbourne, celle que nous avons ajouté au début de ce document. Il suffit d’assigner « font-family:Melbourne » qui reprend le nom donné plus haut.


Structure générale de la page

</pre>
body { background: url(images/bg_header.jpg) center top no-repeat, url(images/bg_body.jpg) repeat;}

#header_top {height:176px; padding-top:29px;}

.container {
width: 1000px;
margin: 0 auto; /* la valeur automatique sur les côtés, associée à  la largeur, permet de centrer la mise en page */
}

.content ul, .content ol { padding: 0 15px 15px 40px;}

On peut noter ici l’emploi d’une propriété CSS3 extrêmement pratique et même jouissive ! Il s’agit du multiple backgrounds. Si vous regardez bien j’ai ajouté à  ma balise body deux images de fond à  partir d’une seule propriété background. Il suffit de les séparer par une virgule et le tour est joué !

Vous comprendrez aussi en lisant cela à  quoi sert notre div .container qui avait été crée précédemment pour un seul soucis de mise en page. Elle sert à  centrer tout le site en lui assignant la largeur de 1000px.


Le menu de navigation

</pre>
#menu_top {
height:26px;
background-color:rgb(107,158,46); /*alternative pour les vieux navigateurs (sans transparence ici)*/
background-color:rgba(107,158,46,0.6); } /*le fond uni avec transparence comme on aime*/

#menu_top ul {
width:565px;
padding-left:435px;
margin: 0 auto;
list-style: none;
}
#menu_top ul li {float:left;}
#menu_top ul a, #menu_top ul a:visited {
padding: 2px 17px 0px;
display: block;
font-family:Melbourne;
font-size:18px;
color:#fff;
text-shadow:0 1px 2px #555;
text-decoration: none;
}
#menu_top ul a.actif, #menu_top ul a:hover, #menu_top ul a:active, #menu_top ul a:focus {
background:url(images/menu_hover.png) center top no-repeat;
}

J’utilise pour le menu du haut 2 propriétés introduites par le CSS3 :

- background-color en rgba qui permet de gérer la couche alpha, donc la transparence du fond

- text-shadow : il s’agit de l’ombre portée qu’on peut ajouter à  du texte. Les valeurs sont dans l’ordre : text-shadow : coordonnée x     coordonnée y     flou    couleur;

Pour le reste le code est classique pour un menu horizontal. Il est toujours bon de le garder sous la main !


La partie haute du site : la zone forte

.content_hp {margin-bottom:20px; color:#595959;}
.content_hp h2 { padding:0 0 6px 30px; background:none;}

/* A nouveau, multiple background pour mes 3 titres */
.content_hp h2.titre1 { background:url(images/icone1.jpg) left top no-repeat, url(images/bg_titre.jpg) no-repeat bottom left;}
.content_hp h2.titre2 { background:url(images/icone2.jpg) left top no-repeat, url(images/bg_titre.jpg) no-repeat bottom left}
.content_hp h2.titre3 { background:url(images/icone3.jpg) left top no-repeat, url(images/bg_titre.jpg) no-repeat bottom left}
.content_hp header {padding:10px 0; height:160px;}
.content_hp figure { float:left; margin-left: 20px; margin-top:-8px; }

.content_hp article {
 width:290px;
 margin:0 21px;
 float:left;
}

.content_hp a#header_more {
 float:right;
 margin-right:94px;
 padding-left:12px;
 font-size:13px;
 color:#517317;
 text-decoration:none;
 background:url(images/puce_header_more.png) left center no-repeat}
.content_hp a#header_more:hover { text-decoration:underline;}
.content_hp p { color:#595959; font-size:14px; }

Il n’y a ici rien de compliqué, prenez le temps de bien lire chaque propriété.


Le bloc d’actualités

Toujours de haut en bas et de gauche à  droite dans ma méthode de mise en page CSS, passons au bloc d’actus.

aside#news {
 /*On définit bêtement les propriétés de placement et de dimensions au bloc...*/
  width:530px;
  height:325px;
  padding:35px 15px 40px 15px;
  margin-top:40px;
  /*Puis on le fait flotter à  gauche pour qu'après les 2 blocs suivants se placent à  côté (et non en-dessous)*/
  float:left;
  background:url(images/bg_news.jpg) top left no-repeat;}

#news article { position:relative; padding-left:50px;} /*Chaque article reçoit une position:relative afin de placer les éléments qu'il contient à  partir de son origine. C'est utile pour le footer de l'article (voir plus bas)*/

#news h2 { visibility:hidden;} /*On cache le</pre>
<h2>mais on laisse l'espace qu'il occupait pour pousser le contenu vers le bas. Le titre est intégré dans le background en image.*/
#news h3 a{
 font-size:15px;
 font-weight:bold;
 color:#270f0a;
 text-decoration:none;}
#news p{ font-size:13px; color:#270f0a}
#news p.lire_suite a{
 font-size:13px;
 font-style:italic;
 color:#830f00;
 text-decoration:none;}
#news p.lire_suite a:hover{ text-decoration:underline;}

#news footer {
 /*On positionne ce bloc en absolu par rapport à  l'article conteneur (grâce à  notre précédent position:relative sur</h2>
<article>)*/
 position: absolute;
 /*Ainsi il se place tout en haut à  gauche de l'article.*/
 left: 0px;
 top:0px;
 width: 38px;
 height:61px;
 padding:19px 0 0 13px;
 background:url(images/bg_date.png) no-repeat top left;
}
#news footer time { font-size:15px; color:#5c1100; font-family:Ginko;}
#news footer time span { font-family:Arial, Helvetica, Verdana, sans-serif;}
.contenu_article {margin-bottom:23px;}
.contenu_article p {margin:7px 0 0px;}

Les commentaires devraient suffire à  éclaircir ce gros bout de code mais je préfère expliquer deux points moins habituels que les autres.

Le titre du bloc (<h2>) a bien été écrit en HTML mais dans un soucis de gain de temps, le titre a été intégré directement dans l’image de fond du bloc, il n’est donc pas nécessaire de laisser s’afficher celui en HTML par-dessus. Cela explique la propriété visibility:hidden qui lui est appliquée. La balise <h2> est bien là , notamment pour le référencement, l’espace qu’elle occupe est conservé mais en revanche le texte est simplement caché pour laisser apparaître le texte de l’image de fond.


Le point plus délicat est mon placement des <footer> (le petit bloc de date à  gauche des actualités). Ils sont placés en position:absolute par rapport à  l’origine de la balise <article> qui le contient. Pour cela chaque <article> s’est vu assigné un position:relative. Ainsi lorsqu’un élément à  l’intérieur est placé en absolute, le navigateur comprend qu’il est placé par rapport à  la position de la balise <article>.

Ainsi avec top:0px; et left:0px; je place mes <footer> tout en haut à  gauche dans le bloc de la balise <article>. Ensuite je « pousse » le titre et le texte de l’actualité en ajoutant un padding à  <article>. Essayez par vous-même en écrivant les lignes une par une, cela sera plus clair si ça ne l’est pas !


Les blocs en bas à  droite

Courage, on approche de la fin de la page !

</pre>
#store_locator ul { list-style-image:url(images/puce_feuille.png); padding-left:28px;} /*On ajoute notre image de feuille comme puce pour chaque élément de la liste*/
#store_locator ul li {float:left; width:160px;} /*On indique que tous les
<ul>
	<li>flottent à  gauche*/
#store_locator ul li:nth-child(2n) {float:right;} /*Ici le sélecteur CSS3 permet de faire flotter à  droite un</li>
	<li>sur deux (2n)*/
#store_locator ul a { text-decoration:none; color:#3c580c;}
#store_locator ul a:hover { text-decoration:underline;}

#home_bas {
width:393px;
float:left;
color:#414141;
margin-top:40px;
margin-left:32px;}

#newsletter {
margin-top:30px;
height:225px; /*La hauteur est nécessaire pour pouvoir afficher l'image tout en bas*/
background:url(images/pot_newsletter.png) no-repeat bottom right;}
#newsletter input[type=email] {width:225px;}
#newsletter input[type=submit] {
 width:103px;
 color:#ffebc1;
 height:26px;
 margin-top:8px;
 text-shadow:0px -1px #802a15;
 border:none;
 cursor:pointer;
 background:url(images/bg_btn.jpg) no-repeat center top;
}
<pre>

Il n’y a dans cette partie rien de très compliqué mais il y a une nouveauté CSS3 qui repose dans les nouveaux sélecteurs. Cet outil très puissant permet de choisir de façon périodique un élément comme bon vous semble. J’explique la ligne :

</pre>
#store_locator ul li:nth-child(2n) {float:right;}
<pre>

Comme il est dit en commentaire, cette syntaxe « :nth-child(2n) » permet ici de sélectionner tous les n éléments spécifiés. Donc ici j’applique mon float:right à  1 <li> sur 2. Si j’avais eu « li:nth-child(4n)« , j’aurais appliqué ma propriété à  1 <li> sur 4. A chaque fois 1 <li> flotterait à  droite, puis 3 à  gauche, puis à  nouveau 1 <li> flotterait à  droite, puis 3 à  gauche, etc… Le reste est relativement basique, je n’entrerais pas dans le détail ! ;)

Le footer… et c’est presque fini !

</pre>
#footer_site {
padding: 15px 0;
height:65px;
position: relative;/* donne hasLayout à  IE6 de façon à  permettre un effacement correct */
background:url(images/bg_footer.png) no-repeat center top;
}

#footer_site aside {float:left; padding-left:56px;}
#footer_site aside p+p {margin:-1px 0 0 7px;} /*Je sélectionne la balise
 qui suit une balise
*/
#footer_site p { margin: 3px 0; float:left; color:#45444; font-size:13px;}
#footer_site p#copyright { float:right; color:#6e6e6e; font-size:12px;}
#footer_site p#copyright a { color:#556d2f;}
<pre>

Ici le code est tout à  fait basique : j’ajoute un fond au footer et je place les différents éléments à  l’aide de float left et right.

L’intégration de la page est terminée ! Vous pouvez ouvrir cette page sous Firefox, Chrome ou encore Safari, son affichage sera identique dans ces navigateurs modernes.


Pour Internet Explorer : du debug encore et toujours !

Internet Explorer il est méchant, vilain et pas beau en plus de ça ! La plupart des problèmes dus à  l’HTML5 sont corrigés grâce à  notre script entré au tout début du fichier HTML. Mais il subsiste toujours des problèmes de CSS car il n’y a à  ce jour aucune méthode pour corriger l’absence de compréhension de certaines propriétés par IE (corrigez-moi si je me trompe !). Il faut donc palier à  ce problème comme pour chaque projet en utilisant des commentaires conditionnels et autres astuces.

Voici les corrections apportées à  notre CSS via la feuille de style alternative ie8.css :

- Si vous testez sous IE8, vous constaterez que les « multiple backgrounds » en CSS3 n’affichent rien, ce qui est normal. Il manque donc les images de fond de <body> et des <h2> du bloc principal. La seule solution est de coder « à  l’ancienne » en rajoutant des divs pour ce navigateur et en leur assignant un fond. Entre les balises <body>, j’ai donc rajouter une div qui contient tout le site qui a comme classe « fond_ie ». Le code pour vous éclairer :



 <!--[if lte IE8]>

<div id="fond_ie">
 <![endif]-->

Tout le reste de la page

 <!--[if lte IE8]></div>

 <![endif]-->
 

Le CSS associé dans ie8.css :

body { background:url(images/bg_body.jpg) repeat;}
#fond_ie { background: url(images/bg_header.jpg) center top no-repeat;}

 

 

 

 

 

Même problème pour les 3 titres de la partie du haut de la page, voici la solution : il suffit de rajouter un <span> dans chaque <h2> et de le contraindre à  devenir un bloc auquel on ajoute la deuxième image de fond (l’icône).

L’ HTML modifié pour chaque titre <h2> de ce bloc dans l’index.html tout d’abord :

</pre>
<h2><span>75 variétés de thé</span></h2>
<pre>

Puis le CSS associé :

.content_hp h2.titre1, .content_hp h2.titre2, .content_hp h2.titre3{ background: url(images/bg_titre.jpg) no-repeat bottom left; padding:0 0 6px 0px}

.content_hp h2 span {padding-left:30px;}

.content_hp h2.titre1 span {display:block; background:url(images/icone1.jpg) left top no-repeat;}
.content_hp h2.titre2 span {display:block; background:url(images/icone2.jpg) left top no-repeat;}
.content_hp h2.titre3 span {display:block; background:url(images/icone3.jpg) left top no-repeat;}

 

 

 

 

 

 

3è différence : le menu de navigation n’a pas de fond semi-transparent. Encore une fois c’est normal car la propriété rgba n’est pas comprise par les vieux navigateurs – et IE - mais il existe une astuce pour contourner cela. Il s’agit d’un filtre Microsoft pour créer des dégradés que nous allons détourner afin de changer la couleur de fond et sa transparence :

#menu_top {
  background:transparent;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#906b9e2e,endColorstr=#906b9e2e);
  zoom: 1; }

Nous aurions aussi pu utiliser comme remplacement une image de fond de 1 px sur 1 px semi-transparente qui aurait fait l’affaire. Mais cette méthode est plus rapide et plus « propre » si on peut appeler cela ainsi.

Et voilà , nous avons le même affichage sous IE8 que sous Firefox ou Chrome. Après tout, c’est toujours un plaisir de perdre un peu de temps grâce à  IE !.. ou pas je suis d’accord…

 

Plus que IE7…

En ouvrant ma page sous IE7, je m’aperçois sans surprise qu’il y a là -aussi de petites différences. Dans une nouvelle feuille de style nommée ie7.css, je corrige les deux bugs restants à  savoir :

- les liens du menu qui sont coupés : il semble que les liens n’aient pas assez d’espace pour afficher tous les mots sur la même ligne. Pour ne pas perdre trop de temps, je décide de simplement rajouter une largeur à  mes liens et de centrer le texte. Cela a résolu le problème bien que ce ne soit pas parfait (oui on peut dire que j’ai un peu la flemme sur ce coup-là  ! :P)

#menu_top {
  background:transparent;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#906b9e2e,endColorstr=#906b9e2e);
  zoom: 1; }

- les puces de la liste de boutiques qui ne s’affichent pas : IE7 n’interprète pas ici mon list-style-image:url(images/puce_feuille.png); Pour la peine, je passe alors les images en tant que background des <li> et non plus comme puce de la liste.

#menu_top {
  background:transparent;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#906b9e2e,endColorstr=#906b9e2e);
  zoom: 1; }

Vous l’aurez compris, face aux éternels bug d’IE, il faut savoir être inventif quelque fois. A la longue, on constate même des bugs d’affichage redondants et on peut même empêcher tout de suite les bugs en prévision.


Fin du tutoriel

Enfin, voici la fin de ce tutoriel long et compact. Voici ce que nous avons réalisé et appris :

- découpage de la maquette en plusieurs images optimisées

- écriture du squelette HTML en suivant les recommandations sur l’HTML5

- explication des nouvelles balises HTML5 et de nombreux attributs et spécificités

- mise en page en CSS

- emploi et explication des nouveautés apportées par le CSS3 (multiple backgrounds, nouveaux sélecteurs, text-shadow, etc…)

- débogage d’Internet Explorer 8 et 7

- techniques et astuces nécessaires pour l’emploi de l’HTML5 pour votre projet

NB : Il existe toujours plusieurs façon d’intégrer une page HTML/CSS il est donc possible que vous soyez tentés d’utiliser différentes méthodes ou différentes balises et propriétés selon les cas. Cela est normal !


Structure de la page en HTML5

Structure non détaillée de notre page en HTML5



Tutoriel webdesign

Page du tutoriel – ce qui a été crée dans Photoshop dans la première partie et ce que nous avons maintenant intégré en HTML5/CSS3


Webdesign intégré et vu sous Chrome

Capture d’écran de la page ouverte dans Google Chrome – identique à  la maquette !

Voici la fin de cette deuxième étape du tutoriel « Créer un site d`entreprise de A à  Z ». J’espère vous avoir appris des choses et donné envie de plonger plus profondément dans l’HTML5/CSS3.

Je vais faire mon maximum pour que la suite du tutoriel, à  savoir le développement PHP/MySQL des front et back office (administration) sorte dans un temps moins long que pour celui-ci !

Si vous avez des questions, n’hésitez pas à  les poser, je suis là  pour y répondre. Si celles-ci concernent les bases du CSS ou un problème relativement simple, je vous invite tout de même à  faire une petite recherche au préalable. Quelque fois la solution est trouvée en seulement 2 clics !

90 Comments to “Créer un site d`entreprise de A à  Z 2/3 : Intégration HTML5 / CSS3”

  • Beaucoup l’attendaient, le voilà enfin ! :D

    • Super tuto !!! Merci beaucoup.

  • Sympatosh tout ça ! Peux tu mettre une version en ligne ? Histoire de voir ce que ça donne sans avoir à télécharger la page :D
    Et puis comme ça on peut voir si au niveau du chargement c’est pas trop long ;) (point important dans la réalisation d’un site web)

    • Merci. En effet je savais bien que j’avais oublié quelque chose ! Je mets en ligne la page de démo dès que je peux (ce soir au plus tard). Merci de l’avoir fait remarquer.
      Pour le chargement il ne devrait pas y avoir de problème sachant qu’il n’y a aucune requête derrière. Les images du site ne font pas 4Mo alors ça devrait aller.

  • Super tuto comme toujours de plus l’utilisation de l’html5 et du CSS3 le rend encore plus intéressant ! bon boulot !

  • Eh bien ça valait la peine d’attendre !

    g² comme on dit !

  • Super tuto qui tombe a pique pour moi !

    J’ai pas encore lu le tuto (ca va pas tarder !)

    Le back office va être développer de A à Z ou utiliser un cms déjà existant ?

  • Sauf erreurs de ma part, tu a oublier de mettre les class= »titre1″ (titre1,titre2,titre3) dans le code html ! ;)

    • Merci pour l’info ! Je ne sais pas pourquoi quand j’ai copié-collé le code dans l’interface du site, toutes les classes de mes balises ont été supprimées. j’ai dû oublier de remettre celles-ci. Je corrige de suite.

  • J’ aurai juste rajouté un « cursor: pointer; » sur le bouton d’ inscription à la newsletter … ;) Sinon super tutoriel !

    • En effet très bon ajout je n’y ai pas pensé. C’est déjà rajouté ! ;)
      Merci

  • Vraiment un superbe tuto. Rien à dire à part : encore, encore !!

  • [...] 2eme partie du tutoriel Flux RSS 2.0 des commentaires. [...]

  • Ah mais c’est excellent tout çà ^^
    Encore merci Spartan pour le travail.
    On l’attendait c’est vrai !!!
    Maintenant je vais pouvoir un peu regarder tout çà et comparer avec mon travail.

    Et sinon très bon tuto.

  • Votre blog est très inspirant. Il y a des techniques à respecter pour créer un blog professionnel et je constate que vous en maîtrisez les aspects. Le fait de créer un blog professionnel semble être devenu une tendance, mais c’est bien plus que cela, c’est une nécessité pour se démarquer du lot et être considérés comme réactifs et modernes.

    Les sujets que vous avez choisi d’aborder me touchent beaucoup en ce moment. Merci à vous d’avoir pris le temps de publier cet article.

  • Ok, alors je veux la même chose mais en 800 pages… ^^
    Sérieusement j’ai lu les deux parts en OneShot, mais je veux dire c’est du régale à l’état pur !!!!

    Seul reproche, il m’aurait plu de voir 2,3 roughs… pour le début de la part 1…

    Du très bon vraiment tout le monde devrait le lire avant de mourir !

    • Merci pour ton commentaire. Pour l’étape 1, je n’ai tout simplement pas fait de roughs. Dans le cas de ce webdesign je n’en ai pas eu besoin, c’est pourquoi cela n’apparaît pas dans le tuto.

  • OUAH!! Merci beaucoup, si c’est pour nous offrir des tutos comme ça, tu peux nous faire attendre!

    • Haha je pourrais te prendre au mot ! Surtout qu’il reste une troisième partie à faire… x_x

      Merci ton commentaire me fait plaisir en tout cas.

  • Merci pour vos commentaires. :)

  • Bravo pour ce tutoriel, par contre j’ai essayé la démo sous IE9, et rien ne s’affiche à part les 2 backgrounds (aucun contenu)

    • Merci de m’en avoir averti. Le problème est réglé ! (cela venait d’un caractère mal encodé apparemment. Sacré IE…)

      • Pas de soucy, j’ai verifié, c’est bon de mon coté.

        @pluche

  • Excellent tutoriel ^^

    Mais le HTML5 n’étant supporté que par les navigateurs récents, dans un soucis de rétro-compatibilité, n’est-ce pas un peu dangereux de déjà l’utiliser dans des projets professionnels ?

    • Merci LuciferX. Actuellement et comme je le prouve ici, on peut déjà utiliser l’HTML5 ici, surtout pour de « petits sites ». De nombreuses grosses agences dans le monde ne jurent déjà plus que par l’HTML5. Pareil pour de nombreux CMS où les thèmes sortent en HTML5. Après il faut faire attention car il y a en effet quelques petits points sensibles, il faut maîtriser le sujet savoir ce qui sera rétro-compatible ou pas.

  • Hello,
    bon je reviens vers toi Gaétan, j’ai quelques questions…

    Font-face fonctionne bien qu’avec html5/css3, parce que j’ai fait un moment que je me bas avec mon boss pour avoir des typos web ^^.

    Ensuite tu me conseillerais quoi comme livre pas trop pompeux et pas trop chère.
    ex :http://www.eyrolles.com/Informatique/Livre/html5-pour-les-web-designers-9782212128611

    Parce que j’ai vraiment bien aimé la sémantique du html5, et je pense fortement y passer au boulot, ou dû moins essayer. Vu qu’on a encore des clients sous ie6 :( si si c’est vrai !

    Et pour finir la création de la page html5, je suis sous cs4, donc quand je crées un document, j’ai du html4. Il faut que je passe sous cs5 ou il y a une alténative ?

    Merci
    j’ai peut être oublié quelques questions mais c’est déjà bien si j’ai des réponses sur celles-ci.

    :p

    • Salut Sébastien, j’ai lu ton commentaire et même si je suis pas aussi bien informé que Gaétan sur la question , je pense pouvoir t’éclairer sur quelques unes de tes questions.

      Toud d’abord, @font-face c’est du css, ça ne dépend donc pas de la version (x)HTML de ta page.

      Pour les livres je n’ai rien de spécial à te conseiller, n’ayant pas beaucoup d’argent je me nourris des tutos gratuits sur internet.

      Enfin, pour la rédaction de tes pages HTML, je te conseille fortement d’abandonner dreamweaver, choisis plutôt un éditeur de texte spécialisé du style : Notepad ++
      Tu peux faire absolument tout ce que tu veux avec et puis y’a pleins de petits outils intégrés dedans qui permettent de faire des merveilles !

      Voilà voilà, j’espère avoir éclairé un tantinet soit peu ta lanterne.

      À la prochaine ;)

      • Mwea a bien résumé tous les points dans l’ensemble.
        Pareil pour le livre, j’ai tout appris à partir d’Internet mais j’ai eu de très bon échos sur le livre que tu as mis en lien.

        Pour ce qui est du choix du logiciel, j’utilise Dreamweaver qui remplit très bien son rôle. Notepad aussi est tout à fait efficace mais il n’a pas l’auto-complétion, les liens directs des fichiers inclus et d’autres petits avantages. Tant que tu peux écrire du texte de toute manière, tu peux coder !

  • Super tuto je l’attendais depuis longtemps…

    Par contre je suis déçus sur un point, avec ce tutoriel tu renforces l’idée que les gens ont de se dire qu’ils font de l’HTML5 en mettant son doctype et en utilisant les nouvelles balises.

    Hors, mêmes dans les versions récentes des navigateurs ces nouvelles balises sont vue comme de simples balises de type bloc, donc n’apporte aucun sens sémantique supplémentaire

    Bref tout ça pour dire qu’on ne fait pas de l’HTML5 parce qu’on met un au lieu d’un , ce que beaucoup de personnes semblent croire.

    Mais bon sa reste un super tuto ^^

    A bientôt

    • EDIT message précédent :

      Bref tout ça pour dire qu’on ne fait pas de l’HTML5 parce qu’on met une balise header au lieu d’un div muni d’une ID header , ce que beaucoup de personnes semblent croire.

      (les commentaires n’acceptent pas les balises Oo)

  • Un troisième pour la route (pas ma faute, il n’y a pas d’édit sur les comms :

    Haaaaaaa !!

    stupéfaction, dans le reset que tu as reformulé, tu as mis Arial avant Helvetica, j’aurai jamais cru sa de toi !! (comme j’exagère :p)

    Je ne sais pas si tu connais l’histoire d’Helvetica, mais c’est une grande et très populaire police qui est utilisé à tout les coins de rue, Microsoft pour palier à cette police a inventé Arial. Qui est beaucoup moins classe qu’helvetica (pas mal d’articles font le tour de la question).

    Bref à mon sens, et à celui de nombreux graphistes j’imagine, Arial n’est qu’une pale copie d’Helvetica (en classe on s’amusent à deviner quelle texte est en Arial et lequel est en Helvetica).

    Ceci étant dit, dans ta reformulation du reset CSS tu as mis Arial avant Helvetica, j’en conclus que tu utilises Windows, car sur Win Helvetica n’existe pas donc pareil déclaration (font-family: arial, helvetica) semble ne te poser aucun problème.

    Cependant, pour les heureux utilisateurs des macs qui ont la chance d’avoir Helvetica sur leurs machines, n’auront pas l’occasion de la voire s’afficher fièrement sur ton site car tu as placé Arial en premier dans ta déclaration et les macs possèdent aussi bien Arial qu’Helvetica.

    Bref dans ta déclaration : font-family: Arial, Helvetica;

    Helvetica ne sera JAMAIS utilisé ^^, c’est une erreur qui revient très souvent, même dans des CMS connu, pourtant c’est une grosse erreur ^^

    Pourtant c’est bien Arial l’usurpateur, donc faut le mettre en premier dans la déclaration de font-family, j’invite tout ceux qui lisent mon commentaires à le faire, ca ne coute rien et c’est LA démarche logique, placé Arial avant Helvetica est un non sens, au temps ne mettre qu’Arial ca revient à la même chose alors ^^

    Bon désolé pour le flood mais ca me tien a coeur ça ^^

    • Alors je réponds à tes 3 commentaires ici :

      - je ne comprends pas ta critique sur l’utilisation de l’HTML5 : cela englobe un nouveau doctype, de nouvelles balises pour la sémantique mais aussi des balises plus fonctionnelles et stratégiques comme Video. Cela va avec les API HTML5 comme pour la géolocalisation et tout un flot de nouveautés. C’est l’évolution de l’HTML et une partie de ces nouveautés sont utilisées ici, je ne vois pas où est le malentendu.

      - sur peu de sites les commentaires acceptent les balises pour des raisons de sécurité ou alors certaines balises sont tolérées pour la mise en page du commentaire. ;)

      - pour ce qui est du reset, je vois en effet que le sujet semble te tenir à coeur ! Je te remercie, je connais déjà l’historique d’Helvetica et en effet j’ai mis Arial en premier par réflexe étant sous Windows. Tu as raison sur ce non-sens, je n’y avais jamais pensé. J’ai appris un truc. ;) Je vais le changer dans le tutoriel.

  • j’ai un question,
    il m’arrive souvent de faire une découpe de site en html en même temps que le css pour voir le résultat en temps réel.
    Est-ce mal ?
    Vu que celà fait plusieurs fois que je vois d’abord l’intégration en html et ensuite quand la page est monté, on attaque le css.

    • Je pense surtout qu’il faut être à l’aise avec sa méthode, peu importe laquelle c’est. Je préfère en effet d’abord écrire tout le squelette HTML car cela permet « de voir loin ». Ainsi tu peux tout de suite voir où créer les blocs et divs qui seront utiles pour la mise en page.

  • Un grand merci pour ce tutoriel et le précédent sur photoshop ou j’ai appris énormément de choses en matière de design.
    Ce que j’apprécie le plus c’est la démarche qui est expliqué de A à Z et non pas seulement un simple tuto « technique ».

    Du coup, moi qui hésitais à me lancer à HTML5/CSS3 je pense que c’est le bon moment (je dirais même que je suis en retard :P), surtout s’il existe des techniques comme les 2 fichiers javascripts présenté au début pour combler les défauts des vieux navigateurs !
    Et puis qu’est-ce que c’est agréable la vérification automatique de l’adresse email avec les nouveaux inputs … (même si on doit surement se retaper les verifs en PHP derrière …).

    J’attends impatiemment la 3ème partie =)

  • Encore une chose, on me critique encore avec dreamweaver, que je peux comprendre parfaitement.
    Nombreux sites en visualisation dans dream qui ne sont pas fiable.
    Mais j’apprécie énormément l’aide dans l’écriture du code, ça me fait gagner un temps fou, et m’évite des erreurs.
    Celà dit je suis pas contre a d’autres alténatives…
    J’ai déjà utilisé notepad++ mais je ne suis pas super a l’aise avec celui-ci.

  • Fantastique, ça c’est du tutoriel !

    Après, comme d’habitude, il faut coder spécialement pour IE ! Surtout que la version 9 n’accepte pas tous les attributs HTML5 !

    Bref, en tous les cas, ton tuto est super complet ! Merci !

  • Ça fait un moment que je l’attendais ! Et que vois-je ?! Le tutoriel est terminé, et il est énormément bien expliqué. Le choix du HTML5/CSS3 est une très bonne idée, ça va me permettre d’apprendre les balises de bases.

    Merci à toi en tout cas pour ce tuto, il est très bien foutu. Surtout que c’est un peu le seul dans le genre sur la toile dans cette qualité là. Encore bravo, ça m’a donné encore plus envie de me lancer dans HTML5, le truc des input est tout simplement génialissime !

  • Merci pour vos commentaires. Après tous ces efforts, je suis content de voir qu’il répond à vos attentes.

  • Bonjour,

    Super tutorial, j’i énormement appris, même en html5…

  • Merci pour ce tutoriel très complet, et très bien expliqué :)

    J’attend la suite et fin avec impatience !

    • Merci. La suite et fin arrive bientôt. Le développement est en cours et la rédaction commencé. Ce sera publié avant la fin du mois ! ;)

  • Bonjour Gaétan

    POur la partie trois de ce tuto très bien fait soit dit en passant, les notions de sécurités seront telles abordée pour le développement en php et mysql?

  • Hello,

    J’ai télécharger la source et testé en local, mais je suis bloqué d’entrer par la page de connexion……

    Un petit coup de pouce serait génial, merci d’avance.

    Antoine.

  • un grand merci pour ce magnifique tuto!!!
    vraiment ce n’est que du bon boulot!! Depuis le temps que je cherche,
    au moins j’aurais une certaine base pour pouvoir me mettre à fond dans html5!
    vraiment merci pour tout et bonne continuation!!!!

    • Merci pour ton commentaire, je suis content que ce tutoriel t’ai aidé.

  • Bonjour, j’ai parcouru le tuto sauf qu’il n’affiche rien sur IE. Quelqu’un peut me venir en aide. Merci

  • Que dire ? Très bon tuto et très bonne logique de construction et d’intégration !

    Je virevolte autour d’HTML5 depuis quelques temps sans jamais avoir pris le temps de vraiment m’y mettre… Tu as peut être réussi à me décider à enfin l’utiliser pour certains projets :)
    Je doit avouer que la possibilité de mieux structurer sémantiquement le squelette est vraiment intéressante.

    Je me pose quand même une ou deux questions…

    Peut-on avoir plusieurs h1 sur un site… dans une balise header d’une balise article par exemple ?
    Est-ce que du coup ça peut aider au référencement ou alors lui nuire ?
    Est-ce qu’il y a eu des études de faites de l’impact de html5 sur le référencement naturel ?

    Si quelqu’un peut éclairer ma lanterne :)

    Et si je peux me permettre d’apporter une astuce, pour ceux qui ne veulent pas utiliser @font-face, vous pouvez utiliser la solution proposée par Google Web Font, y a plus de 500 typos disponibles. Je trouve ça assez pratique quand on a pas forcement besoin d’afficher une typo spécifique. http://www.google.com/webfonts

  • [...] Créer un site d`entreprise de A à Z (2/3) : Intégration HTML5 / CSS3 [...]

  • Vraiment génial comme Tuto! La bible du webmaster débutant…

  • Bien sympa ce tuto !
    J’ai hâte d’intégrer mon nouveau site en Html5 / CSS3 maintenant ^_^

    Ya un petit bémol sur les 2 « screens » css pr ie8 à la fin : c’est encore les screens pour le dégradé d’ie7.

    Un grand  » Merci !  » :)

    ps : ahhhh can’t wait !! faut que je finisse mon design ! xD

  • Bonjour,

    Premièrement, merci pour ce superbe tutoriel qui en aidera plus d’un, dont moi !

    Ensuite je voudrais avoir une confirmation :

    Le site créé est fixe ? Dans le sens que ton premier bloc section n’est pas fait pour s’agrandir au vu d’un texte plus grand ? Je demande ca par rapport à ton découpage.
    Si c’est bien ça, comment faire pour les autres pages du site si nous voulons garder la même structure ? Refaire sous un logiciel un nouveau cadre, mais adapté à la taille du contenu prévu pour la nouvelle page ?

    Merci d’avance ! :)

  • Bonjour et merci pour le tuto,

    Est ce qu’il n’y aurait pas un élément en trop ici ? :
    ========================================
    #menu_top ul a.actif, #menu_top ul a:hover, #menu_top ul a:active, #menu_top ul a:focus {
    background:url(images/menu_hover.png) center top no-repeat;
    ========================================
    Je veux parler du a.actif

    • Non car l’objectif est que le lien de la page sur laquelle on se trouve soit visible comme étant actif. Il a donc le même style qu’un état de rollover quand on se trouve sur cette page.

  • idem pour :

    ===============================
    #news p.lire_suite a{
    font-size:13px;
    font-style:italic;
    color:#830f00;
    text-decoration:none;}
    #news p.lire_suite a:hover{ text-decoration:underline;}
    =======================================
    la classe .lire_suite n’est pas dans le code html initial (j’ai supprimé .lire_suite du code css pour que ça fonctionne)

    C’est peut être aussi une erreur de ma part, désolé si c’est le cas

    Merci

  • Très bien fait, merci (même s’il faudra plusieurs essais avant de faire à peu près ça…). Est-ce que le tuto fonctionne avec CSS2 ?

  • Bonjour;
    super tuto merci bcp d’avoir pris le temps de le mettre ainsi!
    je voudrais mettre mon site en ligne malheureusement j’ai un problème de zoom. Tout se passe bien sur IE et firefox (sisi!) mais sur Chrom en fonction de mes pages le zoom se change automatiquement.
    La balise body est pourtant bloquée…
    width: 1200px; max-width:1200px; min-width:1200px;
    position: relative;
    height: 800px; max-height: 800px; min-height: 800px;
    margin-top: 0 ;
    margin-left: 0 ;
    margin-right: 0 ;
    margin-bottom: 0;
    text-align: center;
    margin: auto;
    Est ce que qqn aurait une idée?merci d’avance!

  • Merci, c’est vraiment génial, mais si je puis me permettre, la maquette et le résultat final ne sont pas exactement identiques. Je veux parler du fond plan en arrière plan du slogan. Un oubli ?

  • Bonjour,

    Super ton tuto !
    Je suis allé télécharger le fichier html5shiv.js
    Il est noté pour ie 9 mais remplace t-il pour le ie 8 et ie 7

    Merci

  • Bonjour,

    Je vais peut-être poser une question idiote mais à quoi serve des balises fermé /pre ensuite ouverte aulieu que ça soit inversé et pour certaines il n’y a que des fermentes dans le code CSS

    Merci

  • merciiii bcp pour ce super tutoriel !

  • Sympa le tuto, je vais le mettre en application sur mon site en cours de dev

  • [...] (balise de type “block”) et les balises de type “inline” (pas de saut de ligne) </b> Créer un site d`entreprise de A à  Z 2/3 : Intégration HTML5 / CSS3 Design Spartan (Gaétan Weltzer) vous montre comment créer un site d’entreprise de A à Z en [...]

  • Salut.

    Excellent tuto, moi qui cherchais à apprendre le HTML5 et le CSS3.

    J’ai un petit soucis au niveau du css pour le background du menu. Je veux mettre une image à la place mais elle n’apparaît pas. L’url est correct et j’ai donc essayé avec le footer, ça marche nickel mais toujours rien pour le menu.

    • Salut, malheureusement les explications sont un peu floues. Il nous faudrait une URL pour constater le problème.

  • avec le message au complet c’est mieux!!

    j’ai «» qui s’affiche en haut de ma page sur IE9 et sur IE seulement bien sur??
    alors que je n’ai que le début du code du début de tuto: le markup.

    merci

  • Bonjour,
    Je repose ma question concernant des incompatibilités sous IE9: j’ai un bout de code qui s’affiche en haut de l’écran.( visible sur ces sites: http://projetmfrcb.mfrcb.com/ ou http://projetucpassy.ucpassy.fr/ )
    de plus les « text-shadow » ne s’affiche pas.

    Merci de votre et du super tuto.

    • Bonjour, ton lien ne marche pas chez moi.

      Concernant les text-shadows, ils ne sont pas pris en compte par IE (et oui toujours en avance sur son temps !). Le mieux est donc d’accepter d’avoir un affichage sans text-shadow sur IE, sinon d’utiliser un hack.

  • Un très bon travail bien complet. Merci pour l’effort.

  • Très bon tutoriel avec des explicitations simple.

    Bravo

  • [...] Créer un site d`entreprise de A à  Z 2/3 : Intégration HTML5 / CSS3 [...]

  • Salut!
    Très bon tutoriel,le seul probleme est que je n’arrive pas decompresser les fichiers du code source.
    Petit detail je suis sous Ubuntu,jai aussi essaye avec le terminal avec la commande unrar,je recois 29 failed…>_<

    • Salut, merci pour ton commentaire. Il semble que tu sois la seule personne qui s’est plaint de ne pas réussir à ouvrir le fichier et n’étant pas sous Ubuntu je ne pourrais t’aider. :/ En tout cas c’est un fichier RAR tout à fait classique. J’ai essayé avec UnrarX sous Mac et cela marche aussi bien que Winrar sur Windows.

  • Bonjour et merci pour ce grand travail.
    j’ai deux questions : Vous commencez avec la balise et terminer avec , ne fait-on pas l’inverse (commencer par et finir par .
    Ensuite, j’avais appris par W3C qu’il ne fallait pas mettre d’image dans une balise ???
    Merci bien et bonne journée.

  • Je kiff ce tuto graave!!!
    et je voudrais savoir cher ami, où est le js ki transmet l’email de la newsletter?

    Merci d’avance!

    • Un proverbe africain dit: je cite  » Trop presser arrive toujours tard »
      En effet j’avais pas pris le temps de bien le tuto j’ai trouver la reponse a ma question!

      Merci Spartan!

  • Bonjour et félicitation pour cet excellent travail pédagogique

  • c bon jai reussi luna24

  • [...] Créer un site d`entreprise de A à  Z 2/3 : Intégration HTML5 / CSS3 [...]

  • merci beaucoup pour le tuto ça sort du cadre que j’ai longtemps courtisé.il es complet

  • bonjour peut svt quelqu’un me aider ou on peut trouver votre css3 ou bien lancez a nous votre css3 que tu as travailler cette projet et merci d’avance

  • Une vraie mine d’or ! Merci !!!!

  • […] Créer un site d`entreprise de A à  Z 2/3 : Intégration HTML5 / CSS3 […]

  • […] Créer un site d`entreprise de A à  Z 2/3 : Intégration HTML5 / CSS3 […]

  • […] Créer un site d`entreprise de A à  Z 2/3 : Intégration HTML5 / CSS3 […]

  • […] Créer un site d`entreprise de A à  Z 2/3 : Intégration HTML5 / CSS3 […]

  • Ce fut un vrai plaisir de suivre cet excellent tuto. J’ai découvert plein de choses, reste à appliquer… Merci Gaëtan pour tout ce travail partagé.

Laisser un commentaire