Showing posts with label book-html5. Show all posts
Viewing SVG Files
Viewing SVG Files:
Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. Internet Explorer users may have to install the Adobe SVG Viewer to be able to view SVG in the browser.
Embeding SVG in HTML5
HTML5 allows embeding SVG directly using <svg>...</svg> tag which has following simple syntax:
<svg xmlns="http://www.w3.org/2000/svg"> ... </svg> |
Firefox 3.7 has also introduced a configuration option ("about:config") where you can enable HTML5 using the following steps:
- Type about:config in your Firefox address bar.
- Click the "I'll be careful, I promise!" button on the warning message that appears (and make sure you adhere to it!).
- Type html5.enable into the filter bar at the top of the page.
- Currently it would be disabled, so click it to toggle the value to true.
Now your Firefox HTML5 parser should now be enabled and you should be able to experiment with the following examples.
HTML5 - SVG Circle
Following is the HTML5 version of an SVG example which would draw a cricle using <circle> tag:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>
|
This would produce following result in HTML5 enabled latest version of Firefox.
To learn this concept - Do Online Practice using Firefox 3.7 or higher version.
HTML5 - SVG Rectangle
Following is the HTML5 version of an SVG example which would draw a rectangle using <rect> tag:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="300" height="100" fill="red" />
</svg>
</body>
</html>
|
This would produce following result in HTML5 enabled latest version of Firefox.
To learn this concept - Do Online Practice using Firefox 3.7 or higher version.
HTML5 - SVG Line
Following is the HTML5 version of an SVG example which would draw a line using <line> tag:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="100"
style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>
|
You can use style attribute which allows you to set additional style information like stroke and fill colors, width of the stroke etc.
This would produce following result in HTML5 enabled latest version of Firefox.
To learn this concept - Do Online Practice using Firefox 3.7 or higher version.
HTML5 - SVG Ellipse
Following is the HTML5 version of an SVG example which would draw an ellipse using <ellipse> tag:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>
|
This would produce following result in HTML5 enabled latest version of Firefox.
To learn this concept - Do Online Practice using Firefox 3.7 or higher version.
HTML5 - SVG Polygon
Following is the HTML5 version of an SVG example which would draw a polygon using <polygon> tag:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html>
|
This would produce following result in HTML5 enabled latest version of Firefox.
To learn this concept - Do Online Practice using Firefox 3.7 or higher version.
HTML5 - SVG Polyline
Following is the HTML5 version of an SVG example which would draw a polyline using <polyline> tag:
<!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Polyline</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" /> </svg> </body> </html> |
This would produce following result in HTML5 enabled latest version of Firefox.
To learn this concept - Do Online Practice using Firefox 3.7 or higher version.
HTML5 - SVG Gradients
Following is the HTML5 version of an SVG example which would draw a ellipse using <ellipse> tag and would use <radialGradient> tag to define an SVG radial gradient.
Similar way you can use <linearGradient> tag to create SVG linear gradient.
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50"
style="fill:url(#gradient)" />
</svg>
</body>
</html>
|
This would produce following result in HTML5 enabled latest version of Firefox.
Tag - html
Tag - html
Now we go to our first "tag". *
With a couple of important exceptions (which we will get into later) all tags have to be opened and closed. Take a look at the code to the right. The opening tag is:
<html>. The closing tag is </html> – the difference being the "/" in the closing tag.
Tags are containers. The html tag indicates that everything between
<html> and</html> is code that conforms to the standards of the type of HTML dictated by the doctype declaration – in this case HTML5.
Everything between the opening tag and closing tag are inside that tag and therefore have the attributes that tag gives them. Those attributes can be modified. For example in this site I have changed the default color (black) for the
</html>tag to dark blue.- Inside the
<html>tag are two other important tags: - the
<head>tag - the
<body>tag
First let's take a look at the
<head> tag.Using HTML5 Video The Easy Way
Using HTML5 Video The Easy Way
If you haven’t had a good reason to learn HTML5 video, let me give you one: Flash mobile is dead. Mobile is the new black, many people say that by 2014 more people will be browsing with their mobile device than using a desktop. You know, if we get through 2012 of course. So more then using CSS media queries and cool coding tricks, you need to be ready to switch also the way you post videos online.
Now you may be asking yourself if it’s hard to implement HTML5 video, or if it’s worth the effort. Well, dear friend, it’s way easier than you think.
We’ll see today a few different ways you can implement it, and a few more things that you should be aware of.
So, let’s rock!
How <video> tag works
Before HTML5 we used
<embed> or <object> tags to do this stuff. Don’t know if you’ve had the pleasure of trying to get this working, but I can assure you, it can cause quite the headache.
As you may notice, they are using external sources to process this content. External sources mean plugins, and they’re not always 100% compatible with your default content (how many times have you seen a flash banner above content that it shouldn’t be?).
The video tag is quite simple, you’ll show it which sources it can use, and if it can’t read these sources it’ll show your alternative message:
1 | <video width="320" height="240" controls="controls"> |
2 | <source src="movie.mp4" type="video/mp4" /> |
3 | <source src="movie.ogg" type="video/ogg" /> |
4 | <source src="movie.webm" type="video/webm" /> |
5 | Bad news, you can't see the amazing stuff that is here. |
6 | </video> |
Here you’ll need sources as .mp4, .mp3, .ogg, .webm., and if you don’t have any of these formats there are a lot of html5 video converters out there for you to use.
You’ll need different file types because Firefox (3.5+), Opera(10.5+) and Chrome(5.0+) support .ogg but Internet explorer(9.0+) and Safari(3.0+) support .mp4.
Ok, then the good thing is that you don’t need to ask your users to switch to a different browser in order to see your content. You can use a few alternatives to make sure that your users see your videos. We’ll get to those alternatives soon. For now, let’s see now how we can improve this video thing.
Pretty video players
Of course you don’t need to rely on default player controls for the video tag. Actually you can do seriously cool stuff (like applying CSS effects, canvas playing & more) with your video content on the fly, but we’ll see more about this soon.
Here’s how a custom video player is made. Dev.Opera has a great tutorial on this and we’ll outline a few things that you can do.
How this custom controls thing works
Once our video is loaded we’ll use jQuery to remove its default controls and append our own HTML controls on it. Then jQuery will control all attributes we need, like readyState (if video is being played), duration (so we can use a slider), currentTime (so we can show how much time has played), and volume controls.
After doing JS you’ll see that video controls can easily be themed and changed via CSS, as it should be at first place, right?
Source: Opera Tutorial
Ok, ok, let’s do it the smart way
We have a lot of plugins to help us in this process. Let’s see a couple of them:
WordPress Plugin – HTML5 and Flash Video Player
With it you can easily add videos the old flv way, or cool HTML5 with flash fallback, with shortcodes: [videoplayer file="video/video.flv" /] or [videoplayer file="video/video.mp4, ogg, webm" /]
Make an HTML5 video a background with jQuery.VideoBG plugin
Crazy thing! You can add a video to your background, and it gives a pretty cool look, indeed.
Good looking video player with ttwVideoPlayer jQuery Plugin
One of the bests video players I’ve even seen. It looks pretty good, and has nice features.
All in one solution with jPlayer
Take a look at their first demo and you’ll see that isn’t just another jQuery video plugin. It allows you to enhance the default players behaviors in ways that I can only imagine normally doing with flash. Circle player is pretty crazy, check it and see what I’m talking about!
One last good reference – Html5video.org
It has good insights about video tag, news section, players comparison.. well, good things to know about HTML5
Now it’s your turn!
So, have you ever used this? What do you think about?
Do you know about another tool that can help us and is missing here? Let us know!
