Conception de site web. Place du Web dans le monde  Entreprises  Commerce électronique  Réseaux sociaux  Les municipalités  Les partis politiques.

Présentation au sujet: "Conception de site web. Place du Web dans le monde  Entreprises  Commerce électronique  Réseaux sociaux  Les municipalités  Les partis politiques."— Transcription de la présentation:

1 Conception de site web

2 Place du Web dans le monde  Entreprises  Commerce électronique  Réseaux sociaux  Les municipalités  Les partis politiques  Gouvernement  Organismes de tout genre  Commerces  Institutions  Etc.

3 WEB – Client / Serveur Application Client Serveur WEB WWW Base de données …… Requête HTTP/HTTPS HTML CSS Javascript C# PHP PEARl

4 La gestion de projet Chef de projet web : dirige la conception et la réalisation du site Architecte de l'information : organise et classifie l'information à publier Programmation et développement Développeur : conçoit et réalise les éléments techniques du site Programmeur : crée les applications ou sous parties en langage informatique Animateur : crée des images animées (2D-3D), des applications flash, ou autres Intégrateur : organise et intègre les différentes "briques" du site Spécialiste bases de données : conçoit, crée, gère les bases de données du site Graphisme et webdesign Webdesigner : conçoit le site, avec ses différentes parties qui seront réalisées par lui-même ou d'autres intervenants Graphiste : conçoit et crée les éléments graphiques Illustrateur : crée les parties images du site Ergonome : renforce l'accessibilité du site pour des publics particuliers, s'assure que les informations sont facilement accessibles à tous Administration Webmestre : gère au quotidien le site web et le met à jour. il est aussi souvent responsable du développement du trafic Gestion de l'information Documentaliste : collecte les informations qui seront publiées, il les vérifie et les valide avant publication Juriste :vérifie la légalité des informations publiées Gestionnaire de contenus : gère le contenu du site Journaliste internet : écrit les textes, en prenant en compte les besoins du référencement moteurs de recherche (SEO) Animation Animateur de site : gère l'ensemble des contributeurs de contenus du site Gestionnaire de communauté : anime la communauté au travers du site, des réseaux sociaux, forums.... Marketing et promotion Référenceur : favorise le référencement naturel du site auprès des moteurs de recherche, il intervient des la conception du site Webmarketeur : élabore et met en place avec les autres acteurs, la stratégie marketing internet du site ou de l'organisation Métier du Web

5 Page Web est composée de…  Html (Hyper Text Markup Language)  JavaScript (DHTML, DOM, JQuery, AJAX)  CSS (Cascading Style Sheet)  Image (GIF, JPEG, PNG, BMP, etc.)  Animation (GIF, SVG, Flash, Shockwave, Java Applet)  Audio (mp3, wav )  Video (WMV, RM, FLV, MPG, MOV, etc.) http://www.w3schools.com/html/default.asp

6 HTML historique…  1989 : Origine (syntaxe dépendante de l’implantation des fureteurs)  1993 : HTML (introduction des formulaires, page html dynamique, client/server, commerce électronique, etc.)  1994: Introduction du CSS et du DOM (Document Object Model)  1995 : HTML 2.0, naissance du W3C (World Wide Web Consortium)  1997: HTML 3.0 et 4.0, styles et script  2000: XHTML / XML, abandon du SGML  2007 : HTML 5, abandon du XHML 2.0, introduction du DTD (Document Type Definition) source : Wikipédia  http://www.evolutionoftheweb.com

7 HTML syntaxe et vocabulaire contenu baliseantibalise Exemples : Grand titre Nouvelles… Visit W3Schools

8 Quelques outils d’édition de page *.html

9 Éditeur de Google Chrome

10 HTML: ensemble de balises imbriquées

11 HTML: Structure d’une page Indique au fureteur la version du code html utilisée Indique l’espace de nom à utiliser pour valider la syntaxe du document Entête de la page dans laquelle on indique le titre du document, les balises « meta » utiles aux moteurs de recherche, liens CSS, JavaScript Corps de la page décrivant son contenu

12 Entêtes Paragraphes Paragraphes avec styles

13 0000000000330000660000990000CC0000FF 0033000033330033660033990033CC0033FF 0066000066330066660066990066CC0066FF 0099000099330099660099990099CC0099FF 00CC0000CC3300CC6600CC9900CCCC00CCFF 00FF0000FF3300FF6600FF9900FFCC00FFFF 3300003300333300663300993300CC3300FF 3333003333333333663333993333CC3333FF 3366003366333366663366993366CC3366FF 3399003399333399663399993399CC3399FF 33CC0033CC3333CC6633CC9933CCCC33CCFF 33FF0033FF3333FF6633FF9933FFCC33FFFF 6600006600336600666600996600CC6600FF 6633006633336633666633996633CC6633FF 6666006666336666666666996666CC6666FF 6699006699336699666699996699CC6699FF 66CC0066CC3366CC6666CC9966CCCC66CCFF 66FF0066FF3366FF6666FF9966FFCC66FFFF 9900009900339900669900999900CC9900FF 9933009933339933669933999933CC9933FF 9966009966339966669966999966CC9966FF 9999009999339999669999999999CC9999FF 99CC0099CC3399CC6699CC9999CCCC99CCFF 99FF0099FF3399FF6699FF9999FFCC99FFFF CC0000CC0033CC0066CC0099CC00CCCC00FF CC3300CC3333CC3366CC3399CC33CCCC33FF CC6600CC6633CC6666CC6699CC66CCCC66FF CC9900CC9933CC9966CC9999CC99CCCC99FF CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF FF0000FF0033FF0066FF0099FF00CCFF00FF FF3300FF3333FF3366FF3399FF33CCFF33FF FF6600FF6633FF6666FF6699FF66CCFF66FF FF9900FF9933FF9966FF9999FF99CCFF99FF FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF CouleurHexadécimalCode RGB #000000rgb(0,0,0) #FF0000rgb(255,0,0) #00FF00rgb(0,255,0) #0000FFrgb(0,0,255) #FFFF00rgb(255,255,0) #00FFFFrgb(0,255,255) #FF00FFrgb(255,0,255) #C0C0C0rgb(192,192,192) #FFFFFFrgb(255,255,255) Code de couleur http://www.w3schools.com/html/html_colornames.asp color:Nom de la couleur color:code Hex color:rgb(x,y,z) http://www.rkm.com.au/animations/Animation-RGB-additive-colour-mixing.html

14 Listes Note: L’encodage doit être en ANSI pour les accents

15 Tableaux

16 MaPageWeb.html images Répertoire du site Web Différents formats de fichier d’image numérique : http://clictriel.1cd3.com/tuto/04-Image_numerique-formats_des_fichiers_image.pdf

17 Hyperliens Visitez le site W3Schools.com! Syntaxe : Link text Lien courriel : Écrivez moi… Lien image:

18 CSS: Cascading Style Sheet Inline: … Internal: … … … External: … … http://www.w3schools.com/css/css_syntax.asp