Desproweb Demo Uts O1 Kelompok 6

DEMO PROYEK MATA KULIAH DESAIN DAN PEMROGRAMAN WEB (UTS) MERANCANG DAN MEMBANGUN MEDIA SOCIAL BAGOESTAGRAM
Oleh: Nama / Nim : Bagus Ramadhan Mitchell Febrian Rully Herliyanto Raco Andreas Alfred Savero P Nico Stephanus Kuncoro (13.41010.0002) (13.41010.0004) (13.41010.0011) (13.41010.0009) (13.41010.0006)
SEKOLAH TINGGI MANAJEMEN INFORMATIKA & TEKNIK KOMPUTER STIKOM SURABAYA 2013-2014
DAFTAR ISI
I.
BAB 1 :
PENDAHULUAN 1.1. Latar Belakang 1.2. Permasalahan 1.3. Tujuan 1.4. Manfaat
II.
BAB 2 :
ANALISA WEB MEDIA SOSIAL FACEBOOK 2.1 Struktur Navigasi Web 2.2 index.html (home) 2.3 page1.html 2.4 page2.html 2.5 page3.html 2.6 page4.html 2.7 page5.html
III.
BAB 3 :
WEB MEDIA SOSIAL FACEBOOK 3.1 index.html 3.2 page1.html 3.3 page2.html 3.4 page3.html 3.5 page4.html 3.6 page5.html
IV.
BAB 4 :
KESIMPULAN
BAB I PENDAHULUAN 1.1. Latar Belakang Perkembangan teknologi informasi yang sedemikian cepatnya telah membawa dunia memasuki era baru yang lebih cepat dari yang pernah dibayangkan sebelumnya. Perkembangan teknologi ini membawa perubahan dalam berbagai bidang kehidupan manusia. Salah satu hasil dari kemajuan teknologi adalah dihasilkannya komputer sebagai alat bantu manusia dalam melakukan pekerjaan dan juga internet sebagai sarana komunikasi penghubung yang digunakan melalui komputer.(Janner Simarmata, 2009) Social media adalah sebuah media online dimana para penggunanya bisa dengan mudah berpartisipasi, berbagi, dan menciptakan isi meliputi blog, sosial network atau jejaring sosial, wiki, forum dan dunia virtual. Blog, jejaring sosial dan wiki mungkin merupakan bentuk social media yang paling umum digunakan oleh masyarakat di seluruh dunia. Sementara jejaring sosial merupakan situs dimana setiap orang bisa membuat web page pribadi, kemudian terhubung dengan teman-teman untuk berbagi informasi dan berkomunikasi. Dengan demikian di sini kelompok kami ingin merancang dan membangun sebuah tampilan dari salah satu website social media dengan konsep social media Instagram yang kami beri judul Bagoestagram. Dalam merancang dan membangun tampilan website Bagoestagram, ada beberapa proses, diantaranya Pembentukan Kelompok Penyusunan Proposal Membuat Struktur Navigasi Membuat Rancangan Konsep Website Membangun website Bagoestagram yang didalamnya terdapat profil kelompok kami Setelah proses pembuatan website telah dilaksanakan, setiap kelompok wajib untuk melengkapi laporan terkait dengan hasil dari website yang telah di rancang / di buat. :
1.2. Permasalahan Permasalahan yang akan di bahas dalam tugas Demo Web ini, yaitu :
1. Bagaimana cara merancang dan membangun tampilan website media social Bagoestagram dengan menggunakan konsep social media Instagram 2. Bagaimana cara merancang web Bagoestagram HTML, HTML 5 dan CSS 3. Bagaimana cara menyisipkan suara dan video pada instagram dengan menggunakan
1.3. Tujuan 1.3.1. Cara merancang dan membangun tampilan website media social
Bagoestagram dengan menggunakan konsep social media Instagram 1.3.2. Cara merancang web Bagoestagram dengan menggunakan HTML, HTML 5 dan CSS 1.3.3. Cara menyisipkan suara dan video pada instagram
1.4. Manfaat
i.
Bagi Kelompok Kami Pembuat berharap semoga hasil pekerjaan kami dapat memberikan
sebuah pengalaman bagi kami dalam mempelajari dan menerapkan sistem pembuatan website melalui bahasa HTML.
ii.
Bagi Mahasiswa Diharapkan juga bagi semua mahasiswa, semoga bisa mendapatkan
manfaat dari hasil yang telah kita laksanakan dan dapat dinikmati.
iii.
Bagi Umum Menyediakan informasi bagi masyarakat luas dalam tampilan foto-foto
pada website dan juga dapat saling bertukar informasi.
BAB II ANALISA WEB SOCIAL MEDIA 2.1 Struktur Navigasi Web Hirarki
index
login
Form login
home
profile
View profile
logout
KETERANGAN INDEX :
Merupakan halaman pembuka dari website bagoestagram yang isinya terdapat sebuah informasi yang berupa highlight tampilan visual dari bagoestagram, serta terdapat kalimatkalimat yang menyarankan calon user untuk menggunakan situs sosial media bagoestagram dan juga tombol login yang mengarahkan user untuk masuk ke dalam halaman portal dari bagoestagram.
FORM LOGIN
Halaman portal dari bagoestagram yang berfungsi untuk mendapatkan izin akses masuk ke dalam halaman profile user dengan mengisikan user name dan password.
HOME
Merupakan halaman bagoestagram yang isinya terdapat histori dari user lain yang berupa update foto terbaru, update status terbaru, update video terbaru, dan sebagainya.
VIEW PROFILE
Halaman user bagoestagram yang didalamnya terdapat deskripsi dari pengguna website bagoestagram, mulai dari foto, video dan sebagainya.
2.2
index.html
KETERANGAN 1) 2) 3) 4) 5) 6) 7) 8)
Background index Slide show index menggunakan embed mp4 di dalam file png Logo index Logo bagoestagram Tombol login Kata pengantar index Tombol untuk mengarahkan pada website App Store Tombol untuk mengarahkan pada website Google Play
2.3
form login.html
KETERANGAN 1) 2) 3) 4) 5) 6) 7)
Logo bagoestagram Keterangan user name Keterangan password Form user name Form password Tombol login Logo bagoestagram 2
2.3
page1a (home).html
10
KETERANGAN 1) 2) 3) 4) 5) 6) 7) 8) 9) 10)
Logo home bagoestagram Logo Bagoestagram Profil user Keterangan profil user Isi tampilan bagoestagram Logo bagoestagram 3 Kosong Logo bagoestagram 4 View comment dan keterangan nama user Logo copyright
2.4
page1b (profile user).html
KETERANGAN 1) 2) 3) 4) 5) 6) 7) 8)
Logo home bagoestagram Logo Bagoestagram Profil user Keterangan profil user Foto profil user Foto Video Logo copyright
2.5
page2a (home).html
10
KETERANGAN 1) 2) 3) 4) 5) 6) 7) 8) 9) 10)
2.6
KETERANGAN 1) 2) 3) 4) 5) 6) 7) 8)
2.7
page3a (home).html
10
KETERANGAN 1) 2) 3) 4) 5) 6) 7) 8) 9) 10)
2.8
KETERANGAN 1) 2) 3) 4) 5) 6) 7) 8)
2.9
page4a (home).html
10
KETERANGAN 11) 12) 13) 14) 15) 16) 17) 18) 19) 20)
2.10
KETERANGAN 1) 2) 3) 4) 5) 6) 7) 8)
2.11
page5a (home).html
10
KETERANGAN 1) 2) 3) 4) 5) 6) 7) 8) 9) 10)
2.12
KETERANGAN 1) 2) 3) 4) 5) 6) 7) 8)
BAB III
WEB MEDIA SOCIAL BAGOESTAGRAM index.html
form login.html
page 1a.html (home bagus)
page 1b.html (profile bagus)
page 2a.html (home andreas)
page 2b.html (profil andreas)
page 3a.html (home mitchell)
page 3b.html (profil mitcell)
page 4a.html (home nico)
page 4b.html (profil nico)
page 5a.html (home rully)
page 5b.html (profil rully)
BAB IV PENUTUP
A. Kesimpulan Demikian proposal demo web ini telah kami susun dengan sebaik-baiknya dan dengan harapan perancangan website bagoestagram yang kami bangun dapat menjadi motivasi untuk kami dalam pembuatan website yang lebih baik kedepannya. Pembuatan proposal ini bertujuan untuk memperluas wawasan dan ilmu pengetahuan tentang pembuatan website. Dari pembuatan demo web ini, kami juga menyimpulkan bahwa adanya kami merancang dan membangun website bagoestagram tidak lain karena hal tersebut merupakan suatu kebutuhan kami sebagai mahasiswa dan merupakan sebuah tugas bagi kami sebagai persyaratan ujian tengah semester, serta mendukung perkembangan kemampuan kami. Kami menyadari bahwa tiada yang sempurna di dunia ini kecuali yang Maha Kuasa. Dalam pembuatan proposal dan pekerjaan ini tentunya juga didalamnya masih terdapat banyak sekali kekurangan, untuk itu tentunya kami sangat mengharapkan kritik dan saran yang bersifat membangun guna untuk memperbaiki kekurangan kemampuan yang kami miliki agar bisa menjadi lebih baik lagi pada penyusunan proposal dan pekerjaan yang selanjutnya. Dan kami juga ucapkan terima kasih kepada semua pihak kelompok 6 yang telah ikut serta berpartisipasi dalam penyusunan proposal dan perancangan serta pembangunan demo web bagoestagram. Dan terima kasih juga kepada dosen tercinta kami pada mata kuliah desain pemrograman web atas bimbingannya, dukungannya, serta banyaknya ilmu-ilmu bermanfaat yang telah kami terima, sehingga kami dapat menyelesaikan pekerjaan kami dengan baik dan semoga pelaksanaan demo web kami dapat berjalan dengan baik dan lancar seperti yang kami harapkan. Amin.

Desproweb Demo Uts O1 Kelompok 6

Diunggah oleh

Informasi Dokumen

Deskripsi:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Deskripsi:

Hak Cipta:

Format Tersedia

Desproweb Demo Uts O1 Kelompok 6

Judul Asli:

Diunggah oleh

Deskripsi:

Hak Cipta:

Format Tersedia

DEMO PROYEK MATA KULIAH DESAIN DAN PEMROGRAMAN WEB (UTS) MERANCANG DAN MEMBANGUN MEDIA SOCIAL BAGOESTAGRAM

pada website dan juga dapat saling bertukar informasi.

page1b (profile user).html

page2b (profile user).html

page3b (profile user).html

page4b (profile user).html

page5b (profile user).html

WEB MEDIA SOCIAL BAGOESTAGRAM index.html

page 1a.html (home bagus)

page 1b.html (profile bagus)

page 2a.html (home andreas)

page 2b.html (profil andreas)

page 3a.html (home mitchell)

page 3b.html (profil mitcell)

page 4a.html (home nico)

page 4b.html (profil nico)

page 5a.html (home rully)

page 5b.html (profil rully)

Anda mungkin juga menyukai