Que faire pour cette création de template ??

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by Onita on

Bonjour,

Je viens de débuter avec Drupal et j'ai un projet un peu particulier.
Je vous fourni une image ci-joint pour vous permettre de visualiser la home ! (Image avec carousel )

J'ai cette page ci en home et des pages assez différentes sur d'autre partie du site. j'aimerai savoir si y'avait un moyen de personnaliser les différentes pages du site.

De plus, j'ai du mal à savoir ce qu'il faut utiliser en fonction des pages (Block, module...) pour la deuxième image.

Fichier attachéTaille
Icône image image.jpg12.71 Ko
Forum : 
Développement
Version de Drupal : 
7.x

Soumis par benfarhat le 29 Avril, 2011 - 20:47

c'est partie :)

I Infographie

I.1 Étude.

Le premier point important dans l'infographie c'est d'abord d'avoir une idée générale de ce que tu veux faire.
tu as un certains nombre de questions a te poser du genre:
quel public tu vise
quelles langues comptes tu utiliser
l'idée centrale de ton site
si tu peut résumé ton site en une ligne (genre de slogan)
ce que l'on trouve dans le site (par exemple, des paroles de chansons, des clips vidéos, des musique mp3, des diaporama de star etc etc...)
et selon le tout tu va te faire une idée sur une chose essentiel qui est disons la (ou les) couleur dominante de ton site

c'est sur kuler de tous peut se passer
http://kuler.adobe.com/
tu essai par ci par la de voir les différents panels qui bien agencé formeront ce qu'on appel une palette de couleur
que tu notes (en code hexadécimale)

I.2 l'inspiration.

ca c'est essentiel, certains le verront comme du vole, du plagiat ou autres termes assez brusques, mais je pense que dans un premier temps il faut s'inspirer pour voir comment ca se passe, ce qui se fait dans le domaine.
par exemple en t'inspirant tu verras que la tendance ce fait dans les cadres arrondis, les headers qui contient parfois plus d'informations que dans l'entête etc etc etc
donc pour l'inspiration il existe de nombreux site dont par exemple
http://www.webdesign-inspiration.com/
il suffit sur google de chercher les termes "webdesign inspiration"
Attention, ici je ne demande pas de copier carrément un site, mais d'essayer d'agencer le meilleur des sites que tu as vu dans un agencement qui doit être cohérent et dont le résultat est beau a voir!

I.2 Photoshop!!!

Le maitre incontestable de l'infographie (si tu veut faire dans le vectoriel tu as aussi adobe illustrator, pour la simplicité fireworks etc...)

le truc sera de faire un site mais en image et attention!!! il faut vraiment savoir utiliser photoshop (et surtout la gestion des calques) sinon c'est pas la peine de se lancer dans un projet de webdesign, mais plutot prendre ton temps dans l'apprentissage de photoshop
pour les tutoriels webdesign !! même chose il existe de nombreux site sur la toile

voici un lien vers 70 tutoriels pour faire un design web en photoshop
http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-des...
et un autre! mon préféré, une vidéo de grafikart en français et très très bien expliqué
http://www.grafikart.fr/tutoriels/creer-un-design-web-92
http://www.grafikart.fr/tutoriels/coder-site-web-23
http://www.grafikart.fr/tutoriels/creer-un-site-web-decoupage-22

Bref tu verras qu'a la fin le secret de la réutilisation de tes psd est un bon slicing qui te permet de très rapidement intégrer des images qui ont le même nom que dans tes css

I.3 Et si on ne connait pas photoshop!!

la c'est pas un problème tu peut toujours transformer des template gratuit ou alors créer une interface du genre "minimaliste" qui est très en vogue et qui n'utilise pas trop de graphisme
la preuve en images
http://vandelaydesign.com/blog/galleries/beautiful-minimal/

II Codage XHMTL CSS

II.1 le principe

ici cela consiste a transformer ce que tu avais en tête, sur papier (wireframe / mockup) ou sur photoshop, en un site web dit XHTML CSS,

II.2. ce qu'il faut savoir

pas grand chose! si ce n'est HTML (ou XHTML) et CSS
C'est pas compliqué et il est toujours bon d'être au courant des dernières technologies dans le domaine.
si je peut me permettre sans vouloir faire de la pub, mais il vende dans les kiosques le numéro 5 de micro compétence qui est entièrement dédié a HTML5 et CSS3 (il coute 9€ en france) et qui est une mine incroyable d'information

II.3. Quelles sont les mauvaises surprises?

c'est bête mais c'est une dispute plus vieilles que les dessous de ma grand mère!
les navigateurs! il n'appartiennent pas tous a la même maisons mère et chacun a sa façon d'interprété du code CSS.
et la parfois un site qui parait bien sur firefox 3.7 deviens incompréhensible sur internet explorer 6 ou alors un effet disparait sur google chrome, opera ou safari
donc la règle d'or c'est pendant la codification de ton site tu doit de temps à autres faire un teste sur les navigateurs connu dont
firefox, google chrome, opera, safari, et internet explorer 9, 8, 7 et même 6 et 5.5.
c'est vrai que c'est ancien! mais vu que il y a du monde qui ne s'y connais pas en informatique et des qu'ils achètent un pc ils ne cherchent pas a changer de navigateur et garde celui qui est pré installer avec zindowz :) et devine c'est lequel c'est internet explorer, et la version 6 qui est très ancienne et encore présente.
certains dirait qu'on s'en tape d'eux! ils ont qu'a mettre a jour leur navigateur! mais si jamais tu fait un site commercial je pense que ca serait une perte évidente de client potentiel bref!

II.4.les solutions

Il en existe Dieu merci! c'est utiliser un framework ou plutôt un système de grille! les plus connus sont

a quoi ca peut bien servir tout ca??
et bien a au moins te certifier que ce que tu auras comme conteneur sera identique quelque soit le navigateur

Remarque, il existe ce qu'on appelle des hack en css
par exemple si une div de classe box doit avoir 1000 pixel de largeur sur firefox et 980 sur internet explorer 6
tu doit mettre sur css
.box{
width:1000px;
width:980px; /* le "" n'est interprété que par IE6 et moins :) */
}

II.5.Par quoi finir? avant de passer à drupal

faire une bonne finition, et rajouter tes scripts par exemple ton caroussel qui existe surement en jquery

http://sorgalla.com/projects/jcarousel/
http://babylon-design.com/tutoriel-jquery-faire-un-carrousel/
http://www.bxslider.com/
http://caroufredsel.frebsite.nl/

puis pour finir pense par vérifier la validité de ton XHTML CSS et des script (tu peut le faire sous firefox avec le module webdeveloppeur! mais les hacks CSS seront vu comme de mauvaises attribut css, il faudra passer par des css conditionnel)

Remarque: dans la création de ton fichier XHTML esssai de faire en sortes que les régions soit des balises DIV (n'utilise pas de tableau ou d'iframe ou frameset)

III. Intégration à Drupal

III.1. Choix de Drupal

Puisque tu commences et je le demandes a tout le monde c'est la dernière version de drupal, c'est a dire au moment ou j'ecris, la 7
Donc tu la télécharge!, l'installe et tu peut si tu le veut commencer par mettre tes données ou créer tes modules
car oui le principe de tous les CMS qui contiennent un moteur de template est de partagé la partie donnée a cette de l'infographie (bien que ce soit bête vu que l'infographie défini les régions et qu'on est pas sur que nos régions sont dans les thèmes de base

ce qui n'est pas ton cas a ce que j'ai vu dans ton image

III.2.La création de ton thèmes

Elle commence d'abord par la création d'un repertoire sous le dossiers de ton drupal sous SITES/ALL/THEMES

III.3. le fichier de description de ton thèmes

ce dossier de thèmes, disons qu'il s'appelle Onita

tu devras y créer un fichier appeler onita.info
qui aura cette forme la

name = Onita
description = <a href="http://www.Onita.com"> Thème pour le Site de Onita </a>. <br /> patati et patata
package = Core
version = VERSION
core = 7.x

; la tu définiras tes CSS
stylesheets[all][] = css/reset.css
stylesheets[all][] = css/text.css
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/grid.css
stylesheets[all][] = css/theme.css
stylesheets[all][] = css/nav.css

; la tu met tes scripts
scripts[] = js/monscript1.js
scripts[] = js/monscript2.js

; la tu définis les régions de ton site (wireframe)
regions[top] = top
regions[menu_sec] = menu_sec
regions[menu] = menu
regions[slideshow] = slideshow
regions[breadcrumb] = breadcrumb
regions[vedette1] = vedette1
regions[vedette2] = vedette2
regions[vedette3] = vedette3
regions[vedette4] = vedette4
regions[content] = content
regions[sidebar_first] = sidebar_first
regions[bas] = bas
regions[footer1] = footer1
regions[footer2] = footer2
regions[footer3] = footer3

; ici tu définis les options features, un ";" avant désactive la ligne
features[] = logo
features[] = name
;features[] = slogan
;features[] = node_user_picture
;features[] = comment_user_picture
features[] = search
features[] = favicon
features[] = main_menu
features[] = secondary_menu

; ici c'est des paramètres que tu peut utiliser pour faire un thème paramétrable grâce aux fichiers:
;theme-settings.php, template.php et html.tpl.php

settings[style] = 'style1'
settings[width] = '1000'
settings[direction] = 'ltr'
settings[police] = 'font1'
settings[taille] = 'taille12'
settings[toggle_breadcrumb] = 'true'
settings[copyright] = 'Onita 2011'

voili voila!
la création des thèmes paramétrables si tu le désires je le mettrais dans un autre postes

maintenant tu peut rentrer dans la config de ton drupal sous apparence et tu verra ton thèmes! si tu peut l'activer c'est que tout est OK (pense a mettre dans le répertoire de ton thème une miniature de ton site pour avoir un aperçu (screenshot.png) et ton logo (logo.png)

III.4. le template de ta pages

le template ou plutôt les squelettes varie
il y a un squelette pour ta page HTML
un squelette pour toute les pages (ce qu'il y a en HTML entre et )
un template pour les noeud, un template pour les bloc bref!! tu peut tout configurer (les squelette s ont l'extension .tpl.php)

mais à la demande :)
oui en fait pour commencer tu a besoin que de toucher a page.tpl.php
ensuite c'est a toi de voir! si par exemple les résultats de la recherche on un format qui ne te plait pas tu iras toucher à search-results.tpl.php etc etc
mais attention tu les surcharges!!! ne touches jamais les originaux! tu doit juste faire une copie dans ton répertoire Onita de template puis changer dans ce répertoire pas ailleurs

III.5. page.tpl.php

en faite dans un premier temps tu recopie le fichier page.tpl.php qui est dans le repertoire
TONDRUPAL7\modules\system
ensuite tu met le contenu de ton fichier .html (celui que tu as codé après le slicing photoshop)
copier coller et tu écrases le contenu de ton page.tpl.php

puis tu va voir ton site et tu verras que tes css et scripts ne sont pas pris en compte
car en fait il ne reconnait pas le répertoire css ou js
donc au lieu d'écrire par exemple

</script>

tu écris plutôt

<script type="text/javascript" src="<?php print $base_path; print $directory; ?>/js/monscript1.js"></script>

voili voilou et en principe ton site devrait fonctionner

maintenant pour être dans la règle de l'art tu doit évacuer tout tes css et scripts et les mettre dans le fichier.info que j'ai mis plus tôt
puis tu enlève de ton page.tpl.php
tout ce qu'il y a avant la balise (la balise comprise)
et ce qu'il y a après la balise (la balise compris aussi)

III.6. les régions

maintenant dans ton fichier page.tpl.php tu va mettre tes régions (celle qui comme je l'ai dit plus haut doivent être de préférence des divs)

donc voila dans ton fichier .info tu as ca:

...
regions[content] = content
regions[sidebar_first] = sidebar_first
regions[bas] = bas
...

etudions la regions sidebar_first (c'est pareil pour les autres)
cette page tu la retrouveras dans la configuration des blocs dans l'administration drupal, si par exemple tu as le module de traduction de google translator et que tu veut qu'il soit dans sidebar_first tu le change dans l'administration puis tu enregistres

concrètement dans le fichier page.tpl.php cca devrait être comme ceci

...
<?php if ($page['sidebar_first']): ?>
   <div class="panneaud">              
     <?php print render($page['sidebar_first']); ?>
   </div>
<?php endif; ?> 
...

ET voila!
je suis sur que j'ai fait plein de fautes d'orthographes et j'ai vraiment plus envie de relire :)
SINON une REMARQUE IMPORTANTE
Drupal améliore ces performance grâce au cache
quand tu change ton fichier .info rien ne change car tu garde le premier fichier.info en cache
il faut l'effacer en allant dans l'administration:
configuration>developpement>performance> bouton vider le cache/clear alla cache

Voila j'espère que ca te servira a toi et tout ceux qui lirons
je suis a ta disposition en cas de besoin
ciao

cordialement
Benfarhat Elyes

Soumis par Onita le 2 Mai, 2011 - 10:52

J'ai bien pris connaissance de ton poste et je t'en remercie encore.

Je voudrais avoir quelques petites précisions :

Comment puis-je faire pour que, d'une page à une autre, le contenu soit différents.
Par exemple, sur la home il y a un carrousel mais sur les autres pages y'en a pas par contre il y a des blocs bien spécifiques.

Merci