Tag Archives: html 5

Html 5 Forms tutorial – 06 – Using the Datalist input type.mp4

Html 5 Forms tutorial – 06 – Using the Datalist input type

This video shows you how to use the datalist input type to give assumption to your visitors just like the ajax application used by the google to give assumption to the people when someone types in something in the search box than the assumptions related to that word appears in below Here check out my other tutorials Link to my Html 5 tutorial (20 videos) www.youtube.com Link to my Css text cheatcodes (30 videos) www.youtube.com
Video Rating: 5 / 5

This video shows you how to use the new RANGE input type to add as slider to your web pages to make them feel more featured and advanced Here check out my other tutorials Link to my Html 5 tutorial (20 videos) www.youtube.com Link to my Css text cheatcodes (30 videos) www.youtube.com

Incoming search terms:

  • rules of evidence cheat sheet
  • jwplayer local example
  • toyota boundary sample tag
Share

HTML 5 Cheat Sheet

This is the best cheat sheet for HTML 5.

The cheat sheets are broken up into three graphics:

  • Tags
  • Event Handler Content Attributes
  • Browser Support

Each differentiates between the new, existing, and unsupported features of HTML5. The clean visual grid is easy to run through, lending itself to be a very practical tool for a busy designer/developer. The most useful aspect of it all – it is print-ready for you to pin up on your wall for quick and easy referencing.

Share

20 HTML5 sites that changed the game

By Oli Studholme on

This year HTML5 truly rocked. Oli Studholme, one of the HTML5 Doctors, runs through 20 of the best sites and covers semantics, audio, client-side web apps, canvas as well as SVG and WebGL and looks ahead to the future

2011 has been an amazing year for HTML5 and the web. We’ve seen HTML5 continue maturing, progressing to Last Call status in May and on track to be a W3C specification by 2014. The WHATWG have been busy with both improvements to HTML5, and new post-HTML5 features such as WebVTT. The progress for browsers has also been staggering, with all five main players actively pushing the boundaries of the web, and Firefox joining Chrome, Opera, and to a lesser extent Safari in frequent, automatic updates. One more to go!

On the content side, it’s really felt like 2011 has been the year the HTML5, CSS3 and JavaScript web stack has come of age. HTML5 is now the default for most developers, and impressive explorations of the new features HTML5 makes available have been coming thick and fast. Here’s a tiny sampling of some sites that rocked HTML5 this year. Quite a few of them made my jaw drop with the feeling “I can’t believe this is the native web”.

1. HTML5 For Web Developers

HTML5 for Web Developers might seem like a strange site to include here, because it’s just a version of the HTML5 specification. Historically W3C specifications have tended to be confusing, written for people who make web browsers, not websites. However, the HTML5 spec text is surprisingly readable, and peppered with examples. If you’ve had bad experiences reading W3C specs in the past, you might be pleasantly surprised.

HTML5 For Web Developers was made by Ben Schwarz and friends to be “a companion specification for web developers to use on a regular basis”. It’s a restyled version that drops the “implementor notes” for browser makers, perfect for web developers. Under the very readable print-influenced styling are some nice HTML5 additions too. It uses Offline Cache, and saving it shows a progress bar in supporting browsers using <progress> and the AppCache API. The search-as-you-type feature also works offline, and of course the search box uses type="search".

It also represents how we can all make a difference. Ben did this as a volunteer project, and the source is on GitHub. And as web devs we have the skills to do so! Which takes us nicely into …

 

 

2. Move the Web Forward

Move the Web Forward by Mat Marquis, Aaron Forsander, Connor Montgomery, Paul Irish, Divya Manian, Nicolas Gallagher, Addy Osmani and friends shows you how “you can make the web as awesome as you want it to be”. It lists a range of things for all abilities that you can do to make the web better.

The one-page site features clean HTML5 code, using data-* attributes to tie in Twitter hashtag searches. It also has an adorable but invalid doctype:

  1. <!DOCTYPE html public “i &hearts; the web”>

(The important bit is <!DOCTYPE html, which triggers standards mode.) But above all, more than any of these awes HTML5 websites, Move the Web Forward’s message is crucial. In Beyond the Blue Beanie?, Stephanie (Sullivan) Rewis comments “As the saying goes, many hands make light work. How fantastic would it be if there were so many hands that the burden didn’t fall on just a few? Together, let’s make the web rawk even harder!”. You can read more in Addy Osmani’s The Smashing Guide To Moving The Web Forward.

 

 

3. Boston Globe

The Boston Globe website is the poster child of a beautiful commercial “responsive web design” website. Built mobile-first, it behaves well in old browsers, even those without support for media queries or JavaScript. Scott Jehl of the Filament Group says “Every critical feature of the site was designed to work independent of JavaScript, but enhanced with richer JavaScript-driven interactions in capable browsers.”

Scott continues “We used HTML5 for a number of reasons. Mostly, it’s future-friendly and offered features that were useful in our feature set. For example, we made wide use of data- attributes for configuring behavioural options or associating content enhancements, we also appreciated the ability to use newer semantic elements in place of div/p/span where they made sense.”

 

 

Audio

4. Anatomy of a mashup

Anatomy of a mashup.

The audio of his mashup of Definitive Daft Punk is visualised using the <audio> API and <canvas>, with support from CSS3 transforms and transitions. Cameron says “All of the waveform and spectrum visualisation is performed in realtime, so your browser is rendering a music video on the fly!” Proving that Flash isn’t dead yet, Cameron used a custom Flash app to get the audio spectrum data.

On HTML5, Cameron says “The thing that I love most about working with HTML5 is the immediacy of development; I can edit a JavaScript file, hit refresh and see what I’ve done immediately. No compiling, no special plugins. It’s the most accessible way of getting my work out there.”

 

 

5. SoundCloud

SoundCloud is a service for recording and sharing sounds, and is a popular way for artists and DJs to share mixes and expand their fan base. It’s also a great case study in pragmatic use of HTML5. While the desktop web app uses Flash to play audio, there’s an option to use HTML5 Audio in settings. This has also allowed SoundCloud to support the iPad, and they’ve recently released an HTML5-based widget.

In addition to <audio> and the Audio API, they also use data-* attributes heavily, plus Canvas, SVG, and LocalStorage. Matas Petrikas says “We are especially proud of our use of Canvas in rendering of the widget waveform, the optimisations helped us to reduce the CPU load compared to Flash significantly”. Unfortunately there’s also some user agent sniffing (albeit for pragmatic reasons), and little use of new HTML5 elements or form attributes (although this is changing).

However, HTML5 Audio is not the default due to what Matas describes as “the poor state of HTML5 Media API implementation in web browsers”. To combat this Tomás Senart and Yves Van Goethem created the audio test suite “Are We Playing Yet?”. Matas says “The response has been overwhelming, we already have most of the browser makers participating, and we look optimisticly towards 2012!”

Additional problems in mobile devices include recording sound, the lack of widespread support for position:fixed for UI, and the lack of frequent (or any) mobile browser updates – Android WebKit is becoming the modern IE6. Because of this SoundCloud heavily promote their native apps to iOS and Android users. Matas says “we want to offer users the best experience possible, and currently the mobile browsers are still behind”. However, the future still holds promise: “we are big advocates of the upcoming device API (getUserMedia) and we hope in future to be able to capture sounds in the browser without Flash”.

These areas highlight some current problems in both specifications and browsers, but it’s certain both will continue to improve rapidly. For example Mobile Safari now supports background audio, GeoLocation and accelerometer. Even with the problems Matas says compared to Flash making the HTML5 version “was a pretty fast process. Debugging and optimising were also easier. This allows us to build and iterate faster, and in the end our users are happier too!”

 

 

6. The Wheels Of Steel

The Wheels Of Steel by Scott Schiller is two turntables and a mixer, live in the browser.

The demo uses HTML5 Audio where supported, with Flash as a fallback, via Scott’s JavaScript library SoundManager 2. It also uses some other fun stuff, including <input type="range"> for the crossfader and localStorage, plus a bunch of CSS3 for the impressive visual bling. Rather than go into detail, I recommend you read Scott’s excellent article The Wheels Of Steel: An Ode To Turntables (in HTML). I especially like this quote: “the page gracefully degrades and the core UI + content renders nicely even with JavaScript turned off. Blank or illegible pages shown to users without JS … reflects poorly on the site developers.”

 

 

Client-side web apps

7. Dabblet

Dabblet is marauding maker of awesome Lea Verou’s newest tool – a live CSS sandbox that saves as GitHub gists, and runs entirely client-side.

It uses a raft of HTML5 and related goodies, including CORS (cross-origin resource sharing), localStorage, the History API, the Selectors API, data-*,contenteditable, and inline SVG. Lea’s considering using the Drag & Drop API for resource embedding and the Offline API in the future, but says “the offline API is a huge pain in the arse”. She also tried using Web Workers for asynchronous syntax highlighting, but this made it seem slower. She’d also love to use the currently-being-specced UndoManager API once it is implemented, as “a big portion of dabblet’s code is devoted to recreating Undo/Redo”.

It also uses Lea’s controversial -prefix-free library to handle CSS vendor prefixes automatically. Lea’s considering a no-prefix-free option, or potentially adding something like LESS. While Eric Meyer has eloquently stated the case for vendor prefixes, Divya Manian, Henri Sivonen, and Lea have all written on how vendor prefixes – as currently used (copy, paste, forget) have problems. While not HTML5, it’s an interesting issue about a fundamental part of how we work, and the CSS Working Group would welcome input via www-style.

Because the target audience are web developers, Lea hasn’t worried about backward compatibility. “If it was for a less tech savvy audience where IE is a concern, I’d still use HTML5, but with proper polyfills and fallbacks in place.” On HTML5, Lea says “HTML5 means
three things for us developers: speed, universality, and openness. Making cool things is now easier than ever.”

 

 

8. Font Dragr

font dragr by Ryan Seddon allows you to preview custom fonts in the browser by simply dragging a font file from your computer into font dragr, or choosing from a list. Even better, you can use the font dragr bookmarklet and change the fonts on any site, targeting each font using a CSS selector. This lets you preview and compare fonts for @font-face use quickly, leaving the coding until you’ve decided.

It uses new HTML5 elements, the Drag and Drop API, the History API, the contenteditable attribute, and localStorage. Support for Google Web Fonts is also in the works. Ryan says localStorage is used to “do an ajax request which will get the view html, replace it in the DOM and then cache that view html in localStorage. So it only needs to do a network request the first time around.” On HTML5, Ryan simply says “it is the future”.

 

 

SVG

While not part of the HTML5 spec, some amazing sites have also been making great use of this powerful vector drawing specification.

9. Slavery Footprint

Slavery Footprint is an interactive survey that answers the question “how many slaves work for you?” to raise consciousness about modern-day slavery.

It heavily uses JavaScript to lazy-load and animate content, along with new HTML5 elements, GeoLocation and SVG. While in a modern browser the results are compelling and highly effective, sadly the site is not built with best practices. The survey form is unusable without JavaScript, and the information about slavery (“What? Slaves work for me?”) is inaccessible text-as-image. Perhaps because it didn’t start “content first”, Slavery Footprint also initially had some teething troubles, both with hosting and providing support for old browsers – the client was the USA State Department, who were still using Internet Explorer 7. Despite the problems it’s been successful in interactively raising awareness of modern slavery.

 

 

10. Kern Type

Kern Type is a type kerning game by Mark MacKay that is strangely addictive. You try to move the letters in a word to correctly kern them, and are scored on how well you did. Each word is in a different font too.

In addition to SVG with the help of the JavaScript library Raphaël to draw the letterforms, it uses data-* attributes for font data (the initial positions and the x-height), and Raphaël’s drag-n-drop for interactivity.

Mark says “I didn’t plan supporting tablets, but when I was almost finished I fired up Kern Type on my iPad and I was pleasantly surprised: not only was it almost 100% functional, the animations were smooth and the drag and drop worked great. All I had to to was add a couple of lines of JavaScript to prevent the page from scrolling and that was it.” He ended up using Raphaël drag-and-drop because with HTML5’s “I would have had to build an interface between Raphaël and my custom made javascript. I would have used HTML5’s drag-and-drop if I needed to drop over targets, as that’s notoriously difficult.”

When you complete it, have a go at the sister game Shape Type, and stay tuned for Method of Action’s first course “Design for programmers”, of which they’re both a part of.

 

 

11. SVG Girl

SVG Girl is a demo site produced for the Internet Explorer 9 release. It showed off IE9’s SVG powers with a very Japanese flip-book type animation running at 10 SVG frames per second, with sound via the <audio> element and an intro <video>.

It was made by the core members of jsdo.it, a social coding community site for creating, sharing and forking JavaScript, HTML5 and CSS code. This is run by Kayac, who describe themselves as “the most playful company in Japan” (as their great `data-*` and SVG-powered team page demonstrates).

I’ve yet to see any Japanese schoolgirls experiencing such a transformation while using Windows Phone 7.5, but hey it’s Japan — anything is possible ;) For another interesting Japanese example, have a look at The Shodo, a <canvas>-based traditional calligraphy web app, that stores stroke info as SVG paths.

 

 

Canvas

12. Peoplemovin

Peoplemovin is a personal project from Carlo Zapponi to show migration flows across the world, based around a flow diagram (inspired by Sankey diagrams). More than 215 million people, three per cent of the world population, live outside their countries of birth. Peoplemovin makes it easy to investigate migration by country, with intuitive visual representations explaining the statistics.

Carlo says “The foundation of the website is the canvas, all the interactions and visualisation happens in the space of the canvas that let me draw the connecting lines between the countries. I also used some CSS3 rules for rounded corners, shadows and glows and fonts.” In addition to the latest browsers it also works on smartphones and tablets. Carlo ended up making his own open-source toolkit called DataMovin to achieve this, which he plans to release at some stage (check the source in the meantime).

Describing HTML5, Carlo says “What’s great about HTML5 is that it is the perfect platform for creativity. You have a new crazy idea? Great! In a shorter time than ever before you can build anything into the browser without reinventing the wheel every time.”

 

 

13. Rally Interactive

Rally Interactive’s website contains a masterful example of creatively using canvas for interactivity. The triangular shapes react to hover and click in a way that until recently would have required a plugin like Flash.

As Wes Pearce says “We simply couldn’t have gotten the effect we wanted for our site without the HTML5 canvas. Support for the canvas in the latest browsers is shockingly uniform. We also put the new History API to good use, and were surprised at how quick it was to implement.”

 

 

14. Up and Down the Ladder of Abstraction

Up and Down the Ladder of Abstraction by Bret Victor is a great example of using interaction in support of text to really communicate ideas.

<canvas> examples are injected into the essay, allowing you to interactively learn about the point being made. I think this kind of thing is going to be a major part of future educational books, making ePUB 3 and HTML far superior to PDF, ePUB 2, and Kindle Format 8.

 

 

15. Sumon

Sumon is a simple addition game with great attention to detail. It’s been made by Ludei as a tech demo for their CAAT framework, which outputs to Canvas, WebGL and DOM/CSS.

As with Agent 008 Ball and Pirates Love Daisies from 2010, it’s a great example of the combination of canvas and audio plus talent – a fun game that runs right in your browser. It’s also available in the iTunes, Chrome and Android stores, plus as a Facebook game, all from the same codebase. That’s the kind of reach native apps just don’t have.

Iker Jamardo writes “JavaScript and HTML5 features are great game development platforms. The main disadvantage we found is poor performance in mobile device browsers.” While Ludei believes this will improve eventually, they’ve developed the Cocoon and CocoonJS frameworks to achieve native performance on mobiles. Iker concludes “we deeply believe JavaScript and HTML5 are great for game development and multiplatform deployment”.

 

 

WebGL

WebGL is again not part of the HTML5 spec – it’s a separately specified API that allows 3D graphics to be used in <canvas>. However, for crazy eye candy it’s hard to beat. Rather than go into details, let’s just see some examples:

16. HelloRacer

HelloRacer by HelloEnjoy, a sweet drivable F-1 race car.

 

 

17. WebGL Shader — Travelling wave fronts tech demo

The travelling wave fronts tech demo is a “fine-tuned 8bit reaction-diffusion system with added traveling wave fronts and subpixel decay”. Mesmerising.

 

 

18. ROME “3 Dreams of Black”

ROME “3 Dreams of Black” is an interactive music video by Chris Milk and friends, to music by Danger Mouse, Danielle Luppi and Norah Jones.

 

 

Don’t miss their tech demos and video about the technology behind the movie.

You can learn more about WebGL, and see more amazing examples, in Dev.Opera’s “An introduction to WebGL” (and “Porting 3D graphics to the web”) by Luz Caballero. Opera is also preparing a comprehensive list of WebGL tutorials, coming “very soon”.

The future / the present

There’s a lot of amazing stuff coming to the web stack too. Let’s look at just one example – the WebRTC (Real-time communication) specification (getUserMedia). This allows you to “exchange real-time, interactive media, including audio and video”, with a major use being video chat between browsers. Opera also has experimental support for getUserMedia in developer builds for both desktop and mobile.

19. Browser-based video chat

Ericsson Labs has been working on this for a while, and has a WebKit library for download (more info and tutorial).

 

 

20. Face detection/moustache demo

Opera also has experimental support for WebRTC, and the DeviceOrientation Event specification, in a custom build called Opera Labs Camera and Pages. Rich Tibbett wrote Native webcam support and orientation events on using both specs, and made a demo using WebRTC that performs face detection on live video. If that isn’t awesome enough, it also allows you to add a moustache. To live video. In the browser.

 

 

Bravo, interwebs. Bravo.

Conclusion

As you’ve no doubt noticed by now, despite grouping these websites by an HTML5 technology they use, they’re all using way more than just one. While not everything is ready for adoption, there’s a lot of goodness in the HTML5 specification (and other web stack specs like SVG and WebGL) that you can use right now. Keep up to date and find out more at HTML5 Doctor, the W3C’s Planet HTML5 and on Twitter with @HTML5.

The “HTML5” buzzword has been a double-edged sword, but it’s helped the bandwagon gain momentum and made an impression on management too. Hopefully with this pile of inspiration you’ll return to the first two sites in the article, go forth and make awesome!

Incoming search terms:

  • html5 is possible to kern
Share

HTML 5, Amazon and The Future of SEO

Amazon’s recent announcement that it will support HTML 5 in their new eBook format – Kindle Format 8 (or KF8) – to be used by its Kindle Fire, highlights the growing trend of websites adopting HTML 5 as the accepted future web standard.

With this new following will come more opportunities for the pro-active SEO to take advantage of a number of features of this new format to gain the edge over the competition.

There’s been plenty of speculation in the online world about the opportunities inherent in the new HTML tags, so because of that, I won’t belabor that point.

But what I would like to do is highlight the very important search optimisation opportunities that can be gained from semantic HTML 5 tags…right now.

Link Architecture Optimisation with HTML 5

Google has already rolled out support of more semantic <a> rel attributes – part of HTML 5 – to their Search Engine Result Pages (SERPs).

For example, Google’s support of rel=”next” & rel=”prev” was publicised in September (confirming behaviour already spotted in US SERPS while the testing for this feature was carried out), allowing different optimal SERP listings to be generated from the same website based on a searcher’s query with very fine grained control.

As another example, Google’s rel=”canonical” tags have been around for a while now, and can also be considered an extension of the semantic markup promoted by HTML 5.

Google’s interpretation of the tag is now becoming more complex, as the meta <link> tag concept of a ‘canonical page’ can also be indicated in a link rel attribute for an <a> tag.

Google is therefore inferring meaning from the implication of the tags that is more sophisticated than their original purpose of simply providing an alternative to a 301 redirect for webmasters who know they have a duplication issue.

This increased flexibility of interpretation is the area of optimisation that can immediately be taken advantage of.

Simply by combining these options, webmasters can now deliver re-purposed content targeting long tail terms that would otherwise struggle to perform with the minimum of supporting linkbuilding.

So just how does this work? Here is a practical example – we’ll look at a property website in order to spell out the process.

A Semantic SEO Example

The core content delivered in the day to day course of delivering an online property availability service is the individual property listing pages.

Before Google’s announcement of their more sophisticated handling of canonical tags, in order to build pages targeting long tail terms, unique content written around the terms would need to be produced for each of the terms – and when you’re targeting long tail, you’re targeting a lot of long tail terms to deliver sufficient traffic uplift.

So, lets say that 300 pages of 150 – 200 words of content is required to be researched and written.

This means that the CMS delivering the website would need to be adapted to deliver subsets of the main listing content that was relevant to the long tail terms, in order to combine and create a landing page that can both capture traffic and convert visitors with reasonable success.

Unfortunately, while a good strategy in principle, this approach is often shot down before it get started because of the resource-heavy content generation requirement and a feeling that the site quality is being ‘diluted’ (a common client concern with this approach).

After all, if one of 300 or so targeted search terms is ‘Commercial Property to Let in Walthamstow’ it’s unlikely that sufficient research will be undertaken to make it of use to searchers arriving on that term.

However, by setting the rel=”canonical” tag for pagination links to a ‘View all’ page, Google will return the ‘View All’ page for relevant top level search terms (‘Commercial Property London’, say) and treat the paginated pages as non-duplicate for searches highly related to their specific content.

Meaning our ‘Commercial Property to let in Walthamstow’ page can be targeted as a paginated page generated by a ‘Walthamstow’ search filter, say, without requiring any additional unique content.

This means we can use the content production resource for more valuable site optimisation: such as revamping and improving content on high value keyphrase landing pages, developing linkbait worthy content, delivering better quality information on all listed properties, etc, etc.

Oh, and we might pick out a few of the longer tail terms to get special treatment when we know we have the resources to back up the generation of some top quality content.

So, who says we need to wait for ‘the Future of HTML’? Why wait? We’ve just optimised our site for HTML 5.

Neat.

Incoming search terms:

  • seo html5
  • SEO SERP html5 structure
Share

HTML5 and CSS Lessons by Randy

HTML 5 coupled with CSS is emerging as the new hot development language. I am delighted to announce that we have created six complete lessons that cover the most interesting and dynamic new features of HTML 5 that are ready to drop into a web development or intro programming course. Each lesson comes with instructor PowerPoint slides, a complete reading assignment with hands-on examples, including the files and assets to use in each assignment. A single lesson has enough content for a 75-100 minute class session, and the hands-on examples are great for either a lab session or homework assignment.

The six lessons are:

Lesson 1 – Defining HTML 5
Lesson 2 – Fundamentals of HTML 5, XHTML, and CSS
Lesson 3 – Introduction to CSS Layout
Lesson 4 – Using HTML 5 Markup
Lesson 5 – Working with Canvas
Lesson 6 – HTML 5 Multi-Media and Drag and Drop

This content is available to faculty (and students/hobbyist/pros) at no charge and can be downloaded from here: http://www.mis-laboratory.com/faculty/

With these lessons it is easy to update your curriculum (or resume) with the latest technology. Not faculty or a student? These lessons are a great way to self-study and get up to speed on the latest development language.

Share

Down but not out: Flash in an HTML5 world by Tim Anderson

Anyone hoping to pronounce Flash dead as Adobe transitions to the brave new HTML 5 world will have been disappointed, based on the company’s MAX Conference last week.

That said, there is evidence of a partial transition towards HTML. The big story in this respect is Adobe’s acquisition of Nitobi, creators of the PhoneGap tool for building mobile applications from HTML and JavaScript. Nitobi chief executive Andre Charland gave a brief demonstration of PhoneGap on stage at MAX.

Adobe also talked up Edge, its tool for creating HTML 5 animations which is now in its third preview, and showed CSS Regions and CSS Shaders, two projects it has worked on in the form of contributions to the open source Webkit HTML engine, and in the case of CSS Shaders a submission to the W3C.

Bend this: A CSS Shader example showing an unfolding map

CSS Shaders is influenced by the work Adobe did on Pixel Bender for Flash, and enables CSS Filter Effects to be extended with shaders that process the 3D geometry and the colour of pixels.

At a MAX session, Adobe also showed how Flash Professional, its designer-oriented authoring tool for Flash, is becoming an authoring tool for
HTML as well. Subject to limitations, you will be able to publish a Flash Professional project to HTML and JavaScript, with partial conversion of
ActionScript to JavaScript, in the next major Flash Professional release.

Is Adobe then retreating from Flash? Not so fast. Certainly there was more HTML content at MAX than in previous years, and these sessions were among the most popular, but if you look in detail at the session list, you will find that Flash predominates. The biggest splashes at the day two keynote were Flash-related.

The Flash content at MAX was dominated by a trio of new technologies delivered in Flash Player 11 and AIR 3. AIR (Adobe Integrated Runtime) creates a means to run desktop and mobile apps that use Flash as a runtime engine.

The first is Stage 3D, formerly known as Project Molehill, a 3D hardware-accelerated API for Flash. An implementation for mobile is expected early next year. Coding for Stage 3D is a specialist task – as with other 3D libraries such as Open GL – but the results are impressive. In the MAX
day two keynote Epic Games announced that its Unreal Engine for game developers is coming to Flash. “We chose as our demo a fully playable level from Unreal Tournament 3 and it turned out to look even better than the version we shipped on Xbox 360 and PlayStation 3, with improvements like global illumination, better shadows, and god rays!” said Epic vice president Mark Rein.

A related project is the open-source Starling Framework, which uses Stage 3D for accelerated 2D graphics and is easier to use.

The second key new feature is the Captive Runtime for AIR. This lets you bundle the Flash player into a native executable, in a similar manner to the packager Adobe created for iOS to overcome Apple’s Flash ban. The late Steve Jobs may have done Adobe a favour. Despite the inherent inefficiency of shipping each app with its own player, the captive runtime makes AIR more attractive to developers, since from the user’s perspective it removes the Flash dependency. Captive Runtime support is in AIR 3 and works for all supported desktop and mobile platforms except iOS, which still has the packager. Currently the iOS packager is apparently better optimised, but this will change in future updates.

The third feature of the trio is that native extensions are now available for AIR, making the runtime truly extensible for the first time. Adobe’s implementation makes these challenging to write, but easy to consume, since they are packaged as libraries, which from the Flash end look similar to a .SWC, a standard Flash and ActionScript library. ActionScript is the Flash programming language, a kind of forked version of JavaScript.

Native extensions have an .ANE extension. Internally, a native extension has an ActionScript interface, plus one or more implementations for different platforms. Each implementation is also written in ActionScript, but can also make use of an ExtensionContext class to access native code. The native libraries themselves are typically written in C or C++, or Java in an Android library, though other languages are possible and one of Adobe’s examples calls Microsoft .NET. They are not sandboxed. The main limitations are that they cannot re-implement ActionScript classes, and placing native user interface controls on the Flash surface is not supported.

There are several areas where native extensions will prove useful. These are making use of otherwise inaccessible device features, reusing legacy code or existing libraries, and improving the performance of critical code. Since they are easy to distribute and have developer-friendly ActionScript APIs, we can expect to see a proliferation of native extensions some of which will be widely adopted. Taken together, these three technologies make AIR more interesting than before, particularly as a cross-platform mobile toolkit. It is significant that the six new tablet apps, including Photoshop Touch, that were previewed by Adobe at MAX are built with Adobe AIR but delivered using the captive runtime, and
make heavy use of native extensions.

MAX attendees also heard about new features coming to future versions of Flash. Among the most significant is concurrent programming for ActionScript. This will look similar to JavaScript’s web workers, and while it will not give developers complete freedom to use multiple threads, it will be relatively safe and easy to code.

What about PhoneGap then, which is also a cross-platform toolkit for mobile? A good question, and one that Adobe will only answer in vague terms. “If you are building a rich game, use Flash. If you are building data-driven applications that are fundamentally pulling source from an end service into an application you can use HTML 5 and PhoneGap to get on those devices,” Adobe’s senior vice president David Wadhwani told me. Note, though, that he said “can use” to allow for the fact that mobile AIR also covers that second scenario, though currently on a smaller range of devices.

Follow the money

Adobe is hedging its bets, and the fact that it remains the Flash company may make it an uncomfortable home for Nitobi employees
with their commitment to HTML and JavaScript rather than proprietary runtimes. Charland is aware of that tension, though he remarks in a blog post: “If you doubt Adobe’s intentions, it’s important to consider how Adobe makes money – it’s from tools, services and solutions, not shipping runtimes.

“Flash also remains important for web developers who need a consistent cross-browser platform for rich applications. Some came to MAX anxious for reassurance that Flash will not be abandoned. “It would be like returning to the browser wars,” one developer told me.

That reassurance was evident at MAX. Flash is not dead, though it is becoming a specialist resource rather than something to stick on web pages to spice them up. Thank goodness

http://www.theregister.co.uk/2011/10/13/flash_not_dead_for_adobe/ By Tim Anderson

Share

20 Online HTML 5 Video Players

 
The <video> element is really a long-awaited and in all likelihood one of the most talked about function within HTML5.
We can easily embed videos into webpages with no plugins, using the <video> component (which is right now contained in latest variations associated with Firefox, Safari & Chrome & Opera). The major problem is that not all the surfers support exactly the same codecs (while Ie does not assistance any kind of). This is when javascript comes to help. It sits along with the actual <video> tag supplying better movie regulates along with a fallback in order to flash with regard to old surfers.
Listed here are twenty useful HTML5 movie gamers that allow you to easily embed movie in to web pages and ensure in reverse match ups.

This is a MooTools custom controls library for the HTML 5 video element. It features: playlist and subtitles support, settings panel for enabling or disabling various options such as looping, captions and auto-hiding of controls bar.

SUblimeVideo is an HTML5 video player that will allow you to easily embed videos in any page, blog or site using the latest modern web standards.

FlareVideo is an open source, jQuery-powered HTML5 video player. The player supports fullscreen mode and has a fallback mechanism into a Flash-driven player.

Video JS is a javascript-based video player that uses the HTML5 video functionality built into advanced browsers. In general, the benefit of using an HTML5 player is a consistent look between browsers.

Projekktor is a free JS wrapper for the new HTML5 video and audio elements. It solves cross browser and compatibility issues, adds some eye candy to the native players and provides powerful non standard features.

Kaltura has developed a full HTML5 Video Library – in use by Wikipedia – that works in ALL major browsers, even IE. The library supports a seamless fallback with Flash based playback (using Kaltura’s media player – KDP3) or Java Cortado for browsers that don’t yet feature HTML5 video & audio support.

OIPlayer is a HTML5 audio and video player with fallback to Java and Flash. OIPlayer ‘attaches’ itself to all video and/or audio tags it encounters. Besides the general configuration of the plugin itself, it uses for each individual tag the attributes the respective tag has like poster, width, controls, autoplay etc.

jme is an HTML5 audio / video development kit with Flash and VLC Fallback, which focuses on flexibility, intuitive DOM-API and semantic code.

Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically, without the use of JavaScript or browser-sniffing.

Akamai has released a new Open Video Player for HTML5 <video> developer toolkit, aimed at simplifying the task of creating flexible HTML5-based video player applications for delivery of HTTP content.

This HTML5 video player is fairly straight forward and offers all of the basic controls you’d expect a video player to have. The player controls are visible when the video is paused or when the user’s cursor is over the video.
Compatibility: Chrome, Firefox, Opera, Safari

The JW Player for HTML5 is a fully skinnable and configurable player based on the new <video> tag found in HTML5. It is built using javascript (jQuery) and enables a seamless fallback to the popular JW Player for Flash.

The Open Standard Media (OSM) Player is an all-in-one media player for the web. It is an industry changing, open source (GPLv3) media player that is written in jQuery to dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash.

YUI HTML5 Player is a YUI 3 widget that creates a video player using the HTML5 video tag and JavaScript that is based on YUI 3. It was started as entry to the YUI 3 Gallery Contest in March 2010.

The html5media project consists of a single, minified Javascript file that is used to detect your browser’s HTML5 video capabilities. Any video tags that cannot be played are dynamically replaced with a Flash video player.

Developed by Rasmus Andersson, lead creative & designer at Spotify. Psd sources are available for the progress bar and icons, so you can customize the player to your needs.

The jQuery UI Video widget enhances your HTML5 <video>

This is a tutorial on building an HTML5 video player in Javascript. It’s meant to give you a basic understanding of the different options you have with the new video tag in HTML5, and the javascript needed to create some of the typical video controls you’d find in other players.

In this article we’ll explore building a interactive set of controls using a JavaScript UI library (Glow), for playing a video file. It could easily be adapted to jQuery UI or similar.

A toolkit to use and control HTML5-video with the current mootools release – and two extensions of Fx.Slider: A video timeline and a volume slider.

Incoming search terms:

  • html5 movies online
  • 20OnlineHTML5VideoPlayers|HTML5Samples TutorialsandNews
  • html5 video online
Share
Simple Example of HTML5 Local Storage

Simple Example of HTML5 Local Storage

In this video, we’re going to show you how to create a working, though very basic, to-do list in just a few minutes. We can create advanced browsers “remember” what we type, even after it is closed or is refreshed using HTML5’s local storage.

While obviously not supported across all browsers, we can expect this method to work, most notably, in Internet Explorer 8, Safari 4, and Firefox 3.5. Note that, to compensate for older browsers that won’t recognize local storage, you should first test to determine whether window.localStorage exists.

HTML5 support

HTML5 support

Source Code: http://jsbin.com/iqura/4/

Incoming search terms:

  • html5 local storage example
  • localstorage example
  • html5 localstorage example
  • window localstorage example
  • local storage html5 example
  • local storage example
  • localstorage html5 example
  • html5 local storage examples
  • html 5 local storage example
  • localstorage sample
Share
Play Quake on a browser with HTML 5 – announced by Google

Play Quake on a browser with HTML 5 – announced by Google

In the next few years, HTML5 standard will be a standard across most of web pages.  Until now, many people have wondered whether HTML5 truly has the power to beat Adobe’s Flash of its perch; Google today has shown us that it really does.

In an interesting twist, Google has shown off how HTML5 can run the first person shooter, Quake, in a browser.  The reason this is an interesting twist is because Google announced that Chrome would come bundled with Flash.

According to TechCrunch, Google “started with the existing Jake2 Java port of the Quake II engine, then used the Google Web Toolkit (along with WebGL, WebSockets, and a lot of refactoring) to cross-compile it into Javascript. You can see the results in the video above — we were honestly a bit surprised when we saw it pushing over 30 frames per second on our laptops (your mileage may vary)! “.

You can try out the port by visiting the Google code page.  As of right now, the only supported browsers are Safari and Chrome, but expect IE 9 and others to be compliant in the near future.

Share

HTML tags that will not be supported on HTML 5

Below are some old HTML tags that no longer exist in new HTML 5

<acronym> Tag

The <acronym> tag was used to define acronyms in HTML 4. An acronym can be spoken as if it were a word, example NATO, NASA, ASAP, GUI.

<applet> Tag

The <applet> tag was used to define an embedded applet. You can use the<object> Tag instead of it now!

<basefont> Tag

The <basefont> tag was used to define a default font-color, font-size, or font-family for all the text in a document. But we can use CSS for this purpose now!

<big> Tag

The <big> tag was used to make text bigger.

<center> Tag

The <center> tag was used to center align text and content. We can use CSS for this purpose now.

<dir> Tag

The <dir> tag was used to define a directory list. But we can still use the <ol> and <ul> Tags.

<font> Tag

The <font> tag was used to define font face, font size, and font color of text. It was among the most used tags in HTML 4 but we have to use CSS for this purpose now.

<frame> Tag

The <frame> tag was used to define one particular window (frame) within a frameset.

<frameset> Tag

The <frameset> tag was used to define a frameset, which organized multiple windows (frames).

Note: The Frame and Frameset tags are removed because it hinders the usability of the web-page. Also, it has negative SEO implications.

<noframes> Tag

The <noframes> tag was used to display text for browsers that do not handle frames. When frames are not supported then there is no need for noframes.

<s> Tag and <strike> Tag

The <s> and <strike> tags were used to define strike-through the text. We can still use <del> instead. Also, it can be handled using CSS.

<tt> Tag

The <tt> tag was used to define teletype text. But now we can use CSS for this purpose.

<u> Tag

The <u> tag was used to define underlined text. But now we need to use CSS.

<xmp> Tag

The <xmp> tag was used to define pre-formatted text. But we can still use the <pre> tag for this purpose.

Share
4 visitors online now
1 guests, 3 bots, 0 members
Max visitors today: 12 at 03:55 am UTC
This month: 36 at 10-21-2014 05:47 pm UTC
This year: 81 at 09-10-2014 08:17 am UTC
All time: 163 at 05-18-2012 06:03 pm UTC
Get Adobe Flash player