• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)

on

  • 5,662 views

Slides della sessione tenuta il 20 aprile 2011 presso il Dipartimento di Matematica dell'Università degli studi di Udine

Slides della sessione tenuta il 20 aprile 2011 presso il Dipartimento di Matematica dell'Università degli studi di Udine

Statistics

Views

Total Views
5,662
Views on SlideShare
5,632
Embed Views
30

Actions

Likes
2
Downloads
98
Comments
0

1 Embed 30

http://www.scoop.it 30

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) Presentation Transcript

    • Introduzione a HTML5 e CSS3 Gabriele Gigliotti Dipartimento di Matematica – Università degli studi di Udine April 20th 2011
    • [1] html5 logo web page
    • [2] link to Google Images search result page
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> DOCTYPE: The Syntax
    • Doctype Made Easy HTML5 <!DOCTYPE html>
    • A Bare HTML5 Doc <!DOCTYPE html> <html> </html> <head> </head> <title>A Funny Title</title> <html lang=”en”> <meta charset=”utf-8”> <body> <!-- very important content goes here --> </body>
    • Can We Use HTML5 Today?
    • Google Already Does...
    • Twitter Already Does...
    • Youtube Already Does...
    • Detecting HTML5 Powered Sites Chrome Add-on: HTML5 powered [3]
    • Detecting HTML5 Powered Sites
    • 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=&quot;video.webm&quot; controls>
    • HTML <video>: The Syntax <video src=&quot;video. webm &quot; controls> </video> Your browser does not support video element.
    • The Codec War WebM H.264 (mp4) Ogg Theora IE9 Manual Install yes no FF4 yes no yes Chrome yes About to drop yes Opera yes no yes Safari no yes no
    • The Codec War Effect <video controls> </video> <source src=&quot;video. webm &quot; type='video/webm; codecs=&quot;vp8, vorbis&quot;'> <source src=&quot;video. mp4 &quot; type='video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;'> Your browser does not support video element.
    • Flash vs HTML5 <video>
      • Easy integration with other web tech.
      • No security issues.
      • It delivers better semantic.
      • Content Protection.
      • Easily Manageble.
      • No affected by codec war
      <video> Flash [4] Taken from Sonny Piers Photostream on Flikr
    • Web Forms: New Input Types Before HTML5 <input type=”text”> Generic use
    • Web Forms: New Input Types <form> <input type=”search”> ... </form>
    • New Input Types <form> <input type=”email”> ... </form> Semantic at work (part 1)
    • New Input Types <form> <input type=”email”> ... </form> Semantic at work (part 2)
    • New Input Types <form> <input type=”url”> ... </form>
    • New Input Types <form> <input type=”tel”> ... </form> Delivering better User experience through semantic!
    • Input Type Number Attributes <form> <input type=”number” min=”1” max=”11” step=”2”> <input type=&quot;range&quot; min=&quot;1&quot; max=&quot;11&quot; step=&quot;2&quot; value=&quot;3&quot;> ... </form>
    • Input Type “Calendar Controls” <input type=&quot;date&quot; min=&quot;2011-04-02&quot; max=&quot;2011-04-30&quot; step=&quot;2&quot;>
    • Input Type “Calendar Controls” <form> <input type=”time” value=”00:30” > ... </form>
    • Web Forms 2.0: New Attributes You can do in HTML what yo previously did with JavaScript” autofocus <input type=&quot;text&quot; id=&quot;hobby&quot; autofocus> autofocus through JavaScript (the old way) <script> // to be invoked on onload() function giveFocus() { document.getElementById(&quot;hobby&quot;).focus(); } </script>
    • Web Forms 2.0: New Attributes You can do in HTML what yo previously did with JavaScript” pattern <input type=&quot;text&quot; id=&quot;cap&quot; name=&quot;cap&quot; pattern=&quot;[0-9]{5}&quot;>
    • 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=&quot;text/javascript&quot; src=&quot;excanvas.js&quot;></script><![endif]--> [7]
    • Semantic Rules HTML5 new semantic tags. <nav> <footer> <article> <header> <section> <aside> They bring a clear meaning to our pages.
    • Semantic Rules: <nav> <nav> <ul> <li><a href=&quot;archive.html&quot;>Old Posts</a></li> <li><a href=&quot;last_post.html&quot;>Last Post</a></li> <li><a href=”faq.html”>FAQ</a></li> </ul> </nav> They bring a clear meaning to our pages.
    • Semantic Rules: <footer> <footer> <nav> <ul> <li><a href=&quot;archive.html&quot;>Old Posts</a></li> <li><a href=&quot;last_post.html&quot;>Last Post</a></li> <li><a href=”faq.html”>FAQ</a></li> </ul> </nav> </footer> They bring a clear meaning to our pages.
    • Semantic Rules: <article> <article> <header> <h1>Open Data, free your dataset</h1> <p>Written by Gabriele Gigliotti</p> <p>Published on <time pubdate datetime=&quot;2010-10- 22T15:30+01:00&quot;>22-10-2010</time>.</p> </header> <p>article text</p> </article> They bring a clear meaning to our pages.
    • Semantic Rules: <time> <time pubdate datetime=&quot;2011-04-20T15:00+01:00&quot;> April 4th 2011 </time>
    • HTML5 Feature Detection Modernizr: the easiest way to check for any HTML5 related feature (and much more). <script src=&quot;modernizr-1.7.min.js&quot;></script> [8]
    • Feature Detection With Modernizr if (Modernizr.canvas) { // create a canvas obj & get a 2d context } <script type=&quot;text/ javascript &quot; src=&quot;modernizr-1.7.js&quot;></script> // Testing for video and codec support: if (Modernizr.video && Modernizr.video.webm) { // preload webm video assets } else if (Modernizr.video && Modernizr.video.h264){ // preload h264 assets }
    • Browser Detection (Pay Attention!) Firefox 4.01 User-Agent String on Linux Mozilla/5.0 (X11; Linux i686; rv:2.0.1) Gecko/20100101 Firefox/4.0.1 And then spoofing came along! [9]
    • 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> Oscar Wilde
    • CSS3 Attribute Selectors a[href^=&quot;mailto:&quot;] {text-decoration: none;} <p> Visit my website: <a href=&quot;http://example.org&quot;>Acme</a> and for any question feel free to drop me a line at <a href=&quot;mailto:me@example.org&quot;> me@example.org</a> </p>
    • CSS3 Borders div { border-radius: 20px; }
    • CSS3 Borders div { border-radius: 170px/60px; } [10]
    • CSS3 Cols div { column-width: 200px; }
    • CSS3 Cols div { column-count: 3; }
    • CSS3 Cols div { column-gap: 10px; } div { column-rule: 3px dotted #000; }
    • CSS3 Transformations img { transform: rotate(15deg); } [11]
    • CSS3 Transitions div { position: absolute; top: 20px; left: 20px; transition-property: left; transition-duration: 4s; } div:hover { left: 300px; }
    • CSS3 Transitions div { position: absolute; top: 20px; left: 20px; transition-property: left; transition-duration: 4s; transition-timing-function: linear; } div:hover { left: 300px; }
    • Title: HTML5 e CSS3 Author: Gabriele Gigliotti Editor: Apogeo Website: http://www.gigliotti.it/ @: [email_address] 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.