agenda - emory universitycengiz/cs370-pract-softeng-sp15/slides/a… · responsive web design...

Agenda

What to present on Thursday:

I Rev us up for your �nal iteration/product!I Follow marketing advice to improve your brandingI Must pick a good name!I Demo continuous integration or tell us how it works in your project

F Good names: Duel, Scribble, TripSplitter, Fortuna Beer, QuickSourceF Not so good: ClearViz, CampusTours, ClassChat, AllInOne

What's coming after?

I Your evaluation will a�ect your entrance to �nal eventI Testing others' projects will give you bonus pointsI Prioritize by balancing new features with making existing product more robust.I Checkpoint on running focus group/market researchI Must determine if the product is viable by end of semester!

Agenda

Stand-up for your meeting now!

Today's menu:

1 Responsive web and mobile intro2 Guest speaker: Brian Clark from GradSchoolMatch.com

http://GradSchoolMatch.com

Responsive Webapps & Mobile Apps

Mobile-friendly CSS frameworks and introduction to mobile apps

CS370 Software & Startup Engineering Practicum, Cengiz Günay

(Some slides courtesy of Eugene Agichstein and the Internets. License: CC BY-SA 4.0.)

CS370, Günay (Emory) Responsive Webapps & Mobile Apps Spring 2015 3 / 18

http://creativecommons.org/licenses/by-sa/4.0/

Responsive web design

From Wikipedia:

�[RWD] is a Web design approach aimed at crafting sites to provide an optimalviewing experience�easy reading and navigation with a minimum of resizing,panning, and scrolling�across a wide range of devices (from mobile phones todesktop 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 characteristicsof the device (e.g., browser width).


http://en.wikipedia.org/wiki/Responsive_web_design

Responsive CSS framework (1): Bootstrap

http://getbootstrap.com/

Responsive CSS framework (2): Foundation

http://foundation.zurb.com/

Responsive CSS usage: Bootstrap example

In the HTML head, include CSS, e.g.:



<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)


http://getbootstrap.com/getting-started/

http://getbootstrap.com/css/

http://getbootstrap.com/components/

http://getbootstrap.com/javascript/

http://getbootstrap.com/examples/theme/

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., GPSlocation)

Mobile markets make it easy to advertise


http://timiacono.com/index.php/2012/09/21/the-iphone-mania-round-5/

iOS Development

Andri Yadi @andri_yadi

Universitas Islam Negeri Syarif Hidayatullah Jakarta, May 4, 2011

Seminar War Of Smartphone Operating System

http://www.slideshare.net/andri_yadi/ios-development-a-beginner-guide

The History of Mobile Devices

1988 2007 2010 ?

Motorolla 4500x! iPhone! iPad!

Before iPhone! After iPhone!

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!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)

Let's keep going. . .


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)


http://blog.gsmarena.com/android-dominates-ios-in-china/

Apple Battles �Resurgent� Rivals

iOS market share in decline as of Nov 2013 (TechCruch):

New platforms on the rise:

Android

Windows


http://techcrunch.com/2014/01/06/kantar-nov-13/

http://techcrunch.com/2014/01/06/kantar-nov-13/

Android

http://www.slideshare.net/dhullalada/android-18717737?v=default&b=&from_search=3

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

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 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 ???????

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.

Notice something?

Android development = free!No red tape! Requires:

No license

Uses open source software

Can run on any mobile device (no need to get deployment license)

Let's keep going. . .


ANDROID ARCHITECTURE

The software stack is split into Four Layers:

• The application layer

• The application framework

• The libraries and runtime

• The kernel

LIFE CYCLE

Mobile development summary

Easiest is to develop responsive webapps

If needed can make native mobile app:

I iOS: objective-C, SwiftI Android: JavaI Windows: C#, VB.Net :-C~I Cross-platform: PhoneGap, AirplaySDK, WidgetPad, . . .


http://www.slideshare.net/dalelane/an-introduction-to-windows-mobile-development

Guest Speaker: Brian Clark

Check out: GradSchoolMatch.com

Emory Startup

Business background, but tightly integrated into Atlanta startup community

Welcome guests PicWhich, a Washington, DC startup

http://GradSchoolMatch.com

agenda - emory universitycengiz/cs370-pract-softeng-sp15/slides/a… · responsive web design...

Documents