Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course surveys the core principles and techniques essential to building web sites for mobile devices. Author Joe Marini introduces the mobile context, sheds light on its unique coding requirements, and discusses interface design techniques that enhance existing sites for mobile viewing. The course shows how to approach designing for mobile form factors such as smaller screens and finger-based interaction, along with how to incorporate CSS3 and HTML5 capabilities, such as geolocation, local storage, and media queries.
As I mentioned a couple times previously, developing mobile web applications has a lot of performance implications, and one of the ways to improve the performance of your mobile web application is to use data URIs to represent certain kinds of data in your web page, and that's what we are going to look at in this example. Data URIs represents binary data--or well, really any data--in a page as an encoded text string, and it's commonly used to reduce HTTP requests for resources such as images.
The general format looks like this. Instead of HTTP, you have the word 'data' followed by a colon and then followed by a mime-type, which is the type of data, such as image/JPEG or image PNG or something like that, then followed by an optional parameter called Base64, which indicates whether or not the data is Base64 encoded, and then you have the data which is included as a text string. So the best way to visualize this is to imagine you had an image that looks something like this.
This image would typically be represented by a bunch of binary bytes located on disk somewhere. And the way that you would normally include this in your web page is to give the browser a URL to this image. The browser would then download the image and display it in the page somewhere. Using data URIs, you'd represent the image like this instead. So instead of having http:// the URL to the image, you would simply represent the image itself as data inside the web page.
And this reduces the need to fetch images from a remote server using HTTP requests, which can take a long time. Data URIs are supported by most modern mobile browsers; in fact, all the major modern mobile browsers that use HTML5, such as Opera, Android, iPhone, Windows Phone, BlackBerry, et cetera, are able to support this now. The advantages of using data URIs are first, you minimize the HTTP requests sent to the server, which results in better performance.
Files that are associated with media elements can be stored as a single file, so you can embed images directly into a web page and then manipulate that the web page as one single entity, without having to worry about links to external images. It also avoids security warnings when data that it is accessed from a non-HTTPS domain is accessed from an HTTPS page. You've probably seen this before. You try to get some data, such as a logo or something, that's not from an HTPPS domain, and the browser throws up a little security warnings saying, "Hey, you know this data is not coming from secure web site," so this avoids that.
But for things like images, this is a pretty minor concern. Data URIs can be used where a normal URL would be used instead. So for example, in HTML, instead of doing something like this where you have image and then the source has some URL to it, you would just use this instead. So you can see that we've replaced the http with the data:, and then here's the mime- type image/png, and the Base64, so it's Base64 encoded, and here is the string that it results in. You can also do the same thing in CSS.
So for example, in CSS rule, instead of saying background-image and using a URL to an image, you would simply use the data representation inside of the URL rule inside the CSS rule. Data URIs can be generated automatically on the server side too, and here is a quick little example of that in PHP. Now if you don't know PHP, don't worry about it. Just follow along with me here. Essentially, what's happening is this function called CreateDataURI is going to take an image file and a mime- type and convert it into a data URI.
And the way you would use this is inside your image tag, inside the source, you'd just call this PHP function that creates a data URI, which spits out data along with a mime-type and the Base64, and it simply gets the contents of the file using a PHP function called get file contents and then calls a Base64 Encode function on the file contents, which gives you the string back right here, and then that encoding string would be appended at the end down here. You might be asking yourself, how do I convert an image into a data URI? There are all kinds of resources on the web that are free and available to you.
All you need to do is just do a search on 'convert image to data URI' and you'll get a whole bunch of web sites that will take an image, upload it for you, and give you a string back. Okay, so let's go ahead and see how this works in code. So here I have my dataURI_start file, and I've got my Snippets.txt file right here, and I am going to go ahead and scroll down to the Data URI section, and that is right here. And let's take a look at this file in the browser first, so you can see what's happening.
So I am just going to bring up dataURI_ start, and you can see that I am using the logo for our Explorer California site. And in this case we have the image included as a traditional linked image. You can see that that's where this image is included right here, traditional URL link. So now we are going to include the same image as a data URI. So I am going to go back over here, and this is the data URI that I am going to use. And if I scroll to the right, you can see it's pretty large. It's about 4k. So all this data right here is part of the image, and it goes all the way to the end here.
You can see, so it's pretty long. So I am just going to copy that. And we are back to dataURI_start, and I am going to copy this same down here, and save. Now we are back to the browser, and I'm going to refresh, and you can see that this image is now included as a data URI. The only difference is this is not an external file, whereas this is. Okay, so let's go ahead and try that out in the emulators, and to do that I am going to have to copy this over to my web server.
So I am going to copy dataURI_start. All right! So let's go ahead and go there and see if it worked. And you can see that it works here. So we have our traditional image and the dataURI. Let's try it in the Opera browser, and here it is in Opera. You can see that that worked as well. And last but not the least, let's try it out in the Android browser, and here we have the same result.
In the Android browser, you can see the regular image there and the dataURI there. So by using dataURIs, you can greatly enhance the performance of your web applications by including media elements directly in the page, such as images.
There are currently no FAQs about Mobile Web Design & Development Fundamentals.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.