building mobile applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf ·...
TRANSCRIPT
![Page 2: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/2.jpg)
web apps v. native apps
![Page 3: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/3.jpg)
![Page 4: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/4.jpg)
![Page 5: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/5.jpg)
![Page 6: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/6.jpg)
![Page 7: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/7.jpg)
<!DOCTYPE html>
<html> <head> <title>hello, world</title> </head> <body> hello, world </body></html>
![Page 8: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/8.jpg)
![Page 9: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/9.jpg)
viewport<meta name="viewport" content="width=device-‐width"/>
![Page 10: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/10.jpg)
viewportheight
initial-‐scale
maximum-‐scale
minimum-‐scale
user-‐scalable
width
![Page 11: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/11.jpg)
![Page 12: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/12.jpg)
<!DOCTYPE html>
<html> <head> <link href="styles.css" rel="stylesheet"> <title>hello, world</title> </head> <body> hello, world </body></html>
![Page 13: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/13.jpg)
frameworks
jQuery Mobile
PhoneGap
Sencha Touch
. . .
![Page 14: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/14.jpg)
apple-mobile-web-app-capable<meta name="apple-‐mobile-‐web-‐app-‐capable" content="yes"/>
![Page 15: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/15.jpg)
apple-mobile-web-app-status-bar-style<meta name="apple-‐mobile-‐web-‐app-‐status-‐bar-‐style" content="black"/>
![Page 16: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/16.jpg)
apple-touch-icon.png<link rel="apple-‐touch-‐icon" href="custom_icon.png"/>
![Page 17: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/17.jpg)
apple-touch-icon-precomposed.png<link rel="apple-‐touch-‐icon-‐precomposed" href="custom_icon.png"/>
![Page 18: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/18.jpg)
apple-touch-startup-image<link rel="apple-‐touch-‐startup-‐image" href="startup.png"/>
![Page 19: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/19.jpg)
<!DOCTYPE html>
<html> <head> <link href="styles.css" rel="stylesheet"> <script src="scripts.js"></script> <title>hello, world</title> </head> <body> hello, world </body></html>
![Page 20: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/20.jpg)
JavaScript
![Page 21: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/21.jpg)
Building Mobile ApplicationsComputer Science S-76
![Page 22: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/22.jpg)
prerequisites
Prior programming experience in any object-oriented language
Comfort with HTML and CSS
iOS device
![Page 23: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/23.jpg)
expectations
attend all lectures and labs
submit all projects
![Page 24: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/24.jpg)
lectures
1 on web apps
HTML5, JavaScript, ...
5 on native apps
Objective-C, UIKit, Storage, Gestures, Core Graphics, ...
![Page 25: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/25.jpg)
labswednesdays, 6:30pm, Northwest Science B108
![Page 26: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/26.jpg)
websitewww.cs76.net
![Page 27: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/27.jpg)
Discusscs76.net/discuss
![Page 28: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/28.jpg)
projects
Staff ’s Choice of Web Apps
Mobile Local
Staff ’s Choice of Native Apps
Evil Hangman
Student’s Choice of Apps
![Page 29: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/29.jpg)
grades
scope
correctness
design
style
![Page 30: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/30.jpg)
grades
scope x (3 x correctness + 2 x design + 1 x style)
![Page 31: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/31.jpg)
app partywed 8/7, 6:30pm
![Page 32: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/32.jpg)
sony.com
![Page 33: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/33.jpg)
![Page 34: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/34.jpg)
<!DOCTYPE html>
<html> <head> <title>My title</title> </head> <body> <a href="">My link</a> <h1>My header</h1> </body></html>
![Page 35: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/35.jpg)
<!DOCTYPE html>
<html> <head> <title>My title</title> </head> <body> <a href="">My link</a> <h1>My header</h1> </body></html>
![Page 36: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/36.jpg)
JavaScript
![Page 37: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/37.jpg)
<script>
...
</script>
![Page 38: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/38.jpg)
<script src="file.js"></script>
![Page 39: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/39.jpg)
breakconstcontinuedo ... whileforfor ... infunctionif ... elsereturnswitchthrowtry ... catchvarwhile...
![Page 40: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/40.jpg)
Arrays[]
![Page 41: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/41.jpg)
Objects{}
![Page 42: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/42.jpg)
localStorage
.clear
.getItem
.removeItem
.setItem
![Page 43: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/43.jpg)
navigator.geolocation
.getCurrentPosition
![Page 44: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/44.jpg)
jQueryjquery.com
![Page 45: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/45.jpg)
source unknown
ajax
![Page 46: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/46.jpg)
Objective-C
![Page 47: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/47.jpg)
![Page 48: Building Mobile Applications - cdn.cs76.netcdn.cs76.net/2013/summer/lectures/0/lecture0.pdf · Building Mobile Applications Computer Science S-76 ... ****](https://reader033.vdocuments.mx/reader033/viewer/2022051723/5ab91a8c7f8b9aa6018d6eae/html5/thumbnails/48.jpg)