Intégration du layout de Watch My Desk
Maintenant que nous avons vu une bonne partie de théorie, nous allons attaquer l'intégration de la page d'accueil, lui appliquer le style, préparer les routes de chaque liens ...
Création de la maquette HTML / CSS à partir du design
Je procède toujours de cette façon, mais je ne dis pas qu'il s'agit de la meilleure ! Chacun fait comme il préfère: dans un premier temps, je découpe le design et récupère les images qui vont me servir.
Découpe du WebDesign
Voici à quoi va ressembler notre Homepage
Après avoir découpé notre webdesign (Si vous voulez apprendre une méthode de découpe de design sous photoshop, je vous conseille d'aller voir ce
http://www.lafermeduweb.net/tutorial/decoupe-du-design-p20.html), voici les images que nous obtenons:
Le fond des boutons du top
Le fond des boutons du top on Hover
Le fond du footer qui sera répété en X
Le fond du header qui sera répété en X
Le fond du top qui sera répété en X
Le bouton join now
Le logo transparent qui sera dans le top
Les icones de vote des bureaux
Uploadez toutes ces images dans le répertoire
web/images/design/ de votre projet.
Création de la maquette HTML
Passons maintenant à la création de la maquette HTML.
Nous allons directement la réaliser dans le fichier layout:
apps/frontend/templates/layout.php.
Commençons par la structure HTML:
|
<div id='conteneur'>
<div id='top'></div>
<div id='header'></div>
<div id='centre'></div>
<div id='footer'></div>
</div> |
Dans la div top, nous allons placer un lien avec le logo pour revenir à la page d'accueil du site:
|
<div id='top'>
<a href="" class='logo_wmd'>
<img src="/images/design/logo.png" alt="Watch My Desk - Show Off your Geekstation" title="Watch My Desk - Show Off your Geekstation" />
</a>
</div> |
Toujours dans cette div, nous aurons quelques boutons liens qui permettront d'accéder aux fonctions principales:
|
<div id='top'>
<a href="" class='logo_wmd'>
<img src="/images/design/logo.png" alt="Watch My Desk - Show Off your Geekstation" title="Watch My Desk - Show Off your Geekstation" />
</a>
<p class='boutons_top'>
<a href="" class='bouton'>Browse</a>
<a href="" class='bouton'>Join Now</a>
<a href="" class='bouton'>Log in</a>
<a href="" class='bouton'>Your desk</a>
</p>
</div> |
Nous renseignerons les liens plus tard dans le tutorial, car ils nécessiteront une modification des routes.
Passons maintenant au header du site:
|
<div id='header'>
<div class='title_head'>
<h1>Show Off <span>your geekstation.</span></h1>
<p>Watch My Desk is a website where you can share, browse and rate pictures of desks and computers of the world.</p>
</div>
<div class='join_now'>
<p>Join the website to share your desk or post comments, just in 2 clics !</p>
<a href=""><img src='/images/design/join_now.png' alt="Join now and show off your desk with the community !" title="Join now and show off your desk with the community !" /></a>
</div>
</div> |
Le contenu de la div centre, sera dynamique, nous allons donc pour le moment uniquement mettre le retour de l'action appelée:
|
<div id='centre'><?php echo $sf_content ?></div> |
Nous verrons le contenu du footer plus tard.
Intégration du design avec du CSS
Maintenant que notre structure HTML est prête, nous allons pouvoir attaquer le CSS pour mettre en forme notre design.
Ouvrez le fichier
web/css/main.css
Dans un premier temps, nous allons mettre les instructions qui vont reset les paramètres par défaut du CSS:
|
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
a img {
border: none;
} |
Passons maintenant à la structure générale du site:
|
#conteneur {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
#conteneur #top {
height: 40px;
width: 100%;
overflow: hidden;
background-image: url("/images/design/back_top.png");
background-repeat: repeat-x;
}
#conteneur #header {
height: 190px;
width: 100%;
overflow: hidden;
background-image: url("/images/design/back_header.png");
background-repeat: repeat-x;
}
#conteneur #centre {
overflow: hidden;
}
#conteneur #footer {
height: 142px;
width: 100%;
overflow: hidden;
background-image: url("/images/design/back_footer.png");
background-repeat: repeat-x;
} |
Voilà ce que vous devriez obtenir à cette étape:
La structure principale est en place, il ne nous reste plus qu'à appliquer le style des éléments à l'intérieur des divs:
|
#conteneur #top .logo_wmd {
float: left;
margin-left: 10px;
}
#conteneur #top .boutons_top {
float: right;
height: 40px;
margin-right: 20px;
margin-top: 9px;
}
#conteneur #top .boutons_top a.bouton {
display: block;
background-image: url("/images/design/back_bouton.png");
background-repeat: no-repeat;
color: #FFF;
width: 72px;
height: 19px;
line-height: 19px;
float: left;
text-align: center;
margin-right: 15px;
text-decoration: none;
}
#conteneur #top .boutons_top a.bouton:hover {
background-image: url("/images/design/back_bouton2.png");
} |
Maintenant stylons la partie header:
|
#conteneur #header .title_head {
float: left;
}
#conteneur #header .title_head h1 {
color: #2c4f56;
font-size: 40px;
font-weight: bold;
line-height: 35px;
margin: 30px 0 15px 80px;
text-shadow: 1px 1px 1px #FFF;
}
#conteneur #header .title_head h1 span {
font-size: 50px;
font-style: italic;
display: block;
margin-left: 40px;
}
#conteneur #header .title_head p {
color: #444444;
margin: 20px 0 0px 80px;
width: 450px;
}
#conteneur #header div.join_now {
float: right;
width: 205px;
margin: 30px 80px 0 0;
padding: 20px;
text-align: center;
background: #FFF;
border: 1px solid #c0c0c0;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
} |
Vous remarquerez sans doute que j'ai utilisé des propriétés CSS3, pas encore valides avec tous les navigateurs. J'exclue volontairement la compatibilité IE6 sur ce nouveau projet.
- text-shadow: Permet d'ajouter une ombre autour du texte.
- moz-border-radius: Permet d'arrondir les coins d'une bordure pour les moteurs Mozilla.
- webkit-border-radius: Permet d'arrondir les coins d'une bordure pour les moteurs Webkit.
Voilà pour la partie Layout, le design répété sur toutes les pages est prêt. Voici ce que vous devriez obtenir:
Préparation des routes de la page d'accueil
Maintenant, nous devons modifier tous les liens en utilisant l'helper
url_for et en utilisant les bonnes routes.
Modifions le HTML:
|
<!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="en" lang="en">
<head>
<?php include_http_metas() ?>
<?php include_metas() ?>
<?php include_title() ?>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<div id='conteneur'>
<div id='top'>
<a href="<?php echo url_for('@localized_homepage'); ?>" class='logo_wmd'>
<img src="/images/design/logo.png" alt="Watch My Desk - Show Off your Geekstation" title="Watch My Desk - Show Off your Geekstation" />
</a>
<p class='boutons_top'>
<a href="<?php echo url_for('@browse'); ?>" class='bouton'>Browse</a>
<a href="<?php echo url_for('@register'); ?>" class='bouton'>Join Now</a>
<a href="<?php echo url_for('@login'); ?>" class='bouton'>Login</a>
<a href="<?php echo url_for('@share'); ?>" class='bouton'>Your desk</a>
</p>
</div>
<div id='header'>
<div class='title_head'>
<h1>Show Off <span>your geekstation.</span></h1>
<p>Watch My Desk is a website where you can share, browse and rate pictures of desks and computers of the world.</p>
</div>
<div class='join_now'>
<p>Join the website to share your desk or post comments, just in 2 clics !</p><br />
<a href="<?php echo url_for('@register'); ?>"><img src='/images/design/join_now.png' alt="Join now and show off your desk with the community !" title="Join now and show off your desk with the community !" /></a>
</div>
</div>
<div id='centre'><?php echo $sf_content ?></div>
<div id='footer'></div>
</div>
<?php include_component('language', 'language') ?>
</body>
</html> |
Nous avons à présent plusieurs nouvelles routes à créer dans notre fichier routing.yml. Voici mon fichier apps/frontend/config/routing.yml une fois les modifications appliquées:
|
register:
url: /:sf_culture/register.html
param: { module: membre, action: new }
requirements:
sf_culture: (?:fr|en)
browse:
url: /:sf_culture/workstations.html
param: { module: bureau, action: list }
requirements:
sf_culture: (?:fr|en)
login:
url: /:sf_culture/login.html
param: { module: membre, action: login }
requirements:
sf_culture: (?:fr|en)
share:
url: /:sf_culture/share.html
param: { module: bureau, action: new }
requirements:
sf_culture: (?:fr|en)
homepage:
url: /
param: { module: main, action: index }
change_language:
url: /change_language
param: { module: language, action: changeLanguage }
localized_homepage:
url: /:sf_culture/
param: { module: main, action: index }
requirements:
sf_culture: (?:fr|en)
#default_index:
# url: /:module
# param: { action: index }
#default:
# url: /:module/:action/* |
Vous pourrez remarquer que j'ai commenté les routes par defaut. Tout simplement car je préfère définir les mienne manuellement, c'est plus "secure" !
Comme un fichier de configuration a été modifié, on supprime le cache:
Nos liens sont maintenant prêts, bien sûr, si vous cliquez dessus, vous aurez une erreur, l'action associée à ces liens n'ont pas encore été créé.
Modifications pour la prise en compte du i18n
Nos textes sont actuellement tous en anglais, nous allons mettre en pratique l'internationalisation vu dans le chapitre précédent !
Commençons par modifier tous les textes pour leur ajouter l'helper __() permettant la traduction.
|
<div id='conteneur'>
<div id='top'>
<a href="<?php echo url_for('@localized_homepage'); ?>" class='logo_wmd'>
<img src="/images/design/logo.png" alt="<?php echo __('Watch My Desk - Show Off your Geekstation'); ?>" title="<?php echo __('Watch My Desk - Show Off your Geekstation'); ?>" />
</a>
<p class='boutons_top'>
<a href="<?php echo url_for('@browse'); ?>" class='bouton'><?php echo __('Browse'); ?></a>
<a href="<?php echo url_for('@register'); ?>" class='bouton'><?php echo __('Join now'); ?></a>
<a href="<?php echo url_for('@login'); ?>" class='bouton'><?php echo __('Log in'); ?></a>
<a href="<?php echo url_for('@share'); ?>" class='bouton'><?php echo __('Your desk'); ?></a>
</p>
</div>
<div id='header'>
<div class='title_head'>
<h1><?php echo __('Show off'); ?> <span><?php echo __('your geekstation'); ?>.</span></h1>
<p><?php echo __('Watch My Desk is a website where you can share, browse and rate pictures of desks and computers of the world'); ?>.</p>
</div>
<div class='join_now'>
<p><?php echo __('Join the website to share your desk or post comments, just in 2 clics !'); ?></p>
<a href="<?php echo url_for('@register'); ?>"><img src='/images/design/join_now.png' alt="<?php echo __('Join now and show off your desk with the community !'); ?>" title="<?php echo __('Join now and show off your desk with the community !'); ?>" /></a>
</div>
</div>
<div id='centre'><?php echo $sf_content ?></div>
<div id='footer'></div>
</div> |
Nos textes sont prêts, on va extraire les nouvelles phrases à traduire:
symfony i18n:extract frontend fr --auto-save |
|
>> i18n extracting i18n strings for the "frontend" application
>> i18n found "10" new i18n strings
>> i18n found "0" old i18n strings
>> i18n saving new i18n strings |
Nous avons maintenant 10 nouvelles chaînes à traduire en français.
Ouvrons le fichier
apps/i18n/fr/message.xml et traduisons:
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xliff PUBLIC "-//XLIFF//DTD XLIFF//EN" "http://www.oasis-open.org/committees/xliff/documents/xliff.dtd">
<xliff version="1.0">
<file source-language="EN" target-language="fr" datatype="plaintext" original="messages" date="2009-08-24T17:32:01Z" product-name="messages">
<header/>
<body>
<trans-unit id="1">
<source>How are you doing today ?</source>
<target>Comment vas-tu aujourd'hui ?</target>
</trans-unit>
<trans-unit id="2">
<source>Watch My Desk - Show Off your Geekstation</source>
<target>Watch My Desk - Show Off your Geekstation</target>
</trans-unit>
<trans-unit id="3">
<source>Browse</source>
<target>Explorer</target>
</trans-unit>
<trans-unit id="4">
<source>Join now</source>
<target>S'inscrire</target>
</trans-unit>
<trans-unit id="5">
<source>Log in</source>
<target>Identification</target>
</trans-unit>
<trans-unit id="6">
<source>Your desk</source>
<target>Ton bureau</target>
</trans-unit>
<trans-unit id="7">
<source>Show off</source>
<target>Montre</target>
</trans-unit>
<trans-unit id="8">
<source>your geekstation</source>
<target>ton bureau de geek</target>
</trans-unit>
<trans-unit id="9">
<source>Watch My Desk is a website where you can share, browse and rate pictures of desks and computers of the world</source>
<target>Watch my desk est un site où vous pouvez partager, explorer et noter des photos du bureaux et ordinateurs du monde entier</target>
</trans-unit>
<trans-unit id="10">
<source>Join the website to share your desk or post comments, just in 2 clics !</source>
<target>Inscrivez vous pour partager vos bureaux, poster des coms... en 2 clics !</target>
</trans-unit>
<trans-unit id="11">
<source>Join now and show off your desk with the community !</source>
<target>Inscris-toi maintenant et partage ton bureau de geek avec la communauté !</target>
</trans-unit>
</body>
</file>
</xliff> |
PS: La traduction est approximative, je suis preneur s'il y'a des bilingues pour que les textes soient plus cohérents :)
Il nous reste un détail, l'image "Join now" n'est pas traduite.
Nous allons devoir ruser pour l'afficher dans la bonne langue.
Les images nécessitant une traduction devront avoir le suffixe de la culture, exemple:
- join_now_en.png pour la version anglaise
- join_now_fr.png pour la version française
Renommez l'image en ajoutant le préfixe _en et téléchargez la version française:
Il ne reste plus qu'à faire la modification dans le layout:
|
<img src='/images/design/join_now_<?php echo $sf_user->getCulture(); ?>.png' alt="<?php echo __('Join now and show off your desk with the community !'); ?>" title="<?php echo __('Join now and show off your desk with the community !'); ?>" /> |
Et voilà ! Nos images sont aussi traduites.
