Evolution of the Web

Evolution Of The Web

The Evolution of the Web is cool, interactive visualization from the Google Chrome team (along with Hyperakt and Vizzuality) that explores the evolution of web browsers over the last 20 years.

Over time web technologies have evolved to give web developers the ability to create new generations of useful and immersive web experiences. Today’s web is a result of the ongoing efforts of an open web community that helps define these web technologies, like HTML5, CSS3 and WebGL and ensure that they’re supported in all web browsers.

The color bands in this visualization represent the interaction between web technologies and browsers, which brings to life the many powerful web apps that we use daily.

Clicking on any of the browser icons brings up a cool visual history of the window design for each version.

Google Chrome

Check it here!

*taken from FlowingData

CSS 2.1, CSS 3 dan HTML 5 Help Cheat Sheets (PDF)

Sekarang, kita bisa cepat untuk melihat secara keseluruhan properti apa saja yg ada di CSS 2.1, CSS3 dan HTML 5, karena sudah disediakan cheat sheets yg mantap. Jadi bisa belajar secara keseluruhan dan maksimal :D. Selamat Menikmati!!!

The CSS 2.1 Help Sheet covers Syntax, Font, Text, Margins, Padding, Border, Position, Background, List, Media Types and Keywords. The CSS 3 Help Sheet contains code snippets for Rounded Corners, Box Shadow, Multiple Columns, Text Shadow, RGBa, Font Face (actually, not the CSS3 property, but still include for the sake of usefulness), Box Sizing, Box Resize, Outline and Gradients.

css preview
css 3 help sheet preview

10 best #HTML5 Tutorial You Should Visit!

HTML5 (dan CSS3) is the updated version of the long term HTML, used by front-end web developers all over the world.

Versi baru dari markup language ini dibuat untuk memenuhi kebutuhan teknologi RIA (Rich Internet Application), dimana selama ini banyak dilakukan oleh Flash, Silverlight dan Java. Dengan HTML5 kita sudah sangat bisa membuat user interface web yang sangat menarik dengan resource yang cukup ringan.

Terdapat beberapa semantik baru <footer>, <nav>, <article>, <aside>,dll. Dan yang pasti akan menimbulkan masalah pada bagian browser compatibility.

Langsung saja, these are 10 great sites where you can slowly get used to HTML5 :

Trying tumblr.

Lumayan asik dan unik ternyata blogging menggunakan tumblr.


Karena di tumblr postingan kita langsung dikategorikan ke text, photo, quote, link, chat, audio atau video. Yang nantinya akan terlihat berbeda tampilannya setelah di publish.

kategori posting

Selain itu juga banyak theme yang menarik, sepertinya sudah menggunakan css3 :mrgreen:. Ada follower juga, jadi kita bisa melihat postingan orang yang kita follow. Kita juga bisa melakukan reblog dan like postingan orang lain :). Dan lagi, domain blog kita bisa kita ganti² sesuai keinginan,hoho. Mantep bgt kustomisasinya ;). Oiya, disarankan juga memakai browser yang sudah support css3 :mrgreen:.

Pokoknya harus nyobain deh, mikroblogging yang menyenangkan :mrgreen:.

Ini beberapa screenshot tumblr saya :

Continue reading

CSS 3, awesome!!!

Anda sudah mencoba CSS3?

Pasti akan terkesan :mrgreen:.

Di postingan ini saya hanya ingin share beberapa resource list bwt css3 :D. And there are very great!!!

Beberapa contohnya yaitu : Spinning Cds, multiple borders, multiple columns, text shadows, all here! So if you want to learn css3 please check my links!

1. CSS Wizardry—CSS3 Examples & Progressive Enhancement

All CSS shown corresponds to the elements directly above. The ID/class names are the same as used and all CSS3/progressive enhancement snippets are shown in bold.

2. Sliding Vinyl with CSS3

We take an image of an album cover, some basic HTML, and a little fancy CSS3 that, on hover, slides out the pure-CSS vinyl record behind it.

3. Polaroid Images with Only CSS3

In this playground adventure, we use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of polaroid pictures.

4. Recreating the OS X Dock

We take a basic list of links and turn them into an awesome OS X dock of icons.

5. Super Awesome Buttons with CSS3 and RGBa

Using descriptive class names and CSS3 properties like gradients and box shadows, we create a set of scalable button styles for links and buttons. Continue reading