Difference between Web Apps for mobiles and Desktop

Mobile device hardware is smaller and generally tends to have lower hardware resources than desktops/laptops. Smaller screens bring about different design considerations and challenges. Touch screen technology introduces new interaction concepts that differ from traditional input devices (keyboard and mouse). With a mobile device, internet connectivity is not always as reliable as a hardwired broadband connection, which means internet connectivity is a concern and data transfer could be significantly slower.

www.affineminds.com

What are Native Apps?

Native apps are coded with a specific programming language like ObjectiveC or Android. These mobile applications are fast, reliable, and powerful but are tied to a mobile platform. That means you must duplicate them using the appropriate programming language in order to target another mobile platform. Nearly all games are native apps.

www.affineminds.com

What are Hybrid Apps?

Hybrid apps rely on development frameworks like Sencha, PhoneGap, Titanium, Rhomobile etc. These mobile apps offer a very interesting compromise because they ensure cross-platform compatibility and can access the phones hardware (camera, GPS, users contacts).

www.affineminds.com

What are dedicated Web Apps?

Dedicated web app, which is a mobile web site tailored to a specific platform or form factor, like the LinkedIn web app which was designed for Android and iOS, but not for other smart phones or feature phones.

www.affineminds.com

Comparison
Device Access Speed Development Cost App Store Approval Process

Native Hybrid Web

Full Full Partial

Vary Fast Native Speed Fast

Expensive Reasonable Responsible

Available Available Not Available

Mandatory Low Overhead None

www.affineminds.com

www.affineminds.com

What is HTML5?
HTML5, however, has come to mean a lot more than just a new set of tags. The term now encompasses a whole set of technologies that include: HTML5 elements CSS3 New graphic control (PNG, SVG, and CANVAS) Enhanced JavaScript Web APIs

Mobile browsers are ahead of desktop browsers in support for these technologies

www.affineminds.com

New HTML5 Elements The new elements have names that identify what the block of content accomplishes:
Header header of Web Page Section Describes content of Page Article ASIDE Nav Figure Footer Identify content in a web page. Related but NOT part of the main content on the web page Identifies groups of links that when grouped together form navigation Identifies an image and supporting description Footer of Web Page

www.affineminds.com

<HEADER> <SECTION>LOGO</SECTION> <NAV> <ul> <li><a title=Home Page href=/home.php>Home</a></li> <li><a title=About Us href=/au.php>About</a></li> </ul> </NAV> </HEADER> <SECTION>

www.affineminds.com

<ARTICLE> <FIGURE> <LEGEND>What is Web</LEGEND> <IMG alt=Alternate Text src=pic1.jpg/> </FIGURE> </ARTICLE> <ARTICLE> <P>Para2</P> <ASIDE> <H1>Less important</H1>

www.affineminds.com

<P>But related</P> </ASIDE> </ARTICLE> </SECTION> <FOOTER> <P>Copyright All rights.</P> </FOOTER>

www.affineminds.com

CSS3 Embedding font

@font-face{ font-family: 'myCustomFont'; src: url('MYCUSTOMFONT.ttf') format('truetype'); } p { text-align: center; font-family: 'myCustomFont'; }

www.affineminds.com

CSS3 Color Control .rgba { color: rgba(255,0,0,100); }

Adding Drop Shadow Text Effects There are four elements that you can use to control the drop shadow definition. They are:
Horizontal-offset (length, required) Vertical-offset (length, required) Blur-radius (length, optional) Shadow-color (color, optional)

www.affineminds.com

.dropShadow { font-family: Segoe UI, Tahoma, Geneva, Verdana; font-size: 3cm; color: #CC3300; text-shadow: 0.25em 0.25em 2px #999; }

Working with Columns in CSS3 A challenge for any web page is to create content that is split over two or more columns on the page. Creating columns often requires using complex tables structured together. Though not strictly part of the text family of CSS www.affineminds.com

definitions, the new multicolumn layout is best when used with text on the screen. The goal of the multicolumn definition is to allow your content to be spread evenly over two or more columns. There are three parts to a column layout: The number of columns The gap between the columns Column design (optional)

.simple { font-family: Segoe UI, Tahoma, Geneva, Verdana;

www.affineminds.com

font-size: 12px; color:#444; text-align: justify; -moz-column-count: 2; -moz-column-gap: 1em; -webkit-column-count: 2; -webkit-column-gap: 1em; }

www.affineminds.com

You can add a column design between each column. The structure is:
-moz-column-rule: 1px solid #222; -webkit-column-rule: 1px solid #222;

.complex { font-family: Segoe UI, Tahoma, Geneva, Verdana; font-size: 1.2pc; color:#444; text-align: left; -moz-column-count: 3;

www.affineminds.com

-moz-column-gap: 1em; -moz-column-rule: 2px dotted #999; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 2px dotted #999; }

Adding Rounded Corners to Layers

-moz-border-radius: 10px -webkit-border-radius: 10px

www.affineminds.com

The standard is currently only in proposal stage and has not been adopted by all web browsers. For this reason, you need to add two border-radius style descriptions: one for Firefox (-mozborder- radius) and one for WebKit (-webkitborder-radius).

Adding Video to Your Web Pages

<video src=mobileVideo.mp4 ></video>

Additional functionality can be added using the following attributes in the VIDEO element: Autoplay: The video will play immediately if already downloaded in your cache (this attribute does not work on iOS devices, but does on Android)

www.affineminds.com

 Controls: A simple playback head will be added with VCR-like

play and pause controls Height and Width Loop: You can loop the video Poster: Allows you to set a placeholder image for the video
<video src=mobileVideo.mp4 autoplay controls></video>

Using JavaScript to Control the VIDEO Element

<a href=# onclick=if (video.paused) video.play(); else video.pause()>Play/Pause</a>;

www.affineminds.com

Local Data Storage

LocalStorage is essentially the ability to have an SQL-like database running in your web browser. An example of LocalStorage being used is Google's version of Gmail for the iPhone/Android. Using LocalStorage, you can view and send e-mail with Gmail without having a web connection. The e-mail is resynchronized with the mail servers when a new network connection is established. You access LocalStorage in your JavaScript by using the GlobalStorage object.

var host = location.hostname; var myLocalStorage = globalStorage[host];

www.affineminds.com

myLocalStorage.setItem(itemName, data); function deleteLocal(itemName) { myLocalStorage.removeItem(itemName); updateItemsList(); }

var items = myLocalStorage.length; for (var i=0;i<items;i++) { var itemName = myLocalStorage.key(i); var value=myLocalStorage.getItem(itemName);

www.affineminds.com

www.affineminds.com

Prepare a Separate Android Stylesheet

<link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 600px)" /> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 601px)" />

Specifically used max-width and min-width here so that you can resize your desktop browser and see the mobile version of the page Regrettably, Internet Explorer will not understand these expressions, so we have to add a conditional comment (shown in bold) that links to the desktop version of the CSS: www.affineminds.com

<link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 600px)" /> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 601px)" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="desktop.css" media="all" /> <![endif]-->

www.affineminds.com

Control the Page Scaling

<meta name="viewport" content="user-scalable=no, width=devicewidth" />

www.affineminds.com

Viewport Meta Tag Parameters and Their Effects

Parameter width height userscalable initialscale Overview Specifies the width of the viewport Specifies the height of the viewport. Specifies whether the user is permitted to adjust the scaling of the screen. Specifies the initial scaling value for the display Valid Values device-width device-height 1, yes, or true: User scaling is permitted. 0, no, or false: User scaling is not allowed. A value that indicates the scaling that will be applied when the page is initially loaded. A value of 1.0 indicates that 1 viewport pixel equates to 1 screen pixel. A value in the range of 0 to 10.0. A value in the range of 0 to 10.0.

minimumscale maximumscale

Specifies the minimum scaling that can be applied to the display Specifies the maximum scaling that can be applied to the display.

www.affineminds.com