i

SMA NEGERI 2 DEPOK

JALAN GEDE NO 177 DEPOK

TAHUN AJAR 2014/1015

ROBO-TECH

INSPIRING NEXT INNOVATION

KARYA ILMIAH

Diajukan untuk melengkapi dan memenuhi tugas TIK Disusun oleh :

-Bernard Renardi (9971312936)

ABSTRAK

Perkembangan di bidang teknologi dan komunikasi sangat pesat. Hal ini ditandai dengan tumbuhnya industry gadget yang makin hari makin variatif, ditandai dengan fitur-fitur yang disempurnakan. Hal ini tidak lain karena perkembangan pengetahuan bukan hanya sumber daya namun juga di bidang elektronika. Komunikasi juga merupakan hal yang penting. Di era modern ini komunikasi sudah tidak terbatas oleh tempat dan waktu yang mengakibatkan sema orang baik dari belahan dunia lain dapat berbagi informasi yang memadai dalam perkembangan teknologi. Media komunikasi berperan sebagai fasilitator dalam berkomunikasi, misalnya WhatsApp dan Twitter. ROBO-TECH adalah halaman berbasis web yang dikembangkan melalui program Macromedia yang bertujuan sebagai fasilitator terutama dalam komunikasi antara komunitas robotik untuk berbagi informasi mengenai robotik. Adobe Photoshop dapat menjadi alternatif dalam pemberian gambar yang variatif sehingga dapat dibuat web yang menarik baik pada simbol maupun objek pendukung lainnya.Dari hasil yang diperoleh, pembuatan website sederhana ini dapat menunjukkan halaman web yang bekerja offline dan dapat terkoneksi dengan internet melalui hyperlink.

Kata Kunci: Website, Macromedia Dreamweaver, Adobe Photoshop

ii

DAFTAR ISI

Hal

ABSTRAK ………………………………………………………….…….……....... i

DAFTAR ISI ………………..……………………………………………….….…. ii

BAB I PENDAHULUAN ………………………………………………………….

1.1 Latar Belakang ……………………………………………………… ....

1.2 Rumusan Permasalahan ………………………………………………...

1.3 Tujuan Penelitian .…………………………………………………........

1.4 Batasan dan Metode Penyelesaian Masalah ……………………………

1.5 Manfaat Penelitian ………………………………………………….......

BAB II TINJAUAN PUSTAKA ..………..………………………………………..

2.1 Dasar Teori

2.1.1 Website …………………………………….................……........

2.1.2 Macromedia Dreamweaver …………...…………………………

2.1.3 Adobe Photoshop ……………………………………………......

BAB III METODE PENULISAN …………………………………………………

3.1 Langkah Kerja ..…………………………………..................…...............

3.2 Proses Pembuatan …………………………………………...….……….

BAB IV HASIL DAN PEMBAHASAN …………………………………………

BAB V PENUTUP ………………………………………………………………...

5.1 Kesimpulan ……………………………………………………………..

5.2 Saran ……………………..……………………………..........................

DAFTAR PUSTAKA ................................................................................................ 16

iii

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Perkembangan di bidang teknologi dan komunikasi sangat pesat. Hal ini

ditandai dengan tumbuhnya industry gadget yang makin hari makin variatif,

ditandai dengan fitur-fitur yang disempurnakan. Hal ini tidak lain karena

perkembangan pengetahuan bukan hanya sumber daya namun juga di bidang

elektronika.

Komunikasi juga merupakan hal yang penting. Di era modern ini komunikasi

sudah tidak terbatas oleh tempat dan waktu yang mengakibatkan sema orang baik

dari belahan dunia lain dapat berbagi informasi yang memadai dalam

perkembangan teknologi. Media komunikasi berperan sebagai fasilitator dalam

berkomunikasi, misalnya WhatsApp dan Twitter.

Namun, media komunikasi yang begitu luas membuat beberapa komunitas

yang membutuhkan informasi yang lebih dalam mengenai hal yang spesifik akan

kesulitan untuk memperolehnya. Hal ini dikarenakan Kurang spesifiknya informasi

yang terdapat di media massa. Orang-orang yang memiliki hobi yang sama belum

tentu dapat dipertemukan bila tidak ada wadah yang jelas untuk memfasilitasi

mereka.

Oleh karena itu saya berpendapat bahwa harus ada sebuah media yang

terhubung dengan internet (internet linkage) sehingga dapat diakses dengan mudah

dan menjadi media sharing bagi komunitas-komunitas tertentu dalam berbagi

informasi spesifik seperti cara, ulasan, hobi dan tips-tips. Salah satunya saya

membuat sebuah web bertemakan ROBO-TECH; INSPIRING NEXT

INVENTION untuk mengumpulkan berbagai komunitas pecinta robot-robot dalam

berbagi informasi dan event-event terbaru tentang perkembangan robot. Di

harapkan pada masa mendatang web ini dapat memunculkan ide-ide kreatif

pembuatan web sederhana yang bermanfaat.

ii

1.2 Rumusan Permasalahan

Merujuk pada latar belakang di atas, maka permasalahan dalam penulisan ini

adalah apa itu web sederhana dan bagaimana cara membuat web sederhana

1.3 Tujuan Penulisan

Adapun tujuan penulisan ini ialah untuk:

1. Mengetahui apa itu web sederhana

2. Mengetahui bagaimana cara membuat web sederhana

1.4 Manfaat Penelitian

Penelitian ini bermanfaat untuk:

1. Pelajar

Memperkenalkan web sederhana dan pengaplikasianya dalam sebuah halaman

web (web page).

2. Guru

Menumbuhkan ide/gagasan baru dalam implementasi program pembuatan

website yang mudah diajarkan pada siswa/siswi.

3. Penulis

Pengembangan wawasan dan pengalaman dalam mengeksplorasi program dan

pemanfaatan website

iii

BAB II

TINJAUAN PUSTAKA

2.1 Dasar Teori

2.1.1 Website

Secara terminologi website adalah kumpulan dari halaman-halaman situs,

yang biasanya terangkum dalam sebuah domain atau subdomain, yang tempatnya

berada di dalam World Wide Web (WWW) di Internet. WWW terdiri dari seluruh

situs web yang tersedia kepada publik. Halaman-halaman sebuah situs web (web

page) diakses dari sebuah URL yang menjadi “akar” ( root ), yang disebut

homepage (halaman induk; sering diterjemahkan menjadi “beranda”, “halaman

muka”), URL ini mengatur web page untuk menjadi sebuah hirarki, meskipun

hyperlink-hyperlink yang ada di halaman tersebut mengatur para pembaca dan

memberitahu mereka susunan keseluruhan dan bagaimana arus informasi ini

berjalan.

Sebuah Web page adalah dokumen yang ditulis dalam format HTML (Hyper

Text Markup Language), yang hampir selalu bisa diakses melalui HTTP, yaitu

protokol yang menyampaikan informasi dari server website untuk ditampilkan

kepada para pemakai melalui web browser. Semua publikasi dari website-website

tersebut dapat membentuk sebuah jaringan informasi yang sangat besar. Web page

layaknya sebuah buku yang dapat menampung berbagai informasi tentang banyak

hal baik bersifat komersil maupun non komersil. Melalui media web inilah

seseorang dapat memberikan informasi tertentu kepada orang lain yang berada di

seluruh dunia.

Website mulai dikenal di Indonesia sekitar tahun 1998, dimana hanya

perusahaan besar saja yang mampu memilikinya. Pada saat itu, website merupakan

sebuah teknologi yang cukup mahal untuk dimiliki. Sehingga banyak pengusaha

maupun produsen mengurungkan niat mereka untuk dapat memiliki media promosi

ini. Langkanya penyedia jasa pembuatan web yang menawarkan harga murah

ii

membuat keinginan perusahaan-perusahaan tersebut untuk memiliki sebuah website

murah hanya menjadi sebuah mimpi.

Itu dulu, sekarang ini terdapat hampir milyaran halaman website yang

memeriahkan dunia maya. Sebagian besar dari website tersebut adalah web

komersial yang bersifat bisnis dan perdagangan. Rupanya media promosi dalam

bentuk website sangat berperan penting dalam dunia usaha. Buktinya akhir-akhir

ini banyak pengusaha besar maupun kecil telah menggunakan website sebagai salah

satu media promosi dalam memasarkan produk ataupun jasa. Fungsi website yang

tidak hanya sebagai sarana promosi melainkan juga sebagai upaya untuk

meningkatkan prestise (gengsi) dari suatu perusahaan telah membuat banyak

pengusaha berani mengeluarkan biaya yang cukup tinggi untuk memiliki media

online ini.

2.1.2 Macromedia Dreamweaver

Macromedia Dreamweaver adalah sebuah software HTML editor profesional

yang digunakan untuk mendesain secara visual dan mengelola situs web maupun

halaman web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML

secara manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam

melakukan editing, Dreamweaver membuatnya menjadi lebih mudah dengan

menyediakan tools yang sangat berguna dalam peningkatan kemampuan dan

pengalaman kita dalam mendesain web.

Dreamweaver 8 dalam hal ini digunakan untuk web desain. Dreamweaver 8

mengikutsertakan banyak tools untuk kode-kode dalam halaman web beserta

fasilitas-fasilitasnya, antara lain : Referensi HTML, CSS dan Javascript, Javascript

debugger, dan editor kode ( tampilan kode dan Code inspector) yang mengizinkan

kita mengedit kode Javascript, XML, dan dokumen teks lain secara langsung dalam

Dreamweaver.

Teknologi Dreamweaver Roundtrip HTML mampu mengimpor dokumen

HTML tanpa perlu memformat ulang kode tersebut dan kita dapat menggunakan

Dreamweaver pula untuk membersihkan dan memformat ulang HTML bila kita

menginginkannya. Selain itu Dreamweaver juga dilengkapi kemampuan

iii

manajemen situs, yang memudahkan kita mengelola keseluruhan elemen yang ada

dalam situs. Kita juga dapat melakukan evaluasi situs dengan melakukan

pengecekan broken link, kompatibilitas browser, maupun perkiraan waktu

download halaman web.

Evolusi Macromedia DreamWeaver diantaranya sebagai berikut:

DreamWeaver 3 : merupakan versi lamanya yaitu web authoring terbaik

pada tahun 2000

DreamWeaver 4 : merupakan software yang lebih baik lagi dan lebih

canggih pada tahun 2002

Macromedia DreamWeaver MX: pertama kali di tampilkan pada tahun

2004, selain software untuk mendesain web, juga bisa untuk

menyunting kode dan untuk membuat aplikasi web dengan

menggunakan bahasa pemrograman JPS, PHP, ASP atau Coldfusion. Di

lengkapi dengan fasilitas yang cukup lengkap untuk manajemen situs.

Yang terbaru ada Macromedia DreamWeaver 8 MX, adobe

DreamWeaver CS 3 dan CS 4 dan CS 6.

2.1.3 Adobe Photoshop

Adobe Photoshop adalah perangkat lunak atau software yang digunakan

untuk mengedit foto atau citra yang dibuat oleh perusahaan Adobe Systems. Adobe

adalah perusahaan asal Amerika Serikat yang didirikan sejak tahun 1982 dan

berkantor di San Jose, California. Pendiri Adobe adalah John Warnock dan Charles

Geschke yang pernah bekerja di Xerox PARC. Mereka berhenti saat memutuskan

untuk mengembangkan dan menjual bahasa deskripsi PostScript yang menjadi cikal

bakal dari Portable Document Format (PDF). software editing foto Adobe

Photoshop. Sedangkan Photoshop sendiri adalah perangkat lunak yang digunakan

untuk mengoreksi foto dan gambar dengan menambahkan efek. Perangkat ini

pertama kali diperkenalkan oleh Adobe pada tahun 1989 yang merupakan program

grafis untuk sistem operasi Macintosh dari Apple. Aplikasi ini diciptakan oleh

Thomas dan John Knoll, kakak beradik lulusan University of Michigan.

ii

BAB III

METODE PENELITIAN

3.1 Langkah Kerja

1. Penentuan tema

2. Pembuatan halaman dasar

3. Untuk mempermudah pengeditan, tampilkan Dreamweaver

dalam SPLIT mode

4. Tampilkan Live View untuk melihat hasilnya

3.2 Proses Pembuatan

Gambar III.1 Penggunaan Hyperlink dalam teks “@SRC Smada”

iii

Gambar III.2 Inserting Picture dengan menggunakan 2 file berbeda; 1 di display

dan 1 lagi pada hyperlink.

Gambar III.3 Hyperlink pada setiap tab (tab Contact)

ii

Gambar III.4 Paragraf dengan tag <p>

Gambar III.5 Embed Google Map kedalam frame. Fasilitas ini disediakan Google Map dengan copy hypertext yang telah disediakan.

iii

BAB IV

HASIL DAN PEMBAHASAN

Website yang sudah selesai dapat dilihat langsung secara offline dengan web

browser manapun, namun ada saja file yang not supported diakibatkan web browser

yang tidak kompatibel ataupun koneksi internet.

Gambar IV.1 Halaman Contact (bagian embed map yang terkadang cannot be displayed)

Gambar IV.2 Halaman Contact(dalam keadaan offline)

ii

Penggunaan action pada tab-tab menu dapat menunjukkan arah kursor yang dapat di klik

Gambar IV.2 Kursor yang mengarah pada tab Contact. Picture sengaja dipisahkan dari

tab untuk menambah kesan.

iii

Instant Gallery pada bagian depan dengan menambahkan 2 picture, 1 sebagai

display di tab (dengan ukuran yang kecil, yakni 200 x 120) dan yang lainnya sebagai

hyperlink (ukuran bebas).

Gambar IV.4 Instant Gallery dengan mengklik gambar di halaman Home.

ii

BAB V

PENUTUP

1. KESIMPULAN

Berdasarkan hasil dan pembahasan diatas, dapat disimpulkan bahwa ROBO-

TECH dapat menjadi sebuah alternatif komunikasi antar komunitas robotik dalam

berbagi informasi tentang robot walaupun belum dapat dilakukan secara langsung

karena harus melalui admin (SRC Smada) sebagai fasilitator. Penggunaan hyperlink

dan atribut pelengkap lainnya menjadi daya tarik tersendiri dalam rangka

meningkatkan kenyamanan setiap visitor.

2. SARAN

Menurut kami pemanfaatan Macromedia sebagai program berbasis web yang

sederhana belum mendapat perhatian yang spesifik, padahal membuat web dapat

menjadi keahlian tersendiri dan dapat menjadi wadah dalam pengembangan bakat

membuat sebauh website.

Mengingat besarnya potensi tersebut saya menyarankan agar kemampuan

membuat website dan belajar memprogram perlu diapresiasikan sehingga akan

banyak tercipta website yang lebih fleksibel dan variatif sehingga banyak orang

yang dapat saling terhubung serta bakat personal yang semakin terasah dengan

baik.

iii

DAFTAR PUSTAKA

http://www.proweb.co.id/articles/web_design/website_adalah.html

www.blog.duniascript.com

http://belajar-komputer-mu.com/mengenal-software-editing-foto-adobe-photoshop/