HTML5

HTML5 – Bye Bye ‘WebSQL’/’SQLite’ – Welcome ‘IndexedDB’

December 18, 2012 All, ANDROID, Community, CSS, CSS 3, HTML, HTML5, IE, IE10, Internet Explorer 10, Internet Explorer 9, iOS, iPhone, JavaScript, JQuery Mobile, KnowledgeBase, Mobile-Development, MSDN, Web, Windows Phone, Windows Phone 8 No comments

Since November 18, 2010, the W3C announced that Web SQL database(Sqlite) is a deprecated specification. This is a recommendation for web developers to no longer use the technology as effectively, the spec will receive no new updates and browser vendors aren’t encouraged to support this technology. The new alternative is IndexedDB which is already available on Chrome 12+ and Firefox 5+, and, soon, in IE 10 as well.

The new web database standards adoption progress report as per Html5Test.com – how standards setting can work well.

  • WebKit browsers originally shipped a copy of the SQLite — an embedded relational database — and then proposed “WebSQL” as a specification to standardize it.
  • Mozilla objected to its standardization on the grounds that the SQL 92 standard was a poor basis for a web standards technology, and that an implementation (SQLite) shouldn’t be the basis for standard.
  • As a result, WebSQL standardization was abandoned in favor of a new database standard, IndexedDB which is now the standard database of record for all major browsers.
  • Firefox, IE and Chrome now support IndexedDB on the desktop.
  • Chrome for Android is the first browser to support it on mobile devices.
Category WebSQL IndexedDB
Advantages A real, relational database implementation on the client (SQLite). * Allows fast indexing and searching of objects, so in a web application scenario, you can manage your data and read/write it fast.
* A NoSQL database that let you work with your JavaScript objects and indexing them based on your application needs.
* Works in asynchronous mode with moderately granular locking per transaction. This allows you to work inside the event-driven module of JavaScript.
Disadvantages * The spec is deprecated.
* Overhead of SQL language you need to master and transform your JavaScript objects into relational schema
* Not object driven
Harder to understand if you are coming from the world of relational databases.
Location Tables contain columns and rows objectStore contains Javascript objects and keys
Query Mechanism SQL Cursor APIs, Key Range APIs, and Application Code
Transaction Lock can happen on databases, tables, or rows on ‘readwrite’ transactions Lock can happen on database ‘versionchange’ transaction, on an objectStore ‘readonly’ and ‘readwrite’ transactions.
Transaction Commits Transaction creation is explicit. Default is to rollback unless we call commit. Transaction creation is explicit. Default is to commit unless we call abort or there is an error that is not caught.

Ref Link:

http://www.w3.org/TR/IndexedDB/

http://www.html5rocks.com/en/tutorials/webdatabase/websql-indexeddb/

http://www.steveworkman.com/html5-2/standards/2011/the-limitations-of-websql-and-offline-apps/

http://www.html5rocks.com/en/tutorials/indexeddb/todo/

http://html5test.com/compare/feature/storage-sqlDatabase.html ( WebSQL – Current Support on browsers)

http://html5test.com/compare/feature/storage-indexedDB.html ( IndexDB – Current Support on browsers)

Free HTML5 Certification and Training Offer from Microsoft–Prove your HTML5 Programming Skills for free

December 1, 2012 All, Certification, Community, CSS, CSS 3, DevLabs, Help Links, HTML, HTML5, JavaScript, jQuery, KnowledgeBase, Microsoft, Microsoft Learning, MSDN, StyleSheets, VisualStudio, VS2012, Web, Web 2.0, Windows, Windows 8, Windows 8 apps development, Windows Store Development, WinJS 8 comments

Microsoft few month back launched a free HTML5 Certification program for exam – 070-480 – Programming in HTML5, CSS3 and JavaScript. To prepare for this exam you have set of nice Training materials also available through http://www.microsoftvirtualacademy.com. Lets go through in detail How you can utilize this exam.

When you pass Exam 70-480: Programming in HTML5 with JavaScript and CSS3, you complete the requirements for the following certification(s):

  • Programming in HTML5 with JavaScript and CSS3 Specialist

Also Exam 70-480: Programming in HTML5 with JavaScript and CSS3: counts as credit toward the following certification(s):

  • MCSD: Web Applications
  • MCSD: Windows Store Apps using HTML5

FREE TRAINING RESOURCES FOR 70-480!  & HOW TO PREPARE FOR THIS EXAM

  1. Attend the training session https://www.microsoftvirtualacademy.com/tracks/developing-html5-apps-jump-start
  2. Complete the training session. Now you will have enough knowledge to write the exam. But remember to practice what you have learnt.
  3. Additionally Prepare for your certification exams and boost your dev skills with:
    Kraig Brockschmidt’s FREE e-book: "Programming Windows 8 Apps with HTML, CSS, and JavaScript" .
  4. You can download the eBook in PDF format here: http://go.microsoft.com/FWLink/?Linkid=270056 (17.9 MB)

    EPUB format is here: http://go.microsoft.com/FWLink/?Linkid=272592 (37.3 MB)

    MOBI format is here: http://go.microsoft.com/FWLink/?Linkid=272591 (69.5 MB)

    Download the Updated Companion Content Set for the Book  (source code samples) (59MB)

FREE EXAM VOUCHER FOR 70-480!

  • Register now to take Exam 70-480 Programming in HTML5 with JavaScript and CSS3 for FREE!
  • Just use this voucher code when scheduling your exam: HTMLJMP (voucher code available through 3/31/2013 or while supplies last.)

HOW TO TAKE THE EXAM

  • Go to www.register.prometric.com and follow the steps to schedule Exam 70-480: Programming in HTML5 with JavaScript and CSS3 at a testing center near you.
  • Use the voucher code HTMLJMP to get the free exam.

That’s it you are an HTML5 Programmer or a beginner and you want to prove your HTML5 development skills – then this is the right time. You will have the time till 03/31/2013 and till stocks last. Happy Programming.. Remember sharing is caring, so share with your friends.Smile

Courtesy: Microsoft Learning & Microsoft Virtual Academy

Must Read – Unleash the power of HTML 5 Canvas for gaming

May 15, 2012 All, CSS 3, Gaming, HTML, HTML5, JavaScript, KnowledgeBase, social gaming, Web No comments

An excellent article discusses about using HTML5 canvas for building browser based games using only HTML and Javascript. The <canvas> element is used to draw graphics, on the fly, on a web page.

The power of HTML5 Canvas is that you can draw any 2D or 3D content within the canvas region using powerful HTML5 Javascript API’s.

Recommend reading article which would give you good understanding on HTML5 Canvas.

http://blogs.msdn.com/b/eternalcoding/archive/2012/03/22/unleash-the-power-of-html-5-canvas-for-gaming-part-1.aspx

Some other resources for learning

http://www.w3schools.com/html5/html5_canvas.asp

http://www.html5canvastutorials.com/

 

jQuery Mobile 1.1.0 Final Released!

April 15, 2012 All, HTML, HTML5, JavaScript, jQuery, JQuery Mobile, Mobile Frameworks, mobile web, Mobile-Development No comments

Jquery team has released final version of Jquery Mobile 1.1.0. 

jQuery Mobile is a touch-optimized web framework (additionally known as a JavaScript library or a mobile framework) currently being developed by the jQuery project team. The development focuses on creating a framework compatible with a wide variety of smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The JQuery Mobile framework is compatible with other mobile app frameworks and platforms such as PhoneGap, Worklight and more.

[Wikipedia]

Jquery Mobile 1.1.0 improvements  are true fixed toolbars, completely re-vamped animated page transitions and AJAX loader, refined form element design and feature set, and improved documentation

Read through the release announcement http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/  for more details on this updated release.

Mobile Application Development

April 7, 2012 All, ANDROID, CSS 3, HTML, HTML5, iOS, iPhone, JavaScript, JQuery Mobile, Mobile Frameworks, Mobile SDK, mobile web, Mobile-Development, Windows Mobile, Windows Phone, Windows Phone 7 1 comment , , , , , , , , , , , , , ,

Mobile Applications are rapidly developing segment in the global mobile sector. Developing mobile applications targeting different mobile platforms such as Windows Phone, iOS, Android, Blackberry and Bada(Samsung’s Proprietary OS) is the trend setter now.

Quoting from Wikipedia

Mobile application development is the process by which application software is developed for small low-power handheld devices such as personal digital assistants, enterprise digital assistants or mobile phones or smart phones. These applications are either pre-installed on phones during manufacture, downloaded by customers from various mobile software distribution platforms, or web applications delivered over HTTP which use server-side or client-side processing (e.g. JavaScript) to provide an "application-like" experience within a Web browser.

[Wikipedia]

Why is it so different from other application development?

Or

Why do we need to give special care when doing mobile development?

Mobile devices have certain limitations in terms of hardware, they have limited screen display, limited space for applications to operate and network capabilities. These limitations will vary in different models as the Mobile ecosystem is very large and there is innumerous amount of devices in the world. So we need to give special care in developing the mobile applications ensuring the compatibility across all the platforms.

Some of the things we need to consider when we do mobile development are:

  • Small screen size and mobile ecosystem – This makes it difficult or impossible to see text and graphics dependent on the standard size of a desktop computer screen.
  • Lack of windows/ multi-tasking – On a desktop computer, the ability to open more than one window at a time allows for multi-tasking and for easy revert to a previous page. Historically on mobile web, only one page can be displayed at a time, and pages can only be viewed in the sequence they were originally accessed. Latest mobile platform releases such as iOS, Android and Windows Phone are supporting multi tasking capability, which allows you to run more than one applications parallel, yet only one application can be displayed on the screen.
  • Navigation – Most mobile devices do not use a mouse like pointer, but rather simply an up and down function for scrolling or touch inputs, thereby limiting the flexibility in navigation.
  • Hardware and Resource limitation – all the upcoming mobile devices are having Dual Core or Quad core mobile processors with decent amount of memory. But still if you need you device to function well and be responsive, you should develop application in such a way it will be using low memory foot print.
  • Targeting Or Supporting wide variety Mobile Platforms/ Execution environments – this is the most complicated or important feature set we should be taking in to consideration when developing an application. Android, iOS, BlackBerry, HP webOS, Symbian OS, Bada from Samsung, and Windows Mobile support typical application binaries as found on personal computers with code which executes in the native machine format of the processor (the ARM architecture is a dominant design used on many current models).

Also read this article on 7 Limitations when designing for mobile: http://baymard.com/blog/mobile-design-limitations 

For Technical point of view we can differentiate mobile applications in to three categories

1. Native Applications

Native applications developed against native platform APIs and It would be having full(or limited for some platforms) access to the device capabilities. Each of the platforms for mobile applications also has an integrated development environment which provides tools to allow a developer to write, test and deploy applications into the target platform environment.

Examples are using Applications developed using Native/Platform Mobile SDK’s such as iOS SDK, Android SDK, Windows Phone SDK etc.  Windows Mobile, Android, HP webOS and iOS offer free SDKs and integrated development environments to developers. These applications will be able to utilize or interact with all device capabilities.

 

Five reasons for developing Native Applications:

  • Performance
  • Offline Mode
  • Findability / Discoverability ( through a central location such as Apple’s AppStore , Google’s Market, Windows Phone Market etc)
  • Device Attributes
  • Monetization

The disadvantage is obviously the development cost. No two mobile platforms can share the same mobile application, and there are too many Mobile operating systems (or platforms) existing in the market. If you develop a mobile application to market it widely, you need to develop that in  Symbian, Mac iPhone, Android, Blackberry and Windows mobile.

2. Mobile Web Applications  / Browser based Applications

Mobile Web applications are web sites that are scaled down/optimized to display on a mobile web browser. Mobile web applications are developed in such a way keeping in mind less payload delivery per each request. These applications are typically a scale down version of actual website which you can browse over any desktop browser such as Internet Explorer, Chrome, Firefox and Opera.

Every action mobile web application makes a round trip to server.

The advantages of having mobile web application is that:

  • Server Driven – we have full control on the website. and we can customize it any time, so that user will get the latest look and feel.
  • Targeting multiple platforms & connectivity – most of the mobiles and smartphones have a browser.  One-third of humankind currently has access to the Internet through a mobile device. That makes it easy to deliver our applications in any platform.
  • It enables services to take advantage of mobile device capabilities such as clicking on a phone number to call it or add it to the device address book. It can provide location-sensitive content. Location technologies can enable location-sensitive information be provided to a user. This can reduce the steps required for the user to reach useful content, and so makes it accessible with the least amount of effort.
  • For users, they don’t have to download an application or any maintenance updates, but instead “call up” a URL via their mobile browser which instantly delivers the most up-to-date application to their device.
  • Cross platform compatibility.
  • low development cost.

and the disadvantage is the bandwidth limitations and the limitations of Mobile websites, which does not access your Phone’s components like your Address book, Camera, etc.

The Mobile Web refers access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone, a feature phone or a tablet computer, connected to a mobile network or other wireless network.

Traditionally, access to the Web has been via fixed-line services on large-screen laptops and desktop computers. The shift to mobile Web access has been accelerating with the rise since 2007 of larger multitouch smartphones, and of multitouch tablet computers since 2010.

Both platforms provide better Internet access and browser- or application-based user Web experiences than previous generations of mobile devices have done.

Mobile Web access today still suffers from interoperability and usability problems. Interoperability issues stem from the platform fragmentation of mobile devices, mobile operating systems, and browsers. Usability problems are centered around the small physical size of the mobile phone form factors (limits on display resolution and user input/operating). 

[Wikipedia]

3. Hybrid Mobile Applications

Hybrid Mobile Applications are Applications that use BOTH browser interfaces and native mobile components. With HTML5 and JavaScripts, now the browsers are becoming capable of accessing a phone’s built in features like contacts, camera etc.

There are mobile frameworks based on HTML5 and JavaScript’s that would be able to access the device features such as Accelerometer, Compass, Contacts, Camera and device file system etc. Some popular such mobile frameworks are PhoneGap, Appcelerator’s Titanium etc. These frameworks helps in developing applications that would able to target most of the mobile platforms such as “iOS”, “Android”, “Windows Phone”, “Symbian” and “Blackberry”.

Appcelerator Titanium is a platform for developing mobile, tablet and desktop applications using web technologies.

Key to successful Hybrid Apps:

  • Make the experience feel like a native application.
  • Take advantage of the enhanced features.
  • Don’t simply release a hybrid version of the mobile web site.
  • Optimize performance

 

Mobile world is growing and you can see lots of opportunities for innovation. If you are a fan of building mobile applications go ahead and develop something that is in your dreams and leave it over to the rest of the world to carry forward.

 

Resources for Developing mobile applications:

PhoneGap (was called by the name Apache Callback, but now Apache Cordova) is an open-source mobile development framework produced by Nitobi, purchased by Adobe Systems. It enables software programmers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of lower-level languages such as Objective-C. The resulting applications are hybrid, meaning that they are neither truly native (all layout rendering is done via the webview instead of the platform’s native UI framework) nor purely web based (they are not just web apps but packed for appstore distribution, and have access to part of the device application programming interface).

http://phonegap.com/ 

 

Appcelerator Titanium is a platform for developing mobile, tablet and desktop applications using web technologies. Appcelerator Titanium is developed by Appcelerator Inc.

Appcelerator Titanium Mobile is one of several phone web based application framework solutions allowing web developers to apply existing skills to create native applications for iPhone and Android. Yet, while using the familiar JavaScript syntax, developers will also have to learn the Titanium API, which is quite different from familiar web frameworks such as jQuery.

http://www.appcelerator.com/ 

 

Android Application Development: http://developer.android.com/index.html

Apple iOS Application Development: https://developer.apple.com/

Windows Phone Development: http://create.msdn.com/en-US/

http://msdn.microsoft.com/en-us/library/ff402535(v=vs.92).aspx

Blackberry Application Development:  https://bdsc.webapps.blackberry.com/devzone/

Bada Development: http://developer.bada.com

Symbian Development: http://www.developer.nokia.com/Devices/Symbian/

HP WebOS Development: https://developer.palm.com/

 

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets

http://jquerymobile.com/ 

Sencha Touch: Sencha Touch was the first HTML5 mobile JavaScript framework for web applications that feel native on Android, BlackBerry, and iOS.
http://www.sencha.com/products/touch 

and more…

and some interesting learning resources

http://baymard.com/blog/responsive-web-design

WebSockets endpoint/transport support with WCF 4.5 *New*

April 1, 2012 .NET, All, Communication, HTML5, Microsoft, VisualStudio, VS11, WCF, Web, Web Services, Web Sockets No comments

WebSocket is a web technology providing for bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket. The WebSocket API is being standardized by the W3C, and the WebSocket protocol has been standardized by the IETF as RFC 6455.

WebSocket is designed to be implemented in web browsers and web servers, but it can be used by any client or server application. The WebSocket protocol makes possible more interaction between a browser and a web site, facilitating live content and the creation of real-time games. This is made possible by providing a standardized way for the server to send content to the browser without being solicited by the client, and allowing for messages to be passed back and forth while keeping the connection open. In this way a two-way (bi-direction) ongoing conversation can take place between a browser and the server. A similar effect has been done in non-standardized ways using stop-gap technologies such as comet.

In addition, the communications are done over the regular TCP port number 80, which is of benefit for those environments which block non-standard Internet connections using a firewall. WebSocket protocol is currently supported in several browsers including Firefox and Google Chrome. WebSocket also requires web applications on the server to be able to support it.  [ information reference: Wikipedia ]

Web Sockets endpoint support in WCF 4.5 and .NET Framework 4.5

With upcoming WCF 4.5 – Microsoft has added support for exposing your WCF Services over Web Sockets. Two new bindings have been added to support communication over a WebSocket transport.

1. NetHttpBinding   – A binding designed for consuming HTTP or WebSocket services that uses binary encoding by default.

2. NetHttpsBinding  – A secure binding designed for consuming HTTP or WebSocket services that uses binary encoding by default.

* Using the above bindings now we can create Services listening over Web Sockets using WCF 4.5.

** Web Sockets hosting support has been introduced with IIS 8.0 in Windows 8 and Windows Server 8 beta.

[ information reference: MSDN ]

More References:

http://en.wikipedia.org/wiki/WebSocket 

http://websocket.org/