$type=sticky$comment=hide$count=4$author=hide$snippet=show

$type=blogging$cate=2$count=15$pagination=9$comment=hide$author=hide

Archive Pages Design$type=blogging$count=7

Responsive Web Design dengan HTML5 dan CSS3

Responsive Web Design (RWD) adalah suatu keadaan sebuah halaman web dimana tampilannya dapat menyesuaikan sendiri pada perangkat dengan resolusi layar yang berbeda secara fleksibel.

Berawal dari sebuah artikel Design Web Responsive yang ditulis oleh Ethan Marcotte pada website alistapart.com dan semakin populer sekitar pertengahan 2010 lalu. Pada artikel tersebut dia mengusulkan bagaimana sebuah desain web bisa menyesuaikan sendiri ukuran tampilan pada perangkat Mobile dan Desktop secara fleksibel tanpa harus membuat dua desain untuk perangkat berbeda dengan konten yang isinya sama, dari permasalahan itu maka lahirlah konsep Responsive Web Design.

Sebelum adanya Responsive Web Design seperti saat ini, jika memang harus mendesain dan menyesuaikan semua perangkat tersebut mungkin bagi saya pribadi suatu yang konyol dan tampak bodoh, akan lebih baik bagi saya hanya fokus pada desain ditampilkan pada layar desktop saja.

Pengguna perangkat mobile seperti Smartphone dan Tablet setiap hari semakin meningkat, mulai dari berbagai macam Netbook, BlackBerry, iPhone, iPad dan berbagai macam perangkat dengan sistem operasi Android sepertinya tidak akan ada habisnya.

Para pengembang web diluar sana tentu tidak tinggal diam untuk mengatasi masalah ini, maka lahirlah istilah Responsive Web Design dari hasil pengembangan pada fitur CSS terbaru yaitu CSS3 yang memiliki dukungan penuh untuk mengatasi berbagai resolusi pada layar dengan teknik terbaru yang diberi nama Media Queries.

Ada 3 unsur inti yang harus ada pada Responsive Web Design agar bisa bekerja dengan baik, yaitu pada Flexible Grids, Fluid Images dan Media queries. Dari ketiga unsur tersebut diharapkan sebuah desain nantinya bisa beradaptasi pada berbagai layar berbeda, tidak peduli beberapapun banyaknya perangkat yang ada, dengan Responsive Web Design semua bisa dikontrol hanya dalam satu desain saja.

Flexible Grid/Flexible Layout
Pilar dari Responsive Web Design sebenarnya terletak dari Fleksibelitas Grid itu sendiri, istilah Grid kita bisa menggunakan alternatif lain dengan istilah yang lebih mudah yaitu Flexible Layout/Template. Sebelum desain Web Responsif populer seperti sekarang ini dulunya para Web Programmer terpaku dengan layar desktop dengan lebar desain yang tetap dan cenderung pada desain terpusat. Jika dulu biasanya para web desainer lebih banyak menggunakan satuan px (pixel) untuk ukuran Layout dan Text namun untuk desain responsif saat ini para pengembang lebih banyak mengunakan satuan % (percent) sebagai penggantinya, ini dimaksudkan agar desain pada Layout tidak tampak kaku dan bisa Flexible ketika ditampilkan pada resolusi layar yang berbeda.

Formula perhitungan sederhana pada Flexible Grid
Desain yang belum responsive biasanya lebih banyak menggunakan satuan px seperti dalam contoh CSS di bawah ini:

.sidebar{
width:300px;
}
.content{
width:700px;
}
.wrap{
width:1024px;
}

Lebar grid utama adalah dalam resolusi width:1024px dan untuk sidebar width:300px dan content width:700px. Di sini saya coba jelaskan formula dan kalkulasi sederhana dalam mengkonversi nilai px (pixel) agar bisa diganti dengan satuan % (percent).

Target / Context = Result

300px / 1024px = width: 29.296875%; /* 300 (originally 300) / 1024 */
700px / 1024px = width: 68.359375%; /* 700 (originally 700) / 1024 */

Dari hasil kalkulasi di atas maka bisa didapatkan nilai percent dalam koding CSS seperti di bawah ini:

.sidebar{
width:29.29%;
}
.content{
width:68.35%;
}
.wrap{
width:1024px;
}

Formula di atas sebenarnya bisa juga digunakan untuk menghitung ukuran text (font size), Katakanlah konteks normal untuk ukuran font dalam body adalah 16 piksel. Jika Anda ingin menetapkan bahwa H1 harus 24 pixel, maka Anda bisa mengganti dengan satuan em dengan cara menghitungnya sebagai berikut:
24px / 16px = 1,5em
Dengan gaya CSS akan didapat koding seperti ini:

h1 {
font-size: 1.5em;
}

Sebenarnya ada juga cara yang lebih mudah untuk menghitung formula di atas yaitu dengan menggunakan Responsive Web Design Calculator.

Media Queries
CSS Media Query adalah salah satu fitur dalam CSS3 yang memungkinkan Anda untuk menentukan kapan aturan CSS tertentu harus diterapkan. Hal ini memungkinkan untuk menerapkan CSS khusus untuk perangkat Mobile. Media queries bisa dikatakan otak dari Design Web Responsive karena diarea inilah kita memiliki kontrol penuh terhadap Design Responsive Template kita nantinya.

Ada 3 cara untuk pemanggilan media queries:
1. Menggunakan @import untuk mengimport aturan Style dari Style Sheet lainnya.

@import url(style.min.css) screen and (min-width: 768px);

2. Pemanggilan Style Sheet secara langsung dalam koding HTML dan biasanya ini pendekatan paling umum yang paling banyak digunakan pengembang saat ini.

@media screen and (max-width:768px){
    /* CSS styles */
}
@media screen and (max-width:480px){
    /* CSS styles */
}
@media screen and (max-width:320px){
    /* CSS styles */
}

Dalam rancangan media queries max-width sebaiknya penempatan kode akan lebih baik dari resolusi besar ke resolusi yang lebih kecil atau bisa juga menggunakan media queries min-width, dengan catatan menggunakan queries ini urutannya dari resolusi kecil ke resolusi yang lebih besar. Hal ini disarankan agar Anda lebih mudah merancang queries berdasarkan urutan resolusi layar.

@media screen and (min-width:320px){
    /* CSS styles */
}
@media screen and (min-width:480px){
    /* CSS styles */
}
@media screen and (min-width:768px){
    /* CSS styles */
}

3. Pemanggilan melalui link untuk Style Sheet secara terpisah.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="style.css" />

Dari ketiga memanggilan media queries di atas mana yang lebih baik? Menurut saya pribadi, saya tentu memilih yang nomor 2, selain gak ribet biasanya koding dalam Style Sheet juga tidak terlalu banyak dan bisa dikatakan hanya beberapa baris saja.

Meta Tag Viewport
Dalam design Web Responsive Meta Tag Viewport peranannya sangat penting karena meta tag ini berguna untuk mengontrol tata letak pada Browser Mobile. Saat pengguna mengakses blog Anda melalui Browser Desktop Meta Tag ini tidak memiliki pengaruh sama sekali tetapi cerita akan berbeda saat mereka mengakses blog Anda via Mobile Browser. Di bawah ini merupakan meta tag viewport yang paling sering digunakan.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />

Selamat mencoba!

Aplikasi Server, Contoh dan Fungsinya

Aplikasi server merupakan sebuah aplikasi komputer dengan fungsi untuk melayani permintaan user terhadap permintaan akses yang berasal dari komputer client. Server sendiri merupakan sistem komputer dengan menyediakan berbagai jenis layanan yang telah ditentukan pada jaringan komputer.

Server di support oleh resources atau sumber daya dengan kapasitas cukup besar yang dilengkapi juga oleh sebuah sistem operasi khusus. Adapun, fungsi server itu sendiri dibagi menjadi 3 bagian penting, yaitu:
  • Menyediakan permintaan IP Address pada mesin komputer yang terhubung.
  • Menyediakan sebuah fitur demi keamanan perangkat komputer.
  • Menyimpan database dan aplikasi yang diperlukan pada komputer terhubung.
Salah satu contohnya yaitu Web server. Web server merupakan aplikasi pada server dengan konten berupa tampilan berbagai macam informasi untuk dapat diakses melalui web browser, yaitu seperti Mozilla Firefox dan Google Chrome.

Web server akan merespon setiap permintaan dari komputer client dengan cara mengirimkan hasilnya kempai berbentuk konten text, gambar maupun yang lainnya. Lalu menampilkan hasil melalui web browser.

Contoh-contoh web server yang paling banyak digunakan di antaranya:

Apache; Sebuah nama web server yang bertanggung jawab pada request-response HTTP dan logging informasi secara detail (kegunaan basicnya). Selain itu, Apache juga diartikan sebagai suatu web server yang kompak, modular, mengikuti standar protokol HTTP, dan tentu saja sangat digemari. Apache ini dirilis pertama kali untuk sebuah sistem operasi UNIX. Di versi selanjutnya, Apache telah mengeluarkan programnya untuk dapat dijalankan pada Windows NT. Apache sendiri memiliki program yang begitu banyak. Dengan demikian, bisa memberikan fitur begitu lengkap untuk user atau penggunanya itu sendiri.

Litespeed; Sebuah terobosan dari teknologi Web Server yang bisa menggantikan web server yang selama ini kita kenal dengan Apache Web Server. Berdasarkan hasil penelitian, Litespeed ini memiliki kelebihan di antaranya memiliki kecepatan 50% untuk memproses PHP serta bisa bekerja lebih cepat hingga 6 kali lipatnya dari Apache.

IIS; Internet Information Service (IIS) adalah komponen yang dapat digunakan untuk mengelola web, File Transfer Protocol (FTP), Ghoper, dan NNTP. Komponen IIS terdapat pada sistem operasi Windows NT ,Windows 2000, Windows XP dan Windows Server 2003.

Nginx; (baca: engine x) adalah server HTTP dan Proxy dengan kode sumber terbuka yang bisa juga berfungsi sebagai proxy IMAP/POP3. Kode sumber nginx ditulis oleh seorang warga negara Rusia yang bernama Igor Sysoev pada tahun 2002 dan dirilis ke publik pada tahun 2004. Nginx terkenal karena stabil, memiliki tingkat performansi tinggi dan minim mengonsumsi sumber daya. Beberapa situs terkenal yang menggunakan Nginx adalah Wordpress, Fastmail, Ohloh, Sourceforge dan Github.

Contoh lainnya aplikasi yang terdapat pada server adalah FTP Server. FTP Server ini merupakan server yang bertindak sebagai protokol pada internet untuk memungkinkan setiap pengguna agar bisa melakukan transfer dan pertukaran file dengan sebuah server dalam jaringan internet.

Dengan FTP server inilah, Anda dapat mengupload, mengelola, mengakses dan mendownload berbagai macam file dengan mudah dalam server di internet. Server FTP sendiri pada umumnya memiliki 2 jenis, yaitu authenticate FTP dan anonymous FTP.

Pada aplikasi authenticate FTP sendiri, Anda dilarang untuk mengakses sebuah FTP server apabila tak memiliki username maupun password menuju server tersebut.

Berbeda halnya dengan anonymous FTP, yang membebaskan penggunanya untuk bisa mengakses sebuah server FTP melalui username dengan nama “anonymous” yang passwordnya bisa berupa alamat akun email pengguna.

Itulah beberapa contoh aplikasi server yang paling umum digunakan. Semoga bermanfaat!

Definisi Uptime Server Hosting

Ketika kita mencari perusahaan hosting untuk mempublikasikan web atau membuat e-mail perusahaan, tentu saja yang menjadi pertimbangan adalah keunggulan yang ditawarkan. Standard umum yang membatasi sebuah paket hosting adalah jumlah space dan limit bandwidth. Namun hampir pasti semua perusahaan hosting menawarkan uptime yang tinggi bahkan memberikan garansi.

Apa Itu Hosting Uptime?
Hosting uptime adalah lama waktu sebuah server hosting dapat memberikan layanannya kepada pelanggan. Nilai uptime biasanya diukur dengan persen, misalnya 98% atau 99.99%. Uptime sering menjadi patokan kualitas sebuah web hosting, karena dengan melihat waktu uptime kita jadi tahu seberapa lama server bisa berjalan tanpa interupsi/gangguan. Semakin tinggi uptime, semakin baik pula kualitas hosting tersebut. Nilai tertinggi uptime adalah 100%, yang berarti tidak pernah terjadi gangguan pada server tersebut.

Jika uptime yang ditawarkan adalah 99% per bulan, maka berarti jika ada downtime di atas 1% x 30 x 24 jam (7,2 jam), maka Anda baru dapat mengklaim perusahaan tersebut. Web host menawarkan 99.9% uptime yang berarti tidak akan ada downtime kurang dari 2 menit perharinya.

Sebenarnya 100% adalah angka yang sangat sulit dipenuhi karena server pasti pernah mengalami gangguan. Kebanyakan provider hosting memberikan uptime 100% dalam artian mereka akan memberikan kompensasi bagi member yang pernah mengalami downtime. Misalnya website anda mengalami down selama 2 hari, maka pihak hosting akan memperpanjang masa kontrak hosting anda selama 2 hari.

Mengapa Uptime Web Hosting Penting?
Jaminan uptime layanan hosting menjadi sangat penting karena hal ini menyangkut reliabilitas layanan. Bayangkan jika pada jam kerja, kita harus mengirim atau menerima e-mail namun server hosting tersebut down? Tentu saja kita akan dirugikan.

Kebalikan uptime adalah downtime. Misalkan website Anda ternyata tidak dapat diakses selama 2 jam, berarti web hosting Anda mengalami downtime selama 2 menit.

Jenis Downtime
  • Planned Downtime (downtime terencana)
    Sesuai namanya, downtime yang akan dialami pelanggan sudah direncanakan sebelumnya. Misalkan ketika sebuah perusahaan hosting akan mengupgrade hardware server atau me-restart server karena ada upgrade software yang membutuhkan restart.
  • Semi Planned Downtime (downtime semi terencana)
    Semi Planned Downtime biasa dilakukan karena secara mendadak namun terorganisir. Misalkan web server yang digunakan memiliki versi PHP 4.x.x dan ternyata versi tersebut memiliki lubang keamanan. Maka dilakukanlah upgrade versi PHP dan selama upgrade tersebut kemungkinan layanan akan terganggu selama beberapa menit saja.
  • Unplanned downtime (downtime tidak direncana)
    Unplanned downtime biasanya disebabkan karena server overloaded kemudian mengalami hang atau beberapa masalah terjadi pada kinerja hardware seperti misalkan modul RAM rusak atau ethernet mati.

Garansi Uptime
Anda mungkin sudah sering melihat garansi uptime 99.9% yang ditawarkan oleh provider hosting. Klaim ini merupakan sarana promosi yang cukup efektif, terlepas dari benar tidaknya mereka memberikan uptime hingga 99.9%. Salah satu cara untuk membuktikan pernyataan mereka adalah Anda periksa sendiri dengan tool khusus. Atau Anda bisa meminta laporan uptime dari provider hosting bersangkutan.

Nilai uptime terkadang menyesatkan. Jika Anda melihat angka 99.9% uptime mungkin terlihat sangat tinggi. Namun itu berarti ada sekitar 1% waktu downtime. Dan jika 1% tersebut dihitung dengan basis 1 tahun (365 hari), maka akan terjadi downtime kira-kira 8 jam dalam setahun. Nilai lain misalnya, 98% uptime berarti terjadi downtime selama 7 hari dalam setahun, 99% = 4 hari downtime/tahun, 99.5% = 2 hari downtime/tahun.

Semua server pasti akan mengalami downtime, namun waktu dan frekuensinya tergantung dari jenis dan kualitas server tersebut. Perhitungan matematisnya silakan Anda lakukan sendiri. Coba Anda hitung berapa keuntungan Anda dalam sehari, kemudian kalikan dengan lama downtime dalam setahun. Maka segitulah potensi kerugian Anda. Memilih web hosting yang memiliki track record uptime buruk tidak hanya akan merugikan Anda dari segi bisnis, namun juga akan membuat visitor Anda kapok. Sekali dua kali tidak apa-apa mereka tidak bisa mengakses website Anda, namun jika terjadi berkali-kali mereka tidak akan kembali lagi.

Ketika Anda memutuskan untuk menggunakan web hosting, sebaiknya lihat dulu garansi uptime yang diberikan. Minimal perusahaan tersebut menawarkan uptime 99%, lebih tinggi lebih baik. Dan sebaiknya Anda tidak lansung percaya dengan penawaran yang diberikan. Silakan Anda teliti terlebih dahulu kebenaran penawaran tersebut, caranya adalah membaca komentar dari orang yang pernah menggunakan hosting tersebut. Jika masih belum yakin, Anda bisa membaca review dari berbagai situs review hosting. Mereka biasanya memberikan pernyataan objektif karena sudah pernah menggunakan layanan tersebut sebelumnya.

Berikut adalah beberapa hal terkait waktu uptime:
  • Berapa lama downtime masih bisa ditoleransi? Tidak ada patokan yang pasti untuk ini. Namun menurut pengalaman, jika dalam sebulan Anda mengalami downtime lebih dari 3.5 jam, itu sudah sangat buruk. Lebih dari itu sebaiknya anda bersiap untuk berpindah/migrasi hosting.
  • Masalah pada server. Sebuah server bisa mengalami kerusakan yang tiba-tiba sehingga pihak hosting perlu segera memperbaikinya. Masalah lain yang sering terjadi adalah upgrade hosting, sehingga server tersebut perlu dinonakfitkan selama proses upgrade. Jika sudah begini, mau tidak mau website Anda akan terkena imbasnya. Namun provider hosting yang baik tidak akan membiarkan kliennya mengalami down lebih dari 4 jam. Jika pun perbaikan memerlukan waktu yang lama, mereka akan mempertimbangkan untuk memindahkan klien ke server lain untuk sementara.
  • Pengembalian uang. Ada beberapa hosting yang memberikan kompensasi jika terjadi downtime. Anda bisa mempertimbangkan untuk memakai layanan hosting ini.
  • Laporan masalah. Kompensasi terhadap downtime biasanya hanya berupa pengembalian uang. Namun ada beberapa hosting yang bersedia untuk memberikan laporan spesifik tentang downtime. Ini adalah ide yang baik mengingat konsumen berhak mengetahui segala hal tentang produk/jasa yang dibelinya.

Dari jenis downtime tersebut di atas jelas bahwa sebuah web hosting tidak dapat terbebas dari downtime karena mereka harus melakukan maintenance terhadap servernya juga. Jadi ketika sebuah web hosting memberikan garansi uptime 100%, kesimpulannya hampir pasti omong kosong...

Kumpulan Link Download Software Gratis Terbaru (Antivirus, Tools, Player, Grafis, PDF, Office, Multimedia, dll)

Software gratis selalu menjadi incaran banyak pengguna komputer. Terutama karena tidak harus pusing dengan lisensi, harga, fitur-fitur yang dibatasi dan lainnya. Tetapi karena banyaknya software gratis yang bertebaran di internet, membuat kita kadang bingung atau tidak tahu mana yang aman atau belum banyak tahu mana yang bisa digunakan. Berikut daftar berbagai link software gratis:

Free Software Links

Antivirus and Antispyware

Free Firewalls

Media Players

Compression Software

Image Editing

Windows Cleaner

Audio Editing

PDF

System Information

Defrag

Audio Players

All In One Audio and Video Encoder

Mp3 Tag Editor

Registry Cleaner

Office Suites

Burning Suites

Advanced Uninstaller

Video Chat

Undelete/Recover

File Encryption for Windows

Bandwidth Monitoring and Usage Reporting

System Backup

Boot Management Software

Secure Erase Utility

Windows Driver Backup

Online Internet Safety

USB Operating System Installation

Partition Managers

Browsers

Delete Locked Files and Folders

Memory Testing Utility

Folder Synchronization Utility

Determine the size of folders and sub-folders

Desktop Sharing

Analyze Disk Space

Online Alarm Clock

Free Online URL Expander

Virtualization

Online Speed Test

Video Editor

MP3 Converter

Open Any File For FREE

Block Website Tracking

Free Portable Apps

Antivirus and Antispyware

Disk Defragmenters

Media Players

Office

File Compression

Windows Cleaners

CD DVD Burning Software

System Hardware Information

Portable Product Key Tools

Audio Editors & Converters

Video Chat

Browsers

Image Editors

Portable Audio Player

Best Free Portable Software Suite


Sumber: http://www.tomshardware.co.uk

Mengubah Style Tombol Upload (upload button / input[type=file]) dengan CSS

Bagaimana mengubah style tombol upload (upload button / input[type=file]) dengan CSS? Pada gambar berikut dapat dilihat beberapa variasi tombol upload bawaan browser. Model tombol upload berbeda-beda antara browser.


Dalam pembahasan kali ini kita akan membuat sebuah tombol upload yang menarik dan konsisten dengan CSS antara browser. Okey, langsung saja ikuti langkah berikut!

Perbedaan Cloud Web Hosting dan Shared Web Hosting Tradisional

Cloud hosting adalah sebuah solusi hosting yang amat handal, mudah untuk berkembang dengan biaya yang terjangkau. Berbeda dengan solusi hosting tradisional dalam beberapa aspek penting.

Apa itu Cloud Hosting? Cara Kerja & Kelebihannya?

Cloud hosting (hosting awan) adalah bentuk terbaru hosting yang semakin populer dari waktu ke waktu. Konsep utama dari cloud hosting adalah “Divide and Rule” yang berarti sumber daya yang diperlukan untuk menjaga website tetap online tersebar di lebih dari satu web server dan akan dialokasikan sesuai dengan kebutuhan. Hal ini akan sangat mengurangi kemungkinan terjadinya downtime saat terjadi kerusakan pada server.
Nama

Catatanku CSS Hosting Kesehatan Ragam Teknologi Website
false
ltr
index
Gampong IT - Teknologi Informasi, Pengembangan Website dan Aplikasi
Jasa Layanan Web Design, Web Development, App Development, Optimasi Server, Maintenance dan SEO
Gampong IT - Teknologi Informasi, Pengembangan Website dan Aplikasi
http://www.gampongit.com/
http://www.gampongit.com/
http://www.gampongit.com/
http://www.gampongit.com/
true
7328831568449542683
UTF-8
Tidak ditemukan artikel apapun LIHAT SEMUA Selengkapnya Balas Batal Balas Hapus Oleh Beranda HALAMAN ARTIKEL Lihat Semua REKOMENDASI LABEL ARSIP SEARCH SEMUA ARTIKEL Tidak ditemukan posting yang sesuai dengan permintaan Anda Halaman Utama Minggu Senin Selesa Rabu Kamis Jumat Sabtu Min Sen Sel Rab Kam Jum Sab Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember Jan Feb Mar Apr Mei Jun Jul Agu Sep Okt Nov Des baru saja 1 menit lalu $$1$$ minutes ago 1 jam lalu $$1$$ hours ago Kemarin $$1$$ days ago $$1$$ weeks ago lebih dari 5 minggu yang lalu Pengikut Ikuti KONTEN PREMIUM Silakan share untuk membuka Salin Semua Code Pilih Semua Code Semua kode disalin ke clipboard Anda Tidak dapat menyalin kode/teks, silakan tekan [CTRL] + [C] (atau CMD + C dengan Mac) untuk menyalin