Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

1 Pengantar Teknologi Internet W02: Web 2.0 & XHTML.

Presentasi serupa


Presentasi berjudul: "1 Pengantar Teknologi Internet W02: Web 2.0 & XHTML."— Transcript presentasi:

1 1 Pengantar Teknologi Internet W02: Web 2.0 & XHTML

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

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

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

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

6 6 Search Engine Perkembangan dari Web 2.0 tidak luput dari munculnya berbagai search engine provider 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 Search Engine adalah alat yang digunakan dalam mencari informasi di dalam suatu web Contoh Search Engine provider: Contoh Search Engine provider: Google Google Microsoft Bing (Live) Microsoft Bing (Live) Yahoo! Yahoo!

7 7 Wikis Ini merupakan salah satu tipe website sebagai penyedia informasi Ini merupakan salah satu tipe website sebagai penyedia informasi informasi yang ada dapat dengan mudah ditambah atau diedit oleh penggunanya 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 Hal yang menjadi permasalahan mendasar adalah mengenai akurasi dari informasi / artikel di dalam web wiki tersebut Contoh Contoh

8 8 Blogging “Evolusi” tingkat lanjut dari weblog “Evolusi” tingkat lanjut dari weblog Pertamakali muncul sebagai website yang berisi daftar website menarik yang selalu terupdate 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 Namun lebih populer saat ini sebagai short essay atau personal journal dari penulisnya

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

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

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

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

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

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

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

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

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

18 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 Seiring dengan lahirnya Web 2.0, ini membuka banyak model bisnis baru yang bisa diterapkan menggunakan teknologi yang ada Model bisnis tersebut antara lain: Model bisnis tersebut antara lain: Blog Search Engine Blog Search Engine Domain name Registrar Domain name Registrar File Sharing File Sharing Online Survey Site Online Survey Site Online Auction Online Auction Online Advertising Online Advertising Social Networking Site Social Networking Site

19 19 XHTML

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

21 21 Contoh XHTML "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> Internet and WWW How to Program - Welcome Internet and WWW How to Program - Welcome Welcome to XHTML! Welcome to XHTML!

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

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

24 24 Contoh Headings "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Welcome Internet and WWW How to Program - Welcome Heading 1 Heading 1 Heading 2 Heading 2 Heading 3 Heading 3

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

26 26 Contoh Links "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Welcome Internet and WWW How to Program - Welcome Heading 1 Heading 1 Go to Adobe Go to Adobe Send Send

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

28 28 Contoh Images "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Welcome Internet and WWW How to Program - Welcome Heading 1 Heading 1

29 29 Special Characters << >> && ©©

30 30 Contoh Lists "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Welcome Internet and WWW How to Program - Welcome Heading 1 Heading 1 Item 1 Item 1 Item 2 Item 2

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

32 32 Contoh Table "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Welcome Internet and WWW How to Program - Welcome No Konten No Konten 1 Good 1 Good

33 33 Contoh Forms "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Welcome Internet and WWW How to Program - Welcome Username Username Password Password Login Login

34 34 Contoh Meta tags "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Welcome Internet and WWW How to Program - Welcome Heading 1 Heading 1 Item 1 Item 1 Item 2 Item 2


Download ppt "1 Pengantar Teknologi Internet W02: Web 2.0 & XHTML."

Presentasi serupa


Iklan oleh Google