[valide !]Portfolio infographiste freelance: www.inkboy.fr

(reprise du message précédent)

Hello à tous !!

Me revoilà avec une nouvelle version HTML de mon site-portfolio, corrigée selon vos conseils: plus de textes, plusieurs pages, abandon de lightbox et une validation xhtml pour la page d'accueil (j'arrive pas pour les autres, et je ne comprends pas les erreurs )

dites moi si vous avez des critiques sur cette version !!

c'est toujours sur: http://www.inkboy.fr

(pour ce qui est du contenu, j'ai fait aussi quelques ajouts...)

Salut Yosh !

Très jolie site en html et en flash aussi

Fin des compliments lol, passons maintenant à ce qui ne vas pas.

-----------------------------

Premiere page

Toutes tes ancres sont maintenant inutiles, pense à les supprimer ou soit faires des liens vers les pages. (tu aurais utiliser <ul><li></li><ul> (liste) pour faire ta liste de lien (menu) )

<p><a href="indexhtml.php" title="retour à l'accueil">accueil</a>|<a href="#cv" title="voir mon CV et mes références">CV</a>|<a href="#web" title="rubrique web">web</a>|<a href="#print" title="rubrique print">print</a>|<a href="#logo" title="rubrique logo">logos</a></p>

Tes balises meta ne sont pas fermé (la balise link aussi et tes retours à la ligne non plus <br />, et tes div aussi <div> </div>)

<meta name="Identifier-URL" content="http://www.inkboy.fr/">

Ca devrais être ainsi :

<meta name="Identifier-URL" content="http://www.inkboy.fr/" [#red]/[/#]>

Les & se code ainsi :

<meta name="author" content="inkboy.fr [#red]&amp; [/#]tungstene-design.com" >

Tu as deux div qui ont la même #entrer id.

<div id="entrer">

Pour éviter ces erreurs "bêtes" passe tes pages au validateur

-----------------------------


A partir de cette page

Si on veut revenir à l'accueil c'est impossible.

Tu devrais remplacer ton lien :

<li><a href="#">accueil</a></li>

Par celui-ci :

<li><a href="../html/indexhtml.php">accueil</a></li>

En restant sur la même page, les espaces insécables

&nbsp 

doivent être comme ceci

&nbsp[#red];[/#]

A la place d'avoir ces espaces insécables (que tu utilise sur toutes tes vignettes), tu pourrais mettres des margins à tes images, ce qui te donnerais un code plus propre et avoir bien la séparation code/mise en forme pour laquelle nous militons

-----------------------------


Sur cette page

Késako =>

<a href="../images/print/sfr001.jpg" rel="lightbox[print]" title="da/exe - "one shot" dans l'équipe pour la coupe du monde (cr: Tristan)"><img class="vignettes" src="../images/print/vignettes/thumb_sfr001.jpg" alt="da/exe - "one shot" dans l'équipe pour la coupe du monde (cr: Tristan)" /></a>

Les titles et alt contienne des "" ce qui a comme conséquence de rendre invalide ton code car il crois que des commentaires s'arrete là. Remplace les par des simple quotes.

-----------------------------


Pour finir, au niveau de ton footer il manque un espace apres ton adresse mail

 Copy inkboy.fr 2005-2006 | contact: contact@inkboy.fr  |version html spécial thanks to alsacréations 

-----------------------------


Je crois que j'ai tout dis.

Bon courage cher voisin toulousains !
Modifié par Super_baloo8 (14 Jan 2007 - 04:05)

Juste une petite chose encore, pour repérer facilement les erreurs de syntaxe, utilise Mozilla Firefox comme navigateur et installe l'extension Tidy, c'est un validateur html qui t'indiquera si il y a des erreurs ou des avertissements. Bon il existe encore quelques petits désaccord entre ce validateur et celui de W3C mais ca t'aide déjà pas mal. Bouclé de l'extension webdevelloper tu sera tranquille

Super baloo, un mot: MERCI !!

merci pour ce méticuleux débogage qui était fort utile. En effet quand on est dans son truc on ne voit pas toutes les erreurs, et les erreurs renvoyées par le validateur ne me parlaient pas.

reprenons:
- j'ai enlevé les tags lightbox que j'avais oublié sur certaines pages
- j'ai retiré la référence aux encres que j'avais par mégarde oublié au centre de la page d'accueil (donc du coup plus besoin de ul/li
- j'ai corrigé le retour à l'accueil (erreur de boulet, un oubli)
- j'ai remplacé les espace insécables auquels j'avais oublié le ";" (j'aurais jamais trouvé tout seul) et effectivement il faut que je mette des margin à la place, c'est en cours (je vais rajouter aussi des rollovers)
- les "&" sont corrigés (c'était fait mais pas sur toutes les pages)

Par contre pour tes remarques du début, au sujet des balises fermantes <br />, </div> et <meta /> je ne comprends pas car je n'en ai trouvé aucune qui ne soit pas ou mal fermée. peut être que je n'ai pas regardé assez attentivement, mais je ne trouve aucune erreur de ce style, j'y avais normalement bien fait attention (puisqu'en plus le validateur me l'avait signalé) si tu vois ou exactement, ce serait cool de me le dire...

pour les simple quotes, je n'avais pas fait attention vu que le contenu provient d'une BDD ou je rentre les légendes au kilometre. il faudra que je reprenne les entrées qui posent problème pour modifier cette histoire de quotes. (je ne comprenais pas non plus l'origine des erreurs du validateur)

Pour le reste, merci pour les compliments sur le design. J'utilise déjà firefox avec webdevelopper, mais pas tidy par contre, je vais me renseigner de ce pas.

et encore merci pour ce debug !!

Pas de souci, on est là pour ca. Pour tes balises auto fermante qui ne le sont pas, c'est sur la page d'accueil de ton nom de domaine, la ou on peut choisir en HTML et FLASH.

C'est la toute premiere page, d'ailleur j'avais mis le lien me semble t'il ?

"Yosh" a écrit :

pour les simple quotes, je n'avais pas fait attention vu que le contenu provient d'une BDD ou je rentre les légendes au kilometre. il faudra que je reprenne les entrées qui posent problème pour modifier cette histoire de quotes. (je ne comprenais pas non plus l'origine des erreurs du validateur)

Tu pourrais tout simplement, traduire toutes tes double quote par des simple code avant l'envoie en bdd
Modifié par Super_baloo8 (14 Jan 2007 - 22:47)

Bonsoir,

Super_baloo8 a écrit :
Tu pourrais tout simplement, traduire toutes tes double quote par des simple code avant l'envoie en bdd

Pourquoi changer le contenu de l'attribut ? Il suffit de remplacer les guillemets par l'entité &quot;. En PHP, voir du côté de htmlspecialchars.

j'avais envoyé une réponse, mais mystère, elle a disparue. je vous la refait courte:

Super_baloo8: effectivement je n'avais pas vu les erreurs, tout est corrigé (je pense en tout cas)

Julien Royer: je rentre tout directement dans la bdd, donc je modifierai au fur et à mesure...

Merci à vous deux pour ces dernières suggestions !

Julien Royer a écrit :
Bonsoir,Pourquoi changer le contenu de l'attribut ? Il suffit de remplacer les guillemets par l'entité &quot;. En PHP, voir du côté de htmlspecialchars.

Tu as completement raison ! +100

Hello tout le monde !!

un petit message pour vous dire que ça y est, j'ai entièrement corrigé la version HTML de mon site, et qu'elle est désormais valide XHTML transitionnal + CSS !! et tout cela grace à vous, c'est pour ça que je vous tiens au courant et que je vous remercie !! (les contributeurs à ce sujet pour leurs critiques/corrections, et alsacréations en général pour l'excellent bouquin css et l'éfficacité et la pédagogie de leurs conseils)

donc un gros MERCI pour ces conseils 100% "valides" !! ça montre (une fois de plus) qu'on peut allier graphisme et accessibilité !

Je vais surement retoucher un peu mon site (légendes plus visibles, accueil allégé, peut être des popups pour les images) je vous tiens au courant et viendrai surement vous demander critiques et conseils !

C'est dommage... ton site est joli (à mon gout)... mais j'aime bien lightbox, je pense que pour l'agrandissement de tes projets c'est mieux que de les ouvrir sur une page entière... qui plus est qui ferme ton site !
Modifié par lianis (04 Feb 2007 - 00:29)

Tiens Yosh, le monde est tout petit, tu connais surement une claire qui à fait une année d'étude avec toi dans l'infographie. On bosse ensemble sur le site de ma boite.

@+ Julien

@lianis: j'aime bien aussi lightbox, ça avait de la gueule, mais apparement c'est intrusif. en plus de ça j'ai des images trop grandes qui dépassaient la résolution 1024*768, te des .swf qui faisaient planter le biniou, j'ai donc du abandonner.

@superbaloo: Internet est un village, et le monde est petit, depuis que j'ai lancé mon site je rencontre plein de gens que j'ai déjà croisé en vrai. Jai connu une claire qui était en 2eme anné qd j'étais en 1ere, elle s'était spécialisée 3D ensuite.

Hey ! me revoilà avec un design de site mis au gout du jour !! j'aimerai votre avis, voilà la liste (en gros) des modifs:

- ajout d'une page ressources
- update du contenu
- déplacement de l'accès à la version flash
- changement de menu
- changement des couleurs et taille des titres (pour plus de visibilité)
- changement des couleurs des strong et des liens
- modification de la présentation des vignettes: désormais sur 3 colonnes avec légende à coté (avant c'était que les vignettes cote a cote avec le seul attribut "alt" pour description)
- correction des " " en trop entre les vignettes qui servaient à la mise en page (paaass biennn ) pour un placement total css
- correction de la favicon selon les recommandations: ico en 32x32 au lieu de png, pour une compatibilité étendue

le tout toujours valide XHTML 1.0 Transitional et en accord avec les bonnes pratiques opquast.

voilà, ça se passe ici pour la version html, j'attend vos avis !!

NB: pour les vignettes, j'aimerai que toute la div (contenant vignette + légende) soit cliquable. si quelqu'un à une petite astuce, je suis preneur !!
Modifié par yosh (23 Jun 2007 - 22:35)

Bonjour,

a écrit :
NB: pour les vignettes, j'aimerai que toute la div (contenant vignette + légende) soit cliquable. si quelqu'un à une petite astuce, je suis preneur !!

Il existe cela sur le site de Christian.

Mettre en lien un ensemble de blocs
Modifié par knarf (24 Jun 2007 - 04:51)

Salut,

knarf a écrit :
Bonjour,

NB: pour les vignettes, j'aimerai que toute la div (contenant vignette + légende) soit cliquable. si quelqu'un à une petite astuce, je suis preneur !!

Il existe cela sur le site de Christian.

Mettre en lien un ensemble de blocs

Pas vraiment utile dans le cas présent, je pense que ça peut se régler au niveau du html en restant tout à fait pertinent.

Donc en prenant l'exemple du premier lien, au lieu de :

<div class="cartouche">
<a href="../images/photos/ann_001.swf" title="Retouche photo complète - photographe: olivier moravik -  www.hyperpicture.com">
 
<img class="vignettes" src="../images/photos/vignettes/thumb_ann001.jpg" alt="Retouche photo complète - photographe: olivier moravik -  www.hyperpicture.com"  />
</a>
<p>
<a href="../images/photos/ann_001.swf" title="Retouche photo complète - photographe: olivier moravik -  www.hyperpicture.com">
 
Retouche photo complète - photographe: olivier moravik -  www.hyperpicture.com
 
</a>
</p>
</div>

On peut tout simplement avoir :

<p class="cartouche">
<a href="../images/photos/ann_001.swf">
<img class="vignettes" src="../images/photos/vignettes/thumb_ann001.jpg" alt="" />
<span>
Retouche photo complète - photographe: olivier moravik -  www.hyperpicture.com
 
</span>
</a>
</p>

Au passage j'ai enlevé le title et mis un alt vide pour l'image. L'information étant en dur dans le document en contexte immédiat de l'image il est inutile de rajouter quoi que ce soit.
Modifié par Christian Le Bouler (24 Jun 2007 - 11:16)

Merci pour vos réponses, je vais voir ce que je fais !

et sinon d'un point de vue graphique vous en pensez quoi ?