Obiettivi

• Conoscere la funzione e le origini del consorzio W3C
• Conoscere le modalità e i meccanismi decisionali del consorzio W3C
• Riconoscere il livello di maturità di una specifica W3C
• Conoscere le novità di HTML5 e CSS3
• Conoscere le funzionalità base del DOM e degli altri standard collegati più diffusi (XPATH, SVG)

W3C 1/3

Il Web così come lo conosciamo oggi ha avuto origine al CERN dalle intuizioni di Sir Tim Berners-Lee.

Con l’obiettivo di realizzare un sistema ipertestuale per le pubblicazioni scientifiche realizzò il primo prototipo di quello che diventò il linguaggio di markup HTML.

Allo scopo di supportare la redazione di standard condivisi che garantissero l’interoperabilità tra sistemi diversi Sir Tim Berners-Lee fondò il consorzio W3C con l’aiuto della commissione europea e della DARPA.

Le sedi W3C sono:

• MIT (USA)
• ERCIM (Europe)
• Keio University (Japan)

W3C 2/3

La struttura del consorzio ed i meccanismi e le policy secondo cui opera sono descritte in un documento che segue lo stile delle altre specifiche W3C:

• http://www.w3.org/Consortium/Process/

W3C 3/3

Le attività si dividono in 3 tipologie di gruppi:

• Working Group
• Interest Group
• Coordination Group

Attraverso il lavoro di gruppi di lavoro (Working Group) vengono stilate specifiche riguardanti le tecnologie nell’area di competenza dello specifico Working Group.

Compito dei Working Group è la produzione di Technical Report, Test Suite e Software.

I technical report procedono attraverso una serie di test che ne indicano l’avanzamento nella stabilizzazione del nuovo standard (o nuova versione di uno standard esistente):

1. Working Draft (WD)
2. Candidate Recommendation (CR)
3. Proposed Recommendation (PR)
4. W3C Recommendation (REC)

W3C in a Picture

W3C: Gli standard 1/2

Tra gli standard della W3C più importanti e diffusi ci sono sicuramente:

• HTML / XHTML
• CSS
• DOM
• XML
• SVG
• XSLT, XPATH

W3C: Gli standard 2/2

W3C: jQuery Problems?

Someone need help… I have the following code (with a static URL for illustration) which gets an article from the PubMed database in XML format. The displayMessage statement shows that the desired XML is being returned. Within the XML is a single occurrence of data with the tag ArticleTitle, and despite trying several ideas from this forum and elsewhere, I can’t for the life of me figure out how to successfully get the contents of the ArticleTitle tag and assign it to a variable.

execute: function( PMID ) {
   var getUrl = "http://www.ncbi.nlm.nih.gov/pubmed/19072263?
report=XML&format=text";
   jQuery.get(getUrl,null,function(data){
     displayMessage(data);
   });
 }

W3C: DOM Solution!

(function () {
  var getUrl = "http://www.ncbi.nlm.nih.gov/pubmed/19072263?report=XML&format=text";

  jQuery.get(getUrl,null,function(data){
     var unescaped_data = jQuery(data)[1].textContent
     var jxml = jQuery(unescaped_data);
     console.log(jxml[0].tagName);
  });
})();

W3C: Le novità di HTML5 (1/2)

HTML5 è la prima specifica riguardante l’HTML a riguardare contemporaneamente HTML/XHTML e DOM allo scopo di armonizzarne le relazioni.

HTML5 ha come obiettivo l’aggiornamento delle specifiche tecniche legate a HTML/XHTML con modifiche che risultino utili allo sviluppo delle Rich Internet Application:

• WebWorkers Thread
• Offline Web Application
• Local Database
• Audio, Video e Canvas come tag nativi
• Enhanced Forms (DataGrid, Validation)

W3C: Le novità di HTML5 (2/2)

• http://www.w3.org/html/wg/html5
• http://en.wikipedia.org/wiki/HTML_5
• http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
• http://www.whatwg.org/specs
• http://www.whatwg.org/specs/web-workers/current-work

W3C: Le novità di CSS3

Lo sviluppo delle nuove caratteristiche dello standard CSS sono divise in una elevata quantità di moduli.

Tra le aree di intervento totalmente nuove ci sono:

• CSS Print Profile
• CSS Paged Media
• CSS Mobile Profile
• CSS Namespace
• CSS ObjectModel

http://www.w3.org/Style/CSS/current-work.html

Esempi

• DOM Navigation
• DOM Updating Attribute and Style
• DOM Element Creation, Inserting and Removing
• DOM Event Handling
• XPATH Selectors
• SVG Transformations
• DOM Parsing and Serializing

DOM Navigation (1/6)

DOM Navigation (2/6)

DOM Navigation (3/6)

document.getElementById()
document.getElementsByTagName()

node.nodeType
node.tagName
node.innerHTML
node.textContent

node.parentNode
node.hasChildNodes()
node.childNodes
node.firstChild
node.lastChild
node.previousSibling
node.nextSibling
node.ownerDocument

DOM Traversing (4/6)

elements = document.getElementsByTagName("h1");

for(var i=0; i<elements; i++) {
  console.log(elements[i])
}

console.log(elements[0].tagName);
console.log(elements[0].innerHTML);
console.log(elements[0].nodeType);

DOM Traversing (5/6)

document.ELEMENT_NODE=1
document.ATTRIBUTE_NODE=2
document.TEXT_NODE=3
document.CDATA_SECTION_NODE=4
document.ENTITY_REFERENCE_NODE=5
document.ENTITY_NODE=6
document.PROCESSING_INSTRUCTION_NODE=7
document.COMMENT_NODE=8
document.DOCUMENT_NODE=9
document.DOCUMENT_TYPE_NODE=10
document.DOCUMENT_FRAGMENT_NODE=11
document.NOTATION_NODE=12

DOM Traversing (6/6)

current = document.body.firstChild

current = current.nextSibling
current = current.previousSibling

parent = current.parentNode

DOM Attribute and Style Modify

node.getAttribute("class")
node.setAttribute("id","newtest_id_value")
node.removeAttribute("class")

node.attributes
node.attributes.length

node.attributes[0].nodeName
node.attributes[0].nodeValue

DOM Element Creation, Inserting and Removing

document.createElement()
document.createTextNode()
document.appendChild()
document.insertBefore()

paragraph = document.createElement('p');
bold = document.createElement('b');

text1 = document.createTextNode('Some random');
text2 = document.createTextNode(' example ');
text3 = document.createTextNode('text');

bold.appendChild(text2);
paragraph.appendChild(bold);
paragraph.appendChild(text3);
paragraph.insertBefore(text1,bold);

document.body.appendChild(paragraph);

DOM Event Handling

node.addEventListener
node.removeEventListener

event.type
event.target

curr_evt = {}
onclick = function(event) { curr_evt = event; };
document.body.addEventListener("click", onclick, false)

curr_evt.type
curr_evt.target

DOM Event Handling

Event Types:

• MouseEvents (click, mousedown, mouseup, mouseover, mousemove, mouseout)
• MutationEvents (DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified)
• HTMLEvents (load, unload, abort, error, reset, select, focus, blur, resize, scroll)

DOM References

• http://www.w3.org/TR/DOM-Level-2-Core
• http://www.w3.org/TR/DOM-Level-3-Core
• http://www.w3.org/TR/DOM-Level-2-Events
• https://developer.mozilla.org/En/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

XPATH

http://www.w3.org/TR/xpath:http://www.w3.org/TR/xpath

var xpathResult = document.evaluate( xpathExpression, contextNode, 
    namespaceResolver, resultType, result );

var paragraphCount = document.evaluate( 'count(//p)', document, null, 
                     XPathResult.ANY_TYPE, null );

alert( 'This document contains ' + paragraphCount.numberValue + 
       ' paragraph elements' );


(function() {
var ds_iter = document.evaluate('//p', document,
    null, XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
var node = ds_iter.iterateNext();

while(node) {
node = ds_iter.iterateNext();
alert(node);
}
})();

SVG transformations

http://www.w3.org/TR/SVG11/

rect = document.getElementsByTagName('rect')[0]
tr1 = rect.ownerSVGElement.createSVGTransform()

tr1.setTranslate(2,0)
rect.transform.baseVal.appendItem(tr1)

tr1.setRotate(3,0.5,0.5)
rect.transform.baseVal.appendItem(tr1)

DOM Parsing and Serializing

La Standard Way DOM Level-3 Load/Save non è attualmente supportata dall’engine di Firefox (è implementato sicuramente da Opera invece).

Mozilla Gecko (il rendering engine di Firefox) supporta i metodi non standard XMLSerializer e DOMParser:

var serializer = XMLSerializer();
var xml = serializer.serializeToString(document);

var parser = DOMParser();
parser.parseFromString("<div><h1>TITLE</h1><p>body text</p></div>","text/xml");