Teknologi Aplikasi Masa Depan12/02/12                                   1
12/02/12   2
HTML dari masa ke masa    1991   HTML    1994   HTML2    1996   CSS1 + JavaScript    1997   HTML4    1998   CSS2    2000  ...
~= HTML + CSS + JavaScript12/02/12                                4
Tujuan dikembangkannya HTML5    Mengurangi penggunaan external plugin    Mengurangi scripting    Mengurangi ketergantungan...
Yang baru dari HTML5    Lebih ringkas    Penambahan markup    Markup yang lebih    manusiawi    Dukungan multimedia    Duk...
Menu hari ini           Semantik dan markup           Audio dan video           Canvas           CSS3           Media peny...
Kencangkan sabuk pengaman anda!12/02/12                                 8
12/02/12   9
Dukungan peramban web12/02/12                       10
Semantik dan Markup12/02/12                         11
Lebih ringkas dan mudah dimengerti12/02/12                                   12
Lebih ringkas dan mudah dimengerti12/02/12                                   13
Lebih ringkas dan mudah dimengerti    <body>       <header></header>       <nav></nav>       <section>           <article>...
Lebih ringkas dan mudah dimengerti12/02/12                                   15
Dukungan markup tags yang lebih banyak    header    footer    nav    section    aside    article    address    figure    a...
Form input    <input type=”text” required>    <input type=”email”>    <input type=”date” min="2012-01-01" max="2012-12-31"...
Contoh markup tags lainnya    <input list=”linux”>    <datalist id="linux">       <option value="BlankOn">       <option v...
Contoh markup tags lainnya    <meter min="0" max="100" value="91">A+</meter>    <progress>Menunggu...</progress>    <progr...
Audio dan Video12/02/12                     20
Audio dan Video    <audio src="sound.ogg" controls></audio>    <audio controls>      <source src="sound.mp3" type="audio/m...
Canvas12/02/12            22
Canvas  <canvas id="canvas" width="838" height="220"></canvas>  <script>   var canvasContext =  document.getElementById("c...
Canvas12/02/12        24
Parameter Canvas Arc12/02/12                     25
Canvas           CSS312/02/12               26
Warna transparan Efek warna transparan color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75);                   ...
Gradien Efek gradien warna filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#000000);...
Gradien12/02/12        29
Bayangan Efek bayangan text-shadow: 2px 2px 0px rgba(64, 64, 64, 0.5); box-shadow: 2px 2px 0px rgba(64, 64, 64, 0.5);     ...
Radius Sudut membulat border-radius: 20px; border-top-left-radius: 20px;                                 Contoh silakan li...
Stroke Efek stroke -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 1.50px;     ...
Animasi           Contoh silakan lihat di berkas animasi.html12/02/12                                           33
Dan masih banyak fitur lainnya...    Offline Storage    FileSystem API    Real-time Communication    Geolocation12/02/12  ...
Masa depan HTML512/02/12                  35
Masa depan HTML512/02/12                  36
HTML5 Game12/02/12            37
Masa depan HTML512/02/12                  38
Sekian dan Terima Kasih                      ...12/02/12                             39
Referensi    http://html5rocks.com/    http://http://www.suburban-glory.com/blog?page=135    http://html5.litten.com/simpl...
Upcoming SlideShare
Loading in …5
×

HTML5: Teknologi Aplikasi Masa Depan

1,412 views

Published on

Materi lokakarya HTML5 pada Konferensi BlankOn #4, 1-2 Desember 2012, CICO Bogor

Published in: Technology
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,412
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
95
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5: Teknologi Aplikasi Masa Depan

  1. 1. Teknologi Aplikasi Masa Depan12/02/12 1
  2. 2. 12/02/12 2
  3. 3. HTML dari masa ke masa 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2000 XHTML1 2002 Tableless Design 2005 AJAX 2009 HTML5 + CSS312/02/12 3
  4. 4. ~= HTML + CSS + JavaScript12/02/12 4
  5. 5. Tujuan dikembangkannya HTML5 Mengurangi penggunaan external plugin Mengurangi scripting Mengurangi ketergantungan pada peramban tertentu12/02/12 5
  6. 6. Yang baru dari HTML5 Lebih ringkas Penambahan markup Markup yang lebih manusiawi Dukungan multimedia Dukungan media penyimpanan Dukungan komunikasi real-time12/02/12 6
  7. 7. Menu hari ini Semantik dan markup Audio dan video Canvas CSS3 Media penyimpanan File API Komunikasi real-time12/02/12 7
  8. 8. Kencangkan sabuk pengaman anda!12/02/12 8
  9. 9. 12/02/12 9
  10. 10. Dukungan peramban web12/02/12 10
  11. 11. Semantik dan Markup12/02/12 11
  12. 12. Lebih ringkas dan mudah dimengerti12/02/12 12
  13. 13. Lebih ringkas dan mudah dimengerti12/02/12 13
  14. 14. Lebih ringkas dan mudah dimengerti <body> <header></header> <nav></nav> <section> <article></article> HTML5 </section> <footer></footer> </body> <body> <div id=”header”></div> <div id=”nav”></div> <div id=”section”> <div id=”article”></div> HTML4 </div> <div id=”footer”></div> </body>12/02/12 14
  15. 15. Lebih ringkas dan mudah dimengerti12/02/12 15
  16. 16. Dukungan markup tags yang lebih banyak header footer nav section aside article address figure audio video canvas de el el (lihat cheat sheet)12/02/12 16
  17. 17. Form input <input type=”text” required> <input type=”email”> <input type=”date” min="2012-01-01" max="2012-12-31" value="2012-01-02"> <input type="range" min="0" max="50" value="10"> <input type="search" results="10" placeholder="Cari..."> <input type="tel" placeholder="(021) 878-1090" pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$"> <input type="color" placeholder="e.g. #bbbbbb"> <input type="number" step="1" min="-5" max="10" value="0"> Contoh silakan lihat di berkas form.html12/02/12 17
  18. 18. Contoh markup tags lainnya <input list=”linux”> <datalist id="linux"> <option value="BlankOn"> <option value="Debian"> <option value="Ubuntu"> </datalist> <details> <summary>BlanKonf 4</summary> Revolusi Teknologi Informasi dan Komunikasi Indonesia </details> Contoh silakan lihat di berkas markup.html12/02/12 18
  19. 19. Contoh markup tags lainnya <meter min="0" max="100" value="91">A+</meter> <progress>Menunggu...</progress> <progress value="75" max="100">3/4 complete</progress> dan masih banyak yang lainnya... Contoh silakan lihat di berkas markup.html12/02/12 19
  20. 20. Audio dan Video12/02/12 20
  21. 21. Audio dan Video <audio src="sound.ogg" controls></audio> <audio controls> <source src="sound.mp3" type="audio/mpeg"> <source src="sound.ogg" type="audio/ogg"> </audio> <video src="movie.webm" autoplay controls></video> <video autoplay controls> <source src="movie.webm" type=video/webm; codecs="vp8, vorbis"> <source src="movie.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"> <source src="movie.ogv" type=video/ogg; codecs="theora, vorbis"> </video> Contoh silakan lihat di berkas audio.html dan video.html12/02/12 21
  22. 22. Canvas12/02/12 22
  23. 23. Canvas <canvas id="canvas" width="838" height="220"></canvas> <script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = round; canvasContext.strokeStyle = rgba(255, 127, 0, 0.5); canvasContext.stroke(); </script> Contoh silakan lihat di berkas canvas.html12/02/12 23
  24. 24. Canvas12/02/12 24
  25. 25. Parameter Canvas Arc12/02/12 25
  26. 26. Canvas CSS312/02/12 26
  27. 27. Warna transparan Efek warna transparan color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75); Contoh silakan lihat di berkas rgba.html12/02/12 27
  28. 28. Gradien Efek gradien warna filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#000000); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* webkit */ background: -moz-linear-gradient(top, #ccc, #000); /* firefox */ Contoh silakan lihat di berkas gradien.html12/02/12 28
  29. 29. Gradien12/02/12 29
  30. 30. Bayangan Efek bayangan text-shadow: 2px 2px 0px rgba(64, 64, 64, 0.5); box-shadow: 2px 2px 0px rgba(64, 64, 64, 0.5); Contoh silakan lihat di berkas bayangan.html12/02/12 30
  31. 31. Radius Sudut membulat border-radius: 20px; border-top-left-radius: 20px; Contoh silakan lihat di berkas radius.html12/02/12 31
  32. 32. Stroke Efek stroke -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 1.50px; Contoh silakan lihat di berkas stroke.html12/02/12 32
  33. 33. Animasi Contoh silakan lihat di berkas animasi.html12/02/12 33
  34. 34. Dan masih banyak fitur lainnya... Offline Storage FileSystem API Real-time Communication Geolocation12/02/12 34
  35. 35. Masa depan HTML512/02/12 35
  36. 36. Masa depan HTML512/02/12 36
  37. 37. HTML5 Game12/02/12 37
  38. 38. Masa depan HTML512/02/12 38
  39. 39. Sekian dan Terima Kasih ...12/02/12 39
  40. 40. Referensi http://html5rocks.com/ http://http://www.suburban-glory.com/blog?page=135 http://html5.litten.com/simple-animation-in-the-html5-canvas-element/ http://www.suburban-glory.com/blog?page=13512/02/12 40

×