Kangtanto

Removed Elements On HTML5

kangtanto — Sun, 05 Feb 2012 05:08:16 +0000

HTML5 has become a hit today as its new elements and other new concept. What about the old elements? HTML5 has removed some old elements with some considerations. For example the presentational attribute such as background(for body element), bgcolor, align and border as they are better handled in CSS.

There are other elements that also has removed by HTML5 such as big, center, font, basefont,s,strike,tt and u as they are more effectively represented in CSS. so goodbye to font and its attribute in HTML5. I still remember the old times when I was learning HTML in my college, I wrote lots of font and its attribute on my page. Even one of my friends web based application that still in use right now is using font and its attribute on many of its pages. His application was build around 2000.

One of elements that I don’t like so much is Frame. Thank god its been removed on HTML5 with other elements such as frameset and noframes.

There are elements that rarely been used by user for their page such as acronym,applet,isIndex and dir. To replace these elements HTML5 has object to replace applet, abbr for abbreviations, and the use of UL instead of isIndex or dir.

HTML5 Tutorial: Create A Simple Layout With The New Elements

kangtanto — Sun, 05 Feb 2012 00:25:04 +0000

HTML5 is currently under specification and in the Working Draft stage in W3c, but many its features are stable and can be implemented on most browsers. In this tutorial we will learn to create a very simple layout using HTML5 new elements and style the layout with css.

Most of us usually use the same name for id or class in out layout. For example we use “header” as the id name for header and “footer” as the id for footer and many more. take a look at the picture below

This is the reason why some of new tag in HTML5 use that name. Ian Hickson has data mined billion of web pages to find the class or id name when he edit the specification and it worth to check his result here.

To create such a layout is very simple in HTML5. We will use some of new tag in HTML5 to replace div and its id name. Checkout the code below

As you can see on the code above, the doctype much simple, shorter and easy to remember. The doctype will specify that your HTML is HTML5 document.

Very simple right? It is quite possible that a question occur, how do we style the new element in CSS? all you need to do is to treat them as the other HTML element. You only need to write its tag like article,nav or content. Put css below between the open tag head and the closing tag of head.

In HTML5 you only need to write “style” between the open and close tag to put CSS in your HTML5 document. Because it is assumed that when you write style, it means you will write CSS. It is no need to write other attributes.

There are many other new elements in HTML5 and I hope I can cover up on my next post.

CSS3 New Cursor Styles

kangtanto — Wed, 25 Jan 2012 09:33:03 +0000

Today HTML5 and CSS3 becomes a hit. The new elements in HTML5 and news styles in CSS3 has encourages us to try it on our website. CSS3 is evolving rapidly and you will find some interesting styles and will realize how easy it is to style something that was so hard before.

One of the new styles is the cursor. In CSS2, we already know some of cursor styles, like: auto, inherit, crosshair, default,help, move, pointer,progress, text, wait, e-resize,n-resize,ne-resize, nw-resize, se-resize, sw-resize,s-resize and w-resize.

In CSS3 we have more cursor styles to choose. here is the list

cursor: none (not IE, Safari, Opera)
cursor: context-menu (not Firefox, Chrome)
cursor: cell (not Safari)
cursor: vertical-text
cursor: alias (not Safari)
cursor: copy (not Safari)
cursor: no-drop
cursor: not-allowed
cursor: ew-resize
cursor: ns-resize
cursor: nesw-resize
cursor: nwse-resize
cursor: col-resize
cursor: row-resize
cursor: all-scroll

These styles works in most latest popular browser like Mozilla, Chrome and Opera. In IE these styles work in IE9.

Incoming search terms:

Iseng-iseng Dapat Hadiah di Lomba Fotografi PENS

kangtanto — Fri, 20 Jan 2012 11:32:09 +0000

Dalam rangka Soft Launching Logo dan Hymne PENS, Politeknik Elektronika Negeri Surabaya(PENS) menggelar lomba fotografi yang diadakan sejak tanggal 10-12 Januari 2012. Lomba ini terbagi menjadi 3 kategori yaitu untuk profesional, mahasiswa dan civitas akademik(dosen dan karyawan). Sudah bisa ditebak kangtanto ikut di kategori mana. Tema lomba kali ini adalah PENS – Bridge to the future.

Berbekal senjata Nikon D80 dengan kesaktian fotografi yang masih dasar kangtanto pun ikut-ikutan hunting di sekitar area kampus. Kalau di analogikakan dalam dunia persilatan mungkin kesaktian fotografi kangtanto masih sebatas tahu kuda-kuda. Catat… sebatas tahu kuda-kuda yaitu belum bisa mempraktekan kuda-kuda karena masih sebatas tahu. Ya kalau gini belum bisa dibilang sakti ya…. Jadi harap maklum melihat hasil jepretannya. Saat pengumuman hasil pemenang lomba yang diselenggarakan berbarengan dengan acara soft launching(18/01), ternyata hasilnya diluar dugaan, yaitu hasil jepretan kangtanto nyantol di peringkat 3. Alhamdulillah, lumayan hadiah uang bisa buat mbeli ban sepeda motor baru.

Nah biar tidak penasaran, ini kangtanto cantumkan hasil para pemenang di ketiga kategori tersebut. Urutan tampilan sengaja saya taruh yang profesional dulu, biar mata-mata para pembaca terhibur dulu. Nah pas nanti di kategori civitas, terutama yang dapat peringkat 3, anda bisa tersenyum, tertawa sepuasnya atau malah kirim sms ke saya ngajak traktiran. Maksudnya kangtanto yang ditraktir.

Kategori Profesional:

Ini juara 1 nya. Karya Ocky Dwi P.. yang di foto Robot Soccer nya PENS. Hadiahnya 2 jeti gan..

Ini juara 2 nya gan. Karya Reza M Fauzan. yang diambil lapangan basket gedung PENS. hadiahnya 1.5 jeti

Ini juara 3, Karya Faizal Johan K. Hadiahnya 1 jeti

Kategori Mahasiswa:

Ini juara 1 nya gan.. oleh: Ida Bagus Made. hadiahnya 750 ribu.

Ini juara 2 nya gan. Karya Rizal Rahardian... hadiahnya 500 rb

Ini juara 3, oleh Puguh Christianto. Hadiahnya 250 ribu

Kategori Civitas:

Ini juara 1, oleh Akhmad Alimudin. Hadiahnya 750 ribu

Ini juara 2, oleh Widi Sarinastiti. Hadiahnya 500 ribu

Nah ini dia yang peringkat 3..ssstt... ketawa-nya jangan keras-keras. nih foto diambil pas bang admin jaringan lagi mbenerin Access Point. . Hadiahnya.. ah lupa belum diambil gan..

Untuk para juri sendiri terdiri dari dua orang profesional di bidang fotografi dan satu orang dosen PENS.

Incoming search terms:

Membuat Game 3D Sederhana Dengan Unity

kangtanto — Tue, 17 Jan 2012 09:20:09 +0000

Game ini merupakan sebuah game yang mengambil tema tentang seekor kera yang berburu pisang pada area perkebunan. Kera tersebut harus mengambil pisang dengan jumlah tertentu untuk bisa memenangkan permainan. Proses pengambilan pisang akan menemui beberapa kesulitan mulai dari penempatan pohon pisang, perbedaan tinggi pohon pisang dan halangan-halangan yang lain.

Karakter yang dikontrol pada game ini berupa seekor kera yang memiliki kemampuan untuk berjalan, berlari, melompat dan memukul. Pisang dapat diambil dengan menggunakan empat kemampuan yang dimiliki oleh kera tersebut. Awalnay sih memang ingin seekor kera, akan tetapi karena belum sakti di Blender atau dengan kata lain belum bisa mbikin karakter kera di Blender, maka akhirnya karakternya memakai Lerzp yang merupakan karakter dari contoh proyek game Unity. Kalau diliat bentuknya, yang mirip kera hanya mulutnya saja.

Ide game ini diadopsi dari tema yang sama dari game 2D yang berjalan pada sistem operasi Android. Pembuatan game dalam bentuk 3D ini dimaksudkan untuk memberikan pengalaman berbeda pada tema game yang sama sekaligus menerapkan beberapa konsep dasar pada game 3D. Game ini dibangun dengan menggunakan game engine Unity 3.4 versi free yang berjalan pada sistem operasi Windows.

Permainan yang dibuat dimainkan dalam sebuah area yang terlihat seperti kebun pisang. Dalam kebun tersebut terdapat pohon-pohon pisang yang buahnya dapat diambil untuk mendapat point dan jika terambil dalam jumlah tertentu, membuka pintu untuk mengakhiri level tersebut.

Penempatan pisang-pisang dalam area dibuat bervariasi agar terdapat tantangan bagi pemain. Selain penempatan yang bervariasi, diberikan pula rintangan yang menghambat pemain untuk mencapai pisang. Variasi penempatan berupa tinggi pohon dan posisi pohon yang memerlukan usaha tambahan untuk mencapainya. Rintangan yang diberikan berupa pohon yang tertutup pagar dan memiliki pintu yang terbuka dan tertutup secara berkala, unit yang menembaki karakter serta jembatan angkat.

Tujuan dari permainan adalah mengumpulkan pisang sejumlah yang telah ditentukan dan keluar dari area bermain sebelum waktu habis. Jumlah pisang yang diberikan lebih banyak dari syarat berakhirnya permainan untuk mempermudah pilihan. Setelah berhasil mengumpulkan pisang, pemain harus mengarahkan karakter ke pintu keluar yang ditentukan. Saat pemain berhasil keluar atau jika waktu telah habis, permainan berakhir.

Incoming search terms:

Create HTML 5 And CSS3 Form

kangtanto — Tue, 20 Dec 2011 08:32:50 +0000

Kali ini kita akan membuat sebuah form dengan menggunakan beberapa elemen baru pada HTML 5 salah satunya adalah input type berupa email. Input type berupa email akan menolak saat kita memasukkan format email yang tidak tepat pada kotak tersebut. Format yang diminta selalu mengharuskan adanya tanda “@”. Misalnya alamat email harus ditulis dengan lengkap seperti : tanto@kangtanto.com. Form yang akan kita buat nantinya akan tampak seperti gambar berikut ini.

Penulisan input type email seperti berikut ini:

Selain input type berupa email, kita akan menambahkan jenis input lainnya yaitu url. Seperti pada contoh kode HTML di bawah ini:

Input jenis url akan meminta user memasukkan alamat domain atau sub domain. Jenis input terakhir yang juta pakai adalah bertipe required. Contoh penulisannya seperti di bawah ini

Input jenis ini akan mewajibkan user untuk mengisi kotak tersebut. Apabila kotak input masih kosong, maka form pada saat disubmit akan mengeluarkan peringatan. Untuk membuat form HTML 5 ini, silahkan anda ketikkan script di bawah ini pada editor HTML anda.








Sembunyikan Form
Tampilkan Form
Miringkan Form
Zoom Form

	Data Biodata Pengguna
	
	
    Nama Anda 
	
	E-mail: 
	
   
   Web 
   
   

   
  		 
  Browser yang anda gunakan 
  
   
  Username *

Selanjutnya agar form anda tampil menarik, silahkan anda ketikkan CSS dibawah ini. CSS yang kita pakai kali ini sebagian merupakan CSS3. Misalnya untuk membuat rounded corner. Akan tetapi beberapa browser versi lama belum mendukung style ini.

body {
    background-color: #f9f9f9;
    color: #222;
    font-family: Cantarell, Verdana, sans-serif;
    font-size: 12px;
}


input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; } 
input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

.clear { clear: both; }

#formbiodata {
    width: 654px;
    height: 450px;
    margin: 20px auto;
    padding: 50px 0;
    border-radius:10px;
    -moz-border-radius:10px;/*untuk firefox versi 3.5 ke bawah*/
    box-shadow:10px 10px 5px #888888;
    border:1px solid #FFF;
    overflow: hidden;
    position: relative;
    
}

#formbiodata input, #formbiodata select {
        background: url('images/input.png') no-repeat;
        color: #888;
        border: 1px solid #ccc;
        font-family: Cantarell, Verdana, sans-serif;
        font-weight: bold;
        font-size: 15px;
        width: 300px;
        height: 35px;
        padding: 0 25px;
        margin: 20px 0;
        float: left;
        
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
}

 #formbiodata input.button {
    background: none repeat scroll 0 0 #A3D62F;
    border: 1px solid #3B6E22;
    border-radius: 8px 8px 8px 8px;
    color: #FFFFFF;
    cursor: pointer;
    width: 85px;
    height: 38px;
    position: relative;
    bottom: 15px;
    left: 575px;
    width: 70px;
}

#formbiodata label {
        color: #666;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
        float: right;
        margin: 23px -25px;
        width: 270px;
}

#formbiodata h1, #formbiodata h2 {
        font-size: Verdana, sans-serif;
        text-align: center;
        font-size: 24px;
        text-shadow: 1px 1px 2px #222;
    }
#formbiodata h1 span { color: #a90329; }

Sementara itu dulu terkait pembuatan form sederhana ini. Tahap selanjutnya kita bisa menambahkan Jquery atau yang lainnya. Ada usul?

Incoming search terms:

Let It Snow On Google

kangtanto — Sun, 18 Dec 2011 09:27:59 +0000

Today there is a surprise from Google. Just type “let it snow” on your google search and the snow will fall on your browser. It is not a doodle actually, just a winter surprise from Google. Then you can play with your mouse to draw as it is on the window in front of you.

Don’t forget to take a snapshot and clik “Defrost” if you want to clean the snow.

Curios of the technology behind all of this?

Incoming search terms:

let it snow

Transparent Background With CSS

kangtanto — Sat, 17 Dec 2011 12:09:29 +0000

Sebenarnya teknik ini sudah lumayan lama, akan tetapi mumpung kangtanto lagi ndesain web n pas menerapkan ini, tidak ada salahnya ditulis kembali. Ya hitung-hitung sebagai tempat berbagi ilmu bagi mereka yang pemula. Teknik transparan ini sebenarnya tidak serumit teknik-teknik sebelumnya. Teknik sebelumnya bisa saja kita membuat sebuah background warna di Photoshop kemudian kita rubah nilai transparansinya. Nah kini kita tinggal menggunakan sebuah cara di CSS yang disebut dengan RGBa.

RGBa membutuhkan empat nilai, yaitu 3 kode warna RGB dari warna yang kita inginkan dan nilai terakhir merupakan nilai transparansi yang kita inginkan. Nilai transparansi ini dimulai dari 0 hingga 1, dimana pada nilai 0 maka tidak akan nampak background warna yang diinginkan, sedangkan untuk nilai 1 maka background tidak akan transparan sama sekali.

Contoh penulisannya seperti di bawah ini:

div {
           background: rgba(7,111,192, .7);
}

Kode tersebut akan menghasilkan warna biru dengan transparansi 0.7. Apabila diterapkan pada sebuah elemen misalnya div atau sebuah p, maka akan menghasilkan seperti yang nampak pada gambar di bawah ini:

Masalahnya adalah masih ada beberapa browser yang belum support cara ini, terutama browser versi lama (you know I hate IE). Nah untuk mengakali versi lama ini, sebaiknya anda juga menyediakan style alternatif apabila ternyata browser si pengguna tidak mendukung. Caranya adalah dengan memberikan background warna dengan tidak adanya transparansi. Seperti di bawah ini:

div {
           background: rgb(7,111,192);
            background: rgba(7,111,192, .7);
}

Apabila anda tidak menyediakan background alternatif ini, maka apabila browser yang digunakan oleh user tidak support rgba, maka tidak akan ada background yang ditampilkan.

Incoming search terms:

Pengenalan ID dan Class Pada CSS

kangtanto — Thu, 24 Nov 2011 22:49:39 +0000

Sebelum anda melanjutkan membaca tulisan ini, pastikan anda telah memahami dasar-dasar penulisan syntax css, anda bisa melihat pada artikel sebelumnya tentang pengenalan css. Pada tulisan kali ini targetnya anda akan mampu memahami dan selanjutnya menggunakan ID dan Class pada CSS.

Selain menggunakan element html sebagai selector pada css, kita bisa menggunakan selector yang kita buat sendiri. Selector ini selanjutnya bisa kita pakai pada elemen-element dalam HTML dengan cara memanggilnya. Ada dua selector yang bisa kita buat yakni id dan class.
Selector ID
Selector id digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja. Selector ID pada syntax CSS ditandai dengan “#”.
Contoh selector ID

#par1
{
     text-align:center;
     color:red;
}

Pada bagian dokumen HTML, untuk menggunakan style tersebut, misalnya pada sebuah paragraph, bisa dituliskan:

Ini adalah sebuah paragraph

Penulisan nama id sebaiknya tidak diawali dengan nomor, karena tidak akan dikenali pada browser Mozilla Firefox

Selector Class
Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.” .
Contoh selector class

.komentar 
{
     text-align:left;
     color:red;
}

Pada bagian dokumen web, misalnya akan diterapkan pada paragraph dan pada sebuh div dalam sebuah dokumen web yang sama, dapat dituliskan

Ini adalah paragraph komentar

Ini bagian komentar

Bagian mana saja dari sebuah dokumen html yang memanggil class ini, akan memiliki style yang sama, yakni sesuai aturan tersebut, maka tulisan akan berada di tengah dan berwarna merah. Pada kondisi lain, kita menginginkan apabila sebuah class hanya berlaku pada sebuah paragraph saja. Untuk bagian div tidak berlaku. Aturan tersebut bisa kita tuliskan sebagai berikut:

p.komentar {text-align:center;}

Aturan ini akan berlaku bagi setiap paragraph

yang memiliki class=”komentar” saja.

Cukup sampai disini tulisan kali ini, berikutnya akan dilanjutkan dengan 3 cara memasukkan dokumen css ke dalam halaman web anda. Kalau boleh mengingatkan, silahkan langsung dicoba yang anda baca hari ini, biar tidak menguap entah kemana dikemudian hari…

Incoming search terms:

Pengenalan CSS

kangtanto — Thu, 24 Nov 2011 22:26:10 +0000

Target dari tulisan ini adalah anda akan mampu memahami konsep dasar CSS, mampu memahami struktur dasar syntax CSS. CSS merupakan kepanjangan dari Cascading Style Sheet. CSS menggunakan aturan-aturan didalamnya untuk menentukan bagaimana tampilan sebuah halaman. Aturan-aturan ini biasanya dipisahkan dalam bentuk dokumen lain yang tersimpan sebagai file berformat .css. Hal ini bertujuan untuk memisahkan antara markup HTML dengan style tampilan.
HTML tidak pernah ditujukan untuk mengatur format sebuah dokumen. HTML ditujukan untuk mendefisikan isi dari sebuah dokumen, misalnya:

Ini adalah sebuah Header

Ini adalah sebuah paragrap

Saat tag seperti ditambahkan pada versi HTML 3.2, merupakaan saat-saat yang merepotkan para web developer. Hal ini terasa saat membuat web untuk skala besar, dimana tag-tag seperti tersebut harus ditambahkan pada tiap-tiap halaman yang akan menimbulkan pemborosan waktu dan biaya.
Untuk mengatasai masalah ini, maka W3C akhirnya meluncurkan CSS. Mulai HTML 4, pengaturan format dokumen dapat dipisahkan pada file lain bertipe CSS. Dengan adanya CSS ini, maka sangat menghemat waktu bagi para developer, dimana dengan hanya mengubah satu file css saja, dapat langsung berpengaruh pada semua halaman website tersebut.

Syntax CSS
Aturan CSS memiliki dua bagian utama, yaitu sebuah selector dan satu atau beberapa deklarasi.

Sususan syntax CSS (sumber: w3schools.com)

Selector biasanya merupakan sebuah elemen HTML yang ingin anda atur tampilannya. Setiap deklarasi terdiri dari sebuah property dan sebuah value. Sebuah property merupakan style atribut yang ingin anda rubah tampilannya.
Contoh syntax CSS.

Selector yang berupa element html, cukup dituliskan nama element tersebut, misalnya body, h3, h1, p atau yang lainnya. Selain selector berupa eleme-element HTML, juga memungkinkan untuk membuat selector kita sendiri. Selector ini akan dibahas dibagian bawah bab ini.

p {color:red;text-align:center;}

Atau bisa dituliskan:

p
{
     color:red;
     text-align:center;
}

Sampai disini untuk pengenalan CSS, bahasan berikutnya adalah tentang pengenalan ID dan Class