Internet / XML / SOA, Web, développement

turnmaryΛογισμικό & κατασκευή λογ/κού

5 Ιουλ 2012 (πριν από 4 χρόνια και 11 μήνες)

844 εμφανίσεις

Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 1 / 65
Internet / XML / SOA, Web, développement
Le Web, aujourd'hui incontournable dans le monde professionnel, donne accès à l'information,
mais également à une multitude d'applications d'entreprise ou de services grand public. Les
filières proposées vous apporteront toutes les connaissances nécessaires pour concevoir des
sites Web performants et conviviaux, mettant l'accent aussi bien sur le design, les aspects
éditoriaux que sur les techniques de développement ou encore de référencement. Elles
intègrent les technologies les plus récentes comme Ajax, Flash, ActionScript 3, Flex, les
dernières versions des ateliers de développements et Frameworks du monde Java, .NET, PHP
ou encore Macromédia/Adobe.
Stages Pratiques
Développer un site Web, synthèse pratique.
( p3 )
Dreamweaver CS5, prise en main.
( p5 )
Dreamweaver CS5, développer un site Web.
( p6 )
Javascript, HTML dynamique.
( p8 )
Ajax, programmation côté client.
( p10 )
Javascript, perfectionnement pour le Web 2.0.
( p12 )
Dojo Toolkit, créer des applications Ajax/ RIA en JavaScript.
( p14 )
HTML 5, CSS3, nouveautés et développement RIA.
( p16 )
HTML 5, les API JavaScript.
( p17 )
Accessibilité, enjeux et mise en œuvre.
( p18 )
Web 2.0, développer des applications. ( p19 )
Créer des applications multiplateformes pour mobiles.
( p20 )
Flash et ActionScript.
( p22 )
ActionScript 3.0, programmation.
( p24 )
Flex et ActionScript 3.0, niveau 1.
( p26 )
Flex et ActionScript 3.0, niveau 2.
( p28 )
PHP 5, développer un site Web dynamique.
( p30 )
PHP 5, pour les développeurs objet.
( p32 )
L'essentiel de Java et de l'objet.
( p33 ) Dévelop-
per en Java.
( p35 )
Développer une application Web 2.0 /GWT.
( p37 )
Java, développement de servlets et JSP.
( p39 )
Framework JavaServer Faces.
( p41 )
Struts 2, développer des applications Web MVC.
( p43 )
Visual Basic .NET.
( p45 )
C#, développer en .NET.
( p47 )
ASP.NET 4.0/3.5, niveau 1.
( p49 )
Programmation Web MVC en .Net.
( p51 )
ASP.NET 4.0/3.5, niveau 2.
( p53 )
Maîtriser Silverlight 4.
( p55 )
PHP 5, développer un site Web dynamique.
( p56 )
PHP 5, pour les développeurs objet.
( p58 )
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 2 / 65
PHP 5, développement Web avec Symfony.
.......................... ( p59 )
Ruby On Rails, développement Web. ... ( p61 )
Grails, developpement d'applications Web.
.......................... ( p62 )
Langage Perl..... ( p63 )
Cycle certifiant Développeur Web côté client..... ( p64 )
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 3 / 65
Stage pratique.
Réf : DSW
Participants
Cette formation pratique
s'adresse aux informaticiens
qui souhaitent concevoir une
application client intranet/
Internet.
Pré-requis
Connaissances de base en
architectures techniques.
Développer un site Web, synthèse pratique
OBJECTIFS
Ce cours, très pratique, vous présentera l'ensemble des technologies Internet. Il vous expliquera le fonctionnement des
services Web et des différents langages associés, HTML, XML..., les technologies du Web 2.0, ainsi que les techniques
graphiques, l'interrogation des bases de données et l'administration. Les exercices vous permettront d'appréhender d'une
manière très concrète toutes les phases de la réalisation d'un site Web.
1) Les technologies du site Web
2) Administration et sécurisation du serveur web
3) Création de pages Web : HTML, XML, XHTML
4) Les formulaires
5) Conception graphique et multimédia
6) Accessibilité et ADAE
7) Ergonomie d'une application Web
8) Pages dynamiques
9) Les technologies Web 2.0
10) Le langage JavaScript et DHTML
1) Les technologies du site Web
- Les serveurs Web (Apache, IIS). Wampserver. Les protocoles TCP/IP, HTTP. FTP. Les URL. Les services réseaux
complémentaires (DNS, DHCP, ...).
- Achat et gestion du nom de domaine. Choisir un hébergeur. Architecture technique. Organisation. Les services Web.
2) Administration et sécurisation du serveur web
- Protocoles HTTPS, SSL.
- Les certificats, le firewall, le proxy.
- Paiement sécurisé.
- Mise en oeuvre de l'ensemble des opérations d'administration effectuées par le webmaster (nom de domaine, transfert ftp,
sécurité, création de messages d'erreur personnalisés, gestion des fichiers journaux, suivi et analyse des statistiques).
3) Création de pages Web : HTML, XML, XHTML
- Présentation des langages HTML, XHTML, HTML5. Différences entre les navigateurs.
- Structure, liens, hypertexte.
- Les images, les cadres, les feuilles de style. Les formats vectoriels.
- Tableaux et calques.
- Techniques pour réussir son référencement sur les moteurs de recherche. Les méta-tags.
- Définition et intégration de composants Plug-ins. Flash, Silverlight, Java, ActiveX.
Travaux pratiques
Réalisation de pages complexes HTML avec Dreamweaver. Création de feuilles de style, préparation de la page au
référencement.
4) Les formulaires
- Contraintes et avantages. Syntaxe, structure, champs de saisie, boutons, cases à cocher, listes, zones de texte, sélections
de fichier.
Travaux pratiques
Réalisation d'un formulaire avec envoi des données vers la messagerie et une base de données.
5) Conception graphique et multimédia
- Créer une charte graphique. Intégrer une charte graphique.
- Mise en oeuvre d'outils graphiques (Fireworks) pour concevoir une interface évoluée.
- Développement d'animations avec Flash.
- Les ressources graphiques GIF, JPEG, PNG, Shockwave.
Travaux pratiques
Conception d'un modèle de page HTML avec Fireworks, composant Flash. Intégration de plug-ins multimédias pour
visualiser des composants Flash, Shockwave.
6) Accessibilité et ADAE
- Norme. Impact sur le développement. Mettre en conformité le site avec l'accessibilité. Outils de test. Labels Accessiweb.
Outils de validation en ligne.
Travaux pratiques
Mise en oeuvre d'outils de test et audit.
7) Ergonomie d'une application Web
- Charte graphique. Règles d'usability. Ecueils graphiques à éviter pour faire un site efficace (navigation, mise en page,
contraintes techniques). Modèles de pages.
Travaux pratiques
Définir le cahier des charges de la charte graphique.
8) Pages dynamiques
- Différence entre serveur web et serveur d'application.
- Mode de fonctionnement, sécurité. Les méthodes GET et POST. Les variables serveur.
- Les serveurs web du marché.
- Les langages de scripts serveur et leurs plateformes de développement : ASP, ASPX, JSP, PHP.
- Appel de services Web.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 4 / 65
- Intégration de requêtes SQL dans la page pour insérer, supprimer, modifier des données de la base.
Travaux pratiques
Développer des pages dynamiques, interrogation d'une base de données, de services web.
9) Les technologies Web 2.0
- Présentation des technologies Web 2.0 (blogs, rss, wiki...).
- Les technologies émergentes d'interfaces graphiques : XUL, XAML, Flex, HTML5.
- Présentation et mise en oeuvre de solutions Rich internet Application (RIA) et Rich Desktop Application (RDA).
- Présentation des solutions émergentes Adobe AIR, Microsoft SilverLight, framework Google.
Travaux pratiques
Démonstration et mise en oeuvre de ces multiples technologies.
10) Le langage JavaScript et DHTML
- Syntaxe du langage. Contrôles de saisie d'un formulaire. Effets de rollover sur les images. Gestion des cookies. Mise en
oeuvre du DHTML. Effets spéciaux en DHTML.
- DOM et Ajax.
- Présentation Ecmascript et émergence du langage Actionscript.
- Présentation des offres du marché à base de Javascript (Google API, Widgets...).
- Récupérer, savoir débuguer vos programmes.
Travaux pratiques
Utilisation du JavaScript pour ajouter des effets DHTML et des contrôles sur formulaire, gestion d'événements en JavaScript
Intégration de scripts existants. Gestion de cookies.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 5 / 65
Stage pratique
Réf : DCS
Participants
Ce stage s'adresse à tous les
internautes et webmasters
désirant acquérir de bonnes
pratiques de création de site.
Pré-requis
Aucune connaissance
particulière.
Dreamweaver CS5, prise en main
OBJECTIFS
Vous apprendrez à utiliser l'atelier Dreamweaver CS5 d'Adobe, notamment pour préparer des pages HTML et XHTML
simples et améliorer leur aspect graphique avec des feuilles de styles CSS. A l'issue de ce cours, vous serez en mesure de
créer, maintenir et promouvoir des sites Web de qualité.
1) Rappels du Web
2) Dreamweaver
3) Création de pages simples
4) Accessibilité et Web usability
5) Mise en forme avancée avec CSS
6) Introduction au DHTML
1) Rappels du Web
- Principaux protocoles d'un site web (HTTP, FTP, SMTP, POP3, IMAP). Principes : client-serveur et site Web.
- Navigateurs Web (MSIE, Mozilla Firefox).
- Principaux serveurs HTTP (Apache, IIS).
- Les URL (structure, méthode GET, accès localhost).
- Le langage HTML.
Travaux pratiques
Exploration de sites à partir de deux navigateurs. Démons-tration de l'interface IIS. Paramétrage d'un site local. Modification
manuelle des paramètres d'une URL en GET.
2) Dreamweaver
- Présentation de la gamme Adobe. Prise en main de Dreamweaver CS5 (démarrage, espace de travail, paramétrage,
première page, publication, tests).
Travaux pratiques
Préparation de l'environnement de travail (espace, dossiers). Création d'une première page. Publication distante en FTP.
3) Création de pages simples
- Les textes (principales balises, casse, fonte, couleur, paragraphes, titres...). Les images (GIF, JPG et PNG, insertions,
bordures, zones réactives...).
- Les hyperliens (url, cibles, ancres...).
- Propriétés de la page (fonds, ancres, ascenseurs...).
- Mise en forme à l'aide de tableaux.
Travaux pratiques
Création d'une page comportant des textes, liens et images.
4) Accessibilité et Web usability
- Qu'est-ce que l'accessibilité ? (technique et handicap, lois, initiatives publiques, privées...).
- Importance du (X)HTML. Séparation sémantique (contenu, forme, interactivité).
- Qu'est-ce que la web usability ? (ergonomie globale).
- Importance de l'apparence (charte, best practices...).
- Importance du contenu et référencement (méta-tags).
- Les outils d'évaluation de l'ergonomie.
Travaux pratiques
Tests et rapports d'accessibilité avec Dreamweaver. Définition d'une charte graphique. Visite de quelques sites de
référencement.
5) Mise en forme avancée avec CSS
- Qu'est-ce qu'un CSS ? (définition, fichier...)
- Création, utilisation, liaison, import. Mise en page à l'aide de divisions logiques (positions relatives et absolues...).
- Maintenance et nettoyage du code.
Travaux pratiques
Création de trois pages liées entre elles par une page sommaire, avec barre de navigation...
6) Introduction au DHTML
- Qu'est-ce que JavaScript ? Découverte d'effets Spry.
Travaux pratiques
Test simple de déclenchement JavaScript. Mise en oeuvre de quelques effets Spry sur les pages déjà créées.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 6 / 65
Stage pratique
Réf : DCSW
Participants
Ce stage pratique s'adresse
à tous les informaticiens
désireux de maîtriser les
techniques permettant de
développer un site Web et de
construire une interface Web
interactive et dynamique.
Pré-requis
Connaissances de base
des composants d'une
architecture Web.
Dreamweaver CS5, développer un site Web
OBJECTIFS
Dreamweaver est l'atelier de conception de pages Web le plus répandu sur le marché. En découvrant ses fonctionnalités,
vous apprendrez à maîtriser l'éditeur de pages XHTML/HTML, la mise en forme graphique au moyen des feuilles de style
CSS, tout en prenant en compte l'accessibilité des sites Web. Vous utiliserez le produit pour intégrer des technologies côté
client (JavaScript, applet Java, Flash, plug-ins, composant ActiveX) et gérer les interactions avec des bases de données.
A l'issue de ce cours, vous serez en mesure de créer vos propres sites Web et aurez découvert toutes les particularités de
Dreamweaver CS5.
1) Rappels Web
2) Le studio Dreamweaver
3) Composition de pages à l'aide des ateliers
4) Design et accessibilité
5) Intégration de composants média
6) JavaScript
7) Accès aux bases de données et XML
8) Authentification utilisateur
1) Rappels Web
- Les protocoles d'un site web : HTTP, FTP, NNTP, SMTP, POP3.
- Fonctionnement d'un site Web.
- Les sites Intranet, Internet, Extranet, B2B, B2C. Impact sur les technologies.
- Plateforme d'hébergement, navigateurs, Firewall.
- Le langage HTML, rôle et structure des URL.
- Paramétrage du poste client et serveur.
Travaux pratiques
Paramétrage du navigateur, du serveur Web, création d'alias.
2) Le studio Dreamweaver
- Présentation de la gamme Macromedia. Couplage Dreamweaver / Fireworks.
- Environnement de test.
- Prise en main de Dreamweaver. Paramétrage de l'espace de travail, de l'interface de l'atelier. Enrichir les menus
Dreamweaver.
- Création d'un site Web : choix techniques, compatibilité.
- Conception graphique HTML : les images et les zones sensibles, liens, ancres, méta-tags, formatage graphique, tableaux,
paragraphes, imports externes, convertisseurs Word.
- Description du langage HTML et la dernière version, XHTML.
- Les versions XHTML 1.0, XHTML mobile.
- Publication du site et optimisation du code (nettoyage du code).
- Travail en équipe et les " Design Notes ".
Travaux pratiques
Création d'un espace de projet de site Web. Découverte de l'éditeur graphique et construction graphique de pages.
Développement de pages XHTML.
3) Composition de pages à l'aide des ateliers
- Création d'un modèle de page. Contrôles sur les zones modifiables. Utilisation des modèles PHP, WML, HTML...
- Import externe de pages.
- Les feuilles de styles CSS-1, CSS-2. Import, partage construction, utilisation.
- Création de formulaires (zones de texte, checkbox, combobox, radio, upload), les méthodes GET et POST et les actions
associées. Contrôles de saisie avec le Framework SPRY.
- Les méta-tags de la page et le référencement.
- Construction de cadres (frames), propriétés, modifications, interactions entre cadres.
Exercice
Création de CSS, tableaux, cadres. Import de pages. Création de formulaire et appel de serveur.
4) Design et accessibilité
- Construction de la charte graphique. Importer une charte graphique dans le projet.
- Règles " d'utilisabilité " : points de composition à respecter.
- Création d'un modèle de page avec Fireworks.
- Accessibilité et prise en charge de la priorité 2 du WAC/W3C.
Exercice
Test de compatibilité XHTML et d'accessibilité. Création d'un modèle à partir de Fireworks. Reproduire techniquement une
charte graphique fournie.
5) Intégration de composants média
- Animation graphique : mise en oeuvre de scénario, rollover.
- Intégration de composants graphiques : Flash, Applet, ActiveX, Plug-ins, vidéo Flash.
- Utilisation de l'inspecteur de tags.
Exercice
Création de contrôles en JavaScript, intégration de multiples composants multimédias.
6) JavaScript
- Syntaxe JavaScript. Les objets Script.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 7 / 65
- Création dynamique de code JavaScript et association aux événements. Débogage de code. Téléchargement de scripts
JavaScript.
Travaux pratiques
Contrôles sur les formulaires, ouverture de pop-up, traitement sur les layers.
7) Accès aux bases de données et XML
- Paramétrage de la connexion ODBC. Consultation de la base de données (données, types) avec l'éditeur SGBD de
Dreamweaver.
- Les objets serveurs pour la gestion dynamique des bases de données : insertion dans une table, suppression d'un
enregistrement, modification d'un enregistrement.
- Interrogation SQL sur une table. Préparation et personnalisation des requêtes à l'aide de l'assistant. Les barres et états de
navigation.
- Manipulation des pages principales/détails.
- Récupération des résultats et manipulation des RecordSet. Génération des tableaux dynamiques de résultats. Utilisation
des tables pour générer des formulaires.
- Construction de pages XSLT.
- Création graphique d'un appel Ajax avec SPRY Dataset.
Travaux pratiques
Création d'une connexion à une base, gestion de la base (insert, update, delete, select). Création dynamique de formulaires
avec recherche vers une base.
8) Authentification utilisateur
- Gestion des formulaires de login. Raccordement automatique d'une table d'authentification au site Web. Contrôle
conditionnel d'accès aux pages. Variable de session.
Travaux pratiques
Création d'une table d'utilisateurs avec la génération de pages de login.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 8 / 65
Stage pratique
Réf : DHL
Participants
Ce stage pratique s'adresse
à tous concepteurs de
sites Web et informaticiens
désireux d'exploiter Javascript
et les technologies HTML
dynamique pour leurs projets.
Pré-requis
Bonnes connaissances du
HTML. Connaissances de
base en programmation
Javascript, HTML dynamique
OBJECTIFS
Le langage Javascript est devenu incontournable dans le développement de sites Web, tant pour sa relation forte à l'interface
graphique que pour le traitement client/serveur. Ce stage vous apportera toute la connaissance pour interfacer le langage
avec les éléments graphiques des pages Web et ainsi pouvoir réaliser des menus déroulants, des animations, modifier
dynamiquement les styles de présentation ou encore réagir aux actions de l'utilisateur... Il vous apprendra également à
lancer des requêtes au serveur (AJAX) et à manipuler des données XML.
1) Les technologies du Web
2) Le langage JavaScript
3) Evénements et données
4) Gestion de formulaires HTML
5) Interaction avec les feuilles de style en cascade
6) Manipulation du DOM XML
7) Ajax
Travaux pratiques
Programmation Javascript, manipulation du DOM, gestion de l'interactivité.
1) Les technologies du Web
- Présentation des types de navigateurs et leur impact sur la portabilité des programmes JavaScript. Versions de JavaScript.
- Les composants Web : HTML, XHTML, CSS, Javascript, Flash, Java... Les protocoles HTTP, HTTPS.
- Impact de Javascript sur l'accessibilité et le référencement.
- Importance de JavaScript sur les sites web 2.0. Impact de la conformité XHTML sur l'utilisation dynamique de Javascript.
- Les outils de développement (éditeur, débogueur...).
- Positionnement et illustration des technologies DHTML.
2) Le langage JavaScript
- Déclaration et portée des variables.
- Types de données (Number, Boolean, Date, Math, String, Array). Typage et conversion de type. Détection de type avec
typeof.
- Gestion des tableaux.
- Opérateurs logiques et arithmétiques. Boucles (for, while...).
- Création de fonctions et paramétrage variable.
- Faire un codage sécurisé avec la gestion d'erreur et les exceptions.
- Rappels sur les concepts objets. Développement Objet en JavaScript : création de classes (méthodes, propriétés).
Constructeur. Surcharge. Usage des mots réservés prototype, this. Création d'instance. Usage d'Object sur les classes
dynamiques. Extension des objets prédéfinis.
- Utilisation du format JSON pour la création de classes.
- Les objets prédéfinis du langage (Array, Date, Math, String, Regexp ...) et leur utilisation.
Exercice
Mise en oeuvre des différentes fonctionnalités Javascript à travers de multiples travaux pratiques.
3) Evénements et données
- Organisation des événements. Impact des événements sur les types de navigateurs et versions de DOM.
- Comment programmer des écouteurs sur des événements par programme, par paramétrage des balises HTML. Règles
pour faire un codage multinavigateur.
- Créer, détruire des écouteurs.
- Les traitements événementiels JavaScript : gestionnaires clavier, souris, événements liés aux formulaires, Rollover, menus
dynamiques.
- L'objet Event et son utilisation.
- Les objets du DOM (window, document, ...) et leur manipulation.
- Manipulation des URL (redirections http, ...).
- Gestion des cookies (lecture et écriture).
Exercice
Programmation d'événements multiples sur les éléments formulaire, souris, clavier...
4) Gestion de formulaires HTML
- Manipulation de contenu de formulaires.
- Accès et modification dynamique des composants du formulaire : zone de saisie, cases à cocher, cases d'options,
manipulation de combobox, textarea.
- Fonctions de validation de formulaire.
- Evénements liés aux éléments de formulaire : changement, initialisation, clic,...
Exercice
Conception de fonctions personnalisées contrôlant les activités de l'utilisateur.
5) Interaction avec les feuilles de style en cascade
- Rappel sur les feuilles de style en cascade (CSS-1, CSS-2), Les outils pour les manipuler.
- Implémentation des CSS en tant que propriétés des objets du DOM.
- Modification directe des propriétés CSS des objets du DOM.
- Modification de l'objet CSS stylesheets.
- Rendre la page dynamique via le changement des propriétés de style.
Exercice
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 9 / 65
Réalisation de pages simples afin de se familiariser à l'utilisation de feuilles de style et à leur manipulation à travers
JavaScript.
6) Manipulation du DOM XML
- Présentation du langage XML (éléments attributs).
- Implémentation des analyseurs XML (parseurs) chez Microsoft IE et les autres : variantes entre les navigateurs,
problématique de la maintenance.
- Manipulation des objets du DOM (lecture, ajout, suppression, modification de noeuds).
Exercice
Familiarisation à la construction d'un chemin d'accès à un élément du DOM.
7) Ajax
- Présentation de Asynchronous Javascript And Xml
- Enjeux, solutions et alternatives.
- Les bibliothèques du marché.
- HTTP et Ajax : échanges HTTP et l'objet XMLHttpRequest.
Exercice
Récupération de données XML et affichage des données. Interrogation d'une base de données. Création d'un formulaire de
connexion.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 10 / 65
Stage pratique
Réf : PAJ
Participants
Ce cours s'adresse aux
webmasters, développeurs
web, informaticiens.
Pré-requis
Bonnes connaissances en
JavaScript et en technologies
Web Côté client.
Ajax, programmation côté client
OBJECTIFS
Ajax est devenu une technologie incontournable du développement d'applications riches Web 2.0. Durant ce cours, vous
apprendrez la manipulation de ses composants, le CSS, le DOM, ainsi qu'à établir des échanges client-serveur.
1) Ajax
2) Rappel XML
3) Rappels JavaScript
4) JavaScript Object Notation (JSON)
5) Programmation du DOM
6) Traitements XML en JavaScript
7) XMLHttpRequest
8) Les patterns Ajax
9) Compléments
1) Ajax
- Les objectifs d'Ajax. Principes de fonctionnement.
- Force du mix technologique Ajax/REST/Web 2.0.
- Choisir entre Ajax et Flash, Applet, Html. Application.
2) Rappel XML
- La structure XML. les namespaces.
- Les moyens de validation XML : DTD et XSD.
- Limite du XPath. Mise en oeuvre XSLT en Ajax.
Travaux pratiques
Création d'une structure XML bien formée et validée.
3) Rappels JavaScript
- La programmation Objet. Types. Variables. Tableaux.
- Ecmascript. Emergence d'ActionScript.
Travaux pratiques
Création et manipulation de classes et d'objets.
4) JavaScript Object Notation (JSON)
- Avantages et inconvénients dans les échanges.
- Objets, Arrays, syntaxe et parseur JSON.
- JSON, avantages et inconvénients.
- Sérialisation entre client et serveur.
5) Programmation du DOM
- Importance du langage XHTML.
- Composants DHTML.
- Le rôle du DOM dans la programmation XML.
- Gestion dynamique de CSS.
Travaux pratiques
Modification dynamique du DOM d'une page HTML.
6) Traitements XML en JavaScript
- Présentation XSLT. Le langage Xpath.
- Le format RSS.
Travaux pratiques
Traitement XSLT. Utilisation de flux RSS.
7) XMLHttpRequest
- Créer et utiliser un objet XMLHttpRequest.
- Outils de débogage (IE Toolbar, Firebug).
- Modification des en-têtes HTTP.
- Encodage et décodage des données.
- Gestion des erreurs.
- Gestion du cache.
Travaux pratiques
Créer une application Ajax pour lire, modifier et écrire dans une table produit, formulaire de login. Remplir dynamiquement un
menu déroulant. Traitement RSS à partir de flux Ajax.
8) Les patterns Ajax
- Threads. Usage d'iFrame pour les appels Client/Server.
- Traitements asynchrones, synchrones.
- Sécuriser des échanges Ajax (cryptage, sessions...)
- Problématiques de sécurité et performance : cryptage, compression, débogage, offuscation.
- Mise en place de proxy crossDomain.
- Présentation et mise en oeuvre du framework jQuery, impact sur l'interface graphique.
Travaux pratiques
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 11 / 65
Mise en oeuvre de requêtes asynchrone et multithreads.Développement Ajax en jQuery.
9) Compléments
- Framework Ajax, Java, .NET.
- Ajax et XUL.
- Présentation de la programmation Ajax avec HTML5. Nouveaux événements.
- Ajax et les API Google : Google Search et Google Maps.
Travaux pratiques
Développer en JavaScript un exemple de cartographie. Développement Ajax sous HTML5.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 12 / 65
Stage pratique
Réf : JPG
Participants
Ce stage pratique s'adresse
à tous les concepteurs de
sites Web et informaticiens
désireux d'exploiter JavaScript
et les technologies HTML
dynamique pour leurs projets.
Pré-requis
Bonnes connaissances
en JavaScript et HTML.
Connaissances de base de
XML.
JavaScript, perfectionnement pour le Web 2.0
OBJECTIFS
Le langage JavaScript est devenu incontournable pour le développement d'applications riches client. Ce cours vous donnera
tout le savoir-faire technologique pour mettre en oeuvre de véritables applications Web 2.0 à partir de concepts avancés
JavaScript.
1) Parseur XML
2) Evénements du DOM 2
3) Programmation Orientée Objet
4) Expressions régulières
5) Echange de données, interactions
6) Environnement de débogage
7) Programmation JavaScript sous HTML5
8) Google API : Maps, Search et Charts
9) Framework JQuery
1) Parseur XML
- Méthodes du DOM. Structure XML.
- Les éléments de type Text, Node, Attribut.
- Création dynamique d'objets HTML.
- Rappels DTD et XSD.
Exercice
Parcourir une structure XML à partir d'un flux Ajax.
2) Evénements du DOM 2
- Le gestionnaire d'événements.
- Phases des événements capture, capturing, bubble.
- Description des objets de type Event.
- Les événements Mouse et Keyboard.
- Gestion dynamique des événements.
- Création d'événement et diffusion.
- Impact de preventDefault et stopPropagation sur la personnalisation de son IHM.
- Différences entre navigateurs.
Exercice
Gestionnaire clavier, création de son gestionnaire d'événement.
3) Programmation Orientée Objet
- Rappels sur l'objet. Propriétés. Méthodes. Héritage.
- Portée des données privées et publiques.
Exercice
Création d'un mini-framework.
4) Expressions régulières
- Mécanismes.
- Début et fin ( ^ $ ). Occurrences ( ? + * {} ). Common Characters ( . \d \D \w \W \s \S ). Groupes ( [] ). Négation ( ^ ).
Patterns ( () ). Alternatives ( | ). Escape Character ( \ ).
Travaux pratiques
Contrôle de dates, email.
5) Echange de données, interactions
- Cookies.
- Base embarquée dans le navigateur Sqlite.
- Base distante via Ajax et HttpRequest.
- Interfaçage avec une application Flash.
Travaux pratiques
Communication avec une application Web. Appel de services web. Création de cookie. Utilisation d'une base embarquée,
échanges avec la base distante.
6) Environnement de débogage
- Introduction, solutions dédiées aux navigateurs.
- Messages d'erreur. Tests de performance. Points d'arrêt. Tests multinavigateurs.
- Stockage des bancs de test.
Travaux pratiques
Mise en oeuvre d'outils de débogage.
7) Programmation JavaScript sous HTML5
- Nouveaux événements. Modes de communications client/serveur. Gestion multimédia.
Travaux pratiques
Création Ajax sous HTML5. Gestion vidéo. Gestion des données persistantes.
8) Google API : Maps, Search et Charts
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 13 / 65
- Enjeux de la cartographie pour les applications Web.
- Création d'une Maps. Systèmes de coordonnées.
- Géocoder pour la recherche d'adresse.
- Outils de navigation (zoom, mini-carte, vue aérienne, vue plan...).
- Création de markers.
- Le gestionnaire d'événement GEvent.
- Groute pour l'identification de trajectoires.
- Format KML pour l'enregistrement de cartes.
- Utiliser l'éditeur de cartes de Google. Publier ses cartes sur Internet.
- Intégration de Google Search dans les pages Web.
- Types de recherche : Web search, Local Search, Video Search, Blog Search, News Search, Book Search, and Image
Search. Options de recherche.
- Génération de graphiques dynamiques avec Google Charts API. Formats barres, Pie, Point, courbes. Encodage de
données simple, complexe.
Travaux pratiques
Mise en oeuvre des principales fonctions de Google Map API. Création de graphiques statistiques.
9) Framework JQuery
- Fonctionnement de JQuery. Gestion des événements.
- Mise en oeuvre de jQuery pour des échanges Ajax.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 14 / 65
Stage pratique
Réf : DOJ
Participants
Ce cours s'adresse au
développeur Web réalisant
des interfaces utilisateurs en
HTML/CSS et souhaitant les
dynamiser avec JavaScript.
Pré-requis
Bonnes connaissances en
HTML, CSS et JavaScript.
Connaissances de base en
programmation orientée objet.
Dojo Toolkit, créer des applications Ajax/RIA en
JavaScript
OBJECTIFS
Dojo Toolkit est un Framework JavaScript Open Source qui facilite le développement Web 2.0. Ce stage vous apportera
la maîtrise des fonctionnalités les plus utiles de Dojo et vous apprendra à les mettre en oeuvre pour créer des applications
Web " riches " (RIA). Vous verrez comment utiliser Ajax, concevoir des IHM et des formulaires évolués, utiliser des widgets
préfabriqués ou créer vos propres composants.
1) Introduction à Dojo Toolkit
2) Le module Dijit : interface graphique et formulaire
3) Gestion des modules et programmation orientée
objet
4) Gestion des événements
5) Ajax
6) Drag and Drop et animations CSS
7) Fonctions utilitaires
8) Modules et outils complémentaires
Travaux pratiques
Les travaux pratiques ont pour objet la réalisation d'un prototype d'une application. L'interface graphique de l'application
sera réalisée en exploitant les widgets fournis avec Dojo Toolkit puis progressivement enrichie pour prendre en compte les
interactions avec l'utilisateur.
1) Introduction à Dojo Toolkit
- Présentation des concepts et technologies du Web 2.0.
- Présentation de l'architecture.
- Présentation des différentes éditions.
- Intégration à une application.
- Configuration de Dojo Toolkit.
Travaux pratiques
Installation de Dojo Toolkit. Création d'un document HTML intégrant Dojo Toolkit. Configuration des paramètres de base.
2) Le module Dijit : interface graphique et formulaire
- Architecture et cycle de vie d'un widget.
- Instanciation d'un widget.
- Utilisation et personnalisation d'un thème.
- Les widgets applicatifs : barre de menus et barre d'outils, info-bulle, menu contextuel, affichage arborescent, barre de
progression, boîte de dialogue...
- Les widgets de mise en page : ContentPane, BorderContainer, TabContainer, StackContainer, AccordionContainer.
- Les widgets de formulaire : champs de texte, listes déroulantes, boutons, case à cocher, bouton radio, curseur...
- Fonctions utilitaires pour la gestion des widgets.
Travaux pratiques
Définition de la maquette de l'application. Intégration de la maquette à l'aide des widgets.
3) Gestion des modules et programmation orientée objet
- Création et configuration d'un module.
- Rappel sur la programmation orientée objet.
- Simulation des classes et de l'héritage.
- Fonctions utilitaires pour la programmation orientée objet.
Travaux pratiques
Création d'un widget personnalisé.
4) Gestion des événements
- Gestion des événements du DOM.
- Gestion des événements d'un widget.
- Implémentation d'une architecture Publish/Subscribe.
Travaux pratiques
Ajout des gestionnaires d'événement aux widgets de l'application.
5) Ajax
- Présentation de l'architecture Ajax.
- Utilisation des fonctionnalités Ajax.
- Présentation du format JSON.
Travaux pratiques
Modification des formulaires de l'application pour employer Ajax.
6) Drag and Drop et animations CSS
- Utilisation du Drag and Drop.
- Utilisation des animations prédéfinies.
- Création d'une animation personnalisée.
- Chaînage et combinaison des animations.
Travaux pratiques
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 15 / 65
Ajout du Drag and Drop et des animations à l'application.
7) Fonctions utilitaires
- Manipulation de chaînes.
- Manipulation de tableaux.
- Manipulation du DOM.
- Gestion des cookies.
- Gestion du bouton Précédent.
8) Modules et outils complémentaires
- Présentation du module Dojox.
- Dojo Build Tools : déploiement d'une application Dojo.
- Dojo Objective Harness (DOH) : tests unitaires pour JavaScript.
Travaux pratiques
Création d'une édition personnalisée de Dojo Toolkit.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 16 / 65
Stage pratique
Réf : HCS
Participants
Développeurs Web. Chefs de
projet Web.
Pré-requis
Connaissances de base de
HTML et CSS.
HTML 5.0, CSS3, nouveautés et développement RIA
OBJECTIFS
Cette formation vous apprendra à créer des pages et des applications Web en utilisant HTML5 et CSS3. Vous découvrirez
les avancées proposées par le HTML5 notamment en termes d'interfaces Web riches/RIA, de multimédia et de moyens de
communication permettant la mise en oeuvre d'applications client/serveur attractives.
1) Rappels
2) Introduction au HTML 5
3) Balises HTML
4) Nouveautés du CSS3
1) Rappels
- Rappels sur les versions HTML, DOM.
- Position des navigateurs face aux technologies HTML.
- Outils de développement HTML 5.
- Test de compatibilité, méthode de détection HTML 5.
2) Introduction au HTML 5
- Les objectifs de HTML 5.
- Les principaux concepts et apports.
- La " roadmap " de HTML 5.
- Quand utiliser HTML 5 ?
- Les différents composants. Balises, formulaires, audio, vidéo, API, etc.
Travaux pratiques
Démonstrations. Découvertes des possibilités et du champ d'action.
3) Balises HTML
- Structure de la page.
- Nouveaux tags sémantiques header, section, footer, article, nav, aside. Encodage des données. L'élément HTML 5
Canvas.
- Différence Canvas vs SVG. Usage du Canvas : accessibilité, positionnement, effets.
- La sémantique HTML 5.
- Les nouvelles balises.
- Les extensions de balises HTML existantes.
- Les nouveaux attributs : a, fieldset, iframe, area, button...
- Les microformats. Présentation et avantages sur le référencement. Attributs itemprop='nationality' ...
- Les formulaires. Les nouveaux types INPUT (email, date, week,...). Les nouveaux champs de formulaires : range,
autofocus, placeholder, menu, ...
- Les formats multimédia. Codecs et API Multimédia. Gestion vidéo et audio avec les nouvelles balises HTML 5.
Travaux pratiques
Création de templates HTML 5. Positionnement d'éléments en absolu. Nombreux TP sur la mise en oeuvre des balises
HTML5 (formulaires, conception. ...). Réalisation d'un lecteur multimédia.
4) Nouveautés du CSS3
- Nouveaux sélecteurs : nth-child(even), child ...
- Support des polices : @font-face ...
- Mise en forme du texte.
- Text wrapping : text-overflow: ellipsis.
- Bordure sur texte : -webkit-text-fill-color,...
- Ombrage : text-shadow.
- Gestion multi colonnes : -webkit-column-count...
- Couleurs et lumières. Opacité. Saturation, luminosité hsla (95, 98%, 68%, 0, 19).
- Bordures arrondies : border-radius.
- Ombres sur texte et sur box et box-shadow.
- Gestion des fonds.
- Fonds ajustés aux conteneurs.
- Fonds dégradés : -webkit-gradient.
- Animations.
- Transitions : -webkit-transition.
- Transformation, rotations : -webkit-transform.
Travaux pratiques
Intégration de CSS 3 aux applications Web. Mise en forme de textes. Gestion multicolonne. Positionnement à l'écran.
Animation et effets de transition.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 17 / 65
Stage pratique
Réf : HML
Participants
Développeurs Web. Chefs de
projet Web.
Pré-requis
Bonnes connaissances
du langage HTML et de
JavaScript.
HTML 5, les API JavaScript
OBJECTIFS
Le HTML5 mène le JavaScript à un niveau d'achèvement qui permettra aux applications Web de rivaliser avec les
applications de bureau en termes d'interactivité. Cette formation vous apprendra à mettre en oeuvre les différentes API
JavaScript proposées avec le HTML5, parmi lesquelles celles dédiées au stockage, à la communication client/serveur ou
encore à la géolocalisation.
1) Introduction
2) Gestion de la persistance
3) Gestion du cache
4) Communication Client/Serveur
5) Gestion du glisser/copier
6) Géolocalisation
1) Introduction
- Les principales nouveautés HTML 5 : les principales balises, les formulaires...
- Les nouveaux sélecteurs CSS : recherche d'élément par Classe, par sélecteurs...
Travaux pratiques
Recherche d'éléments par positionnement ou Class.
2) Gestion de la persistance
- Vue d'ensemble des problématiques de stockage.
- Stockage local (localStorage).
- Stockage de session.
- Stockage de base de données.
- Création de bases, requêtes.
- Outils d'administration sqLite.
- Opérations SQL disponibles.
Travaux pratiques
Création d'une table produit avec requêtage
3) Gestion du cache
- Prise en charge du mode déconnecté.
- Evénements offline, online.
Travaux pratiques
Mise en place d'un mode déconnecté.
4) Communication Client/Serveur
- Communication crossDomain.
- Cross Document Messaging.
- API PostMessage.
- Ecouteur de messages émis par le serveur. API EventSource.
- XMLHTTPRequest Level 2. Présentation Level 2. Les événements de progression. Communication multidocuments.
- Communication Web sockets. API et protocole Web socket.
Travaux pratiques
Mise en oeuvre et comparaison des différents protocoles C/S.
5) Gestion du glisser/copier
- Mécanismes Drag'n'Drop.
- L'attribut draggable.
- Possibilités et limites.
Travaux pratiques
Gestion panier par glisser/copier.
6) Géolocalisation
- Vue d'ensemble de la géolocalisation.
- Données privées.
- Sources d'information de localisation.
- Utilisation de l'API de localisation.
- Respect de la vie privée.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 18 / 65
Stage pratique
Réf : ACC
Participants
Ce cours s'adresse aux
chefs de projet, décideurs,
directeurs communication,
responsables département
multimédia, responsables
éditorial, responsables
MOA/MOE, webmestres,
rédacteurs, développeurs
HTML.
Pré-requis
Bonnes connaissances des
langages HTML et JavaScript,
et des feuilles de style CSS.
Accessibilité, enjeux et mise œuvre
OBJECTIFS
Cette formation introduit les principes généraux de l'accessibilité, présente les normes, outils et ressources disponibles, et
propose une approche méthodologique et opérationnelle pour la prise en compte de l'accessibilité numérique.
1) Pourquoi concevoir des sites accessibles à tous ?
2) Accessibilité Web : repères du concepteur
3) Quel référentiel d'accessibilité choisir ?
4) Accessibilité, démarche d'ensemble
5) Ecrire pour le Web
6) Définir la structure des pages
7) Règles de mise en forme : fondamentaux
8) Outils de navigation
9) Composants graphiques
10) Liens hypertextes
11) Scripts
1) Pourquoi concevoir des sites accessibles à tous ?
- Une opportunité d'intégration sociale.
- Le cadre légal en France et en Europe.
- Montée en puissance de l'accessibilité du Web.
2) Accessibilité Web : repères du concepteur
- Comprendre les différences entre sites accessibles et sites non accessibles. Impacts d'une migration vers l'accessibilité sur
la chaîne de production Web.
3) Quel référentiel d'accessibilité choisir ?
- Pourquoi un référentiel ? Les référentiels d'accessibilité. Les critères de choix.
4) Accessibilité, démarche d'ensemble
- Les étapes clés de mise en œuvre. Quelle accessibilité pour les Intranets et les applications Web ? Formaliser une charte
d'accessibilité.
Travaux pratiques
Démonstration de l'outil Confort de Lecture. Retours d'expérience d'un consultant ayant mené des projets de conception
intégrant les référentiels d'accessibilité.
5) Ecrire pour le Web
- L'importance du contenu. Rendre un site plus efficace.
- Panorama des types éditoriaux.
- Lisibilité et notion d'ergonomie de lecture à l'écran. Le comportement des internautes et son influence sur l'écriture.
6) Définir la structure des pages
- Garantir la qualité de restitution. Format de page. Métadonnées et titre de page. Changements de langue. Structurer le
contenu. Accessibilité et référencement.
7) Règles de mise en forme : fondamentaux
- Principes généraux. Mise en forme du texte.
- Séparer la mise en forme et le contenu. Respecter la charte graphique. Titraille. Composants graphiques. Liens
hypertextes. Listes à puces.
- Mise en forme avancée. Acronymes et abréviations. Composants multimédias. Tableaux de données. Formulaire.
8) Outils de navigation
- Menus, barre de progression et outils transversaux.
- Aide à la navigation. Le plan du site.
9) Composants graphiques
- Règle générale. Images de mise en forme. Puces graphiques, images illustratives, textuelles, cliquables.
10) Liens hypertextes
- Liens internes et externes. Liens de téléchargement. Groupes de liens.
11) Scripts
- Règles de conception. Exemples : Pop up, redirection automatique.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 19 / 65
Stage pratique
Réf : XAW
Participants
Ce cours s'adresse aux
webmasters, développeurs
web, informaticiens.
Pré-requis
Bonnes connaissances du
Web, d'HTML et de CSS.
Connaissances de base du
JavaScript et du XML.
Web 2.0, développer des applications
OBJECTIFS
Web 2.0 est devenu un standard pour la définition des applications Web de demain et l'architecture des services associés.
Ce cours vous apprendra, au moyen de nombreux travaux pratiques, à maîtriser les règles de conception et les technologies
nécessaires à la réussite de votre site Web 2.0, HTML5.
1) Rappels XML
2) Introduction au Web 2.0
3) Feuilles de style
4) Interfaces graphiques
5) Interaction et formulaires
6) JavaScript
7) Les Frameworks professionnels
8) Les solutions Web 2.0
1) Rappels XML
- Structure XML et documents valides.
- Savoir lire un schéma XSD.
- Web sémantique et référencement (SEO, SiteMap).
Travaux pratiques
Création de documents XML, de XSD et de XSL. Tests d'accessibilité. Création de page XHTML.
2) Introduction au Web 2.0
- Les concepts et les technologies Web 2.0.
- Règles de conception.
- Navigateurs du marché, impact sur la portabilité.
Travaux pratiques
Analyse d'ergonomie Web 2.0. Interrogation de Services Web à partir du Web.
3) Feuilles de style
- Les feuilles de style CSS, CSS-3 : couplage avec XML.
- Le développement d'interface riche et animée.
Travaux pratiques
Paramétrage automatique de blocs, calques, menus, zones de formulaires à partir de CSS.
4) Interfaces graphiques
- Langages XUL, XAML/SilverLight, Flex/MXML, SVG, HTML5.
- Flash pour traiter des données XML distantes.
- Présentation des technologies RIA et RDA.
Travaux pratiques
Développement d'une application de base XUL, Flex, Flash. Conversion HTML vers PDF. Création de gadgets.
5) Interaction et formulaires
- Formulaires XForms dans les interfaces Web 2.0.
- Offre Microsoft InfoPath.
- les solutions de contrôle de saisie (autosuggest,...)
Travaux pratiques
Démonstration et création de formulaires.
6) JavaScript
- Variable, fonctions. Manipulation d'objet.
- manipulation du DOM pour gérer l'interactivité.
- Portabilité, industrialisation des programmes.
- Générateur d'interface GWT.
- Environnements de développement et de test.
- Ajax. Principe. Codage.
7) Les Frameworks professionnels
- Google API (Google Maps, Ajax, feed, ...).
- Prototype, jQuery, Mootols, Yahoo (YUI), Adobe (SPRY).
Travaux pratiques
Création d'une cartographie Google Maps.
8) Les solutions Web 2.0
- Définitions (blog, audioblog, podcast, outils...).
- WordPress pour la création et gestion de ses blogs.
- Les protocoles RSS, ATOM dans les blogs.
- Les Wikis. Les solutions de commerce 2.0.
Travaux pratiques
Création d'un blog et de son flux RSS.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 20 / 65
Stage pratique
Réf : MOB
Participants
Développeurs et chefs de
projets mobilité.
Pré-requis
Bonnes connaissances
du Web, d'HTML de CSS.
Connaissances de base du
JavaScript et du XML.
Créer des applications multi-plateformes pour mobiles
OBJECTIFS
Cette formation vous apprendra à réaliser un site Web pour terminaux mobiles et tablettes avec les technologies HTML,
CSS et JavaScript. Vous mettrez en oeuvre les frameworks les plus utilisés pour réaliser des applications fonctionnant sous
iPhone, Blackberry, Windows Phone, Android...
1) Rappels sur les technologies de base
2) Solutions embarquées
3) Différence entre application Web traditionnelle et
mobile
4) Construction XHTML, HTML5
5) Framework Multi plateforme
6) Stockage des données dans le mobile
7) Cartographie et géolocalisation
1) Rappels sur les technologies de base
- Présentation des familles de terminaux smartTouchet tablets, leurs spécificités.
- Rappel sur les technologies HTML, CSS, JavaScript.
- Présentation des moteurs Webkit, Gecko,...
- Importance et intégration du useragent.
- Communication Ajax : importance et limite selon les mobiles.
- Outils de développement, de test, de simulation.
Travaux pratiques
Mise en place d'environnement de travail dédié au mobile.
2) Solutions embarquées
- Présentation des technologies existantes et leurs environnements de développement : limite, coût, portabilité.
- Objective-C (iPhone, iPad), Java (Android, BlackBerry), .Net (Windows Mobile), Bada (Samsung), ...
- Méthode de publication d'une application dans les catalogues officiels des opérateurs (Applestore, Marketplace,
AndroidMarket, Ovi,...). Démarches administratifs (iPhone Developer Program, Certificats, ...).
3) Différence entre application Web traditionnelle et mobile
- Différences entre les navigateurs : moteurs JavaScript, CSS, limite des plugins (Flash, PDF,...) spécificités propre à chaque
fabricant.
- Différence des tailles des écrans et solutions.
- Différences matérielles (CPU, mémoire).
4) Construction XHTML, HTML5
- Les balises META et spécifiques : Viewport et paramétrage dynamique des CSS.
- Balises traditionnelles de construction de pages.
- Constructions de tableaux.
- Les liens et les options dédiées accesskey.
- Les images et importances des images sur les terminaux (format, poids des images).
- Les textes p, span. Les blocs div et les blocs canvas en HTML5.
- Les formulaires. Nouveaux types de données (daterange, slider, ...). Activation du clavier numérique.
- CSS : importance en mode multicanaux. Positionnement des éléments. Empilement navigation entre les éléments (zindex,
display, visibility).
- Apport des CSS3 en HTML5 et moteurs iwebkit (boutons, effets, transformations,...). JavaScript. Rappels sur le langage.
- Importance du DOM pour un portage multi terminal.
- Evénements multitouch spécifiques aux terminaux (gesture, touch, drag et drop,...).
- Bibliothèque graphique : API de dessin (rectangle, ligne,...), palette de couleur, manipulation des images;
- Tests de conformité au W3C : outils de validation.
Travaux pratiques
Réalisation de pages mettant en oeuvre ces fonctionnalités. Réalisation d'un formulaire de saisie avec gestion automatique
du clavier, calendrier, slider. Création de boutons et composant respectant la charte du terminal. Gestion par CSS de
la rotation du terminal. Réalisation du drap&drop, gestion dynamique des évènements " touch ". Réalisation d'un mini
gestionnaire de dessin pour afficher des graphiques.
5) Framework Multi plateforme
- Avantages d'utilisation d'un framework.
- Choisir le framework mobile : PhoneGap et ses outils de publication Appstore. RhoMobile et le langage Ruby, son modèle
MVC. AppAccelerator. jQTouch. jQuery Mobile. Smartface spécial Blackberry et Nokia.
Travaux pratiques
Mise en oeuvre et découverte des différents framework disponibles sur le marché. Construction plus avancée d'un mini site
avec jQuery Mobile et PhoneGap
6) Stockage des données dans le mobile
- Utiliser la base SQLite intégrée au navigateur.
- Langage SQL et outils d'administration.
- Gestion et pilotage en JavaScript (création de table, requêtes...).
- Usage de Google Gears pour les terminaux non compatibles HTML5.
- Gestion du cache côté client pour un travail en mode non connecté (localStorage, sessionStorage).
Travaux pratiques
Création d'un gestionnaire de notes avec stockage dans la base embarquée.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 21 / 65
7) Cartographie et géolocalisation
- Gestion de la carte Google Maps, options pour prise en charge de la géolocalisation du mobile.
Travaux pratiques
Affichage de la carte par rapport à la localisation du mobile et affichage de markers sur la carte.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 22 / 65
Stage pratique
Réf : DEM
Participants
Cette formation pratique
s'adresse aux développeurs
de sites, informaticiens,
designers.
Pré-requis
Connaissances de
base du HTML et de la pro-
grammation. Expérience
souhaitable en programmation
et en création graphique avec
Flash.
Flash et ActionScript, applications multimédias
créer des applications multimédias
OBJECTIFS
La technologie Flash est devenue la référence pour la réalisation des animations multimédias pour le Web et les terminaux
embarqués. Vous apprendrez à programmer avec son langage objet ActionScript, interagir sur les composants graphiques,
développer rapidement des applications client/serveur (formulaires, appels de services Web...).
1) Concepts de base
2) Le langage de programmation
3) Les événements
4) Les clips d'animation
5) Echanges de données
6) Effets multimédias
7) Fonctionnalités avancées
8) Formulaires et composants
9) Echanges XML et bases de données
10) Composants avancés
1) Concepts de base
- Présentation du langage de programmation ActionScript 2.0. Différences entre les lecteurs Flash.
- Présentation du framework de Flash. Flash Builder, Flash CS4, CS5. CS Live. Central Device.
- Structure d'un script. Règles de programmation ActionScript.
- Construction d'une bibliothèque de fichiers externes.
- Débogage, points d'arrêt, fonction trace.
- Test de performance pour optimiser le chargement.
- Apprendre à travailler avec l'aide.
- Flash Builder 3, Flash Pro CS5. Les nouveautés.
Travaux pratiques
Configuration de Flash. Débogage pas à pas de programmes. Rapports de performance.
2) Le langage de programmation
- Les variables
- Typage. Variables globales, locales.
- Programmation objet : création de classe, prototype, héritage, constructeur, destructeur. Opérateurs with, this.
- Accès aux données : les chemins d'accès.
- Les tableaux. Propriétés de la classe Array.
- Opérateurs logiques, arithmétiques.
- Opérateurs de boucles : for, while.
- Dates et heures (objets Date).
- Les fonctions.
Travaux pratiques
Création d'un tableau d'objets. Création de classes.
3) Les événements
- Principes de propagation et d'orchestration des événements.
- Evénements (EnterFrame, key, Mouse, data, load) liés au Clip, boutons.
- Gestionnaire clavier, souris.
- Gestion des erreurs et des exceptions.
- Gestion du timer.
Travaux pratiques
Evénements sur le chargement de clip, programmation d'actions clavier, souris.
4) Les clips d'animation
- Chargement dynamique de clip (LoadMovie. DuplicatemovieClip...).
- Contrôles d'animation vidéo stop, play, goto...
- Création de mask.
Travaux pratiques
Création et animation dynamique de clips.
5) Echanges de données
- Echange de données avec la page HTML.
- Passage d'arguments au lancement du module Flash.
- Appel de pages web en mode GET et POST.
- Méthodes de SendAndLoad pour appeler vos URL.
- Sauvegarde de données locales : SharedObject et cookies.
Travaux pratiques
Sauvegarder des données dans un fichier externe, appel de CGI, appel de fonctions JavaScript. Sauvegarde de profil avec
ShareObject.
6) Effets multimédias
- Mise en oeuvre des multiples objets de base. Gestion des sons (object Sound).
- Import de ressources multimédias.
- Conversion vidéo et gestion de fichiers MP3 et vidéo.
- Personnalisation du curseur (objet Mouse).
- Gestion des couleurs (Objet Color).
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 23 / 65
- Effets graphiques (fader, easing...) avec la classe Tween.
Travaux pratiques
Création dynamique d'un album photo... Chargement vidéo.
7) Fonctionnalités avancées
- API de dessin.
- Gestion de la barre de progression.
- La détection de collision d'objet (hitTest).
- Gestion du copier-coller
- Gestion de l'impression.
- Composants avancés (Tree, onglets, accordéon, TitleWindow, DataGrid).
- Accessibilité.
Travaux pratiques
Jeu de collision, horloge, puzzle, gestion du copier-coller...
8) Formulaires et composants
- Comparaison entre un formulaire Flash et HTML.
- Création d'un formulaire. Transmission des données (GET et POST) vers un serveur distant.
- Manipulation des composants de formulaire : menu déroulant, radio bouton, case à cocher, zone de texte, boîtes de
dialogue, TreeBox, Ticker, barre de progression, scrolling.
- Programmation des boutons envoi et réception.
Travaux pratiques
Créer un formulaire et envoi des données par e-mail, dans une base de données.
9) Echanges XML et bases de données
- Gestion dynamique d'une base de données à partir de Flash : requête SQL, insertion, curseur.
- Classes de communication et de données XMLConnector, WebServiceConnect, DataSet.
- Chargement de données XML en ActionScript.
- Utilisation du Wizard et inspecteur de composants pour développer rapidement des interfaces puissantes : lecteur RSS,
podcastservices web, Menus, Tree.
Travaux pratiques
Gestion d'un catalogue produit. Appel de flux RSS. Interroger et gérer une base client. Appel de services web.
10) Composants avancés
- Sécurité et protection du Flash contre la copie.
- Présentation des formats MXP et les outils de création de composants.
- Création de composants. Usage de la zone Exchange.
- Créer une bibliothèque SWC.
- Export vers Flex, HTML5.
Travaux pratiques
Installation de composants, protection du Flash contre l'import.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 24 / 65
Stage pratique
Réf : ACP
Participants
Cette formation pratique
s'adresse aux développeurs
de sites, informaticiens,
designers.
Pré-requis
Connaissances de base
du HTML, des concepts du
Web et de la programmation.
Expérience souhaitable en
programmation.
ActionScript 3.0, programmation
OBJECTIFS
Le langage ActionScript 3.0, présent au coeur des produits Flash, Flex, Framework Ecmascript, s'impose de plus en plus
comme un langage incontournable pour produire des applications métier et multimédia. Cette formation vous détaillera tous
les mécanismes essentiels de ce langage afin que vous puissiez mener à bien vos projets.
1) Concepts de base
2) Rappels sur les composants graphiques
3) Le langage Actionscript 3.0
4) Manipuler les données XML avec E4X
5) Evénements du DOM3
6) Composants graphiques
7) Manipulation de données multimédia
8) Styles
9) Accès aux données
10) AMF
1) Concepts de base
- Les lecteurs Flash. Flash player, AVM1 et AVM2.
- Présentation du sandBox et de sa sécurité. Désassembleur de code. Offuscation.
- Présentation du Framework de Flash.
- Environnements de développement ActionScript 3 sous Flash ou Flex, Flash Develop.
- Présentation de l'éditeur, débogage d'application sous Firebug.
- Paramétrage des options de compilations.
- Avantage de Flex pour développer rapidement des projets Actionscript3.
Travaux pratiques
Configuration de Flash. Premier projet. Rerouter les erreurs vers Firefox / Firebug.
2) Rappels sur les composants graphiques
- Rappel sur les formats graphiques (MovieClip, Button, Graphics).
- Démarche pour exporter des bibliothèques SWC ou SWF pour son intégration dans un projet AS3.
- Les formats multimédia (vidéo audio supportés).
- Intégration dans une page web et passage de paramètres.
- Rôle du Stage, DisplayObjects. Architecture graphique.
Travaux pratiques
Construction de bibliothèques SWC, SWF, classes spécifiques Flash pour intégration et appel dans un projet AS3.
3) Le langage Actionscript 3.0
- Variables. Typage. Conversions. Portée.
- Opérateurs logiques, arithmétiques.
- Création de package et de classes (héritage, portée, constructeurs).
- Array, dataprovider.
- Classes et objets : package, portée, héritage, surcharge,...
- Classes de données : Objets, Math, String.
- Les expressions régulières.
- Manipulation des dates et heures.
- Classe Error et gestion des exceptions.
Travaux pratiques
Prise en main et manipulation des formats date, String, Array d'Actionscript 3.0. Exceptions et gestion des erreurs.
4) Manipuler les données XML avec E4X
- Comprendre la structure du XML, CDATA, NameSpace, Qname. Validation XSD, XPath.
- Manipuler le XML en ActionScript 3.0.
- Les classes XML, XMLList, XMLDocument.
- Manipuler, filtrer, trier et itérer les objets de type XML.
- Chargement extérieur de données XML.
Travaux pratiques
Manipuler des données XML. Xpath. Chargement extérieur.
5) Evénements du DOM3
- Trois phases des événements.
- Déclarer des événements personnalisés.
- Classe Event. Les événements KeyBoard, Mouse.
- Les événements du gestionnaire graphique.
Travaux pratiques
Création d'événements avec passage d'arguments. Gestion du Drag Drop.
6) Composants graphiques
- Composants graphiques : MovieClip, Sprite, Shape.
- Composants TextField, SimpleButton, Label.
- Gestion de la barre de progression.
- Gestion des Bitmap, class Loader.
- Propriétés et événements.
- API de dessin.
- La détection de collision d'objet (hitTestObject).
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 25 / 65
Travaux pratiques
Création de composants dynamiquement et gestion de leurs propriétés. Chargement et traitement de bitmap.
7) Manipulation de données multimédia
- Traitement et mise en forme de contenu Texte.
- Les CSS.
- Traitement d'images Bitmap. Classes Bitmap et BitmapData.
- Manipulation, transformation d'objets Bitmap.
- Filtres personnalisés avec Pixel Bender.
- Traitement de données audio. Chargement. SoundLoaderContext, SoundChannel. Transformation de Fourier.
- Traitement de données vidéo. Classes Video, NetStream et Camera.
8) Styles
- Design des composants : thèmes, feuilles de style, fontes. Mask. Effets et transitions.
- Chargement de CSS.
- Personnalisation du curseur (objet Mouse).
- Gestion des couleurs (Objet Color).
- Effets graphique avec la classe Tween.
- Effets et Bitmaps : gestion pixels, Threshold, filtres de transformation.
Travaux pratiques
Chargement de CSS, changement des styles. Changement de curseur. Programmation de drag&Drop de composant
graphique, création d'un masque.
9) Accès aux données
- Services loadURL. Loader.
- Shared Objects et les données.
- Appel de services web.
Travaux pratiques
Appel d'URL, création de ShareObject. Chargement dynamique d'image, de Flash, de vidéos, de sons.
10) AMF
- Présentation du protocole AMF.
- Echanges d'objets, modèle MVC.
- Présentation d'AMFPHP.
- Définition des services.
Travaux pratiques
Création d'un projet utilisant AMFPHP. Création d'application client, configuration et installation AMFPHP. Installation
d'AMFPHP avec WampServer, création d'un service distant. Interrogation et échange de données.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 26 / 65
Stage pratique
Réf : FLX
Participants
Cette formation pratique
s'adresse aux développeurs
de sites, informaticiens,
designers.
Pré-requis
Connaissances de base
en programmation et en
développement Web.
Flex et ActionScript 3.0, niveau 1
créer des applications métier pour le web
OBJECTIFS
Flex est devenu une plateforme de programmation très prisée pour développer des applications métier Flash depuis sa prise
en compte dans les environnements Mac, Unix ou Windows. Vous apprendrez à programmer avec Flex 3 et Flex 4, son
langage objet ActionScript 3.0 des interfaces graphiques interactives, utilisant des données XML ou des services Web.
1) Présentation Flex 4
2) Le langage Actionscript 3.0
3) Langage MXML
4) Contrôles
5) Les formulaires
6) Les conteneurs
7) Contrôles de navigation
8) Styles
9) Accès aux données
10) Graphiques
1) Présentation Flex 4
- Emergence des clients riches. RIA. Présentation de Flex builder : son environnement Eclipse, compilateurs, SDK, package
Data et Charting.
- Différences et avantages avec une programmation sous Flash.
- Intégration dans une architecture J2EE ou .Net.
- Le lecteur Flash 10. Concept DisplayObject.
- Espace de travail (project, workspace, librairies, répertoire de publication).
- Création du premier projet Flex.
- Configuration de Flex Builder et prise en main du débogueur.
- Présentation Flex4 et ses nouveautés.
Travaux pratiques
Création d'un projet et mise en oeuvre du débogueur.
2) Le langage Actionscript 3.0
- Rappels sur le langage XML : modèle, schéma de validation, Namespace.
- Spécificités Actionscript 3.0.
- XML et Ecmascript XML (E4X).
- Variables. Typage. Conversions. Portée.
- Opérateurs logiques, arithmétiques.
- Création de package et de classes (héritage, portée, constructeurs).
- Array, ArrayCollection, iList utilisation sur les composants graphiques.
- Classe deeror et gestion des exceptions.
- Le langage XML et e4X.
- Intégration de commentaires et documentation avec asDoc.
Travaux pratiques
Prise en main Actionscript 3.0 au cours de travaux pratiques.
3) Langage MXML
- Structure d'une application Flex : blocs script, Model, CSS.
- La balise Application et ses propriétés : framerate, caractéristiques graphiques.
- Interaction avec Actionscript.
- La gestion des événements : propagation, trois phases.
- Liaison dynamique entre les variables Bindable et les composants graphiques.
- Evénements et instanciation des composants graphiques.
- Gestion d'événements : clavier, souris.
Travaux pratiques
Programmation d'événements : clic sur un bouton, changement d'état...
4) Contrôles
- Architecture des composants graphiques.
- Propriétés spatiales, styles, paramétrages, ViewState. Gestion des états sous Flex 4.
- Création dynamique de contrôles.
- Rôle des DataProvider raccordement aux Collections.
- Contrôles de données : label, image. DataGrid (personnalisation, événements, filtre, tri), Tile, TileList (personnalisation),
videoloader, swfloader.
- Drag and Drop sur les composants.
- Création de composants personnalisés : passage de paramètres, personnalisation.
Travaux pratiques
Création de boutons multi-états, datagrid personnalisés, chargement de vidéos.
5) Les formulaires
- Conteneur Form, FormItem.
- Composants de saisie : texte, boutons radio, menus, cases à cocher, Rich Text, NumericStepper.
- Validation de données : Emailvalidator, Currencyvalidator, RegExprValidator, Datevalidator..., association à un modèle de
données.
- Contrôles de saisie : dateFormator.
- Envoi du formulaire.
- Générateur de formulaire de Flex4.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 27 / 65
Travaux pratiques
Création de formulaires de login, contrôles de saisie de fiches produits.
6) Les conteneurs
- Application ControlBar, moduleLoader, TitleWindow, Panel, Spacer, Grid, HDivedBox, Panel.
- Composant Repeater pour parcourir une liste.
Travaux pratiques
Construction dynamique de zones graphiques à partir de Repeater.
7) Contrôles de navigation
- Accordion, ViewStack, Menu, Bar, TabBar, TabNavigator, Togglebutton.
- Contrôles de navigation List, LinkButton, popupButton, popupMenuButton.
Travaux pratiques
Mise en oeuvre de barres de menus, onglets, boutons dynamiques vers le web.
8) Styles
- Design des composants : thèmes, feuilles de style, fonts.
- Effets et transitions : rotation, séquence, parallèle.
- Accès aux données : les chemins d'accès.
- Styles Flex4. Construction graphique avec Adobe Catalyst.
- Nouveaux effets visuels sous Flex 4. <fx :Declarations>.
- Les thèmes (spark, etc.) et composants multi skin sous Flex4.
Travaux pratiques
Mise en pratique de multiples effets.
9) Accès aux données
- EAX et EcmaScript XML.
- Services HTTPService : création de requête HTTP et échange de données GET et POST.
- Shared Objects.
- Accès aux Web services.
- Echanges RPC et Soap.
- Le composant Repeater.
- Le gestionnaire de données sous Flex4.
Travaux pratiques
Appel de service web, appel d'URL, création de ShareObject.
10) Graphiques
- Mise en oeuvre de graphismes : pie, plot, bar, line,...
- Raccordement entre données et graphismes.
Travaux pratiques
Création de graphiques à partir de données XML : Pie, Bar.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 28 / 65
Stage pratique
Réf : FLP
Participants
Cette formation s'adresse aux
personnes qui connaissent
déjà Flex et ActionScript
3 et qui souhaitent se
perfectionner.
Pré-requis
Bonnes connaissances en
développement Web avec
Flex, ou connaissances équi -
valentes à celles apportées
par le stage Flex et
ActionScript 3.0, niveau 1 (réf.
FLX).
Flex et ActionScript 3.0, niveau 2
OBJECTIFS
Ce cours intensif vous permettra d'accroître votre capacité de production avec Flex et ActionScript 3. Vous apprendrez entre
autres à maîtriser les concepts avancés de création d'une application Flex, les échanges client-serveur, les composants
évolués comme le Drag and Drop.
1) Rappels Flex
2) Débogage
3) Manipuler les données XML avec E4X
4) Valider et formater les données
5) Evénements personnalisés
6) Evénements Drag and Drop
7) Création de composants personnalisés
8) Communication Flex
9) Accéder à des services Web
10) AMF
11) Créer des composants avec le Repeater
12) Manipuler les types complexes
13) Compléments
1) Rappels Flex
- Les clients riches Internet. Machine virtuelle Flash et Flash Player. Flex Builder. Présentation de Flex 4.0.
2) Débogage
- Débugueur. Raccorder Firebug au débugueur de Flex.
- Présentation de la classe ILogger.
- Développer son propre gestionnaire de log.
- Configuration mm.cfg. Remoting Debug.
Travaux pratiques
Raccorder Firebug, développer un gestionnaire graphique de logs.
3) Manipuler les données XML avec E4X
- Validation XSD, XPath. Manipuler le XML en ActionScript 3.0. La classe XML.
- Filtrer, trier et itérer les objets de type XML.
- Manipulation des objets MXML du DOM3
Travaux pratiques
Manipuler des données XML, parcours des DisplayObjects.
4) Valider et formater les données
- Valider les données d'un formulaire.
- Créer des validateurs en MXML et en ActionScript.
- Gérer les erreurs de validation.
- La validation et les modèles de données.
- Expressions régulières. Formater les données.
Travaux pratiques
Appliquer des validateurs sur un formulaire de saisie.
5) Evénements personnalisés
- Déclarer des événements personnalisés.
- Classe Event. Les événements KeyBord, Mouse.
- Fonctionnalité du Binding.
- Création d'événements dans un composant.
- Transfert de données sur un événement personnalisé.
- Communication entre composants par événements.
6) Evénements Drag and Drop
- Présentation du mécanisme. Drag and Drop de List, de DataGrid et de composants personnels.
Travaux pratiques
Création de multiples Drag and Drop. Drag & drop.
7) Création de composants personnalisés
- Passer des données complexes aux composants.
- Bonnes pratiques pour l'échange de données.
- Créer une classe héritée d'une classe graphique.
- Styles. Création de thèmes. Chargement de ModuleSwf.
Travaux pratiques
Créer une classe Label, Tree personnalisée, Datagrid...
8) Communication Flex
- HTTPService : communiquer avec les services distants.
- Passage de paramètres.
- Gestion des erreurs et des données entrantes.
- Sécurité : performance, cryptage, gestion crossDomain, rôle du proxy, désactivation du ViewSource.
Travaux pratiques
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 29 / 65
Manipuler des données provenant d'un HTTPService.
9) Accéder à des services Web
- Processus pour appeler des services Web.
- Déclencher les services et manipuler les résultats. Les formats Objects, flashvars, XML, E4X. Gérer les résultats et les
erreurs avec les gestionnaires d'événement.
Travaux pratiques
Manipuler des données provenant d'un WebService.
10) AMF
- Présentation du protocole AMF. Echanges d'objets, modèle MVC. Présentation d'AMFPHP.
- Définition des services. Présentation BlazeDS.
Travaux pratiques
Création d'un projet utilisant AMFPHP.
11) Créer des composants avec le Repeater
- Comprendre la philosophie du Repeater.
- Principales propriétés et méthodes.
- Accéder aux composants dynamiquement créés.
Travaux pratiques
Afficher des données dans un tableau dynamique.
12) Manipuler les types complexes
- Les collections. Filtres et tris.
- Itérer sur une collection avec IcursorView.
- Présentation de classFactory.
Travaux pratiques
Utiliser les types complexes.
13) Compléments
- Intégrer Cairngorm ou un autre MVC
- Introduction à AIR. Structure d'une application AIR. Widgets.
- Tendances MXML. Outils. Thermo, Degrafa, COCOMO, Flex 4, Gumbo...
- Google Maps API pour Flex.
Travaux pratiques
Analyse de Cairngorm. Créer une mini application AIR. Créer une cartographie Google Maps.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 30 / 65
Stage pratique
Réf : PHH
Participants
Cette formation s'adresse
aux informaticiens qui
souhaitent acquérir une
formation opérationnelle
sur PHP dans le contexte
du développement, et aux
webmasters ayant déjà une
bonne connaissance d'un
langage de programmation
client (javascript ou vbscript).
Pré-requis
Connaissances de base
du langage HTML et d'au
moins un langage de
programmation côté
client.
PHP 5 développer un site Web dynamique
avec bases de données
OBJECTIFS
Ce cours vous permettra de maîtriser d'une manière opérationnelle le langage PHP dans le contexte de développement de
sites Internet dynamiques. Il vous permettra aussi d'aborder les aspects connexes à ce type de développement : bases de
données, langage SQL, manipulation de fichiers graphiques...
1) Introduction
2) Premières applications Web en PHP
3) Gestion des sessions utilisateurs
4) Une application Web professionnelle
Travaux pratiques
Des machines sous Windows ou Linux équipées du serveur Web Apache avec le module PHP et un serveur MySQL ou
Oracle seront mis à la disposition des participants. Les participants vont créer un site complet de vente en ligne.
1) Introduction
- L'architecture du WEB : HTTP, CGI, interactivité : script client ou script serveur
- Qu'est-ce que PHP ?
- Historique de PHP.
- Les différences entre PHP 4 et PHP 5.
- Présentation de l'exemple utilisé durant la formation : le site de vente en ligne.
Travaux pratiques
Revue des balises principales HTML et des commandes de style. Introduction à la feuille de style de l'application exemple.
2) Premières applications Web en PHP
Automatisation d'une page Web
- Les principes du client-serveur.
- Premiers éléments du langage.
- Intégration de PHP dans une page HTML.
- Variables et fonctions.
- Librairies.
- Fonctions de base, variables serveur et variable PHP.
- Variables serveur et variable PHP.
- Contrôles de flux et boucles.
Les formulaires simples
- Passage et transmission de variables.
- Lecture/écriture de fichier.
- Vérification de login/mot de passe.
- Redirection.
Les variables complexes : tableaux
- Constructeur array.
- Fonctions associées aux tableaux.
- Fonctions d'extraction.
- Fonctions de navigation dans un tableau.
Travaux pratiques
Réalisation de fonctions personnalisées. Réalisation d'une librairie de fonctions. Réalisation d'une fonction de création de
liste déroulante.
3) Gestion des sessions utilisateurs
Variables persistantes : Cookies et Session
- Avantages et inconvénients des cookies et sessions.
- Limitations et précautions.
- Les variables de session.
- Fonctions liées aux variables de session.
- Les Cookies.
- Sérialisation des variables complexes.
- Utilisation.
Utilisation d'une base de données MySQL
- Présentation de MySQL.
- Concepts fondamentaux : bases, tables, champs, enregistrements.
- Bases MySQL.
- Tables MySQL.
- Champs MySQL.
- Enregistrements MySQL.
- Fonctions PHP MySQL.
- Introduction au langage SQL (sélection, modification, suppression).
- Traitement des résultats des requêtes.
Travaux pratiques
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 31 / 65
Réalisation d'un panier d'achat simple, version cookie et session. Gestion des quantités commandées. Création d'une base
MySQL. Remplissage de la base à partir d'une base texte. Création de fiches produit à la volée par extraction des données
de la base.
4) Une application Web professionnelle
Notions d'architecture multicouches
- Introduction aux principes MVC.
Les formulaires complexes
- Moteur de recherche : formulaire en relation avec une base de données.
- Fonctions avancées de sélection : recherches et tris.
Le graphisme en PHP
- Présentation de la librairie GD.
- Création d'image, réutilisation.
- Gestion des polices et de l'écriture en mode image.
- Superposition de texte pour protection de droits.
- Intégration au site.
- Réalisation de graphiques statistiques.
Intégration des modules réalisés
Travaux pratiques
Réalisation d'un moteur de recherche : la sélection sur Auteur, Titre et Héros donne une liste de liens sur les fiches produit
correspondantes. Implémentation multicouche. Intégration des différents modules réalisés. Affichage des images, avec
mention de copyright.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 32 / 65
Stage pratique
Réf : OBP
Participants
Informaticiens et webmasters
qui souhaitent une
formation opérationnelle en
développement objet PHP.
Pré-requis
Bonnes connaissances
des bases du HTML. La
connaissance d'un langage
objet permettra de mieux
profiter de la formation mais
n'est pas indispensable.
PHP 5, pour les développeurs objet
créer une application Web en P.O.O.
OBJECTIFS
Ce cours vous permettra de maîtriser d'une manière opérationnelle le langage PHP dans le contexte d'un développement
objet. Vous apprendrez à créer un site Web dynamique et aborderez la mise en oeuvre des aspects connexes à ce type de
développement. L'ensemble du cours est orienté objet.
1) Introduction
2) Bases du Langage PHP
3) Programmation Orientée Objet (POO)
4) Premières applications Web en PHP
5) Gestion des sessions utilisateurs
6) Utilisation d'une base de données MySQL
7) Une application Web professionnelle
1) Introduction
- Qu'est-ce que PHP ? Interactivité avec les internautes.
- Les différences entre PHP 4 et PHP 5.
- Présentation de l'exemple utilisé durant la formation.
2) Bases du Langage PHP
- Automatisation d'une page Web.
- Le client-serveur. Premiers éléments du langage.
- Intégration de PHP dans une page HTML.
- Variables et fonctions. Librairies.
- Fonctions de base, variables serveur et variable PHP.
- Contrôles de flux et boucles.
Travaux pratiques
Réalisation de fonctions personnalisées.
3) Programmation Orientée Objet (POO)
- Rappel UML. Modélisation des classes. Outils.
- Classes, propriétés, méthodes. Visibilité et Protection.
- Constructeur, destructeur. Appel implicite vs. explicite.
- Héritage et agrégation. Propagation. Polymorphisme.
- Sérialisation et stockage. Organisation des fichiers.
Travaux pratiques
Réalisation d'une classe PageWeb.
4) Premières applications Web en PHP
- Les formulaires simples. Passage de variables. Vérification de login/mot de passe. Redirection.
- Les variables complexes : tableaux des fonctions.
Travaux pratiques
Réalisation d'un objet de stockage. Réalisation d'un objet Formulaire (texte, select et upload).
5) Gestion des sessions utilisateurs
- Variables persistantes : Cookies et Session.
- Avantages, limitations et précautions.
- Variables de session et fonctions liées. Les Cookies.
- Sérialisation des variables complexes. Utilisation.
Travaux pratiques
Réalisation d'un objet Panier d'Achat stockable en cookie ou session. Gestion des quantités commandées.
6) Utilisation d'une base de données MySQL
- Concepts : bases, tables, champs, enregistrements.
- Fonctions PHP Mysqli. Introduction au langage SQL.
- Requêtes et traitement des résultats.
Travaux pratiques
Création d'une base MySQL et de fiches produits à la volée.
7) Une application Web professionnelle
- Notions d'architecture multicouches. Principes MVC.
- Formulaires complexes. Liaison aux données.
- Fonctions avancées de sélection: recherches et tris.
- Le graphisme en PHP : de la librairie GD.
- Intégration au site.
Travaux pratiques
Réalisation d'un moteur de recherche. Amélioration de la classe SQL. Implémentation multicouches. Intégration des
différents modules réalisés.
`Ìi`ÊÜÌÊÌiÊ`iÊÛiÀÃÊv
vÝÊ*ÀÊ*Ê `ÌÀÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ
\ÊÜÜÜ°pdfediting.com
Animateur: Abdallah Touili, Ing.Développeur-Formateur-Consultant www.menarainfo.com
page 33 / 65
Stage pratique
Réf : LJO
Participants
Développeurs non confirmés,
ingénieurs, chefs de projets
proches du développement.
Pré-requis
Connaissances de base
en programmation.
Expérience souhaitable en
développement d'applications.
L'essentiel de Java et de l'objet
OBJECTIFS
Ce cours vous permettra de maîtriser les principes de l'approche objet et les mécanismes du langage. Les constructions du
langage seront progressivement introduites à partir des concepts fondamentaux. Le cours abordera aussi les problèmes de
conception (via la notation UML) et présentera les principales API et librairies standard : les entrées/sorties, les utilitaires, les
classes graphiques (AWT et Swing), les applets. Ce cours présente rapidement les nouveautés de Java 5.
1) Les techniques " objet "
2) Les constructions de base du langage
3) La définition et l'instanciation des classes
4) L'héritage
5) Les exceptions
6) Présentation de quelques classes et librairies
standard
Travaux pratiques
Les exercices pratiques ont été conçus pour illustrer tous les éléments du langage et pour mettre en œuvre les concepts
de la conception orientée objet : tous les exercices comportent une phase d'analyse/conception suivie d'une phase de
programmation.
1) Les techniques " objet "
- Les principes généraux de la modélisation et de la programmation " objet ". L'abstraction et l'encapsulation : les interfaces.
Les différentes formes d'héritage, le polymorphisme.
- Une introduction aux modèles et à la notation UML : le modèle statique, le modèle dynamique, le modèle de coopération,
les scénarii.
Travaux pratiques
La spécification UML d'une étude de cas qui sera l'un des fils directeurs des exercices suivants.
2) Les constructions de base du langage
- Les variables : déclaration et typage.
- La définition des champs.
- Les méthodes : définition.
- Les expressions.
- Les instructions de contrôle : les instructions conditionnelles, de boucle, de branchement.
- Les tableaux.
- Les types énumérés, l'autoboxing.
- Les Unités de compilation et packages : le contrôle de la visibilité des classes, le mécanisme d'import.
- Les imports statiques.
Travaux pratiques
Suite d'exercices simples permettant la prise en main de l'environnement de développement et la réalisation d'un programme
simple. Utilisation des packages.
3) La définition et l'instanciation des classes
- Les classes et les objets.
- Les champs, les méthodes.
- Les constructeurs.
- L'autoréférence.
- Les champs et méthodes statiques.
- Les méthodes à nombre variable d'arguments.
- Les aspects méthodologiques : la conception des classes.
Travaux pratiques
Programmation de l'étude de cas.
4) L'héritage
- Les différentes formes d'héritage : l'extension et l'implémentation.
- Les interfaces et l'implémentation des interfaces. Le polymorphisme et sa mise en œuvre.
- L'extension. La définition des classes dérivées, les constructeurs, les références. Les aspects méthodologiques. La
construction de hiérarchies de classes. La factorisation de code : les classes abstraites.