nov 26


Bargento 5, le salon dédié à Magento solution d’e-commerce
envoyé par nbs-system. – Regardez plus de vidéos de science.

Bargento reste la référence événementielle autour de Magento et a rassemblé de nouveau une large population de Magento addicts avec pas moins de 610 personnes présentes dont énormément de nouveaux venus.

    Déroulement de la journée

    Dés 7h45, les personnes inscrites se présentaient à l’événement. Si le Bargento 4 avait connu un coup de chaud pour l’entrée des personnes, le Bargento 5 à été synonyme de facilité avec un système de douchette pour la validation des inscrits et une organisation bien rodée. C’est donc à l’heure que les conférences ont pu démarrer.

    9H00 : Keynote de Magento Inc. Pour le Bargento 5 on a pu noter la présence de Roy Rubin et de Michel Goosens le nouveau directeur Europe. Roy Rubin nous a fait la présentation de Magento et de ces derniers chiffres.
    10H15 : Petit déjeuner

    Salle 1

    9H50 : Gabriel Bouhatous nous dresse le bilan de la Magento Academy. Un an après sa création.
    11H30 : Smile. Ne laissez pas Magento seul ! Interconnexion entre Magento et des solutions tierces (ERP)
    14H00 : Aller à l’international avec Magento ! Conférence tenue par Bysoft
    14H50 : NBS System. Utiliser les clouds pour absorber les pics. Conférence technique sur l’hébergement par le spécialiste Français de l’hebergement Magento.
    16H05 : Les méthodes d’interfaçage de Magento avec le S.I. De votre entreprise. Conférence tenue par Adfab.

    Salle 2

    9h50 : Cette conférence à malheureusement été annulée.
    11H00 : FIA-NET fait le tour des questions autour des fraudes à la carte bancaire sur internet.
    11H45 : Maison du logiciel, Gestion des achats, stocks et logistique intégrée à Magento. L’éditeur d’extensions Magento nous présente son Embeded ERP avec le retour client Motoblouz.
    14H00 : Profileo, Ventes privées et ventes flash en pratique avec Magento.
    14H50 : Ysance. Témoignage client.
    16H05 : Email vision dans une conférence sur l’interfaçage entre la solution Emailvision et Magento pour la gestion des campagnes d’email marketing de fidélisation.

    Salle 3

    9h50 : Secuvad. Vendre à l’international sans risque de fraude.
    11H00 : Cybercité. Les spécificités du référencement Magento
    11H45 : Zend. Haute disponibilité et scalabilité pour les sites e-commerce en Magento. Zeev Surasky un des co-architecte de PHP nous faisait l’honneur d’être présent lors de cette conférence.

    Ateliers et tables rondes :

    L’après midi à également été ponctuée de table ronde et d’ateliers autour de Magento et du e-commerce :

    • Table ronde autour du M-Commerce
    • Atelier découverte de Magento par Mathieu (Magento Academy) Bouchot et Sylvain Kocet (Pyksel/Fragento)
    • Atelier de conseils pour les e-marchands par Jérémy Benmoussa
    • Paypal & Magento par la société Paypal

    Du côté des stands :

    Visibilité de l’évènement :

    Nombre de résultats dans les recherches Google : 7 280 en exact match « Bargento 5 »
    Visites sur le site depuis le 1er juin : ~11 825

    Invités :

    Magento Inc, éditeur de la solution.

    Zeev Suraski, légende du web (pour un public averti tout de même…), co-créateur de PHP et fondateur de Zend qui est la base de Magento.

    Au niveau organisation :

    • Quatre organisateurs
    • Huit membres du Staff
    • Dix Hôtesses

    Remerciements

    Les organisateurs :

    Philippe Humeau (NBS System)
    Gabriel Bouhatous (Magento Academy)
    Nicolas Trossat (Boutik Circus)
    et Xavier Bonnaud (Profileo)

    souhaitent également remercier la team étendue qui est venue en renfort avec Nicolas Fabre de la société Groupe Reflect, Sylvain « Pyksel » Kocet (Pyksel, Fragento), Matthieu Bouchot (Magento Academy), les Bargento Girls.

    Merci à Kevin G. ami de longue date de NBS System, qui nous a aidé gracieusement, pour le plaisir, le jour J.

    Et surtout, merci à vous, exposants, sponsors, visiteurs et curieux, membres de la communauté, vous faites le succès de ce type d’évènement par votre présence.

    Donnez votre avis !

    écrit par Philippe Humeau \\ tags:

    nov 24

    Introduction : HTML5 et E-commerce nʼest ce pas trop tôt ?

    Non ! Même si le W3C est toujours en recherche sur ce nouveau langage, beaucoup de balises comme <header>, <nav> et <aside> sont pratiquement sûres d’être intégrées dans les nouvelles spécifications de HTML5. De plus, grâce à un petit script, le passage est transparent sur tous les navigateurs, même IE6 (oui, vous avez bien lu :) )

    Il est donc temps de préparer nos boutiques web au futur. Petit retour en arrière, cela fait 10 ans que le HTML nʼa pas évolué et propose toujours la
    même structure et les mêmes balises. Les développeurs web recherchent continuellement de nouvelles fonctionnalités par le biais de Javascripts pour parer aux limites de ce langage vieillissant et qui ne correspond plus aux besoins actuels.

    HTML5 est donc lʼoccasion dʼouvrir nos sites à de nouvelles fonctionnalités, de nouveaux supports (mobiles notamment) et à les rendre plus sémantiques pour nos robots adorés de chez Google.

    Pourquoi continuer à hésiter ?

    Si vous êtes sur Magento et souhaitez passer en HTML5, je ne peux que vous conseiller de le faire. Oui, mais comment ? Cette article mettra en avant les différentes étapes clés pour passer votre boutique en HTML5.
    Bonne lecture !

    Travaux pratiques : Magento passe au niveau supérieur !


    Tous les fichiers cités ci-dessous se trouve normalement dans votre thème «app/design/frontend/THEME/default/»

    Préliminaire

    Préparé la tête (<head>)

    La toute première chose à faire est dʼouvrir le fichier «page/html/head.phtml», vous
    trouverez ici le Doctype de votre site. Modifiez le comme ceci :

    On remplace  
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    par
    
    <!DOCTYPE html>

    Et oui, le Doctype dʼHTML5 est tout petit. Mais ce nʼest pas la taille qui compte me direz-vous :) En effet, grâce à ce bout de code vous allez pouvoir utiliser toutes les nouvelles balises HTML5.

    IE encore et toujours.

    Evidemment, les balises HTML5 ne sont pas reconnues sur les anciens navigateurs. Il nous suffit donc simplement dʼajouter 2 choses :

    Dans «head.phtml», ce petit script : faire comprendre à IE quʼil existe de nouvelles balises dans le DOM.

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    En haut de votre feuille de style : faire comprendre à IE que les nouvelles balises sont de type Block.

    /*------------------------------------*/
    /*- HTML5 -*/
    /*------------------------------------*/
    header, nav, footer, figure, figcaption, section, article, aside, hgroup, time { display:block; }

    Nous y voilà ! Votre Magento est prêt pour le HTML5. Il ne reste plus quʼà changer les balises et y ajouter de nouvelles fonctionnalités.

    On continue ? C’ est parti !

    Home page et bloc récurrent

    Le header

    Ouvrez le fichier «page/html/header.phtml» et modifiez le afin dʼobtenir quelque chose de ce type :

    <section>
     <header>
      <?php if ($this->getIsHomePage()):?>
      <h1><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this>getUrl('') ? title="<?php echo $this->getLogoAlt() ?>"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
      <?php else:?>
      <a href="<?php echo $this->getUrl('') ?>" title="<? php echo $this->getLogoAlt() ?>" <strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>
      <?php endif?>
     <section>
      <?php echo $this->getChildHtml('topSearch') ?>
      <p><?php echo $this->getWelcome()?></p>
      <?php echo $this->getChildHtml('topLinks') ?>
      <?php echo $this->getChildHtml('store_language') ?>
     </section>
     <?php echo $this->getChildHtml('topContainer'); ?>
     </header>
    </section>
    <?php echo $this->getChildHtml('topMenu') ?>

    Il ne faut pas confondre <section> et <div>. La section peut être représentée comme la mère des divisions. Ici la section «quick-access» est découpée en plusieurs parties (division) top search, welcome message et top link.

    La balise header indique aux navigateurs que le bloc est important et représente la tête de votre document.

    Astuce : vous pouvez utiliser la balises plusieurs fois dans un fichier cependant il faut quʼelle soit unique par section.

    La navigation

    Utilisation de la balise <nav> dans le fichier «catalog/navigation/top.phtml». On signifie au navigateur que cette liste représente une navigation (ensemble de liens qui relient vos pages). Comme pour le header, cette balise nʼest pas seulement destinée à la navigation principale, vous pouvez lʼutiliser à chaque fois que vous avez une navigation.

    <?php $_menu = $this->renderCategoriesMenuHtml(0,'leveltop') ?>
    <?php if($_menu): ?>
    <nav>
    <ul id="nav">
    <?php echo $_menu ?>
    </ul>
    <nav>
    <?php endif ?>

    Le footer

    Ajout de la balise footer dans «page/html/footer.html».

    Petite subtilité tout de même, certains lʼauront remarqué : jʼai supprimé la balise <address> en natif et je lʼai remplacé par une balise <p>. Pourquoi ? Tout dʼabord, sachez que la balise <address> nʼest pas du HTML5 mais du HTML3 implémenté depuis 1993. Ensuite, Magento utilise à mauvais escient cette balise car c’est un «faux amis».

    En effet, address signifie la personne concernée par le contenu comme par exemple un auteur pour un article et non un copyright ou lʼadresse postale de votre boutique.
    Pour mieux comprendre le tag <address> : http://html5doctor.com/the-addresselement/

    <section>
    <footer>
    <?php echo $this->getChildHtml() ?>
    <p><?php echo $this->__('Help Us to Keep Magento Healthy') ?> - <a href="http://www.magentocommerce.com/bug-tracking" onclick="this.target='_blank'"><strong><?php echo $this->__('Report All Bugs') ?></strong></a> <?php echo $this->__('(ver. %s)', Mage::getVersion()) ?></p>
    <p><?php echo $this->getCopyright() ?></p>
    </footer>
    </div>

    Publicités ou offres promotionnelles en home page

    Si vous avez des offres promotionnelles sur la page dʼaccueil sous forme dʼimage, voici
    comment lʼécrire en HTML5.

    <figure>
      <img src="/promotion_noel.jpg" alt="Réduction de Noèl">
      <figcaption>C’est déjà Noël, 30% de réduction sur tous nos produits</figcaption>
    </figure>

    Figure représente une image, un graphe, une illustration, etc… Figcaption quand à lui représente la légende de lʼimage. Un texte plus détaillé que lʼattribut «alt» de lʼimage. Peut contenir des liens ou des informations en gras.

    Page catégories et produits

    Catégorie et Sidebar

    Voici une structure type pour vos pages catégories :

    <section class=‘content’> 
      <hgroup> 
      <h1>Maroquinerie</h1> 
      <h2>Sac</h2> 
    </hgroup> 
    <section class=‘list-products’> 
      <div class=‘pager’>13 articles par page</div> 
      <div class=‘products’>...</div> 
    </section>
    
    <section>
    <aside> 
     <nav>
      <strong>Autres Catégories</strong> 
      <ul> 
        <li><a href=‘ceinture.html’ title=’Ceinture’>Ceinture</a></li> 
        <li><a href=‘chaussure.html’ title=‘Chaussure’>Chaussure</a></li> 
      </ul> 
     </nav>
    </aside>

    Vous retrouvez ici deux nouvelles balises :

    • aside : Signifie une zone complémentaire au contenu. Utile pour une sidebar dans les pages catégories.
    • hgroup : Comme son nom lʼindique, cʼest un ensemble de titre. Ici, elle est utilisée pour la catégorie principale et secondaire.

    Listing produit

    La partie la plus complexe et la plus intéressante : la liste de produits. Voici un bout de code magique à garder en tête :)

    <article>
    <header>
      <h1>Pull Rouge</h1>
    </header>
    <figure>
      <img src="/pull.jpg" alt="Pull rouge">
      <figcaption>Pull en laine pour vos soirée d’hiver</figcaption>
    </figure>
    <footer>
      <p class=‘stock’>Disponible</p>
      <p class=‘price’>34,40€</p>
    </footer>
    </article>

    La balise la plus mal comprise de toutes est la balise <article>. Le W3C la caractérise comme une pièce indépendante du contenu. Astuce : Une façon simple de savoir sʼil faut lʼutiliser ou pas : demandez vous si cette section serait utilisée dans un flux RSS ?

    Si oui, comme un article de blog ou les produits dʼune boutique, alors utilisez-la. Vous pouvez voir ici une utilisation intelligente du <header> et du <footer>. Pour chaque bloc de produit, on signifie au navigateur un en-tête (header) contenant le nom et un pied (footer) comprenant la disponibilité et le prix.

    Page produit

    Concernant la partie information dʼun produit :

    <details>
    <summary>Description</summary>
    <p>Sac en cuir drapé avec une poche zippée</p>
    <summary>Livraison</summary>
    <p>Sous 2 à 5 jours</p>
    </details>

    La balise <details> représente un détail, l’approfondissement d’un contenu dans une page. Idéal pour la description dʼun produit ou de tout autre attribut. La balise <summary> est l’en-tête du détail.

    Sur certains navigateurs, ce code permettra de faire un effet en accordéon sans besoin de javascript… incroyable mais vrai !

    Aller encore plus loin avec les micros Data

    Vous allez peut-me dire que cela est tiré par les cheveux, mais peut-être quʼun jour nous développerons tous nos sites de cette manière. Lʼattribut itemscop transforme le paragraphe <p> en un objet MicroData. Ensuite tous les éléments quʼil contient peuvent devenir plus sémantiques. On utilise alors itemprop pour décrire un type dʼélément : color, size, etc…
    <p itemprop= »description » itemscope>Cette jolie robe de taille <span itemprop= »size »>38</span> et de couleur <span itemprop= »color »>rouge</span> sera parfaite pour l’été.</p>
    Imaginez maintenant les possibilités offertes par ces balises pour Google sur les mots clés : «dress color red size 36»

     » Sans oublier
    Et oui, je nʼallais pas finir mon article sans citer les balises phares du HTML5 : <video> et <audio>.

    <!-- VIDEO -->
    <video poster="/2010/11/maroquinerie/image.jpg" width="352" height="264" controls preload>
     <source src="maroquinerie/sac.mp4"></source>
     <source src="maroquinerie/sac.ogv"></source>
    </video>
    <!-- AUDIO -->
    <audio controls preload>
     <source src="sac/temoignage.mp3"></source>
     <source src="sac/temoignage.ogg"></source>
    </audio>

    Ces balises nous permettent dʼimplémenter des médias sans besoin de javascript ou de flash. Vous avez remarqué que jʼutilise plusieurs sources par balise, cela permet de rester compatible avec tous les supports. Et oui tout le monde ne met pas à jour ces codecs :)

    Astuce : Voici un super script fournit par nos amis de html5media sous licence MIT [LIEN https://github.com/etianen/html5media/] : Vous serez compatible avec lʼensemble des navigateurs. Si la personne est sous IE7 et ne comprend pas la balise <video>, le script se chargera de la remplacer par un lecteur flash. On arrête pas le progrès !

    Conclusion : Un meilleur référencement et lʼouverture dʼune porte sur de nouvelles fonctionnalités.

    Passer sa boutique Magento en HTML5 nʼest pas forcément une chose aisée mais avec un peu de temps et des personnes compétentes connaissant bien ce langage, cela peut devenir un véritable jeux dʼenfant. En tout cas jʼespère quʼà travers ces petits exemples, je vous aurai donné envie de passer à la vitesse supérieure. En effet, comme vous avez pu le constater, les nouvelles possibilités offertes par ce langage sont incroyables : média,
    mobile, sémantique, etc…

    En conclusion, je me permets de mettre lʼaccent sur le référencement. On sait tous que les e-commerçants sont à la course au meilleur positionnement sur Google. Avec HTML5 vos pages deviennent plus sémantiques et donc compréhensibles par les robots de recherche.

    Au final, si la construction des pages a bien été effectué en amont, vous gagnerez quoi quʼil arrive (à terme) en référencement naturel. Alors à quand votre passage HTML5 ?

    Lien à ne pas manquer sur le HTML5 :

    Par Aymeric Aitamer, lead developper de l’agence Dn’D

    écrit par Aymeric \\ tags: , ,

    nov 16

    logo swissgento HD web

    Swissgento, 1er salon dédié à la plateforme MAGENTO et au e-commerce, le 22 Novembre 2010 à Genève

    Vous n’avez pas pu assister au Bargento 5 ? Séance de rattrapage avec le salon Swissgento ! Dernier événement francophone de l’année …

    BY Connect est heureuse de vous annoncer la première édition du plus grand rassemblement franco suisse autour de la solution e-commerce MAGENTO : le SWISSGENTO, qui se tiendra le lundi 22 Novembre 2010 prochain au centre des conventions de l’hôtel Ramada encore de Genève (La Praille).

    Entrée gratuite de 9h à 18h, avec un espace stands et 14 conférences.

    Liste des exposants, programme complet des conférences et inscriptions visiteurs gratuites en ligne sur le site www.swissgento.com

    Un salon local

    Venez  rencontrer  au travers de conférences, et de stands, les acteurs majeurs Suisses Romands et de France frontalière spécialisés sur la plateforme Magento, ses extensions ou plus généralement dans le e-commerce !

    Des entreprises à votre écoute

    ALTIMAX                          MAGENTO INC                                SMILE
    BEEZUP                              MAGENTO ACADEMY                  VIRTUA
    COBWEB                             MAISON DU LOGICIEL                ZEND TECHNOLOGIES
    CROSS AGENCY              MIURA CONSEIL                            INTUITIV TECHNOLOGY
    CS2                                       NBS
    DIGILINX                          NET DESIGN
    DOTBASE                           LA POSTE SUISSE (POSTFINANCE)
    DREDD                                 PYKSEL / CAMPTOCAMP
    EMAILVISION                 SECUVAD

    14 conférences gratuites, un programme riche et varié

    Pour explorer Magento et les thématiques principales du e-commerce, découvrir des cas concrets, des expertises métiers, des témoignages clients :

    • CROSS AGENCY : E-Commerce mobile & réseaux sociaux, quelles opportunités avec Magento ?
    • BEEZUP : Booster votre CA en exportant vos produits sur les réseaux
    • SECUVAD : Fraude en ligne : faut-il avoir peur de vendre à l’international ?
    • EMAILVISION : Intégration entre Emailvision et Magento pour gérer vos campagnes d’email marketing de fidélisation.
    • DREDD : SEO avec Magento : Optimisation et astuces.
    • MIURA CONSEIL: Vendre 34 000 produits en 11 langues avec Magento.
    • NET DESIGN : Réussir son projet e-Business en adaptant MAGENTO à ses besoins.
    • VIRTUA : Performances Magento : Solutions efficaces et accessibles
    • PYKSEL / CAMPTOCAMP : Connecteur OpenERP / Magento : un cas réel.
    • SMILE : Comment faire de Magento sa plateforme e-commerce.
    • ZEND : Haute disponibilité et scalabilité pour les sites e-commerce en Magento.
    • « MEET MAGENTO ! » : Présentation des différents programmes de partenariats avec Magento. Meeting privé réservé aux prestataires, agences web … Par Michel Goossens (VP Europe MAGENTO INC)
    • QUADRA INFORMATIQUE : Méthodes d’interfaçage de Magento avec un système d’information externe
    • HERVE BLOCH : Conférence privée de clôture autour des « 7 Péchés Capitaux du Marketing Digital »

    Informations Pratiques

    Le salon se tiendra le lundi 22 Novembre 2010 au centre des conventions de la Praille (Hôtel Ramada Encore de Genève), 10/12 route des jeunes à Carouge.

    Entrée gratuite de 9 h à 18 h. Inscriptions en ligne sur www.swissgento.com

    écrit par Philippe Humeau \\ tags: ,