1 / 26

HTML 5: Introduction

HTML 5: Introduction. M. Douglas Wray Macwebguru.com. M. Douglas Wray. Currently webmaster for CUAlum.org P rivate consultant and trainer Focus: CSS design and WordPress Code geek Loves Cheetos. HTML: A Brief History.

laddie
Télécharger la présentation

HTML 5: Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML 5: Introduction M. Douglas Wray Macwebguru.com

  2. M. Douglas Wray • Currently webmaster for CUAlum.org • Private consultant and trainer • Focus: CSS design and WordPress • Code geek • Loves Cheetos

  3. HTML: A Brief History • 1989 – Tim Berners-Lee invents HTML basing it on SGML (good move Tim!) • 1992 – NCSA* creates Mosaic browser • 1993 – Lynx browser invented • 1994 – IETF** sets up HTML work group, HTML 2 spec released, WWW consortium forms • 1995 – HTML 3 spec released • 1996 – Scripting and standardization added • 1997 – HTML 3.2 released and endorsed by W3 *National Center for Supercomputing Applications** Internet Engineering Task ForceMore details here: http://www.w3.org/People/Raggett/book4/ch02.html

  4. HTML: What’s it for? • Used to create the basic elements of webpages: text, tables, images, etc. • The ‘Etc’ is what’s been growing: Audio Video Graphics

  5. Existing Elements • IMG for images • APPLET(for Java) • OBJECT (generic) A bit limited… Here’s a list of all of them: http://www.w3.org/TR/html4/index/elements.html

  6. What’s Missing? • Audio and Video! • Vector-based graphics • StandardizationDozens of ways currentlyEMBED is non-standard and awkward: <embed alt="string" height=" { number | percentage } " hidden=" { true | false } " pluginspage="uri" src="uri" type="MIME type" width="number”></embed>

  7. New HTML5 Markup

  8. New Media Elements

  9. The CANVAS Element This is one of the really exciting parts! Using the Canvas element, vector based graphics can be rendered online. Much like Flash but without the need for proprietary software. Graphics are created using JavaScript More later on.

  10. New Form Elements

  11. New Input Type Attributes

  12. NAV and FOOTER Currently users are doing this: <div id=“nav”> (user’s nav code) </div> In HTML5 it’s simpler: <nav> (user’s nav code) </nav> Same for Footer

  13. Typical NAV <nav>  <a href="/html/">HTML</a> |  <a href="/html5/">HTML5</a> |  <a href="/css/">CSS</a> |  <a href="/css3/">CSS3</a> |  <a href="/js/">JavaScript</a></nav>

  14. Video Before HTML5 • No standard method • Required (different) plugin(s) • Various types of video: Ogg/MPEG 4 and WebM • Currently-used EMBED methodsnot valid HTML and cranky

  15. Video Embed Before HMTL5 Different method for embedding each of these: • Windows Media (WMV, WMA) • Flash (SWF) • Flash (FLV) • QuickTime (MOV) • Real (RM)

  16. Video After HTML5 <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> There’s also a TRACK tag for media players. That’s IT.

  17. Audio in HTML5 <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>

  18. The CANVAS Element <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript”> varc=document.getElementById("myCanvas"); varcxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> </body> </html> http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_first

  19. The CANVAS Element <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript”> varc=document.getElementById("myCanvas"); varcxt=c.getContext("2d"); cxt.moveTo(150,150); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> </body> </html> http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_line

  20. The CANVAS Element There’s an add-on for Adobe Illustrator so you can save directly into HTML5. http://labs.adobe.com/downloads/illustrator_html5.html (you can also get it for CS4)

  21. A Few CANVAS Examples • My personal logo (link) • Rendered type (link) • Interactive gradients (link) • classList manipulation (link) • HTML5 Form (link)

  22. More CANVAS examples • Adjustable bar chart (link) • Entire HTML5 course/examples (link) • Incredible interactives (link) • Bar charts (link) • Particle System Generator (link)

  23. Resources • The video element (link) • iPhone website (link) • HTML5 Visual Cheatsheet (link) • HTML5 Canvas Cheatsheet (link) • HTML5 & CSS3 Techniques (link) • Hype™ HTML5 Animation Editor (link)

  24. More Resources • Audio Element Maker (link) • Video Element Maker (link) • SVG to HTML5 Canvas (link) • Purple – HTML5 Canvas Animation (link) • Cut/Paste Examples (link)

  25. Even More Resources • Video examples and browsercompatibility (link) • Build an HTML5 video player (link) • Audio and Video Processing (link) • Using Audio with HTML5 (link)

  26. Q & A

More Related