Teknik mendesain web anda

Sebagai web desainer, tentunya Anda harus tahu dahulu teknik-teknik dasar dalam mendesain suatu website. Berbagai macam desain website yang tentunya menarik, cantik, apik dan lain sebagainya dibuat berdasarkan 3 (tiga) teknik web desain dibawah ini yaitu:

- Teknik Desain es (ice design technic)
- Teknik Desain air (water design technic)
- Teknik Desain jelly (jelly design technic)

Teknik desain es
Dari namanya "es" berarti adalah suatu zat beku yang solid dan telah dibentuk sesuai dengan keinginan pembuatnya. Dalam dunia web, ini berarti desain tampilan homepage atau website Anda sifatnya adalah fixed sized. Artinya adalah ukuran elemen-elemen webnya telah ditetapkan oleh web desainernya. Contoh:

Di atas adalah contoh suatu tag TABLE (untuk pembuatan tabel) yang sudah di-set fix lebarnya sebesar 770 pixel. Penggunaan satuan pixel menyebabkan tampilan tabel akan menjadi "mati" atau bersifat tidak proporsional, pada hal ini ada beberapa kekurangan yaitu:

- Jika sesuai pada contoh di atas lebar tabel adalah 770 pixel dan resolusi yang digunakan browser adalah 640x480, maka akan terjadi scrolling pada browser. Ini tentu saja akan mengganggu navigasi dan tampilan.
- Dengan lebar 770 pixel berarti tampilan akan terlihat rapi bila browser menggunakan minimal resolusi 800x600.
- Kadang harus disesuaikan dahulu dengan content yang ada dalam web agar terlihat lebih rapi.

Kelebihan teknik ini adalah:

- Cara ini mudah diterapkan, karena tidak perlu membandingkan antara desain dan tampilan, jadi tidak perlu bolak-balik mengetest hasilnya antara HTML editor dan browser.

Teknik desain air
Ibaratnya suatu zat cair akan berubah bentuk sesuai dengan wadahnya. Dalam web ini berarti desain website Anda akan bersifat fleksibel sekali. Contoh teknik ini adalah ditandai dengan penggunaan angka persentase pada sebagian elemen tag website Anda.

Contoh di atas adalah contoh tag TABLE (dalam pembuatan tabel) yang akan mengalokasikan lebar tabel sebesar 70% dari lebar browser yang digunakan saat itu.

Hal tersebut juga mengandung kelebihan dan kekurangan yaitu:

Kekurangan:

- Anda akan menemui kesulitan dalam proses bolak-balik mengetest hasilnya antara HTML editor dan browser. Hal ini disebabkan Anda harus mencoba range persentase dan tampilan browser dan resolusi layar.

Kelebihan:
- Hasil desain website akan terlihat bagus walau Anda menggunakan resolusi layar berapapun. Ini disebabkan kemudahan dan fleksibilitas teknik air. Tentu saja ini juga harus disesuaikan dengan jenis content dari website Anda.

Teknik desain jelly
Teknik ini adalah gabungan dari kedua teknik diatas, air dan es. Jelly adalah sebuah substansi yang tidak bisa dibilang cair atau dibilang padat. Jika Anda pernah menemui produk makanan jelly ini dipasaran Anda akan melihat bahwa jelly ini kelihatan unik sekali baik bentuk ataupun rasa.

Pada contoh di atas adalah suatu tag TABLE (untuk pembuatan suatu tabel) dimana tag TABLE ini memiliki beberapa elemen yaitu WIDTH (untuk mengatur lebar tabel) dan HEIGHT (untuk mengatur tinggi tabel). Pada contoh di atas diberi contoh pada saat pengaturan elemen WIDTH digunakan fixed size sebesar 770 pixel tetapi untuk elemen HEIGHT nya di set proporsional yaitu sebesar 100% dari tinggi browser saat itu.

Untuk teknik jelly Anda harus butuh tenaga ekstra karena kelebihan dikedua teknik di atas digabung menjadi satu dan kelemahannya juga digabung tetapi hasilnya akan luar biasa sekali bagusnya.

Demikianlah tulisan sederhana mengenai tiga macam jenis website berdasarkan dari sifat desain elemen-elemen webnya dan cara

source : indoglobalweb.com

Tips Bikin Website Dengan Domain Sendiri Tanpa Mengeluarkan Uang ( Free Website )

Bagi Anda yang pengen punya website sendiri, tetapi masih ada kendala keuangan, minim pengalaman membuat website, ga tau menahu apa itu web programming, atau background Anda bukan IT, mungkin cara berikut akan sedikit membantu Anda untuk mewujudkan “keinginan” Anda untuk mempunyai / membuat website sendiri, GRATIS…

Bikin website pribadi itu mudah, biar gampang dimengerti, membuat website sama halnya jika Anda mau membuat / membangun sebuah bangunan. Sebelumnya, Saya ingin memaparkan apa-apa saja yang dibutuhkan untuk membuat website pribadi (bangunan Anda) :

1. Domain, apa itu domain? domain adalah alamat website Anda, atau sering disebut dengan URL. Analoginya, jika Anda mau bangun rumah, Anda harus punya alamat bukan? contoh : “Jl Semrawut no 13 Jakarta Pinggiran” ini adalah domain rumah Anda pada dunia nyata. Maka, untuk punya “rumah” di dunia maya (internet) Anda juga perlu punya alamat / domain (e.g. namasaya.com, sayakeren.net, dkk). Untuk domain gratis, Anda bisa daftar di www.freedomain.co.nr / dot.tk / co.cc / uni.cc

2. Hosting, setelah punya alamat (domain), Anda harus punya lahan / tanah yang sesuai dengan alamat Anda untuk bisa diisi sesuatu (akan dibangun sesuatu). Di internet, tanah tersebut dinamakan “hosting”. Anda bisa mendapatkan hosting ini sepaket dengan domain, disini diasumsikan terpisah. Berdasarkan pengalaman Saya, hosting yang bagus, cepat, space besar, stabil, fitur kumplit, dan tentu saja… GRATIS hehehe.. yaitu disini.

3. Content, setelah punya “lahan” dan “alamat”, maka Anda siap membangun bangunan yang Anda inginkan. Bangunan inilah yang disebut (Content). Jadi, orang-orang atau kerabat Anda tidak bingung jika mampir ke “alamat” yang Anda berikan ternyata masih berupa “lahan kosong” tanpa bangunan. Untuk itu, perlu diisi / dibangun sebuah bangunan bukan? Di dalam dunia maya, content ini bisa bermacam-macam, ada website, blog, e-commerce, dkk. Saya rekomendasikan bagi Anda yang mau bikin website pribadi bisa pake wordpress atau joomla!.

4. Tools, supaya ketiga langkah diatas sukses, tentunya Anda butuh suatu “alat” untuk membangun bangunan Anda kan? bisa pake mesin traktor atau alat berat lainnya untuk merealisasikan bangunan Anda. Untuk kasus ini, “alat” tersebut digunakan untuk meng-upload content yang telah Anda persiapkan ke hosting Anda. Misal Anda mau pake wordpress sebagai content dan mau meng-upload content tersebut, maka Anda butuh aplikasi / tools FTP Client. Tools ini sering dinamakan “FTP Application”. Bisa didapatkan disini.

Yak, Sekian dulu, jika masih bingung kasih comment aj ya… hehehe… terima kasih. Maju terus IT Indonesia!!!

source : http://bangsanegara.web.id/

14 hal untuk membuat website ( website sendiri )yang cepat diload

Kali ini kita membahas bagaimana cara mengoptimalkan website kita agar cepat diload. Hal ini saya rasa perlu karena banyak user yang koneksi internetnya masih lambat seperti penulis sendiri. Atau paling tidak kita memberikan pelayanan yang prima ke user. User kita jangan disuguhi halaman yang isinya .. pls wait a minutes. loading in progress.. Wew.. siapa juga yang mau menunggu. Di samping itu, menurut yang pernah saya baca "kecepatan loading suatu halaman berbanding lurus dengan jumlah pengunjung". Maaf penulis lupa linknya, tapi kalau dipikir memang masuk akal juga. Pembaca yang kelamaan menunggu loading halaman, pasti tidak sabar dan kebanyakan langsung menutup halamannya.

Pada artikel kali ini penulis mencoba menjelaskan 14 aturan dasar buat website ( website pribadi )kita cepat diload.

1. Perkecil jumlah HTTP requests

Hindari pemakaian image map server site dan perkecil jumlah script hal-hal lain yang merequest ke server

2. Gunakan CDN

Content Delivery Network (CDN) adalah network komputer yang terhubung bersama-sama melalui internet yang bekerjasama untuk mengirimkan content kepada user. Berikut situs-situs dan penyedia layanan CDNnya:

3. Tambahkan Expires header

Browser akan mencocokkan apakah cache di browser sudah kadaluarsa apa belum dan ini akan memakan waktu apabila ternyata cache sudah kadaluarsa. Untuk mencegah ini tambahkan expires date.

4. Gzip components

HTML, XML, CSS dan JSon (selain gambar dan PDF). Penulis menggunakan kode berikut di baris atas untuk mengcompress halaman blog ini.

view plain print

2. ob_start("ob_gzhandler");
3. ?>
4. Tempatkan CSS di bagian atas

Karena CSS akan menghalangi proses render di Internet Explorer. Untuk mencegah hal ini letakkan CSS di HTML Anda dan gunakan external link ke CSS Anda jangan menggunakan @import.

6. Pindahkan Java Script ke bagian bawah

Akibat dari javascript diletakkan di atas adalah adanya blank screen berwarna putih yang lama saat loading dan tertundanya loading isi halaman. Java Script tidak akan bekerja apabila obyek yang dikenai efek script belum selesai diload. Contohnya apabila kita menambahkan tool tips di links-links kita. Apanya yang akan diberi tools tips, jika links itu sendiri masih diload oleh browser. Belum lagi loading CSS dari tool tips itu sendiri.

Dan kenyataanya Java Script menghalangi browser melakukan parallel downloads dan menghalangi rendering semua content yang berada di bawahnya (CSS, HTML, image, dll). Pada keadaan normal (tidak ada Java Script) image akan didownload secara parallel sedangkan jika ada Java Script di bagian atas maka Java Script akan menghalangi proses ini, sampai keseluruhan kode java script selesai diload.

Hindari CSS expressions

7. CSS expressions dikenalkan pertama kali di Explorer 5.0 dan memperbolehkan kita untuk memanggil JavaScript expression ke dalam CSS. Sebagai contohnya adalah CSS expression untuk menentukan posisi elemen div berdasarkan uskuran browser. Menjanjikan memang, tapi silahkan Anda coba sendiri di browser Anda.
Berikut contohnya:

view plain print

1. #myDiv {
2. position: absolute;
3. width: 100px;
4. height: 100px;
5. left: expression(document.body.offsetWidth - 110 + "px");
6. top: expression(document.body.offsetHeight - 110 + "px");
7. background: red;

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically.
High Performance Web Sites by Steve Souders

Masalah yang timbul dengan penggunaan CSS expression adalah, CSS expression ini dijalankan berkali-kali, lebih dari yang diharapkan. Tidak hanya dijalankan saat halaman dirender dan diresize tetapi juga saat halaman di scroll bahkan saat user mengerakkan mouse di halaman web tersebut.

8. Buat JavaScripts and CSS external

Alasan membuat Script dan CSS external adalah agar dapat dicache oleh browser. Dengan demikian halaman akan cepat diload apabila user kembali lagi ke halaman kita.

view plain print

1. "style/style.css" rel="stylesheet" type="text/css" />
8. Selain itu dalam pembuatan website, anda juga harus memperhatikan setiap langkah yang telah anda lakukan, untuk mempermudah sebaiknya anda menggunakan jasa pembuatan website atau juga melakukan konsultasi dengan ahli komputer / ahli pembuat website.

source : http://www.gecko.web.id

3 Tehnik mendesain Website Pribadi

Sebagai web desainer, tentunya Anda harus tahu dahulu teknik-teknik dasar dalam mendesain suatu website. Berbagai macam desain website yang tentunya menarik, cantik, apik dan lain sebagainya dibuat berdasarkan 3 (tiga) teknik web desain dibawah ini yaitu:

- Teknik Desain es (ice design technic)
- Teknik Desain air (water design technic)
- Teknik Desain jelly (jelly design technic)

Teknik desain es
Dari namanya "es" berarti adalah suatu zat beku yang solid dan telah dibentuk sesuai dengan keinginan pembuatnya. Dalam dunia web, ini berarti desain tampilan homepage atau website Anda sifatnya adalah fixed sized. Artinya adalah ukuran elemen-elemen webnya telah ditetapkan oleh web desainernya. Contoh:

Di atas adalah contoh suatu tag TABLE (untuk pembuatan tabel) yang sudah di-set fix lebarnya sebesar 770 pixel. Penggunaan satuan pixel menyebabkan tampilan tabel akan menjadi "mati" atau bersifat tidak proporsional, pada hal ini ada beberapa kekurangan yaitu:

- Jika sesuai pada contoh di atas lebar tabel adalah 770 pixel dan resolusi yang digunakan browser adalah 640x480, maka akan terjadi scrolling pada browser. Ini tentu saja akan mengganggu navigasi dan tampilan.
- Dengan lebar 770 pixel berarti tampilan akan terlihat rapi bila browser menggunakan minimal resolusi 800x600.
- Kadang harus disesuaikan dahulu dengan content yang ada dalam web agar terlihat lebih rapi.

Kelebihan teknik ini adalah:

- Cara ini mudah diterapkan, karena tidak perlu membandingkan antara desain dan tampilan, jadi tidak perlu bolak-balik mengetest hasilnya antara HTML editor dan browser.

Teknik desain air
Ibaratnya suatu zat cair akan berubah bentuk sesuai dengan wadahnya. Dalam web ini berarti desain website Anda akan bersifat fleksibel sekali. Contoh teknik ini adalah ditandai dengan penggunaan angka persentase pada sebagian elemen tag website Anda.

Contoh:

Contoh di atas adalah contoh tag TABLE (dalam pembuatan tabel) yang akan mengalokasikan lebar tabel sebesar 70% dari lebar browser yang digunakan saat itu.

Hal tersebut juga mengandung kelebihan dan kekurangan yaitu:

Kekurangan:

- Anda akan menemui kesulitan dalam proses bolak-balik mengetest hasilnya antara HTML editor dan browser. Hal ini disebabkan Anda harus mencoba range persentase dan tampilan browser dan resolusi layar.

Kelebihan:
- Hasil desain website akan terlihat bagus walau Anda menggunakan resolusi layar berapapun. Ini disebabkan kemudahan dan fleksibilitas teknik air. Tentu saja ini juga harus disesuaikan dengan jenis content dari website Anda.

Teknik desain jelly
Teknik ini adalah gabungan dari kedua teknik diatas, air dan es. Jelly adalah sebuah substansi yang tidak bisa dibilang cair atau dibilang padat. Jika Anda pernah menemui produk makanan jelly ini dipasaran Anda akan melihat bahwa jelly ini kelihatan unik sekali baik bentuk ataupun rasa.

Contoh:

Pada contoh di atas adalah suatu tag TABLE (untuk pembuatan suatu tabel) dimana tag TABLE ini memiliki beberapa elemen yaitu WIDTH (untuk mengatur lebar tabel) dan HEIGHT (untuk mengatur tinggi tabel). Pada contoh di atas diberi contoh pada saat pengaturan elemen WIDTH digunakan fixed size sebesar 770 pixel tetapi untuk elemen HEIGHT nya di set proporsional yaitu sebesar 100% dari tinggi browser saat itu.

Untuk teknik jelly Anda harus butuh tenaga ekstra karena kelebihan dikedua teknik di atas digabung menjadi satu dan kelemahannya juga digabung tetapi hasilnya akan luar biasa sekali bagusnya.

Demikianlah tulisan sederhana mengenai tiga macam jenis website berdasarkan dari sifat desain elemen-elemen webnya dan cara