The Woork Handbook (for Web Dev)


The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design.
Continue reading

This book is a miscellanea of articles on his blog in the past year. During the period form January to December 2008 “Woork” has been visited from over 4 millions visitors and he received a lot of requests to distribute a printable version of its contents. In the past days he worked hard to prepare a first version of this handbook and distribute it for free. The Woork is Antonio Lupetti personal website with tons of nice articels for web dev.

Download

Designdiary.org

dd2009

Akhirnya selesai juga saya me-redesign portal favorit saya, portal yang saya besarkan bersama teman-teman di komunitas digital art Jogjakarta “Jogjaforce“. Hampir kurang lebih 4 tahun portal itu bertahan dengan segala suka dan dukanya ;-).  Designdiary(DD) tidak jauh berbeda dengan portal-portal lainnya yang membedakan hanya adanya event submission untuk majalah digital yang bernama Design Flip untuk saat ini sudah mencapai edisi 4 dengan lebih dari 50 designer dari seluruh dunia yang berpartisipasi menyumbangkan karya-karya mereka. Konsep dari Designdiary adalah simpel dan open publish sehingga siapa saja boleh me re-publishnya tetapi harus mencantumkan sumbernya yaitu DD dan termasuk urlnya.

Continue reading

Pada versi yang ke 6 kalau boleh saya bilang, theme yang diangkat adalah simpel clean, black and white. Saya mencoba menggunkan theme dari Simple Balance 2.2 ( Blogsessive
) sebagai core / framework themenya selebihnya saya modif termasuk sisi right dan left sidebarnya. Simpel Balance saya suka karena ada beberapa fitur yang sudah ter integrasi semisal pemasangan ads image di sisi sidebar secara otomatis , feedburner rss integration dan lain sebagainya. Alur css dan code themenya saya sangat suka, ini kalau di lihat dari sisi teknis, mudah di pahami dan diuraikan membuat saya mudah memodifnya. Layout saya berkaloborasi dengan Theyhatemydesign.com “Amin”.

Detail :

- HTML, PHP, CSS, Javascripts (jQuery).

-Wordpress, Theme Blogsessive “simpel balance 2.2″.

Selamat menikmati ;-)

Desain footer web

Bagian footer web adalah bagian yang biasanya jarang diperhatian oleh para designer web “wah ini saya banget! he3x!”,  biasanya energi habis untuk mendisain bagian header dari web dan ketika sampai dibawah “footer” mulai deh agak lowbat. Sebenarnya bagian footer adalah bagian yang penting karena kesempurnaan dari sebuah bentuk web akan termasuk juga bagian tersebut. Informasi yang disampaikan juga ada dibagian footer, pengunjung biasanya akan mencari link untuk kembali atau mencari informasi si pemilik web, link terkait biasanya ada di bagian footer ini.

Apple Site

Continue reading

Sekarang biasanya bagian footer dipenuhi dengan logo-logo dari relasi bisnis yang biasanya berbeda-beda warna dan bentuknya sehingga kalau dalam penyesuaian tidak pas dengan layout web kita maka akan terlihat suatu yang kurang pas.  Desain dari footer tidak lepas dari pendisainan web secara keseluruhan. Ada sedikit tips yang biasa saya lakukan untuk langkah awal dalam membuat desain web.

  1. Coba buat sketsa kasar web.
    Jangan sesekali atau membiasakan membuat gambaran / sketsa web di dalam benak kita saja, tapi kalau perlu tuangkan dalam papan tulis atau pada selembar kertas, tujuannya agak kita dapat melihat secara keseluruhan bentuk dari web yang kita akan buat nantinya termasuk bagian dari footernya. Dengan demikian kita sudah membuat pemodelan secara keseluruhan dari design web yang akan kita buat.
  2. Pilih warna yang sesuai dengan gambaran web.
    Coba tanyakan ke klien atau cari refren tentang warna dan model web yang dinginkan klien, biasanya hal ini mempengruhi kita dalam mendisain web yang akan kita buat, pewarnaan bagian footer nantinya akan mudah ditentukan dengan bagian yang lainnya, biasanya saya meletakkan coorporate color pada header dan background web, selanjutnya saya menggunakan software-software kombinasi warna untuk mencari warna padanan dari warna itu untuk digunakan dalam mendisain bagian footer.
  3. Mulai membuat moockup.
    Bagian ini adalah semi final area bagi saya, why? karena pada bagian ini saya mencoba membuat desain web secara keseluruhan berdasarkan materi yang sudah didapat dan sketsa yang sudah dibuat, kombinasi warna dan sebagainya. Saya mengusahakan membuat dua desain dengan model yang berbeda dari sana biasanya saya konsultasikan dengan klien termasuk bentuk footernya, lebih banyak lebih baik tapi kebanyakan juga buat bungung klien, 2-3 model menurut saya sudah cukup.

Permainan warna pada bagian footer dibuat lebih terang tapi bisa juga gelap jika bagian atas yang lebih terang , bisa dengan degradasi dari warna background atau perpaduan dari warna – warna logo yang dipasang pada bagian footer tersebut.  Hal ini dengan tujuan agar mata pengunjuang situs sedikit rilek setelah terfocus penuh dengan bagian header dan content dari website. Penggunaan ukuran font yang besar dengan jumlah yang berlebihan pada bagian footer menurut saya tidak pas karena akan membuat terkesan layout web menjadi sempit . Tetapi bisa saja kita lepas dari apa yang saya uraikan tersebut sejauh kita mamapu mengolah layout menjadi tampak elegan dan seimbang itu lebih baik.

Link Berikut mungkin bisa menjadi inspirasi untuk mendisan bagian footer dan web ;-)

  1. 35 website footer designs, trends and styles.
  2. Modern Sitemap and Footer.
  3. 40-nice-and-creative-website-footer-designs.
  4. 40-creative-blog-footer-designs.

Selamat berkarya ;-)

Salam!

Chrome Experiments

chrome-experiments-home_1237480511961
Google has released a set of demonstrations to show the power and performance of Chrome 2.0.  This is awesome experiment with javascripts and Google Chrome, These experiments were created by designers and programmers from around the world. Their work is making the web faster, more fun, and more open the same spirit in which we built Google Chrome. Last time I was posting about javascript, it can do anything like flash effect and more, why use flash if javascripts can do it? , now Google Chroome want to show about it too. hmm…i think we must learning hard about javascripts, because next time it will make trand and use for anything in word wide web  software. Now we can look Chrome Experiments show and u can do it too.

Chrome Experiments

Why use flash if javascripts can do it?

Why use flash if javascripts can do it? , hmm, this is big mouth bro! he..he.. but wait, how about with this website, I think they are very sucessully with used the javascripts. Flash is big fenom in the webdesign world but now javascripts is too ;-), if we can make site without heavy why not? whatever..I love flash and javascripts ;-) deal!. I have 3 site with amazing javascripts and I want to share with u for inspiration in web design and dev. here they are…

  • Alex Buga – Full Site with Javascripts
  • alex-buga-webdesign-superstar

    Continue reading

  • Coda – Unique slider effect and make more inspiration
  • panic-coda-one-window-web-development-for-mac-os-x

  • SOFA – Clean site and soft javascripts effect
  • sofa-design-interfaces-software

    and up to you…use flash or javascripts

    Salam!

8 Web tutorial and resources buat para web designer dan development

Dunia desain memang sangat menarik dan penuh tantangan and yang jelas hasil baliknya tidak diragukan lagi…”fulus!” ;-). Kali ini saya akan berbagi link situs – situs refren yang suka saya kunjungi sebagai seorang web designer,  ada 8 situs yang memang menurut saya sangat bagus dan memberikan penjelasan dengan detail. Satu lagi jangan lupa untuk membookmark serta berlengganan RSS-nya. Dari ke delapan itu yang paling saya suka adalah noupe.com, karena resource sangat beragam dan selalu baru ;-) tapi yang lain juga bagus loh! he3x…saya tidak memasukkan smashingmagazine.com karena sudah amat terkenal “menurut saya loh” ..;-) berikut 8 Web tutorial and resources buat para web designer dan development itu :

  1. Noupe.com
  2. noupe

    Continue reading

Menggunakan Mootools dan JQuery bersamaan

Bulan ini saya mendapatkan sebuah pekerjaan pembuatan web dari sebuah fakultas di perguruan tinggi. Saya mencoba memberi nuansa animasi pada beberapa bagian dari web yang saya buat, seperti biasa bagian banner adalah langganan utama penggunaan efek animasi, awalnya saya ingin menggunakan flash tetapi saya ingin membuat yang lebih ringan dan benar-benar pure code no flash “so gaya!” he3x…

mootools

Continue reading

Muter-muter, browsing sana kemari dan akhirnya saya menemukan script animasi slide image dengan core JQuery yang dibuat oleh Boban Karišik seorang Web dev.  Dia memberi nama s3Slider JQuery plugin , sebenarnya script ini tidak jauh beda dengan  Smooth Slideshow v2.1
milik dari JonDesign’s.

s3Slider :

Singkat kata script pun terpasang dan animasi berjalan dengan kehendak hati, but sekarang mata saya tertuju pada bagian navigasi web alias menu, nah ini dia bagian yang tidak pernah kurang dari dua mesti lebih tapi kadang – kadang ada juga yang cuman atu he3x. Navigasi favorit saya adalah pada bentuk horizontal dan menggunakan drop down untuk sub menu alias menu anakannya, kali ini si anakan ternyata harus ber anak lagi “ampun deh” banyak bangets anaknya …., sempat puyeng juga gimana buatnya yang tidak sekedar dropdown biasa tapi pengen yang ketika dropdown ada efek smooth dan otomatis scrool up juga. Untung ada gudang bookmark dan menemukan menu yang diinginkan milik mas Jason Jeager , dia memberi nama model navigasinya dengan nama MenuMetic, kaya model sepeda motor saja, mungkin ada benarnya juga karena ada efek otomatisnya, penasaran silahkan liat disini. Scriptsnya berbasi mootools dan ketika di gabungkan dengan JQuery bencana pun tiba…he..he..he ..semua menjadi berantakan, s3Slider tidak jalan dan navigasi pun buyar yar……”aduh!”.

MenuMetic :

Selidik punya selidik dan mencoba cari tau dari bang google, bahwa ada ketidak akuran dari mootools dengan JQuery pada pemanggilan code-nya yang sama – sama menggunakan tanda “$” pada awalnnya sebagai shortcut penulisannya. JQuery menggunakan “$( )” dan si Mootools menggunakan “$” , memang dollar dimana-mana membuat masalah termasuk di coding he3x….tapi “mahal nilainya!”. Google membawa saya kesitus milik Om JQuery sendiri dan Bang Phil Tylor serta Mas “Gatot Ari Wibowo”   sebagai rujukan.

Cara pemecahan yang ditawarkan adalah :

  1. Menambahkan script jQuery.noConflict() seperti pada contoh berikut ;
    <html>
     <head>
       <script src="mootools.js"></script>
       <script src="jquery.js"></script>
       <script>
         jQuery.noConflict(); <-------------------------scipt tambahan
    
         // Use jQuery via jQuery(...)
         jQuery(document).ready(function(){
           jQuery("div").hide();
         });
    
         // Use Prototype with $(...), etc.
         $('someid').hide();
       </script>
     </head>
     <body></body>
     </html>
  2. Mengganti semua awalan “$” pada fungsi JQuery  yang kita buat menjadi “jQuery”
    Awalnya :
    $(document).ready(function(){ <———————”$”
    // Lakukan sesuatu
    });
    Menjadi :
    jQuery(document).ready(function(){ <—————————”jQuery”
    // Lakukan sesuatu
    });
  3. Jika jQuery dirasa kurang enak kita dapat mendefiniskannya menjadi “var $J = jQuery” , suka-suka sesuai keinginan kita, kala perlu pake nama kita he3x biar keyen! ….

Dan akhirnya saya dapat menjalankan mootools dan JQuery bersama-sama ;-)  dan hal ini dapat juga digunakan jika kita memasangkan Jquery dengan framework javascript lainnya seperti prototype.

Selamat mencoba ;-)

Khusus buat yang calon web designer

Sekarang kita lagi demam CPNS dimana-mana, mungkin ada yang lagi browsing sana-sini buat download prediksi soal-soalnya…bahakan sudah ada yang senang melihat namanya tertera di pengumuman penerimaan CPNS di koran – koran lokal kita, itulah sebuah ritual tahunan yang selalu di nanti-nanti para anak bangsa yang sudah lulus alias qhatam kuliah he3x…..”termasuk saya! ” ops! .

Continue reading

Tapi yang satu ini lain dari yang lain, ini kumpulan link – link yang bisa di gunakan buat para calon web designer, menurut prediksi 5-10 tahun kedepan dunia desain web tidak pernah akan habisnya, bahkan mungkin kedepan interface fungsi dari lemari pendingin kita akan berbasis web ‘wah!, bayangkan kalau kita tidak hanya mendisain halaman web tetapi semua interface alat-alat elektronik dirumah kita, kenapa tidak? hal ini disebabkan karena alat-alat elektronik kedepan akan menggunakan singel ID / MAC address yang uniqueberkat ditemukannya peng codean IP berbasis IPv6 yang lebih luas rangenya.

Ok, kembali ke si link, web yang menyediakan link ini adalah “For Web Designers” Site, nah dari namanya saja sudah jelas kan,  mulai dari tentang ajax, theme, css, html dan sebagainya ada disana ;-), silahkan di bookmark deh “gratis ….tis!, mungkin itu dulu ya!

“jadi webdesigner …sapa takut ?” mau?

Mengambil halaman web secara penuh menjadi PNG atau JPG

Sebagai seorang web designer , pastilah kebiasaan mengumpulkan situs-situs dengan tampilan yang menarik dan bagus untuk inspirasi tidak akan dilewatkan. Hal itu terjadi pada diri saya, aplikasi SnagIt memang sudah terkenal lama dengan segala macam fitur yang disediakan tetapi apliaksi ini bisa dikatakan memakan ruang harddisk yang cukup besar kurang lebih sekitar 21.96 MB, belum lagi sources memori yang akan di gunakan ;-). Tapi memang hutan belantara dunia maya tidak pernah berujung dan banyak sekali suber daya yang kita gunakan “weh..bahasanya boss!”.

Continue reading

Mozilla sebagai sebuah raksasa browser yang terus bertanding denga IE memang sangat kaya dengan fitur-fitur yan bisa di tambahkan disana, hal ini akibat dukungan dari opensource yang di adobsinya, sebuah add-on yang dengan nama Screengrab merupakan add-on yang menurut saya perlu dipasang di browser Mozilla FireFox, dengan size kurang lebih 44,4kb add-on ini sanggup mengcapture halaman web yang kita ingin ambil ….hmmm bayangkan dengan ukuran sangat kecil dari SnagIt tetapi memiliki tujuan yang sama namun demikian snagit mungkin fiturnya lebih dari Screengrab. ;-).

So bagai mana cara menggunaknnya?,

  1. Syarat yang harus ada adalah browser Mozilla FireFox harus sudah terpasang di sistem oprasi kita minimal versi 2.0 – 3.0+
  2. Setelah itu ada dua cara untuk menginstallnya yaitu install on fly “langsung” dan tidak langsung “bingung kan!”…
  3. Biar gak bingung kita pake yang cara on fly dulu, yaitu coba akases alamat dari addon screengrab ini
  4. Selanjutnya klik satu kali bottom “Add to Firefox”. dan tunggu perintah selanjutnya
  5. Akan muncul sebuah popup seperti gambar berikut, dan kilk “Install” setelah hitungan mundur yang tertera berakhir.
  6. Maka secara otomatis akan terlihat disisi kiri browser kita akan muncul status instalasi Add-on
  7. Jika sudah selesai maka kita akan diminta untuk merestart Mozilla Firefox kita maka selesailah instalasi screengrab kita ;-)
  8. Untuk yang manual adalah dengan mendownload dulu add-on tersebut yang berekstensi .xpi.
  9. Setelah terdownload maka kita install dengan cara klik “File” —> “Open File” —-> arahkan ke file screengrab!-0.95-fx.xpi dan akan muncul proses yang sama dengan yang diatas ;-) ( versi saat saya menginstall sudah versi 0.95 yang kompetiable dengan FF3 )
  10. Jika sudah selesai terinstal maka saatnya kita mengcapture halaman web yang kita inginkan ;-)
  11. Misal pada kasus ini saya membuka halaman ke sukaan saya www.designdiary.org dan perhatikan di sisi kanan bawah browser kita ada icon screengarb seperti gambar berikut :
  12. icon berupa bola dunia yang ada foldernya adalah icon dari screengrab, kita klik kiri

    dan pilih “save” –> “complete page/frame” –> save as –>namafile yang kita inginkan

  13. Maka bimsalabin halaman web akan tersimpan dalam format png secara sempurna ;-)
  14. Untuk merubah format file capture kita silahkan pilih pada menu option yang ada pada Addon screengarb setelah firefox kita restart
    klik “Tool” —>”Add-ons”(Ctrl-Shift-a) —–>akan muncul seperti gambar berikut  :
  15. Pilih Option dan tentukan jenis formatnya .PNG atau .JPG
  16. Mudahkan, selamat mencoba.
    ini adalah hasil capture saya terhadap halaman web designdiary.org