# Media content
## Obiettivi di apprendimento

* know how to include a media file like a graphic to your webpage.
* understand that images like jpg, gif and bitmaps are hard for machines to understand.
* 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.

## Trascrizione

Including Media content
Make sure that you do not only provide a media file like this:
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:
You can also use an anchor to make it a link:

## XML Challenge 1: Getting to know SVG

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):
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!
* Change the rectangle so that it's filled with yellow
* Make the rectangle's border a bit bigger and modify the color of the border (let's say, green!)
* Any ideas what the fill-opacity might do? Test it out.
* See if you can turn your rectangle into a square
* Finally, can you modify the position of your rectangle?
Easy?!

## XML Challenge 2: More SVG elements

Still using the same SVG file (myfirstsvg.svg), add the following element to your SVG:
Test it out and see if it does what you expect! Looks a bit boring though! Add some plain old CSS style, so that
* your circle is filled with the color Blue,
* your circle has a stroke similar to your rectangle
* 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:
* Add another 4 circles to your file (you might want to 'translate' them so that they aren't all on top of each other)
* Give each circle an id, just like you would an HTML element, then use this ID to make each circle a different colour.
* Arrange the colours and the positions of your circles to form the Olympic logo

## XML Challenge 3: Animating the Olympics with SVG!

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:
Now,
* Try playing with the 'from', 'to', 'begin' and 'dur' attributes, testing to see what they do.
* 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

## Ulteriori letture

* SVG chapter in wikibooks
* Web_Design/XML_challenges

## Discussioni

* Ethernet
** Communication over a shared Medium
** Ethernet header
** Minimum package length vs maximum cable length
** Collision detection
** Summary, further reading, homework
* Internet Protocol
** Motivation for IP
** Classful IPv4 networks
** IP forwarding algorithm
** IP header
** Summary, further reading, homework
* Transmission Control Protocol
** End to end principle and connection oriented communication
** Three way handshake
** Port numbers
** Sliding window and flow control
** Summary, further reading, homework
* Domain Name System
** Tree structure
** Terminology
** Zones
** Review some facts about DNS
** Delegating DNS queries
** DNS address resolution
** Summary, further reading, homework
* Internet vs World Wide Web
** Summary of the internet architecture
** Motivation and requirements for the World Wide Web
** Design principles of the web
** Uniform Resource Identifier
** Summary, further reading, homework
* Hypertext Transfer Protocol
** Making HTTP requests
** A simple web client
** A simple web server
** HTTP header
** Content negotiation
** Summary, further reading, homework
* Web content
** Problem setting for web content formats
** Working with XML
** HTML for web document structures
** Layout elements in HTML
** Motivating separation of content and layout
** Cascading Style Sheets
** Media content
** Metadata
** Summary, further reading, homework
* Dynamic Web Content
** Basics of server side web programming
** Forms and HTTP post request
** Handling a post request in a Java Servlet
** Client side JavaScript
** Ajax and the XMLHttpRequest class
** Summary, further reading, homework