Desain dan Pemrograman Web

Presentasi berjudul: "Desain dan Pemrograman Web"— Transcript presentasi:

1 Desain dan Pemrograman Web
Pengenalan Internet By: Resianta Perangin Angin

2 INTERNET INTERnational NETworking
Merupakan 2 komputer atau lebih yang saling berhubungan membentuk jaringan komputer hingga meliputi jutaan komputer di dunia (internasional), yang saling berinteraksi dan bertukar informasi. INTERconnected NETworking Sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan komputer di seluruh dunia.

3 SEJARAH INTERNET (1) Departemen Pertahanan Amerika membentuk suatu jaringan komputer yang disebut ARPANET, untuk memungkinkan personil militer dan peneliti sipil bertukar informasi yang berkaitan dengan hal-hal militer. Melalui proyek ARPA (Advance Research Project Agency) mereka mendemonstrasikan hardware dan software komputer yang berbasis UNIX dapat melakukan komunikasi dalam jarak tak berhingga melalui saluran telepon.

4 SEJARAH INTERNET (2) Diperkenalkan pada Oktober 1972, pada tahun 1981 hanya 231 komputer, tahun 1986 bertambah menjadi komputer, dan 1,5 juta komputer pada tahun 1993. Awal tahun 1980 jaringan ARPANET (karena sudah diberhentikan) diubah menjadi TCP/IP (Transmission Control Protocol / Internet Protocol). Dilanjutkan kembali dan dibiayai oleh NSF (National Science Foundation) bekerja sama dengan CSNET (Computer Science Networking) berubah nama menjadi NSFNET.

5 KATA YANG SERING MUCUL NTERNET (1)
WORLD WIDE WEB (WEB) Mengakses informasi berupa teks, gambar, suara, film, dll. Software browser yaitu Microsoft Internet Explorer dan Netscape Communicator. 2. ELECTRONIC MAIL ( ) Surat elektronik adalah pesan yang dapat dikirimkan, diterima maupun disimpan dan sewaktu-waktu dapat diambil kembali oleh user melalui internet/jaringan eletronik. 3. TELNET Kita bisa menggunakan komputer untuk berhubungan dengan komputer orang lain dan mencari atau mengambil informasi yang ada dikomputer tersebut.

6 FASILITAS INTERNET(2) 4. FILE TRANSFER PROTOCOL (FTP)
Melalui FTP user bisa mengirimkan data atau file dari satu komputer ke komputer yang lain, Download dan Upload. 5. CHAT GROUPS / INTERNET RELAY CHAT (IRC) Forum dimana user dapat saling berdiskusi atau berbincang-bincang dengan user lain. 6. NEWSGROUP Ruang percakapan bagi para user yang mempunyai kepentingan bersama.

7 SYARAT TERHUBUNG INTERNET
MODEM JARINGAN SOFTWARE INTERNET SERVICE PROVIDER

8 ISTILAH DALAM INTENET (1)
WEB SITE Tempat sekumpulan halaman web milik seseorang atau suatu perusahaan dikumpulkan dan dikemas. HOMEPAGE Istilah untuk menyebutkan halaman pertama yang akan muncul jika sebuah situs web diakses. URL (Universal Resource Locator) Alamat yang unik dan khas setiap halaman dan situs dalam WWW. Bentuk dasar ; protocol://hostname/[path/[filename]] Contoh

9 ISTILAH DALAM INTENET (2)
Protocol Suatu mekanisme yang sudah distandarkan untuk mentransfer atau manipulasi data. HTTP (HyperText Transfer Protocol) Suatu protocol internet yang digunakan oleh WWW. Host Alat yang memiliki Internet protocol (IP) Address di suatu network TCP/IP atau Internet. HYPERTEXT MARKUP LANGUAGE (HTML) Suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsir oleh browser agar halaman tersebut dapat ditampilkan secara benar.

10 Fungsi Internet Informasi yang didapatkan lebih cepat dan murah
Mengurangi biaya kertas dan biaya distribusi Sebagai media promo si Komunikasi interaktif Sebagai alat Research and Development Sarana pendidikan (E-Learning) Perdagangan atau bisnis lewat internet (E-Commerce) Banking

11 Dampak Penggunaan Internet
Dampak Positif Media komunikasi tanpa menggenal waktu Media pertukaran data Media untuk mencari informasi atau data Media Hiburan & Rekreasi Kemudahan bertransaksi dan berbisnis dalam bidang perdagangan sehingga tidak perlu pergi menuju ke tempat penawaran/penjualan dll

12 Dampak Negatif Penipuan Pornografi Perjudian Cyberstalking Copyright
dll

13 Etika dalam menggunakan Internet
Perlakukan E – mail secara Pribadi Jangan Membicarakan orang lain Jangan Menggunakan huruf kapital Jangan Menggunakan format HTML Gunakan singkatan kata yang lazim di gunakan dll

14 DNS URL Penulisan Alamat Domain Name System
Metode untuk mengorganisir seluruh nama – nama komputer yang ada di internet DNS URL Alamat Website Uniform Resource Locator

15 Penulisan Alamat http:// www usm ac.id
http : (hyper text transfer protocol) protocol untuk akses internet/web www : nama mesin yang digunakan (World Wide Web) yang umum digunakan sebagai homepage sebuah institusi usm : subdomain berupa nama organisasi / instansi ac.id : topdomain berupa status / kode

16 Browsing Mencari dan menemukan informasi di dalam dunia internet (cyber space) Browser machine --> program aplikasi komputer yang digunakan untuk mengakses fasilitas WWW atau homepage Microsoft Internet explorer Mozilla Firefox Opera Safari Netscape Navigator

17 Web Desain

18 Halaman Web

19 Pengertian Web desain adalah Seni dalam membuat suatu halaman website yang melibatkan keindahan dan mekanisme dalam proses membuat sebuah halaman website. Membuat suatu halaman website terlihat lebih menarik dengan mengintegrasikan unsur gambar, animasi, text, dan video

20 Yang harus dikuasai Web Desainer
Seni Keindahan, perpaduan warna, sketsa dasar, ide, multimedia Typografi (kemampuan memilih font yang tepat) Tata letak halaman (menguasai kemampuan membagi ruang halaman) Tool pendukung perancangan web Aplikasi design grafis, aplikasi layout web, animasi web Teknik membuat interface Memahami komponen pembuat web (bahas html, css, multimedia, dll)

21 Konsep Dasar dan Teknologi Web
World Wide Web secara luas lebih dikenal dengan istilah Web/WWW Web pertama kali diperkenalkan pd thn 1992 Internet & web adalah dua hal yang berbeda Internet lebih merupakan perangkat keras (Hardware), sedangkan web adalah perangkat lunak (Software). Internet menggunakan TCP/IP sebagai protokol operasionalnya, sedangkan web menggunakan HTTP (Hyper Text Transfer Protocol).

22 Standar Teknologi Web Structural Layer Presentation Layer
Behavioral Layer

23 Struktur Layer Layer ini berhubungan dengan struktur dokumen dokumen web. Bagaimana sebuah dokumen tersusun, format apa yang dipakai, tanda atau mark up apa yang digunakan merupakan bagian dari layer ini. Standar Teknologi yang direkomendasikan saat ini adalah Extensible Hypertext Markup Language (XHTML) dan Extensible Markup Language (XML). XHTML adalah HTML versi terakhir (4.01) yang ditulis ulang dengan dengan aturan-aturan yang lebih ketat mengacu pada XML. Sedangkan XML adalah sekumpulan aturan untuk menyusun bahasa markup.

24 Presentation Layer Layer ini berhubungan dengan bagaimana mengatur tampilan dokumen pada layar, suara yang keluar, atau bagaimana format pencetakan dokumen. Pada teknologi web lama bagian ini menyatu dengan structural layer. Tapi pada standar baru, layer ini disarankan untuk dipisah. Yang termasuk teknologi ini adalah Cascading Style Sheets (CSS).

25 Behavioral Layer Layer ini berhubungan dengan masalah penggunaan bahasa skrip dan pemrogramannya untuk tujuan meningkatkan sisi interaktif dan dinamis halaman web. Yang termasuk dalam layer ini adalah Document Object Model (DOM) dan JavaScript. DOM memungkinkan suatu dokumen atau skrip untuk mengakses atau meng-update isi, struktur, dan style dari dokumen. JavaScript merupakan teknologi yang cukup lama dan tetap digunakan untuk menambah dokumen menjadi lebih interaktif.

26

27 Prinsip-prinsip web design (1)
Situs web dibuat untuk pengguna Seorang web designer harus mem-fokuskan desainnya pada kepentingan pengguna Harus memertimbangkan karakter pengguna, baik dari latar belakang, budaya, pendidikan dan kepentingan yang berbeda Utility dan Usability Utility adalah kegunaan atau fungsionalitas web Usability adalah sifat situs web yang mendukung kemampuan pengguna dalam memanipulasi situs web, sehingga pengguna memperoleh apa yang diperlukan

28 Prinsip-prinsip web design (2)
3. Correctness Tidak ada kesalahan dalam penulisan script HTML Gambar-gambar yang ditampilkan sesuai yang diharapkan Elemen-elemen yang interaktif (javascript, flash,dll) dapat berfungsi dengan benar Tidak ada kesalahan dalam sistem navigasi (link yang kosong atau broken link) 4. Struktur Link dan Navigasi Terdapat Link untuk menghubungkan satu halaman ke halaman yang lain Perancangan Link agar menarik 5. Tampilan Visual Tampilan visual website sesuai kebutuhan

29 Unsur-unsur website Domain alamat yang digunakan untuk menemukan situs kita pada dunia internet. Hosting ruangan yang terdapat dalam harddisk tempat menyimpan berbagai data, file-file, gambar dan lain sebagainya yang akan ditampilkan di situs. Diperoleh dengan menyewa Script/syntax/bahasa program Adalah bahasa yang digunakan untuk menerjemahkan setiap perintah dalam situs yang pada saat diakses

30 Memilih Hosting (1) Kapasitas
perhatikan kapasitas yang dibutuhkan, hosting yang dipilih harus sesuai kapasitas Teknologi yang digunakan perhatikan teknologi yang disediakan, apakah mendukung teknologi dalam website yang dibuat (misal PHP, Java, dll) Support Periksa apakah perusahaan hosting yang ingin anda beli memiliki layanan support yang baik selama 24jam Database Apabila anda membuat website dinamis, pastikan anda memeriksa apakah mereka menyediakan database

31 Memilih Hosting (2) Backup
pastikan hosting memiliki fasilitas back up setiap hari Bandwidth perhatikan kapasitas bandwidth yang disediakan

32 Bagian Website Header paket informasi yang sebelum data objek. Memberikan informasi awal atau data yang berguna untuk transmisi tujuan. Umumnya terletak di bagian paling atas halaman website Footer berarti sesuatu yang ada di bagian bawah. Dalam halaman website biasa terdapat di bagian paling bawah halaman website, biasanya berisi copyright atau pemilik website tersebut. Menu bar sederatan menu yang biasanya berisi navigasi ke halaman lain, iklan, social conect, animasi, dll. Content isi website

33 Web Statis dan Web Dinamis

34 Pengertian Web statis dan dinamis tidak ditentukan oleh ada atau tidaknya animasi bergerak pada halaman-halaman web, tetapi ditentukan oleh isi atau informasi yang ada pada halaman-halaman tersebut.

35 Web statis Web dinamis Informasi tidak berubah-ubah Informasi selalu berubah Data tidak update Data terupdate Dokumen web yang dikirim kepada client akan sama isinya dengan apa yang ada di web server Dokumen yang sampai di client akan berbeda dengan dokumen yang ada di web server

36 Persiapan Pembuatan Web
Perangkat Keras Perangkat Lunak Sistem operasi Web server Aplikasi HTML Editor Web Browser

37 Contoh Aplikasi Berbasis Web
E-Commerce: describes the concept of conducting transactions between a buyer and a seller over an electronic network (Internet) E-Business: describes all aspects of doing business on/with/through the Internet. E-Business includes all aspects of E-commerce E-Learning, E-Government, dan lain lain

38 HTML

39 Tentang HTML HTML : format standar untuk membuat dokumen web
HTML versiterakhir: HTML 4.01 Spesifikasi HTML standar: HTML merupakan bahasa bertanda,menggunakan rangkaian teks tertentu(tag) untuk menandai teks yang mempunyai interpretasi khusus File HTML berupafile teks(plain text file), bukan binary file

40 Contoh Dokumen HTML <html> <head> <title>Homepage saya</title> </head> <body> <h1>Saya</h1> <h2>Perkenalan</h2> <p>Perkenalkan, nama saya..... Ini adalah<i>homepage</i><b>pertama</b> saya, karena saya baru belajar tentang cara membuat<b><i>homepage</i></b>. </p> </body> </html> <!—akhir dokumen HTML -->

41 Daftar Tag <html> Dokumen <br> Ganti baris <head> Header < font> Font <title> Judul dokumen <li> Enumerasi <body> Isi dokumen <hr> Garis mendatar <h1> Judul paragraf <img> Gambar <p> Paragraf <a> Link (kaitan) <b> <i> <u> <table> Tabel <sup> <sub> Atribut <!----> Komentar

42 Mengenai Penulisan Tag
Tag dibentuk oleh suatu kata(keyword) yang diapit oleh tanda kurung lancip (<tag>) Tag boleh ditulis dalam huruf kecil maupun kapital Tag harus berpasangan, yaitu tag awal diikuti tag akhir, kecuali tag tunggal <p> teks</p> <br> <hr /> Diantara tag awal dan tag akhir bisa terdapat tag lain Penulisan tag tidak boleh tumpang tindih <tag1><tag2> teks</tag1></tag2> →penulisanyang salah <tag1><tag2> teks</tag2></tag1> →penulisanyang benar

43 Skema Dasar HTML < HTML> <HEAD> <TITLE>Juduldokumen</TITLE> </HEAD> <BODY> Isidokumen </BODY> </HTML>

44 Tag Dasar HTML: menandai awal dan akhir dokumen HTML
<html>dokumen</html> Head: menandai bagian header dokumen HTML <head>header</head> Title: memberi judul pada dokumen HTML <title>judul dokumen</title> Body: menandai awal dan akhir isi dokumen <body>isidokumen</body> <body text="#xxxxxx" bgcolor="#xxxxxx" background="filegambar" link="#xxxxxx" vlink="#xxxxxx">isidokumen</body>

45 Tag Judul (Heading) <hn>Judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf

46 Tag Paragraf (Paragraph)
<p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.

47 Tag Atribut1 (Bold, Italic, Underline)
<b>Kalimatyang dicetaktebal</b> <i>Kalimatyang dicetakmiring</i> <u>Kalimatyang digarisbawahi</u> Untuk menandai bagian kalimat agar dicetak tebal, miring, dan /atau digaris bawahi.

48 Tag Atribut2 (Superscript, Subscript)
^{bagian yang dicetak tinggi} _{bagian yang dicetak rendah} Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.

49 Tag Ganti Baris (Break line)
<br> Untuk pindah kebaris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : <br/>

50 Tag Fontd (size) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color

51 Tag Fontd (face) Memformat suatu bagian kalimat dengan ukuran, jenishuruf, atau warna tertentu. Tag : font Parameter : size, face, color

52 Tag Fontd (color) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color

53 Selesai