10 ans de Paris Web

UX & code à l’édition 2015 de #parisweb

Ateliers Paris Web 2015 : accessibilité, design numérique & standards ouverts

1 an déjà depuis l’édition 2014 des ateliers Paris Web. Cette année le nord était présent en force représenté par @rbwebdev, @lellexindo, @kevinthenard, @nfroidure,@hteumeuleu, @JbPionnier & moi même.

Voici mon retour sur les 3 ateliers auquels j’ai participé sur les thèmes du design le matin, et une session de code l’après–midi.

speed-test wifi paris web

Pas mal le speed test du wifi

Le prototypage rapide

Notre principal problème dans l'industrie du web est notre héritage de l’ingénierie classique. Wireframes, maquettes & dévelopements s’enchaînent en effet de sylos, sans communication entre les équipes ni tests car :

Changer d’avis coûte cher

Il y a pourtant énormément de valeur à prototyper, cela permet de confronter nos idées avec le monde réel.

Sketchnoting paris web par David leuliette Sketchnoting paris web par David leuliette

Après sa présentation Louis nous a demandé de réaliser le prototype papier de notre prochaine application en suivant la logique de design sprint inspirée par Google.

paris web prototypage papier d’une application

SOSHERO la première application de géolocalisation de superhéro, avec un batsignal intégré

Initiation à la facilitation graphique

Merci Romain, grâce à toi je connais enfin la traduction française pour sketchnoting :)

Cet atelier – avec 100 participants ! – présentait les bases de la falicitation graphique en 3 parties :

  • Dessiner à partir des formes de base : point, trait, carré, triangle & rond.
  • Créer une bibliothèque d’icônes
  • Le jeu du moulin à parole par binôme

Sketchnoting paris web par David leuliette la faliciation graphique 2 Sketchnoting paris web par David leuliette la faliciation graphique 1

Construire sa single page application avec reactJS, PouchDB & Node.js

Frank Rousseau – CTO chez CozyCloud – nous a présenté comment créer une single page application & la partager sur NPM.

Single page application Node.js, reactJS et PouchDB

Voici le html de notre super application de gestionnaire de marque–pages :

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My bookmarks</title>
    <link rel="stylesheet" href="application.css">
  </head>
  <body>
    <div id="app">
      Loading…
    </div>
    <script src="browser-bundle.js"></script>
  </body>
  </html>

browser-bundle.js contient les sources de notre application compilées avec npm start.

Le code JavaScript application.js se décompose de cette façon :

  var React = require('react');

Exemple de notre class pour notre application en ReactJS.

  var App = React.createClass({
    render: function() {
      return (
        <div>
          <h1>My Bookmark Application</h1>
          <BookmarkList bookmarks={this.props.bookmarks}></BookmarkList>
        </div>
      )
    }
  });

Notre composant bookmark.

  var Bookmark = React.createClass({
    onDeleteClicked: function() {
      bookmark =  this.props;
      this.props.removeLine(bookmark);
    },

    render: function() {
      return (
        <div>
          <p class="title">{this.props.title}</p>
          <a href="{this.props.title}">{this.props.link}</a>
          <button onClick={this.onDeleteClicked}>X</button>
        </div>
      )
    }
  });

L’application est injectée dans le DOM.

  React.render(<App bookmarks={bookmarks}></App>, document.getElementById('app'));

Le résultat final est disponible sur npm

J’ai trouvé très interessant l’utilisation de PouchDB – une Base de donnée en JavaSCript – qui permet d’avoir une logique de développement offline first.

Encore merci aux équipes de Paris web pour cette 10ème édition au top ! Vous êtes formidables.

Ateliers Paris Web 2015 : accessibilité, design numérique & standards ouverts