CSS HTML No.14: Membuat drag and drop upload file dengan File Api Html5

comments

Pemirsa, jumpa kembali bersama Mediatutorial.web.id, pada kesempatan kali ini kita akan membahas tentang bagaimana cara membuat 'Drag and Drop Uploader'. Tutorial ini merupakan pengembangan dari tutorial sebelumnya yaitu [[CSS HTML No.11: Membuat Upload Files App dengan Html5, XHR 2, dan CORS]].
Ada baiknya anda kembali membuka tutorial sebelumnya diatas.

Metode drag and drop upload banyak digunakan pada situs situs besar seperti yahoo, google, youtube, dan lain lain. Nah, dalam drag and drop upload ini kita menggukanan Html5 dan native javascript yaitu Filereader dan RFC2388 sebagai decode multipart/form-data nya.
Kita disini menggunakan html5 karena hanya dengan html5 lah maka file file yang ada di local komputer dapat diakses.

App drag and drop upload ini hanya dapat berjalan bila browser anda mendukung html5 file api dan DnD (Drag and Drop) seperti ie 10+, Firefox 3.6+, Crhome 6+, Safari 6+, Opera 11.5+

CSS HTML No.13: Membuat toolbar Menu (Css dan Html only)

comments

Pemirsa, dalam video tutorial berikut ini kita akan membahas tentang cara untuk membuat toolbar menu dengan hanya menggunakan css dan html.
Kedepan kita akan mengembangkan menu ini. Sebagai awal memang kita hanya membuat menu dengan hanya pakai css dan html, tapi nanti akan kita kembangkan seperti penambahan jQuery, penggabungan dengan Php dan MySql.

Sebetulnya, untuk membuat Menu dan Toolbar itu sangat mudah, kita hanya bermain main dengan tag ul, ol dan li, sedangkan untuk tampilan kita memakai css.

Nah, dalam tutorial ini akan diperagakan bagaimana cara membuat Menu dengan css dan html memakai tag ul,dan li.

CSS HTML No.12: Membuat Upload file dengan membagi-bagi kedalam beberapa bagian

comments

Slicing file ke dalam beberapa chunk lalu kita upload
//
Pemirsa, kembali hadir Mediatutorial.web.id melanjutkan tutorial [CSS HTML No.11: Membuat Upload Files App dengan Html5, XHR 2, dan CORS] sebelumnya, disini kita akan men-slice / memotong / membagi 'sebuah file' ke dalam beberapa bagian (chunk) kemudian kita upload ke server.
Dengan slicing ini maka kita akan dapat mengupload file yang berukuran besar dengan sangat cepat.

Teorinya, kita membagi file kedalam beberapa bagian, kita upload setiap bagian (chunk) dengan XHR, dan setelah itu kita gabungkan kembali bagian - bagian (chunk) tersebut di server.

Coba anda perhatikan animasi berikut ini,
kita upload 1 buah file dan kemudian kita bagi lalu kita post multiple XHR

CSS HTML No.11: Membuat Upload Files App dengan Html5, XHR 2, dan CORS

comments

Html5, XHR2, CORS, php untuk upload file
//
Pemirsa, selamat berjumpa kembali pada Mediatutorial.web.id, setelah sebelumnya kita membahas mengenai CORS dan XMLHttpRequest 2, pada kesempatan kali ini kita akan membahas mengenai cara membuat aplikasi upload dengan menggunakan keduanya.

Kita dapat melakukan 'POST' file atau blob dengan menggunakan XHR 2. Perlu diketahui di sini bahwa semua file adalah blob. Dan tentu saja upload app ini dapat dilakukan ke domain lain asalkan domain lain tersebut memiliki settingan CORS.

Di sini kita juga akan menggunakan element baru dalam Html5 yaitu element 'progress'. Dengan element ini kita dapat membuat progressbar untuk proses upload dengan sangat mudah.

Dalam tutorial ini kita akan membahas tentang:

- Pembuatan halaman upload
- Pembuatan php untuk proses upload
- Penggunaan XHR 2 dan CORS
- Penggunaan dan pembuatan element progress

CSS HTML No.10: Penggunaan XMLHttpRequest level 2 (XHR 2) pada Html5

comments

XMLHttpRequest level 2 (xhr 2)

Salah satu kemajuan dalam Html5 adalah adanya XMLHttpRequest level 2. Sebetulnya ini bukan bagian dari Html5 tetapi karena Javascript ini juga berperan penting maka kita akan membahas sedikit tentang ajax ini.
--
Apakah yang baru di XMLHttpRequest level 2?
Banyak, XMLHttpRequest Level 2 ini banyak digunakan di web app terutama untuk
- Cross Origin request
- Uploading progress event
- Upload-download Binary data
- Terintegrasi dengan File system Api, web audio api dan web GL

Selain itu respondType pada XMLHttpRequest 2 ini tidak hanya 'text' dan 'document' melainkan 'text', 'document', 'blob' dan 'arrayBuffer'.
Pada tutorial ini kita akan membahas singkat mengenai respondType text dan blob sebagai pengenalan XMLHttpRequest level 2.
*Nb) Untuk blob saat ini belum disupport oleh Chrome (crbug.com/52486)

Pada tutorial ini kita akan membahas tentang:
- Pembuatan form untuk submit data dengan XMLHttpRequest 2
- Penggunaan 'formdata' (New dalam XMLHttpRequest 2)
- Penggunaan blob untuk fetching image (New dalam XMLHttpRequest 2)

CSS HTML No.9: Penggunaan CORS (Cross Origin Request Security ) pada Html5

comments

Cross-Origin Resource Sharing (CORS)

Pemirsa, selamat berjumpa kembali bersama Mediatutorial.web.id, pada pertemuan kali ini kita akan membahas tentang Cross-origin request security / cross-origin resource sharing.
Sebetulnya, pada proses ajax (XMLHttpRequest lama) permintaan / request antar domain tidak diperbolehkan. Tetapi kemudian Html5 dan XMLHttpRequest level 2 mengizinkan permintaan data antar domain asalkan domain target memiliki settingan untuk CORS.

Kalau dalam Flash untuk request data antar domain kita menggunakan crossdomain.xml, tapi untuk XMLHttpRequest level 2 ini kita menggunakan CORS.
Penyetingan/setting CORS dapat dilakukan dengan beberapa cara dan pada tutorial ini kita dapat melakukannya dengan htaccess dan http header.

Pada tutorial ini kita akan membahas tentang:
- Pembuatan simple web app dengan XMLHttpRequest 2
- Implementasi CORS pada fetching file
- Penyettingan/setting CORS pada htaccess
- Setting CORS pada http header

CSS HTML No.8: Membuat submit form Html5 (Standar Form Html5 yang baru)

comments

Pemirsa, selamat berjumpa kembali bersama Mediatutorial.web.id, pada kesempatan ini kita masih membahas Html5 dan disini kita akan mengupas mengenai form.
Form mungkin memang kurang menarik bagi para pembaca, tetapi perlu anda ketahui bahwa dalam Html5, form ini mengalami perubahan yang cukup significan.

Banyak sekali element, atribute, dan input types yang baru dalam html5 ini. Demikian juga dengan browser validasi, teknik styling dan sebagainya.

Nah, pada tutorial ini kita akan memperagakan cara membuat form, dan membahas tentang:
- Pembuatan form
- Penggunaan input types html5 yang baru (Email, Url)
- Penggunaan attribute html5 yang baru (pattern, require, autofocus, placeholder)
- Penggunaan validasi dan no validasi
- Pembuatan script untuk mengubah notifikasi

CSS HTML No.7: Membuat Drag and Drop object (Html5)

comments

By Request :: Membuat Drag and Drop object (html5)
Pemirsa, selamat berjumpa kembali bersama Mediatutorial.web.id, masih melanjutkan kembali tutorial kita sebelumnya yaitu tentang html5.

Nah, pada pembahasan tutorial kali ini kita akan sharing mengenai Drag and Drop untuk Html5. Pada html4, untuk drag and drop kita membutuhkan JQuery atau library lainnya. Tetapi karena fitur baru ada pada html5 seperti (ondrag, ondragstart, ondragenter, dan lain lain) maka kita pun bisa membuat drag and drop dengan sangat mudah.

pada tutorial ini kita akan membahas tentang:
- Pembuatan container terlebih dahulu
- Pembuatan script addevent untuk cross browser
- Pembuatan script ondragstart, ondragenter, ondragend, ondrop, dan lainnya
- Penggunaan preventDefault pada firefox dan kawan kawan dengan ie
- Penggunaan draggable=true pada firefox dan kawan kawan dengan safari

CSS HTML N0.6: Meng-embed Audio ke html tanpa flash + Javascript control (Html5)

comments

By Request:: Meng-embed Audio ke html tanpa flash + Javascript control

Pemirsa, kembali hadir Mediatutorial.web.id dengan tutorial berikutnya melanjutkan dari tutorial sebelumnya yaitu Meng-embed Audio ke html tanpa flash + auto control. Pada tutorial sebelumnya kita menggunakan auto control bawaan html5, nah sekarang kita akan membuat sendiri control-control tersebut dengan menggunakan Javascript.

Sama seperti tag-tag video, salah satu tag html5 ini juga memiliki properties, event, dan method yang memungkinkan kita dapat mengeditnya menggunakan javascript. Kita dapat membuat sebuah player sendiri dengan menggunakan javascript.

Pada tutorial ini kita akan membahas tentang:
- Pembuatan fungsi untuk 'addEvent'
- Pembuatan tombol play - pause
- Pembuatan scrubber/duration bar
- Fungsi untuk update duration
- Pembuatan volume control

CMS HTML N0.5: Meng-embed Audio ke html tanpa flash + auto control (Html5)

comments

By Request:: Meng-embed Audio ke html tanpa flash + auto control
Pemirsa, jumpa kembali bersama Mediatutorial.web.id, pada tutorial ini kita masih membahas tentang HTML5, salah satu dari kelanjutan kemarin adalah kita akan membahas menganai tag audio.

Sama seperti pada tag video, di tag audio ini pun belum semua didukung oleh browser-browser terkemuka. Setidaknya ada 3 video format yang didukung yaitu mp3, wav, dan ogg.Nah, pada tutorial ini kita akan mempraktekan bagaimana cara membuat audio-embed pada html5 tanpa menggunakan flash. Saya sarankan anda tetap menggunakan teknologi flash karena html5 audio ini sangat poor. Mungkin seperti apa yang dikatakan di Ian Hickson (Editor html5) http://blogs.techrepublic.com.com/programming-and-development/?p=718 bahwa html5 bisa digunakan ditahun 2022. (^^,)

Dalam tutorial ini kita akan membahas tentang:
- Tag audio dan tag source
- Mp3, wav, ogg
- Auto control html5
- Praktek simple programing

CSS HTML No.4: Meng-embed Video ke html tanpa flash + `JAVASCRIPT` control (Html5)

comments

By Request:: Pemirsa, kembali hadir Mediatutorial.web.id, pada tutorial sebelumnya di "Meng-embed Video ke html tanpa flash + auto control (Html5)" kita telah membahas cara membuat/meng-embed sebuah video ke dalam html5 dan pada tutorial tersebut kita menggunakan 'auto control'. Nah, sekarang mari kita coba membuat controlnya (play - pause - duration - position) dengan menggunakan Javascript.

Tag video yang ada di html5 memiliki properties, event, dan methods/fungsi yang cukup beragam untuk kita modifikasi menggunakan Javascript. Untuk keterangan detail mengenai tag video dapat dilihat di {w3schools dom video} - http://w3schools.com/html5/html5_video_dom.asp

Dalam tutorial ini kita akan membahas tentang:
- Fungsi untuk menambahkan event pada object
- Pembuatan script play pause dengan Javascript
- Pembuatan position dan duration

CSS HTML No.3: Meng-embed Video ke html tanpa flash + auto control (Html5)

comments

By Request:: Pemirsa, selamat berjumpa kembali di video tutorial dari Mediatutorial.web.id dan untuk perjumpaan kali ini kita akan membahas hal hal baru dalam html5 yaitu 'video tag'. Di sini nanti kita akan meng-embed video ke html tanpa menggunakan flash.

'Video tag' adalah salah satu tag html5 yang mendapatkan perhatian banyak. Inilah yang nantinya sebagai pengganti flash video player, tetapi perlu diketahui bahwa html5 belum mendukung video chat, video streaming, access ke microphone dan kamera, sehingga untuk saat ini penggunaan video tag ini hanyalah sebagai alternatif saja.

Dalam video tutorial ini kita akan membahas tentang:
- Tag video
- format yang disupport
- Daftar browser dan formatnya
- Membuat video embed
- Membuat auto control (play pause)
- Membuat screenshot video (tampilan awal video sebelum video diputar)

CSS HTML No.2: Membuat White Shadow Rounded Rectangle

comments

Pemirsa selamat berjumpa kembali di MediaTutorial. Pada pertemuan kali ini kita akan membahas tentang cara membuat “Table Rounded dengan images dan css”.
Ini merupakan sebuah table cantik yang elips disetiap sudutnya. Dan table ini disusun dengan images dan css.
Kelebihan dari “table rounded dengan images” terlihat jelas saat koneksi lambat. Biasanya kalo koneksi lambat maka website yang terdiri dari banyak icon akan terloading tidak sempurna.
Tetapi dengan sedikit trick “menjadikan icon icon tersebut menjadi satu images” akan mengatasi permasalah saat koneksi lambat.
Dalam video tutorial ini kita akan mempelajari tentang:
1. Css untuk membuat rounded table
2. Images yang digunakan untuk rounded table
3. Firebug sebagai alat bantu kita

CSS HTML No.1: Belajar Html - Membuat Resizable Button dengan css dan images

comments

Selamat berjumpa kembali di MediaTutorial. Dalam pertemuan kali ini kita akan mempelajari HTML dan CSS untuk membuat sebuah Resizable Button menggunakan Images.
Sebagai demo source code anda dapat mendownloadnya di sini: https://docs.google.com/file/d/0B6_ki5nuY_ysTzE2VkJ2UUpFWHc/edit?usp=sharing
Dalam tutorial kali ini kita memerlukan Adobe Photoshop ( Untuk Editor Images), Css/Html editor (Di sini saya menggunakan Komodo Edit), Firebug.
Yang akan kita pelajari dalam tutorial ini adalah:
1. Membuat button yang elegan
2. Css untuk background
3. Css untuk Mouse Event (Clik, Over, Out)
4. Firebug untuk inspect element
5. Membuat images untuk button (Perlu diperhatikan perhitungan width dan height