網站開發技術簡介 國立暨南國際大學 資訊管理學系 陳彥錚
大綱 WWW簡介 JavaScript CSS 其他用戶端Web技術 Server端Web技術 企業網站建置
1. WWW簡介 (1945)Vannevar Bush發表 “As We May Think” (Atlantic Monthly) 超連結(Hyperlink) (Mar. 1989)服務於CERN之Tim Berners-Lee發表 “Information Management: A Proposal” A client/server model for a distributed hypertext system CERN: European Organization for Nuclear Research
WWW技術發展 (1990) Tim BL撰寫第一個Web 瀏覽器: (Sep. 1993) NCSA發表Mosaic browser. WorldWideWeb (Sep. 1993) NCSA發表Mosaic browser. (Mar. 1994) Marc Andreessen & Jim Clark 開設 Mosaic Communications Corp. (後改名Netscape) (Dec. 1994) Netscape發表Netscape Navigator 只支援HTML NCSA: National Center for Supercomputing Applications
HTML and HTTP Web Server Application Browser 1. HTTP Request 2. HTTP Response Web Server Client PC In HTTP, the browser sends an HTTP request. The webserver application program sends back an HTTP response message. HTML Document
Browser Web Server Google Chrome Firefox Safari IE/Edge Opera, … Apache Nginx Microsoft-IIS LiteSpeed Google Servers, … Web Browser Statistics: See Next slide Web Server Statistics: https://w3techs.com/technologies/overview/web_server/all Web Technology Survey: https://w3techs.com/technologies
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers http://gs.statcounter.com/ http://www.w3schools.com/browsers/browsers_stats.asp
Downloading a Web Page with Two Graphics Files HTML Document Browser Web Server Application Client PC 2 Graphics Files Web Server Many people do not realize that the complex webpages they see on their browser screens are created from multiple files. The first file is an HTML document that contains rich text and tags (placeholders) for graphics files, sound files, and other types of files. Webpage Consists of Three Files Rendered as a Single Page On-Screen As Displayed http://ycchen.im.ncnu.edu.tw/www/wwwm.html
Downloading a Web Page with Two Graphics Files HTML Document 1. HTML Document Browser Web Server Application Client PC 2 Graphics Files Web Server Each file download requires an HTTP request-response process. There are three HTTP cycles: one for the HTML document and one for each of the two graphic files. The HTML document is downloaded first because it has tags identifying other files that need to be downloaded. Download Requires 3 HTTP Request-Response Cycles; Downloads HTML Page First It has Tags to Identify Other Files As Displayed
Downloading a Web Page with Two Graphics Files 2. Browser Web Server Application 3. Client PC 2 Graphics Files Web Server <Read the text at the bottom of the slide.> As Displayed
2. JavaScript (Dec. 1995) Netscape Navigator 2.0支援JavaScript 可於Brower中解譯執行的程式語言 <script> for (i=0;i<10;i++) { document.write("<hr size="+2*i+" width=" + 40*i+" color='red'>"); } alert("Welcome to JavaScript Test!\nSee you!"); </script>
Advantages of Using JavaScript Validate user's input. Perform aggregrate calculations. Easily prompt a user for confirmation, alert, pop-up information. Control of Web browser's behaviors and HTML page component's properties. Conditionalize HTML. Perform operations independent of server information. Control of Dynamic HTML. http://ycchen.im.ncnu.edu.tw/moth/ http://www.w3schools.com/js/js_examples.asp
Java (Jan. 1996) Sun公司發表Java程式語言 Java Applet Java應用程式編譯成Bytecode，可在支援JVM (Java Virtual Machine)之環境執行 Java Applet 可在Web瀏覽器執行的Java小程式 <HTML> <title>歡迎使用校務自動化系統</title> <applet codebase="." code="NCNUTeacherApplet“ archive="www.jar“ width=800 height=450> </applet> </HTML>
Google Chrome不再支援Java https://www.java.com/zh_TW/download/faq/chrome.xml
3. Cascading Style Sheets (CSS) 提供網頁設定樣式功能，讓網頁能以更精確與結構化方式顯示網頁版面 Dynamic HTML: JavaScript + CSS <style> a {text-decoration:none;} td {background-color:Ivory;} ul {list-style-image:url(gball.gif);} h2 {color:white; background-color:black; font-size:1in} … </style> http://www.w3schools.com/css/default.asp http://ycchen.im.ncnu.edu.tw/www2011/lab/bf.html
4. 其他用戶端Web技術 瀏覽器之plug-in (附加元件)功能 XML (Extensible Markup Language) Flash (http://ycchen.im.ncnu.edu.tw/doc1/) PDF, Windows Media Player, QuickTime, … XML (Extensible Markup Language) AJAX: Asynchronous JavaScript and XML <?xml version="1.0" encoding="UTF-8"?> <department> <member> <id type="StuCard">s96211341</id> <name>Chia-Chia Liu</name> <email>s96211341@ncnu.edu.tw</email> </member> </department> RSS: http://zh.wikipedia.org/wiki/RSS
http://www.zdnet.com.tw/news/software/0,2000085678,20145297,00.htm
http://chinese. engadget http://chinese.engadget.com/2010/05/10/opera-hakon-wium-lie-and-von-tetzchner-talk-web/
HTML5 Games: http://html5games.com/
HTML5 Games http://html5games.com/
網頁設計應注意事項 兼顧美工與內容 避免使用橫向捲軸 從216種Safety Color 選用顏色 考慮瀏覽器的差異性 (JavaScript, ActiveX, CSS, …) 超連結之正確性 file:///C:/www/radio.html http://192.168.0.1/xx.html
5. Server端Web技術 Common Gateway Interface (CGI) Server端Web程式語言 Database Web Server 與 Server端應用程式之介面 Server端Web程式語言 ASP, JSP, Perl, PHP Database MS SQL Server, MySQL, mSQL, Oracle
Usage of server-side programming languages for websites https://w3techs.com/technologies/overview/programming_language/all
Web Content Management System (CMS) Joomla! http://www.joomla.org/ http://community.joomla.org/showcase/sites.html WordPress Drupal Xoops https://w3techs.com/technologies/overview/content_management/all
6. 企業網站建置 網頁(程式)設計 網站架設 靜態網頁、Flash多媒體、動態網頁程式 電子商務 自行架設 會員制 付款機制: 信用卡、ATM轉帳、貨到付款 網站架設 自行架設 虛擬主機 (Virtual Hosting) 主機代管 (Co-Location)
自行架設網站 硬體： 軟體： 網路： 機櫃式Server、RAID硬碟?、不斷電系統 作業系統、Web 伺服器程式、資料庫 XAMPP IP位址、主機領域名稱 對外頻寬 網路安全及防火牆
虛擬主機 (Virtual Hosting) 由ISP出租架設網站所需之硬體、軟體、網路服務。 專屬領域名稱及網路位址 磁碟空間 網路頻寬 Server端Web程式語言支援 資料庫 後台管理
主機代管 (Co-Location) ISP提供機房與網路，供企業客戶放置自己的主機與網路設備。 IDC (Internet Data Center)服務 機房空間 網路頻寬 提供IP位址 網路管理：流量監測、障礙管理 網路安全: DDoS攻擊、掃毒