Mobile Web Application Development (An Insight)

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

Published on February 15, 2014

Author: naveenieus

Source: slideshare.net

Description

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. http://naveenieus.in 3

http://naveenieus.in 4

http://naveenieus.in 5

http://naveenieus.in 6

http://naveenieus.in 7

http://naveenieus.in 8

http://naveenieus.in 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 http://naveenieus.in 10

MULTIPLE SCREENS UNIFIED WEB http://naveenieus.in 11

Mobile vs. Desktop http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ http://naveenieus.in 12

http://en.wikipedia.org/wiki/Cohesion_(computer_science) http://naveenieus.in 13

http://www.digitaltrends.com/wp-content/uploads/2013/02/Samsung-Smart-Tv.jpg http://naveenieus.in 14

http://core0.staticworld.net/images/article/2013/08/pavilion11-100050481-orig.png http://naveenieus.in 15

http://boygeniusreport.files.wordpress.com/2013/05/tablets-montage.jpg http://naveenieus.in 16

http://kiwicommons.com/wp-content/uploads/2011/12/smartphones.jpg http://naveenieus.in 17

http://upload.wikimedia.org/wikipedia/commons/e/e2/Responsive_Web_Design.png http://naveenieus.in 18

http://en.wikipedia.org/wiki/Mobile_Web http://naveenieus.in 19

https://www.netflix.com/?locale=en-CA http://naveenieus.in 20

Mobile Operating System • • • • • • • • Android iOS Blackberry Firefox OS Tizen Sailfish Ubuntu Touch Symbian http://naveenieus.in 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 http://naveenieus.in 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? http://naveenieus.in 23

Core Technology • HTML5 & CSS3 • JavaScript – jQuery Mobile • Package and deploy – Phonegap http://naveenieus.in 24

Tools http://naveenieus.in 25

Deploy / Distribute Applications Web Site • World Wide Web – Shared Hosting – Cloud http://naveenieus.in 26

HTML5 – What’s Gone? http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm http://naveenieus.in 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 http://www.w3.org/html/logo/ http://naveenieus.in 28

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

CSS Order of Declaration ID #header{ …. } Class .logo{ …. } Element div{ …. } http://naveenieus.in 30

CSS3 • • • • Media Queries Fluid Layouts Responsive Web Effects / Transitions http://naveenieus.in 31

http://getbootstrap.com/ http://naveenieus.in 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. http://getbootstrap.com/ 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. http://jquerymobile.com/ http://naveenieus.in 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 http://naveenieus.in 34

Q&A http://naveenieus.in 35

CODE http://naveenieus.in 36

Event Spotlight Barcamp Bangalore (Saturday, 29 March, 2014) http://barcampbangalore.org/bcb/ NSRCEL (4startups.in) – IIMB http://www.4startups.in/ http://naveenieus.in 37

http://naveenieus.in THANK YOU http://naveenieus.in 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