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 & CSS 3

on

  • 3,130 views

An introduction on what HTML5 and elements you can do in CSS3.

An introduction on what HTML5 and elements you can do in CSS3.

Statistics

Views

Total Views
3,130
Slideshare-icon Views on SlideShare
3,130
Embed Views
0

Actions

Likes
7
Downloads
230
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • A common setup for a page layout. Use of DIVs and pretty typical values for ID attributes. <br />
  • With HTML5, there&#x2019;s an acceptance of these types of Web document structures. HTML5 has elements for HEADER, for ARTICLE, for SECTIOn, for ASIDE, for FOOTER. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

HTML5 & CSS 3 HTML5 & CSS 3 Presentation Transcript

  • HTML5 & CSS 3 Fabian Alcantara
  • A little background on HTML ✤ HTML was created all the way back in 1991 ✤ Never was an HTML 1, just went to HTML 2 ✤ Initially maintained by the IETF, Internet Engineering Task Force ✤ The HTML torch was later handed to the W3C, The World Wide Web Consortium ✤ HTML 4.01 was published in 1999.
  • Chaos The Politics of HTML(up to version 4) ✤ W3c seemed to have too many chiefs not enough indians ✤ A democratic process when litigating anything ✤ W3C felt that XML was the future of web ✤ W3C were making vital mistakes ✤ W3c thought XHTML 2 was going to be solid gold.
  • HTML5 HTML5 was born
  • Welcome toHTML5 HTML5 ✤ HTML5 started in 2009. ✤ A group was formed within W3C called WHATWG, the Web Hypertext Application Technology Working Group ✤ Address standardization in HTML for creating web applications ✤ Consensus based process; The final say is done by Ian Hickson ✤ W3c later created a working group called HTML <space> 5.
  • What’s the buzz? ✤ Supports Existing Content ✤ Mark It Up Your Own Way ✤ Error Handling ✤ Keeping it Simple ✤ Plays Better with Javascript
  • Mark It Up Your Way ✤ There is no rule how you mark it up ✤ Before: ✤ <br /> ✤ After: ✤ <BR> or <bR> or <br>
  • Keeping It Simple with DocTYPE Before <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Keeping It Simple with DocTYPE Before <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> After
  • Keeping It Simple with DocTYPE Before <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> After <!DocTYPE html>
  • Keeping It Simple - Character Set Before - Defining the character set <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
  • Keeping It Simple - Character Set Before - Defining the character set <meta content="text/html; charset=UTF-8" http-equiv="content-type"/> After
  • Keeping It Simple - Character Set Before - Defining the character set <meta content="text/html; charset=UTF-8" http-equiv="content-type"/> After <meta charset=”UTF-8”>
  • Keeping It Simple - JavaScript Before - Start to use Javascript <script src="jquery.js" type="text/ javascript"></script>
  • Keeping It Simple - JavaScript Before - Start to use Javascript <script src="jquery.js" type="text/ javascript"></script> After
  • Keeping It Simple - JavaScript Before - Start to use Javascript <script src="jquery.js" type="text/ javascript"></script> After <script src=”jquery.js”></script>
  • Keeping It Simple - CSS Before <link href="reset.css" rel="stylesheet" type="text/css"/>
  • Keeping It Simple - CSS Before <link href="reset.css" rel="stylesheet" type="text/css"/> After
  • Keeping It Simple - CSS Before <link href="reset.css" rel="stylesheet" type="text/css"/> After <link rel=”stylesheet” href=”reset.css”/>
  • Bye Bye Bye frame, font bgcolor frameset big cellspacing noframes center cellpadding acronym strike valign
  • Rich Media in HTML5 November 2010
  • Canvas ✤ Imagine creating stuff in Photoshop, or Illustrator with Javascript. ✤ Can create interactions similar to Flash.
  • Hello World Details Start HTML5 <!DOCTYPE html> <html> <head> <title>Canvas test</title> <style type="text/css"> ... </style> Starting Javascript <!--[if IE]><script src="excanvas.js"></script><![endif]--> <script type="text/javascript"> window.onload = function() { var canvas = ”document.getElementById(‘myDrawing’)” var content = canvas.getContext(‘2d’); .... } </script> </head> <body> Start the Canvas in HTML5 <canvas id="myDrawing" width="200" height="200"> <p>Your browser doesn't support canvas.</p> </canvas> <h1>Hello World!</h1> </body> </html>
  • The Audio Module ✤ Can embed any audio file to a HTML5 document <audio id=”player” src=”fighting-html-song.mp3”></audio> Extra things you may want to add <div> <button onclick=”document.getElementByID(‘player’).play”> Play </button> ... </div>
  • Video Module <video src=”movie.mp4” controls width=”360” poster=”placeholder.jpg” height=”240”></video>
  • Semantics of HTML5 HTML5 ✤ HMTL5 allows extra semantic value to elements ✤ Microformats extends HTML5 semantic ✤ For contact details ✤ Calendar events ✤ hAtom for news events
  • Semantics of HTML5 HTML5 ✤ New Elements <mark>this is a test</mark> highlights content <time class=”dstart” title=”2010-11-01”>November formats dates, times, or both 11th, 2010</time> Note: Microformats use <abbr> <meter min=”0” max=”100” value=”25”></meter> You are <progress>35%</ progress> complete
  • Structure of HTML5 HTML5 ✤ Section - used for a generic chunk of related content <section> <h1>This is a test of <abbr>HTML5</abbr></h1> .... </section> ✤ Header - a group of introductory or navigational aids <section> <header> <h1>This is a test of <abbr>HTML5</abbr></h1> </header> .... </section> ✤ Footer - contain information about its containing element <section> <header> <h1>This is a test of <abbr>HTML5</abbr></h1> </header> .... <footer> <p>By Fabian Alcantara</p> </footer> </section>
  • Structure of HTML5 HTML5 More ✤ <aside> - used for grouping navigational aides for the sidebar ✤ <nav> - contains major navigational information; main nav ✤ <article> - similar to article but it is self-contained; Intended for syndication
  • DIV ID=”header” DIV ID=”nav” DIV ID=”section” DIV ID=”sidecolumn” DIV ID=”article” DIV ID=”footer”
  • HEADER NAV SECTION ASIDE ARTICLE FOOTER
  • How to useHTML5 today? HTML5 ✤ Most browsers will support the new elements ✤ For Internet Explorer, use javascript: ✤ Remy Sharp - html5shiv ✤ Outline algorithm support by Geofrey Sneddon - http://bkapart.com/html5/9 ✤ ARIA ✤ For assisted technology header[role=“banner”]{} footer[role=“contentinfo”]{}
  • References & HTML5 HTML5 Examples ✤ http://www.smashingmagazine.com/2010/09/23/html5-the-facts- and-the-myths/ ✤ http://vimeo.com/16518234# ✤ Amazing HTML5 - http://www.thewildernessdowntown.com/ ✤ HTML5 for Web Designers by Jeremy Keith
  • CSS 3 A closer look at November 2010
  • A Quick History of CSS ✤ To style presentation semantics written in a markup language like HTML ✤ CSS 1 - Started back in 1996 ✤ CSS 2 - Started back in 1998 ✤ CSS 3 - Started in 2005 till present
  • The Skinny on CSS 3 ✤ Specification is divided by different chunks or modules ✤ Transformations ✤ Animations ✤ Media Queries ✤ Typography ✤ Color ✤ Any unfinished modules are being done by browser vendors
  • Typography in CSS 3 Text Overflow Text Selection text-overflow: ellipsis-word; ::selection { background: #3C0; /* Safari */ color: #90C; Example } ::-moz-selection { lorem ipsum ipsum ... background: #3C0; /* Firefox */ color: #90C; } Web Fonts @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } Example @font-face { font-family: Delicious; font- weight: bold; src: url('Delicious-Bold.otf'); } Delicious Font h3 { font-family: Delicious, sans-serif; }
  • CSS 3 More Typography in Text Shadow text-shadow: #000 1px 1px 1px; text-shadow: rgb(0,0,0) 1px 1px 1px; text-shadow: rgba(0, 0, 0, 0.398438) 1px 1px 1px; Text Columns Example Lorem ipsum dolor sit risus. Nam condimentum. porta nonummy, mauris -moz-column-width: 13em; amet, consectetuer Praesent euismod auctor arcu gravida odio, quis -webkit-column-width: 13em; adipiscing elit. Aenean dui. Nunc ut leo vel magna aliquam lacus elit non egestas blandit ipsum. adipiscing tempor. Donec libero. Proin aliquam -moz-column-gap: 1em; Morbi nulla metus, luctus pretium, ligula et hendrerit augue accumsan augue. -webkit-column-gap: 1em; et, ullamcorper sit amet, faucibus, sem velit Quisque ut eros at erat commodo quis, nisl. Ut accumsan tortor, sodales ultrices sodales. Nunc blandit lacus nec nibh. tempor est ligula non velit. vitae ipsum. Mauris in elit Phasellus eleifend enim et Nulla sagittis, odio quis in dolor imperdiet
  • Boxes and Borders Box Shadow -webkit-box-shadow: #999 3px 5px 5px; The Inverse -moz-box-shadow: #999 3px 5px 5px; box-shadow: inset #999 3px 5px 5px; box-shadow: #999 3px 5px 5px; Border Radius Border Image border-radius: 5px border-image: url(border.png) 27 27 27 27 round round; border-bottom-left-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px;
  • Colors and Gradients RGBA HSL <div style="background: rgba(255, 0, 0, 0.2);"></div> background-color: hsl(209,41.2%, 20.6%); <div style="background: rgba(255, 0, 0, 0.4);"></div> <div style="background: rgba(255, 0, 0, 0.6);"></div> <div style="background: rgba(255, 0, 0, 0.8);"></div> <div style="background: rgba(255, 0, 0, 1) ;"></div> Gradients -moz-linear-gradient(-90deg,#1aa6de,#022147); -webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));
  • Transformation -moz-transform: scale(1.15); -webkit-transform: scale(1.15); #skew { transform:skew(35deg); } #rotate { transform:rotate(45deg); } #translate { transform:translate(10px, 20px); } #rotate-skew-scale-translate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }
  • Transformation using CSS 3 Transformation -moz-transform: scale(1.15); -webkit-transform: scale(1.15); #skew { transform:skew(35deg); } #rotate { transform:rotate(45deg); } #translate { transform:translate(10px, 20px); } #rotate-skew-scale-translate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }
  • Animation in Make it Glow @-webkit-keyframes radiatePulse { from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; } 50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; } to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; } } .radiate.button{ -webkit-animation-name: radiatePulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; }
  • Animation in CSS 3 Make it Glow @-webkit-keyframes radiatePulse { from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; } 50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; } to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; } } .radiate.button{ -webkit-animation-name: radiatePulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; }
  • http://fiusm.sprocklab.com/category/radiatefm/
  • References ✤ http://www.slideshare.net/teleject/looking-into-html5-css3 ✤ http://css3.bradshawenterprises.com/#how2animation ✤ http://en.wikipedia.org/wiki/Cascading_Style_Sheets ✤ http://www.fiu.edu ✤ http://css3info.com
  • Thank Thank You Fabian Alcantara fabian@sprocklab.com http://www.twitter.com/fabuloso