domscape: 3d web development
TRANSCRIPT
![Page 1: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/1.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 1/56
Chalmers University of TechnologyDepartment of Computer Science and EngineeringGöteborg, Sweden, November 2010
DomScape: 3D web development An integrated visualization of code and layout
Master of Science Thesis in the Interaction Design Programme
EELKE BOEZEMAN
![Page 2: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/2.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 2/56
The Author grants to Chalmers University of Technology and University of Gothenburg the non-exclusive right to publish the Work electronically and in anon-commercial purpose make it accessible on the Internet.The Author warrants that he/she is the author to the Work, and warrants that theWork does not contain text, pictures or other material that violates copyright law.
The Author shall, when transferring the rights of the Work to a third party (for
example a publisher or a company), acknowledge the third party about thisagreement. If the Author has signed a copyright agreement with a third partyregarding the Work, the Author warrants hereby that he/she has obtained anynecessary permission from this third party to let Chalmers University of Technology and University of Gothenburg store the Work electronically and makeit accessible on the Internet.
DomScape: a 3D front-end web-development tool
An investigation into how DomScape compares with Firebug
EELKE BOEZEMAN
© EELKE BOEZEMAN, November 2010.
Examiner: MORTEN FJELD
Chalmers University of TechnologyDepartment of Computer Science and Engineering
SE-412 96 GöteborgSwedenTelephone + 46 (0)31-772 1000
Cover: A three-dimensional visualization of a web page by DomScape
Department of Computer Science and EngineeringGöteborg, Sweden. November 2010
![Page 3: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/3.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 3/56
![Page 4: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/4.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 4/56
![Page 5: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/5.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 5/56
![Page 6: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/6.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 6/56
![Page 7: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/7.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 7/56
![Page 8: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/8.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 8/56
![Page 9: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/9.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 9/56
![Page 10: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/10.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 10/56
![Page 11: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/11.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 11/56
![Page 12: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/12.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 12/56
![Page 13: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/13.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 13/56
![Page 14: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/14.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 14/56
![Page 15: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/15.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 15/56
![Page 16: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/16.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 16/56
![Page 17: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/17.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 17/56
![Page 18: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/18.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 18/56
![Page 19: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/19.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 19/56
![Page 20: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/20.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 20/56
![Page 21: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/21.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 21/56
![Page 22: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/22.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 22/56
![Page 23: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/23.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 23/56
![Page 24: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/24.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 24/56
![Page 25: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/25.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 25/56
![Page 26: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/26.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 26/56
![Page 27: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/27.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 27/56
![Page 28: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/28.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 28/56
![Page 29: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/29.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 29/56
![Page 30: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/30.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 30/56
![Page 31: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/31.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 31/56
![Page 32: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/32.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 32/56
![Page 33: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/33.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 33/56
![Page 34: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/34.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 34/56
![Page 35: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/35.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 35/56
![Page 36: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/36.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 36/56
![Page 37: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/37.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 37/56
![Page 38: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/38.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 38/56
![Page 39: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/39.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 39/56
![Page 40: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/40.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 40/56
![Page 41: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/41.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 41/56
![Page 42: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/42.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 42/56
![Page 43: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/43.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 43/56
![Page 44: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/44.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 44/56
![Page 45: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/45.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 45/56
![Page 46: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/46.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 46/56
![Page 47: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/47.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 47/56
![Page 48: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/48.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 48/56
![Page 49: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/49.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 49/56
![Page 50: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/50.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 50/56
![Page 51: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/51.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 51/56
![Page 52: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/52.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 52/56
![Page 53: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/53.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 53/56
![Page 54: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/54.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 54/56
![Page 55: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/55.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 55/56
![Page 56: DomScape: 3D web development](https://reader030.vdocuments.site/reader030/viewer/2022021118/577d21fd1a28ab4e1e965ccd/html5/thumbnails/56.jpg)
8/3/2019 DomScape: 3D web development
http://slidepdf.com/reader/full/domscape-3d-web-development 56/56