Intégration du design

7 Intégration du design de WatchMyDesk

Dans cet épisode, nous allons intégrer le design de notre application et nous allons aborder des routes assez pratique pour une application multilingue.

Plan de l’épisode #07

• Création des pages HTML et des fichiers CSS.
• Préparations des routes.
• Les routes et l’internationalisation.
• Conclusion

Création des pages HTML et des fichiers CSS.

Pour vous simplifier la tache, nous avons déjà découpé les éléments dont nous allons avoir besoin pour intégrer notre design. Vous pouvez donc télécharger le zip directement sur ce lien.
Toutes ces images vont donc nous conduire à un design ressemblant à celui-ci :

Le contenu de ce dossier sera a copier dans le répertoire /public/img/design/.
Nous allons maintenant intégrer notre design pour notre application.
Commençons par la base, la structure HTML:

view sourceprint?

1.<div id="conteneur">

2.  <div id="top">div>

3.  <div id="header">div>

4.  <div id="centre">div>

5.  <div id="footer">div>

6.div>

Dans notre div top, nous allons placer un lien pour revenir sur l’index de notre page.

view sourceprint?

1.<div id="top">

2.  <a href="" class='logo_wmd'>

3.    <img src="/img/design/logo.png" alt="Watch My Desk - Show Off your Geekstation" title="Watch My Desk - Show Off your Geekstation" />

4.  a>

5.div>

Dans cette div, nous allons aussi ajouter notre menu :

view sourceprint?

01.<div id="top">

02.  <a href="" class='logo_wmd'>

03.    <img src="/images/design/logo.png" alt="Watch My Desk - Show Off your Geekstation" title="Watch My Desk - Show Off your Geekstation" />

04.  a>

05.  <p class="boutons_top">

06.    <a href="" class="bouton">Browsea>

07.    <a href="" class="bouton">Join Nowa>

08.    <a href="" class="bouton">Logina>

09.    <a href="" class="bouton">Your deska>

10.  p>

11.div>

Les liens seront remplit à la suite de ce tutoriel car il nous faudra définir les bonnes routes pour notre application.
Maintenant nous allons passer à la div header :

view sourceprint?

01.<div id="header">

02.    <div class="title_head">

03.       <h1>Show Off <span>your geekstation.span>h1>

04.       <p>Watch My Desk is a website where you can share, browse and rate pictures of desks and computers of the world.p>

05.    div>

06.    <div class="join_now">

07.        <p>Join the website to share your desk or post comments, just in 2 clics !p>

08.        <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>

09.    div>

10.div>

11.span>

Concernant la div centre, elle sera remplie dynamiquement. Il nous suffit donc d’appeler la bonne méthode :

view sourceprint?

1.

"centre">< ?php echo $this->layout()->content ?>

Le footer sera abordé dans un prochain épisode .
Et pour finir, nous allons ajouter le CSS à notre application ! Pour cela, rendez-vous dans le fichier /public/css/main.css.
Je vous donne le CSS directement sans réel explication, vous pourrez les trouver sur la Ferme Du Web (ça évitera le duplicate-content !)

view sourceprint?

001.* {

002.    margin: 0;

003.    padding: 0;

004.}

005.body {

006.    font-family: Arial, Helvetica, sans-serif;

007.    font-size: 12px;

008.    color: #000000;

009.}

010.a img {

011.    border: none;

012.}

013.#conteneur {

014.    margin: 0 auto;

015.    overflow: hidden;

016.    width: 960px;

017.}

018.#conteneur #top {

019.    height: 40px;

020.    width: 100%;

021.    overflow: hidden;

022.    background-image: url("/img/design/back_top.png");

023.    background-repeat: repeat-x;

024.}

025.#conteneur #header {

026.    height: 190px;

027.    width: 100%;

028.    overflow: hidden;

029.    background-image: url("/img/design/back_header.png");

030.    background-repeat: repeat-x;

031.}

032.#conteneur #centre {

033.    overflow: hidden;

034.}

035.#conteneur #footer {

036.    height: 142px;

037.    width: 100%;

038.    overflow: hidden;

039.    background-image: url("/img/design/back_footer.png");

040.    background-repeat: repeat-x;

041.}

042.#conteneur #header .title_head {

043.    float: left;

044.}

045.#conteneur #header .title_head h1 {

046.    color: #2c4f56;

047.    font-size: 40px;

048.    font-weight: bold;

049.    line-height: 35px;

050.    margin: 30px 0 15px 80px;

051.    text-shadow: 1px 1px 1px #FFF;

052.}

053.#conteneur #header .title_head h1 span {

054.    font-size: 50px;

055.    font-style: italic;

056.    display: block;

057.    margin-left: 40px;

058.}

059.#conteneur #header .title_head p {

060.    color: #444444;

061.    margin: 20px 0 0px 80px;

062.    width: 450px;

063.}

064.#conteneur #header div.join_now {

065.    float: right;

066.    width: 205px;

067.    margin: 30px 80px 0 0;

068.    padding: 20px;

069.    text-align: center;

070.    background: #FFF;

071.    border: 1px solid #c0c0c0;

072.    -moz-border-radius: 20px;

073.    -webkit-border-radius: 20px;

074.}

075.#conteneur #top .logo_wmd {

076.    float: left;

077.    margin-left: 10px;

078.}

079.#conteneur #top .boutons_top {

080.    float: right;

081.    height: 40px;

082.    margin-right: 20px;

083.    margin-top: 9px;

084.}

085.#conteneur #top .boutons_top a.bouton {

086.    display: block;

087.    background-image: url("/img/design/back_bouton.png");

088.    background-repeat: no-repeat;

089.    color: #FFF;

090.    width: 72px;

091.    height: 19px;

092.    line-height: 19px;

093.    float: left;

094.    text-align: center;

095.    margin-right: 15px;

096.    text-decoration: none;

097.}

098.#conteneur #top .boutons_top a.bouton:hover {

099.    background-image: url("/img/design/back_bouton2.png");

100.}

Préparations des routes.

Il nous faut maintenant ajouter les liens dans notre layout pour avoir accès aux différentes pages de notre application. Pour cela, nous allons utiliser le helper que le Zend Framework nous fournit : le helper Url.

view sourceprint?

01.http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

02.<html xmlns="http://www.w3.org/1999/xhtml">

03.<head>

04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

05.php echo $this->headTitle() ?>

06.php echo $this->headScript() ?>

07.<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen, projection" />

08.php echo $this->headStyle() ?>

09.<link rel="shortcut icon" href="favicon.ico" />

10.head>

11.<body>

12.    <div id="conteneur">

13.        <div id="top">

14.            <a href="url(array('language' => $this->language), 'localized_homepage') ?>" class="logo_wmd">

15.                <img src="/img/design/logo.png" alt="Watch My Desk - Show Off your Geekstation" title="Watch My Desk - Show Off your Geekstation" />

16.            a>

17.            <p class="boutons_top">

18.                <a href="url(array('language' => $this->language), 'browse') ?>" class="bouton">Browsea>

19.                <a href="url(array('language' => $this->language), 'register') ?>" class="bouton">Join Nowa>

20.                <a href="url(array('language' => $this->language), 'login') ?>" class="bouton">Logina>

21.                <a href="url(array('language' => $this->language), 'share') ?>" class="bouton">Your Deska>

22.            p>

23.        div>

24.        <div id="header">

25.            <div class="title_head">

26.                <h1>Show off <span>your geekstation.span>h1>

27.                <p>Watch My Desk is a website where you can share, browse and rate pictures of desks and computers of the world.p>

28.            div>

29.            <div class="join_now">

30.                <p>Join the website to share your desk or post comments, just in 2 clics !p>

31.                <a href="< ?php echo $this->url(array('language' => $this->language), 'register') ?>">

32.                    <img src="/img/design/join_now_fr.png" alt="Join now and show off your desk with the community !" title="Join now and show off your desk with the community !" />a>

33.            div>

34.        div>

35.        <div id="centre">php echo $this->layout()->content ?>div>

36.        <div id="footer">div>

37.    div>

38.body>

39.html>

Comme ça de base, notre application ne marchera pas, il nous manque deux choses, le plugin de traduction, et les routes.
Tout d’abords, mettons en place notre plugin de traduction. Rendez-vous dans le dossier applications/plugins et créez un fichier nommé Translate.php avec comme contenu :

view sourceprint?

01.< ?php

02.class Plugin_Translate extends  Zend_Controller_Plugin_Abstract {

03.  protected $_view;

04.  public function __construct($view){

05.    $this->_view = $view;

06.  }

07.  public function routeShutdown($view) {

08.    // on récupère le paramètre de la langue dans l'url

09.    $locale = $this->getRequest()->getParam('language');

10.    // On lance notre Translate (avec les différents fichiers).

11.    $translate = new Zend_Translate('array',APPLICATION_PATH.'/languages/fr_FR.php','fr');

12.    $translate->addTranslation(APPLICATION_PATH.'/languages/en_US.php','en');

13.    // On stoque notre locale (fr ou en) dans notre registre.

14.    Zend_Registry::set('Zend_Locale', $locale);

15.    // si la langue demandé ne possède pas de traduction

16.    if (!$translate->isAvailable($locale)) {

17.         // on change la langue par defaut (en) dans notre traduction.

18.        $translate->setLocale('en');

19.         // et on ajoute à la variable de vue la langue 'en'

20.        $this->_view->language = 'en';

21.    } else {

22.        $translate->setLocale($locale);

23.        $this->_view->language = Zend_Registry::get('Zend_Locale');

24.    }

25.    Zend_Registry::set('Zend_Translate', $translate);

26.  }

27.}

Si jamais vous avez une autre solution pour ce genre de traduction, n’hésitez pas à me le faire savoir dans les commentaires.
Ensuite direction notre Bootstrap.php. Nous allons supprimer la méthode _initTranslate pour la remplasser par une qui convient mieux à notre application.

view sourceprint?

1.protected function _initTranslatePlugin() {

2.    $this->bootstrap('view');

3.    $this->bootstrap('frontController');

4.    $front = $this->getResource('frontController');

5.    $view = $this->getResource('view');

6.    $front->registerPlugin(new Plugin_Translate($view));

7.}

De cette façon, notre plugin de traduction est lancé à chaque appelle de page, pas mal non ? Et on garde un contrôle totale sur notre traduction.
Toujours dans ce fichier, vous allez supprimer notre ancienne méthode _initRoutes et créer une méthode _initRouter comme cela :

view sourceprint?

1.protected function _initRouter(){

2.    $this->bootstrap('frontController');

3.    $front = $this->getResource('frontController');

4.    $router = $front->getRouter();

5.    $router->addConfig(new Zend_Config_Ini(APPLICATION_PATH . '/configs/routes.ini', 'routes'), 'routes');

6.    return $router;

7.}

Comme vous pouvez le voir, nous ajoutons un fichier de configuration à notre application, dans notre cas il s’agit des différentes routes.
Nous allons donc créer un fichier /configs/routes.ini et le remplir de cette façon :

view sourceprint?

01.[routes]

02.routes.register.type = "Zend_Controller_Router_Route"

03.routes.register.route = ":language/register"

04.routes.register.defaults.module = frontend

05.routes.register.defaults.controller = membre

06.routes.register.defaults.action = new

07.routes.register.defaults.language = en

08.routes.browse.type = "Zend_Controller_Router_Route"

09.routes.browse.route = ":language/workstations"

10.routes.browse.defaults.module = frontend

11.routes.browse.defaults.controller = bureau

12.routes.browse.defaults.action = list

13.routes.browse.defaults.language = en

14.routes.login.type = "Zend_Controller_Router_Route"

15.routes.login.route = ":language/login"

16.routes.login.defaults.module = frontend

17.routes.login.defaults.controller = membre

18.routes.login.defaults.action = login

19.routes.login.defaults.language = en

20.routes.share.type = "Zend_Controller_Router_Route"

21.routes.share.route = ":language/share"

22.routes.share.defaults.module = frontend

23.routes.share.defaults.controller = bureau

24.routes.share.defaults.action = new

25.routes.share.defaults.language = en

26.routes.change_language.type = "Zend_Controller_Router_Route"

27.routes.change_language.route = "change_language"

28.routes.change_language.defaults.module = frontend

29.routes.change_language.defaults.controller = language

30.routes.change_language.defaults.action = changeLanguage

31.routes.change_language.defaults.language = en

32.routes.localized_homepage.type = "Zend_Controller_Router_Route"

33.routes.localized_homepage.route = ":language/"

34.routes.localized_homepage.defaults.module = frontend

35.routes.localized_homepage.defaults.controller = index

36.routes.localized_homepage.defaults.action = index

37.routes.localized_homepage.defaults.language = en

Je pense pas que cela demande beaucoup d’explications, tout est assez explicite. Néanmoins, nous pouvons constater la présence de :language, c’est une partie variable de notre url. Grâce à cela nous allons pouvoir aller ce genre d’adresse de façon très simple :

• http://watchmydesk.local/fr/workstations
• http://watchmydesk.local/en/workstations

Les routes et l’internationalisation.

Nous allons donc maintenant traduire toutes les chaines de caractère de notre application grâce à la méthode $this->translate(). Dans notre fichier de layout :

view sourceprint?

01.http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

02.<html xmlns="http://www.w3.org/1999/xhtml">

03.<head>

04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

05.php echo $this->headTitle() ?>

06.php echo $this->headScript() ?>

07.<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen, projection" />

08.php echo $this->headStyle() ?>

09.<link rel="shortcut icon" href="favicon.ico" />

10.head>

11.<body>

12.    <div id="conteneur">

13.        <div id="top">

14.            <a href="url(array('language' => $this->language), 'localized_homepage') ?>" class="logo_wmd">

15.                <img src="/img/design/logo.png" alt="translate("Watch My Desk - Show Off your Geekstation"); ?>" title="php echo $this->translate("Watch My Desk - Show Off your Geekstation");?>" />

16.            a>

17.            <p class="boutons_top">

18.                <a href="url(array('language' => $this->language), 'browse') ?>" class="bouton">php echo $this->translate("Browse"); ?>a>

19.                <a href="url(array('language' => $this->language), 'register') ?>" class="bouton">php echo $this->translate("Join Now"); ?>a>

20.                <a href="url(array('language' => $this->language), 'login') ?>" class="bouton">php echo $this->translate("Login"); ?>a>

21.                <a href="url(array('language' => $this->language), 'share') ?>" class="bouton">php echo $this->translate("Your Desk"); ?> a>

22.            p>

23.        div>

24.        <div id="header">

25.            <div class="title_head">

26.                <h1>php echo $this->translate("Show off"); ?><span>php echo $this->translate("your geekstation."); ?>span>h1>

27.                <p>php echo $this->translate("Watch My Desk is a website where you can share, browse and rate pictures of desks and computers of the world."); ?>p>

28.            div>

29.            <div class="join_now">

30.                <p>php echo $this->translate("Join the website to share your desk or post comments, just in 2 clics !"); ?>p>

31.                <a href="< ?php echo $this->url(array('language' => $this->language), 'register') ?>">

32.                    <img src="/img/design/join_now_language ?>.png" alt="php echo $this->translate("Join now and show off your desk with the community !"); ?>" title="php echo $this->translate("Join now and show off your desk with the community !"); ?>" />a>

33.            div>

34.        div>

35.        <div id="centre">php echo $this->layout()->content ?>div>

36.        <div id="footer">div>

37.    div>

38.body>

39.html>

Et enfin, nous allons éditer notre fichier de langues fr_FR.php pour y ajouter la traduction :

view sourceprint?

01.return array(

02.'hello' => 'Bonjour et bienvenue sur notre site',

03.'english' => 'Anglais',

04.'french' => 'Français',

05.'Watch My Desk - Show Off your Geekstation' => 'Watch My Desk - Show Off your Geekstation',

06.'Browse' => 'Explorer',

07.'Join Now' => "S'inscrire",

08.'Login' => 'Identification',

09.'Your Desk' => 'Ton Bureau',

10.'Show off' => 'Montre',

11.'your geekstation.' => 'ton bureau de geek',

12.'Watch My Desk is a website where you can share, browse and rate pictures of desks and computers of the world.' => 'Watch my desk est un site où vous pouvez partager, explorer et noter des photos du bureaux et ordinateurs du monde entier',

13.'Join the website to share your desk or post comments, just in 2 clics !' => 'Inscrivez vous pour partager vos bureaux, poster des coms... en 2 clics !',

14.'Join now and show off your desk with the community !' => 'Inscris-toi maintenant et partage ton bureau de geek avec la communauté !'

15.);

Nous avons donc traduit le design de notre application ! Simple non ?

Conclusion

Et voila ! Le design est intégré (du moins la page d’accueil) et il est traduit! Vous en pensez quoi ?

Notes

• Je suis vraiment désolé pour le retard de cet article, mais en ce moment c’est un peu chaud : Boulot, Projet et vie normale
• J’ai mis en place un site de démonstration ou vous aller pouvoir suivre l’application au fur et à mesure ! Démonstration Zend Framework pour WatchMyDesk