HTML5: Teknologi Aplikasi Masa Depan

1. Teknologi Aplikasi Masa Depan 12/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 + CSS3 12/02/12 3

4. ~= HTML + CSS + JavaScript 12/02/12 4

5. Tujuan dikembangkannya HTML5 Mengurangi penggunaan external plugin Mengurangi scripting Mengurangi ketergantungan pada peramban tertentu 12/02/12 5

6. Yang baru dari HTML5 Lebih ringkas Penambahan markup Markup yang lebih 'manusiawi' Dukungan multimedia Dukungan media penyimpanan Dukungan komunikasi real-time 12/02/12 6

7. Menu hari ini Semantik dan markup Audio dan video Canvas CSS3 Media penyimpanan File API Komunikasi real-time 12/02/12 7

8. Kencangkan sabuk pengaman anda! 12/02/12 8

9. 12/02/12 9

10. Dukungan peramban web 12/02/12 10

11. Semantik dan Markup 12/02/12 11

12. Lebih ringkas dan mudah dimengerti 12/02/12 12

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

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.html 12/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.html 12/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.html 12/02/12 19

20. Audio dan Video 12/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.html 12/02/12 21

22. Canvas 12/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.html 12/02/12 23

24. Canvas 12/02/12 24

25. Parameter Canvas Arc 12/02/12 25

26. Canvas CSS3 12/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.html 12/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.html 12/02/12 28

29. Gradien 12/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.html 12/02/12 30

31. Radius Sudut membulat border-radius: 20px; border-top-left-radius: 20px; Contoh silakan lihat di berkas radius.html 12/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.html 12/02/12 32

33. Animasi Contoh silakan lihat di berkas animasi.html 12/02/12 33

34. Dan masih banyak fitur lainnya... Offline Storage FileSystem API Real-time Communication Geolocation 12/02/12 34

35. Masa depan HTML5 12/02/12 35

37. HTML5 Game 12/02/12 37

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=135 12/02/12 40

HTML5: Teknologi Aplikasi Masa Depan

HTML5: Teknologi Aplikasi Masa Depan

Recommended

More Related Content

Similar to HTML5: Teknologi Aplikasi Masa Depan

Similar to HTML5: Teknologi Aplikasi Masa Depan(20)

HTML5: Teknologi Aplikasi Masa Depan