Page 1
[ Intégrateur ]
SOMMAIRE
Grandadam Emmanuel - LCProd.net
Prestashop
Architecture WebConcepts fondamentaux
Installer et configurer PrestashopComprendre le fonctionnement
Utiliser les thèmes (Smarty, JQuery)Les bonnes pratiques (Référencement).
Personnalisation (Module)
Page 3
Installer et configurer Prestashop
Architecture WebClient / Serveur
Client Serveur
Requêtehttp://serveur/page.html
RéponseHTML/CSS
3
Page 4
Installer et configurer Prestashop
Architecture WebTechnologies
Client Serveur
BDD
PHP
PHP(HTML/CSS)
Javascript(AJAX/JQuery)
4
Page 5
Installer et configurer Prestashop
Architecture WebSolutions
• Apache (Serveur Web)
• PHP (Programmation)
• MySQL (Base de données)
Serveur
BDD
PHP
5
Page 6
Installer et configurer Prestashop
Architecture WebOutils
• En ligne = Serveur de production
• En Local = Serveur de test
- EasyPHP
- WAMP/MAMP
6
Page 7
Concepts fondamentaux
Page 8
Concepts fondamentaux
Normalisation du W3CLangages :
• HTML
• XML
• XHTML
• HTML5
• CSS
Normalisation
• Affichages différents selon les navigateurs‣ Tests ACID (http://fr.wikipedia.org/wiki/Acid3)
8
Page 9
Concepts fondamentaux
Structure d'un CMSSéparer le fond de la forme
• Les données = la base de données
• Les affichages = les thèmes
Structurer les contenus (Sémantique)
• Expliquer les objets (Titre, Contenu, Description...)
Organiser les contenus
• Catégories, Mots clés...
9
Page 10
Concepts fondamentaux
Architecture MVCModèles
• Traitement des données,
• Gestion de la BDD et assure l'intégrité
Vues
• Interfaces utilisateurs
• Affiche les résultats et gère les actions
Contrôleurs
• Traite les demandes
• Invoque les vues
10
Page 11
Installer et configurer Prestashop
Page 12
Installer Prestashop
Préparer l'installationFichiers
• Télécharger les fichiers‣ Ouvrir l'archive
‣ Copier les fichiers sur le serveur Web (www)
Base de données
• PhpMyAdmin‣ Créer une base (vide)
12
Page 13
Installer Prestashop
Installer PrestashopAccéder au serveur Web
- http://127.0.0.1
Lancer l'auto-installateur
13
Page 14
Installer Prestashop
Configurer PrestashopLa boutique
• Face visible par l'internaute
L'interface d'administration
• Outils d'administration
Configuration pour le développement
• Gestion du cache
• Gestion de la compilation des templates Smarty
14
Page 15
Comprendre le fonctionnement
Page 16
Comprendre le fonctionnement
Le panneau d'administrationCatalogue : Les produits, les catégories, les fournisseurs...
Commandes : Les Factures, suivi, avoirs, retours...
Clients : Compte clients, SAV, Paniers...
Promotions : Les codes, les règles...
Transports : Calculs des frais, gestion des livraisons...
Localisation : Langues et traductions...
Modules : Fonctionnalités, affichages...
Préférences : Thèmes, CMS, configuration...
Paramètres avancés : Base de données, serveurs...
Administration : Comptes utilisateur, accès...
Stats : Statistiques16
Page 17
Comprendre le fonctionnement
Structure des pagesGestion des blocs
Gestion des modules
Gestion des Hook (crochets)
"Live Edit"
17
Page 18
Comprendre le fonctionnement
Structure des fichiers
18
Page 19
Utiliser les thèmes
Page 20
Utiliser les thèmes
Fonctionnement d'un thèmeStructure d'un thème
• Fichier tpl (template)
Intégration avec Smarty
• Moteur de rendu
• Compilation et cache
Utilisation de Javascript
• Bibliothèque JQuery
20
Page 21
Utiliser les thèmes
Modifier un thèmeEditeurs
• Editeur HTML/CSS‣ Notepad++ (pc)
‣ Textmate (mac)
‣ CSSEdit
‣ ..
• Dreamweaver
21
Page 22
Utiliser les thèmes
SmartyMoteur de rendu
• Séparer l'application des vues
Gestion du cache
• Paramètres avancés > Performances
Console Smarty
• Paramètres avancés > Performances
22
Page 23
Utiliser les thèmes
Smarty : Le langageLes variables utiles
{$base_dir} {$img_ps_dir} {$img_dir} {$css_dir} {$js_dir}{$tpl_dir}{$modules_dir}{$shop_name}{$cart}
23
Page 24
Utiliser les thèmes
Smarty : Le langageStructure de boucles
{foreach from=$items key=myId item=i} <li> <a href="item.php?id={$myId}">{$i.no}:{$i.label}</a> </li>{/foreach}
24
Page 25
Utiliser les thèmes
Smarty : Le langageStructure décisionnelles
{if $coffee eq ‘good'} {* Stagiaires heureux *}{else} {* Stagiaires malheureux *}{/if}
25
Page 26
Utiliser les thèmes
Smarty : Le langageLes littéraux
{literal} <script type="text/javascript"> ...</script>{/literal}
Variable $smarty
{$smarty.get.variable}{$smarty.post.variable}
26
Page 27
Utiliser les thèmes
Javascript : JQueryFramework Javascript
• Gestion des événements
• Effets et animations
• Manipulations CSS
• Requêtes asynchrone (AJAX)
• Plugins
27
Page 28
Utiliser les thèmes
Javascript : JQueryDOM : Document Object Model
• Structure logique du document‣ Le DOM doit être chargé pour pouvoir intervenir sur la page.
$(function(){ ...});
28
Page 29
Utiliser les thèmes
Javascript : JQueryGestion des écouteurs
$('#ex1').click(function(){ alert("Bouton 1");})
29
Page 30
Utiliser les thèmes
Javascript : JQueryGestion des effets
$('#btHide').click(function() $('#logo').hide(500);})
.show(500);
.fadeIn(500);
...
30
Page 31
Utiliser les thèmes
Javascript : JQueryGestion des animations
$('#logo1').css('padding-left', 200); $('#logo1').animate({ 'padding-left': "+=250", 'opacity' : 0.25}, 600, function(){ alert('terminé !');});
31
Page 32
Utiliser les thèmes
Javascript : JQueryGestion des requêtes asynchrone
$('#btAjax').click(function(e){ $.ajax({ url : '4.1a.html', type : 'GET', success : function(rep) { alert(rep); } });})
32
Page 33
Les bonnes pratiques
Page 34
Les bonnes pratiques
Les imagesFormat
• PNG
• JPG
Résolution
• 72dpi
- Le cas des mobiles :‣ iPhone 4/5 : 326 dpi
‣ iPad 4 : 264dpi
34
Page 35
Les bonnes pratiques
Les CSSFramework CSS
- BluePrint
- Yahoo YUI
- YAML
- Variable Grid System (Prestashop)
35
Page 36
Les bonnes pratiques
Le référencementSEO : Optimisation pour les moteurs de recherche
- Rendre le contenu du site visible pour les moteurs : Gratuit !
• Préférences > SEO & URLs‣ Site : Titre des pages
‣ Site : URL simplifiée : Ré-écriture d'URL (URL Rewriting)
‣ Site : Fichier robots.txt
‣ Produits : Balises Meta
‣ Produits : Utilisation de <strong>
‣ Le plus important : le contenu !
36
Page 37
Les bonnes pratiques
Le référencementOutils Google pour les webmasters
• https://www.google.com/webmasters/tools
Module 'Google sitemap'
- Plan du site
• Configurer > Mettre à jour le fichier sitemaphttp://monsite.fr/sitemap.xml
37
Page 38
Les bonnes pratiques
Les statistiquesPrestashop
• Statistiques‣ Visites, CA, Produits...
Google Analytics
• Analyse d'audience‣ Visites, Visiteurs uniques, Durée de visite, Taux de rebond...
Module 'Google Analytics'
• Code de suivi / Compte GA
38
Page 40
Personnalisation
Modifier l'apparenceManipulation CSS
• Comprendre quel style modifier :
- Developer Tools de Google Chrome / Safari
Modifier l'apparence d'un module par surcharge CSS
• Copier le fichier CSS du module vers le thème
/themes/montheme/css/modules/nom_module/nom_module.css
40
Page 41
http://creativecommons.org/licenses/by-nc-nd/3.0/deed.fr
Grandadam Emmanuel - LCProd.net
Merci de votre attentionVous êtes libres : de reproduire, distribuer et communiquer cette création au public selon les conditions suivantes :
Paternité. Vous devez citer le nom de l'auteur original de la manière indiquée par l'auteur de l'oeuvre ou le titulaire des droits qui vous confère cette autorisation (mais pas d'une manière qui suggérerait qu'ils vous soutiennent ou approuvent votre utilisation de l'oeuvre).
Pas d'Utilisation Commerciale. Vous n'avez pas le droit d'utiliser cette création à des fins commerciales.
Pas de Modification. Vous n'avez pas le droit de modifier, de transformer ou d'adapter cette création.