Materi Web Desain
-
Upload
arief-rusmandani -
Category
Documents
-
view
26 -
download
0
description
Transcript of Materi Web Desain
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
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
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
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
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
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
Software tools
Text Editor :• NOTEPAD ++• SUBLIME TEXT
Pendukung :• ADOBE PHOTOSHOP• ADOBE ILLUSTRATOR
Web Browser : • Mozila Firefox• Google Chrome
Web Editor :• ADOBE DREAMWEAVER
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
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
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
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.
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
Kategori Web Website Personal
Situs yang digunakan untukmenceritakan tentang biografi diri,pengalaman pribadi dll.Contoh : Blog pribadi.
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
Kategori Web Website Instansi/Pemerintahan
situs jenis ini hanya boleh dipaki untuk keperluanwebsite pemerintahan yang resmi. Domain negara indonesia.gov.id
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
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.
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
Kategori Web Website Non-Profit
website seperti ini biasanyadipakai hanya untuk sekolahan, yayasandll. Domain yang digunakan .org, .edu dll.
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
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.
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
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.
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
Contoh Web Desain
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
Contoh Web Programing
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
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.
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
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.
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
PROJECT
Hari Ibu (hari-hari besar lainnya) CC Ultimated
Basskill
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA
DESIGNDESIGNWEBWEB
Komunitas Multimdia Amikom @ 2015
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
Komunitas Multimedia Amikom @ 2015
HOME ABOUT ME MATERI PROJECT KARYA