Technologies Web Côté client

(1)

Technologies Web Côté client

INF228

Cyril Concolato – 2013

(2)

A Web of Structured Content

(3)

What is Web Content?

 Textual, visual or aural content experienced when using a

browser

• « Web Page »

 Examples

• HTML / XHTML

─ Content structuration

─ No associated rendering

• CSS

─ Presentation instructions to render the HTML content

• SVG

─ Presentation instructions to render rich graphical content

• JS

─ Programmatic behavior to be add to HTML content

 A mix of multiple languages and file formats

• Each with its own usefulness

• Hierarchically nested/referenced

• XML

─ Data exchange, validation, …

• JSON

─ Data exchange

• ZIP

─ Packaging

• WOFF/EOT

─ Font download

• MathML

• …

(4)

Tools to create web content

 Basic tools

• Text Editor, IDE

 Advanced Tools

• Adobe Suites

• …

 Code playgrounds

• JS Fiddle (http://jsfiddle.net/)

• Code Pen (http://codepen.io/)

• CSS Deck (http://cssdeck.com/)

• JS Bin (http://jsbin.com/)

(5)

The Web Layers

SGML XHTML

XML

HTML ASCII

Unicode CSS

XSLT SVG

JS HTML5

URL

(6)

Web Content:

Mostly W3C recommendations

(7)

 File extensions

• Resources may not have one, or it may be wrong

─ Ex: http://www.example.org/

─ Ex: http://www.example.org/generate.cgi?user=12.

• Not reliable!

 Sniffed type

• E.g. use of ‘magic number’ (registered in MIME type)

─ Ex: “47 49 46 38 37 61” GIF89a

• E.g Detection of file header (XML)

• May be abused (See http://mimesniff.spec.whatwg.org/)

 MIME type or Internet Media Type

• Used in HTTP Content-Type header

• <type> ‘/’ <subtype> (‘;’ parameters )*

• 5 major types: audio, video, image, text, application

• Subtypes specific to a payload (‘x-…’ are proprietary)

• Should be trusted (http://www.w3.org/2001/tag/doc/mime-respect)

Identifying Web Resources

(8)

Representing Web Resources:

The internationalization (i18n) problem

Language Percent of World Population

Mandarin 12.44%

Spanish 4.85%

English 4.83%

Arabic 3.25%

Hindi 2.68%

Bengali 2.66%

Portuguese 2.62%

Russian 2.12%

Japanese 1.80%

German 1.33%

Javanese 1.25%

Others 61.17%

 Mostly text-based resources

• Need to represent all languages

─ Alphabets, writing modes, …

 Fundamentals

• Unicode: Character Set

• UTF-8: Encoding

Source: Wikipedia

http://www.w3.org/International/

(9)

Web Browsers

(10)

Browser Role

 Processing of Web Resources

• Downloading of HTML/JS/CSS/Images/Videos …

─ Parallel, sequential, syncronous, asynchronous, …

• Rendering (aural and visual)

 Handling dynamicity

• Reacting to user interactions

─ Navigation, Click, …

• Reacting to network conditions

• Processing animations

(11)

Browser Status

 Long history of browsers

• http://www.evolutionoftheweb.com/

• http://upload.wikimedia.org/wikipedia/commons/7/74/Time line_of_web_browsers.svg

 Browsers are evolving fast

• Next versions of major browsers very often

─ Ex: Chrome release a new version every 6 weeks

─ Ex: Firefox 5 (June 2011), Firefox 25 (Oct. 2013)

 Browsers are converging in standards support

• But still have differences

─ http://caniuse.com/,

─ http://www.quirksmode.org

(12)

Browser Wars

Usage share of desktop/mobile web browsers

Other browser categories:

- Mobile - Embedded - TV

Major Desktop Browsers

(13)

Browsers Architecture

 Parsers

• HTML, CSS, XML, …

 Rendering/Layout Engine

• Firefox, Seamonkey , …  Gecko

• Chrome, Chromium, Opera  Blink

• Safari  WebKit

• IE  Trident

 Scripting Engine

• Firefox  (Spider)Monkey

• Chrome, Opera  V8

• IE  Chakra

• Safari  JavaScript Core

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

(14)

Browser Architecture

(15)

Identifying the browser

 « User Agent »

• Identifier string exchanged in HTTP

─ Browser name, rendering engine,

• Used to

─ Work around known bugs

─ Serve the right content (e.g. smartphone version)

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:15.0) Gecko/20120427 Firefox/15.0a1 Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1663.2 Safari/537.36

Mozilla/5.0 (MSIE 9.0; Windows NT 6.1; Trident/5.0)

Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00 Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us)

AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5

 User Agent detection vs. Feature detection

(16)

Browser Processing:

Simplified Architecture

 Simplified Architecture

• Loading: creating a memory representation from input

• Compositing: applying styles, interactivity (scripting), animations, synchronizing media elements … to produce static data to be rendered

• Rendering of static data

─ Converting text to pixels, vector graphics to pixels, applying graphical effects

─ Management of graphics card, video card, sound card

 Processing of several tasks

• Synchronously (or not)

• Cyclic (or not)

• Performances: High quality rendering, frame rate, reactivity, memory consumption

Loading Compositing Rendering

(17)

Tools to Debug

 Browser-integrated debugger

• Chrome Dev Tools

https://developers.google.com/chrome-developer-tools/

• Mozilla Firebug

https://developer.mozilla.org/en-US/docs/Tools

• Microsoft Developer Tools http://msdn.microsoft.com/en-

us/library/dd565627(v=vs.85).aspx

• Safari Developer tools

https://developer.apple.com/technologies/safari/developer -tools.html

 What kind of debugging ?

• Web Inspector: DOM, CSS

• Network monitoring

• Rendering Performances

• JavaScript debug

(18)

Documentations

 http://www.webplatform.org/

 Microsoft MSDN

 Mozilla MDN

 W3C Document Validator

• http://validator.w3.org/

(19)

HyperText Markup Language

(20)

 Well-known markup language for web pages

• Initial version created by Tim Berners-Lee in 1989

• Several versions

─ HTML 4 Strict, Transitional, Frameset

─ HTML vs. XHTML

─ HTML 5 (HTML.next, HTML 5.1)

HTML 1.0 (1993) 2.0 (11/1995)

3.2 (01/1997)

4.0 (12/1997)

4.01 (12/1999)

5

(2014 ?) 5.1

XHTML (HTML+XML)

1.0 (01/2000)

1.1 (05/2001)

1.0 2^nd Edition (08/2002)

2.0 (X)

HTML :

A bit of history

(21)

HTML 5:

The language

 1 abstract language, 2 syntaxes

• HTML, identified by text/html

• XHTML (XML), identified by application/xhtml+xml

• Different processing

─ E.g. More or less strict parsing

 Presentation agnostic

• Might be rendered by different renderer

• Rendering can be configured via CSS

 Basic Interactivity (navigation, forms)

• Advanced Interactivity to be provided by JS

 In-memory representation: DOM HTML (DOM)

(22)

 Ongoing version of the recommendation

• Initially developed by the WHATWG group

─ “Living Standard”

─ http://www.whatwg.org/specs/web-apps/current-work/multipage/

• Now also following W3C recommendation track

─ http://www.w3.org/html/wg/drafts/html/master/

 Large specification with several new aspects

• New markup elements

─ Better Tables, Forms

─ Multimedia: <video>, <audio>, <source>, <track> elements

─ Graphics: <canvas>

• New JavaScript API

─ Offline Storage Database, Web Storage

─ Drag-n-drop

─ Cross-messaging

─ …

• Integration with other Web technologies

─ Mix of SVG and MathML within the HTML page

• …

HTML 5:

The standard(s)

http://www.html5rocks.com/

(23)

HTML 5:

Demos

 http://www.apple.com/html5/

 http://ie.microsoft.com/testdrive/

 https://developer.mozilla.org/en-US/demos/

(24)

HTML 5:

The syntax

 Tags

• start (opening) tag : <mytag>

• end (closing) tag: </mytag>

• Self-closing tag: <mytag/>

 Tags organize the content in an HTML document tree of nodes (DOM Tree)

 Attributes

• <mytag name="value"/>

• <mytag name=value/> HTML 5 syntax

• <mytag name/> HTML 5 syntax

 Attributes indicate properties of an element

(25)

HTML 5:

Elements and Content Model

 Many elements

• Header: html, head, title, meta, link, …

• Sections: body, article, section, nav , h1, h2, …

• Grouping: p, div, ol, ul, …

• Text oriented elements: span, a, br , …

• Media elements: img, video, audio, source, track …

• Referencing: iframe, embed, object,

• Forms: form, label, fieldset, input, button…

• Tables: table, caption, tr , td …

• Special elements: style, script

 Content model

• Allowing elements only at appropriate places

(26)

HTML5:

Basic page structure

<!DOCTYPE html>

<html>

<head>

<title>This is the title</title>

</head>

<body>

</body>

</html>

(27)

HTML 5:

Semantic structuring of a page

(28)

HTML5:

Document Object Model (DOM) Tree

 Tree-based memory representation of an HTML document

• DOM Node =

─ DOM Text node

─ DOM Comment node

─ DOM Element

─ DOM Attribute

 DOM Nodes, DOM Elements … can be

manipulated by script via specific interfaces

(29)

DOM (Element) Tree example

(30)

(31)

 http://www.w3.org/

 International consortium

• 300-400 members

• Created in 1994, by Tim Berners-Lee

 Produces « royalty-free » specifications

• Uses a specific patent policy

• Follows a specific standardization process

─ WD, FPWD, LCWD, PR, R (fully public)

The World Wide Web Consortium (W3C)

(32)

Questions?