Voici une description illustrée du métier d'intégrateur web, ou développeur front office. J'ai fait la vidéo sans me préparer, c'est pour ça que des fois je me casse la tête sur certains trucs. Elle dure 1h (en réalité il a fallu 3 heures.) Chargez la vidéo en HD et plein écran pour bien voir.
Intégration html5 css3 par rivsc
J'ai fait un tout petit peu de JS pour dire que j'aurais vu tous les aspects de l'intégration. Mais bon il y a d'autres choses à faire (Tester sur les autres navigateurs/versions, S'intéresser aux interfaces riches FLASH / AIR / SILVERLIGHT, faire du JS un peu plus évolué avec des plugins jquery par exemple, utiliser les CSS transitions, utiliser les font-face, ...).
Le découpage est fait à la truelle, normalement on fait des png avec la transparence, comme ça on peut changer le background comme on veut sans tout retoucher.
Après la fin de la vidéo, J'ai finalisé l'intégration un peu plus proprement (l'élément actif du menu qui passe au dessus, la couleur de fond, les transitions css pour le menu, le design fluide complet).
Ressources utilisées pour ou pendant la vidéo :
Netbeans IDE gratuit et open-source pour php/html/css/js/ruby : https://fr.netbeans.org/
Logiciel pour les screencasts : gtk-recordMyDesktop : https://recordmydesktop.sourceforge.net/about.php
Ubuntu (10.04) toujours pas upgradé le portable... : https://www.ubuntu.com/download/ubuntu/download
Gimp pour les découpages des éléments de la charte graphique (version de dev) : https://www.gimp.org/
Un navigateur internet : Chromium : https://www.chromium.org/
Le plugin pendule pour la capture de couleur (colorpicker) et mesure des éléments (ruler) : https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi?hl=fr
Le site internet pour faire ses gradients css3 sans se casser la tête colorzilla : https://www.colorzilla.com/gradient-editor/
Liste des selecteurs CSS w3schools : https://www.w3schools.com/cssref/css_selectors.asp
S'il manque des trucs, laissez des commentaires.
La charte était une démo sur un site de template payant. Donc je ne laisse pas les sources. Si vous êtes graphiste ou que vous avez les droits complets sur une charte graphique, je veux bien l'intégrer et laisser les sources , contactez-moi !