Pranshu Arya's List: Dive Into HTML5

Canvas - Dive Into HTML5 33

May 27, 11

Using the HTML5 canvas API

diveintohtml5.org/canvas.html html5 canvas dive into html5
- A <canvas> element has no content and no border of its own.
- You can have more than one <canvas> element on the same page. 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.
- Every canvas has a drawing context, which is where all the fun stuff happens.
- You must pass the string "2d" to the getContext() method.
- The drawing context is where all the drawing methods and properties are defined.
- Setting the width or height of a <canvas> element will erase its contents and reset all the properties of its drawing context to their default values.
- 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.
- 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 until you call one of the “ink” methods.
- stroke() is one of the “ink” methods. It takes the complex path you defined with all those moveTo() and lineTo() calls, and actually draws it on the canvas.
- 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 fillStyle and strokeStyle don’t get reset when you start a new path.
- Unlike text on the surrounding web page, there is no box model. That means none of the familiar CSS layout techniques are available: no floats, no margins, no padding, no word wrapping.
- font can be anything you would put in a CSS font rule.
- textAlign controls text alignment. It is similar (but not identical) to a CSS text-align rule.
- textBaseline controls where the text is drawn relative to the starting point.
- For simple alphabets like English, you can safely stick with top, middle, or bottom for the textBaseline property.
- Text drawn inside the canvas inherits the font size and style of the <canvas> element itself, but you can override this by setting the font property on the drawing context.
- The fillText() method draws the actual text.
- createLinearGradient(x0, y0, x1, y1) paints along a line from (x0, y0) to (x1, y1).
- createRadialGradient(x0, y0, r0, x1, y1, r1) paints along a cone between two circles.
- 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.
- Defining a gradient doesn’t draw anything on the canvas. It’s just an object tucked away in memory somewhere. To draw a gradient, you set your fillStyle to the gradient and draw a shape, like a rectangle or a line.
- The canvas drawing context defines a drawImage() method for drawing an image on a canvas.
- To draw an image on a canvas, you need an image. The image can be an existing <img> element, or you can create an Image() object with JavaScript. Either way, you need to ensure that the image is fully loaded before you can draw it on the canvas.
- If you’re using an existing <img> element, you can safely draw it on the canvas during the window.onload event.
- If you’re creating the image object entirely in JavaScript, you can safely draw the image on the canvas during the Image.onload event.
- Once you include the excanvas.js in the <head> of your page, you don’t need to do anything else to accomodate Internet Explorer.
- There is one more caveat about using excanvas.js, and it’s a problem that I ran into while creating the examples in this chapter. ExplorerCanvas initializes its own faux-canvas interface automatically whenever you include the excanvas.js script in your HTML page.
- The easiest solution to this is to defer all of your canvas-related manipulation until after the onload event fires.
- The canvas drawing context will retain whatever you have previously drawn on it, even if the user scrolls the canvas out of view or changes to another tab and then comes back later. If you’re developing a canvas-based application with more complicated graphics (such as an arcade game), you can optimize performance by tracking which regions of the canvas are “dirty” and redrawing just the dirty regions.
- There is no circle() method in the canvas API, but there is an arc() method. And really, what is a circle but an arc that goes all the way around? Do you remember your basic geometry? The arc() method takes a center point (x, y), a radius, a start and end angle (in radians), and a direction flag (false for clockwise, true for counter-clockwise). You can use the Math module that’s built into JavaScript to calculate radians.
- Like moveTo() and lineTo, the arc() method is a “pencil” method. To actually draw the circle, we need to set the strokeStyle and call stroke() to trace it in “ink.”
31 more annotations...
Semantics - Dive Into HTML5 50

May 27, 11

Semantics of and new elements in HTML5

diveintohtml5.org/semantics.html html5 semantics elements dive into html5
- That leaves us with this root element:
  <html lang="en">
- The HTTP header is the preferred method, and it overrides the <meta> tag if present.
- <meta charset="utf-8" />
- Not specifying an encoding can lead to security vulnerabilities.
- 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 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.
- <link rel="stylesheet" href="style-original.css" />
- The rel="alternate" link relation has always been a strange hybrid of use cases, even in HTML 4. In HTML5, its definition has been clarified and extended to more accurately describe existing web content.
- rel="archives" “indicates that the referenced document describes a collection of records, documents, or other materials of historical interest
- rel="author
- rel="external" “indicates that the link is leading to a document that is not part of the site that the current document forms a part of.
- HTML5 includes rel="first", which was the most common variation of the different ways to say “first page in a series.”
- It also includes rel="prev" and rel="next"
- as well as rel="last"
- rel="icon"
- Also new in HTML5: the sizes attribute can be used in conjunction with the icon relationship to indicate the size of the referenced icon.
- rel="license"
- rel="nofollow" “indicates that the link is not endorsed by the original author or publisher of the page, or that the link to the referenced document was included primarily because of a commercial relationship between people affiliated with the two pages.
- rel="noreferrer" “indicates that no referrer information is to be leaked when following the link.” No shipping browser currently supports this
- rel="pingback" specifies the address of a “pingback” server
- rel="prefetch" “indicates that preemptively fetching and caching the specified resource is likel
  y to be beneficial, as it is highly likely that the user will require this resource.”
- Mozilla Firefox is the only current browser that supports rel="prefetch".
- rel="search" “indicates that the referenced document provides an interface specifically for searching the document and its related resources.” Specifically, if you want rel="search" to do anything useful, it should point to an OpenSearch document that describes how a browser could construct a URL to search the current site for a given keyword
- rel="sidebar"
- rel="tag" “indicates that the tag that the referenced document represents applies to the current document.
- 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.
- The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.
- The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. 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.
- The article element represents 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, e.g. in syndication.
- The aside element represents 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.
- The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
- The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required.
- The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. 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.
- The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.
- The mark element represents a run of text in one document marked or highlighted for reference purposes.
- There are two fundamental problems with unknown elements
- How should the element be styled?
- What should the element’s DOM look like?
- All browsers render unknown elements inline
- 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. All the elements that you would expect to be direct children of the unknown element will actually be inserted as siblings instead.
- 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. 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.
- User agents are not allowed to infer any meaning from the value of the id attribute.
- The <hgroup> element acts as a wrapper for two or more related heading elements. What does “related” mean? It means that, taken together, they only create a single node in the document outline.
- 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.
- HTML 4 has no generic heading element. It has six strictly numbered heading elements, <h1>–<h6>, which must be nested in exactly that order. That kind of sucks, especially if your page is “assembled” instead of “authored.” And this is the problem that HTML5 solves with the new sectioning elements and the new rules for the existing heading elements.
- The new “explicit” sectioning elements (like <h1> wrapped in <article>) may interact in unexpected ways with the old “implicit” sectioning elements (<h1>–<h6> by themselves). Your life will be simpler if you use one or the other, but not both.
- There are three parts to a <time> element:
  A machine-readable timestamp
  Human-readable text content
  An optional pubdate flag
- The text content can be anything you like, as long as you provide a machine-readable date/timestamp in the datetime attribute.
- What does the pubdate attribute mean? It means one of two things. 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.
48 more annotations...
Detecting HTML5 Features - Dive Into HTML5 19

May 27, 11

Detecting various HTML5 features in browsers

diveintohtml5.org/detect.html html5 dive into html5 browser compatibility
- In browsers that support HTML5 features, certain objects will have unique properties. A quick peek at the DOM will tell you which features are supported.
- There are four basic techniques for detecting whether a browser supports a particular feature. From simplest to most complex:
  Check if a certain property exists on a global object (such as window or navigator).
  Example: testing for geolocation support
  Create an element, then check if a certain property exists on that element.
  Example: testing for canvas support
  Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
  Example: testing which video formats are supported
  Create an element, set a property to a certain value, then check if the property has retained its value.
  Example: testing which <input> types are supported
- A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. HTML5 defines a set of functions (“the canvas API”) for drawing shapes, defining paths, creating gradients, and applying transformations.
- If your browser supports the canvas API, the DOM object it creates to represent a <canvas> element will have a getContext() method.
- return typeof context.fillText == 'function';
- you check whether the drawing context has a fillText() function. If it does, the canvas text API is available.
- If your browser supports HTML5 video, the DOM object it creates to represent a <video> element will have a canPlayType() method.
- If your browser supports HTML5 video, the DOM object it creates to represent a <video> element will have a canPlayType() method. This method will tell you whether the browser supports a particular video format.
- HTML5 storage stays on your computer, and web sites can access it with JavaScript after the page is loaded.
- If your browser supports HTML5 storage, there will be a localStorage property on the global window object.
- Web Workers 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.
- If your browser supports the Web Worker API, there will be a Worker property on the global window object.
- If your browser supports offline web applications, there will be an applicationCache property on the global window object.
- If your browser supports the geolocation API, there will be a geolocation property on the global navigator object.
- Checking for HTML5 input types uses detection technique #4. First, you create a dummy <input> element in memory. The default input type for all <input> elements is "text". This will prove to be vitally important.
  var i = document.createElement("input");
  Next, set the type attribute on the dummy <input> element to the input type you want to detect.
  i.setAttribute("type", "color");
  If your browser supports that particular input type, the type property will retain the value you set.
- If your browser supports placeholder text in input fields, the DOM object it creates to represent an <input> element will have a placeholder property
- If your browser supports autofocusing web form controls, the DOM object it creates to represent an <input> element will have an autofocus property
- The HTML5 microdata standard includes both HTML markup (primarily for search engines) and a set of DOM functions (primarily for browsers). There’s no harm in including microdata markup in your web pages. It’s nothing more than a few well-placed attributes, and search engines that don’t understand the microdata attributes will just ignore them. But if you need to access or manipulate microdata through the DOM, you’ll need to check whether the browser supports the microdata DOM API.
  Checking for HTML5 microdata API support uses detection technique #1. If your browser supports the HTML5 microdata API, there will be a getItems() function on the global document object.
- If your browser supports the HTML5 history API, there will be a pushState() function on the global history object.
17 more annotations...
How Did We Get Here? - Dive Into HTML5 4

May 27, 11

Brief history of HTML5

diveintohtml5.org/past.html html5 dive into html5 history
- Everything has its own MIME type. The web runs on MIME types.
- some popular web browsers will ignore the Content-Type header under certain circumstances. (This is called “content sniffing.”)
- Any page served with a MIME type of text/html — regardless of doctype, syntax, or coding style — will be parsed using a “forgiving” HTML parser
- Unless you’re serving your pages with a MIME type of application/xhtml+xml, your so-called “XHTML” is XML in name only.
2 more annotations...
Five Things You Should Know About HTML5 - Dive Into HTML5 6

May 27, 11

Introduction to HTML5

diveintohtml5.org/introduction.html html5 dive into html5
- HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation.
- HTML5 doesn’t just define a <video> tag; there is also a corresponding DOM API for video objects in the DOM.
- If your web application worked yesterday in HTML 4, it will still work today in HTML5. Period.
- HTML5 supports all the form controls from HTML 4, but it also includes new input controls.
- In HTML5, there is only one doctype:
  <!DOCTYPE html>
- all the tags defined in HTML 4 are still supported in HTML5
4 more annotations...
Video - Dive Into HTML5 1

May 27, 11

Video in HTML5

diveintohtml5.org/video.html html5 video dive into html5
- You may think of video files as “AVI files” or “MP4 files.” In reality, “AVI” and “MP4″ are just container formats.
  Just like a ZIP file can contain any sort of file within it, video container formats only define how to store things within them, not what kinds of data are stored

1 - 6 of 6

20 items/page

List Comments (0)

List Info

Pranshu Arya

6 items | 2 visits

Notes from "Dive into HTML5" online text of book.

Updated on May 27, 11
Created on May 27, 11

Category: Computers & Internet

URL:

Pranshu Arya's List: Dive Into HTML5

Canvas - Dive Into HTML5 33

Semantics - Dive Into HTML5 50

Detecting HTML5 Features - Dive Into HTML5 19

How Did We Get Here? - Dive Into HTML5 4

Five Things You Should Know About HTML5 - Dive Into HTML5 6

Video - Dive Into HTML5 1

List Info