1-UnderstandingHowWebsitesWork (1).pdf

HOW WEBSITES WORK WHAT IS A WEBSITE? o A website is a collection of interlinked web pages accessible through a domain name. o E.g., wlu.ca/ o Websites are built using: o HTML (HyperText Markup Language): The description of the structure of the webpage and its content,...

HOW WEBSITES WORK WHAT IS A WEBSITE? o A website is a collection of interlinked web pages accessible through a domain name. o E.g., wlu.ca/ o Websites are built using: o HTML (HyperText Markup Language): The description of the structure of the webpage and its content, o What content is shown where o CSS (Cascading Style Sheets): The formatting of the webpage , and o Fonts, colors, …etc. o JavaScript: The interactivity and dynamic behavior to website o What happens when the user take a particular action (e.g., push a button) WHAT IS A WEBSITE? (CNTD.) o Types of Websites:  Static Websites: Content does not change unless manually updated.  Dynamic Websites: Generate content in real-time based on user interactions.  E-commerce Websites: Specialized dynamic websites designed for buying and selling products online. THE ROLE OF WEB SERVERS o Types of Web Servers:  Apache HTTP Server: Open-source, flexible, secure.  Nginx: High-performance, efficient for handling concurrent connections.  Microsoft IIS: Integrated into Windows Server environments.  LiteSpeed: Commercial, known for speed and low resource consumption. TYPES OF WEB SERVERS o Apache HTTP Server:  One of the oldest and most widely used open-source web servers, known for its flexibility and wide support for different technologies. o Nginx:  A high-performance web server and reverse proxy server, often used for handling large numbers of simultaneous connections. o Microsoft IIS (Internet Information Services):  A web server from Microsoft, integrated into the Windows Server environment and used extensively in enterprise settings. o LiteSpeed:  A commercial web server that is known for its speed and low resource usage, often used as an alternative to Apache or Nginx. THE ROLE OF WEB SERVERS o Hosting Websites:  A web server stores all the files that make up a website, including HTML documents, images, and scripts.  When a browser requests a webpage, the server retrieves the appropriate files and sends them to the browser. o Processing Requests:  When a user types a URL or clicks a link, the browser sends an HTTP or HTTPS request to the web server.  The server processes the request and determines which files to send back as a response.  For dynamic websites, the server might execute scripts (e.g., PHP) to generate the HTML dynamically before sending it back to the browser. o HTTP/HTTPS Protocols:  The server and browser communicate using HTTP or HTTPS, which define how messages are formatted and transmitted. WEB BROWSERS o Definition and Purpose:  A web browser is a software application that allows users to access and interact with websites.  Browsers interpret the code sent by web servers and render it into a visual, user-friendly interface. o Components of a Web Browser:  User Interface (UI): The visual elements that users interact with, such as the address bar, back/forward buttons, and bookmarks.  Rendering Engine: Interprets HTML, CSS, and JavaScript to render web pages. Common rendering engines include WebKit (used by Safari) and Blink (used by Chrome and Edge).  JavaScript Engine: Executes JavaScript code to enable interactivity and dynamic content. Examples include V8 (used by Chrome) and SpiderMonkey (used by Firefox).  Networking: Manages the network communication between the browser and web servers, including sending HTTP/HTTPS requests and handling responses. HOW BROWSERS DISPLAY WEB PAGES  DNS Lookup: The browser first performs a DNS lookup to translate the domain name into an IP address.  wlu.ca  216.249.48.130  Request and Response: The browser sends an HTTP/HTTPS request to the web server associated with the IP address. The server responds with the requested web page.  Rendering: The browser’s rendering engine processes the HTML, CSS, and JavaScript files and displays the web page visually.  Interactivity: JavaScript enables interactivity on the page, such as responding to user input, updating content dynamically, and handling events. HTTP, HTTPS, AND WEB COMMUNICATION PROTOCOLS o HTTP (HyperText Transfer Protocol):  The foundational protocol (rules of communication) used for transferring hypertext (HTML) between web servers and browsers.  HTTP operates on a request-response model, where the client (browser) sends a request, and the server responds with the requested content.  Request Methods:  GET: Retrieve data from the server (e.g., fetching a web page).  POST: Submit data to the server (e.g., submitting a form).  PUT: Update data on the server.  DELETE: Remove data from the server.  Status Codes:  200 OK: The request was successful, and the server returned the requested content.  404 Not Found: The requested resource could not be found on the server HTTP, HTTPS, AND WEB COMMUNICATION PROTOCOLS (CNTD.) o HTTPS (HyperText Transfer Protocol Secure):  The secure version of HTTP, incorporating encryption to protect data transmitted between the client and server.  Benefits of HTTPS:  Encryption: HTTPS encrypts data, ensuring that sensitive information (e.g., login credentials, credit card details) is protected from eavesdroppers.  Authentication: HTTPS provides authentication, verifying that the website you are communicating with is legitimate and not a fraudulent site.  Data Integrity: HTTPS ensures that data is not altered during transmission, protecting against tampering and man-in-the-middle attacks. HTTP, HTTPS, AND WEB COMMUNICATION PROTOCOLS o Other Web Protocols:  FTP (File Transfer Protocol): Used for transferring files between a client and a server. Commonly used for uploading website files to a web server.  SMTP (Simple Mail Transfer Protocol): The protocol used for sending email messages from a client to a server and between servers. WEB DEVELOPMENT TECHNOLOGIES o Frontend Development:  HTML, CSS, JavaScript, Frontend Frameworks (Bootstrap, React, Angular). o Backend Development:  Server-Side Languages (PHP, Python, Node.js, Ruby on Rails).  Databases (MySQL, PostgreSQL, MongoDB).  Web Frameworks (Django, Laravel, Express.js). o Content Management Systems (CMS):  WordPress, Joomla, Drupal.  Try to do most of the development work on the frontend and backend CONTENT MANAGEMENT SYSTEMS (CMS) What is a CMS?  A software application that allows users to create, manage, and publish digital content, especially for websites, without needing to write code. Key Features:  User-Friendly Interface: Easy content creation and editing through a visual editor.  Themes and Templates: Pre-designed layouts to quickly change the website's look.  Plugins and Extensions: Add functionality like contact forms, SEO tools, and e-commerce.  User Management: Control access with roles like admin, editor, and contributor. ADVANTAGES OF CMS  Ease of Use: Allows non-technical users to manage website content without needing to write code, reducing the dependency on web developers.  Cost-Effective: Reduces the time and cost associated with website development and content updates, as most CMSs are open-source or have affordable pricing models.  Customization and Flexibility: Provides the ability to customize the design and functionality of the website through themes, templates, and plugins.  SEO-Friendly: Many CMSs come with built-in or plugin-based SEO tools that help optimize content for search engines, improving the website’s visibility and ranking.  Community and Support: Popular CMS platforms have large communities, offering extensive documentation, forums, and third-party resources, which help in troubleshooting and enhancing the website. CHALLENGES OF USING A CMS  Learning Curve: While CMSs are user-friendly, there can still be a learning curve for beginners, especially when dealing with more advanced customization or settings.  Security Risks: CMSs can be vulnerable to security threats, especially if not updated regularly or if using poorly coded plugins. It's important to follow best practices for securing the website.  Performance Issues: Adding too many plugins or using poorly optimized themes can slow down the website, affecting user experience and SEO.  Dependency on Plugins: While plugins extend functionality, they can also lead to compatibility issues, making it crucial to choose reliable plugins and test them thoroughly. POPULAR CMS PLATFORMS  General purpose:  WordPress: Powers over 40% of all websites globally. Known for its ease of use, extensive plugin ecosystem, and vast community support.  Joomla: Offers more advanced user management and flexible content organization, making it suitable for complex websites with multiple user types.  Drupal: Known for its robustness, scalability, and security, Drupal is often used for large-scale, enterprise-level websites.  E-Commerce specific:  Shopify: A popular CMS for e-commerce, offering a complete solution for building and managing online stores with integrated payment gateways and inventory management.  Magento: An open-source e-commerce platform with powerful features for managing large-scale online stores, including advanced SEO, product management, and marketing tools.