HTML5: Teknologi Aplikasi Masa Depan
40
12/02/12 1 Teknologi Aplikasi Masa Depan
-
Upload
fitra-aditya -
Category
Technology
-
view
1.094 -
download
4
Transcript of HTML5: Teknologi Aplikasi Masa Depan
12/02/12 1
Teknologi Aplikasi Masa Depan
12/02/12 2
12/02/12 3
HTML dari masa ke masa
1991 HTML1994 HTML21996 CSS1 + JavaScript1997 HTML41998 CSS22000 XHTML12002 Tableless Design2005 AJAX2009 HTML5 + CSS3
12/02/12 4
~= HTML + CSS + JavaScript
12/02/12 5
Tujuan dikembangkannya HTML5
Mengurangi penggunaan external pluginMengurangi scriptingMengurangi ketergantungan pada peramban tertentu
12/02/12 6
Yang baru dari HTML5
Lebih ringkasPenambahan markupMarkup yang lebih 'manusiawi'Dukungan multimediaDukungan media penyimpananDukungan komunikasi real-time
12/02/12 7
Menu hari ini
Semantik dan markupAudio dan videoCanvasCSS3Media penyimpananFile APIKomunikasi real-time
12/02/12 8
Kencangkan sabuk pengaman anda!
12/02/12 9
12/02/12 10
Dukungan peramban web
12/02/12 11
Semantik dan Markup
12/02/12 12
Lebih ringkas dan mudah dimengerti
12/02/12 13
Lebih ringkas dan mudah dimengerti
12/02/12 14
Lebih ringkas dan mudah dimengerti
<body>
<header></header>
<nav></nav>
<section>
<article></article>
</section>
<footer></footer>
</body>
<body>
<div id=”header”></div>
<div id=”nav”></div>
<div id=”section”>
<div id=”article”></div>
</div>
<div id=”footer”></div>
</body>
HTML5
HTML4
12/02/12 15
Lebih ringkas dan mudah dimengerti
12/02/12 16
Dukungan markup tags yang lebih banyak
headerfooternavsectionasidearticleaddressfigureaudiovideocanvasde el el (lihat cheat sheet)
12/02/12 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 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 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 20
Audio dan Video
12/02/12 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 22
Canvas
12/02/12 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 24
Canvas
12/02/12 25
Parameter Canvas Arc
12/02/12 26
Canvas
CSS3
12/02/12 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 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 29
Gradien
12/02/12 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 31
Radius
Sudut membulat
border-radius: 20px;
border-top-left-radius: 20px;
Contoh silakan lihat di berkas radius.html
12/02/12 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 33
Animasi
Contoh silakan lihat di berkas animasi.html
12/02/12 34
Dan masih banyak fitur lainnya...
Offline StorageFileSystem APIReal-time CommunicationGeolocation
12/02/12 35
Masa depan HTML5
12/02/12 36
Masa depan HTML5
12/02/12 37
HTML5 Game
12/02/12 38
Masa depan HTML5
12/02/12 39
Sekian dan Terima Kasih...
12/02/12 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
