Indexeddb 27 File API 28 Security 29 Web Components 30
Total Page:16
File Type:pdf, Size:1020Kb
BUT REALLY... WHAT IS STRUCTURE PRESENTATION BEHAVIOR <HTML> <CSS> <JAVASCRIPT> HTML5 A Publication of YOU REQUEST. WE RESPOND. IT GETS DONE!® But Really... What Is HTML5? 1 TABLE OF CONTENTS Introduction 3 Structure 4 Data Attributes 4 Async/Defer Scripts 5 Session History 6 Aria 7 Semantic Elements 8 Micro Data 9 Form Updates 10 Integration 11 Web Notifications 11 Cross Document Messaging 12 Geolocation 13 Device Orientation 14 DOM Elements 15 Get Media/HTML Media Capture 16 Beacon 17 Performance 18 Web Workers 18 Navigation Timing 19 Page Visibility 20 Graphics 21 Canvas 21 WebGL 22 SVG 23 Media 24 Web Audio 24 Web Video 25 Storage 26 Web Storage 26 IndexedDB 27 File API 28 Security 29 Web Components 30 But Really... What Is HTML5? in 2 HTML5 has become a buzzword for everything that is new with the web. Everyone wants it, but most have no idea what it is. In the simplest terms, HTML5 is the 5th official version of the HTML codebase. Its main purpose is to create standards for the new way that we look at websites. The web of today looks much different than the web six years ago. We have the speed and technology to provide some very immersive experiences for our clients, but as always, to quote Spiderman, “With great power comes great responsibility.” As we work on creating these amazing experiences, we need to be mindful of all of our users, especially the ones on mobile devices. Some new standards for other front-end code bases are grouped with HTML5, which causes confusion as to what exactly makes a website HTML5. HTML provides the structure of a website, CSS is responsible for how it looks and Javascript is used to determine how it behaves. These scripts work together to create what you see on a standard web page and they are the backbone of HTML5. STRUCTURE PRESENTATION BEHAVIOR <HTML> <CSS> <JAVASCRIPT> HTML5 An HTML5 site is made up of one or more of the various APIs (application programming interfaces) that are starting to become available for use within the HTML5 official specifications. It is important to remember; however’ that many of the awesome APIs that are going to make HTML5 really powerful may be drafts and not fully supported by legacy browsers. If you plan to use any for your upcoming project, check to make sure the browser requirements meet the scope of the project. But Really... What Is HTML5? in 3 STRUCTURE Data Attributes Data attributes are a seemingly small addition to the HTML toolbelt, but they can be quite helpful. For a long time, developers struggled with the best way to embed data into their HTML. These attributes are now a way for develop- ers to accomplish this while still writing valid HTML code. The specification for these data attributes simply states that any attribute that beings with “data-” will be treated as storage. This data will not affect the layout of the site and the user won’t be able to see it. <article id=”category” data-columns=”4” data-index-number=”12” data-parent=”main”> ... </article> But Really... What Is HTML5? in 4 STRUCTURE Async/Defer Scripts Before HTML5, everything on the page would be downloaded one at a time in the order in which it was listed in the code. This means that anything located in the <head> tag of your page would have to be downloaded and executed before anything on the page would become visible. The webpages of today are generally much more complex and have many more dependencies. Some- times these dependencies aren’t needed right away so we could speed up our perceived load time (the time the user perceives the page to load as opposed to the actual time it takes to load all of the page’s assets) by just having the script load later on or inline with everything else. With HTML5 we can now do just that. Using “async” in the script tag will make that script download along with the HTML parser then pause to execute when the script is fully down- loaded. With “defer” the script will also download the script in parallel with the HTML parser, but wait until the HTML parser is completed before execut- ing the script. <script src=”/path/to/script.js” defer></script> <script src=”/path/to/script.js” async></script> But Really... What Is HTML5? in 5 STRUCTURE Session History Web applications have been growing with complexity, and with this new com- plexity, a whole new realm of issues have surfaced. One of which is the way we interact with URLs. Being able to separate resources into different URLs is obviously ideal, but in order to change the URL in the browser, we would have to make a trip to the server and then perform a full page reload. This isn’t desirable if all we need to do is change part the page, especially if the user expects their action to keep them on the current page. With the new HTML5 Session History API, this is no longer an issue. We can now manipulate URLs and the browser history without triggering a full page reload. window.history.back(); window.history.forward(); window.addEventListener(‘popstate’, function(event) { var state = event.state; }); But Really... What Is HTML5? in 6 STRUCTURE Aria An important, but unfortunately often overlooked, part of web development is accessibility. Everyone should be able to use your site regardless of any disabilities they may have. Sites can look and work perfectly to users looking at it and using their mouse, but fail miserably when a screen reader tries to decipher the structure. ARIA, which stands for Accessible Rich Internet Ap- plications, defines a way to make web content and web applications more ac- cessible to people with disabilities. The World Wide Web Consortium (W3C) developed standards on how we should define roles within our application to help screen readers and the like figure out how the page is set up. This is spe- cifically useful when using non-semantic tags. <header role=”banner”> <h1>Title of your document</h1> <nav role=”navigation”> <ol> <li><a href=”#”>alpha</a></li> <li><a href=”#”>bravo</a></li> <li><a href=”#”>charlie</a></li> <li><a href=”#”>delta</a></li> </ol> <form role=”search”> <input type=”search” placeholder=”Need to find something?”> <input type=”submit” value=”search”> </form> </nav> </header> <main role=”main”> <h2>Main Content</h2> <p>Important content</p> </main> <aside role=”complementary”> <h2>Sidebar</h2> <p>Complementary content</p> </aside> <footer role=”contentinfo”> <h2>Footer</h2> <p>Information about the document</p> </footer> But Really... What Is HTML5? in 7 STRUCTURE Semantic Elements This new feature of HTML5 is probably the most written about part of the HTML5 specification because it’s a complete change in how we code a web- site. In the early days, tables were the best way to build your website. Eventu- ally it became obvious that developers needed more control over the struc- ture of their sites that tables just couldn’t handle. To accomplish this, using the <div> tag became the standard way to build a site. Developers could put a class or id on the <div> and then style the layout in the CSS. The smart people that are on the W3C team realized that many of the sites were devel- oped in similar ways. So instead of the non-descript <div> tags, they began to implement semantic tags such as <nav>, <header>, <footer>, <section> and <aside>. These make developing for the web more manageable and provide a standard for web structure. <header> <nav> <!--Navigation--> </nav> </header> <section> <article> <!--Content--> </article> </section> But Really... What Is HTML5? in 8 STRUCTURE Microdata Web crawlers, like Googlebot, scrape websites and dissect them to figure out what each page is about. Microdata’s goal is to help this process by provid- ing the meaning of an item. For instance, using Microdata, we can tag content that serves a specific purpose like an address or a product. The content devel- opers can tag falls under markup vocabularies called schemas. These schemas include People, Events, Organizations, Products, Reviews, Breadcrumbs, and Offers. Major search engines use this markup to help improve search results. To implement properly, you must wrap the content in an itemscope as well as define the schema using itemtype. Then you can tag any content in that scope with properties related to the schema loaded. http://schema.org/ is the library to use when doing this. <dd itemprop=”address” itemscope itemtype=”http://data-vocabulary.org/Address”> <span itemprop=”street-address”>100 Main Street</span><br> <span itemprop=”locality”>Anytown</span>, <span itemprop=”region”>PA</span> <span itemprop=”postal-code”>19999</span> <span itemprop=”country-name”>USA</span> </dd> But Really... What Is HTML5? in 9 STRUCTURE Forms One of the most important parts of a static website is the form. It’s how many companies generate the leads they need to run their business. As customers, we use it as a reliable way to show our interest in a company. For developers, creating web forms with validation has never been fun and usually involved a few hacks to make them work correctly. HTML5 sets out to make the devel- oper’s job a little easier by adding some brand new APIs for input types, vali- dation and interaction. Some new input types include email addresses, urls, color, range, telephone and search. This makes the inputs more semantic and help with validation. Form validation helps improve the user experience by providing clear guide- lines and feedback.