Praktikum Minggu Ke-9: Konversi Mock Up Kedalam HTML (PART 1)

A. Tujuan
Mengubah Mock Up desain web menjadi html

B. Alat dan Bahan
Visual Studio Code
Bootstrap
Mock Up Desain Web

C. Dasar Teori
Visual Studio Code
Visual Studio Code adalah editor yang dikembangkan oleh Microsoft untuk Windows, Linux dan macOS. Ini termasuk dukungan untuk debugging, kontrol Git tertanam, penyorotan sintaks, penyelesaian kode cerdas, cuplikan, dan refactoring kode. Ini juga dapat disesuaikan, sehingga pengguna dapat mengubah tema editor, pintasan keyboard, dan preferensi. Ini gratis dan bersumber terbuka, meskipun unduhan resmi berada dibawah lisensi kepemilikan.
Kode Visual Studio didasarkan pada Electron, kerangka kerja yang digunakan untuk menyebarkan aplikasi Node.js untuk desktop yang berjalan pada mesin tata letak Blink. Meskipun menggunakan kerangka Electron, perangkat lunak tidak menggunakan Atom dan malah menggunakan komponen editor yang sama (nama kode "Monaco") yang digunakan dalam Visual Studio Team Services (sebelumnya disebut Visual Studio Online).
Dalam Survei Pengembang Stack Overflow 2018, Visual Studio Code menduduki peringkat alat lingkungan pengembang yang paling populer, dengan 34,9% dari 75.398 responden yang mengaku menggunakannya.
Bootstrap
Pengertian Bootstrap adalah library (pustaka / kumpulan fungsi-fungsi) dari Framework CSS yang dibuat khusus untuk bagian pengembangan fontend dari suatu website. Didalam library tersebut terdapat berbagai jenis file yang diantaranya HTML, CSS, dan Javascript. Hampir semua developer website menggunakan framework bootstrap agar memudahkan dan mempercepat pembuatan website. Karena semuanya sudah ada dalam frameworknya sehingga para develop / pengembang hanya tinggal membuat / menyisipkan class nya yang ingin dipakai seperti membuat tombol, grid navigasi dan lain sebagainya.

Bootstrap telah menyediakan kompulan aturan dan komponen class interface dasar sebagai modal dalam pembuatan web yang telah dirancang sangat baik untuk memberikan tampilan yang sangat menarik, bersih, ringan dan memudahkan bagi penggunanya. Dan penggunaan bootstrap ini kita juga diberikan keleluasan salama pengembangan website, anda bisa merubah dan menambah class sesuai dengan keinginan.

D. Tugas
Mengubah mock up ke dalam html

E. Hasil Praktikum
Link Google Drive : https://drive.google.com/open?id=12wneVa42J83pJB7kgOwOjooZ6uz36V-f
Berikut adalah tampilan webnya
Screenshot tampilan progress web

F. Kesimpulan
Bootstap adalah sebuah framework untuk website atau webapps yang berpusat untuk membantu pengerjaan frontend suatu web. Dengan framework CSS akan membuat website lebh menarik dan dapat dikerjakan dengan mudah tanpa harus dikerjakan dengan cara native.

Komentar

Posting Komentar

Postingan populer dari blog ini

Minggu 13 - Progress Animasi 3D logo 86

Gambar
Tujuan Pada tahap ini, kegiatan yang dilakukan adalah mencari video animasi 3D untuk dibuat projek. Dasar Teori Logo  merupakan suatu  gambar  atau sekadar  sketsa  dengan arti tertentu, dan mewakili suatu arti dari  perusahaan ,  daerah ,  organisasi ,  produk ,  negara ,  lembaga , dan hal lainnya membutuhkan sesuatu yang singkat dan mudah diingat sebagai pengganti dari  nama  sebenarnya. Logo harus memiliki  filosofi  dan kerangka dasar berupa konsep dengan tujuan melahirkan sifat yang berdiri sendiri atau mandiri. Logo lebih lazim dikenal oleh penglihatan atau visual, seperti ciri khas berupa warna dan bentuk logo tersebut. Animasi 3D Sementara pada animasi 3D digunakan tiga vektor x, y, dan z. Vektor z inilah yang berfungsi sebagai tinggi objek sehingga menghasilkan volume. Pada animasi 3D gambar bisa dilihat secara keseluruhan dari segala arah dan objeknya terlihat semakin nyata. Dibutuhkan software berkemapuan khusus untuk mengolah animasi 3D dan modeli
Baca selengkapnya

Praktikum Minggu 4 : Rangkuman Materi Desain Thinking

Gambar
JUDUL : Design Thinking I.                   Tujuan Mahasiswa mampu mempersiapkan diri dalam menghadapi Tugas Akhir. Mahasiswa dapat menyelesaikan tugas akhir menggunakan prinsip desain thinking . II.                 Dasar Teori (Rangkuman Pembelajaran) Design Thinking adalah metodologi desain yang memberikan pendekatan berbasis solusi untuk memecahkan masalah. Ini sangat berguna dalam mengatasi masalah kompleks yang tidak jelas atau tidak diketahui, dengan memahami kebutuhan manusia yang terlibat, dengan membingkai ulang masalah dengan cara yang berpusat pada manusia, dengan menciptakan banyak ide dalam sesi brainstorming, dan dengan mengadopsi pendekatan langsung dalam pembuatan prototipe dan pengujian. Memahami lima tahap Design Thinking ini akan memberdayakan siapa pun untuk menerapkan metode Berpikir Desain untuk memecahkan masalah kompleks yang terjadi di sekitar kita. Design Thinking adalah salah satu metode baru dalam melakukan proses desain. Design
Baca selengkapnya

PRAKTIKUM 12: ANIMATICS (TAHAP 2)

Gambar
I. TUJUAN Membuat Animatics untuk Branding Komunitas SEMUT MMB melalui animasi dan poster II. ALAT Smartphone Adobe Premiere Pro CS6 III. BAHAN - Storyboard Fix - Voice Over IV. DASAR TEORI Pengertian Storyboard Storyboard adalah sketsa gambar yang disusun berurutan sesuai dengan naskah. Dengan storyboard, kita dapat menyampaikan ide cerita kita kepada orang lain dengan lebih mudah, karena kita dapat menggiring khayalan seseorang mengikuti gambar-gambar yang tersaji, sehingga menghasilkan persepsi yang sama pada ide cerita kita. Komponen Storyboard Format dalam penggunaan storyboard akan tidak sama, hal ini disesuaikan dengan peruntukan dalam pembuatab storyboard itu sendiri, semisal storyboard iklan akan berbeda dengan storyboard yang dipergunakan dalam pembuatan website, berikut beberapa hal yang terdapat dalam storyboard : Urutan/Scene/Frame Video Warna/penempatan Audio Waktu/Durasi Teks Interaksi dengan penonton Jenis Font Pengertian Animatic
Baca selengkapnya