HTML5 For Web Designers

by Jeremy Keith

The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice.

HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers?

In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.

Continue reading

Topics Covered Include:

  • The road from XHTML to HTML5
  • Design principles of HTML5
  • Syntax: marking it up your way
  • Web Forms 2.0—sliders and spinners and color pickers, oh, my!
  • Canvas: drawing with code
  • Audio and video
  • Semantics and extensibility: microformats and boiling the ocean
  • New and changed HTML elements
  • New structure elements
  • New content models
  • ARIA, styling, and validation
  • Using HTML5 today—tactics and strategy
  • Shiny new toys: JavaScript APIs
  • Feature detection
  • The future of HTML5

price :

$18.00 + shipping

order

Free HTML5-CSS3 Template from 52FrameWork


52framework is a complete tool to help you start building with HTML5 and CSS3.
Continue reading

  1. With the use of new tags
  2. Input fields,
  3. rounded-corner
  4. text-shadows
  5. and  more.

It includes a grid system and CSS reset (that is modified for HTML5).
Demo: http://demo.52framework.com/
Download 52FrameWork: http://52framework.com/downloads/

Sebelum Belajar Membuat Web

Saya suka di tanya sama teman-teman atau para peserta workshop saya , “mas belajar web site dari internet dimana ya?” atau “mas punya sources untuk belajar web?” padahal simpel saja jawabnya ” buka google.com dgn key “web site tutorial” atau “belajar web”” pasti akan dapat ratusan link tentang hal itu ..:-), tapi kalau itu mah bukan jawaban yang baik…suatu saat saya akan di balas sama orang lain juga nantinya kalau saya menanya sesuatu ..dengan jawaban yang sama…curiga pas saya nanya “mas tau jalan ini gak?” dan bakal di jawab tanya aja dengan google.com dengan kata kunci naman jalan itu…huahuahuahua…apes deh!.., hold! .

grungydesignfinalsmall

Continue reading

Ini ada beberapa link site untuk belajar membuat layout yang bagus untuk disimak!

Psdfan.com

grungydesignfinalsmall

Hv-designs.co.uk

finished

Talk-mania.com

1b

Back to sebelum belajar membuat web, kalau untuk belajar membuat web memang diperlukan beberapa kemampuan yang harus dipenuhi, tidak susah dan tidak mudah juga.  Kemampuan seni atau jiwa seni saja tidak cukup untuk hal ini, kenapa? karena dengan kemampuan seni yang benar-benar matang dan dahsyat tetapi tidak memiliki kemampuan untuk mentransformasikan kedalam bentuk layout web, html dan sebagainya maka hal tersebut tidak ada artinya..malah akan pusing sendiri.  Tetapi sebaliknya dengan amunisi code dan kemampuan layout web yang tinggi tetapi tidak ada kemampuan seni yang baik juga tidak ada artinya ;-).

Sumber inspirasi menurut saya juga hal yang sangat penting dalam belajar web, perkaya sumber – sumber inspirasi mulai dari sumber icon, model layout web, teori warna, teori interaksi komputer dengan manusia, efek-efek buat web baik flash maupun javascripst, dan sebagainya…,pengalaman saya dulu saya suka sekali mebookmarks setiap web yang menurut saya bagus untuk inspirasi web nantinya..tidak disadari saya dengan jumlahnya yang kian hari terus bertambah…belum lagi langganan rss yang saya ikuti…tapi memang hal tersebut benar – benar membantu saya karena kita tidak akan kehilangan link/alamat web mereka tanpa harus googling lagi. Dikala saya stag! saya bisa mengunjungi mereka atau puyeng dengan data dari google yang bejibun.

Peka terhadap trend dunia web yang ada sekarang juga sangat utama, karena ini akan mempermudah kita dalam focus terhadap proses belajar web kita, dulu saya sangat bangga kalau bisa buat link di dalam .html karena trend saat itu bisa membuat link memang menjadi favorit di awal kebangikatan dunia design web. Sekarang saya focus dengan trend web yang memenuhi crossbrowser / dapat jalan dengan baik disemua browser yang menjadi trend saat ini. Clean code atau alur penulisan code yang tertata baik juga perlu kita persiapkan karena hal ini membantu kita untuk selalu  rapi dan hal ini mempermudah kita dalam menganalisa permasalah yang nantinya bisa kita temua dikemudian hari.

Berdiskusi dengan para pakar atau teman sesama yang sedang belajar web baik secara online atau offline merupakan hal yang jangan dilupakan, karena sekecil apapaun informasi dari mereka sangat berguna bagi kita, kembali lagi ke hal tadi…dari pada tanya ke google mending tanya sama teman dulu..he3x..kalau mentok atau tidak puas baru kita ke google.

Dukungan peralatan juga menjadi hal yang utama, baik software maupun hardware. Berangkatlah dari software yang mudaha dan benar-benar cocok buat kita untuk dapat memahami dalam belajar web itu lebih baik. Menggunakan notepad, kenapa tidak kalau itu lebih membuat kita cepat mengerti dan hafal dalam penulisan code …ketimbang menggunakan dreamweaver yang penuh dengan tab dan kita bingung menggunakannya…tetapi perlahan-lahan kita beralih ke software yang lebih pro juga jauh lebih baik berarti ada usaha untuk berkembang dan maju ;-)

Membaca buku dan majalah tentang design web baik yang cetak atau yang elektronik juga sangat diperlukan,  bisa jadi kta belajar sambil duduk di kereta dalam perjalanan ke luar kota atau di pesawat..hitung..hitung bergaya ….he3x..yang lain baca koran dan komik kita buku web heheheh.

Akhirnya selamat belajar membuat web ;-)

Amazing HTML Template

Pemanfaatan tata letak dan permainan warna yang berani dari kriesi.at telah menghasilkan sebuah HTML template yang sangat unik dengan nama “HTML Template: Reflect”,  ditunjang dengan integrasi dari jQuery dan beberapa javascripst yang digunakan sebagai pemanis menambah efek yang benar-benar dinamis.

html_temp_reflect_kristat Continue reading

Secara keseluruhan  HTML template menggunakan warna dasar hitam yang kesannya grunge dan tangguh, tetapi pada bagian atas backgroundnya diberi warna yang sangat mencolok dengan efek light memberi kesan menyala hal ini menurut saya bertujuan agar para pengunjung terfocus ke bagian tersebut  karena disitulah bagian yang menjadi pusat dari HTML template portfolio ini dimana pada layer atasnya terpampang beberapa portfolio yang ingin disampikan kepada para pengunjung,  dan jika melihat ketengah pada bagian sebelah kiri ada sebuah tombol kecil yang warnanya lebih mecolok lagi dan pastilah kita akan mengkliknya and “zap” bagian tersebut membuat bagian layer portfolio berganti dengan tampilan yang lain dengan pergerakan yang sangat menarik dan bener-benar sempurna “bagian ini yang saya suka ;-)”  dan perhatikan juga efek refleks di bagian bawah layer ini yang sewaktu terjadi transisi ikut pula berubah. Kesan pertama adalah ini hasil perbuatan dari flash magic tetapi tunggu dulu seperti posting saya yang sebelumnya ini merupakan hasil dari penggunaan javascripst secara sempurna.

Dibagian lain pada navigasi atas kita dapat melihat pergeseran menu yang soft dan pada bagian gallery, kita akan disajikan permainan lightbox yang sudah kondang dalam dunia efek gallery …”saya juga pake loh”…….he3x.  Menurut saya tamplate ini benar – benar menantang otak kreatif saya ;-)  , bener-benar patut menjadi inspirasi dalam dunia design web…;-)

Berikut detail lengkap dari HTML template tersebut  dari kriesi.at :

  • Valid XHTM Strict1.0 and CSS 2 .1, tableless Design
  • jQuery Support:
    • Image tooltips that align next to the mouse cursor
    • Bouncing/fading Header for Portfolio/punchlines/whatever
    • Lavalamp Menu, improved with jQuery
    • jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
    • Gallery Page with lightbox
    • Working ajax/php contact form
  • All PSD files I used are included
  • Documentation Included
  • Works in all Major Browsers

Buy this HTML Template for as low as 15 $ at Themeforest.net

Demonya ada disini