WEB DESIGN

Alexandre Nunesse | Jason Conard

EPF - 2015

WEB DESIGN

Tools

WEB DESIGN

Content

• Client AngularJS static standalone
• AngularJS dynamic Tweeter client
• Projet WebDesign

Généralités sur le web

Historique

• Web des années 2000 UFO | CowDance
• Avant Java/Php : C C++ - Cgi-bin
• W3C : promotion de la compatibilité du web
• Mosaic, CERN (code d'erreur : CERN.ch)

Web d'aujourd'hui

• Spectra Fishing
• Make Me Pulse
• Alfred

Architecture web

• Sites web statiques: HTML, CSS
• Applications web: serveurs PHP, Java, ASP

Le protocole HTTP

• Methods?

  GET, POST, PUT, DELETE, HEAD, ...

• Status?

  404, 500, ...

Client | Server

State - less | ful

• Stockage des informations clients? sessions, cookies, ...
• Token et TTL

Distribution des performances

Utilisation des ressources côté client

• Scaling, distribution et capacités des serveurs
• Scalabilité verticale ou horizontale
• Délégation de traitement client side

Requirements

Tools

• Editeur: SublimeText
• Votre navigateur web favori
• Un serveur Apache (X|W|L-AMP pour faciliter l'installation)

Technologies du web

HTML

• Inventé en 1989 par Tim Berners-Lee, inspiré du SGML du CERN.
• Language de description formé de balises et d'attributs (comme XML).
• Repose sur une structure en arbre appelée DOM.

CSS

• Language de description orienté style créé en 1992.
• S'accorde avec le HTML et le DOM.
• Gère tout ce qui est lié au design et aux animations.
• Immense nouveautés CSS3 et media queries
• Simplification du code SASS.

Javascript

• Javascript : Language permettant de gérer dynamiquement des intéractions côté client.
• Pas d'architecture propre, il faut bricoler (prototype).
• Librairies: JQuery, D3.JS, NodeJS, RaphaelJS, ... et AngularJS

Responsive Web Design

• Design qui s'adapte à l'appareil sur lequel il est affiché.
• 2 stratégies : un ou plusieurs sites?

  Un site adaptatif, plus de ressources à charger, moins de main d'oeuvre.

  Plusieurs sites, ressources adaptées, plus de main d'oeuvre.

• Un exemple : El Sendero Del Cacao

Bootstrap

• Squelette de projet en 10 secondes.
• Amélioration et uniformisation des formulaires.
• Gestion du responsive design, système de colonnes et de containers.
• Icônes, couleurs, modals, dropdown...
• getbootstrap.com

Exercice : Hello World Bootstrap

Créez une page HTML simple utilisant Bootstrap:

Personnalisez avec vos couleurs en surchargeant celle par défaut de Bootstrap.

AngularJS

AngularJS : Concepts

• Framework MVW
• Two way databinding
• Framework ouvert et modulaire

AngularJS : Conteneurs

• Conteneur principal: le module
• Controlleurs, Services
• Scope liés à la vue
• Héritage

AngularJS : Exemple d'architecture MVC

AngularJS : Directives

• Éléments portables pouvant être liés à des éléments du DOM.
• Éléments conditionnels: ng-if ng-show ng-class
• Boucle: ng-repeat
• Événements: ng-click
• Et de nombreux autres ...

LIVECODING

Tweeter ©

responsive design

• Mobile first | Desktop first
• Bootstrap container

Tweeter API

• [GET] /tweets: récupérer les tweets
• [POST] /tweets: envoyer un tweet
• [POST] /tweets/{tweet_id}/answers: répondre à un tweet
• [GET] /tweets/{tweet_id}/answer: récupérer un tweet et les ses réponses

Tweeter API

Les projets

• 1. Client AngularJS static standalone
• 2. AngularJS dynamic Tweeter client
• 3. Projet WebDesign

1. Client AngularJS static standalone

• Partir du HelloWorld Bootstrap
• Ajouter différentes fonctionnalités:
  • Affichage des utilisateurs
  • Filtrage des utilisateurs par recherche, par genre
  • Affichage de l'utilisateur sélectionné
  • Mode d'affichage: tuile ou liste
  • Tri et limitation de la recherche
• Télécharger la donnée

2. AngularJS dynamic Tweeter client

• Partir du HelloWorld Bootstrap
• Créer votre propre client Tweeter:
  • Envoyer un tweet sur le serveur central
  • Afficher les tweets depuis le serveur central
  • Répondre à un tweet
• Serveur Tweeter

3. Projet WebDesign

• Créer une page avec un design personnalisé
• Utiliser des données issues de webservice pour créer une application custom