Nouvelles:

PentaxOne revient ! allégé et plus rapide, mais pas encore totalement stable.
N'hésitez pas à nous signaler les bugs.

Menu principal

Créer mon site internet

Démarré par CarbwounR, 17 Juin 09 à 12:59

lavacherouge

Je m'associe aux remarques de Gunner.

Je rajouterai un petit truc pour la conception ergonomique du site : Appliquer la règle des 2 clics.
Quelque soit la page du site sur laquelle on se trouve, on doit pouvoir accéder à n'importe quel autre page sans avoir à cliquer plus de 2 fois.
C'est très important, il ne faut pas se dire que cliquer 3 ou 4 fois pour accéder à une page n'est pas très grave. C'est statistiquement reconnue que ce genre de chose font fuir les visiteurs (comme un site qui ne fonctionne pas sous IE).

CarbwounR

Citation de: lavacherouge le 19 Juin 09 à 20:10
Tu peux utiliser un logiciel de créa web WISISYG type Dreamweaver ou Kompozer, ce n'est pas un problème. Ce qu'il faut c'est que tu puisses garder un œil sur le code et pouvoir intervenir dessus.

S'il me faut quand même apprendre à le faire, pour comprendre comment ça marche et éventuellement le modifier, je peux surement faire un mix des deux, au début, je lis les sites d'aide, pour comprendre comment ça marche, je fais deux trois essais à la con avec un logiciel, et vois comment je peux améliorer. Ca doit être jouable comme ça non ?

Citation de: lavacherouge le 19 Juin 09 à 20:10
Si je comprend bien, tu risques d'avoir beaucoup de pages. Tu as intérêt a apprendre à te servir des maquettes. Tu gagneras beaucoup de temps et d'effort.

A priori, à part les pages classiques (accueil, qui suis je, à propos du site...), y'aura surement une page pour la collection complete, puis une page pour les objectifs plus en détails, boitiers, accessoires... Ensuite, une page par objectif testé, et une page par comparatif. Au finale, surement plus qu'une vingtaine de pages je pense ;)

Citation de: lavacherouge le 19 Juin 09 à 20:10ON NE PEUT PAS IGNORER INTERNET EXPLOREUR QUAND ON CRÉE UN SITE! Il faudra que tu fasses avec ou alors c'est irrespectueux envers tes visiteurs qui ont fait le choix de surfer sur IE ou qui ne savent pas qu'il existe d'autres navigateurs plus efficaces. .

Je n'ai pas non plus dit que je vais mettre des batons dans les roues des utilisateurs d'IE. Mais autant, faire les textes, photos, mettre en place tout ca, ca va être motivant, autant corriger des problème liés à un logiciel faisant ce qu'il veut, ca va aller 5 minutes, mais je vais pas y passer des heures. Du moins, pas dans un premier temps, sinon ca va me décourager d'entrée. Ce qui est par contre sûr, c'est que le site sera prévu pour du 1024px, pas plus, pas moins. Du moins, je me me débrouillerais pour que sur mon EEEpc en 10" et 1024x600, ça passe sans ascenseur horizontal.

Citation de: fogoh le 19 Juin 09 à 20:38
Perso, du moment que le site est valide w3c au niveau structure/css, je ne vais pas m'embêter à le tester sur tous les navigateurs existants. Il ne faut pas oublier que le but du web est de présenter des informations.

Exactement. Le but premier de mon site sera de présenter des informations qu'il est difficile de trouver. Pas de vendre des voitures ou vanter mes connaissances quasi nulles en création de site internet.


Citation de: fogoh le 19 Juin 09 à 20:38
CarbwounR, je pense que dans un premier temps tu devrais plus te poser des questions sur la navigation sur ton site. Est-ce qu'un visiteur ne sera pas perdu ? Quels liens proposés sur toutes les pages ? Est-ce que le text du lien est suffisamment explicite et correspond bien à ce que souhaite voir l'utilisateur ? ...

J'avais pensé à un double menu, francais et anglais, soit un à gauche, un a droite, soit les deux en deux lignes sur le haut. Avec un menu déroulant sur certains boutons (ex. les tests d'objectifs). Ca me semble la meilleure solution pour ce que je souhaite faire :)

Citation de: Gunner le 19 Juin 09 à 23:37
@ CarbwounR  =>  Pour ton site, tu fais une page d'accueil avec les liens qui pointent vers les pages directes, sans pages intermédiaires. je m'explique :
mettons que ton site sur le papier soit comme ceci :
index.html
un dossier pour les objectifs
un dossier pour les flashes
dans chaque dossier une page html pour un objet
plutot que de faire une page index, puis une page de chapitre, tu ne fais qu'une page index pointant directement vers ta page objet, ça fera pas mal de liens sur la page d'accueil, qui du coup servira aussi de carte (map) pour les moteurs de recherche... si tu utilises une indentation ou le javascript pour la mise en page, ça sera clair et l'internaute s'y retrouvera sans soucis.

J'ai pas tout compris là :/ Pour l'organisation que j'avais prévue (peut être pas la meilleure, si quelqu'un a mieux, je suis preneur), je l'ai décrite plus haut ;)


Citation de: lavacherouge le 20 Juin 09 à 00:07
Je m'associe aux remarques de Gunner.

Je rajouterai un petit truc pour la conception ergonomique du site : Appliquer la règle des 2 clics.
Quelque soit la page du site sur laquelle on se trouve, on doit pouvoir accéder à n'importe quel autre page sans avoir à cliquer plus de 2 fois.
C'est très important, il ne faut pas se dire que cliquer 3 ou 4 fois pour accéder à une page n'est pas très grave. C'est statistiquement reconnue que ce genre de chose font fuir les visiteurs (comme un site qui ne fonctionne pas sous IE).

Je comprends bien pour les gens qui doivent utiliser du 56K. Et a priori, avec l'organisation à laquelle javais pensé, ça colle :)
[VDS] M42, Takumar, Pentax &Co.Info Takumar
Je ne reviendrais plus sur PentaxOne, inutile de me contacter ici.

Gunner

#22
C'est moi qui me suis emballé, tu avais bien décrit ta maquette  ;)

Pour les deux clics, ça n'est pas qu'une question de vitesse de chargement, c'est aussi une question de limpidité de navigation.

Si tu fais un truc sur un logiciel WYSIWYG  et que tu regardes ensuite le code source pour apprendre, il te faut un minimum de connaissance d'abord, ou prendre le temps de te poser pas mal de question, mais c'est une bonne méthode.
Pour exemple cette page de Pentaxone (extrait), montre ceci :
Citationune indentation ou le javascript pour la mise en page, ça sera clair et l'internaute s'y retrouvera sans soucis.<br /></div><br />J'ai pas tout compris là :/ Pour l'organisation que j'avais prévue (peut être pas la meilleure, si quelqu'un a mieux, je suis preneur), je l'ai décrite plus haut <img src="https://www.pentaxone.fr/SMF/Smileys/Pentaxone/;).gif" alt="; )" border="0" /><br /><br /><br /><div
Tu peux voir que le logiciel insère inutilement des renvois à la ligne (BR) alors qu'un DIV est déjà un élément BLOCK et que donc, il renvoit à la ligne par défaut.
Alt, texte alternatif pour les images, se voit doté d'un smiley textuel imprononçable en lecteur voix, et non d'un mot, pas génial, mieux vaut alors laisser la balise vide (le mieux étant de mettre un alt="smiley clin d'oeil", sinon ça ne fait que perdre du poids pour la page...
enfin BORDER=0 dans la balise IMG est inutile puisque la feuille de style précise déjà qu'aucune image ne doit recevoir de cadre  ;)

Si tu es prêt à faire cette démarche critique, tu apprendras vite.
Bonne continuation dans ton projet  :-)

lemathurin

Une petite remarque simplement, ceci concernera la fin de ton projet, il faudra que tu pense à bien référencer ton site, c'est ça qui t'apportera le plus de visiteur !
Pour un site html, c'est assez simple à faire, chose importante auquel il faut penser dès le départ : le nom de ton site doit être simple, et ne doit pas être un mot "bâteau" pour lequel google aura 1000000 résultats. Sinon, tu risques de ne pas bien apparaitre dans les recherches.

Bon courage !
PS : N'hésitez pas à visiter
ma galerie perso

Gunner

Pour le référencement, ne néglige pas le texte, le titre de tes pages, et permet aux moteurs de recherche l'indexation de tes images, établit une map Google. Sinon oublie les annuaires, ça ne sert à rien du tout, juste Google, Yahoo et un échange de lien éventuel avec d'autres sites parlant du même sujet  ;)

CarbwounR

J'ai déjà un forum (hébergé gratuitement sur Forumactif) donc j'ai déjà vaguement vu du code HTML. Mais effectivement, ces histoires de border, je savais pas à quoi ca correspondait (j'avais compris le coup du <br> et l'utilité du alt). Je pense que je vais me servir de Kompozer pour faire une page ou deux, essayer d'epurer le code, et voir ce qui est le plus rapide (tout taper à la main ou faire automatiquement et epurer).
Pour ce qui est du référencement, j'ai vu avec mon forum qu'on peut y passer un temps fou pour pas grand chose. Donc ca va se limiter aux moteurs de recherches et un peu de pub faite par moi même. Après tout, c'est assez spécialisé ce que je compte faire, faut s'intéresser aux Takumars. Donc je sais ou aller chercher les gens.
[VDS] M42, Takumar, Pentax &Co.Info Takumar
Je ne reviendrais plus sur PentaxOne, inutile de me contacter ici.

Gunner

Si tu veux, tu nous montre le code de tes pages tests pour que l'on puisse t'aider.  ;)

lavacherouge

C'est le mieux, quand tu as des pages de fabriqué ou en cours de fabrication et que tu coinces sur un truc, tu mets ta page en ligne (un espace free est suffisant) avec la feuille de style et les images. On y regarde et on te dis.

En plus cela peut servir à d'autres Pentaxiste.

lemathurin

Une dernière chose, je pense que tout le monde sera d'accord avec moi pour te dire que, si tu veux notre aide, il reste une condition :
Mettre une pub en 2m sur 2 pour Pentax et son k7 au milieu de ton site... :antoni:

Mais alors, où c'est que j'écris mes description d'objectif moi ???:yeux:
PS : N'hésitez pas à visiter
ma galerie perso

CarbwounR

J'ai téléchargé KompoZer ce matin, dans la semaine je vais pouvoir préparer les images de menu sur toshop et commencer à faire une ou deux pages, voir ce que ça donne  :D
K-7, un truc numérique ? Ca va faire tache au milieu des Takumars et Spotmatics :lol:
[VDS] M42, Takumar, Pentax &Co.Info Takumar
Je ne reviendrais plus sur PentaxOne, inutile de me contacter ici.

Gunner

Pour tes images, j'attire ton attention sur le fait que les images sur le web sont en 72 dpi  ;) et que l'on devrait se limiter à 300 ko environ d'images par page (donc si tu as beaucoup d'images, il convient de mettre des vignettes cliquables).  Enfin, si tu as le choix, mets tes images en jpg normal, et non progressif  ;)

lavacherouge

Utiliser les tranches pour la découpe des images et faire 'enregistrer pour le web' pour une meilleur optimisation des images (pas enregistrer sous).

Gunner

Sur Toshop, enregistrer pour le web est intéressant, ça te permet de limiter les couleurs afin de réduire le poids de l'image  ;)

CarbwounR

Citation de: lavacherouge le 23 Juin 09 à 18:02
Utiliser les tranches pour la découpe des images

Ca marche comment et sert à quoi ça ?

[VDS] M42, Takumar, Pentax &Co.Info Takumar
Je ne reviendrais plus sur PentaxOne, inutile de me contacter ici.

lavacherouge

#34
C'est pas compliqué, c'est pour préparer et découper tes images de l'interface à intégrer dans tes pages html.

Le mieux, c'est que tu commences à prévoir la découpe de tes images sur la maquette à l'aide de repère. Magnétises tes repères, c'est plus pratique.
D'après tes repères, tu traces tes tranches à l'aide de l'outil tranche (k), une tranche pour une image. C'est précis, tu découpes tes images au pixel près.
Tu fais 'enregistrer pour le web'. Ta maquette va s'ouvrir dans la grande palette 'enregistrer pour le web'. Tu double-cliques sur chaque tranche pour les renommer. Tu sélectionnes toutes tes tranches (les contours apparaissent rouge), tu optimises et tu enregistres. Un dossier va être créé automatiquement où tu retrouveras toutes tes images prêtes à être intégrées dans tes pages web.
Les images de l'interface qui doivent s'assembler doivent être optimisées de la même façon.

Fais un essaie. Tu ouvres n'importe quoi, t'y colles des repère, tu t'amuses avec l'outil tranche (k) et tu vas trouver en fouillant. C'est pas compliqué.

Gunner

Pour une fois je ne vais pas partager l'avis de vacherouge  ;)

Il vaut mieux ne pas utiliser d'images pour l'interface graphique pour plusieurs raisons :
_ il faut bien maitriser les padding et margin, sans quoi les images ne sont pas assemblées pareil sous tous les navigateurs
_ l'interface graphique devient rigide en terme de largeur (sauf si l'on maitrise vraiment bien le CSS, mais ici nous parlons d'un débutant  ;) ), ce qui fait que le site devient "optimisé pour 1024 ou 1280", alors qu'en CSS, il s'affiche sans soucis sur toutes les largeurs...

Il est plus simple de faire des cadres CSS avec des couleurs dans le code CSS, et de ne mettre qu'une image pour le bandeau (logo plus grand) du site.

Enfin, l'interface avec images prend un poids conséquent sur le poids total de la page...  ;)

CarbwounR

Bon ben moi qui pensais faire une image pour les différents liens du menu, je crois que pour le moment, je vais m'abstenir, juste les drapeaux FR/EN pour chaque ligne de menu, ça suffira je crois  :lol:
[VDS] M42, Takumar, Pentax &Co.Info Takumar
Je ne reviendrais plus sur PentaxOne, inutile de me contacter ici.

lavacherouge

Tout ça, cela dépend du choix graphique l'interface. On peut mettre des images en tête de l'interface, et les boutons de navigation peuvent être du texte géré en CSS ou des boutons graphiques créés avec des images. C'est vraiment un choix graphique.

Gérer les margin et padding n'est pas ce qui il a de plus compliqué.

Peut être que tu devrais nous présenter ta maquette avant et ce serai plus facile de voir la démarche que tu dois suivre. Cela nous permettrai de ne pas parler dans le vide.

Gunner

C'est vrai qu'une maquette scannée depuis un dessin papier, ça peut aider.

Pour la charte graphique, c'est fonction du choix en effet, les images donnent un rendu plus finit, mais ont des inconvénients aussi, rien n'est parfait de toutes manières.

D'ailleurs beaucoup de sites ont abandonné les menu en image, car si le CSS n'est pas fondamentalement compliqué, il devient un peu compliqué pour un débutant quand il s'agit d'allier interface graphique avec images omniprésentes (celà deviendra rapidement abordable, mais pour commencer, peut-être pas l'idéal). La mode pour les fans de graphismes est devenu Flash, avec d'autres avantages et d'autres inconvénients.

Maintenant n'oublie pas une chose, ton site est très ciblé : un site purement graphique, d'après les stats, s'adresse plus à un public jeune, les sites mettant plus l'accent sur le contenu s'adressent plus à un contenu 30-60+

À toi de voir qui tu veux cibler aussi (ça rentrera également en compte dans le choix des couleurs de ton site)...

CarbwounR

Alors pour la "maquette", je vais essayer de vous faire ça assez rapidement. En plus ça permettra de dire si c'est facilement réalisable ou non.

Pour le moment, je vais en rester au texte pour les menus, les images seront uniquement les photos + drapeaux FR/EN dans le menu + image de titre tout en haut.

Et pour ce qui est des couleurs, je pensais rester assez sombre, style fond gris foncé, écritures blanches, ça ne fatigue pas trop les yeux même si l'environnement manque d'éclairage, et en plus c'est écolo  :P
[VDS] M42, Takumar, Pentax &Co.Info Takumar
Je ne reviendrais plus sur PentaxOne, inutile de me contacter ici.