4sh.github.io/reference_superplastic.html at master · alexandreGUY/4sh.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
---
layout: layout_fiches_ref
title: // Superplastic
---

<div class="medium-bloc header-ref-detail">
    <div class="medium-content">
        <img src="img/ref/superplastic/header_superplastic.png" width="846" height="117" border="0" alt="Header reference" class="header-ref-img"/>
        <div class="reference-abstract">
            <span class="reference-title">SUPERPLASTIC</span>
            <span class="reference-subtitle">Un site e-commerce de vente d'accessoires en plastique à destination des professionnels et des particuliers.</span>
        </div>

    </div>
    <div class="medium-bottom">&nbsp;</div>
</div>
<hr/>
<div class="medium-bloc">
    <div class="medium-content">
        <!--<img src="img/ref/cin/screen_cin_1.png" width="416" height="231" border="0" alt="Screen de l'application" class="screen-ref"/>-->
        <div class="text-ref">
            <p>Superplastic a souhaité refaire son site e-commerce afin de le moderniser et de le synchroniser avec son ERP (Mercator). Le rôle de 4SH a été de prendre en compte ses contraintes, de proposer une solution efficace pour la gestion du catalogue et respecter le design du nouveau site, défini par Superplastic dans un wireframe.</p>
        </div>
        <img src="img/ref/superplastic/screen_superplastic_1.png" width="416" height="231" border="0" alt="Screen de l'application" class="screen-ref"/>
    </div>
    <div class="medium-bottom">&nbsp;</div>
</div>

<div class="small-bloc screen-info-techno">
    <div class="small-content">
        <img src="img/ref/superplastic/screen_superplastic_2.png" width="385" height="286" border="0" alt="Screen de l'application" class="screen-ref"/>
    </div>
    <div class="small-bottom">&nbsp;</div>
</div>

<div class="small-bloc info-techno">
    <div class="small-content">
        <ul class="logo-techno-list">
            <li class="logo-techno"><img src="img/logo_techno/java.png"  border="0" alt="Java"/></li>
            <li class="logo-techno"><img src="img/logo_techno/css3.png" border="0" alt="CSS3"/></li>
            <li class="logo-techno"><img src="img/logo_techno/html5.png"  border="0" alt="HTML5"/></li>
            <li class="logo-techno"><img src="img/logo_techno/elastic_search.png"  border="0" alt="Elastic Search"/></li>
            <li class="logo-techno"><img src="img/logo_techno/guice.png"  border="0" alt="Guice"/></li>
        </ul>
        <div class="text-ref">
            <p>La partie serveur est développée avec des technologies Java telles que Freemarker, Restlet, Guice et Guava. ElasticSearch est utilisé, entre autre, pour gérer le catalogue synchronisé et ainsi permettre une recherche efficace des produits. Pour la partie client, nous avons utilisé les technologies de base : HTML, CSS et Javascript. En revanche, le site a été conçu en "Responsive design" à l'aide de CSS 3 afin de proposer une interface plus adaptée sur certains écrans, tels les mobiles.</p>
        </div>
    </div>
    <div class="small-bottom">&nbsp;</div>
</div>
<hr/>
<div class="medium-bloc">
    <div class="medium-content">
        <!--<img src="img/ref/cin/screen_cin_3.png" width="416" height="231" border="0" alt="Screen de l'application" class="screen-ref"/>-->

        <div class="text-ref">
            <p>4SH a su relever les multiples défis de ce projet, à savoir :</p>
            <li>créer le site à partir du wireframe tout en permettant du responsive design</li>
            <li>gérer la synchronisation avec l'ERP Mercator.</li>
            <li>utiliser ElasticSearch</li>
        </div>

        <img src="img/ref/superplastic/screen_superplastic_3.png" width="416" height="231" border="0" alt="Screen de l'application" class="screen-ref"/>
    </div>
    <div class="medium-bottom">&nbsp;</div>
</div>