Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
HTML5 beyond the hype
Chris Heilmann, JFokus , Stockholm, Sweden, 02/02/15
@codepo8
Chris Heilmann
CSS Stuff
<div id="#really" 	
class="no idea how i do"	
	 	 data-foo="thismarkupthing">	
	 […]	
</div>
p {}	
p.oop {}	
p#tag {}	
p[class] {}	
p[title="hi there"]{}	
p[title^="hi"]{}	
p[title$="hi"]{}	
p[title~="hi"]{}
p + p {}	
p > span {}	
p ~ div {}
http://www.smashingmagazine.com/2013/08/20/
semantic-css-with-intelligent-selectors/
[href$=".zip"]:before,	
[href$=".gz"]:before {	
content: 'E004'; 	
/* unicode for the zip folder icon */	
}
<a href="http://twitter.com/heydonworks"
target="_blank" class="new-window-icon
twitter-icon">@heydonworks</a>
<a href="http://twitter.com/heydonworks"
target="_blank">@heydonworks</a>
<ul>	
<li class="list-item-first"></li>	
<li class="list-item"></li>	
<li class="list-item"></li>	
<li class="list-item"><...
!
:link	
:visited	
:active	
:hover	
:focus	
:first-child	
:last-child	
:nth-child	
:nth-last-child	
:nth-of-type	
:first-o...
<ul>	
<li></li>	
<li></li>	
<li></li>	
<li></li> ul > li:first-child {}	
<li></li>	
<li></li>	
<li></li>	
</ul>
<ul>	
<li></li>	
<li></li>	
<li></li>	
<li></li> ul > li:last-child {}	
<li></li>	
<li></li>	
<li></li>	
</ul>
<ul>	
<li></li>	
<li></li>	
<li></li>	
<li></li> ul > li:nth-child(odd) {}	
<li></li>	
<li></li>	
<li></li>	
</ul>
<ul>	
<li></li>	
<li></li>	
<li></li>	
<li></li> ul > li:nth-child(even) {}	
<li></li> 	
<li></li>	
<li></li>	
</ul>
<ul>	
<li></li>	
<li></li>	
<li></li>	
<li></li> ul > li:nth-child(3n) {}	
<li></li> 	
<li></li>	
<li></li>	
</ul>
<ul>	
<li></li>	
<li></li>	
<li></li>	
<li></li> ul > li:nth-child(3n+1) {}	
<li></li> 	
<li></li>	
<li></li>	
</ul>
Support = epic
https://vimeo.com/101718785
http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
DOM manipulation
querySelector();	
querySelectorAll();	
…and that is all.
classList (add, remove, toggle, contains)
<p class="bovine" data-sound="moo">cow</p>	
!
p.dataset.sound => "moo"
http://christianheilmann.com/2012/10/10/data-attributes-
rock-as-both-css-and-javascript-know-them/
<div id="dataplayer" 	
data-name="Joe" 	
data-score="100">	
</div>
var player =
document.querySelector('#dataplayer');	
al...
<div id="dataplayer" 	
data-name="Joe" 	
data-score="100">	
</div>
#dataplayer[data-score='10'] {	
	 color: #c00;	
}
<div id="dataplayer" 	
data-name="Joe" 	
data-score="100">	
</div>
#dataplayer::after {	
	 content: attr(data-name);	
	 po...
MediaQueries
@media only screen 	
and (min-device-width : 320px) 	
and (max-device-width : 480px)	
{	
	 …	
}
Support = epic
No support = opportunity!
@media all and (min-width:0) {	
…	
}	
@media only {	
	 …	
}
http://christianheilmann.com/2012/12/19/conditional-
loading-of-resources-with-mediaqueries/
Inline media queries?
<!DOCTYPE HTML>	
<html lang="en-US">	
<head>	
<meta charset="UTF-8">	
<link rel="stylesheet"	
media=...
Gotta load them all!
<link rel="stylesheet"	
media="screen and (min-width: 600px)" 	
href="small.css">	
<link rel="stylesh...
matchMedia = the JS brother
if (window.matchMedia('screen and (min-width: 600px)')){	
document.write('<link rel="styleshee...
Support = meh IE?
document.yougottobekiddin?
<link rel="stylesheet" class="mediaquerydependent" 	
data-media="screen and (min-width: 600px)"...
mediaQuery all the things!
<img data-src="http://placekitten.com/500/500" 	
data-alt="kitten" 	
class="mediaquerydependent...
match and apply…
var qs = document.	
querySelectorAll('.mediaquerydependent'),	
all = qs.length,	
cur = null,	
attr = null...
but JS is bad!
<link rel="stylesheet" class="mediaquerydependent" 	
href="standard.css"	
data-media="screen and (min-width...
Video
<img src="meh.jpg" alt="cute kitten photo">
Fallbacks are good!
var img = document.querySelector('img');	
img.addEventListener('error',
function(ev) {	
if (this.naturalWidth === 0 && 	
t...
<video controls>	
<source src="dynamicsearch.mp4" type="video/mp4">	
</source>	
<a href="dynamicsearch.mp4">	
<img src="dy...
Bullet proof video!
var v = document.querySelector('video'),	
sources = v.querySelectorAll('source'),	
lastsource = source...
The canPlayType(type) method must return the
empty string if type is a type that the user agent
knows it cannot render or ...
Canvas
http://phaser.io/
http://www.pixijs.com/
http://hub.gravit.io/browser/
A very basic painting API…
A collection of pixels!
https://codepo8.github.io/canvas-images-and-pixels/
http://thewebrocks.com/demos/zoom-and-pick/
Zoom and pick…
https://github.com/codepo8/zoom-and-pick
And generate…
Canvas +
FileReader =
https://www.youtube.com/watch?v=gnbLLQwZxeA
http://removephotodata.com
https://github.com/jseidelin/exif-js/
Make: LGE!
Model: Nexus 5!
XResolution: 72!
YResolution: 72!
ResolutionUnit: 2!
YCbC...
c = document.querySelector('canvas');	
cx = c.getContext('2d');	
c.width = w = img.naturalHeight;	
c.height = h = img.natu...
https://github.com/eligrey/FileSaver.js
Support = good
https://github.com/eligrey/FileSaver.js
Support = good
https://github.com/eligrey/FileSaver.js
Support = eek
http://stuk.github.io/jszip/
http://makethumbnails.com http://stuk.github.io/jszip/
JavaScript evolution…
http://colintoh.com/blog/5-array-methods-that-you-should-use-today
Fun with arrays…
Fun with arrays…
indexOf() returns the first index at which a
given element can be found in
the array, or -1 if it is not p...
Fun with arrays…
map() creates a new array with the
results of calling a function on
every element in this array.
reduce()...
http://updates.html5rocks.com/2015/01/ES6-Template-Strings
Template strings
var a = 10;	
var b = 10;	
console.log(`JavaScript first appeared 	
${a+b} years ago. Crazy!`);	
//=> JavaScript first appe...
function fn() { 	
return 42; 	
}	
console.log(`Meaning of life: ${fn()}`);	
//=> Meaning of life: 42	
!
var author = {name...
var greeting = "Hello 	
World";	
!
var greeting = "Hello " +	
“World";	
!
console.log(`you just	
made the first step	
into...
More tomorrow!
https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
<tag> You’re it!
Share, find, re-use…
Share, find, re-use…
Chris Heilmann
christianheilmann.com

@codepo8

Thank you!
HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015
Próxima SlideShare
Cargando en…5
×

HTML5 after the hype - JFokus2015

4.210 visualizaciones

Publicado el

A whirlwind tour of some of the great HTML5 features available across browsers today.

Publicado en: Educación
  • Sé el primero en comentar

HTML5 after the hype - JFokus2015

  1. 1. HTML5 beyond the hype Chris Heilmann, JFokus , Stockholm, Sweden, 02/02/15
  2. 2. @codepo8 Chris Heilmann
  3. 3. CSS Stuff
  4. 4. <div id="#really" class="no idea how i do" data-foo="thismarkupthing"> […] </div>
  5. 5. p {} p.oop {} p#tag {} p[class] {} p[title="hi there"]{} p[title^="hi"]{} p[title$="hi"]{} p[title~="hi"]{}
  6. 6. p + p {} p > span {} p ~ div {}
  7. 7. http://www.smashingmagazine.com/2013/08/20/ semantic-css-with-intelligent-selectors/
  8. 8. [href$=".zip"]:before, [href$=".gz"]:before { content: 'E004'; /* unicode for the zip folder icon */ }
  9. 9. <a href="http://twitter.com/heydonworks" target="_blank" class="new-window-icon twitter-icon">@heydonworks</a>
  10. 10. <a href="http://twitter.com/heydonworks" target="_blank">@heydonworks</a>
  11. 11. <ul> <li class="list-item-first"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item-last"></li> </ul> 💩
  12. 12. ! :link :visited :active :hover :focus :first-child :last-child :nth-child :nth-last-child :nth-of-type :first-of-type :last-of-type :empty :target :checked :enabled :disabled :not()
  13. 13. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:first-child {} <li></li> <li></li> <li></li> </ul>
  14. 14. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:last-child {} <li></li> <li></li> <li></li> </ul>
  15. 15. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(odd) {} <li></li> <li></li> <li></li> </ul>
  16. 16. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(even) {} <li></li> <li></li> <li></li> </ul>
  17. 17. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(3n) {} <li></li> <li></li> <li></li> </ul>
  18. 18. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(3n+1) {} <li></li> <li></li> <li></li> </ul>
  19. 19. Support = epic
  20. 20. https://vimeo.com/101718785
  21. 21. http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
  22. 22. DOM manipulation
  23. 23. querySelector(); querySelectorAll(); …and that is all.
  24. 24. classList (add, remove, toggle, contains)
  25. 25. <p class="bovine" data-sound="moo">cow</p> ! p.dataset.sound => "moo"
  26. 26. http://christianheilmann.com/2012/10/10/data-attributes- rock-as-both-css-and-javascript-know-them/
  27. 27. <div id="dataplayer" data-name="Joe" data-score="100"> </div> var player = document.querySelector('#dataplayer'); alert('Score:' + player.dataset.score); alert('Name:' + player.dataset.name); player.dataset.score = 10; alert('Score:' + player.dataset.score);
  28. 28. <div id="dataplayer" data-name="Joe" data-score="100"> </div> #dataplayer[data-score='10'] { color: #c00; }
  29. 29. <div id="dataplayer" data-name="Joe" data-score="100"> </div> #dataplayer::after { content: attr(data-name); position: absolute; left: -50px; } #dataplayer::before { opacity: 0; content: attr(data-score); position: absolute; left: 100px; }
  30. 30. MediaQueries
  31. 31. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { … }
  32. 32. Support = epic
  33. 33. No support = opportunity! @media all and (min-width:0) { … } @media only { … }
  34. 34. http://christianheilmann.com/2012/12/19/conditional- loading-of-resources-with-mediaqueries/
  35. 35. Inline media queries? <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <link rel="stylesheet" media="screen and (min-width: 600px)" href="small.css"> <link rel="stylesheet" media="screen and (min-width: 4000px)" href="big.css"> <title>CSS files with media queries</title> </head> <body> </body> </html>
  36. 36. Gotta load them all! <link rel="stylesheet" media="screen and (min-width: 600px)" href="small.css"> <link rel="stylesheet" media="screen and (min-width: 4000px)" href="big.css">
  37. 37. matchMedia = the JS brother if (window.matchMedia('screen and (min-width: 600px)')){ document.write('<link rel="stylesheet" href="small.css">'); }
  38. 38. Support = meh IE?
  39. 39. document.yougottobekiddin? <link rel="stylesheet" class="mediaquerydependent" data-media="screen and (min-width: 600px)" data-href="green.css"> <link rel="stylesheet" class="mediaquerydependent" data-media="screen and (min-width: 4000px)" data-href="blue.css">
  40. 40. mediaQuery all the things! <img data-src="http://placekitten.com/500/500" data-alt="kitten" class="mediaquerydependent" data-media="screen and (min-width: 600px)">
  41. 41. match and apply… var qs = document. querySelectorAll('.mediaquerydependent'), all = qs.length, cur = null, attr = null; while (all--) { cur = qs[all]; if (cur.dataset.media && window.matchMedia(cur.dataset.media).matches) { for (attr in cur.dataset) { if (attr !== 'media') { cur.setAttribute(attr, cur.dataset[attr]); } } } }
  42. 42. but JS is bad! <link rel="stylesheet" class="mediaquerydependent" href="standard.css" data-media="screen and (min-width: 600px)" data-href="green.css">
  43. 43. Video
  44. 44. <img src="meh.jpg" alt="cute kitten photo"> Fallbacks are good!
  45. 45. var img = document.querySelector('img'); img.addEventListener('error', function(ev) { if (this.naturalWidth === 0 && this.naturalHeight === 0) { console.log('Image ' + this.src + ' not loaded'); } }, false); Testable fallbacks!
  46. 46. <video controls> <source src="dynamicsearch.mp4" type="video/mp4"> </source> <a href="dynamicsearch.mp4"> <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"> </a> <p>Click image to play a video demo of dynamic app search</p> </video> Bullet proof video?
  47. 47. Bullet proof video! var v = document.querySelector('video'), sources = v.querySelectorAll('source'), lastsource = sources[sources.length-1]; lastsource.addEventListener('error', function(ev) { var d = document.createElement('div'); d.innerHTML = v.innerHTML; v.parentNode.replaceChild(d, v); }, false);
  48. 48. The canPlayType(type) method must return the empty string if type is a type that the user agent knows it cannot render or is the type "application/octet-stream"; it must return "probably" if the user agent is confident that the type represents a media resource that it can render if used in with this audio or video element; and it must return "maybe" otherwise.! ! W3C media elements spec Codecs are hard ;)
  49. 49. Canvas
  50. 50. http://phaser.io/
  51. 51. http://www.pixijs.com/
  52. 52. http://hub.gravit.io/browser/
  53. 53. A very basic painting API…
  54. 54. A collection of pixels!
  55. 55. https://codepo8.github.io/canvas-images-and-pixels/
  56. 56. http://thewebrocks.com/demos/zoom-and-pick/ Zoom and pick…
  57. 57. https://github.com/codepo8/zoom-and-pick And generate…
  58. 58. Canvas + FileReader =
  59. 59. https://www.youtube.com/watch?v=gnbLLQwZxeA
  60. 60. http://removephotodata.com
  61. 61. https://github.com/jseidelin/exif-js/ Make: LGE! Model: Nexus 5! XResolution: 72! YResolution: 72! ResolutionUnit: 2! YCbCrPositioning: 1! ExifIFDPointer: 134! GPSInfoIFDPointer: 462! ExposureTime: 0.009523809523809525! FNumber: 2.4! ISOSpeedRatings: 104! ExifVersion: 0220! DateTimeOriginal: 2014:10:19 17:28:22! DateTimeDigitized: 2014:10:19 17:28:22! ComponentsConfiguration: YCbCr! ShutterSpeedValue: 6.713! ApertureValue: 2.52! ExposureBias: 0! Flash: Flash did not fire! FocalLength: 3.97! FlashpixVersion: 0100! ColorSpace: 1! PixelXDimension: 1944! PixelYDimension: 2592! InteroperabilityIFDPointer: 432
  62. 62. c = document.querySelector('canvas'); cx = c.getContext('2d'); c.width = w = img.naturalHeight; c.height = h = img.naturalWidth; cx.drawImage(img, 0, 0, w, h); ! <a href="' + c.toDataURL('image/jpeg', 0.9) + '" '+ 'download="' + dlname + '">Download clean image</a> [EXIF]
  63. 63. https://github.com/eligrey/FileSaver.js Support = good
  64. 64. https://github.com/eligrey/FileSaver.js Support = good
  65. 65. https://github.com/eligrey/FileSaver.js Support = eek
  66. 66. http://stuk.github.io/jszip/ http://makethumbnails.com http://stuk.github.io/jszip/
  67. 67. JavaScript evolution…
  68. 68. http://colintoh.com/blog/5-array-methods-that-you-should-use-today Fun with arrays…
  69. 69. Fun with arrays… indexOf() returns the first index at which a given element can be found in the array, or -1 if it is not present. filter() creates a new array with all elements that pass the test of a provided function forEach() executes a provided function once per array element.
  70. 70. Fun with arrays… map() creates a new array with the results of calling a function on every element in this array. reduce() applies a function against an accumulator and each value of the array (from left-to-right) has to reduce it to a single value.
  71. 71. http://updates.html5rocks.com/2015/01/ES6-Template-Strings Template strings
  72. 72. var a = 10; var b = 10; console.log(`JavaScript first appeared ${a+b} years ago. Crazy!`); //=> JavaScript first appeared 20 years ago. Crazy! ! console.log(`The number of JS MVC frameworks is ${2 * (a + b)} and not ${10 * (a + b)}.`); //=> The number of JS frameworks is 40 and not 2000. String substitution…
  73. 73. function fn() { return 42; } console.log(`Meaning of life: ${fn()}`); //=> Meaning of life: 42 ! var author = {name: ‘Douglas Adams'}; console.log(`I really enjoy, ${user.name.toUpperCase()}.`); Function and data access…
  74. 74. var greeting = "Hello World"; ! var greeting = "Hello " + “World"; ! console.log(`you just made the first step into a larger World!`); Multiline strings!
  75. 75. More tomorrow! https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
  76. 76. <tag> You’re it!
  77. 77. Share, find, re-use…
  78. 78. Share, find, re-use…
  79. 79. Chris Heilmann christianheilmann.com @codepo8 Thank you!

×