Materi Web Desain

DIVISIWEB DESIGN

NEXT

DESIGNDESIGNWEBWEB

Komunitas Multimdia Amikom @ 2015Komunitas Multimedia Amikom @ 2015

HOME ABOUT ME MATERI PROJECT KARYA

DESIGNDESIGNWEBWEB

Komunitas Multimdia Amikom @ 2015

Tri Maretno A (Unit)

14.12.8150 13.12.7582

Arif Rusmandani (Koor)

Arif Rusmandani

085702069611

76B71E31

Tri Maretno

085799333700

7596466D

PROFIL

Komunitas Multimedia Amikom @ 2015


DESIGNDESIGNWEBWEB


Anggota diharapkan bisa membuat karya desain website berbasisgambar .

Anggota diharapkan bisa membuat karya desain website berbasisHTML

Anggota diharapkan bisa memberikan kontribusi kepada KOMA. Anggota bisa upload web ke internet menggunakan domain dan

hosting. Anggota diharapkan bisa mengimplementasikan semua materi yang

diajarkan dalam pengaplikasiannya.

INDIKATOR KOMPETENSI



DESIGNDESIGNWEBWEB


SILABUS WEB DESIGN HTML

Bahasa standar untuk membuat sebuah halaman web. CSS

Untuk menstrukturkan komponen-komponen web yang beragam. UI UX Desain

Merancang wireframe dan tampilan User Interface DESAIN GRAFIS

Pembuatan element halaman web dengan gambar JQUERY

Komponen/librari/framework yang dibuat dari javascript JAVA SCRIPT

Untuk menuliskan fungsi pada HTML BOOSTRAP

Paketan dari bahasa pemrograman : css, java script



DESIGNDESIGNWEBWEB


Software tools

Text Editor :• NOTEPAD ++• SUBLIME TEXT

Pendukung :• ADOBE PHOTOSHOP• ADOBE ILLUSTRATOR

Web Browser : • Mozila Firefox• Google Chrome

Web Editor :• ADOBE DREAMWEAVER



DESIGNDESIGNWEBWEB


Tentang Web

Definisi WebsiteWebsite atau situs dapat diartikan sebagai kumpulan halamanhalaman yang digunakanuntuk menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan ataugabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang membentuk saturangkaian bangunan yang saling terkait dimana masing-masing dihubungkan denganjaringan-jaringan halaman (hyperlink). Unsur-Unsur Website Domain name/URL (Uniform Resource Locator) Hosting/Rumah tempat website Scripts program Desain Website



DESIGNDESIGNWEBWEB


Fungsi web

Diantaranya :Fungsi Komunikasi (Web Mail, Form Contact, Chatting Form)

seperti : Facebook, Twitter dllFungsi Informasi (news, profile company, library, reference)

seperti : Amikom, Detik, Okezone dllFungsi Entertaiment (game online, film online, music online)

seperti : Youtube, Soundcloud dllFungsi Transaksi (Trasnsaksi, Transfer)

seperti : Lazada, BerniagaDll.



DESIGNDESIGNWEBWEB


Kategori Web Website Personal

Situs yang digunakan untukmenceritakan tentang biografi diri,pengalaman pribadi dll.Contoh : Blog pribadi.



DESIGNDESIGNWEBWEB


Kategori Web Website Instansi/Pemerintahan

situs jenis ini hanya boleh dipaki untuk keperluanwebsite pemerintahan yang resmi. Domain negara indonesia.gov.id



DESIGNDESIGNWEBWEB


Kategori Web Website Komersial (Company

Profile/Online Shop)situs yang dipakai untuk

menunjukan produk atau jasa suatuperusahaan atau juga dapat melakukantransaksi penjualan online. Domain yangdigunakan .com, .co.id dll.



DESIGNDESIGNWEBWEB


Kategori Web Website Non-Profit

website seperti ini biasanyadipakai hanya untuk sekolahan, yayasandll. Domain yang digunakan .org, .edu dll.



DESIGNDESIGNWEBWEB


Perbedaan Web Desain , Web Progamming, Web Develop & Web Master

WEB DESAINSeni untuk menciptakan suatu web dari segi tampilan (fisik)

WEB PROGRAMINGMembuat suatu program yang dapat berjalan di website (non fisik)

WEB DEVELOPERMenciptakan aplikasi berbasis website dengan menggunakan bahasa pemograman

seperti Java, PHP, .NET, atau Python. WEB MASTER

Bertugas untuk memelihara aplikasi web yang telah dibuat, memastikan website selalu bisa diakses atau tidak down.



DESIGNDESIGNWEBWEB


Aplikasi yang harus di pahami

Web Desainer• Client-side scripting: JavaScript• Server-Side scripting: PHP, ASP, dsb.• Cascading Style Sheets• HTML• Manipulasi image : Adobe Photosop, Corel Draw, dsb.• Animasi, biasanya berupa flash.

Web Developer• Client-side: JavaScript• Server side: ASP, ASP.NET, Java, Perl, PHP, Python, Ruby, dsb.• Databases: MySQL, Oracle, dsb.



DESIGNDESIGNWEBWEB


Contoh Web Desain



DESIGNDESIGNWEBWEB


Contoh Web Programing



DESIGNDESIGNWEBWEB


Perbedaan web statis dengan web dinamis

Web StatisWebsite yang mana penggunanya tidak bias merubah kontent dari web

tersebut secara langsung menggunakan browser. Dengan pengertian lain webstatis adalah website yang kontennya tidak bisa dirubah oleh penggunanyasecara langsung menggunakan browser. Ciri-cirinya :• Hanya menggunakan HTML dan bisa dilengkapi dengan CSS.• Tidak memiliki datasbase.• Kontennya hanya diberikan oleh pemilik web.• Jarang di-update.



DESIGNDESIGNWEBWEB


Perbedaan web statis dengan web dinamis

Web DinamisWebsite yang mana pengguna (client) bisa merubah kontendari halaman

tertentu menggunakan browser dan interaksi yang terjadi antara pengguna danserver sangat kompleks. Permintaan dari pengguna dapat diproses oleh serveryang kemudian ditampilkan dengan isi yang berbeda-berbeda menurut alurprogramnya. Ciri-cirinya :• Menggunakan bahasa pemrograman web seperti PHP, ASP dll• Memiliki database.• Konten di dalamnya bisa dari pengunjung dan bisa juga dari database.• Lebih sering di-update.



DESIGNDESIGNWEBWEB


PROJECT

Hari Ibu (hari-hari besar lainnya) CC Ultimated

Basskill



DESIGNDESIGNWEBWEB


Referensi pembelajaran• webdesign.tutsplus.com• developer.mozilla.org/id• reference.sitepoint.com/css• abduzeedo.com/tags/sites-week• tympanus.net/codrops• webdesignerdepot.com• 1stwebdesigner.com• webdesignerindonesia.net• tutorialzine.com• css-tricks.com• web.appstorm.net• webappers.com• webresourcesdepot.com• blazrobar.com• pixeden.com

• creattica.com/css/latest• thefwa.com• unmatchedstyle.com• dribbble.com• smashingmagazine.com• egrappler.com• Pixel2Life • Smasing Magazine Coding• W3Schools• WebMonkey• Sitepoint• Student Web Design Guide• Web Design From Scratch• Net Tuts+• Tutorialzine



Documents

Materi Web Desain