Titre: Création d'un portefolio
Posté par: Synoyx le le 18-01-2012 a 22:29:58
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 ? |
Titre: Re:Création d'un portefolio
Posté par: JLV25 le le 19-01-2012 a 08:52: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. |
Titre: Re:Création d'un portefolio
Posté par: WebD le le 19-01-2012 a 08:53:12
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. |
Titre: Re:Création d'un portefolio
Posté par: Synoyx le le 19-01-2012 a 09:12:22
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 |
Titre: Re:Création d'un portefolio
Posté par: Chriss le le 19-01-2012 a 11:22:19
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) |
Titre: Re:Création d'un portefolio
Posté par: Synoyx le le 19-01-2012 a 11:41:10
@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 |
Titre: Re:Création d'un portefolio
Posté par: Chriss le le 19-01-2012 a 12:49:17
| 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. |
Titre: Re:Création d'un portefolio
Posté par: Synoyx le le 27-01-2012 a 14:31:12
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;
} |
|
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|