Diapositive 1

1
Chap IX - RDF Resource Description Framework

Chap X - AJAX Asynchronous JavaScript And XML
05/09/2015
Transparent - 1
2
Sommaire du Cours

• Chap I - Documents Historique, Modèles,
  Standards et Références
• Chap II - HTML voir le cours CIP1-CMD HTML5
• Chap III - XML "eXtensible Markup Language",
  les Bases
• Chap IV - DTD "Document Type Definition"
• Chap V - CSS Feuilles de Styles en Cascades
  CSS3
• Chap VI - DOM, DHTML "Domain Object Model "
  Programmation Dynamique en HTML SPRY JQuery
• Chap VII - XSD Schémas XML
• Chap VIII - XML "Advanced" Processeurs et
  Dialectes XPath, Xlink
• Chap IX - XSLT Transformations XML
• Chap X - RDF "Resource Description Framework"
• Chap IX - AJAX "Asynchronous JavaScript And XML"
• Savoir-Faire Know Hows
• HTML XHTML CSS JSDOM MATHML XPATH
  XLINK XSLT
• Etat de l'art
• HTML5 CSS3 SPRY SVG RDF AJAX XUL

05/09/2015
Transparent 2
3
Some Références

• Web
• EPU courses (in French)
• Création Manipulltion de Document
  http//www.polytech.unice.fr/pfz/cmd.html
• Introduction to Internet http//rainbow.i3s.unice
  .fr/iai/
• Langages Documents httpwww.polytech.unicefr/p
  fz/document.html
• W3C tutorial http//www.w3schools.com/
  
• Mozilla Development Center http//developer.mozil
  la.org/en/docs/Main_Page
• W3C, http//www.w3.org/
• Web Developer's Bookmarks http//antriksh.com/reso
  urces/
• Biblio
• many issues at EPU's lib

05/09/2015
Transparent 3
4
Documentation et Manuels

• Documents du web
• liste de balises HTML
• code des couleurs RVB
• code HTML des caractères ISO
• liste des extensions de fichiers (formats)
• Expressions Rationnelles
• Manuels.
• Expressions régulières sous Emacs
• Recherche et remplacement sous Emacs
• compléments Emacs
• grep sous Unix

• Tutoriaux du Web
• W3C http//www.w3schools.com/
• CSS Play http//www.cssplay.co.uk/index
• Zen Garden http//www.csszengarden.com/tr/franca
  is/
• CSS in10 steps http//www.barelyfitz.com/screenc
  ast/html-training/css/positioning/
• 10 steps to better CSS http//shapeshed.com/jour
  nal/10_steps_to_better_css/

05/09/2015
Transparent 4
5
Références Web
05/09/2015
Transparent 5
6
Lexique

• API Application Programming Interface
• ANSI American National Standards Institute
• ASCII American Standard Code for Information
  Interchange (128 car.)
• AJAX Asynchronous JavaScript XML
• CSS Cascading Style Sheets
• DHTML Dynamic HTML
• DOM Document Object Model
• DTD Document Type Definition
• HTML HyperText Markup Language
• HTTP HyperText Transfer Protocol
• ISO - International Standards Organization
• Mozilla - Fondation (global community for free
  and open Internet software))
• MVC - Model View Controler
• RDF - Resource Description Framework
• REST - Representational State Transfer
• RIA - Rich Internet Application
• RSS - Really Simple Syndication
• SGML - Standard Generalized Markup Language
• SOAP - Simple Access Object Protocol

05/09/2015
Transparent 6
7
Chap IX - RDF Resource Description Framework
RDF/XML Dublin Core OWLRDF validator
05/09/2015
Transparent - 7
8
RDF- Resource Description Framework (W3C)

• RDF is a part of the W3C's Semantic Web Activity
• RDF is a W3C Recommendation
• RDF is a framework for describing resources on
  the web
• RDF provides a model for data, and a syntax so
  that independent parties can exchange and use it
• RDF is designed to be read and understood by
  computers
• RDF is not designed for being displayed to people
• RDF is a XML Dialect
• RDF - Examples of Use
• Describing properties for shopping items, such as
  price and availability
• Describing time schedules for web events
• Describing information about web pages, such as
  content, author, created and modified date
• Describing content and rating for web pictures
• Describing content for search engines
• Describing electronic libraries.
• RDF and "The Semantic Web"(W3C's "Semantic Web
  Vision")
• Web information has exact meaning
• Web information can be understood and processed
  by computers
• Computers can integrate information from the web

05/09/2015
Transparent 8
9
RDF/XML Resource with Properties and Values

• A Resource is anything that can have a URI
  (about), such as "http//polytech/LANGDOC/RDF"
• A Property is a Resource that has a name, such as
  ltauthorgtor lthomepagegt
• A Property value, such as "Paul Franchi" or
  "http//www.polytech.unice.fr/pfz"
• W3C RDF Syntax Validator Graph Generator

RDF Namespace
lt?xml version"1.0" encoding"ISO-8859-1"?gt lt!--
RDF file pour ce cours --gt ltrdfRDF
xmlnsrdf"http//www.w3.org/1999/02/22-rdf-syntax
-ns" xmlnspol"http//polytech"
gt ltrdfDescription rdfabout"http//polytech/LANG
DOC/RDF"gt ltpolauthorgt Paul Franchi
lt/polauthorgt ltpolhomepagegt http//www.polytech.
unice.fr/pfz lt/polhomepagegt lt/rdfDescriptiongt
lt/rdfRDFgt
Namespace
URI
05/09/2015
Transparent 9
10
RDF - Graphe Entité-Relation

• Un modèle de Graphe Entités/Relations
• Une syntaxe RDF/XML pour "sérialiser" le graphe

Resource
Value
http//polytechauthor
PrOperty
http//polytechhomepage
PrOperty
Value
05/09/2015
Transparent 10
11
RDF Description, Property, Attribute, Value,
resource
RDF Namespace
lt?xml version"1.0" encoding"ISO-8859-1"?gt ltrdf
RDF xmlnsrdf"http//www.w3.org/1999/02/22-rdf-s
yntax-ns" xmlnscd"http//www.Bib/cd"gt
ltrdfDescription rdfabout"http//www.Bib/cd/Em
pire Burlesque" cdartist"Bob Dylan"
cdcountry"USA" cdcompany"Columbia"
cdprice"10.90" cdyear"1985"
/gt ltrdfDescription rdfabout"http//www.Bib/cd
/Hide your heart"gt ltcdartist rdfresource"http
//www.Bib/cd/Bonnie Tyler" /gt ltcdcompanygtCBS
Recordslt/cdcompanygt ltcdyeargt1988lt/cdyeargt
lt/rdfDescriptiongt . . . lt/rdfRDFgt
Bib Namespace
URI
05/09/2015
Transparent 11
12
RDF - W3C Syntax Validator Graph Generator
http//www.w3.org/RDF/Validator/
05/09/2015
Transparent 12
13
RDF Bag et les autres Conteneurs
lt?xml version"1.0" encoding"ISO-8859-1"?gt ltrdfR
DF xmlnsrdf"http//www.w3.org/1999/02/22-rdf-syn
tax-ns" xmlnscd"http//www.Bib/cd"gt
ltrdfDescription rdfabout"http//www.Bib/cd/Bea
tles"gt ltcdartistgt ltrdfBaggt
ltrdfligtJohnlt/rdfligt ltrdfligtPaullt/rdfligt
ltrdfligtGeorgelt/rdfligt ltrdfligtRingolt/rdfli
gt lt/rdfBaggt lt/cdartistgt lt/rdfDescriptiongt lt
/rdfRDFgt
05/09/2015
Transparent 13
14
RDF Bag, Seq, Alt
lt?xml version"1.0" encoding"ISO-8859-1"?gt ltrdfR
DF xmlnsrdf"http//www.w3.org/1999/02/22-rdf-syn
tax-ns" xmlnscd"http//www.Bib/cd"gt
ltrdfDescription rdfabout"http//www.Bib/cd/Be
atles"gt ltcdartistgt ltrdfBaggt
ltrdfligtJohnlt/rdfligt ltrdfligtPaullt/rdfligt
ltrdfligtGeorgelt/rdfligt ltrdfligtRingolt/rdfli
gt lt/rdfBaggt lt/cdartistgt lt/rdfDescriptiongt .
. . lt/rdfRDFgt
ltcdartistgt ltrdfSeqgt ltrdfligtGeorgelt/rdfligt
ltrdfligtJohnlt/rdfligt ltrdfligtPaullt/rdfligt
ltrdfligtRingolt/rdfligt lt/rdfSeqgt lt/cdartistgt
ltcdformatgt ltrdfAltgt ltrdfligtCDlt/rdfligt
ltrdfligtRecordlt/rdfligt ltrdfligtTapelt/rdfligt
lt/rdfAltgt lt/cdformatgt
05/09/2015
Transparent 14
15
RDF- les utilisations classiques

• Dublin Core MetaData
• OWL
• Mozilla
• contents.rdf
• chrome.rdf
• XUL
• Communication par RDF files (génération par Php,
  etc.)
• RSS 1.0

05/09/2015
Transparent 15
16
Dublin Core

• The Dublin Core Metadata Initiative (DCMI) has
  created some predefined properties for describing
  documents.

Property Definition
Contributor An entity responsible for making contributions to the content of the resource
Coverage The extent or scope of the content of the resource
Creator An entity primarily responsible for making the content of the resource
Format The physical or digital manifestation of the resource
Date A date of an event in the lifecycle of the resource
Description An account of the content of the resource
Identifier An unambiguous reference to the resource within a given context
Language A language of the intellectual content of the resource
Publisher An entity responsible for making the resource available
Relation A reference to a related resource
Rights Information about rights held in and over the resource
Source A Reference to a resource from which the present resource is derived
Subject A topic of the content of the resource
Title A name given to the resource
Type The nature or genre of the content of the resource
05/09/2015
Transparent 16
17
Dublin Core
lt?xml version"1.0" encoding"ISO-8859-1"?gt lt!--
RDF file pour le Tutorial de W3Schools--gt ltrdfRD
F xmlnsrdf"http//www.w3.org/1999/02/22-rdf-synt
ax-ns" xmlnsdc "http//purl.org/dc/elements/
1.1/" gt ltrdfDescription rdfabout"http//www.w3
schools.com "gt ltdctitlegtD-Lib
Programlt/dctitlegt ltdcdescriptiongtW3Schools -
Free tutorialslt/dcdescriptiongt
ltdcpublishergtRefsnes Data aslt/dcpublishergt
ltdcdategt1999-09-01lt/dcdategt ltdctypegtWeb
Developmentlt/dctypegt ltdcformatgttext/htmllt/dcfo
rmatgt ltdclanguagegtenlt/dclanguagegt
lt/rdfDescriptiongt lt/rdfRDFgt
05/09/2015
Transparent 17
18
OWL - "Web Ontology Language " (W3C)

• What is OWL?
• OWL is built on top of RDF as a web standard
• OWL is for processing information on the web
• OWL was designed to be interpreted by computers
• OWL was not designed for being read by people
• OWL is written in XML
• OWL has three sublanguages
• OWL Lite
• OWL DL (includes OWL Lite)
• OWL Full (includes OWL DL)
• OWL is Different from RDF
• OWL is a stronger language with greater machine
  interpretability than RDF.
• OWL comes with a larger vocabulary and stronger
  syntax than RDF.

What is Ontology? For the web, Ontology is about
the exact description of web information and
relationships between web information.

• OWL Example (Airport)
• OWL Resource http//www.daml.org/2001/10/html/air
  port-ont
• Class Airport
• Properties
• elevation
• iataCode
• icaoCode
• latitude
• location
• longitude
• name

05/09/2015
Transparent 18
19
Chap X - AJAX Asynchronous JavaScript And XML
Http synchrone XMLHttpRequest
Les exemples AJAX tournent sous FF3, mais pas
(encore) sous FF4
05/09/2015
Transparent - 19
20
AJAX- Asynchronous JavaScript and XML

• AJAX is not a new programming language, but a
  technique for creating better, faster, and more
  interactive web applications.
• With AJAX, your JavaScript can communicate
  directly with the server, using the JavaScript
  XMLHttpRequest object. With this object, your
  JavaScript can trade data with a web server,
  without reloading the page.
• AJAX uses asynchronous data transfer (HTTP
  requests) between the browser and the web server,
  allowing web pages to request small bits of
  information from the server instead of whole
  pages.
• The AJAX technique makes Internet applications
  smaller, faster and more user-friendly.
• AJAX is a browser technology independent of web
  server software.
• AJAX is based on the following web standards
• JavaScript
• XML
• HTML
• CSS

05/09/2015
Transparent 20
21
AJAX schéma "HttpRequest / Response"
lthtmlgt ltscript type"text/javascript"gt
function HTTP() lt/scriptgt ltbodygt
HTTP() lt/bodygt lt/htmlgt
Côté "Serveur"
Synchronebloquant ou Asynchrone non bloquant
Côté "Client"
05/09/2015
Transparent 21
22

• 0 (non init)
• 1 (connexion)
• 2 (requete)
• 3 (réponse),
• 4 (terminé)

L'Objet XMLHttpRequest

• Attributs
• readyState
• status 200 si ok - 404 si la page n'est pas
  trouvée.
• responseText données chargées dans une chaîne de
  caractères.
• responseXml données chargées sous forme xml,
• onreadystatechange propriété activée par un
  évènement de changement d'état. On lui assigne
  une fonction.
• Méthodes
• open(mode, url, boolean)
• mode type de requête, GET ou POST
• url l'adresse des données,
• boolean true (asynchrone) / false (synchrone).
• en option on peut ajouter un login et un mot de
  passe.
• send("chaine") null pour une commande GET.

05/09/2015
Transparent 22
23
Script AJAX
function submitForm() var xhr
try xhr new ActiveXObject('Msxml2.XMLHTT
P') catch (e) //IE try
xhr new ActiveXObject('Microsoft.XMLHTTP')
catch (e2) //FF try xhr
new XMLHttpRequest() catch
(e3) xhr false
xhr.onreadystatechange function()
if(xhr.readyState 4)
if(xhr.status 200)
document.ajax.dyn"Received"
xhr.responseText else
document.ajax.dyn"Error code "
xhr.status xhr.open(
GET", "data.xml", true) xhr.send(null)
05/09/2015
Transparent 23
24
"Http synchrone"
"Request" synchrone sur un serveur
lthtmlgt ltscript type"text/javascript"gt
function syncHTTP() try var xmlHttp
try // IE7, Firefox, Opera 8.0, Safari
netscape.security.PrivilegeManager.enablePrivileg
e("UniversalBrowserRead") xmlHttpnew
XMLHttpRequest() catch (e)
alert("Your browser is not a good one!") return
false xmlHttp.open ("GET","http//www.w3s
chools.com/ajax/time.asp", false) // synchrone
xmlHttp.send (null) if(xmlHttp.status
! 200) throw new ERROR("HTTP "
xmlHttp.status) //200OK
document.myForm.time.valuexmlHttp.responseText
catch (e) alert("Erreur au HTTP") return
false // syncHTTP() lt/scriptgt ltbodygt ltform
name"myForm"gt Name ltinput type"text"
onkeyup"syncHTTP() " name"username" /gt Time
ltinput type"text" name"time" /gt lt/formgt lt/bodygt
lt/htmlgt
"false" synchrone
05/09/2015
Transparent 24
25
"Request" sur un serveur (url, .asp ou.php)
lthtmlgt ltscript type"text/javascript"gt
var xmlHttp function ajaxFunction() /
voir suivant / xmlHttp.onreadystatechange
function() / voir suivant /
lt/scriptgt ltform name"myForm"gt Name ltinput
type"text" onkeyup"ajaxFunction()"
name"username" /gt Time ltinput type"text"
name"time" /gt lt/formgt lt/bodygt lt/htmlgt

• XMLHttpRequest asynchrone onreadystatechange()

05/09/2015
Transparent 25
26
"Request" sur un serveur (url, .asp ou.php)
function ajaxFunction() var xmlHttp try
// IE7, Firefox, Opera 8.0, Safari
netscape.security.PrivilegeManager.enablePrivilege
("UniversalBrowserRead") xmlHttp new
XMLHttpRequest() catch (e) // Internet
Explorer 6 et - try xmlHttpnew
ActiveXObject("Msxml2.XMLHTTP") catch (e)
try xmlHttpnew
ActiveXObject("Microsoft.XMLHTTP")
catch (e) alert("Your browser does not support
AJAX!") return false
xmlHttp.onreadystatechange function()
if (xmlHttp.readyState4) document.myForm.t
ime.value xmlHttp.responseText
xmlHttp.open("GET","http//www.w3schools.com/ajax/
time.asp", true) xmlHttp.send (null) //
ajaxFunction
"true" asynchrone

• XMLHttpRequest asynchrone onreadystatechange()

05/09/2015
Transparent 26
27
"Request" sur un document .xml
lt?xml version"1.0" encoding"ISO-8859-1"?gt lts
cript type"text/javascript"gt lt!CDATA
var xmlhttp function loadXMLDoc (url)
xmlhttpnull if (window.XMLHttpRequest) //
code for IE7, Firefox, Mozilla, etc.
netscape.security.PrivilegeManager.enablePrivilege
("UniversalBrowserRead") xmlhttpnew
XMLHttpRequest() else if (window.ActiveXObjec
t) // code for IE5, IE6 xmlhttp new
ActiveXObject ("Microsoft.XMLHTTP") if
(xmlhttp!null) xmlhttp.onreadystatechange
onResponse xmlhttp.open ("GET", url, true)
xmlhttp.send (null) else alert ("Your
browser does not support XMLHTTP.")

• XMLHttpRequest asynchrone onResponse()

05/09/2015
Transparent 27
28
"Request" sur un document .xml
function onResponse() if (xmlhttp.readyState!4
) return if (xmlhttp.status!0
xmlhttp.status!200) // OK? alert ("Problem
retrieving XML data") return
TRAITEMENT_DU_XML() // ou TRAITEMENT_DU_TEXTE
() gt lt/scriptgt lt/headgt ltbodygt ltdiv
id"copy"gt ltbutton onclick"loadXMLDoc('cd_catalog
.xml')"gtGet CD infolt/buttongt lt/divgt lt/bodygt

• XMLHttpRequest asynchrone onResponse()

05/09/2015
Transparent 28
29
"Request" sur un document .xml
TRAITEMENT_DU_TEXTE() // extraction du
"string source" var reponse xmlhttp.responseText
/ traitement avec RegExp, match(),
split(), substr(), slice(), etc. / var
debutnew RegExp ("\\d\\D?lt\/CDgt") alert
(xmlhttp.responseText.match(debut)0)

• XMLHttpRequest responseText

05/09/2015
Transparent 29
30
"Request" sur un document .xml
TRAITEMENT_DU_XML() txt"lttable
border'1'gt" x xmlhttp.responseXML. documentE
lement.getElementsByTagName("CD") for
(i0iltx.lengthi) txttxt "lttrgt"
xxxi.getElementsByTagName("TITLE")
try txttxt "lttdgt" xx0.firstChild.nodeV
alue "lt/tdgt" catch (er) txttxt
"lttdgt lt/tdgt" xxxi.getElementsByTagN
ame("ARTIST") try txttxt
"lttdgt" xx0.firstChild.nodeValue "lt/tdgt"
catch (er) txttxt "lttdgt lt/tdgt"
txttxt "lt/trgt" txttxt
"lt/tablegt" document.getElementById('copy').innerH
TML txt

• XMLHttpRequest responseXML.

05/09/2015
Transparent 30