Pengantar Teknologi Internet W02: Web 2.0 & XHTML

Objectives Jenis Aplikasi Web Rich Internet Applications Model Bisnis Web XHTML Sintaks Dasar Pendukung XHTML

Web 2.0 Terminologi ini pertama kali dibuat oleh Dale Dougherty (O’Reilly Media) di tahun 2003 Banyaknya individual dan perusahaan yang menggunakan dan menggembangkan web Dipopulerkan di O’Reilly Media Web 2.0 Summit di tahun 2004

Faktor Pendukung Web 2.0 Faktor-faktor yang mendukung perkembangan Web 2.0: Perangkat keras yang semakin murah dan cepat Penetrasi dari Broadband Internet di berbagai tempat Tersedianya banyak open-source software yang berguna bagi perusahaan kecil bermodal kecil Model bisnis yang bisa menghasilkan uang dibandingkan jenis Web di sekitar tahun 1990-2000

Web 2.0 Web 1.0 difokuskan dalam ketersediaan informasi untuk pemakai/user dari berbagai perusahaan dan advertiser Kita tidak mempunyai definisi nyata dari Web 1.0 Dianalogikan sebagai Lecture / Informing Web 2.0 mengikutsertakan user untuk membuat dan mengupdate informasi tersebut Remember Social Networking? Dianalogikan sebagai Conversation

Search Engine Perkembangan dari Web 2.0 tidak luput dari munculnya berbagai search engine provider Search Engine adalah alat yang digunakan dalam mencari informasi di dalam suatu web Contoh Search Engine provider: Google Microsoft Bing (Live) Yahoo!

Wikis Ini merupakan salah satu tipe website sebagai penyedia informasi informasi yang ada dapat dengan mudah ditambah atau diedit oleh penggunanya Hal yang menjadi permasalahan mendasar adalah mengenai akurasi dari informasi / artikel di dalam web wiki tersebut Contoh http://www.wikipedia.org

Blogging “Evolusi” tingkat lanjut dari weblog Pertamakali muncul sebagai website yang berisi daftar website menarik yang selalu terupdate Namun lebih populer saat ini sebagai short essay atau personal journal dari penulisnya

Komponen Umum dari Blog Reader Comments Tempat untuk memberikan komentar terhadap suatu artikel Permalinks Cara untuk menghubungkan ke artikel suatu blog Trackback Cara penulis untuk mengetahui siapa saja yang memberikan tautan ke artikelnya Blogroll Daftar favorit blog

Social Networking Web ini memberikan kemudahan kepada penggunanya untuk mengetahui keadaan interpersonal relationship sekaligus untuk menambah hubungan baru dengan yang lain Web 2.0 identik dengan menjamurnya Social networking websites  “Conversation amongst users” Contoh: Friendster MySpace Facebook LinkedIn

Social Media Tempat untuk bertukar informasi untuk segala jenis media Media yang dimaksud meliputi: photo, video, music, news Contoh: YouTube Flickr Digg Technorati

Tagging Teknik untuk memberikan label dalam mengorganisasikan dan mengidentifikasikan berbagai konten webg Tag Cloud  merupakan visualisasi dari popular tag yang umumnya digunakan di blog

Social Bookmarking Jenis web ini mempunyai fitur untuk untuk men-sharing Internet bookmarks kepada masyarakat luas Contoh: del.icio.us Menggunakan tagging, social networking dan user-generated contents Stumble-Upon

Rich Internet Applications (RIA) Adalah aplikasi web yang mempunyai hal-hal berikut: Respons cepat Kaya fitur Menyamai fitur aplikasi desktop RIA merupakan hasil gabungan berbagai macam teknologi perangkat lunak baik dimulai dari browser maupun plugin-nya dan developer tools. Contoh tools: Adobe Flex OpenRico.org

AJAX AJAX  Asynchronous JavaScript & XML Teknologi ini mengijinkan developer untuk meng-update bagian dari webpage nya dibandingkan harus untuk membaca ulang seluruh isi webpage. Komponen yang digunakan antara lain: XHTML CSS JavaScript DOM XML XMLHttpRequest Object

AJAX Keuntungan: Kerugian: Bandwidth lebih kecil dalam bertukar data Lebih interaktif Kerugian: Pemrograman yang lebih kompleks Web browser akan terasa lebih berat

Web 2.0 Monetization Models Sumber pendapatan perusahaan Web 2.0 umumnya sangat tergantung dengan “advertising” Contoh beberapa model yang ada: Affiliate Program Blog Advertising Cost-per-click (CPC) Paid Blog Post

Web 2.0 Business Models Seiring dengan lahirnya Web 2.0, ini membuka banyak model bisnis baru yang bisa diterapkan menggunakan teknologi yang ada Model bisnis tersebut antara lain: Blog Search Engine Domain name Registrar File Sharing Online Survey Site Online Auction Online Advertising Social Networking Site

XHTML

XHTML XHTML  Extensible HyperText Markup Language Merupakan “markup language” yang memberikan format spesifikasi dari teks yang akan ditampilkan melalui web browser XHTML memisahkan cara penampilan dan isi struktur dari dokumennya HTML melebur semuanya dalam satu dokumen

Contoh XHTML <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Our first Web page --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <p>Welcome to XHTML!</p> </body> </html>

Validasi Dokumen XHTML harus ditulis dengan benar agar dapat ditampilkan secara benar di berbagai macam browser W3C memberikan servis validasi (validator.w3.org) untuk melakukan cek terhadap isi sintaks dokumen Browser Firefox mempunyai plugin seperti TidyHTML untuk validasi yang sama

Headings XHTML mempunyai 6 element heading yang diwakili oleh tag h1 hingga h6 h1 menggunakan font yang lebih besar dibandingkan h2, dan seterusnya

Contoh Headings <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> </body> </html>

Linking Hyperlink merupakan aspek terpenting dari XHTML Isi dari hyperlink dapat berupa untuk navigasi ke page lain ataupun untuk membuka email client Link dapat dibuat menggunakan elemen a (anchor).

Contoh Links <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <h1>Heading 1</h1> <p>Go to <a href=“http://www.adobe.com”>Adobe</a></p> <p>Send email <a href=“mailto:my@email.com”>my@email.com</a></p> </body> </html>

Images Dapat direpresentasikan menggunakan img element Atribut Width dan Height untuk menentukan ukuran lebar dan tinggi dari gambar Menggunakan ukuran satuan pixel

Contoh Images <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <h1>Heading 1</h1> <p><img src=“myimage.jpg” width=“80” height=“60” alt=“image teks”/></p> </body> </html>

Special Characters < > & & © ©

Contoh Lists <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <h1>Heading 1</h1> <ul> <li>Item 1</li> <li><a href=“item2.html”>Item 2</a></li> </ul> </body> </html>

Tables Table tag digunakan untuk memreprentasikan data menjadi kolom dan baris Mempunyai attribut seperti: Width Border Summary Cellspacing, cellpadding

Contoh Table <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <table border=“1” cellspacing=“2” cellpadding=“2”> <thead> <tr><th>No</th><th>Konten</th></tr> </thead> <tbody> <tr><td>1</td><td>Good</td></tr> </tbody> </table> </body> </html>

Contoh Forms <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <form id="form1" name="form1" method="post" action=“login.php"> <label>Username <input type="text" name="textfield" /> </label> <br /> <label>Password <input type="text" name="textfield2" /> <label>Login <input type="submit" name="Submit" value="Submit" /> </form></body> </html>

Contoh Meta tags <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="web page, tutorial, design, programming, html" /> <meta name="description" content="description here" /> </head> <body> <h1>Heading 1</h1> <ul> <li>Item 1</li> <li><a href=“item2.html”>Item 2</a></li> </ul> </body> </html>