Langsung ke konten utama

Pengantar Desain dan Pemrograman Web


Tahapan Rekayasa Perangkat Lunak

1. Analisa kebutuhan

2. Desain 

3. Implementasi dengan berupa pemrograman

4. Evaluasi

5. Publikasi


Desain dan Implementasi

1. Wireframe

Wireframe adalah sketsa antarmuka pengguna atau user interface (UI). 

2. Wireflow

Wireflow adalah representasi dari aliran layar, dengan mengumpulkan satu set wireframes terkait mengikuti urutan mereka muncul dalam aliran. 

3. Mockup

Mockup adalah desain statis menyerupai hasil akhir untuk mewakili suatu produk. 

4. Prototype

Protype adalah versi konsep produk yang memungkinkan user untuk menjelajah ide-ide dan menunjukkan rencana fitur atau konsep desain keseluruhan kepada pengguna sebelum ke tahapan pengembangan atau implementasi. 


Implementasi 

Implementasi adalah menerapkan hasil rancangan website dari Wireframe, Wireflow, Mockup, Prototype ke dalam bentuk aplikasi nyata.


Jenis platform yang memanfaatkan proses implementasi :

1. Implementasi Mobile

    Implementasi ini seperti Android Studio


2. Implementasi Desktop

    a. Visual Basic (VB) dan Visual Basic Net (VB Net)


3. Implentasi Website

    a. Programming Native 

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • PHP (Hypertext Preprocessor)

    b. Framework

  • CSS (Bootstrap + PHP)
  • PHP (Codelgniter, Yii, Laravel)

    c. CMS (Content Management System)

  • WordPress
  • Joomla
  • Drupal


Evolusi Web


Website 

Website merupakan halaman yang menampilkan informasi yang dapat berupa text, gambar, dan video. Website Statis merupakan suatu web yang konten atau isinya tidak dapat berubah-ubah & tidak memiliki database (HTML, CSS, JS). Website Dinamis merupakan suatu web yang konten atau isinya dapat berubah-ubah berdasarkan database atau memiliki database (HTML, CSS, JS + PHP, SQL)

Jenis-Jenis Web :

  • Web Personal
  • Web E-Commerce
  • Web Company Profile (Perusahaan
  • Web Sekolah/Kampus
  • Web Organisasi atau Pemerintah
  • Web E-Learning
  • Web Forum
  • Web Berita


Hypertext Markup Language (HTML)

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.


Cascading Style Sheets (CSS)

CSS adalah kependekan dari Cascading Style Sheets. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.


JavaScript (JS)

JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.


Hypertext Prepocessor (PHP)

PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994.


Structured Query Language (SQL)

MySQL adalah sebuah perangkat lunak system manajemen basis data SQL (DBMS) yang multithread, dan multi-user. MySQL adalah implementasi dari system manajemen basisdata relasional (RDBMS). MySQL AB merupakan perusahaan komersial Swedia yang mensponsori dan yang memiliki MySQL.

Desain Web

Website yang bagus haruslah responsif sehingga dapat menyesuaikan ketika digunakan di desktop ataupun di mobile. selain itu tampilan yang dimiliki harus simpel dan mudah digunakan serta page speed harus bagus dengan kata lain harus cepat. 

Metode Pembuatan Desain UI Website

Ada 3 prinsip dalam mendesan sebuah website menurut veen's design principles, yaitu harus bisa menjawab pertanyaan berikut :

1. Dimana Saya?
Maksud dari pertanyaan ini yaitu website harus memiliki header yang menjelaskan apa website yang sedangkan dikunjungi user tersebut. 

2. Kemana saya bisa pergi ?
Maksud dari pertanyaan ini yaitu website haurs memiliki navigasi yang di posisikan di sidebar.

3. Ada apa disini ?
Maksud dari pertanyaan ini yaitu menggambarkan apa konten yang ada di website tersebut. 


Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Evaluasi UI (Usability & User Experience)

Apa itu Usability? Jacob Nielson, usability didefinisikan sebagai kemampuan sistem untuk memenuhi kebutuhan pengguna dengan 5 atribut penilaian, yaitu learnability, efficiency, memorability, errors, dan satisfaction. Pressman, usability merupakan tingkatan kemampuan antarmuka aplikasi dapat digunakan untuk mempermudah hidup pengguna. Santoso, usability merupakan derajat kemampuan sebuah aplikasi untuk membantu pengguna menyelesaikan sebuah tugas. ISO 9241-11 (Bevan, 1995), mendefinisikan usability merupakan sejauh mana suatu produk dapat digunakan oleh pengguna tertentu untuk mencapai target yang ditetapkan dengan effectiveness, efficiency dan satisfaction. Kenapa sih Usability itu Penting? Memudahkan pengguna Aplikasi mudah dipelajari Aplikasi harus berjalan sesuai fungsinya Berdampak Pada Faktor Kesuksesan Menarik minat penggunanya Alat Uji Usability SUS (System Usability Scale) : SUS merupakan kuesioner yang sederhana dan paling dapat diandalkan. QUIS (Questionnaire for User Int...
Posting Komentar
Baca selengkapnya

Implementasi HTML Bootstrap Design Web ke WordPress

Kemunculan WordPress lebih memudahkan proses perancangan blog. Sebelum adanya WordPress, banyak developer Website yang menggunakan HTML statis bagi merancang blog. Namun, kini para developer sudah mulai beralih menggunakan tampilan yang terdapat di WordPress. Meskipun saat ini tak masalah jika tetap menggunakan HTML statis, tetapi tak ada salahnya bukan jika mempertimbangkan pindah ke WordPress. Kenapa? Karena dengan WordPress, Kamu dapat merancang dan mengelola blog lebih gampang. WordPress menyediakan tema, plugin, widget, dan beragam fitur lainnya yang mempermudah Kamu mengelola blog tanpa berurusan dengan coding. Bagi kamu selaku pemilik blog yang masih menggunakan HTML statis telah seharusnya disarankan sebaiknya Kamu mulai mempertimbangkan untuk melakukan convert HTML ke WordPress. Selain mempermudah Kamu bagi mengelola, WordPress pun mempunyai banyak fitur yang lebih fleksibel ditambah maupun dikurangi diperbandingkan dengan HTML statis. Ada tiga macam cara convert HTML ke WordP...
Posting Komentar
Baca selengkapnya

Logika Fuzzy (Model Sugeno dan Tsukamoto)

Logika Fuzzy adalah metodologi sistem kontrol pemecahan masalah yang cocok digunakan untuk diimplementasikan pada berbagai sistem, mulai dari sistem yang sederhana, sistem kecil, embedded system, jaringan PC, multichannel atau workstation berbasis akuisisi data dan sistem kontrol. Logika ini  merupakan suatu logika yang memiliki nilai kekaburan atau kesamaran antara benar atau salah. Logika Fuzzy sering digunakan dalam bidang elektronika. Konsep logika ini pertama kali diperkenalkan oleh Prof. Lotfi Astor Zadeh pada tahun 1962. A. Model Sugeno Model Sugeno adalah metode interfensi fuzzy untuk aturan yang dipresentasikan dalam bentuk IF-THEN, output yang dihasilkan sistem tidak berupa himpunan fuzzy, tetapi berupa konstanta atau persamaan linear. Sebagai fungsi keanggotaan dari konsekuen, Michio Sugeno mengusulkan penggunaan singleton. Singleton adalah sebuah himpunan fuzzy dengan fungsi keanggotaan yang pada titik tertentu mempunyai sebuah nilai dan 0 diluar titik tersebut. Du...
Posting Komentar
Baca selengkapnya