Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

i UE IUTGI 23 : SYSTEME D’INFORMATION ET BASE DE DONNES EC :GI232 TECHNOLOGIE E

i UE IUTGI 23 : SYSTEME D’INFORMATION ET BASE DE DONNES EC :GI232 TECHNOLOGIE ET PROGRAMMATION WEB NIVEAU 1 (GENIE INFORMATIQUE) SEMESTRE 2 EQUIPE PEDAGOGIQUE: Dr NKONJOH (CM = 12 H ; TD = 00 H ; TP = 00 H) Mme. DIPOKO (TD = 12 H ; TP = 00 H, TPE = 04H) M. MEDJINIA (TD = 12 H; TP = 00 H; TPE = 05H) Par Dr NKONJOH 1 IUTGI23 : SYSTEME D’INFORMATION ET BASE DE DONNES Objectif : DUREE : 45Heures CM : 12h TD : 24h TP : 00h TPE : 09h Cet enseignement vise à doter l’étudiant de compétences pour réaliser des sites web avec les technologies clientes : HTML, CSS, Javascript, Ajax et Jquery. • Étudier les bases et principes du web • Faire de la programmation en langages de scripts : HTML, CSS et JavaScript • Utiliser les nouvelles technologies existantes pour la programmation web statique : JQuery, Boostrap, AJAX …. • Mettre en ligne de l’information (Hebergement) Par Dr NKONJOH 2 FICHE DE PROGRESSION DU COURS SEQUENCE THÈME DÉVELOPPÉ DURÉE SÉQUENCE 1 Généralités sur les Technologies et programmation web Chapitre 1 : Généralités sur la programmation web CM : 5h I.1 Introduction I.2 Le web TP : 4h I.3 l e s langages et leurs utilités TD : 3h I.4 le langage de base sur le web (HTML) TPE : 3h SÉQUENCE 2 Technologies de Mise en forme sur le web Chapitre 2 : Mise en forme d’un site web : feuille de style (CSS) CM : 5h TP : 4h TD : 3h TPE : 3h II.1 Introduction II.2 Syntaxe CSS II.3 Les selecteurs CSS II.4 Principes et techniques II.5 SÉQUENCE 3 Interactivité sur le web Chapitre 3 : Dynamisme avec Javascript CM : 5h TP : 4h TD : 3h III.1 Introduction III.2. Insertion dans une page web III.3 Syntaxe de base du langage III.4 Quelques dynamisme IV.5 Contrôle continu Par Dr NKONJOH 3 SOURCES DOCUMENTAIRES 1. Databeker, Grand livre HTML, 4-XML-XHTML, Relié, 2000 2. Nicolas Froidure, JavaScript : Le Guide Complet, Micro Application Editions 3. Eric Sarrion, Query 1.7 et jQuery UI, Une bibliothèque pour JavaScript, Eyrolles 4. Alexandre Brillant, XML : Cours et exercices, Broché, 2010 Par Dr NKONJOH 4 Séquence 1 : Généralités sur la programmation web Introduction : La programmation web est la programmation informatique qui permet d'éditer des sites web. Elle permet la création d'applications, destinée à être déployée sur Internet ou un Intranet, constituées de pages pouvant prendre différentes formes, notamment : • Un ensemble de pages « statiques », c'est-à-dire dont le contenu n'est pas influencé par l'internaute qui la demande, et qui n'évolue pas sans une intervention manuelle sur le code. • Un ensemble de pages « dynamiques », c'est-à-dire dont le contenu évolue sans que le code du site web ne soit modifié, soit via l'interaction des utilisateurs, soit par du calcul. C'est le cas de la très large majorité des sites web depuis le début des années 2000. Pour un internaute qui fait appel à une URL, la page web correspondante, qu'elle soit statique ou dynamique, consiste en du code « côté client » (HTML, CSS, Javascript, ...) qui est interprété par son navigateur (Google Chrome, Firefox, ...) produisant une interface utilisateur. Ce code, qui est renvoyé par un serveur web, peut ou non avoir été généré par du calcul « côté serveur », via des langages de programmation particuliers, pouvant faire appel à des bases de données, des API... Il existe différentes technologies et différents langages permettant de construire des sites web par l'intermédiaire de serveurs web, que l'on peut donc classer selon deux principes : des langages de programmation côté client, ou côté serveur. Cette distinction est faite pour séparer les langages « côté serveur » dont le code est exécuté sur le serveur web avant d'arriver sur le navigateur de l'utilisateur, des À l’issue de cette séquence, les connaissances et savoir-faire acquis par l’étudiant lui permettront de : 1. Présenter l'évolution du web et des langages de marquage ; 2. Expliquer les aspects de structure, de style et traitement dans un site web ; 3. Définir les principales balises utilisées dans les langages HTML et XHTML ; 4. Monter et utiliser des formulaires dans un site web ; 5. Présenter quelques outils efficaces d'intégration des objets multimédia ; Objectif Par Dr NKONJOH 5 langages « côté client » dont l'exécution ne nécessite pas de calcul sur le serveur web mais, seulement après le téléchargement de la page, une interprétation par le navigateur de l'utilisateur. I. Le Web 1. Qu’est-ce que le Web ? Le Web est le terme communément employé pour parler du World Wide Web, ou WWW, traduit en français par la toile d'araignée mondiale. Il fait référence au système hypertexte fonctionnant sur le réseau informatique mondial Internet. Par abus de langage, le Web désigne de façon plus large tout ce qui se rapproche à cet univers internet. On ne fait plus toujours aujourd'hui la distinction technique entre ce que définit le Web et ce que définit Internet. Il ne faut pas confondre Web et internet car le web n’est qu’une application d’internet comme le courrier électronique (email ou courriel en français), la messagerie instantanée, le partage de fichier en peer to peer (en pair à pair en français) ou le partage de fichier via le protocole FTP. 2. Les langages et leur utilité 2.1. HTML Toute page web comprend une base de langage HTML ou XHTML. Il s'agit d'un langage de balisage qui définit essentiellement la structure de la page web (titres, tableaux, paragraphes, listes, etc.). Initialement, c'est un langage qui permet de créer des hyperliens, à savoir des liens d'un document à un autre ou d'un endroit d'un document à un autre endroit du même document (identificateur de fragment). Ce langage ne définissait au départ que la structure de la page, mais très vite se sont rajoutées des balises (ou tags) qui s'occupaient de spécifier les caractéristiques de la page web (hiérarchisation du contenu, attributs donnés aux balises...). 2.2. CSS Pour mettre en forme le contenu d’une page Web au travers un navigateur on peut le faire de façon rudimentaire avec le langage HTML, mais aussi de façon plus élaboré avec le langage CSS (Cascading Styles Sheet). Pour la mise en forme, mise en page (placement des éléments, colorisation, …), le langage CSS nous permet de fixer toutes les règles de mise en page (style des titres, des paragraphes, des liens, etc. ) pour la page Web. Grâce aux langage CSS, on peut agir précisément sur le code HTML de la page Web en agissant sur ses balises : • En agissant sur l’ensemble des balises HTML du même nom (exemple : action sur l’ensemble des balises HTML paragraphes <p>) Par Dr NKONJOH 6 • En agissant sur une balise spécifique identifier précisément par un identifiant unique (ID, nom unique donnée à une balise HTML quelle qu’elle soit) • En agissant sur une ou plusieurs balises d’une même classe, famille (nom – indicateur que l’on peut donner à une ou plusieurs balises HTML qui peuvent être identiques ou différentes). 2.3. JavaScript Contrairement à ce que son nom indique, ce langage de script dynamique et orienté objet n’a rien à voir avec Java, si ce n’est que les deux sont dérivés du langage C. Il a été développé à l’origine par Netscape en 1995 sous le nom de LiveScript dans l’objectif d’étoffer l’utilisation d’HTML et des CSS. Il s’agissait de permettre aux programmeurs d’évaluer les interactions entre utilisateurs et de présenter les contenus de façon dynamique. Aujourd’hui, le JavaScript est utilisé non seulement dans les navigateurs, mais aussi dans les microcontrôleurs et les serveurs. Le nom de JavaScript a été choisi à des fins de marketing, pour profiter de la popularité de Java. Le succès a été au rendez-vous : aujourd’hui, presque tous les sites Internet les plus connus utilisent le JavaScript comme langage de programmation de choix côté client. 3. Les formats d’images Les sites Web utilisent généralement des images numériques de trois formats : • GIF (Graphics Interchange Format) • JPG / JPEG (Joint Photographic Experts Group) • PNG (Portable Network Graphics) Le format GIF ne supporte que 256 couleurs uniques. Pour obtenir le reste des nuances, les pixels voisins sont mélangés afin que l'œil humain les perçoive comme la bonne couleur. C'est pourquoi ce format ne convient pas aux photos en couleur. Il est utilisé pour créer des images simples (diagrammes, boutons, graphiques simples, etc.) qui se chargent rapidement et ne ralentissent pas le site. Le format JPEG supporte plus que 16 millions couleurs. Il convient pour la compression et le stockage de photos en couleur, mais une fois compressé, leur qualité est perdue. Lorsque vous travaillez avec ce format, l’essentiel est de trouver un équilibre entre le niveau de qualité et le poids optimal des images. Le format PNG combine les avantages des formats JPEG et GIF. Il prend en charge des millions de couleurs et vous permet de compresser uploads/Science et Technologie/ technologie-progra-web-gi-1-gi232.pdf