Dr. Sabin Buragawww.purl.org/net/busaco

arhitectura unui navigator Web
Elbert Hubbard

Dr. Sabin Buragawww.purl.org/net/busaco

“To avoid criticism
do nothing, say nothing, be nothing.”
browser Web
funcționalități de bază
(application logic)

interpretor
JavaScript

acces la
platformă

Dr. Sabin Buragawww....
browser Web
funcționalități de bază
(application logic)

interpretor
JavaScript

acces la
platformă

rețea, grafică, fontu...
Dr. Sabin Buragawww.purl.org/net/busaco

Un client (i.e. browser Web) se identifică via valoarea
câmpului-antet User-Agen...
1994 – primul browser comercial: Netscape Navigator
include primul interpretor JavaScript și oferă o interfață
de programa...
Dr. Sabin Buragawww.purl.org/net/busaco

1994 – primul browser disponibil pe un dispozitiv
miniaturizat (PDA – Apple Newt...
Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
MSIE 4—7 – Mozilla/4.0 (compatible; MSIE 4.5; Mac_PowerPC)
MSIE 8 – Mozill...
Dr. Sabin Buragawww.purl.org/net/busaco

1996 – primul navigator trialware: Opera 2
focalizat pe utilizabilitate (e.g., t...
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1b2)
Gecko/20060823 SeaMonkey/1.1a
Mozilla/5.0 (Windows; U; Windows NT 5.1;...
Dr. Sabin Buragawww.purl.org/net/busaco

1997—1999 – navigator Web pentru telefoane mobile:
HitchHiker (ulterior, Microso...
Dr. Sabin Buragawww.purl.org/net/busaco

fundația Mozilla – versiunea open source a Netscape:
Phoenix (2002)Firebird (20...
Dr. Sabin Buragawww.purl.org/net/busaco

2003 – Apple Safari cu WebKit bazat pe KHTML (KDE)
accent pus pe inovare (<canva...
Dr. Sabin Buragawww.purl.org/net/busaco

2005 – Opera Mini oferă primele facilități de redare
a datelor pe ecrane miniatu...
Dr. Sabin Buragawww.purl.org/net/busaco

2008 – Google Chrome folosind WebKit; din 2013: Blink
bazat pe proiectul open so...
Dr. Sabin Buragawww.purl.org/net/busaco

Care este arhitectura generală
a unui navigator Web?
rendering engine
net
work

JS

interpreter

XML
parser

display back-end

componentele de bază ale unui navigator Web gene...
Dr. Sabin Buragawww.purl.org/net/busaco

rendering engine

procesele implicate în afișarea conținutului unei pagini Web
(...
bara de introducere a URI-urilor (address bar)
căutare pe Web
instrumente facilitând navigarea (back/forward button)
meniu...
Dr. Sabin Buragawww.purl.org/net/busaco
diverse proprietăți & setări ale browser-ului specifice
unui utilizator pot fi stocate în cadrul unui profil
exemplu tipic...
“punte” între interfața cu utilizatorul și rendering engine

Dr. Sabin Buragawww.purl.org/net/busaco

browser engine
“punte” între interfața cu utilizatorul și rendering engine
nucleu (kernel)
plug-ins
extensions
add-ons

Dr. Sabin Buraga...
realizează redarea conținutului solicitat

Dr. Sabin Buragawww.purl.org/net/busaco

rendering engine
realizează redarea conținutului solicitat
documente HTML ce includ resurse multimedia
imagini raster (GIF, PNG, JPEG)
graf...
implică, uzual, procesarea arborelui DOM
asociat unei pagini Web
cu aplicarea proprietăților CSS aferente
în vederea redăr...
Dr. Sabin Buragawww.purl.org/net/busaco

o aplicație Web la nivel de client poate fi compusă din diverse
componente, încă...
include un interpretor (parser) HTML
conform tipului de document Web – DTD

Dr. Sabin Buragawww.purl.org/net/busaco

rend...
include un interpretor (parser) HTML
conform tipului de document Web – DTD
moduri diferite de interpretare
standards mode ...
generare
arbore
de
redare

determinare
layout

afișare

Dr. Sabin Buragawww.purl.org/net/busaco

procesare cod
HTML

arb...
cod sursă HTML

arbore DOM

Dr. Sabin Buragawww.purl.org/net/busaco

rendering engine
Dr. Sabin Buragawww.purl.org/net/busaco

fazele importante ale procesării unui document HTML
în vederea obținerii arborel...
Dr. Sabin Buragawww.purl.org/net/busaco

a se revedea cursul
“Limbaje formale &
tehnici de compilare”

fazele importante ...
HTML
Body
Element

HTML
Head
Element

HTML
Paragraph
Element

Text

www.w3.org/DOM/
http://dom.spec.whatwg.org/

HTML
Titl...
în mod tradițional,
modelul de procesare este sincron, single-threaded

Dr. Sabin Buragawww.purl.org/net/busaco

renderin...
în mod tradițional,
modelul de procesare este sincron, single-threaded

programele JavaScript vor trebui executate imediat...
în mod tradițional,
modelul de procesare este sincron, single-threaded

programele JavaScript vor trebui executate imediat...
pentru HTML5, script-urile JavaScript
pot fi executate asincron (într-un thread separat)

Dr. Sabin Buragawww.purl.org/ne...
deoarece – în mod normal – stilurile CSS
nu modifică arborele DOM, procesarea poate avea loc
independent de încărcarea fiș...
arbore DOM

arbore de redare (render tree)

Dr. Sabin Buragawww.purl.org/net/busaco

rendering engine
conform David Baron, 2008

Dr. Sabin Buragawww.purl.org/net/busaco

relația dintre arborele DOM și
arborele de redare a c...
alături de arborele de redare, se va genera și:
render object tree
responsabil cu aranjamentul (layout) & afișarea (paint)...
alături de arborele de redare, se va genera și:

Dr. Sabin Buragawww.purl.org/net/busaco

rendering engine

style tree
in...
alături de arborele de redare, se va genera și:
render layer tree
folosit pentru elementele ce includ conținuturi externe
...
L. Weintraub, “How WebKit Renders the Web”, Fluent Conference, 2012

Dr. Sabin Buragawww.purl.org/net/busaco

relațiile î...
arbore de redare (render tree)

generare a aranjamentului vizual (layout)

Dr. Sabin Buragawww.purl.org/net/busaco

rend...
calcularea aranjamentului (layout) e dependentă
de zona de afișare – uzual, un tab al navigatorului

Dr. Sabin Buragawww....
calcularea aranjamentului (layout) e dependentă
de zona de afișare – uzual, un tab al navigatorului

se pot lua în conside...
calcularea aranjamentului (layout)

global layout (pentru întreg render tree) vs. incremental

Dr. Sabin Buragawww.purl.o...
calcularea aranjamentului (layout)

global layout (pentru întreg render tree) vs. incremental
sincron vs. asincron

Dr. Sa...
calcularea aranjamentului (layout)

Dr. Sabin Buragawww.purl.org/net/busaco

rendering engine

calculul lățimii fiecărui ...
Dr. Sabin Buragawww.purl.org/net/busaco

folosirea extensiei Firebug pentru vizualizarea datelor
privind layout-ul calcul...
Dr. Sabin Buragawww.purl.org/net/busaco

Firefox: vizualizarea 3D a arborelui DOM via arborele de redare
(pe baza proiect...
generare aranjament vizual (layout)

afișare layout

Dr. Sabin Buragawww.purl.org/net/busaco

rendering engine
Dr. Sabin Buragawww.purl.org/net/busaco

redări diferite ale aceluiași document HTML
(dependența de platformă și/sau de n...
afișarea propriu-zisă (painting)
poate fi realizată la nivel de software
sau pe baza procesorului grafic (accelerată hardw...
după afișarea propriu-zisă,
pot apărea schimbări de redare

Dr. Sabin Buragawww.purl.org/net/busaco

rendering engine
după afișarea propriu-zisă,
pot apărea schimbări de redare
la nivel local/global
re-layout și/sau re-paint

Dr. Sabin Bur...
Dr. Sabin Buragawww.purl.org/net/busaco

rendering engine

exemplificări notabile:
Gecko (Firefox, SeaMonkey, Thunderbird...
Dr. Sabin Buragawww.purl.org/net/busaco

fluxul de activități realizate de Gecko
developer.mozilla.org/Gecko
Dr. Sabin Buragawww.purl.org/net/busaco

organizarea codului Gecko – diagramă simplificată
(Robert O’Callahan, 2013)
Dr. Sabin Buragawww.purl.org/net/busaco

fluxul de activități realizate de WebKit
www.webkit.org
anumite browser-e pot rula mai multe instanțe
ale procesorului responsabil cu redarea conținutului

exemplu tipic: Google ...
Dr. Sabin Buragawww.purl.org/net/busaco

procesele din cadrul Chrome (Levi Weintraub, 2012)
Dr. Sabin Buragawww.purl.org/net/busaco

arhitectura
multiproces
la
Chromium
Dr. Sabin Buragawww.purl.org/net/busaco

arhitectura multiproces la Gecko (Robert O’Callahan, 2013)
http://people.mozilla...
procesul de rendering poate fi optimizat
(speculative parsing)

strategii diverse:
încărcare paralelă a resurselor, multi-...
responsabil cu transferurile de date de pe Internet

Dr. Sabin Buragawww.purl.org/net/busaco

networking
responsabil cu transferurile de date de pe Internet

API independent de platformă
+
implementări specifice fiecărui sistem...
responsabil cu transferurile de date de pe Internet

API independent de platformă
+
implementări specifice fiecărui sistem...
Dr. Sabin Buragawww.purl.org/net/busaco

efectuarea unei cereri de rețea – cazul Chromium
detalii la www.chromium.org/dev...
responsabil cu transferurile de date de pe Internet

protocolul HTTP
standardizat de RFC 2616
www.w3.org/Protocols/

Dr. S...
responsabil cu transferurile de date de pe Internet

HTTPS – asigură comunicații “sigure” HTTP
via TLS (Transport Layer Se...
Dr. Sabin Buragawww.purl.org/net/busaco

extensia
HTTPS Everywhere

www.eff.org/https-everywhere
folosit pentru transferuri de date de pe Internet

protocolul SPDY – un experiment Google

Dr. Sabin Buragawww.purl.org/n...
folosit pentru transferuri de date de pe Internet

protocolul SPDY – un experiment Google
detalii la http://www.chromium.o...
folosit pentru transferuri de date de pe Internet

protocolul HTTP/2.0 – în lucru la IETF
extinde ideile SPDY, focalizat a...
observații:
numărul conexiunilor HTTP paralele realizate
cu un server sau proxy este limitat (uzual: 2—6)

unele navigatoa...
Dr. Sabin Buragawww.purl.org/net/busaco

studiu de caz

Firefox: ajustarea parametrilor vizând conexiunile HTTP
via schem...
responsabil cu afișarea componentelor de interfață
ferestre, bare de defilare a conținutului (scroll bars),
tipuri de câmp...
browsershots.org
www.browserstack.com
Dr. Sabin Buragawww.purl.org/net/busaco
interpretează și execută programele JavaScript
la nivel de client

Dr. Sabin Buragawww.purl.org/net/busaco

JavaScript in...
Carakan (Opera)
Chakra (Microsoft)
Nashorn (Oracle)
Nitro (SquirrelFish), JavaScriptCore (Apple)
SpiderMonkey, IonMonkey, ...
diferențele de performanță pot fi măsurate
via teste specifice (benchmarking)

exemplificări:
Benchmark.js, Internet Explo...
responsabil cu procesarea documentelor XML via DOM
implementarea minimală vizează DOM nivelul 2

Dr. Sabin Buragawww.purl...
în unele cazuri, procesarea documentelor XML
poate implica validarea datelor via DTD,
dar nu folosind scheme XML

Dr. Sabi...
uzual, se poate oferi suport pentru:
spații de nume XML
XPath 1.0 – în mod normal, XPath 2.0 nu-i acceptat
XSLT 1.0 – actu...
unele navigatoare ofera facilități pentru alte limbaje XML
e.g., MathML sau SVG (Scalable Vector Graphics)

Dr. Sabin Bura...
modul responsabil cu stocarea datelor
pe calculatorul client

Dr. Sabin Buragawww.purl.org/net/busaco

data persistence
cookie-uri
cache
localStorage (HTML5)
SQLite database (HTML5)
…
detalii la alt curs

Dr. Sabin Buragawww.purl.org/net/bus...
Dr. Sabin Buragawww.purl.org/net/busaco

Ce putem afirma despre
particularitățile navigatoarelor Web?
Dr. Sabin Buragawww.purl.org/net/busaco

arhitectura inițială a navigatorului Firefox
Dr. Sabin Buragawww.purl.org/net/busaco

arhitectura Internet Explorer (conform MSDN)
Dr. Sabin Buragawww.purl.org/net/busaco

arhitectura multi-proces la versiunile moderne
de Internet Explorer (Loosely-Cou...
Dr. Sabin Buragawww.purl.org/net/busaco

arhitectura conceptuală a browser-ului Chrome
(Tom Hauser et al., 2009; Ilya Gri...
Dr. Sabin Buragawww.purl.org/net/busaco

diagrama fluxului de date – cazul Chrome
(Hauser et al., 2009)
Dr. Sabin Buragawww.purl.org/net/busaco

arhitectura browser-ului Lynx (Grosskurth & Godfrey, ‘06)
un navigator Web modern prezintă
o arhitectură modulară
realizată pe baza unui nucleu (browser kernel)

Dr. Sabin Buragaw...
un navigator Web modern prezintă
o arhitectură modulară
realizată pe baza unui nucleu (browser kernel)

de asemenea, permi...
program extern responsabil cu procesarea & redarea
unor date ce nu pot fi prelucrate nativ
de către navigatorul Web

forma...
se bazează pe API-ul oferit de browser
NPAPI (Mozilla), ActiveX (Microsoft), PPAPI (Google)
https://developer.mozilla.org/...
poate rula în același proces cu navigatorul Web

Dr. Sabin Buragawww.purl.org/net/busaco

Plug-in
e.g., pentru Firefox se folosește IPDL – IPC (Inter-process
communication) Protocol Definition Language)

Dr. Sabin Buraga...
alternative: utilizarea bibliotecilor JavaScript
pdf.js – redarea documentelor PDF
https://github.com/mozilla/pdf.js
Shumw...
extinde funcționalitățile navigatorului
poate afecta browser-ul în ansamblu
are acces, de obicei, la arborele DOM
(sau arb...
Dr. Sabin Buragawww.purl.org/net/busaco

Extensie

implementare via tehnologii Web (HTML, CSS, JavaScript)

în unele cazu...
resurse pentru dezvoltatori:
Chrome – http://developer.chrome.com/extensions/
Firefox – https://github.com/victorporof/Res...
eventual, pentru dezvoltare poate fi folosit un framework
exemple:
BabelExt
Crossrider

Dr. Sabin Buragawww.purl.org/net/...
se poate distribui via un sit specific
(e.g., Chrome Web Store)
conform unui format standardizat
Packaged Web Apps (recoma...
aplicație – de sine-stătătoare sau inclusă într-o pagină –
ce oferă o funcționalitate specifică
rulează la nivel de client...
implementare pe baza standardelor Web: HTML, CSS, JS
eventual, se poate recurge la un API
W3C Proposed Recommendation (201...
denumire generică a aplicațiilor asociate unui browser
(extensii, teme vizuale, dicționare,
maniere de căutare pe Web, plu...
parte a unei aplicații Web
ce încapsulează o suită de funcții înrudite

e.g., calendar, cititor de fluxuri de știri,
buton...
dezvoltare bazată pe o bibliotecă/framework JavaScript
soluții “tradiționale”:
Dojo Toolkit, jQuery UI, YUI,…

Dr. Sabin B...
cadrul general: Web Components
(W3C working draft, iunie 2013)
templates, decorators, custom elements,
shadow DOM, imports...
implementări:
Polymer (Google) – www.polymer-project.org
X-Tag (Mozilla) – www.x-tags.org

Dr. Sabin Buragawww.purl.org/n...
o aplicație Web instalabilă
care folosește API-urile oferite de browser
exemplu tipic: Chrome Apps
https://developers.goog...
alte exemple notabile:
aplicații Windows 8 dezvoltate în JavaScript
http://msdn.microsoft.com/en-us/library/windows/apps/b...
toleranța la defecte
securitatea
managementul memoriei
performanța
interacțiunea cu utilizatorul

Dr. Sabin Buragawww.pur...
Dr. Sabin Buragawww.purl.org/net/busaco

teste & comparații: www.browserscope.org
unele procese care trebuie realizate de browser
pot fi executate la nivel de server – de pildă, în cloud

Dr. Sabin Buraga...
Dr. Sabin Buragawww.purl.org/net/busaco

Amazon Silk (bazat pe WebKit și pe interpretorul V8)
dacă procesul de rendering ...
Jon Jenkins, “Amazon Silk”, O’Reilly Velocity EU, 2011
pentru detalii, a se vizita http://amazonsilk.wordpress.com/

Dr. S...
Dr. Sabin Buragawww.purl.org/net/busaco

CloudBrowser (Brian McDaniel, 2012)
http://cloudbrowser.cs.vt.edu/
Dr. Sabin Buragawww.purl.org/net/busaco

tehnologii Web la nivel de browser: http://platform.html5.org/
polyfills

uzual, implementate via JavaScript

Dr. Sabin Buragawww.purl.org/net/busaco

Dacă un browser Web nu are (încă)...
polyfills

exemplificare: HTML5 Cross Browser Polyfills
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
...
Dr. Sabin Buragawww.purl.org/net/busaco

alternative la HTML5 pentru
interacțiuni Web mobile
http://html5please.com/
Există mai multe
interpretoare (parsers)
în cadrul unui
browser Web? De ce?
Care sunt mai ușor
de implementat:
extensiile ...
episodul viitor: elemente de design Web
Dr. Sabin Buragawww.purl.org/net/busaco
Upcoming SlideShare
Loading in...5
×

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #2): Arhitectura navigatorului Web

436

Published on

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
436
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #2): Arhitectura navigatorului Web

  1. 1. Dr. Sabin Buragawww.purl.org/net/busaco arhitectura unui navigator Web
  2. 2. Elbert Hubbard Dr. Sabin Buragawww.purl.org/net/busaco “To avoid criticism do nothing, say nothing, be nothing.”
  3. 3. browser Web funcționalități de bază (application logic) interpretor JavaScript acces la platformă Dr. Sabin Buragawww.purl.org/net/busaco platformă (e.g., sistem de operare)
  4. 4. browser Web funcționalități de bază (application logic) interpretor JavaScript acces la platformă rețea, grafică, fonturi, widget-uri native,… Dr. Sabin Buragawww.purl.org/net/busaco platformă (e.g., sistem de operare)
  5. 5. Dr. Sabin Buragawww.purl.org/net/busaco Un client (i.e. browser Web) se identifică via valoarea câmpului-antet User-Agent dintr-o cerere HTTP
  6. 6. 1994 – primul browser comercial: Netscape Navigator include primul interpretor JavaScript și oferă o interfață de programare (BOM – Browser Object Model) Mozilla/Versiune [Limbă] (Platformă; Criptare) Mozilla/2.02 [fr] (WinNT; I) Mozilla/Versiune (Platformă; Criptare [; descriere OS]) Mozilla/3.0 (Win95; U) Netscape Communicator 4 – Mozilla/4.0 (Win98; I) http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/ Dr. Sabin Buragawww.purl.org/net/busaco 1993 – primul browser Web: Mosaic – Mosaic/0.9
  7. 7. Dr. Sabin Buragawww.purl.org/net/busaco 1994 – primul browser disponibil pe un dispozitiv miniaturizat (PDA – Apple Newton): PocketWeb http://www.teco.edu/pocketweb/
  8. 8. Mozilla/2.0 (compatible; MSIE 3.02; Windows 95) MSIE 4—7 – Mozilla/4.0 (compatible; MSIE 4.5; Mac_PowerPC) MSIE 8 – Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0) MSIE 11 – Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko www.modern.ie Dr. Sabin Buragawww.purl.org/net/busaco 1996 – primul navigator produs de Microsoft: MSIE include dialectul JScript și propriul BOM multe facilități, ulterior standardizate de W3C Mozilla/2.0 (compatible; MSIE Versiune; Sistem de operare)
  9. 9. Dr. Sabin Buragawww.purl.org/net/busaco 1996 – primul navigator trialware: Opera 2 focalizat pe utilizabilitate (e.g., tab-uri) & accesibilitate (de exemplu, interacțiune prin gesturi) permite selectarea modului de identificare a browser-ului Opera/Versiune (OS; Criptare) [Limbă] Opera/7.54 (Windows NT 5.1; U) [en] http://dev.opera.com/
  10. 10. Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1b2) Gecko/20060823 SeaMonkey/1.1a Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11 http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/ Dr. Sabin Buragawww.purl.org/net/busaco 1998 – apariția procesorului de redare Gecko Mozilla/Versiune (Platformă; Criptare; OS/CPU; Limbă; VersiuneAnterioară) Gecko/Versiune Produs/Versiune
  11. 11. Dr. Sabin Buragawww.purl.org/net/busaco 1997—1999 – navigator Web pentru telefoane mobile: HitchHiker (ulterior, Microsoft Mobile Explorer 2.0) WAP – protocol, WML – limbaj de marcare, WMLScript
  12. 12. Dr. Sabin Buragawww.purl.org/net/busaco fundația Mozilla – versiunea open source a Netscape: Phoenix (2002)Firebird (2003)Firefox (2004) focalizare asupra respectării standardelor Web interfață via XUL (Extensible User-interface Language) extensibil via add-ons (extensii, teme vizuale etc.) ciclu de dezvoltare de 6 săptămâni: Nightly, Aurora, Beta, Release Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:27.0) Gecko/20100101 Firefox/27.0 https://developer.mozilla.org/Mozilla/Firefox
  13. 13. Dr. Sabin Buragawww.purl.org/net/busaco 2003 – Apple Safari cu WebKit bazat pe KHTML (KDE) accent pus pe inovare (<canvas>, CSS,…) & performanță Mozilla/5.0 (Platformă; Criptare; OS/CPU; Limbă) AppleWebKit/Versiune (KHTML, like Gecko) Safari/Versiune Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML, like Gecko) Safari/125.1 Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53 https://developer.apple.com/devcenter/safari/
  14. 14. Dr. Sabin Buragawww.purl.org/net/busaco 2005 – Opera Mini oferă primele facilități de redare a datelor pe ecrane miniaturizate (small screen rendering) procesare realizată la nivel de server via data centers
  15. 15. Dr. Sabin Buragawww.purl.org/net/busaco 2008 – Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium focalizare asupra performanței la nivel de client Web interfață minimalistă + manager de tab-uri include instrumente avansate pentru dezvoltatori Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.29 Safari/525.13 Mozilla/5.0 (Linux; Android 4.1.2; GT-I9300 Build/JZO54K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.82 Mobile Safari/537.36 https://developers.google.com/chrome/ www.chromium.org
  16. 16. Dr. Sabin Buragawww.purl.org/net/busaco Care este arhitectura generală a unui navigator Web?
  17. 17. rendering engine net work JS interpreter XML parser display back-end componentele de bază ale unui navigator Web generic conform (Grosskurth & Godfrey, 2006; Garsiel, 2011) Dr. Sabin Buragawww.purl.org/net/busaco browser engine data persistence user interface
  18. 18. Dr. Sabin Buragawww.purl.org/net/busaco rendering engine procesele implicate în afișarea conținutului unei pagini Web (J. Brereton et al., 2011)
  19. 19. bara de introducere a URI-urilor (address bar) căutare pe Web instrumente facilitând navigarea (back/forward button) meniu de salvare a adreselor Web favorite (bookmarks) acces la preferințe & alte componente – e.g., extensii … Dr. Sabin Buragawww.purl.org/net/busaco user interface
  20. 20. Dr. Sabin Buragawww.purl.org/net/busaco
  21. 21. diverse proprietăți & setări ale browser-ului specifice unui utilizator pot fi stocate în cadrul unui profil exemplu tipic: Firefox – http://mzl.la/NYhKHH https://developer.mozilla.org/Profile_Manager Dr. Sabin Buragawww.purl.org/net/busaco user interface
  22. 22. “punte” între interfața cu utilizatorul și rendering engine Dr. Sabin Buragawww.purl.org/net/busaco browser engine
  23. 23. “punte” între interfața cu utilizatorul și rendering engine nucleu (kernel) plug-ins extensions add-ons Dr. Sabin Buragawww.purl.org/net/busaco browser engine
  24. 24. realizează redarea conținutului solicitat Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  25. 25. realizează redarea conținutului solicitat documente HTML ce includ resurse multimedia imagini raster (GIF, PNG, JPEG) grafică vectorială SVG (Scalable Vector Graphics) reprezentări diverse: MathML, WebGL,… Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  26. 26. implică, uzual, procesarea arborelui DOM asociat unei pagini Web cu aplicarea proprietăților CSS aferente în vederea redării într-o zonă de afișare Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  27. 27. Dr. Sabin Buragawww.purl.org/net/busaco o aplicație Web la nivel de client poate fi compusă din diverse componente, încărcate dinamicmanagementul arborilor DOM (Dimitri Glazkov, 2013)
  28. 28. include un interpretor (parser) HTML conform tipului de document Web – DTD Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  29. 29. include un interpretor (parser) HTML conform tipului de document Web – DTD moduri diferite de interpretare standards mode – HTML5, CSS3, SVG,… quirks mode – www.quirksmode.org Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  30. 30. generare arbore de redare determinare layout afișare Dr. Sabin Buragawww.purl.org/net/busaco procesare cod HTML  arbore DOM (rendering) layout
  31. 31. cod sursă HTML  arbore DOM Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  32. 32. Dr. Sabin Buragawww.purl.org/net/busaco fazele importante ale procesării unui document HTML în vederea obținerii arborelui DOM
  33. 33. Dr. Sabin Buragawww.purl.org/net/busaco a se revedea cursul “Limbaje formale & tehnici de compilare” fazele importante ale procesării unui document HTML în vederea obținerii arborelui DOM
  34. 34. HTML Body Element HTML Head Element HTML Paragraph Element Text www.w3.org/DOM/ http://dom.spec.whatwg.org/ HTML Title Element Dr. Sabin Buragawww.purl.org/net/busaco <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>Salut, lume!</p> </body> </html> HTML Html Element
  35. 35. în mod tradițional, modelul de procesare este sincron, single-threaded Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  36. 36. în mod tradițional, modelul de procesare este sincron, single-threaded programele JavaScript vor trebui executate imediat ce procesorul întâlnește codul (eventual, extern – încărcat de pe alt sit, dacă e posibil) Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  37. 37. în mod tradițional, modelul de procesare este sincron, single-threaded programele JavaScript vor trebui executate imediat ce procesorul întâlnește codul implicit, procesul de rendering e oprit până ce codul JavaScript este executat complet Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  38. 38. pentru HTML5, script-urile JavaScript pot fi executate asincron (într-un thread separat) Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  39. 39. deoarece – în mod normal – stilurile CSS nu modifică arborele DOM, procesarea poate avea loc independent de încărcarea fișierelor CSS Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  40. 40. arbore DOM  arbore de redare (render tree) Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  41. 41. conform David Baron, 2008 Dr. Sabin Buragawww.purl.org/net/busaco relația dintre arborele DOM și arborele de redare a conținutului (render tree)
  42. 42. alături de arborele de redare, se va genera și: render object tree responsabil cu aranjamentul (layout) & afișarea (paint) specific conținutului efectiv redat compus din obiecte de redare: RenderBlock, RenderText, RenderInline etc. Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  43. 43. alături de arborele de redare, se va genera și: Dr. Sabin Buragawww.purl.org/net/busaco rendering engine style tree include valorile calculate ale proprietăților de stil asociat arborelui obiectelor de redare (render object tree)
  44. 44. alături de arborele de redare, se va genera și: render layer tree folosit pentru elementele ce includ conținuturi externe (<video>, WebGL via <canvas>) ori manipulate prin CSS (transformări, scalări, decupări,…) stabilește coordonatele în spațiu și ordinea (z-index) Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  45. 45. L. Weintraub, “How WebKit Renders the Web”, Fluent Conference, 2012 Dr. Sabin Buragawww.purl.org/net/busaco relațiile între obiecte de redare (render objects) și stratele asociate (render layers)
  46. 46. arbore de redare (render tree)  generare a aranjamentului vizual (layout) Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  47. 47. calcularea aranjamentului (layout) e dependentă de zona de afișare – uzual, un tab al navigatorului Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  48. 48. calcularea aranjamentului (layout) e dependentă de zona de afișare – uzual, un tab al navigatorului se pot lua în considerație coordonatele ferestrei navigatorului + proprietățile mediului de redare: rezoluție, orientare (portrait vs. landscape), suport pentru 3D etc. Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  49. 49. calcularea aranjamentului (layout) global layout (pentru întreg render tree) vs. incremental Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  50. 50. calcularea aranjamentului (layout) global layout (pentru întreg render tree) vs. incremental sincron vs. asincron Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  51. 51. calcularea aranjamentului (layout) Dr. Sabin Buragawww.purl.org/net/busaco rendering engine calculul lățimii fiecărui bloc de conținut (width calculation) decizii privind line breaking plasarea blocurilor flotante – e.g., cele având float: right determinarea lățimii fiecărei coloane de tabel …
  52. 52. Dr. Sabin Buragawww.purl.org/net/busaco folosirea extensiei Firebug pentru vizualizarea datelor privind layout-ul calculat de navigatorul Web
  53. 53. Dr. Sabin Buragawww.purl.org/net/busaco Firefox: vizualizarea 3D a arborelui DOM via arborele de redare (pe baza proiectului Tilt realizat de absolventul FII Victor Porof – Google Summer of Code 2011)
  54. 54. generare aranjament vizual (layout)  afișare layout Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  55. 55. Dr. Sabin Buragawww.purl.org/net/busaco redări diferite ale aceluiași document HTML (dependența de platformă și/sau de navigator)
  56. 56. afișarea propriu-zisă (painting) poate fi realizată la nivel de software sau pe baza procesorului grafic (accelerată hardware) Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  57. 57. după afișarea propriu-zisă, pot apărea schimbări de redare Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  58. 58. după afișarea propriu-zisă, pot apărea schimbări de redare la nivel local/global re-layout și/sau re-paint Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  59. 59. Dr. Sabin Buragawww.purl.org/net/busaco rendering engine exemplificări notabile: Gecko (Firefox, SeaMonkey, Thunderbird) Presto (Opera, Opera Mobile, Opera Mini, Nintendo) Trident (Microsoft: IE, IE Mobile, Skype) WebKit (Apple Safari, Google Chrome, Adobe AIR + majoritatea platformelor mobile: Android, Blackberry, iOS) Blink (Google Chrome – din 2013)
  60. 60. Dr. Sabin Buragawww.purl.org/net/busaco fluxul de activități realizate de Gecko developer.mozilla.org/Gecko
  61. 61. Dr. Sabin Buragawww.purl.org/net/busaco organizarea codului Gecko – diagramă simplificată (Robert O’Callahan, 2013)
  62. 62. Dr. Sabin Buragawww.purl.org/net/busaco fluxul de activități realizate de WebKit www.webkit.org
  63. 63. anumite browser-e pot rula mai multe instanțe ale procesorului responsabil cu redarea conținutului exemplu tipic: Google Chrome Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  64. 64. Dr. Sabin Buragawww.purl.org/net/busaco procesele din cadrul Chrome (Levi Weintraub, 2012)
  65. 65. Dr. Sabin Buragawww.purl.org/net/busaco arhitectura multiproces la Chromium
  66. 66. Dr. Sabin Buragawww.purl.org/net/busaco arhitectura multiproces la Gecko (Robert O’Callahan, 2013) http://people.mozilla.org/~roc/Samsung/MozillaArchitectures.pdf
  67. 67. procesul de rendering poate fi optimizat (speculative parsing) strategii diverse: încărcare paralelă a resurselor, multi-procesare, încărcarea directă a arborelui de redare (pre-procesat la nivel de server),… Dr. Sabin Buragawww.purl.org/net/busaco rendering engine
  68. 68. responsabil cu transferurile de date de pe Internet Dr. Sabin Buragawww.purl.org/net/busaco networking
  69. 69. responsabil cu transferurile de date de pe Internet API independent de platformă + implementări specifice fiecărui sistem de operare Dr. Sabin Buragawww.purl.org/net/busaco networking
  70. 70. responsabil cu transferurile de date de pe Internet API independent de platformă + implementări specifice fiecărui sistem de operare exemplificare: Firefox utilizează modulul Necko Dr. Sabin Buragawww.purl.org/net/busaco networking
  71. 71. Dr. Sabin Buragawww.purl.org/net/busaco efectuarea unei cereri de rețea – cazul Chromium detalii la www.chromium.org/developers/design-documents/network-stack
  72. 72. responsabil cu transferurile de date de pe Internet protocolul HTTP standardizat de RFC 2616 www.w3.org/Protocols/ Dr. Sabin Buragawww.purl.org/net/busaco networking
  73. 73. responsabil cu transferurile de date de pe Internet HTTPS – asigură comunicații “sigure” HTTP via TLS (Transport Layer Security): autentificare pe baza certificatelor digitale + criptare bidirecțională RFC 2818 – https://tools.ietf.org/html/rfc2818 Dr. Sabin Buragawww.purl.org/net/busaco networking
  74. 74. Dr. Sabin Buragawww.purl.org/net/busaco extensia HTTPS Everywhere www.eff.org/https-everywhere
  75. 75. folosit pentru transferuri de date de pe Internet protocolul SPDY – un experiment Google Dr. Sabin Buragawww.purl.org/net/busaco networking număr nelimitat de cereri concurente folosind aceeași conexiune (eventual, via un sistem de priorități) compresarea anteturilor mesajelor fluxuri de date în regim push (notificări primite de client)
  76. 76. folosit pentru transferuri de date de pe Internet protocolul SPDY – un experiment Google detalii la http://www.chromium.org/spdy Dr. Sabin Buragawww.purl.org/net/busaco networking
  77. 77. folosit pentru transferuri de date de pe Internet protocolul HTTP/2.0 – în lucru la IETF extinde ideile SPDY, focalizat asupra performanței vezi prezentarea lui Mark Nottingham (octombrie 2012) www.slideshare.net/mnot/what-http20-will-do-for-you Dr. Sabin Buragawww.purl.org/net/busaco networking
  78. 78. observații: numărul conexiunilor HTTP paralele realizate cu un server sau proxy este limitat (uzual: 2—6) unele navigatoare pot aplica tehnici de optimizare a încărcării resurselor detalii într-un curs viitor Dr. Sabin Buragawww.purl.org/net/busaco networking
  79. 79. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz Firefox: ajustarea parametrilor vizând conexiunile HTTP via schema URI about:config
  80. 80. responsabil cu afișarea componentelor de interfață ferestre, bare de defilare a conținutului (scroll bars), tipuri de câmpurilor formularelor Web: (butoane de tip radio, textarea, liste de selecție,…) Dr. Sabin Buragawww.purl.org/net/busaco display (UI) backend
  81. 81. browsershots.org www.browserstack.com Dr. Sabin Buragawww.purl.org/net/busaco
  82. 82. interpretează și execută programele JavaScript la nivel de client Dr. Sabin Buragawww.purl.org/net/busaco JavaScript interpreter
  83. 83. Carakan (Opera) Chakra (Microsoft) Nashorn (Oracle) Nitro (SquirrelFish), JavaScriptCore (Apple) SpiderMonkey, IonMonkey, Rhino (Mozilla) Tamarin (Adobe) V8 (Google, Opera, Node.js) Dr. Sabin Buragawww.purl.org/net/busaco JavaScript interpreter (engine)
  84. 84. diferențele de performanță pot fi măsurate via teste specifice (benchmarking) exemplificări: Benchmark.js, Internet Explorer Test Drive (Microsoft), Kraken (Mozilla), Octane (Google), SunSpider (Apple) diverse statistici la http://arewefastyet.com/ Dr. Sabin Buragawww.purl.org/net/busaco JavaScript interpreter (engine)
  85. 85. responsabil cu procesarea documentelor XML via DOM implementarea minimală vizează DOM nivelul 2 Dr. Sabin Buragawww.purl.org/net/busaco XML parser
  86. 86. în unele cazuri, procesarea documentelor XML poate implica validarea datelor via DTD, dar nu folosind scheme XML Dr. Sabin Buragawww.purl.org/net/busaco XML parser
  87. 87. uzual, se poate oferi suport pentru: spații de nume XML XPath 1.0 – în mod normal, XPath 2.0 nu-i acceptat XSLT 1.0 – actualmente nu există suport pentru XSLT 2.0 transferuri asincrone de date via XMLHttpRequest etc. Dr. Sabin Buragawww.purl.org/net/busaco XML parser
  88. 88. unele navigatoare ofera facilități pentru alte limbaje XML e.g., MathML sau SVG (Scalable Vector Graphics) Dr. Sabin Buragawww.purl.org/net/busaco XML parser
  89. 89. modul responsabil cu stocarea datelor pe calculatorul client Dr. Sabin Buragawww.purl.org/net/busaco data persistence
  90. 90. cookie-uri cache localStorage (HTML5) SQLite database (HTML5) … detalii la alt curs Dr. Sabin Buragawww.purl.org/net/busaco data persistence
  91. 91. Dr. Sabin Buragawww.purl.org/net/busaco Ce putem afirma despre particularitățile navigatoarelor Web?
  92. 92. Dr. Sabin Buragawww.purl.org/net/busaco arhitectura inițială a navigatorului Firefox
  93. 93. Dr. Sabin Buragawww.purl.org/net/busaco arhitectura Internet Explorer (conform MSDN)
  94. 94. Dr. Sabin Buragawww.purl.org/net/busaco arhitectura multi-proces la versiunile moderne de Internet Explorer (Loosely-Coupled IE)
  95. 95. Dr. Sabin Buragawww.purl.org/net/busaco arhitectura conceptuală a browser-ului Chrome (Tom Hauser et al., 2009; Ilya Grigorik, 2013)
  96. 96. Dr. Sabin Buragawww.purl.org/net/busaco diagrama fluxului de date – cazul Chrome (Hauser et al., 2009)
  97. 97. Dr. Sabin Buragawww.purl.org/net/busaco arhitectura browser-ului Lynx (Grosskurth & Godfrey, ‘06)
  98. 98. un navigator Web modern prezintă o arhitectură modulară realizată pe baza unui nucleu (browser kernel) Dr. Sabin Buragawww.purl.org/net/busaco Remarcă
  99. 99. un navigator Web modern prezintă o arhitectură modulară realizată pe baza unui nucleu (browser kernel) de asemenea, permite includerea de plug-in-uri și extensii Dr. Sabin Buragawww.purl.org/net/busaco Remarcă
  100. 100. program extern responsabil cu procesarea & redarea unor date ce nu pot fi prelucrate nativ de către navigatorul Web formatul de date este specificat via tipuri MIME video/quicktime application/x-shockwave-flash Dr. Sabin Buragawww.purl.org/net/busaco Plug-in
  101. 101. se bazează pe API-ul oferit de browser NPAPI (Mozilla), ActiveX (Microsoft), PPAPI (Google) https://developer.mozilla.org/Gecko_Plugin_API_Reference https://developers.google.com/native-client/ uzual, se folosește un SDK disponibil pe platforma-țintă (recurgându-se la limbajele C ori C++) Dr. Sabin Buragawww.purl.org/net/busaco Plug-in
  102. 102. poate rula în același proces cu navigatorul Web Dr. Sabin Buragawww.purl.org/net/busaco Plug-in
  103. 103. e.g., pentru Firefox se folosește IPDL – IPC (Inter-process communication) Protocol Definition Language) Dr. Sabin Buragawww.purl.org/net/busaco plug-in poate rula într-un proces separat (out of process plug-in), modul de apelare fiind definit via un limbaj specific
  104. 104. alternative: utilizarea bibliotecilor JavaScript pdf.js – redarea documentelor PDF https://github.com/mozilla/pdf.js Shumway – emularea mașinii virtuale Flash http://mozilla.github.io/shumway/ Dr. Sabin Buragawww.purl.org/net/busaco Plug-in
  105. 105. extinde funcționalitățile navigatorului poate afecta browser-ul în ansamblu are acces, de obicei, la arborele DOM (sau arborele de redare a conținutului) Dr. Sabin Buragawww.purl.org/net/busaco Extensie
  106. 106. Dr. Sabin Buragawww.purl.org/net/busaco Extensie implementare via tehnologii Web (HTML, CSS, JavaScript) în unele cazuri, instalarea nu necesită restartarea browser-ului
  107. 107. resurse pentru dezvoltatori: Chrome – http://developer.chrome.com/extensions/ Firefox – https://github.com/victorporof/Restartless-Template MSIE – http://tinyurl.com/pnqepat Safari – https://developer.apple.com/programs/safari/ Dr. Sabin Buragawww.purl.org/net/busaco Extensie
  108. 108. eventual, pentru dezvoltare poate fi folosit un framework exemple: BabelExt Crossrider Dr. Sabin Buragawww.purl.org/net/busaco Extensie
  109. 109. se poate distribui via un sit specific (e.g., Chrome Web Store) conform unui format standardizat Packaged Web Apps (recomandare W3C, 2012) http://www.w3.org/TR/widgets/ Dr. Sabin Buragawww.purl.org/net/busaco Extensie
  110. 110. aplicație – de sine-stătătoare sau inclusă într-o pagină – ce oferă o funcționalitate specifică rulează la nivel de client (platformă oferită de sistemul de operare și/sau navigator Web) Dr. Sabin Buragawww.purl.org/net/busaco Widget
  111. 111. implementare pe baza standardelor Web: HTML, CSS, JS eventual, se poate recurge la un API W3C Proposed Recommendation (2012) www.w3.org/TR/widgets-apis/ Dr. Sabin Buragawww.purl.org/net/busaco Widget
  112. 112. denumire generică a aplicațiilor asociate unui browser (extensii, teme vizuale, dicționare, maniere de căutare pe Web, plug-in-uri etc.) addons.mozilla.org Dr. Sabin Buragawww.purl.org/net/busaco Add-on
  113. 113. parte a unei aplicații Web ce încapsulează o suită de funcții înrudite e.g., calendar, cititor de fluxuri de știri, buton de partajare a URL-ului în altă aplicație Dr. Sabin Buragawww.purl.org/net/busaco Web component
  114. 114. dezvoltare bazată pe o bibliotecă/framework JavaScript soluții “tradiționale”: Dojo Toolkit, jQuery UI, YUI,… Dr. Sabin Buragawww.purl.org/net/busaco Web component
  115. 115. cadrul general: Web Components (W3C working draft, iunie 2013) templates, decorators, custom elements, shadow DOM, imports etc. www.w3.org/TR/components-intro/ Dr. Sabin Buragawww.purl.org/net/busaco Web component
  116. 116. implementări: Polymer (Google) – www.polymer-project.org X-Tag (Mozilla) – www.x-tags.org Dr. Sabin Buragawww.purl.org/net/busaco Web component
  117. 117. o aplicație Web instalabilă care folosește API-urile oferite de browser exemplu tipic: Chrome Apps https://developers.google.com/chrome/web-store/docs/index concept asemănător: pinned site (Internet Explorer) http://msdn.microsoft.com/library/ie/gg491731%28v=vs.85%29.aspx Dr. Sabin Buragawww.purl.org/net/busaco Web app
  118. 118. alte exemple notabile: aplicații Windows 8 dezvoltate în JavaScript http://msdn.microsoft.com/en-us/library/windows/apps/br211369.aspx aplicații mobile pentru Firefox OS http://profs.info.uaic.ro/~busaco/teach/labs/firefoxos/ Dr. Sabin Buragawww.purl.org/net/busaco Web app aplicații Web mobile pentru Kindle Fire și alte dispozitive https://developer.amazon.com/sdk/webapps.html
  119. 119. toleranța la defecte securitatea managementul memoriei performanța interacțiunea cu utilizatorul Dr. Sabin Buragawww.purl.org/net/busaco Aspecte de interes privind navigatorul Web:
  120. 120. Dr. Sabin Buragawww.purl.org/net/busaco teste & comparații: www.browserscope.org
  121. 121. unele procese care trebuie realizate de browser pot fi executate la nivel de server – de pildă, în cloud Dr. Sabin Buragawww.purl.org/net/busaco Navigatoare Web hibride
  122. 122. Dr. Sabin Buragawww.purl.org/net/busaco Amazon Silk (bazat pe WebKit și pe interpretorul V8) dacă procesul de rendering nu poate fi efectuat la distanță, se realizează o procesare la nivel local – pe dispozitivul Kindle
  123. 123. Jon Jenkins, “Amazon Silk”, O’Reilly Velocity EU, 2011 pentru detalii, a se vizita http://amazonsilk.wordpress.com/ Dr. Sabin Buragawww.purl.org/net/busaco unele activități se pot fi realiza în cloud (în cazul Amazon Silk, se recurge la EC2)
  124. 124. Dr. Sabin Buragawww.purl.org/net/busaco CloudBrowser (Brian McDaniel, 2012) http://cloudbrowser.cs.vt.edu/
  125. 125. Dr. Sabin Buragawww.purl.org/net/busaco tehnologii Web la nivel de browser: http://platform.html5.org/
  126. 126. polyfills uzual, implementate via JavaScript Dr. Sabin Buragawww.purl.org/net/busaco Dacă un browser Web nu are (încă) suport pentru o anumită tehnologie, putem adopta soluții alternative
  127. 127. polyfills exemplificare: HTML5 Cross Browser Polyfills github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills Dr. Sabin Buragawww.purl.org/net/busaco Dacă un browser Web nu are (încă) suport pentru o anumită tehnologie, putem adopta soluții alternative
  128. 128. Dr. Sabin Buragawww.purl.org/net/busaco alternative la HTML5 pentru interacțiuni Web mobile http://html5please.com/
  129. 129. Există mai multe interpretoare (parsers) în cadrul unui browser Web? De ce? Care sunt mai ușor de implementat: extensiile sau plug-in-urile? Dr. Sabin Buragawww.purl.org/net/busaco întrebări (pentru acasă)
  130. 130. episodul viitor: elemente de design Web Dr. Sabin Buragawww.purl.org/net/busaco
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×