Introduction to Web Development and E-commerce

web development
full-stack
backend
frontend
Auteur
Affiliations

Emmanuel BRUNO

Université de Toulon

LIS UMR CNRS 7020

Date de publication

2024-10-31

About the Lecturer

Emmanuel BRUNO

  • Position: Associate Professor at the University of Toulon
  • Department: Information System Laboratory LIS - (UMR CNRS 7020)
  • Teaching Areas:
    • Advanced Coding (mainly Java and Android)
    • Collaborative Tools (Continous Integration, etc.)
    • Master Degree of Science and School of Engineering
  • Research Interests:
    • Information Retrieval
    • Recommendation Systems
    • Data Querying and Analysis

Learning Objectives 1

  • Understand the mandatory general culture of web development.

  • Gain technical knowledge and hands-on experience in web development and e-commerce.

  • For All Students

    • Mandatory General Culture:
      • Understand the basics of web development and e-commerce.
      • Gain insights into how websites and online stores are built and maintained.
      • Learn about the key technologies and concepts that drive the web.

  • For Technically Interested Students

    • Technical Bootstrap:
      • Dive deeper into HTML, CSS, JavaScript, and relational databases.
      • Get hands-on experience with building and styling web pages.
      • Explore advanced topics and tools used in modern web development.

Learning Objectives 2

  • Web Development Fundamentals:
    • Understand the basics of web development and e-commerce.
    • Gain insights into how websites and online stores are built and maintained.
    • Learn about the key technologies and concepts that drive the web.
  1. HTML (HyperText Markup Language)
    • Recall how to create web pages using HTML.
    • Review HTML tags and elements.
  2. CSS (Cascading Style Sheets)
    • Recall how to use CSS to style web pages.
    • Review the principles of responsive design and layout.
  3. JavaScript
    • Introduction to JavaScript and its role in web development.
    • Learn basic JavaScript syntax and programming concepts.
  4. Relational Databases (RDBMS)
    • Recall working with relational databases (e.g., MySQL, PostgreSQL).
    • Review basic SQL queries (SELECT, INSERT, UPDATE, DELETE).
  5. React
    • Introduction to React and its usage in building user interfaces.
    • Learn the basics of React components and state management.
  6. Remix
    • Introduction to Remix as a framework for building web applications.
    • Learn how Remix integrates with React and enhances web development.

Evaluation

  • Final Exam:
    • Individual quiz on key concepts covered in the lecture.
  • Group Project:
    • Collaborate in groups (up to five students).
    • Apply knowledge and skills in web development and e-commerce.
    • Final project deadline will be after the end of the lecture (details to come).

A Word About Large Language Models (AI - LLM)

  • Usage Inquiry:
    • Are you using any AI tools? (Raise your hand)
    • Which ones? (ChatGPT, Copilot, Gemini, etc.)
    • What do you use them for?
  • Guidelines:
    • Avoid using AI tools directly to complete exercises; it may hinder your learning process.
    • Use AI tools to:
      • Explain errors
      • Generate sample code
      • Provide insights and suggestions
  • Productivity Tips:
    • I will demonstrate how to use AI tools effectively to enhance your productivity and learning experience.

Web Development for E-commerce

  • Web Development:
    • The process of creating and maintaining websites and web applications.
    • Involves a combination of front-end (client-side) and back-end (server-side) development.
  • E-commerce Web Development:
    • Focuses specifically on building online stores and platforms for buying and selling products and services.
    • Integrates various functionalities such as product catalogs, shopping carts, payment gateways, and user accounts.

E-commerce Models and Technical Examples

B2B (Business-to-Business)

  • Definition:
    • Businesses sell products or services to other businesses.
  • Technical Aspects:
    • APIs (Application Programming Interfaces):
      • Enable seamless integration with client systems.
    • Secure Transactions:
      • Ensure secure handling of transactions and data.
  • Examples:
    • Salesforce:
      • Provides CRM (Customer Relationship Management) software to businesses, enabling them to manage customer relationships and data effectively.
    • SAP:
      • Offers enterprise resource planning (ERP) software that integrates various business processes, including finance, HR, and supply chain management.

B2C (Business-to-Consumer)

  • Businesses sell products or services directly to consumers.
  • Technical Aspects:
    • User-friendly interfaces and responsive design.
    • Secure payment gateways and personalized recommendations.
  • Examples:
    • Lacoste: Offers an online store with a user-friendly interface and secure payment options.
    • Amazon: Uses machine learning for personalized recommendations.
    • eBay: Implements real-time bidding systems.

C2C (Consumer-to-Consumer)

  • Platforms enable consumers to sell to each other.
  • Technical Aspects:
    • User authentication and secure payment processing.
    • Rating and review systems to build trust.
  • Examples:
    • eBay: Uses auction algorithms and secure payment systems.
    • Airbnb: Facilitates peer-to-peer trust user reviews and ratings.

Technical Focus for E-commerce

  • User Experience:
    • Ensures that e-commerce sites are user-friendly, visually appealing, and functional across all devices.
    • Leads to higher customer satisfaction and increased sales.
  • Performance and Scalability:
    • Optimizes site performance to handle high traffic and large volumes of transactions.
    • Ensures that the platform can scale as the business grows.
  • Security:
    • Implements security measures to protect sensitive customer data and prevent fraud.
    • Ensures compliance with industry standards and regulations.

Why an E-commerce Generalist should know web languages?

  • Improved Communication:
    • Understanding web languages helps in better communication with developers and technical teams.
    • Facilitates clearer requirements and more effective collaboration on projects.
  • Enhanced Problem-Solving:
    • Ability to identify and troubleshoot basic issues on e-commerce sites.
    • Helps in making informed decisions about website improvements and optimizations.
  • Competitive Advantage:
    • Knowledge of web languages provides a competitive edge in the job market.
    • Enables e-commerce generalists to contribute more effectively to the development and maintenance of online stores.
  • Better User Experience:
    • Ensures that e-commerce sites are user-friendly, visually appealing, and functional across all devices.
    • Leads to higher customer satisfaction and increased sales.

History of the World Wide Web (WWW)

  • 1989 - Proposal:
    • Tim Berners-Lee proposes the concept of the WWW at CERN.
  • 1990 - First Website:
    • First website (info.cern.ch) created by Tim Berners-Lee.
  • 1991 - Public Release:
    • WWW made available to the public.
  • 1993 - Mosaic Browser:
    • Mosaic browser released, making the web more accessible.
  • 1994 - Netscape Navigator:
    • Netscape Navigator browser launched, popularizing the web.
  • 1995 - Commercialization:
    • Rapid growth of commercial websites (e.g., Amazon, eBay).
  • 2000s - Web 2.0:
    • Emergence of user-generated content and social media.
  • 2010s - Mobile Web:
    • Rise of smartphones and responsive web design.
  • 2020s - Modern Web:
    • Advancements in PWAs, SPAs, and WebAssembly.

The Internet vs. the World Wide Web

World Wide Web (WWW):

  • A global system of interconnected documents and resources.
  • Includes websites, multimedia content, applications, and digital assets.
  • Uses hyperlinks to connect web pages, enabling seamless navigation.
  • Relies on the internet for communication and data transfer.
  • Facilitates machine-to-machine communication for automated data exchange.

Key Differences:

  • Internet: The networking foundation providing the infrastructure.
  • Web: The application layer providing content and services.

Client / Server Architecture

  • Web Browser

    • A software application that interprets and displays web pages.
    • Examples: Chrome, Firefox, Safari, Edge
    • Functionality:
      • Fetches web pages from servers based on URLs.
      • Renders HTML, CSS, and JavaScript to create the visual interface.
      • Handles user interactions and navigation.

  • Web Server

    • A computer system that stores and delivers web pages and other web content.
    • Examples: Apache, Nginx, IIS
    • Functionality:
      • Receives HTTP requests from browsers.
      • Processes requests and retrieves the requested content from storage.
      • Sends the content back to the browser as an HTTP response.

Introduction to HTTP Protocol

  • What is HTTP?
    • HTTP (HyperText Transfer Protocol) is the foundation of data communication on the web.
    • Used for transmitting web pages and other resources.
  • How HTTP Works:
    • Request-Response Model:
      • Client (Browser) sends an HTTP request to the server.
      • Server processes the request and sends back an HTTP response.
  • Common HTTP Methods:
    • GET: Requests data from a server (e.g., loading a web page).
    • POST: Submits data to a server (e.g., submitting a form).
  • HTTP Status Codes:
    • 200 OK: The request was successful.
    • 404 Not Found: The requested resource could not be found.
    • 500 Internal Server Error: The server encountered an error.
  • Why HTTP Matters:
    • Foundation of the Web: Enables communication between browsers and servers.
    • User Experience: Ensures web pages load and function correctly.
  • Conclusion:
    • Understanding HTTP is essential for grasping how the web works, making it a fundamental concept in web development and e-commerce.

Sequence

sequenceDiagram
    participant Browser
    participant Web Server

    Browser->>Web Server: Sends HTTP GET request for URL
    Web Server->>Web Server: Processes request, retrieves content
    Web Server-->>Browser: Sends HTTP response with content

    Browser->>Web Server: Sends HTTP POST request with form data
    Web Server->>Web Server: Processes request, updates data
    Web Server-->>Browser: Sends HTTP response with success message

    Browser->>Web Server: Sends HTTP request for image
    Web Server->>Web Server: Retrieves image from storage
    Web Server-->>Browser: Sends HTTP response with image

URL (Uniform Resource Locator)

  • A unique address that identifies a specific resource on the internet.
  • Components:
    • Protocol: Specifies how the resource should be accessed (e.g., http, https, ftp).
    • Domain name: The name of the website or server hosting the resource.
    • Path: Indicates the specific location of the resource within the website’s file structure.
  • Examples:
    • https://www.example.com
    • http://192.168.1.100/index.html
  • Role in web development:
    • Used to link to other resources within a website.
    • Used to embed external content (e.g., images, videos, scripts).
    • Used to create dynamic URLs based on user input or data.

Useful Development Tools

  • Integrated Development Environments (IDEs):
    • Visual Studio Code (with extension):
      • Features: Code editing, debugging, extensions, and version control integration.
      • Benefits: Lightweight, highly customizable, and supports multiple programming languages.
    • WebStorm:
      • Features: Advanced code editing, debugging, and built-in tools for web development.
      • Benefits: Specialized for JavaScript and web development, with strong support for frameworks like React, Angular, and Vue.js.
  • Version Control Systems:
    • Git:
      • Features: Distributed version control, branching, and merging.
      • Benefits: Facilitates collaboration, tracks changes, and allows for easy rollback.
    • GitHub:
      • Features: Code hosting, pull requests, and issue tracking.
      • Benefits: Enhances collaboration, integrates with CI/CD pipelines, and provides project management tools.

Importance of Web Accessibility

  • What is Web Accessibility?
    • Ensuring that websites and web applications are usable by people with disabilities.
    • Includes considerations for visual, auditory, motor, and cognitive impairments.
  • Why is Accessibility Important?
    • Legal and ethical responsibility to provide equal access to information.
    • Improves user experience for all users, not just those with disabilities.
    • Enhances SEO and overall site performance.
  • Key Principles of Accessible Web Design:
    • Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
    • Operable: User interface components and navigation must be operable.
    • Understandable: Information and the operation of the user interface must be understandable.
    • Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.
  • Tools and Resources:
    • WAVE: Web Accessibility Evaluation Tool
    • WCAG: Web Content Accessibility Guidelines
    • ARIA: Accessible Rich Internet Applications

Questions?

Key Takeaways

  • Web and Its Architecture:
    • Client-Server Model
    • HTTP/HTTPS Protocols
    • RESTful APIs
  • Web Development for E-commerce:
    • Front-End:
      • Technologies: HTML, CSS, JavaScript
      • Focus: Creating user-friendly and visually appealing interfaces.
    • Back-End:
      • Technologies: Server-side languages, databases, APIs
      • Focus: Handling server logic, database interactions, and business processes.
  • Technical Focus:
    • User Experience
    • Performance Optimization
    • Security Measures
  • E-commerce Models:
    • B2B (Business-to-Business)
    • B2C (Business-to-Consumer)
    • C2C (Consumer-to-Consumer)
  • Key Trends:
    • Single Page Applications (SPAs)
    • Responsive Web Design
    • Server-Side Rendering (SSR) and Static Site Generation (SSG)
    • Headless CMS
    • Progressive Web Apps (PWAs)
    • WebAssembly (Wasm)
  • Why an E-commerce Generalist Should Know Web Languages:
    • Better Collaboration with Technical Teams
    • Informed Decision-Making
    • Enhanced Problem-Solving Skills

Réutilisation