• Solo Great Sale

    Solo Great Sale Powered By Circle Card 2015

  • Solo Great Sale

    Solo Great Sale Powered By Circle Card 2015

  • Oracle Java Magazine

    As Cover of Oracle Java Magazine March/April 2012 issue

  • Launching jDuchess Indonesia

    Gunadarma University 2011

    www.jduchess.or.id

  • Launching jDuchess Indonesia

    Gunadarma University 2011

    www.jduchess.or.id

  • Launching Java 7

    Binus University 2011

  • Eclipse Democamp

    Microsoft Indonesia 2011

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Launching JENI 2.0

    ITB Bandung 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Java and Android Roadshow

    SMK PGRI 3 Malang 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Launching JENI 2.0

    ITB Bandung 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2011

  • Java and Android Roadshow

    SMK Plus Darussalam Kediri 2012

  • Oracle Academy Seminar

    LIKMI Bandung, 2012

  • Oracle Academy Seminar

    Indonesia University, 2012

  • Seminar Android

    Universitas Budi Luhur 2010

  • Java and Android Roadshow

    SMK Hasan Kafrawi Jepara 2012

  • Sosialisasi Kurikulum 2013

    LPMP Surabaya 2013

  • IOSA

    Indonesia Open Source Award 2011

  • Java Training

    SMKN 02 Sukabumi 2010

  • Sosialisasi Kurikulum

    SMKN 01 Tulungagung 2011

  • Sosialisasi Kurikulum 2013

    LPMP Surabaya 2013

Monday, December 26, 2011

Posted by Netty Herawaty
| 3:27 PM
Dulu waktu saya PRAKERIN (Praktek Kerja Industri) kelas 2 SMK sekitar tahun 2009, saya melihat di salah satu hasil kerjaan senior saya dia bisa membuat berbagai macam form validasi yang menarik bahkan bisa tampil popup. Ketika saya tanya untuk membuat seperti itu menggunakan apa, dia menjawab bahwa pakai jQuery. Dari situlah akhirnya saya coba cari tahu apa itu jQuery dan bagaimana cara menggunakannya.

jQuery adalah libary Javascript siap pakai yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi client (browser). Bisa diartikan jQuery ini menyederhanakan kode Javascript . Misalnya untuk membuat validasi form menggunakan Javascript dibutuhkan kode yang sangat panjang dan cukup rumit, namun dengan adanya jQuery  cukup menambahkan <script src="jquery.validate.js"></script> . Jadi sesuai dengan slogannya "Write less, do more" .


Mengapa menggunakan jQuery ?

a. jQuery bisa memanipulasi class pada CSS sampai dengan CSS3
b. Kompatibel dengan hampir semua browser populer seperti Mozilla, IE, Safari, Chrome, Opera
c. Mempunyai dokumentasi yang lengkap. Kunjungi website resminya disini
d. Fasilitas untuk membuat animasi sekelas Flash
e. Mempunyai plugin yang cukup banyak
f. Dukungan komunitas yang besar
g. OpenSource
h. Memiliki API (Application Programming Interface). Dengan API jQuery dapat memanipulasi content pada halaman web seperti pengubahan text, gambar, paging dll

Cara menggunakan jQuery

1. Download jQuery disini dan simpan di direktori Anda 2. Buka editor, bisa menggunakan Dreamweaver atau Sublime Text 3. Masukkan jQuery library di dalam tag <head>
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>jQuery</title>

<script src="jQuery-1.9.1.min.js"></script>

</head>

<body>

...

</body>

</html>

Nah sangat mudah bukan? untuk contoh penggunaan jQuery lainnya akan saya bahas di postingan selanjutnya.

Tuesday, December 13, 2011

Posted by Netty Herawaty
| 1:47 PM
CSS  merupakan  singkatan  dari  Cascading  Style  Sheet  yaitu  bahasa pemrogaman web untuk mengendalikan tampilan dari sebuah desain web dan digunakan sebagai pengatur format dan layout sebuah halaman web. CSS dapat mengendalikan ukuran gambar, warna, font, border dan lain-lain dalam struktur HTML.

Fungsi dari CSS adalah mempresentasikan halaman yang sama dengan format tampilan yang berbeda.   Dalam  konteks implementasinya,  CSS  didefinisikan  melalui  kode-kode  style  sheet  yang dapat disertakan pada file HTML itu sendiri (embeded), atau terpisah dari file HTML. jika terpisah maka file style sheet harus kita beri ekstensi .css, untuk menandai bahwa file tersebut adalah file CSS. Setelah itu File CSS akan dapat direferensikan oleh HTML.

Maka  dari  itu  CSS  yang dikembangkan oleh  World  Wide  Web (  W3C  ),sekarang  ini  sudah  menjadi standar  baru  bahasa  para  designer  web  untuk  melengkapi kekurangan dari bahasa HTML dalam hal estetika.

Sedangkan untuk CSS3 yang merupakan genderasi ketiga dari versi CSS sebelumnya, dalam segi pengertian tidak jauh beda dengan CSS hanya saja CSS3 memiliki performa style yang jauh lebih baik dan memiliki tambahan fitur. Beberapa dari produsen web browser menetapkan aturan untuk menggunakan CSS3, seperti Mozilla yang menggunakan prefixmoz- pada browser-nya untuk menerjemahkan suatu properti CSS3 dan Opera dengan menggunakan prefix-o-.

Kelebihan CSS3

a. Interface website menjadi lebih menarik dan interaktif
b. Struktur data sederhana
c. CSS3 menyediakan efek animasi sehingga kita tidak membutuhkan plugin tambahan seperti Adobe Flash
d. CSS3 bisa memberikan efek grafis terhadap teks. kolom, table serta penataan huruf
e. CSS3 bisa mengurangi file yang akan di load sehingga halaman web lebih ringan

Fitur Baru CSS3

1. Properti Border

a. Border Color
b. Border Image
c. Border Radius
d. Box Shadow

2. Properti Background

a. Background Origin
b. Background Clip
c. Background Size
d. Multiple Background

3. Properti Color

a. HSL Color
b. HSLA Color
c. RGBA Color
d. Opacity

4. Properti Text

a. Text Effencts
b. Text Shadow
c. Text Overflow
d. Wordwrap

5. Properti User Interface

a. User Interface
b. Box Sizing
c. Outline
d. Resize

6. Properti Navigation

a. Nav Top
b. Nav Bottom
c. Nav Left

7. Properti Selector

a. Attribute Selector

8. Properti Lainnya

a. Basic Box Model
b. Overflow X
c. Overflow Y
d. Generated Content
e. Content
f. Other Modules
g. Media Queries
h. Multi Column Layout
i. Web Font
j. Speech

Tuesday, December 6, 2011

Posted by Netty Herawaty
| 11:37 AM
Untuk memperdalam penggunaan HTML5 dalam desain web, diperlukan pemahaman tentang struktural yang ada pada HTML5. Perlu diketahui setiap elemen memiliki pasangan masing-masing misal : <head>...</head> , <body>...</body> .

Untuk struktur secara umum masih sama dengan HTML versi sebelumnya
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Struktur HTML 5</title>

</head>

<body>

…

</body>

</html>

Ada beberapa tag baru sesuai dengan fitur dimiliki HTML 5. Penjelasan mengenai fitur baru ini bisa dibaca pada postingan saya sebelumnya .

<header>

Sering digunakan sebagai header atau bagian atas dalam halaman html, digunakan untuk menempatkan logo, judul dari website dan navigasi. Header juga bisa diletakkan diantara <section> untuk menandakan judul dari sebuah section
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Struktur HTML 5</title>

</head>

<body>

<header>

...

</header>

</body>

</html>

<section>

Elemen yang digunakan untuk mengelompokkan beberapa elemen yang sejenis, misalnya jika  kita  akan menampilkan  beberapa  artikel   dalam  satu  halaman,  maka  bisa  menggunakan  tag section.
<!DOCTYPE html>
<html>
<head>
 <meta charset=”utf-8”>
 <title>Struktur HTML 5</title>
</head>
<body>
 <section>
  <h1>HTML 5</h1>
   <section>
    <h1>Tentang</h1>
    <p>HTML 5 adalah pengembangan dari versi sebelumnya.....</p1>
   </section>
 </section>
</body>
</html>

<nav>

Elemen yang digunakan untuk menampilkan menu navigasi. <nav> dapat digunakan diluar atau di dalam elemen lainnya seperti <aside>, <header> atau <footer>
<!DOCTYPE html>
<html>
<head>
<title>Struktur HTML 5</title>
</head>
<body>
<nav> 
<ul> 
<li><a href="#">Beranda</a></li> 
<li><a href="#">Tentang</a></li> 
<li><a href="#">Kontak</a></li> 
</ul> 
</nav>
</body>
</html

<article>

Tag ini digunakan untuk menampilkan satu artikel penuh dalam halaman html, artikel terdiri dari judul, sub judul, catatan dan deskripsi. Berikut contoh penggunaan <article> pada html.
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Struktur HTML 5</title>

</head>

<body>

<section>

<h1>Article Terbaru</h1>

<article>

<h2>Apa Kelebihan HTML 5 ?</h2>

<p>HTML 5 memiliki beberapa fitur baru.....</p1>

</article>

</section>

</body>

</html>

<aside>

Tag ini lebih sering digunakan sebagai pengganti div sidebar, digunakan untuk mendefinisikan sidebar pada halaman html. Untuk menggunakannya dapat menggunakan kode <aside> … </aside>
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Struktur HTML 5</title>

</head>

<body>

<section>

<h1>Navigasi</h1>

<aside>

<ul>

<li><a href="#">Beranda</a></li>

<li><a href="#">Tentang</a></li>

<li><a href="#">Kontak</a></li>

</ul>

</aside>

</section>

</body>

</html>

<footer>

Tag  ini  sering  digunakan  pada  bagian  bawah  tampilan  html,  dan  digunakan  untuk menampilkan informasi copyright, author atau navigasi. Di bawah ini merupakan contoh kode dari penggunaan footer.
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Struktur HTML 5</title>

</head>

<body>

<footer>

Copyright © 2011 Nety Herawaty. All rights reserved.

</footer>

</body>

</html>

Saturday, December 3, 2011

Posted by Netty Herawaty
| 10:44 AM
HTML merupakan singkatan dari Hyper  Text  Markup  Language yang merupakan file teks atau file ASCII yang berisi  instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis  dari  sebuah  halaman  web.  Di  dalam  file  HTML  terdapat  beberapa  atau  kode-kode  yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.

HTML5  adalah  sebuah  revisi  dan  hasil pengembangan  yang  kelima  dari HTML.  Tujuan  utama pengembangan  HTML5  adalah  untuk memperbaiki  teknologi  HTML  agar mendukung teknologi multimedia terbaru, mudah dibaca oleh Pengguna dan dapat dimengerti oleh Semua Browser dan Operating System. HTML5 merupakan sebuah pemgembangan dari HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah. HTML5 dikembangkan oleh W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group).


Fitur baru pada HTML 5 :

1. Canvas

tag <canvas> berfungsi untuk menampilkan kertas gambar sehingga pengguna dapat menggunakan canvas untuk menggambar ataupun menulis tanpa menggunakan plugin

2. Video and Audio

Jika kita ingin menampilkan video atau audio pada website, kita akan membutuhkan plugin seperti adobe dengan format .swf dan .flv. Namun dengan HTML 5 kita tinggal menggunakan tag <audio> dan <video>

3. New Attibutes

Atribut baru <form>
a. autocomplete
b. novalidate
Atribut baru <input>
a. autocomplete
b. autofocus
c. form
d. formaction
e. formenctype
d. formmethod
e. formnovalidate
f. formtarget
g.height and width
h. list
i. min and max
j. multiple
k. pattern (regexp)
l.placeholder
m. required
n. step

4. Semantic Element

HTML5 menawarkan elemen-elemen semantik baru yang berbeda dalam halaman website
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

5. Application Cache

HTML 5 mengenalkan Application Cache yang berarti aplikasi dalam website telah "tersimpan" dan dapat di akses tanpa membutuhkan koneksi ke internet.

Keuntungan application cache :
1. User dapat melakukan browsing tanpa membutuhkan koneksi internet
2. Data yang cached dapat di load dengan lebih cepat
3. Browser hanya dapat me-load data yang di update dari server, selebihnya tidak akan di load ulang

Untuk struktur penulisan HTML 5 akan saya bahas on my next post :)