Berhubung setelah search dan cari ke sana ke sini masih sedikit yang bahas Front End Developer di Kaskus, soo ane di sini mau membuka pembahasan bagi siapapun yang tertarik dengan dunia Front End Developer.
Spoiler for Warn:
Di sini, ane bukan sebagai sepuh dari dunia Front End (baru belajar 4 bulan HTML, CSS, Javascript, Jquery)(dan nampaknya belum paham bener dah ). Di sini justru ane ingin membuka lahan bagi siapapun yang ingin sharing tentang Front End. Baik nubi maupun the mastah of Front End Development dan sejenisnya, ane harap bisa nimbrung bareng di sini, saling sharing hehe.
Sebelum itu, ane mau ngejelasin dulu apa itu Front End Developer (bahan dari mbah google aja yah hehe)
Apa itu Front End Developer?
Spoiler for Apa itu Front End Developer:
Menurut Jurnal Anas.com
Sederhananya, Front End adalah apapun yang kamu liat di browser. Developer disinilah yang membuat tampilan web menarik. Merekalah secara khusus berfokus pada bagian HTML, CSS, dan Javascript berhubung ketiga teknologi tersebut tinggalnya di browser.
Front End Developer sebenernya nggak harus bikin website terlihat indah dan bagus (itu tugas designer), tapi dialah yang membuat gimana caranya menyajikan informasi dan bisa memberi interaksi pasa user sebaik mungkin.
Menurut bsierad.com
Front-End adalah bagian utama dari sebuah situs web yang berinteraksi langsung dengan pengguna atau pengunjung situs. Segala sesuatu yang teman-teman lihat ketika melakukan navigasi dalam sebuah halaman web, baik dari font, warna, menu dropdown, dan slider adalah hasil penggabungan dari fungsi HTML, CSS, dan JavaScript dikontrol oleh browser pada komputer teman-teman. Front-End developer adalah programmer yang fokus pada front-end/ layout web, mereka dituntut untuk membuat sebuah layout yang baik, menarik dan interaktif sehingga pengunjung web merasa nyaman ketika mengunjungi website tersebut.
Yah intinya, Front End Developer sangat menjunjung tinggi User Interface (tampilan kepada pengakses web) dan User Experience (rasa yang dirasakan oleh si pengakses web )
Perbedaan User Interface (UI) dan User Experience (UX)
Belajar koding.net
Spoiler for User Experience:
User Experience
Spoiler for Pilar Utama UX:
User Experience Design atau yang biasa disebut UX Design yaitu adalah:
Proses meningkatkan kepuasan pengguna (pengguna aplikasi, pengunjung website) dalam meningkatkan kegunaan dan kesenangan yang diberikan dalam interaksi antara pengguna dan produk.
Bahasa gampangnya, UX Design itu proses membuat sebuah website atau aplikasi yang kamu buat menjadi mudah untuk digunakan dan tidak membingungkan ketika digunakan oleh pengguna.
Dasar dari User Experience Design ini bisa kamu pelajari di situs uxapprentice.com (berbahasa inggris) atau di uniteux.com (situs blog berbahasa indonesia)
Spoiler for User Interface:
User Interface
Spoiler for Salah Satu Contoh User Interface:
User Interface Design atau yang bahasa Indonesianya itu Desain Antarmuka Pengguna adalah :
Desain antarmuka untuk mesin dan perangkat lunak, seperti komputer, peralatan rumah tangga, perangkat mobile, dan perangkat elektronik lainnya, dengan fokus pada memaksimalkan pengalaman pengguna.
Bahasa gampangnya yaitu UI Design adalah bagaimana suatu website atau aplikasi yang kamu buat terlihat seperti apa. Orang biasa menyebutnya sebagai tampilan atau desain sebuah website. Kamu bisa mendapatkan inspirasi desain dari behance.com, dribbble.com atau webdesignserved.com.
Spoiler for Perbedaan UI & UX:
Perbedaan UX dan UI
Banyak orang yang salah kaprah bahwa UI sama UX itu adalah suatu hal yang sama. Pada faktanya UX dan UI itu berbeda, namun satu sama lain saling berhubungan.
Pada dasarnya, User Experience adalah tentang “memahami penggunamu”. Tujuan UX adalah mencari tahu siapa mereka, apa yang mereka capai dan apa cara terbaik bagi mereka untuk melakukan “sesuatu”.
UX berkonsentrasi pada bagaimana sebuah produk terasa dan apakah itu memecahkan masalah bagi pengguna.
Sedangkan User Interface adalah bagaimana suatu website atau aplikasi yang kamu buat terlihat dan berbentuk seperti apa. Hal tersebut mencakup Layout (tata letak), Visual Design (desain visual) dan Branding.
KETERAMPILAN DAN TOOLS
bsierad.com
Spoiler for tools utama front end developer:
Spoiler for Keterampilan dan Tools Front End Developer:
Dalam mencapai tujuan tersebut, front-end developer harus menguasai tiga bahasa utama: HTML, CSS, dan Javascript. Selain itu front-end developer juga harus terbiasa menggunakan framework seperti Bootstrap, Foundation, Backbone, AngularJS, dan EmberJS untuk membantu membuat layout tetap sempurna ketika dibuka menggunakan perangkat apapun, juga penggunakan library seperti jQuery dan LESS, sehingga proses pengembangan menjadi lebih mudah dan efisien. Sebagian besar lowongan pekerjaan untuk front-end developer juga mengharuskan memiliki pengalaman menggunakan Ajax, teknik yang digunakan secara luas untuk menggunakan Javascript yang memungkinkan mengambil data dari server tanpa meload keseluruhan halaman.
front-end developer bertanggung jawab atas desain interior sebuah rumah yang telah dibangun oleh back-end developer.
Secara keseluruhan, front-end developer bertanggung jawab atas desain interior rumah yang telah dibangun oleh back-end develepor. Seperti yang dikatakan oleh Greg Matranga, Direktur Pemasaran Produk di Apptix, “Front-End developer kadang-kadang lebih bersemangat tentang apa yang mereka lakukan karena mereka benar-benar mampu memanfaatkan segala kreativitas mereka.”
*Update 5-2-16
satu hal penting lagi yang ketinggalan nih:
Responsive Web Design (RWD)
Spoiler for Responsive Web Design:
Spoiler for Penjelasan:
Jangan anggap remeh soal responsive-ness suatu website. Beberapa survey menyatakan bahwa peningkatan penggunaan smarphone dan handheld untuk membuka website meningkat 50%! 50 loh!
Dengan kata lain, kalau website kita didatangi oleh 100 orang / harinya, maka 50 dari mereka menggunakan smartphone ketika mengunjungi situs kita. Dan 50 % orang tesebut berkemungkinan lebih besar untuk meninggalkan website agan agan kalau misalnya si websitenya harus di zoom manual dan segala macem. Bayangkan, hanya soal responsif-nya suatu web, pengunjung agan berguguran
Oleh karena itu, bagi seorang Front End Developer, RWD itu penting. Sangat penting malah. Daripada kita nanti kalah sebelum perang Tapi memang gak semudah itu untuk membuat website kita responsif, apalagi kalau klien kita minta web kita juga responsif di browser IE lama (kecuali kalau pake framework ya).
Spoiler for Front End:
Gausah banyak lama, sekarang kita mulai pembahasan mengenai tahapan-tahapan paling dasar memulai projek sebagai seorang Front End Developer sekaligus Web Designer.
Dasar Utama Seorang Front End Developer
Spoiler for Tahapan:
HTML
Spoiler for Apa itu HTML?:
Singkatnya, HTML itu konten. Lebih singkatnya lagi, liat gambar di bawah ini:
Spoiler for Kaskus:
Gambar di atas adalah tampilan HTML Kaskus.
Gambar di atas sudah mencakup seluruh elemen utama HTML. Di situ ada konten tulisan, gambar, list, tombol. Masih banyak lagi sebenarnya elemen HTML.
Cara membuat halaman HTML bisa agan coba di Codecademy.com. Ntar agan sign-up di situ, terus ikuti course HTML & CSS yang sudah disediakan codecademy. Di web ini, agan akan diajarin dimulai dari tahap paling basic, dan langsung diperlihatkan hasilnya. Gratis kok gan.
Atau kalau agan males belajar online, agan bisa download e-book nya Ariona di sini:
Isi e-book di atas sudah cukup untuk mengenal fundamental atau dasar paling dasar dari HTML dan CSS. Pokoknya, ikuti step-stepnya satu persatu. Jangan lanjut ke step berikutnya kalau agan masih belum paham salah satu step.
CSS
Spoiler for Apa itu CSS?:
singkatnya lagi, css itu kosmetik. Lebih singkatnya lagi, liat gambar di bawah ini:
Spoiler for Kaskus:
Gambar di atas adalah halaman HTML yang di atas, yang sudah diberi kode CSS.
Jadi, fungsi CSS itu untuk mengatur tampilan elemen HTML. Baik untuk posisi elemen, warna, ukuran, jenis huruf, dan masih banyak lagi. Bahkan untuk kepentingan animasi pun CSS3 sudah menyediakan propertinya.
Lagi, ane sarankan belajar lewat Codecademy.com. Untuk belajar CSS, di situ dirangkap dengan course HTML.
Tapi yang tidak mau belajar online, agan bisa download e-book yang sama yang ada di spoiler HTML di atas. Karena di e-book itu, HTML dan CSS diajarkan bersamaan.
Javascript dan JQuery
Spoiler for Apa itu Javascript (atau JS) dan JQuery?:
Javascript dulu ya.
Intinya, Javascript itu adalah bagaimana suatu elemen bereaksi terhadap suatu aksi. Kalau yang ini, gabisa ane kasih gambar. Javascript itu biasa agan temui di halaman web.
Contohnya ketika agan lagi buka kaskus di PC saat ini. Coba agan klik menu di pojok kiri atas. Lalu apa yang terjadi? Nah, itu semua diatur oleh Javascript. Bahasa kerennya sih, content behavioral.
Spoiler for pertanyaan ane dulu soal javascript:
Q: Bukankah efek seperti itu udah di sediain di CSS?
A: Yap. Tepat sekali! Tapi coba agan cek di sini.
Kenapa bisa berbeda? Karena kemampuan Javascript yang tidak dipunyai oleh CSS adalah kemampuan mathematical operation yang lengkap. Maka dari itu, Javascript lebih unggul soal akurasi. Kita bisa buat suatu elemen merespon sesuai dengan apa yang kita inginkan, tidak seperti CSS yang masih terbatas.
Namun kabarnya penggunaan script Javascript tentu saja lebih memberatkan CPU ketika dibuka. Maka dari itu, halaman web dengan Javascript akan lebih berat dibuka dibanding dengan yang menggunakan CSS animation saja.
Lalu apa itu JQuery?
J diambil dari Javascript. Query itu daftar, antrian. Jadi ya Jquery berarti daftar Javascript, atau biasa disebut Javascript Libraries.
Dengan Jquery, kita bisa menggunakan perilaku-perilaku dasar yang sudah disediakan Jquery library. Tinggal panggil perintah yang diperlukan saja.
Kalau dalam jangkauan Front-End tingkat dasar saja, sebenarnya cukup belajar Jquery saja. Tapi tentu, harus tau sedikit syntax-syntax Javascript supaya mempermudah belajar jQuery-nya (karena j-Query dibangun di atas bahasa JS).
Kalau mau belajar Javascript dan jQuery secara online, silakan bisa dicoba di Codecademy.com. Tapi kalau males belajar online, silakan cari e-booknya di post kedua.