Pertemuan 1 Introduction to Web and Internet Mata Pelajaran: TIK 3 Topik: Web Design T.P: 2011/2012 Versi: 2 1. - презентация

1 Pertemuan 1 Introduction to Web and Internet Mata Pelajaran: TIK 3 Topik: Web Design T.P: 2011/2012 Versi: 2 1

2 Learning Outcomes Pada akhir pertemuan ini, diharapkan peserta didikakan mampu : Menjelaskan sejarah World Wide Web Menjelaskan arsitektur Web Menjelaskan konsep dasar pembuatan aplikasi dan pemrograman berbasis web Menjelaskan Konsep Design Pattern dan Framework 2

3 Outline Materi Mengenal World Wide Web Evolusi Web Arsitektur Web Aplikasi Web Bahasa Pemrograman untuk Web Design Pattern dan Framework 3

4 Introduction of Internet A global network of computers was developed 4 decades ago with funding supplied by US Department of Defends Originally designed to connect the main computer system of about a dozen universities and research organizations. 4

5 Introduction of Web Web is powerful channel to delivery content Easy to access, no need special client, just browser Many company want market their company and product live on the Web Web Based application trend increase significantly 5

6 History of the World Wide Web WWW Allows computer users to locate and view multimedia-based documents Introduced in 1990 by Tim Berners-Lee Internet today Mixes computing and communications technologies Makes information constantly and instantly available to anyone with a connection 6

7 Web Evolution Web as static home page: company profile, product, contact number Dynamic Web for supporting Products Query, personalization Hotmail was introduced e-Shopping was introduced B2C, B2B Web Service introduced new paradigm to web Programming 7

8 Web Architecture 8

9 Website Vs WebPage Vs Web Domain Vs Web Hosting Vs Web Browser Vs URL ? WEBSITE : A system of Internet servers that support specially formatted documents. The documents are formatted in a script called HTML (HyperText Markup Language) that supports links to other documents, as well as graphics, audio, and video files. 9

10 WEB PAGE a document on the World Wide Web. Every Web page is identified by a unique URL (Uniform Resource Locator). 10

11 URL Abbreviation of Uniform Resource Locator, the global address of documents and other resources on the World Wide Web. The first part of the address indicates what protocol to use, and the second part specifies the IP address or the domain name where the resource is located. For example, the two URLs below point to two different files at the domain binus.ac.id. The first specifies an executable file that should be fetched using the FTP protocol; the second specifies a Web page that should be fetched using the HTTP protocol: ftp:// 11

12 Four components of a URL 1.The web protocol 2.The name of the web server 3.The directory on that server 4.The file within that directory 12

13 HTTP Short for HyperText Transfer Protocol, the underlying protocol used by the World Wide Web. HTTP defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. For example, when you enter a URL in your browser, this actually sends an HTTP command to the Web server directing it to fetch and transmit the requested Web page. 13

14 Web browser Internet Explorer, Netscape, Opera, Google Chrome maupun Mozilla Firefox 14

15 Elemen Web Browser The five basic elements of a web browser are: Menu bar Toolbar URL bar Workspace Status bar 15

16 Web Domain Badan yang mengurus nama domain disebut Registrar Pihak yang memesan nama atau yang mengajukan nama domain disebut Registrant. Seorang Registrant jika ingin memiliki sebuah nama domain untuk dirinya atau organisasinya harus maka mengajukan aplikasi kepada Registrar. Aplikasi tersebut harus lolos persyaratan berdasarkan kaidah kaidah yang ditentukan oleh Registrar. Contoh domain :.biz.com.edu.gov.info.int.mil.name.net.org 16

17 Web Technologies Web Server Database Server Application Server Firewall SSL HTTPS FTP Domain etc 17

18 Web Application One stop shopping Amazon.com Web Portal yahoo.com Entertainments (games), finance, , Collaborations (groups), Search engine B2B Portal Banking: online banking, payment gateway eCommerce eEducation 18

19 Programming Language Web Design HTML, XHTML Style Sheet (CSS) XML, XSL, XSLT Language Choice: Client Side Scripting: VBScript, Java script Server Side Scripting: PHP, ASP, JSP Java (J2EE) Visual Studio.NET 19

20 Development Tools Content Authoring Notepad Ms Frontpage 2003 Macromedia Dreamweaver 8.0 Programming (IDE) Java: Eclipse, Netbeans 5.5, JDeveloper, JBuilder X.NET: Visual Studio.NET 20

21 Design Pattern and Framework Design Pattern can give us practically way to build good application Design Pattern as a proven recipe for how to designing program Framework simply accelerate web development by providing skeleton, unfortunately framework is not easy to learn for a new beginner Struts Framework 21

22 Softwares Required J2SE 5.0 J2EE or above Editor Netbeans 5.5 or above(built in Apache Tomcat & Struts Framework) Macromedia Dreamweaver. 22

23 Site Map To design your site: Figure out why you are creating this page. What do you want to convey? Think about your audience. How can you tailor your content to appeal to this audience? How many pages will you need? What sort of structure would you like to have? Sketch out your site on paper Devise a simple, consistent naming system for your pages, images, and other external files 23 home productabout usFAQ AB…

24 NAVIGATION Role of Navigation Where am I Where have I been Where can I go Hypertext Links Embedded Links Implicit Links: not defined as such, follow from various properties of the information Computed Links: while the reader is reading, instead of being statically determined in advance by the author. Site Structure Breath vs. Depth 24

25 References Deitel & Deitel, Internet & WWW How To Program Deitel & Deitel, Java How To Program, 6 th edition, 2005 Widodo Budiharto, Panduan Lengkap Pemrograman J2EE, Andi Offset Yogyakarta, 2006 Introduction to Web Programming 4 days: Introduction to Web Design 3 days: x.html x.html