Pengantar Teknologi Internet

Presentasi berjudul: "Pengantar Teknologi Internet"— Transcript presentasi:

1 Pengantar Teknologi Internet
W02: Web 2.0 & XHTML

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

3 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

4 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

5 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

6 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!

7 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

8 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

9 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

10 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

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

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

13 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

14 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

15 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

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

17 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

18 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

19 XHTML

20 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

21 Contoh XHTML <?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!-- Our first Web page --> <html xmlns = " <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <p>Welcome to XHTML!</p> </body> </html>

22 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

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

24 Contoh Headings <?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns = " <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>

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

26 Contoh Links <?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns = " <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <h1>Heading 1</h1> <p>Go to <a href=“ <p>Send <a </body> </html>

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

28 Contoh Images <?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns = " <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>

29 Special Characters < > & &

30 Contoh Lists <?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns = " <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>

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

32 Contoh Table <?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns = " <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>

33 Contoh Forms <?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns = " <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>

34 Contoh Meta tags <?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns = " <head> <title>Internet and WWW How to Program - Welcome</title> <meta http-equiv="Content-Type" content="text/html; charset=iso " /> <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>