Mac OS X Dashboard.

Dimension: px
Commencer à balayer dès la page:

Download "Mac OS X Dashboard. Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/"

Transcription

1 Mac OS X Dashboard

2 Dashboard un ensemble d outils toujours disponibles [F12] trois types d outils : accessoires (très autonomes) horloge, calculatrice... extensions d applications contrôleur itunes... informatifs météo, cours de la bourse...

3 Dashboard Un widget de base est un bundle particulier : répertoire d extension.wdgt fichier HTML contenant l interface une image de fond (PNG) Default.png une icône (PNG) Icon.png un fichier de propriétés Info.plist

4 Dashboard - HTML le HTML à employer devrait plutôt être conforme à XHTML 1.0 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>bonjour</title> </head> <body background="default.png"> <h1>bonjour tout le monde!</h1> </body> </html>

5 Dashboard - HTML Trois extensions disponibles : une balise canvas permettant de déclarer une zone d affichage l attribut composite à employer avec la balise image pour obtenir des rendus particuliers un nouveau type d entrée search pour obtenir créer un champ de recherche dans le style Mac OS X

6 Dashboard - HTML l exemple du widget Diderot (à télécharger depuis : <html> <head> <title>diderot</title> </head> <body background="default.png"> </body> </html>

7 Dashboard - Icon.png Icon.png est utilisée pour représenter le widget dans la barre de widgets, ses caractéristiques doivent être : le contenu doit être défini dans une zone de 75px X 75px l ombre projetée doit avoir : 50% d opacité une orientation de 90 par rapport à l horizontale un décalage de 3 pixels et une taille de 3 pixels avec du «flou Gaussien»

8 Dashboard - Info.plist Contient des métadonnées sur le widget, les clés obligatoires sont : CFBundleName : son nom «système» CFBundleDisplayName : son nom localisé CFBundleIdentifier : reverse Internet domain CFBundleVersion : version du widget MainHTML : fichier HTML principal

9 Dashboard - Info.plist Exemple du widget Diderot : <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/dtds/propertylist-1.0.dtd"> <plist version="1.0"> <dict>! <key>cfbundledisplayname</key>! <string>diderot</string>! <key>cfbundleidentifier</key>! <string>fr.univ-paris-diderot.diderot</string>! <key>cfbundlename</key>! <string>diderot</string>! <key>cfbundleversion</key>! <string>1.0</string>! <key>mainhtml</key> <string>diderot.html</string> </dict> </plist>

10 Dashboard - Technologies peuvent être employées : HTML (XHTML 1.0, en fait WebKit) structure CSS forme Javascript logique + toutes les technologies Apple (Obj-C...)

11 Dashboard - Ressources Quelques ressources standards sont fournies : /System/Library/WidgetResources/ on y trouve différentes classes Javascript, ainsi que diverses images d objets standards Les Widgets sont placés : pour tous les utilisateurs dans /Library/Widgets pour chaque utilisateur dans /Users/login/Library/Widgets

12 Dashboard - Classes Apple Pour conserver l apparence (look&feel) Apple, des classes d objets standards sont fournies : AppleScrollArea, AppleScrollbar AppleSlider AppleAnimator, AppleAnimation AppleButton les préférences et les faces les événements le glisser/déposer...

13 Dashboard - Classes Apple Insertion de la définition Javascript de l objet Insertion dans le document d un élément permettant de le représenter Déclaration d un handler permettant de réaliser les initialisations utiles Déclarations concernant le placement de l objet Définition du handler

14 Dashboard - AppleButton Insertion du code Javascript contenant les définitions utiles pour manipuler un bouton «Apple»: <script type= text/javascript src= / System/Library/WidgetResources/ AppleClasses/laClasse.js charset= utf-8 /> Ici laclasse est AppleButton

15 Dashboard - AppleButton Insertion de l élément du DOM en utilisant la balise <div> et son attribut id: <div id= monbouton ></div> Insertion du handler d initialisation <body onload= setup(); >

16 Dashboard - AppleButton Déclarations de positionnement : #monbouton { position: absolute; top: 200px; left: 160px; }

17 Dashboard - AppleButton Définition de la fonction d initialisation : var bouton; function unclic() { widget.openurl("http://www.google.fr/"); } function setup() { bouton = new AppleButton( document.getelementbyid("monbouton"), "Un clic?", 23, "images/bgauche.png","images/bgauchedown.png", 10, "images/bmilieu.png","images/bmilieudown.png", "images/bdroit.png","images/bdroitdown.png", 10,unClic); }

18 Dashboard - AppleButton Les propriétés/méthodes des objets AppleButton : onclick : (propriété) le handler setdisabledimages(...): (méthode) positionne des images à utiliser lorsque le bouton est inhibé enabled : (propriété) son statut setenabled(boolean) : (méthode) remove() : (méthode) pour détruire l objet textelement : (propriété) le label de l objet

19 Dashboard - AppleScrollbar Il y a deux objets à manipuler, la barre (AppleScrollbar) et le contenu à faire défiler (AppleScrollArea) Donc deux éléments du DOM Trois constructeurs : AppleVerticalScrollbar(élément); AppleHorizontalScrollbar(élément); AppleScrollArea(élément); une méthode d association : scrollarea.addscrollbar(scrollbar);

20 Dashboard - AppleSlider Deux constructeurs : AppleVerticalSlider(élément, handler); AppleHorizontalSlider(élément, handler); le handler est de la forme : function handler(valeur) {... } valeur est une valeur flottante entre 0 et 1

21 Dashboard - AppleAnimator En réalité il s agit de classes permettant de générer des appels de fonctions à intervalles contrôlés en générant des suites de valeur : AppleAnimator(délai, intervalle); AppleAnimation(début, fin, handler); le handler est de la forme : function handler(animation, valeur, début, fin) {... }

22 Dashboard - AppleAnimator L association entre un Animator et une Animation est réalisée par un appel à : animator.addanimation(animation); le contrôle est réalisé par : animator.start(); animator.stop();

23 Dashboard - les préférences un mécanisme de conservation de valeurs est disponibles. Il s agit de «préférences» : widget.setpreferenceforkey(valeur, clé); widget.preferenceforkey(clé); Note : les préférences sont persistantes (y compris aux sessions) Note : les préférences ne doivent être manipulées qu en face arrière

24 Dashboard - les faces les widgets possèdent deux faces : la face avant qui présente les données utiles la face arrière qui permet de contrôler les préférences on bascule de l une à l autre à l aide d un AppleInfoButton dans un sens et d un AppleGlassButton (appelé Done Button) dans l autre

25 Dashboard - les faces Le widget est divisés en deux parties : <div id= avant > <div id= info ></div> </div> <div id= arriere > <div id= done ></div> </div>

26 Dashboard - les faces Les handlers de bascule ressemblent à : function showprefs() { var av = document.getelementbyid("avant"); var ar = document.getelementbyid("arriere"); if (window.widget) widget.preparefortransition("toback"); av.style.display="none"; ar.style.display="block"; if (window.widget) settimeout ('widget.performtransition();', 0); }

27 Dashboard - les événements l apparition et le masquage : widget.onshow, widget.onhide la captation des événements : widget.onfocus, widget.onblur le déplacement : widget.ondragstart, widget.ondragend la suppression : widget.onremove

28 Dashboard - les canvas la balise canvas : <canvas id= id width= largeur height= hauteur /> en Javascript on récupère l objet, puis on manipule son contexte graphique : cv = document.getelementbyid( id ); ctxt = cv.getcontext( 2d );

29 Dashboard - les canvas les méthodes (non fixées) du contexte sont (non exhaustif) : save() restore() clearrect() translate() rotate() drawimage() fillrect() setfillcolor()

30 Dahsboard - l objet widget ses propriétés : identifier ondragstart ondragend onshow onhide onremove

31 Dahsboard - l objet widget ses méthodes : openapplication(bundleid); openurl(url); preferenceforkey(clé); preparefortransition(transition); performtransition(); setcloseboxoffset(x,y); setpreferenceforkey(valeur,clé); system(commande,handler); nécessite AllowSystem true

32 Dahsboard - les intentions Il est nécessaire de déclarer ce à quoi le widget a droit, par l intermédiaire de propriétés : AllowFileAccessOutsideOfWidget AllowFullAccess AllowInternetPlugins AllowJava AllowNetworkAccess AllowSystem Plugin

33 Dashboard - Accès au Web On peut accéder au Web via HTTP en utilisant l objet XMLHttpRequest : XMLHttpRequest() constructeur requête.open(méthode,url); requête.setrequestheader(champ,valeur); requête.onload = handler; requête.send(); / requête.abort(); requête.getresponseheader(champ); requête.responsexml / requête.responsetext

34 Dashboard - Documentation Dashboard Tutorial (Dashboard_Tutorial.pdf) Dashboard Reference (Dashboard_Ref.pdf) Web Kit DOM Programming Topics (SafariJSProgTopics.pdf)

À la découverte de jquery Mobile

À la découverte de jquery Mobile 1 À la découverte de jquery Mobile jquery Mobile est un ensemble de plug-ins et de widgets de jquery visant à déployer une API multiplates-formes capable de développer des applications Web mobiles. Au

Plus en détail

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s):

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s): Formation JavaScript : Perfectionnement Objectif(s): Comprendre l'approche AJAX Comprendre l'objet XMLHttpRequest Durée : 2 jour(s) Pré-requis : Bonnes connaissances en (X)HTML, CSS et JavaScript Public

Plus en détail

Introduction à la Simulation

Introduction à la Simulation ou comment créer votre premier jeu vidéo Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Aspect visuel souhaité Aspect visuel souhaité Code source de la page HTML Feuille

Plus en détail

Utilisation Des Widgets ITEA

Utilisation Des Widgets ITEA Utilisation Des Widgets ITEA Sommaire 1 Introduction... 3 2 Intégration sur votre site web... 5 2.1 Intégration du widget en JavaScript... 5 2.2 Exemples... 6 2.3 Paramètres iframe et aveccss... 6 2.4

Plus en détail

Développement Web Frameworks AJAX

Développement Web Frameworks AJAX 1 / 27 Développement Web Frameworks AJAX Jean-Michel Richer jean-michel.richer@univ-angers.fr http://www.info.univ-angers.fr/pub/richer 2009 2 / 27 Objectif Objectif du cours découverte de quelques frameworks

Plus en détail

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques Contenu Statique Le client envoie une requête avec un nom de fichier Le serveur répond en lui retournant

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail

TP JAVASCRIPT OMI4 jquery et ses Plungins

TP JAVASCRIPT OMI4 jquery et ses Plungins TP JAVASCRIPT OMI4 jquery et ses Plungins Objectifs de ce TP : découvrir quelques exemples d utilisation de la bibliothèque jquery et également quelques plugins. Exercice 1 : gestion d un bouton rollover

Plus en détail

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014 1 Le langage JavaScript TD N 3 Module IntegWEB MMI 1 2013/2014 Jeu les tables de multiplication 2 Code HTML 3 apprendre les tables de multiplication

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des

Plus en détail

Module : programmation site Web dynamique Naviguer entre les pages via site map

Module : programmation site Web dynamique Naviguer entre les pages via site map Module : programmation site Web dynamique Naviguer entre les pages via site map Soit le site web suivant qui est constitué de six pages web : On veut créer un menu constitué de trois nœuds principaux générale

Plus en détail

HTML5, CSS3. Apprenez les langages. pour créer votre premier site web. et JavaScript. HTML5, CSS3 et JavaScript - pour créer votre premier site web

HTML5, CSS3. Apprenez les langages. pour créer votre premier site web. et JavaScript. HTML5, CSS3 et JavaScript - pour créer votre premier site web pour créer votre premier site web Dès le début du livre l auteur présente un tour d horizon du développement sur le Web ; les langages côté client et serveur, les formats d images, les navigateurs afin

Plus en détail

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web Le Web 1. Qu est-ce que le Web? 7 1.1 Côté serveur : HTTP, FTP, langages, SQL 7 1.2 Côté client : HTML, CSS, JavaScript 10 2. Les langages et leur utilité 10 2.1 HTML 10 2.2 CSS 13 2.3 JavaScript 16 2.4

Plus en détail

Tp1 Ema EMACS Développement Web

Tp1 Ema EMACS Développement Web Tp1 Ema EMACS Développement Web 1/ Description de l application : Notre première application Web a pour objectif de gérer une liste de todo (truc à faire) : Diagramme de classe simplifié : Application

Plus en détail

Tp1 Ema EMACS Développement Web

Tp1 Ema EMACS Développement Web Tp1 Ema EMACS Développement Web 1/ Description de l application : Notre première application Web a pour objectif de gérer une liste de todo (truc à faire) : Diagramme de classe simplifié : Application

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

Dom, XML, Lecture de fichiers

Dom, XML, Lecture de fichiers Projet de développement web : Développement côté client Chapitre 4 Dom, XML, Lecture de fichiers Page 1 / 11 Table des matières Table des matières Introduction DOM : Document Object Model Structure habituelle

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 Table des matières PREMIÈRE PARTIE

Plus en détail

Le client/serveur dans le cas du Web

Le client/serveur dans le cas du Web Le client/serveur dans le cas du Web Olivier Flauzac & Cyril Rabat olivier.flauzac@univ-reims.fr cyril.rabat@univ-reims.fr Licence 3 Info - Info0503 - Introduction à la programmation client/serveur 2015-2016

Plus en détail

420-PK9-SL Programmation WEB JavaScript DOM

420-PK9-SL Programmation WEB JavaScript DOM 420-PK9-SL Programmation WEB JavaScript DOM Introduction Le lien entre JavaScript et le HTML/CSS est une hiérarchie d instances d objets appelé DOM (Document Object Model). À chaque balise HTML correspond

Plus en détail

Chapitre 7. Canvas. 7.1 Introduction. 7.2 Les attributs de 7.3 Intitialiser 7.3.1 document.getelementbyid(...)

Chapitre 7. Canvas. 7.1 Introduction. 7.2 Les attributs de <canvas> 7.3 Intitialiser <canvas> 7.3.1 document.getelementbyid(...) 108 Chapitre 7 Canvas 7.1 Introduction est un élément HTML qui peut être utilisé pour produire des éléments graphiques sur une page web, en utilisant javascript. Par exemple, il peut être utilisé

Plus en détail

Master Class OL3 Documentation

Master Class OL3 Documentation Master Class OL3 Documentation Version 2.0 Éric Lemoine, Camptocamp 10 April 2014 Table des matières 1 Exercices élémentaires 3 1.1 Exercice élémentaire 1.......................................... 4 1.2

Plus en détail

Formation (X)HTML-CSS avancé

Formation (X)HTML-CSS avancé Formation (X)HTML-CSS avancé Table des matières 1 Introduction 3 1.1 La philosophie W3C.................................. 3 1.2 Du HTML au XHTML................................. 3 1.3 Et dans la pratique...................................

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

Tutoriel pour l introduction à l animation en HTML5 et JavaScript

Tutoriel pour l introduction à l animation en HTML5 et JavaScript Tutoriel pour l introduction à l animation en HTML5 et JavaScript Frédéric Guégan Olivier Fauvel-Jaeger Giacomo Rombaut Table des matières 1. Introduction... 2 2. Création de l environnement... 2 3. Création

Plus en détail

Pages maîtres et thèmes

Pages maîtres et thèmes Pages maîtres et thèmes Page Maître Une page maître est une page Asp.Net qui possède les caractéristiques suivantes: Classe de base : MasterPage Extension: master Possède la directive Master au lieu de

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

Extensions FF. M1 MIAGE - Applications Web Adil El Ghali

Extensions FF. M1 MIAGE - Applications Web Adil El Ghali Extensions FF M1 MIAGE - Applications Web Adil El Ghali Plan Qu est ce qu une extension? Contenu d une extension Enregistrement des extensions Packaging des extensions Cycle de développement Environnement

Plus en détail

Documentation Logiciel full-web DECLA Site internet de Déclaration en ligne de meublés et chambres d hôtes

Documentation Logiciel full-web DECLA Site internet de Déclaration en ligne de meublés et chambres d hôtes Documentation Logiciel full-web DECLA Site internet de Déclaration en ligne de meublés et chambres d hôtes Evencom 15/01/2013 Documentation Site Internet de Déclaration en ligne de meublés et de chambres

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

Réalisation d un client «riche»

Réalisation d un client «riche» Réalisation d un client «riche» Rédacteurs : Alexandre Baillif, Philippe Lacomme et Raksmey Phan Date : septembre 2010 Avertissement : ce document est une reprise d une partie d un document écrit par Serge

Plus en détail

HTML 5 HTML 5. Nouveau standard en développement basé sur HTML et XHTML

HTML 5 HTML 5. Nouveau standard en développement basé sur HTML et XHTML HTML 5 HTML 5 Nouveau standard en développement basé sur HTML et XHTML Supporté partiellement par les navigateurs: Safari, Chrome, Firefox, et Opera supportent une partie de HTML5 Caractéristiques: Éléments

Plus en détail

Création du site dans Dreamweaver :

Création du site dans Dreamweaver : CHARGER, CREER et ENREGISTRER 1. Se connecter au RESEAU du COLLEGE avec tes 2 mots de passe 2. Charge le logiciel Au lancement du logiciel, l écran suivant s affiche : Palette des objets Lanceur Zone de

Plus en détail

Création d une Application Web / JSF

Création d une Application Web / JSF Création d une Application Web / JSF Rédacteurs : Alexandre Baillif, Philippe Lacomme et Raksmey Phan Date : juillet 2010 Avertissement : ce document est une reprise d une partie d un document écrit par

Plus en détail

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 Premières applications Web 2.0 avec Ajax et PHP J e a n - M a r i e D e f r a n c e Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 8 Applications Ajax-PHP synchrones Pour commencer simplement, je vous

Plus en détail

Introduction aux applets

Introduction aux applets Introduction aux applets M. Belguidoum Université Mentouri de Constantine Département Informatique M. Belguidoum (UMC) Programmation réseau 1 / 30 Plan 1 Quelques rappels 2 Principe de fonctionnement des

Plus en détail

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a Plateforme Systempay v1.24 Personnalisation avancée de la page paiement Version 1.2a Rédaction, Vérification, Approbation Rédaction Vérification Approbation Nom Date/Visa Nom Date/Visa Nom Date/Visa Lyra-Network

Plus en détail

ExtendScript pour Adobe After Effects

ExtendScript pour Adobe After Effects Formation de Duduf http://www.duduf.training I Documentation II Syntaxe, JavaScript III Tableaux (Array) IV Chaînes de caractères (String) V Boîtes de dialogue de base VI - Accès aux dossiers et aux fichiers

Plus en détail

Applications orientées données (NSY135)

Applications orientées données (NSY135) Applications orientées données (NSY135) 2 Applications Web Dynamiques Auteurs: Raphaël Fournier-S niehotta et Philippe Rigaux (philippe.rigaux@cnam.fr,fournier@cnam.fr) Département d informatique Conservatoire

Plus en détail

Guide d intégration des marques grises Destineo

Guide d intégration des marques grises Destineo Guide d intégration des marques grises Destineo Guide d intégration des marques grises service Présentation du Document élaboré par : 1, rue de la Loire 44 966 Nantes Cedex 9 Tél. +33 (0)2 28 20 50 00

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

Gérer les formulaires

Gérer les formulaires 195 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel sur les formulaires Le formulaire est un outil de base indispensable pour les sites web dynamiques puisqu'il

Plus en détail

Cours de programmation web

Cours de programmation web Cours de programmation web ENSAE 2006-2007 Cours 1 - Introduction 1. Introduction 2. Le principe d Internet 3. Les langages du web 4. Le web 2.0 Introduction : Historique 1967 : Arpanet : réseau militaire

Plus en détail

Un code simplifié, plus léger, moins bavard. Il est plus facile à manipuler et à mettre à jour.

Un code simplifié, plus léger, moins bavard. Il est plus facile à manipuler et à mettre à jour. XHTML : introduction 1. Présentation et historique Le HTML à l origine est un langage simple destiné à la présentation des documents hypermédias. Toutefois au fil des ans, il s est avéré que le HTML ne

Plus en détail

AdOps Spécifications techniques publicitaires

AdOps Spécifications techniques publicitaires AdOps Spécifications techniques publicitaires Matériel publicitaire HTML5 (Desktop) Les spécifications suivantes doivent être respectées pour la fourniture de matériel publicitaire HTML. Si vous utilisez

Plus en détail

Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web.

Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web. Création d une carte heuristique avec Freeplane Version : 1.1.3 Barre de menus Barre d outils Barre des touches de fonctions Espace de travail Barre d icônes Éditeur de notes Freeplane est un logiciel

Plus en détail

INFO4007 S. C. Technologie de l inforoute Examen final (35%)

INFO4007 S. C. Technologie de l inforoute Examen final (35%) INFO4007 - S. C. TECHNOLOGIE DE L INFOROUTE EXAMEN FINAL - 35% Nom : NI : I. Questions de cours (28 points) Depuis 2009, quels sont les deux groupes de travail qui collaborent pour définir les nouveaux

Plus en détail

TP2 : Client d une BDD SqlServer

TP2 : Client d une BDD SqlServer TP2 : Client d une BDD SqlServer Objectifs : utiliser la barre de menu, utiliser les préférences d application (settings) ou (options), gérer la persistance des données, utiliser la bibliothèque jtds:jdbc

Plus en détail

Architecture applicative de l application Web

Architecture applicative de l application Web Architecture applicative de l application Web Principes d organisation de l application PHP Gsb-AppliFrais Les principes d'organisation de l'application s'inspirent des travaux réalisés autour du contexte

Plus en détail

Présentation de HTML5

Présentation de HTML5 Présentation de HTML5 Option Web Multimédia Polytech Paris-Sud cycle préparatoire 2e année Claude Barras (claude.barras@u-psud.fr) Université Paris-Sud & LIMSI-CNRS 22 septembre 2014 Introduction HTML5

Plus en détail

MODX 1.0.10 NOUVEAUTES DEPUIS LA VERSION 0.96

MODX 1.0.10 NOUVEAUTES DEPUIS LA VERSION 0.96 MODX 1.0.10 NOUVEAUTES DEPUIS LA VERSION 0.96 Gérer les utilisateurs Paramétrer le site Modèles disponibles Paramètres d une page Activer le module de news Aller plus loin : javascript, snippets, chunks

Plus en détail

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap

Plus en détail

Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs

Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs Licence STIC IUT de Marne-la-Vallée 12/03/2015 Cours de jquery Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs Philippe Gambette Organisation pratique Contact - Courriel : philippe.gambette@gmail.com

Plus en détail

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML tableau Lévis Thériault, hiver 2009 Structure d un tableau

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

Cours Web - Javascript

Cours Web - Javascript Cours Web - Javascript Thierry Vaira BTS IRIS Avignon tvaira@free.fr v0.1 Objectifs Se familiariser avec le langage Javascript et acquérir une pratique minimale. Être capable d intégrer des scripts clients

Plus en détail

DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie

DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie Canvas est une balise HTML mais les méthodes de dessin sont l'affaire de JAVASCRIPT. Canvas, comme img, est une balise de type inline qui

Plus en détail

Créer un diaporama sur internet pour apprendre à programmer

Créer un diaporama sur internet pour apprendre à programmer Créer un diaporama sur internet pour apprendre à programmer 1 Etape 1: Créer un document HTML, afficher une image et lui associer un événement. Exercice: Détecter si l'utilisateur a cliqué sur l'image.

Plus en détail

Présentation du périmètre technique

Présentation du périmètre technique Présentation du périmètre technique Kit d intégration des fonctions de réservation Open System au sein d un site d information Alliance Réseaux v09012014 1 KIT D INTEGRATION DES FONCTIONS DE RESERVATION

Plus en détail

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 Éric Sarrion JQuery & JQuery UI Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 11 Onglets Les pages HTML comportant des onglets (tabs) sont devenues courantes dans les sites web actuels. Elles permettent

Plus en détail

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation.

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation. 1 Mega Menu Avec le du Worldsoft CMS, vous pouvez créer des menus de navigation. Vous pouvez mettre en place autant de menus que vous le désirez et les adapter graphiquement. Avec votre propre contenu

Plus en détail

Licence DANT Université Pierre et Marie Curie UE Nouvelles technologies du web TME SERVLETS

Licence DANT Université Pierre et Marie Curie UE Nouvelles technologies du web TME SERVLETS TME SERVLETS Avant de commencer vous devez installer tout ce qui est nécessaire (JBoss ou un autre serveur d application, Eclipse avec support de votre serveur d application). Pour les deux exercices ci-dessous

Plus en détail

Portail des communes Guide Référent ville

Portail des communes Guide Référent ville Portail des communes Guide Référent ville Services aux communes Introduction Vous êtes Référent pour votre commune et venez de recevoir vos identifiants de connexion à l ENT école. Ce document va vous

Plus en détail

Technologies du Web. Phases de travail Objectifs Activités

Technologies du Web. Phases de travail Objectifs Activités Technologies du Web Tutoriel 1 : «Structurer une page Web» PROBLEMATIQUE Créer la structure d une page Web avec un éditeur de texte. CONDITIONS DE DEROULEMENT DE L ACTIVITE Phases de travail Objectifs

Plus en détail

Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles

Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Mission TICE - académie de Versailles 7 nov. 2008 Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Anne-Cécile Franc Mission TICE académie de Versailles

Plus en détail

Internet. jquery jquery Mobile Partie 2

Internet. jquery jquery Mobile Partie 2 Internet jquery jquery Mobile Partie 2 Olivier Pons / 2013 Objectif Jquery / jquery Mobile Sommaire 1. Fondamentaux DOM 2. jquery 3. jquery Mobile 2 / 32 1. Fondamentaux DOM - Définition Le Document Object

Plus en détail

Introduction à HTML. A. HTML et le web

Introduction à HTML. A. HTML et le web Introduction à HTML Isabelle Debled Renesson Marie-Dominique Devignes LORIA 1 2 1 Fonctionnement en mode client/serveur 1. Construction d une requête ex web : http://www.loria.fr/news CLIENT 5. Mise en

Plus en détail

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design A.F.L.I.M. Ateliers de Formations Linguistique Informatique Multimédia Formation HTML5 et CSS3 - Pour des sites Responsive Web Design Formation : Présentation du HTML5 Bref historique du HTML5 Lignes de

Plus en détail

Édu-groupe - Version 4.3

Édu-groupe - Version 4.3 Édu-groupe - Version 4.3 Guide de l utilisateur Gestion des fichiers Société GRICS, Équipe Évaluation Août 2012 2 CONSIDÉRATIONS GÉNÉRALES A. Importante mise en garde concernant les types de fureteur Les

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

Mode d emploi : traitement des images pour diffusion web

Mode d emploi : traitement des images pour diffusion web BIU Montpellier / Service informatique Mode d emploi : traitement des images pour diffusion web 1. Introduction... 1 2. Exemple 1 : récupération et traitement d une vignette Aleph... 1 2.1 Récupération

Plus en détail

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

Plus en détail

Programmation de composant mobiles aka Android

Programmation de composant mobiles aka Android Programmation de composant mobiles aka Android responsable : Wies law Zielonka zielonka@liafa.univ-paris-diderot.fr http://liafa.univ-paris-diderot.fr/ zielonka September 19, 2015 Environnement de travail

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas...

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas... Introduction et HTML Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 Introduction Objectifs : Présentation des bases de la création de documents web par la découverte des

Plus en détail

Apprendre à développer avec JavaScript

Apprendre à développer avec JavaScript Présentation du langage JavaScript 1. Définition et rapide historique 11 2. Pré-requis pour un apprentissage aisé du langage 13 3. Outillage nécessaire 14 4. Positionnement du JavaScript face à d autres

Plus en détail

M2202 Algorithmique TD 5 : Une bannière animée interactive

M2202 Algorithmique TD 5 : Une bannière animée interactive M2202 Algorithmique TD 5 : Une bannière animée interactive Nous verrons dans ce TD comment : enchainer une suite d'images en fondu dans une bannière ; afficher une image spécifique de cette bannière par

Plus en détail

Développez une application Android Programmation en Java sous Android Studio

Développez une application Android Programmation en Java sous Android Studio Environnement de développement 1. Architecture d Android 9 1.1 Présentation d Android 9 1.2 Architecture 12 1.3 Play Store 13 2. Android Studio 14 2.1 Installation sous Windows 14 2.2 Installation sous

Plus en détail

Les médias en HTML5 : l audio et la vidéo

Les médias en HTML5 : l audio et la vidéo 5 Les médias en HTML5 : l audio et la vidéo Aujourd hui, le Web est véritablement devenu multimédia. L audio et la vidéo sont partie intégrante du contenu dans lequel nous naviguons quotidiennement. Grâce

Plus en détail

Les vues en Java EE : XHTML, CSS et JSP

Les vues en Java EE : XHTML, CSS et JSP Les vues en Java EE : XHTML, CSS et JSP La partie vue dans une application java EE concerne la conception et la création des pages visualisées par le client (navigateur dans le cas des applications web).

Plus en détail

HTML5 et CSS3 - La création de page web de A à Z

HTML5 et CSS3 - La création de page web de A à Z 2 Jours HTML5 et CSS3 - La création de page web de A à Z dans CREATION WEB - SITE INTERNET Objectifs de la formation HTML et CSS3 Créer ou modifier des pages HTML Découvrir les nouveautés du HTML 5 Intégrer

Plus en détail

Les 2 grands métiers. autour de la création Web. Mais où est passé l'intégrateur?

Les 2 grands métiers. autour de la création Web. Mais où est passé l'intégrateur? Les 2 grands métiers autour de la création Web Mais où est passé l'intégrateur? Langages et frameworks Outils spécifi ques dev mobile À voir dans le module multimédia... Langage : Java Objective C C#,...

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Initiation à la réalisation de site Web pour mobiles

Initiation à la réalisation de site Web pour mobiles TP 5 Initiation à la réalisation de site Web pour mobiles Introduction et objectifs du TP Ce TP a pour ambition de vous faire réaliser une version mobile du site du département informatique de l IUT de

Plus en détail

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl IAE - Web Marketing Créer un site internet «simple» Publier un site internet Référencer un site internet Olivier Toscano Gérant WebCMS Sàrl HTML HTML est un langage à balisage Les balises permettent de

Plus en détail

MODULE : PROGRAMMATION DE SITES WEB DYNAMIQUE

MODULE : PROGRAMMATION DE SITES WEB DYNAMIQUE MODULE : PROGRAMMATION DE SITES WEB DYNAMIQUE LEÇON :MASTER PAGE Formateur :A BENDAOUD OFPPT/DRPS/ISGI LAAYOUNE Les Master Pages Prenons l exemple d un site composé de trois grandes parties : une bannière

Plus en détail

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques.

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques. TP Javascript 2013 tv - v.1.0 Sommaire Séquence n 1 : les bases 2 Insertion de code javascript..................................... 2 Exercice n 1.1 : code javascript interne au document.......................

Plus en détail

Atelier «Netvibes» Journées annuelles RNDH. 14 octobre 2011. Animé par Kumar Guha

Atelier «Netvibes» Journées annuelles RNDH. 14 octobre 2011. Animé par Kumar Guha Atelier «Netvibes» Journées annuelles RNDH 14 octobre 2011 Animé par Kumar Guha 1 Définition 1 Une plateforme qui permet de réunir des informations de différentes sources afin de de créer un tableau de

Plus en détail

Concepteur Développeur Informatique Option Nomade

Concepteur Développeur Informatique Option Nomade Concepteur Développeur Informatique Option Nomade Module : Espace ouvert de formation (2 semaines) Ce module est composée de plusieurs parties : - le module développement durable (14 heures), qui traite

Plus en détail

GEDI Publier une information sur le Web

GEDI Publier une information sur le Web Introduction L application est une application de Gestion Electronique de Documentation destinée à publier et à gérer des documentations sur le site de l Université Dans un article (courrier) comprend

Plus en détail

Transmission d un signal sur un réseau (streaming) TP 3 : Intégration de vidéos sur un site web

Transmission d un signal sur un réseau (streaming) TP 3 : Intégration de vidéos sur un site web Transmission d un signal sur un réseau (streaming) TP 3 : Intégration de vidéos sur un site web IUT d Arles LP ATC/CA 2010-2011 Objectifs : Inclure dans une page web du code ou un fichier d'indirection

Plus en détail

TP2 : PHP. Exercice 1 : Premiers pas en PHP Voici un exemple de code PHP.

TP2 : PHP. Exercice 1 : Premiers pas en PHP Voici un exemple de code PHP. TP2 : PHP Exercice 1 : Premiers pas en PHP Voici un exemple de code PHP. 1 3

Plus en détail

TP Android : Structure d une application

TP Android : Structure d une application 1 TP Android : Structure d une application Vincent Dubois Dans ce TP, nous allons utiliser Android Studio pour créer une première application Android et l exécuter sur un périphérique mobile. Les premières

Plus en détail

Utiliser un logiciel libre de gestion bibliographique : Zotero 2.0

Utiliser un logiciel libre de gestion bibliographique : Zotero 2.0 Utiliser un logiciel libre de gestion bibliographique : Zotero 2.0 David Vivarès URFIST Strasbourg 1.Définition Les logiciels de gestion bibliographiques sont des outils spécialisés permettant de gérer

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Arbres Expressions Mathématiques Structure arborescente de l expression

Plus en détail

Créer un modèle pour Joomla 1.5

Créer un modèle pour Joomla 1.5 Créer un modèle pour Joomla 1.5 Dans le dossier templates de Joomla, créer un nouveau dossier au nom du modèle (lettres-chiffres-tirets, éviter caractères accentués et spéciaux) Dans ce dossier template/nom_du_modèle,

Plus en détail

Le Html5 comporte de façon native de nombreuses interfaces de programmation (Application Programming Interface ou API). Citons :

Le Html5 comporte de façon native de nombreuses interfaces de programmation (Application Programming Interface ou API). Citons : Préambule Le Html5 comporte de façon native de nombreuses interfaces de programmation (Application Programming Interface ou API). Citons : La géolocalisation, qui permet de localiser l utilisateur par

Plus en détail