Bonjour,


Je suis actuellement à la recherche d'un contrat d'apprentissage en tant que développeur web, applications, applications mobiles (front/ back office) et d'une école et pour celà, plusieurs entreprises m'ont demandé un portfolio numérique. Je me suis mis à la tâche et voilà le résultat :

http://johnnycharcosset.fr

Que pensez-vous du design et du contenu ? Les méthodes de codage sont elles bonnes (AJAX, JS, Bootstrap).. ? J'ai essayé de refleter mes connaissances à la maniere de coder mon site.

N'hésitez pas à donner vos impressions sur la forme et le contenu.

Par contre, je ne sais pas si le site est compatible IE (je n'ai pas Windows), en tout cas il n'est pas optimiser pour.


Merci d'avance et bonne journée.
JC

Edit : Petit détail, le site est responsive donc il doit tourner sur pas mal de téléphone si vous pouvez tester et me dire vos impressions !
Modifié par Johnny (11 Apr 2013 - 08:51)
Hello Smiley smile

Première impression : ok le site est responsive, mais pourquoi cacher le menu sur un grand écran (je suis en 1980 là) et obliger un utilisateur à cliquer alors qu'il est vraisemblablement sur un ordinateur ? Surtout que vu le nombre d'items du menu, ça rentre largement sur du 1024+. Du coup pour revenir à l'accueil 2 cliques : menu > retour à l'accueil, alors qu'en général un clique sur le logo en haut du site suffit.
Seconde remarque, le chargement en ajax c'est sympa, mais du coup tu n'as qu'une url pour ton site web. Concrètement si je veux envoyer juste la page "mes projets" je ne peux pas ^^ Il me semble (mais je suis pas une spécialiste de l'ajax) que tu peux créer un système avec des ancres dans l'url pour pouvoir quand même avoir un lien par partie du site.

D'un point de vu du design :
- tous les blocs prennent toute la largeur sauf le bloc "à propos" sur l'accueil qui a un gros padding à droite. Du coup on se demande pourquoi, manque-t-il un truc ? (même remarque partout, header et footer prennent toute la largeur mais pas les autres blocs)
- le first-letter + indentation c'est sympa sur un journal papier, en web c'est vraiment pas top
- quand on passe en RWD y a les contenus du header qui se chevauchent (900px et moins tu as un bout du mail mangé par ta citation)
- le justify sur "Plus de détail ?" c'est atroce et ça crée de gros espaces blancs
- sous 728 ton nom "Charcosset" est collé à gauche
- ça sent bon le bootstrap à plein nez (peu de personnalisation du thème)
- présentation des projets : les images sont un peu une fois alignées, une fois pas, c'est très brouillon, peut-être une harmonisation s'impose ici ?

Pour le code :
- du JS dans le head (il vaudrait mieux le ramener avec la fermeture du body) et surtout du JS un peu partout au milieu de ton HTML : pourquoi ?
- 4 feuilles de style c'est un peu beaucoup pour si peu de graphisme non ? Peut-être les réunir en une seule
- le title sous les link et script, c'est pas faux, juste surprenant
- la meta <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> au milieu du head c'est moyen puisqu'elle donne l'encodage de la page il vaut mieux la déclarer le plus tôt possible (donc après <head>)
- l'indentation du code est hasardeuse, c'est pas super grave, mais ça le fait pas quand on veut postuler pour un poste de dev ou intégrateur
- la balise <meta name="viewport" content="width=500, initial-scale=1.0"> : tu fixes le viewport à 500px : pourquoi ?
- y a du style en ligne : pourquoi ?!!!

En bref, en dehors du design pas mal d'erreurs de débutant à corriger à mon avis si tu veux postuler pour le genre de postes que tu recherches mais le début est pas mal.

Courage Smiley cligne
Merci pour ta franchise !
Pour répondre à ta denriere question, je recherche en alternance, donc c'est pour me former et m'améliorer que je cherche une boite donc c'est pour celà que ca fais un peu débutant.

Après je vais juste répondre au critique sur le code, et je reprendrai les points que tu m'as dis quand je serai chez moi.

Pour la balise de l'encodage, tu es sûr qu'elle doit être le plus tôt possible ? Du moment qu'elle est dans le head, elle passera dans les en tête HTML et sera traité en même temps que les autres balises du head.
Pour le JS, j'ai appris à mon IUT de toujours le mettre dans le head et jamais à la fermeture du body. Surtout avec la fonction ready() donc je ferai des recherches sur ça.
Le code est mal indenté car je fais pas mal de require_once(), vaut-il mieux que j'évite d'inclure des fichiers pour que le code soit propre ou ce n'est pas grave ?
<meta name="viewport" content="width=500, initial-scale=1.0"> 

C'était que je faisais des tests, j'ai omis de changer Smiley sweatdrop
Et le style en ligne, j'utlise cette méthode quand on a qu'un seul élements ou juste pour donner un effet à un élément isolé, il faut absolument éviter ?

En tout cas merci de ton jugement et pour ce qui est du design et les petits décalage, je gere ça ce soir.

Bonne journée,
JC
a écrit :

Pour la balise de l'encodage, tu es sûr qu'elle doit être le plus tôt possible ? Du moment qu'elle est dans le head, elle passera dans les en tête HTML et sera traité en même temps que les autres balises du head.

Dans la mesure où elle donne l'encodage de ta page, il vaut mieux la mettre le plus tôt possible pour éviter que les caractères soient mal encodés, c'est surtout de la convention

a écrit :

Pour le JS, j'ai appris à mon IUT de toujours le mettre dans le head et jamais à la fermeture du body. Surtout avec la fonction ready() donc je ferai des recherches sur ça.

Là par contre c'est plus que de la convention mais une question de bonne pratique pour la performance. Le JavaScript bloque le chargement d'autres ressources, donc on a tendance à placer le plus de scripts à la fin pour éviter ça, quand c'est possible bien sûre. Ce n'est pas incompatible avec ready()
a écrit :

Le code est mal indenté car je fais pas mal de require_once(), vaut-il mieux que j'évite d'inclure des fichiers pour que le code soit propre ou ce n'est pas grave ?

C'est pas "grave" ça fonctionne, je me mets juste à la place d'un recruteur qui va te juger sur ton CV en ligne pour te prendre en apprentissage ou non ^^

a écrit :

Et le style en ligne, j'utlise cette méthode quand on a qu'un seul élements ou juste pour donner un effet à un élément isolé, il faut absolument éviter ?

Oui, vu qu'en général les classes ça sert à ça. Et surtout ça sera plus flexible quand tu voudras un jour changer le style de ton élément Smiley cligne
Salut,

je n'aime pas trop...
-C'est gris, triste, ça ne donne pas envie de lire, en plus je n'apprécie pas spécialement l'Arial...
-Sur Chrome 26 résolution de 1024*768, ton point d'exclamation descend sur la ligne d'en dessous...
-Dans la page compétences, ce serait bien si tu pouvais aligner les point de manière linéaires, là ça fait fouillis, trop de points partout...
-Page "projets personnels", les blocs ne sont pas alignés en terme de largeur.
-Peut-être pourrais-tu rendre les images cliquables, et les réduire sur la page... ?
Voilà, pour moi ça reste à améliorer !
Merci Johann pour ton commentaire.


Donc j'ai modifié le site en conséquence. J'ai essayé de mettre un peu plus de couleur, code plus propre (JS en fin de body, eviter les require, etc). Je n'ai juste pas régler le soucis du Hash URL.

Je viens juste de la balancer en ligne, il n'est pas compatible mobile encore. Et les autres navigateurs je ne sais pas (Firefox 19, Linux aucun souci). Je vais regarder le comptabilité de suite..

Merci à toutes et à tous !
JC

Edit : Version mobile réalisée !
Modifié par Johnny (14 Apr 2013 - 14:51)
Bonjour,

Je suis ce sujet depuis le début et franchement, il est presque dommage de ne plus voir les étapes précédentes de ton site. Cela permettrai de voir comment tu as su tirer profit des critiques constructives de Stéphanie W., Johan_Clbrt…

Cela démontre une qualité essentielle : l'écoute.

Cette qualité fait souvent la différence entre ceux qui restent campés dans leurs certitudes et ceux qui progressent. Bravo !

Pour revenir à la formule actuelle de ton site, je trouve qu'il fait moderne, il est clair, sérieux, efficace. Enlever le gris et revenir à une maquette plus simple a mis un coup de frais tout en supprimant son lot de bugs. Il pourrait être un peut plus rock and roll et surprenant, mais ça c'est pour les graphistes, je pense que pour le moment il faut rassurer.
Pour les critiques, je vais m'en tenir à des remarques d'utilisateur et d'ordre graphique, vu que c'est ce que je connais le mieux.

• En haut dans le menu, on ne sait pas où on est. J'ai cliqué 3 fois sur "About" alors que j'étais déjà sur la page. Vu que ton site est tout en français, tu peux mettre "À propos" et marquer la page sur laquelle on se trouve de la façon qui te convient.
• Ton site est plus qu'un portfolio. Tu peux tirer profit de la ligne en gris sous le nom pour donner un titre à tes pages, le décalage typo est joli et met en valeur le texte. Tu peux aussi utiliser cette phrase sous le nom comme une "baseline", on a pas besoin de se faire souhaiter la bienvenue sur toutes les pages.
• Sur les pages Parcours, Projets, Contact, les blocs textes se placent bien. Sur la page "À propos", le retrait du "A propos" fait bizarre. C'est plus joli quand le bloc texte est bien calé sous le titre comme sur les autres pages. Bien vu les ronds gris qui s'adaptent à la mise en page ! Le plan Google par contre vient se positionner sur le formulaire en réduisant la fenêtre (chrome, mac). Tu peux d'ailleurs l'enlever, sauf si tu recherches un emploi uniquement dans ton quartier.
• Dans la page "Projet" (le portfolio), on a envie d'en savoir un peu plus sur "Ampli de puissance", "Site web", "Serveur Telnet". On ne sait pas ce que tu as fait et un petit bloc texte même très court viendrai valoriser chaque travail. Fais attention de rester précis, ça fait pro. En réduisant la fenêtre le "de" de "Ampli de puissance" vient se coller contre "Site Web" avec un trou entre "Ampli" et "de".
• Tu peux aérer tes gros blocs de texte, en ne justifiant pas les dernières lignes de paragraphe et en sautant une ligne entre ceux-ci.
• Vu le style très simple et actuel de ton site, tes pictos facebook, twitter, google ne collent pas avec le reste de ta charte. Surtout que ces pictos ont eux même une charte à respecter avec un code couleur précis... Il suffit de les appliquer en faisant bien attention de mettre les bonnes versions. Ça aussi, ça fait pro.
Exemple avec Twitter. Ce n'est pas un "t" dans un carré, mais un oiseau bleu stylisé :
https://twitter.com/logo
Si il y a une chose que j'avais aimé sur tes versions précédentes, c'était les pictos qui glissaient en cliquant sur ta photo. Je trouvais ça rigolo ! Smiley lol
Simple, c'est bien aussi.
• J'ai confondu ton encart CV "plus de détails" avec une publicité google ! Je le décollerai du bloc "À propos".
• Je vois que tu as mis une largeur maximale pour les grands écrans. Mais c'est peut être trop. C'est pas très joli avec tes blocs de texte trop étalés de la sorte et ça casse ta mise en page. Tu peux limiter à 1000 pixels maxi au lieu de 1200. N'aie pas peur du blanc, si ton site est bien balancé, le blanc le mettra en valeur.
• La gouttière entre "Mon parcours" et "Mon Expérience" est trop fine, surtout que l'espace entre les titres et les blocs est plus grande. À décoller un peut.
Au passage, attention aux accents manquants : Expérience, À propos…
• La photo est bien avec une attitude qui évoque la réflexion et le sérieux. Par contre les couleurs sont un peut trop saturées et contrastées chez moi (dalle IPS bien calibrée). Sur une dalle TN mal réglée (ça fait du monde), tu risques d'apparaître dans des tons jaune orangés. Un petit réglage s'impose et tu peux la mettre un peut plus grand. Ça assoit le site et donne confiance. Pour le téléphone, mets le numéro direct, inutile le "Tél :" souligné et si tu recherches en france, un "06 00 00 00 00" est plus simple à composer.

Voilà pour moi. J'en oublie probablement, mais je pense que ce site est en bonne voie et qu'il donne envie de te recruter.


Mise à Jour :
Rapidement, on mets toujours le prénom suivi du nom. Le nom en premier, c'est uniquement pour l'école et la sécurité sociale. Smiley lol
Modifié par spongebrain (19 Apr 2013 - 12:46)
Moi ce que je trouve dommage, c'est que dans ta partie réalisations il y ait de simples liens menant vers les images. Pourquoi pas une lightbox ?
Merci de vos critiques ! J'ai modifié quelques points : Lightbox pour les images dans projets, souligné le lien actif dans le menu, suppression de google map, modifications des blocs dans A propos, ajout des descriptions pour les projets, baseline change selon la rubrique, etc..

Pour les anciennes versions, elles sont dispo ici:
http://johnnycharcosset.fr/V1/
http://johnnycharcosset.fr/V2/

Et si je demande vos critiques, ce n'est pas pour les rejeter Smiley cligne


Encore merci à vous !
JC
Rapidement.

• Le site s'étale trop en largeur. À 1200px de large on a des trous et ça flotte. 1000px de large c'est déjà très confortable, surtout que sur les grandes diagonales on affiche rarement une page sur toute la largeur, plutôt sur la moitié, pour afficher/faire autre chose.

• Les ronds bleu/gris c'est élégant.

• Attention de ne pas te disperser dans de multiples formats de typo. Si il est conseillé de limiter le nombre de typos utilisées (en général jamais plus de 3), il est aussi conseillé de se limiter pour la taille et le style, pour ne pas perdre le lecteur. J'en compte environ 8 sur la page d'accueil, plus d'autres sur les autres pages. Sur la page "projets" le texte est en gras, sur parcours en normal, mets en normal dans tous tes paragraphes, le gras doit rester réservé aux titres ou mentions spéciales (compétences...).
Au passage mettre une petite explication sur less projets ne coûte rien et on comprend mieux ce que tu as fait. N'hésites pas à dire si tu as tout fait ou de préciser exactement ton domaine d'intervention. Il n'est pas rare pour les étudiants de travailler sur des projets communs.
Il y a des trous dans les textes explicatifs des projets. Il faut tout faire pour éviter cela, jouer sur l'approche entre les lettres ou simplement de pas justifier le texte si cela apporte uniquement des problèmes. Là aussi, en 1200px de large, l'espace entre les projets est trop grand. Essaie de limiter la largeur générale du site à 1000px. Ce n'est pas pour rien si la majeure partie des sites ne dépassent pas cette largeur. Faire du responsive design oui, mais uniquement si ça sert le site. Les lightbox sont un réel plus !

• Bien vu les sous titres sous le Prénom + le Nom. Le "Bienvenue dans mon portfolio !" se place mieux que les autres sous titres car il dépasse et c'est ce décalage qui est joli, les autres sont pas assez décalés, du coup on a l'impression qu'ils sont mal justifiés. Décale tous tes sous titres au même niveau que le premier. As toi de voir et d'ajuster, il faut conserver une cohérence entre chaque page.

• Il y a un truc qui cloche concernant les pictos sociaux ronds, il en manque un bout en bas j'ai l'ombre qui ne fait pas tous le tour. Le logo twitter n'est pas bon. Cet oiseau a été remplacé par celui en forme de virgule : https://twitter.com/logo (déroule la page jusqu'à la charte).
On peut sortir un peut de la charte officielles des pictos twitter/facebook/google, si cela s'impose pour une harmonisation de couleurs, mais pourquoi ne pas utiliser les pictos dans leur version initiale ? Ou si tu utilise une version stylisée, reste dans les applats de couleur (comme ton site) et choisi une version à jour.

• La disparition du plan est une bonne chose, il n'était pas utile. Par contre, peut être pourrais-tu placer un élément graphique, même simple pour susciter la connivence sur la page contact ? Un ordi posé en plein travail ? Une photo de toi en train de bosser ou conviviale ?

• En bas à gauche le © est un peut décollé du bord gauche. C'est bien on pourrait avoir le même retrait pour le menu dans le bleu qui est très collé sur le bord droit. Le "/" noir est surtout esthétique. Pourquoi "Contact" n'en a pas ? À tester aussi, marquer le lien actif juste en plus gras ou en noir plutôt qu'en souligné ? À tester… Le trait des "/" et du souligné luttent un peut.

• Sur la page d'accueil tu as passé la rubrique "un peu sur moi à droite". Ça créé un déséquilibre avec la partie gauche. Peut être peux-tu écrire plus petit pour réduire ce pavé et rééquilibrer ? Tu peux utiliser la taille du texte de ton parcours pour tous les autres paragraphes (un peu sur moi, projets ...) sauf "À propos" qui peut-être un peut développé, ça unifiera. Tu peux aussi "broder" sur a partie "Plus de détails" et mettre un petit texte explicatif avant de mettre directement ton C.V. ou bien un lien vers tes "Compétences" qui amène à la page parcours (tu peux avoir plusieurs passerelles vers une même page.

• "développeur Web/ intégrateur et développeur d’applications" fait compliqué. Pourquoi ne pas simplifier : "Développeur Web et d’Applications, Intégrateur", ou "Développeur Web, Intégrateur, Développeur d’Applications"… Si tu mets des majuscules aux fonctions, mets en partout.

• Cette fois ci, ta gouttière entre "Mon Parcours" et "Mon expérience" est trop imortante. regarde sur d'autres sites ou dans des journaux pour trouver le juste équilibre. Il faut conserver une cohérence dans les espaces entre tes blocs sur toutes les pages, là il n'y a pas de règles et ce genre de détail participe grandement au résultat final.

• Pour la photo, vu que ton site est dans les blanc/bleu/gris assez élégants, as tu testé avec la photo en bichromie (en bleu, bris/bleu, N&B... ) ? C'est à tester je pense en tout cas. Ça pourrait donner une petite touche graphique assez sympa. Et même en poussant un peut on pourrait retrouver un élément graphique ou deux (remplacement du plan) avec les mêmes réglages couleurs ? Enfin là ça devient du pure graphisme et on s'éloigne peut-être un peut. Smiley lol

• Les pictos de réseaux sociaux sont un peut trop collés sur le bas.

• Ton petit texte de contact à côté de ta photo peut se caler sur le bas ou le haut ? À voir. Je mettrai d'abord le tel, puis l'email, et enfin l'age sous une forme un peut sympa qui suscite l'empathie. Genre "20 ans et toutes mes dents" ? "20 ans et tout mon code ? ", oui mais non, ça rime pas. Un candidat pro et cool c'est bien aussi. Smiley biggthumpup

Oooops la prévisualisation !!! J'avais pas dit "rapidement" ? Smiley sourire
Modifié par spongebrain (20 Apr 2013 - 00:57)
Merci pour vos remarques.

J'ai ajusté le site : http://johnnycharcosset.fr

J'ai un peu prés tenu compte de toutes vos remarques (il me manque encore le Hash dans l'URL, je bosse dessus pour voir comment faire). Donc mon site devrait être opérationnelle, il reste plus qu'à ésperer qu'il attire l’œil d'un recruteur !

Par contre pour
a écrit :
Le site s'étale trop en largeur. À 1200px de large on a des trous et ça flotte. 1000px de large c'est déjà très confortable, surtout que sur les grandes diagonales on affiche rarement une page sur toute la largeur, plutôt sur la moitié, pour afficher/faire autre chose.


Je comprend pas très bien, c'est qu'il faut que je réduise le
width-max
? Moi j'ai une résolution de 1900px, et je n'ai pas spécialement de flottement Smiley confus
Modifié par Johnny (22 Apr 2013 - 18:33)
Rapidement,

• As tu testé le paragraphe "Un peu sur moi" avec la typo dans la taille de celui de "Mon parcours" ? En unifiant la taille de la casse des textes, ça réduirait le bloc gris "Un peu sur moi" qui créé un certain déséquilibre.
• Le picto twitter n'est pas à la bonne taille. Tous les pictos doivent être calés en haut et en bas.
• En effet, il faut toujours décoller le menu du bord droit.
• La taille max à 1000px serait peut-être plus adaptée à ta maquette. À tester en tous cas. Plus ça flotte : on a trop de de blanc entre certains blocs, le site s'étiole un peut. Peu de gens vont regarder ton site sur une fenêtre de 1900px de large et avoir du blanc sur le côté n'est absolument pas gênant. Regarde les maquettes des journaux. Ils sont tous en largeur max de 1000px. Plus est inutile et casserai l'équilibre de la mise en page en plus d'être désagréable en lecture. Il y a toujours une largeur optimale. Le design adaptatif a ses limites pour les sites de textes.
• Il y a toujours le bug :
Dans la page "Projet" (le portfolio), on a envie d'en savoir un peu plus sur "Ampli de puissance", "Site web", "Serveur Telnet". On ne sait pas ce que tu as fait et un petit bloc texte même très court viendrai valoriser chaque travail. Fais attention de rester précis, ça fait pro. En réduisant la fenêtre le "de" de "Ampli de puissance" vient se coller contre "Site Web" avec un trou entre "Ampli" et "de".
• Sur la page d'accueil. La gouttière entre les bloc de gauche et de droite est trop fine, surtout que l'espace autour du texte dans le bloc gris est inférieur.
• Je trouve le texte "À propos" un peu trop court, sec et directif. Fais part de ton enthousiasme plutôt que de te positionner uniquement comme un chercheur d'emploi. Ce genre de détail peu faire la différence avec les autres candidats.
"Plus de détail" n'a que le C.V., tu peux aussi ajouter un lien vers tes compétences techniques, ça étofferai.
• Le souligné en roll over sur le menu ne me semble pas indispensable. Surtout qu'il n'est pas présent quand on glisse/clic sur ton nom.



Globalement, hormis quelques retouches encore nécessaires. Le résultat est très propre pour un premier site d'étudiant en informatique. J'espère que les recruteurs t'appelleront. Smiley smile

Edit : Je suis pas ton prof de design. Tu peux me tutoyer. Smiley lol
Modifié par spongebrain (22 Apr 2013 - 22:18)
Merci bien de me donner un coup de pouce pour progresser ! J'ai modifé quelques points minimes sur on site là (rollover, A propos, gouttière etc), j'aurai pu trop le temps de le toucher cette semaine donc je donnaire des nouvelles courant la semaine prochaine Smiley cligne

Bonne soirée, et bientôt !
Je ne sais pas si tu à fais des formations malgré que tu cherche un employeur (ce qui risque d’être assez dur).
Le mieux est de faire toutes les formations gratuites que tu peux en attendent (e-learning ainsi que dans des centres).
Ca va grandement t'aider pour progresser et pour avoir plus de chance de décrocher un job dans ce que tu veux faire.

Essaie de visé un des métiers du web et pas en faire 40 si tu fais des formations.
Apres pour ma part je te conseil de (re)voir tout ce qui concerne là mise en page, les couleurs et les standards et tendance du web actuels (2012-2013).

Tu veux faire Front-End c'est bien ça ?
Salut Nyco,

Je suis actuellement étudiant en DUT Réseau & Telecom, je compte rejoindre une licence Systemes Informatiques et Logiciels en alternance donc je recherche un contrat d'apprentissage. Je recherche une entreprise pour me former, mon portoflio est surtout là pour montrer ce que je sais déjà faire, car les étudiants R&T ne sont pas priviligiés dans ce genre de licence (ce sont plutôt les DUT/L2 info), c'est pour mettre plus de chance de mon côté.

Et je serai plus à faire du back office, le design j'ai quelques notions et je connais les bases des logiciels graphiques mais ce n'est pas folichon et pas ce qui m'interresse le plus dans ce domaine !


Je pense t'avoir répondu. En gros, mon portfolio a pour but de décrocher une formation !
Modifié par Johnny (25 Apr 2013 - 08:29)