Module 1_Week 1.pptx

‫الجامعة السعودية االلكترونية‬ ‫الجامعة السعودية االلكترونية‬ ‫‪26/12/2021‬‬ College of Computing and Informatics Web Programming Introduction to computers and the Internet Contents 1. Evolution of the Internet and World Wide Web 2. Web Basics 3. Multitier Application Architecture 4. Client-Sid...

‫الجامعة السعودية االلكترونية‬ ‫الجامعة السعودية االلكترونية‬ ‫‪26/12/2021‬‬ College of Computing and Informatics Web Programming Introduction to computers and the Internet Contents 1. Evolution of the Internet and World Wide Web 2. Web Basics 3. Multitier Application Architecture 4. Client-Side Scripting versus Server-Side Scripting 5. Responsive Web Design Weekly Learning Outcomes 1. Learn computer hardware, software and Internet basics. 2. Explain what a web designer does. 3. Understand how HTML5, CSS3 and JavaScript are improving web-application development. 4. Explain why responsive web design is important Required Reading Chapter 1 (Internet and World Wide Web How To Program by Deitel & Deitel, 5th Ed) Recommended Reading 1. Chapter 3 (Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics 5th Edition) 2. Web Designer: Job Description, Duties and Requirements (Jun 15, 2021) https://study.com/articles/Web_Designer_Job_Description_Duties_and _Requirements.html 3. Internet, TCP/IP, and HTTP concepts (Dec 18, 2020) https://www.ibm.com/docs/en/cics-ts/5.2?topic=web-internet-tcpip-h ttp-concepts 1. Evolution of the Internet and World Wide Web The Internet The Internet—a global network of computers—was made possible by the convergence of computing and communications technologies. In the late 1960s, ARPA (the Advanced Research Projects Agency) rolled out blueprints for networking the main computer systems of about a dozen ARPA-funded universities and research institutions. ARPA proceeded to implement the ARPANET, which eventually evolved into today’s Internet. Rather than enabling researchers to share each other’s computers, it rapidly became clear that communicating quickly and easily via electronic mail was the key early benefit of the ARPANET. Packet Switching One of the primary goals for ARPANET was to allow multiple users to send and receive information simultaneously over the same communications paths (e.g., phone lines). The network operated with a technique called packet switching, in which digital data was sent in small bundles called packets. The packets contained address, error-control and sequencing information. The address information allowed packets to be routed to their destinations. TCP/IP The protocol (i.e., set of rules) for communicating over the ARPANET became known as TCP—the Transmission Control Protocol. TCP ensured that messages were properly routed from sender to receiver and that they arrived intact. As the Internet evolved, organizations worldwide were implementing their own networks for both intraorganization (i.e., within the organization) and interorganization (i.e., between organizations) communications. One challenge was to get these different networks to communicate. TCP/IP ARPA accomplished this with the development of IP—the Internet Protocol, truly creating a network of networks, the current architecture of the Internet. The combined set of protocols is now commonly called TCP/IP. Each computer on the Internet has a unique IP address. The current IP standard, Internet Protocol version 4 (IPv4), has been in use since 1984 and will soon run out of possible addresses. IPv6 is just starting to be deployed. It features enhanced security and a new addressing scheme, hugely expanding the number of IP addresses available so that we will not run out of IP addresses in the foreseeable future. Explosive Growth Initially, Internet use was limited to universities and research institutions; then the military began using it intensively. Eventually, the government decided to allow access to the Internet for commercial purposes. Bandwidth (i.e., the information-carrying capacity) on the Internet’s is increasing rapidly as costs dramatically decline. World Wide Web, HTML, HTTP The World Wide Web allows computer users to execute web-based applications and to locate and view multimedia-based documents on almost any subject over the Internet. In 1989, Tim Berners-Lee of CERN (the European Organization for Nuclear Research) began to develop a technology for sharing information via hyperlinked text documents. Berners-Lee called his invention the HyperText Markup Language (HTML). He also wrote communication protocols to form the backbone of his new information system, which he called the World Wide Web. In particular, he wrote the Hypertext Transfer Protocol (HTTP)—a communications protocol used to send information over the web. The URL (Uniform Resource Locator) specifies the address (i.e., location) of the web page displayed in the browser window. Each web page on the Internet is associated with a unique URL. URLs usually begin with http://. HTTPS URLs of websites that handle private information, such as credit card numbers, often begin with https://, the abbreviation for Hypertext Transfer Protocol Secure (HTTPS). HTTPS is the standard for transferring encrypted data on the web. It combines HTTP with the Secure Sockets Layer (SSL) and the more recent Transport Layer Security (TLS) cryptographic schemes for securing communications and identification information over the web. Main Reference 1. Chapter 1 (Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics 5th Edition) 2. Chapter 3 (Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics 5th Edition) 2. Web basics Hyperlinks In its simplest form, a web page is nothing more than an HTML (HyperText Markup Language) document (with the extension.html or.htm) that describes to a web browser the document’s content and structure. HTML documents normally contain hyperlinks, which, when clicked, load a specified web document. Both images and text may be hyperlinked. When the user clicks a hyperlink, a web server locates the requested web page and sends it to the user’s web browser. Similarly, the user can type the address of a web page into the browser’s address field and press Enter to view Hyperlinks Hyperlinks can reference other web pages, e-mail addresses, files and more. If a hyperlink’s URL is in the form mailto:emailAddress, clicking the link loads your default e-mail program and opens a message window addressed to the specified e- mail address. If a hyperlink references a file that the browser is incapable of displaying, the browser prepares to download the file, and generally prompts the user for information about how the file should be stored. URIs and URLs URIs (Uniform Resource Identifiers) identify resources on the Internet. URIs that start with http:// are called URLs (Uniform Resource Locators). A URL contains information that directs a browser to the resource that the user wishes to access. Web servers make such resources available to web clients. Popular web servers include: Apache’s HTTP Server and Microsoft’s Internet Information Services (IIS). URIs and URLs URL example: http://www.deitel.com/books/downloads.html The text http:// indicates that the HyperText Transfer Protocol (HTTP) should be used to obtain the resource. Next in the URL is the server’s fully qualified hostname (for example, www.deitel.com)—the name of the web-server computer on which the resource resides. This computer is referred to as the host, because it houses and maintains resources. The hostname www.deitel.com is translated into an IP (Internet Protocol) address—a numerical value that uniquely identifies the server on the Internet (192.178.5.2). An Internet Domain Name System (DNS) server maintains a database of hostnames and their corresponding IP addresses and performs the translations automatically. URIs and URLs URL example: http://www.deitel.com/books/downloads.html The remainder of the URL (/books/downloads.html) specifies the resource’s location (directory) (/books) and name (downloads.html) on the web server. * The location could represent an actual directory on the web server’s file system. For security reasons, however, the location is typically a virtual directory. The web server translates the virtual directory into a real location on the server, thus hiding the resource’s true location *. URIs and URLs Making a Request and Receiving a Response Figure 1.8 shows a web browser sending a request to a web server. HTTP request example : GET /books/downloads.html HTTP/1.1 The word GET is an HTTP method indicating that the client wishes to obtain a resource from the server. The remainder of the www.deitel.com request provides the path name of the resource (e.g., an HTML5 document) and the protocol’s name and version number (HTTP/1.1). Making a Request and Receiving a Response Figure 1.9 shows the web server responding to a request. The server first sends a line of text that indicates the HTTP version, followed by a numeric code and a phrase describing the status of the transaction. For example, HTTP/1.1 200 OK indicates success, whereas HTTP/1.1 404 Not found informs the client that the web * HTTP Headers The server sends one or more HTTP headers, which provide additional information about the data that will be sent. When the server is sending an HTML5 text document, one HTTP header is: Content-type: text/html The header or set of headers is followed by a blank line, which indicates to the client browser that the server is finished sending HTTP headers. Making a Request and Receiving a Response text/plain image/jpeg Multipurpose Internet Mail Extensions (MIME) type * The information provided in this header specifies the Multipurpose Internet Mail Extensions (MIME) type of the content that the server is transmitting to the browser. The MIME standard specifies data formats, which programs can use to interpret data correctly. For example, the MIME type text/plain indicates that the sent information is text that can be displayed directly. Similarly, the MIME type image/jpeg indicates that the content is a JPEG image. When the browser receives this MIME type, it attempts to display the image. HTTP get and post Requests The two most common HTTP request types (also known as request methods) are get and post. A get request typically gets (or retrieves) information from a server, such as an HTML document, an image or search results based on a user-submitted search term. A post request typically posts (or sends) data to a server. Common uses of post requests are to send form data or documents to a server. An HTTP request often posts data to a server-side form handler that processes the data. Get requests and Post requests can both be used to send data to a web server, but each request type sends the information differently. HTTP get and post Requests A get request appends data to the URL, HTTP get request example : www.google.com/search? q=deitel. In this case : search is the name of Google’s server-side form handler q is the name of a variable in Google’s search form deitel is the search term. ? separates the query string from the rest of the URL in a request. A name/value pair is passed to the server with the name and the value separated by an equals sign (=). If more than one name/value pair is submitted, each pair is separated by an ampersand (&). * A get request may be initiated by submitting an HTML HTTP get and post Requests A post request sends form data as part of the HTTP message, not as part of the URL. *A get request typically limits the query string (i.e., everything to the right of the ?) to a specific number of characters, so it’s often necessary to send large amounts of information using the post method. The post method is also sometimes preferred because it hides the submitted data from the user by embedding it in an HTTP message. *If a form submits several hidden input values along with user- submitted data, the post method might generate a URL like www.searchengine.com/search. The form data still reaches the server and is processed in a similar fashion to a get request, but the user does not see the exact information sent. GET example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_method Client-Side Caching Browsers often cache (save on disk) recently viewed web pages for quick reloading. If there are no changes between the version stored in the cache and the current version on the web, this speeds up your browsing experience. An HTTP response can indicate the length of time for which the content remains “fresh.” *If this amount of time has been reached, the browser loads the document from the cache. *Browsers typically do not cache the server’s response to a post request, because the next post might not return the same result. * Client-Side Caching 3. Multitier Application Architecture Multitier Application Architecture Web-based applications are often multitier applications (sometimes referred to as n-tier applications) that divide functionality into separate tiers (i.e., logical groupings of functionality). Figure 1.10 presents the basic structure of a three-tier The top tier, or client tier, is web-based application. the application’s user interface, which gathers input and displays output. The middle tier implements business logic, controller logic and presentation logic to control interactions between the application’s clients and its data. The bottom tier (also called the data tier or the 4. Client-Side Scripting versus Server-Side Scripting Client-side scripting Client-side scripting with JavaScript can be used to: validate user input interact with the browser enhance web pages add client/server communication between a browser and a web server. Client-side scripting does have limitations, such as browser dependency; the browser or scripting host must support the scripting language and capabilities. Client-side scripting Scripts are restricted from arbitrarily accessing the local hardware and file system for security reasons. Another issue is that client-side scripts can be viewed by the client by using the browser’s source-viewing capability. Sensitive information, such as passwords or other personally identifiable data, should not be on the client. *All client-side data validation should be mirrored on the server. Also, placing certain operations in JavaScript on the client can open web applications to security issues. Server-side scripting Programmers have more flexibility with server-side scripts, which often generate custom responses for clients. For example, a client might connect to an airline’s web server and request a list of flights from Boston to San Francisco between April 19 and May 5. The server queries the database, dynamically generates an HTML document containing the flight list and sends the document to the client. This technology allows clients to obtain the most current flight information from the database by connecting to an airline’s web server. Server-side scripting languages have a wider range of programmatic capabilities than their client-side What Languages Do I need to Learn? Which technologies you learn will depend on the role that you have in the web design process. The list of technologies associated with web development include: HTML (HyperText Markup Language) is a special type of computer language called a markup language designed to specify the content and structure of web pages (also called documents) in a portable manner. HTML5 is the emerging version of HTML. Cascading Style Sheets (CSS) are used to specify the presentation, or styling, of elements on a web page (e.g., fonts, spacing, sizes, colors, positioning). CSS was designed to style portable web pages independently of their content and structure. JavaScript helps you build dynamic web pages (i.e., pages that can be modified “on the fly” in response to events, such as user input, time changes and more) and computer 5. World Wide Web Consortium (W3C) World Wide Web Consortium (W3C) In October 1994, Tim Berners-Lee founded an organization—the World Wide Web Consortium (W3C)— devoted to developing nonproprietary, interoperable technologies for the World Wide Web. *One of the W3C’s primary goals is to make the web universally accessible—regardless of disability, language or culture. *The W3C is also a standards organization. Web Programming standardized by the W3C are called Recommendations. Current and forthcoming W3C Recommendations include the HyperText Markup Language 5 (HTML5), Cascading 6. Web 2.0: Going Social Web 1.0 versus Web 2.0 Web 1.0 (the state of the web through the 1990s and early 2000s) was focused on a relatively small number of companies and advertisers producing content for users to access (some people called it the “brochure web”). Web 2.0 involves the users—not only do they often create content, but they help organize it, share it, remix it, critique it, update it, etc. Web 2.0 embraces an architecture of participation—a design that encourages user interaction and community contributions. One way to look at Web 1.0 is as a lecture, a small number of professors informing a large audience of students. Search Engines and Social Media The way we find the information on search engines and social media is also changing—people are tagging (i.e., labeling) web content by subject or keyword in a way that helps anyone locate information more effectively. In the future, computers will learn to understand the meaning of the data on the web—the beginnings of the Semantic Web are already appearing. 7. Responsive Web design Web design Web design includes many different skills and disciplines in the production and maintenance of websites. Over the years, the term “web design” has become a catch-all for a process that encompasses a number of different disciplines, from user experience design, to document markup, to serious programming. Web design can separate into four broad categories: Design Development Content strategy Multimedia  Web design Design : Identify the site’s goals, how it will be used, and how visitors move throughout the site. These tasks fall under the disciplines of: Interaction design (IxD) : used to make the site easy, efficient, and delightful to use. User interface design (UI): focused on the functional organization of the page and tools (buttons, links, menus…etc) User experience design (UX): ensures that the What Does a Web Designer Do? Designers produce documents that include: 1. User research and testing reports  Called User-Centered Design (UCD)  Start with user research (interviews and observation)  User testing at each phase of the design process to ensure the usability of their designs. 2. Wireframe diagrams  Shows the structure of a web page using outlines for each content type and widget.  Indicates how the screen real estate is divided and where functionality and content (such as navigation, search boxes, form elements) are placed What Does a Web Designer Do? Designers produce documents that include: 3. Site diagram  Indicates the structure of the site as a whole and how individual pages relate to one another. 4. Storyboards and user flow charts  Traces the path through a site or application from the point of view of a typical user.  It usually includes a script and “scenes” consisting of screen views or the user interacting with the screen. Website storyboarding What Does a Web Designer Do? Visual (graphic) Design  Creates the “look and feel” of the site  Logos, graphics, type, colors, layout, etc.  Ensures that the site makes a good impression and is consistent with the brand and message of the organization  Generates sketches of the way the site might look.  May also be responsible for producing graphic files that are optimized for web delivery. Front-end design vs. Back-end design Front-end design: any aspect of the design process that appears in or relates directly to the browser. Graphic design and image production. Interface design. Information design – user’s experience on the site. HTML document and style sheet development. JavaScript. Back-end design: programs and scripts that work on the server behind the scenes to make web pages dynamic and interactive. Forms processing. Database programming. Content management systems. Other server-side web applications using programming Responsive Web design Responsive web design is a strategy for dealing with unknown screen size. Most browsers on small devices, such as smartphones and tablets, shrink a web page down to fit a screen and provide mechanisms for zooming and moving around the page. This can create the following issues: Text is too small to read Links are too small to select Zooming and panning around is disrupting Responsive Web design Responsive Web Design: strategy for providing custom layouts to devices based on the size of the viewport (screen size) Serving a single HTML document to all devices, but applying different style sheets based on the screen size for the most optimized layout for that device *Helps with matters of layout, but it is not a solution to all mobile web design challenges *Providing the best experiences for your users and their chosen device may require optimizations that go beyond adjusting the look and feel Thank You