Ericova Blog's: Desain Pemrograman Web-Resume

Showing posts with label Desain Pemrograman Web-Resume. Show all posts

Saturday, November 13, 2010

Scripting Website

Okai lanjut lagi perjalanan pemrograman website, dalam scripting untuk mendukung pemrograman web dapat dibagi menjadi :

CSS (Client Side Scripting)
SSS (Server Side Scripting)
Database
Service
Web Deploy

Client Side Scripting merupakan bahasa pemrograman yang dijalankan di client. Contohnya : javascript, flash, dan applet.

Java	JavaScript
+ Jalan di browser dan desktop + Modelnya harus strongly type + Tidak harus nempel di HTML	+ Jalan hanya di browser + Tidak harus strongly type + Harus nempel di HTML

Tipe data pada javascript berupa : String, Number, Boolean, Null

Nah untuk lebih tahu mengenai JavaScript saya beri contoh kode (source code) untuk perkalian currency atau kurs mata uang sebagai contoh :

<html>

<head>

</head>

function hitung()

{

var k=0;

var j=0;

var h=0;

k=document.currency.kurs.value;

j=document.currency.jumlah.value;

h=(k * j);

document.currency.hasil.value=h;

}

</script>

<body>

<input type="text" name="kurs">x

<input type="text" name="jumlah">=

</form>

</body>

</html>

Sunday, October 17, 2010

Membahas E-Commerce

Hi Ericovamili ! ehmm ngomongin soal e-commerce, apaan sih ? e-commerce merupakan singkatan dari electronic-commerce dimana ini mengartikan penjualan atau pembelian dilakukan via online melalui media internet. Kenapa harus e-commerce sih kak Eric? Jaman sekarang sudah bukan jaman nya lagi harus ke toko, bayangkan saya hanya membeli barang yang saya inginkan namun harus berburu ke pelosok-pelosok pulau. Dengan adanya situs e-commerce yang dibangun saya hanya perlu melakukan pencarian untuk barang tersebut dan melakukan pembayaran via transfer antar bank saja maka tinggal menunggu barang sampai di rumah. Simple kan? Tidak harus mengeluarkan biaya jalan-jalan ke pelosok-pelosok.

Situs e-commerce contohnya apa? Contohnya seperti bhinneka.com dimana situs ini menyediakan gadget dan peralatan komputer bermacam-macam yang telah disesuaikan dengan kategorinya.

Dengan adanya situs e-commerce yang dibangun maka akan berdampak pada market place atau pangsa pasar dari pemilik/toko tersebut sehingga banyak orang dapat menemukan dan mencari sesuatu yang diinginkan dan dapat mendongkrak nama perusahaan yang mengadakan situs e-commerce. Low kok bisa? Iya bisa donk, sekarang kalau mau membutuhkan sesuatu orang langsung teringat dengan nama toko tersebut dan langsung meluncur ke situs web nya untuk melakukan transaksi jual beli. Kalau pelayanan dan kualitas barang yang di transaksikan bagus sudah tentu toko yang mejual tersebut dipercaya dan dijadikan rekomendasi bagi teman-temannya yang ingin melakukan transaksi item.

Perlu di perhatikan dalam membangun situs e-commerce sebagai kunci kesuksesan dari situs e-commerce anda :

Nama situs yang digunakan
Motto yang digunakan dalam situs
Tagline, situs e-commerce apakah ini
Produk unggulan anda perlu ditonjolkan untuk menarik perhatian pengunjung
Detil informasi produk harus ada pada setiap produk yang dijual
Testimony sangat disarankan untuk ada agar pengunjung yang ingin membeli percaya akan kualitas produk anda

Sunday, October 10, 2010

Presentation dan Layout pada Website

Komponen dalam website dapat terdiri atas :

Images
Text
Color and background
Tables and layout
Frame
Multimedia
CSS

Gambar menjadi pelengkap dan dapat juga sebagai content untuk informasi tambahan.

Contoh images dalam website seperti GIF, JPEG, XBM (XBitmap), XPM (XPixelmap), PNG (Portable Network Graphic).

Pixel merupakan elemn terkecil dari sebuah image. Terdapat gradasi warna terdiri atas RGB (Red Green Blue) masing-masing memiliki nilai 0-255.

File gambar yang dapat melakukan transaparan utnuk sebuah web yakni GIF (Graphic Interchange Format), dan GIF juga dapat melakukan animasi sederhana dimana frame-frame gambar digabungkan sehingga membentuk gambar gerak.

Warna hitam memiliki kode #000000 dan warna putih berkode #FFFFFF.

Contoh Color Space atau dapat disebut juga sebagai bidang warna :

RGB (Red Green Blue)
CMYK, digunakan pada layar televise dan printing
HSB
YCBR

Gambar dibagi lagi menjadi 2 yakni :

Non Dithered, dimana hasil gambar yang diciptakan halus
Dithered, gambar yang ihasilkan memiliki pola bintik-bintik warna semacam noise

Alt text dalam pemrograman web dapat disebut juga sebagai alternate text, jadi jika gambar tidak dapat ditampilkan maka alternate text akan membantu untuk mendeskripsikan gambar yang seharusnya muncul atau dapat digunakan sebagai tool tips ketika gambar di hover oleh mouse atau dibayangi oleh mouse.

Gambar dapat juga sebagai tombol. Jadi gambar diklik sehingga akan mereferensikan ke link halaman yang lain.

Satu lagi kita dapat melakukan pemograman image map seperti halnya yang diterapkan pada facebook yang dapat melakukan tag-ing terhadap foto-foto untuk identifikasi foto siapakah ini. Dimana image map ini melakukan pemetaan sekaligus gambar sehingga kita dapat melakukan pemilihan link maupun posisi dengan koordinat.

Gambar Contoh ImageMap, hanya dengan 1 gambar saja namun kita dapat membagi link dari gambar ini

Berikut saya bagikan ilmu saya mengenai image mapping terhadap gambar menggunakan koordinat sebagai titik pemilihan, berikut adalah source codenya

<head>

<title>Untitled Document</title>

</head>

<body>

</MAP>

<BR>

</DIV>

</body>

</html>

Selamat belajar pemrograman website, salam ericovamili ! :D

Sunday, October 3, 2010

Pembagian Website

Saya rasa dalam pembahasan kita kali ini banyak yang sudah mengerti mengenai pembagian website. Silakan menambahkan jika saya ada kekurangan melalui kolom komentar yang telah disediakan :) namun tidak ada salahnya saya membagikan ilmu saya pada anda pembaca setia ericovamili.

Tema merupakan langkah awal untuk menentukan desain sistem website yang akan digunakan. Kemanakah arah tema website yang akan anda bagun ? Tema dalam sebuah website dapat terdiri atas :

Ecommerce
- Barang, barang ini dapat dibagi-bagi kembali seperti
  - Makanan
  - Benda seperti alat tulis, produk-produk berupa benda
- Jasa
  - Direct Selling atau MLM (Multi Level Marketing)
  - Konsultasi
  - Penanganan Proyek
Portal
SIG (Sistem Informasi Geografis) atau Sistem Informasi Lainnya
Informasi Kuliner
Lainnya
- Survei
- Pemesanan Makanan

Apakah tema bersifat mengikat ? Saya jawab tidak. Mengapa? Karena anda lah yang menentukan kemanakah website anda, acuannya adalah TEMA yang anda gunakan serta kalau boleh saya tambahkan adalah KREATIVITAS. Jadi dengan adanya tema dan menambahkan kreativitas pada website anda lain dari website lain maka website yang anda bangun terbilang berbeda.

Contoh website Extreme Portal Autotechnic yang saya bangun di awal tahun 2007

Nah menurut sumber yang saya kutip dari Prowebpro di bawah ini, Elemen-elemen yang vital dalam perancangan website adalah:

1. Warna

Pilih warna sesuai yang akan disajikan. Warna hitam menyatakan eksklusif, warna abu-abu berarti professional, warna biru memberikan kesan high technolgy dan lain sebagainya. Jumlah warna juga perlu dipikirkan, jumlah warna sebaiknya 2 atau 3 saja.

2. Elemen-elemen dalam disain

Elemen-elemen disain mencerminkan kesan yang akan ditampilkan. Website professional cenderung menampilkan elemen-elemen garis, lengkung yang lembut. Web site remaja cenderung menampilkan elemen-elemen yang mempunyai kontast tinggi dan sebagainya.

3. Layout

Layout bisa memberikan kesan ramai, sederhana dan sebagainya.

Layout ini meliputi peletakan menu dan peletakan isi. layout yang banyak judul artikel memberikan kesan ramai, layout yang hanya menampilkan beberapa elemen utama menimbulkan kesan sederhana dan lain sebagainya.

Baik sekian penjelasan saya mengenai tema website. Apabila ada pertanyaan silakan mengemukakan melalui form komentar atau interaksi saya langsung, dengan senang hati saya akan menjawab apa yang bisa saya jawab untuk Anda kawan :D

Sunday, September 26, 2010

Desain Pemrograman Web - Resume Pertemuan 3

Langsung saja ya saya berbagi ilmu mengenai konsep Desain Pemrograman Web kali ini kawan :)

XML + HTML >> XHTML

Sebenarnya di bahasa HTML kita bisa membuat tag sendiri selain yang telah di tentukan seperti jadi contoh saya membuat tag Ini isi dalam tag ericova namun sebagai standard penggunaan HTML yang telah di tetapkan oleh W3 (World Wide Web Consortium, organisas yang menaungi dan meneliti bahasa pemrograman web) maka browser standard seperti Opera dan Mozzila Firefox menggunakan standard code tag dari W3, oleh karena itu tag yang kita buat sendiri tidak dikenali.

Semakin besar angka Heading yang kita gunakan dalam penomoran heading maka akan semakin kecil pula tulisan yang ditampilkan, namun kecilnya penulisan ini sudah di tetapkan jadi tidak bisa sampai kecil-kecil sekali.

Contoh source code untuk latiha Ordered List, Unordered list. Coba anda kopikan dan jalankan, lihat hasilnya :)

Nah sedikit tips yang saya kasih untuk pembaca ericovamili :

Kalau XHTML tidak ada isi dalam tag jadi setelah tag pembuka kemudian ditutup kembali maka pada browser akan muncul seluruh isi code yang anda gunakan. Jadi sebaiknya jangan dibiarkan kosong antara tag pembuka dengan tag penutup.
Kalau XHTML ada salah dalam tag dengan ketentuan contohnya tag antara pembuka baik huruf besar/kecil tidak sama dengan tag penutup maka pada browser akan muncul bahwa code error dan tidak dikenali, sedangkan di HTML tidak akan terjadi masalah ini.

Thursday, September 9, 2010

Development Sebuah Website

Di jaman sekarang website sudah menjadi hal penting dan menjadi tolak ukur informasi. Contohnya saja nih kalau ingin membeli notebook terbaru katakanlah Axioo atau Acer, sebelum membeli pastinya anda akan mencari-cari informasi apakah spesifikasi yang ditawarkan sudah memenuhi kebutuhan anda. Dengan adanya website yang khusus untuk notebook anda inginkan sudah jelas anda akan puas dengan rincian spesifikasi dan harga pasaran notebook tersebut dan menyiapkan dana untuk membeli pada counter penjual notebook.

Untuk sukses dalam development suatu website, Ericovamili dapat mengikuti nasihat saya *halah* :

Buatlah Customer Service yang siap membantu client anda apabila ada permasalahan. Kalau bisa 24 jam x 7 jam. Apa? Setia waktu? Ya setiap waktu, apakah susah ? tidak tentunya. Saya tanya kembali apakah client anda akan menelpon anda setiap detik? Tentu tidak bukan? Kalaupun ada panggilan setiap detik/waktu/menit/jam bersyukurlah ! karena anda terkenal dan dicari orang yang mempercayakan websitenya pada anda. Apakah anda menolak berkat ? :)
Untuk mensiasati anda harus menerima telpon terus, buatlah FAQ (Frequently Asked Question) dimana berisi hal-hal yang kira-kira sering dipertanyakan oleh orang-orang. Buatlah FAQ kawan, niscaya client anda akan sangat terbantu dengan adanya FAQ yang anda sediakan
Sediakan harga yang bersahabat dengan client. Jangan sampai selisih sedikit dengan saingan, anda sampai kehilangan calon client

Analisa sebelum membuat website :

Dimana lokasi orang yang akan membuka website anda?
Berapa kira-kira usia calon pembuka website anda?
Jenis kelamin apa yang anda harapkan dalam membuka website anda?
Bahasa apa yang akan digunakan ?
Apa keuntungan setelah melihat website anda?
Apakah pengunjung website anda orang yang cacat ? (misal kemampuan fisik yang kurang, penglihatan yang kurang, atau yang lain)
Perkirakan juga calon pengunjung website anda menggunakan jenis koneksi internet apa? Cepat? Lambat?
Estimasikan di daerah calon pangsa pembuka website anda menggunakan browser apa?

Waterfall model diperlukan dalam perancangan dan develop suatu website baik itu personal,komersil. Kenapa? Karena tahapan dalam waterfall model yang digunakan dalam development website kalau boleh saya katakana itu merupakan konsep perancangan yang sangat baik dalam pembuatan website. Waterfall Model dapat di gambarkan seperti :

Jadi inilah life cycle dalam proses develop sebuah website. misal Design Prototyping salah, anda bisa sgeera melakukan requirements analysis specification maupun ke problem definition kembali. Jangan sampai anda telah sampai melakukan release namun ada kesalahan maka anda kembali problem definition lagi. Jelas membuang waktu kawan.

Tips membuat HTML :

Gunakan komentar, komentar penting saat anda melakukan koding pada HTML. Jika seandainya anda lupa rumus kode yang anda gunakan ini utnuk apa, komentar yang anda beri sangat bermanfaat ketika anda lupa.
Jangan gabungkan Script, style dalam satu struktur, sebaiknya pisahkan agar mudah menelusuri letak kesalahan.
Buatlah template, dengan adanya template anda akan menghemat pekerjaan anda seperti memikirkan posisi untuk peletakan gambar, menu, tombol, dan konsep.
Gunakan ekstensi yang konsisten seperti format HTM atau HTML.
Cobalah lakukan testing dari setiap link, menu, tombol, halaman yang anda gunakan apakah masing-masing sudah berfungsi dengan benar

Testing Website juga perlu anda lakukan sebelum anda mempublish ke orang banyak, ini perlu karena kesalahan yang anda buat akan membuat pengunjung website akan kecewa terhadap website anda. Hal-hal yang perlu dilakukan dalam testing :

Visual, apakah gambar dan tampilan sudah sesuai ?
Fungsi, Apakah tombol, menu, navigasi sudah berjalan sebagaimana mestinya ?
Content, apakah isi konten dari website anda sudah layak untuk dibaca dan tidak melanggar etika hak cipta ?
Sistem dan Browser Compability, ini juga perlu dilakukan semisal website yang akan diakses menggunakan sistem operasi lain dan browser juga mempengaruhi hasil tampilan website yang anda buat. Tidak semua browser menampilkan sesuai yang anda harpakan. Kenapa? Karena masing-masing browser memiliki engine yang berbeda untuk mengolah halaman website
Delivery Testing, testing dimana apakah halaman yang diinginkan sudah tampil dengan baik dan benar.
User Acceptance, testing ini tujuanya adalah pengunjung website anda dapat menerima website anda baik dari segi tampilan, menu, dan kemudahan navigasi.

Semoga curcol saya dapat menambah inspirasi dan pengalaman teman-teman yang sudah mahir maupun belajar.

Wednesday, September 1, 2010

Desain Pemrograman Web - Resume Pertemuan 1

Yuhuu Ericovamili, kali ini saya sediakan kolom Desain Pemorgraman Web sekalian untuk kita sama-sama membahas pemrograman web. Kolom ini juga merupakan tugas dari mata kuliah saya Desain Pemrograman Web yang di asuh oleh Pak Teguh Sutanto.

Bicara mengenai Web Server seperti Tomcat dan Apache, bedanya apa sih? Yang kita tahu kan biasanya Apache saja, nah kalau server Tomcat atau dulunya dikenal dengan nama Jakarta Tomcat ini digunakan untuk server JSP (Java Script Page) namun dalam server Tomcat sudah include dengan Apache yang dapat menjalankan web service http server.

Sifat dari Pemograman Web :

Stateless, tidak mempunyai ikatan dengan server secara terus menerus, jadi gampangnya koneksi yang dilakukan adalah putus nyambung.
Multiplatform, Web dapat berjalan di semua sistem operasi baik Linux, Windows, Mac, Symbian, JavaOS,Android.
Navigation Centric, navigasi yang dilakukan dengan menu yang disediakan.
Base On Page, web terdiri atas halaman-halaman yang dihubungkan.
Just Browser, yang dibutuhkan untuk mengakses web hanyalah sebuah browser.
Less Secure, Tidak dapat dipungkiri bahwasannya web juga memiliki kelemahan dalam masalah keamanan web itu sendiri.

Kenapa sih harus menggunakan Web ?

Informasi diakses orang banyak
Pengguna yang tidak terbatas pemakainya
Menginginkan pengaturan yang minim
Sedikit menggunakan fasilitas OS
Tidak membutuhkan keamanan yang terlalu tinggi

Definisi Website sendiri itu apa sih? Website adalah kumpulan halaman web yang saling terhubung dengan adanya link yang saling menghubungkan, gambar, video, atau media digital dimana website diakses melalui alamat URL (Unified Resource Locator), dengan nama domain yang telah ditetapkan atau berdasar pada alamat IP (Internet Protocol).

Website di hostingkan (diletakkan) pada webserver, yang dpaat diakses melalui jaringan seperti Internet maupun private network.

Jenis website berdasarkan fungsinya :

Personal
Komersial
Pemerintahan
Organisasi Non-Profit

Website sendiri ditransmisikan dari browser kita melalui yang namanya HTTP (Hyper Text Transfer Protocol). HTTP menggunakan port 80 sebagai default aksesnya. Ada lagi yang namanya HTTPS (Hyper Text Transfer Protocol Secure) ini merupakan HTTP yang aman dengan enkripsi koneksi saat kita lagi mengirimkan user dan password. Untuk mengetahui bahwa suatu website memiliki koneksi secure atau HTTPS dapat dilihat di gambar gembok pada browser. Contoh di Mozzila atau IE, pada status bar bawah akan ada gambar gembok. Contoh situs yang menggunakan koneksi HTTPS biasanya koneksi internet per-bankan yang membutuhkan akses keamanan tinggi seperti website e-banking BCA atau Mandiri.

Website bank yang menggunakan koneksi HTTPS

Bicara tentang website tidak lengkap kalau tidak ada yang namanya browser. Apalagi tuw browser ? browser adalah aplikasi yang dijalankan untuk membuka website dengan proses yang dilakukan oleh browser seperti Retrieving (menerima script code), Presenting (menampilkan hasil olahan browser dari membaca script code), dan Traversing (pembacaan ulang code yang perlu di load kembali seperti adanya gambar,video, maupun media lainnya). Contoh browser yang digunakan di jaman sekarang seperti Internet Explorer, Mozilla Firefox, Opera, Google Chrome, Safari dan masih banyak lainnya. Saya sendiri menggunakan Opera sebagai browser andalan saya karena fasilitas bookmark yang memudahkan saya dalam manajemennya apabila terjadi kerusakan pada Opera, dan juga Mozilla sebagai alternative untuk banyak Add-On (Aplikasi kecil tambahan) yang dapat dipasang pada Mozilla.

Oleh sebab itu mengapa text akan dimuat lebih cepat dibanding gambar yang ada di website. Perlu diketahui juga saya pernah iseng-iseng bandingin browser bagaimana cara load sebuah halaman, coba teman-teman perhatikan, yang muncul pertama kali adalah bagian di sebelah kiri layar anda. Mengapa demikian ? karena cara pembacaan code yang dilakukan oleh browser adalah dari kiri ke kanan, oleh sebab itu yang muncul duluan adalah bagian di sebelah kiri hehehe

Browser Mozilla Firefox

Sekarang lanjut ke bahasa web dengan bahasa HTML (Hyper Text Markup Language). HTML adalah bahasa yang digunakan untuk mendifinisikan halaman web. Sebenarnya HTML bukanlah bahasa pemrograman karena HTML adalah markup language (bahasa yang dilebaikan istilah gampangnya), dimana markup language untuk mendefinisikan isi dari tags-tags yang ada di HTML.

Contohnya tag :

<HTML> </HTML> <b></b><body></body>, tag awalan selalu ditutup dengan akhiran slash (/) tag.

Contoh sederhana tag untuk membangun website sederhana :

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Ericovamili pernah tidak ngalamin tampilan yang tidak sesuai? Misal kita buka website tertentu sebut saja "X" di browser Mozilla dapat tampil dengan baik, namun di browser Opera tidak dapat tampil dengan baik, misal ada gambar yang tidak sesuai dengan posisinya. Kenapa hal ini terjadi? Tentunya bukan salah bunda mengandung :p hehe hal ini dapat disebabkan faktor seperti settingan layout yang digunakan, table yang dibangun dalam halaman tersebut, dan CSS yang digunakan.

Sekian posting resume untuk Desain Pemrograman Web di Pertemuan 1 ini ya..Kita lanjut lagi minggu depan :) Ikuti juga Review Perbandingan Browser yang saya kerjakan untuk tugas mata kuliah ini. Selamat Belajar kawan.

Ericova Blog's

Pages

Saturday, November 13, 2010

Scripting Website

Sunday, October 17, 2010

Membahas E-Commerce

Sunday, October 10, 2010

Presentation dan Layout pada Website

Sunday, October 3, 2010

Pembagian Website

Sunday, September 26, 2010

Desain Pemrograman Web - Resume Pertemuan 3

Thursday, September 9, 2010

Development Sebuah Website

Wednesday, September 1, 2010

Desain Pemrograman Web - Resume Pertemuan 1

Mata Memandang

Kotak Suara

FeedJIT