1-UnderstandingHowWebsitesWork (1).pdf
Transcript
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.