Your SlideShare is downloading. ×
0
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
SELA ...
Agenda
What is HTML5?
The New Elements
HTML5 JavaScript APIs
CSS3
Q&A
Summary
What is HTML5?
HTML5 ~= HTML + CSS3 + JavaScript API
The future of the web
Still under development
A lot of features suppo...
Why to use HTML5?
Accessibility
Searchability
Interoperability
Many new
HTML elements and attributes
JavaScript APIs and i...
What’s Under The HTML5
Umbrella?
Demo: HTML5 Sites Examples
Structural Elements
No need for div elements all over the place
New ways to mean what you actually meant to
mean
HTML 4 HT...
Main Structural Elements
And More
DescriptionElement
Defines an article (for example within a section)Article
Footer eleme...
Inline Semantic Elements
DescriptionElement
Defines marked textMark
Represents a scalar gauge providing a measurement with...
New Input Types
Types
Email
Url
Tel
Number
Range
Search
Color
Date pickers (date,
month, week, time,
datetime, datetime-
l...
New Attributes
DescriptionAttribute
Accepted min and max valuesMin, Max
Related to file input type, allows selection of mu...
Demo: HTML5 New Elements
HTML5 <video> Element
Enables to play video natively in the browser
Video can be composited with anything else on the page...
HTML5 <audio> Element
Enables to play audio natively in the browser
Industry-standard MP3 and AAC audio
Fully scriptable v...
Demo: Video and Audio Elements
HTML5 Canvas
A block element that allows developers to draw 2D or
3D graphics using JavaScript
For 3D you use WebGL API
<c...
Demo: Canvas
Scalable Vector Graphics
Create and draw 2D vector graphics
Vector images are composed of shapes instead of
pixels
Based o...
2D Vector Graphics
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width=...
Demo: SVG
2
Differences Between Canvas and SVG
Geolocation
Many applications are based on user location
Finding nearby restaurants, fuel stations, etc.
Other application...
Geolocation API
The Geolocation API includes the following main
functions:
getCurrentPosition(success, error, options)
wat...
Demo: Geolocation
Web Workers
Background workers that run scripts in parallel
with their main page
Independent of any user interface scripts...
Initializing a Web Worker
<p>Result: <output id="result"></output></p>
<script>
var worker = new Worker('worker.js');
work...
Web Worker Script
What appears in the worker.js from the
previous slide
Use the postMessage function in order to send
mess...
Demo: Web Workers
Web Sockets
Bidirectional communication channel, over a
single TCP socket
Don’t allow raw access to the underlying
network...
Web Sockets – JavaScript API
Use the WebSocket object’s built-in events:
onopen: fired when a web socket has opened
onmess...
Demo: Web Sockets
Other HTML5 APIs
HTML5 includes other APIs that you can
consider.
For example:
Web Notifications – display simple notifica...
CSS3 - Media Queries
<link href="DoNotDisplay.css" rel="stylesheet"
media="screen and (max-width:1199px)" type=“text/css" ...
CSS3 Colors & Opacity
CSS3 Color
Alpha color with rgba() and hsla() color functions
Transparency control with the opacity ...
Demo: CSS3 Enhancements
Other CSS3 Enhancements
CSS3 include much more:
CSS3 Animations
CSS3 Transformations
CSS3 Fonts
CSS3 Border and Background...
HTML5 Integration Strategies
HTML5 is HTML
you’re already most of the way there
Most visitors’ browsers can handle most th...
Questions?
HTML5 Bottom Line
Develop once!
Multiple devices reach Multiple platforms reach
Resources
Session slide deck and demos –
HTML5Rocks - http://www.html5rocks.com
HTML5 Landscape Overview -
http://dret.typ...
Thank You
Gil Fink
Senior Architect
gilf@sela.co.il
@gilfink
http://www.gilfink.net
Upcoming SlideShare
Loading in...5
×

Introduction to HTML5

400

Published on

My DevWeek 2014 session which introduces HTML5.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
400
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to HTML5"

  1. 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. 2. Agenda What is HTML5? The New Elements HTML5 JavaScript APIs CSS3 Q&A Summary
  3. 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. 4. Why to use HTML5? Accessibility Searchability Interoperability Many new HTML elements and attributes JavaScript APIs and improved capabilities CSS capabilities
  5. 5. What’s Under The HTML5 Umbrella?
  6. 6. Demo: HTML5 Sites Examples
  7. 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. 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. 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. 10. New Input Types Types Email Url Tel Number Range Search Color Date pickers (date, month, week, time, datetime, datetime- local)
  11. 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. 12. Demo: HTML5 New Elements
  13. 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. 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. 15. Demo: Video and Audio Elements
  16. 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. 17. Demo: Canvas
  18. 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. 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. 20. Demo: SVG 2
  21. 21. Differences Between Canvas and SVG
  22. 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. 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. 24. Demo: Geolocation
  25. 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. 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. 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. 28. Demo: Web Workers
  29. 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. 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. 31. Demo: Web Sockets
  32. 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. 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. 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. 35. Demo: CSS3 Enhancements
  36. 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. 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. 38. Questions?
  39. 39. HTML5 Bottom Line Develop once! Multiple devices reach Multiple platforms reach
  40. 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. 41. Thank You Gil Fink Senior Architect gilf@sela.co.il @gilfink http://www.gilfink.net
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×