Langsung ke konten utama

Sedikit Pengertian HTML 5

Siang sobat yang cakep-cakep dan manis-manis , mudah-mudahan kalian selalu tersenyum menghadapi keanehan dunia saat ini hehe ...
Postingan yang saya akan bagikan kali ini mengenai Sedikit Pengertian HTML5 , bagi sobat semua mungkin tidak asing lagi dengan HTML5 tapi bagi sobat yang lain saya fikir ada yang belum tahu apa itu HTML5 , nah untuk itu saya coba share sedikit tentang HTML5


HTML5 adalah spesifikasi atau standar yang dikeluarkan oleh W3C ( World Wide Web Consortium ) sebagai revisi dari standar HTML. Kita banyak menjumpai aplikasi web yang masih menggunakan standard HTML4 namun beberapa sudah migrasi ke HTML5 .
Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salahsatunya adalah flash dan silverlight.
Semakin banyaknya plugin didalam aplikasi atau browser membuat aplikasi web susah untuk menembus banyak browser , hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda , untuk contoh kita ingin memasang plugin flash untuk sharing vidio maka pada halaman web kita harus ditulis sebagai berikut :
<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">
   <param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
   <param name="wmode" value="transparent" />
</object>
Kalau sebelumnya kita menggunakan plugin flash dari adobe untuk menjalankan aplikasi web pada browser  maka lain caranya bila kita menggunakan silverlight .Teknologi silverlight dikembangkan oleh Microsoft . Contoh penggunaan silverlight pada halaman web dapat dilihat pada HTML dibawah ini :
<object width="300" height="300" data="data:application/x-silverlight-2," type="application/x-silverlight-2">
    <param name="source" value="SilverlightApplication1.xap"/>
</object> 
Dan HTML5 mencoba untuk menyederhanakan kompleksitas penggunaan media vidio dengan standar baru yaitu penggunaan tag <vidio>.Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file vidio sebagai berikut
<video src=tutorialku.mp4>
</video>
Isu bagaimana menjalankan file vidio pada aplikasi web merupakan salahsatu contoh  bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, mungkin sudah saatnya kita manfaatkan HTML5 sebagai standard web kita.

Lalu muncul pertanyaan . Apakah Browser Saya Suport HTML5 ?
Bagaimana caranya kita menguji apakah browser yang anda instal itu sudah suport HTML5 atau tidak dan seberapa banyak fitur HTML5 yang di suport ? Caranya cukup mudah , so yang pertama pastikan koneksi internet sobat jalan dan arahkan ke alamat web sebagai berikut :
http://html5test.com
Sebgai contoh ilustrasi saya menggunakan browser Firefox versi 3.6.13 menghasilkan skor 139 dan bonus skor 4 , seperti yang terlihat dibawah :

Sedangkan kalau diuji menggunakan IE Browser Versi 8.0 menghasilkan skor yang kecil yaitu 27 tanpa bonus

Dan apabila kita menggunakan Google Chorme versi 9.0 untuk menguji skor HTML5 dengan alamat test HTML5 maka memperoleh hasil skor cukup besar yaitu 242 

 
Nah dari uji coba diatas , yang cocok sebagai tesbed aplikasi web berbasis HTML5 adalah Google Chorme 9.0 keatas , tapi selebihnya Up To Brow hehe ...

NB : Ini Sekedar Share saja
Salam Bloger Indonesia


Komentar

  1. berarti google chrome lebih bagus utk browsing ya mas?

    BalasHapus
  2. sumpah euy sayamah karek nyaho ( tahu ),,,
    haturthank you kang bro,infonya,,,paingan atuh ari kitumah ,,,

    BalasHapus
    Balasan
    1. ya sekedar informasi saja kang ...
      tapi pada dasarnya punya kelebihan dan kelemahan masing2...

      Hapus
  3. wah keren infonya mas, HTML5 mantap thank dah berbagi, maaf baru bisa berkunjung lagi

    BalasHapus
    Balasan
    1. lumayan mas
      memang te.o.pe nih HTML5 ... terimakasih kang
      dan nantikan kunjungan baliknya tapi siapkan kopi mas alex hehe

      Hapus
  4. walau aku gak ngerti bener tentang Html4 atau Html5, dengan adanya artikel ini sangat membantu perbedaan antara Html4 dan Html5... terima kasih kang atas informasinya

    BalasHapus
  5. Wah ini sangat bermanfaat untuk pengetahuan saya sobat, terima kasih banyak sudah berbagi

    BalasHapus
    Balasan
    1. sama-sama mas terimakasih juga kunjungan nya

      Hapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition: