Tutorial Web Design Indonesia

1. WhatFont

What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

  

Yang terakhir ini sebenarnya sudah pernah saya bahas di postingan Kode Warna HTML


Itulah postingan saya mengenai "5 Add On Penting Untuk Desainer Web" mudah-mudahan bisa bermanfaat untuk teman-teman sekalian, jika ada pertanyaan silahkan tinggalkan komentar anda disini

1. Adobe Edge Inspect

Download Ebook Photoshop Bahasa Indonesia




Dilansir dari official website nya sendiri sebenarnya photoshop idel digunakan untuk :
1. Perancang Grafik (graphic designer)
2. Fotografer
3. Perancang Web (web designer)
4. Penyedia layanan cetak (print service provider)

1.     3owl

• 100% Free Php Web Hosting.
• Unlimited Disk & Bandwidth.
• No hidden fees.
• No Forced Ads. 
• Wordpress, Php & MySql support.
• Dll. 

2. 000webhost.com

• 1500 MB of Disk Space
• 100 GB Bandwidth
• Your own domain hosting
• cPanel Control panel
• Website Builder
• Over 500 website templates ready for download
• Free POP3 Email Box and Webmail access
• FTP and Web based File Manager 
• PHP, MySQL, Perl, CGI, Ruby. 
• No Ads at all !

3. 1freehosting

    

• 10.000 MB disk space
• Bandwidth limit 100,000 MB/month.
• cPanel control panel, Fantastico.
• MySQL 5 Databases Server.
• Addon domains.
• Web File Manager.
• POP3 email, IMAP, WebMail Access (RoundCube, SquirellMail), Mail forwarding.
• Custom Cron jobs support.
• Customisable Error Pages.
• Parked domain names allowed.
• Weekly backups.
• .htaccess supported.
• Web SSH console.
• Hotlinking protection.
• Free website builder and publisher with profesional web design templates.
• ionCube Loaders.
• Zend Optimizer.
• SpamAssasin Protection.
• Password protected directories.
• IP address deny Manager.
• FreeHosting on Dual Quad Processor Performance Linux Servers.
• No Ads and allowed your ads

4. byethost.com

• 1000 MB (one gigabyte!) Disk Space
• FTP account and File Manager
• Control Panel
• MySQL databases & PHP Support
• Free tech support
• Addon domain, Parked Domains, Sub-Domains
• Free Community Access (Forums)
• Clustered Servers
• No ads!

5. zymic.com

• Disk Space 6000MB
• Data Transfer (Monthly)50GB
• Number Of Accounts Unlimited
• FTP Access Yes
• AdvertisementsNo

6. Offest.net

• 300 MB disk space
• 10.000 Megabytes of bandwidth
• 5 Add-on domains
• 5 Sub domains
• PHP with MySQL databases
• PHP Flags manager
• FTP account
• File manager
• Webmail, POP3 email
• MYSQL, Php MyAdmin

7. Idhostinger

Nah ini salah satu penyedia web hosting yang pernah saya coba, selain simple dan gak pake ribet layanan yang diberikan sangat-sangat ekslusif untuk ukuran gratisan. Tampilan website yang menarik dan mudah digunakan, bahkan ada domain gratis segala loh! serukan :) 

• Space 2GB
• Bandwidth 100GB
• PHP dan MySQL
• Site Builder
• Tanpa iklan atau banner
• Dll.

8. serversfree.com

• Any hidden costs or price?
• No ads!
• 100 GB Bandwidth
• 100 GB Disk space
• Unlimited Addon domains
• 5 Email accounts
• 5 FTP accounts
• 5 MySQL database
• 5 Free Subdomains
• 5 Parked domains
• Website builder, Templates
• PHP5, cPanel, cURL, Backups & more

Banyak yang kebingungan mengenai kode warna di html ketika membangun sebuah website. Apa perlu kita menghapal semua kode warna di HTML? saya jawab tidak perlu. Mengapa? karena otak kita tidak akan mampu menghapal semua kode warna, kecuali kalo memang anda genius dan mempunyai IQ diatas 180 wow banget lah. Dan kalaupun kita genius kayaknya kode warna itu gak perlu dihapal juga deh, sayang itu memori otaknya. Nah untuk mengatasi keterbatasan kita, bisa digunakan menggunakan bantuan add on atau tabel kode warna html. Mari kita bahas satu persatu :)

1. Menggunakan add on

Cara mudah untuk mengetahui kode warna html adalah dengan menggunakan add on,  banyak add on yang mampu menampilkan kode warna dari suatu halaman website, baik itu font color, background, atau bahkan kode warna di sebuah gambar. Salah satu add on chrome dan mozilla  andalan saya adalah ColorZilla. Saya suka dengan colorzilla karena mempunyai fitur-fitur yang mengasyikan, salah satunya adalah fitur color picker seperti yang ada di fitur photoshop. Dulu ketika saya belum mengenal colorzilla kerjaan saya adalah, print screen contoh warna dari web browser lalu di inspect warnanya menggunakan photoshop. Lumayan sangat menyita waktu, dan lumayan membuat saya cukup kesal karena harus bulak balik dari web browser, paint , lalu ke photoshop. Kalo sekarang sih tinggal buka aja melalui web browser. Kita cari warna yang enak dilihat, lalu tinggal klik colorzilla dan taraaaaaa udah dapet deh tuh warnanya. Salah satu tempat favorit saya untuk mencari inspirasi warna adalah di dribbble.com

Di website pengembangnya disebutkan bahwa colorzilla :

ColorZilla untuk Google Chrome adalah ekstensi yang membantu pengembang web dan desainer grafis dengan tugas-tugas terkait warna - baik dasar dan lanjutan.

ColorZilla termasuk Color Picker, Eye Dropper, Gradient Generator dan banyak tambahan alat warna maju.

Dengan ColorZilla Anda bisa mendapatkan bacaan warna dari setiap titik di browser Anda, cepat menyesuaikan warna ini dan tempel ke program lain. Anda dapat menganalisis halaman dan memeriksa palet warnanya. Anda dapat membuat canggih multi-berhenti CSS gradien. 

Bagi yang berminat silahkan download di http://www.colorzilla.com/chrome/


2. Tabel Kode Warna

 Cara kedua ini menurut saya kurang efektif bagi profesioal, tapi untuk seorang nubie cara ini cukup membantu kita kok. Hanya saja pilihan warna nya itu statis tidak bisa kita merubah sendiri. Untuk penggunaannya kita cukup menambahkan kode '#' didepan kode angka , contohnya jika ingin menggunakan warna putih kita bisa menggunakan '#FFFFFF' . Hanya saja tabel kode warna html ini , cuman kita gunakan ketika baru-baru saja. Ketika sudah mahir gunakan lah add on atau di photoshop juga ada tuh modul untuk inspect warna nya.

Itulah tentang bahasan kode warna html mudah-mudahan bisa membantu, jika ada pertanyaan silahkan memberikan komentar.  
        

Hari ini saya akan membagikan 40 icon social network flat design secara gratis , lagi-lagi flat design ya? hehehehe memang design satu ini sangat booming di tahun 2013.

 Oke kembali ke topik utama kita, berikut 8 inspirasi website flat design pilihan saya :

1. MIXD



5. Sebastiano Graliilli


6. INC

7. Unroll

8. Playground Inc.


Itulah 8 inspirasi website flat design yang bisa saya berikan kepada teman-teman,mudah-mudahan bisa membantu. Jika ada yang ingin ditanyakan silahkan tinggalkan komentar :)

Hai setelah lama tidak membuat postingan baru, kali ini saya akan membagikan 5 tutorial animasi keren html5. Banyak sekali yang bisa kita lakukan hanya menggunakan bahasa HTML5 , mau tau? oke mari kita langsung lanjut aja ke tutorial-tutorialnya :)

1. Membuat Persentasi Kreatif Menggunakan HTML5

    Ini sangat membantu para mahasiswa , atau pekerja kantor pada saat melakukan persentasi ke dosen atau ke klien. Kita mempunyai nilai lebih jika kita membuat persentasi menggunakan HTML5 , kenapa? karena baik dosen atau pun klien akan terpukau dengan persentasi kita. Ada nilai plus dari orang yang melihat hal yang tidak biasa, power point mah lewat :p . Tapi ada sayangnya nih  bagi para pengguna apple sangat disayangkan tutorial ini tidak bisa digunakan, jika menggunakan browser safari. Browser yang support atau mendukung adalah mozilla firefox dan google chrome. Tampilan dari persentasi ini pun mudah untuk di custom bagi yang penasaran  silahkan pelajari dan download tutorialnya disini Persentasi HTML5

2. Drag dan drop photo 
   Jaman sekarang ini fungsi yang canggih dan mudah digunakan sudah menjadi ukuran standar dari para pengguna bagi developer. Menagapa tidak, coba kita perhatikan dengan seksama bagaimana mudahnya menggunakan android dan iphone. Gadget tersebut mudah digunakan , namun mempunyai fitur yang sangat sangat canggih. Bahkan diawal kehadiran iphone dan selanjutnya di ikuti oleh android, hampir semua calon pembeli merasa tidak percaya dengan apa yang mereka lihat. Bayangkan saja hanya ada satu tombol di dalam gadget tersebut. Nah sama halnya dengan kita sebagai front end developer dibuthkan mata yang jeli untuk membuat aplikasi yang bisa memudahkan para pengguna. Aplikasi yang diminati oleh pengguna salah satunya adalah yang berkaitan dengan foto, tau kan gimana narsisnya anak muda di negeri kita ini ?

Sekarang silahkan pelajari tutorial drag and drop photo mudah-mudahan bisa membantu teman-teman sekalian.

3. Membuat Animasi Jam Menggunakan HTML5
Pasti sudah mafhum dan paham sama jam kan? langsung aja gak usah panjang lebar ya cek tutorialnya disini Animasi Jam    

Itulah 3 tutorial yang saya dapatkan dari blognya mas andrew , mudah-mudahan bisa bermafaat dan membantu untuk teman-teman semua. Perlu saya beritahukan bahwa jika teman-teman mau mem-publish ulang tutorial ini harap sertakan sumbernya, karena license itu sangat sensitif.

Jika memang pilihan teman-teman lebih memilih menggunakan CMS tidak ada salahnya, yang menjadi akar permasalahan adalah kemampuan kita dalam meng-custom web. Minimal kita perlu memahami HTML dan CSS, jika sudah paham segera belajar juga HTML5 dan CSS3 lalu lanjut ke javascript dan terakhir responsive design.