Module 1: HTML5 Introduction
- In this module, you will learn the evolution of html5. HTML5 is the latest standard for HTML. HTML5 was
- Designed to replace both HTML 4, XHTML, and the HTML DOM Level 2.
- Limitations of HTML 4
- Introduction and Advantages of HTML 5
- First HTML5 Document
- Overview of New Features of HTML5
- List of HTML 4.01 elements removed from HTML5:
Module 2: Page Layout Semantic Elements
- In this module, you will learn what semantic elements is and how to use it. A semantic element clearly
- Describes its meaning to both the browser and the developer.
- Header
- Navigation
- Section & Articles
- Footer
- Aside and more
Module 3: HTML5 Web Forms
- In this module, you will learn about html web forms, HTML form on a web page allows a user to enter data
- That is sent to a server for processing. Forms can resemble paper or database forms because web users fill out
- The forms using checkboxes, radio buttons, or text fields.
- HTML 5 Global Attributes
- Displaying a Search Input Field
- Contact Information Input Fields
- Utilizing Date and Time Input Fields
- Number Inputs
- Selecting from a Range of Numbers
- Selecting Colors
- Creating an Editable Drop-Down
- Requiring a Form Field
- Autofocusing a Form Field
- Displaying Placeholder Text
- Disabling Autocomplete
- Restricting Values
Module 4: Canvas API
- In this module you will learn about canvas, The HTML <canvas> element is used to draw graphics, on the fly,
- Via JavaScript.
- The <canvas> element is only a container for graphics. You must use javascript to actually draw
- The graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. Overview
- Of HTML5 Canvas
- History
- What Is a Canvas?
- Canvas Coordinates
- Registering the Canvas dimensions
- Drawing on Canvas with paths, curves etc.
- Working with Solid colors, Gradients & Transparency
- Importing External Images & Setting the background
- Working with Color & Geometrical transformations
- Creating graphs & charts
- Working with Text
- Animating a Vertical Bar-Chart
- Fine tune animation with Acceleration & Easing.
- Working with Pixel Data
- CSS and Canvas
- Create High-Res, Retina-Display-Ready Media with Canvas
- Clipping Canvas drawings & saving them to a file.
- When Not to Use Canvas
- Fallback Content
- Implementing Canvas Security
- Ensuring backward compatibility Support of Canvas API to older versions of browsers
Module 5: SVG API
- In this module you will learn about svg, svg stands for Scalable Vector Graphics and it is an SVG viewer then
- Renders a language for describing 2D-graphics and graphical applications in XML and the XML. SVG is mostly
- Useful for vector type diagrams like Pie charts; Two-dimensional graphs in an X, Y coordinate system etc.
- Overview of SVG
- Understanding SVG
- Scalable Graphics
- Creating 2D Graphics with SVG
- Adding SVG to a Page
- Simple Shapes
- Transforming SVG Elements
- Reusing Content
- Patterns and Gradients
- SVG Paths
- Using SVG Text
- Putting the Scene Together
- Building an Interactive Application with SVG
- Adding the CSS Styles
- Ensuring backward compatibility Support of SVG API to older versions of browsers
Module 6: HTML5 Media (Video & Audio)
- In this module you will learn multimedia. HTML5 introduced two new elements that include playback
- Functionality for supported media formats. The audio element can be used to add audio content to a web
- Adding Video & Audio to a page
- Supported Audio & Video formats
- Audio & Video codecs
- Loss & Lossless compression
- Media specific attributes Vs Global attributes
- Deployment challenges on Mobiles
- Converting Audio & Video to supported formats using open source & commercial software
- Using a Frame grabber
- Custom Controls, Seek bar, Progress bar with Javascript & CSS
- Applying CSS skins & transforms
- Working with multiple tracks, Subtitles & Captions with Captionator, Player & the Lean back Player
- Integrating Video with Canvas & SVG
- Applying Visual filters using Canvas & SVG
- Debugging, Browser support.
- Licensing issues.
- Ensuring backward compatibility Support of Media API’s to older versions of browsers
Module 7: Web Storage API
- In this module you will learn web storage, web storage sometimes known as DOM storage (Document Object
- Model storage), provides web application software methods and protocols used for storing data in a web
- Browser Goodbye cookies introducing Web Storage
- Browser Support
- Local Vs Session storage
- Using the HTML5 Web Storage API
- Setting and Retrieving Values
- Storing forms & caching events with local storage
- Storing & Accessing JSON data.
- Communicating Web Storage Updates
- Data Security
- Need more storage space – exploring Web SQL Database API & Indexed DB
- Creating a Grocery List with Web SQL DB
- Ensuring backward compatibility Support of Web Storage API to older versions of browsers
Module 8: Geolocation
- In this module, you will learn about geolocation. Geolocation is the identification or estimation of the realworld geographic location of an object, such as a radar source, mobile phone, or Internet-connected computer
- Comparing Geolocation techniques in the past & modern day Geolocation
- Understanding the pillars of Geolocation. I.e., GPS/ IP Address/ Cell ids/ Wi-Fi and Bluetooth
- LBS (Location based services)
- Mobile & Augmented reality applications, which consume geolocation service.
- Understanding Latitude, Longitude, Speed, Course & Accuracy
- Getting you current location
- Browser compatibility & Fallbacks.
- Reverse geocoding
- Mapping location
- Getting Distance & Directions between two places.
- Following a moving location
- Combing geolocation with google maps
- Triggering the Privacy Protection Mechanism
- Saving Geographical information
Module 8: Geolocation usage
- Geo Marketing, Geo social, Geo tagging, Geo social, Geo tagging & Geo
- Building a Real-Time Application with HTML5 Geolocation
- Ensuring backward compatibility Support of Geolocation API to older versions of browsers