Praktikum Minggu Ke-10: Konversi Mock Up Kedalam HTML (PART 2)

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 hasil tampilan web htmlnya:
Screenshot tampilan progress web

Disini kahirnya kami berhasil memasukkan gambar pada kategori special package, sebelumnya kami  memasangnya sebagai background, namun gambar tidak berhasil dipasang sehingga kami menemukan caranya yaitu dengan kode berikut:
 <p align="center">
                <img src="package1.PNG" class="img-rounded" alt="Cinque Terre">
              </p>

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.

Berbagi
































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