h0p://home.hit.no/~hansha/?page=sojware_development Web O. Widder. (2013). geek&poke. Available: h0p://geek- and- poke.com Programming Hans- Pe0er Halvorsen, M.Sc. 1
Web is the Present and the Future 2
Web Programming HTML/HTML5 ASP.NET PHP AJAX JavaScript CSS... O. Widder. (2013). geek&poke. Available: h0p://geek- and- poke.com HTTP Error 500 Internal Server Error 3
History of the Web Internet (1960s) World Wide Web - WWW (1991) First Web Browser - Netscape, 1994 Google, 1998 Facebook, 2004 Smartphones, 2007 Tablets, 2010 4
The Web Browser O. Widder. (2013). geek&poke. Available: h0p://geek- and- poke.com Internet Explorer Firefox Opera Chrome Safari 5
Web Pages Examples 6
The Web Programming Triangle HTML Use HTML to define the content of web pages Web Programming CSS JavaScript Use CSS to specify the layout of web pages Use JavaScript to program the behavior of web pages
Web Programming HTML IIS PHP JavaScript Web Services Web API ASP.NET XML AJAX CSS SQL JQuery 8
HTML CSS JavaScript Basic Web Programming For more Dynamic Web Programming we use e.g., ASP.NET SQL AJAX PHP etc. (But these are not part of this Tutorial) 9
CSS JavaScript Web Server 10
Web Architecture Internet Explorer Chrome Firefox Opera Safari Client Web Browser HTML CSS JavaScript Server- side Web Server 11
Client- Server Example Client Web Browser Response Web Server Request Database Internet Informahon Services (IIS), Apache, etc. 12
Web Plaiorm The Web Browser creates the visual web page you see in the browser based on the HTML code <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html> HTML, CSS, JavaScript Web Browser Client- side The code runs on the server and converted to HTML before sending to client (Web Browser) ASP.NET, PHP,... Web Server Web Page (HTML) Server- side Internet Informahon Services (IIS), Apache, etc. 13
14
Web Server The term web server can refer to either the hardware (the computer) or the sojware (the computer applicahon) that helps to deliver web content that can be accessed through the Internet. The most common use of web servers is to host websites, but there are other uses such as gaming, data storage or running enterprise applicahons. IIS - Internet Informahon Services MicrosoJ Windows Apache Web Server Open Source Cross- plaiorm: UNIX, Linux, OS X, Windows,... Nginx (pronounced "engine x") - Has become very popular latly GWS (Google Web Server)... 15
Web Server h0p://www.digi.no/921119/under- halvparten- bruker- apache 16
HTML HyperText Markup Language (HTML) The Visual appearnce of a Web Site Web Browser Language : All Web Browser understand HTML HTML 5 is the latest Maintened by W3C - World Wide Web Consorhum <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title of the document</ title> </head> <body> Content of the document... </body> </html> 17
CSS CSS Cascading Style Sheets Styles define how to display HTML elements CSS is used to control the style and layout of mulhple Web pages all at once body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } p { } font-family: "Times New Roman"; font-size: 20px; 18
JavaScript JavaScript is the programming language of the Web. All modern HTML pages are using JavaScript. JavaScript is the default scriphng language in all modern browsers, and in HTML5. JavaScript is probably the most popular programming language in the world. It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more. JavaScript can Change HTML Elements! which makes it very powerful! 19
Why JavaScript? JavaScript is one of 3 languages all web developers must learn: 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behavior of web pages This tutorial is about JavaScript, and how JavaScript works with HTML and CSS. 20
Web & ASP.NET Web Browser Server- side Client HTML JavaScript Web Server ASP.NET C#/VB.NET CSS.NET Framework 21
O. Widder. (2013). geek&poke. Available: h0p://geek- and- poke.com AJAX 22
AJAX The key technique in an Ajax web applicahon is the parhal refresh. With parhal refreshes, the enhre page doesn t need to be posted back and refreshed in the browser. Instead, when something happens, the web page asks the web server for more informahon. The request takes place in the background, so the web page remains responsive. When the web page receives the response, it updates just the changed porhon of the page 23
h0p://www.w3schools.com 24
References I. Sommerville, So(ware Engineering: Pearson, 2010. Web Server: h0p://www.digi.no/921119/under- halvparten- bruker- apache S. Adams. Dilbert. Available: h0p://dilbert.com O. Widder. (2013). geek&poke. Available: h0p://geek- and- poke.com B. Lund. (2013). Lunch. Available: h0p://www.lunchstriper.no, h0p://www.dagbladet.no/ tegneserie/lunch/ 25
Hans- PeQer Halvorsen, M.Sc. Telemark University College Faculty of Technology Department of Electrical Engineering, InformaWon Technology and CyberneWcs E- mail: hans.p.halvorsen@hit.no Blog: hqp://home.hit.no/~hansha/ 26