Tagged: HTML5
Snippet – Checking Internet Connection, No More Hanging App
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.
Single Page Apps – Local Data Store with AmplifyJS
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.
Single Page App – Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache
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.
HTML5 Tutorial – Messaging
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.
ASP.NET – Uploading Files Using Drag and Drop (Client/Server)
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.
HTML5 Tutorial – Drag and Drop with Files (Client)
![image_thumb[3]](https://devdaysdotcom.files.wordpress.com/2014/12/image_thumb31.png "image_thumb[3]")
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.
HTML5 Tutorial – Drag and Drop
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.
Introduction to Mapping with HTML5 Geolocation
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.
HTML5 Tutorial – Geolocation
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.
HTML5 Tutorial – Asynchronous Script Execution
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.
HTML5 Tutorial – Captioning video tracks
The <track> element represents a timed text file to provide users with multiple languages or commentary for videos. You can use multiple tracks and set one as default to be used when the video starts.
You can provide a transcript of the video.
This article introduces how can use WebVTT (Web Video Text Tracks) and Media Multiple Text Tracks API as part of your video.
HTML5 Tutorial – Custom Controls for Multimedia
When you display video in HTML5, you have may want to display a set of controls to the user. The HTML5 video tag has a control attribute that lets you display the controls that come with the browser.
But you may want to build custom controls using its media API, and the media events. Play, pause, and seek in the entire video, change the volume, mute, change the playback rate (including going into negative values).
This post shows how you can build a custom media player using different the media API attributes, events, and methods.
HTML5 Tutorial – Video, Audio Multimedia
HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the video element, but you may need multiple files to support the video formats.
For this demo, I’m using a video that is in the public domain, Popeye for President.
HTML5 Tutorial – Local Storage
One of the new features that you may want to use in your line of business application is local storage. We can store data locally or use cookies.
localstorage provides a way to persist data on the client side without using cookies. The localStorage attribute provides persistent storage areas for domains. It allows Web applications to store nearly 10 MB of user data, such as entire documents or a user’s mailbox, on the client for performance reasons.
HTML5 Tutorial – AppCache for Offline Apps
You can create offline applications using the Application Cache API (or AppCache) that is defined in the HTML5 Specification.
AppCache enables webpages to cache (or save) resources locally, including images, script libraries, style sheets, and more. In addition, AppCache allows URLs to be served from cached content using standard Uniform Resource Identifier (URI) notation.
Appcache was intended to let your web app run offline, no Internet connection required, but it can also be used online to dramatically decrease load times.
DevDays® 