Skip to main content

An introduction to the new tags in HTML 5

Otrzymano od użytkownika krzychukula za pośrednictwem Czytnika Google:

przez Web Designer - Defining the internet through beautiful design autor: Steve Jenkins dnia 09-08-12

final1
THE LATEST BROWSERS ARE ALREADY IMPLEMENTING SOME OF THE UPCOMING HTML 5 SPECIFICATIONS, SO IT’S A GOOD TIME TO START EXPERIMENTING WITH WHAT THE NEXT WEB WILL BRING

HTML 5 IS still working its way through the standards process, but some of its features are already in your browsers. If you’re using the latest Opera, Firefox or Internet Explorer, you’ve already downloaded a browser that can handle one or two pieces of the next generation of the web. With the standard still months or even years away, it’s not surprising that each browser offers a different set of HTML 5 components. Some just offer new JavaScript APIs, while others are starting to include intriguing new tags, like the <canvas> drawing surface. It’s worth getting to grips with these new features, as they’re going to be important web design tools in the future – but remember that they’re not end-user ready. As the specification
gets finalised, what’s in your browser is likely to change. The skills you’ll pick up now, however, will be ready for the final HTML 5, whenever it arrives.

Author: Simon Bisson | Originally appeared in Issue 149

01 Drawing with <canvas>
HTML 5’s <canvas> tag lets you draw complex 2D images using simple JavaScript commands. You can start with basic shapes, and can quickly combine these to make more complex illustrations that can be animated. Remember to add content that can be displayed by browsers that can’t use <canvas> inside the <canvas></canvas> tags.

<html>
<head>
<title>HTML 5 demo</title>
<script type=”text/javascript”>
function drawCanvas()
{
var canvas = document.getElementById(‘testCanvas’);
var ctx = canvas.getContext(‘2d’);
ctx.fillStyle=’#FF2200’;
ctx.fillRect(10,10,100,100);
}
</script>
</head>
<body>
<body onload = “drawCanvas();”>
<canvas id = “testCanvas” width =
“300” height = “300”>Your browser does not support the
canvas tag.</canvas>
</body>
</html>

02 Drawing a square
step2
That created an area to draw objects. We’re starting with a coloured square, which we’re drawing using the fillRect JavaScript method. We can use fillStyle to set the colour of the object. HTML 5 supports other primitive image shapes,
which we can combine to make more complex objects.

03 Adding a circle
Drawing circles is harder than squares or rectangles. Here, we have to use an arc function to draw and fill a circle. One problem is that HTML 5’s drawing API expects angles to be expressed in radians, so we’ll need to convert our 360
degrees of arc using JavaScript’s built-in mathematical functions. Add this code to the canvas JavaScript block:

ctx.beginPath();
var x = 120
var y = 120;
var radius = 50;
var startAngle = 0;
var endAngle = (Math.PI / 180)* 360;
var anticlockwise = true
ctx.arc(x,y,radius, startAngle, endAngle, anticlockwise);
ctx.fill();

04 Blending colours
HTML 5’s drawing APIs let you use an alpha blend to mix colours. You can do this by choosing an appropriate fill style. Here, we’re using an RGB colour mix, and all we need to do to specify alpha blending is to specify ‘rgba’ instead of ‘rgb’. The transparency level is a number between zero and one.

ctx.fillStyle = “rgba(0, 0, 200, 0.5)”;

05 Paths to pictures
step5
The secret to drawing shapes in HTML 5 is using paths. We’ve already used a startPath function to draw our circle, and we can change the shape we’re drawing by using 270 degrees. Add a closePath function after you draw your arc (and switch to draw clockwise) to get this image.

06 Stroke versus Fill
Paths can be treated as strokes – for line drawing – or fills. Strokes are simple lines that follow the path described by a set of drawing instructions. You can move between points without drawing a line using a moveTo() function, allowing
complex shapes to be drawn with one single stroke() function. This code adds two concentric triangles to our drawing in just one action.

ctx.beginPath();
ctx.moveTo(35,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.lineTo(35,50);
ctx.moveTo(45,50);
ctx.lineTo(90,65);
ctx.lineTo(90,35);
ctx.closePath();
ctx.stroke();

07 Colouring strokes
step7
We’ve already used fillStyle to set colours and apply alpha blending to the shapes in our canvas drawing. We can do similar things with our line drawings, using strokeStyle to set colours for the canvas stroke-drawing operation. Set strokeStyle to rgb(0, 300, 0) to draw your triangles in green.

08 Gradients
We’ve already used a local transparency value, but you can do a lot more with colours using the HTML 5 canvas API. One option is to use a colour gradient, where you can set the shape and direction of a gradient, either using a linear
or radial gradient. The result can be a very simple drawing but have a very effective effect – perhaps a stylised sunset or a forest fading off into the horizon.

var radialgradient = ctx.
createRadialGradient(75,75,0,75,75,100);
radialgradient.addColorStop(0,’rgb(200,0,0)’);
radialgradient.addColorStop(1,’rgb(0,0,200)’);
ctx.fillStyle=radialgradient;

09 Go further with <canvas>
step9
JavaScript drawing commands can be used to produce simple animations, and can even interact with the mouse or the keyboard – letting you replace Flash with animations that are built into the page HTML rather than loaded into a plug-in player.

10 Web Forms 2.0
step10
HTML 4’s forms are a familiar, if limited, way of getting info from a web browser to a server. HTML 5 builds on the old forms standard to deliver a more flexible way of working. Opera is the first browser to implement Web Forms 2.0, taking advantage of features like validity checking.

11 Validity checking
Adding a validity checker to a Web Forms 2.0 form doesn’t require any JavaScript. All you need to do is set the input type, with type options including URLs and email addresses. Set the form to be ‘required’ and the browser will alert the user if there is an error. You can add your own error message by hooking an alert to the field’s oninvalid event.

<form>
<label>Home page: <input type=”url”
name=”webaddress” required=”required”
oninvalid=”alert(‘You must enter a valid web page
address.’); return false;”>
</label>
</form>

12 Minimum and maximum
step12
Web Forms 2.0’s validity-checking features aren’t just for checking whether your users have typed in an email address when asked for one. You can also use them to handle minimum and maximum values for a field, which can even be a date range. Opera will render this code as a field with up and down  arrows that can be used to select a time inside the range specified.

<label>Select a time during business hours:<input type=”time” min=”09:00” max=”17:30”></label>

13 Stepping
One-minute intervals are a bit on the short side for a
booking system, so we’ll need to modify the default. Web
Forms 2.0 includes a step operator, which we can use to
control how Opera’s up/down control works. While the
Opera controls use a one-minute default, the minimum
step for a time input is one second. Set step to 1,800
seconds to allow users to pick appointments with 30-
minute intervals.

<label>Select a time during business hours:<input
type=”time” min=”09:00” max=”17:30” step=1800>
</label>

14 Complete with datalists
Modern browsers (and the Google toolbar) often store commonly used form responses. With Web Forms 2.0, sites can keep their own lists of responses, using datalists associated with form inputs. This code snippet will hold
a list of site URLs that can be used as a quick-pick list for a URL input field, or your user can type in a URL that isn’t on the list.

<input type=”url” name=”location” list=”urls”>
<datalist id=”urls”>
<option label=”Site 1” value=”http://www.site1.org/”>
<option label=”Site 2” value=”http://www.site2.org/”>
<option label=”Site 3” value=”http://www.site3.org/”>
<option label=”Site 4” value=”http://www.site4.org/”>
<option label=”Site 5” value=”http://www.site5.org/”>
<option label=”Site 6” value=”http://www.site6.org/”>
<option label=”Site 7” value=”http://www.site7.org/”>
</datalist>


Dostępne działania:

Posted via email from krzychukula's posterous

Comments

Popular posts from this blog

Course Review: The Bitfountain iOS 8 with Swift Immersive

This is second big iOS learning project. For first one read iOS Programming book review. As I only have two of them done I have to compare them somehow.

I am mindful that it took me a really long time to finish it (since last autumn). For a couple of months this year I didn't even have the internet to learn it, so it could not be helped. But last half of the June I've spent watching the videos every day and managed to finish it before any new internet problems.

So how was it?
In my opinion, it's great if you're starting out. There are a lot of basics, and seeing how to do things in XCode just makes your learning much easier than looking at the photos in the book. On the other hand, learning is more shallow and it is much easier to just follow the videos and learn only the basics without bigger picture about iOS SDK. I somehow missed more challenging exercises (even though I don't like to do them ;)

Length:
Course it pretty long but many videos are quite short (1-2…

How to Learn when Life is Short

I haven't really think this through but I have read really interesting articles recently and I just wanted to write for myself later.

Life is Short by Paul Graham

It's just that, learn from people older that you what is most important, and that life actually is short...

Instead of Goals or Resolutions, Try Creating Rules by Leo Babuta

In the time of New Year Resolutions, it's good to read something that is proposing different way of achieving things. Still I see much more value in habits than setting goals. But...

The Easy Way To Learn Hard Stuff by Per Harald Borgen
It's something that I read from time to time and I know it works sometimes for me. The things I learn then are really learned and something Jakub Wasilewski  has told me many times to do. Still it's uncomfortable and for some reason, I have failed to use this method more than once or twice. Writing it here so maybe I can think about it more and figure out how to do that more often.

Towards an understandin…

Hero's Journey in Presentations

Artur Skowroński recommended me: Want a Better Pitch? Watch This. by Andy Raskin and I think it is so great and applicable to all kinds of talks that I want to help it get more popular.
So the plan of presentation is going to follow these steps: Enemy - ProblemWhy now? - call to actionShow how the world will look like without the problemProblemsEvidence that you fixed the problem The image at the top is because it reminds me of Hero's Jurney. It has fewer steps but there is a lot of similarities. Especially #3 made me realize that grand vision of the future is something that I should have used in my talks.  The result at the start of the presentation makes a lot of sense actually. Everyone already knows that I speak about something because I probably fixed it and if you tell about it at the end then it might be hard for some people to see the bigger picture in the solution you're going to present.