Minggu, 26 September 2010

Desain Pemrograman Web – Resume Pertemuan 3

Penjelasan HTML (HyperText Mark up Language)

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. Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :

Hypertext

Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

Markup

Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.

Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.

Contoh bahasa HTML :
Background image:

Gunakan gambar sbg background. <body background="http://URL dari gambar kamu" text="#color" link="#color" vlink="#color"> ...ganti color dgn kode warna. 

Background sound: 

kamu jg bisa pasang musik latar<bgsound src="URL of song"> isi dgn url sound kamu.

Pasang IMAGE dihalaman:

 <img src="http://URL of image"> ganti url image kamu. 

Tombol link:

<form action="http://URL disini" method="post"> <input type="submit" value="text tombol kamu"> </form>

Teks berjalan maju mundur:

<marquee behavior=alternate loop=15>Teks kamu disini </marquee>  

Teks berjalan kekiri:

<marquee behavior=scroll direction=left loop=15>Teks kamu disini </marquee> 

Teks berjalan kekanan:

<marquee behavior=scroll direction=right loop=15>Teks kamu disini </marquee>   

Minggu, 19 September 2010

Desain Pemrograman Web – Resume Pertemuan 2

Perencanaan Web

Definisi web : Sekumpulan “halaman” yang saling berhubungan yang dapat diakses publikmelalui  World Wide Web Suatu web sites biasanya mengandung teks dan gambar Web sites memiliki keuntungan dalam hal ketersediaan interaksi antara user dan situs itu sendiri

Web Development

Web development dapat diartikan sebagai pengembangan sebuah situs web untuk world wide web atau internet. Pengembangan yang dimaksud dapat mencakup ecommerce pengembangan bisnis, web design, client side/server side scripting atau pengembangan sebuah halaman statis / sederhana atau yang paling kompleks.

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.

Jumat, 03 September 2010

Pemrograman Web

1. Internet Explorer
Internet Explorer merupakan sebuah browser keluaran Microsoft yang sangat terkenal dan banyak digunakan oleh orang-orang di seluruh dunia untuk menmgakses internet, karena software ini didukung oleh teknologi baru untuk membuat tampilan web lebih dinamis dan lebih hidup serta kompetibel.
Internet Explorer terdapat kumpulan aplikasi yang saling terintegrasi dan terdapat berbagai macam fasilitas khusus untuk mendukung pemakaian internet, yaitu diantaranya adalah I Net, I News, Net Meeting serta Chomic Chat.

2. Google
 Semua sumber iklan disimpan di server milik Google sendiri, jadi anda kita tidak perlu menyediakan ruang khusus di server kita untuk AdSense, ataupun meng-upload file-file tertentu. Cukup dengan memasang kode JavaScript yg diberikan pada halaman situs kita saja kita sudah dapat menikmati hadirnya iklan AdSense di situs kita.

Bagaimana Cara Kita Mendapatkan Uang?
Seperti contoh di atas, dengan memasangkan iklan AdSense di situs mereka, pemilik website memperoleh kesempatan untuk mendapatkan penghasilan tambahan. Bagaimana caranya? sungguh gampang. Yg perlu Anda, sebagai pemilik website, lakukan adalah menunggu (dan berdoa) supaya ada pengunjung yg meng-klik iklan tersebut. Ya, cukup dengan meng-klik saja, otomatis Anda, sebagai publisher AdSense, akan mendapatkan sejumlah uang yg nilai bagiannya diperhitungkan dari besarnya bid yg telah ditentukan oleh si pemasang iklan (advertisers). Walaupun banyak faktor lain yg mempengaruhi, secara umum, bagian yg diperoleh publisher adalah 20% dari nilai bid.

3. Opera
Opera merilis versi beta Opera Mini 4 dengan codename ‘Dimension’ yang memiliki pilihan tampilan baru ‘seperti desktop’
Fokus utama Opera Mini 4 beta adalah untuk membuat browsing menggunakan perangkat bergerak lebih mudah dan mendekati browsing seperti pada PC.

New Desktop-like layout mode (Tampilan seperti desktop)

Pada versi sebelumnya, Opera Mini hanya memiliki satu tampilan yaitu ‘fit to width’ atau sesuai dengan lebar layer, melakukan format ulang halaman web agar dapat tampil pas di satu kolom. Mode ini dapat bekerja pada sebagian besar halaman web. Akan tetapi, menyesuaikan lebar halaman web yang memiliki struktur dan desain yang rumit tidak selalu menjadi pilihan yang tepat. Gunakan ‘PC View’ layout. PC View layout akan menunjukan thumbnail dari sebuah halaman serupa dengan apa yang anda lihat bila browsing menggunakan browser di PC akan ditampilkan. Menggunakan mouse cursor (merupakan fitur terbaru juga) atau stylus anda dapat memilih satu daerah halaman dan secara instant melakukan zoom in.
Fitur ini juga mempercepat kecepatan browsing pada perangkat bergerak. Navigasi juga lebih mudah, karena menu dan konten pada halaman terletak pada posisi yang sama seperti di PC. Fitur ini juga dapat membantu pengguna menyesuaikan diri pada mobile browsing.

Zoom

Zoom dilakukan secara instan, zoom menjadi pengalaman yang menyenangkan. Teknologi zoom (yang disebut ’Intelligent Zoom’) pada ’PC View’ pertama kali diperkenalkan pada Opera untuk Nintendo Wii.
Pada saat anda melakukan zoom-in, teks akan diformat ulang secara rapi agar pas dengan lebar layar, anda tidak perlu melakukan scrolling secara horizontal.

Context Menu

Dengan menekan angka ’1’ akan muncul menu. Lewat menu ini, anda dapat secara cepat berganti mode, reload halaman dan melihat URL halaman.

Mouse Cursor (kursor)

Lagi-lagi fitur baru di versi beta ini adalah adanya semacam mouse virtual untuk mempermudah scroll. Bila berada di atas link, cursor akan berubah menjadi bentuk tangan seperti di PC :) Link juga di-highlight secara lebih jelas :)


Power Scrolling

Angka ‘2’ dan ‘4’ pada keypad berfungsi sebagai ‘page up’ dan ‘page down’, sementara ‘4’ dan ‘6’ menggerakkan ke kiri dan ke kanan.

Rewrite of Code

Pengembang Opera Mini melakukan penulisan ulang pada kode program untuk beta dan menambahkan peningkatan yang signifikan pada ‘rendering layouts’. Akan tetapi, karena semua kode ditulis ulang, tidak semua fitur dari Opera Mini 3 ditambahkan, seperti RSS feed reader, content folding, end to end security dan lain lain.

Cache
Konten yang digunakan bersama oleh beberapa halaman sekarang di cache, makin mempercepat browsing. Contoh, bila anda membuka halaman A pada sebuah situs dan kemudian berpindah ke halaman B, apabila mereka berbagi data/teks/gambar hanya konten yang tidak digunakan bersama yang dikirim. Mempercepat dan memperhemat tentunya.

New standards support (Dukungan standar baru)

Kini Opera Mini mendukung tabel pada HTML, CSS handled stylesheets dan dukungan yang lebih mumpuni untuk CSS. Smiley pada tes Acid2 dapat dikenali; tapi Opera Mini 4.0 beta belum ’lulus’. Tim Opera Mini sedang berusaha untuk memperbaikinya :)

Bi-directional support (Dukungan terhadap bahasa kanan-ke-kiri)
Lewat rilis terbaru ini, Opera juga menambahkan dukungan untuk teks bi-directional, menambahkan dukungan bagi bahasa seperti bahasa ibrani.

Mobile browser choice (Pilihlah Opera Mini)
Fitur-fitur terbaru dari Opera Mini semakin membuktikan klaim Opera Mini sebagai pilihan terbaik untuk perangkat bergerak anda:)


4. Mozilla Firefox
Browser Mozilla Firefox 3.6 juga dilengkapi fitur keamanan baru yang akan mengecek plug in di browser seperti Adobe Flash Player atau Apple Quick Time sehingga selalu ter-update. Plug-in yang mencurigakan tidak akan dijalankan dan hanya diberi tahu cara melakukan update jika diinginkan. Selain itu Mozilla Firefox 3.6 juga di lengkapi fitur personas Personas yang memungkinkan pengguna memilih latar belakang browsernya sesuai dengan tema yang disukai dari sekitar 30.000 desain yang tersedia.

Firefox 3.6 juga sudah mendukung teknologi web terbaru, seperti CSS, DOM, dan HTML5, termasuk fullscreen untuk video dan web open font format (WOFF). Browser Mozilla Firefox 3.6 ini tersedia untuk pengguna Windows, Linux, dan Mac serta bisa diunduh di website Mozilla. Pengguna Firefox dapat langsung melakukan upgrade ke versi baru dengan melakukan “check for updates” di menu “help”.
Nah begitu deh sedikit cerita saya tentang Browser Mozilla Firefox 3.6 Akhirnya Dirilis, saat saya menulis artikel juga sedang sambil download Browser Mozilla Firefox 3.6 soalnya mo coba versi barunya. Teman – teman mo ikut coba ngk nih? lagipula ngk ada salahnya dicoba lumayankan kalau kecepatan browsing lebih cepat 20 persen lansung klik

5. Safari
Safari adalah browser besutan perusahaan Amerika bernama Apple yang mungkin kurang dikenal oleh kebanyakan orang yang menggunakan sistem operasi WIndows (lihat pengertian windows). Namun Safari boleh jadi lebih populer bagi kalangan yang menggunakan sistem operasi Mac yang juga merupakan besutan Apple.

Kamis, 02 September 2010

Resume Pemrograman Web

Dasar Pemrograman Web : Port

Untuk mengerti cara aplikasi web secara umum bekerja kita harus mengerti hal – hal mendasar dari aplikasi web tersebut. Ditulisan – tulisan di blog ini banyak membahas tentang apache server,xampp,wamp , tomcat dan lain – lain. Tapi, jika kita kurang mengerti cara umum suatu web bekerja maka kita mungkin akan lebih sulit dalam menerima suatu kenyataan pelajaran yang kita dapatkan.

Secara Umum Aplikasi Web akan berjalan apabila hal – hal ini terpenuhi :
1. Jaringan
2. Server Web (Apache HTTPD/IIS/Xitami/Apache Tomcat Dll)
3. Client (Browser : Firefox,flock,Chrome,IE,Opera Dll)

Jika kita perhatikan, nomor 1 adalah jaringan betul (kiwil mode on :D ) ? , nah pasti kita akan berpikir : “Mahal dong, komputer dirumah kan cuman 1″ , OK .. yang dimaksud dengan jaringan adalah kemampuan komputer untuk membuat suatu sistem logis tentang bagaimana aplikasi berkomunikasi dengan aplikasi yang lain tanpa harus dikerjakan dari awal dan bersama-sama.
Protocol dan Port
Kemampuan ini ada karena adanya landasan yang disepakati bersama yaitu protocol. TCP/IP adalah protocol yang dikhususkan untuk jaringan. Implementasinya, akan membutuhkan suatu Object Imaginer yang disebut PORT.
PORT komputer berjumlah 65535 buah, yaitu dari 1 – 65535. Sebagian port tertentu disepakati sebagai port untuk aplikasi tertentu.