mobile widgets
Post on 04-Apr-2018
230 Views
Preview:
TRANSCRIPT
-
7/30/2019 Mobile Widgets
1/62
Afnan AlSubaihin
DIY Mobile Apps Using Web
Technologies
-
7/30/2019 Mobile Widgets
2/62
IslamicApplications
WebTechnologies
Arabic NLP
iwan.ksu.edu.sa
iwan@ksu.edu.sa
@iwan_rg
-
7/30/2019 Mobile Widgets
3/62
-
7/30/2019 Mobile Widgets
4/62
What are Mobile Web Apps?
Why Use Mobile Web Apps?
Mobile Web Design Best Practices
Mobile Web Development Technologies
-
7/30/2019 Mobile Widgets
5/62
People LOVE their mobile phones
-
7/30/2019 Mobile Widgets
6/62
People LOVE their mobile phones
*
http://www.insightsmena.com/http://www.insightsmena.com/ -
7/30/2019 Mobile Widgets
7/62
-
7/30/2019 Mobile Widgets
8/62
Remember when mobile
phones were only for
making phone calls?
-
7/30/2019 Mobile Widgets
9/62
Mobile Phone Features
GPRS
Web
Connectivity
Data
Storage
Capability
Camera
Touch
Screen
Accelerometers
GPS &
Location
Awareness
Enhanced
Processing
Power
-
7/30/2019 Mobile Widgets
10/62
Mobile Phone Platforms
-
7/30/2019 Mobile Widgets
11/62
Types of Mobile Applications
Native App
Web App
-
7/30/2019 Mobile Widgets
12/62
Types of Mobile Applications
*
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/ -
7/30/2019 Mobile Widgets
13/62
Types of Mobile Applications
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/ -
7/30/2019 Mobile Widgets
14/62
-
7/30/2019 Mobile Widgets
15/62
Types of Mobile Applications
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/ -
7/30/2019 Mobile Widgets
16/62
Why Use Mobile Web Apps?
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 -
7/30/2019 Mobile Widgets
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/ -
7/30/2019 Mobile Widgets
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 -
7/30/2019 Mobile Widgets
19/62
Why Use Mobile Web Apps?
Sometimes, a native app isbetter.
Provide Web based
alternative anyway!
-
7/30/2019 Mobile Widgets
20/62
Why Use Mobile Web Apps?
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
-
7/30/2019 Mobile Widgets
21/62
Mobile Web Design Best Practices
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
-
7/30/2019 Mobile Widgets
22/62
Mobile Web Design Best Practices
Layout
Input
Action and Interaction
Content and Navigation
Mobile Web App Usage Behavior
-
7/30/2019 Mobile Widgets
23/62
Mobile Web Design Best Practices
Usage Behavior
Lookup/Find
(urgent info, local)
I need an answer tosomething now
frequently relatedto my currentlocation in theworld.
-
7/30/2019 Mobile Widgets
24/62
Mobile Web Design Best Practices
Usage Behavior
Explore / Play
(bored , Local)
I have sometime to kill
I want a few idletimedistractions.
-
7/30/2019 Mobile Widgets
25/62
Mobile Web Design Best Practices
Usage Behavior
Check in / Status
(repeat , micro-tasking)
Somethingimportant to me
keeps changing orupdating
I want to stay ontop of it.
-
7/30/2019 Mobile Widgets
26/62
Mobile Web Design Best Practices
Usage Behavior
Edit / Create
(urgent change/micro-tasking)
I need to get
somethingdone now thatcant wait.
-
7/30/2019 Mobile Widgets
27/62
Mobile Web Design Best Practices
Usage Behavior
Edit / Create
(urgent change/micro-tasking)
I need to get
somethingdone now thatcant wait.
-
7/30/2019 Mobile Widgets
28/62
Mobile Web Design Best Practices
Content and Navigation
Content, content, content!
Content first, navigation second!
N
C
-
7/30/2019 Mobile Widgets
29/62
Mobile Web Design Best Practices
Content and Navigation
Where to place your navigation
Top navigation
Quick Access
Bottom Navigation
Near and Comfortable
Side Navigation Must be collapsible
-
7/30/2019 Mobile Widgets
30/62
Mobile Web Design Best Practices
Content and Navigation
*
http://www.lukew.com/ff/entry.asp?1514http://www.lukew.com/ff/entry.asp?1514 -
7/30/2019 Mobile Widgets
31/62
Mobile Web Design Best Practices
Content and Navigation
Comfortable clicking zone *
http://drupal.org/node/1137920http://drupal.org/node/1137920 -
7/30/2019 Mobile Widgets
32/62
Mobile Web Design Best Practices
Content and Navigation
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?
-
7/30/2019 Mobile Widgets
33/62
Mobile Web Design Best Practices
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)
-
7/30/2019 Mobile Widgets
34/62
Mobile Web Design Best Practices
Input
Always try to minimize user
input.
Use inline labels to save space.
Placeholders in HTML5
-
7/30/2019 Mobile Widgets
35/62
Mobile Web Design Best Practices
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 -
7/30/2019 Mobile Widgets
36/62
Mobile Web Design Best Practices
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 -
7/30/2019 Mobile Widgets
37/62
Mobile Web Design Best Practices
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/ -
7/30/2019 Mobile Widgets
38/62
Lets Start Designing!
Think about:
Information Architecture
Clickstream
Wireframe the Layout
-
7/30/2019 Mobile Widgets
39/62
Lets Start Designing!
Information Architecture
-
7/30/2019 Mobile Widgets
40/62
Lets Start Designing!
Information Architecture
-
7/30/2019 Mobile Widgets
41/62
Lets Start Designing!
Clickstream
-
7/30/2019 Mobile Widgets
42/62
Lets Start Designing!
Wireframes and Prototypes
-
7/30/2019 Mobile Widgets
43/62
Lets Start Designing!
Activity - Worksheet
-
7/30/2019 Mobile Widgets
44/62
Mobile Web Development Technologies
ProgrammingLanguages
Helper Toolsand
Frameworks
IDEs
-
7/30/2019 Mobile Widgets
45/62
Mobile Web Development Technologies
-
7/30/2019 Mobile Widgets
46/62
Mobile Web Development Technologies
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 -
7/30/2019 Mobile Widgets
47/62
Mobile Web Development Technologies
*
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/ -
7/30/2019 Mobile Widgets
48/62
Mobile Web Development Technologies
Start building HTML5 files NOW
HTML 4.01 Strict
-
7/30/2019 Mobile Widgets
49/62
Mobile Web Development Technologies
New structural tags
Video and Audio tags.
Canvas Graphics
Forms 2.0
-
7/30/2019 Mobile Widgets
50/62
And many more
...
Mobile Web Development Technologies
-
7/30/2019 Mobile Widgets
51/62
Mobile Web Development Technologies
-
7/30/2019 Mobile Widgets
52/62
Required Fields
Regular Expressions
Minimum and Maximum Values
MaxLength for textarea
Mobile Web Development Technologies
-
7/30/2019 Mobile Widgets
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
Mobile Web Development Technologies
-
7/30/2019 Mobile Widgets
54/62
Mobile Web Development Technologies
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/ -
7/30/2019 Mobile Widgets
55/62
Mobile Web Development Technologies
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/ -
7/30/2019 Mobile Widgets
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
-
7/30/2019 Mobile Widgets
57/62
PhoneGap Build
build.phonegap.com
-
7/30/2019 Mobile Widgets
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/ -
7/30/2019 Mobile Widgets
59/62
Sample of a config.xml file:
-
7/30/2019 Mobile Widgets
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/ -
7/30/2019 Mobile Widgets
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.
-
7/30/2019 Mobile Widgets
62/62
Thank YOU!
@afnantweets
aalsubaihin@ksu.edu.sa
top related