Top Banner
[ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre le fonctionnement Utiliser les thèmes (Smarty, JQuery) Les bonnes pratiques (Référencement). Personnalisation (Module)
41

[ Intégrateur ] Prestashop [ Intégrateur ] SOMMAIRE Grandadam Emmanuel - LCProd.net Prestashop Architecture Web Concepts fondamentaux Installer et configurer Prestashop Comprendre

Jul 13, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
  • [ 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)

    http://lcprod.nethttp://lcprod.net

  • Architecture Web

  • Installer et configurer Prestashop

    Architecture WebClient / Serveur

    Client Serveur

    Requêtehttp://serveur/page.html

    RéponseHTML/CSS

    3

  • Installer et configurer Prestashop

    Architecture WebTechnologies

    Client Serveur

    BDD

    PHP

    PHP(HTML/CSS)

    Javascript(AJAX/JQuery)

    4

  • Installer et configurer Prestashop

    Architecture WebSolutions

    • Apache (Serveur Web)

    • PHP (Programmation)

    • MySQL (Base de données)

    Serveur

    BDD

    PHP

    5

  • Installer et configurer Prestashop

    Architecture WebOutils

    • En ligne = Serveur de production• En Local = Serveur de test

    - EasyPHP- WAMP/MAMP

    6

  • Concepts fondamentaux

  • 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

  • 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

  • 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

  • Installer et configurer Prestashop

  • 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

  • Installer Prestashop

    Installer PrestashopAccéder au serveur Web

    - http://127.0.0.1

    Lancer l'auto-installateur

    13

  • 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

  • Comprendre le fonctionnement

  • 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

  • Comprendre le fonctionnement

    Structure des pagesGestion des blocs

    Gestion des modules

    Gestion des Hook (crochets)

    "Live Edit"

    17

  • Comprendre le fonctionnement

    Structure des fichiers

    18

  • Utiliser les thèmes

  • 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

  • Utiliser les thèmes

    Modifier un thèmeEditeurs

    • Editeur HTML/CSS‣ Notepad++ (pc)‣ Textmate (mac)‣ CSSEdit‣ ..

    • Dreamweaver

    21

  • 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

    http://www.smarty.net/http://www.smarty.net/http://www.smarty.net/http://www.smarty.net/http://www.smarty.net/http://www.smarty.net/http://www.smarty.net/http://www.smarty.net/

  • 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

  • Utiliser les thèmes

    Smarty : Le langageStructure de boucles

    {foreach from=$items key=myId item=i} {$i.no}:{$i.label} {/foreach}

    24

  • Utiliser les thèmes

    Smarty : Le langageStructure décisionnelles

    {if $coffee eq ‘good'} {* Stagiaires heureux *}{else} {* Stagiaires malheureux *}{/if}

    25

  • Utiliser les thèmes

    Smarty : Le langageLes littéraux

    {literal} ...{/literal}

    Variable $smarty

    {$smarty.get.variable}{$smarty.post.variable}

    26

  • Utiliser les thèmes

    Javascript : JQueryFramework Javascript

    • Gestion des événements• Effets et animations• Manipulations CSS• Requêtes asynchrone (AJAX)• Plugins

    27

    http://jquery.com/http://jquery.com/http://jquery.com/http://jquery.com/http://jquery.com/http://jquery.com/http://jquery.com/http://jquery.com/http://jquery.com/http://jquery.com/http://jquery.com/http://jquery.com/

  • 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

  • Utiliser les thèmes

    Javascript : JQueryGestion des écouteurs

    $('#ex1').click(function(){ alert("Bouton 1");})

    29

  • Utiliser les thèmes

    Javascript : JQueryGestion des effets

    $('#btHide').click(function() $('#logo').hide(500);})

    .show(500);

    .fadeIn(500);

    ...

    30

  • 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

  • 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

  • Les bonnes pratiques

  • Les bonnes pratiques

    Les imagesFormat

    • PNG• JPG

    Résolution

    • 72dpi

    - Le cas des mobiles :‣ iPhone 4/5 : 326 dpi‣ iPad 4 : 264dpi

    34

  • Les bonnes pratiques

    Les CSSFramework CSS

    - BluePrint- Yahoo YUI- YAML- Variable Grid System (Prestashop)

    35

    http://code.google.com/p/blueprintcsshttp://code.google.com/p/blueprintcsshttp://developer.yahoo.com/yuihttp://developer.yahoo.com/yuihttp://www.yaml.de/enhttp://www.yaml.de/enhttp://grids.heroku.com/http://grids.heroku.com/

  • 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 ‣ Le plus important : le contenu !

    36

  • 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

    https://www.google.com/webmasters/toolshttps://www.google.com/webmasters/tools

  • 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

    http://www.google.com/analyticshttp://www.google.com/analytics

  • Personnalisation

  • 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

  • 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.

    http://creativecommons.org/licenses/by-nc-nd/3.0/deed.frhttp://creativecommons.org/licenses/by-nc-nd/3.0/deed.frhttp://lcprod.nethttp://lcprod.net