• Pada kodingan yang terdapat di dalam tag <head> terdiri
dari 2 komponen
1. <style> adalah tag css yang digunakan untuk
p...
• Pada tag <body> terdapat 2 komponen.
1. Pemanggilan pada sebuah div yang bernama “content”
2. Di dalam div content terda...
Membuat sebuah class void
setup(), berisi sebuah objek
dengan ketentuan:
Ukuran 700x700
Tanpa garis, dengan
background put...
Membuat sebuah class void
draw(), berisi sebuah objek
dengan ketentuan:
Diisi warna putih
Jarak antar objek, panjang dan
l...
Memanggil class resetMatrix() .
Calss ini dijalankan, dan
terdapat di script processing.js
Float hrs = pengaturan
perputar...
variabel a mendapat element ID
dengan nama my canvas
variable ctx yang dideklarasikan
dengan nama a bertipe 2d
rectangle y...
Penggunaan HTML5 dan CSS3 pada Aplikasi Mozila Developer
Penggunaan HTML5 dan CSS3 pada Aplikasi Mozila Developer
Penggunaan HTML5 dan CSS3 pada Aplikasi Mozila Developer
Penggunaan HTML5 dan CSS3 pada Aplikasi Mozila Developer
Upcoming SlideShare
Loading in …5
×

Penggunaan HTML5 dan CSS3 pada Aplikasi Mozila Developer

495 views

Published on

Dibuat oleh M Arif Gusti Putra, Putu Agus Wibawa, Benedicta Ganjar Lestari

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
495
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Penggunaan HTML5 dan CSS3 pada Aplikasi Mozila Developer

  1. 1. • Pada kodingan yang terdapat di dalam tag <head> terdiri dari 2 komponen 1. <style> adalah tag css yang digunakan untuk pengaturan body halaman dari website. Disini dilakukan pengaturan berupa warna background dari website, warna tulisan, jenis/ font tulisan, ukuran tulisan, teks dekorasi, dll 2 <script src="processing.js“ type="text/javascript"> : adalah pemanggilan source kode yang bertipe java script yang bernama processing.js
  2. 2. • Pada tag <body> terdapat 2 komponen. 1. Pemanggilan pada sebuah div yang bernama “content” 2. Di dalam div content terdapat pemanggilan 2 div yang lainnya. A. <div style="text-align: center"> digunakan untuk melakukan pengaturan bahwa posisi dari obejek yang akan dibangun web berada pada posisi tengah. B. <canvas id="clock" data-processingsources="clock.pde" width="700" height="700"> adalah pemanggilan tag canvas dengan id “clock” dimana source nya bernama “clock.pde, ukuran dari canvas itu sebesar panjang 700 dan lebar 700
  3. 3. Membuat sebuah class void setup(), berisi sebuah objek dengan ketentuan: Ukuran 700x700 Tanpa garis, dengan background putih Perintah untuk memanggil gambar2 ke dalam class void setup(). Dengan ketentuan: Nama_variabel=loadImage(“namagambar.p ng”) Dial.resize(width,height) adalah agar gambar dapat menyesuaikan dengan ukuran objek (700x700)
  4. 4. Membuat sebuah class void draw(), berisi sebuah objek dengan ketentuan: Diisi warna putih Jarak antar objek, panjang dan lebarnya 0px 0px Membuat text dengan tulisan “Jubin C Jose”, dengan ukuran font 32 Translate -> memposisikan agar tulisan terletak di tengah Memanggil pengaturan jam pada setting pc Membuat variabel h: untuk memanggil jam Membuat variabel m: memanggil menit Membuat variabel s: memanggil detik
  5. 5. Memanggil class resetMatrix() . Calss ini dijalankan, dan terdapat di script processing.js Float hrs = pengaturan perputaran jarum jam Traslate= memindahkan objek ke posisi 0px dari kiri (x), dan 100px dari atas (y) Rotate(hrs) = css untuk memutar objek yang menunjukan jam Rect mengatur jarak (atas, kanan,bawah,kiri) Memanggil class resetMatrix() . Calss ini dijalankan, dan terdapat di script processing.js Float min= pengaturan perputaran jarum menit Traslate= memindahkan objek ke posisi 700px/2 dari kiri (x), dan -700px/2 dari atas (y) Rotate(hrs) = css untuk memutar objekyang menunjukan jam Rect mengatur jarak (atas, kanan,bawah,kiri)
  6. 6. variabel a mendapat element ID dengan nama my canvas variable ctx yang dideklarasikan dengan nama a bertipe 2d rectangle yang dibuat berwarna putih x,y,panjang ,lebar karena kodingannya memiliki banyak baris dan merupakan pengertian yang sama dengan baris diatas maka kami mendeskripsikan cntoh baris yg paling atas.

×