Membuat Animasi Gambar Bergerak Menggunakan Photoshop

Adobe Photoshop adalah salah satu tool multi media yang kaya akan plugin untuk mendesign gambar, salah satunya yang bisa kita lakukan adalah membuat gambar bergerak dengan format *.GIF menggunakan Adobe Photoshop.

Bagaimana cara membuat animasi gambar bergerak dalam format *.GIF menggunakan Adobe Photoshop?

Ikuti tutorialnya berikut ini :

1. Pastikan komputer anda sudah terinstal Adobe Photoshop (Admin menggunakan Adobe Photoshop CS4)
2. Buka Adobe Photoshop
3. Browse gambar yang akan anda jadikan sebagai gambar yang bergerak.File => Open atau tekan CTRL+O pada keyboard anda
4. Browse satu atau beberapa gambar berbeda yang akan anda jadikan sebagai gambar yang bergerak dengan cara yang sama seperti di atas, maka akan membuka tab baru pada Adobe Photoshop anda
5. Blok semua gambar dengan cara klik Select => All atau CTRL+O pada keyboard anda
6. Copy gambar yang sudah di blok dengan cara klik Edit => Copy atau tekanCTRL+C pada keyboard anda
7. Kembali ke tab awal, Paste gambar yang telah di copy dari tab 2 tadi degan cara klik Edit => Paste atau tekan CTRL+V pada keyboard anda
8. Berikutnya klik Window => Animation, maka akan keluar jendela Animation (Frames)
9. Klik pada gambar di Animation Framesuntuk mengatur delay waktu
   

   klik untuk memperbesar
10. Nonaktif kan salah satu gambar layer dengan cara meng-klik indicates layer visibility (gambar mata) yang terdapat pada kolom layer
11. Kembali ke Animation Frames, klik duplicates selected frames seperti gambar di bawah ini
12. Atur delay waktu dan nonaktifkan salah satu gambar layer seperti tutorialno. 9 dan no. 10.
13. Uji gambar anda dengan menekan tombol Play
14. Jika sudah berhasil simpan gambar dalam format *.GIF dengan cara klikFile => Save for Web & Devices atau tekan Alt+Shift+CTRL+S. Pengaturan kurang lebihnya seperti gambar di bawah ini
    

    klik untuk memperbesar
15. Klik Save untuk menyimpan gambar, dan hasilnya seperti gambar di bawah ini
    

    Contoh Animasi Gambar Bergerak

Read More

Sejarah dan Keungulan JAVA

Ni… bagi agan-agan yang lagi ingin mengetahui asal mula alias sejarahnya bahasa JAVA. Awalnya sih ane masih malas posting, tapi pas lihat ni artikel… jadi pingin share deh… sapa tau agan-agan semua lagi butuhin. Ni artikel ane ambil dari salah satu file PDF yang ane temuakan di google. Bahasanya agak sedikit formal sih, tapi moga aja agan-agan betah hehehe.  Silahkan menikmati….!

SEJARAH JAVA

Proyek Java dimulai pada tahun 1991, ketika sejumlah insinyur perusahaan Sun Microsystem yang dimotori oleh James Gosling memulai Green Project, yaitu proyek penelitian untuk membuat bahasa komputer yang digunakan pada chip-chip embedded untuk peralatan konsumen (inteligent consumer electronic devices) seperti remote TV.

Keharusan untuk membuat bahasa yang kecil , dan kode yang ketat mendorong mereka untuk menghidupkan kembali model yang pernah dicoba oleh bahasa UCSD Pascal, yaitu mendesain sebuah bahasa yang portable yang menghasilkan kode intermediate. Kode intermediate ini kemudian dapat digunakan pada banyak komputer yang interpreternya telah disesuaikan.

Karena orang-orang Sun memiliki latar belakang sebagai pemakai unix sehingga mereka lebih menggunakan C++ sebagai basis bahasa pemrograman mereka, maka mereka secara khusus mengembangkan bahasa yang berorientasi objek bukan berorientasi prosedur. Seperti yang dikatakan Gosling ”Secara keseluruhan, bahasa hanyalah sarana, bukan merupakan tujuan akhir”. Dan Gosling memutuskan menyebut bahasanya dengan nama “Oak” (diambil dari nama pohon yang tumbuh tepat diluar jendela kantornya di Sun), tetapi kemudian nama Oak diubah menjadi java, karena nama Oak merupakan nama bahasa komputer yang sudah ada sebelumnya.

Pada tahun 1994 sebagian besar orang menggunakan mosaic, browser web yang tidak diperdagangkan yang berasal dari pusat Supercomputing Universitas Illinois pada tahun 1993.( Mosaic sebagian ditulis oleh Marc Andreessen dengan bayaran $6.85 per jam, sebagai mahasiswa yang melakukan studi praktek. Di kemudian hari ia meraih ketenaran sebagai salah seorang pendiri dan pemimpin teknologi di netscape) Browser yang sesungguhnya dibangun oleh Patrick Naughton dan Jonathan Payne dan berkembang ke dalam browser HotJava yang ada saat ini. Browser HotJava ditulis dalam Java untuk menunjukkan kemampuan Java. Tetapi para pembuat juga memiliki ide tentang suatu kekuatan yang saat ini disebut dengan applet, sehingga mereka membuat browser yang mampu penerjemahkan kode byte tingkat menengah. “Teknologi yang Terbukti” ini diperlihatkan pada SunWorld ’95 pada tanggal 23 mei 1995, yang mengilhami keranjingan terhadap Java terus berlanjut.

KEUNGGULAN JAVA

1. Sederhana (Simple), Java dimodelkan sebagian dari bahasa C++ dengan memperbaiki beberapa karakteristik C++, seperti penambahan fungsionalitas, pengurangan kompleksitas. Contohnya, java menghilangkan multiple inheritance dari C++ dengan menggunakan interface.
2. Berorientasi Objek (Object Oriented), dalam memecahkan masalah, bahasa Java membagi program menjasi objek-objek, kemudian memodelkan sifat dan tingkah laku masing-masing objek. Kemudian Java menentukan dan mengatur interaksi antar objek.
3. Terdistribusi (Distributed), fitur- fitur Java sangat mendukung teknologi internet yang saat ini berkembangsehingga dapat mendukung pemrograman terdistribusi.
4. Multiplatform, Bahasa Java dapat diterjemahkan oleh java interpreter pada berbagai macam sistem operasi (linux, windows, apple)
5. Multithreaded, thread adalah proses yang dapat dikerjakan oleh suatu program dalam suatu waktu. Java bersifat multithreaded, sehingga dapat mengerjakan beberapa proses dengan waktu yang hampir bersamaan.

Read More

Mana Bapaknya C++?

Dennis Ritchie dan Bahasa C-nya

Mbah Dennis sebelah kanan… Mbah Ken yang kiri…

Selama di AT & T Bell Laboratories, Dennis Ritchie, bersama dengan Ken Thompson, mengembangkan sistem operasi UNIX untuk minikomputer. Ritchie selanjutnya mengembangkan bahasa pemrograman C, yang akhirnya menjadi bahasa standar di pasaran mikrokomputer dan workstation.

Dennis Ritchie lahir pada 9 September 1941 di Bronxville, New York. Setelah mengambil sarjana dan pascasarjananya di Fisika dan Matematika Terapan di Universitas Harvard, Ritchie bergabung dengan Bell Labs pada 1968. Pada pertengahan 60-an, Bell Labs bekerjasama dengan Honeywell, General Electric, dan Massachusetts Institute of Technology (MIT) untuk mengembangkan sebuah sistem operasi bagi komputer besar yang dapat menangani ribuan user secara bersamaan dan dapat digunakan 24/7. Ritchie dan Ken terlibat dalam proses pembuatan itu di bawah naungan Bell Labs. Sayangnya, tidak ada pihak maupun perusahaan yang memiliki komputer yang dapat mendukung pengembangan program mereka. Sementara pengerjaan proyek itu, Bell Labs memberi modal $100.000,00 kepada Ritchie dan Thompson untuk mengerjakan proyek lain: membuat word processing system untuk Bell Labs. Akhirnya pada 1969, Ritchie dan Thompson berhasil menyelesaikan word processor bagi Bell Labs, dan pada saat itu juga berhasil menyelesaikan sistem UNIX.

UNIX adalah penemuan besar di bidang komputasi, memberikan penggunanya fitur-fitur yang tidak ada sebelumnya. Lebih lagi, sistem UNIX sederhana dan menjadi bukti nyata bahwa sistem operasi yang sederhana dapat portable dan dapat diperoleh dengan harga terjangkau. Keberhasilan UNIX ini kemudian diikuti oleh pengembangan DOS, Mac OS, Windows NT, dan sistem operasi lainnya.

Pada 1972, Ritchie menciptakan bahasa pemrograman C dan, pada 1973, Thompson menulis ulang core sistem operasi UNIX dalam bahasa C. Kepopuleran luar biasa yang didapat oleh bahasa C dalam industri komputer berdampak pada maraknya penggunaan bahasa C sebagai bahasa pemrogaman standar di pasar mikrokomputer dan workstation. UNIX, karena ditulis dalam bahasa C, menjadi lebih portable—tidak membutuhkan mesin khusus—dibandingkan sistem operasi lainnya. Pada 1976, Ritchie dan Thompson menyadari bahwa portabilitas UNIX adalah suatu terobosan. UNIX dapat digunakan pada sebarang mesin dan para klien tidak perlu diharuskan untuk menggunakan sistem operasi yang sudah terpaket dengan hardware yang mereka beli.

Fenomena tersebut menjadi perubahan radikal saat itu, saat setiap komputer dan sistem operasinya tidak dapat terpisahkan. Pada 1977, lebih dari 500 situs menggunakan UNIX. Sebagai kepala dari departemen Pengembangan Teknik Komputer di Bell Lab, Ritchie meneruskan pekerjaannya dalam mengembangkan sistem operasi di akhir 1980 dan awal 1990, termasuk proyek Plan 9 milik Bell Lab. Plan 9 adalah jawaban dari UNIX menghadapi tantangan dari OS lain seperti Windows NT milik Microsoft. Plan 9 memuat semua teknologi yang sebelumnya tidak ada di UNIX, termasuk networking dan distributed computing.

Kemudian, Dennis Ritchie masih bekerja pada AT&T (di bawah nama barunya – Lucent Technologies Inc.) sebagai kepala departemen Riset Piranti Lunak dan mengerjakan proyek barunya: Inferno. Inferno adalah sistem operasi mini yang memungkinkan apapun dari workstation, server, hingga handheld dapat saling berinteraksi dalam komunikasi dan hiburan.

Saat ini, di usianya yang ke-68, Dennis Ritchie sudah pensiun (pada tahun 2007) dalam proses pengembangan UNIX. Namun, karya besarnya dalam dunia pemrograman tidak akan dilupakan oleh programmer mana pun.

Read More

Mengenal Adobe Dreamweaver cs4

Adobe Dreamweaver cs4 merupakan salah satu progam aplikasi yang digunakan untuk membuat dan membangu sebuah Website, Baik secara grafis maupun dengan menuliskan kode sumber secara langsung

Adobe Dreamweaver cs4 memudahkan pengembang Website untuk mengelola halaman halaman Website dan aset aset yang ada dalam Website itu sendiri. bail gambar (image), animasi flash, video, suara dan lain sebagainya. Selain itu Adobe Dreamweaver cs4 juga menyediakan fasilitas untuk melakukan Pemrograman Scripting seperti, ASP (Active Server Page), JSP (Java Server Page), PHP (PHP Hypertext Preprocessor), Java Scripts, Cold Fusion, CSS (Cascading Style Sheet), XML (Extensible Markup Languange), Dan Lain Sebagainya.

Sebelum melangkah lebih jauh dalam pembuatan Website dengan Adobe Dreamweaver cs4, Ada baiknya kita mengenal terlebih dahulu area kerja Adobe Dreamweaver cs4




START PAGE

Start Page adalah kotak dialog yang di tampilkan pertama kali bersamaan dengan jendela utama aplikasi Adobe Dreamweaver CS4 saat di jalankan.fungsi dari Star Page ini adalah menampilkan menu pilihan yang ada di Adobe Dreamweaver CS4,dimana user berhak memilih menu mana yang akan di pakai atau di jalankan.

> Open a Recent Document

Menu ini menampilkan daftar nama dokumen yang pernah di buka dengan Adobe Dreamweaver CS4. anda dapat membuka dokumen tersebut dengan cara memilih nama dokumen yang ada. selain itu,anda juga dapat membuka dokumen yang belum pernah di buka dengan Adobe Dreamweaver CS4 dengan cara memilih menu OPEN.

> Create New 

Menu ini di gunakan untuk membuat dokumen web baru.Anda dapat membuat dokumen dengan beberapa tipe yang di sediakan oleh Adobe Dreamweaver CS4, Antara lain :


HTML
Hypertext Markup Languange (HTML) adalah sebuah bahasa dasar yang di gunakan untuk merancang halaman web statis.

Coldfusion
Coldfusion adalah bahasa scripting yang di gunakan untuk pemrogaman web server.Coldfusion digunakan pada Adobe Coldfusion, BlueDragon dan lainnya.

PHP
PHP Hypertext preprocessor (PHP) merupakan bahasa pemrogaman scripting web server-side. dengan pemrogaman server-side,sebuah website akan lebih dinamis.PHP biasanya terpasang pada file HTML yang di simpan dengan ektensi *.php.



> Top Features (video)

Merupakan menu pilihan link yang berupa rekaman video penggunaan fasilitas yang di sediakan Dreamweaver secara online. menu link rekaman video yang di sediakan, antara lain: Related Files, Live View, Code navigator, Dataset Wizard, Web Widgets, JavaScript Support, Dsb

> Help Online

Merupakan menu pilihan untuk menampilkan bantuan tentang cara penggunaan, fitur fitur terbaru Adobe Dreamweaver CS4 dan lainnya secara online.

> Don't Show Again

Kotak dialog start page akan selalu di tampilkan bersamaan dengan jendela utama Adobe DreamweaverCS4 saat aplikasi ini di jalankan. Agar kotak dialog star page tidak di tampilkan lagi, centang checkBox > Don't Show Again



Area Kerja Adobe DreamweaverCS4

adalah lingkungan yang di gunakan untuk merancang halaman web anda. Pada area kerja ini terdapat jendela utama, yaitu jendela dokumen (Document Window) yang berfungsi untuk mendesain halaman, baik dengan cara penulisan kode maupun secara visual. selain itu, juga terdapat menubar, Toolbar, dan panel panel yang membantu desain halaman web dengan mudah. Berikut penjelasan beberapa Area kerja Adobe Dreamweaver CS4 beserta kegunaannya

> Menubar

Menubar adalah sebuah grup menu yang terdapat pada bagian atas aplikasi yang tersusun dari deretan text/label. Setiap menu terdiri dari submenu-submenu sesuai kategori menu masing-masing. menu menu pada Menubar ini jarang di gunakan. Biasanya fasilita pada Menubar telah diwakili dalam sebuah panel yang di miliki Adobe Dreamweaver CS4, misalnya menu insert pada menubar telah diwakili dengan panel insert pada panel group

> Workspace Switcher

Workspace Switcher adalah sebuah fasilitas yang berfungsi untuk mengubah mode tampilan area kerja sesuai kebutuhan perancang web. Workspace Switcher ini berada sejajar dengan Menubar sebelah kanan Secara default, mode tampilan area kerja Adobe Dreamweaver CS4 adalah mode Desaigner. Adobe Dreamweaver CS4 memiliki mode area kerja yang banyak, diantaranya mode Coder yang hanya menampilkan kode pembuatan halaman dan Classic.

> Document Title

Document Title adalah nama dokumen yang dibuka pada workspace Adobe Dreamweaver. Anda dapat menutup sebuah dokumen melalui Document Title. pada Document Title ini juga ditampilkan Path/Direktori di mana dokumen itu di simpan

> Document Toolbar 

Toolbar adalah kumpulan tombol yang berfungsi memudahkan oengembang untuk mengunakan fasilitas yang disediakan Dreamweaver. Pada toolbar ini, terdapat tombol-tombol untuk mengubah mode jendela dokumen yang ditampilkan dan beberapa tombol lain.

Code
Tombol Code ini berfungsi mengubah jendela dokumen menjadi mode code. yaitu jendela dokumen yang menampilkan kode html dokumen/halaman web yang aktif. Selain itu, anda dapat mengubah jendela dokumen menjadi mode Code melalui Menubar View > Code.

Split
Tombol ini berfungsi mengubah mode jendela dokumen menjadi Split, yaitu jendela dokumen akan
menampilkan kode dokumen dan tampilan desain (grafis/visual) dokumen. Document Window akan menjadi dua bagian atas dan bawah. Bagian atas menampilkan source code, dan bagian bawah menampilkan visual/grafis dari halaman web.
DesignTombol ini berfungsi mengubah mode dokumen window menjadi mode design, yaitu Document
Window hanya akan menampilkan desain web secara visual/grafis dari halaman web.

Live Vew
Tombol ini berfungsi menampilkan desain web sebagaimana browser pada jendela dokumen mode design. Tombol ini akan menyebabkan jendela dokumen mode desain tidak dapat di edit, namun
anda tetap dapat mengubah kode html-nya.

Live Code
Tombol n akan aktif jika mode Live View dipilih, Tombol ini akan membuat kode HTML pada
jendela dokumen mode Code tidak dapat di edit. hal ini ditandai dengan perubahan warna background pada jendela dokumen.

Text Field Title
Text Field Title berfungsi untuk menambahkan judul halaman web. Title ini akan ditampilkan pada titlebar browser.

File Management
Menampilkan menu pop-up untuk mengorganisasi file-file yang dibutuhkan oleh dokumen web.

Preview/Debug in Browser
Tool ini digunakan untuk menampilkan halaman web yang aktif pada browser.

Refresh Design
Tool ini digunakan untuk me-refresh desain dokumen setelah ada perubahan kode dokumen. Hal ini akan membuat desain visual dokumen berubah sesuai perubahan pada kode HTML dokumen.
Tool Refresh dibutuhkan karena perubahan kode HTML dokumen tidak secara langsung otomatis mengubah desain dokumen.

View Option
Tool ini berupa menu pop-up yang digunakan untuk mengatur jendela dokumen, baaik tampilan kode maupun tampilan desain. Melalui menu ini, anda dapat menampilkan nomor baris kode, menampilkan isi/content dari tag head, membuat jendela desain mempunyai ukuran/rulers , berbentuk grid , Dsb

Visual Aids
Visual Aids digunakan untuk tampilan desain yang berbeda dalam mendesain halaman web.

Validate Markup
Validate Markup digunakan untuk melakukan koreksi dokumen yang aktif atau tag yang terpilih.

Check Browser compability
Tool ini digunakan untuk mengecek apakah aturan CSS yang anda gunakan kompatible dengan browser yang berbeda.


> Document window

Document Window adalah area yang digunakan untuk membuka, mengedit, menampilkan desain dokumen dan atau kode dokumen web yang aktif. jendela dokumen ini mempunyai tool-tool yang digunakan untuk menampilkan informasi pada halaman, seperti Related File And Code Navigator, Tag Selector, dan fasilitas lain, seperti Zooming, Hand Tool, Selected Tool, dan informasi lainnya.


> Panel group

Panel Group merupakan kumpulan panel berupa tab-tab pilihan yang mempunyai fungsi berbeda-beda. Panel adalah sebuah jendela untuk memudahkan pembuatan desain web dengan menampilkan informasi pendukung pada jendela informasi sehingga anda dapat mengedit dan memanfaatkan data yang ada pada area tersebut. Terdapat banyak sekali panel, diantaranya panel insert yang berfungsi untuk menambahkan komponen komponen web ke dalam desain halaman anda kemudian panel files yang berfungsi menampilkan file-file yang telah anda buat, baik file gambar, html, dan folder yang terdapat pada site yang anda definisikan. untuk menampilkan panel yang lain anda dapat menggunakan menu Windows.


> Tag Selector

Tag Selector berfungsi menampilkan tag yang di seleksi pada area desain. Anda dapay menyeleksi bagian desain dengan memilih tag yang sesuai. sebagai contoh, untuk menyeleksi semua elemen halaman, klik tag <body>


> Panel Properties

Panel Properties berfungsi menampilkan properti dari elemen halaman web yang terpilih, melalui panel ini anda dapat mengubah properti elemen tersebut, baik dengan penambahan properti CSS maupun properti dari tag HTML.


Perangkat Tambahan

Selain Adobe DreamweaverCS4, anda juga membutuhkan sebuah browser yang berfungsi menampilkan hasil desain halaman web. sementara itu, untuk membuat website yang dinamis anda membutuhkan sebuah database (misalnya MySql), sebuah server web (misalnya Apache) dan sebuah phpAdmin untuk melakukan pengolahan database dengan php. Berikut penjelasannya...

Catatan:
"Perangkat tambahan Server Web diperlukan bila anda membuat sebuah halaman website yang dinamis (Dinamic Web), tapi bila anda hanya ingin membuat halaman web statis / sederhana, maka anda tidak memerlukan aplikasi Server Web"


> Server Web

Server Web dibutuhkan untuk melakukan pemrograman yang membutuhkan teknologi server-side seperti PHP, ColdFusion, ASP, dan JSP. oleh karena itu, server web merupakan perangkat yang penting untuk melakukan uji coba pemrograman server-side yang anda buat. dengan demikian anda tidak perlu melakukan upload data ke sebuah hosting hanya untuk mengetahui hasil pemrograman untuk sisi server. Pemrograman server-side biasanya digunakan untuk mangakses database yang terdapat pada server hosting, sehingga pengembang dengan mudah mengelola content website dengan mudah tanpa mengubah halaman halaman web.
Salah satu teknologi aplikasi server web yang lengkap yang dapat anda gunakan adalah aplikasi AppServ yang merupakan kumpulan aplikasi pendukung pembangun website. pada paket AppServ versi 2.5.8 terdapat aplikasi aplikasi berikut:

> Server web Apache versi 2.2.4

> Bahasa scrip PHP versi 5.3.1

> phpMyAdmin Database Manager versi 2.9.2

> Database MySQL versi 5.0.27

Read More

Mengenal Lingkungan Kerja Dreamweaver

Pupung Budi Purnama

Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG—What You See Is What You Get—intinya Anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs. Macromedia belum lama ini telah mengeluarkan rilis terbaru dari Dreamweaver yaitu Dreamweaver MX, dengan penambahan beberapa fasilitas baru di dalamnya. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver MX mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Menurut survey yang dilakukan oleh Pantone.com, www.pantone.com/products/products.asp?idArticle=209&idArea=1, pengguna Dreamweaver adalah 59% dari seluruh koresponden yang disurvey dan memang digunakan tidak hanya oleh desainer, tapi juga programer.

Dalam seri tutorial ini kita akan mengenal penggunaan Dreamweaver sebagai editor HTML visual. Untuk bagian pertama, kita akan mengenal lingkungan kerja dalam Dreamweaver MX dan membuat halaman web sederhana.

[Program: Untuk mencoba Dreamweaver, Anda membutuhkan programnya yang berjalan di Windows. Karena ukurannya cukup besar (dan lagi bukan freeware), Dreamweaver tidak dapat disertakan di CD edisi kali ini.]

Mengenal Lingkungan Kerja Dreamweaver MX

Lihat Gambar 1. Dreamweaver MX menawarkan dua layout view untuk dijadikan sebagai tampilan kerja saat Anda membuat halaman web. Setelah instalasi, Dreamweaver MX akan memberikan opsi: Macromedia Dreamweaver MX Workspace atau Macromedia Dreamweaver 4 Workspace. Anda dapat mengubah-ubah tampilan ini lewat menu preferences, Modify > Preferences > Change Workspace. Pilihan ini tentu saja terserah Anda, pada tutorial ini saya akan menggunakan Dreamweaver MX Workspace.

Fig 1. Lingkungan kerja Dreamweaver MX

Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar. Document Window adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya. Insert panel adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Insert panel ini serupa dengan menu Insert pada menu bar. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2. Property Inspector berguna untuk melakukan pengeditan pada suatu elemen di Document Window. Document Toolbarberguna untuk mengubah tampilan dari disign/visual view, code view, atau keduanya sekaligus. Selain itu juga untuk memberi titel pada dokumen, melihat tampilan di browser. Panels Group merupakan kumpulan dari panel-panel Dreamweaver MX.

Pada bagian ini kita akan membuat halaman web sederhana dengan pemformatan dasar pada teks, link, anchor, dan Page Properties.

Bekerja dengan Teks

Pada dasarnya Dreamweaver tidak jauh berbeda dengan program pengolah kata dalam memformat teks. Namun terdapat sedikit perbedaan karena Dreamweaver menggunakan HTML. Untuk memformat teks dapat kita lakukan dengan menggunakan Property Inspector. Lihat Gambar 2.

Fig 2. Property Inspector

Heading

Heading (Gambar 3) digunakan untuk membuat judul dari dokumen atau sub-subjudul berbagai level. Misalnya Anda menggunakan Heading 1 untuk judul, Heading 2 untuk subjudul tingkat pertama, dan sebagainya. Anda juga dapat menggunakan insert panel, pada Insert Panel, klik Tab Text.

Fig 3. Heading

Paragraf dan Line Break

Bila kita menekan Enter pada pengolah kata, maka akan menghasilkan paragraf baru. Demikian pula pada Dreamweaver. Namun paragraf dalam HTML (<p>) secara default menghasilkan jarak lebih besar daripada jarak antarbaris. Jika kita ingin antarbaris tidak ada jarak, maka kita membutuhkan <br> di HTML. Untuk berpindah baris dan bukan paragraf kita menggunakanShift-Enter, atau Insert > Line Breaks. Lihat Gambar 4.

Fig 4. Paragraf dan Line Breaks

Memformat Teks Dengan Property Inspector

Seperti yang sudah kita bahas sebelumnya, Propery Inspector berguna untuk melakukan pengeditan pada sebuah elemen HTML. Kita akan menggunakan Property Inspector ini untuk memformat teks, ukuran, warna, dan perataan paragraf. Untuk memunculkan Property Inspector yaitu dengan Window > Properties atau dengan menekan Ctrl-F3.

Anda dapat memilih jenis font sesuai dengan selera Anda, namun terdapat 5 jenis font yang yang umum digunakan untuk halaman web, karena hampir semua komputer memiliki jenis huruf ini: Arial, Times New Roman, Courier New, Georgia, dan Verdana. Untuk mengubah teks yang telah Anda ketik yaitu dengan memilih teks yang ingin diubah, kemudian pilih jenis font yang ingin Anda gunakan. Dalam pilihan font dari drop down Property Inspector terdapat beberapa jenis huruf lain yang dipisahkan dengan koma. Pertama-tama browser akan membaca font pertama untuk ditampilkan di browser, bila font pertama tidak terinstal di komputer maka akan dilanjutkan dengan font kedua, kemudian ketiga, dan seterusnya. Font default adalah Times New Roman. Lihat Gambar 5.

Fig 5. Mengubah format huruf

Membuat Link, Anchor, dan Target

Untuk membuat link antarhalaman, selain diperlukan halaman link sumber—Source Link—juga diperlukan link tujuan—Destination Link. File contoh halaman Web sederhana di atas saya simpan dengan nama file index.htm. Halaman ini yang akan menjadi link sumber kita. Mari kita buat halaman baru untuk dilink:

Buatlah halaman baru untuk link tujuan, File > New, pada kotak dialog pilih Kategori Dynamic Page, dan Basic Page HTML. Lihat Gambar 6. Setelah selesai membuat file baru, kemudian simpanlah file tersebut dengan nama file tentangsaya.htm. Pada contoh, saya memasukkan horizontal Rule, Insert > Horizontal Rule untuk memisahkan konten dari halaman tersebut. Kemudian simpan di folder yang sama dengan index.htm.

Fig 6. Membuat dokumen baru

Pada index.htm, pilihlah teks “Tentang Saya”, kemudian pada Property Inspector ketikan tentangsaya.htm pada kotak link. Atau gunakan Browse For File untuk memilih filetentangsaya.htm lewat kotak dialog. Lihat Gambar 7. Cek dengan menggunakan browser, bukalah file index.htm (Gambar 8).

Fig 7. Memasukkan Link

Fig 8. Tampilan index.htm di browser

Untuk membuat link ke situs lain, setelah teks dipilih, ketik langsung pada kotak link alamat yang dituju, misalnya http://www.mwmag.com (Jangan lupakan http://).

Target

Target (Gambar 9) adalah perintah atau opsi pada link yang memberitahukan di window mana link tersebut akan dibuka. Setiap window atau frame di HTML dapat kita beri nama dan browser akan memuat halaman ke window/frame sesuai yang ditunjukkan oleh link. Sesuai aturan di HTML, terdapat nama-nama target khusus yang berarti spesial. _Self adalah pilihan default, bila Anda tidak menentukan target, link akan dibuka pada window browser atau frame yang sama. _top memuat ke window terluar (di luar semua frame yang ada). _Blank membuka link pada browser window baru. _Parent membuka link pada frame induk (kita akan membahas tentang hal ini pada bagian Frame nanti).

Fig 9. Target pada Property Inspector

Named Anchors

Bila halaman web Anda memungkinkan pengunjung menscroll window browser karena isi dari halaman tersebut panjang dan terdiri dari beberapa halaman, Anda dapat menggunakan Named Anchors ini untuk menentukan titik-titik tertentu pada halaman dengan tujuan memudahkan navigasi pengunjung mencari sesuatu dalam halaman dengan cepat. Pada halaman yang saya buat tentangsaya.htm terdapat beberapa menu yang langsung menuju ke topic tertentu pada halaman tersebut, setelah itu pengunjung dapat kembali ke atas halaman.

Untuk membuat Named Anchor, pertama kita tandai bagian khusus dari halaman: klik Insert > Named Anchors, atau tekan Ctrl-Alt-A. Setelah kotak dialog muncul masukan nama anchor. Pada file ini saya memberi nama kesukaan. Setelah itu klik OK. Pada bagian yang ditandai akan tampak tanda/icon buku terbuka. Lihat Gambar 10.

Fig 10. Named anchor

Setelah itu kembali ke halaman atas pilih teks yang akan di buat link pada bagian atas dokumen yang akan dihubungkan dengan Anchor tersebut, pada kotak link di Property Inspector ketikkan #kesukaan. Untuk mengembalikan ke atas halaman buat link baru pada bagian tersebut misal: kembali ke atas. Lihat Gambar 11. Kemudian masukkan di kotak link tanda # dan pilih _top untuk target dari link tersebut. Lihat di browser dengan menekan F12.

Fig 11. Membuat link ke bagian atas dokumen

Page Properties

Page Properties adalah fasilitas untuk mengubah properti dasar sebuah dokumen Web, seperti judul halaman, warna-warna link, dsb. Untuk membuka Page Properties klik Modify > Page Properties. Lihat Gambar 12. Title untuk menentukan judul dokumen. Background Image tempat memasukkan gambar sebagai latar belakang. Background menentukan warna latar. Textuntuk menentukan warna teks. Links mengubah warna link. Visited Link mengubah warna link yang telah dikunjungi. Active Link mengubah warna link yang sedang diklik. Marginmenentukan margin halaman. Semua elemen ini memiliki padanannya di dalam kode HTML, yaitu dalam atribut elemen <body>. Selain mengubah format tampilan melalui Page Properties, kita juga dapat melakukannya dengan CSS (Cascading Style Sheet) yang akan kita bahas pada tutorial bagian lain. Setelah selesai, Anda dapat melihat tampilannya di browser (Gambar 13).

Fig 12. Page Properties

Fig 13. Tampilan akhir tentangsaya.htm

Read More

Edit Foto Dengan Photoshop

Cara Edit Foto Dengan Photoshop - Masih berbicara tentang Adobe Photoshop dan bagaimana cara mengedit foto dengan Photoshop, kalau kita membahas "cara" berarti kita membahas, bagaimana untuk mengolah gambar digital agar terlihat lebih menarik dari foto aslinya, nah... disini pembahasan nya bisa menjadi panjang. Menarik menurut Saya belum tentu menarik menurut Anda, atau pun Menarik menurut teman di sebelah Anda, Selera masing-masing yang melihat hasil akhir sebuah Olahan Gambar Digital yang akan menentukan nya.

Apa yang harus di Pahami Pertama Kali. 

Tool Tool Dasar Photoshop serta kegunaan nya, sebuah Pokok terpenting yang harus di pahami pertama kali, ibarat Orang yang ingin Belajar mengendarai Sepeda Motor, harus sudah benar benar tahu gas dan kegunaan nya, Rem juga fungsi dari Rem itu sendiri, Fungsi Kopling dan cara menggunakan nya, begitu pula mempelajari Adobe Photoshop, yang "njelimet" kalau kata Orang yang baru akan memulai Belajar Photoshop. Seperti Sepeda Motor, 3 Hal Terpenting yang harus kita Pahami sebelum Belajar Mengemudikan Sepeda Motor, Pertama Gas, Kemudian Rem, lalu Kopling, Photoshop pun dapat kita bagi menjadi 3 Tool dasar yang harus di Pahami, Pertama Tool Seleksi, Kemudian Tool Retouch lalu Tool Drawing

3 Kelompok Tool Dasar inilah yang akan manjadi Pondasi kita dalam mempelajari photoshop, di mulai dari Kelompok Tool yang Pertama Tools Selection, apa itu tool tool seleksi, Tool Selection atau Tool Seleksi, adalah Tool yang akan kita pergunakan untuk menyeleksi, memotong serta memindahkan Area tertentu pada Sebuah Foto. Lalu Kelompok Tool yang Kedua, Retouch Tools. Tool Tool ini lah yang akan membantu kita selama Proses Pengolahan Gambar Digital. Selanjutnya Kelompok Tool yang Ketiga Drawing Tool, sesuai dengan nama nya Drawing, yaitu Menggambar, Kelompok Tool ini memungkinkan kita untuk menggambar di Photoshop dengan Mudah,

Mempelajari Fungsi Fungsi Tool Dasar

Setelah kita tahu dan Memahami Tool Dasar dari Adobe Photoshop, kemudian kita Mempelajari Fungsi dari Tool Photoshop Tersebut, dan bagaimana Tool itu bekerja. Bisa dimulai dengan membuka Foto Apapun lalu mencoba satu persatu Tool Tersebut, Kalau Anda Berfikir hal ini hanya akan membuang waktu Saja. Anda Salah...! Saya akan mencontohkan kembali dengan Belajar Sepeda Motor, Cukup dengan Tahu Gas dan Rem juga Kopling, ya...... Saya Pastikan Anda Bisa Mengendarai Sepeda Motor, dan Sepeda Motor tersebut Pasti Berjalan kalau Gas di Putar, Tapi....apa iya Motor bisa Berjalan dengan Mulus kalau Kita tidak mengetahui Pada Kecepatan Berapa Kopling harus di Naikkan Satu Step, Lalu Bagaimana Pula agar motor bisa Tetap Seimbang selama kita mengendarai nya. Kembali ke Adobe Photoshop.... Tidak ada Salah nya mencoba satu per satu masing masing Tool Photoshopyang berada pada Tool Box, agar nantinya selama kita mengolah gambar Digital dapat berjalan dengan Mulus, karna kita tahu semua Tool Photoshop dan Cara Menggunakan Tool Photoshop.

Belajar Tehnik Photoshop

Mempelajari Cara berarti kita membicarakan juga Tehnik Disini, Banyak sekali cara cara atau pun Langkah langkah edit dengan Photoshop, Cutting, Masking dan Blending, adalah 3 dari sekian Banyak Tehnik edit Foto di Adobe Photoshop. Perkaya diri kita dengan berbagai macam tehnik yang banyak di Share di Website atau pun Blog Tutorial Photoshop, bisa juga dengan membeli buku Buku Tutorial Photoshop, bila memungkinkan Ambil Mata Kuliah Design yang Mempelajari Photoshop lebih Rinci, Sangat Beruntung menurut saya Orang yang mempelajari Photoshop dengan Berkuliah, karna terdapat benang merah yang sangat jelas Antara Photoshoper "Kuliah" dan Photoshoper "Otodidak". Saya Termasuk dalam KategoriPhotoshoper Otodidak, yang sama sekali tidak mengetahui makna makna Warna, tidak mengetahui bagaimana Typography yang Baik, Tidak tahu apa dan bagaimana Painting, Semua Hal yang Saya Tahu tentang Photoshop Saya Pelajari dari Tutorial yang ada di Internet, beruntung nya Saya karna Saya memiliki Pembimbing yang sudah Lebih dulu mengenal dan memahami Photoshop, Pembimbing yang juga Seorang Photoshoper Otodidak.

Explorasi dan Seni

Explorasi....Explorasi.... dan Explorasi.... terus mengexplor kemampuan kita, jangan Bosan dengan kata Belajar, jangan Pernah Puas dengan Hasil kita yang Sekarang, kalau kita merasa Puas dengan hasil Olahan kita yang sekarang, maka pembelajaran akan berhenti sampai di sini, dan Hasil Olahan pun akan berhenti hanya pada yang kita Tahu Saya. Buka Mata... Lihat bagaimana Hasil Olahan Orang Lain, cari Hasil Editan yang lebih baik dari hasil Editan kita, Pelajari itu semua, di sinilah Karakter Digital Imaging kita akan terbentuk, disinilah kita akan banyak mengerti dan akan memahami Bagaimana cara mengedit yang Baik. dan disini juga kita akan menyisipkan nilai seni dalam setiap hasil Olahan Kita.

Read More