Introduction aux applications Web PDF

Introduction aux applications Web 3IEME ANNÉE ISIL UNIVERSITÉ 8 MAI 45 GUELMA DR. D. BOUGHAREB DR. D. BOUGHAREB 1 Bref historique 1962 Début des recherches sur ARPANET 1969 Connexion des 4 premiers ordinateurs d’ARPANET 1991 World Wide Web (Tim Berners-Lee) 1993 pr...

Introduction aux applications Web 3IEME ANNÉE ISIL UNIVERSITÉ 8 MAI 45 GUELMA DR. D. BOUGHAREB DR. D. BOUGHAREB 1 Bref historique 1962 Début des recherches sur ARPANET 1969 Connexion des 4 premiers ordinateurs d’ARPANET 1991 World Wide Web (Tim Berners-Lee) 1993 premier navigateur : Mosaic 1994 Yahoo ! et W3C.. 2001 Wikipédia. 2004 Facebook 2014 : Étendue 1 000 000 000 sites en septembre DR. D. BOUGHAREB 2  Web ou Internet?  L’internet est une collection d’ordinateurs ou de dispositifs mis en réseau connectés ensemble. ◦ Ils peuvent communiquer entre eux. ◦ Conception décentralisée, il n'y a pas de direction centralisé qui contrôle la façon dont Internet fonctionne.  Le Web est une collection de documents interconnectés via des hyperliens. o Ces documents fournis par les serveurs web sont accessibles par les navigateurs web. DR. D. BOUGHAREB 3 Caracteristiques du Web Le WWW (world wide web) communément appelé “Web”. Il a ete proposé en 1991 par Tim Berners-Lee en CERN. Et il l’avait definit par: le web est une collection d’informations stockées sur des ordinateurs mis en réseau à travers le monde. Hyper Text Markup Language (HTML) est un langage qui permet de créer des documents afin de les publier sur le web Hyper Text Transfer Protocol (HTTP) est le protocole utilisé pour transferer les documents HTML depuis les serveurs web vers les navigateurs des clients. Navigateur(browser): est un logiciel conçu pour consulter et afficher les documents Web. DR. D. BOUGHAREB 4 DEFINITIONS Un serveur web est un type d'ordinateur particulier qui stocke et distribue des informations sur Internet. L'URL (Uniform Resource Locaror), ou adresse web, est la fonctionne un peu comme l'adresse de votre domicile. L’adresse web www.yahoo.com, est connue par les serveurs web, sous la forme http:/1209.131.36.158. Il s'agit de l'adresse IP (Internet Prorocol), qui constitue l'identité numérique unique d' un ordinateur. - Domaine : Le nom de domaine est l’adresse par laquelle un site web est accessible (par exemple, www.example.com). Il est géré par un système d’adressage appelé DNS (Domain Name System), qui associe des noms de domaine à des adresses IP, permettant aux utilisateurs de se connecter aux sites web. DR. D. BOUGHAREB 5 DEFINITIONS Le navigateur est l'outil que vous utilisez pour accéder aux informations publiées sur la toileexp: Internet Explorer, Safari, Firefox, etc. Il réalise trois tâches principales. ◦ 1. Il cherche des informations sur un serveur web. ◦ 2. Il récupère les informations et vous les rapporte. ◦ 3. Il traite les informations pour les afficher sur l'écran de votre ordinateur ou de votre appareil mobile. DR. D. BOUGHAREB 6 DEFINITIONS Le cache est un espace de stockage temporaire de tous les fichiers que vous téléchargez pendant que vous surfez sur le Web. Plug-ins et extensions permettent au navigateurs d’assurer des fonctionnalites avancées par exeple: bloquer les publicités ou les scripts indésirables, de gérer ses téléchargements et de traduire le texte des pages web dans plusieurs langues. DR. D. BOUGHAREB 7  Syndication de contenu avec RSS L’Utilisation des flux RSS permet d’améliorer considérablement la quantité et la qualité des informations qui vous parviennent. RSS est l'acronyme de Really Simple Syndication, permet de vous abonner à un flux d'informations qui vous parvient directement par le biais d'un lecteur RSS ou d'un navigateur web. Au lieu de visiter plusieurs pages web différentes chaque jour ou de répéter les mêmes recherches encore et encore, vous pouvez configurer des flux RSS pour qu'ils fassent le travail à votre place. DR. D. BOUGHAREB 8 Web statique Au tout début du World Wide Web (1991), les pages étaient statiques : leur contenu était créé et fixé une fois pour toute par l’administrateur du site (Webmaster) et on se contentait de diffuser de l’information. L’arrivée de (hypertexte) c’était la véritable révolution pour l’époque. DR. D. BOUGHAREB 9 Web dynamique et scripts L’introduction des CGI (Common Gateway Interface) puis par la suite la généralisation des scripts exécutables sur le serveur dans différents langages (Perl, PHP, Python, Ruby) ont permis de faire varier le contenu des pages. Personnalisation: le contenu de la page varie en fonction de l’utilisateur, de ses préférences ou du sujet abordé DR. D. BOUGHAREB 10 Architecture du web Architecture Client Serveur Une architecture de réseau dans laquelle chaque ordinateur ou processus sur le réseau est soit un client ou un serveur. Le Web est le plus grand système client / serveur mis en œuvre à ce jour. "Il est aussi le plus complexe et le plus hétérogène. Il doit faire face à une multitude de systèmes d'exploitation, de langues humaines, de langages de programmation, de logiciels, de matériels et de middlewares. DR. D. BOUGHAREB 11  Systeme Client Serveur (1) Composants Une application web client-serveur est un type d'architecture où les tâches et les responsabilités sont réparties entre deux entités : le client (souvent un navigateur web) et le serveur (qui héberge et traite les données). Clients Serveurs Réseaux de Communication DR. D. BOUGHAREB 12 Systeme Client Serveur (2) Composants Clients Les clients sont des applications exécutées sur des ordinateurs connectés aux serveurs pour acquérir: o Fichiers o Dispositifs o Traitement avancé (rigoureux) Le client est l'interface utilisateur qui permet d'interagir avec l'application. C'est souvent un navigateur web (comme Google Chrome, Firefox, etc.) ou une application mobile qui envoie des requêtes HTTP au serveur. Il peut également inclure une interface graphique (UI) conçue en HTML, CSS, et JavaScript. DR. D. BOUGHAREB 13  Systeme Client Serveur (4) Composants Serveurs Ordinateurs ou processus qui gèrent les ressources du réseau ◦ Imprimantes (serveurs d'impression) ◦ Trafic réseau (serveurs de réseau) ◦ Données (serveurs de bases de données) Le serveur traite les requêtes provenant du client, exécute la logique métier, et renvoie les réponses au client. Le serveur peut être constitué de plusieurs sous-composants : Serveur web : Serve le contenu statique (HTML, CSS, JavaScript) ou redirige les requêtes vers des applications dynamiques. Serveur d'application : Contient la logique métier, comme les traitements ou la validation de données. Serveur de base de données : Stocke les données que le serveur d'application va lire et écrire (ex: MySQL, MongoDB). DR. D. BOUGHAREB 14 Systeme Client Serveur (5) Composants Serveurs Serveurs Web C’est une application qui reçoit les requêtes des clients envoyées à partir des navigateurs Web, il est capable d’en répondre. Il est connecté aux clients via un réseau (souvent). Il communique avec le client à l'aide du protocole HTTP. Il fournit aux clients des pages HTML. Il offre 3 fonctions principales ◦ Servir des pages web ◦ Exécuter des programmes de passerelle (CGI) et formuler le résultat (page web) ◦ Suivre et contrôler tous les accès E.g. Apache, IIS, Netscape Web server, … DR. D. BOUGHAREB 15 Systeme Client Serveur (6) Composants Réseaux de communication Réseaux qui connectent des DR. D. BOUGHAREB 16 Clients à des Serveurs Systeme Client Serveur (6) 3. Protocole de communication Le protocole le plus utilisé pour la communication entre le client et le serveur est HTTP ou HTTPS (version sécurisée de HTTP). Les requêtes sont envoyées par le client (GET, POST, etc.), et les réponses du serveur sont reçues sous forme de fichiers (HTML, JSON, XML). 4-Middleware Le middleware est une couche intermédiaire entre le client et le serveur, facilitant la communication et la gestion des services comme la sécurité, l'authentification ou la gestion des sessions. 5-API (Application Programming Interface) : Une API permet la communication entre différentes parties de l’application ou avec des services externes. Une API REST ou GraphQL est souvent utilisée pour connecter le front-end et le back-end ou pour permettre l’intégration avec d'autres systèmes/services. DR. D. BOUGHAREB 17  Definition d’une Application Web Une application Web est un système qui utilise des normes et technologies du W3C pour fournir des ressources Web spécifiques aux clients (généralement) à travers un navigateur. W3C : Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de normalisation à but non lucratif, fondé en octobre 1994 chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML5, HTML, XHTML, XML, RDF, SPARQL, CSS, XSL, PNG, SVG et SOAP. DR. D. BOUGHAREB 18  Modèle architectural de couches d’une application client-serveur Niveau supérieur Client 1 Présentation Client (l'interface utilisateur). Léger lourd La fonction principal : 2 Logique (traitement) de l'application représenter les tâches et les résultats dans un 3 Gestion des données format compréhensible par l’utilisateur Dans cette couche les informations sont stockées et récupérées à partir d'un système Cette couche coordonne l'application, traite de base de données ou un fichier. les commandes, prend des décisions et L'information est ensuite renvoyée effectue des évaluations logiques, et des vers le niveau logique pour le calculs. Elle déplace et traite également les traitement, et puis finalement à données entre les deux autres couches l'utilisateur. DR. D. BOUGHAREB 19 Avantages de cette architecture en couches : Séparation des préoccupations : Chaque couche a une responsabilité spécifique, ce qui permet une meilleure organisation du code. Réutilisabilité : Les composants de chaque couche peuvent être réutilisés dans d'autres applications ou projets. Facilité de maintenance : Les modifications dans une couche (par exemple, changer le design de la couche de présentation) n’affectent pas directement les autres couches. Évolutivité : Il est plus facile d'ajouter des fonctionnalités ou de faire évoluer l'application sans avoir à réécrire de grandes parties de l'application. DR. D. BOUGHAREB 20 Exemple d'architecture en couches dans une application web e- commerce : 1. Couche de présentation : Front-end : Application React qui présente les produits à l’utilisateur et gère le panier d’achat. 2. Couche métier : Back-end : Serveur Node.js qui traite les requêtes d'achat, applique des règles comme les réductions, et communique avec les autres couches pour les paiements. 3. Couche gestion de données : ORM : Sequelize pour gérer les requêtes SQL dans une base de données MySQL. Elle va récupérer les produits, vérifier les stocks, et mettre à jour la base après un achat. Base de données : MySQL où sont stockées les informations sur les produits, les utilisateurs, et les transactions d’achat. DR. D. BOUGHAREB 21 Types de clients Les différents types de clients dans une architecture client-serveur se distinguent principalement par la quantité de traitement et de stockage effectuée du côté du client, ainsi que par leur dépendance au serveur. Le choix du client est un paramètre important pour la conception d'un système. Client lourd Client léger Client riche DR. D. BOUGHAREB 22  1. Client lourd (Thick Client ou Fat Client) Le client lourd exécute la majeure partie de la logique de l'application du côté du client (l'ordinateur local ou l'appareil utilisateur). Il nécessite souvent une installation locale et peut fonctionner de manière autonome une fois certaines données téléchargées. Caractéristiques : ◦ Grande partie de la logique métier traitée sur le client. ◦ Peut fonctionner hors ligne ou avec une dépendance limitée au serveur. ◦ L'interface et la gestion des données locales sont gérées sur l'appareil client. ◦ Installation et mise à jour locales nécessaires. Exemples : ◦ Microsoft Outlook : Permet de consulter des emails et de les gérer sans connexion internet, avec synchronisation ultérieure. ◦ Logiciels de bureautique (Microsoft Office, LibreOffice) : Effectuent la majeure partie de leurs traitements localement. oExemple Outlook DR. D. BOUGHAREB 23  2. Client léger (Thin Client) Le client léger repose principalement sur le serveur pour exécuter la majorité de la logique de l'application. Le client est simplement une interface pour interagir avec l'application. Toute la logique métier, le traitement, et souvent même la gestion des données se font sur le serveur. Ce type d'application possède une interface graphique limitée mais permet une grande souplesse de mise à jour. Caractéristiques : ◦ Peu ou pas de traitement local. ◦ Dépend totalement d'une connexion constante au serveur. ◦ Plus facile à déployer et à maintenir (pas d'installation nécessaire, souvent basé sur un navigateur web). Exemples : ◦ Google Docs : Toute la logique et les traitements (édition, stockage) se font sur les serveurs de Google, avec seulement une interface légère dans le navigateur. ◦ Virtual Desktop (ex. Citrix) : Les utilisateurs accèdent à un bureau distant où tout le traitement se fait sur des serveurs distants. oExemple WebMessenger DR. D. BOUGHAREB 24 Modèle de client lourd Modèle de client léger Clients léger vs lourd entrees–clavier/souris présentation sorties–moniteur/imprimante serveur client Gestion de données Traitement d’application présentation serveur client Gestion de données Stockage de données Recherche de données Traitement d’application Traitement des entrees-sorties DR. D. BOUGHAREB 27 3. Client riche (Rich Client) Un client riche combine des éléments du client lourd et du client léger. Il offre une interface utilisateur plus dynamique et réactive comme un client lourd, mais il peut dépendre du serveur pour certaines fonctions, comme la gestion des données. Souvent utilisé dans des applications web modernes, Le client riche utilise des technologies telles que JavaScript, HTML5, CSS3, et divers frameworks front-end pour offrir une expérience utilisateur avancée. Caractéristiques : ◦ Une partie de la logique métier s’exécute localement, mais le serveur reste responsable de la plupart des traitements de données. ◦ Fournit une interface utilisateur riche et réactive, semblable à une application native. ◦ Peut fonctionner partiellement hors ligne grâce à des technologies comme le stockage local et les Progressive Web Apps (PWA). Exemples : ◦ Google Maps : Un client riche qui permet de naviguer, zoomer, et interagir avec des cartes localement via le navigateur, tout en se connectant aux serveurs pour les données de localisation. DR. D. BOUGHAREB 28 Types de client riche 1. a) RDA (Rich Desktop Application) Traitement : ◦ Côté client : Gère la majeure partie du traitement localement sur l'ordinateur de l'utilisateur. Interface Utilisateur : ◦ Interface graphique riche avec des interactions souples. Exemple : ◦ Microsoft Word, Adobe Photoshop. Avantages : ◦ Performances rapides, travail hors ligne possible. Inconvénients : ◦ Nécessite une installation et des mises à jour locales. DR. D. BOUGHAREB 29 Types de client riche b) RIA (Rich Internet Application) Traitement : ◦ Partagé : Une partie du traitement est faite côté client, mais nécessite toujours une connexion au serveur pour l’acces aux données. Interface Utilisateur : ◦ Utilise des technologies comme AJAX pour rendre l'interface interactive sans rechargement complet de la page. Exemple : ◦ Anciennes versions de Google Maps. Avantages : ◦ Meilleure expérience utilisateur par rapport aux clients légers. Inconvénients : ◦ Dépendance à une connexion Internet pour certaines fonctionnalités. DR. D. BOUGHAREB 30 Types de client riche 3) SPA (Single-Page Application) Traitement : ◦ Principalement côté client : Charge une seule page et met à jour dynamiquement le contenu à l'aide d'API. Interface Utilisateur : ◦ Réactive, sans rechargement de page, utilisant intensivement JavaScript. Exemple d'utilisation : ◦ Gmail, Trello. Avantages : ◦ Expérience utilisateur fluide, moins de chargements de page. Inconvénients : ◦ Complexité accrue dans le développement et le débogage. DR. D. BOUGHAREB 31 Types de client riche d) PWA (Progressive Web Application) Traitement : ◦ Principalement côté client : Fonctionne comme une application native tout en étant accessible via le web. Interface Utilisateur : ◦ Proche d'une application native avec des fonctionnalités hors ligne, notifications, etc. Exemple d'utilisation : ◦ Twitter Lite, Pinterest PWA. Avantages : ◦ Installation facile, meilleures performances hors ligne. Inconvénients : ◦ Limitations possibles par rapport aux fonctionnalités d'une application native complète. DR. D. BOUGHAREB 32 Types de client riche DR. D. BOUGHAREB 33 Conclusion L'architecture logicielle est un domaine intéressant et souvent négligé Les choix architecturaux sont essentiels à la réussite du projet Divers ensemble de compétences sont requis DR. D. BOUGHAREB 34 Rappels sur les sites Web L3 ISIL Dr. Djalila Boughareb [email protected] [email protected] 1  Site web Definition: un site web est un ensemble de pages web et de ressources reliées par des hyperliens, défini et accessible par une adresse web. Un site est hébergé sur un serveur web accessible via : – le réseau mondial internet, – un intranet local, – ou encore depuis le serveur web lui-même. 2  Architecture d’un site web (1) Utilisée quand: Séquentielle: Groupes d’information sont ordonnés (p. ex., logique, chronologie, du général au spécifique, alphabétique). Plutôt pour petits sites. Ex: tour guidé, présentation historique, tutoriel. Grille: Utilisée quand: on peut accéder en tout point de façon équivalente. Pour présenter une information sans organisation hiérarchique. Ex: différentes éditions d’un livre dans le temps… 3  Architecture d’un site web(2) Hiérarchie: Utilisée quand on veut refléter la structure d’une organisation Une des plus utilisées Toile: Utilisée quand on veut favoriser l’exploration et la découverte Elle peut rendre l’élaboration d’un modèle pour l’utilisateur plus difficile Plutôt pour petits sites et experts 4  Architecture d’un site web(2) Problèmes fréquents : Structure trop large, page d’accueil surchargée de liens souvent peu reliés entre eux. Structure trop profonde, nécessite beaucoup de clics pour la parcourir et trouver l’information requise. 5  Perception visuelle Facteurs influençant la lecture de texte sur écran: – Polarité (foncé sur pâle ou pâle sur foncé?) foncé sur pâle peut réduire les problèmes de reflets Idéal= texte noir sur fond blanc. – Couleurs saturées éviter rouge et bleu, bleu et vert sur fond foncé, ou rouge et vert pour éviter l’effet 3-D. voici un exemple à ne pas suivre ni ça 6 et ça non plus  Perception visuelle Texte vs graphique : – "Une image vaut mille mots"….si c’est la bonne image! Sinon pire encore! Attention aux images trompeuses… … genre icones pour montrer l’icone mais pas cliquables dans l’aide ou …flèche dans le mauvais sens…genre c’est par ici…  7 Les 3 étapes de la création d’un site Étape N°1: Phase préparatoire (établissement d’un cahier des charges) Étape N°2: Implémentation du site Étape N°3: Mise en ligne et suivi du site 8  Étape n°1 La rédaction d’un cahier des charges 9 Étape n°1 Préambule un site, pour quoi faire ? Pour quels utilisateurs ? – Quel est l’objectif du concepteur du site ? – Pour satisfaire cet objectif, il faut satisfaire les besoins des utilisateurs: un utilisateur revient sur un site parce qu’il a trouvé un contenu satisfaisant (et non pour la beauté du site) – Si trop grande diversité des utilisateurs, aiguillage à l’entrée ? – Quel degré d’expertise des utilisateurs ? Un site web doit être en principe conçu pour l’utilisateur le moins expert – Quel degré d’expertise du futur webmaster ? Principe clé: partir d’abord des besoins des utilisateurs (et pas de ses propres envies !) 10  Préambule Un site web peut avoir plusieurs objectifs en fonction du contexte dans lequel il est créé. - Informer : un site de presse, un blog, ou un site éducatif. - Vendre : e-commerce. - Promouvoir : Promouvoir une entreprise, un projet, ou une cause (sites vitrines, sites d’associations). - Partager : sites personnels, portfolios. - Interagir : forums, réseaux sociaux, plateformes collaboratives. - Soutenir : FAQ, 11  Préambule Pour quels utilisateurs ? - Grand public : qui s’adressent à une large audience avec des besoins divers, exp: sites d’actualité, - Professionnels : plateformes spécialisées pour des experts d'un domaine particulier (ex. ingénierie, médecine, finance). - Clients : le public est composé de consommateurs potentiels. - Utilisateurs spécialisés : Utilisateurs ayant des intérêts spécifiques (développeurs, artistes, chercheurs, etc.). 12  Préambule Quel est l’objectif du concepteur du site ? Le concepteur du site peut avoir des objectifs multiples:  Augmenter la visibilité du site et attirer plus d'utilisateurs.  Encourager les utilisateurs à effectuer une action spécifique (achat, inscription, téléchargement, etc.).  Fidéliser les utilisateurs  Gagner de l'argent grâce aux ventes de produits, à la publicité, etc. 13  Préambule Si le site a un large éventail d'utilisateurs aux besoins variés (par exemple, un site qui sert à la fois des novices et des experts ou des clients et des partenaires commerciaux), Solution: aiguiller les utilisateurs dès l'entrée. via : - Un aiguillage par audience : une page d’accueil qui oriente les utilisateurs en fonction de leurs objectifs (par exemple, « Je suis un particulier », « Je suis un professionnel »). 14  Préambule Quel degré d’expertise des utilisateurs ? - S’agit-il d’un public novice qui a besoin d’un site simple, intuitif, avec des explications détaillées et des aides à la navigation ? - Ou d’un public expert, pour lequel une interface plus technique et des fonctionnalités avancées peuvent être nécessaires ? Concevoir pour l'utilisateur le moins expert la navigation doit être simple, les informations claires et bien hiérarchisées, avec des options avancées éventuellement accessibles pour les utilisateurs plus expérimentés. 15  Préambule Quel degré d’expertise du futur webmaster ? Le futur webmaster est la personne ou l’équipe qui sera chargée de la maintenance, des mises à jour et de la gestion quotidienne du site. - Webmaster peu expérimenté : Si la personne est peu technique, il peut être préférable d’utiliser un CMS (Content Management System) comme WordPress, Joomla ou Wix, qui offre des interfaces faciles à utiliser et ne nécessite pas de compétences en programmation avancées. - Webmaster expérimenté : Si le webmaster a des compétences techniques élevées, des solutions plus complexes comme le développement sur mesure, l'utilisation de frameworks (Laravel, Django, etc.) ou l’intégration d'outils avancés (gestion de bases de données, APIs) peuvent être envisagées. 16 Étape n°1 Contenu et Architecture du site Définir l’architecture du site: un site doit être structuré en rubriques – Son architecture doit apparaître immédiatement au visiteur Cerner les besoins: éviter un site sur/sous dimensionné Site sur-dimensionné: difficulté à retrouver l’information, site trop sophistiqué par rapport aux besoins des utilisateurs (information overload). Site sous-dimensionné: difficulté parfois à faire évoluer le site par la suite 17 Étape n°1 Phase préparatoire Du contenu à l’image… – Le choix d’une page modèle Quelle structure ? – principe général: il faut que quel que soit la page visitée, l’utilisateur puisse 1) savoir où il est; 2) savoir où trouver une information si il n’est pas à la bonne page – Principe du « 3 clics maximum » Une solution: recourir à des formats familiers (architecture) 18 Étape n°1 Les différentes rubriques Logo Sommaire Contenu Les sous-rubriques 19 Étape n°1 Le choix d’une structure de page Exemple de Carrefour Bandeau Zone de contenu Éventuellement : dernières informations, pub, etc. Contact/Mentions légales/etc. 20 Étape n°1 Exemple de présentation de page verticale Topachat Ordinateurs Composants Ventilateurs Disques durs Réseau & Tel. 21 Étape n°1 Le choix d’une structure de page Exemple de TopAchat Bandeau Éventuellement : Zone de dernières navigation Zone de informations, pub, etc. contenu 22 Étape n°1 Le choix d’une structure de page Point à retenir: quelle que soit la structure de la page, il faut que l’utilisateur puisse mémoriser la structure du site Quelques Astuces: – Application d’une charte graphique uniforme, lien vers la racine du site via un logo situé au même endroit & sur toutes les pages 23 Étape n°1 L’ergonomie du site Sobriété : + crédible ; garder les animations pour les points importants (1 max par page) Lisibilité : – Lecture à l’écran difficile: aérer davantage par rapport à un texte format papier – Texte structuré et hiérarchisé : la structure doit ressortir visuellement, les points les plus important en haut de page – Point à retenir: quelle que soit la structure de page, il faut que l’utilisateur puisse mémoriser la structure du site Accessibilité : – Outils de navigation & règle des 3clics (cf. précédemment) – Liberté de navigation: il faut qu’un utilisateur puisse se rendre à n’importe quel endroit à partir de n’importe quel autre endroit 24 Étape n°1 L’Ergonomie du site Accessibilité (suite) : – L’URL doit (si possible) être simple et parlante : Ex: www.zetitcheur.com/cours/masterSR/doc – Dater les pages (« Dernière mise à jour le … ») Rapidité – Quelque soit la connexion, le temps d’attente est estimé à moins de 15 secondes Éviter les images lourdes (ou les compresser) Éviter les applets qui nécessitent un téléchargement avant l’affichage de la page. 25 Étape n°1 L’Ergonomie du site Politique de liens – Éviter la multiplication des liens: risque que l’internaute quitte la page prématurément – Pour garder l’utilisateur sur son site, ouvrir les liens externes dans une nouvelle page (ne pas en abuser…) Contact & Interactivité – Laisser à l’utilisateur la possibilité d’envoyer un mail à toutes les pages. – Selon le type de site: outils de fidélisation plus poussés: envoi de newsletter, forums, blogs. 26 Étape n°1 L’ergonomie du site Portabilité du site: – Il faut/faudrait que le site soit lisible sur la plupart des navigateurs, et quelle que soit la taille de la fenêtre du navigateur Choisir un modèle qui ne nécessite pas un écran entier pour éviter l’usage des ascenseurs. Tester le site sur différents navigateurs, au moins les plus courants (possible avec Dreamweaver) 27  Étape n°2 La réalisation technique du site 28 Étape n°2: Statique ou Dynamique ? Site Statique Site dynamique L’information est identique L’information varie selon pour tous les actions de l’internaute (commerce électronique) Le langage HTML suffit JAVASCRIPT Autres technologies: A la marge, des possibilités de modifications à l’aide de – PHP: Pre Hypertext scripts (ex: réorienter vers le Processor : open source site en langue anglaise, si le – ASP: Active Server Page, liens possibles avec PHP navigateur de l’ordinateur- client indique une préférence pour l’anglais) 29 Étape n°2: le langage HTML Faut-il connaître les balises HTML pour créer un site ? – NON ! Il existe des éditeurs de pages WEB dits « WYSIWYG » – … mais ces quelques rudiments sont nécessaires: Pour savoir où insérer des scripts Pour ajouter les mots-clés Pour comprendre et modifier des pages web déjà créées 30 Étape n°2: les balises META Pourquoi les balises META sont-elles importantes ? – Elles servent à l’indexation Quelques balises méta: – – – – –