Skip to content

Commit

Permalink
Merge pull request #50 from Bramoso-Tommaso/main
Browse files Browse the repository at this point in the history
fix_slides_INTRO[1]_SVELTE[9, 11, 20, 32, 33, 116, 124, 126]
  • Loading branch information
profmancusoa authored Dec 5, 2024
2 parents 87e4ef7 + a3bc792 commit 1852c4b
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 9 deletions.
2 changes: 1 addition & 1 deletion slides/TPSI_4/Intro_tpsi4/Intro_tpsi4_slides.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ a.s. 2022-2023
relative allo sviluppo Web
- Ci concentreremo prevalentemente sui seguenti temi
- **HTML**: markup e descrizione di una pagina
- **CSS**: stile della pagine e dei suoli elementi
- **CSS**: stile della pagine e dei suoi elementi
- **JavaScript (JS)**: business logic
- Il corso ha un approccio molto pratico e quindi è importantissimo `saper fare`

Expand Down
16 changes: 8 additions & 8 deletions slides/TPSI_4/svelte/svelte_slides.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ Framework JS

Framework JS

- L'uso di un frameowrk non è indispensabile: si tratta più che altro di uno dei tanti strumenti che lo sviluppatore ha a sua disposizione per programmare meglio e più velocemente.
- L'uso di un framework non è indispensabile: si tratta più che altro di uno dei tanti strumenti che lo sviluppatore ha a sua disposizione per programmare meglio e più velocemente.
- Proprio per queste sue caratteristiche, sono diventati sempre più fondamentali per lo sviluppo di siti web e app.
- I framework consentono di:
- ottimizzare tempi, costi e benefici;
Expand Down Expand Up @@ -176,7 +176,7 @@ OOP per il Web

- Un elemento di input può essere un componente.
- Un form può essere un componente.
- Una pagina intera può essere è un componente.
- Una pagina intera può essere un componente.

<img src="/media/svelte_03.png" style="position: relative; left: 450px;top:-150px;" width="500" />

Expand Down Expand Up @@ -283,7 +283,7 @@ Svelte vs Others

**PRO**

- Tempo di compilazione velocissimo rispetto a React o altri framework e dimensione del pacchetto generato è più piccola rispetto a React
- Tempo di compilazione velocissimo rispetto a React o altri framework e dimensione del pacchetto generato è più piccolo rispetto a React
- Tempi di caricamento e rendering della Web app più veloci rispetto a React o altri framework.
- Più facile da capire rispetto a altri framework poiché Svelte è semplice JavaScript, HTML e CSS.
- Permette di scrivere meno codice rispetto ad altri framework
Expand Down Expand Up @@ -474,7 +474,7 @@ Svelte Components
```

- Questo è un componente Svelte valido.
- Non ha nessuno contenuto e non verrà visualizzato.
- Non ha nessun contenuto e non verrà visualizzato.
- Anche se apparentemente non ha senso, lo ha in quanto posso avere componenti che svolgono solo funzioni utilizzate da altri componenti.

Esempio:
Expand All @@ -492,7 +492,7 @@ Hello World
- dello sviluppo per componenti
- delle funzioni più importanti di SvelteKit

- Di seguito i link alla documentazione e tutoria di Svelte e SvelteKit
- Di seguito i link alla documentazione e tutorial di Svelte e SvelteKit
- [Svelte tutorial](https://svelte.dev/tutorial/basics)
- [Tutorial Interattivo Svelte](https://learn.svelte.dev/tutorial/welcome-to-svelte)
- [Introduzione a SvelteKit](https://kit.svelte.dev/docs/introduction)
Expand Down Expand Up @@ -1794,7 +1794,7 @@ DOM Events
<br>

- Quando l'utente fa click sul pulsante, viene invocata ed eseguita la funzione *button_handler*
- In questo semplicissimo modo Svelte permette una facile gestioni degli eventi DOM
- In questo semplicissimo modo Svelte permette una facile gestione degli eventi DOM
- Svelte permette anche di utilizzare un `inline handler`

<br>
Expand Down Expand Up @@ -1905,7 +1905,7 @@ Component Bindings

DOM Events: Esercitazione_12

- Creare un nuovo componente chiamato DoubeClounter (double_counter.svelte)
- Creare un nuovo componente chiamato DoubleCounter (double_counter.svelte)
- Questo componente funziona in modo simile a Counter, ma quando l'utente preme + il suo valore aumenta di due unità, mentre quando preme - il suo valore viene decrementato di 3 unità
- Aggiungere il componente alla pagina counter
- Tramite il component binding visualizzare nella pagina counter anche il valore del componente DoubleCounter
Expand Down Expand Up @@ -1944,7 +1944,7 @@ Logic Statements

- Pertanto se la condizione è vera viene visualizzato il *&lt;blocco HTML&gt;* altrimenti viene visualizzato il *&lt;blocco HTML alternativo&gt;*
- In questo modo abbiamo aggiunto al puro HTML una delle capacità proprie di un linguaggio di programmazione
- Ma vediamo un esempio modificando la pagina Counter in modo che se il contatore è &lt; 5 visualizzi la scritta in HML con colore rosso e in caso contrario con colore verde
- Ma vediamo un esempio modificando la pagina Counter in modo che se il contatore è &lt; 5 visualizzi la scritta in HTML con colore rosso e in caso contrario con colore verde


---
Expand Down

0 comments on commit 1852c4b

Please sign in to comment.