Teknologi Web 2009
FAJAR SAPTONO, ST
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, egovernment, SIM Kepegawaian, SIAKAD, Project Management Application, Online Monitoring, Web Surveillance, dll
3-Tier Architecture
Contoh 3-Tier
XML Browser ASP.NET WEB APPLICATION (C# ASPX Pages and ASP.NET AJAX) MYSQL Stores Account information
Dec 4th MS Project Presentation 13
WebService
Fetches/ Updates XML files
XML
Configuration files
Contoh Implementasi 3Tier
• GUI/Presentation: ASP.NET 2.0, ASP.NET AJAX, Object Oriented JavaScript, HTML • Business Objects: C#.NET, ADO.NET • Database: • Web Server:
Dec 4th
XML, MySQL IIS, Apache
MS Project Presentation 14
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
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
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 lainlain) – 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. • Informasi yang dapat diparse dapat ditampilkan dalam bentuk yang berbeda dengan bentuk aslinya
Traditional Web Reading
You
World Wide Web
CNN.com
Craig’s List Freebies
Dilbert
New York Times
One Northwest
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
RSS RSS RSS
CNN.com
New York Times
Dilbert
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
Emerging Tech
It’s Hard to Define, But I Know it When I See it…
• • • • Web Services / API’s “Folksonomies” / Content tagging “AJAX” RSS • • • • • • • • Flickr Google Maps Blogging & Content Syndication Craigslist Linkedin, Tribes, Ryze, Friendster Del.icio.us Upcoming.org 43Things.com
Apps You Know…
"[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
Some Apps You Don’t know Major Retailers
• • • •
Amazon API’s Google Adsense API Yahoo API Ebay API
Cuene.com/mima
Web Development Issues
Web Design Issues
• Usability • Accessibility
Web Development Issues
• • • • Web Services Platform Framework Web 2.0 AJAX
Next Generation Client
Client-Server
Next Gen Clients
PC GUI
Web
Capabilities Capabilities
PC CUI
Dumb Terminal
Time
53
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 SOAPbased 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.
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
Idea:
– Web as a collaborative environment. – More automated, voice-activated, anywhere, anytime Web environment.
.Net Platform
• 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. 2. 3. 4. 5. 6. 7. 8. 9. Cross-platform interoperability Multi-language support Code reuse Automatic resource management Type safety Debugging Error handling Elimination of DLL hell Security
.NET Framework— Architecture
VB.NET C# … Common Language Specification Visual Studio .NET Visual Studio .NET ASP .NET
Web Forms Web Services
Windows Forms
ADO .NET and XML Base Class Library Common Language Runtime Operating System
67
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
68
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 service s
.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)