Cara install Sass – Scss di windows

Sebelum melakukan instalasi sass, anda harus mendownload aplikasi ruby terlebih dahulu. untuk mendapatkannya anda bisa mendownload melalui link dibawah ini :

http://www.4shared.com/file/jcVQwO8uce/rubyinstaller-231.html

jika sudah didownload buka insall program ruby.exe. ikuti langkah-langkah instalasi seperti pada aplikasi pada umumnya. jika sudah selesai, buka program command line.

lalu ikuti langkah-langkah seperti dibawah ini.

ketik

gem install sass

jika error install sass, maka ketik perintah

gem sources-a http://rubygems.org/

dan ketik y

setelah itu, ketik kembali

gem install sass

jika ada progress instalasi hingga 100%, berarti sass sudah berhasil di install, untuk memeriksanya, ketikkan

sass –version

untuk aplikasi tambahannya, yang nanti akan dibutuhkan ketika membuat scss. download aplikasi scout app, di link berikut :

http://www.4shared.com/zip/0Na5HnGNce/scout-app-071-win.html

selesai semoga bermanfaat. wassalam

 

Apa itu parallax dalam istilah web ?

Parllax adalah sebuah istilah yang penjelasannya kurang lebih seperti ini, ketika kita menscroll halaman sebuah web, dimana ada sebuah bagian web dan dibelakangya terdapat background gambar, apabila kita mencsroll ke bawah atau ke atas gambar di belakang ikut tersecroll namun pergerakannya lebih lambat dari pada bagian depannya. sehingga menimbulkan sebuah perspektif atau kesan pemandangan yang menarik, seperti kita melihat pemandangan objek gunung atau pohon dalam sebuah jendela mobil yang berjalan.

Adapun kode untuk membuatnya adalah seperti berikut :
Kode HTML

< div class="header">
Header text, logo, dll
</div>

Kode CSS

.header {                
        background:url("images/bg.png") no-repeat center center fixed;
        background-size: cover;
        background-repeat: no-repeat   
    }    

Kode JQuery

    // Y axis scroll speed
        var velocity = 0.5;

        function update(){ 
            var pos = $(window).scrollTop(); 
            $('.header').each(function() { 
                var $element = $(this);
                // subtract some from the height b/c of the padding
                var height = $element.height()-18;
                $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px'); 
            }); 
        };

        $(window).bind('scroll', update);        
    

Trend Design Website 2016

1. Gambar Layar Penuh

Posisi di simpan dibawah header menu navigasi, untuk mempercantik pada gambar ditambahkan sinematografi, animasi sedikit agar terlihat hidup.

2. Layout terbagi dua (split-screen)

Selain gambar full, pada bagian ini dalam satu layar terbagi dari dua gambar, dimana masing-masing gambar tampil secara bergantian.

3. Warna Monochromatic

Warna yang cerah dengan background gambar gelap, sehingga terlihat cerah dan jelas pada text dan tombol.

4. Menu Navigasi

Petunjuk navigasi berada diatas menjadi prioritas. Simpan pada posisi yang biasa di pergunakan pada umumnya agar mudah user mencari, dan tampilan yang sederhana namun menarik.

5. Minimalis Tampilan

Untuk interaksi dengan website, agar tidak terlihat ngejelimet, tampilan usahakan minimalis atau lebih disederhanakan. Penggunaannya seperti pada pengisian form input pedaftaran atau semacamnya.

6. Video

Untuk lebih menarik website ditambahkan video pada halaman. Kebutuhan seperti untuk demo video dan semacamnya.

7. Sticky Component Web

Agar mempermudah user melakukan aksi, ada componen seperti menu navigasi yang selalu muncul walaupun di scorll kebawah.

8. Card Model

Model seperti gambar dimana terdapat gambar, judul dan text.

9. Single Colomn

Bagian ini biasanya terdiri dari judul, sub judul dan tombol.

10. User Experience

Pada website ditambahkan fungsi untuk menyimpan informasi kebiasaan-kebiasaan user dan mengolahnya agar bisa memberikan nilai lebih dan tepat berdasarkan kebutuhan user tersebut. contoh web seperti amazon dot com.

3 Komponen untuk membuat desain web yang mengesankan

Ada tiga komponen yang dapat dijadikan acuan dalam membuat sebuah website agar terlihat begus, yaitu typography (font), warna (color), dan trend design terkini.

 

 

Typography (fonts) adalah bagaimana kita menggunakan jenis huruf yang sesuai dengan sebuah tema website yang akan di bangun. biasanya terdapat 2-3 jenishuruf yang digunakan dalam sebuah website. satu jenis untuk judul, satu untuk button, dan satunya untuk content.

 

Warna (color) adalah bagaimana mengatur komposisi warna agar dapat menyampaikan pesan dan kesan yang tepat terhadap pengunjung. warna dapat menimbulkan emosi psikologi terhadap pengunjung web. sebagai contoh warna biru meninggalkan kesan corporasi dan kalem, pink meninggalkan kesan kehangatan atau bisa juga kasih sayang, hijau untuk kesan natural, organic atau kesehatan, dst.

 

 

Trend design adalah menggunakan model-model website terbaru yang uptodate saat ini, dengan demikian website yang akan dibangun tidak terlihat kadaluarsa. saat ini model trend design adalah tidak hanya untuk pc atau komputer , namun harus dapat mencakup device handpohone, atau istilah kekinian adalah responsive. dimana responsive merupakan proses dimana tampilan akan dapat menyesuaikan dengan sendirinya berdasarkan ukuran layar.

 

 

Demikian untuk gambaran konsep componen yang bisa kita jadikan perhatian pada saat membangun sebuah website.

Terimakasih.

 

Pendekatan Tiga Prinsip Dalam Web Design

 

Sebetulnya tidak ada rumus formula yang dapat digunakan untuk membuat sebuah website yang bagus. Namun, ada beberapa usaha pendekatan yang dapat kita gunakan agar sebuah design web tersebut lebih baik, seperti pendekatan tiga prinsip dalam mendesign sebuah web berikut :

Mudah di gunakan
Mudah untuk menemukan apa yang di cari dan dibutuhkan oleh pengujung.

Berfungsi dengan baik
Feature yang terdapat dalam sebuah website dapat digunakan dan tidak bermasalah.

Dibuat bagus dan dapat menginspirasi
Web bisa menarik dan disukai pengunjung.

point diatas mungkin hanya sebagian kecil dari point-point lainnya. demikian semoga bisa menjadi pengetahuan anda.

wassalam.

Coretan Seputar Web Design

Web design adalah usaha untuk membuat user pengunjung merasakan nyaman ketika menggunakan website anda. Siapa saja bisa membuat website, namun untuk hasil yang bagus belum tentu bisa.

Proses pembuatan sebuah web site untuk user interface yang bagus tidak lah mudah dan di perlukan beberapa proses atau tahapan, yang masing-masing biasanya di lakukan oleh orang-orang yang berbeda dengan keahlian-kehalian tertentu. Semakin banyak tenaga ahli yang terlibat dalam pembuatan sebuah website, maka kemungkinan semakin bagus pula kemungkinan hasilnya.

Namun tidak menutup kemungkinan pembuatan sebuah website atau web design dilakukan oleh satu orang dan belum tentu hasilnya tidak baik. Kembali kepada hasil karyanya.

Cara membuat css agar background gambar tidak ikut scroll (fixed) website

Setiap halaman website dibuat sebagus mungkin agar menarik para pengunjung. salah satu cara agar website tampil bagus adalah dengan menambahkan background gambar di belakang halaman. cara yang digunakan untuk menambakannya adalah dengan menggunakan kode css (bagi yang baru kenal css, silahkan searching di google apa itu css).

Biasanya dihalaman website background gambar ikut terbawa scroll ketika di geser. Namun, Bagaimana caranya agar gambar background gambar ini tidak ikut kebawa scroll ketika halaman di geser ke bawah. caranya adalah dengan menambahkan kode css dihalaman tersebut seperti cuplikan kode berikut .

 

body {
background: url(./images/endang_bg.jpg) no-repeat;
background-size: 100% 100%;
background-attachment:fixed;
}

untuk kode

url(./images/endang_bg.jpg)

disesuaikan dengan gambar dan lokasinya berada.

background-size: 100% 100%;

supaya ukuran gambar lebar dan tingginya full halaman.

background-attachment:fixed;

adalah untuk gambar background tidak bergeser.

 

demikian penjelasan dari saya semoga sukses, wassalam.

 

Kumpulan template web responsive untuk administrator

Ketika membuat sebuah website yang berkaitan dengan halaman belakang atau administrator, sering dihadapkan dengan permasalahan rancangan layout halaman admin, yang dimana programmer atau designer harus memeras otak dan memerlukan waktu pengerjaan untuk membuatnya dan mendapatkan hasil yang bagus dan user friendly sebelum masuk ke langkah pengkodean proses.

Namun hal tersebut dapat diselesaikan dengan cara menggunakan template admin yang sudah ada. Berikut adalah beberapa web template responsive untuk admin atau backend yang berhasil di kumpulkan dari berbagai referensi.

http://www.4shared.com/zip/DDNRmJmpba/AdminLTE-233.html

http://www.4shared.com/zip/6RN7TJqxce/AdminLTE-master.html

http://www.4shared.com/zip/ReATa8mCba/template-webbdg.html

semoga bermanfaat.

Membuat favicon.ico dengan mudah secara online

File .ico ialah sebuah ekstensi file gambar yang digunakan untuk icon. File ico banyak di gunakan seperti pada website dengan nama file favicon.ico nya ataupun icon pada software-software dan juga folder.

Adapun ukuran dan bit pixel yang tersedia adalah sebagai berikut.

Ukuran
16 pixels
32 pixels
48 pixels
64 pixels
128 pixels
256 pixels (only works with 32 bits)

Bit depth
8 bits (256 colors, palette)
32 bits (16.7M colors & alpha transparency)

Pada sebuah website favicon.ico akan muncul di bagian atas atau tab, bersebelahan dengan nama judul web atau title.

Dalam membuat file .ico terdapat bergai cara, bisa melalui paint microsoft, adobe atau melalui bantuan website converter secara online. Anda tinggal mencari cara-caranya di google satu persatu. Kemudian bandingkan mana yang lebih mudah.

Salah satu cara yang akan di uraikan berikut ini adalah dengan cara conversi file secara online melalui sebuah website converter icon yaitu www[dot]icoconverter[dot]com.

Sebelum masuk ke web converter, hal yang perlu disiapkan adalah file gambar untuk icon tersebut, bisa dalam format PNG, JPEG, GIF, BMP, dll. Karena ini converter, maka prosesnya adalah merubah gambar dari satu format ekstensi ke format ekstensi icon.

kemudian buka alamat www[dot]icoconverter[dot]com, setelah itu masukan file , dan tentukan ukuran file.icon, kemudian tekan tombol convert. Maka selanjutnya file akan di conversi oleh website, dan file icon tersebut bisa di download dengan nama file favicon.ico. cukup mudah dan cepat.

selesai.