Selasa, 18 Oktober 2011

pengantar desain dan pemograman web


Dalam membangun sebuah web dibutuhkan 2 keahlian yang berupa keahlian untuk membuat desain web dan keahlian untuk web programming itu sendiri.
Salah satu kendala klasik dalam proses perancangan web adalah tugas rangkap dari seorang developer yang sekaligus dipaksa untuk menjadi seorang desainer web yang baik. Kendala tersebut timbul karena tidak semua developer mampu menjadi seorang desainer yang baik dan begitu pula sebaliknya.
Perbedaan – perbedaan mendasar yang membedakan antara pemrograman web dengan pemrograman desktop, yaitu :
1. Stateless
Dengan arsitektur yang cenderung bebas, maka sebuah aplikasi web hampir tidak memiliki batasan bagi para penggunanya. Sebagai contoh adalah penggunaan browser yang mampu melakukan proses multi tab ataupun multi window, akibatnya, tidak ada batasan bagi seorang pengguna melakukan proses yang sama dalam window atau tab browser yang berbeda.
2. Multi platform
Sebuah aplikasi web harus mampu dijalankan dalam sebuah browser di lintas platform atau sistem operasi. Sebuah aplikasi web ASP .NET yang dibangun di sistem operasi Windows, sebagai contoh, juga harus mampu dijalankan di browser sistem operasi lain, misalnya di sebuah distro Linux.
3. Navigation sentris
Dibandingkan dengan aplikasi desktop yang lebih menekankan kepada step by step sentris, misalnya penggunaan menu yang telah diatur sedemikian rupa urutannya, sebuah aplikasi web lebih ke arah navigation sentris. Hal ini secara umum akan membebaskan pengguna untuk mengerjakan sebuah proses tanpa harus melalui prosedur semestinya. Sebagai contoh adalah proses logout yang juga dapat dilakukan dengan menutup aplikasi browser.
4. Based on page
Dengan konsep ini, maka sebuah aplikasi web juga mengandalkan nilai estetika selain nilai dari proses yang dilakukan itu sendiri. Berbeda dengan aplikasi desktop yang lebih banyak menafikan desain dari aplikasi itu sendiri, maka aplikasi web juga bergantung pada keindahan desain demi mendukung proses yang ada didalamnya.
5. Just browser
Secara umum, sebuah aplikasi web hanya membutuhkan sebuah browser tanpa perlu instalasi runtimeataupun aplikasi lain. Meski banyak pula aplikasi web yang membutuhkan plug-ins tertentu dalam browser, seperti Flash player ataupun media player, tetapi hampir tiap browser yang ada telah memiliki fasilitas yang sama.
6. Less secure
Salah satu hal yang menjadi isu klasik dalam pemrograman web adalah masalah keamanan yang jauh lebih rentan dibanding aplikasi desktop. Terlebih lagi jika aplikasi web tersebut digunakan oleh pengguna secara jamak di internet. Pihak pengguna yang bisa jadi sangat banyak dengan berbagai tujuan, baik ataupun buruk, lebih sulit dideteksi dibandingkan dengan pengguna di aplikasi desktop.
Aplikasi berbasis web diperlukan jika :
a. Informasi yang akan ditampilkan harus bisa diakses semua orang di seluruh dunia
b. Infrastruktur pengguna yang tidak terbatas dan memiliki berbagai variasi
c. Pengaturan aplikasi seminimal mungkin
d. Tidak terlalu banyak memanfaatkan fasilitas yang terdapat dalam sistem operasi
e. Sekuritas minimal
Istilah-istilah dalam pemrograman web yang perlu dipahami terlebih dahulu ialah :
1. Website / situs
Sebuah situs bisa dikatakan sebagai sebuah aplikasi web yang lengkap dari navigasi awal hingga akhir. Sebuah situs bisa terdiri dari satu atau lebih web page atau halaman web.
2. Web page / halaman web
Merupakan bagian terkecil dari sebuah situs atau website.
3. Web server
Aplikasi yang bertindak sebagai tempat penampung aplikasi web sesuai dengan bahasa pemrograman yang digunakan, misal : IIS, apache atau Cassini.
4. Web hosting
Merupakan web server yang menampung banyak aplikasi web didalamnya. Dalam konteks yang lebih umum, web hosting kini diartikan sebagai sebuah penyedia layanan jasa bagi para developer untuk menempatkan aplikasi webnya di internet, baik secara komersil ataupun tidak.
5. Web browser
Aplikasi yang digunakan untuk aktifitas browsing atau menjelajah internet. Dalam konteks pemrograman web, web browser juga sebagai penentu kompatibilitas jalannya sebuah aplikasi web, misal : untuk web browser jenis dan versi tertentu tidak mampu menjalankan beberapa fitur aplikasi web yang akan dibuat.
6. Web design / desain web
Merupakan kegiatan desain sebuah situs. Aktifitas ini biasanya dilakukan secara terpisah dari proses pemrograman, tetapi sering kali seorang developer web juga bertindak sebagai desainer web.
7. Server side vs client side
Server side, secara sederhana, merupakan bahasa pemrograman web yang akan dikompilasi di web server, sehingga pengguna tidak bisa melihat source code dari aplikasi tersebut, misal : ASP, PHP. Sedangkan client side adalah bahasa pemrograman web yang dieksekusi di komputer pengguna, sehingga pengguna dapat melihat source code dari aplikasi tersebut, misal : Javascript dan VB Script.

sekilas tentang html

HTML (HyperText Mark up Language) merupakan suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program.
Secara umum format tag HTML tersebut dapat dituliskan sebagai berikut:
<TAG>Teks yang akan dipengaruhi oleh tag</TAG>
Sebagai contoh kalau kita akan membuat tulisan dalam format tebal maka yang harus kita tuliskan dalam file HTML adalah:
<B>Tulisan yang tercetak tebal</B>

Diposting oleh di 21.14 0 komentar

Bahasa Pemrograman Web Design


Melanjutkan artikel kemarin yang sedikit membahas tentang cara penulisan dan penggunaan sintaks HTML dan CSS, maka artikel ini adalah kelanjutannya dengan pembahasan tentang PHP dan JavaScript. Fokus pembahasannya masih berhubungan dengan web design yang menjadi tema bulan ini. Jadi jangan khawatir akan berurusan dengan skrip-skrip pemrograman yang rumit, karena kita hanya akan memakai yang berhubungan dengan desain dan diperlukan saja. Ok, mari kita mulai!

PHP

Mungkin ada yang bingung, "Buat apa ya bahas PHP segala.. itukan bahasa pemrograman untuk programmer.." Memang itu betul, tapi skrip desain web yang kita buat nantinya juga akan disatukan dengan berbagai bahasa seperti HTML, CSS, dan JavaScript. Makanya pengetahuan tentang PHP juga perlu meskipun gak terlalu banyak. Paling gak Anda bisa membedakan mana yang skrip PHP dan mana yang bukan. Kalau gak tau sama sekali wah bakalan repot banget deh.
Secara umum penulisan perintah-perintah PHP seperti berikut:
PLAIN TEXT
PHP:
  1. <?php
  2. echo "Pemilik blog DHINATACOM ganteng sekali";
  3. ?>

Skrip diatas jika dijalankan akan menampilkan sebuah kalimat Pemilik blog DHINATACOM ganteng sekali pada browser. Perintah echo hanya salah satu dari banyak perintah PHP lainnya. Ciri khas skrip PHP ditandai dengan tag awal <?phpdan tag akhir ?>. Sama seperti CSS, setiap baris perintah akan diakhiri dengan tanda; (titik koma).
Kita tidak akan membahas PHP lebih jauh karena saat mendesain blog, Anda hanya perlu mengetahui dimana perintah-perintah PHP standar milik WordPress diletakkan. Jadi yang Anda perlu tahu dan kuasai adalah jenis perintahnya tanpa perlu tahu proses apa yang dilakukan oleh baris perintah tersebut. Tapi kalau mau tahu cara kerja dan proses yang dilakukannya, ya silahkan saja. Kalau sudah tahu gantian ajarin saya ya.. karena saya cuma bisa makenya doang.. hehehe.
Ekstensi file: *.php
Info lengkap tentang PHP: PHP.Net

JavaScript

Bahasa pemrograman JavaScript lebih sering ditemukan pada plug-in WordPress ketimbang theme. Tapi banyak juga theme blog yang menggunakan JavaScript agar tampilannya terlihat lebih atraktif. Contohnya bisa Anda lihat pada bagian kanan atas halaman ini, tempat berbagai macam icon diatas 'kertas catatan' virtual. Jika pointer mouser diarahkan keatas icon maka tulisan Halaman Utama akan berubah sesuai dengan nama icon yang ditunjuk. Itu semua bisa terjadi berkat kecanggihan JavaScript.
Secara umum penulisan JavaScript seperti ini.
PLAIN TEXT
JavaScript:
  1. <script language="javascript">
  2. function namafungsi {
  3. definisi perintah;
  4. }
  5. </script>
Jika ingin menyimpan skrip dalam satu file, copy semua skrip tersebut lalu simpan dengan ektensi *.js. Misalnya skripgoogle.js. Untuk memanggil skrip yang ada didalamnya cukup dengan menggunakan perintah ini.
PLAIN TEXT
JavaScript:
  1. <script language="javascript" type="text/javascript" src="skripgoogle.js">
  2. </script>

Ciri khas code JavaScript mudah terlihat. Dengan tag awal<script language="javascript"> dan tag akhir </script>. JavaScript biasanya diletakkan pada bagian header (sebelum tag </head>) atau footer (sebelum tag </body>). Banyak layanan online yang menyediakan JavaScript untuk blog kita. Misalnya seperti Google AdSense dan Google Analytics yang menggunakan JavaScript
Diposting oleh di 21.02 0 komentar

Bahasa Pemrograman Web Design


Web Design bukan hanya tentang gambar. Selain harus dapat menciptakan gambar-gambar kreatif Anda juga harus dapat mengerti dan menggunakan bahasa-bahasa pemrograman yang umum digunakan dalam Web Design. Dalam mendesain theme sebuah blog maupun website setidaknya ada 4 bahasa utama yang harus Anda pelajari yaitu HTML, PHP, CSS, dan JavaScript.
Artikel kali ini akan membantu Anda untuk mengetahui cara penulisan dan cara menggunakan bahasa tersebut dalam mendesain web. Oya, saya juga gak akan membahas terlalu detail dengan memberikan semua perintah-perintah yang ada dalam bahasa tersebut, tapi hanya yang sekiranya diperlukan aja biar gak terlalu bingung. Tanpa banyak basa-basi ayo kita mulai!

HTML

HTML (Hyper Text Markup Language) merupakan format dokumen yang digunakan dalam WWW (World Wide Web). Tugasnya adalah untuk menampilkan data dalam browser seperti teks, gambar, link, dan elemen lainnya. Format penulisannya sebagai berikut <namasintaks> ... </namasintaks>. Secara umum cara penulisan urutan tag standar HTML dalam sebuah halaman Web adalah sebagai berikut:
PLAIN TEXT
CODE:
  1. <html>
  2. <head> … </head>
  3. <title> … </title>
  4. <body> … </body>
  5. </html>
HTML juga bisa digunakan untuk membuat berbagai macam efek pada teks seperti tebal, miring, garis bawah, jenis huruf dan juga mengatur warna. Kode HTML dalam sebuah halaman web bisa dilihat dengan mudah. Jika Anda menggunakan Mozilla Firefox cukup dengan menekan tombol Ctrl+U.
Ekstensi file: *.htm atau *.html
Info lengkap tentang HTML: W3C (World Wide Web Consortium)

CSS

Dalam mendesain web/blog, CSS (Cascading Style Sheet) memakan porsi yang cukup besar mungkin sekitar 50-60%. Maka kelihaian Anda dalam mengolah skrip CSS sangat penting. Tugasnya sangat penting yaitu mengatur layout halaman, format teks, dan pewarnaan dan lain-lain. Secara umum cara penulisan fungsi style dalam CSS adalah sebagai berikut:
PLAIN TEXT
CODE:
  1. <style type="text/css" media="screen">
  2. .nama_style {
  3. properti: nilai;
  4. }
  5. </style>
Setiap nama syle harus ditambahkan tanda . (titik) didepannya. Misalnya membuatstyle untuk teks dengan nama "huruf_arial" font Arial dan ukuran 18px, skripnya adalah sebagai berikut:
PLAIN TEXT
CODE:
  1. <style type="text/css" media="screen">
  2. .huruf_arial {
  3. font: arial;
  4. font-size: 18px;
  5. }
  6. </style>
Untuk menggunakan style yang telah kita buat dalam CSS kehalaman HTML, skrip perintahnya adalah sebagai berikut:
PLAIN TEXT
CODE:
  1. <span class="nama_style">Contoh teks</span>
Anda juga bisa meletakkan skrip CSS dan HTML dalam 1 halaman, namun bagi kebanyakan orang hal itu dapat cukup merepotkan karena baris skrip bisa menjadi sangat panjang. Maka untuk memisahkannya copy aja skrip CSS tersebut mulai dari tag <style type="text/css" media="screen"> hingga </style> lalu meyimpannya dalam satu file dengan format namafile.css.
Untuk memanggil skrip CSS tersebut cukup dengan perintah:
PLAIN TEXT
CODE:
  1. <link rel="stylesheet" href="namastyle.css" type="text/css" media="all" />
Letakkan skrip diatas, 1 folder bersama dengan file html yang ingin menggunakan styletersebut.
Diposting oleh di 21.00 0 komentar
Langganan: Postingan (Atom)