Mon site perso

Habillage de sites web et de forums : réalisation graphique et technique.

Modérateur : Ze Techos

Répondre
floflothebest
Jeune loup
Messages : 21
Inscription : lun. sept. 22, 2008 8:42 pm
Contact :

Mon site perso

Message par floflothebest » dim. oct. 05, 2008 1:58 pm

Salut a tous , je suis un peu hors-sujet de "GIMP" car je ne l'est pas beaucoup utiliser sur ce site mais bon ; Voilà je débute en css/(x)html (j'ai 12 ans) et j'ai créer un site sur mes chats : www.pixiebob.c.la et c'est mon tous premier site . Quand pensez vous (n'hésitez pas a critiquez) .
Merci :D

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Message par Ishimaru Chiaki » dim. oct. 05, 2008 7:25 pm

*a l'impression de retourner dans les années 90*

Au niveau codage : Le code est à revoir.
- Je ne suis sûrement pas la seule à détester les frames. Ceux-ci ne sont pas très acceesible (il n'est pas aisé de naviguer quand on ne peut pas utiliser de souris)s, et il n'y a rien qui me met le plus en maudit que le fait d'avoir de la misère à mettre en favori une page qui se trouve dans un frame, ou à transmetre l'URL exact. Ceux qui ne sont pas "computer-savvy" (autrement dit, très novice en ordinateur) ne connaissent bien souvent pas le truc du clic-droit > ce cadre pour y arriver. Si tu tiens à un semblant de frame ou bien à ne pas avoir plusieurs pages à éditer pour modifier le menu, je te conseille d'utiliser la fonction include() si tu as quelques bases en PHP.
- Je vois des balises de corps de page à l'intérieur de ton entête, des balises d'entête pas fermées et des balises body fermées sans être ouvertes, ce qui augmente les risques de bugs d'affichage.
- Attention à ne pas abuser de gifs animés, ça déconcentre la lecture en plus que ça alourdit le chargement des pages.
- Attention aussi aux contrastes entre le texte et le fond, surtout que des personnes handicapées visuelles qui, comme moi, ont des difficultés avec les faibles contrastes, pourraient visiter ta page.. Dans le menu, il y a peu de contraste entre le texte (blanc) et le fond (bleu clair) Dans le corps de la page d'accueil, certaines partie du texte dans le cadre est presque illisible. De plus, le fait que le texte soit directement dans l'image n'est pas très accessible : Si un aveugle ou quelqu'un qui n'arrive pas à afficher l'image vient, il ne verra rien, surtout qu'il n'y a aucun texte alternatif. Et même à ça, pour le texte alternatif, il n'est pas recommandé de mettre un texte aussi long.
- Il y a un peu de sémantique, mais c'est assez minimal : J'ai bien vu quelques éléments de liste dans le menu, mais ceux-ci ne sont même pas imbriqués dans un <ul>. J'ai aussi vu quelques <p> et <h1>, ce qui est un début, mais ils ne sont pas toujours fermés (encore des risques de bugs d'affichage). Heureusement, il n'y a pas de tableaux utilisée pour la présentation, une chose que l'on voit souvent dans les pages de style "années 90". Mais à part de ça, juste des balises de mise en forme qui auraient pu être facilement remplacés par une feuille de style CSS qui aurait pu ainsi alléger le poids de tes pages.

Là c'est pas mal tout dans mon évaluation. Si tu comprends l'anglais et que tu veux un condensé des erreurs fréquentes en HTML : http://www.angelfire.com/super/badwebs/

Donc, je te conseille autant que possible de commencer à coder selon les standards et les normes d'accessibilité. Une fois que tu auras pris l'habitude, tu verras que ton site sera plus facile à modifier avec des bonnes habitudes de codage, puisque toute la présentation passera par un fichier CSS au lieu d'être à même le code HTML, ce qui rend le changement de design beaucoup plus aisé.
Pour t'aider, voici des liens à ce sujet :
http://www.siteduzero.com (Tutoriels XHTML/CSS adaptés aux débutants, n'hésite pas aussi à aller voir dans les tutos non-officiels par la suite)
http://www.alsacreations.com (complément aux tutos SDZ)
http://openweb.eu.org/ (autre complément)

Tu as donc du pain sur la planche pour améliorer ton site.

Bonne chance.

Ishimaru
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » dim. oct. 05, 2008 9:59 pm

Pour ma part, je n'ai pas d'avis vu que ton site... fait planter mon Firefox ! :?
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
yerbouti
Maître pisteur
Messages : 1132
Inscription : sam. juin 28, 2008 12:39 am
Localisation : 47°40'N - 2°59'O
Contact :

Message par yerbouti » dim. oct. 05, 2008 10:47 pm

Bonjour et bienvenue.
Je confirme ce qui t'est dit plus haut, si tu as l'immense chance de commencer le codage de sites, prends tout de suite les bonnes habitudes. Tu utilises des techniques démodées qui te conduiront à l'impasse.

Bravo d'avoir soumis ton site à la critique et commence par faire une simple page valide XHTML.
Ex-Animateur GA
47°40' N - 2°59' O
Win 7 (64) - Gimp (2.8.4)

floflothebest
Jeune loup
Messages : 21
Inscription : lun. sept. 22, 2008 8:42 pm
Contact :

Message par floflothebest » lun. oct. 06, 2008 7:45 am

Merci a tous je vais essayer de prendre en compte vos remarques ;
Par contre pour les frames qu'est ce qui vous dérange autant ? sinon je peux mettre mes frames en "Border="Non"
:o flamme je ne comprends pas je suis sous firefox et j'arrive a accéder a mon site;


Pour les erreurs de code c'est parce que dans mes débuts j'utilisais dreamweaver ; la moitié du site était créer avec ce dernier(il n'est pas très bon comme logiciel pour l'encodage) il y a donc pas mal d'erreurs.
Aujourd'hui je suis passez a notepad++ et je pense pouvoir corriger les erreur de code , et puis je vais me créer une feuille .css et ferais un lien direct avec ma page html (plutôt que l'insérer directement) .
Merci de vos conseils et encore une fois je suis navré si je fait des fautes d'orthographe :(
Ps: flamme sous quelle version firefox es-tu ? En ce qui me concerne j'ai la toute derniere version et mon site marche.... Yerbouti: j'ai déjà faits des pages (x)html et des feuilles style (css) valide mais je n'avais jamais , auparavant , insérer directement le css dans la page (C'est le site de zéro qui me la appris et j'ai voulu tester cette technique)

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Message par Ishimaru Chiaki » lun. oct. 06, 2008 9:48 am

floflothebest a écrit :Merci a tous je vais essayer de prendre en compte vos remarques ;
Par contre pour les frames qu'est ce qui vous dérange autant ? sinon je peux mettre mes frames en "Border="Non"
Ce qui dérange, c'est, comme j'ai dit, la difficulté à naviguer pour ceux qui ne peuvent pas utiliser la souris parce que soit ils utilisent un PDA, soit ils utilisent un navigateur texte (Lynx par exemple), soit ils sont non-voyants (donc souris inutile, ils doivent naviguer au clavier et utiliser un lecteur d'écran). Ces deux derniers groupes n'ont pas de vision globale de la page et donc, quand ils arrivent à l'accueil, ils n'ont que les liens vers les frames, et une fois entré dans l'un des frames, ils ne voient QUE ce frame et pas les autres.

Pour mieux constater la difficulté de navigation, je te suggère de le tester sous Lynx, dont tu peux télécharger la version Windows ici : http://csant.info/lynx.htm

Je te laisse des liens sur le niveau d'accessibilité des frames :
http://www.illisite.fr/template.php?page=lecons&lecon=5
http://easi.wallonie.be/easi/accessibil ... ml?LANG=fr

Et pour finir, une expérience personnelle : Il y a longtemps, je traînais sur le site Chatsdumonde qui utilise les frames, et comme il regorge de documentation dont il est intéressant de transmettre les liens, j'ai galéré en joual'vert à envoyer le lien d'une page précise, car j'étais un GROS NOOB à l'époque et je ne connaissais pas du tout le truc du clic-droit pour afficher seulement le cadre afin de récupérer l'URL. Je me retrouvais donc à être obligée de donner le lien "court" en donnant le chemin à emprunter pour consulter le document. Même galère quand je voulais bookmarker un article. Et comme ça fait pas très longtemps que je suis revenue sur un forum peuplé à 95% de GROS NOOBS en ordi (forum du site Minçavi) qui savent à peine comment insérer une image dans leur signature, je serais prête à parier que si l'une des membres essayait de mettre un lien vers un article se trouvant dans un site à frames, elle ne saurait pas comment avoir le lien exact. Donc c'est pour éviter les maux de tête aux noobs que je te dis ça, puisqu'autant les noobs que les geeks vont être portés à visiter un site félin pour chercher des informations pour son ti-minou, et si le site lui plaît, autant le noob que le geek va vouloir transmettre le lien vers une page précise par MSN ou dans un forum, ou la mettre en favori pour l'avoir sous la main et donc, il faut que le site soit ergonomique pour tout le monde, quels que soit leur niveau en informatique et leur condition.
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
neige
Pixelium magister
Messages : 292
Inscription : mer. mai 30, 2007 1:42 pm
Localisation : La Rochelle (17)
Contact :

Message par neige » lun. oct. 06, 2008 11:14 am

Mêmes remarques que Ishimaru Chiaki. Avec un bémol car c'est déjà un beau résultat pour ton âge et un premier essai.
Cela étant, toutes ces critiques sont constructives et il vaut mieux remplacer les frames par des div.

Pense que tu ne fais pas un site pour toi mais pour tes visiteurs
;)
- Progresse lentement mais sûrement -

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » lun. oct. 06, 2008 4:13 pm

Ca marche maintenant ! :)

Sinon, à titre d'exemple, voici un site qui rassemble tout ce qu'il ne faut pas faire :

http://www.angelfire.com/super/badwebs/

Il donne une bonne idée de tout ce qui peut gêner la lecture et nuire à l'ergonomie dans un site qu'on visite.
Dernière modification par Flamme le mar. oct. 07, 2008 10:57 am, modifié 1 fois.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
yerbouti
Maître pisteur
Messages : 1132
Inscription : sam. juin 28, 2008 12:39 am
Localisation : 47°40'N - 2°59'O
Contact :

Message par yerbouti » lun. oct. 06, 2008 10:29 pm

Ouah ! quel superbe site. Je le mets dans ma collection. C'est vraiment une merveille.
Ex-Animateur GA
47°40' N - 2°59' O
Win 7 (64) - Gimp (2.8.4)

floflothebest
Jeune loup
Messages : 21
Inscription : lun. sept. 22, 2008 8:42 pm
Contact :

Message par floflothebest » mar. oct. 07, 2008 12:22 pm

chez moi le site fait tous ralentir car il montre tous les exemple de trucs agaçants ; :roll:

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » mar. oct. 07, 2008 1:30 pm

floflothebest a écrit :chez moi le site fait tous ralentir car il montre tous les exemple de trucs agaçants ; :roll:
Disons que c'est le but du jeu ! :l0l: Montrer (de façon certes excessive...) que les frames, les gifs animés, les tableaux, les choix de couleur agressifs, etc... causent de la gêne au visiteur. :)
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

floflothebest
Jeune loup
Messages : 21
Inscription : lun. sept. 22, 2008 8:42 pm
Contact :

Message par floflothebest » mar. oct. 07, 2008 2:50 pm

Oui ; mais il ne faut pas exagérer tous de même mon site n'est pas aussi chiant ^_^
Car au moins , la musique elle ne démarre pas automatiquement on a donc le choix

Répondre