Scarica FrontEnd - Interaction Design e più Dispense in PDF di Informatica gestionale solo su Docsity!
What is the Web?
The Largest Platform: The Web is a software platform, running on billions of devices like phones, computers, TVs, and watches. No Installation Needed: To use it, you don't need to install any special software; you just type a URL (web address) into a browser. Open Standards: It is built on open rules ( open standards ) that anyone can read, learn, and use to contribute. Internet vs. Web (The big di@erence): o The Internet: it is the physical infrastructure - the massive network of connected computers (as road network). o The Web: it is just one of many services that run on top of the Internet (Web = car using those roads) Other services on the Internet: Email (SMTP), file transfers (FTP), and video calls. Definition : The Web is a system of interconnected documents and applications accessed via a browser It is built on three open standards : One language for each part (websites are built on them):
- HTTP : the protocol to transfer data (HyperText Transfer Protocol)
- HTML : the format to structure content
- URLs: the addressing system
- HTML: structure and meaning
- CSS: visual presentation and layout
- JavaScript: behaviour and interactivity Client and Server: How They Communicate The web works on a system called the Client-Server model :
- Client: device and softwares (like Chrome or Safari) making a request for information
- Server: the machine responding to that request (a remote computer)
- The Golden Rule: communication is always started by the client. A single server can handle thousands of clients at the exact same time. What Happens When You Type a URL? (The 7 Steps) When you type an address (like [https://example.com/about]) and press Enter, several things happen in a fraction of a second:
- Typing: You enter the URL.
- Cache Check: The browser checks its local memory ( cache ) to see if you visited recently (to load it faster).
- DNS Resolution: Computers don't understand words (like example.com ); they only understand numbers called IP addresses (e.g., 93.184.216.34). The DNS (Domain Name System) acts like the "phonebook of the web" and translates the name into an IP number.
- TCP/TLS Connection: A secure connection is established with the server.
- HTTP Request: The browser sends an oficial request for the data to the server.
- HTTP Response: The server processes the request and sends back the files (the website's code).
- Rendering: The browser receives the code (HTML) and transforms it into the visual page you see. Understanding the HTTP Protocol HTTP ( HyperText Transfer Protocol ) is the common language that clients and servers use to talk to each other.
- It is Stateless: Every single request is independent. The server remember nothing about your previous request.
- HTTPS: This is the encrypted and secure version of HTTP. It protects your data from hackers and unlocks modern browser features (like location tracking). HTTP Methods (The Actions) When a client makes a request, it uses a “method” to tell the server what action it wants to perform:
- GET: Used to read or retrieve data (e.g., viewing a photo).
- POST: Used to create and send new data to the server (e.g., signing up for an account).
- PUT: Used to update or replace something that already exists.
- DELETE: Used to remove a resource from the server. Status Codes (The Server’s Answers) The server always replies with a three-digit number to tell you how the request went:
- 1xx (Informational): request received, processing
- 2xx (Success): everything is okay! The most famous one is 200 OK.
- 3xx (Redirection): the page has moved to a diferent address.
- 4xx (Client Error): you made a mistake à 404 Not Found (the page doesn’t exist) or 401 Unauthorized (you need to log in)
- 5xx (Server Error): the server crashed or has an internal problem. Example: 500 Internal Server Error. The Front-End Trio: HTML, CSS, and JavaScript Every website you visit is built using three core languages:
- HTML (Structure): Defines what is on the page (text, images, headings). It is a markup language, not a programming language.
- CSS (Style): Defines how it looks (colors, fonts, layouts, backgrounds).
- JavaScript (Behavior): Makes the page alive and interactive (animations, clickable buttons, math calculations). How the Browser Paints the Page (The Rendering Pipeline) Browsers cannot display HTML/CSS text directly; they must convert them into tree structures they can handle:
- DOM (Document Object Model): The browser takes the HTML and turns it into a tree of elements (nodes). JavaScript reads and modifies this DOM, not the original text file.
- CSSOM (CSS Object Model): The browser takes the CSS and creates a tree containing all the styles. Note: CSS is render-blocking , meaning the browser won't draw anything until it finishes reading all the CSS.
- Render Tree: The browser combines the DOM and CSSOM into the Render Tree , which contains only the elements that will actually be visible on your screen. This acts as the final blueprint used to paint the pixels. Web Accessibility (A11y) Why it matters: Around 16% of the world's population lives with a disability (visual, motor, cognitive). A website must be designed so everyone can use it. In many places (like the EU), it is legally required. The POUR Principles: According to accessibility guidelines (WCAG), the web must be: o P erceivable: Users must be able to see or hear the information. o O perable: Users must be able to navigate easily (e.g., using only a keyboard if they can't use a mouse). o U nderstandable: The text and user interface must be clear. o R obust: It must work well across diferent devices and browsers. Semantic HTML: Using the correct tags (like instead of a blank ) gives you built-in accessibility because screen readers (used by visually impaired users) instantly understand what that element does.
What is CSS?
CSS stands for Cascading Style Sheets. Separation of Concerns: This means HTML and CSS have completely diferent jobs.
- HTML provides the Meaning and Structure ,
- CSS provides the Style and Appearance. Open Standard: Just like HTML, CSS is an open standard that any web browser can read and understand. CSS Syntax (How to Write It) To tell the browser what to change, you write a Rule Set. It looks like this: p { color: blue; }
- Selector: The HTML element you want to style (in the example above, p).
- Declaration Block: Everything hidden inside the curly braces { }.
- Property: The specific feature you want to change (like color).
- Value: The setting you want to apply (like blue).
- Important Rules: You must separate a property and value with a colon (:) and end every single declaration with a semicolon (;). The 3 Ways to Add CSS to HTML There are three diferent methods to attach your styles to an HTML document:
- Inline CSS: You write the styles directly inside the HTML tag using the style attribute. Example:
...
. - Internal CSS: You place the styles inside a Mobile-First Strategy: A smart plan where you write your base CSS for small phone screens first, then use media queries to add layout changes for tablets and desktops later.
Front-End vs. Back-End: Who Does What?
What is the Front-End?
- The User Interface: It includes everything that the user can see and click on directly in their web browser.
- The Client Side: It runs directly on the client, which means the user's own computer or phone.
- Its Job: It is responsible for rendering (drawing) content, taking user inputs (like typing in a form), and displaying data nicely.
- No Server Access: It cannot talk directly to databases or look at the server's private file system. What is the Back-End?
- The Server Side: It includes everything that runs behind the scenes on a remote computer server, making it completely invisible to the user.
- Its Job: It handles the core business logic, such as checking user passwords (authentication), processing data rules, and reading or writing to the database.
- The Data Provider: It shares its data and functions with the front-end by using APIs. How Do They Talk to Each Other? Modern web applications depend on a constant conversation between both sides:
1. Downloading the Site: First, your browser downloads the front-end files (HTML+CSS+JS) from a server.
- The Request-Response Cycle: o When a user clicks a button, JavaScript triggers an HTTP Request across the network to the back-end. o The back-end server receives the request, processes the logic, and talks to its database if needed. o The server sends back an HTTP Response containing a status code and data.
- Updating the Page: JavaScript reads that response and immediately updates the webpage without reloading the whole screen.
- The Standard Language: This entire conversation usually moves data back and forth using the JSON format. What is JSON?
- The Name: JSON stands for JavaScript Object Notation.
- Its Purpose: It is a lightweight, text-based format specifically designed for storing and exchanging structured data. It is the universal language for REST APIs.
- Simple Syntax: It uses structured data types like Strings ("text"), Numbers ( 42 ), Booleans (true/false), Objects ({ }), and ordered lists called Arrays ([ ]). ❌ Critical JSON Rules (Avoid These Exam Traps!)
- Double Quotes Only: Keys (property names) and string values must use double quotes ("like this"). Single quotes ('like this') are completely invalid.
- No Trailing Commas: Never put a comma after the very last item in an object or an array.
- No Comments: You cannot write notes or code comments inside a JSON file. Understanding RESTful APIs What is an API? An API ( Application Programming Interface ) is a simple set of rules that lets two completely diferent software apps talk to each other safely. Concretely, the backend gives the front-end a list of specific web addresses ( URLs ) called endpoints to call. What makes an API "RESTful"? REST ( Representational State Transfer ) is a widely used design style for creating predictable APIs. It follows these clean guidelines:
- Use Nouns, Not Verbs, for Paths: The URL path should only name the resource collection using plural words. The actual action is determined by the HTTP Method (GET, POST, DELETE). o ❌ Bad API Path: /api/add_user or /api/delete_user o Good API Path: POST /api/users (Creates a user) or DELETE /api/users/42 (Deletes user 42)
- Nesting Hierarchies: If resources belong inside other resources, nest them in the URL. For example, to look at a specific post written by a specific user: /api/users/:id/posts.
- Filtering and Pagination: If a request could return billions of results (like fetching all users), developers add query parameters to filter, sort, or limit the results. Example: GET /api/users?biography=Footballer.
- Versioning: APIs change over time. To avoid breaking old apps, versions are added directly to the URL path (e.g., /v1/users and /v2/users). What is CORS? (Cross-Origin Resource Sharing) The Concept of an "Origin" An origin is defined strictly by three elements matching perfectly:
- Protocol (e.g., http vs https)
- Domain (e.g., example.com vs api.example.com)
- Port (e.g., port 3000 vs port 8080 ) The Same-Origin Policy By default, web browsers enforce a strict security law: a web page can only request resources from the exact same origin it was downloaded from. This stop hackers on evil.com from running quiet scripts that read private data from yourbank.comon your behalf. How CORS Fixes This Sometimes, you need to separate your apps (e.g., your front-end is hosted on https://myfrontend.com and your API sits on https://myapi.com) CORS is a browser mechanism that safely relaxes this strict rule. The back-end server adds special approval headers to its responses telling the browser it is safe to share:
- Access-Control-Allow-Origin: https://myfrontend.com If the backend doesn't send these explicit headers, the browser will instantly step in and block the front-end from reading the data! Note: CORS issues only happen inside web browsers. Server-to-server communication is completely unafected by CORS rules.
What is JavaScript (JS)?
The Language of the Web : JavaScript is the primary programming language used to make web pages interactive and dynamic. Runs in the Browser : It executes directly inside the user's web browser, so the user does not need to install anything. Real-Time Actions : It changes page content in real time, responds to user actions (like clicks), and talks to servers across the network. Server-Side Use : It can also run on a computer server using a tool called Node.js. History : It was created in 1995 by Brendan Eich in just 10 days. Type Coercion (A Common JS Trait) : JS tries to be helpful by automatically changing data types behind the scenes. For example, adding an empty array and an empty object [] + {} returns the string "[object Object]". How to Add JS to a Web Page
- Inline : Writing your code directly inside a
Preventing Form Reloads (event.preventDefault()) : By default, web browsers try to reload the entire screen when a is submitted. You must run event.preventDefault() inside your submit listener to block this behavior so your JavaScript code can handle the submission smoothly.
5. The Node.js Ecosystem and Packages - Packages : A package is a pre-written library or code module created by another developer that you can download and reuse to avoid rewriting common features from scratch. - Node.js : A special runtime environment that allows JavaScript code to execute outside of a web browser (like running directly on your laptop or on a cloud server). - npm (Node Package Manager) : The default software package manager installed with Node.js. It serves as the single largest online registry of JavaScript packages globally. Common npm Terminal Commands - npm init: Creates a brand-new project directory and generates a package.json configurations file. - npm install: Installs every dependency library listed inside an existing package.json file. - npm install axios: Downloads and installs a specific external library (like axios ) to your current project. - npm run dev: Runs a specific developer execution script configured inside your project's package.json. 6. Asynchronous JavaScript & fetch() Why Asynchronous (Async) Code is Mandatory JavaScript is single-threaded , meaning it is physically limited to doing only one task at a time. Requesting data from a distant web server takes time. If JavaScript ran synchronously, it would completely freeze up the webpage while waiting for the server to reply. Async patterns allow JavaScript to trigger a network task, keep running other code, and handle the server result later when it arrives. What is a Promise? A Promise is a JavaScript object that acts as a placeholder for data that will become available in the future. A Promise always sits in one of three states: 1. Pending : Still waiting for the network task to finish. 2. Fulfilled : The task completed successfully. 3. Rejected : The task failed or threw an error. The Modern Way: async / await While you can handle Promises using long chains of .then() and .catch(), modern developers prefer writing async / awaitbecause it reads top-to-bottom like standard code. - You can only use the await keyword inside a function marked with the async keyword. - You use standard try { ... } catch (error) { ... } blocks to capture structural failures. Using fetch() to Make API Calls fetch() is the native browser function used to make HTTP network requests. It returns a Promise. ⚠ The Exam Trap for fetch() : A fetch() request does not throw an error or trigger your catch block if the server returns a 404 Not Found or 500 Internal Error. It only throws a structural error if there is a literal network failure (like a disconnected internet line). Because of this, you must explicitly check if (!response.ok) to handle server errors safely. Code Example: fetch() GET Request with async/await JavaScript async function loadUserData () { try { const response = await fetch(" https://jsonplaceholder.typicode.com/users/1 "); // Check if the server response failed (status codes outside 200-299) if (!response.ok) { throw new Error (" Server error : " + response.status); }
// Extracting JSON from the response also returns a Promise! const user = await response.json(); console .log(user.name); } catch (error) { console .error(" Failed to load user data :", error); } }
What is Astro?
A Modern Framework: Astro is a modern web framework designed specifically for building content-focused websites, such as blogs, portfolios, marketing sites, and documentation pages. The Core Philosophy: Its main goal is to ship as little JavaScript to the browser as possible. The Opposite Approach: Most standard frontend frameworks send massive JavaScript application bundles to the browser to build pages on the client side. Astro does the opposite: it generates static HTML on the server at build time, so the user's browser loads vanilla HTML instantly. Quick Facts: o Languages: JavaScript and TypeScript. o Current Version: Astro 6 (released March 10, 2026). o Installation Terminal Command: npm create astro@latest.
2. UI Frameworks vs. Meta-Frameworks Why do we need UI Frameworks? Standard JavaScript works fine, but as a web app grows larger, updating the DOM manually element-by-element becomes complicated and prone to bugs. UI frameworks fix this by providing structured components, automatic DOM changes, and predictable state trackers. The three dominant UI libraries mentioned are: 1. React (by Meta, 2013): Built as a tree of components using an HTML-like JavaScript syntax called JSX. It has a massive ecosystem but a steep learning curve. 2. Vue (by Evan You, 2014): Approachable, component-based, and uses Single-File Components. 3. Svelte (by Rich Harris, 2016): Fundamentally diferent because it has no virtual DOM. It compiles components directly down to plain, vanilla JavaScript at build time for excellent performance. What is a Meta-Framework? UI libraries (like basic React or Vue) only handle the component layer—they don't manage page routing, server optimizations, or build processes on their own. A meta-framework sits on top of a UI library to add those missing pieces so you can build complete, production-ready web apps. - React ➡ Next.js - Vue ➡ Nuxt - Svelte ➡ SvelteKit The Issue: These meta-frameworks make pages "heavy" with JavaScript, even for simple websites. Astro solves this by letting you use components from React, Vue, or Svelte inside an ultra-light Astro site. 3. Astro Project Structure When you generate a new Astro project, it follows a clean folder outline: - public/: Stores completely static assets like raw images, web fonts, icons, or text files that require zero automated code processing. - src/components/: Holds all your reusable pieces of user interface that are shared across pages. - src/layouts/: Special template shells used to wrap pages with matching scafolding (like shared metadata or universal sidebars). - src/pages/: The core directory for routing. Every individual file placed here automatically becomes a live URL path on your website with no manual configuration needed. For example, src/pages/about.astro automatically maps to the /about URL.
- You configure your structural rules in a central file at the root named src/content.config.ts.
- It uses a module called glob() to specify exactly where your data files live and a schema builder module (zod) to strictly validate that your frontmatter keys match the expected data types (like ensuring a title is a string).
- In your pages, you fetch these clean collections using getCollection('blog'). 8. Managing Data Fetching: The Big Matrix By default, standard data fetching (fetch()) written inside an Astro frontmatter block executes on the server side at build time. By the time a user requests the page, the data is already permanently baked directly into the static HTML code. If your app data changes constantly, rebuilding the whole site is impossible. Astro provides three primary strategies to manage data: Strategy When Content Changes
SEO
Value Requires a Server? User- Specific? Static Never / rarely ✅ Yes ❌ No server needed ❌ No Client-side Fetch At runtime (live) ❌ No ❌ No server needed ✅ Yes Server-Side Rendering (SSR) At runtime (live) ✅ Yes ✅ Yes, a server is required ✅ Yes Practical Project Management Commands When building or testing a real project, you interact using these four core console commands:
- npm install: Downloads and sets up all the project code dependencies.
- npm run dev: Starts up a local, live development environment on your machine for coding.
- npm run build: Compiles your code into tight, optimized production static files ready for deployment.
- npm run preview: Launches a local preview server environment to test the final built production files before uploading them live.
