Mobile Web Application Development (An Insight)

50 %
50 %
Information about Mobile Web Application Development (An Insight)

Published on February 15, 2014

Author: naveenieus



Why to go for Mobile Web Application Development? What technology to concentrate on?

Mobile Web Application Development (An Insight) Naveen Krishnamurthy

Disclaimer: All the logos and product names used in this presentation are registered and owned by their respective brands.

About Me → Web Technologist by profession writing web code. → Is a little ColdFusion and C# geek. → HTML5 and CSS3 follower since 2011. → Big time JavaScript fan, always jQuery ready. → Implements Transactional SQL. → NoSQL Rookie. → Cloud Explorer. 3 4 5 6 7 8 9

Agenda • • • • Key Note Mobile Operating Systems Mobile Applications Technology – HTML5 & CSS3 – JavaScript Libraries (jQuery Mobile) – Packaging Application (Phone Gap) • Tools – jQuery Mobile – Monaca • Demo • Q&A 10


Mobile vs. Desktop 12 13 14 15 16 17 18 19 20

Mobile Operating System • • • • • • • • Android iOS Blackberry Firefox OS Tizen Sailfish Ubuntu Touch Symbian 21

Mobile App • Native Mobile App – – – – Coded for specific Operating System Coded using a specific programming language Can access the phone’s hardware with ease Works only for one platform • Hybrid App – Written using Web Technology – Run inside a Native Container leveraging the browser engine but not the browser – Web to Native abstraction layer enables device hardware access 22

How and What? • • • • What is the Web Technology? What are the tools available (IDE)? How / where to deploy / distribute? What are the best practices? 23

Core Technology • HTML5 & CSS3 • JavaScript – jQuery Mobile • Package and deploy – Phonegap 24

Tools 25

Deploy / Distribute Applications Web Site • World Wide Web – Shared Hosting – Cloud 26

HTML5 – What’s Gone? 27

HTML5 – What’s New? Offline and Local Storage (App Cache, Indexed DB and File API Specifications) Multimedia 3D, Graphics & Effects (Canvas, SVG, WebGL and CSS3 3D ) Connectivity (Web Sockets) Performance & Integration (Web Workers and xmlHTTPRequest 2) Semantics (Richer tags with RDFa, microdata, and microformats) Device Access (Geo Location API) CSS3 28

How to understand CSS??? CSS  SQL for DOM select div from html; div{ font-size: 11px; font-weight: 600; } //Selector //declaration //declaration 29

CSS Order of Declaration ID #header{ …. } Class .logo{ …. } Element div{ …. } 30

CSS3 • • • • Media Queries Fluid Layouts Responsive Web Effects / Transitions 31 32

Plugin / Libraries Bootstrap Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. jQuery Mobile jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. 33

Best Practices • Design – Decide on going Native / Web / Hybrid – Structure the content • Development – Use a framework – Avoid bulk libraries – Cache AJAX data to reduce HTTP requests • UI – Write CSS for the smallest screen first – Create fluid designs – Do not mix images and text 34

Q&A 35


Event Spotlight Barcamp Bangalore (Saturday, 29 March, 2014) NSRCEL ( – IIMB 37 THANK YOU 38

Add a comment

Related presentations

Related pages

Mobile Application Development - An Insight | Devsaran

Mobile Application Development, An insight of the app development industry ... Devsaran is Web and Mobile app development company dedicated in providing ...
Read more

Insight - Web and Mobile Application Tips, Technology news

OptiSol Insight provides Web and Mobile Application Tips, website development tutorials, mobile application tutorials, e-Business strategy.
Read more

Developing Mobile Applications: Web, Native, or Hybrid ...

Developing Mobile Applications: Web ... to building and supporting mobile application development? ... Shopper Insight on ...
Read more

INSIGHT | IT Solutions

Mobile Application Development. Insight builds Mobile applications ... Web Application Development. Insight develop and ... © Insight IT Solutions ...
Read more

SharePoint Application Development: An Insight

Mobile Web App Development; ... SharePoint Application Development: An Insight. ... everyone’s experience on SharePoint application development is ...
Read more

Application Insight - Home

for Software Development. ... Application Insight develops bespoke software (websites and desktop applications) to fit YOUR exact needs ...
Read more

techinsight | web and mobile application development ...

About Us James Ng Founder, Strategist & Solutions Architect. techinsight is a boutique IT consultancy specialising in online strategy, web and mobile ...
Read more

Visual Studio Application Insights | Microsoft Azure

Web + Mobile; App Service Create ... Visual Studio Application Insights Detect, ... Visual Studio 2015 lets you search over events from within the ...
Read more

Set up web app analytics for ASP.NET with Application ...

Web + Mobile. Web + Mobile; App ... Run your application with F5 and try it out: ... Add the Application Insights Web SDK NuGet package to your ...
Read more