Des conseils pour les couleurs de ma page CV

Des conseils pour les couleurs de ma page CV - Graphisme

Marsh Posté le 06-08-2002 à 15:53:51    

salut,
je viens de refaire ma page de CV mais j'aimerai mettre des couleurs plus sympa que celle que j'avais avant. J'aimerai que vous me donniez des combinaisons de couleurs pour l'affichage de la page.
un petit screenshot :
http://www.z0rglub.com/images/cv.png
 
 
il y a donc 8 couleurs à choisir :
backgroundColor : #CCCCCC
backgroundTextColor : black
mainBorderColor : white
blocBorderColor : black
titreBlocBackgroundColor : #FFCC66
titreBlocTextColor : black
contentBlocBackgroundColor : #EEEEEE
contentBlocTextColor : black
 
Je peux faire n'importe quelle combinaison.


Message édité par z0rglub le 06-08-2002 à 16:36:02

---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 06-08-2002 à 15:53:51   

Reply

Marsh Posté le 06-08-2002 à 15:59:01    

...
 
Mais tuez le.

Reply

Marsh Posté le 06-08-2002 à 16:00:28    

Tetedeiench a écrit a écrit :

...
 
Mais tuez le.




ben koi ? t'as pas la légère impression d'être lourd ? (simple question, posée avec bcp de respect sachant que tu es modo)


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 06-08-2002 à 16:04:27    

tu veux que je te la tienne pour pisseraussi ?
 
Tu sais, le forum au départ a pas été créé pour filer du boulot grats au forumeurs, mais bien pour apprendre aux forumeurs a faier les choses eux mêmes.

Reply

Marsh Posté le 06-08-2002 à 16:06:26    

tu peux partir please ?
parce que là je demande simplement des conseils sur les couleurs à utiliser pour ma page de CV, je vois pas en quoi je fais le boulay. Va voir certains topic sur le forum programmation, là où tu peux voir de vrais boulays. Je fais pas pour autant mon prétentieux en les envoyant chier.


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 06-08-2002 à 16:13:42    

Tetedeiench a écrit a écrit :

tu veux que je te la tienne pour pisseraussi ?
 
Tu sais, le forum au départ a pas été créé pour filer du boulot grats au forumeurs, mais bien pour apprendre aux forumeurs a faier les choses eux mêmes.




 
Oue, c'est vrai que la c abusé ...
Il demande juste de l'aide pour la couleur de son CV, je vois rien de mal la dedans :??:

Reply

Marsh Posté le 06-08-2002 à 16:36:31    

Propose nous plutôt un choix de couleurs et les gens te diront ce qu'ils en pensent.
 
Déjà y'a la photo qui va pas en fait de couleurs, le visage est d'un rose étrange

Reply

Marsh Posté le 06-08-2002 à 16:41:36    

gaboriau a écrit a écrit :

Propose nous plutôt un choix de couleurs et les gens te diront ce qu'ils en pensent.
 
Déjà y'a la photo qui va pas en fait de couleurs, le visage est d'un rose étrange




pour la photo, c'est un vieux scan d'un photomaton. Aujourd'hui j'ai même plus de lunettes. Mais c'est pas trop ça l'important.
 
Sinon, tu veux un choix de couleurs ? Soit, je vais faire una autre combinaison que je trouve pas trop mal, tu pourras me dire ce que tu en penses. A dans 2 minutes


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 06-08-2002 à 16:43:35    

http://www.z0rglub.com/images/cv2.png


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 06-08-2002 à 16:44:15    

oh putain, qd j'avais dit 2 minutes je pensais pas les fiare aussi précisément !)


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 06-08-2002 à 16:44:15   

Reply

Marsh Posté le 06-08-2002 à 16:52:13    

z0rglub a écrit a écrit :

oh putain, qd j'avais dit 2 minutes je pensais pas les fiare aussi précisément !)




 
 :non:  
T'as une seconde d'avance ! :D ;)

Reply

Marsh Posté le 06-08-2002 à 17:02:09    

heu je continue à trouver la photo bizarre, tout est important dans une harmonie de couleurs, et je ne peux pas faire abstraction d'une partie de l'image, mais entre les deux je préfère la première. Essaie avec les même couleurs (gris et jaune) mais très pâles et un fond différent pour la colonne de droite et de gauche
si tu donnait le code ça serait plus simple pour faire des essais

Reply

Marsh Posté le 06-08-2002 à 17:15:49    

gaboriau a écrit a écrit :

si tu donnait le code ça serait plus simple pour faire des essais



je peux pas te donner le code. enfin si mais en fait c'est du HTML générer à partir d'un fichier xml parsé par du PHP, c'est pas du HTML statique. (comme ça ma copine aura son CV avec la même présentation en 30 secondes et elle choisira elle-même ses couleurs...)
Pour la photo, j'essaierai de la retoucher pour avoir l'air un peu moins fluo...


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 06-08-2002 à 17:17:50    

voilà qd même le code généré :  

Code :
  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.  <title>CV (XML) de Pierrick Le Gall</title>
  6.  <style type="text/css">
  7.   a
  8.   {
  9.    text-decoration : none;
  10.    color : black;
  11.   }
  12.   a:hover
  13.   {
  14.    text-decoration : underline;
  15.   }
  16.   a.back, body
  17.   {
  18.    color : white;
  19.   }
  20.   body,table,input
  21.   {
  22.    font-family : Arial, Verdana, Sans-Serif;
  23.    font-size : 12px;
  24.   }
  25.   body
  26.   {
  27.    background-color : #010752;
  28.    margin : 0px;
  29.   }
  30.   table
  31.   {
  32.    border-collapse : collapse;
  33.   }
  34.   td
  35.   {
  36.    padding:0;
  37.   }
  38.   div.objet, div.nom
  39.   {
  40.    text-align : center;
  41.    font-weight : bold;
  42.    font-size : 20px;
  43.   }
  44.   div.nom
  45.   {
  46.    font-style : italic;
  47.   }
  48.   table.main
  49.   {
  50.    width:100%;
  51.    border:2px solid white;
  52.   }
  53.   td.top-left
  54.   {
  55.    width : 20%;
  56.    border-right : 2px solid white;
  57.    border-bottom : 2px solid white;
  58.   }
  59.   td.bottom-left
  60.   {
  61.    border-right : 2px solid white;
  62.    vertical-align : top;
  63.   }
  64.   td.top-right
  65.   {
  66.    border-bottom : 2px solid white;
  67.   }
  68.   table.bloc
  69.   {
  70.    width : 90%;
  71.    border : none;
  72.    margin-top : 15px;
  73.   }
  74.   td.titreBloc
  75.   {
  76.    background-color : #FFCC66;
  77.    color : black;
  78.    border : 1px solid black;
  79.    border-bottom : none;
  80.    width : 50%;
  81.   }
  82.   div.titreBlocContent
  83.   {
  84.    text-align : center;
  85.    font-weight : bold;
  86.    font-size : 13px;
  87.    margin : 2px;
  88.    white-space : nowrap;
  89.   }
  90.   td.dataBloc
  91.   {
  92.    border : 1px solid black;
  93.    background-color : #EEEEEE;
  94.    color : black;
  95.   }
  96.   td.lineTitre
  97.   {
  98.    width : 100px;
  99.    vertical-align : top;
  100.   }
  101.   div.lineTitreContent
  102.   {
  103.    margin : 5px;
  104.    margin-left : 10px;
  105.    margin-right : 10px;
  106.    white-space : nowrap;
  107.    font-style : italic;
  108.    font-weight : bold;
  109.    color : black;
  110.   }
  111.   td.lineData
  112.   {
  113.   }
  114.   div.lineDataContent
  115.   {
  116.    margin : 5px;
  117.    margin-left : 10px;
  118.    margin-right : 10px;
  119.    color : black;
  120.   }
  121.   div.dateInfo
  122.   {
  123.    font-family : Verdana, Sans-Serif;
  124.    font-size : 10px;
  125.    margin : 10px;
  126.   }
  127.  </style>
  128. </head>
  129. <body>
  130.  <table class="main">
  131.   <tr>
  132.    <td class="top-left"><div class="nom">Pierrick Le Gall</div></td>
  133.    <td class="top-right"><div class="objet">Elève ingénieur Informatique<br />INSA Lyon</div></td>
  134.   </tr>
  135.   <tr>
  136.    <td class="bottom-left" align="center">
  137.     <img src="identite.jpg" style="border:1px solid black;height:152px;width:120px;margin-top:10px;" alt=""/>
  138.     <table class="bloc">
  139.      <tr>
  140.       <td class="titreBloc"><div class="titreBlocContent">Coordonnées</div></td>
  141.      </tr>
  142.      <tr>
  143.       <td class="dataBloc">
  144.        <div class="lineDataContent"><span style="font-weight:bold;">actuellement</span><br />Levallois-Peret<br /><br /><span style="font-weight:bold;">adresse courier</span><br />5, res Mare Griseau<br />78750 Mareil-Marly<br />France<br /><br />tel : 06.64.93.45.32<br />
  145.  <img src="http://wwp.icq.com/scripts/online.dll?icq=95912151&img=5" style="width:18px;height:18px;border:none;" title="[icq]" alt="[icq]"/> icq : <span style="font-style:italic;">95912151</span><br />
  146.  [ <a href="mailto:pierrick@z0rglub.com">pierrick@z0rglub.com</a> ]<br />
  147.        </div>
  148.       </td>
  149.      </tr>
  150.     </table>
  151.     <table class="bloc">
  152.      <tr>
  153.       <td class="titreBloc"><div class="titreBlocContent">Informations</div></td>
  154.      </tr>
  155.      <tr>
  156.       <td class="dataBloc">
  157.        <ul>
  158.         <li>21 ans</li>
  159.         <li>Né à Toulouse</li>
  160.         <li>Né le 18 janvier 1981 </li><li>fiancé</li><li>Permis B / sans véhicule</li>
  161.        </ul>
  162.       </td>
  163.      </tr>
  164.     </table>
  165.    </td>
  166.    <td valign="top" align="center">
  167.     <table class="bloc">
  168.      <tr>
  169.       <td class="titreBloc"><div class="titreBlocContent">Stages professionnels</div></td>
  170.       <td> </td>
  171.      </tr>
  172.      <tr>
  173.       <td class="dataBloc" colspan="2">
  174.        <table>
  175.         <tr>
  176.          <td class="lineTitre"><div class="lineTitreContent">Mai / Septembre 2002</div></td>
  177.          <td class="lineData"><div class="lineDataContent">Stepnet-Ingénierie : stage de développement / programmation  ( Java + XML ) gestionnaire de contenu pour site web (exemple : [ <a href="http://www.cnp.fr">site de la CNP</a> ] )</div></td>
  178.         </tr>
  179.         <tr>
  180.          <td class="lineTitre"><div class="lineTitreContent">Juin / Août 2001</div></td>
  181.          <td class="lineData"><div class="lineDataContent">[ <a href="http://www.gfi.fr">GFI Informatique</a> ] stage de développement / programmation  ( Visual C++, MS SQL Server ) pour Hewlett-Packard France</div></td>
  182.         </tr>
  183.         <tr>
  184.          <td class="lineTitre"><div class="lineTitreContent">Juin / Août 2000</div></td>
  185.          <td class="lineData"><div class="lineDataContent">Travail en intérim de 6 semaines chez Itineris (France Telecom) puis André (Halle aux chaussures, etc) en tant que technicien informatique (hotline interne)</div></td>
  186.         </tr>
  187.         <tr>
  188.          <td class="lineTitre"><div class="lineTitreContent">Juillet 1999</div></td>
  189.          <td class="lineData"><div class="lineDataContent">CDD de 1 mois chez [ <a href="http://www.allium.fr">Allium</a> ] (Fournisseur de services informatiques aux entreprises, matériel, assistance technique) en tant qu'ouvrier informatique sur banc de montage</div></td>
  190.         </tr>
  191.        </table>
  192.       </td>
  193.      </tr>
  194.     </table>
  195.     <table class="bloc">
  196.      <tr>
  197.       <td class="titreBloc"><div class="titreBlocContent">Formation</div></td>
  198.       <td> </td>
  199.      </tr>
  200.      <tr>
  201.       <td class="dataBloc" colspan="2">
  202.        <table>
  203.         <tr>
  204.          <td class="lineTitre"><div class="lineTitreContent">2001 / 2002</div></td>
  205.          <td class="lineData"><div class="lineDataContent">2<span style="vertical-align:super;font-size:10px;">eme</span> année sur 3 de spécialisation informatique à l'INSA de Lyon [ <a href="http://www.insa-lyon.fr"><span style="font-weight:bold;">I</span>nstitut <span style="font-weight:bold;">N</span>ational des <span style="font-weight:bold;">S</span>ciences <span style="font-weight:bold;">A</span>ppliquées</a> ]</div></td>
  206.         </tr>
  207.         <tr>
  208.          <td class="lineTitre"><div class="lineTitreContent">1998 / 2000</div></td>
  209.          <td class="lineData"><div class="lineDataContent">Cycle préparatoire intégré à l'INSA de Rouen</div></td>
  210.         </tr>
  211.         <tr>
  212.          <td class="lineTitre"><div class="lineTitreContent">1998</div></td>
  213.          <td class="lineData"><div class="lineDataContent">Baccalauréat scientifique obtenu avec mention "Très Bien"</div></td>
  214.         </tr>
  215.         <tr>
  216.          <td class="lineTitre"><div class="lineTitreContent">Langues</div></td>
  217.          <td class="lineData"><div class="lineDataContent"><span style="font-weight:bold;">Anglais</span>, utilisation courante du vocabulaire de l'entreprise ainsi que 2 séjours en pays anglophones d'une durée de 15 jours (note au TOEIC : 820)<br /><span style="font-weight:bold;">Allemand</span> : Notions</div></td>
  218.         </tr>
  219.        </table>
  220.       </td>
  221.      </tr>
  222.     </table>
  223.     <table class="bloc">
  224.      <tr>
  225.       <td class="titreBloc"><div class="titreBlocContent">Outils utilisés et réalisations</div></td>
  226.       <td> </td>
  227.      </tr>
  228.      <tr>
  229.       <td class="dataBloc" colspan="2">
  230.        <table>
  231.         <tr>
  232.          <td class="lineTitre"><div class="lineTitreContent">Bureautique</div></td>
  233.          <td class="lineData"><div class="lineDataContent">Logiciels Microsoft Word, Excel, Powerpoint. Logiciels edition graphique Paint Shop pro, Adobe Photoshop. Création de sites Web avec Macromedia Dreamweaver, <span style="font-weight:bold;">ultraedit</span>.</div></td>
  234.         </tr>
  235.         <tr>
  236.          <td class="lineTitre"><div class="lineTitreContent">Système d'exploitation</div></td>
  237.          <td class="lineData"><div class="lineDataContent">Windows 98, NT et 2000. Linux.</div></td>
  238.         </tr>
  239.         <tr>
  240.          <td class="lineTitre"><div class="lineTitreContent">Programmation</div></td>
  241.          <td class="lineData"><div class="lineDataContent"><span style="font-weight:bold;">PHP</span>, HTML (XHTML), XML, Java, C++ (dont Visual C++), Corba, Delphi.</div></td>
  242.         </tr>
  243.         <tr>
  244.          <td class="lineTitre"><div class="lineTitreContent">Base de données</div></td>
  245.          <td class="lineData"><div class="lineDataContent">MySQL, PostgreSQL, Oracle, MS SQL Server.</div></td>
  246.         </tr>
  247.         <tr>
  248.          <td class="lineTitre"><div class="lineTitreContent">Méthodes</div></td>
  249.          <td class="lineData"><div class="lineDataContent">USDP (UML avec Rational Rose), Merise</div></td>
  250.         </tr>
  251.         <tr>
  252.          <td class="lineTitre"><div class="lineTitreContent">Réalisations</div></td>
  253.          <td class="lineData"><div class="lineDataContent"><ul><li>Application Web en PHP pour réaliser simplement des galeries d'images en ligne <span style="font-weight:bold;">[ <a href="http://www.z0rglub.com/phpwebgallery">présentation</a> ]</span></li><li>Site Web en html + CSS (PHP pour l'architecture) sur les <span style="font-weight:bold;">[ <a href="http://www.z0rglub.com/piratage">attaques réseaux</a> ]</span></li><li>Jeu de plateau en Java</li></ul></div></td>
  254.         </tr>
  255.        </table>
  256.       </td>
  257.      </tr>
  258.     </table>
  259.     <table class="bloc">
  260.      <tr>
  261.       <td class="titreBloc"><div class="titreBlocContent">Centres d'intérêts</div></td>
  262.       <td> </td>
  263.      </tr>
  264.      <tr>
  265.       <td class="dataBloc" colspan="2">
  266.        <table>
  267.         <tr>
  268.          <td class="lineTitre"><div class="lineTitreContent">Sports</div></td>
  269.          <td class="lineData"><div class="lineDataContent">Vélo, roller, tennis de table (membre de l'association de l'INSA).</div></td>
  270.         </tr>
  271.         <tr>
  272.          <td class="lineTitre"><div class="lineTitreContent">Programmation</div></td>
  273.          <td class="lineData"><div class="lineDataContent"><span style="font-weight:bold;">PHP</span> MySql, HTML, XML, Java(Applet, Servlet...), C++ (dont Visual C++), Oracle, Corba, Delphi, MS SQL Server</div></td>
  274.         </tr>
  275.         <tr>
  276.          <td class="lineTitre"><div class="lineTitreContent">Activités</div></td>
  277.          <td class="lineData"><div class="lineDataContent">Administrateur du site [ <a href="http://www.lyonhardware.com">lyonhardware.com</a> ]<br />Administrateur du forum de l'INSA de Lyon [ <a href="http://inside.insa-lyon.fr">Inside</a> ]<br />Cours particuliers pour collègiens et lycéens en mathématiques, physique, chimie.<br />Cours d'initiation informatique pour débutants (prise en main windows, utilisation internet)</div></td>
  278.         </tr>
  279.        </table>
  280.       </td>
  281.      </tr>
  282.     </table><div class="dateInfo">date actuelle : mardi 6 août 2002  à 17h18<br />dernière mise à jour : mardi 6 août 2002  à 16h44</div>
  283.    </td>
  284.   </tr>
  285.  </table>
  286. </body>
  287. </html>


 
Note : je n'ai pas différencié la couleur de la colonne de gauche et de la colonne de droite, c'est une bonne idée, je vais essayé.


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 06-08-2002 à 17:33:08    

http://www.z0rglub.com/images/cv3.png


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 06-08-2002 à 17:46:41    

C'est moins lourd ainsi, peut-être avec un jaune à gauche en fond? ou un gris plus foncé?  
 
http://www3.sympatico.ca/sylvain403/indentite.jpg

Reply

Marsh Posté le 06-08-2002 à 17:50:07    

perso je préfère la 1e  
 
Question : ça veux dire quoi le gras que tu as mis à certains endroits ?  :??:


---------------
Pour la préservation de l'environnement, n'imprimez ce post qu'en cas de nécessité | Fais du bien à un vilain, il te chiera dans la main.
Reply

Marsh Posté le 06-08-2002 à 17:51:25    

panzemeyer a écrit a écrit :

perso je préfère la 1e  
 
Question : ça veux dire quoi le gras que tu as mis à certains endroits ?  :??:  




ça dépend des endroits. pour INSA, c'est pour le sigle. Sinon, c'est pour mettre en avant les trucs les plus importants.


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 06-08-2002 à 17:52:23    

Reply

Marsh Posté le 06-08-2002 à 17:54:26    

je viens d'essayer ça, je trouve ça pas trop laid :
http://www.z0rglub.com/images/cv4.png


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 07-08-2002 à 01:15:32    

z0rglub a écrit a écrit :

 
ça dépend des endroits. pour INSA, c'est pour le sigle. Sinon, c'est pour mettre en avant les trucs les plus importants.



Je croyais que c'était temporaire.  
 
Je te conseille de le virer, ça nuit à la lisibilité. Par ex. le gras sur le Très bien est vraiment superflu (ils la veront ta mention t'en fait pas) et fait un peu prétentieux. Pareil pour les initiales de l'INSA, ils ne sont pas stupides, je pense qu'ils savent ce qu'est un acronyme.  
 
A ta place je ne laisserai le gras que pour les intitulés et le nom des entreprises.  
 
Pour répondre à ta question (les couleurs), ça dépend à quelle  fin tu as créé ce CV.  
 

  • Si c'est pour l'imprimer, il faut en général rester discret, donc un simple bleu foncé est largement suffisant.  


  • Si c'est pour le publier sur le net, la 1e version est très bien, la dernière  ferait un peu trop terne.  


Enfin c'est mon avis perso t'en fais ce que tu en veux.  
 


---------------
Pour la préservation de l'environnement, n'imprimez ce post qu'en cas de nécessité | Fais du bien à un vilain, il te chiera dans la main.
Reply

Marsh Posté le 07-08-2002 à 08:02:10    

j'ai suivi tes conseils, j'ai viré pas mal de gras. Sinon, la version HTML c'est juste pour être vu. ça  ne s'imprimera jamais bien. Pour ça il y a la version pdf (générée automatiquement à partir du même fichier xml, donc même contenu)


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 07-08-2002 à 08:47:02    

juste un truc qui n'a aucun rapport....
on dit plutôt  
 
"adresse postale" que "adresse courier" je pense....

Reply

Marsh Posté le 07-08-2002 à 08:51:20    

alpseb a écrit a écrit :

juste un truc qui n'a aucun rapport....
on dit plutôt  
 
"adresse postale" que "adresse courier" je pense....




oui, ok, je sais pas trop. C juste histoire de dire qu si on a du courier à m'envoyer, c'est à cette adresse là.


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed