Introduction to Web Development and E-commerce

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.

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.

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)

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.

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.

Key Trends

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