[Intermédiaire] hello-bokeh.com

Bonjour à tous,

J'ai travaillé ces derniers temps sur un site qui présenterait mon travail photographique :
Hello Bokeh !

Côté php, ça ne se voit pas trop de l'extérieur, mais j'ai quand même essayer de faire ça propre.
Côté html, j'ai fait un maximum pour respecter les standards et les règles sémantiques.
Côté CSS, je n'ai aucune idée si c'est browser compliant, ça j'avoue ne pas trop m'y être penchée (je tourne sous linux alors j'ai tendance à oublier tout ce qui est IE).
Côté javascript, les tutos d'alsacréations m'ont beaucoup aidés à comprendre jQuery, et j'ai enfin réussi à obtenir exactement ce que je voulais (en mode grand format du porfolio). Le mode "miniatures" du portfolio lui est utile pour avoir une idée d'ensemble du portfolio, ou bien pour les gens qui n'ont pas javascript activé.

Je le soumets donc à vos critiques, et plus tard, quand j'en aurais le courage, je m'attaquerais à une version portable du site (j'ai vu des ressources intéressantes dans la bonne partie du forum !)

Bonsoir !

Niveau design j'adhère totalement ! La page a un côté minimaliste sans vraiment l'être, mais on sent de la recherche derrière.
Sous IE6 ca passe ! Mis à part le background qui ne s'affiche pas et un décollement du titre par rapport au cadre blanc. Mais aucune perte de fonctionnalité.

Accessibilité :

Dommage qu'avec JS désactivé on ne puisse pas voir les dernières photos. De plus si pour une raison ou pour une autre l'image du quadrillage ne peut se charger je me retrouve avec un fond blanc, avec le titre H1 blanc sur blanc...

background:#fff url(img/carreaux.png);

Mieux vaut-il pas mettre #000 comme couleur ?

Code :

Concernant le code je ne vois pas de faute majeure, la sémantique a l'air bien respectée. Cependant je laisse le micro aux autres pour commenter plus en détails.

PS. le contenu contribuant aussi à la structure du site, les photos sont chouettes je trouve.
Modifié par darkstar2023 (03 Apr 2010 - 23:15)

J'aime bien.
Gzip ne semble pas activé?
Tu as 3 images introuvables (social-*)
Les titres de ton rss sont tous les mêmes
Modifié par paolo (03 Apr 2010 - 23:27)

darkstar2023 a écrit :
Bonsoir !

Accessibilité :

Dommage qu'avec JS désactivé on ne puisse pas voir les dernières photos. De plus si pour une raison ou pour une autre l'image du quadrillage ne peut se charger je me retrouve avec un fond blanc, avec le titre H1 blanc sur blanc...

background:#fff url(img/carreaux.png);

Mieux vaut-il pas mettre #000 comme couleur ?

L'erreur de css est corrigée sur le champ ! (j'étais partie sur un fond blanc au début, et j'ai changé d'idée en cours de route)

Pour le javascript, je n'ai pas vraiment trouvé d'alternative mais en y réfléchissant, je vais peut être générer cette partie en tirant directement dans les dernières photos de mon portfolio plutôt que d'aller les chercher sur flickr.

Merci pour ton avis !

paolo a écrit :
J'aime bien.
Gzip ne semble pas activé?
Tu as 3 images introuvables (social-*)
Les titres de ton rss sont tous les mêmes

J'ai déjà entendu parlé de Gzip, mais sans m'y être penchée. Je vais voir de quoi il en retourne.

Pour les titres rss, "c'est pas faux" comme dirait l'autre. Cela est-il problématique ? Je génère le flux automatiquement et je pourrais bien mettre en titre d'item le titre de l'image mais un titre du type "IMG_8116.jpg" apporterait-il beaucoup d'informations supplémentaires ?

a écrit :
Cela est-il problématique ?

Pas dramatique: on ne voit pas forcément si il y a du nouveau (tout dépend comment on lit le flux). Tu peux déjà choisir des titres d'images plus explicites, et éventuellement remplacer le titre du flux par le contenu du title ou ce que bon te semblera .

Je suis nulle pour trouver un titre à mes images . Par contre, je peux y mettre la date de la prise de vue !

Du moment que cela puisse différencier les photos les unes des autres et si possible, que ce soit intuitif pour les abonnés (qu'ils puissent se rendre compte facilement s'il y a du nouveau).
Effectivement je pencherais pour la date, au pire pour le numéro de la photo (même si artistiquement ce dernier n'est pas très parlant )
Modifié par darkstar2023 (04 Apr 2010 - 01:56)

Je n'ai rien à ajouter de plus que darkstar ou paolo : c'est clean, simple sans être trop dépouillé, et bien ficelé.

Un joli travail !

annso a écrit :


J'ai déjà entendu parlé de Gzip, mais sans m'y être penchée. Je vais voir de quoi il en retourne.

Bonjour,

http://www.alsacreations.com/article/lire/914-compression-pages-html-css-gzip-deflate.html

Sinon tout a déjà été dit ou presque ...

Je trouve que les url sont pas très sexy, pourquoi ne pas faire un peu de rewriting ?
Modifié par Benjamin-Ds (04 Apr 2010 - 15:54)

Benjamin-Ds a écrit :

Je trouve que les url sont pas très sexy, pourquoi ne pas faire un peu de rewriting ?

Très bonne idée ! Je ne sais pas faire, mais je vais bien trouver des articles intéressants. Sinon, merci pour l'article sur gzip, j'étais tombée dessus hier soir après la remarque de paolo.

Voilà, mes urls sont sexy \o/

Bonjour,

j'ai pas regardé le code ni rien mais un truc que j'aime pas c'est de passer du fond noir (ton site) à Flickr sur fond blanc quand on clique en bas à droite sur tes dernières réalisations. Ça pête un peu les yeux, en tout cas à cette heure-ci

annso a écrit :
Pour le javascript, je n'ai pas vraiment trouvé d'alternative mais en y réfléchissant, je vais peut être générer cette partie en tirant directement dans les dernières photos de mon portfolio plutôt que d'aller les chercher sur flickr.

Il y a une API exploitable pour PHP, aussi. Ou a minima on peut faire la même chose côté serveur qu'avec ce script JS mais je me rappelle plus si c'est simple ou pas. Je crois qu'il fallait extraire à la main les infos nécessaires du fichier XML récupéré de chez Flickr et reconstituer les vignettes src+titre+href , mais euh y a forcément 15 tutos sur le Net ...

darkstar2023 a écrit :
Du moment que cela puisse différencier les photos les unes des autres

Yop, déjà ça ce sera un grand pas

Felipe a écrit :
Bonjour,

j'ai pas regardé le code ni rien mais un truc que j'aime pas c'est de passer du fond noir (ton site) à Flickr sur fond blanc quand on clique en bas à droite sur tes dernières réalisations. Ça pête un peu les yeux, en tout cas à cette heure-ci

Je vais envoyer un mail à Flickr pour voir si ils ne veulent pas changer la couleur de leur fond, mais je ne changerais pas le mien

Felipe a écrit :

Il y a une API exploitable pour PHP, aussi. Ou a minima on peut faire la même chose côté serveur qu'avec ce script JS mais je me rappelle plus si c'est simple ou pas. Je crois qu'il fallait extraire à la main les infos nécessaires du fichier XML récupéré de chez Flickr et reconstituer les vignettes src+titre+href , mais euh y a forcément 15 tutos sur le Net ...

Finalement, j'ai plutôt choisi de récupérer les dernières images provenant de mon site.

Et pour finir, mon flux rss affiche la date de prise de vue de chaque photo.

Merci de vos remarques !

Bonjour,

Graphiquement, c'est très sympa ; tant qu'on n'a pas besoin d'agrandir les caractères, auquel cas le titre est mangé par le bloc de contenu. De plus, le fond noir me pose un autre problème que celui soulevé par Felipe : les lien, minuscules et blancs sont trop contrastés par rapport au fond et deviennent difficile à lire ; le gris des textes passe beaucoup mieux, même si les caractères restent trop petits.

Sur la page d'accueil, j'ail l'impression qu'il manque quelque chose dans le grand vide à droite du texte d'accueil.

Pour le code :
* Tu définis la langue de la page comme étant de l'anglais dans html. Pourtant, je suis à peu près sûre qu'il s'agit de français ^^; Il serait également bien d'ajouter une meta Content-Language.

* Il est préférable d'inclure les scripts JS en fin de document, de sorte que le contenu puisse se charger avant.

* La meta keyword ne sert strictement à rien, elle peut donc être supprimée.

* Par contre la meta description est assez utile, elle est affichée dans les pages de résultat des moteurs de recherche sous le titre d'une page. Il est donc important de la rendre attirante pour le visiteur, ce n'est pas le cas actuellement. Le contenu de cette balise doit, d'ailleurs, être unique pour chaque page du site, comme le <title>.

* Ta hiérarchie des titres n'est pas tout à fait correcte. Les titres de section du footer ne sont pas des h3 (ils ne font pas partie de la section "News") mais des h2.

* Une image qui est support de lien doit toujours avoir un texte alternatif rempli :

<a href="/photos-2010-big#24"><img src="portfolio/2010/square/IMG_8112.jpg" alt="" /></a>

Dans le cas de tes dernières photos, si les images ne s'affichent pas (problème de serveur, problème de connexion...) le lien ne pourra tout simplement plus exister. Mettre le titre des photos ou une description courte de celles ci serait parfait.

Très bon travail en tout cas, du code propre c'est agréable à lire
Modifié par Laurie-Anne (06 Apr 2010 - 09:04)

Laurie-Anne a écrit :
Bonjour,

Graphiquement, c'est très sympa ; tant qu'on n'a pas besoin d'agrandir les caractères, auquel cas le titre est mangé par le bloc de contenu. De plus, le fond noir me pose un autre problème que celui soulevé par Felipe : les lien, minuscules et blancs sont trop contrastés par rapport au fond et deviennent difficile à lire ; le gris des textes passe beaucoup mieux, même si les caractères restent trop petits.

Sur la page d'accueil, j'ail l'impression qu'il manque quelque chose dans le grand vide à droite du texte d'accueil.

Je prends bonne note de tes remarques, néanmoins pour les couleurs et la taille des caractères, même si ça n'est pas optimal, je choisis de ne rien changer. Ça reste quand même lisible, et de plus je veux vraiment centrer le site sur les images, et pas sur le texte. Si cela avait été un site d'actualité nécessitant beaucoup de lectures, je ne partirais évidemment pas dans cette optique.
Pour la page d'accueil, c'est vrai que la droite manque d'un quelque chose. C'est un peu pour ça qu'est là le dessin, pour combler le vide, en attendant que je trouve mieux.

Laurie-Anne a écrit :

Pour le code :
* Tu définis la langue de la page comme étant de l'anglais dans html. Pourtant, je suis à peu près sûre qu'il s'agit de français ^^; Il serait également bien d'ajouter une meta Content-Language.

* Il est préférable d'inclure les scripts JS en fin de document, de sorte que le contenu puisse se charger avant.

* La meta keyword ne sert strictement à rien, elle peut donc être supprimée.

* Par contre la meta description est assez utile, elle est affichée dans les pages de résultat des moteurs de recherche sous le titre d'une page. Il est donc important de la rendre attirante pour le visiteur, ce n'est pas le cas actuellement. Le contenu de cette balise doit, d'ailleurs, être unique pour chaque page du site, comme le <title>.

* Ta hiérarchie des titres n'est pas tout à fait correcte. Les titres de section du footer ne sont pas des h3 (ils ne font pas partie de la section "News") mais des h2.

* Une image qui est support de lien doit toujours avoir un texte alternatif rempli :

<a href="/photos-2010-big#24"><img src="portfolio/2010/square/IMG_8112.jpg" alt="" /></a>

Dans le cas de tes dernières photos, si les images ne s'affichent pas (problème de serveur, problème de connexion...) le lien ne pourra tout simplement plus exister. Mettre le titre des photos ou une description courte de celles ci serait parfait.

Voilà des remarques intéressantes et très vite corrigées, merci. Je vais d'ailleurs aller réviser mes métas, visiblement je n'avais pas tout juste.

Laurie-Anne a écrit :

Très bon travail en tout cas, du code propre c'est agréable à lire

Héhé, merci

Peu de remarques, c'est du bon boulot!

* Les textes des menus secondaires de ta page d'accueil (en bas à gauche) sont très difficilement lisibles car trop petits. Leur taille, égale à celle du menu contact (ne bas à droite), leur donne visuellement une importance similaire, alors que ce ne devrait pas être le cas.
* Le lien vers la validation XHTML n'a pas particulièrement de raison d'être.
* Niveau contenu, la section A propos de la page d'accueil est curieusement rédigée :

a écrit :
22 ans à mon actif, mais photographe autodidacte et passionnée depuis seulement 3 ans

Le mais devrait normalement indiquer un changement de voie (ex: je suis malade mais je me soigne ; je suis geek mais aussi photographe) ; il n'a pas trop lieu d'être ici (j'ai 22 ans mais je suis photographe ne fonctionne pas ). Tu pourrais peut-être faire une seule phrase des deux qui composent cette section en supprimant le mais et le seulement.

Je m'attarde sur ces quelques lignes... c'est bien que je n'ai trouvé que cela à redire !

Il y aura alors encore moins de chose à dire maintenant car j'ai corrigé les quelques points que tu as soulevés : les liens de navigation du bas sont plus gros, le texte de présentation a été revu et le lien vers la validation XHTML a disparu.

Merci de tes remarques

J'ai épluché davantage les différentes pages de ton site, et voici ce que j'y ai rencontré :

* L'attribut alt des photos n'est pas renseigné, ou incorrectement.
Il existe un article à ce sujet.
* Utilisation de balises à des fins de mise en forme : <i>, <b>, <br>.
Un article sur l'utilisation des balises i, b, strong et em.
* Présence de balises vides, et donc inutiles (cf. la classe .clear).
* Propriétés CSS inutiles. Exemple : z-index et color du sélecteur #top.
Tu pourrais faire une revue de code CSS pour nettoyer tout ça
* Le texte alternatif des boutons permettant d'intervertir les modes d'affichages de tes photos est en anglais
* Dans le second mode de visualisation des photos (une à une), la photo affichée disparaît lorsque la suivante se charge. Ce même mode de visualisation ne fonctionne pas si le JS est désactivé.
* Les messages qui apparaissent après avoir soumis le formulaire de contact ne sont pas assez visibles. Dans le cas d'erreurs, il vaudrait mieux modifier la bordure et/ou le fond des champs et des labels, en plus du texte indiquant les erreurs commises.

Deux petites remarques supplémentaires :
* Il serait plus confortable qu'une validation JS soit disponible pour le formulaire de contact.
* La mise en page du texte et des icônes permettant d'intervertir les modes d'affichages est curieuse, et compliquée. Les quelques lignes suivantes suffisent à produire le même rendu :

<p id="display-mode">Mode d'affichage :
  <a href="photos-2010">
    <img alt="" title="Miniatures" src="/img/thumb.gif" class="current">
  </a>
  <a href="photos-2010-big">
    <img alt="" title="Taille réelle" src="/img/big_.gif" class="opaque">
  </a>
</p>

#display-mode img{
  vertical-align: bottom;
}