Evelina Buiciag HTML5 APPLICATIONS DEVELOPMENT MANUAL Iași Romania 2016 ISBN: 978-973-0-24454-0 The use of this material is reserved only for private use It is forbidden and may be caught and multiplication law public use because constitutes a violation of copyright law Copywriting @ 2017 Evelina Buiciag, AnySolution All rights reserved Table of content TABLE OF CONTENT - INTRODUCTION TO HTML5 APPLICATION - UNDERSTAND THE PLATFORM FUNDAMENTALS - CREATING APPS - PACKAGING AND THE RUNTIME ENVIRONMENT - APPLICATION STATE - TOUCH INTERFACES AND GESTURES - DEBUGGING AND TESTING - VALIDATING HTML5 CODE - PUBLISHING AN APPLICATION 10 - HTML ESSENTIALS 11 - ORGANIZE CONTENT 12 - INPUT AND VALIDATION 13 - CSS INTRODUCTION 14 - CSS SINTAX 15 - MANAGING CONTENT 16 – LAYOUTS 17 - MANAGING TEXT FLOW 18 - MANAGING THE GRAPHICAL INTERFACE 19 - BUILDING INTERACTIVE APPLICATIONS 20 - CREATING AND USING FUNCTIONS AND VARIABLES IN JAVASCRIPT 21 - JQUERY AND OTHER THIRD-PARTY LIBRARIES 22 - OBJECTS IN JAVASCRIPT 23 - DOCUMENT OBJECT MODEL (DOM) 24 - LOCATING AND ACCESSING ELEMENTS 25 - LISTENING AND RESPONDING TO EVENTS 26 - CHANGING, ADDING AND DELETING ELEMENTS 27 - CODING ANIMATIONS BY USING JAVASCRIPT 28 - WORKING WITH IMAGES, SHAPES, AND OTHER GRAPHICS 29 - TRANSMITTING DATA 30 - LOADING AND SAVING FILES 31 - RESPONDING TO THE TOUCH INTERFACE 32 - CODING ADDITIONAL HTML5 APIS 33 - ACCESSING DEVICE AND OPERATING SYSTEM RESOURCES 34 - BOOTSTRAP 35 – WEATHER APPLICATION DEVELOPMENT BILBLIOGRAFIE - Introduction to HTML5 Application Hi, my name it is AnySolution and I will be your mentor throughout this HTML5 APPLICATIONS DEVELOPMENT MANUAL HTML5 is the latest HTML standard and a family of technologies that includes HTML, CSS, and JavaScript Although the HTML5 standard won’t be finalized for a few years, most modern Web browsers already support HTML5 elements HTML5 app development for Web and mobile device browsers is well underway Hyper Text Markup Language(HTML) is the language with which the content of a website is made (paragraphs, images, text, etc.) Cascade Style Sheet(CSS) is the language used to design a website (colors, fonts, backgrounds, etc.) JavaScript is a scripting language (a programming language that uses scripts and requires no compiler) that adds interactivity to Web pages Although you can use HTML5, CSS3, and JavaScript to create Web pages, you can also use the combination to develop client applications (apps) that run-on touch-enabled devices like PCs, slates, tablets, and smartphones Essentially, the same technologies developers use to build Web pages are now beginning used to build applications that run on different devices - Understand the platform fundamentals Although HTML5 is HTML, it has been developed by the W3C to work directly with CSS3 and JavaScript to allow developers and designers the ability to create web applications that will also work on touch-enabled devices and easily adapt to smaller screens In addition, HTML5, CSS3, and JavaScript are all considered platform-independent technologies and therefore can run regardless of the operating system if the operating system has a web browser For example, Windows and Windows Phone have the Internet Explorer browser, Mac OS and iPhone have the Safari browser, Linux OS has the Firefox browser and Android phones have the Google Chrome browser Each of these browsers can run HTML5, CSS3, and JavaScript However, browsers also have versions, so if the browser being used is the newest version then most HTML5 and CSS3 features will be supported An important part of app development in the Windows environment is the Metro style user interface (UI), which is the UI used by the latest Microsoft Windows version: Windows The Metro style UI includes features like a clean, uncluttered look and feel, use of the full screen, large hubs (graphical buttons), and a focus on lateral scrolling, to name a few The HTML5 family includes many new markup tags and technologies like media queries, geolocation, Modernizr, and much more These technologies add a lot of functionality to HTML-based apps and help make the finished product more stylish - Creating Apps Creating an app requires several steps: - Planning your project - Designing the user interface (UI) - Updating the app manifest - Writing the code - Building the app - Debugging and testing the app - Packaging the app - Validating the app - Deploying the app Plan your project: Think about the type of app you want to create After you decide on the main action of your app, create an outline of the general flow of the application from start to finish Also, determine the type of user interactivity you want to include, such as a touch interface, whether you need to save data outside of the app, and whether the app should connect to other apps or services (such as an RSS feed) Design UI: When designing the user interface, determine how you want the app to appear to users Update the app manifest: Every app requires a manifest file The manifest file describes properties of the app and what the app needs to run Let’s make now the call to the weather api using a $.getJSON() Inside of the parenthesis we will put the url till before our unique key, where will need to change the values for lat, lon and appid As the location returns from the ipinfo.io as a string with to values, let’s split the string at the comma (,), that will make it an array with the exact values that we need Now we can modify in the url, the values for lat with loc[0] (the first element of the array we just created by splitting the location string ), for lonwith loc[1] (the second element of the array) and for the appid our API_KEY variable Now that we have this call, let’s add our function, let’s call it wd from weather data, and get it with a console.log We can see in the console we have now a bunch of data we can use Let’s say we want to display the current location, the current weather description, the temperature and a nice icon to reflect the weather Let’s create some variables for that For the var currentLocation = wd.name; we can see what value to give from the data in the console For example for the location the data is name, so will give for currentLocation variable equal to wd our function name Same logic for : var currentWeather = wd.weather[0].description; We have an array from the first element, the description For the temperature we will use var currentTemp = wd.main.temp; And for the icon, from the weather array, the first element: the icon data var icon = wd.weather[0].icon; So now we have in our script: Let’s go now on the html file Let’s say we want to display in our container, first, the location So,we will add a Getting location Let’s select the id currentLocation and update the html in our script using $('#currentLocation').html(currentLocation); So now we have on our app the location: We will the same for the temperature and the weater description Let’s create

Then sellect them and update the html in the javascript with: $('#currentTemp').html(currentTemp) and $('#currentWeather').html(currentWeather); We will have now in our app almost all the informations we want For the icon, on the api page at http://openweathermap.org/weatherconditions we can find how to get the icon url The icons images are linked to an url, so to get them, we will select the currentTemp and prepend the html we want (in this case the icon using the img tag) $('#currentTemp').prepend(''); Because we have a string as the image source we cannot put a string within a string.Let’s declare a local variable varimgSrc and give it the vale of the url till the icon data: Then the data name from the console + icon + And the format ".png" "http://openweathermap.org/img/w/" + icon + ".png" So now this local variable will be our img source Now we have also an icon for our wheater app Finally, we want to display the temperature in Celsius degrees not Kelvin Let’s replace the value of variable var currentTemp with a function called var currentTemp = toCelsius(wd.main.temp); that we will define globally That will return the temp data -273.15 I also added the “C” letter from Celsius Now our app is displaying all the informations we wanted I will style a bit more our app If you remember from the beginning of this book, creating an app requires several steps: - Planning your project - Designing the user interface (UI) - Updating the app manifest - Writing the code - Building the app - Debugging and testing the app - Packaging the app - Validating the app - Deploying the app O big part of them we already done Let’s create now the app manifest A manifest can have three distinct sections: CACHE , NETWORK and FALLBACK CACHE: This is the default section for entries Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they're downloaded for the first time NETWORK: Files listed in this section may come from the network if they aren't in the cache, otherwise the network isn't used, even if the user is online You can white-list specific URLs here, or simply "*", which allows all URLs Most sites need "*" FALLBACK: An optional section specifying fallback pages if a resource is inaccessible The first URI is the resource, the second is the fallback used if the network request fails or errors Both URIs must from the same origin as the manifest file You can capture specific URLs but also URL prefixes "images/large/" will capture failures from URLs such as "images/large/whatever/img.jpg" We will create a new file in the same location called mysite.appcache and will put in the html tag the manifest="mysite.appcache" On the file we just created we will put: CACHE MANIFEST DATE 2017-05-17 CACHE: NETWORK: * FALLBACK: #static.html Debugging and testing the app Visual Studio has many tools to debug and test your app You can deepen more on them on you own To debug you can use from the DEBUG menu Other Debug Targhets, Debug Windows Phone Internet Explorer We can choose from different devices On the url, type the location of your index.html file (I uploaded all files on my website so I am using that url) Packaging the app To package our app, you can use http://phonegap.com/ You can find all instruction on how to this on their website After this you will need to “sign” your application to be able to distribute it on app stores There are different ways available on google on how to that After that you will need to create a developer account on the stores you want to publish you app Bibliography https://app.pluralsight.com/library/ http://www.w3schools.com/ Microsoft Academy ... mentor throughout this HTML5 APPLICATIONS DEVELOPMENT MANUAL HTML5 is the latest HTML standard and a family of technologies that includes HTML, CSS, and JavaScript Although the HTML5 standard won’t...Evelina Buiciag HTML5 APPLICATIONS DEVELOPMENT MANUAL Iași Romania 2016 ISBN: 978-973-0-24454-0 The use of this material is reserved... 32 - CODING ADDITIONAL HTML5 APIS 33 - ACCESSING DEVICE AND OPERATING SYSTEM RESOURCES 34 - BOOTSTRAP 35 – WEATHER APPLICATION DEVELOPMENT BILBLIOGRAFIE - Introduction to HTML5 Application Hi,