Week #16: HTML 5

Page 1 of 1

10 Replies - 7507 Views - Last Post: 07 November 2010 - 08:13 AM

#1 NickDMax  Icon User is offline

  • Can grep dead trees!
  • member icon

Reputation: 2222
  • View blog
  • Posts: 9,208
  • Joined: 18-February 07

Week #16: HTML 5

Post icon  Posted 19 April 2010 - 02:33 PM


Week 15 Challenge: HTML5

Posted Image

HTML is the core markup language driving the world wide web. HTML5 is the next generation of HTML with an eye on reducing dependence upon plug-ins for rich GUI internet applications. HTML 5 add many tags to help web application developers deliver a richer user experience without the dependence upon Flash and other plug in extensions.

THE CHALLENGE: Create a project to demonstrate some of the new features of HTML5.



Some of the new features in HTML 5:
<canvas> tag -- Allows for 2D graphics in the browser.
<video> tag -- allows for embedded video

Besides this the new specification also defines many new semantic tags. For a let of the new tags see the HTML5 reference

Here is a list of additional resources you might want to check out:
HTML5 General Overview
HTML5 Browser Test
Pages that are already using HTML5
A preview of HTML5
HTML5 Cheat Sheet
New elements in HTML5


IN addition to new tags there are a host of DOM updates including new attributes, and new events.


Ideas to get started:
  • Make use of the canvas tag to draw elements
  • Embed a video in a web page using the video tag
  • Play music on a web page by integrating the media file directly
  • Create a page that uses the new article, header and footer tags
  • Use the canvas tag and Javascript to create a basic physics simulation of linear motion (like an object falling).


Is This A Good Question/Topic? 0
  • +

Replies To: Week #16: HTML 5

#2 Paul-  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 61
  • View blog
  • Posts: 260
  • Joined: 11-December 09

Re: Week #16: HTML 5

Posted 19 April 2010 - 06:43 PM

Woah!!! My Internet Explorer scores 19/160.
Was This Post Helpful? 0
  • +
  • -

#3 Paul-  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 61
  • View blog
  • Posts: 260
  • Joined: 11-December 09

Re: Week #16: HTML 5

Posted 19 April 2010 - 09:11 PM

Little example showing how to add one's own annotations to a page. Uses the "contenteditable" attribute and local storage. The browsers seem to remember the notes only when the page comes from a server, not a local file. IE gets confused when all the notes are deleted, while Firefox's behavior looks more robust.

<!DOCTYPE html>
<html>
  <head>
    <title>Annotated Poetry</title>
      <script>
	function saveNotes() {
	  localStorage.setItem("myNotes",document.getElementById("notes").innerHTML);
	  showNotes();
	}

	function showNotes() {
	  var notes = localStorage.getItem("myNotes");
	  if (notes == null || notes == "") {
	    document.getElementById("notes").innerHTML = "<ol><li>Enter a note...</li></ul>";
	  } else {
	    document.getElementById("notes").innerHTML = localStorage.getItem("myNotes");
	  }
	}
      </script>
  </head>

  <body onload="showNotes()">

    <em>Annotated Poetry</em>
    <h1>Birth of Philosophy</h1>
    <h2>by Christian Morgenstern</h2>

    <p>
      The heath sheep glares at me with frightened awe<br/>
      as though I were the first of men it saw.<br/>
      Contagious glare! We stand as though asleep;<br/>
      it seems the first time that I see a sheep. <br/>
    </p>

    <em>My Notes:</em>
    <div id="notes" contenteditable="true" onblur="saveNotes()">
    </div>

  </body>
</html>

Was This Post Helpful? 1
  • +
  • -

#4 Mila  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 33
  • View blog
  • Posts: 193
  • Joined: 28-October 06

Re: Week #16: HTML 5

Posted 20 April 2010 - 11:15 AM

Browser support (on windows):
IE 5.5 = 7/160
IE 6, 7 = 11/160
Firefox 3.5.9 = 100/160
Google Chrome 4.1.249.1045 = 118/160
Opera 10.00 = 38/160
Safari 4.0 (Windows) = 115/160
Flock 2.0.3 = 31/160

In case anyone was wondering and was too lazy to browser test.

This post has been edited by Mila: 20 April 2010 - 11:15 AM

Was This Post Helpful? 4
  • +
  • -

#5 wild494  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 86
  • Joined: 20-May 09

Re: Week #16: HTML 5

Posted 20 April 2010 - 04:23 PM

Chrome and Safari are almost head to head there. Firefox isn't to far behind. The other browsers seem to be lacking. I'm going to have to refresh my html skills.

View PostMila, on 20 April 2010 - 10:15 AM, said:

Browser support (on windows):
IE 5.5 = 7/160
IE 6, 7 = 11/160
Firefox 3.5.9 = 100/160
Google Chrome 4.1.249.1045 = 118/160
Opera 10.00 = 38/160
Safari 4.0 (Windows) = 115/160
Flock 2.0.3 = 31/160

In case anyone was wondering and was too lazy to browser test.

Was This Post Helpful? 0
  • +
  • -

#6 Melon Bread  Icon User is offline

  • New D.I.C Head

Reputation: 6
  • View blog
  • Posts: 43
  • Joined: 08-March 10

Re: Week #16: HTML 5

Posted 20 April 2010 - 06:27 PM

View Postwild494, on 20 April 2010 - 03:23 PM, said:

Chrome and Safari are almost head to head there. Firefox isn't to far behind. The other browsers seem to be lacking. I'm going to have to refresh my html skills.

View PostMila, on 20 April 2010 - 10:15 AM, said:

Browser support (on windows):
IE 5.5 = 7/160
IE 6, 7 = 11/160
Firefox 3.5.9 = 100/160
Google Chrome 4.1.249.1045 = 118/160
Opera 10.00 = 38/160
Safari 4.0 (Windows) = 115/160
Flock 2.0.3 = 31/160

In case anyone was wondering and was too lazy to browser test.


My Chrome Got A 137/160 0.o

Posted Image
Was This Post Helpful? 0
  • +
  • -

#7 johnmatthais  Icon User is offline

  • D.I.C Regular

Reputation: 12
  • View blog
  • Posts: 271
  • Joined: 21-January 09

Re: Week #16: HTML 5

Posted 20 April 2010 - 09:13 PM

Hell yes for Chrome!

Anyways, I'm looking into entering this contest, actually. Just gotta learn some WebGL and I'll be set for something interesting. :D
Was This Post Helpful? 0
  • +
  • -

#8 aniri  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 54
  • View blog
  • Posts: 657
  • Joined: 24-November 09

Re: Week #16: HTML 5

Posted 22 April 2010 - 06:21 AM

I've tried some of the new tags, but they don't work very well in any of the browsers I've used.

The music file only plays in chrome for example :(

Test it here!

And here's the code:
<!DOCTYPE html> 
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>HTML5 test</title>
</head>

<body>

	<section id="page"> 

		<header> 

			<h1>Hello world!</h1>

			<nav class="clear"> 

				<ul>

					<li><a href="#article1">Article 1</a></li>
					<li><a href="#article2">Article 2</a></li>
					<li><a href="#article3">Article 3</a></li>

				</ul>

			</nav>

		</header>
		
		<div class="line"></div>  

		<article id="article1"> 

			<h2>Article 1</h2>

			<div class="line"></div>

			<div class="articleBody clear">

				<figure> 

					<img src="http://georgianapasat.files.wordpress.com/2009/03/funny11.jpg" width="620" height="340" />

				</figure>

				<p>This article shows a nice pic of the evolution of men :P/></p>

			</div>

		</article>
		
		<article id="article2"> 

			<h2>Article 2</h2>

			<div class="line"></div>

			<div class="articleBody clear">

				<p>This article has nothing interesting in it :P/></p>

			</div>

		</article>
		
		<article id="article3"> 

			<h2>Article 3</h2>

			<div class="line"></div>

			<div class="articleBody clear">

				<p>This article has a music file!</p>
				
				<audio src="3dd.mp3" controls="controls">
					Your browser does not support the audio element.
				</audio>

			</div>
			
		</article>

		<footer> 

			<div class="line"></div>

			<p>Copyright 2010 - aniri</p> 

		</footer>

	</section> 

	</body>

</html>


Uuuu, just found a drag and drop example in html5: http://ljouanneau.co...modragdrop.html

This post has been edited by aniri: 22 April 2010 - 06:24 AM

Was This Post Helpful? 0
  • +
  • -

#9 dsherohman  Icon User is offline

  • Perl Parson
  • member icon

Reputation: 222
  • View blog
  • Posts: 641
  • Joined: 29-March 09

Re: Week #16: HTML 5

Posted 27 April 2010 - 08:14 AM

Wow... I'm really surprised at how little attention this challenge has gotten, given how many people I've seen elsewhere who are digging into HTML5 (in particular, using the canvas for games) right now.

By happy coincidence, I had just started on a one-page game/combat mechanic proof-of-concept using the HTML5 canvas right as this challenge was posted, largely due to seeing what those folks were doing with it. I've just finished polishing it to my satisfaction and Traspel Lite is now public.

The javascript behind it is a bit of a mess, but it's a successful use of HTML5 canvases nonetheless.
Was This Post Helpful? 1
  • +
  • -

#10 singularity  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 184
  • Joined: 17-October 08

Re: Week #16: HTML 5

Posted 16 June 2010 - 01:12 PM

View PostMila, on 20 April 2010 - 05:15 PM, said:

Browser support (on windows):
IE 5.5 = 7/160
IE 6, 7 = 11/160
Firefox 3.5.9 = 100/160
Google Chrome 4.1.249.1045 = 118/160
Opera 10.00 = 38/160
Safari 4.0 (Windows) = 115/160
Flock 2.0.3 = 31/160

In case anyone was wondering and was too lazy to browser test.


I did only that and my chrome scored 197/300.
Anyway I tried some tags but they didn't work for me e-g color tag
Was This Post Helpful? 0
  • +
  • -

#11 thogamer  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 20
  • Joined: 07-November 10

Re: Week #16: HTML 5

Posted 07 November 2010 - 08:13 AM

View Postsingularity, on 16 June 2010 - 12:12 PM, said:

View PostMila, on 20 April 2010 - 05:15 PM, said:

Browser support (on windows):
IE 5.5 = 7/160
IE 6, 7 = 11/160
Firefox 3.5.9 = 100/160
Google Chrome 4.1.249.1045 = 118/160
Opera 10.00 = 38/160
Safari 4.0 (Windows) = 115/160
Flock 2.0.3 = 31/160

In case anyone was wondering and was too lazy to browser test.


I did only that and my chrome scored 197/300.
Anyway I tried some tags but they didn't work for me e-g color tag



My chrome scored 231/300
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1