[Intermédiaire] Portfolio d'un étudiant dans le monde du dev web

Bonsoir (ou bonjour) à tous et à toutes,

étant un jeune étudiant en deuxième année à Cifacom dans la section Cycle Développeur Web, j'ai décidé de créer mon propre site web.

Adresse du site web en question : http://clement-galidie.fr/

Pourquoi ai-je décidé de créer un propre site web ?

Eh bien pour plusieurs choses.
- Montrer ce que je suis capable de faire dans ce domaine.
- Mettre en évidence quelques'une de mes réalisations.
- Donner quelques informations à propos de moi.
- Permettre aux personnes intéressées de me contacter facilement.
- Et puis ça entraîne ; on découvre des tas de choses ; on fait pléthore d'améliorations.

Quels objectifs me suis-je fixé au niveau de la réalisation de ce site web ?

Plusieurs objectifs (logique me direz-vous).
- Code HTML5 valide W3C.
- Code plutôt sémantique.
- Utilisation des class sémantiques.
- Site responsive.
- Site accessible.
- Utiliser quelques propriétés CSS3 (à bon escient).
- Site compatible sous un maximum de navigateurs récents (en essayant de ne pas oublier les anciens).
- Utiliser les microdata.

Si je crée ce sujet, c'est pour obtenir un maximum d'avis mais aussi, et surtout, des critiques. J'accepte toutes les critiques, aussi bien les critiques positives que négatives tant qu'elles sont constructives. Aussi, je suis bien conscient qu'il reste encore des choses à effectuer.

En vous remerciant tous et toutes par avance.
Clément.
Modifié par jQzz (14 Oct 2013 - 00:23)

Bonjour,
4 points pour commencer :

- dans le formulaire de contact, les astérisques rouges pourraient être des puces. Comme elles portent la classe required, je me doute que ce n'est pas ça.
La bonne pratique demande à ce que la signification de cette astérisque soit explicitée, et avant le 1er champ du formulaire avec une phrase genre "Les champs marqués par un (exactement le même code que ci-dessous pour qu'il soit restitué de la même façon) sont obligatoires". C'est aussi nécessaire pour créer des formulaires accessibles.

- en zoomant en mode texte jusqu'à 200% avec Firefox (6 fois Ctrl-+), le H1 finit par recouvrir le texte qui suit. La raison est que tu positionnes ce H1 avec des pixels et que le parent a une hauteur ou marge en pixels également mais en zoomant... Si tu indiques quelque chose en em (marge 2em et pour H1 top: -0.8em à la louche mais je te laisse faire le calcul exact...), plus de problème.
Paraîtrait qu'une conf' de Paris-Web 2013 de @nhoizey sur les em en parlerait et que les slides seraient en ligne
Ressource : Dans chaque page Web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200%, au moins ? et dans ce critère les liens vers les 3 dernières Techniques WCAG 2.0

- tu as mis les initiales de ton nom dans un span, séparé du reste de tes prénom et nom.
Pour un lecteur d'écran, tu t'appelles donc :
Céééé lément Géééé Alidie
Faut pas couper les mots en plein milieu, çaÿmal. Heureusement en CSS il y a :first-letter compris depuis au moins IE6 (bug connu : il faut un espace entre "letter" et l'accolade ouvrante du bloc de règles sur IE6. OK sur IE7+)

- dans la page Réalisations, il faut utiliser une souris pour pouvoir lire les informations texte au survol. Au clavier (et peut-être sur mobile), rien d'affiché.
Avec onfocus/onblur, tu dois pouvoir gérer ça ("si les flèches Précédent/Suivant obtiennent le focus, c'est que l'utilisateur se sert du clavier, appliquons un autre script") et afficher les infos alors que tu attendras le survol si c'est la souris qui est "vraisemblablement" utilisée comme actuellement.
Attention autant un div peut être survolé et géré en CSS et JS, autant il ne gagnera jamais le :focus (sauf à avoir un tabindex nul ou positif mais euh non pas ici ). Seuls les liens et éléments de formulaire peuvent gagner le focus. Bon suffit de tester pour voir si ça fonctionne ou pas
Modifié par Felipe (14 Oct 2013 - 18:52)

Bonjour Felipe,

"- dans le formulaire de contact, les astérisques rouges pourraient être des puces. Comme elles portent la classe required, je me doute que ce n'est pas ça."

Tu te doutes bien.

"La bonne pratique demande à ce que la signification de cette astérisque soit explicitée, et avant le 1er champ du formulaire avec une phrase genre "Les champs marqués par un (exactement le même code que ci-dessous pour qu'il soit restitué de la même façon) sont obligatoires". C'est aussi nécessaire pour créer des formulaires accessibles."

Merci pour l'explication. C'est modifié.

"- en zoomant en mode texte jusqu'à 200% avec Firefox (6 fois Ctrl-+), le H1 finit par recouvrir le texte qui suit. La raison est que tu positionnes ce H1 avec des pixels et que le parent a une hauteur ou marge en pixels également mais en zoomant... Si tu indiques quelque chose en em (marge 2em et pour H1 top: -0.8em à la louche mais je te laisse faire le calcul exact...), plus de problème.
Paraîtrait qu'une conf' de Paris-Web 2013 de @nhoizey sur les em en parlerait et que les slides seraient en ligne
Ressource : Dans chaque page Web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200%, au moins ? et dans ce critère les liens vers les 3 dernières Techniques WCAG 2.0"

Donc je dois utiliser l'unité em pour définir la taille de la police d'écriture.
Pour ceux qui sont intéressés : le slide.

"- tu as mis les initiales de ton nom dans un span, séparé du reste de tes prénom et nom.
Pour un lecteur d'écran, tu t'appelles donc :
Céééé lément Géééé Alidie
Faut pas couper les mots en plein milieu, çaÿmal. Heureusement en CSS il y a :first-letter compris depuis au moins IE6 (bug connu : il faut un espace entre "letter" et l'accolade ouvrante du bloc de règles sur IE6. OK sur IE7+)"

Je ne savais pas tout ça. Merci ! C'est corrigé !

"- dans la page Réalisations, il faut utiliser une souris pour pouvoir lire les informations texte au survol. Au clavier (et peut-être sur mobile), rien d'affiché."

Effectivement. Néanmoins, on peut quand même passer d'une image à une autre en utilisant uniquement les tabulations et la touche Entrée.

"Avec onfocus/onblur, tu dois pouvoir gérer ça ("si les flèches Précédent/Suivant obtiennent le focus, c'est que l'utilisateur se sert du clavier, appliquons un autre script") et afficher les infos alors que tu attendras le survol si c'est la souris qui est "vraisemblablement" utilisée comme actuellement."

Yep, un petit script en Javascript devrait suffire.

"Attention autant un div peut être survolé et géré en CSS et JS, autant il ne gagnera jamais le :focus (sauf à avoir un tabindex nul ou positif mais euh non pas ici ). [...]"

Pourquoi ?

Si d'autres ont des avis, qu'ils n'hésitent surtout pas !

Bonjour à tous et à toutes,

je me permets de relancer cet ancien sujet car j'ai mis à jour mon site web et j'ai besoin d'avis.

Changements effectués :

- J'ai passé tout le site web en em afin de faire en sorte qu'il s'adapte en fonction de la taille de la police d'écriture du visiteur.
- J'ai ajouté un plan du site.
- J'ai complètement changé la page présentant quelques'unes de mes réalisations.
- J'ai supprimé l'attribut autofocus qui semble faire planter le lecteur d'écran Jaws.

Aussi, j'ai testé mon site web via un lecteur d'écran (Jaws, en version d'essai) et je suis plutôt satisfait. Bon, après, c'est la première fois que je teste ce logiciel et je ne suis pas du tout un expert en accessibilité. Donc, si quelqu'un s'y connaissant mieux pouvait me faire un retour, ça serait top !

Par ailleurs, est-il nécessaire de minifier ses codes HTML et CSS ? J'avais compressé le code CSS en utilisant ce site web, seulement, le compresseur a rajouté des espaces entre les deux-points et les pseudo-class ainsi qu'au niveau des media queries. Du coup, ma version responsive ne fonctionnait plus...

EDIT : sous Internet Explorer 8, les balises apportées avec HTML5 ne semblent pas être prises en compte. Pourtant, j'ai bel et bien inclus le script javascript pour Internet Explorer 8.
Modifié par jQzz (25 Nov 2013 - 14:02)