Critique de premier site SVPRésolu/Fermé

Question

Bonjour à toutes et à tous Merci à Gihef et à King pour leur aide  à la création de ce premier siteMerci de bien vouloir Critiquer Ce sera pour moi, la seule façon de m'améliorerNéanmoins j'ai beaucoup de mal à comprendre les META !!!!Encore merciRespectueusementEtomalhttp://fermelaunay.perso.orange.fr/

sebsauvage · Answer

Un passage rapide:- Ta page n'a pas de titre ("Document sans nom", dans la balise <title>). Il faut en mettre un.- Je trouve perturbant que le menu disparraisse quand on va dans une page. Il faudrait l'inclure dans chaque page (avec - par exemple - un include Javascript ou du php).- Quand il y a du texte (par exemple http://perso.wanadoo.fr/Fermelaunay/Site%20tutor/Ch1.htm ), alors il faut mettre du texte.Si tu met le texte dans une image, les moteurs de recherche ne l'indexeront pas, et les internautes ne pourront pas faire de copier-coller (s'il veulent garder les infos).- Sur la page d'accueil, bien indiquer au dessus de chaque drapeau:"Entrer en français"  "Enter in English".Sinon, on ne sait pas vraiment où il faut cliquer sur la page d'accueil (trop d'images partout, de petits logos... on se demandent où sont les liens).- Astuce: tu peux mettre un lien Google Maps ou ViaMichelin pour tes visiteurs !  ça leur permettra d'accéder à la carte.( https://www.google.fr/maps et une fois bien positionné sur la carte, cliquer sur "Obtenir l’URL de cette page" )- Y'a les trajets, y'a même les coordonnées GPS... mais l'adresse elle-même, elle est où ?Je ne la trouve pas !Aucun nom de route, aucune ville, aucun code postal !- quand on clic sur  "Nous contacter", ( http://perso.wanadoo.fr/Fermelaunay/Site%20tutor/Cont1.htm ), il  y a une erreur (page manquante).

Etomal · Answer

Bonsoir SebsauvageUne fois de plus tu as la gentillesse de bien vouloir me répondre1 - pour la page titre, je crois que c'est bon2 - Pour les menus, je vais tenter de corriger3 - pour les textes à copier je ne suis pas sur d'avoir comprisil faudrait remplacer les textes images par de vrais textes je vais essayer mais c'est mon 1er site4 - Pour les drapeaux  c'est fait5 - Pour google maps je crois pouvoir faire le lien, mais récupérer l'URL ?????  Je ne sais même pas ce que c'est6 - Quant à l'adresse la ville etc... tout est dans cordonnéesMerci beaucoupN'hésite surtout pas à critiquerJe suis ici pour apprendreTrès respectueusementetomal

IsLe · Answer

J'ai une suggestion, ce serait de réduire le poids de tes images, 270ko c'est vraiment beaucoup trop.

sebsauvage · Answer

5 - Google maps.Exemple:Je te déplace sur la carte Google (ou tu tape une adresse) et une fois que tu vois la carte cadrée comme tu veux, tu clic sur le lien "Obtenir l’URL de cette page".Il te suffit alors de copier l'adresse affichée dans ton navigateur et la coller dans ton site web.Les visiteurs n'auront qu'à cliquer sur cette adresse pour voir immédiatement la carte Google.6 - Quant à l'adresse la ville etc... tout est dans cordonnéesAh oui, pardon !Je n'avais pas vu.Mais... pas de code postal ?C'est ce village là ?:https://www.google.fr/maps?f=q&hl=fr&q=launay,+france&ll=49.102583,0.742508&spn=0.060577,0.194321&om=1Si ce n'est pas le bon, ça veut dire que ton adresse est probablement ambigüe.

charlinou · Answer

Le site est simple, et les gens aiment les sites simples d'utilisation !  Peut-être l'index, tu devrais centrer son contenu. Wala ;)

Etomal · Answer

Bonjour thom@sj'ai oublié de dire que c'était la page Français - Accès - vous venez de CaenAvec mes excuses pour ce contretempsRespectueusementEtomal

Gihef · Answer

Bonjour, Un peu de lecture ? Dans le <19>, pour les titres des fenêtres. Imagine, je suis en train de visiter différents sites. Un pour trouver un itinéraire, un autre pour la météo en Normandie, un suivant pour remplir un formulaire de location d'un gîte, un autre encore pour trouver un hôtel en chemin et enfin une contribution à un forum bien connu. Regarde les titres de ces pages : http://gihef.bey.free.fr/CCM/flaunay/images/titres.png et détermine dans quelle fenêtre se trouve chaque page. + C'est bien dans les noms des fichiers qu'il est souhaitable de ne pas utiliser d'espaces. Dans les titres des pages, tu peux les y laisser. En <20>, non, il n'est pas possible de récupérer de la qualité qui a été abaissée. Ce n'est pas gênant. En <1>, dans certaines pages, le lien pointe encore vers Cont1.htm qui n'existe pas. Dans http://perso.orange.fr/Fermelaunay/Site_tutor/Cont.htm tu exploites une ruse qui n'est pas utile pour espacer les 2 boutons du haut. Si certains navigateurs sont configurés de manière particulière, on la voit : http://gihef.bey.free.fr/CCM/flaunay/Cont.htm Tu peux utiliser des espaces insécables “& nbsp;” pour le même résultat. Remplace le “pppp” par “ ”. Ils créeront un espace sans caractères visibles. Le code de la page de ton formulaire est incomplet. Il lui manque, en haut : la fermeture de et l'ouverture de et en bas : + Le titre “La_Ferme_Launay_Formulaire_de_Contact” pourrait être “La Ferme Launay : Formulaire de Contact” Ce formulaire m'a donné une idée. J'y ai regardé de plus près. Je te propose donc ces quelques solutions en espérant qu'elle ne seront pas trop de complications pour toi. Elles font appel à des feuilles de styles (CSS). Si certaines te conviennent, tu peux les réutiliser. Les bordures sont un peu épaisses, je peux même les reprendre. Il m'a semblé un peu rudimentaire et hors charte, il n'est pas dans tes cadres aux bordures noires habituels. Je m'en suis donc servi pour réaliser, au moins une fois, ce type de tableau qui offre une certaine souplesse, dans la mesure où on peu le redimensionner sans avoir à refaire un nouveau dessin pour la bordure. Mais il est un peu pénible à réaliser. Un tableau dont les cellules des bords contiennent des images qui servent à fabriquer une image le délimitant. 8 images en tout, 4 pour les coins et 4 pour les côtés : http://gihef.bey.free.fr/CCM/flaunay/images/bordures.png Les images utilisées pour les côtés ne font que 2 px d'épaisseur. Elles sont répétées dans chaque cellule. La couleur de fond du tableau est déterminée dans le code, ce n'est pas une image. Ça allège le poids de la page. Moins de ko à charger. Ça donne ça : http://gihef.bey.free.fr/CCM/flaunay/Cont_2.htm et ça si tu veux voir en plus son “squelette” : http://gihef.bey.free.fr/CCM/flaunay/Cont_22.htm Il existe une autre manière faire. Celle qui consiste à placer une image (une seule) comme fond d'un élément de mise en page. Elle est plus facile à gérer, mais, si différents éléments de tailles différentes doivent être réalisés, il devient nécessaire de disposer d'une image à chacune de ces dimensions. Pour ne pas avoir à déformer la 1re. C'est ce que j'ai fait ici : http://gihef.bey.free.fr/CCM/flaunay/Cont_3.htm L'image de contour est appliquée en fond d'une

de mêmes dimensions que l'image, et qui contient le tableau. Le centre de l'image est transparent. On le vérifie dans le Tableau2 où j'ai désactivé la couleur du centre. Et dans la Tableau3, où j'ai désactivé l'image du contour mais pas la couleur du centre. Ça laisse quand même un peu de liberté. + L'envoi du formulaire ne fonctionne pas Cette technique nous a déjà mis sur la voie d'une solution dans <1> et <12>, du contenu en texte. Dans la page de coordonnées, par exemple : http://perso.orange.fr/Fermelaunay/Site_tutor/Coord.htm on pourrait s'y prendre de cette manière. Bon, ça se complique un peu parce qu'il n'est plus question de tableau. Mais de mise en page en CSS. Des dimensionnements servent à gérer le tout. Le texte est accessible et l'adresse e-mail est clicable : http://gihef.bey.free.fr/CCM/flaunay/Coord.htm J'en ai profité pour réparer un lien vers l'image du bouton “Nous contacter”. Et placer le menu en haut, là où tu devrais le placer systématiquement pour renforcer le sentiment de simplicité evoqué en <10>. Ici, l'image occupe tout l'espace de l'élément, 2e bloc arrondi et ombre compris. Tout ce que j'ai réalisé ici fonctionne dans les navigateurs dont je dispose. À toi de le tester dans IE.

Gihef · Answer

De rien,mais je me demande si ça ne te complique pas la tâche ?J'ai quand même continué dans mon idée du fond adaptable et j'ai revu la solution  utilisée dans http://gihef.bey.free.fr/CCM/flaunay/Coord.htmJ'ai rendu le fond la zone de texte transparente (comme dans le formulaire). Ce qui fait que l'image de 380x380 est utilisable dans différentes situations de cette taille et que donc, on peut définir au besoin la couleur qui se trouve sous le texte :http://gihef.bey.free.fr/CCM/flaunay/fonds.htm“Puis-je récupérer…”Tout ceci est aisément récupérable.Le dossier qui contient ces contributions à “flaunay” est accessible.Il te suffit de supprimer “fonds.htm” dans l'adresse et tu as accès au contenu du dossier, “Index of /CCM/flaunay” : http://gihef.bey.free.fr/CCM/flaunay/où tout (ou presque) est affichable et téléchargeable.Tu y trouveras même les fichiers qui m'ont servi à réaliser les images en .png (.svg et .xcf). Tu pourras donc les modifier à ton tour à l'aide des programmes qui m'ont servi :Inkscape  https://framalibre.org  https://inkscape.org/et Gimp  https://framalibre.org  http://ww1.gimp-fr.org/?sub1=8616770a-8ecb-11ea-af93-33b024c569ceJ'ai déjà affiné l'épaisseur du cadre :http://gihef.bey.free.fr/CCM/flaunay/Cont_3.htm+ Il faudrait que tu précises dans le formulaire.Par exemple, “Choix de chambre” ou “Animal de compagnie”, qu'est-ce-que tu attends comme réponse ?

Etomal · Answer

Bonjour GihefRéponse à ton avant dernier post19 - Titres de fenêtresJe pense que c’est fait20 – Récupérations de qualitéTant pis pour moi1 – La ruse est corrigéeJ’ai mis des blancs, néanmoins, je n’arrive pas à l’appliquer dans la page Coord entre les boutons « Nous contacter » et «  Coordonnées »Pour la page de formulaire incomplète, je ne comprends pas le langageLes feuilles de style CSS  sont bien des calquesSi oui, je réussis à les faire, mais j’ai énormément de mal à placer correctement les textesJ’y ai passé une grande partie de lundiEn ce qui concerne les 8 images et les 4 coinsJe n’ai rien comprisSinon tout ce que tu as proposé fonctionne chez moi et me plaîtRéponse à ton dernier postEffectivement, cela complique ma tâche et en toute franchise je ne comprends pas grand-choseJ’ai téléchargé pour récupérer le formulaire et la page coordonnéesNéanmoins, si je poste c’est pour apprendreCependant, dans, http://gihef.bey.free.fr/CCM/flaunay/Cont_2.htm je ne trouve pas le cadre sous dreamweaver ni dans le second<DIV id=cadre> celui-ci serait-il construit ailleurs ?Désolé de paraître néophyte, mis c’est pourtant ce que je suis.Il y a 3 semaines, je ne savais même pas que le langage HTLM existaitPour le choix de chambre, j’aimerais donner un choix  1 ou 2Idem pour l’animal j’aimerais donner un choix  Oui ou non,mais je n’ai pas encore trouvé de solutionMerci pour tes conseils et ta patienceTrès respectueusementEtomal

Gihef · Answer

Bonjour, Content que ça te plaise. Et bravo pour ta persévérence. je n’arrive pas à l’appliquer… entre « Nous contacter » et « Coordonnées » Ça ne semble pas nécessaire. Les images sont espacées. Par contre, attention à tes sources. Chez moi, l'avant-dernier bouton de cette pge ne s'affiche pas. Ton code contient des références à ton disque dur :

Ce n'est pas la seule page concernée. Pour la page de formulaire incomplète, je ne comprends pas le langage Je t'indiquais que le code de cette page est incomplet, qu'il lui manque des choses essentielles. Que je croyais essentielles. Parce que ça m'a permis de constater que mon navigateur l'affichais quand même ! Les feuilles de style CSS sont bien des calques Non. Elles permettent simplement de séparer la mise en forme du contenu. Elles permettent de gérer des styles, comme dans Word, Excel ou Xpress… Tu sais, tu tapes le texte brut et, ensuite, seulement ensuite, tu appliques ici un titre, ici un sous-titre, là une citation… C'est un peu plus compliqué à mettre en œuvre, mais ça offre des avantages nombreux. [juste pour info.] Comme celui-ci, il suffit de changer un style dans une feuille du même nom, et toutes les pages qui l'utilisent prennent en compte ce changement. En voici un début d'exemple. Tu ne définis pas de police dans tes pages. Chez moi elles affichent du Times. Si j'en définis unefont-family : Verdana, Arial, Helvetica, sans-serif; font-size : .8em; ça change : http://gihef.bey.free.fr/CCM/flaunay/Cont_3-police.htm Et, et c'est là l'avantage, si tes pages utilisaient toutes la même feuille de styles externe, cette simple petite modification dans un seul fichier se répercuterait dans toutes ces pages (qui peuvent être des centaines). Puissant.[juste pour info.] En ce qui concerne les 8 images et les 4 coins Alors, oublie et abandonne “Cont_2.htm” Contente-toi de “Cont_3.htm” ou “Cont_ouinon.htm”. je ne comprends pas grand-chose Je m'en doutais… Ça m'a semblé être quand même une bonne manière de faire. Si tu n'arrives pas à récupérer les parties qui t'intéressent, indique lesquelles. Si tu rencontres des problèmes de positionnement, fais-le savoir. Néanmoins, si je poste c’est pour apprendre Et bien, si j'y réponds, pour moi aussi. Tes questions m'ont permis de résoudre quelques problèmes que je rencontrais avec les CSS. Elles m'ont offert un exercice grandeur nature. Et de construire “Cont_2.htm”, de faire ça pour la 1re, et certainement la dernière, fois. Trop pénible (-: je ne trouve pas le cadre Normal, il n'y a rien qui corresponde dans le code.

celui-ci serait-il construit ailleurs ? Non, pour que ça soit “plus simple”, tout le code est dans les pages. Pas de fichiers extérieurs. C'est simplement la manière dont je parle de l'image qui entoure tes éléments, les filets noirs de 2 épaisseurs différentes séparés par un blanc. Comme dans <23>, “il n'est pas dans tes cadres aux bordures noires habituels”. L'image est utilisée comme ça :background : url(images/tblform609x769.png) no-repeat; Elle est placée en fond de #tableau (on indique où elle se trouve) et ne répètera pas dedans, ne s'y affichera qu'une fois. Il y a 3 semaines, je ne savais même pas que le langage HTLM existait” Si c'est vrai, tu ne t'en sors pas mal. Il y a des génies méconnus. Vraiment, le-s type-s qui a-ont inventé ça… Chapeau. j’aimerais donner un choix La manière la plus simple est d'utiliser ce qui est prévu pour ça, des cases à cocher ou des boutons radio : http://gihef.bey.free.fr/CCM/flaunay/Cont_ouinon.htm + De quoi traiter les formulaires ici : http://www.allhtml.com/articles/detail/370 htmlform

Etomal · Answer

Boisoir GihefEncore Mercije ne modifierai plus mes pages avant d'avoir assimilé le contenu de tes fichiersJe les ai imprimés et "j'essaie" de les assimiler.Je pense que dans les jours qui viennent, si ce n'est pas abuser, je ne manquerai pas d'appeler au secoursBonne soiréeTrès respectueusementEtomal

Thom@s · Answer

Salut !Si je peux me permettre, je pense que ça serait vraiment bien d'uniformiser les menus de liens.En effet, quand on clique sur un bouton, le menu n'est plus le même, change totalement ou partiellement, ou bien devient un menu spécifique à la page affichée.A mon avis, il serait bien d'avoir un seul et même menu vertical sur toutes les pages, avec exactement les mêmes boutons.Bien sûr, ça n'empêche pas d'avoir, en plus un menue horizontal spécifique à chaque page, si besoin est.Donc, les liens "Coordonnées", "Accès", "Chambres", "A proximité", "Nous contacter", "Nos tarifs" resteraient toujours présents, dans le même ordre et sur chaque page.Par contre, ça n'empêche pas, par exemple sur "Ch1.htm", "Supp.html", etc... de mettre un menu pour naviguer entre les chambres ("Chambre 1", "Chambres supplém"...)A mon avis, donc, il serait bien de structurer le site en dossiers (au moins dans l'idée), ayant chacun :- le menu de liens général commun à toutes les pages,- le menu spécifique au dossier, facultatif.Et puis, ça serait aussi un plus de transformer les images en texte avec un fond, comme l'a fait Gihef :http://gihef.bey.free.fr/CCM/flaunay/fonds.htmEnfin, ce n'est que mon avis ;-)A+ et bon courage :)

Thom@s · Answer

Salut ! - Déjà, il y a plusieurs liens incorrects : file:///E|/TRAVAIL/FermeLaunay/Ferme/Boutons/deCaen.jpg file:///E|/TRAVAIL/FermeLaunay/Ferme/Dessin/maman.jpg Les liens doivent être "relatifs", donc du type Boutons/deCaen.jpg - Sinon, il faut savoir que la gestion des calques est très galère: • La manière d'"appeler" ("désigner") est différente selon les navigateurs (Firefox/IE...), • Le positionnement relatif (position:relative) marche à peu près, mais est difficile à mettre en place, surtout lorsqu'il s'agit de superposer, • Le positionnement absolu (position:absolute) pose le problème de la résolution de l'écran, et n'est pas d'une gestion facile. Le plus simple, à mon avis, dans ton cas, est d'utiliser un tableau - sans bordure, - à une seule cellule (qui contient ton texte), - avec en image de fond l'image que tu voulais. Par exemple (à adapter bien sûr à ta page) :

Voici le texte.
Je peux donc écrire par-dessus l'image, sans utiliser de calque ;-)

Tu peux voir le résultat sur: https://www.cjoint.com/?gmmYjAwcWt • Notes : - Les tableaux (surtout ceux "invisibles", sans bordure) sont extrêmement importants en HTML. Ils sont même presque toujours à la base de la structure HTML d'un site, du fait de leur puissance (possibilité de mises en page complexe, notamment en les imbriquant). - Tu peux régler les dimensions avec les attributs width et height du . Il est fortement recommandé, dans ton cas, de mettre en width et en height les dimensions (largeur et hauteur) exactes et réelles de l'image de fond. (Tu peux obtenir facilement la taille réelle d'une image par clic droit sur le fichier image > propriétés > informations) Si les dimensions réelles ne te conviennement pas, il faut les adapter (réduire l'image) avec un logiciel d'édition d'images (comme Paint, The Gimp...), et donc changer le fichier image lui-même. Bon courage ! :) A+ :-)

Gihef · Answer

Bonjour à vous, Quelque chose d'essentiel manque dans mes exemples : des commentaires ! Qu'on devrait toujours ajouter. Je viens de réaliser que j'avais oublié. Excuses. J'ai donc repris : http://perso.orange.fr/Fermelaunay/Site_tutor/Rennes1.htm en y apportant un exemple et en y ajoutant des commentaires : http://gihef.bey.free.fr/CCM/flaunay/rennes1.html Ils sont visibles lorsqu'on affiche le code source de la page ou lorsqu'on l'ouvre avec un éditeur de texte. C'est le texte qu'on trouve au bout des lignes entre /* */ et . Ils sont sensés apporter des explications. La chose la plus importante de mes modifications, c'est que j'ai placé les différents éléments du même groupe dans un bloc qui les regroupe. Les boutons sont donc contenus dans une

dimensionnée. Les 2 autres blocs (plan et explications) aussi. Ça donne une certaine rigidité à la page, mais ça les empêche de passer à la ligne lors du rétrécissement de la fenêtre du navigateur et ça aide à les gérer. J'ai utilisé la 3e possibilité pour positionner des blocs en CSS et que ne mentionne pas Thom@s : le float. Ça permet à des blocs devant normalement s'afficher les uns en dessous des autres (comme les

ou les

) de se suivre sur la même ligne. Les 2 blocs informatifs se suivent donc et sont contenus dans un autre qui limite leurs mouvements. Il a la largeur des 2 autres + une petite marge intermédiaire. J'ai aussi attribué des marges aux paragraphes pour les positionner dans la

qui les contient et les espacer entre eux. + C'est vrai que “la gestion des calques est très galère”. Ça fait quelques mois que je m'y frotte (-; Mais dans le cas qui nous occupe, la simplicité de la mise en page m'a semblée tout indiquée pour cette technique. Surtout qu'à part dans les tarifs, aucune donnée ne devait être présentée sous la forme de tableau. Et, juste pour voir, regardez ce qu'il est possible de faire en CSS pour le positionnement d'éléments sur la page : http://www.csszengarden.com/005/page22/ Ne vous concentrez pas sur le design, notez juste la manière dont les blocs de texte sont placés et bougent lorsqu'on redimentionne la fenêtre du navigateur.

Etomal · Answer

Bonjour  Gihef, Sebsauvage,Thom@s(ordre alphabétique oblige)Pas de nouvelles de vous depuis presque une semaine, (pas de nouvelles, bonnes nouvelles)Je pense pouvoir considèrer que, sans critiques, hormis le fait de devoir m'améliorer encore et encore, mon  site est maintenant présentable. Je coche donc la case « problème résolu »Quite à me répéter je vous dois  encore un très grand MERCIJe ne manquerais pas si besoin de vous contacter à nouveauTrès respectueusementEtomal

franck · Answer

Bonjour,Joli site !! Le lien de la page tarif vers l'accueil ne marche pas chez moi..Bonne continuation

sebsauvage · Answer

J'y suis retourné.Très chouette la nouvelle version !beau joli.

Ssylvainsab · Answer

Salut Etomal ;-) Bon, j'arrive peut-être un peu tard, mais je pense que tu ne refuseras pas de t'améliorer, donc voila les réflextions que j'ai a te faire : 1 Le menu change de place selon les pages : Il est parfois en haut, parfois a gauche, c'est un peu déroutant. 2 Il a pas mal de choses sur la page http://perso.orange.fr/Fermelaunay/Site_tutor/Cont.htm : 1 Le titre "Formulaire de réservation" n'est pas bien centré avec le fond vert. 2 Dans le titre de la page, il y a un underscore ("_"). Remplace le par un espace. 3 Point le plus important : les cases a cocher sont de type "checkbox" et non "radio". Ceci fait que la personne peut choisir de cocher plusieurs cases. Il faut par exemple remplacer :

1 2 3 4 5 6

Par :

1 2 3 4 5 6

Critique de premier site SVP

18 réponses

Discussions similaires

Newsletters