Jump to content

Web Science/Part1: Foundations of the web/Web content/Media content

Add links
From Wikiversity

Media content

Learning goals

  1. know how to include a media file like a graphic to your webpage.
  2. understand that images like jpg, gif and bitmaps are hard for machines to understand.
  3. Know how to use a XML based format to create images that are easy to understand for machines and humans an can even make use of stylesheets.

Video

Script

Including Media content

Make sure that you do not only provide a media file like this: 

 <img src="gollum.jpg"/>

But also include an alternative text ("Gollum from LOTR") if the media file cannot be loaded or the user cannot access the media content (e.g. because of bad eye sight he uses a screen reader) and a title for mouse over like this: 

<img src="gollum.jpg" alt="Gollum from LOTR“ title=“Beware!“/>

You can also use an anchor to make it a link: 

<a href=“http://thereyougo.com“>
<img src="gollum.jpg" alt="Gollum from LOTR“ title=“Beware!“/></a>

Quiz

XML Challenge 1: Getting to know SVG

[edit | edit source]

Copy the following file into your editor of choice and save it as "myfirstsvg.svg", then open up the file in a browser (Internet Explorer with the Adobe SVG plugin, Firefox 1.5+, Opera 9+, Safari 3+, or Chrome): 

<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <style type="text/css">
    rect {
      fill: rgb(0,0,255);
      stroke-width: 1;
      stroke: rgb(0,0,0);
      fill-opacity:0.7;
    }
  </style>

  <rect width="300" height="100" transform="translate(50,150)" />

</svg>

Assuming this is the first time you've seen an SVG file, you might notice that it looks very similar to an HTML file, but with some obvious differences!

  1. Change the rectangle so that it's filled with yellow
  2. Make the rectangle's border a bit bigger and modify the color of the border (let's say, green!)
  3. Any ideas what the fill-opacity might do? Test it out.
  4. See if you can turn your rectangle into a square
  5. Finally, can you modify the position of your rectangle?

Easy?!

XML Challenge 2: More SVG elements

[edit | edit source]

Still using the same SVG file (myfirstsvg.svg), add the following element to your SVG: 

  <circle cx="100" cy="150" r="40" />

Test it out and see if it does what you expect! Looks a bit boring though! Add some plain old CSS style, so that

  1. your circle is filled with the color Blue,
  2. your circle has a stroke similar to your rectangle
  3. your circle has an opacity of 0.7

Note, you can also use CSS pseudo selectors, like :hover to change your shapes when the mouse hovers over them! (for eg: circle:hover {fill-opacity:0.3} )

Finally, see how you go arranging the Olympics logo:

  1. Add another 4 circles to your file (you might want to 'translate' them so that they aren't all on top of each other)
  2. Give each circle an id, just like you would an HTML element, then use this ID to make each circle a different colour.
  3. Arrange the colours and the positions of your circles to form the Olympic logo

XML Challenge 3: Animating the Olympics with SVG!

[edit | edit source]

Animating shapes in SVG is really easy! There's actually a tag called animateTransform to help us out, but unfortunately it's not yet supported by Firefox's native SVG, so we'll need to install the Adobe SVG plugin or Opera 9+.

Note that the animateTransform element goes inside the circle element! (Watch out for this, make sure that you don't close your circle element before your animateTransform element).

Modify one of your circles as follows: 

<circle cx="100" cy="150" r="40">
  <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" from="50,150" to="300,100" begin="0s"
                      dur="2s" fill="freeze"/>
</circle>

Now,

  1. Try playing with the 'from', 'to', 'begin' and 'dur' attributes, testing to see what they do.
  2. When you feel ready, have a go at creating an animation where 5 circles animate to form the Olympic logo! Your circles should all begin at the side of the page, and then animate to form the Olympic logo!

https://upload.wikimedia.org/wikipedia/commons/4/4c/Olympic-animated.svg

Discussion

Retrieved from "https://en.wikiversity.org/w/index.php?title=Web_Science/Part1:_Foundations_of_the_web/Web_content/Media_content&oldid=1271790"