HTML5 Programming Cookbook HTML5 Programming Cookbook i HTML5 Programming Cookbook ii Contents HTML5 Drag and Drop 1.1 Setting up two divs 1.2 Make the elements draggable 1.3 Set up events to handle drag functionality 1.4 Completing the drop and putting it all together 1.5 Conclusion and further applications HTML5 File Upload Example 2.1 Show File(s) information 2.1.1 A single file 2.1.2 Multiple files 2.1.3 Previewing Files Upload The files 2.2.1 The HTML 2.2.2 The JavaScript 2.2.3 The PHP script Download 2.2 2.3 HTML5 Dropdown Menu With CSS3 10 3.1 Introduction 10 3.2 HTML 11 3.3 CSS 11 3.4 Download the source code 14 HTML5 Audio Player 15 4.1 The minimal example 15 4.2 Show the controls 15 4.3 Tag Attributes 17 4.3.1 Controls 17 4.3.2 Autoplay 18 4.3.3 Loop 18 HTML5 Programming Cookbook 4.3.4 4.4 4.5 4.7 Preload 18 Control the audio with Javascript 18 4.4.1 Basic Play / Pause example 18 4.4.2 The HTMLMediaElement 19 4.4.2.1 Properties 19 4.4.2.2 Methods 19 Use Media Events 20 4.5.1 4.6 iii Example 20 Playlist Example 21 4.6.1 The Specifications 21 4.6.2 The code 21 Conclusion 22 HTML5 Local Storage 23 5.1 Introduction 23 5.2 Local Storage 24 5.3 Session Storage 26 5.4 Key points 27 5.5 Download the Source Code 27 HTML5 Graphics and Animation 28 6.1 Introduction 28 6.2 Canvas element and context 29 6.3 Draw a Graph 29 6.4 Draw a Line 30 6.5 Draw Arc 30 6.6 Draw some more stuff 31 6.7 Introducing requestAnimationFrame 32 6.8 Download the source code 34 HTML5 Offline Web Application 35 7.1 The Manifest 35 7.2 Manifest Sections 36 7.3 Application Cache API 37 7.3.1 Events 37 7.3.2 Properties 37 7.3.3 Methods 37 7.4 The online / offline events 38 7.5 A Working Example 38 7.6 7.5.1 Project structure 38 7.5.2 The server.php file 38 7.5.3 The main HTML file 40 7.5.4 The JavaScript 41 Download 43 HTML5 Programming Cookbook HTML5 Geolocation iv 44 8.1 Introduction 44 8.2 Security And Accuracy 45 8.3 Weather Widget 45 8.4 getCurrentPosition and watchPosition 48 8.5 Position 48 8.6 Handling JSON 49 8.7 Download 50 8.8 Reference 50 HTML5 Form Validation 9.1 51 Introduction 51 9.1.1 and max 53 9.1.2 datalist 54 9.1.3 placeholder 55 9.1.4 autofocus 55 9.1.5 pattern 55 9.1.6 date, datetime-local,month,time,week 56 9.1.7 email 57 9.1.8 url 58 9.1.9 color 58 HTML5 Programming Cookbook Copyright (c) Exelixis Media P.C., 2015 All rights reserved Without limiting the rights under copyright reserved above, no part of this publication may be reproduced, stored or introduced into a retrieval system, or transmitted, in any form or by any means (electronic, mechanical, photocopying, recording or otherwise), without the prior written permission of the copyright owner v HTML5 Programming Cookbook vi Preface HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C) The previous version, HTML 4, was standardised in 1997 Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.) HTML5 is intended to subsume not only HTML 4, but also XHTML and DOM Level HTML (Source: http://en.wikipedia.org/wiki/HTML5) In this ebook, we provide a compilation of HTML5 based examples that will help you kick-start your own web projects We cover a wide range of topics, from graphics and animation, to geolocation and offline storage With our straightforward tutorials, you will be able to get your own projects up and running in minimum time HTML5 Programming Cookbook vii About the Author WCGs (Web Code Geeks) is an independent online community focused on creating the ultimate Web developers resource center; targeted at the technical architect, technical team lead (senior developer), project manager and junior developers alike WCGs serve the Web designer, Web developer and Agile communities with daily news written by domain experts, articles, tutorials, reviews, announcements, code snippets and open source projects You can find them online at http://www.webcodegeeks.com/ HTML5 Programming Cookbook / 59 Chapter HTML5 Drag and Drop Usability, an important part of web interface eases the way we communicate with web Many new technologies and functionalities are invented to ease the development effort as well as improve the overall way in which users interact with web HTML5 has given many things as of today to improve the browser functionalities on client side with minimum amount of scripting It provides a great way to implement drag and drop functionality in modern browsers We are going to see how it is implemented with a basic example of dragging and dropping a image from one div to another To achieve drag and drop functionality with traditional HTML4, developers would have to use complex Javascript code HTML provides a Drag and Drop API that brings support to the browser making it much easier to code up No extra plugins needed to be installed It is supported by the following major browsers: • Internet Explorer 9+ • Firefox • Opera, Chrome • Safari Note: Drag and drop does not work in Safari 5.1.7 and earlier versions 1.1 Setting up two divs We will first code two create two div boxes One div will contain the image to be dragged The other div will be the destination where the image needs to be dragged #div1, #div2 {float:left; width:280px; height:180px; margin:10px;padding:10px;border:1px solid # ← aaaaaa;} HTML5 Programming Cookbook / 59 Output for above code is two div boxes with one div box containing our image Figure 1.1: Initial divs 1.2 Make the elements draggable Now, we need to first make the image draggable Set the attribute "draggable =true" 1.3 Set up events to handle drag functionality Set the ondragstart event in the img tag to call dragInitiliaze() function as follows : The ondragstart event in img tag detects when the drag is initialized and then it calls the dragInitiate() function The dragInitiate() function, then catches the event It sets the effectAllowed value to "move" and has dataTransfer setData() method which sets the data type and the value of the dragged data HTML5 Programming Cookbook 8.2 45 / 59 Security And Accuracy When you’re talking about sharing your physical location with a remote web server, note that this can compromise user privacy, the position is not available unless the user approves it The browser will take care of this, and a message will either appear as a popup box (as shown below), or at the top of the browser (implementation is browser specific) requesting the user’s permission In case of smartphones, the relevant apps that uses GeoLocation may request the permission during installation itself Figure 8.1: Firefox InfoBar The infobar that pops up in the browser, depicts a lot of information It is non-modal and tab-specific so it will disappear while switching to another browser window or tab There is no way for a website to bypass the permission infobar The blocking nature of the infobar ensures that the website cannot determine your location before you answer As the end user, • are told which website wants to know your location • can choose to share or not to share your location • can opt to remember your choice (share or don’t share) to make this infobar disappear for ever for this website Different techniques are used to obtain the user’s location, and each technique has its own varying degree of accuracy A desktop browser is likely to use WiFi (accurate to 20m) or IP Geolocation which is only accurate to the city level and can provide false positives Mobile devices tend to use triangulation techniques such as GPS (accurate to 10m and only works outside), WiFi and GSM (Global System for Mobile) / CDMA (Code division multiple access) cell IDs (accurate to 1000m) Please refer to the reference section link that talks in details about wireless geolocation techniques 8.3 Weather Widget In this example, we will develop a simple weather widget using the HTML geolocation API and OpenWeather APIs I must admit that I did not pay much emphasis on the display aspect of the example Neither have I fully exploited the API offerings from OpenWeather API Here is a screenshot of what we are going to develop today HTML5 Programming Cookbook 46 / 59 Figure 8.2: HTML Geolocation We will start of with the html We refer to the external JavaScript and CSS and call the inital JavaScript function in body onload() different html table elements are defined and assigned a CSS style We have also defined div element inside the table and assigned a specific id so that we can overwrite the content using JavaScript We will be using the free OpenWeather API to access the weather info in JSON format We will parse the inputs and display them For more information and additional capabilities please refer to OpenWeather API link in the Reference section Let’s get started by defining the global variables The reason we have broken the URLs is that we have to build the URLs at the runtime Notice the separate static URLs for current weather, day forecast and Image URL //define the global variables //current weather URL var BASE_URL = "http://api.openweathermap.org/data/2.5/weather?"; var UrlParams = "&units=imperial&type=accurate&mode=json"; // forecast URL var Forecast_URL = "http://api.openweathermap.org/data/2.5/forecast/daily?"; var ForeCast_Params = "&cnt=5&units=imperial&type=accurate&mode=json"; // Image base URL var IMG_URL = "http://openweathermap.org/img/w/"; In the getLocation() function we will determine if Geolocation is supported HTML5 Programming Cookbook 47 / 59 if (navigator.geolocation) { If the geolocation is not supprted by the browser, display the error message } else { alert("Geolocation is not supported by this browser"); In the API there are two functions available to obtain a user’s location:getCurrentPosition and watchPosition We will discuss the difference between the functions shortly For now let’s see how they work Both of these methods return immediately, and then asynchronously attempt to obtain the current location They take the same number of arguments successCallback - called if the method returns successfully For example , getCurrentWeatherData is called errorCallback - In case we encounter error for getCurrentPosition the errorCallback (displayError) is invoked [options] - a number of options are available: a enableHighAccuracy - Defaults setting is false Setting this property to true may cause a slower response time and in the case of a mobile device, greater power consumption as it may use GPS b timeout - Default is which indicates infinite depicts the maximum length of time in milliseconds to wait for a response We set the timeout value to our computed value var timeoutVal = 10 * 1000 * 1000; a maximumAge - in Milliseconds and the default value is which means get new position object immediately It denotes the maximum age of a cached position that the application will be willing to accept navigator.geolocation.getCurrentPosition(getCurrentWeatherData, // successCallback displayError, { //errorCallback enableHighAccuracy : true, // high accuracy timeout : timeoutVal, // in milliseconds maximumAge : // in milliseconds }); Inside our error callback function, we handle the error graciously by converting the return code to a simple error message function displayError(error) { var errors = { : ’Permission denied’, : ’Position unavailable’, : ’Request timeout’ }; alert("Error: " + errors[error.code]); } Let’s summarize the steps : • Determine if Geolocation is supported • If supported, run the getCurrentPosition() method If not, call the errorcallback(displayError) • If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter ( getCurrentWeatherData) • The getCurrentWeatherData() function uses the position object for further processing HTML5 Programming Cookbook 8.4 48 / 59 getCurrentPosition and watchPosition The main difference between getCurrentPosition and watchPosition is that watchPosition keeps informing your code when the position change, thereby updating the user’s position This is very useful if you want to track the movement of your end user like developing a driving direction apps On the other hand the getCurrentPosition is a once off The watchPosition method return watchID which can be used to call the clearWatch when you want to stop the position constantly being updated 8.5 Position When the user’s position is returned, it is contained within a Position object which contains a number of properties Figure 8.3: Position If we are able to obtain a Position object we will use the relevant properties to form the URL as shown below var WeatherNowAPIurl = BASE_URL + "lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + UrlParams; var WeatherForecast_url = Forecast_URL + "lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + ForeCast_Params; In order to call the OpenWeather API we will use the XMLHttpRequest object is used to exchange data with a server behind the scenes When a request to a server is sent, we want to perform some actions based on the response.The onreadystatechange event is triggered every time the readyState changes It stores a function (or the name of a function) to be called automatically each time the readyState property changes The readyState property holds the status of the XMLHttpRequest Following are the possible values for readystate: • 0: request not initialized HTML5 Programming Cookbook 49 / 59 • 1: server connection established • 2: request received • 3: processing request • 4: request finished and response is ready The status property returns 200: "OK" or 404: Page not found When readyState is and status is 200, the response is ready We are taking the JSON(Java Script Object Notation) responseText and parsing it before calling the Parse() function that takes cares of displaying the content from the JSON object var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == && xmlhttp.status == 200) { var JSONobj = JSON.parse(xmlhttp.responseText); Parse(JSONobj); } } Now you can use the open annd send properties of XMLHttpRequest object to call the API as shown below xmlhttp.open("GET", WeatherNowAPIurl, true); xmlhttp.send(); 8.6 Handling JSON To access the JSON object in JavaScript, parse it with JSON.parse(), and access it via “.” or “[]” To refresh our memories JSON is similar to XML as it is "self describing" , hierarchical and can be fetched using XMLHttpRequest and parsed with many programming languages However, JSON doesn’t use a end tag, shorter in size and permits usage of arrays Unlike XML, JSON can use JavaScript and doesn’t need a XML parser to be parsed The data in JSON is name/value pairs separated by commas.Curly braces hold objects while Square brackets hold arrays.Here is an example of JSON response we got back from OpenWeather API call { "cod": "200", "message": 0.3399, "city": { "id": 4945840, "name": "Northborough", "coord": { "lon": -71.641182, "lat": 42.319538 }, "country": "US", "population": }, "cnt": 5, "list": [{ "dt": 1424970000, "temp": { "day": 24.73, "min": 18.86, "max": 25.9, "night": 18.86, "eve": 21.69, "morn": 20.59 }, "pressure": 1009.86, HTML5 Programming Cookbook 50 / 59 "humidity": 51, "weather": [{ "id": 803, "main": "Clouds", "description": "broken clouds", "icon": "04d" }], "speed": 4.02, "deg": 24, "clouds": 76 }, Here is an example of how we have parsed the JSON response // current Location document.getElementById("location").innerHTML = "Country :" + obj.sys.country + "" + "City :" + obj.name + "" + "Latitude:" + obj.coord.lat + "" + "Longitude:" + obj.coord.lon + ""; // current weather document.getElementById("weatherNow").innerHTML = " " + " Condition:" + obj.weather[0].description + "" + "Temp:" + obj.main.temp + " F" + "Humidity:" + obj.main.humidity + " hPa " + "Cloudiness:" + obj.clouds.all + "% " + "Wind:" + obj.wind.speed + " mps "; As mentioned earlier, I have only touched the tip of the iceberg here Please refer to the API documentation from OpenWeather and feel free to experiment with the various API functions 8.7 Download Download: You can download the full source code of this example here: Geolocation Example 8.8 Reference • Wireless Geolocation Techniques A Survey • OpenWeather API HTML5 Programming Cookbook 51 / 59 Chapter HTML5 Form Validation 9.1 Introduction HTML5 has introduced a lot of changes welcomed by developers, including adding additional types of form input elements that helps in form processing activities like validation Validating web forms has always been a painful task for many developers Performing client side validation in a user-friendly as well as developer-friendly way is really hard Furthermore informing users about the validation error in a pleasant way is a tedious task Before HTML5 there was no means of implementing validation natively; therefore, developers resorted to a variety of JavaScript based solutions Let’s get started with some coding using the new and exciting features of HTML5 Lot of these features are dependent on a specific browser versions The version supports are getting updated every day We have tried to present the features (that we intend to use) versus the browser version in the example in a table Figure 9.1: Comparison HTML5 Programming Cookbook 52 / 59 Here is a screenshot of what we we will develop today Figure 9.2: HTML Validation Note how the elements are color coded depending on whether they are required or not Here is how we did it First mark the element in html as required Then use a style to color code the required fields input:required { background: hsl(180, 50%, 90%); border: 1px solid #999; } If you don’t fill out a required field and try to submit, you will get a prompt with the error as shown below HTML5 Programming Cookbook 53 / 59 Figure 9.3: HTMLRequired 9.1.1 and max In HTML5 the attribute together with the max attribute to create a range of legal values The attributes works with the following input types: number, range, date, datetime, datetime-local, month, time and week Let’s look at few interesting things before we look at the attributes Age: The associated label tag has for attribute for the label tag matches up with the id attribute of the associated input tag On top of the fact that the label is helping to give meaning to the input controls, it also means that if you click the label, the associated input tag receives the focus They also help with accessibility, as the text in the label will be read out to screen reader users: This is old trick, thought that I though is wort mentioning Another thing that we did here was to have , providing context-sensitive help when field it describes receives focus Again this trick is in addition to the feature placeholder feature that we will look at a little bit later Age: Format: Number between 18 and 75 We have a little css style element that defines the way we view the span help { display: none; font-size: 90%; } input:focus+.help { display: inline-block; } Here is the screenshot of validation error for and max attributes: HTML5 Programming Cookbook 54 / 59 Figure 9.4: HTML and max 9.1.2 datalist A datalist element gets an ID attribute and contains numerous OPTION elements, just as a element would: Once the datalist element is in place, a list attribute gets added to an element which refers to the list id In a nutshell, the datalist tag is used to provide an "autocomplete" feature on element Please see the screenshot of datalist usage below: HTML5 Programming Cookbook 55 / 59 Figure 9.5: DataList 9.1.3 placeholder The ability to set placeholder text in an input field is new and welcome addition to Html5 webforms The placeholder attribute can only contain text, not HTML markup Placeholder text is displayed inside the input field as long as the field is empty When you click on (or tab to) the input field and start typing, the placeholder text disappears 9.1.4 ← autofocus HTML has introduced a new Boolean attribute called autofocus attribute on all webform controls As soon as the page loads, it moves the input focus to a particular input field See the example below: 9.1.5 pattern This attributes helps the developer to specify a JavaScript regular expression for the field’s value to be checked against Hence we can use pattern to implement specific validation like phone number, product code, zip code etc The pattern attribute works with the following input types: text, search, url, tel, email, and password See the example code below Here is screenshot of validation error if you don’t enter the field in the expected pattern: HTML5 Programming Cookbook 56 / 59 Figure 9.6: HTML Pattern 9.1.6 date, datetime-local,month,time,week HTML5 finally defines a way to include a native date picker control without having to script it yourself In fact, it defines kinds of them: date, month, week, time, datetime-local Below is screenshot of datepicker included in HTML5: HTML5 Programming Cookbook 57 / 59 Figure 9.7: Date Picker 9.1.7 email The input type as email is used for input fields that should contain an e-mail address Depending on browser support, the e-mail address can be automatically validated when submitted Here is a screenshot of an error shown if you not fill the email in the correct way Some smartphones recognize the email type, altering their virtual keyboard to the keyboard to match email input Figure 9.8: HTML Email Validation HTML5 Programming Cookbook 9.1.8 58 / 59 url The is used for input fields that should contain a URL address Most modern desktop browsers simply render type="url" like a regular text box, so users won’t even notice until they submit the form Depending on browser support, the url field can be automatically validated when submitted Some smartphones like iPhone recognize the url type, alters its virtual keyboard and adds ".com" a period, a forward slash, to the keyboard to match url input Here is a screenshot of validation error for url Figure 9.9: HTML URL Validation 9.1.9 color The is used for input fields that should contain a color You will get a color picker if your browser supports This has not much of a usage for validation.I thought of mentioning it as the feature is pretty cool HTML5 Programming Cookbook 59 / 59 Figure 9.10: HTML Color Picker Download: You can download the full source code of this example here: HTML5Validation