From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- .../css_basics/index.html | 267 -------------- .../dealing_with_files/index.html | 96 ----- .../how_the_web_works/index.html | 100 ----- .../html_basics/index.html | 217 ----------- .../learn/getting_started_with_the_web/index.html | 59 --- .../installing_basic_software/index.html | 54 --- .../javascript_basics/index.html | 402 --------------------- .../publishing_your_website/index.html | 129 ------- .../what_will_your_website_look_like/index.html | 118 ------ 9 files changed, 1442 deletions(-) delete mode 100644 files/it/learn/getting_started_with_the_web/css_basics/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/dealing_with_files/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/how_the_web_works/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/html_basics/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/installing_basic_software/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/javascript_basics/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/publishing_your_website/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html (limited to 'files/it/learn/getting_started_with_the_web') diff --git a/files/it/learn/getting_started_with_the_web/css_basics/index.html b/files/it/learn/getting_started_with_the_web/css_basics/index.html deleted file mode 100644 index b229d8f888..0000000000 --- a/files/it/learn/getting_started_with_the_web/css_basics/index.html +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: Basi di CSS -slug: Learn/Getting_started_with_the_web/CSS_basics -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
- -
-

CSS (Cascading Style Sheets) è il codice usato per modellare lo stile delle pagine web. In questo capitolo, CSS Basics, viene spiegato di cosa si ha bisogno per iniziare. Risponderemo a domande come: come faccio a rendere il testo nero o rosso? Come faccio a far visualizzare il contenuto in un certo posto sullo schermo? Come faccio a decorare la pagina web con immagini di sfondo e colori?

-
- -

Quindi, cosa sono i CSS in concreto?

- -

Come l'HTML, anche il CSS non è un vero e proprio linguaggio di programmazione. Si tratta di un "linguaggio di stile", che consente cioé di applicare, selettivamente, uno stile agli elementi dei documenti HTML. Per esempio, per selezionare tutti gli elementi paragrafo di una pagina HTML e rendere rosso il testo che contengono, devi scrivere questo CSS:

- -
p {
-  color: red;
-}
- -

Facciamo una prova: incolliamo le tre righe di CSS nell'editor di testo, in un nuovo file e salviamolo come stile.css nella sottocartella styles.

- -

Abbiamo ancora bisogno di collegare il CSS al documento HTML, altrimenti non influenzerà il modo in cui il browser visualizza il documento HTML. (Se non avete seguito il nostro progetto, leggete Dealing with files (Gestire i files) e HTML basics (Nozioni di base di HTML) per scoprire cosa è stato fatto fin qui.

- -
    -
  1. Apriamo il file index.html e incolliamo la seguente riga nella sezione <head>, cioè tra i tag <head> e </head>. - 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    -
    2. -
  2. Salviamo index.html e apriamolo nel browser. Si dovrebbe vedere qualcosa di simile a questo:
    3. -
- -

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Se il testo dei paragrafi ora è rosso, congratulazioni! Hai appena scritto il tuo primo CSS funzionante.

- -

Anatomia di un set di regole CSS

- -

Diamo un'occhiata più approfondita al CSS precedente.

- -

- -

Tutta la struttura è chiamata "insieme di regole" (rule set), ma spesso anche solo "regola", per brevità. Nota anche i nomi delle singole parti:

- -
-
Selettore
-
Il nome dell'elemento HTML all'inizio del set di regole. Seleziona l'elemento o gli elementi a cui applicare la regola (in questo caso, gli elementi p). Per applicare la regola di stile ad un elemento diverso basta cambiare il selettore.
-
Dichiarazione
-
Una sola regola/dichiarazione (color: red;) che definisce una delle proprietà dell'elemento.
-
Proprietà
-
Le proprietà di un dato elemento HTML che è possibile modificare; in questo caso il colore. Il colore è una delle proprietà degli elementi p. Nelle regole dei CSS si sceglie quali proprietà si desidera modificare.
-
Valore della proprietà
-
A destra della proprietà, separato dai due punti, si definisce il valore di quella proprietà, scegliendone uno tra i molti possibili (ci sono molti altri colori oltre al rosso).
-
- -

Notate le altre parti importanti della sintassi:

- - - -

Quindi, per modificare i valori di molte proprietà in una sola volta, è sufficiente scriverle separate da un punto e virgola; in questo modo:

- -
p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}
- -

Selezionare più elementi

- -

È anche possibile selezionare più tipi di elementi e applicare a tutti un unico insieme di regole. Bisogna specificare più selettori separandoli con virgole. Per esempio:

- -
p,li,h1 {
-  color: red;
-}
- -

Differenti tipi di selettori

- -

Ci sono molti diversi selettori. Fin qui, abbiamo guardato solo ai selettori elemento, che selezionano tutti gli elementi di un tipo; ma siamo in grado di effettuare selezioni più specifiche. Ecco alcuni dei più comuni tipi di selettore:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nome del selettoreCosa selezionaEsempio
Element selector (a volte chiamato tag o type selector)Tutti gli elementi HTML del tipo specificatop
- seleziona gli elementi <p>
ID selectorL'elemento della pagina con l'ID specificato (in una specifica pagina HTML è consentito un solo elemento con un certo ID).#my-id
- Seleziona <p id="my-id"> or <a id="my-id">
Class selectorGli elementi della pagina della classe specificata (in una pagina la classe può essere richiamata più volte)..my-class
- Selects <p class="my-class"> and <a class="my-class">
Attribute selectorGli elementi della pagina con l'attributo specificatoimg[src]
- Seleziona <img src="myimage.png"> ma non <img>
Pseudo class selectorGli elementi specificati, ma solo quando sono nello stato specificato, ad esempio quando c'è su il mouse.a:hover
- Seleziona <a>, ma solo quando il puntatore del mouse si trova sopra il link.
- -

Ci sono molti altri selettori da conoscere e se ne può trovare un elenco più dettagliato nella nostra Selectors guide (guida ai selettori).

- -

Caratteri e testo

- -

Ora che abbiamo esplorato alcune nozioni di base dei CSS, possiamo aggiungere alcune regole e informazioni in più al nostro file stile.css per dare al nostro esempio un aspetto gradevole. Per cominciare, cerchiamo di migliorare l'aspetto dei caratteri e del testo.

- -
    -
  1. Prima di tutto, andiamo a riprendere i Google Font che abbiamo memorizzato in un posto sicuro. Aggiungiamo il tag <link ...> da qualche parte nella <head> del documento index.html (ancora una volta, in qualsiasi punto tra i tag <head> e </head>. Sarà qualcosa di simile a questo: - - 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    -
    2. -
  2. Successivamente, eliminiamo la regola creata prima: è stato un buon esercizio, ma il testo rosso in realtà non è una bellezza.
    3. -
  3. Al suo posto mettiamo le righe seguenti, sostituendo la linea segnaposto con la vera "font-family" ottenuta da Google Font. (Font-family significa semplicemente "famiglia di caratteri" che si desidera utilizzare). Questa regola imposta un font di base e la dimensione del carattere per l'intera pagina (poiché <html> è l'elemento padre di tutta la pagina, essendo tutti gli altri elementi al suo interno, erediteranno tutti gli stessi font-size e font-family): - 
    html {
-  font-size: 10px; /* px significa 'pixels': la dimensione base del carattere è ora alta 10 pixels  */
-  font-family: segnaposto - questo dovrebbe essere il resto dell'output ottenuto da Google Fonts
-}
    - -
    -

    Nota: per spiegare cosa significa "px" è stato aggiunto un "commento". Tutto ciò che, in un documento CSS, sta tra i simboli /* e */ è un commento CSS che il browser ignora quando esegue il rendering del codice. In questo modo si possono scrivere utili annotazioni su cosa si sta facendo con quelle regole.

    -
    -
    4. -
  4. Ora impostiamo le dimensioni dei caratteri per gli elementi di testo contenuti all'interno del "corpo" del documento HTML  ({{htmlelement("h1")}}, {{htmlelement("li")}}, e {{htmlelement("p")}}). Inoltre, centriamo il testo dell'intestazione e regoliamo l'altezza delle linee e la spaziatura dei caratteri per rendere il contenuto un po' più leggibile: - 
    h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
    -
    5. -
- -

È possibile regolare questi valori a piacimento per far apparire il progetto come si vuole, ma dovrebbe essere qualcosa del genere:

- -

Immagine della pagina creata, un logo Mozilla e alcuni paragrafi. Impostato un tipo di carattere sans-serif, la dimensione dei caratteri, l'altezza delle linee, la spaziatura tra le lettere e l'intestazione della pagina è stata centrata.

- -

Box, box, tutta una questione di box

- -

Una cosa che noterete riguardo ai CSS è che sono in gran parte assimilabili a contenitori (boxes): se ne modificano le dimensioni, il colore, la posizione, ecc. La maggior parte degli elementi HTML della pagina può essere pensato come un contenitore impilato su un altro.

- -

Immagine di una grande pila di casse impilate una sopra l'altra

- -

Non a caso, la struttura dei CSS si basa principalmente sul "box model". Ciascuno dei blocchi (o contenitori), occupando spazio sulla pagina, ha proprietà come queste:

- - - -

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

- -

In questa sezione usiamo anche:

- - - -

Adesso, aggiungiamo un po' di regole al documento CSS! Mettiamole in fondo alla pagina e sperimentiamo senza paura modificando i valori per vedere cosa si ottiene.

- -

Cambiare il colore della pagina

- -
html {
-  background-color: #00539F;
-}
- -

Questa regola imposta il colore di sfondo per l'intera pagina. Modificate il codice relativo al colore con quello che avete scelto pianificando il sito. (planning your site).

- -

Formattazione del <body>

- -
body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
- -

Qui ci sono diverse dichiarazioni; vediamole una per una:

- - - -

Posizionare e formattare il titolo principale della pagina

- -
h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
- -

Potresti aver notato che c'è un orribile spazio in cima all'elemento body. Questo accade perché i browsers applicano alcune formattazioni di default all'elemento {{htmlelement("h1")}} (tra gli altri) anche quando non viene definita alcuna regola nel CSS. Ciò potrebbe sembrare una cattiva idea, ma si vuole che anche un documento non formattato abbia una minima leggibilità. Per eliminare quello spazio abbiamo scavalcato il comportamento del browser impostando  margin: 0;.

- -

Poi abbiamo impostato il padding dei lati top e bottom del titolo a 20 pixels e assegnato al testo lo stesso colore dello sfondo dell'elemento <html>.

- -

Una proprietà piuttosto interessante che abbiamo usato é text-shadow, che applica un'ombra al testo contenuto nell'elemento. I suoi 4 valori sono i seguenti:

- - - -

Ancora, proviamo a sperimentare diversi valori per capire quali effetti possiamo ottenere.

- -

Centrare l'immagine

- -
img {
-  display: block;
-  margin: 0 auto;
-}
- -

Infine, centriamo l'immagine per avere un miglior effetto. Possiamo usare il trucco dei margini (margin: 0 auto) come abbiamo già fatto per il body, ma abbiamo anche bisogno di qualcos'altro: l'elemento body è block level, ciò significa che prende spazio nella pagina e gli possono essere applicati parametri come i margini e il padding. Le immagini, al contrario, sono elementi inline, il che significa che non gli si potrebbe attribuire quei parametri; quindi per applicare all'immagine i margini dobbiamo stabilire che si comporti come i blocchi, usando la regola "display: block;".

- -
-

Nota: non preoccuparti se per ora non capisci la regola display: block; e la distinzione tra elementi del block level e inline level. La imparerai studiando più in dettaglio i CSS. Puoi scoprire di più sui possibili valori display nella nostra pagina di riferimento (display reference page).

-
- -

Conclusioni

- -

Se hai seguito tutte le istruzioni in questo articolo dovresti aver ottenuto qualcosa che assomiglia a questo (puoi confrontare la nostra versione qui):

- -

Il logo mozilla, centrato, titolo e paragrafi. Adesso ha un bello stile con uno sfondo blu per l'intera pagina e arancione per la fascia principale.

- -

Se sei bloccato puoi sempre confrontare il tuo lavoro con il nostro su GitHUb (finished example code on Github).

- -

Qui abbiamo solo scalfito la superfice dei CSS. Per scoprire di più vai a vedere CSS Learning topic.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html deleted file mode 100644 index 5d4f6f624b..0000000000 --- a/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Gestire i file -slug: Learn/Getting_started_with_the_web/Dealing_with_files -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files -original_slug: Learn/Getting_started_with_the_web/Gestire_i_file ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

Un sito web è composto da molti file: contenuti testuali, codice, fogli di stile, contenuti multimediali e molto altro. Quando crei un sito web, devi assemblare questi files nel tuo computer in maniera strutturata,  facendo si che essi possano dialogare tra di loro e facendo in modo che tutto il contenuto appaia correttamente, prima di (eventualmente) caricarli su un server. Questa pagina esamina alcune problematiche che dovresti conoscere, così da saper impostare una struttura  corretta dei files necessari al tuo sito web.

-
- -

Dove andrebbe collocato il tuo sito web all'interno del tuo computer?

- -

Quando stai lavorando a un sito web localmente sul tuo computer, dovresti tenere tutti i file in una singola cartella che rispecchi la struttura di file all'interno del tuo server. Questa cartella può essere creata ovunque tu voglia, ma dovresti posizionarla in una directory dove tu possa facilmente trovarla, magari sul tuo Desktop, nella tua cartella di Home, o nella root del tuo hard drive.

- -
    -
  1. Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata progetti-web (o qualcosa di simile). Ecco dove vivrà il tuo intero sito web.
    2. -
  2. Dentro questa prima cartella, crea un'altra cartella per archiviare al suo interno il tuo primo sito web. Chiamala sito-test (o qualcosa di più fantasioso).
    3. -
- -

Un chiarimento riguardo gli spazi e la distinzione tra maiuscole e minuscole

- -

Forse hai notato che, nel corso di questo articolo, i nomi delle cartelle e dei file sono sempre in minuscolo e senza spazi. Questo perchè:

- -
    -
  1. Tanti computer, particolarmente i server web, fanno una distinzione tra lettere maiuscole e minuscole. Ad esempio: se crei un'immagine nella cartella test-site e le assegni il nome MyImage.jpg, ma successivamente provi ad aprirla usando myimage.jpg, potrebbe non funzionare.
    2. -
  2. Browsers, server web e linguaggi di programmazione non gestiscono gli spazi tutti allo stesso modo. Per esempio, se usi gli spazi nella denominazione di un file, alcuni sistemi li tratteranno come se fossero più nomi. Alcuni server sostituiscono lo spazio con "%20" (il codice carattere che viene usato al posto degli  spazi nei URL), rendendo impossibile aprire  tutti i tuoi link. È  meglio quindi separare con dei trattini o con delle sottolineature, ad esempio: my-file.html o my_file.html.
    3. -
- -

In ogni caso dovresti usare il trattino per separare le parole. Google considera i trattini come separatori delle parole, ma non tratta le sottilineature allo stesso modo. Per queste ragioni è buona abitudine scrivere il nome dei file e delle cartelle in minuscolo senza spazi e separando le parole con trattini, almeno fino a quando sai cosa stai facendo. In questo modo non cadrai in errori comuni nel futuro.

- -

Quale struttura dovrebbe avere il tuo sito?

- -

La struttura più utilizzata in qualsiasi progetto è un file HTML, che funge da homepage, e delle cartelle per contenere immagini, fogli di stile e file di script. Vediamola insieme:

- -
    -
  1. index.html: Questo file racchiude generalmente il contenuto della tua homepage, cioè il testo e le immagini che le persone vedono quando accedono per la prima volta al tuo sito. Usando il tuo text editor, crea un nuovo file chiamato index.html e salvalo nella cartella test-site.
    2. -
  2. cartella images: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una sottocartella chiamata images, nella cartella test-site.
    3. -
  3. cartella styles: Questa cartella racchiude il codice CSS usato per creare il contenuto  grafico  (per esempio, quale font usare, quali colori usare come sfondo). Crea una sottocartella chiamata  styles, nella cartella test-site.
    4. -
  4. cartella scripts: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. tasti che caricano dei dati quando vengono cliccati ). Crea una sottocartella chiamata scripts, nella cartella test-site.
    5. -
- -
-

Nota: Su Windows, potresti avere problemi a vedere l'estensione dei file, perchè Windows ha un opzione chiamata Nascondi estensioni per tipi di file conosciuti attivata per default. Normalmente puoi disattivarla in Windows Explorer, selezionando Opzioni cartella... , deselezionare Nascondi estensioni per tipi di file conosciuti, poi cliccando OK. Per avere più informazioni sulla tua versione di Windows, fai una ricerca su internet!

-
- -

Percorsi dei file

- -

Per permettere ad un file di trovarne un altro, dovremo indicare un percorso tra di loro - in pratica creare un itinerario, così che un file possa sapere dov'è l'altro. Per dimostrare ciò, inseriremo un po' di codice HTML nel nostro file index.html, rendendo così possibile mostrare l'immagine scelta nell'articolo "Come dovrebbe apparire il tuo sito web?"

- -
    -
  1. Copia l'immagine scelta in precedenza nella cartella images.
    2. -
  2. Apri il file index.html, e inserisci il codice che segue, così come lo vedi scritto. Non preoccuparti  del suo significato per ora - approfondiremo i dettagli più avanti. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>La mia pagina di prova</title>
-  </head>
-  <body>
-    <img src="" alt="La mia immagine di prova">
-  </body>
-</html>
    -
    3. -
  3. La riga <img src="" alt="My test image"> è il codice HTML che si occupa di mostrare l'immagine nella pagina. Dobbiamo indicare nell'HTML dove trovare l'immagine: essa si trova all'interno della directory images, che a sua volta è nella directory comune a index.html. Scorrendo lo schema strutturale da index.html alla nostra immagine, il percorso che dovremmo avere è: images/your-image-filename. Se ad esempio, la mia immagine si chiama firefox-icon.png, allora il percorso corretto sarà images/firefox-icon.png.
    4. -
  4. Scrivi l'indirizzo del file nel codice HTML, tra le virgolette di src="".
    5. -
  5. Salva il tuo file HTML, ed aprilo con il browser web (puoi farlo velocemente con un doppio click). Dovresti vedere l'immagine nella tua pagina web appena creata.
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Alcune regole generali per i percorsi dei file:

- - - -

For now, this is about all you need to know.

- -
-

Nota: Il file system di Windows, usa i backslash, non i forward slash, esempio: C:\windows. Questo nel codice HTML non conta — anche se stai sviluppando il tuo sito web su Windows, è obbligatorio usare i forward slash nel codice.

-
- -

Cos'altro dovrei fare?

- -

Per ora è tutto. L'albero della tua cartella / directory, dovrebbe essere simile a questo:

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html deleted file mode 100644 index 32c4cc1810..0000000000 --- a/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Come funziona il Web -slug: Learn/Getting_started_with_the_web/How_the_Web_works -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works -original_slug: Learn/Getting_started_with_the_web/Come_funziona_il_Web ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

Come funziona il Web spiega in modo semplice quello che accade quando visualizzi una pagina web sul browser del tuo computer o telefono.

-
- -

Questa parte teorica non è essenziale sin da subito per scrivere il codice web, ma a breve ti avvantaggerà capire cosa c'è sullo sfondo.

- -

Client e server

- -

I computer connessi sul web sono chiamati client e server. Il seguente schema semplificato mostra come possono interagire tra loro:

- -

I due cerchi rappresentano client e server. Due frecce indicano rispettivamente una richiesta dal client al server e una risposta dal server al client

- - - -

Le restanti componenti del Web

- -

La descrizione appena fatta di client e server non racconta l'intera storia. Ci sono altri numerosi elementi coinvolti che descriveremo di seguito.

- -

Immaginiamo per adesso che la rete sia una strada. A un estremo della strada si trova il client, che è come la tua abitazione. All'altro estremo della strada c'è il server, che è come un negozio dal quale vuoi acquistare qualcosa.

- -

- -

Oltre al client e al server dobbiamo anche considerare:

- - - -

Ma allora: cosa accade esattamente?

- -

Quando digiti un indirizzo web all'interno del tuo browser (seguendo la nostra analogia, è come raggiungere il negozio camminando):

- -
    -
  1. Il browser contatta il server DNS e cerca il reale indirizzo del server su cui è ospitato il sito web (equivale a trovare l'indirizzo del negozio).
    2. -
  2. Il browser invia un messaggio di richiesta HTTP al server, chiedendogli di inviare una copia del sito web al client (equivale ad andare nel negozio e ordinare le merci). Questo messaggio e tutti gli altri dati inviati tra client e server sono inviati attraverso la tua connessione Internet, usando il protocollo TCP/IP.
    3. -
  3. Se il server approva la richiesta del client, gli invia un messaggio con scritto "200 OK", che significa "Ma certo che puoi guardare quel sito web! Eccolo" e inizia quindi ad inviare i file del sito web al browser in una serie di piccoli pezzi chiamati pacchetti di dati (seguendo l'analogia, al negozio ricevi i tuoi acquisti e li porti a casa).
    4. -
  4. Il browser assembla i piccoli pezzi in una pagina web completa e te la mostra (nell'analogia, l'ordine arriva alla porta di casa — sfavillante roba nuova, fantastico!).
    5. -
- -

Chiarimenti sul DNS

- -

I veri indirizzi web non sono quelle stringhe semplici e facili da ricordare che inserisci all'interno della tua barra degli indirizzi per cercare i tuoi siti web preferiti. Sono piuttosto numeri speciali dall'aspetto simile a questo: 63.245.215.20.

- -

Si chiama {{Glossary("IP Address", "IP address")}} e rappresenta una posizione unica nel Web. Ad ogni modo, non è molto facile da ricordare, non è vero? Ecco perché sono stati inventati i Domain Name Server. Si tratta di server speciali che abbinano l'indirizzo web che digiti all'interno del tuo browser (come "mozilla.org") all'indirizzo (IP) reale del sito internet.

- -

I siti web possono essere raggiunti direttamente attraverso il loro indirizzo IP. Puoi trovare l'indirizzo IP di un sito web digitando il suo dominio in uno strumento tipo IP Checker.

- -

Chiarimenti sui pacchetti

- -

Prima abbiamo usato il termine "pacchetti" per descrivere il formato in cui i dati sono inviati dal server al client. Che cosa significa? In pratica, quando i dati vengono inviati in tutto il Web, essi sono inviati sotto forma di migliaia di piccoli pezzi in modo tale che differenti utenti possano scaricare lo stesso sito web contemporaneamente. Se i siti web fossero inviati sotto forma di grandi pacchetti singoli, solamente un utente alla volta potrebbe scaricare il che, ovviamente, renderebbe il Web davvero inefficiente e poco divertente da usare.

- -

Vedi anche

- - - -

Credit

- -

Street photo: Street composing, by Kevin D.

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -

In questo modulo

- - diff --git a/files/it/learn/getting_started_with_the_web/html_basics/index.html b/files/it/learn/getting_started_with_the_web/html_basics/index.html deleted file mode 100644 index 8ab4970c7c..0000000000 --- a/files/it/learn/getting_started_with_the_web/html_basics/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Basi di HTML -slug: Learn/Getting_started_with_the_web/HTML_basics -tags: - - Corso - - Principianti -translation_of: Learn/Getting_started_with_the_web/HTML_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
- -
-

HTML (Hypertext Markup Language) è il codice usato per strutturare e visualizzare una pagina web e il suo contenuto. Per esempio, il contenuto potrebbe essere strutturato in una serie di paragrafi, un elenco oppure con immagini e tabelle di dati. Come suggerisce il titolo, questo articolo ti fornirà una comprensione di base dell'HTML e delle sue funzioni.

-
- -

Ma cos'è veramente l'HTML?

- -

HTML non è un linguaggio di programmazione; è un linguaggio basato sui markup, ed è utilizzato per indicare al browser come visualizzare le pagine web che vengono visitate. Può essere complicato o semplice a seconda di come i web designer ne utilizzano le funzionalità. HTML consiste in una serie di {{Glossary("element", "elementi")}}, che vengono usati per raggruppare o impacchettare parti differenti del contenuto, per farlo apparire o agire in uno specifico modo. L'uso dei {{Glossary("tag", "tags")}} può fare di una parola o di un'immagine un hyperlink, ossia un collegamento a qualcos'altro, oppure può rendere il testo in corsivo, il font più grande o più piccolo, eccetera. Per esempio, prendiamo la seguente linea del contenuto:

- -
My cat is very grumpy
- -

Se vogliamo che la linea venga visualizzata isolatamente, possiamo specificare che è un paragrafo, includendola all'interno di tags che identificano il paragrafo:

- -
<p>My cat is very grumpy</p>
- -

Anatomia di un elemento HTML

- -

Analizziamo in maniera più approfondita l'elemento che identifica il paragrafo.

- -


-

- -

Le parti principali dell'elemento sono:

- -
    -
  1. Il tag di apertura: è il nome dell'elemento (in questo caso, p), incluso tra il segno di minore e il segno di maggiore. Questo indica dove l'elemento inizia, o dove inizia ad avere effetto — in questo caso indica l'inizio del paragrafo.
    2. -
  2. Il tag di chiusura: ha lo stesso formato del tag di apertura ad eccezione della barra che deve precedere il nome dell'elemento. Indica dove termina l'elemento — in questo caso, la fine del paragrafo. Dimenticare di includere il tag di chiusura è uno degli errori più comuni tra i principianti e può portare a risultati imprevisti.
    3. -
  3. Il contenuto: Questo rappresenta il contenuto dell'elemento, che nel nostro caso è solo testo.
    4. -
  4. L'elemento: Il tag di apertura insieme al tag di chiusura ed al contenuto rappresentano l'elemento.
    5. -
- -

Gli elementi possono anche avere attributi, come nell'esempio che segue:

- -

- -

Gli attributi contengono informazioni extra sull'elemento che non si desidera appaiano nel contenuto visualizzato. Nell'esempio, class è il nome dell'attributo, e editor-note è il valore dell'attributo. L'attributo class permette di associare un identificatore all'elemento che potrà essere usato in seguito per applicare all'elemento informazioni di stile e altre cose.

- -

Un attributo dovrebbe sempre avere:

- -
    -
  1. Uno spazio che lo separa dal nome dell'elemento (o dal precedente attributo, se l'elemento ha già uno o più attributi)
    2. -
  2. Il nome dell'attributo, seguito dal segno di uguale
    3. -
  3. Il valore dell'attributo incluso tra doppi apici.        
    4. -
- -

Elementi annidati

- -

E' possibile anche inserire elementi all'interno di altri elementi — questa modalità è chiamata nesting (annidamento). Se volessimo affermare che "The cat is very grumpy", potremmo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, che indica che la parola deve essere fortemente enfatizzata:

- -
<p>My cat is <strong>very</strong> grumpy.</p>
- -

Bisogna tuttavia assicurarsi che gli elementi siano opportunamente annidati: nell'esempio sopra abbiamo aperto il primo elemento {{htmlelement("p")}}, poi l'elemento {{htmlelement("strong")}}, perciò dobbiamo chiudere l'elemento {{htmlelement("strong")}} per primo, poi l'elemento {{htmlelement("p")}}. L'esempio che segue non è corretto:

- -
<p>My cat is <strong>very grumpy.</p></strong>
- -

Gli elementi devono essere aperti e chiusi correttamente in modo che sia chiaro come essi si trovino l'uno all'interno dell'altro. Se si sovrappongono come nell'esempio sopra, il browser web cercherà di interpretare al meglio quello che si sta cercando di dire, ma si potrebbero ottenere risultati inattesi. Quindi non va fatto!

- -

Elementi vuoti

- -

Alcuni elementi non hanno contenuto, e sono chiamati elementi vuoti. Prendiamo l'elemento {{htmlelement("img")}} che abbiamo nel nostro HTML:

- -
<img src="images/firefox-icon.png" alt="My test image">
- -

Contiene due attributi, ma non c'è il tag di chiusura </img> e non c'è un testo incluso. Questo perchè un elemento immagine non deve avere effetti su un testo. Il suo scopo è quello di aggiungere un'immagine alla pagina HTML nel punto in cui si trova.

- -

Anatomia di un documento HTML

- -

Include la struttura base dei singoli elementi HTML, che non sono tuttavia molto utili da soli. Ora vedremo come singoli elementi sono combinati per formare un'intera pagina HTML. Riguardiamo il codice che abbiamo inserito nel nostro esempio index.html (che abbiamo incontrato per la prima volta nell'articolo Dealing with files):

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <img src="images/firefox-icon.png" alt="My test image">
-  </body>
-</html>
- -

Abbiamo:

- - - -

Immagini

- -

Rivolgiamo ancora la nostra attenzione all'elemento {{htmlelement("img")}}:

- -
<img src="images/firefox-icon.png" alt="My test image">
- -

Come abbiamo detto prima, quest'elemento aggiunge un'immagine nella pagina, nella posizione in cui si trova. E' l'attributo src (source) che fa questo, contenendo il percorso del file immagine.

- -

Abbiamo anche incluso l'attributo alt (alternative). In questo attributo viene specificato il testo descrittivo per quegli utenti che non possono visualizzare l'immagine, probabilmente per i seguenti motivi:

- -
    -
  1. Sono ipovedenti. Gli utenti con disabilità visive significative spesso usano strumenti chiamati screen reader che leggono per loro il testo dell'elemento alt
    2. -
  2. Qualcosa è andato storto causando la mancata visualizzazione dell'immagine. Per esempio, se si prova a modificare deliberatamente il percorso all'interno dell'attributo src per renderlo errato. Salvando e ricaricando la pagina, si dovrebbe vedere qualcosa di simile a ciò che segue, al posto dell'immagine:
    3. -
- -

- -

Le parole chiave per il testo nell'alt sono "testo descrittivo". Il testo che viene scrito nell'alt dovrebbe fornire al lettore informazioni sufficienti per avere una buona idea di ciò che l'immagine rappresenta. In questo esempio, il testo attuale "My test image" non è per niente adatto. Un'alternativa decisamente migliore per il logo di Firefox potrebbe essere "Il logo di Firefox: una volpe fiammeggiante che circonda la Terra."

- -

Prova subito a trovare un testo adatto per l'alt delle tua immagine.

- -
-

Nota: Scopri di più sull'accessibilità al link MDN's Accessibility landing page.

-
- -

Marcatura del testo

- -

Questa sezione riguarda alcuni elementi HTML di base che vengono usati per la marcatura del testo.

- -

Intestazioni

- -

Gli elementi Intestazioni permettono di specificare che alcune parti del contenuto sono titoli — o sottotitoli. Allo stesso modo in cui un libro ha un titolo principale, titoli di capitoli e sottotitoli, così anche un documento HTML. HTML contiene sei livelli di intestazione, {{htmlelement("h1")}}–{{htmlelement("h6")}} sebbene in genere se ne usino da 3 a 4 al massimo:

- -
<h1>My main title</h1>
-<h2>My top level heading</h2>
-<h3>My subheading</h3>
-<h4>My sub-subheading</h4>
- -

Ora prova ad aggiungere un titolo adatto alla tua pagina HTML appena sopra l'elemento {{htmlelement("img")}}.

- -

Paragrafi

- -

Come spiegato sopra, gli elementi {{htmlelement("p")}} sono usati per contenere paragrafi di testo; verranno usati di frequente per contrassegnare contenuti di testo regolari:

- -
<p>This is a single paragraph</p>
- -

Aggiungi il tuo testo di esempio (dovresti averlo dall'articolo What should your website look like?) in uno o più paragrafi, direttamente sotto l'elemento {{htmlelement("img")}}.

- -

Liste

- -

Molti contenuti web sono elenchi, e l'HTML ha elementi speciali per gestirli. La marcatura di liste consiste sempre in almeno due elementi. I tipi più comuni di lista sono le liste ordinate e le liste non ordinate:

- -
    -
  1. -

    Le liste non ordinate sono liste in cui l'ordine degli articoli non ha importanza, come in una lista della spesa. Queste sono racchiuse in un elemento {{htmlelement("ul")}}.

    -
    2. -
  2. Le liste ordinate sono liste dove l'ordine degli articoli ha importanza, come in una ricetta. Queste sono racchiuse in un elemento {{htmlelement("ol")}}.
    3. -
- -

Ogni articolo all'interno delle liste è inserito all'interno di un elemento {{htmlelement("li")}} (list item).

- -

Per esempio, se volessimo convertire una parte del seguente paragrafo in una lista:

- -
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
- -

Potremmo modificare la marcatura così:

- -
<p>At Mozilla, we’re a global community of</p>
-
-<ul>
-  <li>technologists</li>
-  <li>thinkers</li>
-  <li>builders</li>
-</ul>
-
-<p>working together ... </p>
- -

Prova ad aggiungere una lista ordinata e una non ordinata alla tua pagina di esempio.

- -

I collegamenti

- -

I link sono molto importanti — sono quelli che rendono il web una rete! Per aggiungere un collegamento, si deve usare un semplice elemento — {{htmlelement("a")}} — la "a" è l'abbreviazione di "anchor". Per convertire il testo del paragrafo in un link, seguire i seguenti passaggi:

- -
    -
  1. Scegliere il testo. Noi abbiamo scelto "Mozilla Manifesto".
    2. -
  2. Includere il testo in un elemento {{htmlelement("a")}}, come segue: - 
    <a>Mozilla Manifesto</a>
    -
    3. -
  3. Dare all'elemento {{htmlelement("a")}} un attributo href, come segue: - 
    <a href="">Mozilla Manifesto</a>
    -
    4. -
  4. Compilare il valore di quest'attributo con l'indirizzo web a cui si desidera che il collegamento si colleghi: - 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    -
    5. -
- -

Si potrebbero ottenere risultati imprevisti se si omettono https:// o http://, che sono chiamati protocollo, all'inizio dell'indirizzo web. Dopo aver impostato un link, fare click su di esso per assicurarsi che si colleghi dove desiderato.

- -
-

href potrebbe apparire in un primo momento come una scelta piuttosto oscura per un nome di attributo. Se hai difficoltà a memorizzarlo, ricorda che sta per hypertext reference.

-
- -

Ora puoi aggiungere un link alla tua pagina, se ancora non l'hai fatto.

- -

Conclusione

- -

Se hai seguito tutte le istruzioni di questo articolo, dovresti aver ottenuto una pagina che assomiglia a questa riportata sotto (può essere anche visualizzata da questo link view it here):
-
- A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

- -

Se ti sei bloccato, puoi sempre confrontare il tuo lavoro con il codice di esempio finished example code che trovi su GitHub.

- -

Qui, abbiamo solo graffiato la superficie dell'HTML. Per saperne di più, vai al seguente link HTML Learning topic.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/index.html b/files/it/learn/getting_started_with_the_web/index.html deleted file mode 100644 index a079b7905b..0000000000 --- a/files/it/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Primi Passi con il Web -slug: Learn/Getting_started_with_the_web -tags: - - Beginner - - CSS - - Design - - Guide - - HTML - - Índice -translation_of: Learn/Getting_started_with_the_web ---- -
{{LearnSidebar}} -
-
- -
-

Primi passi con il Web è una breve introduzione alle tecniche dello sviluppo web. Inizieremo conoscendo e impostando gli strumenti necessari per disegnare una semplice pagina web e pubblicare il tuo codice.

-
- -

La storia del tuo primo sito web

- -

Creare un sito web professionale non è certo un lavoro breve, se ti approcci per la prima volta allo sviluppo web ti suggeriamo di partire imparando le basi. Non abbiamo la pretesa di creare un nuovo Facebook ma non è difficile pubblicare il tuo semplice sito online; inizieremo da qua.

- -

Seguendo le istruzioni contenute nei successivi articoli vedrai la tua prima pagina web pubblicata. Iniziamo!

- -

Installare il software fondamentale

- -

Quando si tratta di strumenti per lo sviluppo web ci sono molti software utili. Se stai iniziando potresti essere confuso dalla quantità di editor, framework e strumenti per testing che ci sono. Nella sezione Installare il software fondamentale puoi trovare guide passo-passo su come installare tutti gli strumenti che ti serviranno per iniziare con lo sviluppo.

- -

Che aspetto avrà il tuo sito web?

- -

Prima di iniziare a disegnare il tuo sito è meglio pensare a come farlo. Quali informazioni intendi mostrare? Che fonts e che colori vuoi usare? Come sarà il tuo sito? Ti forniamo un semplice metodo da seguire per pianificare la struttura del sito e il suo contenuto.

- -

Gestire i file

- -

Un sito web contiene molti file con diversi tipi di contenuto: testuale, codice, css, multimediale e così via. Quando si tratta di costruire un sito è necessario assemblare questi documenti in una struttura concreta ed assicurarsi che questi file possano interfacciasi l'un l'altro. Gestire i file ti spiega come impostare una struttura per il tuo sito e illustra i problemi dei quali essere consapevoli.

- -

Principi di HTML

- -

Hypertext Markup Language (HTML) è il linguaggio utilizzato per strutturare il contenuto web e fornirgli forma e significato. Consente, per esempio, di crere paragrafi o elenchi puntati; permette inoltre di disporre le immagini all'interno della pagina, di inserire tabelle o altri contenuti. Principi di HTML mette a disposizione abbastanza informazioni per approcciarsi all'HTML.

- -

Principi di CSS

- -

Cascading Stylesheets (CSS) è il tipo di codice utilizzato per aggiungere lo stile al sito. Per esempio, preferisci che il testo sia rosso oppure nero? Dove dovrebbe essere posto il contenuto sullo schermo? Che immagini di sfondo o colori dovrebbero essere inseriti per decorare la tua pagina? Principi di CSS ti illustra le basi necessarie per iniziare.

- -

Principi di JavaScript

- -

JavaScript è il linguaggio di programmazione usato per aggiungere contenuto interattivo al tuo sito, come giochi, cose che accadono alla pressione di un pulsante o all'inserimento di informazioni in un form, effetti di stile dinamici, animazioni e molto altro. Principi di JavaScript fornisce un'idea di cosa sia possibile fare con questo interessante linguaggio e di come iniziare.

- -

Pubblicare il tuo sito

- -

Una volta completata la scrittura del codice e organizzati i file che compongono il tuo sito è ovvimente necessario porre il tutto online, così che le persone possano trovarlo ed apprezzarlo. Pubblicare il tuo sito descrive come compiere questo processo in modo facile e col minimo sforzo.

- -

Come funziona il Web

- -

Quando accedi al tuo sito preferito, accadono una serie di complicati processi in background, dei quali potresti non sapere nulla. Come funziona il web spiega quello che accade quando visualizzi una pagina sul tuo computer.

- -

{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}

diff --git a/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html deleted file mode 100644 index 8f4871eb46..0000000000 --- a/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Installazione di software fondamentali -slug: Learn/Getting_started_with_the_web/Installing_basic_software -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
- -
-

In questo articolo, ti mostriamo come eseguire l'installazione di tutti i software necessari per iniziare con lo sviluppo web.

-
- -

Quali strumenti utilizzano i professionisti?

- - - -

Di quali strumenti ho bisogno, in questo momento?

- -

Sembra proprio una lista terrificante, fortunatamente puoi iniziare ad occuparti di web development senza sapere nulla di molto di ciò elencato. In questo articolo ti mostreremo quali sono gli strumenti indispensabili per incominciare — un editor di testo e qualche browser web moderno.

- -

Installare un editor di testo

- -

Probabilmente hai già un editor di testo di base nel tuo computer. Windows ha Notepad di default mentre macOS ha TextEdit. Le distro Linux variano; Ubuntu ha gedit di default.

- -

Per il web development, puoi probabilmente avere di meglio che NotePad o TextEdit. Noi raccomandiamo di iniziare con Brackets, un editor gratuito che offre anteprime live e suggerimenti sul codice.

- -

Installare browser web moderni

- -

Per adesso, installeremo solamente un paio di browser web per desktop per testarci il nostro codice. Scegli più sotto il tuo sistema operativo e clicca sui relativi link per scaricare il file d'installazione per il tuo browser preferito:

- - - -

Prima di andare avanti, dovresti installare almeno due di questi browser e assicurarti di averli pronti per il testing.

- -

Installazione di un server Web locale

- -

Alcuni esempi dovranno essere eseguiti da un server Web per funzionare correttamente. Per informazioni su come eseguire questa operazione, vedere Come si configura un server di prova locale? (How do you set up a local testing server? )

- -

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/javascript_basics/index.html b/files/it/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index bb12f8680e..0000000000 --- a/files/it/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,402 +0,0 @@ ---- -title: Basi di JavaScript -slug: Learn/Getting_started_with_the_web/JavaScript_basics -tags: - - JavaScript -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

JavaScript è un linguaggio di programmazione che aggiunge interattività al tuo sito internet (per esempio: giochi, risposte al premersi di un bottone o inserimento di dati in moduli, stili dinamici e animazioni). Questo articolo ti aiuterà a iniziare il tuo percorso in questo fantastico linguaggio dandoti un'idea di ciò che è possibile costruire (spoiler alert: molte, molte cose).

-
- -

Cos'è JavaScript, davvero?

- -

{{Glossary("JavaScript")}} ("JS" per i fan) è un {{Glossary("Dynamic programming language", "linguaggio dinamico di programmazione")}} che, quando applicato a un documento {{Glossary("HTML")}}, può dare interattività dinamica al sito web. Fu inventato da Brendan Eich, co fondatore del Mozilla project, Mozilla Foundation e Mozilla Corporation.

- -

JavaScript è incredibilmente versatile. Puoi iniziare dal piccolo, con slider (carousel), gallerie di immagini, layout fluttuanti, risposte al premersi di un bottone. Con più esperienza sarai in grado di creare giochi, grafiche animate 2D e 3D, applicazioni con database e molto altro!

- -

JavaScript è un linguaggio abbastanza compatto ma comunque flessibile. Gli Sviluppatori hanno scritto una grande varietà di plugins e snippets di codice da inserire sopra al linguaggio nativo che è il cuore di JavaScript, aprendo alle potenzialità e alle extra funzionalità del linguaggio, diminuendo gli sforzi. Queste includono:

- - - -

Questo articolo vuole essere una leggera introduzione a JavaScript, non andremo a confoderti parlando dei dettagli e delle differenze tra il linguaggio nativo di JavaScript e tutte le varie librerie e framework che sono state costruite. Potrai imparare più in dettaglio nell'area di apprendimento JavaScript, oppure nel resto di MDN.

- -

Sotto introdurremo alcuni aspetti del linguaggio nativo e potrai giocare anche con alcune delle API del browser. Divertiti!

- -

"ciao mondo"

- -

Quanto scritto sopra potrebbe sembrare eccitante, e dovrebbe — JavaScript è una delle tecnologie più vivaci e iniziando a usarlo, i tuoi siti si apriranno a nuove dimensioni di potere e creatività.

- -

Ad ogni modo, JavaScript è un po' più complesso di HTML e CSS (che non sono propriamente linguaggi di programmazione, bensì di markup e di stile). Puoi iniziare con piccole cose come questa qui sotto. Iniziamo con l'aggiungere del JavaScript di base alla nostra pagina creando un esempio "ciao mondo" (lo standard negli esempi base di programmazione).

- -
-

Importante: Se non hai seguito il resto del corso, scarica questo esempio e usalo come punto di inizio.

-
- -
    -
  1. Per prima cosa andiamo dove abbiamo salvato il nostro sito di test e creiamo una nuova cartella 'scripts' (senza gli apici). Poi al suo interno creiamo un file e chiamiamolo main.js (questo file è uno script di JavaScript).
    2. -
  2. Poi, nel tuo file index.html inserisci questo elemento in una nuova riga prima del tag di chiusura </body>: - 
    <script src="scripts/main.js"></script>
    -
    3. -
  3. Praticamente stiamo facendo quello che avremmo fatto per un file di stile CSS con {{htmlelement("link")}} - applichiamo il JavaScript alla pagina così che possa avere effetto su questa (e così anche sul CSS e qualsiasi altra cosa sulla pagina).
    4. -
  4. Ora aggiungi questo snippet di codice al file main.js: - 
    var myHeading = document.querySelector('h1'); // Seleziono tutti i tag h1
-myHeading.textContent = 'Hello world!'; // Cambio il testo
    -
    5. -
  5. Assicurati che i file HTML e JavaScript siano salvato e carica index.html nel browser. Dovresti vedere qualcosa di simile:
    6. -
- -
-

Note: Abbiamo inserito l'elemento script sul fondo della pagina HTML perchè l'HTML carica in ordine lettura, in maniera sincrona. Se il JavaScript venisse caricato prima e non in fondo alla pagina, potrebbe causare dei problemi in quanto sarebbe caricato prima dell'HTML su cui lo script lavorerebbe, ma non sempre è così. Di solito è buona pratica, anche per i tempi di caricamento, inserire il JavaScript a fine pagina HTML, ma ciò può cambiare a seconda delle necessità.

-
- -

Cos'è successo?

- -

Il testo nell'elemento h1 è stato cambiato in "Hellow world!" usando JavaScript. Lo hai fatto utilizzando una funzione chiamata {{domxref("Document.querySelector", "querySelector()")}} per prendere un riferimento del tuo elemento h1 e poi salvando l'elemento in una variabile chiamata myHeading. Questo è molto simile a quello che abbiamo fatto con i selettori CSS. Quando vogliamo fare qualcosa con un elemento, dobbiamo prima selezionarlo.

- -

Dopo aver selezionato l'elemento e averlo inserito nella variabile myHeading, hai cambiato la proprietà {{domxref("Node.textContent", "textContent")}} , una proprietà che fa parte nativamente degli elementi HTML grazie alla DOM API, in "Hello world!".

- -
-

Nota: Entrambe le funzionalità che hai usato fanno parte della Document Object Model (DOM) API, che ti permette di manipolare i documenti HTML.

-
- -

Basi del linguaggio

- -

Parliamo di alcune delle funzionalità principali del linguaggio JavaScript, per darti un'idea migliore di come tutto funziona. Inoltre, alcune di queste funzionalità sono comuni a tutti i linguaggi di programmazione. Se riuscirai a padroneggiare queste fondamenta, sarai sulla strada giusta per programmare più o meno tutto!

- -
-

Importante: In questo articolo, prova a inserire il codice di esempio nella tua console di JavaScript per vedere cosa succede. Per maggiori dettagli sulle console di JavaScript vedi Scoprire i tool di sviluppo del browser

-
- -

Variabili

- -

{{Glossary("Variable", "Le Variabili")}} sono contenitori dove puoi immagazzinare o salvare dei valori. Puoi iniziare dichiarando una variabile con la parola chiave var, seguita da qualsiasi nome tu voglia (più o meno JavaScript Keywords and Preserved Words):

- -
var myVariable; // ok
-var _myVariable; // ok
-var $myVariable; // ok
-var my_Variable; // ok
-var -myVariable; // error
-var delete; // error, preserved keyword
-myVariable; // error
- -
-

Nota: Il punto e virgola indica la fine di un'istruzione; è solo necessario quando devi separare le varie istruzioni su una singola riga, ma è anche buona pratica. Ci sono altre regole per sapere quando usarli e quando non usarli - vedi Your Guide to Semicolons in JavaScript per maggiori dettagli.

-
- -
-

Nota: Puoi chiamare una variabile più o meno con qualsiasi nome ma ci sono alcune regole o restrizioni da seguire (vedi questo articolo). Se non sei sicuro puoi controllarne la validità.

-
- -
-

Nota: JavaScript è case sensitive quindi myVariable e myvariable sono due variabili diverse. Se riscontri dei problemi nel tuoi codice, controlla le lettere!

-
- -

Dopo aver dichiarato la variabile, puoi dargli un valore:

- -
myVariable = 'Bob';
- -

Oppure puoi usare una scorciatoia e unire i passaggi:

- -
var myVariable = 'Bob';
- -

Puoi richiamare il valore della variabile chiamandola:

- -
myVariable;
- -

Dopo avergli assegnato un valore puoi anche cambiarlo:

- -
var myVariable = 'Bob';
-myVariable = 'Steve';
- -

Nota che queste variabili sono di tipi diversi:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableExplanationExample
{{Glossary("String")}}Per denotare che una variabile è una stringa, dovresti metterne il valore tra virgolette.var myVariable = 'Bob';
{{Glossary("Number")}}I numeri non hanno virgolette intorno a loro.var myVariable = 10;
{{Glossary("Boolean")}} -

Un valore Vero/Falso. Le parole true e false sono parole chiave in JS e non hanno bisogno di virgolette.

- 		var myVariable = true;
{{Glossary("Array")}}Una struttura che ti permette di immagazzinare più valori su un singolo riferimento.var myVariable = [1,'Bob','Steve',10];
- Riferisciti a ogni membro dell'array:
- myVariable[0], myVariable[1], etc.
{{Glossary("Object")}}Tutto in JavaScript è un oggetto e può essere salvato in una variabile. Tienilo a mente mentre impari.var myVariable = document.querySelector('h1');
- -

Quindi perchè abbiamo bisogno delle variabili? Le variabili sono necessarie per rendere le cose interessanti nella programmazione. Se i valori non potessero cambiare non potremmo fare niente di dinamico, come personalizzare un messaggio di benvenuto o cambiare l'immagine mostrata in una galleria d'immagini.

- -

Commenti

- -

Puoi commentare il tuo codice JavaScript come faresti con il CSS:

- -
/*
-Qui dentro è un commento
-*/
- -

Se il tuo commento non contiene più di una riga è a volte più semplice fare un commento inline:

- -
// Questo è un commento inline
-
- -

Operatori

- -

Un {{Glossary("operatore")}} è un simbolo matematico che produce risultati basandosi su due valori (o variabili). Nella seguente tabella puoi vedere gli operatori più semplici seguiti da alcuni esempi di JavaScript che puoi provare nella tua console.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorExplanationSymbol(s)Example
addizione/concatenazioneUsato per fare la somma tra due numeri o incollare insieme due stringhe.+6 + 9;
- "Hello " + "world!";
sottrazione,moltiplicazione,divisioneQueste fanno ciò che ci si aspetta.-, *, /9 - 3;
- 8 * 2; // per moltiplicare in JS si usa l'asterisco
- 9 / 3;
operatore di assegnazioneL'hai già visto. Serve per assegnare un valore a una variabile.=var myVariable = 'Bob';
operatore di identitàFa un test per vedere se due variabili sono uguali o meno e restituisce un valore booleano (true/false)===var myVariable = 3;
- myVariable === 4; // false
negazione, non ugualeRestituisce l'opposto logico.!, !== -

L'espressione di base è true ma restituisce false perchè l'abbiamo negata:

- -

var myVariable = 3;
- !(myVariable === 3);

- -

Qui testiamo che myVariable NON E' UGUALE a 3". Questo restituisce false perchè myVariable E' uguale a 3.

- -

var myVariable = 3;
- myVariable !== 3;

-
- -

Ci sono molti altri operatori da esplorare, per ora va bene così. Vedi Espressioni e operatori per una lista completa.

- -
-

Nota: Mischiare tipi di dati diversi può portare a strani comportamenti quando andiamo a affrontare calcoli quindi stai attento a riferirti alle variabili corretamente per avere il risultato che ti aspetti. Per esempio, "35" + "25" non darà il risultato sperato, questo perchè i numeri sono stati messi tra virgolette e sono diventati stringhe. In questo caso stiamo facendo una concatenazione di stringhe, non un'addizione, quindi il risultato sarà 3525. Togliendo le virgolette il risultato sarà quello che ci aspettavamo.

-
- -

Condizionali

- -

I Condizionali sono strutture di codice che ci permettono di testare delle espressioni che restituiscono valore vero o falso, facendo funzionare parti di codice a seconda del risultato. La forma più comune è chiamata if ... else. Quindi per esempio:

- -
var iceCream = 'chocolate';
-if (iceCream === 'chocolate') {
-  alert('Yay, I love chocolate ice cream!');
-} else {
-  alert('Awwww, but chocolate is my favorite...');
-}
- -

L'espressione dentro il condizionale if ( ... ) è il test — questo usa l'operatore di identità (come descritto sopra) per comparare la variabile iceCream con la stringa "chocolate" per vedere se sono uguali. Se la comparazione restituisce true, il primo blocco di codice viene eseguito, altrimenti (else) si passa al secondo blocco di codice.

- -

Funzioni

- -

{{Glossary("Function", "Le Funzioni")}} sono un modo di impacchettare funzionalità che pensi di riutilizzare. Quando hai bisogno di una procedura puoi chiamare una funzione con il suo nome invece di riscrivere lo stesso codice ogni volta. Avrai visto alcuni esempi di usi di funzione, per esempio:

- -
    -
  1. - 
    var myVariable = document.querySelector('h1');
    -
    2. -
  2. - 
    alert('hello!');
    -
    3. -
- -

Queste funzioni, documents.querySelector e alert, sono già presenti nel browser da poter utilizzare quando vuoi.

- -

Se vedi quaclosa che assomiglia a una variabile ma ha delle parentesi dopo il nome — ( ) — allora probabilmente è una funzione. Le Funzioni spesso prendono degli {{Glossary("Argument", "argomenti")}} — pezzi di dati che gli servono per fare il proprio lavoro. Questi dati vanno all'interno delle parentesi, separati da virgole.

- -

Per esempio, la funzione alert() fa apparire un box dentro la finestra del browser, ma dobbiamo dargli una stringa come argomento per dire alla funzione cosa scrivere all'interno del pop-up.

- -

La buona notizia è che puoi definire le tue funzioni — nel prossimo esempio scriviamo una semplice funzione che prende due numeri come argomenti e li moltiplica, restituendo il risultato:

- -
function multiply(num1,num2) {
-  var result = num1 * num2;
-  return result;
-}
- -

Prova a eseguire la funzione sopra nella console con degli argomenti di test. Per esempio:

- -
multiply(4,7);
-multiply(20,20);
-multiply(0.5,3);
- -
-

Nota: La parola chiave return dice al browser di restituire la variabile risultato per renderla utilizzabile al di fuori della funzione. Questo è necessario perchè le cose che vengono definite all'interno di una funzione sono disponibili solo alla funzione. Questo è chiamato {{Glossary("Scope", "scoping")}} (Leggi di più variable scoping.)

-
- -

Eventi

- -

La vera interattività di un sito dipende dagli eventi. Questi sono strutture di codice che ascoltano le varie cose che succedono nel browser, rispondendo con l'esecuzione di codice. Un esempio ovvio è l'evento click che è inizializzato dal browser quando si preme qualcosa con il mouse. Per dimostrarlo, inserisci il seguente codice nella console e poi premi ovunque sulla pagina corrente.

- -
document.querySelector('html').onclick = function() {
-    alert('Ouch! Stop poking me!');
-}
- -

Ci sono molti modi per attaccare un evento a un elemento. Qui selezioniamo un elemento HTML, impostando la proprietà del suo gestore onclick  a una funzione anonima (i.e. senza nome), che contiene il codice che vogliamo eseguire quando l'elemento viene premuto.

- -

Nota che

- -
document.querySelector('html').onclick = function() {};
- -

è uguale a

- -
var myHTML = document.querySelector('html');
-myHTML.onclick = function() {};
- -

E' solo più corta come soluzione.

- -

Diamo i superpoteri al nostro sito web di esempio

- -

Adesso che abbiamo visto un po' le basi di JavaScript, aggiungiamo alcune funzionalità interessanti al nostro sito di esempio per vedere cos'è possibile fare con JavaScript.

- -

Aggiungere un cambio immagine

- -

In questa sezione, aggiungeremo un'ulteriore immagine al nostro sito utilizzando alcune funzionalità della DOM API, usando un po' di JavaScript per scambiare le immagini quando vengono premute.

- -
    -
  1. Prima di tutto, trova un'altra immagine che vorresti usare per il tuo sito. Assicurati che sia della stessa grandezza della prima immagine o più o meno uguale (oppure, se conosci il CSS, applica alcune regole di stile).
    2. -
  2. Salva quest'immagine nella cartella images.
    3. -
  3. Rinomina quest'immagine a 'firefox2.png' (senza apici).
    4. -
  4. Val al tuo main.js file e inserisci il seguente JavaScript. (Se il tuo "hello world" è ancora lì, cancellalo.) - 
    var myImage = document.querySelector('img');
-
-myImage.onclick = function() {
-    var mySrc = myImage.getAttribute('src');
-    if(mySrc === 'images/firefox-icon.png') {
-      myImage.setAttribute ('src','images/firefox2.png');
-    } else {
-      myImage.setAttribute ('src','images/firefox-icon.png');
-    }
-}
    -
    5. -
  5. Salva tutti i file e carica index.html nel browser. Ora quando premi sull'immagine, dovrebbe scambiarsi con la seconda!
    6. -
- -

Immagazzini un riferimento al tuo elemento immagine nella variabile myImage. Poi definisci il gestore della proprietà onclick della variabile myImage con una funzione anonima. Ora, tutte le volte che l'elemento immagine viene premuto:

- -
    -
  1. Recuperi il valore dell'attributo src dell'immagine.
    2. -
  2. Usi un condizionale per sapere se il valore src è uguale alla destinazione dell'immagine originale: -
      -
    1. Se lo è, cambi la destinazione nell'attributo src con quella della seconda immagine, forzando l'altra immagine a essere caricata nell'elemento {{htmlelement("image")}}.
      2. -
    2. Se non lo è (quindi è già stata scambiata), il valore di src torna a essere quello della destinazione dell'immagine originale.
      3. -
    -
    3. -
- -

Aggiungere un messaggio di benvenuto personalizzato

- -

Aggiungiamo un altro po' di codice, cambiando il titolo della pagina in un messaggio personalizzato quando l'utente visita il sito web. Questo messaggio di benvenuto rimarrà in memoria qualora l'utente dovesse lasciare il sito per tornare in un momento successivo — lo salveremo usando la Web Storage API. Includeremo un'opzione per cambiare l'utente e quindi il messaggio di benvenuto in qualsiasi momento risulti necessario.

- -
    -
  1. In index.html, aggiungiamo la seguente riga prima dell'elemento {{htmlelement("script")}}: - - 
    <button>Cambia utente</button>
    -
    2. -
  2. In main.js, inserisci il seguente codice alla fine del file, proprio come scritto —  questo prende i riferimenti di un nuovo bottone e dell'elemento h1, immagazzinandoli in delle variabili: - 
    var myButton = document.querySelector('button');
-var myHeading = document.querySelector('h1');
    -
    3. -
  3. Inserisci questa funzione per personalizzare il messaggio di benvenuto — questo ancora non farà niente ma lo sistemeremo tra poco: - 
    function setUserName() {
-  var myName = prompt('Inserisci il tuo nome.');
-  localStorage.setItem('name', myName);
-  myHeading.textContent = 'Mozilla is cool, ' + myName;
-}
    - Questa funzione utilizza la funzione prompt() che fa apparire un piccolo box di dialogo, un po' come alert(). Questo prompt() però chiede all'utente di inserire dei dati, salvandoli in una variabile dopo che l'utente ha premuto OK. In questo caso chiediamo all'utente di inserire il proprio nome. Dopo chiamiamo un'API chiamata localStorage che ci permette di immagazzinare dati nel browser per poi recuperarli successivamente. Usiamo la funzione setItem() di localStorage per creare e immagazzinare un oggetto chiamato 'name', impostando il suo valore a quello della variabile myName che contiene il dato inserito dall'utente. Finalmente, impostiamo il textContent dell'elemento h1 a una stringa più il valore della variabile myName che contiene il nome dell'utente.
    4. -
  4. Poi aggiungiamo un blocco if ... else — possiamo chiamare questo codice di inizializzazione per strutturare la app al suo avvio: - 
    if(!localStorage.getItem('name')) {
-  setUserName();
-} else {
-  var storedName = localStorage.getItem('name');
-  myHeading.textContent = 'Mozilla is cool, ' + storedName;
-}
    - Questo blocco prima usa l'operatore di negazione logica, poi controlla se il dato name esiste nel localStorage. Se non esiste (primo blocco), fa partire la funzione setUserName(), altrimenti recuperiamo il nome dal localStorage con la funzione getItem() e impostiamo textContent dell'elemento h1 a una stringa più il valore della stringa restituita da getItem().
    5. -
  5. Inserisci il gestore dell'evento onclick dell'elemento button. Quando premuto, la funzione setUserName() viene eseguita. Questo permette all'utente di inserire un nuovo nome quando vogliono, premendo il bottone: - 
    myButton.onclick = function() {
-  setUserName();
-}
-
    -
    6. -
- -

Ora quando visitiamo il sito per la prima volta, ti verrà richiesto il tuo username, poi ti sarà dato un messaggio personalizzato. Puoi cambiare il tuo nome quando vuoi premendo il bottone. Come bonus aggiunto, il nome è salvato in localStorage quindi rimane in memoria anche dopo la chiusura del browser mantenendo il messaggio personalizzato quando riaprirai il sito.

- -

Conclusione

- -

Se hai seguito tutte le istruzioni in questo articolo, dovresti avere una pagina così (puoi vedere la nostra versione qui):

- -

- -

Se ti blocchi, puoi comparare il tuo lavoro con il nostro esempio finito su Github.

- -

Abbiamo appena iniziato con JavaScript. Se ti è piaciuto giocare e vorresti avanzare ancora di più, vai al nostro JavaScript learning topic.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html deleted file mode 100644 index 96a721fe9e..0000000000 --- a/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Pubblicare il tuo sito -slug: Learn/Getting_started_with_the_web/Publishing_your_website -tags: - - Advanced - - Beginner - - CodingScripting - - FTP - - GitHub - - Google App Engine - - Learn - - Web - - l10n:priority - - publishing - - web server -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website -original_slug: Learn/Getting_started_with_the_web/Pubbicare_sito ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
- -
-

Una volta finito di scrivere il codice e di organizzare i file del tuo sito, dovrai caricarli online per permettere ad altri di accedervi. Questo articolo ti aiuterà a mettere online la tua creazione senza troppi sforzi.

-
- -

Quali opzioni ho?

- -

Ci sono molti modi per pubblicare un sito e l'argomento è molto vasto. Lo scopo di questo articolo non è compilare una lista di tutte le opzioni possibili, ma piuttosto illustrare i pro e i contro dei tre metodi principali più indicati per i principianti e orientarti verso uno in particolare che dà risultati immediati per la maggior parte dei lettori.

- -

Acquistare un hosting e un dominio

- -

Per gestire più liberamente i contenuti e l'aspetto del proprio sito, molti scelgono di acquistare:

- - - -

Molti siti professionali adottano questa soluzione.

- -

Inoltre avrai bisogno di un programma {{Glossary("FTP", "File Transfer Protocol (FTP)")}} per trasferire i file dal tuo computer al server web (consulta How much does it cost: software per ulteriori dettagli). Ogni programma FTP funziona in modo diverso, ma in linea generale devi connetterli al tuo server web immettendo le credenziali fornite dalla tua compagnia di hosting (es. username, password, hostname). Una volta connesso, vedrai i file locali (sul tuo PC) e i file del server web in due finestre separate e potrai trasferirli da una parte all'altra:

- -

- -

Consigli su hosting e domini

- - - -

Usare una piattaforma online come GitHub o Google App Engine

- -

Puoi pubblicare il tuo sito anche attraverso alcune piattaforme:

- - - -

A differenza della maggior parte degli hosting, questi strumenti sono gratuiti ma hanno delle funzionalità limitate.

- -

Usare un IDE online come CodePen

- -

Online si possono trovare numerose applicazioni web che emulano l'ambiente di sviluppo di un sito, consentendoti di vedere in tempo reale come appare il codice HTML, CSS e JavaScript mentre lo scrivi… tutto in un'unica finestra del browser! In generale, questi strumenti sono abbastanza semplici, ottimi per imparare e per condividere codice (ad esempio se vuoi mostrare una certa procedura o chiedere ai colleghi di effettuare un debug) e gratuiti accontentandosi delle funzionalità base. La pagina generata dal tuo codice viene ospitata su un indirizzo web univoco. Le funzionalità base sono però limitate e di solito non offrono spazio per ospitare risorse (come le immagini).

- -

Prova alcuni tra questi servizi e scegli quello più adatto alle tue esigenze:

- - - -

- -

Pubblicare con GitHub

- -

Vediamo ora i passi per pubblicare il tuo sito su GitHub Pages:

- -
    -
  1. Registra un account GitHub e verifica il tuo indirizzo email.
    2. -
  2. Crea un repository per i tuoi file.
    3. -
  3. Su questa pagina, nella casella Repository name, inserisci username.github.io, dove username è il tuo username. Per esempio, Mario Rossi scriverà qualcosa come mariorossi.github.io.
    - Inoltre, spunta la casella "Initialize this repository with a README" e fai clic su Create repository.
    4. -
  4. Ora trascina e rilascia i contenuti del tuo sito nel repository e fai clic su Commit changes. -
    -

    Nota: Assicurati che la tua cartella contenga un file chiamato index.html.

    -
    -
    5. -
  5. -

    Apri username.github.io per vedere il tuo sito online. Per esempio, per il nome utente chrisdavidmills, vai a chrisdavidmills.github.io.

    - -
    -

    Nota: Potrebbero essere necessari alcuni minuti perché il sito vada online. Se non lo vedi immediatamente, attendi alcuni minuti e riprova.

    -
    -
    6. -
- -

Per approfondire consulta GitHub Pages Help.

- -

Approfondimenti

- - - -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

- -

In questo modulo

- - diff --git a/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html deleted file mode 100644 index 8adb6dbe7d..0000000000 --- a/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Che aspetto avrà il tuo sito Web? -slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like -tags: - - Basi - - Design - - Fonts - - Grafica - - Web - - imparare -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like -original_slug: Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
- -
-

Che aspetto avrà il tuo sito? spiega come pianificare e lavorare sul design prima di iniziare a scrivere le primissime righe di codice. Esso include risposte a domande come "Che informazioni offre il mio sito Web?", "Quale font e colore voglio?" e "Cosa fa il mio sito?" 

-
- -

Prima di tutto: pianifica

- -

Prima che tu faccia qualsiasi cosa, devi avere qualche idea. Il tuo sito Web cosa dovrebbe esattamente fare? Un sito Web può fare praticamente tutto, ma inizialmente dovresti mantenere le cose semplici. Inizieremo creando una semplice pagina con un'intestazione, un'immagine e un po' di paragrafi.

- -

Prima di iniziare dovrai rispondere a questi domande:

- -
    -
  1. Di cosa tratterà il tuo sito Web? Ti piacciono i cani, New York, o Pacman?
    2. -
  2. Quali informazioni vorrai portare su quell'argomento? Scrivi un titolo e un po' di paragrafi e pensa a un'immagine che vorresti far vedere nella pagina.
    3. -
  3. Che aspetto ha il tuo sito Web in breve? Qual è il suo colore di sfondo? Quale genere di font è più appropriato: formale, grassetto e rumoroso, simile a un sottotitolo?
    4. -
- -
-

Nota bene: Progetti complessi necessitano di linee guida dettagliate che vadano a fondo su ogni dettaglio di colore, font, spaziatura tra gli elementi di una pagina, stile di scrittura, e così via. Per fare questo ci si basa, di solito, su guide e linee guida severe. Puoi vedere un esempio su Firefox OS Guidelines.

-
- -

Fare uno schizzo del design

- -

Successivamente, prendi carta e penna e fai uno schizzo veloce su come il tuo sito Web dovrebbe essere. Per le tue prime pagine non ci sarà molto da disegnare, ma ti abituerebbe a farlo. È un'abitudine che aiuta: ricorda che non avrai bisogno di essere Van Gogh!

- -

- -
-

Nota bene: Anche nei siti Web complessi e professionali, i team grafici di solito iniziano con diversi schizzi veloci su carta e, solo successivamente, sviluppano un modello grafico con editor o tecnologie Web.

- -

I gruppi di sviluppo Web spesso hanno sia un grafico (front-end developer) che un programmatore (back-end developer). I grafici, ovviamente, mettono insieme le idee grafiche per il sito. Gli sviluppatori UX hanno un ruolo più astratto e si occupano di come l'utente finale si interfaccerà con il sito.

-
- -

Scegliere le tue risorse

- -

A questo punto è bene iniziare a mettere insieme il contenuto che apparirà sul tuo sito Web.

- -

Testo

- -

Dovresti già avere i tuoi paragrafi e il tuo titolo da prima. Per ora tienili là.

- -

Colori del tema

- -

Per scegliere un colore, vai qui e trova il colore che più ti piace. Quando premi su un colore, vedrai uno strano codice a sei cifre come #660066. Questo è chiamato codice esadecimale, e rappresenta il tuo colore. Copia il codice in un posto sicuro per ora.

- -

- -

Immagini

- -

Per scegliere un'immagine, vai su Google Immagini e cerca qualcosa che faccia al caso tuo.

- -
    -
  1. Quando trovi l'immagine che desideri, premi sull'immagine.
    2. -
  2. Premi sul bottone Visualizza immagine.
    3. -
  3. Sulla pagina che si aprirà, premi con il tasto destro del mouse sull'immagine (Ctrl + click sul Mac), scegli Salva immagine come...,  e scegli un posto sicuro in cui salvare l'immagine. In alternativa, copia l'URL dell'immagine che trovi sulla barra degli indirizzi del tuo browser per un utilizzo futuro.
    4. -
- -

- -

- -
-

Nota bene: La maggior parte delle immagini sul Web, comprese quelle su Google Immagini, sono protette da copyright. Per ridurre la tua possibilità di una violazione del diritto d'autore, puoi usare il filtro di licenza Google. Semplicemente premi su 1) Strumenti, poi su 2) Diritti di utilizzo e, infine, sulla scelta che più soddisfa le vostre necessità:

- -

-
- -

Font

- -

Per scegliere un font:

- -
    -
  1. Vai su Google Fonts e passa la lista fino a quando non troverai quello che più ti piace. Puoi anche usare il pannello sulla destra per filtrare la ricerca.
    2. -
  2. Premi il bottone con l'icona '+' (Add to) vicino al font che desideri.
    3. -
  3. Premi sul bottone "* Family Selected" nel pannello a fondo della pagina ("*" dipenderà da quanti font avrete selezionato).
    4. -
  4. Nel pop-up che esce, puoi vedere e copiare le linee di codice che Google ti darà. Ricordati di salvarle in un editor di testo, cosicché possa usarle futuro.
    5. -
- -

- -

 

- -

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

- -

 

- -

In questo modulo

- - - -

 

-- cgit v1.2.3-54-g00ecf