HTML5 – AzureDays

Snippet – Checking Internet Connection, No More Hanging App

July 22, 2014

When you are writing your single page application (SPA) may find that you need to check your connection. The idea is that you might have one set of logic for your connected app and another for when you are disconnected.

In previous posts, AppCache for Offline Apps and Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache, you learned that your Web app did not have to be online to be run. In fact, when building HTML apps for mobile devices, you are running without a connection.

So how do you check? How do you know when you can upload and download new information from the Web?

Many of the comments on StackOverflow have to do with the connection hanging. The following snippets help you work around the issue.

Continue reading “Snippet – Checking Internet Connection, No More Hanging App”

Single Page Apps – Local Data Store with AmplifyJS

June 1, 2014

You may want to use storage to store data. You can save the data your user has entered in a wizard. Or you might want to save data so you can provide an offline experience. Or you may want to store user preferences. Local storage is a good idea anytime you do not want, or need your user or your application to start all over.

AmplifyJS is a very neat library that provides a consistent API to handle client storage that works in most browsers.

Of course, you can use HTML5 Local Storage. But amplify.store supports IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android 2+ and provides a consistent API to handle storage cross-browser.

Note: Because of the JSON dependency, you need to add json2.js for support in browsers without native JSON support, including IE 5, IE 6, IE 7, Firefox 2.0 and Firefox 3.0.

Continue reading “Single Page Apps – Local Data Store with AmplifyJS”

Single Page App – Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache

May 15, 2014

As you learned in the previous post, you learned how you can load templates inline in your app using RequireJS. The next step is to load and compile a template file. And for your offline app, learn how you can cache templates. Caching saves a round trip to the server, making your application incredibly responsive.

In this tutorial we will compile, load, and cache LoDash (or Underscore) templates and then use those templates to transform data in our single page app.

The technique uses RequireJS, so there is no more dynamic loading. Templates are bundled within your code which saves some HTTP requests.

Continue reading “Single Page App – Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache”

HTML5 Tutorial – Messaging

March 29, 2014

Web browsers, for security and privacy reasons, prevent documents in different domains from affecting each other; that is, cross-site scripting is disallowed.

That means that communication between frames, tabs, and windows was restricted for security reasons. If browsers allowed you to access content loaded into other frames and tabs, site could steal information another site using scripting. So, attempting to retrieve or modify content loaded from another source raises a security exception and prevents the operation.

But there are cases where you want content from different sites to be able to communicate inside the browser, such as for mash-ups.

To meet this need, HTML5 allows Cross-Document Messaging and Channel Messaging.

In this post, you will learn:

How to send a message to an iFrame using Cross-Document Messaging.
Describe several security considerations in using Cross-Document Messaging.
How to send and receive a message using Channel Messaging.
Describe the function of ports when using Channel Messaging.

Continue reading “HTML5 Tutorial – Messaging”

ASP.NET – Uploading Files Using Drag and Drop (Client/Server)

March 27, 2014

In our last few posts, we’ve been talking about HTML5 Drag and Drop. The feature lets uses drag elements on your page and drop them onto a target.

You can use this feature for users to upload files to your server.

In this post, you’ll learn:

How you can provide HTML5 Drag and Drop
How to send files using jQuery Ajax.
Learn how to attach additional data onto the data sent to the sever
Create a generic handler in ASP.NET to receive the files.

Of course other servers can be used, such as ASP.NET MVC, ASP.NET Web API, PHP, and Node.js. I’ll provide references to sample code for other servers in the References section.

Continue reading “ASP.NET – Uploading Files Using Drag and Drop (Client/Server)”

HTML5 Tutorial – Drag and Drop with Files (Client)

March 25, 2014

In the last post, we showed you the basics of drag and drop. Drag-and-drop functionality is something that computer users have come to take for granted as “just working,” and there are a few ways to enable it within the browser.

You learned how you need to have a drag source and a drop target, and how to specify each in HTML5. And we learned how the dataTransfer object is used to send data between the drag source and the drop target.

In this chapter, we learn more about how to use Drag and Drop with files.

Continue reading “HTML5 Tutorial – Drag and Drop with Files (Client)”

HTML5 Tutorial – Drag and Drop

March 23, 2014

Drag and drop is a part of the HTML5 standard. Drag-and-drop functionality is something that computer users have come to take for granted as “just working,” and there are a few ways to enable it within the browser.

Imagine a computer or smartphone with a pointing device. — a drag operation could be like a mousedown event that is followed by a series of mousemover events, and the drop could be triggered by the mouse being released.

Continue reading “HTML5 Tutorial – Drag and Drop”

Introduction to Mapping with HTML5 Geolocation

March 20, 2014

You can use maps with HTML5 Geolocation.

In this post, you will see how to use Bing Maps and Google Maps in your HTML5 Geolocation application.

Map APIs allow you to go deeper. For example, you can:

Create pushpins
Provide infoboxes
Tile layers
Show a traffic layer
Provide turn-by-turn directions
Search
and much more.

Let’s get started.

Continue reading “Introduction to Mapping with HTML5 Geolocation”

HTML5 Tutorial – Geolocation

March 17, 2014

The HTML5 Geolocation API is used to get the geographical position of a user.

Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude.

Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device’s actual location.

Since this can compromise user privacy, the position is not available unless the user approves it.

Continue reading “HTML5 Tutorial – Geolocation”

HTML5 Tutorial – Asynchronous Script Execution

March 16, 2014

For pages using process-intensive scripts, you can get quicker page loading with the async attribute for the script element.

This enables the associated script to load and execute asynchronously with respect to the rest of the page. That is, the script loads and executes in the background while the page continues to be parsed.

Without the async (or defer) attribute, a script can block other page content from loading.

Continue reading “HTML5 Tutorial – Asynchronous Script Execution”