Les bons outils pour un site professionnel
Bonsoir à tous,
Récemment j'ai décidé de créer mon propre site web professionnel. Pour arriver à le créer j'ai acheté un bouquin: Développez votre site web HTML5 - CSS - Javascript Le guide complet Titan. Bouquin édité par Micro Application.
Ce bouquin fait près de 1000 pages et me semble a priori contenir tout ce dont j'ai besoin pour la création de mon site web. Evidemment je sais que je peux obtenir les codes que je veux sur le net mais j'ai à coeur d'écrire la totalité du code que ce soit en HTML5, CSS ou Javascript.
Je suis conscient que de nos jours on peut trouver le code que l'on veut sur le net et se faciliter la vie mais faire l'étude de ces différents langages et les mettre en applications me semblent nécessaire avant de songer à faire du copier coller de codes. Cela permettra de savoir ce que je fais. En tout cas c'est comme ça que je vois les choses.
Mon site aura évidemment un menu, des vidéos de présentations en néerlandais et anglais, des vidésos d'applications développées en VBA, mon CV, mes hobbies et si j'y arrive un formulaire.
Par conséquent j'ai chargé et utilise les applications suivantes:
Eclipse Helios pour l'encodage que ce soit en HTML5, CSS ou Javascript
FileZilla qui me sert pour l'envoie de mes fichiers vers le server de mon provider internet (je passe par lui pour avoir ma page)
CamStudio 2.6b pour la réalistion de tutos: je compte mettre en ligne de courtes vidéos d'applications développées par moi-même en VBA
Format Factory pour la conversion des vidéos réalisée avec CamStudio (elles sont en .avi) vers .mp4, ogv etc
Les navigateurs IE8, Chrome et Firefox ont été installé de sorte que je puisse testé le rendu sur chacun d'eux.
* formulaire: pour ce qui concerne cet aspect je n'ai pas encore investigué...
Je suis en pleine étude de mon projet de site web et voudrais savoir si selon vous il est raisonnable que je me fixe fin janvier pour la mise en ligne de mon site et si les outils que j'ai évoqué plus haut en plus de mon bouquin sont pertinents pour arriver à mes fins.
D'avance merci de votre avis critique. U:P
Le coeur a ses raisons que la raison ne connaît pas
Cher Vil'Coyote,
Je te remercie d'avoir pris la peine de réagir à mon message d'hier.
Alors je confirme. Je démarre de 0. J'ai acheté mon livre il y a près de 2 mois et ai vraiment débuté l'apprentissage il y a 1 mois.
Toutefois j'ai une expérience en programmation. Comme je l'ai dit je développe en VBA des applications. En outre à l'époque j'ai programmé en COBOL. Donc le monde de la programmation ne m'est pas inconnu.
Maintenant je suis réaliste et je mesure la masse de connaissance à acquérir.
Afin que je puisse fournir une réponse juste à mes interlocuteurs, pourrais-tu me donner une idée de délai réaliste ?
Sache que je vois mon site avec évidemment une page principale sur laquelle je développerai un menu donnant accès à un CV, un détail de mes hobbies, un descriptif de ma carrière, un espace vidéos: présentations en anglais et néerlandais et tutos VBA, et comme je l'ai dit peut-être un formulaire.
D'avance merci si tu trouves le temps de me répondre.
Bien à toi,
Ricardo
1 pièce(s) jointe(s)
Débutan ayant besoin d'aide
Bonjour à tous,
Bonjour Vil,
Voici quelques semaines je me suis lancé dans la programmation de mon site. J'ai mis en pièce jointe une image de mon site. Mais celui-ci est accessible à l'adresse suivante: http://myspace.voo.be/rarrabito/Index.html
Pour rappel j'écris entièrement le code de mon site. A ce stade aucun copier/coller n'a été fait. Excepté pour deux choses:
1° Un script JS fourni par Google pour l'acceptation des nouvelles balises HTML5 telles <header> <nav> <aside> <section> etc
Code:
1
2
3
| <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> |
2° Un script JS pour gérer la position absolute de mon menu sous tout type de navigateur et plus particulièrement IE.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!--[if !IE]> <-->
<style type="text/CSS">
nav li ul {
position:absolute;
}
</style>
<!--><![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
nav li ul {
position:absolute;
}
</style>
<![endif]--> |
Donc pour revenir sur le fait que j'écris moi-même tout le code HTML5, CSS et d'ici quelques jours Javascript je me retrouve aujourd'hui avec quelques soucis je dirai d'ordre secondaire.
1° Je voudrais créer un logo. Pour se faire j'ai téléchargé GIMP. Mais je ne sais comment faire. Alors j'ai pris un logo existant (le dollar) que j'ai mis tel quel dans mon <header>.
Le logo ayant un fond blanc j'ai mis mon <header> en blanc.
Ma question est. Si jeu veux avoir un vrai logo tel que je le désire et une bannière disons un rien personnelle, dois-je passer aussi par la maîtrise de GIMP ?
2° Dans l'image que je vous fourni j'ai cliqué dans mon menu sur l'item CV. Suite à ce click une nouvelle page est téléchargée ayant la même structure que celle nommée Index.html si ce n'est que la section centrale reçoit les détails de mon CV. Selon-vous, est-ce une bonne manière de faire ou devrais-je plutôt prendre la totalité de l'espace sous le <header> ?
Concrètement est-ce que à la différence de l'image jointe je devrais recouvrir les sections gauche et droite de ma page centrale ?
3° Le CSS utilisé pour ma page CV peut-il être inclu dans le CSS de mon fichier Index.html ou doit-il impérativement être repris dans un nouveau fichier CSS propre à mon CV ? Et par extension, est-ce que pour chaque page téléchargé il est d'usage d'avoir un CSS à part ou non ?
4° Comme vous pouvez-le voir j'ai proposé un formulaire pour choisir la langue du site. Ce qui implique l'utilisation de Javascript. Je me suis rendu vite compte que si l'on veut pouvoir gérer un minimum d'évenement l'étude de ce langage est indispensable. Mais j'ai constaté que sous IE, pas les autres navigateurs, il me demande toujours s'il peut exécuter Javascript. Comment faire pour que mon IE ne me pose plus la question ? Et quid des gens chez qui ce message apparaîtra ?
En espérant avoir été clair dans mes questions je vous remercie d'ores et déjà de votre attention et de vos remarques.
Bonne soirée à tous,
Ricardo
Petit mot de remerciement
Merci à tous de m'avoir répondu depuis que j'ai ouvert cette conversation.
Je prends bonne note de toutes vos remarques et les mettrais en application.
Tsoko
Adresse de site et espace fourni par FAI
Pour l'adresse du site je vais donc changer Index par index. Quant à l'adresse du site qui passe par un espace alloué par mon FAI je m'en contenterai pour l'instant. Il faut garder à l'esprit que mon site est développé en tant qu'amateur.
Evidemment il vise à me faire connaître professionnellement mais est-ce pénalisant en terme d'image de pas avoir ma propre adresse ?
A l'avenir je ne dis pas que je ne prendrai pas ma propre adresse mais pour débuter j'ai estimé que cet espace offert par mon FAI ferait l'affaire.
Référencement
Bien entendu je sais qu'il me faut passer par une étude quant à la meilleur manière d'être référencé dans les moteurs de recherche. D'ailleurs mon bouquin aborde le sujet en long et en large dans 2 chapitres entiers.
Mais bon une chose à la fois lol.
Bovino
GIMP (logo & bannière)
A la lecture de ton message puis-je procéder de la façon suivante:
Créer les pages en htmal (fonds), rédiger les CSS (forme), gérer les évenements (JAvascript) et puis seulement à la fin peaufiner la bannière et le logo ?
Je n'ai pas envie à l'heure actuelle de me plonger dans GIMP tant j'ai de choses à faire (écriture du code) et à apprendre encore (Javascript, web design, tests, référencement, etc).
Je me dis mais vous me corrigerez que tant que mon site n'est pas annoncé/référencé officiellement le logo et la bannière peuvent être abordés plus tard.
A Tous
Critique du site
Maintenant que je vous ai donné l'adresse, puis-je vous demander à l'occasion de visiter mon site et me faire part de vos critiques ? J'aimerais profiter de votre expérience à chacun pour arriver un site qui fasse pro même si en tant que néophyte en la matière ce sera dur 8O.
Bonne journée à vous,
Ricardo
Réaction suite à la visite du site
XxArchangexX,
Merci d'avoir pris le temps de visiter et pour tes remarques constructives.
Bon alors je réponds à tous les points:
L'adresse du site:
En fait je suis salarié et quand je parle de faire un site professionnel, j'entends par là me vendre en tant que professionnel du crédit et le fait que mon site fasse pro. Mais je ne travaille actuellement pour aucune société et n'ai pas l'intention d'être indépendant ni freelance. D'où le fait que je me contente dans un premier temps de cette adresse.
Menu et IE9
Ta remarques ne m'étonnes pas car j'ai découvert ce souci hier chez ma maman. Jusqu'à présent j'avais testé la compatibilité de mon menu et site sur Chrome, Firefox, Safari et IE8 et versions antérieures. Force est de constater que je n'ai pas pris en compte IE9.
J'avais prévu les différentes version d'IE comme tu le verras dans les scripts ci-dessous sauf la 9 lol.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if !IE]> <-->
<style type="text/CSS">
nav li ul {
position:absolute;
}
</style>
<!--><![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
nav li ul {
position:absolute;
}
</style>
<![endif]--> |
Longueur des CV.
Ah je n'avais pas eu ce retour jusqu'à présent mais à y réfléchir je te donne raison. Je sais par expérience que lire un CV est fastidieux. J'adapterai par conséquent le code.
Page centrale et CV
Voici l'esprit dans lequel j'ai développé la partie CV. Lorsque l'on parcours le menu et que l'on clique sur l'item CV, un CV apparaîtra en fonction de la langue du site que vous aurez choisie (voire la liste de sélection de langues dans le header).
Imaginons que vous optiez pour l'anglais, alors en cliquant sur l'item CV le CV en version anglaise sera affichée.
Afin de faciliter la vie des visiteurs j'ai ajouté les liens drapeaux en haut à droite de chaque CV. Ce qui permettra d'évoluer vers l'une ou l'autre version sans changer la langue du site forcément.
Pour revenir à ta remarques sur CV.html. C'est purement un oubli de ma part.
En créant les CV anglais et français j'ai oublié de changer le lien :oops:.
Chaque page de CV reprend une partie du code de la page principale. Le header et les côtés droit et gauche. Il n'y à que le centre qui change toujours.
Je pensais que cette manière de faire était correcte. Si d'autres méthodes existent je suis preneur ;).
L'item Langues et par extension tous les items
Là tu présumes de la suite mais sache que évidemment j'avais prévu une page. Pour chaque langue je compte faire un enregistrement audio voire vidéo. Chaque item du menu aura sa page. C'est simplement parce que je suis en plein développement et que je n'ai pas encore eu le temps de traiter ceux que vous trouverez vide.
Code CSS Javascript et html
Je sépare bien les codes. D'ailleurs j'y accorde beaucoup d'attention. J'ai décidé ce weekend de revoir la totalité du code afin d'une part de l'optimiser et d'autre part de le rendre conforme W3C car je veux le faire valider.
On peut voir un peu de javascript en début entre les balises head mais c'est pour assurer la compatibilité avec tous les navigateurs et pour gérer la position absolute sous IE.
Il y a aussi une fonction javascript que j'ai développée pour la gestion du click sur les bouton (flèches). Cette fonction je la mettrais dans un fichier à part mais comme c'était ma toute première me suis dit pas grave si dans mon code HTML.
Cependant pour voir visité pas mal de sites et les avoir décortiqués nombreux sont ceux qui ont leur code JS dans le code HTML.
Le graphisme (logo, fonds et bannière)
C'est la partie qui me donne le plus de boutons. Ca demande des connaissances que j'ai la flemme d'attaquer maintenant.
Entre l'apprentissage de html5, CSS et Javascript j'ai déjà ma dose.
Lancement officiel du site
Alors que j'avais entrepris la découverte des ces différents langages en novembre 2012 pour une mise en ligne de mon site fin février voir début mars tout s'est accéléré et certains acteurs du marché de l'emploi me demandent de le mettre en ligne le plus rapidement possible. Mes journée deviennent trop courte :calim2:
Encore un grand merci d'avoir pris le temps de le consulter.
Bonne soirée
Ricardo
