mobile widgets

7/30/2019 Mobile Widgets

1/62

Afnan AlSubaihin

DIY Mobile Apps Using Web

Technologies


2/62

IslamicApplications

WebTechnologies

Arabic NLP

iwan.ksu.edu.sa

[email protected]

@iwan_rg


3/62


4/62

What are Mobile Web Apps?

Why Use Mobile Web Apps?

Mobile Web Design Best Practices

Mobile Web Development Technologies


5/62

People LOVE their mobile phones


6/62

People LOVE their mobile phones

*
http://www.insightsmena.com/http://www.insightsmena.com/


7/62


8/62

Remember when mobile

phones were only for

making phone calls?


9/62

Mobile Phone Features

GPRS

Web

Connectivity

Data

Storage

Capability

Camera

Touch

Screen

Accelerometers

GPS &

Location

Awareness

Enhanced

Processing

Power


10/62

Mobile Phone Platforms


11/62

Types of Mobile Applications

Native App

Web App


12/62


*
http://www.onbile.com/info/most-commonly-used-programming-languages-for-mobile-applications/http://www.onbile.com/info/most-commonly-used-programming-languages-for-mobile-applications/


13/62


Develop once, deploy everywhere Every manufacturer has its own IDE/PL

Browser Download/installCheap ExpensiveCan be the same as the web site Must develop from scratch

Cant access all device features Better control over the hardware

Easy to update User must agree to install the updateScattered over the web Appstore/Marketplace (insures quality of apps)

*
http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/


14/62


15/62


Does the mobile app require the use of any special device features?

Whats my budget?

Does the mobile app need to be Internet-enabled?

Do I need to target all mobile devices or just certain devices?

What programming languages do I already know?

How important is speed and performance?

How will this app be monetized effectively?

*
http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/


16/62


You are familiar with web development (HTML5, CSS3, JavaScript,server-side)

You want to overcome fragmentation of mobile platforms

You dont want to use hardware-specific features of the device.

You want agility and less costs

Shortcut..

You already have a website?

Make it responsive! * * There are many ways to create

responsive web design

Mainly using Media Queries
http://kadirselcuk.com/?p=270http://stephencaver.com/http://stephencaver.com/http://kadirselcuk.com/?p=270


17/62

Responsive Web Design

Same code: Displays differently according to the device.

*
http://sixrevisions.com/design-showcase-inspiration/responsive-webdesign-examples/http://sixrevisions.com/design-showcase-inspiration/responsive-webdesign-examples/


18/62

Activity: Go to

http://www.antarcticstation.org/

Responsive Web Design

*
http://www.lukew.com/ff/entry.asp?1514http://www.lukew.com/ff/entry.asp?1514


19/62


Sometimes, a native app isbetter.

Provide Web based

alternative anyway!


20/62


HTML 5, CSS3, JavaScript, Server-sideAre very powerful with many capabilities

Forms 2.0

(Form Place

Holders)

Video

Streaming

Editable

Content

Offline

Storage

Refined

Typography

Animation

Audio and

Video

Support

Geolocation

API

Canvas

Graphics


21/62


How to design?

Whether you are..

Building from scratch

i.e. chose a mobile web app over a nativeapp

Turning a Website into a mobileweb app

Responsive design

Both have the same functionality


22/62


Layout

Input

Action and Interaction

Content and Navigation

Mobile Web App Usage Behavior


23/62


Usage Behavior

Lookup/Find

(urgent info, local)

I need an answer tosomething now

frequently relatedto my currentlocation in theworld.


24/62


Usage Behavior

Explore / Play

(bored , Local)

I have sometime to kill

I want a few idletimedistractions.


25/62


Usage Behavior

Check in / Status

(repeat , micro-tasking)

Somethingimportant to me

keeps changing orupdating

I want to stay ontop of it.


26/62


Usage Behavior

Edit / Create

(urgent change/micro-tasking)

I need to get

somethingdone now thatcant wait.


27/62


Usage Behavior

Edit / Create

(urgent change/micro-tasking)

I need to get

somethingdone now thatcant wait.


28/62



Content, content, content!

Content first, navigation second!

N

C


29/62



Where to place your navigation

Top navigation

Quick Access

Bottom Navigation

Near and Comfortable

Side Navigation Must be collapsible


30/62



*
http://www.lukew.com/ff/entry.asp?1514http://www.lukew.com/ff/entry.asp?1514


31/62



Comfortable clicking zone *
http://drupal.org/node/1137920http://drupal.org/node/1137920


32/62



Remember!

Minimize your navigation elements.

Hide it when possible.

Buttons Vs. Links

Horizontal Vs. Vertical

Focus on the task at hand

When the user opens my app, what does he/she

want exactly?


33/62


Action and Interaction

Common Interaction Methods:Multi-Touch Screen

Trackball

Stylus

Other HW buttons (Back button in Android devices)Pay special attention to:

Size of buttons and clickable content (44x44 px)


34/62


Input

Always try to minimize user

input.

Use inline labels to save space.

Placeholders in HTML5


35/62


Layout

The most user friendly layout

for mobile content:

One Column!

*

Horizontal

Scrolling
http://www.astd.org/Publications/Blogs/Learning-Technologies-Blog/2012/08/Fundamental-Considerations-for-Designing-M-Learning-Solutions-Part-1http://www.astd.org/Publications/Blogs/Learning-Technologies-Blog/2012/08/Fundamental-Considerations-for-Designing-M-Learning-Solutions-Part-1


36/62


Layout

The most user friendly layout

for mobile content:

One Column!

*

Horizontal

Scrolling
http://www.astd.org/Publications/Blogs/Learning-Technologies-Blog/2012/08/Fundamental-Considerations-for-Designing-M-Learning-Solutions-Part-1http://www.astd.org/Publications/Blogs/Learning-Technologies-Blog/2012/08/Fundamental-Considerations-for-Designing-M-Learning-Solutions-Part-1


37/62


Layout

Another Approach:

Icon grids

*
http://www.onextrapixel.com/2012/01/02/design-best-practices-for-the-mobile-web/http://www.onextrapixel.com/2012/01/02/design-best-practices-for-the-mobile-web/


38/62

Lets Start Designing!

Think about:

Information Architecture

Clickstream

Wireframe the Layout


39/62




40/62




41/62


Clickstream


42/62


Wireframes and Prototypes


43/62


Activity - Worksheet


44/62


ProgrammingLanguages

Helper Toolsand

Frameworks

IDEs


45/62



46/62


Kendo UI, a division of Telerik, surveyed

4,043 software developers in the period

between September 5th and September26th of 2012 regarding their usage,

attitudes and expectations surrounding

HTML5 and its adoption for mobiledevelopment initiatives.*
http://www.kendoui.com/Libraries/Documents/HTML5_Adoption_Survey.sflb.ashxhttp://www.kendoui.com/Libraries/Documents/HTML5_Adoption_Survey.sflb.ashx


47/62


*
http://venturebeat.com/2012/11/07/mobile-app-development-94-of-software-developers-betting-on-html5-winning/http://venturebeat.com/2012/11/07/mobile-app-development-94-of-software-developers-betting-on-html5-winning/


48/62


Start building HTML5 files NOW

HTML 4.01 Strict


49/62


New structural tags

Video and Audio tags.

Canvas Graphics

Forms 2.0


50/62

And many more

...



51/62



52/62

Required Fields

Regular Expressions

Minimum and Maximum Values

MaxLength for textarea



53/62

Integrated APIs

Offline Application API

Inline Editing API

Drag & Drop API

Associated APIs

Geolocation API: builds location-aware

applications

Web Storage API: stores data locally



54/62


Easy to learn HTML5 !

http://diveintohtml5.info/ w3schools.com/html/html5_intro.asp
http://diveintohtml5.info/http://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/html/html5_intro.asphttp://diveintohtml5.info/http://diveintohtml5.info/http://diveintohtml5.info/


55/62


Start CodingYoull need a mobile emulator

(http://www.mobilephoneemulator.com/)

Or drag and drop

http://jquerymobile.com/

http://www.codiqa.com/builder/demo

Activity Start Coding!
http://www.mobilephoneemulator.com/http://jquerymobile.com/http://www.codiqa.com/builder/demohttp://www.codiqa.com/builder/demohttp://jquerymobile.com/http://www.mobilephoneemulator.com/


56/62

Lets admit: A native app is much cooler!

Faster penetration among users - Better Discovery

Monetization

The Best of Both Worlds!

Code using Web Technologies

Package and Deploy as a native app


57/62

PhoneGap Build

build.phonegap.com


58/62

Widgets.. The new best thing?Package .html .css .js files as a one app (.WGT)

Add a config.xml file to guide the OS on how to operate the app

The app is universal and runs on all devices

The runtime environment is like a browser but without the controls.

W3C Specification: http://www.w3.org/TR/widgets/

Standardized.. But not yet

adopted
http://www.w3.org/TR/widgets/http://www.w3.org/TR/widgets/http://www.w3.org/TR/widgets/http://www.w3.org/TR/widgets/


59/62

Sample of a config.xml file:


60/62

To start building Widgets, you can follow the WAC

specification using the WAC SDK:

https://www.wacapps.net

To Run Widgets on your device:

You must have a runtime environment that supports WAC

specification

Finall
https://www.wacapps.net/https://www.wacapps.net/


61/62

Finally..

You know the difference between a native app and a

web-based mobile app.

You know when to choose either..

You learned about responsive design

You know how to design for mobile phones

Youve seen a glimpse of HTML5, CSS3, JS APIs

capabilities

You know how to package your mobile web app as a

native app.


62/62

Thank YOU!

@afnantweets

[email protected]