Responsive Webapps & Mobile Apps Mobile-friendly CSS frameworks - PowerPoint PPT Presentation

Responsive Webapps & Mobile Apps Mobile-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

Agenda Warm-up project: See submission instructions on Piazza. Due Tuesday 2/18 CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 2 / 17

Agenda Warm-up project: See submission instructions on Piazza. Due Tuesday 2/18 Today: “Responsive” webapps: work both on desktop and mobile Native mobile apps: iOS and Android CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 2 / 17

Entry/Exit Surveys Exit survey: Django & MVC Explain each of the MVC components in Django. Overall, why is Django a populer web framework? What are its major advantages compared to other web frameworks you know? Entry survey: Mobile Web Which one do you use more on your mobile device: manys apps or mostly use the browser? Argue whether it is better to make mobile-aware (responsive) webapps versus mobile-OS specific apps (iOS/Android). Submit survey on Blackboard CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 3 / 17

Responsive web design From Wikipedia: “[RWD] is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).” CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 4 / 17

Responsive web design From Wikipedia: “[RWD] is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).” Uses principles: Proportion-based grids : Page element sizing to be in relative units like 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 rules based on characteristics of the device (e.g., browser width). CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 4 / 17

Responsive CSS framework (1): Bootstrap CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 5 / 17

Responsive CSS framework (1): Bootstrap CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 5 / 17

Responsive CSS framework (1): Bootstrap CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 5 / 17

Responsive CSS framework (2): Foundation CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 6 / 17

Responsive CSS framework (2): Foundation CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 6 / 17

Responsive CSS framework (2): Foundation CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 6 / 17

Responsive CSS usage: Bootstrap example In the HTML head , include CSS, e.g.: <! -- Latest CSS -- > compiled and minified <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

Why use responsive web and not mobile apps? Responsive web: One solution for all Server+client solution can be faster than mobile app. iOS and Android have peculiarities (licensing, language, versions, compatibility) CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 8 / 17

Why use responsive web and not mobile apps? Responsive web: One solution for all Server+client solution can be faster than mobile app. iOS and Android have peculiarities (licensing, language, versions, compatibility) Mobile apps: Usually faster to start Resident on mobile device and can be activated based on time, or event (e.g., GPS location) Mobile markets make it easy to advertise CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 8 / 17

Universitas Islam Negeri Syarif Hidayatullah Jakarta, May 4, 2011 iOS Development Seminar War Of Smartphone Operating System Andri Yadi @andri_yadi

The History of Mobile Devices Before iPhone ! After iPhone ! 1988 2007 2010 ? iPad ! iPhone ! Motorolla 4500x !

iOS devices

http://developer.apple.com/ios

200,000,000 iOS devices shipped

372,141 Apps 414 Apps/Day 80,297 Publishers 10 bn downloads Source: http://148apps.biz/app-store-metrics - May 3, 2011

Required Stu ff s

iOS 4.3 SDK + Xcode 4

For debugging to device & deployment to AppStore

Notice something? iOS development = $$$ Requires: Purchase developer license Own Mac computer (Xcode only runs on Mac) Own mobile device (need to get license for development) CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 11 / 17

Notice something? iOS development = $$$ Requires: Purchase developer license Own 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

Objective-C C + OOP ≠ C++

Model-View-Controller

Memory Management Reference counting No garbage collector support (yet) Autorelease Pool

Goodies

Cocoa Touch Foundation, UIKit, Multi-Touch Gestures

Graphics Core Graphics, Core Animation, Core Image, Core Text, OpenGL ES

Audio & Video Media player, Core Audio & OpenAL, iPod library, HTTP Live Streaming

CoreData Database, Object-Relational Mapping, optimized for mobile - > 1 mln objects store

Networking Bonjour, Peer to peer, WebKit framework, BSD socket

Core Location & MapKit

Multitasking New kind of multitasking. Available in iOS 4.

External display support

AirPrint Wireless printing to AirPrint-enabled printers. Hack available

Push & Local Notification

Game Center Social gaming platform

iAd Integrated advertising platform

In-App Purchase Payment inside applications

iOS development summary All good things aside, iOS development has a lot of red tape . Approval for developer license Market license Deployment license At Emory students can get free developer licenses, but they have to: Use library computers/own a Mac Register with IT Obtain and install license (everytime you use library computer) CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 12 / 17

Apple Battles “Resurgent” Rivals iOS market share in decline as of Nov 2013 (TechCruch): CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 14 / 17

Apple Battles “Resurgent” Rivals iOS market share in decline as of Nov 2013 (TechCruch): New platforms on the rise: Android Windows CS 370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2014 14 / 17

Android

History founded by open handset alliance (OHA) by a group in 2003 by ANDY ROBIN(danger) RICH MINER (co founder of wildfjre 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 fjnancially and latter brought in android in 2005. GOOGLE reveled in 2007 with fjrst 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.

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.

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.

Introduction Versions versions Codenam API Distributi e on 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.3 Gingerbrea 9 0.2% 2.3.2 d 2.3.3 10 43.9% 2.3.7 3.1 Honeycom 12 0.3% 3.2 b 13 0.9% 4.0.3 Ice cream 15 28.6% 4.0.4 sandwich 4.1 Jelly bean 16 14.9% 4.2 17 1.6% Upcoming Key lime Second qtr ??????? pie