Embauchez-moi !
HTML5 & CSS3 PUR CV par mettosjester
CV très simple sur fond bois.
Quelques effets CSS3 sont présents (inclinaison du CV, ombrage, coins arrondis, effets de transitions sur le titre) ainsi que la gestion d'HTML5 (canvas) via une simple animation du logo "2010".
Afin d'essayer de maximiser l'uniformité de l'affichage sur les navigateurs j'ai utilisés quelques plugins (jquery, excanvas, etc...).
Au final on se retrouve avec un affichage assez constant, ce même sous IE6+ ;-)
Bonne lecture à vous tous,
Voir en ligne http://pagesperso-orange.fr/htmlCV/
Note obtenue : 6.960/10
Commentaires
J'aime bien !!
C'est net, précis et sans chichis !
Je crois que c'est toi qui a le mieux compris l'intitulé du concours, bravo pour la clarté !
Très bon boulot !
J'aime bien visuellement, c'est assez sympa et chaleureux. Par contre la rotation en CSS montre ses limites avec une si petite rotation (2°), car cela provoque des escaliers disgracieux dans les mots, et rend la lecture un peu plus pénible.
@Mikachu... en effet le rendu de rotation est assez peu lisible mais je voulais également essayer d'en faire la "démonstration" technologique.
A vrai dire cette rotation change suivant les navigateurs, par exemple le rendu est bien meilleur sous safari que sur firefox (et d'ailleurs sur firefox il est meilleur sous FF3.6 que sous FF3.5), c'est d'ailleurs pour la lisibilité que l'angle est si petit ;-)
Merci en tout cas pour vos commentaires élogieux ça fait toujours grand plaisir.
Excellent :) Je ne peux pas voter mais je vais te twitter ça !
Gilles
Je ne conteste pas la démonstration technologique, mais je pense qu'il s'agit surtout du choix d'angle de rotation qui pose problème. Avec 5° par exemple, tu serais peut être à l'abri de ce crénelage inesthétique.
Tu sais c'est comme en chromie pour un graphiste, ou les proportions de couleurs en impression se donnent en pourcentages de cyan, magenta, jaune et noir. Les possibilités sont multiples, mais dans la réalité des faits, visuellement il faut 5% d'écart pour vraiment visualiser une différence de couleur.
@Mikachu: Merci pour l'explication "chromatique" dont j'ignorais en effet l'explication. Pour l'angle j'ai en fait testé plusieurs valeurs et les valeurs supérieures à 3° vu la taille du document donnaient un résultat assez peu esthétique (mais il est possible que l'aliasing soit moins présent j'avoue ne pas y avoir fait attention au moins du choix de l'angle). Dans tous les cas merci pour l'explication de technique visuelle, on en apprend tous les jours ;-)
Je rejoins les avis, hormis le crénelage sous mon Firefox, une très jolie présentation.
Salut,
C'est plutôt bien, bravo.
Et c'est encore mieux sous IE7 qui n'interprète pas cet effet de rotation ;-)
Le soucis c'est qu'une rotation trop lourd (au delà de 7-8° pour un texte long je dirais ?) sur un écran d'ordinateur, peut commencer à pénaliser la lecture qui ne se fait plus du tout dans l'axe habituel de l'internaute. Sur un document papier pas de soucis, il le tourne dans sa main. Mais les écrans c'est moins commode ! ^^
En effet développant sous mac et ayant surtout testé la rotation sous safari 4 (où le rendu est moins aliasé) je désirais essentiellement donner un style "détendu" au CV... Un peu comme si on le lisait sur une vraie table en bois ;-) Mais je prends bonne note de tous vos commentaires très utiles et surtout de tous ces retours utilisateurs quand à la lisibilité des champs "rotationnés :p
La page fait carrément planter IE6 :D
http://img52.imageshack.us/img52/8630/capture...
Il y a un "petit" problème de dépassement sous iTruc :/
Bizarre pour IE car je l'ai justement testé sous ma machine virtuelle Win XP / IE6 et aucun soucis justement... J'aimerais bien en savoir un peu plus sur la cause du plantage car ça me semble étrange lol
Qualités : version alternative du CV (print), poids de la page, compatibilité entre navigateurs (petite remarque, sur ie6 via IETester, le fond type bois ne s'affiche pas en bas de la page (sous ta photo)), clarté/lisibilité, design.
Défauts : utilisation inappropriée de la balise <label>, pas de hiérarchie de titres (qui devrait supplanter les <label> mal utilisés), balises vides.
Remarque : il est dommage d'avoir utilisé un doctype HTML5 pour n'implémenter que la balise <canvas>, alors que le reste du contenu s'y prêtait bien (header, article, section par exemple).
Comment dire : Good job !
Le texte penché ne semble pas une nécessité dans la mesure ou cela déforme un peu les lettres et complique un peu la lecture. Malgré qq petits défauts. C'est vraiment bien.
Du jolie travail
honnêtement, c'est illisible...
@Noisequik : Ca dépend de ton navigateur et sur Firefox 3.5 par exemple il est vrai que la typo est très aliasée due à la rotation. Mais sur Chrome ou Safari entre autre la rotation est bien mieux gérée... Après je suis de vôtre avis sur la rotation mais pour le principe je souhaitais en inclure dans le projet afin d'en tester les limites ;-)
Un mot : Excellent !
Merci beaucoup dans tous les cas pour vos commentaires, c'est toujours avec grand plaisir :-)
Du même avis que Mikachu. C'est vrai que la lecture des lignes n'est pas très agréable mais au final j'ai envie de dire : ahhh !!! Pas mal du tout ! :D