03 Teknologi Web 2

New Web Technology (2008) Herman Tolle, ST., MT. Disain & Pemrograman Web Informatika & Komputer Teknik Elektro Universitas 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 2 32 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 2 24 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, Yahoo360 0 ,
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

Contoh 3-Tier Dec 4th MS Project Presentation Browser ASP.NET WEB APPLICATION (C# ASPX Pages and ASP.NET AJAX) XML WebService XML MYSQL Fetches/Updates XML files Stores Account information Configuration files

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
Dec 4th MS Project Presentation

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.0
Web 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 di parse dapat ditampilkan dalam bentuk yang berbeda dengan bentuk aslinya

Traditional Web Reading World Wide Web HTML Files You CNN.com Craig’s List Freebies Dilbert New York Times One Northwest

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 RSS RSS RSS You Newsreader CNN.com New York Times Dilbert

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 – Pluck
Good 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

It’s Hard to Define, But I Know it When I See it…
Web Services / API’s
“ Folksonomies” / Content tagging
“ AJAX”
RSS
Cuene.com/mima Emerging Tech Apps You Know…
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 Capabilities Time Web Next Gen Clients Dumb Terminal PC CUI PC GUI Client-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.

XML Web Services
XML Web Services allow applications to communicate and share data over the internet, regardless of operating system or programming language.
Defined through public standards organization such as the W3C.

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.

Next Generation Global Communication

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
Cross-platform interoperability
Multi-language support
Code reuse
Automatic resource management
Type safety
Debugging
Error handling
Elimination of DLL hell
Security

.NET Framework—Architecture Operating System Common Language Runtime Common Language Specification VB.NET C# … Visual Studio .NET Base Class Library ADO .NET and XML ASP .NET Web Forms Web Services Windows Forms

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

J2EE
J2EE is an industry standard, and is the result of a large industry initiative led by Sun.
It's important to realize that J2EE is a standard, not a product. You cannot "download" J2EE.
Rather you download a set of Adobe Acrobat PDF files which describe agreements between applications and the containers in which they run. So long as both sides obey the J2EE contracts, applications can be deployed in a variety of container environments.
More…

J2EE
The J2EE camp's goal is to give customers choice of vendor products and tools, and to encourage best-of-breed products to emerge through competition. The only way this would ever happen is if the industry as a whole were bought-into J2EE.
To secure buy-in, Sun collaborated with other vendors of eBusiness platforms, such as BEA, IBM, and Oracle, in defining J2EE. Sun then initiated the Java Community Process (JCP) to solicit new ideas to improve J2EE over time.

J2EE Web Services
J2EE has historically been an architecture for building server-side deployments in the Java programming language. It can be used to build traditional web sites, software components, or packaged applications.
J2EE has recently been extended to include support for building XML-based web services as well. These web services can interoperate with other web services that may or may not have been written to the J2EE standard.
More…

J2EE Web services

.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 J2EE ANALOGIES

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
Security
Hey 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)

http://ayo-cari.com	279
http://anisganteng.wordpress.com	195
http://www.slideshare.net	7

03 Teknologi Web 2

by Herman Tolle

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 481

Statistics

03 Teknologi Web 2 Presentation Transcript