Site de restaurant italien, mon premier site http://giardiniitalia.ch

Bonjour à tous

Je suis en train de finaliser le site internet que j'ai développé pour un restaurant italien appartenant à des connaissances .

Le voici : http://giardiniitalia.ch/index.php

Le script pour l'affichage des photos provient d'un tutoriel sur le site du zéro.

Le traitement javascript du formulaire provient également du site du zéro ( un membre me l'a écrit ) .

Un script javascript est aussi utilisé sur chaque page pour un analyse avec google analytics .

J'ai par contre écris le script php pour le traitement du formulaire qui dit bonjour quand il fait jour et bonsoir quand il fait nuit.

Je suis le seul à recevoir les données du formulaires ( pour l'instant ), vous pouvez donc le tester si vous le souhaitez .

Je tiens aussi à signaler que mon niveau graphisme est presque nul, donc ne soyez pas trop dur avec moi sur ce point ..

Le hover du menu utilise la technique des portes coulissantes.

Cela dit, j'estime que les couleurs utilisées correspondent à la nature du site .

J'ai essayé d'être sémantiquement le plus correct possible, je sais juste que la validation W3C ne fonctionne pas avec la page contact, d'après ce que j'ai compris, cela proviendrait de la carte google, je n'ai pas encore regardé comment je pouvais améliorer ce point.

Merci beaucoup de vos avis .

Je vous souhaite en attendant un excellent week-end .

Marc
Modifié par marc.suisse (25 Jan 2010 - 16:21)

Bonjour,

il faut modifier la langue de ton site pour la version italienne (xml:lang="fr").

Bravo pour ce premier site alors ! quelque points facilement améliorable à mon avis :

- Réduire le poid des images dans la bannière
- Le reset css assez bourrin (+ d'infos)
- Rendre la banière cliquable pour retourner à l'accueil, question ergo c'est plus sympa

Sinon tu pourrais peut être réduire un peut la résolution, ajouter un footer avec les informations concernant ce restaurant (contact, tel, adresse...), ajouter un petit outline:none sur le menu image et puis les balises qui vont bien pour le ref

Bonne continuation en tout cas, moi je te trouve bien partis

Bonjour à tous et merci de vos réponses

Je vais remédier à ça alors, par contre, quel serait le poids maximum admissible pour la bannière ?

Car les plus lourdes font 200k et d'autres 50 .

Je vais regarder pour cette histoire de reset CSS.

Bonjour,

Merci de bien vouloir éditer le premier message du sujet et de rajouter le nom du site ou son URL dans le titre. Cela permettra à tout le monde de mieux se retrouver dans la masse de sujets de cette section du forum.

Pour la bannière, si l'on considère qu'une page d'accueil ne devrait pas faire plus de 50 ou 100 ko, je te laisse faire le calcul. Il est tout à fait possible de diminuer le poids de l'image en la dégradant légèrement (la différente entre un jpg de qualité 100 et un jpg de qualité 60 n'est pas si grande à l'oeil nu ; la différence de poids, elle par contre est énorme).

Salut, je te remercie de ton conseil

J'ai pris le temps un moment de modifier certaines choses :

- J'ai mis fr-CH et it-IT sur mes pages étant donné que c'est plutôt de l'italien plutôt que du Suisse-Italien, j'ai préféré mettre it-IT .

- J'ai réduis la taille des images, il est vrai que j'ai beaucoup gagné pour un résultat tout à fais satisfaisant .

Concernant le reset CSS, j'avoue que je ne savais même pas de quoi il s'agissait, je me suis inspiré sur un autre site qui avait mis

html, body  {
height : 100%;
margin : 0;
padding : 0;
} 

Mais je ne savais pas qu'il s'agissait d'une remise à zéro, j'espère maintenant pouvoir supprimer ces lignes et modifier le reste sans trop de peine.

Pour rendre la banière cliquable, je vais le faire tout soudainement .

Seink a écrit :
ajouter un petit outline:none sur le menu image et puis les balises qui vont bien pour le ref smile

Là il faut que je regarde, car j'ai pas très bien compris ...

Le restant est en ordre ? Code, mise en page ...

Merci encore de votre aide .

Seink a écrit :
ajouter un petit outline:none sur le menu image et puis les balises qui vont bien pour le ref

Histoire d'être sûr d'empêcher toute navigation au clavier (étant donné que c'est le seul repère actuel au clavier) ?

Mauvaise idée que voilà.

Bonsoir à tous

J'ai essayé d'enlever les margin: 0; et padding: 0; , mais cela ne produit aucun effet sous Firefox 3.5.7 et IE8 .

Je vais teste demain sous IE6.

Si cela ne change rien non plus, je laisserais comme ça, sauf si je me conseillez autre chose ?

Edit: Je viens d'essayer, mais en fait cela agit également sous FF, cela agit uniquement sur les marges du document en lui-même, surtout la marge gauche sous FF.

Peut être que si j'avais mis le sélecteur *, cela aurait changé plus de choses .

Si je comprends bien, le sélecteur * agit sur tous les éléments du document, tandis que Body, HTML agit seulement sur le document en lui-même.

Est-ce quand même considéré comme un reset CSS ?

Edit 2 : J'ai trouvé ce document : http://forum.alsacreations.com/topic-4-35894-1-Proprietes-paddingmargin-a-0-sur--ou-sur-html-et-body-difference-.html

Alors c'est un reset très léger, donc je pense laisser comme ça .
Modifié par marc.suisse (27 Jan 2010 - 13:28)

Bonjour,

Pour le coté esthétique, ça fait bien restaurant italien ; c'est un site simple et efficace.
Je pense que tu y gagnerais peut être en justifiant ton texte sur l'ensemble des images du bas. Aligné sur les repères bleus ajoutés à cette capture d'écran.

Salut

Je te remercie du conseil, je vais regarder ce que cela donne .

Bonjour,

Je dois être le seul que cela choque, mais que se passe t-il si tes images ne sont pas disponibles (panne serveur, images non désirées, etc... les causes sont diverses, mais bien réelles) ?
Que se passe t-il si la feuille de style n'est pas accessible ou d'aucune utilité pour ton visiteur ?
As-tu essayé de naviguer sur ton site en desactivant les images et/ou la feuille de styles ?

En bref, les images porteuses de sens (avec un contenu textuel par exemple) doivent se trouver dans ton code html avec une alternative textuelle (balise alt) significative :
C'est le cas de ton menu , sans images ou sans css, tu perds toutes informations sur les intitulés de ton menu, sans alternative possible...

De même, ta bannière ne dispose pas d'une alternative textuelle explicite; "bannière" n'est clairement pas le contenu que tu dois employer : "Restaurant I Giardini d'Italia" ou l'adresse du site siéront certainement mieux (englobé dans un lien de "retour à l'accueil" se serait parfait)

Pour ton menu même principe, les images dans le html, l'effet de survol en javascript, un alternative textuelle qui va bien.

Attention également aux attributs title rajoutés, il doivent fournir un complément d'information et non reprendre l'intitulé du lien, ils sont peut-être un peu redondants dans le cas présent.

Voilà, je ne faisais que passer

Bon courage,
Sylvain
Modifié par 6l20 (31 Jan 2010 - 01:24)

Salut, je te remercie d'avoir pris le temps de me répondre

Je viens de découvrir grâce à toi, les avantages que procurent la barre de développement de firefox, pouvoir désactiver et activer le css et les images par exemple est très pratique.

J'ai donc modifié en conséquence la bannière en la rendant cliquable et plus précise au niveau du alt .

Je n'ai pas encore modifié les attributs title.

Concernant le menu, je vais voir comment faire avec le javascript, je pense avec un onemouseover, mais étant donné que je ne connais pas ce langage, je vais devoir me renseigner .

C'est la bonne occasion

Salut, +1 pour le footer

je réduirais la taille de la typo du contenu pour ma part

marc.suisse a écrit :
...J'ai donc modifié en conséquence la bannière en la rendant cliquable et plus précise au niveau du alt...

Et là pour le coup, un title sur la balise de lien ne serait pas inutile

marc.suisse a écrit :
Concernant le menu, je vais voir comment faire avec le javascript, je pense avec un onemouseover, mais étant donné que je ne connais pas ce langage, je vais devoir me renseigner .
C'est la bonne occasion

C'est en effet une bonne occasion de s'y mettre, et pendant que tu t'y colles, gardes à l'esprit que javascript est une surcouche et que ton menu doit rester fonctionnel et accessible sans...
Commencer par lire les bonnes pratiques du codage javascript de maître koala64 est un bon point de départ

Bon courage

Perso j'aurais mis la bannière dans un <h1> (le titre de premier niveau = nom du restaurant = titre de la page) et réservé le titre du message de bienvenue dans un <h2>.

J'aurais aussi mis l'adresse directement dans un élémént <address> en première page en utilisant les microformats. Ainsi on pourra directement se créer une carte de visite et les moteurs de recherche vont intégrer cette donnée.

Exemple pour le microformat hcard :

<address id="" class="vcard">

 <span class="org">Restaurant I Giardini d'Italia</span>
 <span class="adr">
  <span class="street-address">Rue du Valentin 12</span>
  <span class="locality">Lausanne</span>
, 
  <span class="postal-code">1004</span>

  <span class="country-name">Suisse</span>

 </span>
 <span class="tel">+41(0)21/312.86.47</span>

</address>

Modifié par Patidou (03 Feb 2010 - 11:35)

je termine mon site en multilingue, une page suffit quelque soit le nombre de langues !
Ce qui permet de réduire le "poids"
....

Salut,

Euuuh, francais en chine = marc.suisse ? Si oui, pourquoi un nouveau compte ?

Sinon, pourquoi un premier post pour déterrer un sujet vieux de 7 mois pour dire un truc sans vraiment de rapport avec le sujet, j'avoue que j'ai un peu de mal à comprendre.