03 Teknologi Web 2

New Web Technology (2008)

Herman Tolle, ST., MT.Disain & Pemrograman WebInformatika & KomputerTeknik ElektroUniversitas Brawijaya Malang 2008

Outline

• Web Classification• Internet for Sharing Resource• Web Development Technology• Web Development Team

Pengaturan Alamat IP• Mengapa perlu pengaturan ?

– Karena Internet bersifat global, perlu namespace yang bersifat global pula (agar tidak ada alamat kembar)

– Keterbatasan ketersediaan alamat (IPv4 – hanya 232 alamat)

• Pengaturan secara global dilakukan oleh ICANN (Internet Corporation for Assigned Names & Numbers), khususnya oleh entitas IANA (Internet Assigned Numbers Authority)– IANA mendelegasikan alokasi dan registrasi alamat IP ke Regional Internet

Registry (RIR)• American Registry for Internet Numbers (ARIN) Amerika Utara• RIPE Network Coordination Center Eropa, Timur Tengah, dan Asia Tengah• Asia-Pacific Network Information Center (APNIC) Asia dan Pasifik• Latin American and Carribean Internet Address Registry Amerika Latin dan Karibia• African Network Information Center (AfriNIC) Afrika

– Alokasi oleh IANA ke RIR berupa “potongan-potongan” (chunks) besar, mis. berukuran 224 alamat, RIR kemudian melakukan alokasi ke ISP dan organisasi lainnya

Pengaturan Nama Domain

• Nama domain untuk memudahkan mengingat alamat IP• Nama domain menuruti suatu struktur hirarkis• Top level domain sebagai “root”

– Generic TLD (gTLD): com, edu, mil, gov, …– Country Code TLD (ccTLD): us, au, jp, id, my, sg, ...diikuti dengan second level, third level, dst. (subdomain)

• Harus diregistrasikan agar dikenal via domain name system (DNS)• Nama domain telah menjadi komoditi ekonomis: bisa

diperjualbelikan, sarana marketing, sasaran serangan, dsb. (contoh: cybersquatting – menggunakan nama domain yang mirip dengan nama/merk/brand yg sudah dikenal, untuk mendapatkan keuntungan)

Kategori Web

• Berdasarkan ekstensi domain:– Generic Top Level Domain (gTLD)– Country Code Top Level Domain (ccTLD)– Second Level Domain (SLD)

• Berdasarkan konten (isi)• Berdasarkan fungsionalitas

Kategori Web: Top Level Domain

• Berdasarkan ekstension domain web (generic top level domain (gTLD)):– Pemerintahan (.gov)– Komersial / Company (.com) – Pendidikan (.ac /.edu)– Organisasi non-profit (.org)– Network (.net)– Militer (.mil)

• Ekstensi baru: .info, .biz, .tk, .tv,

Country Code Top Level Domain

• Top level Domain dalam bentuk kode negara, dikombinasi dengan Second Level Domain, misalnya: – gov menjadi go.id, – com co.id, – org or.id

• Top Level Domain dalam bentuk kode negara disebut Country Code Top Level Domain (ccTLD)

• Misalnya: .au (Australia), .uk (Inggris), .sg (Singapura), .jp (Jepang), .nl (Belanda), dll

• Saat ini terdapat lebih dari 250 CCLD

Basic Website Type

• News/Information Dissemination• Portal • Community• Search• E-Commerce• Company/Product Information• Entertainment

Kategori Berdasar Konten

• Portal: www.yahoo.com, www.lycos.com, www.astaga.com

• Berita/diseminasi informasi: www.detik.com, www.liputan6.com, www.kompas.co.id

• E-Commerce: www.amazon.com, www.bhinneka.com • Search Engine: www.google.com, www.yahoo.com • Komunitas: www.kafegaul.com, www.friendster.com • Pendidikan (e-learning, digital library, e-journal,

ensiklopedia, dll): www.brawijaya.ac.id, www.itb.ac.id, wikipedia

• Official Company/Product: www.experd.com, www.• Hiburan, hobbyist, pribadi, dll.

New Trend

• Social Networking:– Friendster, Hi5, Multiply, MySpace, Yahoo3600, – LinkEd, Flixster, Facebook, Fupei

• Sharing resource– RapidShare, YouTube, PhotoBucket, EyeSpot

• Blog– Blogger, WordPress, Bloglines, Webblog

• Online Collaboration/Process– Virtual Classroom, Virtual Laboratory, Online Office,

Online Editing Image/Video

Berdasarkan Fungsi

• Web Application: Adalah web site yang lebih interaktif, akses data yang besar, dan menyediakan fungsionalitas layaknya aplikasi desktop.

• Web aplikasi merupakan implementasi dari arsitektur 3-tier ysng terdiri dari: web browser, web server dan database

• Web Application for Communication: email client, messenger/chat, voip client, dll

• Special Function Web Application:Contoh: e-procurement, e-learning, e-government, SIM Kepegawaian, SIAKAD, Project Management Application, Online Monitoring, Web Surveillance, dll

Web Application

• As a Web site becomes more complex, a robust and efficient mechanism for the separation of content, presentation, and logic is necessary. Web application servers are Web sites that are more interactive, access large amounts of data, and provide a rich functionality similar to that of desktop applications. Unlike desktop applications, where all components are stored and executed on the same computer, Web applications usually follow a three-tier client/-server architecture (see Figure 5) consisting of the Web browser, the Web server, and a database. All content and logic are stored in the database and are retrieved and processed as necessary on the Web server.

• The presentation information can be embedded with the content or stored as a separate style sheet on the database or the server.

3-Tier Architecture

Dec 4th MS Project Presentation 14

Contoh 3-Tier

BrowserASP.NET

WEBAPPLICATION

(C# ASPX Pages and

ASP.NET AJAX)

XML

WebServiceXML

MYSQL

Fetches/Updates XML files

Stores Account information

Configuration files

Dec 4th MS Project Presentation 15

Contoh Implementasi 3-Tier

• GUI/Presentation: ASP.NET 2.0, ASP.NET AJAX, Object Oriented

JavaScript, HTML • Business Objects: C#.NET, ADO.NET

• Database: XML, MySQL

• Web Server: IIS

Internet sebagai media Resource Sharing

berbagi:• Ilmu, pengetahuan dan teknologi• Pengalaman dan opini• Data dan informasi• File: multimedia (teks, dokumen, audio,

video)• Sumberdaya hardware

Fitur untuk resource sharing

• Web• FTP • XML• Wiki • Blog• RSS• Search Engine• New Fitur

Teknologi Awal

• Website: halaman web yang dibuat dengan HTML, pemrograman web (client atau server side) dan database

• Web dapat berisi informasi apapun atau link ke resource yang dapat diakses dan didownload

• FTP server: menyimpan file-file dalam direktori yang dapat diakses dan didownload. Mis: ftp.brawijaya.ac.id

• Content Management System (CMS)

Teknologi Kini Web 2.0

• Weblog• Wiki• RSS• XML

Web 2.0

• “A perceived second generation of web-based communities and hosted services which aim to facilitate collaboration and sharing between users” (Wikipedia)– Situs-situs social networking: Friendster, …– Wikis (a medium which can be edited by anyone with access to it,

and provides an easy method for linking from one page to another): Wikipedia, …

– Folksonomies (the practice and method of collaboratively creating and managing tags to annotate and categorize content

• del.icio.us (social bookmarking web services for storing, sharing, and discovering bookmarks)

• Flickr, Picasa (web photo album)

Web 2.0Web 2.0 tidak merujuk pada spesifikasi teknis, tetapi lebih pada perubahan tentang bagaimana pengembang software dan pemakai Web menggunakan Web sebagai platform

http://en.wikipedia.org/wiki/Image:Web_2.0_Map.svg

Content Management System

• Content Management System (CMS): aplikasi yang digunakan untuk membuat website dengan mudah tanpa harus mempunyai pengetahuan disain web atau pemrograman web. – Mis: Mambo, Joomla, OpenCMS, AuraCMS, dll

• Bersifat open source dan tersedia secara gratis• Menyediakan berbagai fitur yang mudah

digunakan: News, Article, Guestbook, Search Engine, dll

What is Wiki?

• Webiste kolaborasi yang dapat diedit dengan mudah oleh siapapun secara langsung.

• Berfungsi sebagai referensi / ensiklopedia online tentang berbagai hal

• Konten disumbangkan (dengan bertanggung jawab) oleh siapa saja secara bebas dan terbuka (tanpa login)

• Dapat dimanfaatkan untuk mencari informasi teknis tentang berbagai hal

Wiki Examples

• Wikipedia (http://www.wikipedia.org)• World Wide Wiki (

http://www.worldwidewiki.net)• World66 (http://www.world66.com)• OpenGuides (http://openguides.org)• Source Watch (http://www.sourcewatch.org)

XML

• Markup language yang setara dengan HTML tetapi lebih berfungsi untuk menyimpan data

• Format standar yang digunakan untuk mempertukarkan data antar server

• Tersusun dalam bentuk elemen-elemen tag yang didefinisikan sendiri oleh pembuat dokumen tersebut

• Digunakan pada sebagian besar aplikasi web service untuk pertukaran data sebagai bagian dari information resource sharing antar server / aplikasi

Karakteristik XML

• platform independent, excellent portability, application independent,

• Excellent searching capabilities, syncronisation, can Store any type of data, excellent for interaction between IS systems

XML Document Structure

ELEMENTS

What is a Weblog?

• Weblog (a.k.a. “blog”) = web + log• Sebuah teknologi yang memungkinkan

seseorang melakukan publishing di web dengan sangat mudah

• Isi weblog dapat tersusun berdasarkan kronologi waktu atau berdasarkan kategori

• Webblog dapat dianggap sebagai personal journal atau diary, but it is much more!

How does it work?

Yang dilakukan pemilik blog (blogger):• Login ke blog di web• Menuliskan sesuatu pada template form input dan submit• Input tersebut langsung terpublish ke internet • Software Blog mengorganisasi input berdasarkan tanggal

input maupun kategori, dan secara mudah dapat di search. Pembaca blog mengakses url blog:• Dapat membaca blog, memberi komentar, membuat link ke

blog pribadinya maupun melakukan pencarian tertentu dari isi blog

Who uses Weblogs?

• Siapa saja yang mampu untuk mengetik pada komputer• Tidak membutuhkan pengetahuan tentang disain web /

html • Digunakan secara luas sebagai personal journal, diary,

sharing ide, opini maupun media diskusi online• Saat ini telah berkembang pesat menjadi mainstream

channels of news distribution, scholarly exchange of opinions, dan membangun komunitas di dalam maupun luar kelas

• Bloggers mulai dari anak-anak hingga orang tua • Tersedia banyak layanan Free weblog hosting

– Mis: Blogger.com, livejournal.com

The Anatomy of a Weblog

• Posts• Title• Comments• Permalinks• Blogroll• RSS Feed

Some Example Blogs

• http://www.nerdgirl.com – A ‘normal’ person (purely social site)

• http://weblogs.mozillazine.org/roadmap/ [1]– Inventor of JavaScript – roadmap for development team

• http://blogs.msdn.com/dmassy/archive/2004/06/16/157263.aspx– Internet Explorer development team member

• http://www.joelonsoftware.com/– Articles on software development

• http://dear_raed.blogspot.com/2003_02_01_dear_raed_archive.html [2]– Reported from inside Iraq before and during last year’s war

RSS

Pengertian RSS• RSS adalah salah satu format web feed yang ditulis dalam

format XML (eXtensible Markup Language) dan digunakan untuk berbagi atau menginformasikan suatu konten digital yang sering di-update, seperti blogs, news feed, atau podcast.

RSS dapat diartikan: • Rich Site Summary (RSS 0.91)• RDF Site Summary (RSS 0.9 dan 1.0)• Really Simple Syndication (RSS 2.0)

RSS

• Penggunaan RSS sangat pesat akhir-akhir ini, bahkan saat ini RSS juga digunakan untuk memberitahukan daftar perubahan terbaru (revisi) dari suatu buku.

• Banyak istilah yang berkembang seputar RSS, seperti web feed, aggregator, podcast, Atom, web syndication, dll.

• Dua kata kunci yang erat kaitannya dengan RSS, yaitu:– Konten (content, news, video, audio, dan lain-lain)– Perubahan (update, changelog, history, dan lain-lain)

Why RSS?

• RSS menyediakan framework terstruktur untuk informasi

• Informasi yang terstruktur dapat dibaca dan diproses (parse) oleh komputer, seolah-olah membaca database.

• Informasai yang dapat diparse dapat ditampilkan dalam bentuk yang berbeda dengan bentuk aslinya

Traditional Web Reading

You

CNN.comCraig’s ListFreebies

DilbertNew York

TimesOne

Northwest

World Wide Web

HTML Files

Newsreaders / RSS Feed Readers

• Software untuk membaca file RSS dan memproses RSS feed:– Parses– Aggregates– Organizes

• RSS Readers bisa dalam bentuk web (browser) atau aplikasi client

• Memungkinkan user untuk membaca banyak web melalui satu web/aplikasi saja pada saat yang bersamaan

• RSS dari web lain dapat dibaca dengan lebih cepat dibandingkan kalau membuka langsung web tersebut

• The unwieldy web becomes manageable

Reading With a Newsreader

You

Newsreader

CNN.com New York Times Dilbert

RSSRSS

RSS

How RSS works

• A short description of a web site in XML format-called a RSS feed is made available.

• Programs called RSS “aggregators” build these entries into a larger database

• RSS feeds can easily be viewed using a ‘RSS Reader’ program on your desktop or via a browser

• You subscribe to feeds of interest– Similar to building ‘bookmarks’ or ‘favorites’

How RSS works

Siapa yang diuntungkan dengan RSS?

• Pengguna: dapat mengikuti (tracking) suatu topik, khususnya berita, semudah membuka inbox e-mail.

• Pengembang: dengan RSS mudah untuk memberitahukan update konten terbaru, khususnya dengan tujuan akhir untuk meningkatkan jumlah kunjungan ke situs (web traffic).

What websites have RSS Feeds?

• Major News sites – CNN, NY Times, BBC…

• Most noteworthy Weblogs and Wikis• Growing number of Instructional Resources

– MERLOT • Podcasting sites• Look for this symbol on the website

Some popular RSS Feed Readers

• RSS Reader Programs– SharpReader - Win– RSSReader - Win– NetNewsWire – Mac – not free

• Web Based RSS feeders– Bloglines (free)– News is Free (free)– Yahoo! (free)

• Browser Built-in Reader - FireFox• Browser Plugin – PluckGood Source for RSS Readers

– http://blogspace.com/rss/readers

Website mana yang menggunakan RSS?

• Orange XML• Coba diakses dari Newsreader anda• “Syndicate me” atau “Syndicate this site”

Are Blogs Only Ones Using RSS?

• No!– News sites (CNN, NY Times, Yahoo! News)– Service sites (Seattle Public Library, Craig’s List,

Netflix)– Events calendars (upcoming.org)– Photo sharing sites (Flickr.com)

Web terus berkembang

• Aplikasi resource sharing baru selalu muncul• YouTube: sharing file Video• EyeSpot: sharing file animasi• LibraryThing, ShelfAri: Virtual books

collection• And many more …

Affiliation Program

Cuene.com/mima

It’s Hard to Define, But I Know it When I See it…

• Web Services / API’s• “Folksonomies” / Content tagging• “AJAX”• RSS

Emerging Tech

Apps YouKnow…

• Flickr• Google Maps• Blogging & Content Syndication• Craigslist• Linkedin, Tribes, Ryze, Friendster

Some Apps You Don’t know

• Del.icio.us• Upcoming.org• 43Things.com

Major Retailers

• Amazon API’s• Google Adsense API• Yahoo API• Ebay API

"[This is] not my mom's Internet…It's changing, and it's changing because we're looking at the share-shifting—the time people are looking at TV, reading a magazine, listening to the radio—they're not replacing each other; they're coming together." - AOL Exec / May 2005

Web Development Issues

Web Design Issues

• Usability• Accessibility

Web Development Issues

• Web Services• Platform Framework• Web 2.0• AJAX

Next Generation Client

57

Next Gen Next Gen ClientsClients

Ca

pab

iliti

es

Ca

pab

iliti

es

TimeTime

DumbDumbTerminalTerminal

PC CUIPC CUI

WebWebPC GUIPC GUI

Client-ServerClient-Server

Web Services

• First Generation: HTML and CGI—Characterized by Web servers, static HTML pages, HTML FORMS for simple dialogs, and the Common Gateway Interface (CGI) to connect Web servers to application programs, mostly Perl or Shell scripts.

• Second Generation: Java—Server-side dynamic generation of HTML pages and user session support; the Java servlet interface became popular for connecting to application programs.

Web Services

• Third Generation: Application server as Richer development and run-time environments—J2EE as foundation for application servers that later evolved towards the fourth generation.

• Fourth Generation: Web services—Characterized by the introduction of XML and WSDL interfaces for Web services with SOAP-based messaging. A global service infrastructure for service registration and discovery emerged: UDDI. Dynamic Web services aggregation—Characterized by flow systems, business negotiations, agent technology, etc.

AJAX

• AJAX itu sendiri adalah kepanjangan dari Asynchronous Java and XML.

• Istilah AJAX digunakan pada website yang berinteraksi dengan server melalui javascript secara asinkron (background), sehingga pengguna tidak perlu me-load keseluruhan isi page.

• Hal ini menyebabkan pengiritan waktu dan bandwidth, juga menghasilkan website yang makin interaktif.

AJAX

Next Generation Global Communication

Web Development Technology

Web Development Technology

• Browser• Authoring Tools• Development Tools• Development Platform• Web Server Application• Database

Authoring Tools

• Microsoft Frontpage• Macromedia Dreamweaver• Macromedia Fireworks• Macromedia Flash• HomeSite• Adobe GoLive• Graphics Design Tools: Photoshop, dll

Development Tools

• Net Bean untuk Java• Visual Studio untuk .Net

Development Platform

• Server Side Programming:– CGI, ASP, PHP, ColdFusion

• Server Side Platform:– J2EE– .Net Framework (v1, v1.1, v2, v3, v3.5, …)

• Web Service• Interoperability, data interchange: XML

.Net Platform

Idea: – Web as a collaborative environment.– More automated, voice-activated, anywhere, anytime Web

environment.

• A set of services and technologies (an infrastructure) that will enable a programmable, next generation Internet.

• A complete remake of the company’s entire product line.• software integration through the use of XML Web services. • small, discrete, building-block applications that connect to

each other—as well as to other, larger applications—via the Internet.

.NET goals

1. Cross-platform interoperability2. Multi-language support3. Code reuse4. Automatic resource management5. Type safety7. Debugging8. Error handling9. Elimination of DLL hell10. Security

71

.NET Framework—Architecture

Operating SystemOperating System

Common Language RuntimeCommon Language Runtime

Base Class LibraryBase Class Library

ADO .NET and XMLADO .NET and XML

ASP .NETASP .NETWeb Forms Web ServicesWeb Forms Web Services

WindowsWindowsFormsForms

Common Language SpecificationCommon Language Specification

VB.NETVB.NET C#C# ……V

isua

l Stu

dio

.NE

TV

isua

l Stu

dio

.NE

T

72

Key Benefits of the .NET Framework

• ASP.NET– simplify browser-based development

• ADO.NET– a more powerful model for data access

• Deployment– simpler, safer

• Class library– common routines

• New languages– VB.NET and C#

• Web services– new approach to providing computing functionality over the Internet

.NET vs J2EE

• J2EE and .NET are evolutions of existing application server technology used to build enterprise applications.

• The earlier versions of these technologies have historically not been used to build web services.

• Now that web services has arrived, both camps are repositioning their solutions as platforms that you can also use to build web services.

.NET vs J2EE

• The shared vision between both J2EE and .NET is that there is an incredible amount of 'plumbing' that goes into building web services, such as XML interoperability, load-balancing, and transactions.

• Rather than writing all that plumbing yourself, you can write an application that runs within a container that provides those tricky services for you.

.NET vs J2EEANALOGIES

Web Development Team

Planning: Development Team

A cross-disciplinary team includes:– Project manager (Web site manager)– HTML Authors– Programmers– Interface and Interaction designer– Graphic designer– Human factors/ Usability expert– Writers / Editors– Content Owner(s)– Client / customer– User– System/ server administrator– Representative from a Legal department– SecurityHey look, No Webmaster!

Inovasi Teknologi • Ubiquitous connectivity• Broadband• Mobile• User Experience• Search• Personalization with

more effective targeting• User Generated Content

(RSS, blogs, review, video, images, audio, …)

• Music• Payment• Short and long form video• Interactive entertainment• VOIP• Local• Pay per call• Digital Rights

Management (DRM)