background preloader

Dive Into HTML5

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:

Wickedly Smart | Software Mastery, the Fun Way Dive Into HTML5 Mobile Web & HTML5 for mobile devices analysis, news and source code 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.

Head First JavaScript Programming | WickedlySmart by Eric Freeman and Elisabeth Robson This brain-friendly guide teaches you everything from JavaScript language fundamentals to advanced topics, including objects, functions, and the browser’s document object model. You won’t just be reading—you’ll be playing games, solving puzzles, pondering mysteries, and interacting with JavaScript in ways you never imagined. And you’ll write real code, lots of it, so you can start building your own web applications. Prepare to open your mind as you learn (and nail) key topics including: The inner details of JavaScriptHow JavaScript works with the browserThe secrets of JavaScript typesUsing arraysThe power of functionsHow to work with objectsMaking use of prototypesUnderstanding closuresWriting and testing applications What’s so special about this book? We think your time is too valuable to waste struggling with new concepts.

Changing Times For Web Developers – 6 Tips You Should Read To Survive The context of this post is about the changing times for a web developer, and I see a lot of web developers still lagging behind especially in the .NET world. If you haven't yet started mastering your art and adapting to the changing trends, you should start today. Think about crafting your web applications properly. Use commonsense to mix and match based on scenarios. Here we go with 6 Tips to be a responsible web developer, and to stay on top of what you do. 1 – Learn to write better JavaScript and CSS If you don’t write proper JavaScript and CSS, you are dead. Familiarize yourself with a higher level abstraction language to write JavaScript once you are comfortable with plain Javascript – Like CoffeeScript or TypeScript. JQuery – Alright, you know this, don’t you? More Oh yes, start learning TypeScript especially if you have a Microsoft technology/C# background. 2 – Familiarize yourself with a Responsive Framework My personal choices include Twitter Bootstrap and Zurb’s Foundation.

Ambilight for the “video” tag inShare0 Some high-end Philips TV sets have a cool feature, Ambilight. Basically, it is LED lighting that changes its color dynamically, depending on the television picture’s color. It is such a pleasure to watch movies on an Ambilight-enabled TV! There are some implementations of such lighting in Adobe Flash. Why can’t we, web masters, do the same thing using scripts? Ambilight for the <video> tag (Firefox 3.5, Opera 10.5, Safari 4, Google Chrome 4) Let’s take a look at how it was done Algorithm Before writing the script for Ambient-like lighting, we need to make an algorithm for that. The real Ambient lighting works as follows: There are many super-bright LEDs on the TV set’s back panel, and they emit light of different colors. Therefore, we should do the following: determine each LED’s color for the current picture frame and paint the lighting. Determining the LED color To make the task easier, we’ll assume that there are only 5 LEDs on each side of our “TV set”. Advertisement Mask 0inShare

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”

Related: