responsive webapps & mobile apps - emory universitycengiz/.../slides/...intro.pdf · (some...
TRANSCRIPT
![Page 1: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/1.jpg)
Responsive Webapps & Mobile AppsMobile-friendly CSS frameworks and introduction to mobile apps
CS 370 SE Practicum, Cengiz Günay
(Some slides courtesy of Eugene Agichtein and the Internets)
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 1 / 17
![Page 2: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/2.jpg)
Agenda
Warm-up project:
See submission instructions on Piazza.Due Tuesday 2/18
Today:
“Responsive” webapps: work both on desktop and mobileNative mobile apps: iOS and Android
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 2 / 17
![Page 3: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/3.jpg)
Agenda
Warm-up project:
See submission instructions on Piazza.Due Tuesday 2/18
Today:
“Responsive” webapps: work both on desktop and mobileNative mobile apps: iOS and Android
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 2 / 17
![Page 4: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/4.jpg)
Entry/Exit Surveys
Exit survey: Django & MVCExplain each of the MVC components in Django.Overall, why is Django a populer web framework? What are its majoradvantages compared to other web frameworks you know?
Entry survey: Mobile WebWhich one do you use more on your mobile device: manys apps ormostly use the browser?Argue whether it is better to make mobile-aware (responsive) webappsversus mobile-OS specific apps (iOS/Android).
Submit survey on Blackboard
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 3 / 17
![Page 5: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/5.jpg)
Responsive web design
From Wikipedia:
“[RWD] is a Web design approach aimed at crafting sites toprovide an optimal viewing experience—easy reading andnavigation with a minimum of resizing, panning, andscrolling—across a wide range of devices (from mobile phones todesktop computer monitors).”
Uses principles:Proportion-based grids: Page element sizing to be in relative unitslike percentages, rather than absolute units (e.g., pixels).Flexible images: sized in relative units to containing element.CSS3 media queries (extension of @media rule): CSS style rulesbased on characteristics of the device (e.g., browser width).
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 4 / 17
![Page 6: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/6.jpg)
Responsive web design
From Wikipedia:
“[RWD] is a Web design approach aimed at crafting sites toprovide an optimal viewing experience—easy reading andnavigation with a minimum of resizing, panning, andscrolling—across a wide range of devices (from mobile phones todesktop computer monitors).”
Uses principles:Proportion-based grids: Page element sizing to be in relative unitslike percentages, rather than absolute units (e.g., pixels).Flexible images: sized in relative units to containing element.CSS3 media queries (extension of @media rule): CSS style rulesbased on characteristics of the device (e.g., browser width).
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 4 / 17
![Page 7: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/7.jpg)
Responsive CSS framework (1): Bootstrap
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 5 / 17
![Page 8: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/8.jpg)
Responsive CSS framework (1): Bootstrap
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 5 / 17
![Page 9: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/9.jpg)
Responsive CSS framework (1): Bootstrap
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 5 / 17
![Page 10: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/10.jpg)
Responsive CSS framework (2): Foundation
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 6 / 17
![Page 11: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/11.jpg)
Responsive CSS framework (2): Foundation
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 6 / 17
![Page 12: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/12.jpg)
Responsive CSS framework (2): Foundation
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 6 / 17
![Page 13: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/13.jpg)
Responsive CSS usage: Bootstrap example
In the HTML head, include CSS, e.g.:
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="// netdna.bootstrapcdn.com/
bootstrap /3.1.1/ css/bootstrap.min.css">
Use their CSS templates, e.g., specify viewport:
<meta name="viewport" content="width=device -width , initial -scale=1">
Use components (e.g., icons, buttons, drop-down menus, etc.)Also has Javascript (jQuery plugins – will talk about this later)Your website will look clean (example)
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 7 / 17
![Page 14: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/14.jpg)
Why use responsive web and not mobile apps?
Responsive web:One solution for allServer+client solution can be faster than mobile app.iOS and Android have peculiarities (licensing, language, versions,compatibility)
Mobile apps:Usually faster to startResident on mobile device and can be activated based on time, orevent (e.g., GPS location)Mobile markets make it easy to advertise
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 8 / 17
![Page 15: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/15.jpg)
Why use responsive web and not mobile apps?
Responsive web:One solution for allServer+client solution can be faster than mobile app.iOS and Android have peculiarities (licensing, language, versions,compatibility)
Mobile apps:Usually faster to startResident on mobile device and can be activated based on time, orevent (e.g., GPS location)Mobile markets make it easy to advertise
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 8 / 17
![Page 17: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/17.jpg)
iOS Development
Andri Yadi @andri_yadi
Universitas Islam Negeri Syarif Hidayatullah Jakarta, May 4, 2011
Seminar War Of Smartphone Operating System
![Page 18: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/18.jpg)
![Page 19: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/19.jpg)
The History of Mobile Devices
1988 2007 2010 ?
Motorolla 4500x! iPhone! iPad!
Before iPhone! After iPhone!
![Page 20: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/20.jpg)
iOS devices
![Page 21: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/21.jpg)
http://developer.apple.com/ios
![Page 22: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/22.jpg)
200,000,000 iOS devices shipped
![Page 23: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/23.jpg)
372,141 Apps 414 Apps/Day 80,297 Publishers 10 bn downloads
Source: http://148apps.biz/app-store-metrics - May 3, 2011
![Page 24: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/24.jpg)
Required Stu!s
![Page 25: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/25.jpg)
![Page 26: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/26.jpg)
![Page 27: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/27.jpg)
iOS 4.3 SDK + Xcode 4
![Page 28: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/28.jpg)
![Page 29: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/29.jpg)
For debugging to device & deployment to AppStore
![Page 30: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/30.jpg)
Notice something?
iOS development = $$$Requires:
Purchase developer licenseOwn Mac computer (Xcode only runs on Mac)Own mobile device (need to get license for development)
Let’s keep going. . .
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 11 / 17
![Page 31: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/31.jpg)
Notice something?
iOS development = $$$Requires:
Purchase developer licenseOwn Mac computer (Xcode only runs on Mac)Own mobile device (need to get license for development)
Let’s keep going. . .
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 11 / 17
![Page 32: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/32.jpg)
Objective-C C + OOP " C++
![Page 33: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/33.jpg)
Model-View-Controller
![Page 34: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/34.jpg)
Memory Management
Reference counting
No garbage collector support (yet)
Autorelease Pool
![Page 35: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/35.jpg)
Goodies
![Page 36: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/36.jpg)
Cocoa Touch Foundation, UIKit, Multi-Touch Gestures
![Page 37: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/37.jpg)
Graphics Core Graphics, Core Animation, Core Image, Core Text, OpenGL ES
![Page 38: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/38.jpg)
Audio & Video Media player, Core Audio & OpenAL, iPod library, HTTP Live Streaming
![Page 39: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/39.jpg)
CoreData Database, Object-Relational Mapping, optimized for mobile - > 1 mln objects store
![Page 40: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/40.jpg)
Networking Bonjour, Peer to peer, WebKit framework, BSD socket
![Page 41: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/41.jpg)
Core Location & MapKit
![Page 42: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/42.jpg)
Multitasking New kind of multitasking. Available in iOS 4.
![Page 43: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/43.jpg)
External display support
![Page 44: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/44.jpg)
AirPrint Wireless printing to AirPrint-enabled printers. Hack available
![Page 45: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/45.jpg)
Push & Local Notification
![Page 46: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/46.jpg)
Game Center Social gaming platform
![Page 47: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/47.jpg)
iAd Integrated advertising platform
![Page 48: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/48.jpg)
In-App Purchase Payment inside applications
![Page 49: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/49.jpg)
iOS development summary
All good things aside, iOS development has a lot of red tape.Approval for developer licenseMarket licenseDeployment license
At Emory students can get free developer licenses, but they have to:Use library computers/own a MacRegister with ITObtain and install license (everytime you use library computer)
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 12 / 17
![Page 51: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/51.jpg)
Apple Battles “Resurgent” Rivals
iOS market share in decline as of Nov 2013 (TechCruch):
New platforms on the rise:AndroidWindows
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 14 / 17
![Page 52: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/52.jpg)
Apple Battles “Resurgent” Rivals
iOS market share in decline as of Nov 2013 (TechCruch):
New platforms on the rise:AndroidWindows
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 14 / 17
![Page 54: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/54.jpg)
History founded by open handset alliance (OHA) by a group in 2003 by ANDY ROBIN(danger) RICH MINER (co founder of wildfire communication) NICK SEARS (vpt-moblie) CHRIS WHITE(design and interface developed at web TV).
ANDROID logo designed by California based graphic designer IRINA BLOCK.
Google lacked financially and latter brought in android in 2005.
GOOGLE reveled in 2007 with first mobile android powered phone which was HTC DREAM was sold in October 22nd 2008.
ANDROID is a open source and Google releases the code under Apache license.
October 2012 approximately 700000 apps were available for downloads.
x
![Page 55: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/55.jpg)
Estimated applications downloaded at Google play were 25 billion.
Android took over Symbian OS in 2010.
Android has world wide Smartphone market share of 75% with 500 million devices activated.
1.3 millions activations per day.
Each major release is named in alphabetical order with international bakery items names e.g. cupcake, ice cream etc.
Google has its own mobile named NEXUS collaborated with HTC.
![Page 56: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/56.jpg)
![Page 57: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/57.jpg)
What is ANDROID• Google's Android is an open-source platform that's currently available on a wide variety of smart phones.
• Android is a software stack consist
Of a part of operating system in
{Linux kernel} libraries, framework,
and applications.
![Page 58: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/58.jpg)
Introduction Versions
versions Codename
API Distribution
1.5 Cupcake 3 0.05%
1.6 Donut 4 0.2%
2.1 Éclair 7 1.9%
2.2 Froyo 8 7.5%
2.32.3.22.3.32.3.7
Gingerbread
9
10
0.2%
43.9%
3.13.2
Honeycomb
1213
0.3%0.9%
4.0.34.0.4
Ice cream sandwich
15 28.6%
4.14.2
Jelly bean 1617
14.9%1.6%
Upcoming Key lime pie
Second qtr ???????
![Page 59: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/59.jpg)
![Page 60: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/60.jpg)
Getting started
• Installing all necessary tools to build apps.
• Jdk • Eclipse • Adt pulgins kit • New way of installing with ADT
bundle which includes eclipse + Adt+ platforms.
![Page 61: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/61.jpg)
Notice something?
Android development = free!No red tape! Requires:
No licenseUses open source softwareCan run on any mobile device (no need to get deployment license)
Let’s keep going. . .
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 16 / 17
![Page 62: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/62.jpg)
Notice something?
Android development = free!No red tape! Requires:
No licenseUses open source softwareCan run on any mobile device (no need to get deployment license)
Let’s keep going. . .
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 16 / 17
![Page 63: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/63.jpg)
ANDROID ARCHITECTURE
The software stack is split into Four Layers:
• The application layer
• The application framework
• The libraries and runtime
• The kernel
![Page 64: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/64.jpg)
![Page 65: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/65.jpg)
LIFE CYCLE
![Page 66: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/66.jpg)
Mobile development summary
Easiest is to develop responsive webappsIf needed can make native mobile app:
I iOS: objective-CI Android: JavaI Windows: C#, VB.Net :-C~I Cross-platform: PhoneGap, AirplaySDK, WidgetPad, . . .
You are free to choose either for your main projectNext class I will introduce the project timeline
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 17 / 17
![Page 67: Responsive Webapps & Mobile Apps - Emory Universitycengiz/.../slides/...intro.pdf · (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) Responsive](https://reader030.vdocuments.mx/reader030/viewer/2022040910/5e83d8fa8898d275311198e7/html5/thumbnails/67.jpg)
Mobile development summary
Easiest is to develop responsive webappsIf needed can make native mobile app:
I iOS: objective-CI Android: JavaI Windows: C#, VB.Net :-C~I Cross-platform: PhoneGap, AirplaySDK, WidgetPad, . . .
You are free to choose either for your main projectNext class I will introduce the project timeline
CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 17 / 17