HTML5 browser side form validation

This snippet is a little overview of common HTML form input element, now with HTML5 attributes like placeholder, pattern, required and some of the new input types like email and tel.
The content of the title attribute is used by browsers that support HTML5 browser side validation.

Try it in a browser that supports HTML5 browser side validation to see the results!

Enhanced by Zemanta

Facebook Says “Yo Google and Apple, HTML5 Apps Will Suck Until Your Mobile Browsers Improve”

Facebook has revealed that its HTML5 site has twice as many users as its iOS and Android apps combined. But that’s actually a problem, because Apple and Google’s mobile browsers don’t support photo uploads or high-performance animation for HTML5 — features that are crucial to getting Facebook mobile site users sharing more and convincing app developers to port to HTML5 where Facebook can tax payments.

To encourage mobile browser advancement, Facebook formed the W3C community group, but Apple and Google, the two partners it needs most, have refused to join. Since these oft-rivals to the social network own the dominant mobile browsers Safari and Chrome, Facebook’s efforts may have little impact, HTML5 apps and games will stay inferior, and both Facebook and the end user will miss out.

The audience for great HTML5 apps could be huge. When Facebook stopped reporting the user counts of its iOS and Android apps to AppData, Android had 95 million MAU, iPhone had 105 million MAU, and iPad had 20 million MAU. Given their trajectory they could now have well over 235 million combined monthly active users, and so could its HTML5 site. As of a few months ago, Facebook was driving 120 million visits a month to HTML5 apps. This all means Facebook has a big financial incentive to push the advancement of mobile browser standards.

Facebook doesn’t view its HTML5 app support as a traditional mobile app platform like iOS or Android. Rather it thinks of itself as a social layer that’s integrated into iOS, Android, and HTML5, but that happens to support payments for mobile web apps. The core of Facebook’s business is advertising, but it still makes healthy revenues from the 30% Credits tax on its web game canvas. As more and more gaming shifts to mobile, though, it would help if HTML5 was good enough to support advanced apps that Facebook could then offer viral distribution for and monetize in return.

To fill us in on how it’s trying to jumpstart mobile browser progress, Facebook recently brought several journalists to its headquarters to meet James Pearce, head of mobile developer relations. This year Facebook released the open source Ringmark mobile browser testing suite that shows how many of the core capabilities necessary to build HTML5 apps does a browser support. To date, no browser or device has completed Ring 1, which includes camera access, DRM, and accelerated canvas for graphics-intensive games.

Safari and Chrome could probably become Ring 1-complete if Apple and Google really wanted them to, but they’re focused on their surprisingly successful native app platforms. Better HTML5 support would also mean developers could port their current iOS and Android apps to HTML5, giving users options beyond the app store where Apple and Google can’t monetize payments.

In hopes of persuading them to juice up their mobile browsers, Facebook created the WC3 community group to galvanize support from app developer, carriers, and OEMs, and the rest of the mobile industry. Mozilla and Opera are on board, but they don’t have enough distribution to make that significant. If Facebook can amass a enough rabble-rousers maybe it can get popular mobile browsers to do comply.

Pearce didn’t address the two other web giants with “Yo”, but he did tell us Apple and “Google [are] the audience for what this community group is producing. Its output is a series of prioritizations about what the browser vendors need to do. It’d be wonderful if in the future we saw Ring 1 browsers. Everyone in the industry has the motivation to see this be successful. We’re not swimming against the tide here. There’s not necessarily a need for us to beat anyone with a stick. They know this needs to happen.”

Apple and Google should put politics aside and the user first, devote more resources to mobile browser development, and bring mobile Safari and Chrome up to snuff. There’s certainly some shortcomings to HTML5, but Apple and Google employ some of the smartest people in the world. Even if it helps Facebook, it’s the right thing to do. Maybe one day an Instagram or even an Infinity Blade could run straight from your mobile browser.

Postscript: Unfortunately, despite their app sales revenue being dwarfed by Apple mobile hardware and Google mobile advertising, these two still have a vested interest in seeing HTML5 lag behind native apps. Don’t expect them to pour money into HTML5 until they absolutely have to.

HTML5: Background Generator

 

 

HTML5: Background Generator

 

 

Background Generator (BG) provides the ability to edit the background of any website in real-time! To give you an idea, the backgrounds of the Journal, Photos, Projects, and Labs sections of Mudcu.be were created using BG.

BG allows you to create fancy Web 3.0 backgrounds without getting dirty with Photoshop, GIMP, ect. The project includes a collection of textures (wood, rust, paper, concrete and so-on) which are combined with custom linear-gradients and colors to create a wide assortment of themes.

BG outputs valid CSS3 code, and also supports older browsers back to CSS1.  Supporting CSS1 is accomplished through the fallback of using of an embedded JPEG. Designers targeting newer browsers will also be happy; BG supports -moz-linear-gradient (for Firefox), -o-linear-gradient (for Opera) and -webkit-gradient (for Safari/Chrome) with multiple color-stops. Additionally, BG outputs DXImageTransform (Internet Explorer) code, as long as there are no more than two color-stops; IE can support multiple color-stops by using the fallback method (JPEG). Supporting browsers across the spectrum: IE, Firefox, Safari, Chrome, and Opera.

Please enjoy, and if you find it useful, post the website you designed here!

Ref: http://mudcu.be/journal/2011/03/html5-background-generator/

20 Stunning Games Built in HTML5

HTML5 is the new and updated version of HTML, the common language of the internet. It is currently in the process of being adopted around the world. But at this point we are merely seeing the surface of its possibilities. HTML5 is still in its infancy, but developers are starting to experiment with what it can do, which has created some pretty interesting results. The HTML5 specification itself isn’t supposed to be “officially” ratified for another 10 years, but millions of developers and web companies have already made the switch and many more are doing so every day. One of these experiments have led the developers to start making games in HTML5. One of the real measures of whether HTML5 will take off will be how well it will support the gaming industry.

The HTML5 specification introduces cool new features for making games, such as the CanvasVideo, andAudio elements. When HTML5 is combined with the other exciting web technologies that make up the Open Web Platform, plugin-free gaming can be taken to a whole new level. In their most basic form, HTML5 games consist ofjavascript with the new HTML5 Canvas element.

In this post we are publishing 20 Stunning Games Built in HTML5 for your Inspiration for your Inspiration. I really hope that these might inspire you to start learning about html5 and how it should be used and how to implement it

Space War

Html5 Games 2.jpg

Animals Puzzle

Crystal Galaxy

Html5 Games 3.jpg

Space Cannon

Html5 Games 4.jpg

Sand Trap

Html5 Games 5.jpg

Bubble

Html5 Games 6.jpg

Game

Html5 Games 7.jpg

Dark Age

Html5 Games 8.jpg

Game

Html5_Games_9.jpg

Html5-Helicopter

Html5_Games_10.jpg

Oribum

Html5_Games_11.jpg

Angry Birds

Html5_Games_12.jpg

Pirates Daisies

Html5_Games_13.jpg

Google Pac-Man

Html5_Games_14.jpg

Biolab Disaster

Html5_Games_15.jpg

Chain Reaction

Html5_Games_1.jpg

Agent8ball

Html5_Games_16.jpg

COCO LOCO

2011-06-18_131619.jpg

Battle For Beauty

2011-06-18_132509.jpg

Ztype

2011-06-22_135017.jpg

Solitaire

solitaire_in_html5

From http://artatm.com/2011/07/20-stunning-games-built-in-html5/

5 Awesome HTML5 Games

It’s the end of the week, and it’s been a while since I last looked at native browser-based games. I’ve therefore picked a new selection for your research purposes … it’s amazing how far the technology has progressed within a few short months.

The following examples have all been implemented using HTML5 technologies such as canvas and JavaScript. They work in most modern browsers, but most won’t work in Internet Explorer 8.0 and below. Chrome or Opera generally provide the best experience.

Biolab DisasterBiolab Disaster

While I’m far too young to remember 8-bit gaming in the 1980s, Biolab is a homage to those simpler but addictive titles from 20-30 years ago. The game is a space-themed platformer with colorful chunky sprites, great animation and sound effects. The developer, Dominic Szablewski, has also released the canvas-based library at ImpactJS.com.

Biolab is a fine game. In fact, it’s better than many released in the 80s … so I’ve heard.

Crystal GalaxyCrystal Galaxy

Crystal Galaxy is a sideways scrolling space shooter reminiscent of R-Type. However, the game’s unique in that the mouse controls the direction of the ship as well as its location.

Unusually, Crystal Galaxy doesn’t use the HTML5 canvas element. Every sprite is an individual HTML div moved around the screen. It works quickly in all browsers and is even playable in IE6! The authors at EffectGames.comalso provide free tools and libraries to help you write your own titles.

Crystal Galaxy is fun, and you won’t be able to resist another go.

Canvas RiderCanvas Rider

As you might expect, Canvas Rider is a version of Line Rider implemented using the HTML5 canvas element. The game is simple: you ride a bicycle over a series of obstacles to reach a goal — but the realistic gravity and physics make it a serious challenge.

What makes Canvas Rider more special is the online track editor and the thousands of tracks submitted by fans of the game.

Agent 008 BallAgent 008 Ball

Agent 008 Ball is a glorious-looking game of pool for one player. The objective is to pot as many balls as possible before the timer runs out.

Again, Agent 008 Ball uses the HTML5 canvas element, but it’s the photo-realistic graphics and real-world physics make the game stand out.

Pirates Love DaisiesPirates Love Daisies

Pirate Love Daisies is a Tower-Defense-like game which pushes the boundaries of what’s possible with HTML5 and JavaScript. It was written by Flash developer Grant Skinner who was commissioned by Microsoft to create a game which showed off the new technologies in IE9.

The game works well in most browsers but, as you’d expect, it’s best on a fast PC using a browser with native hardware-accelerated graphics. For the moment, IE9 beta offers the best experience.

While a browser is never likely to be the best platform for games, these titles show that a little ingenuity can yield amazing results. What’s your favorite, and have you discovered any awesome HTML5 games?

Copy from http://www.sitepoint.com/5-awesome-html5-games/#fbid=LqpE_QalsEi

Ping your blog, website, or RSS feed for Free Sitetag