Your SlideShare is downloading. ×
0
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
HTML5: Teknologi Aplikasi Masa Depan
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5: Teknologi Aplikasi Masa Depan

1,074

Published on

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

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,074
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
88
Comments
2
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. Teknologi Aplikasi Masa Depan12/02/12 1
  • 2. 12/02/12 2
  • 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. ~= HTML + CSS + JavaScript12/02/12 4
  • 5. Tujuan dikembangkannya HTML5 Mengurangi penggunaan external plugin Mengurangi scripting Mengurangi ketergantungan pada peramban tertentu12/02/12 5
  • 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. Menu hari ini Semantik dan markup Audio dan video Canvas CSS3 Media penyimpanan File API Komunikasi real-time12/02/12 7
  • 8. Kencangkan sabuk pengaman anda!12/02/12 8
  • 9. 12/02/12 9
  • 10. Dukungan peramban web12/02/12 10
  • 11. Semantik dan Markup12/02/12 11
  • 12. Lebih ringkas dan mudah dimengerti12/02/12 12
  • 13. Lebih ringkas dan mudah dimengerti12/02/12 13
  • 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. Lebih ringkas dan mudah dimengerti12/02/12 15
  • 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. 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. 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. 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. Audio dan Video12/02/12 20
  • 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. Canvas12/02/12 22
  • 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. Canvas12/02/12 24
  • 25. Parameter Canvas Arc12/02/12 25
  • 26. Canvas CSS312/02/12 26
  • 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. 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. Gradien12/02/12 29
  • 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. Radius Sudut membulat border-radius: 20px; border-top-left-radius: 20px; Contoh silakan lihat di berkas radius.html12/02/12 31
  • 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. Animasi Contoh silakan lihat di berkas animasi.html12/02/12 33
  • 34. Dan masih banyak fitur lainnya... Offline Storage FileSystem API Real-time Communication Geolocation12/02/12 34
  • 35. Masa depan HTML512/02/12 35
  • 36. Masa depan HTML512/02/12 36
  • 37. HTML5 Game12/02/12 37
  • 38. Masa depan HTML512/02/12 38
  • 39. Sekian dan Terima Kasih ...12/02/12 39
  • 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

×