Loading ...
Jack Zheng
Technology & Engineering
Mobile and Web Lecture Notes
2520
0
Try Now
Log In
Pricing
Introduction to World Wide Web and Web Development IT 5443 Web Technologies and Application Development http://it5443.azurewebsites.net Jack G. Zheng Spring 2019 This document is hosted at https://www.edocr.com/v/qezldpd2/jgzheng/Introduction-to-World-Wide-Web-and-Web-Development Overview 2 This lecture notes provide some basic introduction to the Web and its fundamental pieces. It also introduces good resources to get your further. Major topics: What is the Web? History and evolution stages How does the Web work? Client server architecture Key technology components Simple vs. dynamic web Client vs. server side How to start web development? Tools and resources What is the Web? 3 The Internet A world-wide network of networks and computers based on the Internet protocol World Wide Web, or the Web Is a client/server application for information and services Is one of the Internet applications based on the HTTP protocol The difference between the two? http://www.diffen.com/difference/Internet_vs_World_ Wide_Web Web Related Terms 4 Web page usually refers to a static HTML file, or a dynamically generated HTML document displayed in a browser. It resembles a document and mainly informational. Web application a specific functionality-oriented component that utilizes web technologies to deliver information and services to users or other applications/information systems. Examples: registration, shopping, survey, learning, gaming, etc. Web site a collection of web pages, applications, etc., under a common name and serve a common purpose (loosely). Web (based) information system an information system that utilizes web technologies to deliver information and services, to users or other information systems/applications. A web information system usually consists of one or more web applications, together with information components and other non-web components. Web service (two different meanings) Technically: a software component that utilizes web technologies to serve other applications (not human users). Or in a more non-tech context: a service provided to users through a website. Evolution Stages 5 Stage Beginning Time Features Pre-web Before 1990 All kinds of Internet applications with its specific protocols Early/simple web Early 1990s Collection of interlinking web pages. Document based information retrieval. Dynamic web Mid 1990s More advanced dynamic processing on both server and client side. More functional applications emerged. Web as a platform 21st century A fundamental platform to support all kinds of services and integrate various kinds of systems. Web 2.0 Since about 2006 Services that support massive user participation and contribution. Redefined client/server communication style. Greater advancement in software-as-a-service. Mobile Web Since about 2010 Major renovation of user experience design and application architectures. Major client-side advancement. * Note: each later stage does not replace the early stage at this time. They only signal the beginning of some drastically new developments. The applications of each stage are still widely used today. Pre-Web 6 Before there was the Web, there was the Internet TCP/IP (Transmission Control Protocol/Internet Protocol) is the key to the Internet Internet applications other than the Web (note Web itself is a kind of Internet applications) Usenet, BBS, Telnet Email, FTP P2P, gaming Video streaming, instant messaging, VoIP Remote control Which Internet application generates the most traffic on the Internet? https://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual- networking-index-vni/vni-hyperconnectivity-wp.html More from Cisco: https://www.cisco.com/c/en/us/solutions/service- provider/visual-networking-index-vni/index.html Extended reading: some history of the Internet https://en.wikipedia.org/wiki/History_of_the_Internet http://itwebtutorials.mga.edu/html/chp1/history.aspx Early Web, Simple Web 7 Invented by Sir Tim Berners-Lee, 1989 The early simple web focused on interlinking web pages/documents for information viewing. 5 fundamental elements of the web (see slides later, starting #13, for more details about the architecture of a simple web and its fundamental elements) Web content: HTML (Hypertext Markup Language) Web client: browser Web server Web address: URL (Uniform Resource Locator) Web protocol: HTTP (Hypertext Transfer Protocol) Extended reading: some history of the Web https://webfoundation.org/about/vision/history-of-the-web/ 25 years of the World Wide Web: Tim Berners-Lee explains how it all began: http://www.independent.co.uk/life-style/gadgets-and-tech/news/25-years-of-the-world-wide-web- the-inventor-of-the-web-tim-bernerslee-explains-how-it-all-began-9185040.html Dynamic Web 8 Dynamic web refers to the addition of the advanced processing power with programming capabilities at either server side or client side (or both) Because of these powers, more functional applications emerged, going beyond just information viewing. Shopping, registration, survey, learning, gaming, etc. More Internet applications began to have a web interface E-mail, forum (BBS), etc. See slides later (#29 to #33) for key technologies summary Web as a Platform 9 Early Web is a more of an application itself to deliver information and service to human over the Internet It eventually evolved to an underlying platform that supports all kinds of software applications and services Applications are developed based on Web technologies and standards directly, not OS (think about a Windows application). There is no installation on local systems and minimum need for OS support. Many kinds of applications and services have been brought to the Web: e-commerce, multimedia, gaming, socialization, communication, etc. Connects human-machine, human-human, machine-machine Facilitates the standards development and interoperability https://www.webopedia.com/TERM/W/web_as_a_platform.html Web 2.0 10 Web 2.0 is a general and loose concept for the advancements of the World Wide Web since 2006 "Web 2.0 is term that was introduced in 2004 and refers to the second generation of the World Wide Web. The term "2.0" comes from the software industry, where new versions of software programs are labeled with an incremental version number. Like software, the new generation of the Web includes new features and functionality that was not available in the past. However, Web 2.0 does not refer to a specific version of the Web, but rather a series of technological improvements." http://www.techterms.com/definition/web20 Key ideas/technologies Massive user participation and contribution Socialization: connection, communication, networking, interaction, sharing Collective intelligence: content aggregation, crowdsourcing, folksonomy, wisdom of the crowd Rich user experience Asynchronous client/server communication style Software-as-a-service. https://commons.wikimedia.org/wiki/File:Web-20- iceberg-model-from-Web20andBeyond-book.jpg Learning module #11 will cover this topic https://www.edocr.com/v/gvbmxvzg/jgzheng/Web-20-Overview (Mordern) Mobile Web The popularity of smart phone and tablets pushed the changes of web design on small screens and touch based interfaces, and eventually the application architecture. It's mainly about user experience, particularly with a focus on user interfaces and interactions. Web sites: focus on the display of information adapted to the mobile device Web applications: focus on functional features, with UI specifically designed for mobile devices It impacted the application architecture as well. Mobile computing also greatly advanced all aspects of Web 2.0 to a whole new level (user generated content, participation, social, collaboration, etc.) Overview of mobile web https://www.edocr.com/v/k52p5vj4/jgzheng/Mobile-Web-Overview Learning module #12 will cover this topic with more details 11 Mobile web refers to the access and use of web sites and web applications over computer networks through web browsers using smart mobile devices (and optimized for these devices). Key Technology Components 12 1. Architecture: Client/Server 2. Client: browser 3. Server 4. Communication protocol: HTTP 5. Addressing: DNS, URL 6. Presentation/UI/content 7. Processing capabilities (server or client side) Client/Server (C/S) Architecture 13 C/S architecture is a distributed application structure that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients (http://en.wikipedia.org/wiki/Client%E2%80%93server_model) Note: servers and clients can be installed and work independently (not tied to a specific server or client) Communication medium The medium can be local network, internet, or any designated channel Clients and servers are usually applications (software), not necessarily hardware. They may exist on the same computer. The Internet Fundamental Technologies in a Simple Web Architecture 14 Web server HTML Files HTTP - Response URL http://spsu.edu/index.html Web client: browser HTTP - Request Server side Client side Communication medium HTML (Hypertext Markup Language) 15 An HTML file (or a web page) is a pure text file created using HTML HTML is a standard markup language to describe a web document/page using tags (markups) All content in a web page are wrapped in tags: <body>, <h1>, <p>, <table>, <img>, <a>, etc. Web browsers interpret (render) these tags and display the content in a more readable format Example https://www.w3schools.com/html/ tryit.asp?filename=tryhtml_tables (HTML on the left and browser rendering on the right) HTML is commonly complimented by CSS (cascade style sheet) to make web page appearance Content/Presentation 16 HTML/CSS is the most common choice to present web content and UI to end users HTML describes a web document/page using tags (markups) CSS (cascade style sheets) takes the styling role from the original HTML and is used together with HTML. Other UI languages and formats XHTML: http://www.w3schools.com/html/html_xhtml.asp WML: http://en.wikipedia.org/wiki/Wireless_Markup_Language XUL: http://en.wikipedia.org/wiki/Xul More: http://en.wikipedia.org/wiki/User_interface_markup_language Are all HTML pages web pages? Not necessarily, examples: Local .htm/.html documents .mht - MIME HTML, a web page archive format, which is used offline .chm - Microsoft Compiled HTML Help Client / Browser 17 A web client presents user interface and interacts with a user. Web browser is the most widely-used web client with comprehensive UI features A browser interprets HTML tags and display the content nicely to users (rendering) Provides an interface for users It processes client side scripts and works with other plug-ins http://en.wikipedia.org/wiki/Web_browser Web browser products and market share http://en.wikipedia.org/wiki/Usage_share_of_web_browsers http://www.w3counter.com/globalstats.php http://gs.statcounter.com/ http://www.netmarketshare.com Browser/rendering engine: the core part that handles the markups, scripts, and other client processing can be integrated into other programs http://en.wikipedia.org/wiki/Web_browser_engine Gecko: used in FireFox Trident (EdgeHTML): used in IE/Edge WebKit (Blink): used in Chrome and Safari Other types of web client: any application that can process HTTP as an client can be view as a web client. Examples: Embedded browser in a native desktop or mobile application: Visual Studio Web service consumer Hybrid applications which has a component to communicate with the web server Specific programs without UI: cURL, wget, etc. Extended reading: a more intensive look at browsers: https://www.html5rocks.com/en/tut orials/internals/howbrowserswork/ Web Server 18 Web server Hosts web sites, files (web pages), applications, etc. Processes requests from clients (browsers) and send response back to clients A web server communicates with clients using HTTP protocol Resources (files, etc.) on web servers are located by URLs. Web servers are located by the IP address and domain names. http://en.wikipedia.org/wiki/Web_server https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server Major web server products Apache, IIS, Nginx (a new popular one) Market share data http://w3techs.com/technologies/overview/web_server/all http://news.netcraft.com/ A basic web server does not have additional processing capabilities Complemented by web server extensions or modules (e.g. PHP) which add programming capabilities to handle advanced processing More specialized servers used in multi-tier web applications Application servers enrich and scale web applications, with features like session, transaction, security, etc. see server side processing slide later. Database servers for data and content management Others: LDAP, Email, etc. Addressing 19 URL (Uniform Resource Locator) is used to locate a resource on a web server A standard in IETF RFC 1630. http://en.wikipedia.org/wiki/Uniform_resource_locator The World Wide Web's naming scheme had the goal of uniquely identifying all objects stored on the computers on the Internet. This addressing has two parts Server address: identified by IP addresses or domain names File/resource local address: identified by local address pointer Domain Name System (DNS) A system that provides the conversion between IP addresses and domain names Top level domains are managed by ICANN (http://www.icann.org) and IANA (http://www.iana.org) Check IP and domain name online http://cqcounter.com/whois/ URL types File based URL: the URL directly corresponds to a file (either static or dynamic) Resource identifier based URL: the URL is only an representation (an access point) of resource (typically used in REST) Extended reading: https://eager.io/blog/the-history-of-the-url-path-fragment-query-auth/ URL encoding http://en.wikipedia.org/wiki/Percent-encoding URL (Uniform Resource Locator) 20 URL (or web address) is used to locate a particular resource on a web server Components of a URL Protocol: communication language Host (domain, IP): web server address Port: application connecting point/channel File (resource) path and name Complete syntax reference: https://en.wikipedia.org/wiki/URL Example http://www.spsu.edu:80/aboutus/index.htm The default port for HTTP is 80; ":80" is usually omitted. "http" is the protocol for the Web. :// separates protocol and domain "www.spsu.edu" is the domain; ".edu" is the top level domain "aboutus/" is the directory (path) on the server; "index.htm" is the actual file (web page). "/" is used for path levels. Some URL Variations 21 Non www domain (the server does not have to be named in www) http://spsu.edu/aboutus/index.htm Default document (for example index.html) will be returned if the file part is not specified http://www.spsu.edu/aboutus/ If the Web (HTTP) is configured at a different port other than 80 http://www.spsu.edu:800/aboutus/index.htm URL parameter added after ? http://www.spsu.edu:80/aboutus/index.htm?ref=homepage https protocol (HTTP secured) https://www.spsu.edu/aboutus/index.htm Virtual pointer (not an actual file) http://www.spsu.edu/aboutus IP based http://168.12.14.112/ HTTP Overview 22 HTTP (Hypertext Transfer Protocol) is the feature communication protocol for the web A web server and a browser communicate based on HTTP http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol Features An application layer protocol typically running on top of TCP/IP A request-response cycle protocol Stateless - http://en.wikipedia.org/wiki/Stateless_protocol HTTP over TCP/IP HTTP is a client-server application-level protocol. Typically runs over a TCP/IP connection; but it does not have to run on TCP/IP. Extended reading: http://www.httpwatch.com/httpgallery/ HTTP Methods 23 HTTP has two types of messages HTTP Request: a message sent to the web server HTTP Response: a message sent by the web server (responded by the server) http://www.httpwatch.com/httpgallery/introduction/ See example HTTP request and response messages at http://web-sniffer.net Or using other tools (see the tools slide) HTTP Request 24 Message header Method (GET) Host Message body Contains optional data (usually used with forms) HTTP Response 25 Message header Status codes http://www.httpwatch.com/httpgallery/errors/ http://en.wikipedia.org/wiki/List_of_HTTP_status_codes http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html Message body Actual content: HTML, etc. Domain 26 A domain is a name (address) assigned to a server on the Internet. A domain name is divided into several levels starting from the right, and separated by dots "." Example: www.spsu.edu Top-level domain: a highest level domain that are pre-defined; usually indicates the type of the site Created in 1980: .com, .net, .org, .edu, .gov, .int, .mil 2 letter country code: .us, .uk, .jp, .ca, .au, .cn, https://en.wikipedia.org/wiki/Generic_top-level_domain Generic top level domains are managed by ICANN (http://www.icann.org) and IANA (http://www.iana.org) "edu" is the top level domain. "spsu" is the 2nd level domain. "www" is the 3rd level domain, or host (a server). DNS 27 The Domain Name System (DNS) is a hierarchical decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It associates various information with domain names assigned to each of the participating entities. Most prominently, it translates more readily memorized domain names to the numerical IP addresses. Address resolution mechanism Extended reading: http://en.wikipedia.org/wiki/Dom ain_name_system http://computer.howstuffworks.c om/dns.htm Put the Simple Web Together 28 What happens after a URL is entered in the web browser? 1. Enter a URL (web address) http://spsu.edu/index.html in the browser. The domain will be converted to IP address 168.28.176.243 by contacting DNS or from local cache. 2. The browser sends an HTTP request to the server 3. The server processes the request and finds the file 4. The server sends the result back using HTTP response message 5. The browser renders (displays) the file SPSU's web server at 168.28.176.243 Local computer and browser Processing 29 Processing capabilities enhance the Web from an application aspect At the client side DHTML: http://en.wikipedia.org/wiki/Dynamic_HTML CSS, JavaScript and various components and libraries: XMLHttpRequest (AJAX), JQuery, etc. Browser plug-ins: Flash, Sliverlight, Java Applets, ActiveX, embedded objects, etc. At the server side CGI: http://en.wikipedia.org/wiki/Common_Gateway_Interface Web server extensions or application servers Major platforms: .Net (IIS, ASP.Net, Mono), Java EE (Servlets, JSP, EJB, WebLogic, WebSphere), PHP(Zend), Python, ColdFusion, etc. Client Side Web Technology 30 Client side technologies are supported by the web client (browsers) Everything will be downloaded to the client and executed by browsers Client side technologies HTML: the basic content Cascading Style Sheet (CSS): create web page style (color, size, position, etc.), layout, and simple animation Client-side scripting (JavaScript): advanced processing at the client side that provides functionalities Browser plug-ins Flash, Sliverlight, Java Applets, PDF, embedded objects, etc. View an example at https://html-css-js.com Server Side Web Technology 31 Server side technologies are supported by web servers and other specialized servers Everything will be process on the server side before client side content (HTML, image, CSS, Javascript, etc.) is downloaded Server side technologies Web server Serving static file requests Web server extensions or application servers Java, PHP, ASP.Net, Perl, CGI, ASP, ColdFusion, etc. Database servers SQL Server, MySQL, Oracle, etc. Server Side Processing 32 Generated Content (HTML, CSS, etc.) Web Server Extension, Module, or Application Server Web Server Client (Browser) Request Response Database Server Other Servers: Email, LDAP, Video streaming, other web servers, etc. Static files/pages Processing Delegation HTTP response message with client content (HTML, CSS, JavaScript, image, flash, etc.) More specialized servers used in multi-tier web applications. Application servers enrich and scale web applications, with features like session, transaction, security, etc. Database servers for data and content management A basic web server does not have additional processing capabilities; it's complemented by web server extensions or modules which add programming capabilities to handle advanced processing. https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction Simple vs. Dynamic Web Dynamic Web is enabled by advanced processing capabilities at both the client side and server side (especially the server side) Simple/Static Dynamic Overview Usually document (HTML files) based web applications with limited client scripting Advanced processing is utilized at many levels Technologies Client side: HTML, CSS Client side: CSS, JavaScript Server side: PHP, Java, .Net, Python Advantages Simple, small and fast Functional, versatile Web content Static HTML files A mixture of HTML, scripts, programming codes, executable programs, data storage, etc. Web page construction Web pages are authored at design time Web pages are "assembled" at run time (on the fly) Content source Single source: HTML file Multiple sources: HTML files, XML/JSON files, other files, databases, other websites, etc. Web navigation and interaction mode Click and read Rich interaction: write/type, choose, move, slide, drag and drop, expand, draw, listen, speak, etc. Usage and Examples Commonly used for web presence, information publishing, etc., for personal or small business websites: http://zheng.kennesaw.edu http://it5443.azurewebsites.net http://www.berkshirehathaway.com Wide range of applications: e-commerce, intranet, business software, e-learning, social networking, system admin, etc. E-Commerce: http://amazon.com Web search engines: http://google.com Content publishing: http://wordpress.com Web portal: http://yahoo.com E-Learning: https://kennesaw.view.usg.edu Web Development 34 Web design vs. development Front end, back end, full stack Knowledge and skills Development tools Utility tools and resources Web Design vs. Web Development 35 The defined lines between designers and developers are becoming more blurred as more designers are learning to code and more developers are paying close attention to design theory. http://designmodo.com/designer-vs-developer/ See the complete infographic at https://www.webfx.com/blog/ web-design/web-designers- vs-web-developers- infographic/ Front end vs Back end Development 36 Front end development focuses on the client side User interfaces and interactions Applications that can be done at the client side Major languages: HTML/CSS/JavaScript Focus on usability and user experiences Back end development focuses on the server side Logic and functions Database operations Other server supported applications and services like communication, authentication, etc. Mainly use server side languages and platforms like ASP.Net/C#, Java, PHP, Python Full stack development Cover both front and back end, and the overall architecture spanning over clients and servers Coding Tools 37 Easy to use Notepad ++ Efficient coding Visual Studio Code https://blog.templatetoaster.com/dreamweaver-alternative-micorsoft- visual-studio-code/ Advanced IDE Visual Studio Eclipse Dreamweaver Web based http://htmleditor.tools https://codepen.io https://jsfiddle.net Utility Tools 38 HTTP Tools Browser integrated developer tools like Chrome Developer Tools Add-ons like HttpWatch https://www.httpwatch.com Web based like http://web-sniffer.net Use specific sniffing tools like WireShark More http://html-css-js.com Web Hosting 39 Websites and applications are put on a server to serve the public, which is called web hosting. Hosting choices Microsoft Azure for Students (https://imagine.microsoft.com/en- us/Catalog/Product/99) provides free service to students. GitHub Pages (https://pages.github.com) provide free services for Git based projects. Commercial hosting. Purchase your individual hosting with your own domain from a commercial provider Usually about 5 to 10 dollars per month for shared hosting 10 to 15 dollars for a domain per year. Do some research using Google or http://www.whoishostingthis.com/hosting-reviews/ Find a free service provider like https://www.000webhost.com or https://www.freehosting.com Key Readings and Resources 40 General introduction This lecture notes: https://www.edocr.com/v/qezldpd2/jgzheng /Introduction-to-World-Wide-Web-and- Web-Development Introduction to Web as a Platform: https://msdn.microsoft.com/library/bb3309 32.aspx https://www.youtube.com/watch?v=3XgEu qKSRIw http://www.slideshare.net/randyconnolly/ch apter01-presentation-16514220 - the first chapter of the textbook Fundamentals of Web Development. http://itwebtutorials.mga.edu/html/chp1/ser ving-pages.aspx Server side https://developer.mozilla.org/en- US/docs/Learn/Common_questions/What_ is_a_web_server https://developer.mozilla.org/en- US/docs/Learn/Server- side/First_steps/Introduction Browser https://www.html5rocks.com/en/tutorials/internals/h owbrowserswork/ https://hacks.mozilla.org/2017/05/quantum-up- close-what-is-a-browser-engine/ HTTP http://www.httpwatch.com/httpgallery/ http://www.ntu.edu.sg/home/ehchua/programming/ webprogramming/HTTP_Basics.html URL http://eager.io/blog/the-history-of-the-url-path- fragment-query-auth/ DNS http://computer.howstuffworks.com/dns.htm http://en.wikipedia.org/wiki/Domain_name_system Development https://www.w3schools.com https://www.codecademy.com https://developer.mozilla.org http://www.w3resource.com http://html.net https://html-css-js.com
