Une formation unique qui aborde en détail la réalisation d'un site e-commence de A à Z en s'appuyant, autant pour la conception graphique que son développement, sur les règles ergonomiques, techniques et de marketing web actuelles : Toutes les techniques et connaissances pour créer Une véritable solution e-commerce personnalisée.
Au programme, plus de 20h de formation exclusive, pour apprendre, pas à pas, à créer un site dynamique ultra complet : un front office (la partie visible de "l'iceberg", accessible à vos visiteurs) regroupant carrousel, galerie photo, player vidéo, système de panier Paypal, compte utilisateur (…) et un back office (l'administration du site) permettant, autre autre, la gestion des messages clients, des commandes et des inscriptions, le contrôle des ventes, la mise en ligne et la mise à jour des produits, images et informations...
En suivant l’exemple concret d'UNTITLED, site destiné à la vente d’illustrations et posters d'artistes, vous aborderez toutes les étapes nécessaires à la création d’un site Internet professionnel adapté aux dernières connaissances en matière d'ergonomie, de marketing web et de développement ; une première partie s'attachera à concevoir le webdesign du site avec Photoshop et les outils dédiés.
Vous poursuivrez la formation par l’intégration et la programmation en utilisant l'ensemble des techniques et langages appropriés.
A l’issue de cette formation inédite, vous serez capable de développer des sites Internet dynamiques de niveau professionnel pour vos différents projets. Les connaissances acquises pourront être appliquées autant à la création d'un site “vitrine”, d'un portfolio, que dans le domaine du e-commerce avec la réalisation et la gestion d'une boutique en ligne.
- Testez le site e-commerce Untitled Artshop.
Le Web Design
Dans cette première partie, Tristan Roger, graphiste et webdesigner, la première partie de cette formation vous apprend à concevoir un Web design fonctionnel et adapté aux spécificités d'une boutique e-commerce, en utilisant les outils de Photoshop dédiés au Webdesign et à la mise en page, parmi lesquels : alignement, texte et paragraphe, formes vectorielles, transformation masque d'écrêtage, grille et repères, calques d'effets, la réalisation d'icônes et d'ombres personnalisées…
L'intégration
Cette seconde partie de la formation se consacre à l'intégration et la mise en page du site dans les moindres détails avec l'éditeur de Dreamweaver. Le HTML vous permettra de créer la structure générale du site, de hiérarchiser le contenu des pages web en accord avec les règles du référencement naturel et d'insérer les ressources multimédia (les images, le player vidéo en HTML 5 et en Flash...). Avec la puissance du CSS, vous styliserez et mettrez en forme les différents pages du site en contrôlant avec précision la position, les couleurs, les typographies, les contours, les transparences (…) de chaque élément : header, footer, menu de navigation, boutons de pagination, titres, paragraphes, textes en colonne… Vous verrez également comment mettre en place un carrousel et un zoom d'image en javascript avec le framework jQuery.
Le Développement
Dans cette dernière partie, vous utiliserez l’ensemble des technologies et langages de programmation nécessaires au développement d'un site dynamique et de e-commerce : la POO (Programmation Orientée Objet) via le modèle MVC (modèle vue controler) et l’utilisation de framework PHP et de MySQL. Ainsi, la formation a également pour objectif d'être le reflet des réalités professionnelles en vous fournissant des connaissances actualisées dans les domaines de la programmation. Particulièrement rigoureux et pédagogue, Steven Titren, développeur depuis 10 ans et spécialiste de solutions e-commerce, vous permettra enfin d'acquérir des méthodes de travail efficaces pour venir à bout de ce type de projet web et comprendre l'interaction entre les différentes technologies.
Retrouvez également cette formation en DVD et tous les détails sur le site et ce projet : Untitled Artshop, DVD Collector #5.
Note : toutes les ressources vous sont fournies. Pour chaque, sont mis à votre disposition : les psd complets du Web Design, les illustrations des artistes présentés dans le site, les pages HTML, les feuilles de style CSS, les fichiers javascript ; l'architecture, les configurations du framework Cakephp ainsi que les fichiers nécessaires (PHP, XML, la base de données complète) au développement du site ont été rassemblés dans un dernier dossier.
Vous pouvez suivre, sans problème, cette formation "Créer un site e-commerce" avec les version CS3, CS4, CS5 de Photoshop et de Dreamweaver ; l'interface du logiciel y est globalement identique et les fonctionnalités utilisées, prises en comptes par chacune des versions. Seul Photoshop est véritablement nécessaire. En revanche, l'Intégration peut être réalisée avec n'importe quel éditeur de code ; Komodo Edit, par exemple, est gratuit et très complet. Concernant, la partie développement, le formateur vous guide dans l'installation des frameworks requis et libres (CakePHP, jQuery).
Cette formation considère que les connaissances de bases dans les principaux languages de programmation ont été acquises.
Jetez un oeil à ces autres tuto Php, Photoshop CS5
Lecture de flux RSS avec cURL…
Voici un tuto Php sur l'utilisation de cURL pour récupérer…
Laravel : Template, CSS, Inscription…
Dans ce tuto PHP dédié à Laravel (framework PHP), nous verrons…
Laravel : Modèles, Sessions…
Dans ce tuto PHP consacré à Laravel (framework PHP), nous…
Laravel : Présentation et…
Dans ce tuto PHP en vidéo, nous allons découvrir le framework…
Espace membre en PHP/MySQL
Dans ce tuto PHP/MySQL en vidéo, nous verrons comment implémenter…
PHP POO cas pratique pour…
Dans ce tuto PHP en vidéo pour débutants en POO, nous verrons…
Upload et galerie d'images…
Dans ce tuto PHP en vidéo, vous apprendrez à réaliser un…
Un blog en PHP (première…
Dans ce tuto PHP en vidéo, nous verrons comment réaliser un…
Cette formation contient 55 leçons en vidéo pour une durée totale de 21h53.
Voici le programme complet abordé au cours de cette formation :
Graphisme
- Présentation du site00:03:39
- Création du header de la page d’accueil00:23:38
- Créer le carrousel et son ombre portée00:22:17
- Mise en place de éléments de la page d’accueil00:29:47
- Réaliser un trait en pointillés00:04:44
- Création du footer de la page d’accueil00:31:17
- Création de la galerie des oeuvres00:43:21
- Création de la page A propos00:33:10
- Création de la page Actualité00:19:52
- Création de la fiche produit00:31:42
- Création du formulaire de contact00:15:23
- Mise en place des rollover du site00:17:11
- Création de l’étape 1 du panier00:35:12
- Création de l’étape 2 du panier00:14:50
- Création de l’étape 3 du panier00:14:49
- Création du récapitulatif de commande00:14:27
- Créer la page compte client00:32:15
- Présentation du back office00:10:13
- Réalisation des icônes de l’administration00:22:10
- Création de la page ventes00:47:22
- Création de la page produit00:23:01
- Conclusion00:03:23
Intégration
- Introduction00:06:03
- Structure de base01:25:00
- Intégration de la page d’accueil00:48:20
- Intégration de la galerie des œuvres00:35:18
- Intégration de la page de la page produit00:28:16
- Développement d’un zoom en jQuery simple00:48:43
- Intégration de la page A propos00:29:48
- Intégration de la page actualités00:19:30
- Création du formulaire de contact00:12:32
- Intégration des pages panier00:29:47
- Intégration du gabarit du back office00:43:28
Développement
- Installation de CakePHP00:16:54
- Configuration des templates00:24:03
- Initiation au MVC et à CakePHP00:32:20
- Génération automatique des MVC00:20:46
- Adapter les vues générées01:09:59
- Exporté les abonnées à la newsletter00:05:13
- Comment uploader des images ?00:24:03
- Implémenter un système de recherche en back office00:08:50
- Mise en place de la galerie dynamique00:41:44
- Détails d’une oeuvre00:17:35
- La page A propos00:02:51
- Récupération des derniers posts du blog00:02:00
- Envoi d’un email00:08:27
- Ajouter un produit au panier00:18:34
- Mise en place du panier00:28:30
- Création d’un compte utilisateur00:12:09
- Confirmation de la commande00:23:59
- Générer une facture en pdf00:21:12
- Développement de la page ventes00:02:00
- Branchement du module Paypal au panier00:10:16
- Dernières corrections00:34:38
- Conclusion00:06:57
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Php, Photoshop CS5 de 21 heures 53 minutes est proposée dans une résolution plus grande que l’extrait suivant :
formationvideo
, Editeur pro
Formationvideo.fr est un éditeur professionnel de vidéos de formation. Les vidéos sont réalisées par des experts ce qui vous assurent une qualité pédagogique optimale pour découvrir ou vous perfectionner sur un logiciel informatique!
Toutes les formations de Formationvideo
Témoignage des clients de formationvideo
![]()
De supers tutos très bien expliqués !
![]()
Clair, précis. Le formateur prend le temps de tout expliquer en détail. J'ai fini la formation à peine hier et j'ai l'impression de manipuler le logiciel depuis toujours. Je recommande !
![]()
Merci de partager ton savoir!
![]()
Tutoriels de qualité car simples et efficaces à la fois.
![]()
Je tiens à dire un énorme merci pour le tuto ps cs2 ! Dès que terminé les vidéos je me lance dans tes vidéos suivantes ça m'aide énormément
Lire les autres témoignages
D'autres tuto de formationvideo
8 génériques After Effects
Voici une formation After Effects sous forme de 8 ateliers pratique. Dédiés aux génériques…
Créer un zombie sous Zbrush
Voici une formation sur la création d'un zombie dans ZBrush. Maitrisez toute la puissance…
Indesign CS6 - Les nouveautés Print et Digital Publishing
Entre exercices pratiques et théorie, cette formation InDesign CS6 vous permettra de…
Référencement et marketing web
HTML, linking, rédactionnel, Google Panda, Adwords, affiliation, réseaux sociaux, outils…
Notes attribuées par les utilisateurs (4 votes)
Les avis / Questions des utilisateurs (16)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto Php, Photoshop CS5 d’une durée de 21 heures 53 minutes a été acheté 114 fois et a reçu une note moyenne de 4/5.
Ce tuto a été publié le 21 juillet 2012 par formationvideo, éditeur professionnel, ayant reçu une note moyenne de 4,1/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Php Formation.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Cette formation qui se présente sous la forme de plusieurs vidéos, vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.
























(a acheté ce tuto - 12 mai 2013)
" superbe introduction, on arrive a bien suivre et meme si on prend pas quelque chose on peut revenir dessus. "
(a acheté ce tuto - 19 février 2013)
" Le formateur de la partie développement manque beaucoup de pédagogie. Il ne nous explique rien et se contente uniquement de lire mot après mot les lignes de code qu'il écrit sans nous donner d'explication précise. Au début des vidéos, il manque une introduction qui nous expliquerait comment les pages s'organisent et comment elles sont structurées, on plonge directement dans les lignes de code. De plus, il n'est pas assez précisé ce que le code produit, pourquoi il est à cet emplacement et quelles solutions il est sensé apporter. J'en conclu que cette formation ne vous aidera pas à devenir développeur d'un site e-commerce. "
(a acheté ce tuto - 15 février 2013)
" Le raccourcis pour le c de copyright est <Alt 0169> sous windows et ps cs6 "
(a acheté ce tuto - 10 décembre 2012)
" Très bonne formation.
La seule remarque que j'ai a faire, c'est d'utiliser le nuancier pour ajouter la couleur verte-bleue au lieu de toujours devoir aller la chercher. Mais bon c'est un détail, cela n'enlève rien à la qualité de cette formation. "
(a acheté ce tuto - 30 novembre 2012)
" Très bonne première partie de formation, très claire et agréable à suivre. "
(auteur de ce tuto - 02 octobre 2012)
" Bonjour à tous,
Pour toutes questions techniques liées à l'intégration et au développement du site, je vous invite à contacter directement le formateur à cette adresse :
http://www.steven-titren.com/vcard.html.
(plus simple et plus rapide..)
"
(auteur de ce tuto - 28 septembre 2012)
" @ Greg1,
Vous pouvez suivre indifféremment cette formation avec les versions CS3, CS4, CS5 et CS6 de Photoshop et de Dreamweaver ; les outils et fonctionnalités utilisés ne nécessitent pas de version particulière. Vous trouverez les détails de prix sur le site de l'éditeur - Adobe - et pourrez également télécharger les versions d'évaluation de la version CS6 de ces deux logiciels. Celles-ci ont une validité de 30 jours ; vous laissant largement la possibilité de suivre la formation.
Si Photoshop est véritablement nécessaire pour la partie web design, l'Intégration (effectuée initialement sous Dreamweaver dans le cadre de cette formation), en revanche, peut être réalisée avec n'importe quel éditeur de code ; Komodo Edit, par exemple, est gratuit et très complet. Celui-ci vous servira à éditer le HTML (servant à structurer les pages du site) et le CSS (utilisé par styliser les éléments des pages).
Pour la partie développement, vous aurez besoin de Wamp (PC) ou Mamp (mac) afin d'installer la base de données MySQL et simuler un serveur pour interprété et interagir avec le PHP. Il vous faudra également installer le frameworks CakePHP utilisé par le formateur. Toutes ces technologies sont proposées en téléchargement libre et gratuit. "
(n'a pas acheté ce tuto - 28 septembre 2012)
" bonjour, quelles sont les logiciels dont j ai besoin pour la formation ?et combien coutent ils? ou puis je les acheter?
merci "
(a acheté ce tuto - 27 septembre 2012)
" Bonjour, je suis au début de la partie PHP et cakephp n'arrive pas à relier(trouver) mes fichiers css. Comment faire ? Merci. "
(a acheté ce tuto - 03 septembre 2012)
" Bonjour, y a t-il une différence entre cette formation et celle que vous proposez sur votre site internet ? Merci :) "
(n'a pas acheté ce tuto - 29 août 2012)
" Mais si, ça fonctionne sous IE9 .. j'en viens "
(a acheté ce tuto - 29 août 2012)
" C'est bien gentil tout cela mais je viens de visualisé le résultat sur le site démo:
http://untitled.steven-titren.com
Et il ne fonctionne pas sur Internet Explorer 9 :( "
(auteur de ce tuto - 20 août 2012)
" Salut Aviseurs,
Pour cette formation nous recommandons de posséder les connaissances de bases sur l'ensemble des logiciels (Photoshop, et Dreamweaver dans une moindre mesure) et des langages de programmation (html, css, php/mysql) abordés ainsi que sur le framework (cakephp) utilisé.
Voir le commentaire précédent pour plus de précision. "
(n'a pas acheté ce tuto - 19 août 2012)
" Je suis très intéressé par cette formation.
Mais je ne trouve pas la mention des pré-requis nécessaire pour la suivre.
Quels sont-ils ?
Merci. "
(auteur de ce tuto - 26 juillet 2012)
" @ doctor-pixel
Bonjour,
Le choix a été fait de ne pas traiter les bases de chacun des différents langage de programmation (html, CSS, Php/MySql, Javascript) ou du framework (Cake Php)utilisés ; cette formation considère en effet que celles-ci sont déjà acquises, au même titre d'ailleurs que pour Photoshop ou Dreamweaver.
Sans ce sacrifice initial, il n'aurait clairement pas été possible (en terme d'organisation et de pédagogie) de réaliser une telle formation. Celle-ci aurait probablement nécessité une durée bien plus importante (50h au minimum).
Aussi, les bases de Cake php ne sont, certes, pas abordées. Toutefois, les premières connaissances acquises suffisent (en faisant quelques recherches sur internet ou en suivant une courte formation consacrée au sujet) à comprendre assez facilement le travail qu'effectue le formateur.
Je précise qu'en cas de problème récurrent celui-ci est tout à fait en mesure de vous répondre. De même toutes les ressources vous sont fournies pour vous aider dans votre apprentissage ; servant à la fois de référence et de base de travail.
Concernant le paiement en ligne ; rien de très technique ou de très compliqué sur cette partie, le principe étant de suivre les quelques étapes qui permettent de relier le site au système Paypal. Cela ne demande pas en effet d'y consacrer beaucoup de temps. Le plus difficile ayant été fait précédemment. "
(n'a pas acheté ce tuto - 25 juillet 2012)
" J'ai acheté ce tuto sur le site formation vidéo.
La partie design et intégration sont très intéressantes, même si ça va un peu vite à l'écran.
Par contre la partie développement est décevante, on ne comprend rien, l'auteur parle tout seul en tapant son code et répétant ce qu'il fait sans rien expliquer, aucune pédagogie à ce niveau là. Des fonctions de cakePhp sont utilisées et on comprend pas si on est pas familiarisé avec le framework.
Le paiement en ligne est expédié en 10mn et moi ça m'a déçu, j'avais acheté le tuto un peu pour ça aussi. "