Repository navigation
Expand file tree
/
Copy pathcomputer-essentials.html
More file actions
4019 lines (3795 loc) · 332 KB
/
Copy pathcomputer-essentials.html
File metadata and controls
4019 lines (3795 loc) · 332 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ICDL Modulo Computer Essentials</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="100">
<!-- Navbar -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top shadow">
<div class="container">
<a class="navbar-brand fw-bold" href="index.html">
<i class="bi bi-mortarboard-fill me-2"></i>ICDL Corso Completo
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">
<i class="bi bi-house-door me-1"></i>Home
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" id="computerEssentialsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-pc-display me-1"></i>Computer Essentials
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="computerEssentialsDropdown">
<li><h6 class="dropdown-header"><i class="bi bi-list-ul me-2"></i>Moduli del Corso</h6></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#ict"><i class="bi bi-1-circle me-2"></i>Modulo 1: ICT</a></li>
<li><a class="dropdown-item" href="#hardware"><i class="bi bi-2-circle me-2"></i>Modulo 2: Hardware</a></li>
<li><a class="dropdown-item" href="#software"><i class="bi bi-3-circle me-2"></i>Modulo 3: Software</a></li>
<li><a class="dropdown-item" href="#desktop"><i class="bi bi-4-circle me-2"></i>Modulo 4: Desktop</a></li>
<li><a class="dropdown-item" href="#file-cartelle"><i class="bi bi-5-circle me-2"></i>Modulo 5: File e Cartelle</a></li>
<li><a class="dropdown-item" href="#reti"><i class="bi bi-6-circle me-2"></i>Modulo 6: Reti</a></li>
<li><a class="dropdown-item" href="#sicurezza"><i class="bi bi-7-circle me-2"></i>Modulo 7: Sicurezza</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="spreadsheet.html">
<i class="bi bi-file-earmark-excel me-1"></i>Spreadsheet
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="word-processing.html">
<i class="bi bi-file-earmark-text me-1"></i>Word Processing
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Scroll Indicator -->
<div id="scroll-indicator" class="scroll-indicator"></div>
<!-- Breadcrumb -->
<div class="container mt-3 pt-5">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html"><i class="bi bi-house-door me-1"></i>Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Computer Essentials</li>
</ol>
</nav>
</div>
<!-- Hero Section -->
<section id="home" class="hero-section d-flex align-items-center">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-4 fw-bold text-white mb-4">
Modulo<br>
<span class="text-warning">Computer Essentials</span>
</h1>
<p class="lead text-white-50 mb-4">
Acquisisci le competenze fondamentali sulle tecnologie dell'informazione e della comunicazione (ICT).
Impara a utilizzare computer, periferiche, software e a proteggere i tuoi dati.
</p>
<div class="d-flex gap-3 flex-wrap">
<a href="#ict" class="btn btn-warning btn-lg px-4">
<i class="bi bi-play-fill me-2"></i>Inizia Modulo
</a>
</div>
<div class="mt-4">
<span class="badge bg-success me-2 mb-2"><i class="bi bi-clock me-1"></i>7 Moduli</span>
<span class="badge bg-info me-2 mb-2"><i class="bi bi-check-circle me-1"></i>Certificazione ICDL</span>
</div>
</div>
<div class="col-lg-6 text-center mt-5 mt-lg-0">
<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600"
alt="Computer" class="img-fluid rounded-4 shadow-lg hero-image">
</div>
</div>
</div>
</section>
<!-- Progress Bar -->
<div class="progress-container bg-light py-3 sticky-top" style="top: 56px; z-index: 1000;">
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-2">
<span class="fw-semibold">Progresso del Corso</span>
<span id="progress-text" class="badge bg-primary">0%</span>
</div>
<div class="progress" style="height: 8px;">
<div id="course-progress" class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
</div>
</div>
</div>
<!-- ========================================== -->
<!-- MODULO 1: ICT - Tecnologie dell'Informazione -->
<!-- ========================================== -->
<section id="ict" class="py-5">
<div class="container">
<div class="section-header text-center mb-5">
<span class="badge bg-primary mb-3">Modulo 1</span>
<h2 class="display-5 fw-bold">ICT - Tecnologie dell'Informazione</h2>
<p class="lead text-muted">Information and Communication Technology</p>
</div>
<!-- Definizione ICT -->
<div class="row mb-5">
<div class="col-lg-10 mx-auto">
<div class="card border-0 shadow-lg bg-gradient" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<div class="card-body text-white p-4">
<h4><i class="bi bi-lightbulb me-2"></i>Cos'è l'ICT?</h4>
<!-- Definizione Principale -->
<div class="alert alert-info border-0 mb-4">
<h5 class="mb-3"><i class="bi bi-book me-2"></i>Definizione</h5>
<p class="lead mb-0">
<strong>ICT</strong> (da "Information and Communication Technology") indica le <strong>Tecnologie della Comunicazione e dell'Informazione</strong>,
ovvero la scienza che utilizza il computer, altri dispositivi elettronici e le tecnologie a essi collegati per archiviare,
elaborare e trasmettere delle informazioni.
</p>
</div>
<!-- Definizione Estesa -->
<div class="alert alert-light border-0 mb-4" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);">
<h5 class="mb-3"><i class="bi bi-info-circle me-2"></i>Definizione Estesa</h5>
<p class="mb-0">
<strong>ICT (Information and Communication Technology)</strong> indica l'insieme integrato di tecnologie, infrastrutture, sistemi e processi utilizzati per acquisire, produrre, elaborare, archiviare, trasmettere e distribuire informazioni, prevalentemente in forma digitale.
</p>
</div>
<!-- Definizione Tecnica -->
<div class="alert alert-light border-0 mb-4" style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px);">
<h5 class="mb-3"><i class="bi bi-gear me-2"></i>Definizione Tecnica</h5>
<p class="mb-0">
Dal punto di vista tecnico-ingegneristico, l'ICT comprende tutte le soluzioni hardware, software e di rete che consentono la gestione end-to-end del ciclo di vita dell'informazione, garantendo affidabilità, scalabilità, sicurezza e interoperabilità.
</p>
</div>
<!-- Ambiti Costitutivi -->
<h5 class="mb-3"><i class="bi bi-diagram-3 me-2"></i>Ambiti Costitutivi dell'ICT</h5>
<p class="mb-3">L'ICT non è una singola tecnologia, ma un ecosistema che include:</p>
<div class="row g-3 mb-4">
<div class="col-md-6">
<div class="bg-white bg-opacity-10 p-3 rounded">
<h6 class="text-warning mb-2"><i class="bi bi-cpu me-2"></i>Hardware</h6>
<p class="small mb-0">Server, PC, dispositivi mobili, apparati di rete (router, switch), sistemi embedded, IoT.</p>
</div>
</div>
<div class="col-md-6">
<div class="bg-white bg-opacity-10 p-3 rounded">
<h6 class="text-warning mb-2"><i class="bi bi-code-square me-2"></i>Software</h6>
<p class="small mb-0">Sistemi operativi, applicazioni enterprise, web app, database, middleware, piattaforme cloud.</p>
</div>
</div>
<div class="col-md-6">
<div class="bg-white bg-opacity-10 p-3 rounded">
<h6 class="text-warning mb-2"><i class="bi bi-router me-2"></i>Reti e Telecomunicazioni</h6>
<p class="small mb-0">LAN/WAN, Internet, fibra ottica, reti mobili (4G/5G), protocolli di comunicazione (TCP/IP, HTTP, ecc.).</p>
</div>
</div>
<div class="col-md-6">
<div class="bg-white bg-opacity-10 p-3 rounded">
<h6 class="text-warning mb-2"><i class="bi bi-database me-2"></i>Dati e Sistemi Informativi</h6>
<p class="small mb-0">Database, data warehouse, big data, sistemi di integrazione e flussi informativi.</p>
</div>
</div>
<div class="col-md-12">
<div class="bg-white bg-opacity-10 p-3 rounded">
<h6 class="text-warning mb-2"><i class="bi bi-cloud me-2"></i>Servizi Digitali</h6>
<p class="small mb-0">Cloud computing, cybersecurity, AI/ML, automazione, servizi di comunicazione digitale.</p>
</div>
</div>
</div>
<!-- Esempi Pratici -->
<div class="mt-4 pt-4 border-top border-white border-opacity-25">
<h5 class="mb-3"><i class="bi bi-lightbulb-fill me-2"></i>L'ICT nella Vita Quotidiana</h5>
<p class="mb-0">
Ogni giorno, utilizzando smartphone, computer, tablet o altri dispositivi elettronici effettuiamo azioni rese
possibili dall'informatica. Anche numerose altre azioni che compiamo senza utilizzare personalmente
dispositivi elettronici sono consentite dall'informatica: ad esempio quando alla cassa del supermercato i
codici a barre dei prodotti che abbiamo acquistato comunicano alla cassiera il tipo di prodotto, il suo prezzo
ed eventuali promozioni; quando chiediamo un certificato al Comune, a Scuola o a un altro Ente; quando
paghiamo un prodotto con la carta di credito; quando ritiriamo banconote a uno sportello Bancomat;
quando prenotiamo viaggi in treno o in aereo, e in migliaia di altri casi. Tutte queste azioni fanno parte delle Tecnologie della Comunicazione e dell'Informazione (ICT).
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Servizi ICT -->
<div class="row mb-5">
<div class="col-lg-12">
<div class="card border-0 shadow-lg mb-4">
<div class="card-header bg-primary text-white">
<h3 class="mb-0"><i class="bi bi-grid-3x3-gap me-2"></i>Principali Servizi e Utilizzi dell'ICT</h3>
</div>
<div class="card-body">
<p class="lead mb-4">I servizi e gli utilizzi dell'ICT sono numerosissimi. Tra essi ricordiamo innanzitutto quelli basati su <strong>Internet</strong>:</p>
<div class="row g-4 mb-4">
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm hover-card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="icon-circle bg-primary text-white me-3">
<i class="bi bi-cart3 fs-4"></i>
</div>
<h5 class="mb-0">E-Commerce</h5>
</div>
<p class="text-muted mb-0">Il <strong>commercio elettronico</strong>, in inglese <em>e-commerce</em> (la "e" iniziale del termine costituisce – in questo e nei casi successivi – l'abbreviazione della parola "electronic"), consiste nella compravendita di beni e servizi tramite Internet, con possibilità di acquistare pressoché ogni tipo di prodotto o servizio (ad es. assicurazioni, abbigliamento, elettronica, libri, viaggi, servizi finanziari).</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm hover-card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="icon-circle bg-success text-white me-3">
<i class="bi bi-bank fs-4"></i>
</div>
<h5 class="mb-0">E-Banking</h5>
</div>
<p class="text-muted mb-0">L'<strong>e-banking</strong> consente ai clienti di una banca di effettuare numerose operazioni tramite Internet, senza doversi recare in filiale. Tra le operazioni più comuni: consultazione del saldo e del movimento conto, bonifici, pagamenti di bollette e utenze, gestione di investimenti, richiesta di prestiti, gestione di carte di credito e debito, pagamenti ricorrenti.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm hover-card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="icon-circle bg-warning text-white me-3">
<i class="bi bi-building fs-4"></i>
</div>
<h5 class="mb-0">E-Government</h5>
</div>
<p class="text-muted mb-0">L'<strong>e-government</strong> consiste nei servizi che la pubblica amministrazione offre ai cittadini attraverso Internet. Tra i servizi più diffusi: richiesta di certificati anagrafici, invio della dichiarazione dei redditi, pagamento di tasse e imposte, prenotazione di appuntamenti presso uffici pubblici, consultazione di pratiche burocratiche, accesso a bandi e concorsi pubblici.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm hover-card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="icon-circle bg-info text-white me-3">
<i class="bi bi-book fs-4"></i>
</div>
<h5 class="mb-0">E-Learning</h5>
</div>
<p class="text-muted mb-0">L'<strong>e-learning</strong> è un termine che indica le tecniche di apprendimento basate sull'utilizzo degli strumenti elettronici e di Internet. Le nuove tecnologie danno più spazio alla creatività e all'interattività degli studenti, che possono accedere a materiale utile per i propri studi e comprendere meglio alcune discipline attraverso simulazioni multimediali, video interattivi, quiz online, forum di discussione e piattaforme di apprendimento virtuale.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm hover-card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="icon-circle bg-danger text-white me-3">
<i class="bi bi-house-door fs-4"></i>
</div>
<h5 class="mb-0">Smart Working / Telelavoro</h5>
</div>
<p class="text-muted mb-0">Il <strong>lavoro a domicilio</strong>, o <strong>smart working</strong> o <strong>telelavoro</strong>, riguarda tutte le occupazioni nelle quali il prodotto può essere inviato in forma digitale e offre la possibilità di lavorare da casa in situazioni che limitano o impediscono la mobilità: emergenze sanitarie o metereologiche, persone affette da handicap motori oppure che hanno bambini piccoli o persone anziane o malate da accudire. Consente maggiore flessibilità oraria e riduzione degli spostamenti.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm hover-card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="icon-circle bg-secondary text-white me-3">
<i class="bi bi-phone fs-4"></i>
</div>
<h5 class="mb-0">Tecnologie Mobili</h5>
</div>
<p class="text-muted mb-0">Negli ultimi anni, la diffusione di <strong>smartphone e tablet</strong>, la digitalizzazione delle linee telefoniche e l'utilizzo di sistemi di trasmissione dei dati senza fili sempre più veloci (4G, 5G), hanno permesso di usufruire di servizi e utilizzi ICT basati su tecnologie mobili con risultati paragonabili all'utilizzo dei computer fissi. Dovunque ci si trovi – in strada, in auto, in treno – è possibile navigare su Internet, controllare la propria posta elettronica e i messaggi digitali in genere, utilizzare sistemi di geolocalizzazione e così via.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Applicazioni di Produttività -->
<div class="card border-0 shadow-lg mb-5">
<div class="card-header bg-success text-white">
<h4 class="mb-0"><i class="bi bi-briefcase me-2"></i>Applicazioni di Produttività di Ufficio</h4>
</div>
<div class="card-body">
<p class="lead mb-4">Infine, vanno ricordate le <strong>applicazioni di produttività di ufficio</strong> legate all'ICT, che consentono:</p>
<div class="row g-3">
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="icon-circle bg-success text-white me-3 flex-shrink-0">
<i class="bi bi-file-earmark-plus"></i>
</div>
<div>
<h6 class="fw-bold">Creazione di Documenti</h6>
<p class="text-muted small mb-0">Creazione di documenti di testo, fogli di calcolo, presentazioni multimediali, database, grafici e diagrammi professionali.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="icon-circle bg-info text-white me-3 flex-shrink-0">
<i class="bi bi-archive"></i>
</div>
<div>
<h6 class="fw-bold">Archiviazione Organizzata</h6>
<p class="text-muted small mb-0">Archiviazione organizzata di documenti digitali con sistemi di classificazione, etichettatura e ricerca avanzata per un accesso rapido e efficiente.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="icon-circle bg-warning text-white me-3 flex-shrink-0">
<i class="bi bi-share"></i>
</div>
<div>
<h6 class="fw-bold">Scambio di Documenti</h6>
<p class="text-muted small mb-0">Scambio di documenti tra utenti tramite email, cloud storage, piattaforme di condivisione e reti aziendali, con controllo delle versioni e tracciamento delle modifiche.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="icon-circle bg-primary text-white me-3 flex-shrink-0">
<i class="bi bi-envelope"></i>
</div>
<div>
<h6 class="fw-bold">Gestione della Posta Elettronica</h6>
<p class="text-muted small mb-0">Gestione completa della posta elettronica con organizzazione automatica, filtri, cartelle, ricerca avanzata e integrazione con calendario e contatti.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="icon-circle bg-danger text-white me-3 flex-shrink-0">
<i class="bi bi-calendar-check"></i>
</div>
<div>
<h6 class="fw-bold">Gestione delle Attività e del Calendario</h6>
<p class="text-muted small mb-0">Gestione delle attività, appuntamenti e calendario condiviso, promemoria automatici, sincronizzazione tra dispositivi e integrazione con altri strumenti di produttività.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="icon-circle bg-secondary text-white me-3 flex-shrink-0">
<i class="bi bi-people"></i>
</div>
<div>
<h6 class="fw-bold">Collaborazione in Tempo Reale</h6>
<p class="text-muted small mb-0">Collaborazione in tempo reale su documenti condivisi con editing simultaneo, commenti, revisioni, chat integrate e videoconferenze per riunioni virtuali.</p>
</div>
</div>
</div>
</div>
<div class="alert alert-info mt-4 mb-0">
<i class="bi bi-info-circle me-2"></i>
<strong>Nota:</strong> Queste applicazioni sono essenziali per la produttività moderna e permettono di lavorare in modo efficiente sia individualmente che in team, riducendo i tempi di elaborazione e migliorando la qualità del lavoro.
</div>
</div>
</div>
<div class="text-center mt-5">
<button class="btn btn-success btn-lg complete-section" data-section="1">
<i class="bi bi-check-circle me-2"></i>Ho completato questa sezione
</button>
</div>
</div>
</section>
<!-- ========================================== -->
<!-- MODULO 2: HARDWARE -->
<!-- ========================================== -->
<section id="hardware" class="py-5 bg-light">
<div class="container">
<div class="section-header text-center mb-5">
<span class="badge bg-success mb-3">Modulo 2</span>
<h2 class="display-5 fw-bold">Hardware</h2>
<p class="lead text-muted">Componenti fisici del computer e dispositivi</p>
</div>
<!-- Definizione Hardware -->
<div class="alert alert-info mb-5">
<h5><i class="bi bi-info-circle me-2"></i>Definizione</h5>
<p class="mb-0">Il termine <strong>hardware</strong> indica le parti fisiche – vale a dire elettriche, elettroniche e meccaniche – del computer
e dei dispositivi elettronici in genere: circuiti elettronici, tastiera, schermo, ecc. A volte, il termine hardware
indica anche altri dispositivi collegati al computer: stampante, scanner, ecc.</p>
</div>
<!-- Tipi di Computer -->
<h3 class="mb-4"><i class="bi bi-pc-display me-2"></i>Tipi di Computer e Dispositivi</h3>
<div class="row g-4 mb-5">
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-pc-display-horizontal text-primary fs-1 me-3"></i>
<div>
<h5 class="mb-0">Desktop Computer</h5>
<small class="text-muted">Computer fisso</small>
</div>
</div>
<p class="small">Sino a qualche anno fa i più utilizzati sono stati i <strong>computer fissi o desktop computer</strong>,
costituiti dal <strong>case</strong> che è il "contenitore" nel quale si trovano i componenti elettronici che costituiscono
il vero e proprio computer, al quale sono collegati monitor, tastiera, mouse, casse acustiche, ecc.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-laptop text-success fs-1 me-3"></i>
<div>
<h5 class="mb-0">Laptop / Notebook</h5>
<small class="text-muted">Computer portatile</small>
</div>
</div>
<p class="small">Successivamente si sono diffusi i <strong>laptop computer</strong>, più noti come <strong>computer portatili o notebook</strong>,
costituiti da un unico apparecchio in cui si trovano tutte le componenti elettroniche, la tastiera e lo schermo
del computer. Pesano in genere tra uno e due chili e hanno prestazioni simili a quelle dei computer fissi.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-tablet text-warning fs-1 me-3"></i>
<div>
<h5 class="mb-0">Tablet</h5>
<small class="text-muted">Dispositivo touchscreen</small>
</div>
</div>
<p class="small">Ancora più leggeri e trasportabili sono i <strong>tablet</strong>, che permettono di utilizzare applicazioni e digitare
toccando direttamente sullo schermo, che è sensibile al tocco del dito ed è perciò detto <strong>touchscreen</strong>.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-phone text-danger fs-1 me-3"></i>
<div>
<h5 class="mb-0">Smartphone</h5>
<small class="text-muted">Telefono intelligente</small>
</div>
</div>
<p class="small">Gli <strong>smartphone</strong> sono telefoni cellulari che permettono di collegarsi a Internet e di eseguire
numerose applicazioni attraverso l'uso dello schermo touch.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-music-player text-info fs-1 me-3"></i>
<div>
<h5 class="mb-0">Lettori Multimediali</h5>
<small class="text-muted">Media player</small>
</div>
</div>
<p class="small">I <strong>lettori multimediali</strong> sono apparecchi elettronici in grado di conservare e riprodurre un grande numero di
brani musicali e spesso anche foto e video; con dimensioni e peso estremamente ridotti.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-camera text-secondary fs-1 me-3"></i>
<div>
<h5 class="mb-0">Fotocamere Digitali</h5>
<small class="text-muted">Dispositivo fotografico</small>
</div>
</div>
<p class="small">Altro dispositivo di utilizzo comune è la <strong>macchina fotografica digitale</strong>, che acquisisce e memorizza le
immagini in una <strong>scheda di memoria</strong>, in modo da poterle poi archiviare, modificare, condividere tramite Internet, ecc.</p>
</div>
</div>
</div>
</div>
<!-- Processore, RAM, Memoria di Massa -->
<h3 class="mb-4"><i class="bi bi-cpu me-2"></i>Componenti Fondamentali</h3>
<div class="row g-4 mb-5">
<div class="col-lg-4">
<div class="card border-0 shadow h-100">
<div class="card-header bg-primary text-white">
<h5 class="mb-0"><i class="bi bi-cpu-fill me-2"></i>Processore (CPU)</h5>
</div>
<div class="card-body">
<p>Componente fondamentale dei computer e dei dispositivi elettronici, il <strong>processore</strong> permette l'esecuzione di calcoli
e controlla il funzionamento di tutte le applicazioni.</p>
<p><strong>Caratteristiche:</strong></p>
<ul>
<li>Costituito da un quadratino di silicio di 1-2 cm²</li>
<li>Contiene milioni di transistor</li>
<li>Chiamato anche <strong>CPU</strong> (Central Processing Unit) o <strong>microprocessore</strong></li>
<li>La velocità si misura in <strong>MHz</strong> (Megahertz) o <strong>GHz</strong> (Gigahertz)</li>
<li>Il <strong>clock</strong> emette segnali regolari (battiti) che determinano la velocità</li>
</ul>
<div class="alert alert-info mt-3 mb-0">
<small><strong>Esempio:</strong> Un processore a 2.5 GHz può effettuare 2,5 miliardi di operazioni elementari al secondo!</small>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card border-0 shadow h-100">
<div class="card-header bg-success text-white">
<h5 class="mb-0"><i class="bi bi-memory me-2"></i>Memoria RAM</h5>
</div>
<div class="card-body">
<p>La <strong>RAM</strong> (Random Access Memory - memoria ad accesso casuale) è quella parte dell'hardware che il computer
utilizza per memorizzare temporaneamente dei dati durante il suo funzionamento.</p>
<p><strong>Caratteristiche:</strong></p>
<ul>
<li>Memorizza istruzioni delle applicazioni in esecuzione</li>
<li>Memorizza documenti ai quali si sta lavorando</li>
<li>Dati vengono <strong>cancellati</strong> quando il computer viene spento</li>
<li>Chiamata anche <strong>"memoria volatile"</strong></li>
<li>Si misura in <strong>Megabyte (MB)</strong> e <strong>Gigabyte (GB)</strong></li>
<li>Computer moderni: 4, 8 o 16 GB di RAM</li>
</ul>
<div class="alert alert-warning mt-3 mb-0">
<small><strong>Importante:</strong> Più RAM = più programmi possono essere eseguiti contemporaneamente senza rallentamenti!</small>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card border-0 shadow h-100">
<div class="card-header bg-warning text-white">
<h5 class="mb-0"><i class="bi bi-hdd me-2"></i>Memoria di Massa</h5>
</div>
<div class="card-body">
<p>Con il termine <strong>memorie di massa</strong> si indicano i dispositivi di memorizzazione nei quali i dati registrati
(documenti, applicazioni, immagini, suoni, altri tipi di file) restano fin quando l'utente non decide di cancellarli.</p>
<p><strong>Tipi principali:</strong></p>
<ul>
<li><strong>Disco fisso</strong> (interno o esterno)</li>
<li><strong>Chiavetta USB</strong> (pendrive)</li>
<li><strong>Schede di memoria</strong> (SD, microSD)</li>
<li><strong>CD e DVD</strong></li>
<li><strong>Dischi Blu-ray</strong></li>
<li><strong>Memorizzazione online</strong> (cloud)</li>
</ul>
<div class="alert alert-success mt-3 mb-0">
<small><strong>Nota:</strong> La memoria di massa è permanente, a differenza della RAM che è temporanea!</small>
</div>
</div>
</div>
</div>
</div>
<!-- Impatto sulle Prestazioni -->
<div class="card border-0 shadow mb-5">
<div class="card-header bg-info text-white">
<h5 class="mb-0"><i class="bi bi-speedometer2 me-2"></i>Impatto sulle Prestazioni</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h6>Processore</h6>
<p>La velocità del processore è uno degli elementi principali – ma non l'unico – di cui occorre tener conto
per valutare la potenza di un computer o di un dispositivo.</p>
</div>
<div class="col-md-6">
<h6>Memoria RAM</h6>
<p>Una maggiore disponibilità di memoria RAM velocizza l'esecuzione delle applicazioni, permettendo di eseguire
più programmi contemporaneamente senza rallentamenti.</p>
</div>
<div class="col-md-6">
<h6>Memoria di Massa</h6>
<p>Il tipo di memoria di massa condiziona la velocità di trasferimento dei dati.
Gli SSD (Solid State Drive) sono molto più veloci degli HDD (Hard Disk Drive) tradizionali.</p>
</div>
<div class="col-md-6">
<h6>Considerazioni</h6>
<p>Per valutare le prestazioni di un computer bisogna considerare tutti e tre questi componenti insieme,
non solo la velocità del processore!</p>
</div>
</div>
</div>
</div>
<!-- Periferiche -->
<h3 class="mb-4"><i class="bi bi-usb-plug me-2"></i>Periferiche di Input e Output</h3>
<div class="alert alert-primary mb-4">
<h5><i class="bi bi-info-circle me-2"></i>Concetto Base</h5>
<p class="mb-0">Un computer può essere definito come un dispositivo che: <strong>1) riceve dati (input)</strong>,
<strong>2) elabora i dati ricevuti</strong>, <strong>3) comunica il risultato (output)</strong>.</p>
</div>
<!-- Periferiche di Input -->
<h4 class="mb-3"><i class="bi bi-arrow-down-circle me-2"></i>Periferiche di Input</h4>
<div class="row g-4 mb-5">
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h6><i class="bi bi-keyboard text-primary me-2"></i>Tastiera</h6>
<p class="small mb-2">È la principale periferica con la quale vengono digitati i dati: lettere, numeri e simboli.
In Italia si utilizza la tastiera <strong>"QWERTY"</strong> (dalle prime sei lettere della terza fila). Le tastiere standard hanno generalmente 104 tasti.</p>
<p class="small mb-2">A ogni tasto sono associati due caratteri (minuscolo/maiuscolo per le lettere, simboli inferiori/superiori per altri tasti).
Alcuni tasti hanno tre simboli: il terzo si ottiene premendo <strong>Alt Gr</strong>.</p>
<div class="mt-2">
<small><strong>Tasti principali:</strong></small>
<ul class="small mb-2">
<li><strong>Esc</strong> (Escape) - Primo tasto in alto a sinistra, interrompe operazioni o annulla scelte</li>
<li><strong>F1-F12</strong> - Tasti funzione per operazioni specifiche (aprire/chiudere documenti, stampare, avviare guide)</li>
<li><strong>Tab</strong> - Sposta testo verso destra (Word) o cursore nella cella successiva (Excel)</li>
<li><strong>Backspace</strong> - Cancella il carattere precedente (a sinistra del cursore)</li>
<li><strong>Ins</strong> (Insert) - Passa da inserimento a sovrascrittura</li>
<li><strong>Canc</strong> (Delete) - Cancella carattere successivo o file/cartella selezionati</li>
<li><strong>Invio</strong> (Enter) - Esegue comandi o termina paragrafo negli elaboratori di testo</li>
<li><strong>Bloc Maiusc</strong> (Caps Lock) - Scrittura solo in maiuscolo (si accende un LED)</li>
<li><strong>Barra spaziatrice</strong> - Crea spazi tra le parole (premere con i pollici)</li>
<li><strong>Tastierino numerico</strong> - Per immettere numeri velocemente (attivato con Bloc Num)</li>
<li><strong>Ctrl</strong> (Control) - Usato con altri tasti per funzioni speciali</li>
<li><strong>Alt</strong> e <strong>Alt Gr</strong> - Per simboli alternativi (es. @, €)</li>
<li><strong>Maiusc</strong> (Shift) - Per maiuscole e simboli superiori</li>
<li><strong>Frecce direzionali</strong> - Spostano il cursore</li>
<li><strong>Home</strong> - Cursore all'inizio del rigo</li>
<li><strong>Fine</strong> - Cursore alla fine del rigo</li>
<li><strong>PagSu/PagGiù</strong> - Scorrono il documento su/giù</li>
<li><strong>Tasto Windows</strong> - Attiva menu Start</li>
<li><strong>Tasto Menu</strong> - Attiva menu contestuali</li>
</ul>
<small class="text-muted"><strong>Nota:</strong> Le tastiere dei portatili hanno disposizione diversa e spesso manca il tastierino numerico.</small>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h6><i class="bi bi-mouse text-success me-2"></i>Mouse</h6>
<p class="small mb-2">È costituito da una specie di scatolina collegata con un cavo al computer. Per la sua forma e per la presenza di questo cavo, ricorda vagamente un topolino con una lunga coda e da questo ha preso il nome: in inglese "mouse" significa "topo".</p>
<p class="small mb-2">In molti mouse la comunicazione avviene però senza fili, tramite raggi infrarossi (come nei comuni telecomandi) o attraverso onde radio, ad esempio con il sistema bluetooth.</p>
<p class="small mb-2">Spostando il mouse su una superficie liscia, si sposta il <strong>puntatore</strong> (indicato generalmente da una freccia) sullo schermo.</p>
<div class="mt-2">
<small><strong>Operazioni:</strong></small>
<ul class="small mb-2">
<li><strong>Pulsante sinistro</strong> - Utilizzato per le operazioni più comuni: selezionare un oggetto sullo schermo o spostarlo (tenendo premuto il pulsante mentre si muove il mouse)</li>
<li><strong>Pulsante destro</strong> - Adoperato per operazioni più particolari, ad esempio per aprire il menu di scelta rapida (detto anche menu contestuale) che offre la possibilità di svolgere le principali operazioni con l'oggetto sul quale si trova il puntatore</li>
<li><strong>Cliccare</strong> - Termine che indica l'azione del premere uno dei tasti del mouse (dal rumore prodotto: "clic")</li>
<li><strong>Doppio clic</strong> - Premere due volte rapidamente il pulsante sinistro. Avvia le applicazioni, anche se effettuato su un documento associato a quell'applicazione (es. cliccando due volte su un file immagine, si avvia un'applicazione di visualizzazione)</li>
<li><strong>Rotellina (scroll)</strong> - Presente tra i due tasti in molti mouse, permette di scorrere verso l'alto o verso il basso il contenuto di un documento (ad es. una pagina Internet) o di un elenco di file o cartelle</li>
<li><strong>Terzo pulsante</strong> - Alcuni mouse possiedono un pulsante centrale che può essere utilizzato per svolgere alcune funzioni particolari (ad es. può operare come doppio clic)</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm">
<div class="card-body">
<h6><i class="bi bi-square text-warning me-2"></i>Touchpad / Trackpad</h6>
<p class="small mb-0">Piccola tavoletta sensibile al tatto, presente soprattutto nei computer portatili.
Permette di spostare il puntatore con il movimento del polpastrello di un dito.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h6><i class="bi bi-camera-video text-info me-2"></i>Webcam</h6>
<p class="small mb-2">Videocamera di ridotte dimensioni collegata al computer o in esso già presente (come capita principalmente nei portatili), che rende possibile, con l'ausilio di un microfono (alcune volte incorporato nella stessa webcam) e grazie al collegamento a Internet, di realizzare videotelefonate con un interlocutore o videoconferenze alla quale partecipano più persone.</p>
<p class="small mb-2">Nei dispositivi mobili come smartphone e tablet, è solitamente presente una fotocamera anteriore che svolge funzioni di webcam.</p>
<p class="small mb-0"><strong>Nota importante:</strong> Per ottenere buoni risultati in termini di visualizzazione delle immagini e di ascolto, occorrono dispositivi e soprattutto connessioni veloci, giacché la quantità di informazioni che deve viaggiare per portare la nostra immagine e le nostre parole è notevole.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h6><i class="bi bi-scanner text-danger me-2"></i>Scanner</h6>
<p class="small mb-2">Permette di immettere nel computer i dati presenti su un supporto cartaceo: disegni, immagini, fotografie, pagine di testo vengono trasformati in documenti di tipo digitale e perciò compatibili con i dispositivi elettronici.</p>
<p class="small mb-2">Gli scanner più diffusi sono quelli <strong>piani</strong>, esteriormente simili a delle fotocopiatrici, ma molto meno ingombranti. Essi illuminano l'immagine da digitalizzare (che deve essere poggiata sul vetro dello scanner, proprio come in una fotocopiatrice) con una speciale lampada e registrano i colori riflessi durante la lettura.</p>
<p class="small mb-2">Diverse stampanti integrano anche uno scanner.</p>
<div class="mt-2">
<small><strong>Funzione su dispositivi mobili:</strong> In dispositivi portatili come smartphone e tablet è possibile utilizzare la fotocamera integrata con funzioni simili a quelle di uno scanner, in particolare per interpretare codici a barre e <strong>QR-Code</strong> (significa "Quick Response Code" ossia "Codice di risposta rapida").</small>
<p class="small mb-0 mt-2">I codici a barre sono noti per essere presenti su gran parte dei prodotti che acquistiamo. I QR-Code sono codici di forma generalmente quadrata che compaiono prevalentemente su prodotti a stampa (riviste, libri, locandine, ecc.) e che, se inquadrati con un dispositivo dotato di fotocamera e collegato a Internet, aprono automaticamente una pagina web, scaricano e avviano un video, ecc.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h6><i class="bi bi-mic text-secondary me-2"></i>Microfono</h6>
<p class="small mb-2">Permette di introdurre suoni nel dispositivo per poi eventualmente modificarli attraverso apposite applicazioni.</p>
<p class="small mb-2">Quando si è collegati a Internet, l'uso del microfono – in questo caso spesso integrato con le cuffie – permette di dialogare con altri utenti collegati alla Rete.</p>
<p class="small mb-0">Nei dispositivi mobili è solitamente integrato nell'apparecchio, mentre nei computer fissi è esterno e viene collegato all'apposita entrata della scheda audio.</p>
</div>
</div>
</div>
</div>
<!-- Periferiche di Output -->
<h4 class="mb-3"><i class="bi bi-arrow-up-circle me-2"></i>Periferiche di Output</h4>
<div class="row g-4 mb-5">
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-header bg-primary text-white">
<h5 class="mb-0"><i class="bi bi-printer me-2"></i>Stampanti</h5>
</div>
<div class="card-body">
<p class="mb-3">Permettono di stampare su carta testi e immagini. Esistono due categorie fondamentali: <strong>a impatto</strong> e <strong>a non impatto</strong>.</p>
<div class="mb-3">
<h6><i class="bi bi-circle-fill text-danger me-2"></i>Stampanti ad Aghi (a impatto)</h6>
<p class="small mb-2">Utilizzano una testina di scrittura costituita da un determinato numero di aghi (9, 24, 36) che percuotono un nastro inchiostrato posto tra la testina e la carta.</p>
<p class="small mb-2"><strong>Svantaggi:</strong> Piuttosto rumorose, rari i modelli a colori, qualità di stampa non tra le migliori (dipende dal numero di aghi).</p>
<p class="small mb-0"><strong>Vantaggi:</strong> Veloci, permettono di stampare su fogli di grande formato, a modulo continuo (fogli uniti da tratteggi con guide laterali perforate) e su carta copiativa (per ottenere più copie con una sola stampa). Ancora presenti in alcuni uffici, rarissime nelle case.</p>
</div>
<div class="mb-3">
<h6><i class="bi bi-circle-fill text-success me-2"></i>Stampanti a Getto d'Inchiostro (Inkjet)</h6>
<p class="small mb-2">Rappresentano per chi stampa mediamente qualche decina di pagine al mese la soluzione migliore nel rapporto qualità-prezzo. Spruzzano sul foglio dei microscopici getti d'inchiostro; più alto è il numero di questi getti, maggiore è la fedeltà dell'immagine.</p>
<p class="small mb-2">Ormai tutte a colori. Nei modelli più economici utilizzano due cartucce: una contenente tre colori base (ciano, magenta e giallo) per ottenere i diversi colori, un'altra specifica per il nero - si parla di <strong>stampa in quadricromia</strong> (quattro colori).</p>
<p class="small mb-2">Esistono modelli più costosi dotati di un maggior numero di colori e cartucce, che consentono migliore resa e risparmio nella gestione (quando si esaurisce un colore si sostituisce solo quella cartuccia).</p>
<div class="alert alert-warning py-2 px-3 mb-0">
<small><strong>⚠ Attenzione:</strong> Quando si acquista una stampante a getto d'inchiostro, occorre informarsi del costo e della durata delle sue cartucce, ancor più che del costo della stampante stessa!</small>
</div>
</div>
<div>
<h6><i class="bi bi-circle-fill text-primary me-2"></i>Stampanti Laser</h6>
<p class="small mb-2">Chiamate così perché utilizzano un raggio laser per memorizzare su un rullo magnetico ciò che deve essere stampato. Durante il movimento questo rullo passa su del toner (polvere nera o colorata) che viene trasferito sulla carta e fissato in modo permanente grazie al calore - i fogli appena stampati sono caldi.</p>
<p class="small mb-2"><strong>Vantaggi:</strong> Elevata qualità di stampa, velocità, costo per copia generalmente inferiore rispetto alle stampanti a getto d'inchiostro.</p>
<p class="small mb-0"><strong>Utilizzo:</strong> Utilizzate principalmente da chi stampa diverse centinaia di pagine al mese. Sono anche le preferite da chi le collega "in rete", di modo che un'unica stampante possa essere utilizzata da tutti i computer collegati a quella rete (ad es. in un ufficio o in un laboratorio scolastico).</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-header bg-success text-white">
<h5 class="mb-0"><i class="bi bi-display me-2"></i>Schermo / Monitor / Display</h5>
</div>
<div class="card-body">
<p class="mb-3">È la principale periferica di output di computer e dispositivi: integrato nei computer portatili, smartphone e tablet, mentre è quasi sempre esterno nei computer fissi.</p>
<div class="mb-3">
<h6><i class="bi bi-rulers me-2"></i>Dimensioni</h6>
<p class="small mb-0">Si misurano in <strong>pollici</strong>: ogni pollice equivale a 2,54 centimetri.
Esempi: un monitor di 19 pollici misura in diagonale poco più di 48 cm, lo schermo di 6 pollici di uno smartphone misura in diagonale poco più di 15 cm, lo schermo di un TV a 55 pollici ha una diagonale di circa 1 metro e 40 cm.</p>
</div>
<div class="mb-3">
<h6><i class="bi bi-grid-3x3 me-2"></i>Risoluzione e Pixel</h6>
<p class="small mb-2">Così come un mosaico è formato da centinaia o migliaia di pezzi, lo schermo è suddiviso in migliaia di punti, ognuno dei quali si chiama <strong>pixel</strong>. Il numero totale dei pixel visibili determina la <strong>risoluzione</strong> dello schermo.</p>
<p class="small mb-0">Ad esempio, uno schermo con risoluzione 1366x768 è in grado di visualizzare oltre un milione di pixel (il prodotto della moltiplicazione 1366x768). Più elevata è la risoluzione, più si rimpiccioliscono immagini e caratteri, ma la visione è più nitida ed è perciò possibile visualizzare un'area più vasta del documento al quale si sta lavorando.</p>
</div>
<div class="mb-3">
<h6><i class="bi bi-display me-2"></i>Tipi di Monitor</h6>
<p class="small mb-2"><strong>CRT (Cathode Ray Tube)</strong> - I monitor esterni tradizionali che utilizzavano il tubo catodico non sono più venduti, sostituiti dagli schermi a cristalli liquidi.</p>
<p class="small mb-2"><strong>LCD (Liquid Crystal Display)</strong> - Rappresentazione a cristalli liquidi. Hanno uno spessore di pochi centimetri, specie nelle versioni LED che risultano anche più luminose. Producono inoltre un minore affaticamento della vista rispetto ai monitor tradizionali, anche grazie all'assenza di radiazioni elettromagnetiche.</p>
<p class="small mb-0"><strong>Touchscreen</strong> - Nei tablet, smartphone e altri dispositivi portatili (compresi alcuni notebook), lo schermo è sensibile al tatto. In questo caso, esso è – allo stesso tempo – una periferica di input e di output, perché consente sia di inserire dati (digitando su una tastiera virtuale o poggiando il dito sulle diverse aree dello schermo) sia di visualizzare i risultati. Esistono anche monitor esterni touchscreen.</p>
</div>
<div class="alert alert-info mt-3 mb-0">
<small><strong>Nota:</strong> Gli schermi touchscreen sono sia periferiche di input che di output!</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h6><i class="bi bi-speaker text-warning me-2"></i>Altoparlanti / Casse Acustiche</h6>
<p class="small mb-2">Consentono di sentire i suoni prodotti dal computer o dal dispositivo e di ascoltare musica.</p>
<p class="small mb-2">Nei dispositivi mobili sono integrati nell'apparecchio, mentre nei computer fissi sono in genere esterni e vanno collegati all'uscita della scheda audio (in alcuni casi gli altoparlanti sono incorporati nel monitor).</p>
<p class="small mb-0">Le schede audio dei moderni computer consentono prestazioni sempre più elevate e il collegamento non solo di due casse acustiche, ma di veri e propri sistemi musicali a cinque o più casse, detti <strong>dolby digital</strong>.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h6><i class="bi bi-usb-symbol text-info me-2"></i>Docking Station</h6>
<p class="small mb-0">È una piattaforma alla quale si collega un dispositivo portatile come notebook, tablet o smartphone per renderne possibile, tramite un solo connettore, la ricarica e il collegamento a eventuali periferiche: altoparlanti esterni, tastiera, mouse, monitor, stampante, ecc.</p>
</div>
</div>
</div>
</div>
<!-- Porte di Input/Output -->
<h3 class="mb-4"><i class="bi bi-plug me-2"></i>Porte di Input/Output</h3>
<div class="alert alert-primary mb-4">
<h5><i class="bi bi-info-circle me-2"></i>Concetto</h5>
<p class="mb-0">Per collegare una periferica (monitor, stampante, webcam, ecc.) a un computer, si utilizzano dei cavi di comunicazione che vanno inseriti in apposite <strong>"porte"</strong> presenti sia sul dispositivo sia sulla periferica.</p>
</div>
<div class="row g-4 mb-5">
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-header bg-primary text-white">
<h5 class="mb-0"><i class="bi bi-usb-c me-2"></i>USB (Universal Serial Bus)</h5>
</div>
<div class="card-body">
<p class="small mb-2">La porta di comunicazione più diffusa, utilizzata per collegare pendrive, stampanti, mouse, tastiere, webcam, hard disk esterni, ecc.</p>
<p class="small mb-2"><strong>Vantaggi:</strong></p>
<ul class="small mb-2">
<li>Consente buone velocità di trasferimento dei dati</li>
<li>Permette il collegamento di dispositivi anche a computer acceso (mentre con altre porte questa procedura può provocare il blocco del computer)</li>
<li>Può anche alimentare elettricamente alcune periferiche come hard disk esterni, webcam, ecc.</li>
</ul>
<p class="small mb-0">Esistono diverse versioni con velocità crescenti: USB 2.0, USB 3.0/3.1, USB-C (connettore reversibile).</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-header bg-danger text-white">
<h5 class="mb-0"><i class="bi bi-hdmi me-2"></i>HDMI (High Definition Multimedia Interface)</h5>
</div>
<div class="card-body">
<p class="small mb-2">Ancora più veloce nella trasmissione di dati (oltre 10 GB/s), è utilizzata principalmente per il trasferimento di segnali audio e video digitali ad alta definizione.</p>
<p class="small mb-0">Sempre presente nei televisori moderni. Permette di collegare computer a monitor esterni, TV, proiettori con qualità Full HD, 4K, 8K.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-header bg-success text-white">
<h5 class="mb-0"><i class="bi bi-ethernet me-2"></i>Porta Ethernet / LAN</h5>
</div>
<div class="card-body">
<p class="small mb-2">Detta anche porta di rete o LAN, è costituita da un piccolo connettore rettangolare, leggermente più grande rispetto a un connettore telefonico di tipo americano.</p>
<p class="small mb-0">Viene utilizzata sia per collegarsi a Internet con una linea ad alta velocità sia per collegarsi a una rete locale formata da più computer.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-header bg-warning text-white">
<h5 class="mb-0"><i class="bi bi-lightning-charge me-2"></i>Porta FireWire</h5>
</div>
<div class="card-body">
<p class="small mb-0">Raggiunge velocità di trasmissione dei dati più elevate rispetto alle altre porte. È dunque indicata per acquisire velocemente audio e video digitali sui computer, ad esempio collegando al PC una videocamera digitale.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-header bg-secondary text-white">
<h5 class="mb-0"><i class="bi bi-diagram-3 me-2"></i>Porta Seriale</h5>
</div>
<div class="card-body">
<p class="small mb-2">Consente collegamenti a una velocità molto bassa e per questo motivo è sempre meno utilizzata. Ha una forma trapezoidale ed è generalmente dotata di 9 pin (in passato erano 25).</p>
<p class="small mb-0">Oggi viene utilizzata principalmente per collegare apparecchiature di rete o particolari periferiche nei sistemi industriali e nell'analisi scientifica.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-header bg-info text-white">
<h5 class="mb-0"><i class="bi bi-headphones me-2"></i>Jack Audio</h5>
</div>
<div class="card-body">
<p class="small mb-0">Porta per collegare cuffie, altoparlanti esterni o microfono. Generalmente da 3.5 mm. Nei computer fissi si collega alla scheda audio, mentre nei dispositivi mobili è integrato nell'apparecchio.</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-5">
<button class="btn btn-success btn-lg complete-section" data-section="2">
<i class="bi bi-check-circle me-2"></i>Ho completato questa sezione
</button>
</div>
</div>
</section>
<!-- ========================================== -->
<!-- MODULO 3: SOFTWARE E LICENZE -->
<!-- ========================================== -->
<section id="software" class="py-5">
<div class="container">
<div class="section-header text-center mb-5">
<span class="badge bg-warning mb-3">Modulo 3</span>
<h2 class="display-5 fw-bold">Software e Licenze</h2>
<p class="lead text-muted">Programmi, sistemi operativi e tipi di licenze</p>
</div>
<!-- Definizione Software -->
<div class="card border-0 shadow-lg mb-5">
<div class="card-header bg-warning text-dark">
<h4><i class="bi bi-info-circle me-2"></i>Cos'è il Software?</h4>
</div>
<div class="card-body">
<p class="lead mb-4">Così come gli esseri umani sono formati da corpo e mente, i computer e altri dispositivi elettronici sono costituiti da <strong>hardware</strong> e <strong>software</strong>.</p>
<div class="row mb-4">
<div class="col-md-6">
<div class="alert alert-light border-start border-primary border-4">
<h6 class="mb-3"><i class="bi bi-cpu me-2"></i>Hardware</h6>
<p class="mb-0 small">Indica le parti fisiche (elettriche, elettroniche e meccaniche) di un dispositivo elettronico e, a volte, anche altri apparecchi (detti periferiche) che vengono collegati a esso.</p>
</div>
</div>
<div class="col-md-6">
<div class="alert alert-light border-start border-success border-4">
<h6 class="mb-3"><i class="bi bi-code-square me-2"></i>Software</h6>
<p class="mb-0 small">Corrisponde a una serie di istruzioni che permette al dispositivo di svolgere determinate funzioni.</p>
</div>
</div>
</div>
<div class="mb-4">
<h6><i class="bi bi-lightbulb me-2"></i>Esempi di Software</h6>
<ul>
<li>Un <strong>software di elaborazione testi</strong> fa sì che un computer si comporti come una macchina da scrivere dotata di funzioni molto avanzate</li>
<li>Un <strong>gioco</strong> può simulare la guida di una automobile da corsa</li>
<li>Un <strong>software di navigazione</strong> permette di raggiungere una determinata destinazione</li>
</ul>
</div>
<div class="alert alert-warning mb-0">
<h6 class="mb-2"><i class="bi bi-exclamation-triangle me-2"></i>Relazione Hardware-Software</h6>
<p class="mb-2"><strong>Senza il software</strong> un dispositivo non può essere utilizzato per alcuno scopo: sarebbe come un lettore DVD senza DVD.</p>
<p class="mb-0"><strong>Senza l'hardware</strong> il software non sarebbe che una serie di istruzioni senza nulla che le possa eseguire: come un ingegnere che volesse realizzare un suo progetto di ponte su un fiume senza disporre né degli operai né dei materiali necessari.</p>
</div>
</div>
</div>
<!-- Tipi di Software -->
<h3 class="mb-4"><i class="bi bi-app-indicator me-2"></i>Tipi di Software</h3>
<div class="row g-4 mb-5">
<div class="col-md-6">
<div class="card border-0 shadow h-100">
<div class="card-header bg-primary text-white">
<h5 class="mb-0"><i class="bi bi-gear me-2"></i>Software di Sistema</h5>
</div>
<div class="card-body">
<p>I <strong>sistemi operativi</strong> sono il software che controlla il funzionamento dell'hardware del computer o del dispositivo elettronico.</p>
<p><strong>Funzioni principali:</strong></p>
<ul>
<li>Gestisce le risorse del computer (processore, memorie, lettori)</li>
<li>Costituisce l'interfaccia tra utente e hardware</li>
<li>Contiene programmi di utilità fondamentali</li>
<li>Permette il funzionamento delle applicazioni</li>
</ul>
<div class="alert alert-info mt-3 mb-0">
<small><strong>Analogia:</strong> Il sistema operativo è come un direttore d'orchestra che coordina i musicisti!</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow h-100">
<div class="card-header bg-success text-white">