Dive Into HTML5 A Beginner's Guide to Using the Application Cache Introduction It's becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers can cache pages and resources for long periods if told to do so, but the browser can kick individual items out of the cache at any point to make room for other things. HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface. Using the cache interface gives your application three advantages: Offline browsing - users can navigate your full site when they're offline Speed - resources come straight from disk, no trip to the network. The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. The cache manifest file The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Referencing a manifest file To enable the application cache for an app, include the manifest attribute on the document's html tag:
Getting Started Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, <h1>Avatar</h1> tells the browser to display the text string "Avatar" in a heading 1 format. However, the HTML tag doesn't give any information about what that text string means—"Avatar" could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user. Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo! 1. 1a. Your web pages have an underlying meaning that people understand when they read the web pages. 1b. itemscope and itemtype Let's start with a concrete example. To begin, identify the section of the page that is "about" the movie Avatar. Back to top 1d.
How to Add Google Author Tags to Your Blog for Improved Search Results Does Google know you’re the author of the content you publish online? If you answered “I don’t know,” chances are you haven’t heard of a very powerful piece of HTML markup code known as rel=”author”. When implemented correctly on websites or blogs with authored content, this small addition to your articles can have a dramatic impact on how your content appears in Google’s search results. This article will explain exactly what rel=”author” is, why you need to pay attention to it and most importantly, how to set it up on your website or blog. What is rel=”author”? Most of us are familiar with the HTML anchor tag as a way to link out to content as seen in this image: Standard anchor tag linking to Google+ account. In that traditional format, the “href” part of the markup is called an attribute of the anchor tag that references the location of the content being linked to. Now, if we add the attribute rel=”author” to the anchor tag, the link looks like this: How to Implement rel=”author”
The best of <time>s (Article updated to correct some typos noticed by commenters, and clarify some aspects.) Avid HTML5 watchers will know that the <time> element was dropped from HTML, then re-instated, with more New! Improved! semantics. As before, you can put anything you like between the opening and closing tags – that’s the human-readable bit. Previously, you could only mark up precise dates. Now, “fuzzy dates” are possible: <time datetime="1905"> means the year 1905<time datetime="1905-11"> means November 1905<time datetime="11-13"> means 13 November (any year)<time datetime="1905-W21"> means week 21 of 1905 As before, times are expressed using the 24 hour clock. You can localise times, as before. <time datetime="09:00Z"> is 9am, UTC. Durations In New! The datetime attribute “D” for days, “H” for hours, “M” for minutes and “XQ” for seconds. You can separate them with spaces (but you don’t have to). Alternatively, you can use a duration time component. pubdate
Creating a Mobile-First Responsive Web Design Introduction We're going to walk through how to create an adaptive web experience that's designed mobile-first. This article and demo will go over the following: There is even more up to date responsive guidance on our new Web Fundamentals site. Why we need to create mobile-first, responsive, adaptive experiences How to structure HTML for an adaptive site in order to optimize performance and prioritize flexibility How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation What we could do to further enhance our adaptive experience The Need for Adaptivity As the web landscape becomes increasingly complex, it's becoming extremely important to deliver solid web experiences to a growing number of contexts. However, mobile context is much more than just screen size. View the demo Structure Style Less JS
Introducing HTML5 Resource Center Many developers are now using HTML5 to build apps. It is easy to develop for and it works across a number of different platforms, with minimal or no code change. You can code in something as simple as Notepad, and instantly see it come to life in the browser on your desktop, phone, or tablet. Today we are releasing three new HTML5 resources to help developers learn from our experience and the experience of other industry leaders building HTML5 apps: HTML5 Resource Center helps you build, test, and deploy your web app.HTML5 Blog covers a wide range of HTML5 topics written by Facebook and industry experts.HTML5 Developer Group is the place for raising questions and sharing insights with fellow HTML5 developers. What HTML5 Really Means Technically, HTML5 is a World Wide Web Consortium (W3C) specification. Cross-Platform, Cross-Device Today almost every device, including phones, tablets, computers, and even TVs has a browser. A practical example of this is the web app Words with Friends.
Typographic effects in canvas My Background Ajaxian, describing the transformation matrix, inspired me to create my first Color Sphere (2007). Which immersed me into the world of colors, and graphic primitives; inspiring the creation of Sketchpad (2007-2008) in an effort to put together an application “better than Paint” in the browser. These experiments eventually led to the creation of the startup Mugtug with my long-time friend Charles Pritchard. We’re developing Darkroom in HTML5 <canvas>. Darkroom is a non-destructive photo-sharing app, combining the powers of pixel-based filters with vector-based typography and drawing. Introduction <canvas> brings Javascript programmers full-control of the colors, vectors and pixels on their screens—the visual makeup of the monitor. The following examples deal with one area in <canvas> that hasn’t gotten much attention; creating text-effects. Text-Shadows in <canvas>. Neon-rainbow, zebra-reflection—chaining effects. Inner & outer shadows in <canvas> Spaceage—generative effect.
960 Grid System HOW TO: Get Started with HTML5 Boilerplate This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. This is not your father's world wide web. Thanks to soaring smartphone sales, new tablet devices like the iPad, and the burgeoning trend of connected devices, individuals are accessing and experiencing the web in a very different way than they were even five years ago. The desktop browsing experience is also undergoing radical change, thanks to the evolution of JavaScript frameworks and the push for standards successors such as CSS3 and HTML5. Even for the seasoned developer, it can be difficult to know where to start if you want to embrace the new technologies of HTML5 and support new devices like the iPhone, Android-based smartphones or the iPad without neglecting users on older browsers. To be clear, HTML5 Boilerplate is not a framework. As a result, a ton of awesome projects have already used HTML5 Boilerplate alongside other techniques.
Drag Operations - MDC The following describes the steps that occur during a drag and drop operation. The Draggable Attribute Within a web page, there are certain cases where a default drag behavior is used. These include text selections, images, and links. When an image or link is dragged, the URL of the image or link is set as the drag data, and a drag begins. In HTML, apart from the default behavior for images, links, and selections, no other elements are draggable by default. Set the draggable attribute to true on the element that you wish to make draggable. Here is an example which allows a section of content to be dragged. <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"> This text <strong>may</strong> be dragged. The draggable attribute is set to true, so this element becomes draggable. Note that when an element is made draggable, text or other elements within it can no longer be selected in the normal way by clicking and dragging with the mouse.
HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley.
Fun with HTML5 Forms Do you remember your first form? The first time you realised you could send emails through your site, thanks to a hosted service like Bravenet (remember them?!). Or perhaps you hacked together a cgi script or even some PHP. But when that first email arrived with the subject line ‘test’ you realised that your website had now become interactive. You could now not only interact with your users, but also tailor your site based on their input. Long Live Forms Years later forms are still the primary way our users can interact with us, more than just clicking on links or triggering JavaScript events. Forms and form elements, as they appeared in the HTML4 spec, were utilitarian but hardly elegant. Feature Rich Forms With a combination of server-side scripting and AJAX we now have feature-rich forms, but all at the expense of programming complexity. Email Sign-up Form Demo I’ve created a demo of an email sign-up form you can check out at A Place for Everything