Book Description. Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. Mark Pilgrim is gone and with him all of his sites and work. I more than enjoyed his book “Dive into HTML5”. It was a bible of transitioning and. Este manual nos introduce en las novedades del nuevo HTML5. En él aprenderemos paso a paso a sacarle el máximo partido a las nuevas.
|Language:||English, Spanish, Japanese|
|Genre:||Science & Research|
|Distribution:||Free* [*Register to download]|
Diving In □ i The Doctype ii The Root Element iii ruthenpress.info TABLE OF . O'Reilly is distributing this book in a variety of formats, including paper, ePub. DOCTYPE html> Dive Into .. této knihy v řadě formátů včetně tištěné pdoby, ePub, Mobi, and DRM -free PDF. Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. The archived pdf version has.
All Categories. Recent Books. IT Research Library. Miscellaneous Books. Computer Languages. Computer Science. Electronic Engineering. Linux and Unix. Microsoft and. Mobile Computing. It is available as a PDF file, so you can easily download it and use it as per your convenience.
Expert advice is provided by Cennydd Bowles, Louis Rosenfeld, Ash Maurya, and others on the 7 stages of product design. Study Web Development Study Web Development is a free eBook on how to become a web developer and successful freelancer.
Pixel Perfect Precision Handbook v. Designing for the Web By Mark Boulton A Practical Guide to Designing for the Web aims to teach you the techniques for designing your website using the principles of graphic design. Pay Me… Or Else! It covers tactics and tips that will help you recover your hard earned money and how to avoid similar situations in the future. This usabilty guide sheds some light on some common interface elements and mistakes people often make with them.
Going, going That leaves us with this root element: And for that, we turn once again to our example page: When you think of "text," you probably think of "characters and symbols I see on my computer screen.
Every piece of text you've ever seen on a computer screen is actually stored in a particular character encoding. There are hundreds of different character encodings , some optimized for particular languages like Russian or Chinese or English, and others that can be used for multiple languages. Roughly speaking, the character encoding provides a mapping between the stuff you see on your screen and the stuff your computer actually stores in memory and on disk.
In reality, it's more complicated than that. The same character might appear in more than one encoding, but each encoding might use a different sequence of bytes to actually store the character in memory or on disk. So, you can think of the character encoding as a kind of decryption key for the text.
Whenever someone gives you a sequence of bytes and claims it's "text," you need to know what character encoding they used so you can decode the bytes into characters and display them or process them, or whatever. So, how does your browser actually determine the character encoding of the stream of bytes that a web server sends? I'm glad you asked. If you're familiar with HTTP headers, you may have seen a header like this: Think Blogger: You've probably seen this too: Both of these techniques still work in HTML5.
The HTTP header is the preferred method, and diveintohtml5. In fact, it got a little easier in HTML5. Now it looks like this: How did this shortened syntax come about? Here is the best explanation I could find: I never use funny characters. Do I still need to declare my character encoding?
You should always specify a character encoding on every HTML page you serve. Not specifying an encoding can lead to security vulnerabilities. To sum up: You should always specify a character encoding on every HTML document, or bad things will happen.
The web thanks you. Link relations are a way to explain why you're pointing to another page. They finish the sentence "I'm pointing to this other page because And so on. HTML5 breaks link relations into two categories: Two categories of links can be created using the link element.
Links to external resources are links to resources that are to be used to augment the current document, and hyperlink links are links to other documents. The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type.
The rest are hyperlinks to other documents. You may wish to follow those links, or you may not, but they're not required in order to view the current page. See the full chart of link diveintohtml5. Can I make up my own link relations? There seems to be an infinite supply of ideas for new link relations. In an attempt to prevent people from just making shit up , the WHATWG maintains a registry of proposed rel values and defines the process for getting them accepted.
One small optimization you can make in HTML5 is to drop the type attribute. There's only one stylesheet language for the web, CSS, so that's the default value for the type attribute. This works in all browsers.
I suppose someone could invent a new stylesheet language someday, but if that happens, just add the type attribute back. Continuing with our example page: Most browsers also support feed autodiscovery by displaying a special icon next to the URL. Don't drop it! In HTML5, its definition has been clarified and extended to more accurately describe existing web content.
HTML5 also puts to rest a long-standing confusion about how to link to translations of documents. This can be a mail to: It could simply link to a contact form or "about the author" page.
Your home page is probably the first page in your breadcrumbs, and the current page is at the tail end. It is usually found together with shortcut, like so: All major browsers support this usage to associate a small icon with the page. Usually it's displayed in the browser's location bar next to the URL, or in the browser tab, or both.
Also new in HTML5: It "indicates that the referenced document provides the copyright license terms under which the current document is provided. The thinking was that if "nofollow" links did not pass on PageRank, spammers would give up trying to post spam comments on weblogs. As explained in the Pingback specification, "The pingback system is a way for a blog to be automatically notified when other Web sites link to it.
It enables reverse linking — a way of going back up a chain of links rather than merely drilling down. For example: In Opera and Mozilla Firefox, it means "when I click this link, prompt the user to create a bookmark that, when selected from the Bookmarks menu, opens the linked document in a browser sidebar.
Early blogs and tutorials thus referred to them as "Techno rati tags. Nice work if you can get it! Browsers do not do anything special with them; they're really designed for search engines to use as a signal of what the page is about. It also defines new semantic elements. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, contact information.
Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to common pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups diveintohtml5. The element is used to group a set of hl-h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. A header element is intended to usually contain the section's heading an hl-h6 element or an hgroup element , but this is not required.
The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Footers don't necessarily have to appear at the end of a section, though they usually do.
When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content. I know you're anxious to start using these new elements, otherwise you wouldn't be reading this chapter.
But first we need to take a little detour. For example, Mozilla Firefox's list is stored in nsElementTable. Elements not in this list are treated as "unknown elements. How should the element be styled?
But what default styles should be applied to unknown elements? What should the element's DOM look like? Mozilla's nsElementTable. Different browsers answer these questions in different ways. Shocking, I know. Of the major browsers, Microsoft Internet Explorer's answer to both questions is the most problematic, but every browser needs a little bit of help here. The first question should be relatively simple to answer: Just let them inherit whatever CSS properties are in effect wherever they appear on the page, and let the page author specify all styling with CSS.
And that works, mostly, but there's one little gotcha you need to be aware of. There are several new elements defined in HTML5 which are block-level elements. That is, they can contain other block-level elements, and HTML5-compliant browsers will style them as display: If you want to use these elements in older browsers, you will need to define the display style manually: But wait, it gets worse!
Prior to version 9, Internet Explorer did not apply any styling on unknown elements. For example, if you had this markup: All the style rules are simply ignored. As I write this, Internet Explorer 9 is still in beta , but Microsoft has stated and diveintohtml5. The second problem is the DOM that browsers create when they encounter unknown elements. Again, the most problematic browser is Internet Explorer.
If IE doesn't explicitly recognize the element name, it will insert the element into the DOM as an empty node with no children.
All the elements that you would expect to be direct children of the unknown element will actually be inserted as siblings instead. There is no need to ever insert the dummy element into the DOM. Simply creating the element once per page is enough to teach IE to style the element it doesn't recognize.
We can extend this technique to create dummy copies of all the new HTML5 elements at once — again, they're never inserted into the DOM, so you'll never see these dummy elements — and then just start using them without having to worry too much about non-HTML5-capable browsers. The script has gone through 14 revisions at the time of writing, but this is the basic idea: Internet Explorer interprets them like an i f statement: The net result is that Internet Explorer up to and including version 8 will execute this script, but other browsers will ignore the script altogether.
But since we ignore the return value, the elements are never inserted into the DOM. But this is enough to get Internet Explorer to treat these elements the way we want them to be treated, once we actually use them later in the page.
That "later" bit is important. That way, Internet Explorer will execute the script before it parses your tags and attributes. If you put this script at the bottom of your page, it will be too late. Internet Explorer will have already misinterpreted your markup and constructed the wrong DOM, and it won't go back and adjust it just because of this script. Remy Sharp has "minified" this script and hosted it on Google Project Hosting.
In case you were wondering, the script itself is open source and MIT-licensed, so you can use it in any project. If you like, you can even "hotlink" the script by pointing directly to the hosted version, like this: Specifically, let's look at just the headers: But HTML5 provides some additional semantic elements for headers and sections.
This is a common pattern, but it doesn't mean anything. The div element has no defined semantics, and the id attribute has no defined semantics. User agents are not allowed to infer any meaning from the value of the id attribute. Here is what it would look like on our example page: It tells anyone who wants to know that this is a header.
But what about that tagline? Another common pattern, which up until now had no standard markup. It's a difficult thing to mark up. A tagline is like a subheading, but it's "attached" to the primary heading.
That is, it's a subheading that doesn't create its own section. Taken together, they create an outline that you can use to visualize or navigate your page. Screenreaders use document outlines to help blind users navigate through your page. There are online tools and browser extensions that can help you visualize your document's outline. The outline on the example page looks like this: My Weblog hi I H A lot of effort went into making this effortless.
The tagline does not represent a section; it's just a subheading. No, that's even worse: And herein lies the problem: HTML 4 does not provide a way to mark up a subheading without adding it to the document outline. No matter how we try to shift things around, "A lot of effort went into making this effortless" is going to diveintohtml5.
HTML5 provides a solution for this: What does "related" mean? It means that, taken together, they only create a single node in the document outline.
Given this markup: You can test your own pages in the HTML5 Outliner to ensure that you're using the heading elements properly. There is one more change you should make. I'll show it to you first, then explain it: Its purpose is to wrap all the elements that form the article's header in this case, the article's publication date and title. Won't this screw up the document outline? No, but to understand why not, we need to back up a step.
This is a drastic change from HTML 4, and here's why it's a good thing. Many web pages are really generated by templates. A bit of content is taken from one source and inserted into the page up here; a bit of content is taken from another source and inserted into the page down diveintohtml5.
Many tutorials are structured the same way. Just copy it and paste it into your page. In that case, the tutorial will read something like this: Just copy it, paste it into a text editor, and fix the heading tags so they match the nesting level of the corresponding heading tags in the page you're pasting it into. HTML 4 has no generic heading element.
That kind of sucks, especially if your page is "assembled" instead of "authored. If you're using the new sectioning elements, I can give you this markup: Your life will be simpler if you use one or the other, but not both. If you must use both on the same page, be sure to check the diveintohtml5. I mean, it's not "skiing down Mount Everest naked while reciting the Star Spangled Banner backwards" exciting, but it's pretty exciting as far as semantic markup goes.
Let's continue with our example page. The next line I want to highlight is this one: A common pattern — designating the publication date of an article — that has no semantic markup to back it up, so authors resort to generic markup with custom class attributes. Again, this is valid HTML5. You're not required to change it.
But HTML5 does provide a specific solution for this case: A machine-readable timestamp 2. Human- readable text content 3. An optional pubdate flag diveintohtml5. In this example, the datetime attribute only specifies a date, not a time.
The format is a four-digit year, two-digit month, and two-digit day, separated by dashes: This is not actually required. So this is valid HTML5: It's a Boolean attribute, so just add it if you need it, like this: What does the pubdate attribute mean? It means one of two things.
Here's the entire article, reformulated to take full advantage of HTML5: Google search results pages have a similar strip at the top of the diveintohtml5.
And our example page has a navigation bar in the header that includes links to different sections of our hypothetical site — "home," "blog," "gallery," and "about. This is how the navigation bar was originally marked up: But while it's marked up as a list of four items, there is nothing about the list that tells you that it's part of the site navigation. Visually, you could guess that by the fact that it's part of the page header, and by reading the text of the links. But semantically, there is nothing to distinguish this list of links from any other.
Who cares about the semantics of site navigation? For one, people with disabilities. Why is that? Consider this scenario: To compensate, you might use a browser add-on that allows you to jump to or jump past major navigation links. Or consider this: Once you get past the page title, the next important pieces of information about a page are the major navigation links. If you want to navigate quickly, you'll tell your screenreader to jump to the navigation bar and start reading.
If you want to browse quickly, you might tell your screenreader to jump over the navigation bar and start reading the main content. Either way, being able to determine navigation links programmatically is important.
It's suboptimal in ways that affect real people. HTML5 provides a semantic way to mark up navigation sections: Skip links allow readers to skip over navigation sections. They are helpful for disabled users who use third-party software to read a web page aloud and navigate it without a mouse.
Learn how and why to provide skip links. The last thing I want to talk about is the last thing on the page: The footer was originally marked up like this: But HTML5 provides a more specific element for this: OK, that's a circular answer.
But really, that's it. The HTML5 specification says, "A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Looking around at some popular sites, I see lots of footer potential.
All totally diveintohtml5. Take a look at the footer on the W3C site. The final markup might look something like this: On standards modes and doctype sniffing: This is the only article you should read on the subject.
Any article on doctypes that doesn't reference Henri's work is guaranteed to be out of date, incomplete, or wrong. HTML5-aware validator: So what does a canvas look like? Each canvas will show up in the DOM, and each canvas maintains its own state. If you give each canvas an id attribute, you can access them just like any other element. Let's expand that markup to include an id attribute: Every canvas starts out blank.
That's boring! Let's draw something. Click to draw on this kanvas The onclick handler called this function: You must pass the string "2d" to the getContext method. Is there a 3-D canvas? Not yet. Individual vendors have experimented with their own three- dimensional canvas APIs, but none of them have been standardized. The HTML5 specification notes, "A future version of this specification will probably define a 3d context.
The drawing context is where all the drawing methods and properties are denned. There's a whole group of properties and methods devoted to drawing rectangles: More on gradients shortly. The default fillStyle is solid black, but you can set it to whatever you like. Each drawing context remembers its own properties as long as the page is open, unless you do something to reset it.
Can I "reset" a canvas? You don't even need to change the width; you can simply set it to its current value, like this: The rectangle is bounded by its upper-left corner 50, 25 , its width , and its height To get a better picture of how that works, let's look at the canvas coordinate system. The coordinate 0, 0 is at the upper-left corner of the diveintohtml5. Along the X-axis, values increase towards the right edge of the canvas.
Along the Y- axis, values increase towards the bottom edge of the canvas. Imagine you're drawing a picture in ink. You don't want to just dive in and start drawing with ink, because you might make a mistake. Instead, you sketch the lines and curves with a pencil, and once you're happy with it, you trace over your sketch in ink. Each canvas has a path. Defining the path is like drawing with a pencil. You can draw whatever you like, but it won't be part of the finished product until you pick up the quill and trace over your path in ink.
To draw straight lines in pencil, you use the following two methods: The more you call moveTo and lineTo , the bigger the path gets.
These are "pencil" methods — you can call them as often as you like, but you won't see anything on the canvas diveintohtml5. Let's begin by drawing the off-white grid. Nothing has actually been drawn on the canvas yet. We need an "ink" method to make it permanent. It takes the complex path you defined with all those moveTo and lineTo calls, and actually draws it on the canvas. The strokeStyle controls the color of the lines. This is the result: Why did you start x and y at 0. Why not 0?
Imagine each pixel as a large square. The whole-number coordinates 0, 1, If you draw a one-unit- wide line between whole-number coordinates, it will overlap opposite sides of the pixel square, and the resulting line will be drawn two pixels wide.
To draw a line that is only one pixel wide, you need to shift the coordinates by 0. For example, if you try to draw a line from 1 , 0 to 1 , 3 , the browser will draw a line covering 0. The screen can't display half a pixel, so it expands the line to cover a total of two pixels: Thanks to Jason Johnson for providing these diagrams. All the lines and curves on a path are drawn in the same color or gradient — yes, we'll get to those soon. We want to draw the arrow in a different color ink — black instead of off-white — so we need to start a new path.
Since the vertical arrow is the same color as the horizontal arrow, we do not need to start another new path. The two arrows will be part of the same path. The f illStyle and strokeStyle don't get reset when you start a new path. That's OK, because we've just run a series of "pencil" methods.
But before we draw it for real, in "ink," we need to set the strokeStyle to black.
Otherwise, these two arrows will be off-white, and we'll hardly be able to see them! The following lines change the color to black and draw the lines on the canvas: In addition to drawing lines on a canvas, you can also draw text on a canvas. Unlike text on the surrounding web page, there is no box model. That means none of the familiar CSS layout techniques are available: Maybe you think that's a good thing!
You can set a few font attributes, then you pick a point on the canvas and draw your text there. The following font attributes are available on the drawing context: That includes font style, font diveintohtml5. It is similar but not identical to a CSS text- align rule.
Possible values are start, end, left, right, and center. Possible values are top, hanging, middle, alphabetic, ideographic, or bottom. The HTML5 specification explains the different text baselines: The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like 3fl are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like A, y, f, and Q are anchored, the ideographic baseline is where glyphs like and ]J are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font.
The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square. Let's draw some text! Can I use relative font sizes to draw text on a canvas? If you set the context. But I'm lazy — I don't want to measure the height of the text and calculate the baseline.
Instead, I can set textBaseline to top and pass in the upper-left coordinate of the text's bounding box. Let's say I want the bottom- right corner of the text to be at coordinates , — just a few pixels away from the bottom-right corner of the canvas — but I don't want to measure the width or height of the text.
I can set textAlign to right and textBaseline to bottom, then call fillText with the bottom-right coordinates of the text's bounding box. We forgot the dots in the corners. We'll see how to draw circles a little later. For now, I'll cheat a little and draw them as rectangles. Here is the final product: Earlier in this chapter, you learned how to draw a rectangle filled with a solid color , then a line stroked with a solid color. But shapes and lines aren't limited to solid colors.
You can do all kinds of magic with gradients. Let's look at an example. A gradient is a smooth transition between two or more colors. The canvas drawing context supports two types of gradients: The first three parameters represent the start circle, with origin xO, yO and radius rO.
The last three parameters represent the end circle, with origin xl, yl and radius rl. Let's make a linear gradient. Gradients can be any size, but I'll make this gradient be pixels wide, like the canvas. Once we have a gradient object, we can define the gradient's colors. A gradient has two or more color stops.
Color stops can be anywhere along the gradient. To add a color stop, you need to specify its position along the gradient. Gradient positions can be anywhere between 0 to 1. Let's define a gradient that shades from black to white. It's just an object tucked away in memory somewhere.
To draw a gradient, you set your filistyle to the gradient and draw a shape, like a rectangle or a line. Suppose you want a gradient that shades from top to bottom. When you create the gradient object, keep the x values 1st and 3rd parameters constant, and make the y values 2nd and 4th parameters range from 0 to the height of the canvas. You can also create gradients along a diagonal. Here is a cat: The method can take three, five, or nine arguments.
The given coordinates dx, dy will be the upper-left corner of the image. Coordinates 0, 0 would draw the image at the upper-left corner of the canvas.
The HTML5 specification explains the drawimage parameters: