TUTO PACK WEB : Designez et Intégrez un site onepage

Voici un pack de formation dédié à la création de A à Z d'un site de type One Page.
La première partie sera consacrée au design du site que nous réaliserons ensemble sur Photoshop. Ensuite, nous passerons à l'intégration de cette maquette pour obtenir un site One Page qui a la particularité de ne pas avoir de rechargement de page et où toute la navigation se fait grâce à un scroll fluide entre chaque rubrique. A la fin de cette formation, vous serez en mesure de designer & d'intégrer un site complet qui pourra être mis en ligne tout de suite.
Pour vous rendre compte du résultat que nous obtiendrons ensemble à la fin de ce tuto, je vous invite à regarder l'extrait vidéo personnalisé que j'ai réalisé. Sommaire de cette formation de plus de 6h30 :

PARTIE 1 : Design du Site

• Création d'un document pour le web
• Réinitialisation & Création d'un nouveau nuancier plus adapté
• Création du background full page ainsi qu'un pattern répété par-dessus
• Création et placements des différents repères
• Création de la sidebar (logo, menu, copyright...)
• Design du lecteur MP3
• Création de la partie News pour la home page du site
• Création de la partie About us
• Création de la partie Contact (formulaire + google map)
• Le mot de la fin de cette première partie

PARTIE 2 : Intégration du Site

• Découpage des images dans Photoshop : technique de découpage, formats d'images à choisir, création de sprites
• Mise en place d'un slider de plusieurs images sur le background en full page
• Intégration de la sidebar : logo, menu, réseaux sociaux, copyright & un bouton permettant de la cacher/montrer
• Création des 3 rubriques + mise en place du système one page avec scroll entre les rubriques
• Intégration de la partie "News" : Carousel responsive, déploiement d'une nouvelle sidebar pour lire le contenu de la news sélectionnée
• Intégration de la partie "About Us" : Colonnes CSS3, blockquote personnalisé
• Intégration de la partir "Contact" : Formulaire 3 champs, google map
• Développement du formulaire en Ajax/PHP avec test d'envoi sur une boîte email
• Création d'un lecteur MP3 personnalisé en jQuery
• Ajout d'interactions avec les touches du clavier (cacher tout le contenu du site et mettre le site en pause, puis l'inverse) & aussi quelques conseils pour mettre en ligne le site créé (logiciel FTP, hébergement)

Les logiciels dont vous avez besoin pour suivre la formation : Photoshop (depuis la CS2), un éditeur de code comme Notepad++ pour Windows ou Coda pour Mac, ainsi qu'un navigateur installé sur votre machine (Chrome par exemple). Vous aurez aussi besoin de Easyphp (ou Wamp/Mamp) pour créer un serveur local et tester l'envoi d'emails depuis le formulaire en PHP/Ajax que nous allons mettre en place.
Cette formation est pour un niveau débutant/intermédiaire. Je vous conseille donc d'avoir les bases du html/css pour suivre au mieux le tuto.
TOUT le site est inclus dans les sources (fichiers HTML, CSS, jQuery, PSD), ainsi que l'intégration de départ pour vous permettre de suivre la formation dans les meilleures conditions et refaire petit à petit le site one page en même temps que vous regardez la vidéo. Bonne formation !