[Amateur] Project Fortune

Bonjour,

Je viens d'apprendre HTML5 et CSS3.
J'ai codé juste pour le fun deux pages (index.html et demo-video.html) d'un faux site. C'est-à-dire que tout le contenu du domaine est factice. Je compte apprendre le PHP, plus tard.

J'aimerais avoir votre avis au niveau du design et du code, au cas où j'aurais commis une grande erreur.

Le lien du site est : http://maxishare.alwaysdata.net/

Merci pour votre aide,

P.-S. J'aimerais aussi adapter les deux pages au format mobile et maximiser l'accessibilité. Des conseils ?
Modifié par hopper (29 Jan 2012 - 21:20)

Bonjour,

hopper a écrit :
P.-S. J'aimerais aussi adapter les deux pages au format mobile et maximiser l'accessibilité. Des conseils ?

En pratique http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html est super bien pensé pour aller très vite avec un site raisonnablement bien codé. Bon faut peut-être commencer par l'article sur les Media Queries (la théorie).

Accessibilité : on peut l'améliorer sans cesse mais pas la "maximiser". Il n'y a pas de maximum, on peut toujours améliorer quelque chose (jusqu'à l'inutile).
Tu peux commencer par l'article wikipedia, le début de http://openweb.eu.org/articles/intro_accessibilite , l'Annexe 1 du RGAA

Merci, je vais voir, ça va beaucoup m'aider.

Y aurait-il des personnes pour critiquer le design ou le code ?

EDIT : Depuis que j'ai entendu dire sur le SDZ que la propriété float est déconseillée pour la mise en page, je n'utilise plus que display. Est-ce préférable ?
Modifié par hopper (29 Jan 2012 - 22:28)

Salut,

Trop de couleurs, pas d'unité, pas de logique dans le design, cela part dans tous les sens, entre le tout structuré en colonne et le volontairement négligé des icônes réseaux sociaux par exemple.

Pas de footer non plus donc le bas de page se termine mal,
Les liens, les menus ne sont pas stylés, ils sont en quelques sorte bruts donc pas de design.

EDIT: float est déconseillé quand on ne sait pas ce que l'on fait, comme les positions. Sinon, on fait ce que l'on veut.
Modifié par jmlapam (29 Jan 2012 - 22:31)

jmlapam a écrit :
Salut,

Trop de couleurs, pas d'unité, pas de logique dans le design, cela part dans tous les sens, entre le tout structuré en colonne et le volontairement négligé des icônes réseaux sociaux par exemple.

Pas de footer non plus donc le bas de page se termine mal,
Les liens, les menus ne sont pas stylés, ils sont en quelques sorte bruts donc pas de design.

EDIT: float est déconseillé quand on ne sait pas ce que l'on fait, comme les positions. Sinon, on fait ce que l'on veut.

Je voulais faire un design clair et épuré. Sinon, tu as raison, je n'utilise que le CSS pour la mise en page, or, j'aimerais atteindre un niveau plus professionnel.
Je pense avoir acquis la base au niveau du développement web. Tu penses que le code est propre ?
Maintenant, je voudrais m'initier au webdesign. Aurais-tu des liens, des pistes de travail, des propositions ou des conseils ?
Merci pour ta critique,
Modifié par hopper (29 Jan 2012 - 22:38)

Saloute,

Pour les ressources pour le design dans la section webdesign il y a deux articles assez intéressent pour mieux appréhender la chose :
- Les grilles dans le webdesign
- Mockups & Rough : gagnez du temps !

Les autres sont un peu plus spécifiques mais il convient quand même de les lires ^^

Mon avis personnel c'est qu'en webdesign si tu as une bonne approche typographique et une bonne grille tu auras 90% de chance d'avoir un site joli. Partir dans des interfaces plus illustrées doit venir en second point quand tu auras maitrisé ces deux concepts clés (grille et typographie). Mon prof disait que le webdesign c'est 90% de typographie, bon c'est un peu extrémiste comme façon de voir je trouve mais il n'a pas totalement tort. On trouve beaucoup de sites essentiellement typographique très réussi (quelques exemples : the grid system, la people Jason, A list Apart).

Pour ce qui est de ton site, effectivement ça part un peu dans tout les sens. Ce qu'il faut c'est se fixer un univers graphique et s'y tenir. La sobriété ça marche bien généralement seulement ici personnellement je n'ai pas une impression de sobriété mais plutôt d'un manque de design, c'est un peu brut de décoffrage. C'est un document avec un peu de style, il n'y a pas une vrai démarche graphique réfléchie derrière (ce n'est pas un reproche hien juste une constatation). Des fois on à des coins arrondis des fois pas.

Plus généralement dans les interfaces graphiques ce qui est intéressent c'est de suscité l’interaction, mais seulement quand il y a possibilité d’interagir. Par exemple ici tu as utilisé un :hover sur des éléments qui ne sont pas cliquable. C'est contre affordant dirait-on. L'utilisateur à l'habitude d'avoir ce genre d'effet quand il y a possibilité d’interagir avec l'élément, ici ce n'est pas le cas c'est un peu frustrant.

Au niveau du code il me semble que tu as bien compris le truc, tu as une bonne hiérarchie de titre, les images sont généralement bien intégré. Cependant fait attention avec ton image dvd-legal-illegal-pirate-consommateur.jpg car à mettre au tant de contenu dans une image inévitablement tu ne sauras pas tout renseigner dans l'attribut alt. De plus ce contenu ne sera pas référencé par les moteurs de recherche ce qui est plutôt fâcheux tu en conviendras ^^.

Fait aussi gaffe aux images que tu utilises, il faut vérifié qu'elles sont libres de droit.

Sinon c'est un très bon début, n'hésite pas à consulter les articles sur Alsa qui foisonnent de bons conseils et de bonnes pratiques.

Le tout sur une seule page je trouve que ça fait un peu bordelique et qu'avec la grande image au debut on a du mal à s'y retrouver. Pour le design je suis pas un expert donc je dirais juste que un bandeau bleu puis un rouge puis une vert ça fait beaucoup, que j'aime pas les icones déssinées à la main comme ça. Y a aussi un problème de marge sur au de la balise ul class="pictos".
Au niveau conception pure et dure la première partie est trop grande par rapport aux deux dernières. D'ailleurs le formulaire de contact est très grand et mal placé et on comprend pas à quoi sert la section "Essayez".
Et les ancres sont mal pensées.
Sans doute d'autres choses à dire mais c'est dejà pas mal.

Idées d'ameliorations :
replacer les ancres et changer leur comportement pour qu'elles simulent ce comportement http://www.alsacreations.com/article/lire/1335-html5-details-summary.html;
utiliser column-count plutôt que display: inline-block dans ta liste "pictos";
faire en sorte que la balise audio marche sur tous les navigateurs;
mettre la statut de la liberté en background;
refaire la grosse image centrale en n'utilisant que les vraies images et animées les flèches pour qu'elle deviennent rouges les unes à la suite des autres par ex.

Sinon rapport au developpement la html/css ça sert juste à mettre en forme pas à faire du developpement. (Et si tu fais ça pour le plaisir et que tu n'as aucune contrainte je te conseille de choisir un autre langage que le php qui est un des langages les moins elegants que je connaisse. Python (http://python.org/) fait très bien son job et simple de prise, intuitif, bien documenté avec des bibliothèques riches, utilisable côté client et utilisé ailleurs que sur le web. Donc tu as tout a gagné à utiliser un langage de ce type.)

a écrit :
je te conseille de choisir un autre langage que le php qui est un des langages les moins elegants que je connaisse. Python (http://python.org/) fait très bien son job et simple de prise, intuitif, bien documenté avec des bibliothèques riches, utilisable côté client et utilisé ailleurs que sur le web. Donc tu as tout a gagné à utiliser un langage de ce type.)

Moui, je suis pas convaincu (je fais du Python et du PHP), si c'est pour faire uniquement du web je pense que le php est pas mal quand même : Il est plus facile de trouver de la documentation orienté développement web (puisque php sert en grande majorité à ça), plus facile de trouver un hébergeur qui supporte php que python, et à mon avis il est plus facile pour un débutant de faire une page web avec php qu'avec python.
De toutes façons toute la partie algorithmique et base de donnée est commune au deux, donc il n'est pas très difficile de passer de l'un à l'autre (c'est juste une syntaxe et des fonctions à apprendre).

Sinon concernant le design du site, moi je l'aime bien, mais la première image est vraiment très grande.

Concernant le code du site, j'ai pas tout regardé mais fait attention à tes titres : En principe ça repart à zéro à chaque <section>, donc après une balise <section> tu doit obligatoirement avoir un <h1>, ce qui n'est pas le cas ici.
Modifié par BlueScreenJunky (30 Jan 2012 - 18:16)

Bonjour,
Pour le système en grille, je comprends la théorie mais pas la pratique. Pourriez-vous m'expliquer davantage ?
En ce qui concerne le développement web, dois-je choisir le PHP ou Python ? Quel est le langage le plus rapide et performant à exécuter ? Un exemple de sites faits avec ces deux langages.
Question de curiosité, Google est codé avec quoi ?
Modifié par hopper (30 Jan 2012 - 19:51)

EDIT : Errata ! Il y a eu un bug, double post.
Désolé !
Modifié par hopper (30 Jan 2012 - 19:53)

a écrit :
Question de curiosité, Google est codé avec quoi ?

Principalement en C++, mais à moins que tu ne veuilles faire le prochain facebook dans ta chambre je te déconseille de faire du développement web en C++
Chez Facebook c'est une autre approche : ils ont tout fait en php, et maintenant ils essayent de convertir ça plus ou moins automatiquement en C pour gagner en perf...
Et pour finir le tour des gros sites, Twitter est fait en Ruby On Rails et Scala.


Après certains te diront de faire du php, d'autre du Python (surtout avec Django) et d'autres encore du Ruby (surtout avec Rails)... A toi de voir. Je pense que pour un débutant le plus simple reste php pour les raisons que j'évoque plus haut (pas forcément pour le langage en lui-même) mais les autres choix sont tout à fait valables aussi.

a écrit :
Pour le système en grille, je comprends la théorie mais pas la pratique. Pourriez-vous m'expliquer davantage ?
En ce qui concerne le développement web, dois-je choisir le PHP ou Python ? Quel est le langage le plus rapide et performant à exécuter ? Un exemple de sites faits avec ces deux langages.

Merci de répondre à mes questions .

Une réponse, SVP ?

Tu t'attends à quoi ?
Qu'on te dise "apprends celui-ci, c'est beaucoup mieux" ?
Utilise celui qui TE convient. Choisis le langage dont les paradigmes, la syntaxe, l'écosystème, la communauté, la documentation, les perspectives d'emploi et que sais-je encore correspondent à ta vision et tes besoins.

Pour Google "Python where we can, C++ where we must" . Le créateur de python y est d'ailleurs embauché depuis quelques années.

Bonjour,

Si je peux apporter des retours niveau accessibilité…
Présentement, je suis en plein traitement pour une uvéite à l'oeil droit (mon deuxième en moins d'un an). Puisque cette inflammation de l'oeil entraîne une intolérance à la lumière vive (photophobie), j'ai configuré mon Firefox pour utiliser un style sombre (gris clair sur gris foncé) sur tous les sites.

En visitant ta page avec ma config, je n'ai remarqué aucune perte d'information, ni problème de structure. Tu ne sembles pas utiliser de backgrounds CSS pour des images porteuses de contenu (logo, etc.), ce qui est bien puisque les images de fond sont désactivées avec une telle config.

Pour tester l'accessibilité de tes sites, voici les outils que je te conseille :
- Extension Web Developer Toolbar, pour Firefox et Chrome : tu peux tester pleins de choses : désactiver les images en gardant les styles actifs (typique d'un serveur qui déconne), désactiver Javascript, tester différentes résolutions, désactiver le style, valider le site, …
- Un navigateur texte genre Lynx
- Les préférences de ton navigateur, au niveau couleurs et polices, ainsi que le zoom (faire particulièrement attention au zoom d'IE qui est pourri quand c'est en text-only - true story).
- Utiliser un lecteur d'écran. Pour Windows, tu peux utiliser NVDA, qui est open source et ne coûte pas un sou, contrairement à JAWS. Sur Linux, Orca est le plus souvent installé par défaut sur les bureaux Gnome.

Tu as aussi le site Opquast, où tu as une liste de bonnes pratiques avec lesquelles tu peux te guider.

Je ne t'ai donné que le plus gros au niveau conseils, mais si tu as des questions plus pointues concernant l'accessibilité, tu peux les poser dans la section Accessibilité du Web.

Merci pour ton éclaircissement.
Je vais regarder ça d'un oeil plus attentif. Promis !