Pengenalan Web Design.

Presentasi berjudul: "Pengenalan Web Design."— Transcript presentasi:

1 Pengenalan Web Design

2 Teknologi Internet World Wide Web
Layanan yang disediakan oleh penggunaan jaringan internet sangat banyak sekali Contoh : , WWW, FTP dll. Salah satunya yang paling populer adalah WWW (World Wide Web) World Wide Web World Wide Web adalah suatu ruang informasi yang yang dipakai oleh pengenal global untuk mengidentifikasi sumber-sumber daya yang berguna (Wikipedia) Singkatnya, World Wide Web adalah nama yang diberikan untuk semua bagian Internet yang dapat diakses dengan software web browser WWW terdiri dari jutaan situs web (web site) dan setiap web site terdiri banyak halaman web (web page)

3 Metodologi desain web ideas generation Prototyping testing
A Practical Guide to Designing for the Web by Mark Boulton

4 Menentukan tujuan/goal (berdasarkan brief dari klien & riset user)
Merancang sitemap (alur proses halaman, navigasi dan link interaksi ke halaman lainnya) Mencari referensi website (website serupa untuk referensi desain dan UX) Membuat sketsa/wireframe (gambaran kasar dari web yang akan dibangun) Menentukan skema warna (dibahas lebih lanjut pada pertemuan berikutnya) Menentukan lebar konten dan menggunakan sistem grid (dibahas lebih lanjut pada pertemuan berikutnya) Manajemen file (dibahas lebih lanjut pada pertemuan berikutnya) Proses Desain Web Yg ada kurung (dibahas lebih lanjut pada pertemuan berikutnya) diperpemuan pertama cmn kenalin aja

5 1. Tujuan / goal Tujuan: profil perusahaan, portofolio atau berjualan
(e-commerce)? Apakah hanya sebagai media eksistensi perusahaan, media informasi, membangun citra/branding, atau untuk mencari lebih banyak klien? Manajemen konten, konsep dan gaya desain dirancang berdasarkan tujuan. Fokus pada tujuan! Jangan terlalu berlebihan dalam hal yang bersifat dekoratif 1. Tujuan / goal

6 Sitemap: kerangka utama hubungan antara satu halaman dengan halaman lainnya di sebuah website berisi navigasi utama, alur proses halaman, dan link interaksi ke halaman lainnya. 2. site-map

7

8 3. referensi Menggali ide dengan merujuk pada website sejenis,
Sebagai bahan perbandingan Mempelajari pengalaman pengguna (user experience/UX) 3. referensi

9 sketsa atau wireframe (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah desain website. Wireframe juga digunakan ketika presentasi ke klien untuk menghemat waktu dan effort revisi. Tool: Lumzy Frame Box Creately Mockingbird Hotgloo 4. Sketsa/wire-frame Pidoco Mockflow Pencil Project SimpleDiagrams Prototyper

10

11 Pemilihan warna yang sesuai dengan tujuan
Pemilihan warna yang sesuai dengan tujuan. Dengan menentukan skema warna terlebih dahulu, proses desain website menjadi lebih efisien. Misal: Biru  kesan profesional dan formal Coklat  kesan klasik dan eksklusif. Tool: Kuler Color Scheme Designer Color Explorer Toucan Colorotate 5. Skema warna Sphere Pictaculous Colorspire Colourlovers

12 6. Lebar konten & Sistem grid 1024 x 768  sistem grid 960 pixel
Layar monitor semakin lebar  sistem grid pixel. Multi device display  Fluid grid 6. Lebar konten & Sistem grid

13

14

15 HyperText Markup Language
- Bahasa standar yang digunakan untuk menampilkan document web. - Mengontrol tampilan dari web page dan contentnya. - Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML. Ditransmisikan lewat HyperText Transfer Protocol Beda browser bisa berbeda hasil penampilan

16 Cascading style sheet Fungsi : mendefinisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu. Dalam pemakaian HTML murni kita pasti menggunakan tag <font> dan tag lain untuk mengontrol bagaimana layout dari halaman anda. Hal ini mengikat presentasi halaman web dengan isinya, dan terasa menyulitkan dalam perancangan dan pengembangannya. CSS adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.

17 Javascript JavaScript adalah Bahasa pemrograman yang bisa disisipkan ke HTML dan javascript berjalan di sisi Client Pada awalnya JS diciptakan untuk melakukan operasi-operasi kecil untuk “membantu” server memproses data, namun seiring perkembangannya JS menjadi bahasa pemrograman web yang tidak bisa terpisahkan dengan web modern Perkembangan JS memunculkan JS Framework (Ex. jQuery)

18 Tools untuk ngoding web
Sublime Notepad Notepad++ Adobe Dreamweaver Netbeans IDE

19

20 Struk tur html <!DOCTYPE html> <html> <head>
<title>Halaman Latihan</title> </head> <body> <h1>Ini adalah latihan design web pertamaku</h1> </body> </html> Struk tur html DOCTYPE atau DTD adalah singkatan dari Document Type Declaration. Yang berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML. Jika kita tidak menuliskan DTD, browser akan tetap menampilkan dan memproses halaman web kita seperti tidak terjadi apa-apa. Namun web browser akan menerjemahkan halaman web dan terutama CSS sedikit berbeda dari seharusnya. Tag <html> adalah tag pembuka dari keseluruhan halaman web. Tag html dimulai dengan <html> dan diakhiri dengan </html>. Tag <head> umumnya akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser. Tag <body> akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll.

21 Struk tur html Homepage Kepala < head > Tubuh body Head>
<   head >   Tubuh body Head> Title Judul /Title /Head Body Isi… Teks Tabel . Isi…Audio, Video, dll /Body

22 Tag html Kalau pada bahasa pemrograman kita mengenal keyword code, maka pada HTML kita mengenal yang namanya tag. Contoh tag html adalah <head>, <title>, <body>, <html>, <img>, dan lain-lain. Tag html tidak bersifat case sensitive <body> sama dengan <BODY> Bentuk umum penulisan tag html adalah: <ELEMENT ATTRIBUTE = value> Element - nama tag Attribute - atribut dari tag Value - nilai dari atribut Contoh: <BODY BGCOLOR = lavender>

23 HTML VS HTML5 <div class="header"> <div id=“nav">
“section"> “article"> “aside"> <div id=“footer">

24 HTML TAG EXAMPLE <html> Penanda Dokumen <br> Ganti baris
<head> Header <font> Font <title> Judul dokumen <li> Enumerasi <body> Isi dokumen <hr> Garis mendatar <h1> Judul paragraph <img> Gambar <p> Paragraf <a> Link (kaitan) <b> <i> <u> text format <table> Tabel <del><ins><sup><sub> text format <!-- --> Komentar <header> Header/kepala halaman <nav> Navbar <footer> Footer/kaki halaman <article> isi artikel <section> section konten <aside> konten kesamping <audio> konten suara <iframe> konten frame <form> formulir <progress> progress bar <span> memanipulasi konten (inline) <div> mengelompokkan konten <video> konten video HTML TAG EXAMPLE More Tag

25 DOCTYPE DOCTYPE atau DTD (Document Type Declaration) Untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML. Secara kasat mata tidak ada perbedaan meski tidak menuliskan DOCTYPE. Namun web browser akan menerjemahkan halaman web dan terutama CSS sedikit berbeda dari seharusnya. Tag <html> Tag pembuka dari keseluruhan halaman web Tag html dimulai dengan <html> dan diakhiri dengan </html>. Tag <head> berisi berbagai definisi halaman berisi kode yang tidak tampil di browser, seperti kode CSS, JavaScript, dll. Tag <body> berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll.

26 Tag Heading Tag heading terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Tag heading secara default akan ditampilkan dengan huruf tebal (bold). Tag header <h1> memiliki ukuran paling besar, sedangkan <h6> terkecil.

27 Tag Paragraf <p>
Tag khusus untuk membuat paragraf. Tag Break <br> Tag untuk memisahkan sebuah bagian text dengan text lain.

28 Tag List <ul> <ol> <li>
Unordered list (tidak berurutan). Ditampilkan dengan bulatan atau kotak. <ol> Ordered list (berurutan). Ditampilkan dengan angka atau huruf. <li> List itu sendiri

29 Tag Link <a> <a> singkatan cari anchor (jangkar). Membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. Setiap tag <a> setidaknya memiliki sebuah atribut href. href(hypertext reference) berisi alamat yang dituju.

30 Time to code Kerjakan latihan1.html

31 Tag Image <img> Untuk menampilkan gambar kedalam halaman web. Setiap tag <img> setidaknya memiliki sebuah atribut src. Tag yang langsung ditutup dengan /> src (source), merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Gambar tersebut ditempatkan ke dalam satu folder dengan halaman

32 Tag Table <table> <tr> <td>
Untuk membuat table membutuhkan 3 tag: Tag <tabel> digunakan untuk memulai tabel Tag <tr> (table row), digunakan untuk membuat baris dari tabel. Tag <td> (table data), digunakan untuk menginput data ke tabel.

33 Tag Komentar <!-- -->
Untuk memberikan penjelasan pada kode program Tidak akan dijalankan/ditampilkan dihalaman web

34 Time to code Kerjakan latihan2.html

35 Tag Form <form> Untuk membuat sebuah formulir
Dalam Tag <form> biasanya diikuti salah satu atau beberapa tag berikut: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>

36 Time to code Kerjakan latihan3.html

37 pengayaan1

38 end