DUT Marketing Digital et Experience Utilisateur - Université Ibn Zohr - Agadir 2024/2025 PDF

Université Ibn Zohr - Agadir Ecole Supérieure de Technologie Agadir DUT MARKETING DIGITAL ET EXPERIENCE UTILISATEUR Semestre 1 / Module : 112 Technologie...

Université Ibn Zohr - Agadir Ecole Supérieure de Technologie Agadir DUT MARKETING DIGITAL ET EXPERIENCE UTILISATEUR Semestre 1 / Module : 112 Technologies web appliquées au E-commerce Année universitaire 2024/2025 V 1.0 CULTURE WEB 1. Internet et le Web 2. Les différents métiers 3. Rôle des langages  CULTURE WEB Internet représente l'infrastructure réseau qui connecte tous les ordinateurs du monde. Le nom provient de l'expression "réseaux interconnectés" : INTERconnected NETworks. La date de naissance d'Internet retenue est le 1er janvier 1983 avec l'apparition du protocole TCI/IP. ▪ Le Web (apparu en 1989), utilise le canal de communication internet. ▪ Le Web utilise internet pour transporter et échanger des données, c'est l'utilisation majeure d'internet. ▪ Le web représente un service d'échange d'informations pour le grand public. Utilisation d’Internet : ❑ La consultation de pages Web (HTML/CSS), ❑ Le courrier électronique (email), ❑ Le transfert de fichiers de ou vers un serveur (transfert FTP) ❑ les systèmes de partage de fichiers poste à poste (pear-to-pear) Différence entre l'Internet et le Web : ❑ Internet Réseau interconnecté, ❑ Web service d'échange d'informations 3  CULTURE WEB Dans le Web plusieurs métiers existent. Nous pouvons lister les principaux : Graphisme Gestion Webdesigner : conçoit une maquette (image Chef de projet : Dirige et coordonne les équipes ainsi représentant le site). que les planings (et parfois les clients, et les budgets) en Graphiste : crée des visuels. fonction d'un projet. Illustrateur : crée des images (icones, etc). Ergonome / Ux Designer : renforce l'expérience de Marketing l'utilisateur et améliore l'accessibilité du site. Webmarketer : Défini la stratégie marketing du site. Développement (Technique) Publicité Développeur : programme les éléments techniques d'un Référenceur : Améliore le trafic et le positionnement site, d'une application ou d'un logiciel. d'un site web sur les moteurs de recherche. Intégrateur : intègre les différentes parties d'un site, Analyste : Analyse les statistiques et les retombées d'une application ou d'un logiciel. commerciales des campagnes menés. DBA (Data Base Administrator) : Administre une base de données. Animateur : Réalise des images en 2D ou en 3D, des E-Reputation applications flash, etc. Community Manager : Veille à la réputation d'une entreprise sur le web et anime des communautés sur les réseaux sociaux. 4  CULTURE WEB Divers Rédacteur Web / Responsable Editorial : Crée des articles et des contenus pour alimenter un site web. Vidéaste : Réalise des vidéos optimisés pour le web. Webmaster : Met à jour un site. Modérateur : Gère les commentaires déposés sur un site web (ex : forum). Formateur : Enseigne son savoir aux apprentis. Exploitation Administrateur réseaux : gère les équipements réseau (câblage, configuration des équipements réseaux, routage). Administateur système : administre les serveurs qui hébergent les services: couche système d'exploitation et applicative. Administrateur sécurité : assure la sécurité des données. 5  CULTURE WEB Nous n'utiliserons pas forcément les mêmes langages pour créer un site web, un logiciel, une application smartphone, un robot, un jeux vidéo, etc. Nous allons nous intéresser a 5 d'entre eux : HTML – Hypertext Markup Language : C’est un langage de PHP – Hypertext Preprocessor : Langage de programmation balise qui permet de structurer une page web, pour cela on y permettant de produire des pages web dynamique et de déclare les éléments, les zones et toutes les parties devant être développer des fonctionnalités. présente dans la page au moment de l’affichage. SQL – Structured Query Language : Langage de requête CSS – Cascading Style Sheets : C’est un langage de mise en permettant d'échanger des informations avec une base de forme, il permet de présenter les informations en données (enregistrement, sélection, modification, personnalisant les éléments présents dans le HTML, nous suppression). pourrons par exemple préciser des tailles, des positionnements, des couleurs, etc. Par exemple, si nous créons un forum : J'utiliserais le PHP pour le rendre fonctionnel et JAVASCRIPT – JS : Ce langage permet de rendre les pages dynamique, interactives en y ajoutant des mouvements, des événements, le SQL pour enregistrer les messages dans une BDD, animations et de l’interactivité (pour cette utilisation flash est le JS pour permettre de mettre des smileys dans les de moins en moins utilisé). messages, le HTML pour avoir un retour visuel, le CSS pour positionner les différents éléments et améliorer le retour visuel venant du HTML. 6 Introduction Html Css 1. Les langages Html et Css 2. Compatibilité des navigateurs 3. L'organisation W3C 4. Quelques Outils 5. Comment créer un fichier ?  HTML ET CSS HTML et CSS sont des langages permettant la structuration et mise en forme de page web. Les dernières évolutions nous conduisent à HTML 5 et CSS 3. Pour observer un code HTML, il suffit de se rendre sur une page web quelconque et d'effectuer un clic droit > code source de la page. Il s'agit d'une suite d'instructions qui forme un Code Source. Le code-source forme une suite de lignes qui sera interprétée et donnera le rendu que vous voyez à l'écran 8  HTML ET CSS voici quelques statistiques fascinantes sur les navigateurs web en 2022. ▪ Actuellement, Microsoft Edge détient une part de marché de 4,12 %. ▪ Chrome détient collectivement une part de 65,87 % aujourd'hui. ▪ Safari revendique une part de 18,62%. ▪ La part de marché actuelle de Firefox est de 3,26 %. ▪ Chrome est le navigateur web le plus utilisé sur les tablettes. ▪ Chrome pour Android est la version du navigateur web la plus utilisée. ▪ Microsoft Edge est le navigateur web le plus vulnérable en 2022. 9  HTML ET CSS Le W3C est une organisation chargée de standardiser et faire évoluer le langage HTML. Le W3C dicte des normes d'interprétation que les navigateurs doivent suivre (un peu comme le code de la route). L'objectif recherché est qu'un même code s'affiche de la même manière sur tous les moteurs de rendus. Le W3C met à disposition un espace de validation (https://validator.w3.org/) pour savoir si le code que l'on écrit respecte bien les règles. Un code totalement valide (dit « code propre ») permet une meilleure interprétation des navigateurs et peut contribuer à un meilleur positionnement sur les moteurs de recherche (référencement). Pendant sa création et lorsque le site est terminé, il est important de « le tester » sur tous les navigateurs et sur l'espace de validation W3C. 10  HTML ET CSS Avant de démarrer l'apprentissage et l'écriture de code Html / Css, nous allons devoir nous équiper. Avez-vous déjà vu un jardinier sans sa pelle ou son rateau ? et bien c'est pareil pour nous, nous allons récupérer quelques outils sur le web : ▪ Chrome / Firefox (navigateur) ▪ Une extension qui permet d'observer et d'éditer un code-source en direct ▪ Webdevelopper (extension qui fournit des outils pour le développeur web) ▪ Notepad++ ou sublime text (éditeur de texte - simple lors d'une première utilisation) Nous utiliserons donc chrome pour la suite du cours, cependant si vous êtes attaché à un autre navigateur, vous pourrez sans aucun doute télécharger les extensions équivalentes. 11  HTML ET CSS 1. Pour créer un nouveau fichier, vous devez vous rendre dans le logiciel Notepad (accessible par le bouton démarrer de windows) : 2. Ensuite vous vous retrouvez dans un nouvel onglet (vous pouvez aussi en ouvrir un nouveau avec ctrl+n ou fichier > nouveau) 3. Vous pouvez écrire ce que vous voulez à l'intérieur :Cliquez sur l'icône en forme de disquette pour enregistrer et choisissez un emplacement pour votre nouveau fichier : 4. Choisissez l'extension.html afin de créer votre toute première page web ! 5. Vous pouvez double-cliquer sur votre fichier pour le lancer dans le navigateur. 6. A tout moment, vous pouvez reconsulter et éditer votre fichier 12  HTML ET CSS Si vous souhaitez travailler avec les extensions de fichiers visibles (préférable lorsqu'on fait de l'informatique), vous devrez rentrer dans l'un de vos dossiers et cliquer sur le bouton organiser > Options des dossiers et de recherche. Puis ensuite vous rendre dans l'onglet affichage pour décocher > Masquer les extensions des fichiers dont le type est connu. Nous apercevons l'extension de vos fichiers : 13 Structure D'une Page Html 1. Qu'est-ce qu'un langage ? 2. Qu'est-ce qu'un code ? 3. Qu'est-ce qu'une balise ? 4. Qu'est-ce qu'un attribut ? 5. Qu'est-ce qu'une valeur ? 6. Qu'est-ce qu'un commentaire ? 7. Qu'est-ce que l'indentation ? 8. Débuter et créer une première page en Html 9. Encodage des caractères 10. Structure d'une page web ! Le code Html 11. Assurer la liaison entre une page html et une feuille de style css 12. Comment voir votre page web et observer le rendu à l'écran dans le navigateur ? 13. Observer le code-source de la page pour trouver ses erreurs 14. Validons notre code-source avec le W3C 15. Comment créer une page d'accueil ?  Structure D'une Page Html Un langage c'est comme une langue, si vous partez en vacances et que voulez vous faire comprendre en Espagne il faudra apprendre et parler Espagnol ! Et bien, si vous souhaitez créer un site web il faudra apprendre et parler html / css. (à la différence que ce sera une langue écrite uniquement) Un code est un morceau de texte suivant des normes et les conventions d'un langage, introduit à l'intérieur d'un fichier possédant l'extension du langage (exemple :.html,.css, etc.). l'ensemble de ces lignes de code sont exécutées et lues (par un navigateur ou l'interpréteur d'un serveur) et permettent d'obtenir un affichage en retour. Une balise est un mot entre chevron, par exemple : La balise permettant de contenir des paragraphes s'ouvre avec : Cette même balise se ferme avec : Certaines balises sont auto-fermantes (elles ne se ferment pas), par exemple: Parmis les balises autofermantes nous pouvons noter les suivantes : , , , , ,... Qu'est-ce qu'un chevron ? Un chevron ouvrant c'est ce caractère : < Un chevron fermant c'est ce caractère : > 15  Structure D'une Page Html Un attribut est un mot complémentaire venant se glisser à l'intérieur d'une balise. Exemple avec l'attribut charset : La balise Meta, peut servir à plusieurs utilisations... Nous lui ajoutons donc l'attribut charset pour préciser que nous souhaitons régler l'encodage des caractères sur UTF-8 (attention il faudra que votre éditeur soit également réglé sur UTF-8 sans bom). Un autre exemple avec l'attribut content : Comme la balise Meta peut servir dans plusieurs situations, nous lui ajoutons donc l'attribut description pour préciser que nous souhaitons ajouter une description qui soit prise en compte par Google et les autres moteurs de recherche. L'attribut description de la balise meta permettra de fournir à Google (et aux autres moteurs de recherche) une description. 16  Structure D'une Page Html Une valeur est un mot ou un ensemble de mots venant renseigner un attribut. Dans notre code ci-dessus, les balises apparaissent en bleu, les attributs en blanc, les valeurs en vert. Exemple : Une valeur est un morceau de texte saisi dans les guillemets d'un attribut. comme ici avec le nom de notre feuille de style css : structure.css. Cette ligne nous permettra plus tard de lier le fichier Html au fichier Css. Un commentaire est une portion de texte (souvent une note ou une indication) ignorée par l'interpréteur, exemple : Mon Texte Les commentaires sont des morceaux de texte ignorés par le navigateur, c'est en quelque sorte des annotations que l'on peut ajouter pour y voir plus clair et se repérer plus rapidement dans un code-source. Les commentaires sont également très pratiques lors d'un travail d'équipe de manière à ce qu'un nouveau développeur arrivant sur un projet comprenne rapidement avec quelques indications le travail ayant été réalisé. 17  Structure D'une Page Html L'indentation consiste à se décaler (du bord gauche) vers la droite pour indiquer que l'information se trouve à l'intérieur. Mon Texte Dans notre cas « Mon Texte » se trouve à l'intérieur des balises et. Il est important de respecter cette méthodologie en entreprise (pour soi, mais aussi lorsque l'on collabore avec plusieurs personnes). Si vous ne voyez pas l'intérêt de l'indentation, posez-vous cette question : aimeriez-vous que l'on vous partage 200 lignes de code totalement dé-indentées et quasi illisibles ? Même si cela n'est pas obligatoire pour rendre un code personnel fonctionnel, cela reste hautement recommandé pour améliorer la lecture. 18  Structure D'une Page Html Nous allons créer un premier fichier par l'intermédiaire de notepad++. Nous nommerons ce fichier : mapage.html Voici le contenu à introduire dans votre fichier : N'oubliez pas d'enregistrer en sauvegardant votre fichier. 19  Structure D'une Page Html ▪ Doctype est une balise obligatoire en début de document et cela peut aussi permettre de préciser son type ainsi que la version du langage Html utilisée. C'est également indispensable pour valider son code source auprès de l'organisation W3C. ▪ Html est également une balise indispensable, elle doit être présente dans tous vos documents pour englober le code de vos pages web. ▪ Head définie les entêtes de votre document, c'est une partie non visible mais nécessaire pour plusieurs raisons. Par exemple, nous pourrons définir un titre de page, se lier avec une feuille de style css ou encore préciser la description de notre site web. ▪ Title permet de donner un titre à votre page, c'est ce que vous verrez apparaitre sur l'onglet de votre navigateur ▪ body définit, cette fois, le corps de votre document, c'est la partie visible de votre page web, c'est à cet endroit que nous mettrons du texte, des images, et toute autre information. ▪ h1 est une balise qui permet de déterminer le titre du document (en général, nous ne mettons qu'un seul titre par page, par convention liée au référencement). ▪ p est une balise qui permet de créer un paragraphe de texte du document (nous pouvons en mettre autant qu'on le souhaite !). 20  Structure D'une Page Html Les fichiers créés sous notepad doivent posséder l'encodage utf-8 sans bom : Vous devrez ajouter la balise suivante dans la partie pour éviter des problèmes d'encodage : 21  Structure D'une Page Html Nous allons créer un nouveau dossier (sans espace, sans accent) nommé : /HtmlCss/ A l'intérieur du dossier /HtmlCss/, nous allons créer un nouveau dossier nommé : /Structure/ Nous allons étudier le code source d'une page web standard Pour cela, créer un fichier nommé : structure.html Nous travaillerons donc sur le fichier et le chemin suivant : /HtmlCss/Structure/structure.html 22  Structure D'une Page Html Décryptons les nouvelles balises non présentées : ▪ Link permet de me relier à une feuille de style css ▪ Header est une balise permettant de prévoir un emplacement (ou une zone) pour le haut de votre site web. En général, nous y retrouvons un logo, un slogan... ▪ Nav est une balise permettant de prévoir un emplacement (ou une zone) pour votre menu de navigation. En général, nous y retrouvons des liens. ▪ Section est une balise permettant de prévoir un emplacement (ou une zone) pour le contenu de votre site web. Nous y retrouverons plutôt un titre, du texte, des images, etc. ▪ Div est une balise permettant de prévoir un emplacement (ou une zone) quelconque de votre site web. L’élément div peut regrouper tout et n’importe quoi, alors que l’élément section a plutôt été pensé pour regrouper du contenu apparenté. ▪ Span est une balise permettant de prévoir un petit emplacement secondaire, on l'utilise souvent à l'intérieur d'une autre zone. L’élément span peut regrouper tout et n’importe quoi, il s'agit d'une zone secondaire d'information ▪ Article est une balise permettant de prévoir une zone de texte. ▪ Footer est une balise permettant de prévoir un emplacement (ou une zone) pour le bas de votre site web. En général, nous y retrouvons des liens administratifs (type: mentions légales, plan du site, Conditions Générales, etc), un copyright, etc. 23  Structure D'une Page Html Il n'est pas courant d'écrire un fichier Html sans se lier à une feuille de style Css. Le code Html détermine la structure de la page (incluant les différentes zones), mais nous devons également écrire du code CSS pour positionner ces zones sur la page, leur donner des tailles, des couleurs, etc. Reprenons les 2 fichiers précédents : structure.html et structure.css Nous attribuons le même nom aux 2 fichiers toutefois les fichiers pourraient se nommer différement Cette ligne (à placer dans le code HTML) vous permettra d'assurer la liaison avec votre feuille de style (fichier css) : Comment être sûr d'être correctement relié à votre feuille de style ? Et bien, si vous écrivez du code CSS de mise en forme et que vous ne voyez pas votre style sur votre page html, c'est sans doute qu'il y a un problème dans le code ou dans le chemin qui relie les deux fichiers. Vous pouvez aussi effectuer un clic droit > code source de la page (ctrl + u au clavier) et cliquer sur le chemin du fichier «.css » qui est affiché. 24  Structure D'une Page Html Lorsque vous cliquerez dessus, deux résultats sont possibles : 1. Soit, vous pouvez observer votre code CSS apparaitre et vous savez que votre fichier est bien relié. Si un problème persiste, cela sera certainement lié au code en lui-même mais pas à la liaison entre les fichiers. Pensez à relire le code html tout comme le code css, vérifiez que vos deux fichiers soient bien enregistrés et que la liaison entre html et css soit bien établie (cela peut aussi être une erreur de chemin de fichier). 2. Soit, une page d'erreur s'affiche : Sur un site web static, généralement une seule feuille de style est utilisée. 25  Structure D'une Page Html Pour observer le rendu de votre page web à l'écran, il faut se positionner sur l'emplacement de votre fichier et effectuer un double clic gauche ou un clic droit > ouvrir avec > firefox (ou un autre navigateur). 26  Structure D'une Page Html Regarder votre code-source est très utile, s'il y a une erreur de sémantique, celle-ci apparait généralement en rouge. Exemple dans le code source : Nous pouvons constater que la balise body apparait en rouge et que par conséquent il y a une erreur sur cette ligne ! Un autre indicateur d'erreur : La coloration syntaxique. Sous notepad les balises apparaissent en bleu, les attributs en rouge, les valeurs en violet. Si les couleurs ne sont pas bonnes, cela peut être révélateur d'une erreur dans le code. Nous voyons que la balise header n'a pas sa couleur habituelle, c'est donc qu'une erreur a été faite avant la ligne n°12. Vous avez trouver l'erreur ? et oui, il s'agit du chevron fermant sur la balise body ! D'une manière générale, pensez donc à toujours vérifier votre code-source pour voir si rien n'apparait en rouge avant d'aller plus loin. 27  Structure D'une Page Html Pour cela, il faut se rendre sur Google et saisir : w3c validator. Nous avons 3 types de validation possibles : ▪ Par l'url ▪ Par un upload de fichier ▪ Par une saisie (copier/coller) Etant donné que notre site n'est pas en ligne, nous allons éliminer le 1er choix et je vous propose de copier/coller votre code dans le 3e onglet, comme ceci : 28  Structure D'une Page Html Lorsqu'on crée un site web, c'est pour le mettre en ligne (sur le web) à terme. En effet, si votre site web reste en local sur votre ordinateur, il risque de ne pas servir énormément puisque personne ne le verra à par vous même ! Lorsque l'on crée un site web, il y a toujours une page d'Accueil (Home Page, page par défaut), pour cela nous créons un fichier qui se nomme : index.html En effet, c'est la première ressource que va rechercher le serveur lorsque vous accéderez à un site web. Gardez à l'esprit que si vous souhaitez créer une page d'accueil il faudra appeler le fichier index.html 29