Création d'un portefolio - Forum Un projet de site internet ?

La Communauté Webmaster

  Forum-webmaster
  Général
  Un projet de site internet ? (Modérateurs: Lilian, Shain, Wolf18)
  Création d'un portefolio

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Création d'un portefolio (Lu 1975 fois)

Création d'un portefolio
« sur: le 18-01-2012 a 22:29:58 »

Synoyx
Membre récent

Hors-Ligne

Sexe: Male

Messages: 5

Bonjour à tous,

Je suis tout nouveau sur le site donc je me présente vite faire : Julien, 18 ans, en première année de BTS SIO SLAM. J'ai appris il y a quelques mois la programmation en HTML, CSS et travaille mon PHP depuis.
Je souhaite créer un site web depuis quelque temps pour pouvoir prouver mes compétences lors d'un futur entretien d'embauche par exemple. Ne trouvant pas de sujet dont je pourrai pleinement m'occuper, j'ai décider de créer un portefolio.
Ce portefolio sera à l'imag que j'ai de l'informatique, c'est a dire innovant, pratique, sobre ...
J'alimenterai ce topic au fur et à mesure de l'avancement de mon site, aussi bien pour demander des conseils que pour mettre à disposition des aides pour les novices dans mon cas.

Première étape : le design
Première question donc ! j'ai la structure de mon site en tête, ainsi qu'une image de celui-ci. Maintenant une question se pose : le fond ou la forme pour commencer ? Je recherche la démarche la plus professionnelle possible. J'ai lu qu'il y a de nombreux webmasters qui font leurs designs sur photoshop avant de coder leur site.
Qu'en pensez vous ?

Rapporter au modérateur

Re:Création d'un portefolio
« Répondre #1 sur: le 19-01-2012 a 08:52:43 »

JLV25
Membre récent

Hors-Ligne

Sexe: Male

Messages: 43

Je te conseille d'adopter une grille 960GS (http://960.gs/) et ensuite de créer ta maquette sous Photoshop ou Illustrator avant de commencer la moindre ligne de code.

Rapporter au modérateur

Webmaster indépendant spécialisé CMS.
-Site web: www.webmastering.pro
-E-mail: webmaster@jl-vicaire.com
-n°SIRET: 381 165 042 00023
-Dernière création: lecouventdelorre.com (Joomla 1.7 multilangues)

Re:Création d'un portefolio
« Répondre #2 sur: le 19-01-2012 a 08:53:12 »

WebD
Superactif

Hors-Ligne

Sexe: Male

Messages: 938

Salut,
Si tu veux te faire un site rapidement avec un rendu professionnel, je te conseil de passer par wordpress en cherchant des thèmes portfolio, il y en a plein.

A+

Olivier.

Rapporter au modérateur

Agence Web | Sticker MacBook | Lunettes personnalisées

Re:Création d'un portefolio
« Répondre #3 sur: le 19-01-2012 a 09:12:22 »

Synoyx
Membre récent

Hors-Ligne

Sexe: Male

Messages: 5

Merci de vos réponses, je dois avouer que c'est bien sympa !
La grille en css pourquoi pas ça accélère, par contre les thème je ne souhaite pas du tout en utiliser car j'ai déjà mon propre thème en tête et je veux tout créer par moi même

Rapporter au modérateur

Re:Création d'un portefolio
« Répondre #4 sur: le 19-01-2012 a 11:22:19 »

Chriss
Habitué

Hors-Ligne

Sexe: Male

Messages: 356

Petite méthodologie proposée :
Définition d'objectifs -> Cahier des charges -> Arborescence + navigation + contenu (Wireframe + traitement de texte) -> Habillage graphique (Photoshop) -> Codage fond (HTML) -> Code forme (CSS) -> Tests et validation (accessibilité, respect des standards, différents navigateurs)

Rapporter au modérateur

Je travaille dans une agence web qui fait de la création web sur Annecy et qui édite un site d'informations sur les Alpes

Re:Création d'un portefolio
« Répondre #5 sur: le 19-01-2012 a 11:41:10 »

Synoyx
Membre récent

Hors-Ligne

Sexe: Male

Messages: 5

@Chriss Parfait merci !
Pour la definition des objectifs, je suppose qu'il faut également prévoir le nombre de visiteurs, la type de visiteurs et donc leur navigateur potentiel etc etc ... ?
Pour le cahier des charges, je n'en ai jamais fait pour un site web. Celui là parait correct ? http://www.joliespages.com/pages/cahier3.php

Rapporter au modérateur

Re:Création d'un portefolio
« Répondre #6 sur: le 19-01-2012 a 12:49:17 »

Chriss
Habitué

Hors-Ligne

Sexe: Male

Messages: 356

Le CDC ici sera "factice". Il permet normalement de ne rien oublier quand on travaille avec un client/prestataire web mais vu que tu le fais pour toi, ce sera plus un pense bête évolué qu'autre chose.

Rapporter au modérateur

Je travaille dans une agence web qui fait de la création web sur Annecy et qui édite un site d'informations sur les Alpes

Re:Création d'un portefolio
« Répondre #7 sur: le 27-01-2012 a 14:31:12 »

Synoyx
Membre récent

Hors-Ligne

Sexe: Male

Messages: 5

Reuh !

Pas eu beaucoup de temps cette semaine mais j'ai quand même avancé. J'ai créé mon template, défini mes objectifs, mon cahier des charges ... Je pense avoir tout pour "bien" commencer.

J'ai donc commencé à coder, et je suis confronté à un petit problème. Je poste ici puisque mon topic est déjà créé.

Je fais mon header là ( je suis en html 5 ) et dedans je souhaite mettre une image au milieu entourée par 2 div de chaque coté. J'ai utilisé un position absolute pour tout placer correctement. Seulement je me rend compte que par la suite je vais devoir tout mettre en position absolute si je fais comme ça. Y aurait t'il une autre solution ?
Autre question, j'ai lu qu'il faut éviter les div dans le html 5, qu'en pensez vous ? Et dans mon cas je suppose qu'il est mieux de mettre un span pour contenir les banières non ?
Voici mon code :

Code:
<!DOCTYPE HTML>
   <html>
      <head>
         <meta charset="utf-8">
         <title>Portfolio</title>
<link rel="stylesheet" href="style.css" />
      </head>
      <body>
<header>
<div id="banner1"><p>test</p></div><p><img src="fond.jpg" alt="Photo" /></p><div id="banner2"><p>test</p></div>
<nav>
<ul>
<li>Acceuil</li>
<li>menu</li>
<li>Recherche</li>
</ul>
            </nav>
</header>
   <section>
            <article>
               <p>texte</p>
            </article>
</section>
<footer>
<p>Copyrith Moi & co</p>
</footer>
      </body>
   </html>

Code:
*
{
   margin: 0;
   padding: 0;
}

img
{
   position: absolute;
   width : 20%;
   left: 40%;
   display: inline-block;
}

div
{
   display: inline-block;
}

#banner1
{
   position: absolute;
   left: 0px;
   height: 10%;
   width: 40%;
   background-color: red;
}

#banner2
{
   position: absolute;
   right: 0px;
   background-color: grey;
   height: 10%;
   width: 40%;
}
footer
{
   position: absolute;
   bottom: 0px;
}