Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery...
Transcript of Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery...
![Page 1: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/1.jpg)
Qiufeng Zhu
Advanced User Interface Spring 2017
![Page 2: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/2.jpg)
Brief history of the Web
Topics: HTML 5
JavaScript Libraries and frameworks
3D Web Application: WebGL
![Page 3: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/3.jpg)
Netscape Navigator
Phase 1
• Pages, form-structured documents that use hyperlinks
Phase 2
• Easily to build animated, interactive content; Adding plug-in component, e.g. Flash
Phase 3
• Rich Internet Application (RIAs) that combines collaboration and interaction
Brief History
![Page 4: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/4.jpg)
Mosaic Mar 1993
Safari June 2003
Firefox Nov 2014
Chrome Dec 2008
Netscape Oct 1994
Opera April 1995
Internet Explorer Aug 1995
![Page 5: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/5.jpg)
Source: http://spectrum.ieee.org/computing/software/the-2016-top-programming-languages
![Page 6: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/6.jpg)
![Page 7: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/7.jpg)
Front-end: HTML, CSS, JavaScript
Libraries and frameworks: Angular.js, React.js, …
Back-end: Databases: MySQL, MongoDB, Redis …
Language: Ruby, Python, Java …
Frameworks: Rails, Django, Java Spring …
![Page 8: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/8.jpg)
Html5
JavaScript Libraries and frameworks JQuery
Angular.Js
3D Web Application: WebGL Three.Js
Babylon.Js
![Page 9: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/9.jpg)
Markup language
Published in Oct 2014 by World Wide Web Consortium.
A candidate for cross-platform mobile applications
Supports scalable vector graphics content.
![Page 10: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/10.jpg)
Companies that use HTML5 including
https://w3techs.com/technologies/details/ml-html5/all/all
![Page 11: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/11.jpg)
article Mark up parts of the content that is independent, for instance blog post, article etc. aside Used to mark up relevant additional information, like a sidebar. audio Used for natively including audio in a web page. footer The counter-part to header; could be used for any footer section per context. header Used for headers in its context. Note: not just for the header of a page, but also for each header part in section, article and similar.
hgroup Used for grouping several headers, for instance, a main heading and a sub-heading. nav Used for marking up main navigation. section Mark up a generic document section. Easily confused with article, and on top of that you nest either of them, in any order, with the other. time Used to mark up a time or date. video Used for natively including video in a web page – lots of interesting work is coming along here in terms of web browser support.
![Page 12: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/12.jpg)
https://html5test.com/results/desktop.html
![Page 13: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/13.jpg)
![Page 14: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/14.jpg)
https://commons.wikimedia.org/wiki/File:Browser_usage_share,_2009%E2%80%932016,_StatCounter.svg
![Page 15: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/15.jpg)
First apprears on Dec 1995
Interpreted run-time language
prototype-based
Alongside HTML and CSS, it is one of the three core technologies of World Wide Web content production
![Page 16: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/16.jpg)
http://blog.honeypot.io/popularity-of-javascript-frameworks-and-libraries/
TOP 3
![Page 17: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/17.jpg)
Initial release: Aug 26, 2006
Open source on GitHub
Cross-platform JavaScript Library
Designed to simply the client-side scripting of HTML
![Page 18: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/18.jpg)
JavaScript JQuery
Each browser has a slightly different DOM interface
![Page 19: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/19.jpg)
selector
action
Basic syntax
$(selector).action()
Import
![Page 20: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/20.jpg)
Initial released: Oct 20, 2010
Open source on GitHub
JavaScript-based front-end web application framework
Popularized by Google
Describes itself as an extension to HTML for building complex web apps
![Page 21: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/21.jpg)
Import
Hello Word (JQuery vs. Angular.Js)
Basics AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view.
![Page 22: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/22.jpg)
What is WebGL?
![Page 23: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/23.jpg)
What is WebGL?
Web Graphics Library A JavaScript API for rendering interactive 3D and 2D graphics within any
compatible web browser without the use of plug-ins.
![Page 24: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/24.jpg)
Designed and maintained by Khronos Group
First standard release March 2011
Based on OpenGL ES 2.0
Popular Library: Three.js, Babylon.js, Enchant.js…
![Page 25: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/25.jpg)
![Page 26: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/26.jpg)
Open source, can be found on GitHub
Provides functionalities like scenes, lights, animations, shaders, etc.
Supports HTML 5 canvas graphics, Scalable Vector Graphics
![Page 28: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/28.jpg)
How to Make WebGL Animations with Three.Js
![Page 29: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/29.jpg)
https://www.youtube.com/watch?v=b9DB2Uun8zA
![Page 30: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/30.jpg)
https://www.youtube.com/watch?v=b9DB2Uun8zA
![Page 31: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/31.jpg)
![Page 32: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/32.jpg)
Open source library
Released in the summer of 2012
Made by Microsoft employees.
![Page 35: Qiufeng Zhu Advanced User Interface Spring 2017bam/uicourse/830spring17/AUIS-Qiufeng_Zhu...(JQuery vs. Angular.Js) Basics AngularJS extends HTML with ng-directives. The ng-app directive](https://reader035.fdocuments.in/reader035/viewer/2022070720/5ee1225bad6a402d666c2019/html5/thumbnails/35.jpg)
Thanks for listening!