1 / 21

Abinet Zelalem

HTML5. Abinet Zelalem. HTML5. 5 things you need to know. It’s not one big thing. 1. You don’t need to throw anything away. 2. 3. It’s easy to get started. 4. It’s here to stay. 5. It already works. MIME TYPES. The web runs on MIME.

fruma
Télécharger la présentation

Abinet Zelalem

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 AbinetZelalem

  2. HTML5 5 things you need to know It’s not one big thing 1 You don’t need to throw anything away 2 3 It’s easy to get started 4 It’s here to stay 5 It already works

  3. MIME TYPES The web runs on MIME • Every time your web browser requests a page, the web server sends “headers” before it sends the actual page markup. • The most important header is called Content-Type, and it looks like this: Content-Type: text/html • “text/html” is called the “content type” or “ MIME type” of the page. • If you don’t have header with your page the browsers do content sniffing and determine the MIME type

  4. Little bit of history How HTML5 came about • Backwards compatibility, clear migration path • Well-defined error handling • Users should not be exposed to authoring errors • Practical use • Scripting is here to stay • Device-specific profiling should be avoided • Open process

  5. Detect support for features • When your browser renders a web page, it constructs a Document Object Model ( DOM), a collection of objects that represent the HTML elements on the page. • In browsers that support HTML5 features, certain objects will have unique properties.

  6. Four basic techniques for detecting HTML5 Features 1 Check if a certain property exists on a globalobject (such as window or navigator). 2 Create an element, then check if a certain property exists on that element. 3 Create an element, check if a certain method exists on that element, then call the method and check the value it returns. 4 Create an element, set a property to a certain value, then check if the property has retained its value. Use Modernizr. Modernizradds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it. (1.7) 5

  7. HTML5 Elements CANVAS VIDEO LOCAL STORAGE A resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, or other visual images on the fly , uses the (“the canvas API”) Test - create a dummy canvas and check the presence of getContext() method, or use modernizr Even if your browser supports the canvas API, it might not support the canvas text API. after creating the canvas element test for fillText() function existance by doing a .getcontext('2d') on the canvas element. For embedding video in your web pages, without additional plugins Browsers that don’t support HTML5 video will ignore the <video> element completely, but you can use this to your advantage and tell them to play video through a third-party plugin instead. The unfortunate reality of HTML5 video is that browsers can’t agree on a single codec. So two types exist, one the costs money, and open source tThe concept is similar to cookies, but it’s designed for larger quantities of information can access it with JavaScript after the page is loaded Yes there are security holes visible, but there is a same-origion restriction 3 1 2

  8. HTML5 Elements (Contd…) WEB WORKERS OFFLINE WEB APPLICATIONS GEOLOCATION provide a standard way for browsers to run JavaScript in the background. With web workers, you can spawn multiple “threads” that all run at the same time, more or less. These “background threads” can do complex mathematical calculations, make network requests, or access local storage while the main web page responds to the user scrolling, clicking, or typing. an offline web application is a list of URLs HTML5 offline applications will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date as they change. There’s a flag in the DOM that will tell you whether you’re online or offline. There are events that fire when your offline status changes most of the work is up to you, the web developer art of figuring out where you are in the world and (optionally) sharing that information with people you trust Gears is an open source browser plugin from Google that works on Windows, Mac, Linux, Windows Mobile, and Android. It provides features for older browsers that do not support all the fancy new stuff 6 4 5

  9. HTML5 Elements (Contd…) INPUT TYPES PLACEHOLDER TEXT FORM AUTOFOCUS Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon you click on (or tab to) the input field, the placeholder text disappears. The autofocus attribute does exactly what it says on the tin: it moves the focus to a particular input field. But because it’s just markup instead of a script, the behavior will be consistent across all web sites. Also, browser vendors (or extension authors) can offer users a way to disable the autofocusing behavior. <input type=“?"> Search - for search boxes Number - for spinboxes Range - for sliders Color - for color pickers Tel - for telephone numbers Url - for web addresses Email - for email addresses Date - for calendar date pickers Month - for months Week - for weeks Time - for timestamps Datetime - for precise, absolute date+timestamps, datetime-local for local dates and times 9 7 8

  10. HTML5 Elements (Contd…) MICRODATA a standardized way to provide additional semantics in your web pages. Anyone can define a microdata vocabulary and start embedding custom properties in their own web pages. Person with name and photo property Microdata is about applying additional semantics to data that’s already visible on your web page 10

  11. Doctype Triggers standards-based rendering in all browsers In the irks mode, browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s. Quirks Mode Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known as “Almost Standards mode,” that implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification. HTML5 calls this mode the “limited quirks mode.” Almost Standards Mode/limited quirks mode. In the Standards mode, browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser. HTML5 calls this mode the “no quirks mode.” Standards Mode/no quirks mode

  12. Doctype Standard Mode HTML4 or less HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 t<!DOCTYPE html> 1

  13. Root node <HTML> HTML4 HTML5 <html xmlns="http://www.w3.org/1999/xhtml" lang="en“ xml:lang="en"> <html lang="en"> 1 2

  14. First child <HEAD> information about the page links are two types in html5 Links to external resources hyperlink links Templates Templates 1 2 <link rel="stylesheet" href="style-original.css" /> <link rel="stylesheet" href="style-original.css" type="text/css" /> new rel types have been introduced rel="first" - first page in a series rel="last" rel="up" is to look at your breadcrumb navigation rel="prefetch" rel="nofollow“ – introduced by google

  15. New semantic elements generic document or application section a section with navigation links. <section> a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable <nav> a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. <article> to group a set of h1–h6 elements when the heading has multiple levels <aside> a group of introductory or navigational aids. <hgroup> represents a footer for its nearest ancestor sectioning content or sectioning root element. <header> either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar <time> <footer> a run of text in one document marked or highlighted for reference purposes. Your Logo <mark>

  16. Issues Unknown elements in browsers Every browser has a master list of HTML elements that it supports. Mozilla - nsElementTable.cpp Two fundamental problems 3 All browsers render unknown elements inline, i.e. as if they had a display:inline CSS rule.!!!!! There are several new elements defined in HTML5 which are block-level elements. If you want to use these elements in older browsers, you will need to define the display style manually: article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; } How should the element be styled? 1 2 What should the element’s DOM look like? Prior to version 9, Internet Explorer did not apply any styling on unknown elements. If IE 8 doesn’t explicitly recognize the element name, it will insert the element into the DOM as an empty node with no children. Yet another issue

  17. Root node <HTML> DOM that Internet Explorer actually creates: article | +--h1 (child of article) | | | +--text node "Welcome” | +--p (child of article, sibling of h1) | +--text node "This is your " | +--span | | | +--text node "first day" | +--text node "." article (no children) h1 (sibling of article) | +--text node "Welcome to Initech" p (sibling of h1) | +--text node "This is your " | +--span | | | +--text node "first day" | +--text node "."

  18. Solution If you create a dummy <article> element with JavaScript before you use it in your page, Internet Explorer will magically recognize the <article> element and let you style it with CSS. <!--[if lt IE 9]> <script> var e = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]--> This script needs to be at the top of your page, before IE parses your tags and attributes hosted it on Google Project Hosting, MIT License so u can just even link to it <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

  19. The HTML5 algorithm says that an <article> element creates a new section, that is, a new node in the document outline. And in HTML5, each section can have its own <h1> element. Where as there is no no generic heading in html4, so numbered heading elements, <h1>–<h6>, must be nested in exactly that order. We tend to assemble pages rather than author them , so copy paste causes problems but no more • <article> • <header> • <p class="post-date">October 22, 2009</p> • <h1> • <a href="#" • rel="bookmark" • title="link to this post"> • Travel day • </a> • </h1> • </header> • … • </article>

  20. Time <time datetime="2009-10-22T13:59:47-04:00" pubdate> October 22, 2009 1:59pm EDT </time> datetime, machine readable b/n the closing tags, optional pubdate If the <time> element is in an <article> element, it means that this timestamp is the publication date of the article. If the <time> element is not in an <article> element, it means that this timestamp is the publication date of the entire document. Navigation Semantically, there is nothing to distinguish this list of links from any other why is it needed one example - people with disabilities jump to (or jump past) major navigation text-to-speech to speak and summarize web pages no need to provide skip links for third-party software

  21. THANK YOU! Your Logo

More Related