[Amateur] Un mélange de blog et portfolio > http://kaysix.free.fr/

Salut !

Je fais du webdesign en autodidacte.
J'ai créé un p'tit site sous PluXml (CMS sans BDD), en m'inspirant un peu de Bootstrap. Mon thème est sinon parti de 0.

J'ai essayé de le mettre en HTML5 pour comprendre un peu son fonctionnement.

Aujourd'hui, lorsque je vais sur le validator W3C, j'ai quelques erreurs, mais je n'arrive pas trop à comprendre ce que je dois changer.

Prochaine étape d'amélioration : faire un thème responsive...

L'adresse : http://kaysix.free.fr/

Balancez vos critiques pour m'améliorer !
Merk6
Modifié par KaySix (24 Feb 2012 - 11:44)

Salut,

Sur les erreurs, les commentaires du validateur sont clairs :

Pour les trois premières, tu as des id en double. Un "id" est unique au contraire d'une class.

Quant à l'erreur "An a start tag seen but an element of the same type was already open", c'est l'imbrication de deux balises a qui pose problème.

Merci !!

J'ai réglé ce point, il me reste ceci (lien du validator sur mon site ):

a écrit :
Line 112, Column 139: An a start tag seen but an element of the same type was already open.
…a suite de Thème PluXml HTML5: Yallow">Lire la suite de Thème PluXml HTML5: Ya…
✉
Line 112, Column 139: End tag a violates nesting rules.
…a suite de Thème PluXml HTML5: Yallow">Lire la suite de Thème PluXml HTML5: Ya…
✉
Line 112, Column 139: Cannot recover after last error. Any further errors will be ignored.
…a suite de Thème PluXml HTML5: Yallow">Lire la suite de Thème PluXml HTML5: Ya…

Je comprends pas...


Edit(hPiaf) : J'ai compris !
Modifié par KaySix (24 Feb 2012 - 18:02)

Pas de critiques ?
Ce n'est pas que ça me dérange mais bon, je sais que ce n'est pas parfait et que ça pourrait s'optimiser... (suis pas webdesigneuse...)

> J'sais pas, au niveau des couleurs ?
> Des propriétés CSS utilisées ?
> De l'idée de navigation ?
> De la page lightbox en css3 (réalisée depuis les codes du site codrops !) ?


Balancez vos ressentis, avec légereté et bras en l'air (parce que c'est classe d'avoir les bras en l'air )
Modifié par KaySix (28 Feb 2012 - 14:27)

Je regarde ça mais juste au premier coup d'oeil...

J'adore le style de tes illus' ^^

Hormis l'accueil ou on retrouve pas trop ses petits ergonomiquement j'aime bien

PluXml je ne connaissais pas c'est bien?
Modifié par UnCoindPixel (28 Feb 2012 - 14:43)

Pour PluXml :
Je l'ai découvert en novembre et j'ai tout de suite adhéré à son fonctionnement :
=> simplicité d'utilisation (la création de thème est super simple ! la preuve pour moi !)
=> Très leger
=> Aucun problème sur free (contrairement à Wordpress, etc)
=> Fonctionne en Xml, pas besoin de base de données

Ideal pour faire un site ou un blog (sans millions d'articles) !


Merci.
J'aimerais rendre le truc plus "original" en mettant mes dessins directement dans le webdesign, mais je n'ai pas encore poussé ma reflexion plus loin.
(je vais surement d'abord revoir la navigation, le rendre responsive, revoir le fonctionnement et ensuite le design ! )
Modifié par KaySix (28 Feb 2012 - 15:26)

Je viens de l'installer la ça à l'air pas mal en effet. Par contre en CMS je débute... Je voudrais créer un thème comment faire?

Sinon pour te répondre : Peut être utiliser qq persos avec des mouvements au passage de la souris comme sur mon site en haut à droite
Modifié par UnCoindPixel (28 Feb 2012 - 15:29)

Lorsque tu installes, tu as le thème par défaut.

Aujourd'hui, le site PluXml (http://www.pluxml.org/) est brouillon, les admin' travaillent pour le réorganiser ! Donc ne te fie pas trop à ce qu'il y a !

> Tu vas trouver toutes les infos à tes questions et pas mal de thème déjà fait (notamment l'adaptation du thème Bootstrap de Twitter) sur le forum de PluXml (http://forum.pluxml.org).
La communauté est réactive si t'as la moindre question !

Tu peux modifier ton thème (celui par défaut ou ce que tu veux) dans l'administration de ton site.

a écrit :
Sinon pour te répondre : Peut être utiliser qq persos avec des mouvements au passage de la souris comme sur mon site en haut à droite

Je ne vois pas où sur ton site ?
(j'ai regardé sur deux navigateurs et j'ai remarqué que ton menu (en haut à droite) n'avait pas la même police sur Chrome et Firefox ?!)
Modifié par KaySix (28 Feb 2012 - 16:50)

Je vais me pencher sur ça car c'est pas inintéressant.

Je parle du "superpixel" pour le hover

Oui c'est normal, j'ai une police de substitution si le première ne fonctionne pas.

Mon (mes) navigateur doivent avoir la cataracte (moi aussi ), je ne vois pas !


> Par contre, quand je mets ma souris sur ton image facebook, je vois rien (il manque cette image : http://www.uncoindpixel.com/img/facebookhover.png)

Ah c'est bizarre ^^ Je viens de tester IE, Firefox, Safari, Opéra et Chrome (tous dans des versions récentes celà dit) et aucun pb ni de typo ni de hover qui manque... C'est spé ça m'inquiète...

Bref revenons à ton site, je fais du HS la

Salut,

Tout d'abord j'adore tes visuels

Au niveau du site, graphiquement parlant c'est bien homogène c'est plutôt réussi de ce côté là. Mais comme tu l'as toi même souligné, c'est dommage de ne pas avoir profité de tes réalisations pour ponctué ton site web d'illustrations. Ça le rendrait plus vivant et tu as le talent pour, donc n'hésite pas .

Sinon au niveau du code tu met des titles là où ce n'est pas nécessaire. Exemple sur l'onglet contact j'ai un title contact. C'est redondant et n'apporte aucune information pertinente. Généralement on utilise des titles sur des liens uniquement dans des cas bien spécifiques.

Les alt sur tes images ne sont pas bien géré, parfois tu as le titre de l'image (là c'est OK) parfois tu as « images 001 », ça c'est à revoir si tu veux un sites un minimum accessible. Ton logo aussi mériterai un alt mieux choisi, bien que celui-ci soit à moitié correct. Là tu as mis « Blogoportfolio de KaySix » hors il n'est écris que Kaysix sur l'image.

L'intégration de tes liens sociaux n'est pas optimal, tu as des <a> qui sont vides, ça nuit à la sémantique de ton document.

Ta hiérarchie de titre est mauvaise, tu commences directement par un h6 pour passant ensuite par un h5 etc... Le mieux aurait été de commencer par un h1 (pour le logo de ton site par exemple).

Au niveau de la navigation je trouve dommages qu'on ne puisse pas passé de slide en slide quand on regardes tes visuels, c'est un effet qu'on retrouve souvent sur les lightbox et qui permet une navigation aisée, ici je dois quitter à chaque fois la diapo pour réouvrir une autre, un peu relou, surtout au vue du nombre de visuels que tu as.

Les statistiques dans la sidebar n'intéressent que toi à mon avis, ça fait fort amateur généralement on évite de mettre ce genre d'informations.

Ce qui est dommage c'est que ton site prend toute la largeur de la page. Généralement on essaye de le mettre dans un conteneur. Pour les grandes résolutions c'est plus sympas.

En espérant t'avoir fourni quelques pistes

Effectivement, tu soulignes des grands flous dans ma tête : les titles, les alt et la hiérarchisation des titres. Faut que je plonge la dedans.

Pour les liens sociaux, ils s'agissaient d'un plugin de PluXml, je l'ai enlevé, mais des traces doivent rester, je vais les enlever !

Pour l'effet lightbox, le problème avec la navigation entre images, c'est que ça buguait avec le script quicksand (qui permet de selectionner que les images Inkscape ou Wallpaper, etc.), donc je l'ai viré...

Les stats', tu as raison, je vais le virer !

Pour la largeur totale, ça va rentrer dans ma mise à jour en responsive design' pour que ça s'adapte à tout !

Merci beaucoup !!!

Gili a écrit :
L'intégration de tes liens sociaux n'est pas optimal, tu as des &lt;a&gt; qui sont vides, ça nuit à la sémantique de ton document.

En effet, sous ma config de "geekette qui se bat avec une uvéite et qui a mal à l'oeil sous la lumière vive", ces icônes deviennent invisibles, puisque lorsuqu'on utilise nos propre couleurs plutôt que celles du CSS du site, cela désactive les images d'arrière-plan.

Voici une capture de ce que ça donne chez moi :
http://dl.dropbox.com/u/25752921/pb-access-uveite03.png

a écrit :
puisque lorsuqu'on utilise nos propre couleurs plutôt que celles du CSS du site, cela désactive les images d'arrière-plan.

Arf.

Comment dois-je procéder alors ?
(mon image avec les icones sociaux)


PS: Yeah, j'aime bien en foncé sinon (cf ta capture, hahaha)
Modifié par KaySix (29 Feb 2012 - 10:13)

DP désolée.

ça y est, j'ai mis mon nez dans le vif du sujet !

a écrit :
L'intégration de tes liens sociaux n'est pas optimal, tu as des <a> qui sont vides, ça nuit à la sémantique de ton document.

Je vois ce que tu veux dire, comment dois-je faire alors ? Je mets du texte avec un :

text-indent: -9999px;

?
Modifié par KaySix (29 Feb 2012 - 10:26)

Surtout pas ! ^^

C'est une mauvaise pratique bien trop répandue, imagine que l'image ne se charge pas (oui ça arrive encore, la preuve là où je loge en ce moment pour mon stage ça arrive ponctuellement) et bien tu ne verras... rien du tout ! ^^

Il y a plusieurs façon de procéder, si tu as seulement envie de voire une image (et pas un petit texte explicatif sur le côté) le mieux est de simplement la placer dans une balise img avec un attribut alt pertinent. C'est une image porteuse de sens alors on la met dans l'HTML. Après tu peux faire des jolis effet en CSS3 avec :hover.

Si tu avais un petit texte à côté (genre DeviantArt avec l'icône à côté), alors là effectivement tu aurais pu la mettre en CSS car l'image n'apporte pas d'information supplémentaire, c'est juste pour le plaisir visuel.

Edit: il y a aussi la technique des icônes typographiques où là tu pourras avoir des chouettes effet au survol. Je te laisse lire le billet de Raphaël à ce sujet.

En espérant t'avoir éclairé .
Modifié par Gili (29 Feb 2012 - 11:42)