CoderDojoComo Wiki - Ultime modifiche [it]

Template:Pulsante

2026-08-04T14:02:59Z

aggiorna doc: default ora e nav (non piu primary)

← Versione meno recente		Versione delle 14:02, 4 ago 2026
Riga 1:		Riga 1:
	<noinclude>		<noinclude>
	== Template:Pulsante ==		== Template:Pulsante ==
	Inserisce un link stilizzato come pulsante cliccabile, da usare al posto di un semplice titolo/link.		Inserisce un link stilizzato come pulsante cliccabile, da usare al posto di un semplice titolo/link — per esempio nella sezione "I nostri progetti" delle pagine attività, al posto di <code><nowiki>====[[Pagina/Progetti\|I nostri progetti]]====</nowiki></code>.

	'''Parametri:'''		'''Parametri:'''
	* <code>1</code> o <code>link</code> — pagina di destinazione nel wiki (es. <code>Web design/Progetti</code>) oppure un URL completo (es. <code>https://scratch.mit.edu</code>) — interno/esterno viene riconosciuto automaticamente, non serve specificarlo		* <code>1</code> o <code>link</code> — pagina di destinazione nel wiki (es. <code>Web design/Progetti</code>) oppure un URL completo (es. <code>https://scratch.mit.edu</code>) — interno/esterno viene riconosciuto automaticamente, non serve specificarlo
	* <code>2</code> o <code>testo</code> — il testo mostrato sul pulsante		* <code>2</code> o <code>testo</code> — il testo mostrato sul pulsante
	* <code>tipo</code> — <code>~~primary~~</code> (default, blu), <code>success</code> (verde), <code>warning</code> (arancio), <code>danger</code> (rosso) — stessi nomi di [[Template:Avviso\|Avviso]]~~; più <code>nav</code>, pulsante bianco/outline in stile "pagina successiva" del corso (vedi [[Template:Corso/FinePagina\|Corso/FinePagina]])~~		* <code>tipo</code> — <code>nav</code> (default, pulsante bianco/outline in stile "pagina successiva" del corso, vedi [[Template:Corso/FinePagina\|Corso/FinePagina]]), <code>primary</code> (blu), <code>success</code> (verde), <code>warning</code> (arancio), <code>danger</code> (rosso) — questi ultimi quattro con gli stessi nomi di [[Template:Avviso\|Avviso]]

	'''Esempio:'''		'''Esempio:'''
Riga 17:		Riga 17:
	'''Risultato:'''		'''Risultato:'''

	{{Pulsante\|~~link=~~Template:Pulsante\|~~testo=~~Pulsante ~~primary\|tipo=~~primary}}		{{Pulsante\|Template:Pulsante\|Pulsante primary}}
	{{Pulsante\|link=Template:Pulsante\|testo=Pulsante success\|tipo=success}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante success\|tipo=success}}
	{{Pulsante\|link=Template:Pulsante\|testo=Pulsante warning\|tipo=warning}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante warning\|tipo=warning}}
	{{Pulsante\|link=Template:Pulsante\|testo=Pulsante danger\|tipo=danger}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante danger\|tipo=danger}}
	{{Pulsante\|link=Template:Pulsante\|testo=Pulsante nav\|tipo=nav}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante nav\|tipo=nav}}
			{{Pulsante\|link=https://scratch.mit.edu\|testo=Link esterno (riconosciuto da solo)}}

			'''Nota tecnica:''' lo stile del pulsante (classi <code>pulsante</code> / <code>pulsante-*</code>) è definito in <code>MediaWiki:Citizen.css</code>, non in questa pagina. Interno/esterno è riconosciuto cercando <code>://</code> nel valore di <code>link</code>.

	</noinclude><includeonly>{{#if: {{#pos: {{{link\|{{{1\|}}}}}} \| :// }}		</noinclude><includeonly>{{#if: {{#pos: {{{link\|{{{1\|}}}}}} \| :// }}
	\|<span class="pulsante pulsante-{{#switch:{{{tipo\|~~nav~~}}}~~\|primary=primary~~\|success=success\|warning=warning\|danger=danger\|nav=nav\|#default=~~nav~~}}">[{{{link\|{{{1\|}}}}}} {{{testo\|{{{2\|}}}}}}]</span>		\|<span class="pulsante pulsante-{{#switch:{{{tipo\|primary}}}\|success=success\|warning=warning\|danger=danger\|nav=nav\|#default=primary}}">[{{{link\|{{{1\|}}}}}} {{{testo\|{{{2\|}}}}}}]</span>
	\|<span class="pulsante pulsante-{{#switch:{{{tipo\|~~nav~~}}}~~\|primary=primary~~\|success=success\|warning=warning\|danger=danger\|nav=nav\|#default=~~nav~~}}">[[{{{link\|{{{1\|}}}}}}\|{{{testo\|{{{2\|}}}}}}]]</span>		\|<span class="pulsante pulsante-{{#switch:{{{tipo\|primary}}}\|success=success\|warning=warning\|danger=danger\|nav=nav\|#default=primary}}">[[{{{link\|{{{1\|}}}}}}\|{{{testo\|{{{2\|}}}}}}]]</span>
	}}</includeonly>		}}</includeonly>

Web design

2026-08-04T14:02:28Z

I nostri progetti come Template:Pulsante

← Versione meno recente		Versione delle 14:02, 4 ago 2026
Riga 40:		Riga 40:

	===I nostri progetti===		===I nostri progetti===
	=~~===[[~~Web design/Progetti\|I nostri progetti~~]]===~~=		{{Pulsante\|link=Web design/Progetti\|testo=I nostri progetti\|tipo=nav}}

	==Altre informazioni==		==Altre informazioni==

	Il corso guidato è ispirato alla serie di Sushi Card "Il mio primo sito web" prodotta da CoderDojoComo.		Il corso guidato è ispirato alla serie di Sushi Card "Il mio primo sito web" prodotta da CoderDojoComo.

ScratchJr

2026-08-04T14:02:27Z

Drive e I nostri progetti come Template:Pulsante

← Versione meno recente		Versione delle 14:02, 4 ago 2026
Riga 16:		Riga 16:

	==Drive dell'attività==		==Drive dell'attività==
	*[https://drive.google.com/drive/folders/1VLEMTKmdUW6JZtnC7wjnYuvuWrHq_8vt?usp=sharing Coding Lab]		{{Pulsante\|link=https://drive.google.com/drive/folders/1VLEMTKmdUW6JZtnC7wjnYuvuWrHq_8vt?usp=sharing\|testo=Coding Lab\|tipo=primary}}

	==Progetti==		==Progetti==
Riga 34:		Riga 34:

	===I nostri progetti===		===I nostri progetti===
	=~~===[[~~ScratchJr/Progetti\|I nostri progetti~~]]===~~=		{{Pulsante\|link=ScratchJr/Progetti\|testo=I nostri progetti\|tipo=nav}}

	==Altre informazioni==		==Altre informazioni==

Scratch

2026-08-04T14:02:27Z

Drive (2 pulsanti) e I nostri progetti come Template:Pulsante

← Versione meno recente		Versione delle 14:02, 4 ago 2026
Riga 18:		Riga 18:

	==Drive dell'attività==		==Drive dell'attività==
	*[https://drive.google.com/drive/folders/1PgASYGENdQcnvkYYbiv1zRbJrh_rZuUP?usp=sharing Scratch primi passi]		{{Pulsante\|link=https://drive.google.com/drive/folders/1PgASYGENdQcnvkYYbiv1zRbJrh_rZuUP?usp=sharing\|testo=Scratch primi passi\|tipo=primary}}
	*[https://drive.google.com/drive/folders/1Nm7jZK8p5Wn-7mzTbSUzBhfp3vcU4IU0?usp=sharing Scratch No Limits]		{{Pulsante\|link=https://drive.google.com/drive/folders/1Nm7jZK8p5Wn-7mzTbSUzBhfp3vcU4IU0?usp=sharing\|testo=Scratch No Limits\|tipo=primary}}

	==Progetti==		==Progetti==
Riga 44:		Riga 44:

	===I nostri progetti===		===I nostri progetti===
	=~~===[[~~Scratch/Progetti\|I nostri progetti~~]]===~~=		{{Pulsante\|link=Scratch/Progetti\|testo=I nostri progetti\|tipo=nav}}

	==Altre informazioni==		==Altre informazioni==

Microbit

2026-08-04T14:02:26Z

Drive come Template:Pulsante, tipo=nav esplicito per I nostri progetti

← Versione meno recente		Versione delle 14:02, 4 ago 2026
Riga 26:		Riga 26:

	==Drive dell'attività==		==Drive dell'attività==
	*[https://drive.google.com/drive/folders/1Rsl_atetXZjeXfKpZ6bH-0Z0Sx66zw2Z?usp=sharing Micro:bit]		{{Pulsante\|link=https://drive.google.com/drive/folders/1Rsl_atetXZjeXfKpZ6bH-0Z0Sx66zw2Z?usp=sharing\|testo=Micro:bit\|tipo=primary}}

	==Progetti==		==Progetti==
Riga 53:		Riga 53:

	===I nostri progetti===		===I nostri progetti===
	{{~~pulsante~~\|link=Microbit/Progetti\|testo=I nostri progetti}}		{{Pulsante\|link=Microbit/Progetti\|testo=I nostri progetti\|tipo=nav}}

	==Altre informazioni==		==Altre informazioni==

Makey Makey

2026-08-04T14:02:26Z

I nostri progetti come Template:Pulsante

← Versione meno recente		Versione delle 14:02, 4 ago 2026
Riga 38:		Riga 38:

	===I nostri progetti===		===I nostri progetti===
	=~~===[[~~Makey Makey/Progetti\|I nostri progetti~~]]===~~=		{{Pulsante\|link=Makey Makey/Progetti\|testo=I nostri progetti\|tipo=nav}}

	==Altre informazioni==		==Altre informazioni==

Godot Engine

2026-08-04T14:02:25Z

I nostri progetti come Template:Pulsante

← Versione meno recente		Versione delle 14:02, 4 ago 2026
Riga 36:		Riga 36:

	===I nostri progetti===		===I nostri progetti===
	=~~===[[~~Godot Engine/Progetti\|I nostri progetti~~]]===~~=		{{Pulsante\|link=Godot Engine/Progetti\|testo=I nostri progetti\|tipo=nav}}

	==Altre informazioni==		==Altre informazioni==

Arduino

2026-08-04T14:02:25Z

Drive e I nostri progetti come Template:Pulsante

← Versione meno recente		Versione delle 14:02, 4 ago 2026
Riga 20:		Riga 20:

	==Drive dell'attività==		==Drive dell'attività==
	*[https://drive.google.com/drive/folders/1f-m0Z5GgFY4TvTLPbryMm7LP2_VVITnn?usp=sharing Arduino]		{{Pulsante\|link=https://drive.google.com/drive/folders/1f-m0Z5GgFY4TvTLPbryMm7LP2_VVITnn?usp=sharing\|testo=Arduino\|tipo=primary}}

	==Progetti==		==Progetti==
Riga 43:		Riga 43:

	===I nostri progetti===		===I nostri progetti===
	=~~===[[~~Arduino/Progetti\|I nostri progetti~~]]===~~=		{{Pulsante\|link=Arduino/Progetti\|testo=I nostri progetti\|tipo=nav}}

	==Altre informazioni==		==Altre informazioni==

Template:Pulsante

2026-08-04T13:55:44Z

← Versione meno recente		Versione delle 13:55, 4 ago 2026
(3 versioni intermedie di uno stesso utente non sono mostrate)
Riga 1:		Riga 1:
	<noinclude>		<noinclude>
	== Template:Pulsante ==		== Template:Pulsante ==
	Inserisce un link stilizzato come pulsante cliccabile, da usare al posto di un semplice titolo/link ~~— per esempio nella sezione "I nostri progetti" delle pagine attività, al posto di <code><nowiki>====[[Pagina/Progetti\|I nostri progetti]]====</nowiki></code>~~.		Inserisce un link stilizzato come pulsante cliccabile, da usare al posto di un semplice titolo/link.

	'''Parametri:'''		'''Parametri:'''
Riga 17:		Riga 17:
	'''Risultato:'''		'''Risultato:'''

	{{Pulsante\|Template:Pulsante\|Pulsante primary}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante primary\|tipo=primary}}
	{{Pulsante\|link=Template:Pulsante\|testo=Pulsante success\|tipo=success}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante success\|tipo=success}}
	{{Pulsante\|link=Template:Pulsante\|testo=Pulsante warning\|tipo=warning}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante warning\|tipo=warning}}
	{{Pulsante\|link=Template:Pulsante\|testo=Pulsante danger\|tipo=danger}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante danger\|tipo=danger}}
	{{Pulsante\|link=Template:Pulsante\|testo=Pulsante nav\|tipo=nav}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante nav\|tipo=nav}}
	~~{{Pulsante\|link=https://scratch.mit.edu\|testo=Link esterno (riconosciuto da solo)}}~~

	'''Nota tecnica:''' lo stile del pulsante (classi <code>pulsante</code> / <code>pulsante-*</code>) è definito in <code>MediaWiki:Citizen.css</code>, non in questa pagina. Interno/esterno è riconosciuto cercando <code>://</code> nel valore di <code>link</code>.

	</noinclude><includeonly>{{#if: {{#pos: {{{link\|{{{1\|}}}}}} \| :// }}		</noinclude><includeonly>{{#if: {{#pos: {{{link\|{{{1\|}}}}}} \| :// }}
	\|<span class="pulsante pulsante-{{#switch:{{{tipo\|~~primary~~}}}\|success=success\|warning=warning\|danger=danger\|nav=nav\|#default=~~primary~~}}">[{{{link\|{{{1\|}}}}}} {{{testo\|{{{2\|}}}}}}]</span>		\|<span class="pulsante pulsante-{{#switch:{{{tipo\|nav}}}\|primary=primary\|success=success\|warning=warning\|danger=danger\|nav=nav\|#default=nav}}">[{{{link\|{{{1\|}}}}}} {{{testo\|{{{2\|}}}}}}]</span>
	\|<span class="pulsante pulsante-{{#switch:{{{tipo\|~~primary~~}}}\|success=success\|warning=warning\|danger=danger\|nav=nav\|#default=~~primary~~}}">[[{{{link\|{{{1\|}}}}}}\|{{{testo\|{{{2\|}}}}}}]]</span>		\|<span class="pulsante pulsante-{{#switch:{{{tipo\|nav}}}\|primary=primary\|success=success\|warning=warning\|danger=danger\|nav=nav\|#default=nav}}">[[{{{link\|{{{1\|}}}}}}\|{{{testo\|{{{2\|}}}}}}]]</span>
	}}</includeonly>		}}</includeonly>

MediaWiki:Citizen.css

2026-08-04T13:47:54Z

@@ Riga 34: / Riga 34: @@
 .pulsante a:hover,
 .pulsante a:active {
    font-weight: bold;
    text-decoration: none !important;
@@ Riga 41: / Riga 40: @@
+}
-.pulsante-primario   { background: #0077b6; border-color: #0077b6; }
+/* Varianti piene, colore testo bianco (coerenti con i colori di Template:Avviso) */
-.pulsante-successo   { background: #1b6e3d; border-color: #1b6e3d; }
+.pulsante-primary { background: #0077b6; border-color: #0077b6; }
-.pulsante-attenzione { background: #c98a00; border-color: #c98a00; }
+.pulsante-success { background: #1b6e3d; border-color: #1b6e3d; }
-.pulsante-pericolo   { background: #a32630; border-color: #a32630; }
+.pulsante-warning { background: #c98a00; border-color: #c98a00; }

Template:Pulsante

2026-08-04T13:45:55Z

auto-detect interno/esterno, tipo= in inglese coerente con Avviso, aggiunta variante nav

← Versione meno recente		Versione delle 13:45, 4 ago 2026
Riga 4:		Riga 4:

	'''Parametri:'''		'''Parametri:'''
	* <code>1</code> o <code>link</code> — pagina di destinazione nel wiki (es. <code>Web design/Progetti</code>), oppure un URL completo se <code>~~esterno=1~~</code>		* <code>1</code> o <code>link</code> — pagina di destinazione nel wiki (es. <code>Web design/Progetti</code>) oppure un URL completo (es. <code>https://scratch.mit.edu</code>) — interno/esterno viene riconosciuto automaticamente, non serve specificarlo
	* <code>2</code> o <code>testo</code> — il testo mostrato sul pulsante		* <code>2</code> o <code>testo</code> — il testo mostrato sul pulsante
	* <code>tipo</code> — <code>~~primario~~</code> (default, blu), <code>~~successo~~</code> (verde), <code>~~attenzione~~</code> (arancio), <code>~~pericolo~~</code> (rosso)		* <code>tipo</code> — <code>primary</code> (default, blu), <code>success</code> (verde), <code>warning</code> (arancio), <code>danger</code> (rosso) — stessi nomi di [[Template:Avviso\|Avviso]]; più <code>nav</code>, pulsante bianco/outline in stile "pagina successiva" del corso (vedi [[Template:Corso/FinePagina\|Corso/FinePagina]])
	* <code>esterno</code> — <code>1</code> ~~se <code>link<~~/~~code> è un URL esterno invece di una~~ pagina del ~~wiki~~

	'''Esempio:'''		'''Esempio:'''
	<pre>		<pre>
	{{Pulsante\|Web design/Progetti\|I nostri progetti}}		{{Pulsante\|Web design/Progetti\|I nostri progetti}}
	{{Pulsante\|link=https://scratch.mit.edu\|testo=Apri Scratch\|tipo=~~successo~~\|~~esterno~~=1}}		{{Pulsante\|link=https://scratch.mit.edu\|testo=Apri Scratch\|tipo=success}}
			{{Pulsante\|link=Corsi/Web design\|testo=Vai alla lezione successiva\|tipo=nav}}
	</pre>		</pre>

	'''Risultato:'''		'''Risultato:'''

	{{Pulsante\|Template:Pulsante\|Pulsante ~~primario~~}}		{{Pulsante\|Template:Pulsante\|Pulsante primary}}
	{{Pulsante\|link=Template:Pulsante\|testo=Pulsante ~~successo~~\|tipo=~~successo~~}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante success\|tipo=success}}
	{{Pulsante\|link=Template:Pulsante\|testo=Pulsante ~~attenzione~~\|tipo=~~attenzione~~}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante warning\|tipo=warning}}
	{{Pulsante\|link=Template:Pulsante\|testo=Pulsante ~~pericolo~~\|tipo=~~pericolo~~}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante danger\|tipo=danger}}
	{{Pulsante\|link=https://scratch.mit.edu\|testo=Link esterno~~\|esterno=1~~}}		{{Pulsante\|link=Template:Pulsante\|testo=Pulsante nav\|tipo=nav}}
			{{Pulsante\|link=https://scratch.mit.edu\|testo=Link esterno (riconosciuto da solo)}}

	'''Nota tecnica:''' lo stile del pulsante (classi <code>pulsante</code> / <code>pulsante-*</code>) è definito in <code>MediaWiki:Citizen.css</code>, non in questa pagina.		'''Nota tecnica:''' lo stile del pulsante (classi <code>pulsante</code> / <code>pulsante-*</code>) è definito in <code>MediaWiki:Citizen.css</code>, non in questa pagina. Interno/esterno è riconosciuto cercando <code>://</code> nel valore di <code>link</code>.

	</noinclude><includeonly>{{#if:{{{~~esterno~~\|}}}		</noinclude><includeonly>{{#if: {{#pos: {{{link\|{{{1\|}}}}}} \| :// }}
	\|<span class="pulsante pulsante-{{#switch:{{{tipo\|~~primario~~}}}\|~~successo~~=~~successo~~\|~~attenzione~~=~~attenzione~~\|~~pericolo~~=~~pericolo~~\|#default=~~primario~~}}">[{{{link\|{{{1\|}}}}}} {{{testo\|{{{2\|}}}}}}]</span>		\|<span class="pulsante pulsante-{{#switch:{{{tipo\|primary}}}\|success=success\|warning=warning\|danger=danger\|nav=nav\|#default=primary}}">[{{{link\|{{{1\|}}}}}} {{{testo\|{{{2\|}}}}}}]</span>
	\|<span class="pulsante pulsante-{{#switch:{{{tipo\|~~primario~~}}}\|~~successo~~=~~successo~~\|~~attenzione~~=~~attenzione~~\|~~pericolo~~=~~pericolo~~\|#default=~~primario~~}}">[[{{{link\|{{{1\|}}}}}}\|{{{testo\|{{{2\|}}}}}}]]</span>		\|<span class="pulsante pulsante-{{#switch:{{{tipo\|primary}}}\|success=success\|warning=warning\|danger=danger\|nav=nav\|#default=primary}}">[[{{{link\|{{{1\|}}}}}}\|{{{testo\|{{{2\|}}}}}}]]</span>
	}}</includeonly>		}}</includeonly>

Microbit

2026-08-04T13:44:56Z

← Versione meno recente		Versione delle 13:44, 4 ago 2026
Riga 53:		Riga 53:

	===I nostri progetti===		===I nostri progetti===
	=~~===[[~~Microbit/Progetti\|I nostri progetti~~]]====~~		{{pulsante\|link=Microbit/Progetti\|testo=I nostri progetti}}

	==Altre informazioni==		==Altre informazioni==

MediaWiki:Citizen.css

2026-08-04T13:34:14Z

← Versione meno recente		Versione delle 13:34, 4 ago 2026
Riga 15:		Riga 15:
	.avviso-danger { background: #fdecee; border-color: #f3b8bd; color: #a32630; }		.avviso-danger { background: #fdecee; border-color: #f3b8bd; color: #a32630; }
	.avviso-info { background: #eef4fb; border-color: #bcd7f5; color: #1c4a7a; }		.avviso-info { background: #eef4fb; border-color: #bcd7f5; color: #1c4a7a; }

			.pulsante {
			display: inline-block;
			padding: 0.65rem 1.4rem;
			margin: 0.3rem 0.3rem 0.3rem 0;
			border-radius: 8px;
			border: 1px solid transparent;
			line-height: 1.4;
			}
			.pulsante:hover,
			.pulsante:focus-within {
			opacity: 0.88;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
			}
			.pulsante a,
			.pulsante a:link,
			.pulsante a:visited,
			.pulsante a:hover,
			.pulsante a:active {
			color: #fff !important;
			font-weight: bold;
			text-decoration: none !important;
			background: none !important;
			padding: 0 !important;
			}

			.pulsante-primario { background: #0077b6; border-color: #0077b6; }
			.pulsante-successo { background: #1b6e3d; border-color: #1b6e3d; }
			.pulsante-attenzione { background: #c98a00; border-color: #c98a00; }
			.pulsante-pericolo { background: #a32630; border-color: #a32630; }

Template:Pulsante

2026-08-04T13:32:19Z

fix: usa span+wikilink invece di <a> grezzo (MediaWiki lo escapa)

← Versione meno recente		Versione delle 13:32, 4 ago 2026
Riga 7:		Riga 7:
	* <code>2</code> o <code>testo</code> — il testo mostrato sul pulsante		* <code>2</code> o <code>testo</code> — il testo mostrato sul pulsante
	* <code>tipo</code> — <code>primario</code> (default, blu), <code>successo</code> (verde), <code>attenzione</code> (arancio), <code>pericolo</code> (rosso)		* <code>tipo</code> — <code>primario</code> (default, blu), <code>successo</code> (verde), <code>attenzione</code> (arancio), <code>pericolo</code> (rosso)
	* <code>esterno</code> — <code>1</code> se <code>link</code> è un URL esterno ~~(il pulsante apre in una nuova scheda); di default <code>link</code> è il titolo~~ di una pagina del wiki		* <code>esterno</code> — <code>1</code> se <code>link</code> è un URL esterno invece di una pagina del wiki

	'''Esempio:'''		'''Esempio:'''
Riga 26:		Riga 26:

	</noinclude><includeonly>{{#if:{{{esterno\|}}}		</noinclude><includeonly>{{#if:{{{esterno\|}}}
	\|<~~a href="{{{link\|{{{1\|}}}}}}" target="_blank" rel="noopener noreferrer"~~ class="pulsante pulsante-{{#switch:{{{tipo\|primario}}}\|successo=successo\|attenzione=attenzione\|pericolo=pericolo\|#default=primario}}">{{{~~testo~~\|{{{2\|}}}}}} ~~↗</a>~~		\|<span class="pulsante pulsante-{{#switch:{{{tipo\|primario}}}\|successo=successo\|attenzione=attenzione\|pericolo=pericolo\|#default=primario}}">[{{{link\|{{{1\|}}}}}} {{{testo\|{{{2\|}}}}}}]</span>
	~~\|<a href="~~{{~~fullurl:~~{~~{{link~~\|{{{1\|}}}}}}~~}}"~~ class="pulsante pulsante-{{#switch:{{{tipo\|primario}}}\|successo=successo\|attenzione=attenzione\|pericolo=pericolo\|#default=primario}}">{{{testo\|{{{2\|}}}}}}</a>		\|<span class="pulsante pulsante-{{#switch:{{{tipo\|primario}}}\|successo=successo\|attenzione=attenzione\|pericolo=pericolo\|#default=primario}}">[[{{{link\|{{{1\|}}}}}}\|{{{testo\|{{{2\|}}}}}}]]</span>
	}}</includeonly>		}}</includeonly>

Template:Pulsante

2026-08-04T13:30:40Z

crea Template:Pulsante (link stilizzato come pulsante)

Nuova pagina

<noinclude>
== Template:Pulsante ==
Inserisce un link stilizzato come pulsante cliccabile, da usare al posto di un semplice titolo/link — per esempio nella sezione "I nostri progetti" delle pagine attività, al posto di <code><nowiki>====[[Pagina/Progetti|I nostri progetti]]====</nowiki></code>.

'''Parametri:'''
* <code>1</code> o <code>link</code> — pagina di destinazione nel wiki (es. <code>Web design/Progetti</code>), oppure un URL completo se <code>esterno=1</code>
* <code>2</code> o <code>testo</code> — il testo mostrato sul pulsante
* <code>tipo</code> — <code>primario</code> (default, blu), <code>successo</code> (verde), <code>attenzione</code> (arancio), <code>pericolo</code> (rosso)
* <code>esterno</code> — <code>1</code> se <code>link</code> è un URL esterno (il pulsante apre in una nuova scheda); di default <code>link</code> è il titolo di una pagina del wiki

'''Esempio:'''
<pre>
{{Pulsante|Web design/Progetti|I nostri progetti}}
{{Pulsante|link=https://scratch.mit.edu|testo=Apri Scratch|tipo=successo|esterno=1}}
</pre>

'''Risultato:'''

{{Pulsante|Template:Pulsante|Pulsante primario}}
{{Pulsante|link=Template:Pulsante|testo=Pulsante successo|tipo=successo}}
{{Pulsante|link=Template:Pulsante|testo=Pulsante attenzione|tipo=attenzione}}
{{Pulsante|link=Template:Pulsante|testo=Pulsante pericolo|tipo=pericolo}}
{{Pulsante|link=https://scratch.mit.edu|testo=Link esterno|esterno=1}}

'''Nota tecnica:''' lo stile del pulsante (classi <code>pulsante</code> / <code>pulsante-*</code>) è definito in <code>MediaWiki:Citizen.css</code>, non in questa pagina.

</noinclude><includeonly>{{#if:{{{esterno|}}}
|<a href="{{{link|{{{1|}}}}}}" target="_blank" rel="noopener noreferrer" class="pulsante pulsante-{{#switch:{{{tipo|primario}}}|successo=successo|attenzione=attenzione|pericolo=pericolo|#default=primario}}">{{{testo|{{{2|}}}}}} ↗</a>
|<a href="{{fullurl:{{{link|{{{1|}}}}}}}}" class="pulsante pulsante-{{#switch:{{{tipo|primario}}}|successo=successo|attenzione=attenzione|pericolo=pericolo|#default=primario}}">{{{testo|{{{2|}}}}}}</a>
}}</includeonly>

Microbit

2026-08-04T13:30:13Z

Microbit: tra virtuale e reale

← Versione meno recente		Versione delle 13:30, 4 ago 2026
(Una versione intermedia di uno stesso utente non è mostrata)
Riga 7:		Riga 7:

	==Microbit: tra virtuale e reale==		==Microbit: tra virtuale e reale==
	~~</br>~~

	{{argomento\|Nome=Micro:bit\|Tipologia=elettronica, coding, tinkering\|Linguaggio=blocchi/python\|Piattaforma=Micro:bit\|Livello=1-3/3\|Sito=https://microbit.org/}}		{{argomento\|Nome=Micro:bit\|Tipologia=elettronica, coding, tinkering\|Linguaggio=blocchi/python\|Piattaforma=Micro:bit\|Livello=1-3/3\|Sito=https://microbit.org/}}
	~~</br>~~

	Il micro:bit è un computer piccolissimo che stai in una mano, con una griglia di 25 led come schermo e un sensore di movimento, uno di luce, uno di temperatura e persino una bussola già incorporati. Lo programmi con MakeCode, blocchi che si incastrano come in Scratch, e in pochi minuti lo trasformi in un dado, un termometro o un walkie-talkie che parla via radio con un altro micro:bit.		Il micro:bit è un computer piccolissimo che stai in una mano, con una griglia di 25 led come schermo e un sensore di movimento, uno di luce, uno di temperatura e persino una bussola già incorporati. Lo programmi con MakeCode, blocchi che si incastrano come in Scratch, e in pochi minuti lo trasformi in un dado, un termometro o un walkie-talkie che parla via radio con un altro micro:bit.
	~~</br>~~
	Non hai ancora una scheda? Nessun problema: il simulatore online ti fa provare tutto anche senza toccare l'hardware.		Non hai ancora una scheda? Nessun problema: il simulatore online ti fa provare tutto anche senza toccare l'hardware.

Riga 60:		Riga 58:

	Visualizzatore dati IoT:		Visualizzatore dati IoT:
	[https://~~sites~~.~~google~~.com/~~alfabetodigitale.it~~/~~dati-iot sites~~.~~google~~.com/~~alfabetodigitale.it~~/~~dati-iot~~]		[https://thingspeak.mathworks.com/channels/2878962 https://thingspeak.mathworks.com/channels/2878962]

Pagina principale

2026-08-03T20:56:00Z

Aggiorna link Web design in home con rimando al corso

← Versione meno recente		Versione delle 20:56, 3 ago 2026
Riga 24:		Riga 24:
	* [[Arduino]]		* [[Arduino]]
	* [[Makey Makey]]		* [[Makey Makey]]
	* [[Web design]]		* [[Web design]] — [[Corsi/Web design\|segui il corso completo →]]
	* [[CodyRoby]]		* [[CodyRoby]]
	* [[CodyMaze]]		* [[CodyMaze]]

Corsi

2026-08-03T20:55:59Z

Aggiunge corso Web design alla tabella

← Versione meno recente		Versione delle 20:55, 3 ago 2026
Riga 10:		Riga 10:
	\| [[Corsi/Microbit\|🤖 Corso micro:bit]]		\| [[Corsi/Microbit\|🤖 Corso micro:bit]]
	\| 9 lezioni: dai primi passi con MakeCode ai componenti esterni (sensori, luci, servo, radio).		\| 9 lezioni: dai primi passi con MakeCode ai componenti esterni (sensori, luci, servo, radio).
			\|-
			\| [[Corsi/Web design\|🌐 Corso Web design]]
			\| 5 lezioni: dal tuo primo tag HTML al foglio di stile CSS, costruendo il tuo primo sito.
	\|}		\|}

	Non trovi ancora il corso della tua attività preferita? Guarda la sua pagina attività: molte hanno già progetti e risorse da provare anche senza un corso strutturato.		Non trovi ancora il corso della tua attività preferita? Guarda la sua pagina attività: molte hanno già progetti e risorse da provare anche senza un corso strutturato.

Corsi/Web design/Lezione 5

2026-08-03T20:54:59Z

Crea Lezione 5: Un po di stile con il CSS (da PDF Sushi Card)

Nuova pagina

{{Corso/Pagina|corso=webdesign|1=Lezione 5 · 60-90 minuti|2=🎨 Un po' di stile con il CSS|obiettivo=Obiettivo: '''collegare un foglio di stile CSS al sito e imparare le regole base per cambiare colori, font e layout.'''}}
== 🎒 Ci serve ==

{{Corso/Materiali}}
*Il sito creato nelle lezioni precedenti: <code>index.html</code>, <code>chi-sono.html</code>, <code>hobby.html</code>
{{Corso/FineMateriali}}

== 🧠 Un po' di teoria ==

Finora hai lavorato solo con l'HTML e realizzato le basi del tuo sito: funziona tutto, ma da vedere è un po' spoglio, quasi tutto in bianco e nero. È il momento di diventare creativi e aggiungere un po' di stile!
</br>
Per farlo serve un file '''CSS''' (Cascading Style Sheets — fogli di stile a cascata): contiene "ricette" che dicono al browser come devono apparire gli elementi della pagina. Scoprirai tra poco cosa c'entrano le cascate.

== 🔨 Costruisci: dai colore al tuo sito ==

{{Corso/Passi}}
{{Corso/Passo|1=
Nella cartella <code>mio-primo-sito</code>, crea una sottocartella <code>css</code>, e dentro un file di testo chiamato <code>stile.css</code>.
}}
{{Corso/Passo|1=
In ogni pagina HTML (<code>index.html</code>, <code>chi-sono.html</code>, <code>hobby.html</code>...), dentro <code>head</code>, aggiungi questa riga per collegare il foglio di stile:
<pre>
<link type="text/css" rel="stylesheet" href="css/stile.css" />
</pre>
Un nuovo tag, <code>link</code>! Permette di collegare al documento HTML elementi esterni "utili". L'attributo <code>type</code> dice che è un file CSS di tipo testo; <code>rel</code> dice la sua relazione col documento principale (è il suo foglio di stile); <code>href</code>, come già sai, indica il file.
}}
{{Corso/Passo|1=
Apri <code>stile.css</code> con l'editor e scrivi la tua prima regola:
<pre>
body {
font-family: sans-serif;
}
</pre>
Salva, aggiorna una delle pagine html: è cambiato il font? Prova a cambiare <code>sans-serif</code> con <code>serif</code>, <code>cursive</code>, <code>fantasy</code> o <code>monospace</code>.
}}
{{Corso/Passo|1=
Questa regola dice al browser come mostrare tutto quello che sta dentro il tag <code>body</code>. Aggiungi altre righe alla stessa regola:
<pre>
body {
font-family: sans-serif;
font-size: 20px;
margin: 2em;
}
</pre>
}}
{{Corso/Passo|1=
Ora aggiungi una seconda regola, questa volta per il titolo <code>h1</code>:
<pre>
h1 {
text-align: center;
color: white;
background-color: blue;
border-radius: 0.5em;
padding: 0.5em;
}
</pre>
Salva e aggiorna: il titolo ora ha uno sfondo colorato!
{{Corso/Tip|1=Anche il CSS richiede un po' di ordine: le maiuscole e le minuscole vanno rispettate come in HTML; ogni selettore ha le sue regole tra parentesi graffe <code>{ }</code>; ogni regola ha i due punti <code>:</code> tra nome e valore e termina con un punto e virgola <code>;</code>. Anche qui la spaziatura non conta per il browser, ma l'indentazione aiuta a leggere il codice.}}
}}
{{Corso/Passo|1=
Non abbiamo ancora spiegato cosa c'entrano le "cascate" nel nome CSS! Prova ad aggiungere questa regola e guarda cosa succede:
<pre>
h1 {
font-family: fantasy;
}
</pre>
Con una regola hai impostato un font per tutto il documento (selettore <code>body</code>), poi con una nuova regola hai cambiato il comportamento solo di una sua parte, il titolo (selettore <code>h1</code>) — a cascata, appunto. Nota che tutte le altre regole del <code>body</code> restano valide anche per <code>h1</code> (per esempio il <code>font-size</code>, se non lo hai sovrascritto).
}}
{{Corso/FinePassi}}

== 🚀 Sfide ==

{{Corso/Sfida|1=stella|2=
Cambia i colori di sfondo e testo di <code>h1</code> con altri a tua scelta.
}}

{{Corso/Sfida|1=cometa|2=
Aggiungi una regola per il tag <code>p</code> (per esempio <code>color</code> o <code>font-size</code>) e una per <code>ul</code> o <code>li</code>.
}}

{{Corso/Sfida|1=razzo|2=
Aggiungi una regola per il tag <code>a</code> (i link), per esempio <code>color</code>, e prova ad aggiungere anche <code>a:hover { ... }</code>: cosa succede quando passi il mouse sopra un link?
}}

== 📝 Quiz: mettiti alla prova ==

{{Corso/Quiz|domanda=Cosa significa CSS?|A=Computer Style System.|B=Cascading Style Sheets.|C=Colorful Standard Sheets.|risposta=B|ok=Esatto!|riprova=Riprova!}}

{{Corso/Quiz|domanda=Quale tag collega un file CSS a una pagina HTML?|A=<style>|B=<css>|C=<link>|risposta=C|ok=Sì! Con gli attributi rel e href.|riprova=Riprova!}}

{{Corso/Quiz|domanda=In una regola CSS come "body { color: blue; }", cosa è "body"?|A=Il selettore: dice a quale elemento si applica la regola.|B=Il valore della regola.|C=Un commento.|risposta=A|ok=Esatto: il selettore sceglie l'elemento, le regole tra { } dicono come deve apparire.|riprova=Riprova!}}

== 📚 Da guardare o leggere ==

{{Corso/Fonte|1=
[https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/CSS_basics Le basi del CSS (MDN)] — selettori, proprietà e tanti altri esempi da provare.
}}

== 🎉 Hai finito il corso! ==

{{Corso/Tip|1=
Ora hai un piccolo sito con più pagine, immagini, link e uno stile tutto tuo. Se vuoi continuare a sperimentare, guarda la sezione "Progetti da provare" nella pagina '''[[Web design]]''', oppure chiedi a un '''mentor''' nuove sfide.
}}

{{Corso/FinePagina|prev=[[Corsi/Web design/Lezione 4|Lezione 4: La homepage e i link]]|next=}}

Corsi/Web design/Lezione 4

2026-08-03T20:54:27Z

Crea Lezione 4: La homepage e i link (da PDF Sushi Card)

Nuova pagina

{{Corso/Pagina|corso=webdesign|1=Lezione 4 · 45-60 minuti|2=🏠 La homepage e i link|obiettivo=Obiettivo: '''creare la homepage del sito e collegare tutte le pagine tra loro con i link.'''}}
== 🎒 Ci serve ==

{{Corso/Materiali}}
*Le pagine create nelle lezioni precedenti: <code>chi-sono.html</code>, <code>hobby.html</code>
{{Corso/FineMateriali}}

== 🧠 Un po' di teoria ==

Tutti i siti web hanno una prima pagina, che di solito si chiama '''homepage''' ed è quasi sempre il file <code>index.html</code>. È la pagina principale del sito, da cui si naviga verso tutte le altre. Oggi la creiamo, e impariamo il tag che collega le pagine tra loro: <code>a</code>.

== 🔨 Costruisci: la homepage ==

{{Corso/Passi}}
{{Corso/Passo|1=
Duplica <code>chi-sono.html</code> (come hai fatto nella Lezione 2) e rinomina la copia in <code>index.html</code>.
}}
{{Corso/Passo|1=
Apri <code>index.html</code> con l'editor. Il tag <code>body</code> deve racchiudere tutto il contenuto visibile della pagina: riempilo così (e ricorda sempre di salvare alla fine):
<pre>
<body>
<h1>Il mio sito</h1>
<p>Questo è il mio primo sito web</p>
<p>Cosa vuoi sapere?</p>
<ul>
<li><a href="chi-sono.html">Chi sono</a></li>
<li><a href="hobby.html">I miei hobby</a></li>
</ul>
</body>
</pre>
}}
{{Corso/Passo|1=
L'elenco puntato contiene un nuovo tag, <code>a</code>, che definisce un collegamento (link) con un altro documento. L'attributo <code>href</code> indica il file da collegare; il testo dentro il tag è quello che compare sulla pagina, quello su cui devi cliccare per andare al documento.
}}
{{Corso/Passo|1=
Salva, apri <code>index.html</code> nel browser e prova a cliccare sui link: ti portano alle pagine giuste?
{{Corso/Tip|1=Scrivere in HTML richiede un po' di ordine: le maiuscole e le minuscole vanno rispettate, soprattutto nei nomi dei file e nei link (<code>chi-sono.html</code> e <code>Chi-Sono.html</code> possono essere due file diversi). Hai notato le virgolette accanto a <code>href</code>? Gli attributi di un tag vanno quasi sempre racchiusi tra virgolette. E la spaziatura tra i tag non conta per il browser, ma abituati a lasciare spazi a sinistra (indentazione) per rendere il codice più leggibile, come nell'esempio sopra.}}
}}
{{Corso/Passo|1=
Prova ad aggiungere un'altra voce all'elenco, che porti a un'immagine invece che a una pagina:
<pre>
<li><a href="immagini/sport.jpg">La mia foto</a></li>
</pre>
Cosa succede quando ci clicchi sopra?
}}
{{Corso/FinePassi}}

{{Corso/Warn|1=I link non collegano solo pagine web, ma qualunque tipo di file: immagini, documenti, musica, video... persino programmi eseguibili. Quando clicchi su un link, il file viene scaricato e, se possibile, il browser te lo mostra direttamente; altrimenti va aperto col programma giusto. Fai sempre attenzione a cosa clicchi, soprattutto ai file che finiscono in <code>.exe</code>, <code>.bat</code> o <code>.cmd</code>: potrebbero essere programmi, non semplici documenti.}}

== 🚀 Sfide ==

{{Corso/Sfida|1=stella|2=
Aggiungi al menu della homepage un link a una pagina che non esiste ancora, per esempio <code>contatti.html</code>. Cosa mostra il browser quando ci clicchi?
}}

{{Corso/Sfida|1=cometa|2=
Crea davvero la pagina mancante (<code>contatti.html</code>) e collegala.
}}

{{Corso/Sfida|1=razzo|2=
Aggiungi a ogni pagina (<code>chi-sono.html</code>, <code>hobby.html</code>...) un link "Torna alla home" verso <code>index.html</code>, così puoi navigare avanti e indietro tra tutte le pagine del sito.
}}

== 📝 Quiz: mettiti alla prova ==

{{Corso/Quiz|domanda=Come si chiama di solito il file della pagina principale di un sito?|A=principale.html|B=index.html|C=home.doc|risposta=B|ok=Sì! index.html è la convenzione più diffusa.|riprova=Riprova!}}

{{Corso/Quiz|domanda=Quale tag crea un collegamento verso un altro documento?|A=<link>|B=<go>|C=<a>|risposta=C|ok=Esatto: a sta per "anchor".|riprova=Riprova!}}

{{Corso/Quiz|domanda=Quale attributo del tag a indica il file da collegare?|A=href|B=src|C=title|risposta=A|ok=Sì! href sta per "hypertext reference".|riprova=Riprova!}}

== 📚 Da guardare o leggere ==

{{Corso/Fonte|1=
[https://developer.mozilla.org/it/docs/Web/HTML/Element/a Il tag a su MDN] — tutti i modi per usare i link, incluso il collegamento a email e ad altri siti.
}}

{{Corso/FinePagina|prev=[[Corsi/Web design/Lezione 3|Lezione 3: Le immagini]]|next=[[Corsi/Web design/Lezione 5|Lezione 5: Un po' di stile con il CSS]]}}

Corsi/Web design/Lezione 3

2026-08-03T20:53:58Z

Crea Lezione 3: Le immagini (da PDF Sushi Card)

Nuova pagina

{{Corso/Pagina|corso=webdesign|1=Lezione 3 · 45-60 minuti|2=🖼️ Le immagini|obiettivo=Obiettivo: '''aggiungere immagini alla pagina e imparare i tag "vuoti" e gli attributi.'''}}
== 🎒 Ci serve ==

{{Corso/Materiali}}
*Una o più immagini tue (una foto, un disegno, uno screenshot) in formato <code>.jpg</code> o <code>.png</code>
*Le pagine create nelle lezioni precedenti
{{Corso/FineMateriali}}

== 🧠 Un po' di teoria ==

In origine il web era fatto solo di testo, ma il bello è che oggi è pieno di immagini, colori, video e altri effetti. Iniziamo dalle immagini: in HTML servono un tag nuovo, <code>img</code>, e un concetto nuovo, gli '''attributi'''.

== 🔨 Costruisci: aggiungi le immagini ==

{{Corso/Passi}}
{{Corso/Passo|1=
Nella cartella <code>mio-primo-sito</code>, crea una sottocartella chiamata <code>immagini</code> e mettici dentro una foto o un disegno che ti rappresenta, per esempio <code>sport.jpg</code>.
}}
{{Corso/Passo|1=
In <code>hobby.html</code>, prima della lista, inserisci un tag <code>img</code>, che rappresenta l'immagine che vuoi mostrare:
<pre>
<img src="immagini/sport.jpg" />
</pre>
Salva e aggiorna: è comparsa l'immagine?
}}
{{Corso/Passo|1=
Osserva bene questo tag: noti qualcosa di diverso rispetto a <code>p</code>, <code>strong</code> o <code>li</code>? Ti aiuto, ci sono almeno due differenze:
*il tag <code>img</code> è "vuoto": non racchiude altro contenuto ed è "auto-chiuso" — un unico tag <code><img ... /></code> invece di <code><img>...</img></code>
*può contenere informazioni aggiuntive, chiamate '''attributi'''. In questo caso l'attributo <code>src</code> (source, sorgente) indica dove si trova il file dell'immagine rispetto al file principale.
{{Corso/Tip|1=Nota anche l'uso della barra "/" come separatore del percorso: ogni "/" rappresenta l'ingresso in una sottocartella. Per questo <code>immagini/sport.jpg</code> significa "vai nella cartella immagini, poi prendi il file sport.jpg".}}
}}
{{Corso/Passo|1=
Aggiungi anche gli attributi <code>alt</code> (una descrizione, mostrata se l'immagine non si carica) e <code>title</code> (un testo che appare quando ci passi sopra col mouse):
<pre>
<img src="immagini/sport.jpg" alt="Foto mentre gioco a calcio" title="Il mio sport preferito" />
</pre>
}}
{{Corso/Passo|1=
Prova ad aggiungere anche <code>width</code> e <code>height</code> (larghezza e altezza, in pixel), per esempio <code>width="300"</code>. Cosa cambia se metti un numero molto piccolo o molto grande?
{{Corso/Tip|1=Hai imparato come rappresentare le immagini in HTML: <code>img</code> indica un'immagine, <code>src</code> dice dove si trova, <code>alt</code>/<code>title</code>/<code>width</code>/<code>height</code> sono altri attributi comuni.}}
}}
{{Corso/FinePassi}}

== 🚀 Sfide ==

{{Corso/Sfida|1=stella|2=
Aggiungi una seconda immagine alla pagina <code>hobby.html</code>.
}}

{{Corso/Sfida|1=cometa|2=
Aggiungi un'immagine anche a <code>chi-sono.html</code>, con <code>alt</code> e <code>title</code> compilati per bene.
}}

{{Corso/Sfida|1=razzo|2=
Prova a usare solo <code>width</code> (senza <code>height</code>), poi solo <code>height</code> (senza <code>width</code>): cosa succede alle proporzioni dell'immagine nei due casi?
}}

== 📝 Quiz: mettiti alla prova ==

{{Corso/Quiz|domanda=Qual è la differenza principale tra img e gli altri tag come p?|A=img è un tag "vuoto", auto-chiuso.|B=img non può stare dentro body.|C=Non c'è nessuna differenza.|risposta=A|ok=Esatto: si scrive come un unico tag, senza chiusura separata.|riprova=Riprova!}}

{{Corso/Quiz|domanda=Quale attributo indica dove si trova il file dell'immagine?|A=alt|B=title|C=src|risposta=C|ok=Sì! src sta per "source".|riprova=Riprova!}}

{{Corso/Quiz|domanda=A cosa serve l'attributo alt?|A=Ingrandisce l'immagine.|B=È una descrizione, mostrata se l'immagine non si carica.|C=Cambia il colore dell'immagine.|risposta=B|ok=Esatto, ed è utile anche per l'accessibilità.|riprova=Riprova!}}

== 📚 Da guardare o leggere ==

{{Corso/Fonte|1=
[https://developer.mozilla.org/it/docs/Web/HTML/Element/img Il tag img su MDN] — tutti gli attributi disponibili, con esempi.
}}

{{Corso/FinePagina|prev=[[Corsi/Web design/Lezione 2|Lezione 2: Liste e nuove pagine]]|next=[[Corsi/Web design/Lezione 4|Lezione 4: La homepage e i link]]}}

Corsi/Web design/Lezione 2

2026-08-03T20:53:28Z

Crea Lezione 2: Liste e nuove pagine (da PDF Sushi Card)

Nuova pagina

{{Corso/Pagina|corso=webdesign|1=Lezione 2 · 45-60 minuti|2=📃 Liste e nuove pagine|obiettivo=Obiettivo: '''creare una seconda pagina del tuo sito e imparare le liste puntate e numerate.'''}}
== 🎒 Ci serve ==

{{Corso/Materiali}}
*L'editor di testo e il browser della Lezione 1
*La cartella <code>mio-primo-sito</code>, con dentro <code>chi-sono.html</code>
{{Corso/FineMateriali}}

== 🧠 Un po' di teoria ==

Un sito web è quasi sempre fatto di più pagine, collegate tra loro: ogni pagina è un file <code>.html</code> a sé. Oggi ne crei una seconda, ripartendo dallo stesso scheletro della Lezione 1, e impari un nuovo modo per organizzare il contenuto: le liste.

== 🔨 Costruisci: la pagina dei tuoi hobby ==

{{Corso/Passi}}
{{Corso/Passo|1=
Nella cartella <code>mio-primo-sito</code>, duplica <code>chi-sono.html</code> (copia-incolla: CTRL+C poi CTRL+V) e rinomina la copia in <code>hobby.html</code> (selezionala e premi F2).
}}
{{Corso/Passo|1=
Apri <code>hobby.html</code> con l'editor. Hai ottenuto una nuova pagina web in cui parlare dei tuoi hobby! Cambia il <code>title</code> e il contenuto del <code>body</code>: metti un titolo con <code>h1</code> (per esempio "I miei hobby"), magari un sottotitolo con <code>h2</code> e qualche paragrafo con <code>p</code>.
}}
{{Corso/Passo|1=
Inserisci una lista dei tuoi hobby preferiti. Usa il tag <code>ul</code> e racchiudi ogni hobby in un elemento <code>li</code>, così:
<pre>
<ul>
<li>Partecipare al CoderDojo</li>
<li>Imparare a programmare</li>
<li>...</li>
</ul>
</pre>
Salva e aggiorna il browser.
}}
{{Corso/Passo|1=
Fai la classifica dei tuoi preferiti! Trasforma la lista in una lista numerata, cambiando il tag <code>ul</code> in <code>ol</code> — sia nell'apertura che nella chiusura:
<pre>
<ol>
<li>Partecipare al CoderDojo</li>
<li>Imparare a programmare</li>
<li>...</li>
</ol>
</pre>
Cosa cambia?
{{Corso/Tip|1=Hai imparato come rappresentare le liste in HTML: <code>li</code> indica un elemento di una lista, <code>ul</code> una lista NON ordinata ("u" sta per "unordered"), <code>ol</code> una lista ordinata ("o" sta per "ordered"). Ricorda di cambiare sempre sia il tag di apertura che quello di chiusura.}}
}}
{{Corso/FinePassi}}

{{Corso/Warn|1=Se dimentichi di chiudere un <code></li></code> o un <code></ul></code>, il browser spesso "aggiusta" da solo la pagina — ma il codice resta scorretto, e prima o poi ti darà un problema. Abituati a chiudere sempre ogni tag che apri.}}

== 🚀 Sfide ==

{{Corso/Sfida|1=stella|2=
Aggiungi una seconda lista (puntata o numerata) con i tuoi cibi preferiti.
}}

{{Corso/Sfida|1=cometa|2=
In una delle liste, evidenzia con <code>strong</code> l'elemento che ti piace di più.
}}

{{Corso/Sfida|1=razzo|2=
Prova a creare una "sotto-lista": incastra un intero <code><ul>...</ul></code> dentro un elemento <code><li></code> di un'altra lista. Come la mostra il browser?
}}

== 📝 Quiz: mettiti alla prova ==

{{Corso/Quiz|domanda=Cosa rappresenta il tag <ul>?|A=Una lista non ordinata.|B=Un titolo.|C=Un'immagine.|risposta=A|ok=Sì! "u" sta per "unordered".|riprova=Riprova!}}

{{Corso/Quiz|domanda=Cosa rappresenta il tag <ol>?|A=Un paragrafo.|B=Una lista ordinata, numerata.|C=Un collegamento.|risposta=B|ok=Esatto: "o" sta per "ordered".|riprova=Riprova!}}

{{Corso/Quiz|domanda=Dentro quale tag va racchiuso ogni elemento di una lista?|A=<li>|B=<p>|C=<h2>|risposta=A|ok=Sì! li sta per "list item".|riprova=Riprova!}}

== 📚 Da guardare o leggere ==

{{Corso/Fonte|1=
[https://developer.mozilla.org/it/docs/Web/HTML/Element/ul Il tag ul su MDN] e [https://developer.mozilla.org/it/docs/Web/HTML/Element/ol il tag ol su MDN] — con altri esempi ed elenchi annidati.
}}

{{Corso/FinePagina|prev=[[Corsi/Web design/Lezione 1|Lezione 1: Il tuo primo tag HTML]]|next=[[Corsi/Web design/Lezione 3|Lezione 3: Le immagini]]}}

Corsi/Web design/Lezione 1

2026-08-03T20:53:00Z

Crea Lezione 1: Il tuo primo tag HTML (da PDF Sushi Card)

Nuova pagina

{{Corso/Pagina|corso=webdesign|1=Lezione 1 · 45-60 minuti|2=🧱 Il tuo primo tag HTML|obiettivo=Obiettivo: '''creare la tua prima pagina web e scrivere i primi tag HTML — paragrafi, testo in evidenza e titoli.'''}}
== 🎒 Ci serve ==

{{Corso/Materiali}}
*Un editor di testo (Notepad++, Sublime Text, VS Code... non Word!)
*Un browser (Chrome, Firefox, Edge...)
*Una cartella per il progetto, per esempio <code>mio-primo-sito</code>
{{Corso/FineMateriali}}

== 🧠 Un po' di teoria ==

HTML (HyperText Markup Language) è il linguaggio che descrive il contenuto e la struttura di una pagina web: titoli, paragrafi, immagini, link. Il browser legge il file HTML e lo trasforma nella pagina che vedi.
</br>
Il mattoncino base dell'HTML è il '''tag''': una parola tra parentesi angolari che di solito si apre e si chiude, così <code><tag>...</tag></code>. Ogni pagina HTML comincia con uno scheletro fisso, che vedrai tra un attimo nei passi.

== 🔨 Costruisci: la tua prima pagina ==

{{Corso/Passi}}
{{Corso/Passo|1=
Crea la cartella <code>mio-primo-sito</code> sul Desktop (o dove preferisci). Dentro, crea un nuovo file di testo e chiamalo <code>chi-sono.html</code> — attenzione all'estensione: deve finire proprio in <code>.html</code>, non <code>.txt</code>.
}}
{{Corso/Passo|1=
Apri <code>chi-sono.html</code> con l'editor di testo e scrivi lo scheletro base di ogni pagina HTML:
<pre>
<!DOCTYPE html>
<html>
<head>
<title>Chi sono</title>
</head>
<body>

</body>
</html>
</pre>
{{Corso/Tip|1=Il tag <code>title</code> è il testo che vedi nella linguetta del browser, non dentro la pagina. Tutto quello che vuoi mostrare nella pagina va invece dentro <code>body</code>.}}
}}
{{Corso/Passo|1=
Salva il file, poi trovalo nella cartella e aprilo con un doppio click: si apre nel browser. Per ora è vuota, perché <code>body</code> è vuoto.
}}
{{Corso/Passo|1=
Metti la finestra del browser e quella dell'editor fianco a fianco, così le vedi contemporaneamente.
}}
{{Corso/Passo|1=
Dentro <code>body</code>, scrivi <code><h1>il tuo nome</h1></code>. Salva e aggiorna la pagina nel browser (bottone Aggiorna, o premi F5). È comparso il titolo?
}}
{{Corso/Passo|1=
Aggiungi un paragrafo di testo dopo il titolo. Per farlo, scrivi la tua frase racchiudendola tra i tag <code><p></code> e <code></p></code>, così:
<pre>
<p>Oggi sto creando il mio primo sito web.</p>
</pre>
Hai appena scritto in HTML! I tag sono gli elementi base che descrivono il contenuto della pagina, ne imparerai molti. Ricorda: se un tag si apre, si deve sempre chiudere, così <code><tag>...</tag></code>.
}}
{{Corso/Passo|1=
Cosa succede se racchiudi alcune parole nel tag <code>strong</code>? Prova:
<pre>
<p>Oggi sto creando <strong>il mio primo sito</strong> web.</p>
</pre>
}}
{{Corso/Passo|1=
Prova ad usare gli elementi <code>h1</code> o <code>h2</code> al posto di <code>p</code>, uno dopo l'altro: cosa cambia?
{{Corso/Tip|1=Hai imparato i primi tag dell'HTML: <code>p</code> per i paragrafi, <code>strong</code> per mettere in risalto una parte del testo, <code>h1</code>...<code>h6</code> per intestazioni e sottotitoli — il numero ne indica l'importanza, <code>h1</code> è il titolo principale.}}
}}
{{Corso/FinePassi}}

== 🚀 Sfide ==

{{Corso/Sfida|1=stella|2=
Aggiungi un secondo paragrafo che racconta un tuo hobby.
}}

{{Corso/Sfida|1=cometa|2=
Usa <code>h1</code> per il titolo principale e <code>h2</code> per un sottotitolo, poi scrivi due paragrafi sotto ciascuno.
}}

{{Corso/Sfida|1=razzo|2=
Metti in evidenza con <code>strong</code> tre parole diverse in punti diversi della pagina. Poi prova a mettere un tag dentro l'altro, come <code><p>Adoro <strong>il coding</strong>!</p></code>: cosa succede se dimentichi di chiudere <code>strong</code> prima di chiudere <code>p</code>?
}}

== 📝 Quiz: mettiti alla prova ==

{{Corso/Quiz|domanda=A cosa serve il tag <p>?|A=Indica un paragrafo di testo.|B=Indica un'immagine.|C=Indica un collegamento ad un'altra pagina.|risposta=A|ok=Sì! p sta per "paragraph".|riprova=Riprova!}}

{{Corso/Quiz|domanda=Quale tag mette in risalto una parte del testo?|A=<h1>|B=<strong>|C=<title>|risposta=B|ok=Esatto: strong evidenzia il testo al suo interno.|riprova=Riprova!}}

{{Corso/Quiz|domanda=Tra h1 e h6, quale titolo è il più importante?|A=h6|B=h3|C=h1|risposta=C|ok=Sì! Il numero più basso indica il titolo più importante.|riprova=Riprova: pensa a un indice, dal titolo principale ai sottotitoli...}}

== 📚 Da guardare o leggere ==

{{Corso/Fonte|1=
[https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/HTML_basics Le basi dell'HTML (MDN)] — l'introduzione ufficiale ai tag che hai appena usato, con altri esempi da provare.
}}

== 🤝 Domande? Chiedi! ==

{{Corso/Tip|1=
Hai un dubbio o vuoi andare più veloce? Chiedi a un '''mentor''' in sala, oppure al tuo '''tutor automatico''': spiegagli cosa non funziona o chiedigli una sfida più difficile. Nessuna domanda è stupida.
}}

{{Corso/FinePagina|prev=|next=[[Corsi/Web design/Lezione 2|Lezione 2: Liste e nuove pagine]]}}

Corsi/Web design

2026-08-03T20:50:49Z

Crea indice corso Web design (5 lezioni, corso=webdesign)

Nuova pagina

{{Corso/Pagina|corso=webdesign|1=Corso completo · 5 lezioni|2=🌐 Corso Web design|obiettivo=Obiettivo: '''costruire il tuo primo sito web con HTML e CSS, dal primo tag al foglio di stile.'''}}
== 🗺️ Il percorso ==

Cinque lezioni in fila, tutte sullo stesso progetto: un piccolo sito personale, che cresce pagina dopo pagina. Ogni lezione ha '''passi di costruzione''', '''sfide a 3 livelli''' (⭐ Stella, ⭐⭐ Cometa, ⭐⭐⭐ Razzo) e un '''quiz'''. Alla fine avrai un sito vero, con più pagine, immagini, link e uno stile tutto tuo.

{| class="wikitable"
|-
! #
! Lezione
! Cosa impari
|-
| 1
| [[Corsi/Web design/Lezione 1|🧱 Il tuo primo tag HTML]]
| Lo scheletro di una pagina HTML, i tag <code>p</code>, <code>strong</code>, <code>h1</code>-<code>h6</code>.
|-
| 2
| [[Corsi/Web design/Lezione 2|📃 Liste e nuove pagine]]
| Una seconda pagina collegata, le liste <code>ul</code>/<code>ol</code>/<code>li</code>.
|-
| 3
| [[Corsi/Web design/Lezione 3|🖼️ Le immagini]]
| Il tag <code>img</code>, gli attributi <code>src</code>/<code>alt</code>/<code>title</code>.
|-
| 4
| [[Corsi/Web design/Lezione 4|🏠 La homepage e i link]]
| Il tag <code>a</code>, l'attributo <code>href</code>, come collegare le pagine tra loro.
|-
| 5
| [[Corsi/Web design/Lezione 5|🎨 Un po' di stile con il CSS]]
| I fogli di stile CSS, i selettori e la "cascata".
|}

== 🎓 Consigli per lo studio ==

* Fai le lezioni '''in ordine''': ogni lezione aggiunge pezzi allo stesso sito costruito in quelle precedenti.
* Tieni sempre '''editor e browser aperti fianco a fianco''': ogni modifica va salvata e la pagina aggiornata (F5) per vederla.
* Non saltare le '''sfide''': è lì che il sito diventa davvero tuo.
* Se ti blocchi, usa il '''tutor automatico''' o chiedi a un '''mentor'''.

{{Corso/Fonte|1=Corso ispirato alla serie di Sushi Card "Il mio primo sito web" prodotta da CoderDojoComo.}}

{{Corso/FinePagina|prev=|next=}}

Web design/Progetti

2026-08-03T20:50:29Z

Crea stub showcase Web design/Progetti

Nuova pagina

Questa pagina ospiterà una galleria dei siti web fatti davvero dai ragazzi del CoderDojo Como — non idee da altri siti, ma cose costruite qui, da voi.
</br>
Per ora è ancora vuota: se hai realizzato un sito di cui vai fiero, parlane con un mentor per farlo aggiungere qui!
</br>
Nel frattempo, per idee non guidate da provare, guarda la sezione "Progetti da provare" nella pagina [[Web design]].

Web design

2026-08-03T20:50:15Z

Crea pagina attivita Web design (nuova attivita, coerente con pattern esistente)

Nuova pagina

[[Category:Coding]]

==Web design: costruisci il tuo primo sito==

{{argomento|Nome=Web design|Tipologia=coding|Linguaggio=HTML/CSS|Piattaforma=PC (browser + editor di testo)|Livello=1-2/3|Sito=https://developer.mozilla.org/it/docs/Web}}

Un sito web è fatto di due linguaggi che lavorano insieme: l'HTML per il contenuto (testi, immagini, link) e il CSS per l'aspetto (colori, font, layout). Non servono programmi speciali: bastano un browser per vedere il risultato e un editor di testo per scrivere il codice.
</br>
In poche ore passi da una pagina vuota al tuo primo sito personale, con più pagine collegate tra loro e uno stile tutto tuo.

==Risorse e strumenti==
Inizia subito a scrivere codice, senza installare nulla: [https://codepen.io/pen/ Apri l'editor]

*[https://developer.mozilla.org/it/docs/Web/HTML Reference HTML (MDN)]
*[https://developer.mozilla.org/it/docs/Web/CSS Reference CSS (MDN)]
*[https://validator.w3.org/ Validatore HTML ufficiale (W3C)]
*'''Debug''': apri gli '''strumenti per sviluppatori''' del browser (tasto F12) per vedere gli errori e ispezionare gli elementi della pagina; controlla sempre che ogni tag aperto sia stato chiuso

==Drive dell'attività==


==Progetti==

===Percorso guidato===
'''[[Corsi/Web design|Segui il corso completo passo-passo →]]''' — 5 lezioni, dal tuo primo tag HTML al foglio di stile CSS.

===Progetti da provare===
Idee non guidate per chi conosce già le basi (dal corso o da esperienza precedente):

====Livello 1====
*Un biglietto da visita digitale: una sola pagina con il tuo nome, una foto e i tuoi hobby
*Una pagina "I miei animali preferiti", con immagini e didascalie

====Livello 2====
*Un piccolo sito di 3-4 pagine collegate tra loro (chi sono, hobby, contatti)
*Una galleria fotografica, con immagini e titoli

====Livello 3====
*Un sito con uno stile CSS coerente su tutte le pagine: stessi colori, stesso font, stesso menu

===I nostri progetti===
====[[Web design/Progetti|I nostri progetti]]====

==Altre informazioni==

Il corso guidato è ispirato alla serie di Sushi Card "Il mio primo sito web" prodotta da CoderDojoComo.

Template:Corso/Pagina

2026-08-03T20:49:15Z

Aggiunge parametro corso= (default microbit) per supportare un secondo corso

← Versione meno recente		Versione delle 20:49, 3 ago 2026
Riga 4:		Riga 4:

	'''Perché genera un titolo invece di usare <code>DISPLAYTITLE</code>:''' i nomi delle pagine sono tecnici (es. <code>Corsi/Microbit/Lezione 1</code>), mentre qui vogliamo un titolo con emoji completamente diverso (es. "👋 Ciao, micro:bit!"). <code>DISPLAYTITLE</code> di norma permette solo differenze di maiuscole/minuscole rispetto al titolo reale, non una sostituzione totale — per questo il template genera un H1 proprio dentro <code>.course</code>, che il CSS stila apposta con <code>.course h1</code>.		'''Perché genera un titolo invece di usare <code>DISPLAYTITLE</code>:''' i nomi delle pagine sono tecnici (es. <code>Corsi/Microbit/Lezione 1</code>), mentre qui vogliamo un titolo con emoji completamente diverso (es. "👋 Ciao, micro:bit!"). <code>DISPLAYTITLE</code> di norma permette solo differenze di maiuscole/minuscole rispetto al titolo reale, non una sostituzione totale — per questo il template genera un H1 proprio dentro <code>.course</code>, che il CSS stila apposta con <code>.course h1</code>.

	'''⚠️ Nota per chi crea un secondo corso:''' il div generato ha la classe fissa <code>course-microbit</code> (riga <code><div class="course course-microbit"></code>), che nel gadget seleziona la palette colori dei blocchi (vedi [[Template:Corso/Blocco\|Corso/Blocco]]). Per ora questo template funziona correttamente '''solo per il corso micro:bit'''. Per un secondo corso serve prima parametrizzare questa riga (es. un parametro <code>corso=</code> che sostituisca "microbit"), altrimenti i blocchi del nuovo corso useranno per errore la palette colori di micro:bit.

	'''Parametri:'''		'''Parametri:'''
Riga 11:		Riga 9:
	* <code>2</code> — titolo della lezione, con emoji (es. <code>👋 Ciao, micro:bit!</code>)		* <code>2</code> — titolo della lezione, con emoji (es. <code>👋 Ciao, micro:bit!</code>)
	* <code>obiettivo</code> — una riga che spiega cosa si impara, tipicamente con parti in '''grassetto'''		* <code>obiettivo</code> — una riga che spiega cosa si impara, tipicamente con parti in '''grassetto'''
			* <code>corso</code> — identificatore del corso, diventa la classe <code>course-<corso></code> sul div principale. Serve al gadget JS solo se la pagina usa [[Template:Corso/Blocco\|Corso/Blocco]] con una palette colori dedicata (vedi l'oggetto <code>PALETTES</code> in <code>MediaWiki:Gadget-course.js</code>): in quel caso deve corrispondere esattamente al nome della palette. Default: <code>microbit</code>, per compatibilità con le pagine esistenti che non lo passano. Per un corso testuale che non usa Corso/Blocco (es. [[Corsi/Web design]]) il valore non ha effetto visivo, ma è comunque buona norma passarlo (es. <code>corso=webdesign</code>) per chiarezza e per essere già pronti se in futuro servirà una palette dedicata.

	'''Esempio:'''		'''Esempio:'''
Riga 20:		Riga 19:
	{{Corso/Pagina\|1=Esempio · 5 minuti\|2=🧪 Titolo di esempio\|obiettivo=Obiettivo: '''questo è solo un esempio per la documentazione.'''}}		{{Corso/Pagina\|1=Esempio · 5 minuti\|2=🧪 Titolo di esempio\|obiettivo=Obiettivo: '''questo è solo un esempio per la documentazione.'''}}
	{{Corso/FinePagina}}		{{Corso/FinePagina}}
	</noinclude><includeonly><div class="course course-microbit">		</noinclude><includeonly><div class="course course-{{{corso\|microbit}}}">
	<div class="course-lesson-num">{{{1}}}</div>		<div class="course-lesson-num">{{{1}}}</div>
	= {{{2}}} =		= {{{2}}} =
	<p class="course-obiettivo">{{{obiettivo}}}</p></includeonly>		<p class="course-obiettivo">{{{obiettivo}}}</p></includeonly>

Pagina principale

2026-08-03T20:25:45Z

Menu principale

← Versione meno recente		Versione delle 20:25, 3 ago 2026
Riga 7:		Riga 7:
	</div>		</div>
	== Menu principale ==		== Menu principale ==
	~~{{Avviso\|tipo=success\|testo=~~Puoi partire da qui: le [[Scratch/ScratchCards\|Scratch Cards]]!}}		'''Hai appena iniziato a programmare?'''
			</br>
			Puoi partire da qui: le [[Scratch/ScratchCards\|Scratch Cards]]!

	{{Avviso\|tipo=success\|testo=Novità: segui il '''[[Corsi/Microbit\|corso completo di micro:bit]]''', 9 lezioni passo-passo!}}		{{Avviso\|tipo=success\|testo=Novità: segui il '''[[Corsi/Microbit\|corso completo di micro:bit]]''', 9 lezioni passo-passo!}}

Template:Avviso

2026-08-03T20:22:56Z

← Versione meno recente		Versione delle 20:22, 3 ago 2026
Riga 18:		Riga 18:
	{{Avviso\|testo=Avviso di default (nessun tipo specificato).}}		{{Avviso\|testo=Avviso di default (nessun tipo specificato).}}

	'''Nota (2026-08-03):''' il template era progettato per le classi Bootstrap <code><nowiki>alert alert-success/warning/danger/info</nowiki></code>, ma questo wiki non usa più Bootstrap — senza CSS dedicato gli avvisi comparivano come testo semplice. Le classi sono state rinominate in <code>avviso</code>/<code>avviso-success</code>/<code>avviso-warning</code>/<code>avviso-danger</code>/<code>avviso-info</code> (proprietarie del template, non agganciate a un framework esterno) e stilizzate a parte in un CSS del tema. Se gli avvisi appaiono senza colore/bordo, verificare che quel CSS sia stato caricato.
	</noinclude><includeonly>		</noinclude><includeonly>
	<div role="alert" class="avviso		<div role="alert" class="avviso

MediaWiki:Citizen.css

2026-08-03T20:18:58Z

Aggiunta css template avviso

← Versione meno recente		Versione delle 20:18, 3 ago 2026
Riga 3:		Riga 3:
	background-color: #0077b6;		background-color: #0077b6;
	}		}

			.avviso {
			padding: 0.9rem 1.15rem;
			margin: 1rem 0;
			border: 1px solid;
			border-radius: 10px;
			line-height: 1.55;
			}
			.avviso-success { background: #eaf7ef; border-color: #b7e4c7; color: #1b6e3d; }
			.avviso-warning { background: #fff8e1; border-color: #ffe08a; color: #8a6100; }
			.avviso-danger { background: #fdecee; border-color: #f3b8bd; color: #a32630; }
			.avviso-info { background: #eef4fb; border-color: #bcd7f5; color: #1c4a7a; }

Pagina principale

2026-08-03T20:17:53Z

convertiti i banner scritti a mano (classi Bootstrap non piu stilizzate) al template Avviso

← Versione meno recente		Versione delle 20:17, 3 ago 2026
Riga 7:		Riga 7:
	</div>		</div>
	== Menu principale ==		== Menu principale ==
	~~<div class~~=~~"alert alert-~~success~~" role~~=~~"alert">~~Puoi partire da qui: le [[Scratch/ScratchCards\|Scratch Cards]]!~~</div>~~		{{Avviso\|tipo=success\|testo=Puoi partire da qui: le [[Scratch/ScratchCards\|Scratch Cards]]!}}
	~~<div class~~=~~"alert alert-~~success~~" role~~=~~"alert">~~Novità: segui il '''[[Corsi/Microbit\|corso completo di micro:bit]]''', 9 lezioni passo-passo!~~</div>~~		{{Avviso\|tipo=success\|testo=Novità: segui il '''[[Corsi/Microbit\|corso completo di micro:bit]]''', 9 lezioni passo-passo!}}

	=== Le basi ===		=== Le basi ===

Template:Avviso

2026-08-03T20:14:38Z

sostituite le classi Bootstrap non piu in uso con classi proprie, documentazione coerente con gli altri template

← Versione meno recente		Versione delle 20:14, 3 ago 2026
Riga 1:		Riga 1:
	<noinclude>		<noinclude>
	==Template ~~per alert~~==		== Template:Avviso ==
	~~Con questo template è possibile inserire degli~~ avvisi ~~nelle pagine.~~		Inserisce un box colorato per avvisi/messaggi informativi in qualunque pagina del wiki (non solo nei corsi — per box pensati per stare dentro il flusso di una lezione vedi invece [[Template:Corso/Tip\|Corso/Tip]] e [[Template:Corso/Warn\|Corso/Warn]]).
	</~~br>~~
	~~Variando~~ il ~~parametro tipo= si cambia lo sfondo dell'avviso~~:
	*success: sfondo verde
	*warning: sfondo giallo
	*danger: sfondo rosso
	*avviso: sfondo azzurro
	</~~br>~~
	~~'''Per inserire~~:~~'''~~
	</~~br>~~
	~~<nowiki>~~
	~~{{Avviso\|tipo=inserire tipo~~\|~~testo=Inserire testo}}~~
	</~~nowiki>~~
	~~</noinclude>~~

	<includeonly>		'''Parametri:'''
	<div role="alert" class="~~alert~~		* <code>tipo</code> — <code>success</code> (verde), <code>warning</code> (giallo), <code>danger</code> (rosso). Vuoto o qualunque altro valore = default azzurro/info.
			* <code>testo</code> — il contenuto dell'avviso

			'''Esempio:'''
			<pre>
			{{Avviso\|tipo=danger\|testo=Attenzione, questo è un avviso di pericolo.}}
			</pre>

			'''Risultato:'''
			{{Avviso\|tipo=success\|testo=Avviso di tipo success.}}
			{{Avviso\|tipo=warning\|testo=Avviso di tipo warning.}}
			{{Avviso\|tipo=danger\|testo=Avviso di tipo danger.}}
			{{Avviso\|testo=Avviso di default (nessun tipo specificato).}}

			'''Nota (2026-08-03):''' il template era progettato per le classi Bootstrap <code><nowiki>alert alert-success/warning/danger/info</nowiki></code>, ma questo wiki non usa più Bootstrap — senza CSS dedicato gli avvisi comparivano come testo semplice. Le classi sono state rinominate in <code>avviso</code>/<code>avviso-success</code>/<code>avviso-warning</code>/<code>avviso-danger</code>/<code>avviso-info</code> (proprietarie del template, non agganciate a un framework esterno) e stilizzate a parte in un CSS del tema. Se gli avvisi appaiono senza colore/bordo, verificare che quel CSS sia stato caricato.
			</noinclude><includeonly>
			<div role="alert" class="avviso
	{{#switch:{{{tipo\|}}}		{{#switch:{{{tipo\|}}}
	\| success = ~~alert~~-success		\| success = avviso-success
	\| warning = ~~alert~~-warning		\| warning = avviso-warning
	\| danger = ~~alert~~-danger		\| danger = avviso-danger
	\| avviso		\| avviso
	\| #default = ~~alert~~-info		\| #default = avviso-info
	}}">		}}">
	{{{testo}}}		{{{testo}}}

MediaWiki:Gadget-course.css

2026-08-03T20:09:19Z

Mostra modifiche

MediaWiki:Gadget-course.js

2026-08-03T20:02:05Z

Nuovi nomi classi

← Versione meno recente		Versione delle 20:02, 3 ago 2026
Riga 2:		Riga 2:
	Port di assets/blocks.js + assets/quiz.js + assets/led-grid.js		Port di assets/blocks.js + assets/quiz.js + assets/led-grid.js
	per MediaWiki. Scoped: agisce solo sugli elementi con le classi attese.		per MediaWiki. Scoped: agisce solo sugli elementi con le classi attese.
	Tecnologia: legge la classe blk-<tech> sul blocco per scegliere la palette;		Tecnologia: legge la classe course-blk-<tech> sul blocco per scegliere la palette;
	fallback: classe course-<tech> sul wrapper. */		fallback: classe course-<tech> sul wrapper.
			*/
	(function () {		(function () {
	"use strict";		"use strict";
Riga 55:		Riga 56:
	function kindOf(el) {		function kindOf(el) {
	var c = classList(el);		var c = classList(el);
	if (c.indexOf("blk-hat") >= 0) return "hat";		if (c.indexOf("course-blk-hat") >= 0) return "hat";
	if (c.indexOf("blk-val") >= 0) return "val";		if (c.indexOf("course-blk-val") >= 0) return "val";
	if (c.indexOf("blk-bool") >= 0) return "bool";		if (c.indexOf("course-blk-bool") >= 0) return "bool";
	return "stmt";		return "stmt";
	}		}
Riga 65:		Riga 66:
	var tech = null;		var tech = null;
	for (var key in PALETTES) {		for (var key in PALETTES) {
	if (c.indexOf("blk-" + key) >= 0) tech = key;		if (c.indexOf("course-blk-" + key) >= 0) tech = key;
	}		}
	if (!tech) {		if (!tech) {
Riga 80:		Riga 81:
	var c = classList(el);		var c = classList(el);
	for (var key in palette) {		for (var key in palette) {
	if (c.indexOf("blk-" + key) >= 0) return palette[key];		if (c.indexOf("course-blk-" + key) >= 0) return palette[key];
	}		}
	return palette.basic;		return palette.basic;
Riga 112:		Riga 113:
	maskCircle = '<circle cx="' + W + '" cy="' + H / 2 + '" r="5" fill="#000"/>';		maskCircle = '<circle cx="' + W + '" cy="' + H / 2 + '" r="5" fill="#000"/>';
	}		}
	return '<svg class="blk-svg" viewBox="' + vbX + " " + vbY + " " + vbW + " " + vbH +		return '<svg class="course-blk-svg" viewBox="' + vbX + " " + vbY + " " + vbW + " " + vbH +
	'" width="' + vbW + '" height="' + vbH + '" role="img" aria-label="' + escapeHtml(text) + '">' +		'" width="' + vbW + '" height="' + vbH + '" role="img" aria-label="' + escapeHtml(text) + '">' +
	'<defs><mask id="' + id + '">' +		'<defs><mask id="' + id + '">' +
Riga 124:		Riga 125:

	function upgradeBlks(root) {		function upgradeBlks(root) {
	root.querySelectorAll(".blk").forEach(function (el) {		root.querySelectorAll(".course-blk").forEach(function (el) {
	if (el.querySelector("svg")) return;		if (el.querySelector("svg")) return;
	var text = (el.textContent \|\| "").replace(/\s+/g, " ").trim();		var text = (el.textContent \|\| "").replace(/\s+/g, " ").trim();
Riga 130:		Riga 131:
	var svg = build(text, kindOf(el), colorOf(el, root));		var svg = build(text, kindOf(el), colorOf(el, root));
	el.innerHTML = svg;		el.innerHTML = svg;
	el.classList.add("blk-upgraded");		el.classList.add("course-blk-upgraded");
	});		});
	}		}

	function wireQuiz(root) {		function wireQuiz(root) {
	root.querySelectorAll(".quiz-q").forEach(function (q) {		root.querySelectorAll(".course-quiz-q").forEach(function (q) {
	if (q.getAttribute("data-bound")) return;		if (q.getAttribute("data-bound")) return;
	q.setAttribute("data-bound", "1");		q.setAttribute("data-bound", "1");
Riga 141:		Riga 142:
	var okMsg = q.getAttribute("data-ok") \|\| "Sì! Esatto. 👏";		var okMsg = q.getAttribute("data-ok") \|\| "Sì! Esatto. 👏";
	var retryMsg = q.getAttribute("data-retry") \|\| "Non ancora, riprova!";		var retryMsg = q.getAttribute("data-retry") \|\| "Non ancora, riprova!";
	var feedback = q.querySelector(".quiz-feedback");		var feedback = q.querySelector(".course-quiz-feedback");
	function answerPick(btn) {		function answerPick(btn) {
	var correct = btn.getAttribute("data-opt") === answer;		var correct = btn.getAttribute("data-opt") === answer;
	btn.disabled = true;		btn.disabled = true;
	if (correct) {		if (correct) {
	btn.classList.add("correct");		btn.classList.add("course-quiz-btn-correct");
	q.querySelectorAll(".quiz-btn").forEach(function (b) { b.disabled = true; });		q.querySelectorAll(".course-quiz-btn").forEach(function (b) { b.disabled = true; });
	q.classList.add("answered");		q.classList.add("course-quiz-answered");
	if (feedback) { feedback.textContent = okMsg; feedback.className = "quiz-feedback ok"; }		if (feedback) { feedback.textContent = okMsg; feedback.className = "course-quiz-feedback course-quiz-feedback-ok"; }
	} else {		} else {
	btn.classList.add("wrong");		btn.classList.add("course-quiz-btn-wrong");
	if (feedback) { feedback.textContent = retryMsg; feedback.className = "quiz-feedback no"; }		if (feedback) { feedback.textContent = retryMsg; feedback.className = "course-quiz-feedback course-quiz-feedback-no"; }
	}		}
	}		}
	q.querySelectorAll(".quiz-btn").forEach(function (btn) {		q.querySelectorAll(".course-quiz-btn").forEach(function (btn) {
	btn.addEventListener("click", function () { answerPick(btn); });		btn.addEventListener("click", function () { answerPick(btn); });
	btn.addEventListener("keydown", function (e) {		btn.addEventListener("keydown", function (e) {
Riga 165:		Riga 166:

	function renderGrids(root) {		function renderGrids(root) {
	root.querySelectorAll(".ledgrid[data-leds]").forEach(function (grid) {		root.querySelectorAll(".course-ledgrid[data-leds]").forEach(function (grid) {
	if (grid.querySelector(".led")) return;		if (grid.querySelector(".course-led")) return;
	var pattern = (grid.getAttribute("data-leds") \|\| "").replace(/[\/\s]+/g, "");		var pattern = (grid.getAttribute("data-leds") \|\| "").replace(/[\/\s]+/g, "");
	for (var i = 0; i < 25; i++) {		for (var i = 0; i < 25; i++) {
	var led = document.createElement("span");		var led = document.createElement("span");
	led.className = "led" + (pattern[i] === "#" ? " on" : "");		led.className = "course-led" + (pattern[i] === "#" ? " course-led-on" : "");
	grid.appendChild(led);		grid.appendChild(led);
	}		}

Template:Corso/BloccoVal

2026-08-03T19:58:57Z