[Avis] maquette de mon site professionnel

**HiRoN** · 24/06/2009, 09h42

Bonjour,

En effet, la nouvelle mouture est déjà bien mieux au niveau choix des couleurs.
Une légère marge entre le header et le bloc de contenu (sous FF3 en tout cas).
L'ensemble des liens (menu, footer) pourraient être améliorés (ajout de puces, lien actif, effet hover plus sympa).
Restera la mise en page du contenu (je présume que ce n'est pas fais pour le moment).
Au niveau code, beaucoup d'améliorations possibles au niveau structure et sémantique...

En cas de désactivation du Javascript, on ne voit plus rien... (éviter le Javascript intrusif)

**Caine** · 24/06/2009, 09h49

J'y vais doucement, car je n'ai plus codé un site web depuis 6 ans!

Beaucoup d'amélioration en effet. Il y a une marge entre header et la partie canvas...je n'ai pas pu la virer. Si je ne mets pas le div conteneur en bordure solide, l'affichage devient du n'importe quoi.

Séparer les CSS, layout.css pour le positionnement, look.css pour les couleurs et effets graphiques.

Mettre le javascript en fichier externe et le rendre non intrusif.

Passer le tout au validateur w3c. Je vais déjà testé la séparation des CSS.

PS: Ton site web est très agréable, malgré le gris, il ne donne pas une impression de monotonie, bravo.

J'aurais préféré avoir des talents pour le graphisme plutôt que pour la prog, de plus en plus perçus comme une sous compétence!

**Caine** · 24/06/2009, 10h21

Il y a une chose dont je ne suis pas sûr quant à l'article:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<!--
<a href="http://msdn.com" onclick="return newWin(this.href);"> -->
<a href="http://msdn.com">

On parle de mettre les évènements dans le DOM, donc dans les CSS?
La déclaration ressemblerais à ça?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
a.onclick {"return newWin(this.href);"}

Un peu obscur ça pour moi.

**Caine** · 25/06/2009, 17h37

Juste pour signaler la mise en ligne de la V3.

**supersnail** · 25/06/2009, 19h15

Envoyé par Caine

On parle de mettre les évènements dans le DOM, donc dans les CSS?
La déclaration ressemblerais à ça?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
a.onclick {"return newWin(this.href);"}

Un peu obscur ça pour moi.

Déjà,DOM et CSS sont deux choses différentes: DOM est la représentation de ton document HTML par le navigateur en arbre,et CSS est pour la présentation.

Et ce que veut dire MSDN,c'est qu'il faut préférer:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<html><head>
<script type="text/javascript">
document.getElementById("bouton").onclick = function(){alert("bouh!")};
</script>
</head>
<body>
<input type="button" id="bouton" value="Cliquez ici!"/>

au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="button" id="bouton" value="Cliquez ici!" onclick="alert('boo!')"/>

**Caine** · 26/06/2009, 09h02

Je vois,

Installer les gestionnaires d'évènements pas un script, plutôt qu'embarqué dans la balise HTML.

Du coup le navigateur sans javascript aura moins de flux inutile à lire. C'est ça?

Et pour la maintenance aussi, ça doit être plus simple. Mais bon, ça ne solutionne pas comment faire la mise en page pour le cas "Sans Javascript".

Soit je remets tout dans une balise noscript, et donc il y aura 2 fois l'intégralité de la page ! Une fois pour la visite avec JS, une fois dans la balise noscript.

Soit je charge dynamiquement (onload) une CSS, la version actuelle. Et par défaut (si onload n'est pas exécuté, donc pas de JS, je charge une CSS spécial noJS.

Tout ceci rend encore plus compliqué le site pour la maintenance.

**supersnail** · 26/06/2009, 10h55

Bonjour,

Soit je charge dynamiquement (onload) une CSS, la version actuelle. Et par défaut (si onload n'est pas exécuté, donc pas de JS, je charge une CSS spécial noJS.

...

Pourquoi faire une CSS spéciale javascript et une autre sans javascript?

Ton site peut très bien être en javascript,mais avoir une CSS statique...
je ne vois pas pourquoi faire une CSS chargée dynamiquement,ce serait se compliquer la vie

**Caine** · 26/06/2009, 11h39

Ben la cas pénible c'est CSS activé mais sans javascript.

Comme la CSS met un ensemble de balises DIV en visibility:hidden et le JS luis se charge de les réafficher quand il y a click sur le bon menu, sans JS, on ne vois plus rien.

Bon, je verrais plus tard pour ça. Je regarderais sur le net les bons usages de prog.

**HiRoN** · 26/06/2009, 11h46

Envoyé par Caine

Comme la CSS met un ensemble de balises DIV en visibility:hidden et le JS luis se charge de les réafficher quand il y a click sur le bon menu, sans JS, on ne vois plus rien.

Le but est de gérer la mise en visibility:hidden via Javascript.

Et du coup :
Si JS activé, fonctionnement normal.
Si JS désactivé, pas de mise en hidden = contenu qui s'affiche

**Caine** · 26/06/2009, 11h59

Ca y est, j'ai percuté.

Donc je mets toutes les DIV en hidden via un script de démarrage. Je teste et je mets ça en ligne.

Cependant, ça ne va pas être aussi simple, car, si toute les balises sont visibles, il faut revoir complètement la navigation de la page.

Merci pour vos astuces.

**toooooof** · 29/06/2009, 11h20

Juste pour dire qu'avec le navigateur Chrome chez moi l'alignement n'est pas terrible (le titre s'affiche bien mais la suite de la page s'affiche en bas de la page, au niveau du footer, qui se superpose, du coup c'est illisible).
Après c'est sur que si ça marche sur IE et FF c'est déjà ça. C'était juste une remarque en passant

Bon courage

**Caine** · 29/06/2009, 11h28

Merci pour les encouragements,

Encore un nouveau navigateur à gérer. Mais qu'ont-ils tous à vouloir leur navigateur.

Qu'est-ce qu'il a de spécial celui-là? PFFFF. Pourrais-tu me faire une capture écrans s-il te plaît? D'avance, Merci.

**Botzouk** · 29/06/2009, 11h51

Voila ce que ça donne sur chrome.

Voir les pièces jointes.

**Caine** · 29/06/2009, 11h59

Le rendu ressemble à celui de FF quand j'oublie de fermer certaines baslises.

Mhhh, je vais revoir tout ça.

Invité · 29/06/2009, 14h49

Bonjour Caine,
il faut en effet bien faire attention à refermer les balises ouvertes, pour éviter les "mauvaises surprise".
Une bonne indentation de ton code t'aidera à y voir plus clair (et simplifiera la maintenance future)

**Caine** · 29/06/2009, 15h31

Merc, je viens de passer la page au validateur CSS, là tout est bon, sauf 5 warnings que je vais résoudre.

Par contre, pour la validation du markup...Effectivement j'ai indiqué XHTML1.1 strict et là c'est le drame.

Ca explique peut être les comportements différents.

**Caine** · 23/01/2010, 12h07

Bonjour la communauté,

Comme je n'ai pas trouvé de façon élégante de tester ma page web avec tous les navigateurs sans installer 3 tonnes de trucs...

Le mieux est encore de faire appel à vous.

Ici, ce qui m'intéresse ce sont les problèmes d'alignement avec les différents navigateurs.

Pour IE8 et FF2.0, c'est bon testé. Par contre j'ai un doute sur IE6, IE7, Chrome et autres...

Merci de votre aide.

Voici l'url provisoire:
http://pagesperso-orange.fr/caine/test/index.html

Bon, il 'agit d'une page test, donc l'essentiel après résolution des ennuis va devenir une page modèle. Il n'y a qu'une page, car je souhiate juste vérifier que l'alignement est correct.

Merci d'avance.

**supersnail** · 23/01/2010, 15h59

Bonjour,

Chez moi,le texte est décollé du menu sous Google Chrome,tandis que sous IE6,le texte est bien collé correctement au menu...

De plus (rien à voir),je ne trouve pas les boutons de navigations très jolis (bordure trop épaisse...).

Ceci dit,je trouve ta nouvelle maquette beaucoup mieux réussie que la précédente

**Caine** · 23/01/2010, 16h47

Merci,

Tient marrant, sur un autre forum, on m'a dit que c'était ok sous chrome, comme quoi.

Tu parles du menu horizontal? Je suis assez content de cette version.

Pour les menus, et le "creation logiciel bla bla bla", je m'y colle cette semaine.

Mais je pensais judicieux de détecter tout problème de navigateur dès maintenant.

Merci pour le temps passé.

**Caine** · 28/01/2010, 15h36

Bon, toutes les pages sont écrites.

La seule que je n'ai pas finalisée, c'est "logiciels".

J'attends vos retour par rapport aux navigateurs. Si elle est ok, je pourrais la finir

Merci de votre temps.

[Avis] maquette de mon site professionnel

Mon site

Discussions similaires

Partager

Partager