WIXLIB

Sistemi Multimediali 2012HTML5 & CSS3Introduction@Marek MaurizioWednesday, March 21, 12

Outline1. History6. Selectors2. Design7. Transformations3. Rich Media8. Visual Properties4. CSS39. Typography5. Transitions10.Media QueriesWednesday, March 21, 12

1Wednesday, March 21, 12History

Brief History ofMarkup Invented by Tim Berners-Lee in 1991 Based on an already existing language: SGML There’s no HTML 1 HTML 2.0 features was inspired by existing browsers’implementations HTML 4.01 published in 1999 by W3CWednesday, March 21, 12

Turning Point XHTML 1.0: HTML reformulated as XML XHTML 1.1: real XML IE could not render it!!W3C and implementations diverged HTML was done at version 4.01 XHTML 2.0 wasn’t going to be compatible with HTMLEvolution aimed at semantic web concepts every web page data is “understandable” by machines data is interoperable, complex systems and mash-ups can becreatedWednesday, March 21, 12

Rebellion Representatives from Opera, Apple, Mozilla proposed toextend HTML to allow the creation of web application Richer web pages, with animations, persistent data,better visuals The idea was rejected The Web Hypertext Application Technology WorkingGroup was formed to carry on this visionWednesday, March 21, 12

Reunification WHATWG worked on Web Forms 2.0 and Web Apps 1.0 Over time, the specifications merged and have beencalled HTML5 In 2009 W3C abandoned XHTML2 and embracedHTML5Wednesday, March 21, 12

TimelineWhen will HTML5 be ready? Candidate reccomendation in 2012Does it matter? Not really, what really matters is browsers support Good news, most of them already do!Wednesday, March 21, 12

2Wednesday, March 21, 12Design

DOCTYPE The !DOCTYPE declaration is not an HTML tag; it is aninstruction to the web browser about what version of HTML thepage is written in. HTML5 DOCTYPE tells us something Because HTML5 needs to support existing content, the doctype could be applied to an existing HTML 4.01 or XHTML 1.0document. Any future versions of HTML will also need to support theexisting content in HTML5, so the very concept of applyingversion numbers to markup documents is flawed Browsers supports features, not doctypesWednesday, March 21, 12

Semantic Tags Rich Media Rich Forms Local Storage Cross-document Messaging Web Sockets Geolocation Browser HistoryHTML5for browser support: http://www.findmebyip.com/litmus/Wednesday, March 21, 12

Keep it Simple Simpler DOCTYPE Simpler meta , script , link Obsolete elements frame, frameset, noframe, font, big, center, strikeOld elements with different semanticsWednesday, March 21, 12

b stylistically offset from the normal textWednesday, March 21, 12

i in an alternate voice or moodWednesday, March 21, 12

Structural Elements div id ”header” h1 Title /h1 /div Web developers use divelements to wrap semanticelements of the page div id ”navbar” ul li a href ”#” Page 1 /a li li a href ”#” Page 2 /a li . /ul /div div id ”content” . /div div id ”footer” . /div Wednesday, March 21, 12

Structural Elements header h1 Title /h1 /header Google’s webstats: ml HTML5 introduces new tagsspecifically designed to dividethe page into logical regions header , footer , nav , section , article , aside nav ul li a href ”#” Page 1 /a li li a href ”#” Page 2 /a li . /ul /nav section article . /article /section footer . /footer Wednesday, March 21, 12

section grouping thematically-related contentWednesday, March 21, 12

header a group of introductory or navigational aidsWednesday, March 21, 12

footer information about its containing elementWednesday, March 21, 12

aside related contentWednesday, March 21, 12

nav navigation informationWednesday, March 21, 12

article self-contained main contentWednesday, March 21, 12

Sample BlogStructureWednesday, March 21, 12

3Wednesday, March 21, 12Rich Media

Rich Media Audio and video embed havea long history Embed tag (not standard) orobject tag (not understood byall browsers)Wednesday, March 21, 12 embed src ”song.mp3” autostart ”true”loop ”true” controller ”true” /embed object param name ”src” value ”song.mp3” param name ”controller” value ”true” embed . /embed /object

Rich Media Not every browser supported streaming this way Not every server was configured to serve it correctly Macromedia (now Adobe) realized Flash Player could bethe perfect vehicle for audio and video (installed on 97%of machines) Flash pluginWednesday, March 21, 12

Rich Media HTML5 supports audio and video natively rather thenusing plugins In HTML5 audio and video are first class citizensWednesday, March 21, 12

audio Wednesday, March 21, 12

Codecs AAC [S4, C3, IOS] MP3 [IE9, S4, C3, IOS] Vorbis (OGG) [F3, C4, O10]Wednesday, March 21, 12

video Wednesday, March 21, 12

Codecs H.264 [IE9, S4, C3, IOS] Theora [F3.5, C4, O10] VP8 [IE9 with codec, F4, C5, O10.7, (Flash)]Wednesday, March 21, 12

Conversions Command line (ffmpeg) Free applications Commercial applicationsWednesday, March 21, 12

Working with MultipleFormats Audio and video elements canspecify multiple formats The type attribute helps thebrowsers to serve the rightsourceWednesday, March 21, 12 audio controls source src ”song.mp3” type ”audio/mpeg” source src ”song.ogg” type ”audio/ogg” p Fallback content here! Consider include aFlash Player for IE /p /audio video controls poster "poster.png" source src "earthsea.webm" type "video/webm" source src "earthsea.mov" type "video/mp4" source src "earthsea.ogv" type "video/ogg" p Please use a decent browser - -' /p /video

Rich MediaSummary HTML5 provide the audio and video tag Similar syntax audio src ”song.mp3” /audio (boolean) attributes to controldetails: autoplay, poster, etc. Javascript API to controlbehavior Style with plain CSS Fallback content if tag is notsupportedWednesday, March 21, 12 audio id ”player” src ”song.mp3” autoplay loopcontrols /audio buttononclick ”document.getElementById(‘player’).play()” Play /button

Canvas canvas element is an environment for creatingdynamic images graphs, games example: vas-experiment/Wednesday, March 21, 12

4Wednesday, March 21, 12CSS3

CSS3 Transparency Gradients Backgrounds Layouts Advanced Selectors Flexible Box ModelRound bordersTypography Shadows Transformations Transitionsfor browser support: http://www.findmebyip.com/litmus/Wednesday, March 21, 12

Vendor-specificprefixesIn addition to the CSS properties set by W3C, a browserdeveloper can add browser-specific properties specs still under development try something new without waiting for W3C to accept itEach rendering engine has its own prefixWednesday, March 21, 12

-o-transition:transition:Wednesday, March 21, ase-in-out;ease-in-out;ease-in-out;ease-in-out;

ntInternet ius-webkit-WebkitSafari, Chrome-webkit-border-radiusWednesday, March 21, 12

5Wednesday, March 21, 12Transitions

Transitions smoothing out value changesin your stylesheets easy to implement transition-property: Theproperty to be transitioned transition-duration: How longthe transition should last3.7 Wednesday, March 21, 12 a href "#" class "foo" Transition me! /a a.foo {padding: 5px 10px;background: #9c3;transition-property: background;transition-duration: 0.3s;transition-timing-function: ease;}a.foo:hover {background: #690;}

Transitions transition-timing-function: How the transition happensover time transition-delayWednesday, March 21, 12

6Wednesday, March 21, 12Selectors

Selectors Powerful selectors to target specific elements Less classes, less elements better codeWednesday, March 21, 12

Pseudo-class Selectors p:hover {border: 1px solid #0c0; } div#intro p:first-child {fontsize: 110%; } table tr:nth-child(odd) td{background: silver; } p::first-line {text-transform:uppercase; } p::first-letter {font-size:200%; }Wednesday, March 21, 12

abbr[title] {border-bottom: 1pxdashed #0c0; } a[href "http://www.yourhtmlsource.com/"] {fontweight: bold; } a[title "Mail"] {text-decoration:none; }Attribute SelectorsWednesday, March 21, 12

7Wednesday, March 21, 12Transformations

Transforms 2D SS 2D Transforms allowselements rendered by CSS tobe transformed in twodimensional space Transform functions:translate, scale, skew (both,X, Y), rotate (deg or rad),matrix Possible to define origin oftransformationWednesday, March 21, 12transform: rotate(7.5deg);-moz-transform: rotate(7.5deg);-o-transform: rotate(7.5deg);-webkit-transform: rotate(7.5deg);transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;

Transform 3D translate3d(x, y, z),translateZ(z) scale3d(sx, sy, sz), scaleZ(sz) rotateX(angle),rotateY(angle), rotate3d(x, y,z, angle) perspective(p) matrix3d( ) backface-visibilityWednesday, March 21, 12#contents {-webkit-perspective: 5000;}img {-webkit-transform: forms/examples/card-02-slide-flip.html

8Wednesday, March 21, 12Visual Properties

Borders border-radius to set roundedcorners (without images!)border-image to wrap anelement with an image (notshown here)Wednesday, March 21, er-radius:border-radius:8px;8px;8px;8px;

Shadows Creates a shadow around ablock-level element Parameters: offsets, blurradius, color, optional inset Multiple shadows allowedWednesday, March 21, 12#E {-moz-box-shadow: 0 0 5px #888;-webkit-box-shadow: 0 0 5px#888;box-shadow: 0 0 5px #888;}

Opacity opacity rgbaWednesday, March 21, 12

Te x t S h a d o w s Shadows for text elements This feature is NOT new inCSS3; it was originallyproposed in CSS2. Safari hadit from version 1text-shadow: 0px 0px 10px adow-tocreate-cool-text-effectsWednesday, March 21, 12

Gradientshttp://gradients.glrzad.com/ Gradients without usingimages Linear or radial Two or more colors Syntax is not finalWednesday, March 21, 12background-color: #1a82f7; /* fallback color */background-image:-moz-linear-gradient(top, #2F2727, #1a82f7);background-image:-webkit-gradient(linear, left top, left bottom,from(#1a82f7), to(#2F2727));

http://css3please.com/Wednesday, March 21, 12

9Wednesday, March 21, 12Typography

Web Safe Fonts.htmlWednesday, March 21, 12

WebTypography Real custom fontsdownloaded automaticallyfrom server FontSquirrel's generator Different formats for differentbrowsers (IE eot, others ttf/otf, iOS svg)5 Wednesday, March 21, 12@font-face {font-family: 'Mutlu';src: './fonts/mutluwebfont.svg#webfont1zOSZuoH') format('svg');}

TypographyM u l t i c o l u m n Te x tcolumn-count: 2;column-gap: 40px;column-gap: 1em;column-rule-width: thin;column-rule-style: solid;column-rule-color: black; Text on multiple columns Style the ruleWednesday, March 21, 12

Example TypographyFonts and ColumnsWednesday, March 21, 12

10Media QueriesWednesday, March 21, 12

Media Queries inCSS2 specific stylesheet to comeinto play under certainconditions enabled in CSS2 by mediatypes: media Types let youspecify a type of media totarget print, handheld, braille,projection, screen, tv, . not very popular aside screenand printWednesday, March 21, 12@media print {/* style sheet for print goes here */}

Media Queries inCSS3 CSS3 take this idea andextend it Rather than looking for a typeof device they look at thecapabilities of the device width, height, orientation,resolution, .Wednesday, March 21, 12 link type "text/css"rel "stylesheet"media "only screen and (max-device-width: 480px)"href "http://example.com/iPhone.css"/ link type "text/css"rel "stylesheet"media "only screen and (min-device-width: 768px)and (max-device-width: 1024px)"href "http://example.com/iPad.css"/

Responsive Web DesignWednesday, March 21, 12

Control MobileAppearance Wednesday, March 21, 12 meta name "viewport"content "width device-width,minimum-scale 1.0, maximumscale 1.0" /

Media Queries link href "css/style.css" media "screen" rel "stylesheet" type "text/css" / link href "css/large.css" media "only screen and (min-width: 1280px)"rel "stylesheet" type "text/css" / link href "css/small.css" media "only screen and (max-width: 960px)"rel "stylesheet" type "text/css" / link href "css/iphone.css" media "only screen and (max-device-width:480px)"rel "stylesheet" type "text/css" / Wednesday, March 21, 12