Tentang Halaman Responsive (Responsive Web Design)

 

Ini adalah tentang client-side. Karena perkembangan teknologi hardware sangat cepat, terutama untuk kelas tablet yang memiliki layar kecil, maka otomatis teknologi web pun mau tidak mau harus mengikuti agar memiliki tampilan ramah hardware. Karena layar tablet cenderung kecil, terlebih untuk beberapa jenis smartphone, maka ditemukan beberapa cara untuk melayani seluruh hardware tersebut, agar tatkala layar besar dia bisa tampil maksimal, dan saat layar kecil dia pun bisa tampil optimal. Cara yang telah dikembangkan antara lain:

  1. Memanfaatkan pengenalan user-agent client dari sisi server. Dalam PHP dikenal adanya $_SERVER[‘HTTP_USER_AGENT’] untuk menangkap dengan apakah web tersebut dibuka. Dengan demikian akan dapat dikenali jika dibuka dari mobile phone akan diberikan tampilan mini, dan ketika dibuka dari komputer akan diberikan tampilan lebar. Kelemahannya adalah, beberapa gadget tidak dikenali sebagai smartphone. Disamping itu, kerja web layouter akan menjadi ganda, membuat tampilan desktop dan menentukan tampilan mobile. Belum lagi jika berhadapan dengan netbook, komputer namun dengan layar kecil. Tampilan juga tidak optimal.
  2. Responsive Web Design. Yaitu melakukan optimalisasi CSS dan Javascript yang bekerja di sisi client, yang mana CSS versi terbaru juga telah dapat mengenali jenis perangkatnya. Namun tanpa mengenali jenis perangkatnya, CSS terbaru telah dapat dirancang untuk disesuaikan dengan lebar layar bagaimanapun bentuknya.

Dengan RWD (Responsive Web Design) tampilan akan lebih fleksibel, fluid dan segalanya akan didasarkan pada grid. Jika pada non-responsive web design lebar akan tergantung pada pixel, maka pada RWD tidak lagi, semua akan disesuaikan dengan persentase lebar, termasuk gambar dan elemen-elemen HTML lainnya.

RWD juga memanfaatkan sepenuhnya fungsi @media sebagai pelacak browser dan lebar browser. Sehingga dengan lebar berapapun browser kita, tidak akan muncul scroll kiri dan kanan. Penggunaan media query ini antara lain seperti berikut

 

#content ul li a {
  color: #900;
  width:100%;
  display: block;
}

@media all and (min-width: 1001px) {
  #content ul li a:after {
    content: "lebar";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  #content ul li a:before {
    content: "Sedang";
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 699px) {  
    #content ul li a:before {
    content: "Kecil";
    font-style: italic;
    color: #666;
  }

 

Masukkan kode tersebut ke dalam kode CSS. Saat browser diperkecil, maka akan muncul kata SEDANG dan selanjutnya SEMPIT. Dengan memanfaatkan media query ini maka ukuran layout juga dapat disesuaikan dengan lebar browser yang ada. Cara mengetest cukup mudah. Perkecil saja web browser kita, apakah muncul perubahan tulisan?

Beda ID dan Class dalam Elemen HTML

Ada satu pertanyaan masuk : “Apakah bedanya antara ID dan CLASS dalam Elemen HTML?” Misal:

   

Jawabannya adalah sebagai berikut:

Untuk CSS tidak ada bedanya antara CLASS dan ID.

Semua yang dimasukkan dalam CSS akan disetting propertinya tanpa perbedaan. Misal:
Continue reading “Beda ID dan Class dalam Elemen HTML”

[CSS] Fitur-fitur Memperindah Halaman dalam CSS3

CSS versi 3.x memberikan berbagai macam fitur yang siap digunakan untuk keperluan mobile dan memperingan halaman dengan animasi yang lebih lengkap. Dengan menggunakan fitur-fitur CSS3, pembuatan template dapat sangat lebih mengurangi gambar dan animasi non CSS. Beberapa fitur diantaranya adalah:

Gradasi Warna

Jika di masa lalu, membuat Gradasi Warna harus menggunakan gambar image kecil yang dijadikan background secara repeat, maka CSS3 akan memberikan cara yang berbeda.

 
Jika dulu adalah seperti ini , tentu dengan gambar yang harus ada:

background:url('../images/anu.jpg') repeat-x;

Sekarang bisa menggunakan seperti ini:


background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444), color-stop(25%, #444), to(#000));/*safari chrome*/
background-image: -webkit-linear-gradient(#444, #444 25%, #000);
background-image: -moz-linear-gradient(top, #444, #444 25%, #000);/*mozilla*/
background-image: -ms-linear-gradient(#444, #444 25%, #000);/*msie*/
background-image: -o-linear-gradient(#444, #444 25%, #000);/*opera*/
background-image: linear-gradient(#444, #444 25%, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#000', GradientType=0);/*IE*/

Perhatikan bahwa kode warna yang ada adalah menunjukkan start warna, tujuan warna dan akan berhenti di sekian persen dari warna.

Box Shadow
Jika di masa lalu dengan cara yang sama dengan diatas kita membuat sebuah kotak dengan bayangan gelap adalah dengan menggunakan image, maka sekarang dapat menggunakan CSS. Cara yang digunakan adalah menggunakan box-shadow


-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;

Transisi warna untuk mouse over pada sebuah link
Di masa lalu penggunaan transisi warna dibentuk dengan menggunakan javascript. Jika sekarang dapat menggunakan kode CSS seperti berikut

-webkit-transition: color 0.3s linear;
-moz-transition: color 0.3s linear;
-o-transition: color 0.3s linear;
transition: color 0.3s linear;

Text Shadow
Ini juga sering dipakai. Untuk memembentuk efek tertentu seperti timbul dan tenggelam dalam sebuah text, dapat digunakan teknik CSS berikut, Biasanya, jika background terang dan tulisan gelap, jika bayangan lebih gelap, akan muncul tulisan timbul.

text-shadow:1px 1px #ccc; /*1px ke bawah, 1px ke kanan dan berwarna abu*/

Masih banyak kode CSS3 seperti rotate image dan lain sebagainya. Namun cukup ini lebih dulu, selengkapnya dapat dipelajari di situs w3schools. Untuk Internet Explorer, CSS3 ini tidak begitu mudah dijalankan, yang akhirnya harus menggunakan javascript untuk mengantisipasinya. Namun menengok bahwa CSS3 dan HTML5 sangat siap untuk keperluan gadget mobile, dan dengan web browser yang makin tidak didominasi Internet Explorer, maka tidak ada salahnya menggunakan CSS3 ini.

[TIPS] Contoh Cara Membuat Grafik Standard HTML Sederhana

Pembuatan grafik ternyata tidak harus rumit dengan tools tertentu. Grafik masih bisa disiasati dengan menggunakan kombinasi teknik CSS dan HTML. Tentu saja tidak semua grafik dapat dibentuk, karena keterbatasan CSS dan HTML. Disini kita pelajari grafik yang mudah seperti grafik batang/bar, dimana seluruh value akan dibentuk dengan menggunakan Bar. Lihat contoh dibawah ini:

 

Calon 1
Calon 2
Calon 3
Calon 4
Calon 5

 

 

Contoh Grafik Pemilihan Kepala Desa

Pembuatan grafik ini ternyata tidak sulit. Yaitu hanya dengan melakukan pembuatan elemen DIV yang diberi warna tertentu, dan diberi panjang tertentu, yang tentu saja panjangnya nanti akan menyesuaikan dari dalam tabel asal.

Sebagai contoh, apa yang terjadi apa bila kita membuat sintaks seperti demikian:


Calon 1
Calon 2
Calon 3
Calon 4
Calon 5

Hasilnya tentu saja akan langsung seperti tabel di atas. Panjangnya batang akan mengikuti aturan width pada div yang bersangkutan. Grafik tersebut juga dapat kita kombinasikan dengan link href. Grafik tersebut dibuat dengan cara menempatkan sebuah elemen div yang berukuran panjang yang diatur dari database. Div tersebut juga harus rata kiri untuk dapat dibaca dengan jelas

Kita pun dapat membuat grafik dalam posisi vertikal. Hanya saja, karena tabel html memiliki karakter standard rata vertikal tengah, maka kita harus menambahkan valign=bottom

Sebagai contoh adalah sebagai berikut


Calon 1Calon 2Calon 3Calon 4Calon 5

Hasilnya akan menjadi seperti ini:

Calon 1 Calon 2 Calon 3 Calon 4 Calon 5

Nah ternyata cukup sederhana. Tinggal kita akhirnya dapat melakukan manipulasi angka tersebut dengan menggunakan PHP dan mengambil dari database server MySQL.

Untuk grafik lanjut berbasis image, dapat dilihat di :

https://blogit.bimosaurus.com/2012/04/21/contoh-cara-membuat-grafik-dengan-jpgraph-dengan-php-dan-mysql dan
https://blogit.bimosaurus.com/2012/04/19/contoh-1-dasar-membuat-grafik-dengan-jpgraph-di-php

[Tips] Menambahkan Font dalam Proses Pembuatan Web

Font, dalam dunia IT ternyata menjadi sangat penting. Pemilihan font atau jenis huruf, dipandang dapat mempengaruhi pembaca, dan dapat menunjukkan karakter pemilik font. Alangkah baiknya jika sebuah perusahaan memiliki font sendiri, dengan demikian karakter dari perusahaan atau komunitas dan lain sebagainya, dapat dibaca dari corak font yang digunakannya.

Pembuatan proposal, laporan dan lain-lain, ternyata membutuhkan perhatian juga pada Font. Beberapa teman dari kalangan Institut seni kadang malah menelaah tentang font tersebut kadang memang justru bisa berpengaruh pada kelelahan mata, pada sikap dan lain sebagainya.

Dalam dunia web, dalam web profil misalnya, Font akan menjadi penting bagi pembentukan image karakter perusahaan tersebut. Sayangnya, font yang ada dalam dunia web ini secara standard cukup terbatas. Biasanya sekitar Sans Serif, Tahoma, Arial, Verdana, Helvetica, Times, Trebuchet MS dan lain-lain.

Kadang boleh jadi kita akan menambahkan font seperti ini :

Selamat Datang

namun sayangnya font yang digunakan terbatas. Maka kita bisa menentukan sendiri font tersebut. Bagaimana caranya?

  1. Carilah font yang anda suka di internet, dalam bentuk .ttf, misal saya mengambil dari http://www.fontspace.com/category/old%20english, download dan extractlah
  2. Simpanlah dalam direktori font dalam aplikasi web anda, misal {direktori_utama}/themes/namathemes/font
  3. Bukalah CSS anda, dan masukkan kode seperti berikut dibawah
    @font-face {    font-family: 'NamaFontTerserah';    src: url('fonts/namafilefont.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
  4. Anda dapat meload font tersebut baik dalam elemen langsung html seperti :
    INI MENCOBA

    atau

    INI MENCOBA

    dengan isi CSS

    #fontcoba{
    font-family:NamaFontTerserah;
    }
    

 

Sebagai contoh, saya dari situs http://www.fontspace.com/category/old%20english font-font berikut :

  • Salterio Shadow
  • Cloister Black
  • KingThings Spike
  • KingThings Spikeless
  • Faith Collapsing

Saya edit css saya dengan menambahkan:

@font-face {    font-family: 'SalterioShadow';    src: url('fonts/salterio_shadow.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

@font-face {    font-family: 'CloisterBlack';    src: url('fonts/cloister_black.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpike';    src: url('fonts/kingthings_spike.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpikeless';    src: url('fonts/kingthings_spikeless.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'FaithCollapsing';    src: url('fonts/faith_collapsing.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

 

Dan selanjutnya disini saya buat :

Cloister Black

KingThing Spike

Salterio Shadow

KingThing SpikeLess

Faith Collapsing

Hasilnya adalah seperti berikut:

Cloister Black

KingThing Spike

Salterio Shadow

KingThing SpikeLess

Faith Collapsing

 

Artikel ini untuk para pemula seperti saya. Semoga bermanfaat.