[Etudiant] Portfolio Xenosis Productions by Clément Paris

Bonjour à tous !

Je suis étudiant en DUT Services et Réseaux de Communication et j'ai récemment mis en ligne mon portfolio.
Voici l'adresse du site : http://www.xenosis-productions.com

J'ai pris un hébergement pro chez OVH.
J'ai voulu faire quelque chose d'assez sobre et neutre graphiquement. Le code est entièrement valide aux normes W3C. J'ai utilisé du HTML5, du CSS3, du PHP et du JavaScript (jQuery). Normalement le site fonctionne correctement sous les navigateurs suivants : Firefox,Chrome, Opera, Safari, IE9, IE8.

Donc voilà, j'aimerais bien avoir des avis de gens du milieu pour savoir si j'ai réussi !

J'ai encore quelques retouches de prévues :
- Optimiser le positionnement du bouton de fermeture des fenêtres de détails des projets sur la page Portfolio
- Optimiser l'affichage du slider de la page d'accueil sur une résolution d'écran faible
- Modification de l'affichage de mes compétences sur la page About
- Ajout des dates des projets sur la page Portfolio
- Fichier Sitemap

Et sinon, je ne comprends pas pourquoi le système que j'ai créé pour trier mes projets en couleurs sur la page Portfolio ne fonctionne pas avec IE8. Et puis j'ai aussi un problème avec la redirection de mes mails ( http://forum.ovh.com/showthread.php?p=533458#post533458 ).

Je suis ouvert à toutes vos remarques
Modifié par ClementParis (18 Jan 2013 - 12:28)

Bonjour,
Votre site est sympa mais pourquoi choisir d'écrire le menu et title en anglais? Quel est l'intérêt?
Une clientèle anglophone?
Vous précisez:

lang="fr"

Dans ces cas-là, en français.

Je vous remercie pour toutes vos remarques !

@Tsoko : En effet, c'est vrai que les titres en anglais n'ont pas franchement de pertinence, donc je vais les repasser en français (je ne sais plus pourquoi j'avais fait ça au départ).

@Flink : J'ai eu du mal à choisir le bleu, parce qu'après si je le met plus clair il contraste beaucoup moins avec le fond gris... Je vais voir pour le #head-content, mais j'avais calculé la largeur, j'ai peut-être fait une erreur. Pour ce qui est de l'anglais, je me rend compte en effet que c'est stupide, je vais passer en "full" français. Ensuite, pour le responsive, je ne me suis pas trop posé la question dans la mesure où je n'ai jamais essayé, il faudrait que je trouve un peu de doc là-dessus, sa pourrait être intéressant

Merci encore pour vos conseils !

EDIT : un petit CTRL+F5 et tout est en français désormais
Modifié par ClementParis (18 Jan 2013 - 19:29)

Bonsoir,

J'aime bien le design.

Attention toutefois aux liens du slider qui ne sont pas calés, en particulier le "next" : celui-ci se balade en fonction de la taille de la fenêtre. Pour ce qui est de cacher le texte de ces liens, au lieu d'un "text-indent:-9999px" j'aurais mis un "display:none" : pas besoin de référencer les commandes d'un slide.

À propos de référencement, bien qu'il soit possible techniquement de mettre plusieurs h1 dans une structure html5, il est fortement conseillé de n'en mettre qu'un seul par page, tout le reste en h2 maximum.

Donc, pour la page d'accueil : le logo dans un h1. Et puisque dans ce cas c'est cela qui serait référencé par Google & Cie, il faudrait donc retravailler le alt du logo, actuellement "Logo de Xenosis Productions par Clément Paris" pour arriver plutôt à quelque chose comme "Xenosis Productions par Clément Paris" par exemple (comme la balise title).

Pour pousser un peu : puisque vous utilisez une section wrapper englobant vos trois colonnes "column", vous auriez pu cibler la dernière colonne par un "wrapper column:last-child" pour lui éviter l'ajout d'une class "last". Mais là c'est juste pour le trip...

... ou mieux encore : plutôt que mettre des marges égales de chaque côté de vos colonnes, et non seulement sur la gauche. Dans ce cas comment coller la première colonne sur la droite du wrapper ? En prévoyant à l'avance un wrapper plus large...

... et enfin le top du top : positionner vos éléments en fonctions d'une grille css que vous auriez préétablie. Une fois qu'on y a gouté on ne peu plus s'en passer. Perso j'ai créé la mienne pour un gabarit de 1000px de large.

Bien sûr : le responsive aurait été un plus indéniable (et justement une grille css vous aurait simplifié la tâche à terme).

Salutation.

Bonjour Olivier,

Tout d'abord, merci pour vos remarques et conseils !
Ce que vous dites m'a l'air tout à fait pertinent, je vais donc songer à ajouter quelques corrections dans ce sens.
J'ai commencé à me documenter sur le responsive, je pense essayer de le faire.
En ce qui concerne les pseudo-classes :last-child ou first-of-type, je ne les ai pas utilisées car elle ne sont pas prises en compte par IE8 (et c'est bien dommage).

J'ai utilisé une grille sur ma maquette Photoshop, je suppose qu'une grille CSS est quelque chose d'identique sur la maquette dynamique ? Sauriez-vous m'expliquer cela où me fournir un lien ?

EDIT : Ah oui, et cette flèche droite du slider m'a déjà bien pris la tête, je cherche encore comment faire en sorte qu'elle arrête de se promener...
Modifié par ClementParis (20 Jan 2013 - 10:59)

Olivier C a écrit :
Oh la belle gaffe ! Effectivement, je l'avais oublié celle-ci... Du coup j'ai jeté un coup d'oeuil à mon template : ouf je ne m'en sert que pour le resize (donc exit IE8 et inférieur de tout façon puisqu'il ne comprend pas les media queries).

Finalement non : je viens de vérifier sur IE8 (j'ai du attendre pour visualiser sur un PC car je suis sous MAC) et force est de constater que first-child et last-child fonctionne sous IE8 chez moi...

Mais ne serait-ce pas parce que j'ai activé un plugin Chrome pour IE ? ...

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Je serais curieux de connaitre la réponse à cette question.

Edit : mince, j'ai effacé mon post en le remplaçant par erreur par celui-ci, j'espère que vous l'aviez lu, il était assez long... .

Juste pour ne pas tout réécrire : voici pour les grilles CSS. Pour les flèches, il faudrait creer une nouvelle div ou section centrée, avec une largeur définie, et inscrire les flèches dedant (donc pas de placement en absolute).
Modifié par Olivier C (21 Jan 2013 - 16:07)

Bonjour, voici mes retours :

Quelques soucis sous IE8, à chaque validation du formulaire, la page se recharge, vidant les champs remplis précédemment. Dans "Portfolio", aucune possibilité de filtrer les réalisations.

Compresse ton CSS, et n'hésite pas à utiliser GZip.

Évite aussi les balises vides.. Le HTML est censé être sémantiquement parlant.

Je regarderais plus en profondeur plus tard. Joli sinon

@Olivier : http://caniuse.com/#
Si vous tapez last-child ou first-child, vous verrez qu'IE8 ne les comprend pas !
Je vais regarder les grilles CSS et essayer de résoudre ce problème de flèche avec la solution que vous proposez

@Knoz : Vous parlez du formulaire de contact ? J'ai fait un script PHP qui est censé envoyer le mail et afficher le résultat (e-mail incorrect, objet vide, mail envoyé, etc... en rouge au dessus du formulaire), cela n'apparaît pas ? Je vais vérifier le PHP.
Je vais essayer de compresser le CSS. Pour ce qui concerne les balises HTML vides, je ne pense pas qu'il y'en ait, ou alors je n'ai pas fait attention...

Merci encore pour vos remarques

ClementParis a écrit :
@Olivier : http://caniuse.com/#
Si vous tapez last-child ou first-child, vous verrez qu'IE8 ne les comprend pas !

Je sais bien, je vous ai proposé ce même lien plus haut...

Ce qui me faisais donc dire que c'est peut-être le plugin X-UA-Compatible de Google qui me permet de les interpréter correctement sous IE8... mais je n'en sais rien pour l'instant.

Exact, je n'avais pas vu le lien, autant pour moi !

Ah je vois ! Vous voulez dire qu'il serait préférable que le contenu des champs ne soit pas perdu ?

ClementParis a écrit :
Ah je vois ! Vous voulez dire qu'il serait préférable que le contenu des champs ne soit pas perdu ?

J'appuie. Vous faites une première vérification en html5 (required) puis une deuxième en php (ce qu'il faut faire de toute façon). Pour suppléer au chargement de la page il faut rappeler la valeur des champs en la guardant en mémoire en php.

Exemple de code php de rappel pour un champ de nom :

<input type="text" id="nom" name="nom" value="<?php if (isset($nom)) echo stripslashes($nom); ?>" size=23 placeholder="*" required />

D'accord, je vais corriger ça quand j'aurai le temps, sûrement d'ici la fin de la semaine.
Merci

Bonsoir !

J'ai fait quelques corrections et mises à jour.
J'ai passé le site en responsive, modifié l'affichage des détails de projets, mis en place un preloader pour le slider et les projets et corriger le problème des flèches sur le slider.
Et j'ai aussi compresser le JS et les CSS