SITES ET APPLICATIONS INTERNET. Cours d IHM - CSII 1ère année EPSI Bordeaux - Cours n 3

Transcription

1 SITES ET APPLICATIONS INTERNET Cours d IHM - CSII 1ère année EPSI Bordeaux - Cours n 3

2 INTERNET le réseau des réseau : un ensemble de serveur interconnectés. au départ réservé aux universitaires, il s est ouvert au grand public vers offre une multitude de services (mail, VOIP, télévision, etc.) et notamment le world wide web (www), un ensemble de documents interconnectés par liens hypertexte.

3 SPÉCIFICITÉS L ergonomie est liée au système de liens, qui est au cœur du principe de navigation sur Internet. L architecture d internet est basée sur le modèle client / serveur, ce qui permet de s affranchir d une partie des contraintes des applications de bureau (contre des contraintes différentes). Les applications Internet sont en mode connecté, ce qui permet d enrichir l expérience utilisateurs avec des données externes (webservices, widgets).

4 LIMITATIONS Bande passante et temps de téléchargement : de moins en moins vrai avec la généralisation des connexions haut-débit, mais reste stratégique sur l expérience utilisateur et les coûts d hébergement. Le référencement : les solutions à base de requêtes asynchrones améliorent l ergonomie et le temps de réponse, mais ne permettent pas un bon référencement. C est un trade off à prendre en compte (ex : youtube vs Gmail) Le navigateur : les sites doivent être compatibles avec les différents navigateurs du marché (Safari, IE, Firefox, etc.), et ne pas entraver leur fonctionnement standard (ex : bouton back et requêtes asynchrones).

5 TYPOLOGIE On peut distinguer trois grand types de sites internet : les sites institutionnels les sites de commerce en ligne les web-app

6 SITES INSTITUTIONNELS le but est d informer sur une société, une organisation. généralement composés d un ensemble de pages statiques et d un fil d actualité (blog). Page d accueil de france.fr Page d accueil de capgemini.com

7 SITES DE VENTE EN LIGNE l objet de ce type de site est de vendre des produits soit en VPC, soit en dé-matérialisé (téléchargement). Page d accueil d Amazon Page d accueil de merchnow.com Page d accueil de Style Factory

8 Podio APPLICATIONS INTERNET (WEBAPPS) Version en ligne de l application de bureau. Couvre de nombreux domaines : clients mail (Gmail, Hotmail, etc), Grooveshark outils de gestion d entreprise (podio, basecamp), lecteur multimedia (deezer, youtube, grooveshark), etc.

9 STRUCTURE D UNE PAGE Entête : rappel du titre / logo, champ de recherche, menu Contenu : partie centrale du site, c est là que ce trouve l information principale Side-bar : colonne(s) situés à droite ou à gauche du contenu, permettent d enrichir l expérience grâce à des widgets, de la navigation contextuelle... Footer : rappel du menu principal pour les pages longues (avec défilement), mentions légales.

10 EXEMPLE DE DÉCOUPAGE (SITE EDITORIAL) Entête + Menu Articles à la une Pub Navigation secondaire (contextuelle) Pub Nouveaux articles Activité du site (dernières 24h) Liens vers dossiers, reportages, réseaux sociaux (Facebook / twitter)

11 RÉSOLUTION Parc d écrans hétérogène : du netbook 11 qui affiche en 1024x768px, au téléviseur 42 du salon qui affiche en full HD : 1920x1080px. Deux solutions : Sites à largeur fluide (en perte de vitesse), Convergence des largeurs fixes vers des grilles de 960 pixels (Cf.

12 COMPOSANTS PRIMITIFS Le composant de base est un conteneur rectangulaire (balises div et span ), on les imbrique pour concevoir la page. On retrouve sensiblement les mêmes composants que sur les applications de bureau, soit utilisables directement (ex : les éléments de formulaire), soit recréés grâce au système de liens (ex : onglets). Le HTML 5 enrichit le panel de composants disponibles avec de nouvelles primitives, ex : balises video, canvas, etc. qui étaient auparavant disponibles via des plugins propriétaires (flash, silverlight, etc.). Globalement, on note une convergence entre les applications internet et les applications de bureau (RIA / RDA).

13 WIDGETS Un widget est un élément intégrable sur un site internet, qui récupère ses données depuis un autre site internet. Avec le web 2.0, on voit une prolifération des widgets sociaux (bouton like facebook, bouton retweet this, facebook connect, etc.) Facebook like box Share this (social bookmarking) Widget Météo

14 QUELQUES ERREURS FRÉQUENTES Multiplier les polices et utiliser des polices non standard / peu lisibles (ex : corps de texte en comic sans ), Page pré-home ( cliquez ici pour entrer ) et/ou site ouvert en plein écran dans une nouvelle fenêtre, Musique de fond, effets sonores, Moteur de recherche non fonctionnel (ne renvoie aucun résultat pour 99% des requêtes), Plan du site / Site map : la navigation doit être suffisamment claire pour ne pas avoir besoin d un plan de site, Liste non exhaustive : gifs animés, curseurs de souris fantaisistes, etc...

15 TRAVAUX PRATIQUES Proposez une refonte du site

16 T.P. NOTÉ Concevez l interface d une application internet permettant de gérer l organisation d une soirée étudiante. Les fonctionnalités : Choix de la date, Gestion de la liste des invités, Gestion des courses (apéro + grignotage) et du budget, Application multi-utilisateur. Livrable : un document pdf à envoyer à geoffroy.vincens@nova-box.com Date limite de remise : 30/05/2011

17 Document réalisé par : Nova-box Geoffroy Vincens mail : geoffroy.vincens@nova-box.com cours disponible sur : blog.nova-box.com