Introduction to HTML5

  • 282 views
Uploaded on

My DevWeek 2014 session which introduces HTML5.

My DevWeek 2014 session which introduces HTML5.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
282
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com SELA DEVELOPER PRACTICE December 20-25, 2013 © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il Gil Fink Introduction to HTML5
  • 2. Agenda What is HTML5? The New Elements HTML5 JavaScript APIs CSS3 Q&A Summary
  • 3. What is HTML5? HTML5 ~= HTML + CSS3 + JavaScript API The future of the web Still under development A lot of features supported by modern browsers
  • 4. Why to use HTML5? Accessibility Searchability Interoperability Many new HTML elements and attributes JavaScript APIs and improved capabilities CSS capabilities
  • 5. What’s Under The HTML5 Umbrella?
  • 6. Demo: HTML5 Sites Examples
  • 7. Structural Elements No need for div elements all over the place New ways to mean what you actually meant to mean HTML 4 HTML 5
  • 8. Main Structural Elements And More DescriptionElement Defines an article (for example within a section)Article Footer elements contain information about their containing element: who wrote it, copyright, etc. Footer The page header shown on the page, not the same as <head>Header Collection of links to other pagesNav A part or chapter in a book, or essentially the content body of the page Section
  • 9. Inline Semantic Elements DescriptionElement Defines marked textMark Represents a scalar gauge providing a measurement within a known range, or a fractional value Meter Represents the completion progress of a taskProgress Represents the result of a calculationOutput Represents a specific moment in timeTime
  • 10. New Input Types Types Email Url Tel Number Range Search Color Date pickers (date, month, week, time, datetime, datetime- local)
  • 11. New Attributes DescriptionAttribute Accepted min and max valuesMin, Max Related to file input type, allows selection of multiple filesMultiple Specifies a pattern used to validate an input fieldPattern A short hint intended to aid the user with data entryPlaceholder Boolean attribute to indicate that the element is requiredRequired Limits allowed values, thus indicating the granularity requiredStep And many more
  • 12. Demo: HTML5 New Elements
  • 13. HTML5 <video> Element Enables to play video natively in the browser Video can be composited with anything else on the page HTML content, images, SVG graphics Include standard codecs like: h.264, ogg and webm Hardware accelerated, GPU-based decoding in most of the browsers <video src="video.mp4" id="videoTag" width="640px" height="360px"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Flash or Silverlight Video Here --> </video>
  • 14. HTML5 <audio> Element Enables to play audio natively in the browser Industry-standard MP3 and AAC audio Fully scriptable via the DOM <audio src="audio.mp3" id="audioTag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Flash or Silverlight audio here --> </audio>
  • 15. Demo: Video and Audio Elements
  • 16. HTML5 Canvas A block element that allows developers to draw 2D or 3D graphics using JavaScript For 3D you use WebGL API <canvas id="myCanvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry. </canvas> <script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>
  • 17. Demo: Canvas
  • 18. Scalable Vector Graphics Create and draw 2D vector graphics Vector images are composed of shapes instead of pixels Based on the SVG 1.1 2nd Edition Full specification Support for: Full DOM access to SVG elements Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views
  • 19. 2D Vector Graphics <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg>
  • 20. Demo: SVG 2
  • 21. Differences Between Canvas and SVG
  • 22. Geolocation Many applications are based on user location Finding nearby restaurants, fuel stations, etc. Other applications want to gather information about user locations for future use HTML5 introduces a new Geolocation specification The user must agree to share his or her location The browser will get the user’s coordinates and other location information
  • 23. Geolocation API The Geolocation API includes the following main functions: getCurrentPosition(success, error, options) watchId = watchPosition(success, error, options) clearWatch(watchId) navigator.geolocation.getCurrentPosition(successCallback, errorCallback, { enableHighAccuracy: true, maximumAge: 600000, timeout: 0 });
  • 24. Demo: Geolocation
  • 25. Web Workers Background workers that run scripts in parallel with their main page Independent of any user interface scripts Allow thread-like operations that include message-passing mechanisms for coordination Expected to Be long-lived Have a high start-up performance cost Have high per-instance memory cost
  • 26. Initializing a Web Worker <p>Result: <output id="result"></output></p> <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { document.getElementById('result'). textContent = event.data; }; </script>
  • 27. Web Worker Script What appears in the worker.js from the previous slide Use the postMessage function in order to send messages to the UI thread var n = 1; while (n < 10000) { postMessage(n); n += 1; }
  • 28. Demo: Web Workers
  • 29. Web Sockets Bidirectional communication channel, over a single TCP socket Don’t allow raw access to the underlying network Uses the new WebSocket JavaScript object Can replace long-polling and commet The Web Sockets protocol RFC: http://tools.ietf.org/html/rfc6455
  • 30. Web Sockets – JavaScript API Use the WebSocket object’s built-in events: onopen: fired when a web socket has opened onmessage: fired when a message has been received onclose: fired when a web socket has been closed socket.onopen = function() { console.log(‘Socket Status: ‘ + socket.readyState + ‘ (open)’); } var socket = new WebSocket('ws://someURL'); Create a WebSocket object using a URL and a list of protocols URL must direct to a Web Sockets server endpoint (ws://)
  • 31. Demo: Web Sockets
  • 32. Other HTML5 APIs HTML5 includes other APIs that you can consider. For example: Web Notifications – display simple notifications to the user File API – exposes sandboxed sections of a user’s local file system to web applications IndexedDB – an index database on client-side And many more
  • 33. CSS3 - Media Queries <link href="DoNotDisplay.css" rel="stylesheet" media="screen and (max-width:1199px)" type=“text/css" /> <link href="DoNotDisplay.css" rel="stylesheet" media="screen and (min-width:1301px)" type="text/css" /> <link href="Presentation.css" rel="stylesheet" media="screen and (min-width:1200px) and (max-width: 1300px)" type="text/css" />
  • 34. CSS3 Colors & Opacity CSS3 Color Alpha color with rgba() and hsla() color functions Transparency control with the opacity property CSS3 Backgrounds and Borders Round corners with the border-radius property Multiple background images per element box-shadow property on block elements
  • 35. Demo: CSS3 Enhancements
  • 36. Other CSS3 Enhancements CSS3 include much more: CSS3 Animations CSS3 Transformations CSS3 Fonts CSS3 Border and Background CSS3 layouts: Flexbox Templating Multi-Columns More
  • 37. HTML5 Integration Strategies HTML5 is HTML you’re already most of the way there Most visitors’ browsers can handle most things Many strategies can be used to implement: Lowest common denominator Vertical slices – target a specific HTML5 functionality JavaScript ‘Polyfills’ can be used to patch the holes Using fallbacks strategies
  • 38. Questions?
  • 39. HTML5 Bottom Line Develop once! Multiple devices reach Multiple platforms reach
  • 40. Resources Session slide deck and demos – HTML5Rocks - http://www.html5rocks.com HTML5 Landscape Overview - http://dret.typepad.com/dretblog/html5-api- overview.html My Website – http://www.gilfink.net Follow me on Twitter – @gilfink
  • 41. Thank You Gil Fink Senior Architect gilf@sela.co.il @gilfink http://www.gilfink.net