Masa Depan HTML5 dan Aplikasi Interaktif

Teknologi Aplikasi Masa Depan

12/02/12 1

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

~= HTML + CSS + JavaScript

12/02/12 4

Tujuan dikembangkannya HTML5

Mengurangi penggunaan external plugin
Mengurangi scripting
Mengurangi ketergantungan pada peramban
tertentu

12/02/12 5

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

Menu hari ini

Semantik dan markup
Audio dan video
Canvas
CSS3
Media penyimpanan
File API
Komunikasi real-time

12/02/12 7

Kencangkan sabuk pengaman anda!

12/02/12 8

Dukungan peramban web

12/02/12 10

Semantik dan Markup

12/02/12 11

Lebih ringkas dan mudah dimengerti

12/02/12 12


12/02/12 13


<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


12/02/12 15

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

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

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

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

Audio dan Video

12/02/12 20

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

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

Parameter Canvas Arc

12/02/12 25

Canvas

CSS3

12/02/12 26

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

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

Gradien

12/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);

Contoh silakan lihat di berkas bayangan.html

12/02/12 30

Radius

Sudut membulat

border-radius: 20px;

border-top-left-radius: 20px;

Contoh silakan lihat di berkas radius.html

12/02/12 31

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

Animasi

Contoh silakan lihat di berkas animasi.html

12/02/12 33

Dan masih banyak fitur lainnya...

Offline Storage
FileSystem API
Real-time Communication
Geolocation

12/02/12 34

Masa depan HTML5

12/02/12 35

Masa depan HTML5

12/02/12 36

HTML5 Game

12/02/12 37

Masa depan HTML5

12/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/simple-animation-in-the-html5-canvas-element/
http://www.suburban-glory.com/blog?page=135

12/02/12 40

Masa Depan HTML5 dan Aplikasi Interaktif

Recommended

Recommended

More Related Content

Similar to Masa Depan HTML5 dan Aplikasi Interaktif

Similar to Masa Depan HTML5 dan Aplikasi Interaktif (20)

Masa Depan HTML5 dan Aplikasi Interaktif