18041 sujets

Questions générales et questions de débutants

Ma première découpe en HTML(5). Des conseils ?

Bonjour,

Voici ma première découpe d'une page fictive après avoir lu le bouquin "HTML5, une référence pour le développeur web".

C'est tout simple, pour une première découpe (après celui dans le tuto du sitedu*bip*) je me voyais pas faire plus complexe, voici une capture du résultat (design d'un tuto anglais) : http://imageshack.us/photo/my-images/338/capturevfc.png/

Maintenant le HTML et le CSS :

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="UTF-8" />
	<meta name="description" content="Site de vente en ligne : Téléphones mobiles, peluches teletubbies explosives" />
	<title>Shopzilla, your online shop ! Index</title>
	<link rel="stylesheet" type="text/css" href="styles/style.css" />
</head>

<body>
	
<div id="conteneur">
	<!-- header -->
	<header role="banner">
		<a href="/">
			<h1><img src="images/logo.png" alt="Shopzilla" />shop<span class="couleurpetante">zilla</span></h1>
			<h2>Your online shop</h2>
		</a>
	</header>
	<!-- navigation -->
	<nav role="navigation">
		<ul>
			<li><a href="#" class="current-item">Home</a></li>
			<li><a href="#">Computers</a></li>
			<li><a href="#">Mobile</a></li>
			<li><a href="#">DVD's</a></li>
			<li><a href="#">Music</a></li>
			<li><a href="#">Shoes</a></li>
			<li><a href="#">Garden</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
	<!-- banniere -->
	<div id="banniere" role="secondary">
		<img src="images/mobile.png" alt="Image représentant un mobile" />
		<h1>mobile <span>phones</span></h1>
		<p>Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur.</p>
	</div>
	<!-- contenu -->
	<div id="contenu" role="main">
		<section>
			<h1><span class="couleurpetante">Welcome to Shop</span>zilla</h1>
			<p>Procedente igitur mox tempore cum adventicium nihil inveniretur, relicta ora maritima in Lycaoniam adnexam Isauriae se contulerunt ibique densis intersaepientes itinera praetenturis provincialium et viatorum opibus pascebantur.<br><br>Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.</p>
		</section>
		<section>
			<h1><span class="couleurpetante">Latest</span> Products</h1>
			<aside>
				<img src="images/produit.jpg" alt="nom du produit" />
				<h1>Product name</h1>
				<p>Price: $20.00</p>
				<a href="#"><img src="images/iconepanniermini.png" alt="icone pannier" />Add to Cart</a>
			</aside><!--
		 --><aside>
				<img src="images/produit.jpg" alt="nom du produit" />
				<h1>Product name</h1>
				<p>Price: $20.00</p>
				<a href="#"><img src="images/iconepanniermini.png" alt="icone pannier" />Add to Cart</a>
		    </aside><!--
		 --><aside>
				<img src="images/produit.jpg" alt="nom du produit" />
				<h1>Product name</h1>
				<p>Price: $20.00</p>
				<a href="#"><img src="images/iconepanniermini.png" alt="icone pannier" />Add to Cart</a>
		 </aside>
		</section>
	</div><!-- menu a cote du contenu
 --><div id="menu">
		<section>
			<h1><img src="images/iconepannier.png" alt="icone pannier" />Shopping Cart</h1>
			<p class="grandtexte">$0.00</p>
		</section>
		<section role="search">
			<h1><img src="images/iconerechercher.png" alt="icone rechercher" />Search</h1>
			<form action="#" method="post">
				<input type="search" />
			</form>
		</section>
	</div>	
</div>

<footer role="conteninfo"><p>(c)2011 Shopzilla All rights reserved</p></footer>

</body>
</html>




@font-face {
    font-family: "LaPresse";
    src: url('fonts/LaPresse.ttf');
}
@font-face {
	font-family: "bell";
	src: url('fonts/LaPresse.otf');
}

h1, h2, p, ul {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: "bell", Verdana, arial, serif;
	color: #3e3e3e;
	background: #ffffff url('../images/fond.png');
}

#conteneur {
	width: 680px;
	margin: 30px auto 0 auto;
	box-shadow: 0px 0px 29px #aaaaaa;
	background: #ffffff;
}

.couleurpetante {
	color: #f56e89;
}

.grandtexte {
	font-size: 30px;
	font-weight: bold;
}
/* --------------------------------- */
/* =            Header               */
/* --------------------------------- */
header {
	width: 620px;
	height: 110px;
	padding: 10px 20px 0 20px;
	margin: auto;
	border-bottom: 1px solid #dddddd;
}

header h1 {
	font-family: "LaPresse", Verdana, arial, serif;
	font-size : 42px;
	font-weight: normal;
	text-transform: uppercase;
	color: black;
}

header img {
	vertical-align: middle;
	margin-right: 10px;
}

header h2 {
	font-size: 14px;
	font-weight: normal;
	color: #3e3e3e;
	margin: -25px 0 0 170px;
}

header a {
	text-decoration: none;
}

/* --------------------------------- */
/* =          Navigation             */
/* --------------------------------- */
nav {
	padding: 10px 0 10px 0;
	text-align: center;
}

nav li {
	display: inline-block;
}

nav ul li+li {
	margin-left: 22px;
}

nav a {
	text-decoration: none;
	color: #f56e98;
	font-size: 15px;
}

nav a:hover {
	border-bottom: 2px solid black;
}

/* --------------------------------- */
/* =           Banniere              */
/* --------------------------------- */
#banniere {
	height: 160px;
	margin-bottom: 5px;
	padding-top: 45px;
	padding-left: 370px;
	position: relative;
	background: #5ed5e9 url('../images/degradebanniere.png');
}

#banniere img {
	position: absolute;
	top: 10px;
	left: 110px;
}

#banniere h1 {
	font-family: "LaPresse", Verdana, arial, serif;
	font-size : 36px;
	font-weight: normal;
	text-transform: uppercase;
	color: black;
}

#banniere span {
	color: white;
}

#banniere p {
	width: 280px;
	font-size: 11px;
	text-align: justify;
	word-wrap: break-word;
	margin-top: -10px;
}
/* --------------------------------- */
/* =            Contenu              */
/* --------------------------------- */
#contenu {
	width: 450px;
	margin: 10px 10px 10px 10px;
	display: inline-block;
	vertical-align: top;
}

#contenu h1 {
	font-size: 16px;
	font-weight: normal;
	padding-bottom: 10px;
}

#contenu p {
	width: 100%;
	font-size: 11px;
	text-align: justify;
	word-wrap: break-word;
	margin-bottom: 10px;
}

#contenu aside {
	width: 118px;
	height: 168px;
	text-align: center;
	padding: 10px;
	margin-right: 10px;
	display: inline-block;
	background: #ffffff url('../images/fondaside.png') repeat-x bottom;
	border: 1px solid #333333;
	vertical-align: top;
}

#contenu aside h1 {
	font-size: 13px;
	font-weight: bold;
	padding: 0px;
}

#contenu aside p {
	text-align: center;
}

#contenu aside a {
	color: white;
	font-size: 11px;
	text-decoration: none;
	padding: 4px;
	background: #f56e89;
	border-radius: 6px;
}

#contenu aside a img {
	vertical-align: middle;
	margin-right: 3px;
}

/* --------------------------------- */
/* =              Menu               */
/* --------------------------------- */
#menu {
	width: 200px;
	margin-right: 10px;
	display: inline-block;
	vertical-align: top;
}

#menu h1 {
	font-size: 16px;
	font-weight: normal;
	padding: 10px 0 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #dddddd;
}

#menu img {
	vertical-align: middle;
	margin-right: 5px;
}

#menu input {
	width: 195px;
}

#menu p {
	text-align: center;
}

/* --------------------------------- */
/* =            Footer               */
/* --------------------------------- */
footer {
	text-align:center;
	font-size: 12px;
	font-family: Arial;
	margin-top: 10px;
}


Il y a t-il des choses que vous auriez fait autrement ?
Par exemple dans le header, je suis sûr qu'il y a moyen de placer le texte plus proprement en css, avez-vous des idées ?

Puis niveau sémantique, est-ce que les règles de bases sont bien respectés ? Je ne savais pas trop quoi utiliser pour les block dans Latest Products et j'ai mis des aside du coup.

Merci. Smiley biggrin
Modifié par milk (25 Nov 2011 - 11:37)
Salut,

C'est pas si mal pour une première découpe fictive. Quelques remarques, rapidement :
- tu peux rajouter une meta description, qui est utile ;
- il manque les roles des éléments HTML5 (role="banner" pour le header du document par exemple, etc.) ;
- l'attribut alt de ton logo devrait contenir le nom de la société fictive (titre de niveau 1 de la page), et surtout pas "logo" ;
- tant qu'à préparer l'intégration de la page, tu pourrais rajouter une classe "current-item" (par exemple) sur l'élément en cours dans la navigation, et le charter dfféremment pour qu'il soit identifiable.

C'est à peu près tout pour l'instant mais je dois filer… je repasserais plus tard mais nul doute que d'autres viendrons compléter d'ici là Smiley cligne
Très intéressent, je ne connaissais pas l’attribut role. L'ai-je manqué dans le livre de Rodolphe Rimelé ? Smiley confus

Je vais effectuer les modifications tout de suite, merci. Smiley biggrin


edit : sujet édité avec les modifications.
Modifié par milk (25 Nov 2011 - 11:09)
a écrit :
<meta name="Site de vente en ligne" content="Téléphones mobiles, peluches teletubbies explosives" />

Ce serait plutôt :
<meta name="description" content="Site de vente en ligne : Téléphones mobiles, peluches teletubbies explosives" />

"description" étant le nom de la méta utilisée, tu dois entrer cette description dans l'attribut content Smiley cligne 
<head role="banner">


Je pense que tu voulais mettre le role banner dans le header plutôt que dans le head. Là, c'est un peu étrange.
Effectivement c'est dans header que je voulais le mettre. J'ai édité un peu vite.

Merci.


Je vais découper quelques autres designs ce weekend, si je galaire sur l'un d'eux j'ouvrirai un nouveau topic. Je pense que ça vas être le cas, car ces deux là en particulier me font un peu peur Smiley lol : http://bloomwebdesign.net/myblog/2011/07/18/design-a-chrome-web-layout-in-photoshop/
http://bloomwebdesign.net/myblog/2011/04/19/design-a-social-networking-site-layout-in-photoshop/
Modifié par milk (25 Nov 2011 - 11:42)
Administrateur
milk a écrit :
Très intéressent, je ne connaissais pas l’attribut role. L'ai-je manqué dans le livre de Rodolphe Rimelé ? Smiley confus

Ce n'est ni toi ni dew qui l'avait manqué ... Smiley ohwell "bientôt" en annexe PDF gratuite le chapitre sur l'accessibilité qu'il a écrit en même temps que le reste du livre.
Modifié par Felipe (25 Nov 2011 - 17:02)
Felipe a écrit :

Ce n'est ni toi ni dew qui l'avait manqué ... Smiley ohwell &quot;bientôt&quot; en annexe PDF gratuite le chapitre sur l'accessibilité qu'il a écrit en même temps que le reste du livre.


Moi qui voulait me prendre le livre... si il est incomplet autant attendre la 2nde édition ? (Comment sera t-on tenue au courant de l'ajout du fichier PDF ?)
Sujet clos
Aller à