Developpé dans le cadre de:
- Unité d'Ensseignement: DEVELOPPEMENT WEB ET MULTIMEDIA 2 comportant:
Matière(1): Programmation Web2
Matière(2): Atelier Développement Webet Multimédia II
Pour les étudiants de la la licenece en Technologies de l’Informatique (TI) - TC-Semestre 2
Par: Mohamed Mhamdi- Iset de Sousse(Tunisie)
Ce support explique les concepts de base de Big Data Processing. Elle aborde les parties suivantes :
Série de vidéos : https://www.youtube.com/watch?v=1JAljjxpm-Q
- Introduction au Big Data
- Système de stockage en Big Data
- Batch Processing et Stream Processing en Big Data
- Aperçu bref de l’écosystème de Hadoop
- Aperçu de l’écosystème des outils du Bid Gata
- Big data stream processing avec Kafka écosystème
- Architecture de Kafka (Brokers, Zookeeper, Procuder, Consumer, Kafka Streams, Connecteurs)
- Comment démarrer un cluster de brokers KAFKA
- Création et configuration des Topics
- Création d’un Java Kafka consumer
- Création d’un Java Kafka Produder
- Kafka Producer et Kafka Consumer dans une application basée sur Spring
- Kafka Streams
- Intégration de Kafka dans Spring Cloud.
Mot clés : Big data, Big Data Processing, Stream Processing, Kafka, Kafka Streams, Java, Spring
Bon apprentissage
Ce Support explique quelques concepts de base de NodeJS et montre comment mettre en oeuvre la technologie NodeJS pour développer la partie Backend d'une application.
Les vidéos des démonstrations sont publiées sur les adresse suivantes :
- https://www.youtube.com/watch?v=-X_C1tS5-9Y
- https://www.youtube.com/watch?v=rE-xRH28m0s
- https://www.youtube.com/watch?v=tnxjkTvWoKA
Cette série explique les éléments suivants :
- Architecture Web
- Modèles Multi-Threads avec les entrées sorties bloquantes
- Modèles Single Thread avec les entrées sortie non bloquantes
-Technologie Node JS
- Comment créer une simple application Node JS avec java Script
- Architecture du Framwork Express
- Comment créer une application NodeJS avec Type Script
- Comment écrire des tests unitaires avec Jest
- Quelques concepts sur MongoDb
- Comment Créer une API Rest avec NodeJS, Express et MongoDb
- Comment tester l'API Rest
- Comment Créer la partie FrontEnd avec Angular.
Même si la qualité audio n'est pas bonne, ses vidéos peuvent aider ceux qui débutent dans NodeJS en attendant d'autres vidéos avec plus qualité audio et de contenu.
Bonne lecture
Ce support explique les concepts de base de Big Data Processing. Elle aborde les parties suivantes :
Série de vidéos : https://www.youtube.com/watch?v=1JAljjxpm-Q
- Introduction au Big Data
- Système de stockage en Big Data
- Batch Processing et Stream Processing en Big Data
- Aperçu bref de l’écosystème de Hadoop
- Aperçu de l’écosystème des outils du Bid Gata
- Big data stream processing avec Kafka écosystème
- Architecture de Kafka (Brokers, Zookeeper, Procuder, Consumer, Kafka Streams, Connecteurs)
- Comment démarrer un cluster de brokers KAFKA
- Création et configuration des Topics
- Création d’un Java Kafka consumer
- Création d’un Java Kafka Produder
- Kafka Producer et Kafka Consumer dans une application basée sur Spring
- Kafka Streams
- Intégration de Kafka dans Spring Cloud.
Mot clés : Big data, Big Data Processing, Stream Processing, Kafka, Kafka Streams, Java, Spring
Bon apprentissage
Ce Support explique quelques concepts de base de NodeJS et montre comment mettre en oeuvre la technologie NodeJS pour développer la partie Backend d'une application.
Les vidéos des démonstrations sont publiées sur les adresse suivantes :
- https://www.youtube.com/watch?v=-X_C1tS5-9Y
- https://www.youtube.com/watch?v=rE-xRH28m0s
- https://www.youtube.com/watch?v=tnxjkTvWoKA
Cette série explique les éléments suivants :
- Architecture Web
- Modèles Multi-Threads avec les entrées sorties bloquantes
- Modèles Single Thread avec les entrées sortie non bloquantes
-Technologie Node JS
- Comment créer une simple application Node JS avec java Script
- Architecture du Framwork Express
- Comment créer une application NodeJS avec Type Script
- Comment écrire des tests unitaires avec Jest
- Quelques concepts sur MongoDb
- Comment Créer une API Rest avec NodeJS, Express et MongoDb
- Comment tester l'API Rest
- Comment Créer la partie FrontEnd avec Angular.
Même si la qualité audio n'est pas bonne, ses vidéos peuvent aider ceux qui débutent dans NodeJS en attendant d'autres vidéos avec plus qualité audio et de contenu.
Bonne lecture
Ce support de cours contient les concepts fondamentaux de la sécurité des applications Web Statless avec Json Web Token. Des applications de mise en oeuvre de JWT et Spring Security pour les applications basées sur les Micro-services sont publiées ma chaîne vidéo Youtube :
https://www.youtube.com/user/mohamedYoussfi
Le code source des applications est publié sur mon compte GitHUB:
https://github.com/mohamedYoussfi/
Bon apprentissage
Les Servlets
Cycle de vie d'une Servlet
Traitement des données de formulaires
Gestion de l'état avec cookies et sessions
Introduction aux JSP
Les balises JSP personnalisées
Règles de conception
GWT Principes & Techniques
Des IHM avec GWT
Des IHM avec GWT +
Communiquer avec le serveur
Internationalisation I18n
Développer un composant graphique
Historique du navigateur
Logging
Tester avec JUNIT
Divers principes avancées
JavaScript overlay types
Intégrer une appli GWT dans JavaScript
Code Splitting
Étendre la JRE Émulation
Sérialisation spécifique
Compile Reports
Support Complet sur la technologie EJB 3.1. Ce cours Traite l'architecture JEE. Les différents types EJB (Session, Entity, MDB). Des exemple complets sont aussi présentés.
Introduction aux Technologies Web élaborée par Marouan OMEZZINEMarouan OMEZZINE
Une introduction / ébauche aux technologies Web (Web, évolution, web 2.0, php, ajax...) faite dans le cadre des formations inter-membres du club Junior ENSI (http://www.junior-ensi.org/) de l'école nationale des sciences de l'informatique (http://www.ensi.rnu.tn/).
Ce support de cours contient les concepts fondamentaux de la sécurité des applications Web Statless avec Json Web Token. Des applications de mise en oeuvre de JWT et Spring Security pour les applications basées sur les Micro-services sont publiées ma chaîne vidéo Youtube :
https://www.youtube.com/user/mohamedYoussfi
Le code source des applications est publié sur mon compte GitHUB:
https://github.com/mohamedYoussfi/
Bon apprentissage
Les Servlets
Cycle de vie d'une Servlet
Traitement des données de formulaires
Gestion de l'état avec cookies et sessions
Introduction aux JSP
Les balises JSP personnalisées
Règles de conception
GWT Principes & Techniques
Des IHM avec GWT
Des IHM avec GWT +
Communiquer avec le serveur
Internationalisation I18n
Développer un composant graphique
Historique du navigateur
Logging
Tester avec JUNIT
Divers principes avancées
JavaScript overlay types
Intégrer une appli GWT dans JavaScript
Code Splitting
Étendre la JRE Émulation
Sérialisation spécifique
Compile Reports
Support Complet sur la technologie EJB 3.1. Ce cours Traite l'architecture JEE. Les différents types EJB (Session, Entity, MDB). Des exemple complets sont aussi présentés.
Introduction aux Technologies Web élaborée par Marouan OMEZZINEMarouan OMEZZINE
Une introduction / ébauche aux technologies Web (Web, évolution, web 2.0, php, ajax...) faite dans le cadre des formations inter-membres du club Junior ENSI (http://www.junior-ensi.org/) de l'école nationale des sciences de l'informatique (http://www.ensi.rnu.tn/).
Monitoring applicatif : Pourquoi et comment ?Kenny Dits
Vous êtes développeur, chef de projet technique ou même responsable et vous souhaitez avoir de la visibilité sur le fonctionnement de vos applicatifs, ou sur la plateforme sur laquelle ils sont hébergés ?
Nous étudierons comment, grâce à des outils simples (StatD / Graphite / Log BDD) et nos expériences chez M6Web, mettre en place un monitoring applicatif ultra complet.
Ce monitoring vous permettra de retrouver la vue sur vos projets, pour mieux anticiper la charge, detecter la root cause en cas d'incident et connaitre l'état de chacun de vos services ...
L'histoire d'html5 pour les développeurs windows phone 8davrous
Dans cette session, nous parcourons ensemble l'histoire HTML5 pour les développeurs Windows Phone 8. Nous verrons d'abord comment utiliser des morceaux d'HTML5 dans certaines applications natives, ce qui peut s'avérer dans certains cas exceptionnels être assez pratique. Ensuite, grâce aux possibilités d'IE10, nous verrons qu'il est également possible de créer de vraies applications vivant uniquement dans le navigateur. Pour finir, nous jetterons un oeil aux possibilités d'intégration dans l'OS grâce au template de projet HTML5 de Visual Studio 2012 ou grâce à des frameworks comme PhoneGap ou Sencha Touch 2.
Jouée pendant les MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=2d81322e-6ab2-4840-a4b1-568f1bd370f4
Javascript : "Fullstack" le développement front, le développement back, les optimisations. Un framework nait tous les jours, ces planches présentent des solutions qui, fin 2015, sont adoptées et permettent la mise en place d'applications rapides, dynamiques, ergonomiques et simples.
Google Web Toolkit 1.5 Presentation Web Creative CommonStéphane Liétard
Présentation GWT en ligne
Support de formation GWT en version 1.5. Vous pouvez le consulter en ligne. Ce support est proposé sous licence Creative Commons.
Présentation sur Ajax dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2009
Dans cette session, vous découvrirez les nouveaux standards supportés par Internet Explorer 10. Coté CSS3, on verra ainsi des choses comme grid layout, animations ou transitions. Coté nouvelles APIs, nous passerons un peu de temps sur la gestion du drag-n-drop, IndexedDB, la gestion de l’Application Cache ou bien encore la gestion du tactile. Pour découvrir tout cela, nous verrons à chaque fois de petits exemples d’illustration ainsi que des sites plus « complexes » les mettant en œuvre.
Les dernières avancées html5 & css3 en action !davrous
Dans cette session, vous découvrirez les nouveaux standards supportés par Internet Explorer 10. Coté CSS3, on verra ainsi des choses comme grid layout, animations ou transitions. Coté nouvelles APIs, nous passerons un peu de temps sur la gestion du drag-n-drop, IndexedDB, la gestion de l'Application Cache ou bien encore la gestion du tactile. Pour découvrir tout cela, nous verrons à chaque fois de petits exemples d'illustration ainsi que des sites plus « complexes » les mettant en oeuvre.
Présentation jouée pendant les MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=4a174b26-32b7-4d4c-8523-ad3a3228ef53
Retrouvez tous les exemples de code sur mon blog ici: http://blogs.msdn.com/b/davrous/archive/2012/11/03/demos-links-amp-articles-associated-to-htm5-amp-css3-latest-features-in-action-build-3-114.aspx
Considérations du génie logiciel sur le Web 2.0, dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'École de technologie supérieure, Montréal, Automne 2009
L'IA connaît une croissance rapide et son intégration dans le domaine éducatif soulève de nombreuses questions. Aujourd'hui, nous explorerons comment les étudiants utilisent l'IA, les perceptions des enseignants à ce sujet, et les mesures possibles pour encadrer ces usages.
Constat Actuel
L'IA est de plus en plus présente dans notre quotidien, y compris dans l'éducation. Certaines universités, comme Science Po en janvier 2023, ont interdit l'utilisation de l'IA, tandis que d'autres, comme l'Université de Prague, la considèrent comme du plagiat. Cette diversité de positions souligne la nécessité urgente d'une réponse institutionnelle pour encadrer ces usages et prévenir les risques de triche et de plagiat.
Enquête Nationale
Pour mieux comprendre ces dynamiques, une enquête nationale intitulée "L'IA dans l'enseignement" a été réalisée. Les auteurs de cette enquête sont Le Sphynx (sondage) et Compilatio (fraude académique). Elle a été diffusée dans les universités de Lyon et d'Aix-Marseille entre le 21 juin et le 15 août 2023, touchant 1242 enseignants et 4443 étudiants. Les questionnaires, conçus pour étudier les usages de l'IA et les représentations de ces usages, abordaient des thèmes comme les craintes, les opportunités et l'acceptabilité.
Résultats de l'Enquête
Les résultats montrent que 55 % des étudiants utilisent l'IA de manière occasionnelle ou fréquente, contre 34 % des enseignants. Cependant, 88 % des enseignants pensent que leurs étudiants utilisent l'IA, ce qui pourrait indiquer une surestimation des usages. Les usages identifiés incluent la recherche d'informations et la rédaction de textes, bien que ces réponses ne puissent pas être cumulées dans les choix proposés.
Analyse Critique
Une analyse plus approfondie révèle que les enseignants peinent à percevoir les bénéfices de l'IA pour l'apprentissage, contrairement aux étudiants. La question de savoir si l'IA améliore les notes sans développer les compétences reste débattue. Est-ce un dopage académique ou une opportunité pour un apprentissage plus efficace ?
Acceptabilité et Éthique
L'enquête révèle que beaucoup d'étudiants jugent acceptable d'utiliser l'IA pour rédiger leurs devoirs, et même un quart des enseignants partagent cet avis. Cela pose des questions éthiques cruciales : copier-coller est-il tricher ? Utiliser l'IA sous supervision ou pour des traductions est-il acceptable ? La réponse n'est pas simple et nécessite un débat ouvert.
Propositions et Solutions
Pour encadrer ces usages, plusieurs solutions sont proposées. Plutôt que d'interdire l'IA, il est suggéré de fixer des règles pour une utilisation responsable. Des innovations pédagogiques peuvent également être explorées, comme la création de situations de concurrence professionnelle ou l'utilisation de détecteurs d'IA.
Conclusion
En conclusion, bien que l'étude présente des limites, elle souligne un besoin urgent de régulation. Une charte institutionnelle pourrait fournir un cadre pour une utilisation éthique.
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...OCTO Technology
par Claude Camus (Coach agile d'organisation @OCTO Technology) et Gilles Masy (Organizational Coach @OCTO Technology)
Les équipes infrastructure, sécurité, production, ou cloud, doivent consacrer du temps à la modernisation de leurs outils (automatisation, cloud, etc) et de leurs pratiques (DevOps, SRE, etc). Dans le même temps, elles doivent répondre à une avalanche croissante de demandes, tout en maintenant un niveau de qualité de service optimal.
Habitué des environnements développeurs, les transformations agiles négligent les particularités des équipes OPS. Lors de ce comptoir, nous vous partagerons notre proposition de valeur de l'agilité@OPS, qui embarquera vos équipes OPS en Classe Business (Agility), et leur fera dire : "nous ne reviendrons pas en arrière".
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Laurent Speyser
(Conférence dessinée)
Vous êtes certainement à l’origine, ou impliqué, dans un changement au sein de votre organisation. Et peut être que cela ne se passe pas aussi bien qu’attendu…
Depuis plusieurs années, je fais régulièrement le constat de l’échec de l’adoption de l’Agilité, et plus globalement de grands changements, dans les organisations. Je vais tenter de vous expliquer pourquoi ils suscitent peu d'adhésion, peu d’engagement, et ils ne tiennent pas dans le temps.
Heureusement, il existe un autre chemin. Pour l'emprunter il s'agira de cultiver l'invitation, l'intelligence collective , la mécanique des jeux, les rites de passages, .... afin que l'agilité prenne racine.
Vous repartirez de cette conférence en ayant pris du recul sur le changement tel qu‘il est généralement opéré aujourd’hui, et en ayant découvert (ou redécouvert) le seul guide valable à suivre, à mon sens, pour un changement authentique, durable, et respectueux des individus! Et en bonus, 2 ou 3 trucs pratiques!
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...OCTO Technology
Par Nicolas Bordier (Consultant numérique responsable @OCTO Technology) et Alaric Rougnon-Glasson (Sustainable Tech Consultant @OCTO Technology)
Sur un exemple très concret d’audit d’éco-conception de l’outil de bilan carbone C’Bilan développé par ICDC (Caisse des dépôts et consignations) nous allons expliquer en quoi l’ACV (analyse de cycle de vie) a été déterminante pour identifier les pistes d’actions pour réduire jusqu'à 82% de l’empreinte environnementale du service.
Vidéo Youtube : https://www.youtube.com/watch?v=7R8oL2P_DkU
Compte-rendu :
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO Technology
En cette année 2024 qui s’annonce sous le signe de la complexité, avec :
- L’explosion de la Gen AI
-Un contexte socio-économique sous tensions
- De forts enjeux sur le Sustainable et la régulation IT
- Une archipélisation des lieux de travail post-Covid
Découvrez les Tech trends incontournables pour délivrer vos produits stratégiques.
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
Java script Introduction
1. UE: DEVELOPPEMENT WEB
ET MULTIMEDIA 2
(1)Programmation Web2
(2)Atelier Développement Web
et Multimédia II
Technologies de l’Informatique (TI)
TC-Semestre 2
Mohamed Mhamdi
Iset de Sousse(Tunisie)
5. page web statique - page web
dynamique
• Une page web statique est une page web dont le
contenu ne varie pas en fonction des
caractéristiques de la demande, c'est-à-dire qu'à
un moment donné tous les internautes qui
demandent la page reçoivent le même contenu.
• À l'inverse, une page web dynamique est générée
à la demande et son contenu varie en fonction
des caractéristiques de la demande (heure,
adresse IP de l'ordinateur du demandeur,
formulaire rempli par le demandeur, etc.) qui ne
sont connues qu'au moment de sa consultation.
6. Mode de communication Client-
serveur
(Ce mode permet d’expliquer le dynS vs dynC )
• La signification d’une page dynamique ne peut
s’expliquer que dans le contexte d’une communication
client-serveur
• environnement client-serveur= un mode de
communication à travers un réseau entre
plusieurs programmes ou logiciels.
– l'un, qualifié de client, envoie des requêtes.
– l'autre ou les autres, qualifiés de serveurs, attendent les
requêtes des clients et y répondent(réponse!!!!).
– Plusieurs types de serveurs:
• un serveur de données à communiquer des données stockées dans une base de données
• un serveur de fichiers permet de stocker et consulter des fichiers sur le réseau
• un serveur de messagerie électronique envoie des mails à des clients de messagerie ;
• un serveur web publie des pages web demandées par des navigateurs web ;
7. réponse à la requête et type du
dynamisme
• Une page dynamique contient forcement une
réponse à une requête émanée du client:
– En cas où la réponse est générée par le serveur on
parle alors d’une page dynamique coté serveur
– En cas où la réponse est générée par le client on
parle du dynamisme coté client
8. Serveur Web
Structure
• Composition d’un serveur Web:
– Un daemon HTTP + virtual host(protocole HTTP):
écoute+analyse+extraction+envoi réponse
– Autres composants Système (moteur de rendu+
moteur de script) : vérification de l’existence d’un
script+ exécution du script+génération de la page
web dynamique;
– Pages Web Statiques (HTML+CSS)
– Pages Web
Dynamiques(HTML+CSS+Scripts+autres ..)
10. Serveur Web
Moteur de rendu(2)
Avec un rendu côté client:
• votre demande initiale
(Get) charge la mise en page
(HTML), le code CSS et code
JavaScript de la page HTML.
• Mais tout ou partie du
contenu ne sera pas inclus.
• Au lieu de cela, le JavaScript
fait une autre demande,
obtient une réponse
(probablement en XML ou
JSON), et génère le code
HTML approprié.
Avec un rendu côté serveur, la
demande initiale charge:
-La mise en page,
- le code CSS,
-le contenu de la pages.
Rendering coté client ou serveur ?
La décision architecturale la plus importante
À prendre pour votre projet! Tendance:Hybride
11. Rendu du serveur suite à la demande
d’une page web(1)
• Les différents cas:
– ScriptServ+html: (rendu=html)
– ScriptServ+ScriptCli+Html: (rendu=ScriptCli+html)
– ScriptServ+Applet+Html: (rendu=Applet+html)
– Applet + Html: (rendu=Applet+html)
– ScriptCli+html: (rendu=ScriptCli+html)
– ScriptCli+applet+HTML:
(rendu=ScriptCli+applet+html)
12. Rendu du serveur suite à la demande
d’une page web(2)
Certains langages permettent de développer à la fois les aspects client et
serveur. C'est le cas d'Ocsigen, de Hop ou bien encore du Server-Side
JavaScript.
14. Dynamisme coté serveur vs coté client
• À l'inverse, une page
web dynamique est
générée à la demande
et son contenu varie en
fonction des
caractéristiques de la
demande
• on utilise des langages
qui offrent la possibilité
de réagir à certaines
actions de l'utilisateur
sans avoir à questionner
le serveur
15. Technologies pour pages Web
dynamiques(1)
(1)Comme il Il y a des langages pour la programmation des
pages web statiques qui sont Les langages de balisage
(HTML, XHTML,XML)
(2)Il ya d’autres qui sont fait pour la programmation des pages
dynamiques
(3)En réalité il ne s’agit pas uniquement des langages mais de
technologies
• Ce type de Technologies est utilisé pour une plus grande
interaction entre un client et un serveur
• Nous allons tracer un bref aperçu de différentes
technologies possibles dans la programmation dynamique
côté client ou côté serveur.
16. Langages pour pages Web
dynamiques(2)
• Insertion d'objets
– Images ( gifs animés.)
– Multimédia (son ou vidéo)
– Animation Flash (animations dans
un format vectoriel propriétaire +ActionScript(1))
– Applet Java (appliquette)
– ActiveX (applications développée par Microsoft.)
18. Programmation web côté client
• Côté client (en général le navigateur web): on
utilise des langages qui offrent la possibilité de
réagir à certaines actions de l'utilisateur:
– En exploitant la puissance de traitement locale du
client (eclatement au niveau du traitement)
– sans avoir à questionner le serveur.(parfois)
19. Les technologies de programmation
Web dynamique côté client
• Les technologies natives aux navigateurs
– HTML5 : le langage client du Web
– CSS 3 pour la présentation
– JavaScript et Framework JavaScript pour
l'interactivité
• Les technologies à base de plugins
– Applet Java
– Contrôle ActiveX
– Flash
21. Scripts vs Applets(2)
(1)Intaller java
(2) Activer javaplugin dans le
browser: appel du panneau
de configuration java
demarrer/programme/java/c
onfiguration java/
securité/activer le contenu
java dans le navigateur
(3) Autoriser l’execution des
applets java:
Chrome/paramètres/plug-
ins/ autoriser tout le contenu
du plug-in
22. Scripts vs Applets(3)
<html>
<!–- COMP519 js03.html 11.10.14 -->
<head>
<title>Folding Puzzle</title>
</head>
<body>
<script type="text/javascript">
var distanceToSun = 93.3e6*5280*12;
var thickness = .002;
var foldCount = 0;
while (thickness < distanceToSun) {
thickness *= 2;
foldCount++;
}
document.write("<p>Number of folds = " +
foldCount+"</p>");
</script>
</body>
</html>
(1) Autoriser l’execution
des applets java:
Chrome/paramètres/java
script/ autoriser tous les
sites à exécuter
JavaScript
24. Insertion du code JavaScript
dans une page HTML(1)
• La mise en page en utilisant HTML a la
tendance d’être assez statique.
• on peut ajouter du comportement
dynamique à une page en écrivant un code
JavaScript.
• Il ya plusieurs façons afin de pouvoir inclure
du JavaScript dans une page Web,
• La majorité utilisent toutes la balise <script>
(sauf une).
26. Insertion du code JavaScript
dans une page HTML(3)
• Méthode1:
• Ecrire le code JavaScript dans la page en tant
qu’une partie du contenu d'un élément
<script>.
<script type="text/javascript">
alert('I am a line of JavaScript');
</script>
30. Insertion du code JavaScript
dans une page HTML(7)
• Méthode2:
• Enregistrer le JavaScript dans un fichier séparé et
le référencé en utilisant l’attribut src de l’élément
<script>.
• <script type="text/javascript"
src="alertme.js"></script>
• <script type="text/javascript"
src="http://ajax.contoso.com/ajax/jQuery/jquery-
1.7.2.js">
</script>
31. La balise <script>
• La balise <script> possède trois attributs:
– L’attribut type, qui identifie le langage script à
utiliser; (la valeur par défaut est: text/javascript).
– L’attribut src qui identifie le fichier script à
télécharger(on doit pas l’utiliser en cas ou le scripy
fait partie du contenu de la balise <script>).
– L’attribut charset, qui identifie le type d’ encodage
(for example, utf-8, Shift-JIS) du fichier script
externe; (dans le cas ou src n’est pas utilisé l’attribut
charset ne doit pas être utilisé).
32. La balise <noscript>
• Parfois pour des raisons de
sécurité la fonctionnalité
JavaScript est désactivée
• Dans ce cas n’importe quelle
partie de la page web utilisant
JavaScript ne pourra pas
s’executer correctement
• On peut alerter alors l’utilisateur
à propos de ce cas en utilisant la
balise <noscript>.
• Cet élément permet au browser
d’afficher un message demandant
l’activation du JavaScript afin que
la page soit exécutées
correctement.
<body>
<noscript>This page
uses JavaScript. Please
enable it in your
browser</noscript>
…
Rest of page
…
<script
src="MyScripts.js"></sc
ript>
</body>
33. Les Sorties en JavaScript
• JavaScript ne dispose pas de fonctions d'impression ou
d'affichage qui sont intégrées (on utilise les API DOM, Console
etc.):
• JavaScript peut réaliser la fonction d'affichage" de différentes
façons:
– L'écriture dans une boîte d'alerte, en utilisant window.alert ().
– L'écriture dans le fichier HTML en utilisant document.write ().
– L'écriture dans un élément HTML, en utilisant innerHTML.
– L'écriture dans la console du navigateur, en utilisant console.log ().
34. Affichage1-Utilisation de window.alert ()
• On peut utiliser une
boîte d'alerte pour
afficher des données:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.alert(5 + 6);
</script>
</body>
</html>
35. Affichage2-Utilisation de Document.write()
• Exemple 1:
À des fins de test, il est
commode d'utiliser:
document.write ():
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
36. Affichage3-Utilisation de Document.write ()
• Exemple2:
L’utilisation de
Document.write ()
après un chargement
tout-entier d’un
document HTML,
va supprimer tous les
éléments
HTML existants de la
page:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button onclick="document.write(5 +
6)">Try it</button>
</body>
</html>
37. Affichage4-Utilisation console.log ()
• Dans le navigateur, on
peut utiliser la méthode
console.log () pour
afficher des données.
• On doit activer le console
du navigateur :
– On appui sur la touche F12,
– et sélectionne "Console"
dans le menu.
!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
38. Les kits de développement et leur
console
• Aujourd'hui, chaque navigateur possède un kit de
développement.
• Ces kits nous permettent de déboguer
efficacement nos codes, que ce soit pour:
– détecter des erreurs syntaxiques,
– afficher un grand nombre de valeurs dans la console,
– consulter le code HTML généré par du code,
– analyser des requêtes HTTP (entre autres) effectuées
par le navigateur,
– mesurer les performances du code,
– et bien d'autres choses encore !
39. Les kits de développement et leur
console
• Bien, à quoi ressemble un kit de développement (Chrome 34)?
• Pour ouvrir le kit de développement, appuyez sur la touche F12
40. signalisation des erreurs syntaxiques
• Créons un code syntaxiquement faux :
• // Ici nous créons une fonction JavaScript, avec
quelques erreurs de syntaxe.
functin test() {
alert('Hello !');
• Et incluons-le dans notre code HTML :
• <script>
functin test() {
alert('Hello !');
test();
• </script>
41. signalisation des erreurs syntaxiques
• affichez cette page dans votre navigateur et allez consulter la console,
vous devriez voir l'erreur suivante affichée :
• le terme SyntaxError qui mentionne une erreur syntaxique,
• le texte qui suit n'est qu'une indication sur ce qui a bien pu provoquer
cette erreur,
• À droite de ce texte, vous pouvez voir le nom du fichier concerné ainsi que
la ligne de code,
• vous pouvez cliquer dessus et votre navigateur vous amènera directement
sur la ligne qui pose problème.
42. signalisation des erreurs syntaxiques
• Tout simplement parce que l'interpréteur JavaScript
s'arrête sur la première erreur rencontrée.
• Essayez de rectifier l'erreur actuellement indiquée, vous
verrez que le navigateur vous affichera alors l'erreur
suivante sur Chrome : « Uncaught SyntaxError: Unexpected
end of input ».
43. Try et catch de JavaScript: pour la
gestion des erreurs
• L‘instruction Try permet
de définir un bloc de
code qui doit être testé
en ce qui concerne lors
de son exécution.
• L’instruction catch
permet de définir un
bloc de code à exécuter,
en cas où une erreur se
produit dans le bloc try.
<!DOCTYPE html>
<html>
<body>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.write(err.message);
}
</script>
</body>
</html>
Notes de l'éditeur
(1) Il y a aussi des langages pour pages web statiques qui sont Les langages de balisage (HTML, XHTML,XML)
La signification d’une page dynamique ne peut s’expliquer que dans le contexte d’une communication client-serveur
Une page dynamique contient forcement une réponse à une requête émanée du client
En cas où la réponse est générée par le serveur on parle alors d’une page dynamique coté serveur
En cas où la réponse est générée par le client on parle du dynamisme coté client
Mode maître-esclave;client-serveur; distribué (système n-tiers, système cloud)
Ces modes agissent sur l’eclatement du système d’inf de point de vue:données,traitement, contrôle (securité).
Un mode de communication entre quoi et quoi?
Rôle du client? Exemple de requêtes client ..
Rôle du serveur?
Exemple de chaque type de serveur?
Un daemon: à l’écoute mode scrutation ou mode interruption
(1) Le serveur http est à l’ecoute des requêtes Http
Il les detecte
Il les analyse
Il recupère le fichier html correspondant
Il fait passer ce fichier au moteur de rendu
Le serveur http récupère le fichier ‘html’ de défini dans 2] le Virtual Host.
En gros l'avantage des virtual hosts, c'est que tu peux installer plusieurs sites web sur une même machine, et donc y configurer plusieurs noms de domaine avec la même adresse IP.
Ou il faut combiner deux technologies de programmation: l’une coté client et l’autre coté serveur
Par exemple, le JavaScript d'une page Web peut réagir aux saisies de l'utilisateur dans un formulaire (et vérifier le format des données).
Comme il Il y a des langages pour la programmation des pages web statiques qui sont Les langages de balisage (HTML, XHTML,XML)
Il ya d’autres qui sont fait pour la programmation des pages dynamiques
En réalité il ne s’agit pas uniquement des langages mais de technologies
Les bases des technologies web sont le:
- protocole réseau HTTP (abr. de Hypertext Transfer Protocol), normalisé par l'IETF
et le format de document HTML (abr. de Hypertext Markup Language), normalisé par le W3C.
Les technologies web permettent aujourd'hui de créer des applications informatiques (des applications reseaux).
Apparition des navigateurs: CERN httpd, Mosaic.le navigateur Netscape Navigator, IE, Mozilla Firefox.
Suite aux demandes des développeurs de sites web de la création d'une norme pour les sites dynamiques, la a mise en place de Common Gateway Interface (CGI) fut discuté à la 5e réunion internationale du WWWW, du 6 au 10 mai 1996 à Paris et organisée par le w3c7.
Au lieu d'envoyer le contenu d'un fichier (fichier HTML, image), le serveur HTTP exécute un programme, puis retourne le contenu généré. CGI est le standard industriel qui indique comment transmettre la requête du serveur HTTP au programme, et comment récupérer la réponse générée. Un exemple classique de paramètre est la chaîne de caractères contenant les termes recherchés auprès d'un moteur de recherche.
Comme cette technologie requiert le lancement d'un nouveau processus à chaque requête, elle cause une charge de traitement évitable. Ceci a eu pour effet la création d'autres technologies plus efficaces. FastCGI est une évolution basée sur CGI qui permet de ne lancer le programme CGI qu'une seule fois, et non pas à chaque requête concernée ; cette technique nécessite une petite bibliothèque logicielle qui a été développée pour les principaux langages utilisés (C, Perl...).
Une autre solution est d'intégrer le programme directement dans le serveur HTTP sous forme de module, ceci nécessitant une adaptation bien plus lourde et qui est propre au serveur HTTP. C'est le cas avec Apache qui propose des dizaines de modules pour interpréter des langages, se connecter à des bases de données, etc.
http://staffweb.cms.gre.ac.uk/~mk05/web/XHTML/forms.html
http://docstore.mik.ua/orelly/java-ent/servlet/ch01_01.htm
[modifier | modifier le code]
Voir la catégorie : Langage pour pages Web dynamiques.
.
technique pour rendre une page web plus dynamique ..
permettre de 'dynamiser' un site
ils exigeront l'installation d'un "plugin" pour être lus.
ActionScript est un langage de programmation utilisé au sein d'applications clientes (comme Adobe Flash et Adobe Flex)/ ActionScript est un langage de script, orienté objet et prototype, basé sur ECMAScript /
Ce langage permet d'ajouter de l'interactivité aux animations Flash, en répondant aux actions de l'utilisateur, et en pilotant les movie clip (conteneurs graphiques permettant de hiérarchiser les animations), et les différents objets multimédias (images, son, vidéo…).
Il permet également la communication de l'application avec le serveur, notamment par le chargement de fichiers ou la communication avec un langage serveur comme le PHP.
L'utilisation de Flash dans une page web nécessite l'installation du plug-in "Flash player" qui n'est pas disponible pour tous les systèmes.
Flash (de Adobe Systems - Macromedia) est un programme qui permet de créer des animations dans un format vectoriel propriétaire relativement léger. Le programme génère un fichier avec l'extension .fla qui est le fichier de travail et qui sera 'compilé' en un fichier avec l'extension .swf. Swift est un autre programme générant des fichiers swf hors de la sphère Macromedia.
Dans une page web, une animation Flash (fichier avec extension .swf) peut être intégrée comme partie de la page (une publicité, un menu, ...) ou l'ensemble de la page peut être en flash mais il y aura toujours un squelette HTML.
Flash permet de créer des animations de qualité, permet une certaine interaction avec l'utilisateur grâce au langage de programmation ActionScript (dérivé de ECMAScriptcomme JavaScript). Les dernières versions de Flash permettent également l'interfaçage avec une base de données.
Par exemple, le JavaScript d'une page Web peut réagir aux saisies de l'utilisateur dans un formulaire (et vérifier le format des données).
Exercice
Code source:.c -> Code executable:.exe
(1)Intaller java
(2) Activer javaplugin dans le browser: appel du panneau de configuration java
demarrer/programme/java/configuration java/ securité/activer le contenu java dans le navigateur
(3) Autoriser l’execution des applets java
Chrome/paramètres/plug-ins/ autoriser tout le contenu du plug-in
Detail du flux 5 du schéma structure du serveur
Les cas:
ScriptServ+html: (retour=html)
ScriptServ+ScriptCli+Html: (retour=ScriptCli+html)
ScriptServ+Applet+Html: (retour=Applet+html)
Applet + Html: (retour=Applet+html)
ScriptCli+html: (retour=ScriptCli+html)
ScriptCli+applet+HTML: (retour=ScriptCli+applet+html)