Video Gunadarma

Video Gunadarma ( Youtube ala Gunadarma)

Hello mas bro & sista. Untuk kali ini saya akan mengulas yang sedikit berbeda dari biasanya. Jadi apa hayo ? 

Ya, saya akan mengulas sub domain dari gunadarma (lebih tepat lagi gunadarma.ac.id) . Jadi, siapa yang benar !.  Sub domain gunadarma yang saya bahas adalah video.gunadarma.ac.id. Selain saya akan menjelaskan tentang deskripsi website ini saya juga akan mengulas tentang Jenis(Statis / Dinamis), Bentuk(Design), Visibility, dan Accesibility.

Baik kita masuk ke intinya

Video Gunadarma adalah suatu website yang dibentuk untuk menyimpan video dari mahasiswa, staff, dosen maupun alumni gunadarma yang telah melakukan upload ke situs ini. Bahkan sepertinya orang umum juga bisa mengupload asal telah Register. Jadi, bias dibilang website ini adalah Youtube versi Gunadarma.

Coba di klik kaka http://video.gunadarma.ac.id/

 

Mari kita kupas untuk Jenis, Bentuk(Design), Visibility dan Accesibility.

Jenis Website

Website yang dinamis merupakan jenis website ini, karena kita bisa lihat dari tujuannya yaitu mengupload video. Berarti bisa terus berubah isinya(up-to-date) yang membuat databasenya ikut terus bertambah. Member bisa terus menambah, edit, maupun menghapus video.

Bentuk Website

Bentuk(Design) website ini lumayan elegan, designya sedikit mirip Youtube dengan warna cirri khas gunadarma yaitu ungu. Website ini dalam penerapan layout menggunakan CSS, HTML, dan Javascript seperti kebanyakan sub domain gunadarma yang lain.

Elegan, simple dan kemiripan dengan youtube terlihat dari homepage :

 

Dari gambar di atas kita dapat melihat menu yang dapat melihat menu katagori apa saja yang ada di website ini.

Visibility Website

Visibility dapat diartikan kepopuleran/page rank website di search engine. Tentu tidak lepas dari user yang suka membuka web ini maupun web lain yang mencatumkan url web ini. Sayangnya kebanyakan blog mahasiswa gunadarma tidak mengunjungi dan mencamtumkan sub domain video.gunadarma.ac.id ini. ( Saya ambil dari beberapa sampel blog dari teman2 yang saya kenal).

Padahal dalam hal design lebih bagus daripada video.unpad.ac.id yang masuk di page pertama jika saya mengetikan keyword : video ac.id di google

Sub domain ini menurut saya kurang bagus dalam hal visibility. Karena jika mengetikan keyword : video maupun video ac.id tidak muncul di page 1 & 2 di search engine Google maupun Yahoo. Seperti gambar di bawah ini :

 

  

Accessibility

Accessibility bila diartikan akses untuk membuka situs ini. Lebih perinci lagi umur berapa saja yang bisa mengakses/membuka website video.gunadarma.ac.id ini. Saya melihat sejauh saya membuka beberapa kontentnya situs ini berisi video yang dapa dilihat dari kalangan anak-anak, remaja, dewasa, maupun lansia.

Selain itu website ini dibuat dari bahasa pemrograman HTML yang merupakan bahasa dasar web. Sehingga website ini dapat dibuka  di browser, mobile, ipad(dan teman-temannya), dan tablet. Dan juga di multiplatform.

Sekian pembahasan saya tentang salah satu sub domain gunadarma yaitu video.gunadarma.ac.id. Lain kali saya akan mencoba link gunadarma yang lain ataupun website lain yang tentunya bisa keren, lucu, dll. Maafkan saya jika ada salah penulisan kata dan lainnya.

Perkembangan (teknologi) Website 2012

Website dan Blog terus berkembang teknologi dan designnya di tahun lalu yang baru Booming di tahun ini. Terus menjadi pembicaraan di tahun ini mulai dari forum, social media network, portal sampai Milis. Dan Interface dengan pengguna semakin interaktif, Design yang menggagumkan, dll.  

Mari kita lihat Design Web yang trend di sekitar tahun 2012 ini, Cikidot :

1.  Web Design yang Atraktif                6.  Touchscreen-oriented website designs

2.  Parallax Scrolling                            7.  CSS3 & jQuery 
3.  HTML5 + PHP framework               8.  Social Media Sharing

4.  Flash yang survive                           9.  Native support for plug-in features

5.  Mobile Device Compatibility             10. Big Images & Photo Backgrounds, Dan lain-lain

Saya akan jelaskan beberapa Trend tersebut :

1. Responsive Web Design (RWD)

     Pada dasarnya Web Design yang responsive menunjukkan bahwa dibuat menggunakan W3C CSS3 media queries + HML5.

     Pada akhirnya kita (Web Development apalagi User) meninggalkan website yang bergaya pasif. Web Design yang tanggap atas permintaan pengguna, bisa di berbagai platform dan

Bisa dijalankan di berbagai browser : 

Dahulunya beberapa website hanya bisa dijalankan/lebih optimal di 1-3 browser bahkan harus di versi tertentu dengan RWD bisa diakses oleh semua browser. Contoh : Web Sitrawimax lebi optimal jika menggunakan Mozilla Firefox 3.

Fiture pada RWD  :      

-  Whiteboard Framework 3.1.2    - Flexible Images    - Filament Group’s Responsive Images

-  Custom Layout Structure  - dll   lebih lengkapnya di http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Example :
 
2. Parallax Scrolling

       Parallax Scrolling merupakan salah satu trend desain web yang mucul sejak 2011 bahkan paling efektif untuk menarik visitor ke website kita daripada tren yang lain. Parallax Scrolling menciptakan rasa kedalaman dari desain website tersebut.

      Diadopsi dari teknik video game yang dituangkan dalam website, Dalam efek paralaks designer web menggabungkan beberapa lapisan untuk menciptakan ilusi 2D maupun 3D dimana latar belakang bergerak lebih lambat daripada latar depan gambar. Hal ini dapat dilakukan dengan bantuan plugin spritely jQuery.       

      Parallax Scrolling ini dapat membuat web bergerak horizontal maupun vertical dan composited satu sama lain, dengan memencet 1 tombol maupun hanya menggerakkan mouse. 

Contoh :             Vertikal                           Horisontal : http://rastapecasadeforro.com.br

      

3. Mobile Device Compability

    Kompabilitas web yang dapat terlihat di handphone, Tab, dan gadget lainnya itu tidak terlepas dari teknologi RWD salah satunya Flexible Images. Flexible Images disini diartikan bentuk/ukuran website tersebut akan menyesuaikan dengan platform atau tempat web tersebut dibuka, dan sangat responsif  terhadap viewports ganda. 
       Bisa dibuka di mobile karena ada aplikasi yang terdapat di gadget tersebut yang mendukung.


Contoh : http://www.mobileawesomeness.com/listings/gallery/twitter/ 
               http://www.taptu.mobi

4. HTML5  + PHP Framework

HTML5 adalah versi terbaru dari HTML (kepanjangan Hypertext Markup Language), kode yang berperan sangat penting pada halaman web. HTML adalah salah satu bahasa pemrograman untuk web selain PHP.


Sebenarnya ada 3 macam kode: HTML, yang menyediakan struktur; Cascading Style Sheets(CSS) yang mengurus presentasi, dan JavaScript yang membuat itu terjadi. 

HTML tercipta pada tahun 1980 IBM berniat membuat website. Sejak tahun  1996, bahasa ini mengalami perkembangan yang cukup pesat. Apalagi setelah W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group) sebagai pengembang utama untuk HTML5 ini.

PHP Framework

   PHP Framework adalah bentuk efisiensi pemrograman PHP pada perkembangan scriptingnya, sehingga memungkinkan bagi programmer untuk bisa mengefisiensikan kinerja mereka, serta mengarah pada efisiensi, efektifitas dan reliabilitas.

      Sebuah Framework dirancang untuk memberikan struktur untuk elemen-elemen umum (database interaksi, logika aplikasi) sehingga kita menghabiskan sedikit waktu penulisan database kode antarmuka atau presentasi lapisan antarmuka dan lebih banyak waktu menulis aplikasi itu sendiri.

      Terdapat banyak framework yang diciptakan oleh berbagai pihak.  

Contoh website yang menggunakan HTML5 :

http://spaghettiphp.org/,   www.kevadamson.com 

5. Native support for plug-in features

Native support for plug-in features sebagai dukungan untuk berbagai aspek 'HTML5 dan teman' meningkatkan dan datang ke browser yang lebih dan platform, kita akan melihat tekanan yang lebih besar untuk dukungan browser asli fitur yang kita digunakan untuk menggunakan plug-in untuk:. akses kamera dan mikrofon dengan HTML5 getUserMedia, dan hal-hal lain lebih jauh, seperti dukungan untuk streaming adaptif multimedia.


Native support ini dapat membuat animasi yang kita buat menjadi menajubkan. Salah satu fiturenya adalah ketika kita maupun user mengklik animasi itu akan melebur menjadi seperti pecahan - pecahan puzzle dan akan kembali secara automatis menjadi semula. Salah satu contoh :           awal       ----->     Ketika sudah di klik 

 

Hasilnya  

 

Bisa dicoba di : http://craftymind.com/factory/html5video/CanvasVideo.html


Referensi  ------>

Secara Umum :

http://webdesignledger.com/tips/web-design-trends-in-2012

http://www.webgranth.com/current-web-design-trends-2011-2012

http://webpagebynumbers.com/web-design-trends-2011-2012

Sumber Responsive Web Design :
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.netmagazine.com/features/21-top-tools-responsive-web-design
Sumber Parralax Scrolling :
http://en.wikipedia.org/wiki/Parallax_scrolling
http://www.webdesignersblog.net/inspiration/30-mind-blowing-parallax-scrolling-effect-websites/ 
Sumber Mobile Device Compatibility & Native support for plug-in features :
http://www.practicalecommerce.com/articles/2495-Mobile-Compatibility-How-to-Test-a-Website-for-Mobile-Browsers 
http://dev.khairul-syahir.com/wordpress/graphene/features-and-functionalities/native-plugin-support/
 
Sumber Perkembangan HTML5 + PHP Framework :
http://www.techradar.com/news/internet/web/html5-what-is-it--1047393
http://id.wikipedia.org/wiki/HTML5
http://www.phpframeworks.com/news/p/24132/what-is-php-framework