Avis sur un futur photo Blog

Salut la compagnie !

a mon tour de vous soumettre quelque chose à la critique

Wala la bête :
http://www.elmoustikoblog.net/bordel/alex_vir/integration/

C'est pour un site style photo blog.
C'est grosso modo terminé niveau intégration HTML et CSS, reste le contenu et la partie backend côté serveur, mais là "on s'en fout" au niveau de la critique

Donc, j'aurais aimé votre avis sur le code HTML, le code CSS et aussi (et presque surtout) sur le graphisme et l'organisation générale de la page.

Voilà
Merci !

p.s. je retrouve plus le topic où on parlait de transparence d'image pour IE, y avait les PNG, l'image cadrillée "transparent"/"blanc", les fichiers htc etc, j'ai testé le cadrillage transparent/blanc et le texte est difficile à lire et bien evidement le PNG ne transparence pas sous IE
J'intégrerais bien le truc htc enfin, je voulais revoir le topic histoire de voir les alternatives ^^ si quelqu'un le retrouve

bonsoir Olivier

Je trouve le design tres bien fait. Seul bémol, a mon gout, la couleur du body.
Il est tres clair et les rayons de soleil du header se melange ( et c'est surement le but recherché) au body, et cela me "flash" au yeux.

Voile pour moi

mais je persiste, tres joli, tres sobre, tres clair (trop peut etre )

en ce qui concerne la transparence sous I.E., j'ai vu le bug mais j'ai pas la solution ni le lien vers le topic

Niveau design j'aime bien, y'a juste la petite image en bas à droite (le palmier qui dépasse) qui est "blanchi" un peu sur le coté droit pour qu'on voit miux le texte... moi j'aurais plus tenté un dégradé pour faire un fondu et ne pas avoir une "coupure" avec l'image. Mais bon ce n'est juste qu'un détail.

Pour le header c'est vrai que ça flash un peu. Juste le blanc du ciel au dessus du lien "et puis un autre" le reste ça va.

Après, question de goût là, je n'aurais pas utilisé les icônes de dossier xp à coté des mois (mais bon c'est juste une question de goût comme je le disais.

Il y a aussi le titre Alexis & Virginie dans le header qui passe un peu inaperçu.

Au niveau du code, j'ai juste jeté un coup d'oeil et ça m'a l'air bien organisé, manque peut-être un peu "d'accessibilité" mais je ne suis pas sûr. De toute façon tu es bien meilleur que moi pour le css

Bon bah pour moi c'est tout, donc agréable dans l'ensemble, juste quelques modifications dans le header (nuage moins flashy et titre mis en valeur)

Ca reste sobre et lisible, des designs comme je les aime

J'aime beaucoup le design

Niveau code, pas grand chose à dire

Tu parlais de la transparence des png avec IE. Si ça t'intéresse, il y a moyen de faire ça très simplement , sans fichier de comportement et de façon tout à fait valide

Bon , j'ai du chipoter pour y arriver, mais en réalité c'est pas trop compliqué :

Tu as tes styles "normaux" :

#transparence{
width: 595px;
height: 358px;
}
#transparence[id ]{
background-image: url(transparence.png);
}

Bref normal. J'ai mis un [id ] histoire de masquer la règle à IE.

Ensuite le style pour la transparence avec IE:

#transparence{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='transparence.png');
}

Et pour garder la feuille valide, tu met ça dans un autre fichier que tu apelles avec un commentaire conditionnel :

<!--[if gte IE 5.5000]>
<link rel="stylesheet" type="text/css" href="style_ie.css" media="screen" title="Style spécial IE" />
<! endif -->

Petite astuce :

d'après ce que j'ai compris, l'url du fichier png que tu précisé dans "filter" est relative à la page html et pas au fichier css ...

:)


( http://www.labordure.com/contact/ pour avoir un exemple)
Modifié par TriadPtale (09 Jul 2005 - 00:58)

Voilà, j'ai mis à jour
float sur le contenu et le menu, margin-top au lieu du top.

même rendu pour IE6 et firefox sur PC
J'ai un décalage d'un pixel sur le menu pour Opera, mais on va dire qu'on a rien vue

:)

l'url est toujours : http://www.elmoustikoblog.net/bordel/alex_vir/integration/

Pour la validité, m'en fout un peu c'est un truc proprio, je suis au courant, j'assume
Plus sérieusement, je sais que ça ne portera pas préjudice au reste donc ça ne me soucis guère

Je teste
Modifié par Olivier (09 Jul 2005 - 00:55)

Salut,

Visuellement, je trouve ça très beau quoique un peu flash sur cet écran plat (il est clair comme résolution).

Je viens de couper et ranger le portable linux ; je testerai demain sous FF et Konqueror.

Pour ce qui est des codes, je passe la main
Modifié par Olivier (09 Jul 2005 - 17:41)

Un petit effort d'accessibilité, avec liens d'accès direct en tête de page ?

Un petit effort sémantique, avec utilisation des link rel ?

Un petit effort d'interopérabilité, avec une couleur de fond pour le menu horizontal, derrière les images ? Histoire que ce ne soit pas clair sur clair en cas de non affichage des images ?

Très joli, sinon.

Bonjour Olivier,

Remplace donc couché de soleil, par coucher de soleil, ça le fait mieux.

Alors, reprenons

Papyjo > sérieux ? okay, je pensais pas

Laurent >
* Pour les liens d'accès direct... mwé... hmm... j'y songerais, c'est vrai que c'est mieux, mais là je trouve l'interet limité
* <link rel> pour ?? pour la feuille de style tu veux dire ? pourquoi d'autre ? j'avoue que là je vois pas trop
* pour la couleur de fond du menu, oui c'est vrai, j'ai oublié , ça sera fait Rien que pour le redimenssionement de texte c'est important !

Merci !

Je vais aussi corriger certains trucs aujoud'hui, pas eu le temps hier soir suite à vos remarques, donc reste à faire :
Utiliser un fond PNG transparence avec bord arrondi pour moins couper la photo comme le suggérais knight ( http://forum.alsacreations.com/topic.php?fid=18&tid=5199#p45300 )

Je referais un essai pour les icones aussi !:p
Pour le header, je ferais quelques essais pour que "ça flash moins" et en tentant de mettre le titre un peu plus en valeur. Je verrais peut être avec le fond de la page, ce que ça donne en un peu plus contrasté !

Wala !
Modifié par Olivier (09 Jul 2005 - 17:43)

Olivier a écrit :

* Pour les liens d'accès direct... mwé... hmm... j'y songerais, c'est vrai que c'est mieux, mais là je trouve l'interet limité

Ben... Moi qui en ai souvent l'usage, j'en vois tout à fait l'intérêt !

(Mais c'est comme tu veux, tu choises, bien-sûr)

Olivier a écrit :

* <link rel> pour ?? pour la feuille de style tu veux dire ? pourquoi d'autre ? j'avoue que là je vois pas trop

ça, c'est pas encore rentré, on dirait

Oublie un peu ces fichues feuilles de styles :

<link rel="author" title="Auteur" href="..." />
<link rel="copyright" title="Copyright" href="..." />
<link rel="start" title="Accueil" href="/" />
<link rel="index" title="Carte" href="..." />
<link rel="help" title="Aide" href="..." />
<link rel="search" title="Recherche" href="..." />

Et pour chaque billet, son :

<link rel="section" href="..." title="Catégorie Brocolis" />

C'est à dire les liens permettant d'exploiter la barre de navigation générée par les navigateurs intelligents, requis pour l'accessibilité, situant ton billet dans la collection de pages du photoblog, permettant d'y naviguer, etc.

Voir :

a écrit :
Le code de toutes les pages contient des liens relatifs de navigation pointant vers les pages du site présentant au moins l'auteur, les droits de reproduction, l'accueil et le plan du site.

(
 http://www.opquast.org/atelier/index.php/Proposition:Navigation_:_liens_vers_l'auteur%2C_les_droits_de_reproduction%2C_l'accueil_et_le_plan_du_site
 
)

(<edit>fichu forum !</edit>)
[ Édité par Stephan, fichu forum ! ]
<re-edit: oui, n'est-ce pas ?
[ re-Édité par Stephan, tiens j'ai une idée ]
<re-re-edit: Tiens-moi au courant, si ça aboutit : ça me simplifiera la vie !
<re-re-re-edit: J'avais pas percuté Certes, ça marche. Un peu lourd, peut-être, cependant, non ?

et, en discussion :

a écrit :
Les liens relatifs de navigation permettent de localiser la page dans la collection de document à laquelle elle appartient.

( autre BP Oquast )


Modifié par Laurent Denis (09 Jul 2005 - 21:36)

C'est que j'utilise jamais vraiment ça moi
Je note et j'utiliserais, c'est vrai que même si les visiteurs du dit site n'en auront rien à foutre et n'y verront que du feu (c'est loin d'être des power users ) autant le faire, ça coute rien !

Je savais pas qu'on pouvait utiliser les <link> pour ce genre d'info !

Laurent a écrit :

ça, c'est pas encore rentré, on dirait

C'est la première fois que j'en entend parler mais c'est rentré

Toutes ces infos, c'est pas pour les meta dublin core normalement ?

Pour les liens d'accès direct... tu ne parles pas (que ?) des accès au contenu, accès au menu etc, tu songes au plan, à l'aide, à la recherche c'est ça ?

Vu que je suis même pas certain qu'il y aura ce type d'info sur le site (c'est un petit site perso de rien ) c'est pas dit qu'il y en ait l'utilité, mais s'il y en a, ça sera fait c'est certain.
Modifié par Olivier (09 Jul 2005 - 11:48)

Olivier a écrit :
Pour les liens d'accès direct... tu ne parles pas (que ?) des accès au contenu, accès au menu etc, tu songes au plan, à l'aide, à la recherche c'est ça ?

oui, exactement.

Olivier a écrit :

Vu que je suis même pas certain qu'il y aura ce type d'info sur le site (c'est un petit site perso de rien ) c'est pas dit qu'il y en ait l'utilité, mais s'il y en a, ça sera fait c'est certain.

Pas de page d'aide, ni de recherche, certes.

Mais pas de contenu ni de menu ? Tu es sûr ? Auquel cas, le concept est original !

Laurent Denis a écrit :

Pas de page d'aide, ni de recherche, certes.

Mais pas de contenu ni de menu ? Tu es sûr ? Auquel cas, le concept est original !

Lol !
Disons, que pour ça, je trouve l'interet plus limité, mais c'est parceque je ne l'utilise jamais sûrement.
Sur un navigateur graphique (rappel du public visé ) menu et contenu étant au même niveau et le titre n'étant pas démeusurement "haut", je vois mal l'utilité
Disons que je trouve la mise en place (ajout d'une liste, positionement de la liste, légère altération du graphisme) un peu lourde pour l'utilité, notament en vue du public visé. (amis/famille des interessés visitant le site essentiellement pour voir des photos (navigateur graphique) et qui sont bien loin de savoir utiliser ce genre d'outils).

Olivier a écrit :

p.s. je retrouve plus le topic où on parlait de transparence d'image pour IE, y avait les PNG, l'image cadrillée "transparent"/"blanc", les fichiers htc etc, j'ai testé le cadrillage transparent/blanc et le texte est difficile à lire et bien evidement le PNG ne transparence pas sous IE
J'intégrerais bien le truc htc enfin, je voulais revoir le topic histoire de voir les alternatives ^^ si quelqu'un le retrouve

Hello,

Pour cette histoire, j'ai gardé cette ressource (j'arrive peut-être après la bataille !) :

http://www.antp.be/PNG/#liens

http://forum.alsacreations.com/topic.php?fid=1&tid=3013



Modifié par Vero (09 Jul 2005 - 12:24)

Moi je le trouve super, très joli graphiquement.

Seul truc qui me dérange un poil ce sont les icônes qui me font très très fortement penser à Windows XP
Et peut-être sur le palmier, les catégories ne sont pas très lisibles (éclaricir un poil le palmier ? ou réduire l'opacité du menu ? enfin, je trouve pas ça tragique)

Pour les icones, comme précisé un peu plus haut , c'est du temporaire en attendant que j'ai fait les vraies

Pour le menu, il y a un fond 50% opaque, c'est pas assez lisible comme ça ?

J'ai retrouvé le topic sur la transparence PNG :
http://forum.alsacreations.com/topic.php?fid=4&tid=3452
Le truc de TriadPtale, même s'il fonctionnait, foutait la merdouille, ça faisait tout buggé, les liens étaient plus cliquable etc
Modifié par Olivier (09 Jul 2005 - 17:44)

A moins d'augmenter la taille des caractères, menu_trace.png n'est visible que sous Safari.
Modifié par Olivier (09 Jul 2005 - 17:44)