INFT 071: Web Design and Internet Technologies Lecture Notes

Introduction to Web Technologies

  • Definition of Web Technologies: These are the specific tools, languages, protocols, and frameworks utilized to build, deliver, and run applications on the World Wide Web. They are the enabling force that allows computers, servers, and various devices to communicate over the internet, providing users access to information and services via web browsers.
  • Broad Categories of Web Technologies:     * Client-side technologies: These constitute what users see and interact with directly. Examples include HTML, CSS, and JavaScript.     * Server-side technologies: These are responsible for processing logic and managing data. Examples include PHP, Python, Java, and Node.js.     * Databases: Used for the structured storage of data. Examples include MySQL, PostgreSQL, and MongoDB.     * Protocols and Standards: The rules governing communication, such as HTTP/HTTPS, URLs, and APIs.     * Infrastructure: The physical and virtual foundations, including Web servers, application servers, and cloud platforms.

Role of Web Technologies in Modern Computing

  • Platform for Applications: The majority of contemporary systems, including e-commerce platforms, learning management systems (e.g., those at UENR), banking applications, and social media, are web-based. This allows for ubiquitous access from any location using a standard web browser.
  • Global Connectivity and Information Sharing: These technologies facilitate the real-time global sharing of information, which supports international communication, collaboration, and the dissemination of knowledge.
  • Business and Service Delivery: Organizations leverage web technologies to provide essential services, including:     * Online banking.     * Digital marketing.     * E-government services.     * Telemedicine.     * Remote education.
  • Integration and Interoperability: Through the use of Application Programming Interfaces (APIs) and web services, disparate systems and platforms can communicate and exchange data seamlessly, which is a requirement for complex distributed systems.
  • Support for Emerging Technologies: Modern trends such as cloud computing, mobile computing, artificial intelligence (AI), and the Internet of Things (IoT) rely heavily on web technologies for their interfaces, data exchange protocols, and scalability.

Web Pages: Types and Common Issues

  • Definition: A web page is a document written primarily in HTML and accessed through a web browser over the internet. Web pages represent the basic building blocks of any website.
  • Static Web Pages:     * Content is fixed and remains unchanged unless it is manually edited by a developer.     * Primarily written using HTML and CSS.     * Advantages: Faster loading times and easier hosting requirements.     * Example: Personal portfolio websites.
  • Dynamic Web Pages:     * Content changes dynamically based on user interaction or the retrieval of database content.     * Utilizes server-side scripting languages like PHP, Python, or Node.js.     * Commonly found in e-commerce and social media platforms.     * Example: Online shopping websites.
  • Common Issues with Web Pages:     * Slow loading times.     * Poor responsiveness on mobile devices (e.g., content doesn't scale properly to small screens).     * Security vulnerabilities, such as SQL injection and Cross-Site Scripting (XSS).     * Browser compatibility issues (e.g., a page looking different in Chrome vs. Firefox).     * Accessibility challenges for users with disabilities.

Architecture of the World Wide Web (WWW)

  • The System: The World Wide Web is a system of interlinked documents and resources accessed via the internet through web browsers.
  • Internet vs. WWW: It is critical to distinguish between the two: the internet is the underlying infrastructure, while the WWW is a specific service running on top of that infrastructure.
  • Key WWW Concepts:     * Hypertext and hyperlinks.     * Client–server architecture.     * Distributed information systems.
  • Web Client:     * Software that requests and displays web content. Examples include Google Chrome, Mozilla Firefox, and Microsoft Edge.     * Functions: Sends HTTP requests, displays web pages, and executes client-side scripts (JavaScript).
  • Web Server:     * A computer system that stores, processes, and delivers web pages to clients. Examples include Apache, Nginx, and Microsoft IIS.     * Every web server connected to the internet is assigned a unique IP address consisting of four numbers between 00 and 255255 separated by periods (e.g., 68.178.157.13268.178.157.132 or 68.122.35.12768.122.35.127).     * Functions: Receives client requests, serves static content, and communicates with application servers.
  • Application Server:     * Hosts the business logic and generates dynamic content. Examples include Apache Tomcat, Node.js, and Django server.     * Functions: Processes server-side scripts, connects to databases, and generates dynamic web pages.

Communication and Identification: HTTP and URL

  • HTTP (Hypertext Transfer Protocol): The standard communication protocol used to transfer data between web clients and web servers.     * Stateless Protocol: Each request is independent and does not retain knowledge of previous requests.     * Request–Response Based: Operates on a cycle where a client sends a request and a server provides a response.     * Network Layer: Runs over TCP/IP.
  • HTTP Request–Response Cycle:     1. Client sends an HTTP request.     2. Server processes the request.     3. Server sends an HTTP response.     4. Client renders the response.
  • Universal Resource Locator (URL): The specific address used to access a resource on the web. Example: https://www.uenr.edu.gh.
  • Anatomy of a Uniform Resource Identifier (URI/URL):     1. Protocol: Specifies communication rules (e.g., https).     2. Subdomain: Often www or specific sections like blog (e.g., blog.example.com).     3. Domain Name: Identifies the primary server location (e.g., uenr.edu.gh).     4. Top-Level Domain (TLD): The extension like .com, .org, or .edu.     5. Subfolder/Path: Specifies the specific resource or directory on the server (e.g., /subtopic/).     6. Slug: The specific page identifier (e.g., blog-post).     7. Optional Query Parameters: Extra data passed to the server, usually following a ? (e.g., ?id=123).

How the Web Works: Physical and Processual View

  • Physical Components:     * Personal Computer: The user's device.     * Web browser: Software installed on the PC to browse the web.     * Internet connection: Provided by an Internet Service Provider (ISP).     * Web server: The computer hosting the website.     * Routers & Switches: Hardware and software combinations that route requests to the correct web server.
  • Step-by-Step Operational Process:     1. User enters a URL into a browser (e.g., Google.com).     2. This request is passed to a Domain Name Server (DNS).     3. The DNS returns the IP address associated with that domain (e.g., 68.178.157.13268.178.157.132).     4. The browser requests the specific page from the web server using that IP address.     5. The web server returns the page data. The page may trigger additional requests for images or linked files.     6. The browser collects all data and displays the final web page to the user.
  • SMTP Server: Simple Mail Transfer Protocol Server. It handles the delivery of emails from one server to another.
  • ISP (Internet Service Provider): Companies that provide internet connectivity. Developers typically purchase space on a web server from an ISP to host a website.

Tools for Web Development

  • Operating System: A computer machine running Windows, Linux, UNIX, or Macintosh.
  • Internet Connection: Necessary for accessing information and testing connectivity.
  • Web Server Space: Space purchased from one of millions of competitive ISPs to house website files.
  • Text Editors: The primary tool for writing code. Examples include Notepad (Windows) or various Online HTML Editors for HTML, PHP, and ASP.
  • Web Browser: Used to view the results of coding projects (e.g., Chrome, Firefox, Opera, Safari, Internet Explorer, Netscape Navigator). Developers must strive for cross-browser compatibility.
  • Secure Telnet Client: Tools like PuTTY are used for direct connection to a web server.
  • Web Authoring Tools (HTML Editors): Visual "What You See Is What You Get" (WYSIWYG) editors like Microsoft's FrontPage and Macromedia Dreamweaver help develop pages without writing all manual code.
  • Secure FTP Client: Tools like PSFTP use File Transfer Protocol (FTP) to upload and download files between a local computer and the web server.

Domain Names and Registrars

  • Definition: A domain name is a text string mapping to an alphanumeric IP address. It serves as a business address and follows the "www" (e.g., uenr.edu.gh).
  • Selection and Registration: Domain names should be easy to remember and type. When bought, they are registered in a large domain name register, and site information (IP address, contact info) is stored on a DNS server via a registrar.
  • Domain Registrars: Examples include GoDaddy, HEXONET, name.com, EnCirca, gandi.net, porkbun, 101 domain, MarkMonitor, webnames.ca, namecheap, and Google Domains.
  • Domain Extensions: Categorize websites by type (e.g., .com for commercial, .org for organizations, .edu for education).

Web Hosting Platforms and Types

  • Hosting Platforms:     * Windows Hosting Servers: Often more expensive due to software licensing costs.     * Linux Hosting Servers: Generally more affordable with a wide range of options based on various Unix/Linux flavors.
  • Hosting Types:     * Free Hosting: Service providers offer free space if the user allows them to run advertisements on the pages. Examples: geocities.com, lycos.com, myspace.com.     * Shared Hosting: Website is hosted on a powerful server alongside other websites. Users have private IDs and passwords but share RAM and CPU resources. It is cost-effective for small sites, but high traffic on one site can slow down others on the same host.     * VPS Hosting / Virtual Dedicated Hosting: Ideal for medium businesses. Provides dedicated bandwidth and RAM. The user receives a root ID/password and can install/uninstall software. It behaves like a private server even though it sits on shared hardware.     * Dedicated Hosting: An entire computer machine is allotted to one user. Recommended for very high traffic requirements; more expensive than virtual options.     * Collocated Hosting: Renting a "house" for your server. The provider gives storage space, power, internet, cooling, and security, but the user provides the hardware. This is high-cost and provides high security and backup power.     * Other Types: Managed WordPress, Subdomain hosting, Cloud Hosting, Cluster Hosting, and Reseller Hosting.
  • Hosting Evaluation Components: When purchasing space, compare based on:     * Disc Space     * Monthly Traffic     * Processing and Connection Speeds     * Emailing Support and number of accounts     * Latest Technologies support (e.g., specific DBs)     * Server Uptime and Backup/FTP access     * Control Panel and Customer Support quality

Website Management: Backup and Statistics

  • Website Backup: A copy of all website files (images, text, source code) stored in a safe digital location to insure against data loss or site failure. Key considerations include:     * Frequency of backup.     * Storage location.     * Type of backup.     * Personnel responsible for the backup.
  • Website Statistics: Log files that track visitor behavior. They are used to measure business objectives and identify effective landing pages.
  • Specific Metrics to Track:     * Visitor Identity: IP addresses to determine geographical location.     * Timestamp: Identifying peak traffic times to plan server maintenance.     * Visitor Preferences: Pages viewed, which indicates the importance of various site sections.     * Referral Source: How visitors arrived (direct, referral site, or advertisement).     * Duration of Stay: How long a visitor spends on the site (used to improve retention strategies).     * Visitor's Browser: Used to optimize the site for the specific browsers visitors use most frequently.