Perchè un sito web?
Per cominciare ad "apparire" sul web, con vari obiettivi come: mostrare le proprie abilità creative, raccontare di se stessi e delle proprie esperienze, farsi conoscere ecc... oltre ai social, può essere semplice e abbastanza facile cominciare dall'apertura di un blog personale (*v.post). Come abbiamo già scritto nel post citato, se ne trovano già pronti e gratuiti, solo da personalizzare come abbiamo fatto noi con il nostro blog che, seppure con qualche limitazione, compie il suo dovere.
Ci sono delle situazione nelle quali un blog o i social non bastano più e si ha la necessità o il desiderio di avere un proprio sito web personale che illustri l'attività che si gestisce o sia voce di un'associazione o di un progetto.
Cominciamo a fare un po' di chiarezza!
tipologie di siti web:
statici, dinamici, e-commerce, responsive
1. siti web statici (o vetrina): sono siti adatti a chi vuole pubblicizzare la propria attività professionale fornendo le principali informazioni riguardanti l'azienda come fosse una specie di biglietto da visita. Uno spazio web per farsi conoscere, pubblicizzarsi ed essere indicizzati dai motori di ricerca. Solitamente questi siti hanno poche pagine, ma offrono ai visitatori tutte le informazioni principali e i contatti per farsi 'trovare'. Un sito vetrina deve essere gradevole graficamente, funzionale e di qualità.
Un sito statico è costituito da contenuti HTML e per realizzarlo o fare modifiche, occorre almeno un programma di base per editare l'HTML, un programma di grafica per le immagini e un programma FTP per trasferire i file modificati dal proprio computer al server.
2. siti web dinamici: sono il passo successivo ai siti statici e utilizzano un database e uno script per modificare più facilmente e velocemente i contenuti.
Il sito dinamico è basato sul linguaggio PHP, su un database e il supporto di un CMS (Content Management System) il quale è uno strumento per la
gestione del contenuto di un sito web. L'interfaccia di
amministrazione del CMS consente di gestire vari aspetti del sito web, senza che si debbano necessariamente
conoscere linguaggi di programmazione web, infatti, con un CMS non è necessario modificare il file HTML per poi caricarlo su un server, ma si può scrivere il
contenuto, fare modifiche, aggiungere immagini, caricare video direttamente in
un'interfaccia semplice e intuitiva che somiglia agli strumenti di uso di Microsoft Word (il più conosciuto è WordPress). La creazione
di siti web dinamici richiede maggiori competenze tecniche.
3. siti e-commerce (commercio elettronico) sono siti in cui si vendono prodotti. Il modo migliore, vista la difficoltà di realizzazione, è quella di utilizzare una piattaforma per siti e-commerce per la vendita e l'elaborazione degli ordini ricevuti online dai clienti. I siti e-commerce possono essere collegati tramite link a siti vetrina o dinamici.
4. siti web responsive
Oggi
è impossibile procedere alla costruzione di un sito senza la certezza che sia responsive,
cioè adattato ad essere visualizzato
correttamente sui vari dispositivi e in particolare sugli smarphone
(mobile). Questo perchè da qualche anno è aumentata moltissimo la
visualizzazione del web dai cellulari per cui è fondamentale avere un
sito che sia visibile correttamente sugli schermi pc e sugli schermi
degli smarphone. Un sito web responsive
si definisce tale quando si presenta con un contenuto "che
cambia" e si adatta ai diversi dispositivi: le immagini si ridimensionano in proporzione e gli spazi con i testi assumono una
forma in base alle esigenze, il menu si riduce e comprime ecc...
Per
riuscire ad avere un sito web che si adatti perfettamente a
tutti i dispositivi va usato un template che lo consenta e per questo
occorre ricorrere ad un design responsive che ha una tecnica di progettazione
grazie alla quale ogni elemento della pagina si adatta automaticamente per essere correttamete visualizzato.
Solitamente le piattaforme citate nel post mettono a disposizione siti e template responsive, per cui ci si può affidare a questi.
Per quanto riguarda il "fai da te" occorre documentarsi e studiare qui *v. una guida e/o utilizzare templati responsive già pronti in rete (spesso gratuiti) esempio su Joomla; template monster; bootstrap
alcune piattaforme che permettono di creare un sito web gratuito in pochi passi (con versioni anche a pagamento)
Mettono a diposizione CMS, hosting e domini di terzo livello: https://www. nome del servizio. nomedelsito. it
1.Google Sites
2. WordPress
3. WIX
4. One Minute Site
5.Site123
6. Webador
7. Shopify
8. Web.com
Hai deciso che vuoi partire con la progettazione fai da te?
cosa occorre:
1. documentarsi e studiare
2. un computer per lavorare collegato a internet
2. programma per editare testi o programma più complesso per creare pagine web
3.programma di grafica per elaborare le immagini
in un secondo momento:
4.programma FTP
5.Hosting e Dominio
Hosting e dominio Web
Se non vuoi appoggiarti ad una piattaforma on line con pacchetti all inclusive, occorrerà acquistare presso un provider: Hosting e dominio Web, questo rappresenta un passo da
effettuare quando si vuole pubblicare in rete un nuovo sito Internet
1. Hosting cioè lo spazio necessario che ospita i file del sito
Web, insieme al server già configurato, in grado di renderli operativi occorre acquistare un Hosting su siti di provider rivenditori ad esempio Aruba, Register ecc.. solitamente insieme ad un Dominio
2. Dominio cioè l'indirizzo (il nome del sito) che le persone digitano nel browser per raggiungere un sito. I nomi del dominio sono indicati come URL (Universal Resource Locator): la forma base di un dominio è formata dal nome + l'estensione (.it; .com; .eu; ecc...)
*v. Aruba Hosting e Domini
Una volta pubblicato il sito web avrà, ad esempio, questa forma:
https://www.nomedelsito. it
specialmente per principianti
prima di acquistare l'Hosting e Dominio conviene documentarsi e studiare bene,
magari inizialmente anche leggere il nostro post fino in fondo e soprattutto
è importante cominciare a fare delle prove, sperimentando e visualizzando con
"anteprima di pagina" e il proprio browser . Dopo di che valutare e
decidere se sia il caso di andare avanti.
adesso è il momento di iniziare a progettare tecnicamente la prima pagina web in HTML
come si fa?
Diciamo che è veramente impossibile scrivere sinteticamente tutto ciò che riguarda l'HTML come è impossibile dare le dritte per la costruzione di una pagina completa, cercheremo di fornirvi solo qualche informazione basilare per principianti che permetta di iniziare a sperimentare o magari solo per incuriosire.
tre definizioni fondamentali
- il linguaggio HTML è il linguaggio che permette di scrivere la pagina, definisce la sua struttura e l'organizzazione (puoi vederlo in opera guardando qualsiasi codice di una pagina web andando su: visualizza sorgente pagina)
*v. guida HTML
*v.guida HTML5 ( ultima versione di HTML)
- il CSS (Cascading Style Sheets - fogli di stile a cascata) è un linguaggio che defisce lo stile usato (la formattazione, l'aspetto ecc. ), permette di separare il contenuto dalla sua rappresentazione e dà indicazioni al proprio browser (esempio Chrome) su cosa e come visualizzare
Lo stile può essere in linea definito di volta in volta per i vari elementi
esempio:
<p style="color: red;"></p>
incorporato tramite il tag <style> inserito nella sezione <head> </head> della pagina
esempio:
<head>
<style type="text/css">
p { color: red; }
</style>
</head>
o su file esterno richiamato da un link situato sempre nella sezione <head> </head>
esempio:
<head>
<link href="stile_prova.css" rel="stylesheet">
</head>
o anche:
<style type="text/css">
@import url(stile_prova.css);
</style>
il foglio di stile esterno per vari motivi è il sistema migliore
Il linguaggio HTML e il CSS lavorano insieme
*v. guida CSS di base
- Javascript è un linguaggio per programmare e per creare vari effetti
*v. guida Javascript
Per lavorare occorre procurarsi un editor di testo adatto a scrivere il codice HTML, in rete se ne trovano vari sia per PC che per Mac anche gratuiti, anche lo stesso Blocco Note di Windows , oppure si possono usare programmi più completi per la creazione di pagine web come ad esempio i conosciuti Dreamweaver di Adobe, Microsoft Frontpage ecc...
Quando non si usano i CSS e si lavora alla creazione di una pagina web con programmi di editor più complessi, lo stile e la formattazione vengono aggiunti automaticamente nel codice html, funziona ugualmente, anche se con opzioni più limitate di quello che si può definire con i CSS, la pagina però talvolta viene appesantita da stringhe di codice ripetuto più volte e diventa più lungo e difficoltoso fare modifiche
esempio se scrivo:
provo lo stile
che voglio scrivere: con il font verdana, dimensione 18pt, colore rosso, e in grassetto
automaticamente il codice html sarà:
<p><b><font face="verdana"><font size="5" color="#FF0000">provo lo stile</font></font></b> </p>
come si vede viene ripetuto più volte il font: font face, font size , viene aggiunto <b> per definire il grassetto e color per il colore del font
se invece uso un CSS ( incorporato o meglio esterno)* posso scrivere li tutte le informazioni sul font ( font size = dimensione, font face =carattere, <b>=grassetto, color= #colore ) e il codice html della pagina sarà più semplice e pulito:
<p>provo lo stile</p>
* per lo stile in linea , incorporato o esterno v. paragrafo precedente del post
caratteristiche della pagina HTML
La pagina HTML (Hyper Text Markup Language) è suddivisa in tag che corrispondono a determinati tipi di contenuto (i tag sono uno di inizio racchiuso tra due < > e uno di fine di chiusura </>)
il primo tag che si trova è sempre :
<!DOCTYPE html> il quale dichiara che il file contiene un codice html
a seguire :
<html> inizio della parte del codice che verrà espressa con il linguaggio HTML
<head> parte della pagina nella quale sono situate le informazioni (che non si vedono dal dispositivo usato) con cui la pagina viene gestita, ad esempio il titolo della pagina, i metatag, il richiamo ai file CSS ecc.
</head>fine dell'informazioni con cui la pagina
viene gestita
<body>inizio del corpo della pagina con tutti gli elementi che verranno mostrati quando si guarda la pagina con un dispositivo (pc, tablet, cellulare) esempio testata, tabelle, colonne, titoli, testi, immagini, div ecc...
</body>fine del corpo della pagina
</html> fine pagina html
esempio di codice della pagina "prova "
1. file html
<!doctype html>
<html >
<head>
<title>prova </title>
<link href="stile_prova.css" rel="stylesheet">
</head>
<body>
<h1> provo a scrivere una pagina</h1>
<h2>non so come verrà</h2>
<p>ciao, sto provando a scrivere la mia prima pagina
html, spero che si legga bene </p>
<img src="gattino.jpg"
width="300" height="200" />
<p>questo è il mio gatto </p>
</body>
</html>
2.codice CSS file "stile_prova.css"
body{font: 76% Verdana, Arial, sans-serif; background-color: #FFF}
h1{color:#FFBA3F}
h2{color:#508738}
p{color:#0000FF}
a. come si nota nell'esempio, il richiamo al file CSS viene inserito nella sezione <head> </ head> della pagina con il codice HTML;
b. nel file CSS sono stati definiti i colori della pagina (body) e dei vari tag (<h1>- <h2>-<p>).
- <p> sono i paragrafi </>
- <h1> titolo del paragrafo o del contenuto </h1>
- <h2> capitoli e sezioni </h2>
c. i codici dei colori sono esagesimali (sei numeri e lettere) e sono preceduti dal simbolo #
*v. tabella codici colori
Questo è un esempio proprio minimo di stile; nel CSS si possono aggiungere le dimensioni e il tipo dei font, il loro colore, la disposizione a destra, centro, sinistra, lo spazio tra i paragrafi, ecc...
questa è la pagina "prova"
come si vedrà una volta visualizzata con il comando del programma editor "vedi anteprima nei browser" o quando viene caricata in rete
______________________________________
provo a scrivere una pagina
non so come verrà
ciao, sto provando a scrivere la mia prima pagina html, spero che si legga bene
questo è il mio gatto
______________________________________
se usate un editor di testo semplice ad esempio notepad di windows potete fare una verifica facile subito senza usare programmi complessi o caricarlo in rete - seguite passo passo le indicazioni:
1. aprite una nuova cartella sul desktop
2.aprite notepad e copiateci tutto il file html scritto sopra ( da <!doctype html> a </html>)
3. fate salva con nome - nella pagina che si apre sostituite nel primo campo ( nome file) la scritta *.txt con prova.html e nella secondo campo ( salva come) dove c'è scritto documento di testo(*.txt) cliccando sulla freccina a destra scegliete tutti i file(*.*)
4.salvate il file nella nuova cartella creata (sarà il file chiamato prova.html)
5. aprite di nuovo notepad e questa volta copiateci tutto il contenuto del codice CSS file "stile_prova.css"scritto sopra
6. fate salva con nome sostituendo nel campo (nome file) la scritta *.txt con stile_prova.css
e nel campo (salva come) come avete fatto sopra, dove c'è scritto documento di testo(*.txt) cliccando sulla freccina a destra scegliete tutti i file(*.*)
7. salvate il file nella nuova cartella ( sarà un file chiamato stile_prova.css)
8. inserite nella cartella anche la foto del gattino:gattino.jpg
9. a questo punto nella cartella ci saranno 3 file:
- prova.html
- stile_prova.css
- gattino.jpg
10.fate doppio clic sul file prova.html e si aprirà la pagina del vostro browser predefinito, dove vedrete l'anteprima della pagina "prova" con le varie scritte colorate e la foto del gattino
altri codici
1.immagine:
<img src=" nome e percorso dell'immagine "
width=" larghezza in px" height=" altezza in px" />
2.link:
questo è il link del nostro blog
https://vitadashabby.blogspot.com/
codice html del link:
<p>questo è il link del nostro blog</p>
<a title="link del nostro blog "
href="https://vitadashabby.blogspot.com/">
https://vitadashabby.blogspot.com/</a>
3. div: dopo l'introduzione dei CSS per organizzare al meglio la pagina HTML è stato introdotto un altro elemento tag: <div> </div> che serve per indicare al browser quando e dove applicare una certa personalizzazione grafica stabilita con i CSS; i <div> sono collocati nel corpo della pagina HTML all'interno del tag <body> e definiti nelle caratteristiche e nella formattazione nel foglio di stile CSS
div principali:
<!doctype html>
<html >
<head>
</head>
<body>
<div id="container">
<div id="header">
<div id="nav">
</div>
</div>
<div id="main">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
Consigli
Sia che ci si affidi a una piattaforma o si utilizzi un template già pronto o programmi di editor più complessi (che spesso inseriscono automaticamante stringhe inutili di codice o ripetizioni) consigliamo di controllare sempre il codice HTML per evitare di appesantire la pagina con conseguenti rallentamenti nel caricamento o generare errori e malfunzionamenti; per non avere difficoltà a leggerlo e controllarlo per fare modifiche o capire se ci sono errori; per l'accessibilità; per posizionarsi più in alto nella ricerca su Google. Per tutti questi motivi è necessario mantenere un codice il più pulito e snello possibile, ordinato e senza troppi spazi ed è altresì importante caricare immagini che siano ottimizzate per il web.
ricordarsi di
1. controllare sempre i tag e verificare le loro chiusure.
2.non dimenticare la dichiarazione “doctype” ad inizio pagina. Il suo scopo è di
aiutare il browser a visualizzare correttamente un sito web.
3.inserire l'attributo "title" per i link allo scopo di migliorare l'usabilità e l'accessibilità; ha altri vantaggi riguardanti anche l'indicizzazione positiva sui motori di ricerca
esempio:
link sulla pagina
vita da shabby
se aggiungo l'attributo "title" quando l'utente ci passa sopra con la freccetta del mouse, compare un testo aggiuntivo che informa sullo scopo del collegamento
il codice html sarà:
<a href= “https://www.vitadashabby.blogspot.com " title= “ pagina home del blog vita da shabby ”>vita da shabby</a>
3. aggiungere l'attributo "ALT" alle immagini, ossia un testo alternativo all'immagine utile nel caso che l'immagine non venisse visualizzata per qualche motivo, o per i lettori che navigano con browser testuali (es. Lynx), o i non vedenti che utilizzano gli Screen Reader: software che leggono il testo delle pagine web; questi software non possono descrivere le immagini e le foto presenti, ma hanno bisogno dell'attributo ALT testuale che definisca l'immagine a parole.
esempio
riprendiamo la foto del nostro gattino
il codice con l'aggiunta di ALT sarà:
<img src="gattino.jpg" width="300" height="200"
alt=" foto di gattino tigrato" border="0" />
*v. la guida rendiamo un sito accessibile
i siti della pubblica amministrazione devono rispettare le normative sull'accessibilità
Di
sicuro il futuro dell'Intelligenza Artificiale (IA) è in divenire e
tutto da definire, sia a livello tecnico sia legislativo. Le varie
controversie renderanno necessario un sistema di tutela normativa che
regolamenti le creazioni realizzate con IA valutando i vari aspetti. 
