Tampilkan postingan dengan label WEB. Tampilkan semua postingan
Tampilkan postingan dengan label WEB. Tampilkan semua postingan

Sabtu, 26 September 2015

SQL vs NoSQL: How to Choose


SQL databases:
    • store related data in tables
    • require a schema which defines tables prior to use
    • encourage normalization to reduce data redundancy
    • support table JOINs to retrieve related data from multiple tables in a single command
    • implement data integrity rules
    • provide transactions to guarantee two or more updates succeed or fail as an atomic unit
    • can be scaled (with some effort)
    • use a powerful declarative language for querying
    • offer plenty of support, expertise and tools.

NoSQL databases:
    • store related data in JSON-like, name-value documents
    • can store data without specifying a schema
    • must usually be denormalized so information about an item is contained in a single document
    • should not require JOINs (presuming denormalized documents are used)
    • permit any data to be saved anywhere at anytime without verification
    • guarantee updates to a single document — but not multiple documents
    • provide excellent performance and scalability
    • use JSON data objects for querying
    • are a newer, exciting technology.
SQL databases are ideal for projects where requirements can be determined and robust data integrity is essential. NoSQL databases are ideal for unrelated, indeterminate or evolving data requirements where speed and scalability are more important. In simpler terms:
    • SQL is digital. It works best for clearly defined, discrete items with exact specifications. Typical use cases are online stores and banking systems.
    • NoSQL is analog. It works best for organic data with fluid requirements. Typical use cases are social networks, customer management and web analytics systems.
Few projects will be an exact fit. Either option could be viable if you have shallower or naturally denormalized data. But please be aware these simplified example scenarios with sweeping generalizations! You know more about your project than I do, and I wouldn’t recommend switching from SQL to NoSQL or vice versa unless it offers considerable benefits. It’s your choice. Consider the pros and cons at the start of your project and you can’t go wrong.

Scenario One: a Contact List

Let’s re-invent the wheel and implement an SQL-based address book system. Our initial naive contact table is defined with the following fields:
    • id
    • title
    • firstname
    • lastname
    • gender
    • telephone
    • email
    • address1
    • address2
    • address3
    • city
    • region
    • zipcode
    • country
Problem one: few people have a single telephone number. We probably need at least three for land-line, mobile and workplace, but it doesn’t matter how many we allocate — someone, somewhere will want more. Let’s create a separate telephone table so contacts can have as many as they like. This also normalizes our data — we don’t need a NULL for contacts without a number:
  • contact_id
  • name (text such as land-line, work mobile, etc.)
  • number
Problem two: we have the same issue with email addresses, so let’s create a similar email table:
  • contact_id
  • name (text such as home email, work email, etc.)
  • address
Problem three: we may not wish to enter a (geographic) address, or we may want to enter multiple addresses for work, home, holiday homes, etc. We therefore need a new address table:
    • contact_id
    • name (text such as home, office, etc.)
    • address1
    • address2
    • address3
    • city
    • region
    • zipcode
    • country
Our original contact table has been reduced to:
    • id
    • title
    • firstname
    • lastname
    • gender

Great — we have a normalized database which can store any number of telephone numbers, email addresses and addresses for any contact. Unfortunately …

The schema is rigid
We’ve not considered the contact’s middle name(s), date of birth, company or job role. It doesn’t matter how many fields we add, we’ll soon receive update requests for notes, anniversaries, relationship statuses, social media accounts, inside leg measurements, favorite type of cheese etc. It’s impossible to foresee every option, so we’d possibly create an otherdata table with name-value pairs to cope.

The data is fragmented
It’s not easy to for developers or system administrators to examine the database. The program logic will also become slower and more complex, because it’s not practical to retrieve a contact’s data in a single SELECT statement with multiple JOIN clauses. (You could, but the result would contain every combination of telephone, email and address: if someone had three telephone numbers, five emails and two addresses, the SQL query would generate thirty results.)

Finally, full-text search is difficult. If someone enters the string “SitePoint”, we must check all four tables to see if it’s part of a contact name, telephone, email or address and rank the result accordingly. If you’ve ever used WordPress’s search, you’ll understand how frustrating that can be.

The NoSQL Alternative
Our contact data concerns people. They are unpredictable and have differing requirements at different times. The contact list would benefit from using a NoSQL database, which stores all data about an individual in a single document in the contacts collection:

{
  name: [
    "Billy", "Bob", "Jones"
  ],
  company: "Fake Goods Corp",
  jobtitle: "Vice President of Data Management",
  telephone: {
    home: "0123456789",
    mobile: "9876543210",
    work: "2244668800"
  },
  email: {
    personal: "bob@myhomeemail.net",
    work: "bob@myworkemail.com"
  },
  address: {
    home: {
      line1: "10 Non-Existent Street",
      city: "Nowhere",
      country: "Australia"
    }
  },
  birthdate: ISODate("1980-01-01T00:00:00.000Z"),
  twitter: '@bobsfakeaccount',
  note: "Don't trust this guy",
  weight: "200lb",
  photo: "52e86ad749e0b817d25c8892.jpg"
}

In this example, we haven’t stored the contact’s title or gender, and we’ve added data which need not apply to anyone else. It doesn’t matter — our NoSQL database won’t mind, and we can add or remove fields at will.

Because the contact’s data is contained in a single document, we can retrieve some or all information using a single query. A full-text search is also simpler; in MongoDB we can define an index on all contact text fields using:

db.contact.createIndex({ "$**": "text" });
then perform a full-text search using:
db.contact.find({
  $text: { $search: "something" }
});

Scenario Two: a Social Network

A social network may use similar contact data stores, but it expands on the feature set with options such as relationship links, status updates, messaging and “likes”. These facilities may be implemented and be dropped in response to user demand — it’s impossible to predict how they will evolve.

In addition:

Most data updates have a single point of origin: the user. It’s unlikely we’ll need to update two or more records at any one time, so transaction-like functionality is not required.
Despite what some users may think, a failed status update is unlikely to cause a global meltdown or financial loss. The application’s interface and performance take a higher priority than robust data integrity.

NoSQL appears to be a good fit. The database allows us to quickly implement features storing different types of data. For example, all the user’s dated status updates could be placed in a single document in the status collection:

{
  user_id: ObjectID("65f82bda42e7b8c76f5c1969"),
  update: [
    {
      date: ISODate("2015-09-18T10:02:47.620Z"),
      text: "feeling more positive today"
    },
    {
      date: ISODate("2015-09-17T13:14:20.789Z"),
      text: "spending far too much time here"
    }
    {
      date: ISODate("2015-09-17T12:33:02.132Z"),
      text: "considering my life choices"
    }
  ]
}

While this document could become long, we can fetch a subset of the array, such as the most recent update. The whole status history for every user can also be searched quickly.


Now presume we wanted to introduce an emoticon choice when posting an update. This would be a matter of adding a graphic reference to new entries in the update array. Unlike an SQL store, there’s no need to set previous message emoticons to NULL — our program logic can show a default or no image if an emoticon isn’t set.

Scenario Three: a Warehouse Management System

Consider a system which monitors warehoused goods. We need to record:

    • products arriving at the warehouse and being allocated to a specific location/bay
    • movements of goods within the warehouse, e.g. rearranging stock so the same products are in adjacent locations
    • orders and the subsequent removal of products from the warehouse for delivery.

Generic product information such as box quantities, dimensions and color can be stored, but it’s discrete data we can identify and apply to anything. We’re unlikely to be concerned with specifics, such as laptop processor speed or estimated smartphone battery life.

Our data requirements:

  1. It’s imperative to minimize mistakes. We can’t have products disappearing or being moved to a location where different products are already being stored.
  2. I hope these scenarios help, but every project is different and, ultimately, you need to make your own decision. (Although, we developers are adept at justifying our technological choices, regardless of how good they are!)
  3. In its simplest form, we’re recording the transfer of items from one physical area to another — or removing from location A and placing in location B. That’s two updates for the same action.
We need a robust store with enforced data integrity and transaction support. Only an SQL database will (currently) satisfy those requirements.


Source : http://www.sitepoint.com/sql-vs-nosql-choose/

Sabtu, 16 Agustus 2014

MEMBUAT WEB DENGAN MENGGUNAKAN BOOTSTRAP V.3

Sobat sekalian mungkin untuk orang yang sudah pernah membuat website sudah tidak asing lagi dengan Framework Bootstrap. Boostrap merupakan style web yang tinggal pake saja, jadi untuk memuat web yang responsive sekalipun gak usah pusing script css-nya gimana....hehehe.
Oh ya gw jelasin dulu apa itu yang namanya web responsive, web responsive merupakan web yang memiliki variasi tampilan untuk berbagai layar. Misalnya kita mau browsing di Desktop, Tablet, dan juga Mobile akan memiliki tampilan yang berbeda-beda. Mungkin orang yang masih awam akan bertanya kenapa kok bisa beda? Bukankah klo beda tampilan informasi jadi acak-acakan nanti? Jawabannya adalah perbedaan yang dimaksud disini adalah dari segi struktur tampilan informasi tetapi untuk informasi yang disampaikan tidak berkurang alias gunanya responsive adalah membuat tampilan di berbagai devisce lebih menarik.
Konsepnya seperti ini, kita punya berbagai device.
Layar Device

Untuk membuat tampilan web di berbagai device ini kita tidak perlu koding untuk masing-masing device jika kita sudah bisa menggunakan yang namanya bootstrap yang saya maksud. Karena walaupun ukuran layar berbeda-beda bootstrap bisa handle semuanya tanpa mengurangi informasi. Dan pastinya yang gak jago CSS gw saranin pake yang satu ini nih....hehhee.
  1. Oke langkah pertama kalian download dulu bootstrapnya disini.
  2. Kemudian Download Jquery Download the compressed, production jQuery 1.11.1
  3. Setelah itu ekstrak boostrap yang sudah kalian download sehingga bentuknya seperti ini.
  4. Hasil Ekstraksi Bootstrap
  5. Setelah itu masukkan JQuery yang telah di download tadi ke folder js diatas, sehingga isinya seperti ini.
  6. Memasukkan file Jquery
  7. Kemudian kita coba membuat halaman simple dengan codingan seperti di bawah ini.
  8. Tuliskan script di bawah ini pada notepad/notepad++ dan simpan dengan nama index.html
  9. 1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <html>
    <head>
    <title>Tutorial Pertama</title>
    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>
    <body>
    <div class="container">
    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
    
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>
    <div class="row">
    <div class="col-md-8 col-xs-8 col-sm-6">
    <h3>Bagian Content</h3>
    <br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
    <div class="col-md-4 col-xs-4">
    <h4>Bagian Widget</h4>
    </div>
    
    
    </div>
    
    
    <div class="well well-sm text-center">Copyright &copy by Indra Tobing</div>
    </div>
    <script src="js/jquery-1.11.1.min.js" ></script>
    <script src="js/bootstrap.min.js" ></script>
    
    </body>
    
    </html>
    
  10. Jika kalian jalankan di web browser dengan cara double click pada index.html yang disimpan tadi.
  11. Hasilnya adalah seperti pada gambar  bawah ini.
Output
Untuk download source code bisa disini.
Untuk memudahkan kalian mempelajari bootstrap memasang Bootstrap Twitter Offline Docs pada Google Chrome  kalian yaitu di webstore

Senin, 03 Maret 2014

Cascading Style Sheets (CSS)

Cascading Style Sheets(CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs kita sekaligus memformat ulang situs kita. 
CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser.

KeuntunganCSS
  • Dapat di-update denga ncepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturan-aturan CSS tersebut untuk diterapkan pada seluruh dokumen-dokumenHTML pada halaman situs kita.
  • User yang berbeda dapat mempunyai style-sheet  yang berbeda pula.
  • Ukuran dan kompleksitas document code dapat diperkecil.
Sebuah style sheet terdir dari beberapaaturan(rules). Masing-masing aturan terdiri dari satu atau lebih selektor(selector) dan sebuah blok deklarasi (declaration block). Sebuah blok deklarasi terdiri dari beberapa
deklarasi yang dipisahkan oleh titik koma (;). Masing-masing deklarasi terdiri dari property, titik dua(:) dan nilai(value).

Struktur penulisan CSS
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
#body{
margin:auto;
    width:800px;
    border:1px solid ;
border-color:white black black black;
}

DIV#menuku {
/* ini digunakan untuk mengatur bingkai menu */
width:780px; /* digunakan untuk mengatur lebar bingkai menu */
margin: 0 auto; /* digunakan untuk mengatur posisi menu ditengah halaman */
padding: 1px; /* digunakan untuk mengatur jarak bingkai dengan menu */

}
DIV#menuku ul {
/* ini digunakan untuk merubah tampilan list */
list-style: none; /* digunakan untuk menghilangkan simbol list */
margin: 0; /* digunakan untuk menghilangkan jarak list dengan bingkai menu */
padding: 0; /* sda */
}
DIV#menuku ul li {
display: inline; /* mengubah list menjadi horizontal */
padding-right: 5px; /* mengatur jarak list item */
}
DIV#menuku ul li a {
/* digunakan untuk mengatur hyperlink yang sudah dibuat */
background-color: #d9dce5; /* warna background tulisan */
padding: 5px 10px 3px 10px; /* memberi efek kotak pada tulisan */
color: white; /* memberi warna tulisan */
border:1px; /* memberi garis luar kotak hyperlink */
text-shadow: 1px 1px #000; /* efek bayangan pada tulisan */
  text-decoration:none; /* menghilangkan garis bawah */
/* dengan konfigurasi diatas hyperlink akan terlihat berbentuk kotak */
}
DIV#menuku ul li a:hover {
/* digunakan untuk mengatur tampilan hyperlink pada saat mouse diatasnya */
background-color: silver;
}
#header{
    bottom: auto;
    position: fixed;
    top: 10px;
    z-index: 100;
    height:30px;
    background-color:#717277;
    width:780px;
    -webkit-box-shadow: #666 1px 1px 2px;
    -moz-box-shadow: #666 1px 1px 2px;
    box-shadow:     #666 1px 1px 2px;
    padding:10px;
text-align:center;
size:30px;
}
#footer {
    background-color: #383838;
    border-top: 1px solid #ccc;
    bottom: 0;
    color: #ffffff;
    height: 20px;
    padding: 10px;
    position: fixed;
    top: auto;
    width: 780px;
    z-index: 101;
    text-align:center;
}
#konten {
    padding:5px;
    margin-top:80px;
    margin-bottom:35px;
}

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;frameset&gt;
&lt;frame src=&quot;website pertamaku.html&quot; name=&quot;main&quot; id=&quot;utama&quot;&gt;
&lt;div id=&quot;body&quot;&gt;
&lt;div id=&quot;header&quot;&gt;
&lt;div id=&quot;menuku&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;HOME&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;content.html&quot; target=&quot;utama&quot;&gt;CONTENT&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;konten&quot;&gt;
&lt;pre&gt;
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
k
y
z
gcjhcj
gchj
fv
h
h
h
h
h
h
h
h
h

&lt;pre&gt;
&lt;/div&gt;



&lt;div id=&quot;footer&quot;&gt;
Desain by indra Tobing
&lt;/div&gt;
&lt;/div&gt;
&lt;/frameset&gt;
&lt;/body&gt;
&lt;/html&gt;


Senin, 20 Januari 2014

Membuat Upload Gambar dengan PHP

Pada postingan kali ini saya akan memberikan tutorial bagaimana melakukan upload gambar dengan menggunakan PHP, sebelum masuk ke tutorial ini ada baiknya teman-teman tau apa itu PHP dan untuk apa sebenarnya PHP itu. Pada upoad gambar yang saya maksud disini adalah file gambar yang akan kita upload nantinya akan disimpan di folder yang telah kita tentukan, darimanapun sumber gambar yang akan anda upload selama gambar tersebut memnuhi kriteria dari segi ekstensi dan ukuran maka akan terupload.
Untuk membuat file upload disini saya memberikan langkah-langkah yang perlu anda lakukan untuk membuat upload gambar disini.

  1. Terlebih dahulu buka aplikasi XAMPP anda dan start pada Apache. Hal ini dilakukan supaya php yang kita tulis nantinya bisa berjalan karena PHP bersifat server side artinya hanya bisa berjalan di server.
  2. Buka folder C:\xampp\htdocs\ dan buat folder baru dengan nama Upload dan didalamnya buat juga sebuah folder upload.
  3. Setelah buat sebuah file dengan nama index.php yang berisi kodingan sebagai berikut ini.
<html>
<body>
<form action="upload_file.php" enctype="multipart/form-data" method="post">
<label for="file">Filename:</label>
<input id="file" name="file" type="file" />
<input name="submit" type="submit" value="Submit" />
</form>
</body>
</html>
</pre>
  1. Setelah itu buat kembali file dengan nama upload_file.php dengan kodingan sebagi berikut ini.
<?php
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 2000000)
&& in_array($extension, $allowedExts))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br>";
    echo "Type: " . $_FILES["file"]["type"] . "<br>";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
    }
  }
else
  {
  echo "Invalid file/ maximaze image 1mb";
  }
?>
  1. Simpan kedua file pada C:\xampp\htdocs\Upload kemudian jalankan pada web browser anda dengan mengetikkan localhost/upload/index.php.
  2. Jika pada saat dijalankan gambar yang diupload invalid maka anda boleh memperbesar ukuran dari maximize upload menjadi 2000000 pada kodingan upload_file.
Ref :http://www.w3schools.com/php/php_file_upload.asp

Jumat, 11 Oktober 2013

Fitur-fitur pada HTML5

           Kehadiran HTML5 dinilai cukup membantu dengan penambahan beberapa fitur baru. Pada postingan kali ini saya akan menjelaskan apa saja fitur baru yang dimaksud dan bagaimana penggunaan untuk setiap fitur baru tersebut. Pada HTML5 terdapat beberapa penambahan diantaranya sebagai berikut.
- Elemen Canvas
- Elemen Media
- Elemen Form
- Elemen Semantik / Struktural

1. Canvas
Elemen canvas digunakan untuk draw atau menggambar. Canvas hanya saja disini bukan alat untuk menggambar tapi hanya sebagai media pendukung untuk menggambar. Untuk menggambar dengan grafik disini biasanya dengan menggunakan javascript.
Contoh penggunaan Canvas.

<canvas id="myCanvas"></canvas><!--canvas yang akan digambar-->
<script type="text/javascript">//Scipt untuk menggambar-->
var canvas=document.getElementById('myCanvas');//fungsi untuk menggambar canvas
var ctx=canvas.getContext('2d');//gambar bujursangkar pertama
ctx.fillStyle='#FF0000';//memberikan warna pada bagian canvas
ctx.fillRect(0,0,80,100);//memberikan parameter titik koordinat
</script>//mengakhiri script canvas

Output :
Canvas diatas juga bisa diatur ukurannya dengan memasukkan attribut height dan weight pada tag canvas dengan cara <canvas id=”mycanvas” height=”300px” weight=”300px”></canvas>.

2. Audio
Untuk memasukkan suara pada html bisa menggunakan tag <audio>.  Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP.  Untuk dukungan pada web browser bisa dilihat pada tabel berikut ini.

Browser
MP3
Wav
Ogg
Internet Explorer
YES
NO
NO
Chrome
YES
YES
YES
Firefox
NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3
YES
YES
Safari
YES
YES
NO
Opera
NO
YES
YES
Dan untuk MIME-nya adalah sebagai berikut ini.
Format
MIME-type
MP3
audio/mpeg
Ogg
audio/ogg
Wav
audio/wav
Untuk attribut audio diatas adalah seperti tabel berikut ini.
Attributes
Attribut
Value
Deskripsi
autoplay
autoplay
Untuk memulai audio secara otomatis pada web terbuka
controls
controls
Untuk menampilkan kontrol seperti volome, seek audio, dan juga tombol untuk memulai/pause
loop
Untuk mengulang audio kembali setelah pemutaran awal selesai
muted
Untuk mematikan suara
auto
metadata
none
Untuk memuat ulang audio ketika halaman dimuat ulang
URL
Untuk memberikan alamat web audio ketika diklik.
Contoh Script :
<audio controls> <--memasukkan media audio-->
  <source src="horse.ogg" type="audio/ogg"><-- mengambil path audio-->
  <source src="horse.mp3" type="audio/mpeg"><-- mengambil path audio-->
  Your browser does not support the audio tag.
</audio><-- menutup tag audio-->

3. Video
Sama halnya dengan audio, hanya saja untuk video kita gunakan tag <video> dan menutupnya kembali dengan </video>. Untuk format yang didukung saat ini ada 3 yaitu MP4, Ogg dan WebM.

Browser
MP4
WebM
Ogg
Internet Explorer
YES
NO
NO
Chrome
YES
YES
YES
Firefox
NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4
YES
YES
Safari
YES
NO
NO
Opera
NO
YES
YES
Untuk MIME-nya sendiri menggunakan seperti tabel beikut ini.
Format
MIME-type
MP4
video/mp4
WebM
video/webm
Ogg
video/ogg
Untuk attribut yang bisa digunakan pada tag video adlah sebagai berikut ini.
Attribute
Value
Deskripsi
autoplay
Memulai secara otomatis video
controls
Untuk menampilkan control video
height
pixels
Untuk mengatur tinggi frame video
loop
Memutar video secara berulang-ulang
muted
Untuk mematikan fungsi suara pada video
URL
Untuk memunculkan poster/gambar pada saat video buffer atau diunduh.
auto
metadata
none
Untuk memuat ulang video
URL
Untuk memberikan link video
pixels
Untuk mengatur lebar frame video
4. Source
Source digunakan disini sama halnya untuk keperluan video dan audio, hanya saja pada <source> akan kita gunakan jika kita memberikan 2 sumber dimana file tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini adalah web browser akan memilih memutar yang mana  nantinya sesuai dengan format yang didukung oleh web browser.
Contoh penggunaan <Source> </source> :
<audio controls>
  <source src="horse.ogg" type="audio/ogg"> <--sumber audio 1 ekstensi ogg-->
  <source src="horse.mp3" type="audio/mpeg"><--sumber audio 2 ekstensi mp3-->
Your browser does not support the audio element.
</audio>

Attribut 
Attribute
Value
Deskripsi
media
media_query
Format dari media yang digunakan
src
URL
Untuk memberikan link sumber media
type
MIME_type
Untuk mendefenisikan tipe MIME

5. Embed
      Embed digunakan untuk melampirkan file dari eksternal seperti *.swf dan lain-lain.
Untuk contoh penggunaannya adalah sebagai berikut ini.
<embed src="helloworld.swf"><--Melampirkan file flash-->
Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut attribut seperti pada tabel berikut ini.
Attributes
Attribute
Value
Description
height
pixels
Untuk mendefenisikan ukuran tinggi frame media.
src
URL
Untuk memberikan sumber media yang dilampirkan
type
MIME_type
Untuk menspesifikasikan tipe dari MIME
width
pixels
Untuk mengatur lebar dari frame media pada saat program dijalankan di browser.
6. Track
Track disini digunakan untuk melampirkan seperti subtitle text pada media. Contoh penggunaanya adalah sebagai berikut ini.
<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en"
  label="English"><--Merupakan subtitle yang dilampirkan pada video-->
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no"
  label="Norwegian">
</video>

Attribut yang bisa digunakan padatag track ini adalah sebagai berikut ini.
Attribute
Value
Deskripsi
default
default
Memberikan text default/subtitle pada video
kind
captions
chapters
descriptions
metadata
subtitles
Menspesifikasikan format dari text yang akan dimunculkan pada layar
label
text
Memberikan labael pada subtitle
src
URL
Merupakan suatu keharusan jika kita ingin melampirkan file
srclang
language_code
Menspesifikasikan tipe dari file lampiran seperti jenisnya (required if kind="subtitles")
7. SVG
SVG (Scalable Vector Graphics) merupakan tag yang digunakan untuk menggambar selain yang sebelumnya kita gunakan seperti canvas. SVG didefenisikan dengan format XML. Setiap elemen dari SVG dapat dianimasikan. Kelebihan dari SVG ini adalah tidak mengurangi kualitas darigambar jika diperbesar karena berbasis vektor sehingga SVG juga direkomendasikan oleh W3C.
Keuntungan SVG
- Gambar SVG dapat dibuat dan diubah dengan menggunakan banyak text editor  biasa
- Gambar SVG dapat dicari, diindex, dimasukkan ke script dan juga di kompres
- Gambar pada SVG dapat diubah ukurannya
- Gambar SVG dapat dicetak dengan kualitas tinggi pada resolusi berapapun
- Gambar SVG dapat diperbesar tampa mengurangi kualitas gambar

Contoh penggunaan SVG :
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

</body>
</html>

Hasil











Perbedaan antara SVG dan Canvas
- SVG adalah sebuah bahasa untuk mendeskripsikan grafik 2D dalam XML
- Canvas menggambar grafik 2D (dengan bantuan javascript)
- SVG adlah dasar XML yang artinya bahwa setiap elemen tersedian utuk SVG DOM  dan juga kita dapat menambahkan javaScript untuk elemen.
- Dalam SVG, setiap gambar yang dibentuk direkomendasikan menjadi sebuah objek. Jika objek SVG diubah maka browser secara otomatis membentuk ulang.
- Canvas mengubah/menterjemahkan berdasarkan pixel dan jika posisi berubah maka kita harus menggambar ulang.

8. Drag and Drop
Drag and Drop adalah sebuah fitur umum. Dengan fitur ini memukinkan untuk memindahkan objek ke lokasi lainnya.
Contoh Program :
<img draggable="true"><-- Memukinkan untuk bisa memindahkan gambar-->

9. Geolocation
Geolocation digunakan untuk mengecek posisi si pengguna jika memukinkan.
Contoh Program :
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
//Jika navigator mendukung pada web browser atau perangkat yang digunaka
    {
    navigator.geolocation.getCurrentPosition(showPosition);
//Mendapatkan posisi terbaru dari si pengguna
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
<--Jika perangkat yang digunakan tidak mendukung geolocation
  }
function showPosition(position)
//nama fungsi
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>

10. Input Types
Input tipe pada form yang baru digunakan pada HTML5 trdapat tipe yang baru. Hanya saja tidak semua tipe didukung oleh web browser.
Tag tersebut diataranya adalah sebagai berikut.
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
Untuk format penggunaan input type tersebut sama hanya dengan input tipe yang digunakan pada form di HTML4 yaitu sebagai berikut ini.
Birthday (date and time): <input type="datetime" name="bdaytime">

Definisi HTML5
Perkembangan HTML5
Kelebihan dan Kekurangan HTML5

Ref :