Students should have basic knowledge of computer science fundamentals and of at least one Object-Oriented Programming language.

The course is structured in three sections
Design: software lifecycle, design techniques. Technology: fundamentals of computer networks and cybersecurity. Development: introduction to HTML, CSS, JavaScript and React

The course aims to provide a basic understanding of the lifecycle of web applications, computer networks, protocols, and the hardware components that support network connections. The program also aims to provide foundational practical skills for the website design phase, including requirements validation and prototyping, utilizing AI tools as well.

1.Knowledge and Understanding

By the end of the course, students will have acquired theoretical and methodological knowledge regarding the fundamentals of web technologies, including an understanding of client-server architecture, the functioning of computer networks, and the protocols and services that support the Web (HTTP, DNS, HTTPS, VPN, SSH), as well as the principles of cybersecurity as applied to digital environments.

Students will be familiar with the main components of a web browser, the page rendering process, the Document Object Model (DOM), client-side data persistence mechanisms, and security issues associated with web applications. They will also be familiar with the main models for managing digital identity and authentication, mechanisms for protecting credentials, and the main vectors of cyberattacks.

Students will acquire knowledge of web site and application design methodologies, including stakeholder analysis, persona definition, requirements engineering, and the use of modeling and prototyping tools.

Finally, students will learn the fundamental languages and tools for front-end web development, including HTML, CSS, JavaScript, and the basics of interface development using the React library, as well as the software tools commonly used for developing and debugging web applications.

 

2. Ability to Apply Knowledge and Understanding

Upon completion of the course, students will be able to:

 

• analyze the architecture of a web system by identifying its components, services, communication protocols, and information flows;
• interpret how an HTTP request works;
• critically evaluate main cybersecurity issues related to the use of web technologies;
• identify users, stakeholders, and the functional and non-functional requirements of a web application through the use of personas, use cases, and prototypes;
• design the information architecture and navigation of simple websites and web applications;
• develop static web pages using HTML and CSS;
• use development and debugging tools to inspect, analyze, and correct errors in web applications;
• create simple interactive components using JavaScript and React in a local development environment.

3.Independent Judgment

Upon completion of the course, students will be able to critically evaluate the technological and design choices made in the development of websites and web applications, taking into account aspects of usability, security, technical sustainability, and regulatory compliance.

Students will also be able to analyze real-world cases, interpret technical information from documentation and development tools, identify basic vulnerabilities, and form independent judgments regarding the quality of design and implementation solutions.

 

4.Communication Skills

Upon completion of the course, students will be able to correctly use the technical vocabulary of web technologies and cybersecurity, clearly and effectively describing architectures, processes, requirements, and design and implementation solutions.

Students will be able to represent and communicate the requirements and functionalities of web systems using natural language, UML diagrams, mockups, and other modeling tools, as well as present and discuss the results of the design and development activities carried out during the course.

 

5.Learning Outcomes

By the end of the course, students will have acquired the methods and tools to independently update their skills in the field of web technologies, which is characterized by continuous technological evolution.

Students will be able to consult technical documentation, use official online resources, and learn new development frameworks and tools, critically evaluating their features and areas of application. These skills will provide a solid foundation for further studies in computer science, digital heritage, and digital technologies, as well as for ongoing professional development.

The course mixes traditional lectures with hands-on workshops. At the beginning of the semester, the students are assigned a project on web development that will be presented during the final lesson.

Oral exam about theoretical concepts. To take the oral exam, students must have submitted the project assigned during the course and the project has to be evaluated positively.

 

 

The oral exam will be based on the study of the teaching material provided on the teams channel of the course and is to verify the knowledge of the lesson topics, analyzed throughout the course. In particular, the student will be evaluated considering:

• knowledge and understanding of the subject matter,
• ability to apply knowledge acquired, synthesis and formal correctness in the exposition and ability to argue one's thesis
• autonomy of judgment,
• communication skills.

 

The exam score is assigned using a grade expressed in thirtieths (or through a pass/fail assessment).

 

In the evaluation of the exam, the determination of the final grade considers the following elements:

 

28-30 with honors: excellent evaluation; comprehensive and rich preparation; in the presentation, accurate expression, confident knowledge of the topics, clarity of exposition,.of the definitions needed for the previous band scores and Multifactor authentication, Hashing, hash tables, salting, session hijacking, SSH. Ports and main port numbers, port scanning.

27-25: knowledge and correct exposition of the definitions needed for the 20-18 and 24-21 band score and topologies of computer networks, DOM, CSSOM, web content licensing. Main types of attacks (Brute force, dictionary, machine in the middle, keylogging, social engineering: phishing, eavesdropping )

24-21: knowledge and correct exposition of the definitions needed for the 20-18 band score and HTTP, HTTPS, TCP/IP, HTTP request-response cycle, DNS, root server, computer network, network devices. Classification of computer networks based on geographical area, public and private IP address.

 

 20-18: knowledge and correct exposition of the following definitions: Website, static/dynamic website, web browser-its component and its functions, client-server architecture, server, client,fronted/backend, sfotware application lyfecycle and its phases, the design phase of web applications-phases and tools, requirement engineering, requirement, waterfall development va agile development. Main cybersecurity issues in authentication. HTML, CSS and their scope.

 < 18: insufficient evaluation; insufficient preparation; insufficient presentation.

 

 

Assessment sessions are scheduled through the EasyTest platform, in

accordance with the number of sessions and time windows set by the

Teaching Calendar approved by the Department Board.

Assessment sessions are scheduled through the EasyTest platform, in

accordance with the number of sessions and time windows set by the

Teaching Calendar approved by the Department Board.

TECHNOLOGIES.

Introduction to web technologies vocabulary: web browser, client-server architecture, front-end and back-end, web site, web application.

The software lifecycle phases.

Definition of computer network. Network devices: router, switch. Hub, gateway,repeater, modem, access point,firewall.

Types of computer networks: classification based on geographical area: personal, local, campus, metropolitan, wide area networks.

Classification Based on Ownership and Access Control: public and private networks.

Public and private IP address.

VPN (VPN client, VPN servers, how VPNs work, VPN client functionalities, VPN use cases)

Reverse Engineering definition.

The HTTP protocol. HTTP Request-Response Cycle. UML sequence diagram of a simple client-server GET request – response. DNS and DNS resolution.

The web browser. Components of the web browser: User Interface, Browser Engine, Rendering Engine, Data Persistence, Networking, JavaScript Interpreter, UI Backend. Available Rendering Engines, tasks performed by the rendering engines, the rendering process. Document Object model. Types of Browser Storage, LocalStorage, SessionStorage, Cookies.

Protecting and using online content. Copyright and Creative Common Licenses (MIT, GPL, Apache 2.0, BDS).

Cyber security: definition of cybersecurity and cyber attack. European regulation framework for cybersecurity.Account, authentication, authorization. Dictionary attack, brute force attack, two factor authentication, Multi-factor authentication (MFA), keylogging, credential stuffing. Social Engineering, Phishing. Single-Sign-On (SSO), Password managers, Passkeys.

Using Hashing and Salting to increase the level of security of storing username and password in password databases. Rainbow tables. Eavesdropping attack. Machine in the middle attack. Cookies: security issues. HTTPS. Secure Shell (SSH). Ports in Web Technology. Common Port numbers, Port Scanning

DESIGN.

The design phase for web sites and web applications. Actors and roles involved. Personas as an instrument of design. Methodologies to identify and describe personas.

From personas to requirements. Extracting requirements, expressing requirements in natural language, expressing requirements using graphical notation (uml use case diagram), prototyping using mockups. Requirement validation

DEVELOPMENT.

HTML: basic structure of an html file. <html>,<head>,<body>, <p>,<h1>, <ul>,<ol>,<li> elements. Hypertext definition, inserting hyperlinks in html, inserting pictures in html, organizing a root folder, understanding paths for resources. Inspecting webpages using DevTools.

HTML styling (inline, <style>, css), CSS rules, CSS properties.

Using visual Studio code for web development, Live preview extension, setting up folders for website development in a local environment.

introduction to javascript + finding and fixing errors with javascript console.

introduction to React library, installing React, node.js as a local javascript environment, basic structure of a react app, using and creating simple react components.

 

Non-attending students must contact the instructor by email to discuss the project and its submission.

 

Documentation on W3Schools -https://www.w3schools.com/- for HTML, CSS, JavaScript, React and node.js.