Introduzione a HTML5 e CSS3 Ispirato alle slide pubbliche di Gabriele Gigliotti Dipartimento di Matematica – Università degli studi di Udine

HTML Goes Multimedia (Natively)!

Brand new <video> and <audio> tags. Natively embedding video and audio files in html file (as you do with images). No Flash, Silverlight or other proprietary plug-in

HTML <video>: The Syntax

<video src="video.webm" controls>

HTML <video>: The Syntax <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag.</video> La libreria Popcorn.js consente poi di aggiungere sottotitolo al video <video src="video.ogv" data-timeline-sources="popcorn.xml"></video> ********* <popcorn> <subtitles language="it" align="center”> <subtitle in="00:00:01:00" out="00:00:03:00">Sagome di legno...</subtitle> <subtitle in="00:00:04:00" out="00:00:06:00">...altre sagome di legno,</subtitle>

<subtitle in="00:00:07:00" out="00:00:010:00">ma ci sono anche dei libri?</subtitle> <subtitle in="00:00:11:00" out="00:00:013:00">Eccoli!</subtitle>

</subtitles> </popcorn> La Libreria popcorn

HTML <video>: The Syntax https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video

Il tag track

The Codec War

http://www.w3schools.com/html/html5_video.asp

The Codec War Effect

<video controls>

</video>

<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> Your browser does not support video element.

Audio

<audio controls="controls"> <source src="song.ogg" type="audio/ogg” > <source src="song.mp3" type="audio/mpeg” > Your browser does not support the audio element. </audio>

Audio http://www.w3schools.com/html/html5_audio.asp

Playing a YouTube Video in HTML Example - Using iFrame <iframe width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k"> </iframe> Example - Using <object> <object width="420" height="315" data="http://www.youtube.com/v/XGSy3_Czz8k"> </object> Example - Using <embed> <embed width="420" height="315" src="http://www.youtube.com/v/XGSy3_Czz8k">

http://www.w3schools.com/html/html_youtube.asp

The Canvas Element

A “place” where you can write: JavaScript will be your pencil :) <canvas></canvas> Or <canvas width=”300” height=”300”></canvas>

The Canvas 2D API

See note [5]

The Canvas 2D API @ Work

[6] Developed by @hyperandroid

A Custom JavaScript Library

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

[7]

http://www.w3schools.com/html/html5_canvas.asp

The SVG tag SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a JavaScript). SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element. In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape. Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

http://www.w3schools.com/html/html5_svg.asp

The SVG tag

http://www.w3schools.com/html/html5_svg.asp

<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>

CSS3

CSS3 display property

http://www.w3schools.com/cssref/pr_class_display.asp

http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=list-item

CSS3 Pseudo Classes

p:empty { margin: 20px; } <p>here goes some text</p> <p></p> <p>other text goes here</p>

CSS3 Pseudo Classes

span:only-child { color: #f00; } <p>I can resist <span>everything</span> except <span>temptation.</span></p> <p>I can resist everything <span>except</span> temptation.</p> à qui si applica

Oscar Wilde

CSS3 Attribute Selectors

a[href^="mailto:"] {text-decoration: none;} <p> Visit my website: <a href="http://example.org">Acme</a> and for any question feel free to drop me a line at <a href="mailto:me@example.org"> me@example.org</a> à qui si applica </p>

CSS3 Web Fonts

With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts. @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE */ } *********************** div { font-family: myFirstFont; }

http://www.w3schools.com/cssref/default.asp#font

Google Fonts <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> @import url(http://fonts.googleapis.com/css?family=Open+Sans);

https://www.google.com/fonts

Text shadow effect You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow: Example Add a shadow to a header: h1 { /*In CSS3, the text-shadow property applies shadow to text.*/

text-shadow: 5px 5px 5px #FF0000;

}

http://www.w3schools.com/css/css3_text_effects.asp

http://www.w3schools.com/cssref/default.asp#text

CSS3 Word Wrapping p { word-wrap: break-word; }

http://www.w3schools.com/css/css3_text_effects.asp

http://www.w3schools.com/css/css3_text_effects.asp

CSS3 Borders

div { border-radius: 20px; }

CSS3 Borders

border-radius:2em; is equivalent to: border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em;

CSS3 Borders div { border-radius: 170px/60px; }

[10]

CSS3 box-shadows div { box-shadow: 10px 10px 5px #888888; /*box-shadow: h-shadow v-shadow color;*/ }

[10]

http://www.w3schools.com/css/css3_borders.asp

CSS3 border-image #round { -webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */ border-image: url(border.png) 30 30 round; }

[10]

http://www.w3schools.com/css/css3_borders.asp

CSS3 Cols

div { column-width: 200px; }

CSS3 Cols

<style type="text/css"> .newspaper { -moz-column-width:100px; /* Firefox */ -webkit-column-width:100px; /* Safari and Chrome */ column-width:100px; } </style>

CSS3 Cols

div { column-count: 3; }

CSS3 Cols

div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; }

CSS3 Cols

div { column-gap: 10px; } div { column-rule: 3px dotted #000; }

CSS3 Cols

div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } div { -moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ column-rule:3px outset #ff00ff; }

CSS3 2D Transforms

translate() rotate() scale() skew() matrix()

http://www.w3schools.com/css/css3_2dtransforms.asp

CSS3 Transformations img { transform: rotate(15deg); }

[11]

CSS3 multiple backgrounds

background: url(http://gigliotti.it/listati/risorse/caffe.jpg) top left

no-repeat, url(http://gigliotti.it/listati/risorse/neve.jpg) top right

no-repeat

CSS3 background size

div { background: url(img_flwr.gif); background-size: 80px 60px; background-repeat: no-repeat; } Stretch the background image to completely fill the content area: div { background: url(img_flwr.gif); background-size: 100% 100%; background-repeat: no-repeat; }

http://www.w3schools.com/css/css3_backgrounds.asp

CSS3 trasparency #trasparente { opacity: 0.3; filter:alpha(opacity=30); }

CSS3 Transitions

div { transition-property:width; -moz-transition-property: width; /* Firefox 4 */ -webkit-transition-property:width; /* Safari and Chrome */ -o-transition-property:width; /* Opera */ } div:hover {width:300px;}

http://www.w3schools.com/css/css3_transitions.asp

CSS3 Transitions

<style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } div:hover { width: 300px; } </style>

https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

Title: HTML5 e CSS3 Author: Gabriele Gigliotti Editor: Apogeo Website: http://www.gigliotti.it/ @: gabriele.gigliotti@gmail.com Twitter: @ridillo

Links & References

[1]: http://www.w3.org/html/logo/ [2]: http://goo.gl/N8K5x

[3]: https://chrome.google.com/webstore/detail/klleofbhhghgacodijohlacbfhfcefom

[4]: http://www.flickr.com/photos/sonnyp/5623796739/in/set-72157626384135737

[5]: Images taken from Chapter 6 “Canvas” “HTML5 e CSS3” Gigliotti G. - Apogeo Ed.

[6]: http://js1k.com/2010-first/demo/70

[7]: http://code.google.com/p/explorercanvas/

[8]: http://www.modernizr.com/

[9]: https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

[10]: Fig 13.6 page 227 “HTML5 e CSS3” Gigliotti G. - Apogeo Ed.

[11]: Fig 14.2 page 243 “HTML5 e CSS3” Gigliotti G. - Apogeo Ed.

Links & References

http://www.w3schools.com/css3/default.asp http://www.w3schools.com/html5/default.asp

CSS terza edizione di Gianluca Troiani Apogeo http://www.apogeonline.com/libri/9788850330256/scheda http://www.constile.org/