Post

Visualizzazione dei post con l'etichetta Corso di CSS & Web Design

CHI HA PAURA DELL’INTELLIGENZA ARTIFICIALE?

Immagine
  CHI HA PAURA DELL’INTELLIGENZA ARTIFICIALE? DAL SOFTWARE GENERATIVO AGLI AGENTI, DALLA MEDICINA ALLA ROBOTICA: CHE COSA L’AI SA GIÀ FARE, DOVE STA ANDANDO E QUALI RISCHI DOBBIAMO PRENDERE SUL SERIO Ogni tecnologia realmente trasformativa produce due errori speculari. Il primo consiste nel sottovalutarla, considerandola una moda destinata a rientrare. Il secondo consiste nel sopravvalutarla, attribuendole capacità che ancora non possiede e trasformando una tecnologia in una mitologia. Nel 2026 l’intelligenza artificiale si trova esattamente fra questi due estremi. Non è più ragionevole descriverla come un semplice chatbot evoluto; è altrettanto poco ragionevole presentarla come una mente universale prossima a sostituire l’essere umano in ogni attività. La questione interessante, per chi lavora nell’informatica, nella ricerca, nell’impresa o nelle professioni ad alta intensità di conoscenza, non è dunque stabilire se essere ottimisti o pessimisti. È capire che cosa stia realmente c...

Corso di CSS & Web Design: 10/10 – Codice completo di un sito internet

Immagine
10 – Codice completo di un sito internet  Ecco un file unico HTML + CSS + (poco) JavaScript pronto da copiare nell’editor e pubblicare. È un sito single-page per un artista di arti figurative: responsive, accessibile, con galleria a griglia, filtro per categorie, lightbox per visualizzare le opere, menu mobile e form contatti (mailto fallback). Le immagini sono segnaposto — sostituisci i percorsi in <img src="img/..." con i tuoi file. <!doctype html> <html lang="it"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>Nome Artista — Arti Figurative</title> <meta name="description" content="Sito ufficiale dell'artista Nome Artista. Biografia, galleria opere, mostre ed eventi, contatti." /> <!-- Font (sistema) e reset minimale --> <style> :root{ --bg:#faf9f7; --card:#ffffff; --mu...

Corso di CSS & Web Design: 9 – Progetto completo di un sito internet

Immagine
9 – Progetto completo di un sito internet  Struttura dettagliata del sito di un artista di arti figurative 🎯 Obiettivi del sito Presentare in maniera professionale l’artista (biografia, statement, contatti). Offrire una galleria di opere ordinata e facilmente navigabile. Creare uno spazio per eventi, mostre e news . Consentire il contatto diretto (form email o social). Esprimere coerenza estetica con lo stile dell’artista tramite un uso mirato di CSS (colori, tipografia, layout responsivo). 🗂 Architettura delle pagine 1. Homepage Obiettivo : dare un impatto immediato, con immagine o slider di un’opera significativa. Elementi : Logo o firma dell’artista. Menu di navigazione chiaro (Home, Biografia, Opere, Mostre, Contatti). Testo breve introduttivo (es. "Arte che unisce forma e materia..."). Richiamo immediato a una sezione in evidenza (es. ultima mostra o opera del mese). 2. Biografia / Statement Obiettivo : raccontare il percorso d...

Corso di CSS & Web Design: 8 – Effetti dinamici e animazioni

Immagine
  8 – Effetti dinamici e animazioni 1. Pseudo-classi CSS Le pseudo-classi permettono di applicare stili a elementi in stati particolari o in base alla loro posizione nel DOM. 1.1 :hover Applica stili quando il mouse passa sopra l’elemento. button:hover { background-color: #4fa3f2; color: white; } 1.2 :focus Applicato quando un elemento riceve il focus , ad esempio un input. input:focus { border-color: #4fa3f2; outline: none; } 1.3 :nth-child() Seleziona elementi in base alla loro posizione. li:nth-child(odd) { background-color: #f2f2f2; /* elementi dispari */ } li:nth-child(3) { color: red; /* terzo elemento */ } 2. Transizioni e trasformazioni 2.1 Transform Permette di modificare la posizione, dimensione o inclinazione di un elemento. .box:hover { transform: scale(1.1); /* ingrandisce */ transform: rotate(10deg); /* ruota */ transform: translateX(20px); /* sposta orizzontalmente */ } 2.2 Transition Definisce l’ anim...

Corso di CSS & Web Design: 7 – Responsive Design

Immagine
7 – Responsive Design 1. Concetto di mobile-first Responsive Design significa che il layout e i contenuti di una pagina web si adattano automaticamente alle dimensioni dello schermo del dispositivo (desktop, tablet, smartphone). Principio mobile-first Si sviluppa il layout base per dispositivi mobili . Successivamente si aggiungono regole CSS per schermi più grandi tramite media queries. Vantaggi: Migliore performance su mobile. Approccio progressivo e modulare. /* Stile base (mobile) */ body { font-size: 16px; padding: 10px; } 2. Media Queries e breakpoints 2.1 Sintassi di base @media (min-width: 768px) { /* regole per tablet e superiori */ } @media (min-width: 1024px) { /* regole per desktop */ } min-width → mobile-first max-width → desktop-first È possibile combinare condizioni multiple: @media (min-width: 768px) and (max-width: 1023px) { /* tablet */ } 2.2 Breakpoints comuni Dispositivo Breakpoint suggerito Mobile 0...

Corso di CSS & Web Design: 6 – Immagini, sfondi e media

Immagine
6 – Immagini, sfondi e media 1. Proprietà background CSS consente di gestire lo sfondo di un elemento tramite varie proprietà. 1.1 Colore di sfondo div { background-color: #f2f2f2; /* colore chiaro */ } 1.2 Immagine di sfondo div { background-image: url('immagine.jpg'); background-repeat: no-repeat; /* evita ripetizioni */ background-position: center; /* centro della cella */ background-size: cover; /* copre tutta l’area del box */ } 1.3 Gradiente Lineare: div { background: linear-gradient(to right, #ff7e5f, #feb47b); } Radiale: div { background: radial-gradient(circle, #6a11cb, #2575fc); } 2. Controllo sulle immagini 2.1 Object-fit Determina come un’immagine si adatta all’elemento contenitore: Valore Funzione fill Riempie tutto lo spazio, distorcendo se necessario contain Si adatta senza ritagliare cover Riempie senza distorsione, ritagliando se necessario none Mantiene dimensioni originali scale-down Sca...

Corso di CSS & Web Design: 5 – Layout con CSS Grid

Immagine
5 – Layout con CSS Grid 1. Introduzione al Grid System CSS Grid è un sistema di layout bidimensionale, che consente di posizionare elementi sia in righe (rows) che in colonne (columns) , rendendo più semplice creare layout complessi e responsive rispetto a Flexbox (che è più indicato per un asse principale). Vantaggi principali Controllo preciso su righe e colonne. Possibilità di ridimensionare automaticamente gli elementi . Facilita la creazione di homepage, magazine, dashboard . 2. Container Grid e Items 2.1 Container Grid Per definire un container grid: .container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* definizione colonne */ grid-template-rows: 100px auto 50px; /* definizione righe */ gap: 15px; /* spazio tra righe e colonne */ } fr = frazioni dello spazio disponibile. gap = distanza tra righe e colonne. grid-template-columns e grid-template-rows definiscono la struttura del layout . 2.2 Items Gli elementi figli del con...

Corso di CSS & Web Design: 4 – Layout con Flexbox

Immagine
4 – Layout con Flexbox 1. Concetti chiave: container e items Flexbox è un modello di layout CSS pensato per disporre elementi in modo flessibile e responsivo , sia in orizzontale che in verticale. 1.1 Container L’elemento genitore diventa contenitore flessibile con: display: flex; Proprietà principali del container: flex-direction : direzione principale degli elementi ( row , row-reverse , column , column-reverse ). justify-content : allineamento lungo l’asse principale ( flex-start , center , space-between , space-around ). align-items : allineamento lungo l’asse trasversale ( flex-start , center , stretch , baseline ). flex-wrap : gestione del ritorno a capo ( nowrap , wrap , wrap-reverse ). 1.2 Items Elementi figli (items) del container: flex-grow : capacità di espandersi rispetto agli altri elementi. flex-shrink : capacità di ridursi. flex-basis : dimensione iniziale preferita. align-self : sovrascrive l’allineamento lungo l’asse trasv...

Corso di CSS & Web Design: 3 – Box Model e spaziature

Immagine
3 – Box Model e spaziature 1. Concetto di Box Model In CSS ogni elemento HTML viene rappresentato come un rettangolo chiamato “box” , costituito da 4 aree principali : Content (contenuto) – dove si trova testo, immagine o contenuto dell’elemento. Padding (riempimento interno) – spazio tra contenuto e bordo. Border (bordo) – contorno dell’elemento. Margin (margine esterno) – spazio tra l’elemento e gli altri elementi. Schema Box Model +-------------------------+ | Margin | | +-------------------+ | | | Border | | | | +-------------+ | | | | | Padding | | | | | | +---------+ | | | | | | | Content | | | | | | | +---------+ | | | | | +-------------+ | | | +-------------------+ | +-------------------------+ Proprietà principali margin : distanza dall’esterno del box margin: 20px; /* tutte le direzioni */ margin-top: 10px; margin-left: auto; margin-right: auto; /* centratura orizzontale */ padding : ...

Corso di CSS & Web Design: 2 – Colori, font e testo

Immagine
2 – Colori, font e testo 1. Gestione dei colori in CSS In CSS possiamo definire i colori in diversi formati : 1.1 RGB Rappresenta il colore tramite rosso, verde e blu (Red, Green, Blue) con valori da 0 a 255: p { color: rgb(255, 0, 0); /* rosso */ } 1.2 HEX Codice esadecimale, formato #RRGGBB : p { color: #00ff00; /* verde */ } 1.3 HSL Hue-Saturation-Lightness (tonalità, saturazione, luminosità): p { color: hsl(240, 100%, 50%); /* blu puro */ } 1.4 Trasparenze (RGBA / HSLA) Aggiunge un canale alpha (0 = trasparente, 1 = opaco): p { color: rgba(255, 0, 0, 0.5); /* rosso semi-trasparente */ } 2. Proprietà tipografiche 2.1 font-family Definisce il tipo di carattere: p { font-family: Arial, sans-serif; } Consiglio : sempre prevedere un “fallback” ( sans-serif , serif , monospace ). 2.2 font-size Dimensione del testo. Valori comuni: p { font-size: 16px; /* pixel */ font-size: 1.2em; /* em relativi al font del genitore */ font-size: 120%; /* p...

Corso di CSS & Web Design: 1 – Introduzione a CSS

Immagine
1 – Introduzione a CSS 1. Cos’è il CSS e come si collega all’HTML CSS ( Cascading Style Sheets ) è il linguaggio utilizzato per definire lo stile e la presentazione di una pagina web . Grazie al CSS possiamo separare contenuto (HTML) e stile (CSS) , rendendo il codice più leggibile e modulare. Funzioni principali del CSS Definire colori, font, dimensioni, margini, padding e layout. Gestire il posizionamento degli elementi sulla pagina. Creare effetti visivi e interattivi (hover, animazioni, transizioni). Collegamento tra CSS e HTML Il CSS può essere applicato in tre modi: Inline CSS – direttamente nell’elemento HTML: <p style="color: blue; font-size: 16px;">Testo blu</p> Pro : semplice e veloce. Contro : difficile da mantenere su siti complessi. Internal CSS – all’interno della pagina HTML, nel tag <style> : <head> <style> p { color: green; font-size: 18px; } </style> </head...

Post popolari in questo blog

Corso di Programmazione Strutturata e OOP: 3 Ereditarietà incapsulamento polimorfismo

Corso di CSS & Web Design: 3 – Box Model e spaziature

Corso di HTML: 11 Sviluppo completo di un sito