Ribbon menu with css3

Friday, February 17, 2012 // by Replace Developers // Labels: , // 0 comments
CSS3 Ribbon Menu
Ribbon menu with css3, Ribbon menu dengan css3 ini nemu saat googling di website jacklmoore Css3 ribbon menu ini telah saya ubah - ubah warnanya sehingga ada 4 macam warna css3 ribbon menu ini yaitu Pink, Putih, Hijau dan Biru, saya jelaskan dulu cara menggunakannya
  1. Log in di blog anda
  2. Klik Rancangan
  3. Klik Edit HTML
  4. Cari Kode ]]></b:skin>
  5. Setelah ketemu silahkan simpan kode CSS nya di atas kode ]]></b:skin>
  6. Setelah itu klik Simpan
  7. Untuk kode HTML nya silahkan simpan di Elemen laman dengan cara
  8. Klik Tambah Gadget lalu Pilih HTML/Javascript
Di bawah ini kode CSS nya, Silahkan pilih menu css3 nya berdasarkan warna, pilih salah satu

Ribbon menu css3 warna putih ( kode css menu warna putih )
.ribbon2:after, .ribbon2:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #fff;
}
.ribbon2:after {
border-right-color:transparent;
}
.ribbon2:before {
border-left-color:transparent;
}
.ribbon2 a:link, .ribbon2 a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
font-family:'Times new roman',sans serif !important;
font-size:16px !important;
}
.ribbon2 span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background, margin 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background, margin 0.2s; /* FF4+ */
-ms-transition: background, margin 0.2s; /* IE10 */
-o-transition: background-color, margin-top 0.2s; /* Opera 10.5+ */
transition: background, margin 0.2s;
}
.ribbon2 a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon2 span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.ribbon2 span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

Ribbon menu css3 warna hijau ( kode css warna hijau )
.ribbon3:after, .ribbon3:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #090;
}
.ribbon3:after {
border-right-color:transparent;
}
.ribbon3:before {
border-left-color:transparent;
}
.ribbon3 a:link, .ribbon3 a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
font-family:'Times new roman',sans serif !important;
font-size:16px !important;
}
.ribbon3 span {
background:#090;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background, margin 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background, margin 0.2s; /* FF4+ */
-ms-transition: background, margin 0.2s; /* IE10 */
-o-transition: background-color, margin-top 0.2s; /* Opera 10.5+ */
transition: background, margin 0.2s;
}
.ribbon3 a:hover span {
background:#0a0;
margin-top:0;
color:#EEE;
}
.ribbon3 span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #000;
border-bottom:0.5em solid #090;
}
.ribbon3 span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #000;
border-bottom:0.5em solid #090;
}

Ribbon menu css3 warna pink ( kode css warna pink )
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #FF1493;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
font-family:'Times new roman',sans serif !important;
font-size:16px !important;
}
.ribbon span {
background:#FF1493;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background, margin 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background, margin 0.2s; /* FF4+ */
-ms-transition: background, margin 0.2s; /* IE10 */
-o-transition: background-color, margin-top 0.2s; /* Opera 10.5+ */
transition: background, margin 0.2s;
}
.ribbon a:hover span {
background:#1E90FF;
margin-top:0;
color:#EEE;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #000;
border-bottom:0.5em solid #FF1493;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #000;
border-bottom:0.5em solid #FF1493;
}

Ribbon menu css3 warna biru ( kode css warna biru )
.ribbon4:after, .ribbon4:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #222FFF;
}
.ribbon4:after {
border-right-color:transparent;
}
.ribbon4:before {
border-left-color:transparent;
}
.ribbon4 a:link, .ribbon4 a:visited {
color:#CCC;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
font-family:'Times new roman',sans serif !important;
font-size:16px !important;
}
.ribbon4 span {
background:#222FFF;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background, margin 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background, margin 0.2s; /* FF4+ */
-ms-transition: background, margin 0.2s; /* IE10 */
-o-transition: background-color, margin-top 0.2s; /* Opera 10.5+ */
transition: background, margin 0.2s;
}
.ribbon4 a:hover span {
background:#000FFF;
margin-top:0;
color:#EEE;
}
.ribbon4 span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #FFF;
border-bottom:0.5em solid #222FFF;
}
.ribbon4 span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #FFF;
border-bottom:0.5em solid #222FFF;
}

Dan di bawah ini kode html nya
Kode HTML menu warna Pink
<div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>About</span></a>
<a href='#'><span>Services</span></a>
<a href='#'><span>Contact</span></a>
</div>
Kode HTML menu warna Putih
<div class='ribbon2'>
<a href='#'><span>Home</span></a>
<a href='#'><span>About</span></a>
<a href='#'><span>Services</span></a>
<a href='#'><span>Contact</span></a>
</div>
Kode HTML menu warna Hijau
<div class='ribbon3'>
<a href='#'><span>Home</span></a>
<a href='#'><span>About</span></a>
<a href='#'><span>Services</span></a>
<a href='#'><span>Contact</span></a>
</div>
Kode HTML menu warna Biru
<div class='ribbon4'>
<a href='#'><span>Home</span></a>
<a href='#'><span>About</span></a>
<a href='#'><span>Services</span></a>
<a href='#'><span>Contact</span></a>
</div>
Ingat ya kalau nyimpan menu nya harus di tempat yang agak lebar kalau di sidebar kayakX gak cocok karena sidebar itu gak terlalu lebar jadi cari aja tempat yang kiranya cocok, sekian postingan menu css3, wassalam
 
demo 
 
NB : Silahkan kembangkan sendiri, replace developers hanya menjadi perantara bagi anda untuk mengembangkan minat anda.
 
support by : sin1aja, jacklmoore

Class dan ID Selector

Thursday, February 16, 2012 // by Replace Developers // Labels: // 0 comments
Masih ingat kan pada pelajaran syntax CSS bagian pertama yang di tulis adalah selector. Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector.

Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.

Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.

Class Selector


Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.

Cara penulisan Class Selector:

.nama-class {property:value;}

Untuk menempelkan class ke dalam tag HTML:

taghtml.nama-class {Property:value;}

Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.

Contoh:

Penulisan kode CSS:

.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}

Pemakaian kode CSS

<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

Hasil:

Teks tengah akan berwarna merah.

Tag H1 tengah akan berwarna hitam

Tag H1 kiri akan berwarna biru

ID Selector


ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.

Cara penulisan ID Selector:

#nama-ID {property:value;}

Untuk menempelkan ID selector ke dalam tag HTML:

taghtml#nama-ID {Property:value;}

Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.
support by : replaceo1

Implementasi CSS

// by Replace Developers // Labels: // 0 comments
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
  • Inline CSS
  • Embed atau memasang kode css ke dalam bagian <head>
  • Nge link ke external CSS
  • Import CSS file
Yuk kita bahas satu per satu…

Inline CSS

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<P style=”color:blue”>
Isi paragraf.
</p>
Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

Embedded CSS

Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.
Contoh:
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat  menggunakan font berwarna biru.

External CSS

Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
  1. Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut. 
    p {font-family: arial; font-size: small;}
h1 {color: red; }
  2. Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>
    <head>
    <link rel=”stylesheet” href=”style.css” type=”text/css”>
    </head>

Import CSS

Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css";

atau

@import url("style.css");

Penggunaan Lebih dari Satu Kode CSS

Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:
color: red;
text-align: right;
font-size: 20pt
 support by : replaceo1

Syntax CSS

// by Replace Developers // Labels: // 0 comments
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.


Format penulisan kalimat CSS:


selector { property: value }


Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.


Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.


Value adalah nilai dari pengaturannya.


Contoh Syntax:


h1 { color: red }


Contoh di atas menunjukkan


Selector: h1
Property: color
Value: red


Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).


Pengelompokan Selectors



Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:


h1,h2,h3 { color: red }


Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.


Penggunaan Banyak Properties



Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).


Contoh:


h1,h2,h3 {color:red; font-family:arial; font-size:150%;}


Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.


Cara Penulisan Yang Baik



Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.


h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}


Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.


CSS Comment



Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.


Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.


/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
 support by : replaceo1

5 Hal yang Harus Anda tau Tentang HTML 5 : Prolog

// by Replace Developers // Labels: // 0 comments
1. It’s not one big thing (Ini Bukan Sesuatu hal yang besar)

Pertama kali mendengar nama HTML 5 tentu anda akan bertanya: "Bagaimana saya bisa mulai menggunakan HTML 5 jika browser lama tidak mendukung itu" Tapi? Pertanyaan itu justru akan menyesatkan anda. Kenapa? karena HTML5 bukanlah satu hal yang besar. Bayangkan, untuk apa anda memikirkan dukungan Browser yang setiap waktu akan berubah versi ke yang lebih baik? dan saya yakin suatu saat nanti setiap Browser pasti tidak ingin kehilangan pangsa pasarnya dan mengabaikan HTML 5.
Selanjutnya, Anda mungkin berpikir tentang tag dan kurung sudut dari HTML. Ya, Itu memang merupakan bagian penting, tapi bukan keseluruhan Dari yang kita bicarakan. HTML5 tidak hanya mendefinisikan tag <video>; ada juga yang sesuai DOM API untuk obyek video dalam DOM. Anda dapat menggunakan API ini untuk mendeteksi dukungan untuk format video yang berbeda, memutar video, jeda, audio berhenti, melacak berapa banyak video yang telah didownload, dan segala sesuatu yang Anda butuhkan untuk membangun pengalaman pengguna yang kaya di sekitar tag <video> itu sendiri .


2. Anda Tidak Perlu Membuang apapun


Suka atau tidak, kita harus sama-sama mengakui bahwa HTML 4 adalah format markup yang paling berhasil. Dan tentunya, HTML5 dibangun di atas kesuksesan itu. Anda tidak perlu membuang markup yang telah ada. Anda pun tidak perlu mempelajari kembali hal-hal yang sudah Anda ketahui. Jika aplikasi web Anda telah menggunakan HTML 4, anda pu tidak perlu khawatir karena masih akan bekerja di HTML5.
Nah, jika Anda ingin meningkatkan aplikasi web Anda, Anda telah datang ke tempat yang tepat. kenapa? karena HTML5 mendukung semua bentuk kontrol dari HTML 4, tetapi juga mencakup kontrol masukan baru. Beberapa di antaranya adalah penambahan lama tertunda seperti slider.
3. Sangat Mudah untuk Mulai Mengaplikasikan HTML 5
untuk melakukan Upgrade ke HTML 5 anda hanya perlu mengubah DOCTYPE Anda. DOCTYPE tersebut biasanya ada di baris pertama Tag HTML anda Contohnya seperti Berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
nah, di HTML 5, hanya ada satu DOCTYPE yang dipergunakan yaitu:
<!DOCTYPE html>
Dan yang terpenting, setelah melakukan Upgrade ke HTML 5 anda tidak akan merusak markup yang ada, karena semua tag yang didefinisikan di HTML 4 masih didukung di HTML 5. Tapi selanjutnya, mau tidak mau anda akan memvalidasi elemen baru seperti <article>, <section>, <header>, dan <footer>.
4. Ini Sudah Bekerja
Menggambar pada kanvas, memutar video, desain bentuk yang lebih baik, atau membangun aplikasi web yang bekerja offline sudah dapat Anda temukan di HTML5. Browser seperti, Firefox, Safari, Chrome, Opera, dan browser ponsel sudah mendukung kanvas , video , Geolocation , penyimpanan lokal , dan banyak lagi. selain itu, Google pun sudah mendukung penjelasan microdata . Bahkan, Microsoft yang selama ini hanya mendukung bentuk standart akan mendukung fitur HTML5 di Internet Explorer 9 mendatang. Jadi jangan ragu lagi...


5. HTML 5 akan segera terwujud


Tim Berners-Lee Merupakan pencipta dunia web yang luas di awal 1990-an. Dia kemudian mendirikan W3C untuk membantu mengetahui standar web, yang telah dilakukan selama lebih dari 15 tahun. Berikut adalah apa yang dikatakan W3C tentang masa depan standar web, pada bulan Juli 2009:
Hari ini Direktur mengumumkan bahwa ketika XHTML 2 charter berakhir pada akhir tahun 2009, piagam ini tidak akan diperpanjang. Dengan demikian, dan dengan meningkatkan sumber daya dalam HTML Kelompok Kerja, W3C berharap untuk mempercepat kemajuan HTML5 dan memperjelas posisi W3C tentang masa depan dari HTML.


Itulah sebagian hal awal yang harus anda ketahui untuk melangkah maju dan tidak ragu lagi menggunakan HTML 5.

support by : replaceo1

Pengenalan Canvas HTML 5

// by Replace Developers // Labels: // 0 comments




HTML 5 memperkenalkan <canvas> sebagai elemen baru, terutama untuk menggambar grafik menggunakan javascripts. Ia bisa menangani banyak tugas seperti alat bantu grafis sederhana [menggambar grafik], membuat komposisi foto dan membuat animasi dasar.

Tutorial langkah demi langkah menjelaskan cara mengimplementasikan elemen kanvas dalam aplikasi web WhatWG atau HTML 5. <canvas> elemen tidak terlalu sulit untuk digunakan, namun Anda perlu mengetahui dasar-dasar HTML dan Javascript.

Untuk Apa elemen <canvas> ?

Mewakili grafik sederhana atau diagram, user interface yang menarik, animasi sederhana, grafik dan gambar grafik, gambar tertanam aplikasi dan fitur yang disempurnakan dari keterbatasan CSS.

Apa fitur dalam elemen <canvas>?

- Alat bantu menggambar: Rectangles, Arc, Jalan dan menggambar Line, Bezier dan Kurva Kuadratik

- Efek: Fill dan Strokes, Shadows, Linear dan gradien radial, Alpha transparansi dan Komposisi

- Transformasi: Scaling, Rotasi, Translation, Transformasi matriks

- Data dalam dan keluar: Membuka gambar eksternal oleh link atau URL, URI data atau kanvas lain, mengambil sebuah representasi PNG sebuah kanvas sebagai data URL
Nah, bagi anda yang ingin mempelajarinya lebih dalam, saya akan memberikan link Download Cheat Sheet Canvas HTML5 ini untuk anda

DOWNLOAD [147,37 KB]


support by : replaceo1

Pengenalan Struktur HTML 5

// by Replace Developers // Labels: // 0 comments
HTML 5 menjanjikan fleksibilitas lebih bagi penulis, memungkinkan Website lebih menarik dan interaktif serta memperkenalkan dan meningkatkan berbagai Fitur, seperti Kontrol bentuk, API, multimedia, struktur, dan semantik.

HTMl 5 Mulai bekerja pada tahun 2004, dibawah asuhan W3C HTML WG dan WHATWG. Bahkan, Empat Vendor Browser besar seperti Firefox, Apple, Opera, Dan Google kabarnya ikut mengembangkan HTML 5.

Nah, Struktur Dasar HTML dapat anda lihat dibawah ini:



Nah, gambar diatas adalah Struktur HTMl 4 yang masih menggunakan Elemen div yang masing-masing memberikan id deskriptif atau kelas untuk menggambarkan bagian-bagian khusus. Maklum Versi HTML 4 masih kekurangan semantik. Nah, HTML 5 mulai memperbaiki hal ini dengan membuat masing-masing elemen mewakili bagian yang berbeda dan tidak perlu menggunakan penggambaran khusus lagi. Klo digambarkan akan seperti gambar dibawah ini.



Gambar diatas menunjukkan bahwa Elemen-elemen div dapat digantikan dengan unsur-unsur baru: header, nav, bagian, artikel, samping, dan footer.

Markup untuk Dokumen dapat digambarkan sebagai berikut:

<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

Contohnya, Struktur Dibawah ini yang ditandai dengan bagian nested dan elemen h1:

<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>

</section>

Perhatikan Struktur Diatas, Untuk kompabilitas yang lebih baik dengan Browser saat ini, telah dimungkinkan menggunakan elemen post lain (h2 untuk h6) tepat ditempat elemen h1. itulah salah satu keuntungan menggunakan elemen ini.


Dengan mengidentifikasi halaman menggunakan elemen sectioning spesifik, teknologi bantu dapat membantu pengguna untuk lebih mudah menavigasi halaman. Misalnya, mereka dengan mudah dapat melompat ke bagian navigasi atau cepat melompat dari satu artikel ke berikutnya tanpa perlu bagi penulis untuk memberikan skip link.

Selanjutnya, Pada elemen header anda dapat menyertakan sub judul, informasi atau lainnya. Seperti Struktur Dibawah Ini:

<header>
<h1>A Preview of HTML 5</h1>
<p class="byline">By Ferdinand</p>
</header>

<header>
<h1>Example Blog</h1>
<h2>Insert tag line here.</h2>
</header>

Setelah itu bagian lainnya adalah Footer yang berisi data hak Cipta, Link ke halaman Terkait dan lainnya, Strukturnya seperti dibawah ini:

<footer>© 2010 replaceo1.</footer>

Selanjutnya adalah bagian link navigasi, dengan struktur seperti dibawah ini:

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/prolog">Prolog</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>

Selanjutnya adalah Struktur Sidebar, seperti dibawah ini:

<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2010/09/">September 2010</a></li>
<li><a href="/2010/08/">August 2010</a></li>
<li><a href="/2010/07/">July 2010</a></li>
</ul>
</aside>


Selanjutnya, Section yang merupakan bagian utama dalam sebuah dokument, misalnya kita bayangkan seperti sebuah Bab dengan Struktur seperti dibawah ini:

<section>
<h1>Chapter 1: Saya Orang Kreatif</h1>
<p>Banyak yang bilang saya gak cerdas dan bengal, dan saya akui demikianlah saya, tapi ditengah kebodohan saya, saya tetap bersyukur diberikan otaQ yang kreatif oleh Tuhan
...</p>
</section>

Terakhir adalah Unsur artikel, yang berisi konten, postingan, komentar dan lainnya, Strukturnya seperti dibawah ini:

<article id="comment-3">
<header>
<h4><a href="#comment-3" rel="bookmark">Comment #3</a>
by <a href="http://example.com/">Google</a></h4>
<p><time datetime="2010-08-29T13:58Z">August 29th, 2010 at 13:58</time>
</header>
<p>Blogwalking Gan!</p>
</article>

Nah, itulah Struktur HTML 5 yang sewaktu-waktu masih bisa berubah,

Sumber postingan ini berasal dari:

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#outlines dan telah saya rubah untuk memudahkan anda memahaminya.


support by : replaceo1

HTML 5 Canvas Element Template [Basic]

// by Replace Developers // Labels: // 0 comments

Kali ini kita akan kembali membahas tentang HTML5, Setelah beberapa waktu yang lalu saya mulai mengenalkan pembahasan HTML5 ini di postingan 5 Hal yang Harus Anda tau Tentang HTML 5 : Prolog, Pengenalan Canvas HTML 5 Dan Pengenalan Struktur HTML 5. Kali ini saya ingin mengajak anda untuk mengimplementasikannya.

Pembahasan tentang ini akan kita mulai dari penempatan Element Canvas pada Template. Element atau Unsur Canvas merupakan Tag HTML yang hampir sama dengan tag <table>, <div>, atau <a> dengan pengecualian yang isinya diberikan dengan Menggunakan Javascript. Dengan kata lain, untuk memanfaatkan Canvas HTML 5 anda harus menempatkan Canvas di suatu tempat di dalam tag HTML, membuat sebuah penginisialisasi fungsi Javascript yang nantinya kita gunakan untuk mengakses tag canvas setelah Page Load (abis Loading), dan kemudian memanfaatkan HTML5 Canvas API untuk menggambarkan visualisasinya.

Nha, element utama yang kita gunakan disini adalah
<canvas id="myCanvas"></canvas>


Lantas bagaimana Pengimplementasiannya ke dalam Template?

Karena disini saya menggunakan Blogspot, jadi untuk anda yang juga menggunakan Blogspot silahkan buat sebuah Blog testing terlebih dahulu untuk menguji postingan ini. Setelah blog percobaan tersedia, silahkan menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget. Setelah itu hapus seluruh Script Template anda. Jika Sudah silahkan tunggu dulu karena saya akan terlebih dahulu memberikan Script untuk pengguna Platform lain, Jadi untuk anda yang juga mengikuti panduan ini namun tidak menggunakan Blogspot, silahkan gunakan Script Template dibawah ini:
<!DOCTYPE html>
<html>
<head>
<script>

function init() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");

// do stuff here
}

</script>
</head>
<body onload="init()">
<canvas id="myCanvas" width="576" height="300"></canvas>
</body>
</html>

Dan Untuk anda yang menggunakan Blogspot, Sebenarnya Script diatas pun dapat langsung anda gunakan, namun saya pastikan anda akan dihadapkan pada peringatan dibawah ini:

Kami tidak dapat menyimpan template Anda.
Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Seharunya ada satu dan hanya satu skin pada template, dan kami menemukan: 0

Untuk itu Script diatas akan sedikit kita ubah agar dapat terbaca di Blogspot. Dan berikut Script untuk anda yang menggunakan Blogspot:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function init() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");

// do stuff here
}

</script>
</head>
<body onload="init()">
<canvas id="myCanvas" width="576" height="300"></canvas>
</body>
</html>


Jika Sudah silahkan Save Template anda, dan Lihat hasilnya.

Lantas apa yang anda dapati? jika yang anda dapati hanyalah page Kosong artinya anda sudah mengikuti panduan ini dengan benar, karena disini kita memang belum membuat satupun Variabel untuk Canvas, karena kelanjutannya akan saya posting di postingan kemudian.

Keterangan:

1. Anda dapat menentukan Tinggi dan Lebar Canvas dengan mengganti angka yang saya beri warna merah.

2. Onload yang saya taruh di tag body merupakan bentuk inisialisasi tag canvas. Di dalam fungsi init (), kita dapat mengakses Objek DOM Canvas dengan menggunakan id. Dan kemudian mendapatkan konteks 2-d dengan menggunakan method getContext ().


Sumber: Buku Introducing HTML 5 Karangan Bruce Lawson and Remy Sharp, Untuk lebih jelasnya anda dapat bertanya langsung kepada mereka Via Twitter di @brucel & @rem

support by : replaceo1

HTML 5 Canvas Line Tutorial [Basic]

// by Replace Developers // Labels: // 0 comments
Setelah sebelumnya kita sudah mengetahui dasar pengimplementasian Element Canvas dalam HTML 5, kini kita akan masuk ke Pembahasan selanjutnya dari Buku Introducing HTML 5 Karangan Bruce Lawson and Remy Sharp, yaitu pembahasan tentang HTML 5 Canvas Line.
Nha, untuk membuat Line atau garis pada Canvas HTML5 kita dapat menggunakan Methods moveTo(), lineTo(), Dan stroke(). Implementasinya seperti di bawah ini:

moveTo(x,y);
lineTo(x,y);
stroke();

Lantas Bagaimana Menerapkannya ke dalam template? Untuk menerapkannya, Silahkan Masukkan Script dibawah ini kedalam Template Blog Percobaan anda sebelumnya. Klik Rancangan > Edit HTML Kemudian Centang Expand Template Widget, sampai disini terserah anda mau menambahkan atau mengganti keseluruhan Script sebelumnya.

Dan berikut Scriptnya:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawLine() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");

c.moveTo(100,150);
c.lineTo(450,50);
c.stroke();
}

</script>
</head>
<body onload="drawLine()">
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>

Jika Sudah, Save Template anda Dan Lihat hasilnya. Jika anda mengikuti Panduannya dengan benar maka anda akan mendapati sebuah garis seperti gambar diatas. Dan Untuk anda yang menggunakan Platform lain silahkan buang bagian skin.

Keterangan:
1. Methods moveTo() membuat sebuah subpatch baru untuk jalur yang diberikan. Titik ini menjadi konteks baru. Bisa dikatakan Methods moveTo() merupakan sebuah cara untuk mengatur posisi kursor gambar anda.


2. Methods lineTo() digunakan untuk menarik garis dari titik konteks ke titik yang diberikan.


3. Methods stroke() Digunakan untuk memberi warna pada garis dan membuatnya dapat dilihat. Jika tidak dinyatakan, warna Default dari stroke adalah hitam.


Sumber: Buku Introducing HTML 5 Karangan Bruce Lawson and Remy Sharp, Untuk lebih jelasnya anda dapat bertanya langsung kepada mereka Via Twitter di @brucel & @rem


support by : replaceo1

Followers