COURS DE CONCEPTION DE SITES WEB Excel With Business

Transcription

1 COURS DE CONCEPTION DE SITES WEB

2 1.0 Introduction Les sites web sont devenus partie intégrante de nos vies quotidiennes. Beaucoup d entre nous voient certains sites avant même de sortir du lit pour voir, par exemple, comment la météo affectera notre choix de vêtements puis continuent à accéder à la toile jusqu au moment de s endormir le soir venu. En plus de vérifier le temps qu il fait et autre, nous envoyons des courriels, nous regardons la télé, nous recherchons, travaillons, jouons à des jeux, choisissons ce que nous allons avoir pour dîner, rêvons, obtenons des itinéraires et des centaines d autres tâches, tout ceci via une myriade de sites. C est uniquement lorsque vous souhaitez créer votre propre site que vous commencez à réfléchir à ce qu implique le processus. Ce chapitre lance la discussion en couvrant l anatomie d un site web. 1.1 La toile et ses navigateurs Même si la plupart d entre nous utilisons les mots Internet et toile ou web - de façon interchangeable, ce sont des «endroits» distincts du cyberespace. Le terme Internet a été forge au début des années 1970 lorsque diverses institutions académiques ont créé une manière de partager des ressources essentiellement basées texte électroniquement. Près de 20 ans après, Tim Berners-Lee a développé un jeu de technologies permettant de connecter ces ressources via une série de liens à l intérieur des documents. Ceci est devenu le World Wide Web, ou web tout court. En 1993, des gens du National Center for Supercomputing Applications (NCSA, pour Centre national pour les applications des super-ordinateurs) ont fourni une manière d afficher ces documents via une interface graphique standard facile à comprendre et encore plus facile à utiliser. Appelée officiellement Mosaic, on prête à ce petit logiciel la popularisation de la toile et la mise en place des fondations pour les navigateurs web tels que nous les connaissons. En fait, tous les navigateurs modernes contiennent certaines caractéristiques comme le fameux bouton de retour de ce premier navigateur. Pour en apprendre plus, jetez un œil aux ressources sur l Histoire de l Internet (History of the Internet) sur le site de l Internet Society : internet-51/history-internet 2 Figure 1-1: Cette capture d écran montre une page web affichée sur Mosaic, le premier navigateur graphique. [Capture d écran tirée d ici : ]

3 Navigateurs modernes Lorsque nous concevons un site web, nous concevons, en substance, pour le navigateur à la fois en ce qui concerne l utilisateur final et le logiciel utilisé. Les navigateurs modernes les plus en vogue sont l Internet Explorer (IE) de Microsoft, Firefox et Google Chrome, chacun engrangeant environ un quart du marché en mai Voir marché_des_navigateurs_web pour obtenir des détails et des statistiques mises à jour. De temps en temps, au cours des deux dernières décennies, un navigateur unique s est emparé d une majorité significative de la part de marché ; à un certain moment, c était Netscape Navigator, puis IE a finalement dominé. Mais avec la croissance des appareils portables, ainsi qu avec l entrée de Google sur le marché, la prééminence de Microsoft a progressivement estompée. Parce que les navigateurs sont tellement intégrés à la conception de site, nous en discuterons plus avant dans le Chapitre 7 : Concevoir pour écrans. 1.2 Liens et URL Comme vous le savez, la toile est construite sur des liens entre différents bouts d informations. En fait, le langage de base utilisé pour créer les sites web est appelé HTML, ce qui est l abréviation de Hypertext Markup Language (soit Langage de balisage d hypertexte). Alors que le mot hypertexte pourrait sonner un peu comme un mot venu de l espace, il renvoie, en fait, au principe que le contenu est lié à quelque chose d autre. Lorsque nous lions vers des pages web, nous devons connaître l adresse de la page étant liée. La terminologie officielle pour cette adresse est uniform resource locator, ou URL (prononcé lettre par lettre U-R-L, et signifiant localisateur uniforme de ressource) tout court. Les URL débutent avec et se terminent habituellement avec quelque chose tel que.com ou.org. Examinez l adresse pour découvrir les fonctionnalités du dernier ipad sur le site web d Apple : Schéma La première partie de l URL est appelée le schéma (mentionnée, auparavant, en tant que protocole). Ceci dit au navigateur quelle interface devrait être 3 Figure 1-2: Tous les navigateurs modernes affichent l adresse web de la page au sommet de la fenêtre de navigation. utilisée pour accéder à l adresse. Les schémas les plus communément utilisés pour visualiser des pages web sont HTTP et HTTPS. HTTP signifie hypertext transfer protocol (soit protocole de transfert hypertexte). HTTPS est la même chose, sauf que le s placé à la fin indique qu une connexion sécurisée est en place. Domaine Dans l adresse d Apple, apple.com est la partie de l adresse appelée le domaine qui aide à identifier quel ordinateur héberge les pages. Nous en discuterons plus en détail dans le Chapitre 2 : Hébergement et Domaines. Chemin Le reste de l adresse - /ipad/features/ est le chemin de l endroit exact où sont affichées les informations. Même si les barres obliques pointent dans la direction opposée de celles de l adresse web montrée dans le Figure 1-2, l intention est la même : elles indiquent la structure du dossier dans le système informatique parcouru. Dans le cas d une machine Windows, Users, wwillard, Documents et Samples sont tous des dossiers présents sur l ordinateur. La capture d écran montre le contenu du dossier Samples, qui est un fichier unique appelé sample01.docx. Dans le cas de la page web pour l ipad, le contenu réel de la page se trouve à l intérieur du dossier features, qui, lui-même, se trouve à l intérieur du dossier ipad. 1.3 Serveurs Maintenant que nous avons identifié la structure de base d une adresse web, la question logique est : où se trouvent réellement les fichiers?

4 Croyez-le ou non, les pages sont stockées/peuvent être stockées sur un ordinateur ressemblant beaucoup à celui que vous utilisez pour visualiser ce site. La clé est que l ordinateur doit également être connecté à l Internet et désigné en tant que serveur web. Ceci signifie que l ordinateur est configuré pour recevoir des requêtes pour des fichiers, puis pour répondre à ces requêtes en envoyant le fichier approprié. Lorsque vous tapez une adresse web dans un navigateur puis cliquez sur Entrée, votre ordinateur envoie un message pour localiser l information demandée. La partie domaine de l adresse donne le premier indice au sujet de l endroit où cherche. L Internet Corporation for Assigned Names and Numbers (ICANN, soit Société pour l attribution des noms de domaine et des numéros sur l Internet) prend soin de gérer la base de données centrale des domaines, s assurant que chaque adresse est unique et identifiable. Le registre de l ICANN donne l adresse numérique du serveur associé à chaque domaine particulier, qui, à son tour, indique où peuvent être trouvés les fichiers pour ce domaine. Pour aider à clarifier la relation, supposez que le répertoire de votre téléphone mobile est la base de données centrale des enregistrements de noms de domaine. Si vous souhaitez appeler votre mère, vous pourriez taper «maman» dans le répertoire. Lorsque vous localisez le listing et cliquez sur Appeler, votre téléphone recoupe maman avec le numéro de téléphone et achemine votre appel en fonction. Les adresses web fonctionnent pratiquement de la même manière pour situer le serveur web approprié stockant le contenu d un site. Lorsque vous configurez un nouveau site, vous devez décider quel serveur devrait héberger votre contenu. Nous en discuterons plus avant dans le Chapitre 2 : Hébergement et Domaines. 1.4 Pages et Sites Lorsque vous accédez à un site web particulier, vous voyez les fichiers désignés sur le serveur, qu ils comportent du texte, des images, de l audio, de la vidéo ou une combinaison de chaque. Nous appelons communément ce contenu pages, même si elles ne sont pas affichées dans la même taille, la même forme ou de la même manière qu une page imprimée. Néanmoins, la phrase page web est utilisée pour décrire le contenu affiché à l intérieur d un navigateur après que le fichier ait été chargé, même si vous devez faire défiler pour visualiser tout le contenu. Donc, même s ils ne sont pas absolument justes, les termes page et fichier sont habituellement utilisés en tant que synonyme pour faire référence aux sites web. Examinez la capture d écran qui suit, réalisée à partir d une page du site web du NYTimes. L adresse montre le domaine (nytimes.com), suivi d une série de dossiers (pages et education), puis le nom du fichier affiché : index.html. Figure 1-5: Le site web du NY Times est montré pour aider à expliquer la relation entre dossiers et fichiers sur un site. 4

5 Le nom de fichier de cette page index. html nous révèle que c est la page principale du dossier parent (education). En fait, si nous supprimions index.html de la fin de l adresse web, puis cliquions sur Entrée, la page en découlant serait la même. Ceci parce que la majorité des serveurs web sont configurés pour chercher une page intitulée index par défaut (c est-à-dire même si aucun nom de fichier n a été spécifié dans l adresse). Ceci signifie que lorsque vous entrez google. com dans le champ d adresse de votre navigateur, il cherche, en fait, le fichier par défaut dans le répertoire racine ou le fichier supérieur à l endroit désigné du serveur web. Figure 1-6: Cette capture d écran montre nannydee. com depuis la perspective de l utilisateur utilisant le navigateur Google Chrome. Note : Alors que la plupart des serveurs cherchent index en tant que page de démarrage standard dans chaque fichier, l extension elle-même peut varier. Si la majorité des pages de site sont construites en HTML basique, l extension sera probablement html. Toutefois, si le site articule ses pages avec un autre langage web, tel que PHP, cette extension sera utilisée (.php). Jetons un œil à un site en tant qu exemple du point de vue de l utilisateur ainsi que de celui du développeur. Figure 1-7: Ici, nous voyons la page d accueil de nannydee.com depuis le point de vue du développeur utilisant Adobe Dreamweaver. 5

6 Lorsqu un utilisateur visite nannydee.com, il ne pense probablement pas beaucoup aux fichiers réels situés en coulisse. Mais si nous regardons maintenant ce fichier depuis la perspective du développeur, nous pouvons obtenir une meilleure compréhension de l anatomie d un site web. La Figure 1-7 montre la page d accueil de nannydee. com, vue depuis Adobe Dreamweaver. Dans le coin en bas à gauche de la capture d écran, vous pouvez voir l onglet des Fichiers, qui montre tous les fichiers HTML utilisés pour le site web nannydee.com. En particulier, la page index.html est surlignée dans cette liste puisque c est le fichier en cours d affichage. Donc, même si l utilisateur n a pas spécifié qu il voulait accéder à la page index.html, le serveur savait qu il devait afficher cette page lorsque nannydee.com était visité. Lorsqu un utilisateur clique sur un des deux liens en bas de page, le nom de fichier adéquat est fourni (dans le code HTML pour la page) et le serveur affiche ensuite ce fichier à partir du dossier correspondant. 1.5 Langages de publication web En apprenant comment concevoir un site, nous devons beaucoup parler de choses telles que le codage et les langages de balisage. Si vous vous asseyiez pour concevoir un catalogue ou une carte de visite, vous utiliseriez certainement un programme de mise en page pour ce faire. Parce que le programme réalise une majeure partie du travail pour vous, il ne reste que très peu de rude labeur. Même s il est vrai qu il existe désormais d importants outils de publication web ne requérant que peu de codage, ce n est pas nécessairement toujours aussi simple. Pour nous aider à comprendre, revenons à l histoire de la publication web. Comme nous l avons précédemment appris, le premier navigateur graphique populaire était Mosaic, lancé au début des années 1990 par NCSA. Avant de pouvoir se faire, Tim Berners-Lee a dû passer de longues nuits sans sommeil à travailler sur une manière simple de publier le contenu sur un ordinateur unique, mais la question tournait autour de la découverte d une manière de la faire efficacement et effectivement sur une échelle globale. Il a décidé d utiliser la structure d un des modules de publication assistée par ordinateur populaire : SGML. En fait, il a retenu le concept de paire de balises (utilisé pour dire quand commencer quelque chose, puis quand arrêter de le faire), ainsi que les balises spécifiques pour les fonctions telles que les titres, les paragraphes, les têtières et les listes. Par exemple, dans le code suivant, la balise d ouverture (<p>) donne l ordre au navigateur de commencer un nouveau paragraphe alors que la balise de fermeture (</p>) lui indique où arrêter ce paragraphe. <p>c est un paragraphe de texte.</p> Ces simples balises de texte étaient excellentes, mais il manquait deux pièces essentielles : les liens et les images. En raison de sa formation académique et de chercheur, Berners-Lee s est interconnecté et a recherché le feed-back d autant de programmeurs que possible afin de trouver, entre autre, des balises pour les liens et les images. Il a encouragé un genre de collaboration qui conduira au style de l open source qui constitue une majeure partie de l Internet que nous apprécions de nos jours. En fait, au cours de ces premières années, le HTML est passé par tellement d itérations en si peu de temps que Tim et beaucoup d autres ont reconnu le besoin de définir des normes universelles. En 1994, le World Wide Web Consortium (W3C) a été conçu pour combler ce manque. Avec des représentants dans les entreprises, les institutions et les organisations partout dans le monde, le W3C maintient les normes de publication web pour l Internet global. Rendez-vous sur pour en apprendre plus au sujet de ce que beaucoup appellent le conseil d administration de la publication. Normes W3C Le W3C établit donc les normes de publication sur la toile et les entreprises offrant des navigateurs écrivent des logiciels pour interpréter ces normes et afficher le contenu en fonction. Tout semble bien ficelé, non? Si seulement De nombreuses normes ont été proposées depuis le début des années 1990, mais les deux principales normes de publication sont le HTML et le CSS. 6

7 Le HTML est utilisé pour créer l infrastructure de chaque page web, puis le CSS Cascading Style Sheets, soit Feuilles de style en cascade est utilisé pour les «rendre jolies». Pour être plus précis, le HTML définit la structure du contenu alors que le CSS le stylise. Jetons rapidement un œil au code utilisé pour créer le site web nannydee.com pour voir comment HTML et CSS fonctionnent ensemble pour structurer et styliser les pages. Dans cet exemple, nous soulignons deux zones essentielles du code une qui définit la structure primaire et celle qui définit le style pour le contenu de cette structure. Figure 1-8: Lorsqu affiché dans la Vue du Code de Dreamweaver, nous voyons le HTML (pour la structure) et le CSS (pour le style) utilisés pour créer la page d accueil de nannydee.com. 7

8 HTML5 La norme officielle actuelle pour le HTML est HTML4, qui est devenu porte-drapeau en Le très anticipé HTML5 a été lancé en tant que «brouillon de travail» en 2008 et, en mai 2012, il est toujours listé «en cours de développement» par W3C. Néanmoins, les développeurs de navigateur ont travaillé depuis 2008 à concevoir les outils pour interpréter ce dernier jeu de normes qui est censé être plus convivial, plus efficace, plus facilement traduit sur différentes plateformes et capable de mieux afficher le multimédia. Typiquement, il faut des années pour que soit écrit un nouveau jeu de normes, quelques années supplémentaires pour devenir officiel et que les navigateurs le supportent. Pendant ce temps, de nouvelles normes continuent à être écrites et de nouveaux navigateurs sont développés. C est un cycle sans fin qui nous oblige, nous, développeurs web, à toujours garder l œil ouvert. Il a fallu du temps, après que les spécifications HTML initiales aient été approuvées par le W3C, pour également mettre en place un groupe pour superviser le CSS. Le groupe a passé du temps à créer des directives pour les éditeurs web, clarifiant la relation entre HTML et CSS. De nouveau, le HTML se concentre sur la manière de structurer le contenu de la page alors que le CSS ajoute le style. Si nous devions traduire ceci en construction de maison, vous pourriez dire que le HTML est utilisé pour construire les murs alors que le CSS applique la peinture et les décorations. Les deux sont des aspects importants et uniques de la publication web qui travaillent de concert pour créer les pages que nous concevons. Le Chapitre 6 : Introduction au CSS expliquera plus en détails comment styliser le contenu de notre page web. Qu est-ce que tout cela signifie pour vous? À chaque fois que nous créons un nouveau site web, nous devons décider quel jeu de normes utiliser et sur quels navigateurs il doit être développé pour être compatible. Nous devons également être prêt, si besoin est, à entretenir et à mettre le site à jour lorsque de nouvelles normes et de nouveaux navigateurs deviennent disponibles. Nous parlerons de ceci plus en détail dans le Chapitre 5 : Introduction au HTML. CSS Au cours des premiers jours de la publication web, il n existait que peu d options pour styliser le texte et celles qui existaient étaient contenues à l intérieur du HTML. Pour l essentiel, les concepteurs ne pouvaient modifier que certaines couleurs et certaines polices. Au début, il était même impossible de changer la couleur de l arrière-plan gris de la page. Mais, progressivement, à mesure que la toile a gagné en popularité, de plus en plus de gens ont exprimé leur intérêt envers un meilleur contrôle du style des pages web. PROCHAINE L UNITÉ 2 HéBERGEMENT ET DOMAINES 8