SISTEM INFORMASI MAHASISWA

BAB I

WEB DESAIN

Ada yang tahu HTML 5 ?

HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi
inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. Dimana tujuan
utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah
dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology
Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0
pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.
 SISTEM INFORMASI MAHASISWA
Berikut tujuan dibuatnya HTML5 :

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
Penanagan kesalahan yang lebih baik
Lebih markup untuk menggantikan scripting
HTML5 merupakan perangkat mandiri
Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

Unsur kanvas untuk menggambar

Video dan elemen audio untuk media pemutaran
Dukungan yang lebih baik untuk penyimpanan secara offline
Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan
mendukung beberapa fitur dari HTML5. Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki
kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi
web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.
 SISTEM INFORMASI MAHASISWA
Jodohnya HTML 5 adalah CSS3

CSS3 tidak sama dengan CS(S-nya 3 kali) atau CSSSS (Cascading Style Sheets Sheets Sheets). CSS3 merpukan generasi
ke-3 dari perkembangan CSS sebelumnya. Jadi pada dasarnya, pengertian CSS3 sama saja dengan pengertian CSS generasi
paling awal. Hanya saja, beberapa standar baru untuk CSS3 menggantikan CSS2 dan mungkin akan membuat kiat dapat
bereksplorasi lebih dalam lagi untuk membuat tampilan situs lebih menarik dan mulai meninggalkan situs yang membuat
menunggu dengan loading yang lama.
Beberapa kelebihan yang ada pada CSS3 :
1. CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya di dalam objek blockquote
bisa membuat (quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri.
2. CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang sebelumnya tidak bisa dilakukan oleh
CSS2/CSS2.1, dan bisa menggantikan peran gambar. Standar web 2.0 atau situs interaktif dan efisien berdasar dari
penggunaan CSS.
3. Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung.
4. Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis mengurangi bandwidth inbound/outbound
situs.
CSS3 memiliki fasilitas untuk shadow dari suatu div layout, fitur transparansi, gradien warna pada border, warn a pada teks
yang diseleksi, fitur skala memperkecil atau memperbesar layout, kolom pada teks, dan fitur gradien pada background.
Fungsi jQuery sepenuhnya akan tergantikan oleh CSS3. Perkiraan ke depan, tidak ada lagi web yang menggunakan jQuery
karena sizenya lebih besar dibanding CSS3. Bukan cuma jQuery, saat ini penggunaan flash juga mulai terakusisi dengan
semakin berkembangnya CSS3. CSS3 merupakan bahasa pemrograman olah digital gambar/citra tingkat tinggi.
 SISTEM INFORMASI MAHASISWA
Apa itu Bootstrap ?

Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device
(Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML,
CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Untuk apa itu bootstrap ?

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh
bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini
bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan
desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar.
Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Bagaimana belajar Bootstrap untuk pemula ?

Untuk memulai belajar Bootstrap, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar
tersebut. Baiklah langsung saja.

Persiapan:

1. Anda Harus memiliki file distribusi Bootstrap

Untuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan
oleh bootstrap di situs resminya getbootstrap.com. Setelah didownload, kemudian extract menggunakan program
 SISTEM INFORMASI MAHASISWA
seperti 7zip (Gratis) atau winRAR (shareware). Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan
windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder lain.

2. Download jQuery Library Untuk Bekerja Offline

Untuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan
boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery
di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar kita bisa bekerja
dan menggunakannya secara offline (tanpa koneksi internet).

3. Anda harus memiliki code editor.

Code editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript
sebagaimana file tersebut terdapat pada bootstrap. Anda juga bisa menggunakan Code Editor dari kami yang dibuat untuk
tes atau uji coba kode. Jangan pernah menggunakan Word processor (Microsoft Word, dll) ataupun notepad untuk
memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan
membingungkan kita sendiri nantinya. Ada banyak sekali code editor yang tersebar di internet yang dapat kita gunakan
baik yang gratis maupun yang berbayar.
 SISTEM INFORMASI MAHASISWA
A. User Interface
User Interface yang akan kita gunakan dalam pembuatan aplikasi ini adalah Bootstrap template SBAdmin v2.
1. Halaman Login
 SISTEM INFORMASI MAHASISWA
2. Halaman Login Validasi
 SISTEM INFORMASI MAHASISWA
3. Halaman Login Error
 SISTEM INFORMASI MAHASISWA
4. Halaman Beranda Utama
 SISTEM INFORMASI MAHASISWA
5. Halaman Beranda & Menu Navigasi
 SISTEM INFORMASI MAHASISWA
6. Halaman Beranda Utama & Menu Sesi User
 SISTEM INFORMASI MAHASISWA
7. Halaman Tabel Data
 SISTEM INFORMASI MAHASISWA
8. Halaman Tambah Data
 SISTEM INFORMASI MAHASISWA
9. Halaman Ubah Data
 SISTEM INFORMASI MAHASISWA
REFERENSI

http://www.w3schools.com/bootstrap/default.asp

http://www.w3schools.com/html/default.asp

https://jquery.com/

http://www.w3schools.com/jquery/

http://startbootstrap.com/