Docente: Matteo Subet

Il seminario è progettato per offrire agli studenti una solida comprensione delle tecnologie essenziali per lo sviluppo web, come HTML, CSS e JavaScript. Sviluppato con gli studenti del Bachelor of Arts in Comunicazione Visiva (2° e 3° Anno) della Scuola universitaria professionale della Svizzera italiana (SUPSI), il seminario della durata di una settimana si articola in due fasi principali: familiarrizazione e messa in pratica. Durante la prima parte la classe inizierà a familiarizzare con HTML, CSS e JavaScript vanilla attraverso lezioni mirate all'apprendimento del vocabolario e della sintassi di sviluppo. Durante la seconda fase invece le studentesse e gli studenti avranno la possibilità di acquisire esperienza attraverso lo sviluppo di un progetto personale dove mostrare quanto acquisito.

Progetti finali 2024

Lara Bernasconi

Il progetto rappresenta una pagina portfolio che combina una selezione di lavori, ognuno accompagnato da immagini pulite e descrizioni concise. La pagina è strutturata in modo semplice e intuitivo, con un layout ordinato che riflette lo stile minimalista e professionale. Dal punto di vista stilistico, il design del portfolio si ispira al Swiss Design, con un'attenzione particolare alla tipografia precisa, all'uso dello spazio bianco e alla griglia che mantiene l'intero layout bilanciato. Le immagini dei lavori sono presentate in una griglia ordinata, dove ogni progetto viene messo in risalto attraverso la sua immagine rappresentativa.

Link al progetto

Arianna Chiodo

Il mio progetto consiste nella realizzazione di un sito web personale che includa tutte le informazioni necessarie per presentarmi al meglio. Il sito è strutturato per offrire una panoramica chiara e concisa delle mie competenze, esperienze e progetti, con sezioni dedicate al curriculum vitae, al portfolio e ai contatti.
Ho scelto un design minimalista per garantire un'esperienza utente intuitiva e senza distrazioni, puntando su un layout pulito e un'organizzazione semplice. L'obiettivo è permettere ai visitatori di navigare facilmente tra le sezioni, trovando velocemente le informazioni di cui hanno bisogno, sia che si tratti di esplorare i miei lavori passati, visionare il mio CV o contattarmi per collaborazioni.

Link al progetto

Tommaso Stanga

Per il mio progetto finale ho deciso di realizzare un piccolo portfolio digitale in stile "elettro-web" ed ho provato ad utilizzare soprattutto la parte di css, anche perchè è quella che più ho appreso visto che in qualche modo sembra di usare inDesign ma invece di operare con oggetti e immagini si lavora con il codice. Inoltre ho provato ad aggiungerci anche piccoli movimenti, e mi sembra di aver capito come si fa muovere le cose.

Link al progetto

Leonardo Mariucci

Per questo progetto, ho creato una pagina in stile linktree ispirata al Teletext o Televideo. Mi sono concentrato particolarmente sulla parte di CSS per rendere l'estetica coerente con il concetto che desideravo trasmettere attraverso la pagina.

Link al progetto

Arianna Copa

In questo progetto ho tentato in modo molto basico a creare un portfolio con quello che ho imparato durante il corso. Questa potrebbe essere la pagina principale per un portoflio che andrò a creare in futuro: oltre al testo sono presenti alcune interazioni, immagini, link.

Link al progetto

Dragan Radic

In questo progetto, ho creato una pagina web interattiva combinando HTML, CSS e JavaScript. Ho progettato una barra di navigazione con un logo animato, un titolo che cambia automaticamente in base al giorno della settimana, e una sezione che mostra data e ora in tempo reale. Ho incluso un paragrafo ironico sul coding e una galleria di immagini animate con effetti hover che ne modificano la dimensione. I link a siti esterni sono stilizzati con effetti dinamici. Utilizzo un tema scuro con accenti turchesi e ho reso il layout responsive con media query.

Link al progetto

Luciana Millenaar

Ho provato a creare la pagina principale di un mio possibile futuro portfolio. All'interno della pagina ho inserito la data e l'orario del giorno, che si aggiornano automaticamente ogni secondo di ogni giorno, in modo che mostri sempre l'orario e la data corretti. Ho inserito un'immagine che affianca il mio nome, una piccola descrizione e ho creato dei bottoni che funzionano come accesso a dei link, come instagram o behance. Infine è presente un footer con i miei contatti.

Link al progetto

Greta Lapesa

Per questo progetto ho realizzato una pagina web di un Link Tree fittizzio, in cui entrando si possono vedere il logo con il mio nome, una presentazione e una serie di collegamenti interattivi, sperimentando la sostituzione del nome con una immagine in SVG, infine nella sezione footer è presente la mia mail supsi e la data odierna aggiornata. Ho mantenuto il layout fatto in classe, cambiando piccoli dettagli.

Link al progetto

Davide Torre

Il progetto consiste nella realizzazione di una pagina web minimalista dedicata alla presentazione di contatti e informazioni professionali. La struttura della pagina è progettata per offrire una navigazione semplice e un design pulito, enfatizzando la chiarezza e l’accessibilità.
Interfaccia essenziale: Il layout minimalista presenta un collegamento diretto all’indirizzo email per facilitare il contatto immediato.
Tipografia ottimizzata: L’uso del font Roboto in diverse varianti garantisce una leggibilità efficace e un’estetica coerente.
Informazioni chiave: Nome e titolo professionale sono chiaramente visibili, fornendo all’utente una rapida comprensione delle competenze e del profilo professionale.
Collegamenti esterni: Sono inclusi link a LinkedIn, Behance, Portfolio e Curriculum Vitae, per consentire un accesso rapido alle piattaforme professionali associate.
Design responsivo: Grazie alla configurazione responsive, la pagina è ottimizzata per la visualizzazione su dispositivi mobili e desktop, garantendo una fruizione ottimale su diversi schermi.
Icona personalizzata: È presente una favicon che arricchisce il branding visivo del sito.

Link al progetto

Michelle Puttini

Il mio progetto è il frutto di ciò che ho imparato nel seminario di Fondamenti Programmazione Web. Grazie all'utilizzo di HTML, CSS e Javascript ho creato questa landing page fittizia che rappresenta un'esempio di portfolio web.

Link al progetto

Luca Stocker

Questo progetto è una pagina web personale con un design moderno e minimalista, creata come una sorta di contact page/portfolio. Lo sfondo scuro con testo chiaro mette in risalto i vari link interattivi, che cambiano colore al passaggio del mouse. Ho progettato la pagina per adattarsi a diverse dimensioni di schermo utilizzando le media query, gestendo gli elementi con HTML, CSS e JavaScript, applicando le conoscenze acquisite durante il corso.

Link al progetto

Gennaro Esposito

Questo progetto è nato per creare un portfolio, l'idea alla base era quella di creare una pagina semplice dove l'utente non venisse distratto da informazioni inutili. Ho sfruttato il tempo a disposizione per creare un'interazione che mi permettesse di toccare tutti i punti visti a lezione.

Link al progetto

Anastasia Wiesendanger

Ciao a tutti! Questa è la cartella con dentro il mio progetto di Programmazione Web. Durante la settimana abbiamo ricevuto le conoscienze basi per riuscire a costruire una pagina web. Questo lavoro è stato unicamente svolto utilizzando i linguaggi di codice HTML, CSS e JavaScript.

Link al progetto

Gabriele Gianora

Ciao a tutti! Questa è la cartella con dentro il mio progetto di Programmazione Web. Durante la settimana abbiamo ricevuto le conoscienze basi per riuscire a costruire una pagina web. Questo lavoro è stato unicamente svolto utilizzando i linguaggi di codice HTML, CSS e JavaScript.

Link al progetto

Alessia Merletti

Questo progetto è una pagina creata per esplorare e approfondire i linguaggi di programmazione per il web.

Link al progetto

Mirko Bassani

Link al progetto

Luna Barreto

Link al progetto

Risorse del corso

Come strumento di condivisione del lavoro è stato utilizzato GitHub per permettere a chi seguirà il seminario di entrare in contatto con uno strumento largamente utilizzato in ambito professionale. All'interno della repository sono condivise tutte le risorse didattiche utilizzate durante il corso.

Repository GitHub