Introduction to HTML5 Canvas | Stormin' The Castle Maybe you’ve heard of the HTML 5 Canvas API, but don’t know what it’s good for…? Maybe you’ve heard that it’s the way to go if you want to code an HTML5 game? Or maybe you’ve heard that it gives you explicit control over drawing in your browser? Let me pull back the curtain a little for you and give you some insight into what the HTML5 Canvas API is all about and what it can do for you and your web apps. In this article, I’m going to give an introductory overview of the HTML5 Canvas API. The HTML5 Canvas API is a procedural drawing API for JavaScript. Defining Paths with lines, curves, arcs and more… Filling and Stroking Paths Clipping to a Path Filling and Stroking Text Affine Transformation (Translate, Scale, Rotate, Skew) Fills using Gradients and Patterns Pixel Manipulation Offscreen Rendering Rendering Blurred Shadows Dashed Lines, Line End Caps and Joins Exporting Canvas Rendering to a PNG or JPEG If all of this sounds a little foreign to you don’t worry.
Course Catalog The HTML5 test - How well does your browser support HTML5? the figure and figcaption elements | The Paciello Group BlogThe Paciello Group Blog The figure and figcaption elements are 2 of the new elements in HTML5. Together they provide the promise of being able to mark-up, with meaning, the structure and relationship between a piece of content and associated content that acts as a descriptive label. Currently as implemented in browsers the semantics of figure and figcaption are practically non existent. What the HTML5 specification says figure element The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix. figcaption element Code example <figure><figcaption>Figure 1. ARIA to the rescue? caption
eLearning eLearning Exclusive shows to explore creative possibilities in authoring and publishing eLearning content To view this content, you need the latest version of the Flash Player. Adobe TV uses the Open Source Media Framework (OSMF) to deliver a superior video experience. Gain unprecedented creative control with new expressive features and visual performance improvements in Adobe Flash Player 10.2. Flash Player is a cross-platform browser plug-in that delivers breakthrough Web experiences to over 99% of Internet users. Featured Episode What is new in Adobe Captivate 7? Show: New in Adobe Captivate 7 Adobe Captivate 6 Created over a year ago [x] Episodes Actors in Various Gestures to Liven Up Content Tell your eLearning story more effectively using human characters. Professional Themes for Consistent Look and Feel Spend less time and effort to liven up your courses. Smart Learning Interactions Insert aesthetically designed interactive elements to eLearning content with just a click. Recent Episodes
Manipulating video using canvas By combining the capabilities of the video element with a canvas, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed. This tutorial, adapted from this blog post by Paul Rouget, demonstrates how to perform chroma-keying (also known as the "green screen effect") using JavaScript code. View this live example. The document content The XHTML document used to render this content is shown below. The key bits to take away from this are: This document establishes two canvas elements, with the IDs c1 and c2. The JavaScript code The JavaScript code in main.js consists of three methods. Initializing the chroma-key player The doLoad() method is called when the XHTML document initially loads. This code grabs references to the elements in the XHTML document that are of particular interest, namely the video element and the two canvas elements. The timer callback Manipulating the video frame data The resulting image looks like this: See also
The Tink Tank » Screen reader support for HTML5 sections HTML5 includes a handful of section elements that give documents a robust semantic structure. The header, footer, nav, article, section and aside elements give different regions of a document meaning. Amongst other things, that meaning can be understood by screen readers, and the information used to help blind and partially sighted people orient themselves and navigate around the page. Now that HTML5 is being used on mainstream websites (such as that of the UK Government), it’s interesting to see how well screen readers support this handful of elements. Thanks to Alastair Campbell and Kiran Kaja for VoiceOver testing, and Steve Faulkner for the mighty useful HTML5 Accessibility test page. Test results Test notes Of the six HTML5 elements tested, header is the least well supported. Only Window Eyes does not support any of the HTML5 elements (in any browser). NVDA reports the start of supported elements. Jaws, VoiceOver and NVDA include supported elements when navigating by landmark.
Dive Into HTML5 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. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet. 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.
From PSD to HTML: Building a Set of Website Designs Step by Step Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. Today I'm going to take you through my entire process of getting from Photoshop to completed HTML. We're going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It's a massive tutorial, so if you're going to follow through to the end, make sure you have a few hours to spare! Demos If you're like me, you like to see the end before beginning. Download the Files Additionally you can download the full HTML/CSS/Image source files here. What We're Building As you may or may not know, I've (very slowly) writing a book on WordPress theming. You can get the full layered PSD files *and* a tutorial on designing them up from our PSDTUTS Plus membership - but it will cost you $19 a month to access. Part 1 - Building the Framework and First Page Unlike previous Site Builds this tutorial is covering a decent sized template. Step 1 - Getting Ready So: Easy!
The Two Flavors of a 'One Web' Approach: Responsive vs. Adaptive [Editor's note: The following is a guest post from Igor Faletski, CEO of Mobify, which provides tools for adapting web sites for smartphones and tablets.] You’ve probably heard people say we’re living in a “post-PC world.” What does that mean for web developers? It means that 30% to 50% of your website’s traffic now comes from mobile devices. It means that soon, desktop and laptop users will be in a minority on the web. How do we deal with this tectonic shift in user behavior? For developers that means that taking a One Web approach ensures that not only does your site work on the smartphones and tablets of today, but it can be future-proofed for the unimagined screens of tomorrow. There are currently three popular approaches to developing a One Web site: using a responsive design; client-side adaptive designs; and server-side adaptive designs. Responsive Web Design Responsive web design is the most common One Web approach. Performance can also be a bugbear for responsive sites.
HTML5 Please - Use the new and shiny responsibly HTML5 & Friends HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5. Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function. Semantics: allowing you to describe more precisely what your content is. Semantics Sections and outlines in HTML5 A look at the new outlining and sectioning elements in HTML5: <section>, <article>, <nav>, <header>, <footer> and <aside>. Using HTML5 audio and video The <audio> and <video> elements embed and allow the manipulation of new multimedia content. Forms improvements New semantic elements Improvement in <iframe> MathML WebRTC
The Web Designer’s Cheat Sheet When working on a new site, most web designers are no stranger to all-nighters, copious amounts of coffee and even repetitive strain injury (ouch!). No surprise then that the best coders are lazy coders that are always looking for anything that makes coding quicker, less tedious and more fun. To make your life easier, we have put together the following web designer’s cheat sheet full of must-know time and effort saving tips for the lazy coder. Code Editor Before you even think about writing your first head tag, download an HTML code editor such as Sublime Text 2. Image by Elliot Jackson DRY (Don’t Repeat Yourself) Coined by programmers Andy Hunt and Dave Thomas in their book, The Pragmatic Programmer, DRY (sometimes called Single Source of Truth) is an important principle in web design. If you currently rely on copy and paste, do yourself a favor and start using ‘includes’, either with PHP or using a code generator such as Hammer for Mac. Use a CSS Pre-Processor Image by Jason Vanlue Emmet