Tuesday, December 18, 2012

Cara Optimalkan Website Untuk Pengguna Tablet dan Smartphone


Tablet dan Smartphone
Cara Optimalkan Website Untuk Pengguna Tablet dan Smartphone
Perangkat mobile seperti Smartphone, dan terutama Tablet, sekarang cepat menjadi memuncak dan lebih populer,meskipun tepat menggantikan desktop, mereka tampaknya akan mendapatkan di atas statistik browser. Sekarang, mereka memiliki lebih dari 10% saham, dengan Tablet hampir sama digunakan sebagai smartphone. Hal ini membuat mengoptimalkan website untuk perangkat mobile semua lebih penting. Namun pengguna tablet sekarang tidak ingin Anda untuk mengembalikan versi mobile dari situs Anda kepada mereka. Mereka ingin pengalaman desktop. Tetapi meskipun tidak ada pedoman resmi dari Google untuk menciptakan mesin pencari dan user friendly tablet-dioptimalkan situs, ada beberapa tips yang bisa Anda terapkan untuk membuat situs Anda bekerja di berbagai platform.
Smartphone sering memiliki layar kecil (meskipun resolusi tinggi). Jadi tidak apa-apa untuk mengembalikan versi mobile dari situs Anda kepada mereka. Tapi bagaimana dengan tablet? Tablet memiliki layar yang jauh lebih besar, dan 
 mereka telah mendapatkan perangkat keras cukup canggih, sehingga dapat sejajar dengan komputer. Jadi bagi mereka, kaya-desktop versi website hanya dengan mudah dikelola seperti pada desktop sendiri.

Membuat website dari Tablet
Salah satu cara yang baik untuk mengoptimalkan situs Anda untuk perangkat yang berbeda adalah dengan menggunakan desain web responsif. Karena ada begitu banyak tablet di luar sana, dan ukuran layar begitu banyak, Anda tidak bisa hanya menargetkan situs Anda di hanya satu ukuran layar. Di sinilah desain web responsif membantuResponsif desain ulang menyesuaikan diri sesuai dengan ukuran layar pengguna. Jadi mereka akan terlihat bagus di beberapa platform.

Cara lain adalah untuk menciptakan beberapa versi dari situs Anda, dan kemudian mendeteksi platform pengguna sebelumnya. Anda kemudian dapat mengarahkannya untuk versi yang sesuai dari situs Anda. Pengguna smartphone beranjak ke versi mobile, sedangkan pengguna tablet beranjak ke desktop one.


Mendeteksi Platform
Untuk mendeteksi apakah pengguna memiliki tablet atau smartphone, Anda perlu melihat string user-agent dikembalikan melalui browser. Pengguna ponsel memiliki kata kunci *Mobile* di dalamnya. Tablet tidak. Berikut adalah contoh string dikembalikan oleh Chrome pada smartphone.
Mozilla/5.0 (Linux; Android 4.1.1; Galaxy Nexus Build/JRO03O) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19
 Demikian juga dengan Firefox, inilah string yang dikembalikan oleh Firefox pada smartphone.
Mozilla/5.0 (Android; Mobile; rv:16.0) Gecko/16.0 Firefox/16.0
Seperti yang Anda lihat, keduanya memiliki kata kunci *Mobile* di dalamnya. Sebaliknya, lihatlah string yang dikembalikan oleh sebuah tablet Android dari Chrome.
Mozilla/5.0 (Linux; Android 4.1.1; Nexus 7 Build/JRO03S) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19
 Dan dari Firefox:
Mozilla/5.0 (Android; Tablet; rv:16.0) Gecko/16.0 Firefox/16.0
Seperti yang Anda lihat, tidak ada  kata kunci *Mobile*  untuk Tablet. Anda kemudian dapat menggunakan beberapa program untuk memeriksa kata kunci ini dalam string, dan kemudian kembali  sesuai website masing-masing.

Monday, December 10, 2012

Cara Membuat Animasi Gif Loading Dari Photoshop



Cara Membuat Animasi Gif Loading Dari Photoshop
Cara Membuat Animasi Gif Loading Dari Photoshop
Dengan meningkatnya popularitas aplikasi AJAX, kita telah melihat seseorang membuat animasi GIF serupa di seluruh web yang menggunakan AJAX dalam peroses pembuatan animasi. Dalam tutorial ini, Anda akan belajar cara membuat animasi gif seperti seseorang yg profesional.

Contoh ini dibuat dengan Adobe PhotoShop CS3, yang memiliki fitur animasi built-in, tidak seperti versi PhotoShop yg dikemas dengan ImageReady.

Kita mulai dengan kanvas kosong sekitar 200x100px. Kami akan membuat layer baru dan pilih alat Marquee, dan pada toolbar untuk tenda, mengatur Gaya untuk Ukuran Tetap, Lebar: 4px dan Tinggi: 20px:
Cara Membuat Animasi Gif Loading Dari Photoshop

Sekarang kita bisa klik pada kanvas dan memilih dimensi-dimensi yg akan kita dibuat:
Cara Membuat Animasi Gif Loading Dari Photoshop

Dalam layer baru kita akan mengecat bagian seleksi dengan warna hitam:
Cara Membuat Animasi Gif Loading Dari Photoshop

 Sekarang klik kanan layer dan Duplicate Layer. Pilih Move tool, tahan Shift dan tekan tombol panah bawah empat atau lima kali - pergeseran akan memindahkan lapisan secara bertahap. Kami sekarang harus memiliki dua lapisan seperti di bawah ini:
Cara Membuat Animasi Gif Loading Dari Photoshop


Dengan lapisan aktif atas, tekan Ctrl + E untuk menggabungkan bawah - menggabungkan dua lapisan garis bersama-sama. Sekarang klik kanan layer dan Gandakan. Goto Edit> Transform> Rotate, dan menahan tombol Shift, memutar lapisan digandakan seperti jam di bawah ini:
Cara Membuat Animasi Gif Loading Dari Photoshop

Menahan Shift akan berputar pada peningkatan. Pilih Move tool untuk membuat perubahan. Sekarang ulangi proses ini duplikat kemudian putar untuk mengisi semua celah seperti di bawah: mungkin lebih baik untuk membri tanda saat Anda menduplikasi, sehingga Anda dapat melacak yang mana2 yg telah anda beri perubahan.
Cara Membuat Animasi Gif Loading Dari Photoshop

Sekarang kita harus memiliki 12 lapisan terpisah untuk masing-masing jari jari. Selanjutnya, kita akan mewarnai mereka.
Dimulai dengan yang pertama, membuka gaya layer dan menambahkan overlay warna abu-abu terang. Anda mungkin ingin memperbesar untuk melihat lebih jelas.
Cara Membuat Animasi Gif Loading Dari Photoshop

Sekarang klik kanan layer kamu hanya menambahkan gaya dan pilih Copy Layer Style, kemudian lanjutkan untuk Paste Layer Style pada masing-masing lainnya, seperti di bawah:
Cara Membuat Animasi Gif Loading Dari Photoshop

Sekarang mari kita membuka Jendela Animasi dengan pergi ke Window> Animation. Anda akan melihat sesuatu seperti ini:
Cara Membuat Animasi Gif Loading Dari Photoshop

Ini adalah timeline animasi kita. Setiap frame yang ditunjukkan di sini akan bermain untuk sejumlah settingan detik. Kami ingin menciptakan frame yang berbeda dengan warna yang berbeda di jari jari, secara berurutan.
Jadi mari kita mulai dengan mengubah warna dari tiga jari pertama. sekarang kita mengubah warna dari tiga jari pertama seperti ini, memudar dari cahaya abu-abu ke gelap. Warna-warna yang kami gunakan adalah # Bababa untuk pertama, # 999999 untuk kedua, dan # 444444 untuk ketiga:
Cara Membuat Animasi Gif Loading Dari Photoshop

baik,sekarang kita memiliki frame pertama. Sekarang mari kita klik pada tombol Bingkai Baru, dan frame kita akan diduplikasi. Memastikan bingkai kedua telah dipilih, mari kita mengubah warna lagi kita dapat menyalin gaya lapisan jika kita ingin memindahkan warna sepanjang satu detik:
Cara Membuat Animasi Gif Loading Dari Photoshop

Setelah kita selesai, kita harus memiliki waktu yang terlihat seperti ini:
Cara Membuat Animasi Gif Loading Dari Photoshop

Kita dapat mengklik tombol play di bagian bawah jendela animation untuk melihat pratinjau. Jika animasi terlalu lambat, kita dapat mengubah durasi di sudut kanan bawah setiap frame. Ini menentukan durasi untuk setiap frame yang akan terlihat. Mari kita coba 0.1sec. Tahan Shift dan pilih semua frame di jendela, kemudian pilih 0,1 detik (atau memilih lain dan mencoba 0,05 - atau apa pun yang Anda inginkan) pada salah satu dari mereka. Hal ini akan mengubah semua dari mereka, karena mereka semua dipilih.
Cara Membuat Animasi Gif Loading Dari Photoshop

Untuk menyimpan, go to File> Save for Web & Devices. Pilih GIF dari menu dropdown - 128 menjadi kualitas terbaik. Dan Anda juga dapat melihat di sini juga, dengan menggunakan tombol kontrol dekat bagian bawah:
Cara Membuat Animasi Gif Loading Dari Photoshop

Akhirnya,ini lah animasi gif loading seperti di bawah ini:
Cara Membuat Animasi Gif Loading Dari Photoshop