Corso Pensiero Computazionale e Coding per Tutti: 3 Il linguaggio binario e i sistemi di numerazione

Immagine
3 Il linguaggio binario e i sistemi di numerazione Introduzione: perché il binario? Immagina un corridoio pieno di lampadine. Ogni lampadina può essere accesa (1) o spenta (0). Con una sola lampadina puoi indicare due stati: acceso/spento. Con due lampadine hai quattro combinazioni (00, 01, 10, 11). Questo è il cuore del linguaggio digitale: segnali ON/OFF, sì/no, 1/0. I computer parlano così perché i componenti elettronici — transistor, porte logiche — funzionano scegliendo tra due stati. Concetti teorici essenziali Bit = binary digit = 0 o 1. Posizione in un numero binario corrisponde a una potenza di 2. Da destra a sinistra: 2⁰, 2¹, 2², 2³, … Byte = 8 bit. Nibble = 4 bit. Parole (word) dipendono dall’architettura (16, 32, 64 bit). Range valori: con n bit si rappresentano 0 … (2ⁿ − 1) per numeri senza segno. Due-complemento = convenzione per rappresentare numeri negativi (vedremo come funziona). Tabella rapida potenze di 2 (utile come "tassello" in classe) ...
Posta un commento

Corso di CSS & Web Design

 

Web Design

Corso di CSS & Web Design

Dalle basi del CSS al progetto completo di un sito internet: colori, tipografia, box model, Flexbox e Grid, immagini, responsive design, animazioni e ottimizzazione.

10 lezioni Livello: base/intermedio
  1. Introduzione a CSS
  2. Colori, font e testo
  3. Box Model e spaziature
  4. Layout con Flexbox
  5. Layout con CSS Grid
  6. Immagini
  7. Responsive Design
  8. Effetti dinamici e animazioni
  9. Progetto completo di un sito internet
  10. Codice completo di un sito internet

↩ Torna a Web Design

Commenti

Posta un commento

Post popolari in questo blog

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

Immagine
3 Ereditarietà, Incapsulamento, Polimorfismo 📚 Contenuti teorici 🔹 1. Ereditarietà È il meccanismo per cui una classe figlia (o derivata) può ereditare attributi e metodi da una classe madre (o base) . Esempio semplice in Python: class Veicolo: def __init__(self, marca): self.marca = marca def accendi_motore(self): print("Motore acceso") class Auto(Veicolo): # Auto eredita da Veicolo def apri_portiere(self): print("Portiere aperte") mia_auto = Auto("Fiat") mia_auto.accendi_motore() # Metodo ereditato mia_auto.apri_portiere() # Metodo della classe Auto 🧩 Osservazione: Auto eredita tutto da Veicolo ma può aggiungere comportamenti nuovi o sovrascrivere quelli esistenti. 🔹 2. Incapsulamento Significa nascondere i dettagli interni e proteggere i dati usando modificatori di accesso e metodi per leggere/scrivere valori. Esempio in Python con getter e setter : class ContoBancario: def __ini...
Continua a leggere

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 : ...
Continua a leggere

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...
Continua a leggere