Quelques conseils pour mon site

[Jim]

Bonjour,

Pour mon activité commerciale, une connaissance m'a monté un site avec le CMS Joomla et un template tout près.
Cette personne m´a trouvé un herbergeur, etc, etc... M'a donné le site clé en main. Mais n'est malheureusement plus très disponible pour passer du temps à modifier quelques trucs par ci ou par là.

C'est donc à moi de le faire...et je suis une bille en HTML, en CSS...
Certes, la question meriterai d'être posée sur un forum Joomla, mais étant un habitué de Geckozone, je préfererai rester par ici.


J'ai réussi à modifier les polices, les couleurs, j'ai réussi à créer des menus. Mais d'autres modifs requièrent un niveau supérieur de connaissance.

Puis-je vous soumettre l'adresse du site? Et pouvez-vous me conseiller et me guider dans les modifications que je voudrais apporter au template et aux modules de Joomla?
Et quelques conseils sur l'internationalisation du site...

[calimo]

Hello,

Pour que tu ne croies pas que ta question n'intéresse personne (ce n'est pas le cas), je me sens obligé de répondre, mais je dois avouer que la dernière fois que j'ai touché un CMS, c'était Drupal, et j'ai abandonné rapidement, m'étant rendu compte que c'était trop compliqué et que je n'arriverais à rien. Alors Joomla…

Ceci dit, cela ne concerne que moi et peut-être (probablement) que d'autres forumeurs s'y connaissent un peu plus !

En tous les cas, il n'y a pas de soucis pour mettre un lien vers ton site (tout le monde le fait, même les débutants, alors tu pense bien qu'un "animal mythique" ce n'est pas le problème…) et poser ta question, après tout, peut-être qu'on aura la réponse même sans connaitre spécifiquement Joomla (on est parfois étonné). Si tu veux tu peux aussi obtenir des critiques plus générales sur le site (elles sont gratuites elles aussi )

Mais s'il n'y a pas de réponse après quelques jours, alors il faudra effectivement penser à demander du côté du monde de Joomla !

[Jim]

Merci Calimo,

Donc voici le site http://www.amazonplazahotel.com

J'aimerai que le pied de page soit toujours visible, qu'il n'y ai pas besoin de "descendre" pour voir ce pied de page. et bien sûr lorsqu'il y a besoin de défiler vers le bas, qu'il accompagne le défilement.

Ensuite, sur l'entête, il y a également l'adresse de l'hôtel, mais dans le futur, et suivant le template original, c'est la place pour l'internationalisation et l'affichage de petits drapeaux... Et là vient l'autre question: Comment faire cette internationalisation?
Pour une aide à l'internationalisation, voici un autre site d'un hôtel en Grèce utilisant le même template: http://brothershotel.com/

Et une dernière petite question ( pour l'instant, car j'ai plein d'idées ), comment changer le favicon, et quel outil pour créer celui-ci à partir du logo?

[Asumbaa]

Salut,

J'aimerai que le pied de page soit toujours visible, qu'il n'y ai pas besoin de "descendre" pour voir ce pied de page. et bien sûr lorsqu'il y a besoin de défiler vers le bas, qu'il accompagne le défilement.

Tu peux mettre ta div#bottom_site en position:fixed, en bas. Il faudra ajouter un espace dans ton contenu pour éviter qu'il ne soit caché

Code : Tout sélectionner

div#bottom_site {
position: fixed;
bottom: 0;
}

div#middle_site {
padding-bottom: hauteur du footer
}

Quelques soucis avec cette solution (à peaufiner, je ne suis pas chez moi j'ai pas tous les outils)
- IE 6 ne comprend pas le fixed, il croit que c'est du absolute
- tu ne peux pas savoir exactement la hauteur du footer chez tes utilisateurs (taille du texte etc) donc il faut faire un peu "en gros" au risque que ce soit limite chez certains visiteurs

Ensuite, sur l'entête, il y a également l'adresse de l'hôtel, mais dans le futur, et suivant le template original, c'est la place pour l'internationalisation et l'affichage de petits drapeaux... Et là vient l'autre question: Comment faire cette internationalisation?
Pour une aide à l'internationalisation, voici un autre site d'un hôtel en Grèce utilisant le même template: http://brothershotel.com/

Je passe pour le "comment", je ne sais pas.
En revanche pense qu'un drapeau ne représente pas une langue (pourquoi un Belge devrait cliquer sur le drapeau français ?), il vaut mieux utiliser des mots, dans la langue d'origine (ex English - Français - Deutsch)

Et une dernière petite question ( pour l'instant, car j'ai plein d'idées ), comment changer le favicon, et quel outil pour créer celui-ci à partir du logo?

Ça c'est simple
Un site comme http://www.html-kit.com/favicon/ te fait ça très vite, je t'ai fait un truc rapide et ça donne ça :

Ensuite pour le mettre sur ton site, en principe il suffit de la nommer favicon.ico et de la placer à la racine du site.
Si ça ne marche pas il faut rajouter dans le head de tes pages :

Code : Tout sélectionner

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

Voilà

[Jim]

Un très très grand merci Asumbaa.

Je vais dès demain appliquer tes conseils pour le favicon et le bottom_site fixed, par contre que veux-tu dire par mettre un espace dans le contenu car il y déjà plusieurs espaces... entre les mots.


Edit:
Finalement, je n'ai pas attendu...
En remplaçant le relative par fixed, le footer restait bien fixe... Mais en haut, à la place du header...

Voici le code pour le bottom menu:

Code : Tout sélectionner

/**  BOTTOM  SITE	**/
#bottom_site {
position: relative;
top: 0px;
left: 0px;
width: 100%;
background-color : #b5b690;
border-top:1px solid #fff;
padding-bottom:30px;
z-index:1;
}
#bottom_site .wrapper {
padding-top:10px;
}

Edit 2:
En exposant mon problème, j'ai clarifié mes idées ( j'étais un peu confus et avais du mal à organiser le truc et ne savais pas par quel bout commencer)
Et j'ai donc aussi cherché de la documentation sur Joomla.
J'ai découvert ce site http://aide.joomla.fr/ et celui-ci http://forum.joomla.fr/
Sur le premier il y a une floppée de tutoriaux que j'ai téléchargé et je suis en train de les lire...
J'apprendrai peut-être comment transférer ce favicon.ico

[calimo]

[quote="Jim"]

Code : Tout sélectionner

/**  BOTTOM  SITE	**/
#bottom_site {
position: relative;
top: 0px;
[...]

Il faut utiliser bottom: 0; (top aligne évidemment en haut de la page) et position:fixed.

Un exemple au hasard : http://limpid.nl/lab/css/fixed/header-and-footer

Pour l'internationalisation, je "plusse" Asumbaa pour les noms de langues plutôt que les drapeaux, à moins que tu ne cibles spécifiquement les clients français. N'oublie pas que sur les 125 millions de personnes ayant le français pour langue maternelle (source : wikipédia), seule la moitié environ vit en France.

J'attire ton attention sur quelques erreurs de validation HTML et surtout CSS qui pourraient (ou ne pourraient pas) poser de problème à l'avenir.

Je trouve aussi qu'elle est très lente à charger. Plus de 8 secondes chez moi. Pas sûr que tous tes clients potentiels soient aussi patients Il y a énormément de scripts liés, plusieurs feuilles de style. Je remarque que certaines sont même générées dynamiquement ! Il y a aussi des élément demandés retournant une erreur 404. C'est plus de charge pour ton serveur et une "sensation" de lenteur en visitant ton site. Je te recommande d'essayer rapidement de figer tout ce qui peut l'être et de fusionner ce qui le peut (1 seule grosse CSS, 1 seul gros javascript). Tu peux t'aider de Firebug avec des extensions comme "Google Page Speed" ou "YSlow".

[Asumbaa]

Salut,

De retour chez moi avec la trousse à outils
J'ai fait quelques essais et j'obtiens ce que tu souhaites avec :

Code : Tout sélectionner

#bottom_site {
position: fixed;
bottom: 0;
background-color : #b5b690;
border-top:1px solid #fff;
padding-bottom:30px;
z-index:10; /* pour le passer au-dessus du #middle */
}

Je vais dès demain appliquer tes conseils pour le favicon et le bottom_site fixed, par contre que veux-tu dire par mettre un espace dans le contenu car il y déjà plusieurs espaces... entre les mots.

Je parle d'un espace vide en bas du contenu, car tel quel le footer va se positionner par-dessus du reste (comme un auto-collant si tu veux). Donc il faut éviter que du contenu se retrouve dessous, illisible, et pour cela il faut ajouter un padding-bottom suffisant dans ton #middle_site.

En exposant mon problème, j'ai clarifié mes idées ( j'étais un peu confus et avais du mal à organiser le truc et ne savais pas par quel bout commencer)

C'est normal, ne t'en fais pas. Commencer par un CMS complexe comme Joomla n'est pas des plus simples.

Et j'ai donc aussi cherché de la documentation sur Joomla.
J'ai découvert ce site http://aide.joomla.fr/ et celui-ci http://forum.joomla.fr/
Sur le premier il y a une floppée de tutoriaux que j'ai téléchargé et je suis en train de les lire...
J'apprendrai peut-être comment transférer ce favicon.ico

Excellent Tu y trouveras sans doute aussi des réponses pour l'internationalisation, qui doit se gérer dans le CMS.

[Jim]

Bonjour à tous,

Après une très grosse interruption, j'ai réactivé ce projet. Parce que le site était tombé dans d'autres mains et que le résultat n'était pas du tout concluant.
Je me suis installé MAMP et Joomla sur le Mac pour retravailler sur le premier sit; J'ai tout repris depuis zéro, fais le site petit à petit, avec mes maigres connaissances,, le soir en rentrant du boulot et le week-end je bossais sur ce site. J'ai fait la présentation à ma famille qui ont trouvé le travail bon, et après une grosse bataille pour mettre le tout en ligne, je suis arrivé à ceci: http://www.amazonplazahotel.com

J'ai réussi le favicon et l'internationalisation ( français / portugais ) je travaille déjà sur l'anglais et j'espère trouver quelqu'un qui pour s'occuper de l'espagnol.

Je suis très satisfais de l'allure générale et de l'ergonomie, les informations sont visibles, même dans les sous menus... Et vous, qui êtres plus au fait de ces choses, qu'en pensez-vous?
Par contre je suis moyennement satistait du pied de page collant ( ou il y a les numéro de tel, fax et mail ) car le résultat sous FF n'est pas des plus beaux, apparrement sous webkit, le résultat est meilleur ), je me tâte si je vais le garder. J'attends également vos avis.

Maintenant, j'aimerai des conseils sur le SEF et SEO. J'ai fais quelques recherches bien évidemment mais la masse d'information est telle que je n'arrive pas à prendre le truc par le bon bout...

Ah autre chose qui me viens à l'esprit pendant que je tape ce message... Y a t'il un gros risque de pourrir les boite mails à cause du spam avec l'affichage des mails tel que je l'ai fait. Ou serait-ce meilleur de passer par des formulaires à remplir?

Voili, voilou... J'attends vos retours, critiques et conseils.

[calimo]

Hello,

Beau progrès depuis la dernière fois, ça devient pas mal du tout. Quelques commentaires tout de même.

Ce qui me choque le plus c'est la taille de l'animation. Plus de la moitié du menu est inaccessible sans scroller… et je ne pense même pas aux terminaux mobiles ! En général il est recommandé que le menu soit complètement visible pour que l'utilisateur pour qu'il puisse appréhender la structure du site immédiatement.

Ensuite, commencer le texte par "AMAZON PLAZA HOTEL Bienvenue à l'Amazon Plaza Hôtel " n'est probablement pas la meilleure idée : rien que de lire ça je m'ennuie déjà (enfin, si je voulais être client de l'hôtel ) Évite autant que possible le bla-bla commercial du type "L'Amazon Plaza Hôtel se caractérise par son ambiance innovante, un service de qualité et personnalisé, pour satisfaire les clients demandant des services différenciés" (tous les hôtels ou presque peuvent dire ça) et va droit au but : qu'est-ce qui le caractérise (bord de mer, calme, proche des services, tourisme ou au contraire salle de congrès, etc.). Mets en évidence ce qui est utile à l'utilisateur : par exemple un bouton "réserver", "situation", etc.

Ensuite, tu pourras aussi ôter quelques majuscules qui ne sont pas les plus faciles à lire, par exemple dans le titre de la page, mais ça c'est la cerise sur la gâteau !

Pour la barre en bas, comme c'est maintenant je vois plein de place en haut, mais ces infos sont plutôt à mettre en bas (là où le visiteur ira les chercher) : si tu arrives à diminuer la taille de l'animation et réduire la quantité de texte, tu n'auras plus besoin qu'elle soit collante. Et aussi : je trouve que c'est une drôle d'idée de changer le contenu de cette barre selon si on est en bas de la page (copyright, adresse physique et ton email perso) ou pas (numéros de téléphone et l'adresse email de l'hôtel). C'est vraiment déconcertant et inattendu, le genre de choses à éviter

En tous cas encore bravo pour la progression, et bonne chance pour les derniers détails

[Jim]

Un grand merci pour le retour Calimo.

Tu as entièrement raison pour le AMAZON PLAZA HOTEL en majuscules et le Bienvenue.... En fait ici, c'est l'affichage de la section et du titre de l'article, je retravaille déjà cela sur la version portugaise. Il ne va y avoir que le Bienvenue à l'Amazon Plaza Hotel. Et pour cette page qui est un fait un affichage type blog, je vais retirer l'affichage du titre du premier article.
Ce sera plus 'propre'. Et c'est déjà visible sur le site en portugais.

Pour le pied de page collant, je suis déjà en train de le retirer car ( et j'avais été prévenu) il fonctionne très mal sur IOS.
En fait sous l'animation, j'ai un endroit ou je peux mettre ces informations de tel, fax et email, je vais même mettre sous forme d'image pour eviter d'eventuels spams. Je me demande même si je ne vais pas utiliser un formulaire de réservation comme il y en a sur le site des extensions de Joomla ( http://extensions.joomla.org/extensions ... ns/booking )
D'ailleur qu'en est-il des balises 'mailto', est-ce bon ou est-ce à fuir comme la peste?

Pour la taille de l'animation, j'avais mis cette taille pour avoir un bel effet sur les vues aériennes, mais je peux la réduire. En ce moment les photos font 950*350px... Peut-être qu'en 950*250 le rendu sera semblable.
Le second avantage de réduire la taille sera le gain de temps de chargement de ces images, en Europe avec les débits, ça ne doit pas se percevoir, mais ici, les images prennent un peu de temps à se charger.

Pour les textes, on va certainement faire appel à une amie journaliste, pour faire de beaux textes, sans lourdeur et un peu plus de charme...

Que veux-tu dire par "Pour la barre en bas, comme c'est maintenant je vois plein de place en haut, mais ces infos sont plutôt à mettre en bas", j'ai pas compris

Edit: Quoique la taille de 950*250px , ca va peut-être cassé mon show dans la section "connaître l'Amapa"...

[calimo]

D'ailleur qu'en est-il des balises 'mailto', est-ce bon ou est-ce à fuir comme la peste?

Comme la peste, je dirais pas. Mais ce n'est pas la meilleure idée (pas très portable).

Pour la taille de l'animation, j'avais mis cette taille pour avoir un bel effet sur les vues aériennes, mais je peux la réduire. En ce moment les photos font 950*350px... Peut-être qu'en 950*250 le rendu sera semblable.

Je pensais plus à quelque chose comme 500x150…
Cela te permettra de remonter le menu qui est vraiment beaucoup, beaucoup trop bas, et pas que de 100px

Que veux-tu dire par "Pour la barre en bas, comme c'est maintenant je vois plein de place en haut, mais ces infos sont plutôt à mettre en bas", j'ai pas compris

Je parlais justement du pied de page.

Edit: Quoique la taille de 950*250px , ca va peut-être cassé mon show dans la section "connaître l'Amapa"...

Ce n'est pas en page d'accueil… tu peux te permettre d'être un peu différent sur une page !

[Jim]

J'ai profité hier d'un jour férié par ici pour me mesurer à Gimp. Le résultat est déjà en ligne. Qu'en pensez-vous.

J'ai donc fait un bandeau avec le téléphone, le fax et l'adresse mail pour pouvoir supprimer l'espèce de pied de page collant ne fonctionnant pas sous iOS.
Mon site est opérationnel pour tous les navigateurs

Les utilisateurs de logiciels libre reconnaitront les icones utilisés.

Edit: Manipulant Gimp de mieux en mieux, j'en ai profité pour retravailler chaque image du site. En diminuant la hauteur et en dégradant la qualité à 75% de taux de compression.
Le gain de temps de téléchargement est spéctaculaire à la vu de mon (faible) débit.