Steve Jobs - fondatore di Apple Inc.
 |
| la Home Page del nostro BLOG |
e un altro su come creare, personalizzare e pubblicare gratis un e-book
 |
i nostri tre e-book gratuiti |
A richiesta, adesso, proviamo a dare qualche consiglio sui siti web.
Non è semplice perchè ci sono moltissime informazioni e certamente non è possibile esaurire il discorso con un post (noi ci abbiamo messo anni prima di acquisire l'esperienza necessaria e continuiamo ancora ad aggiornarci e studiare), però, anche in questo caso (come per i blog) si possono utilizzare dei servizi online gratuiti o a pagamento che permettono di realizzare un sito web in modo abbastanza semplice, anche senza avere molte competenze tecniche, informatiche e grafiche (cosa invece indispensabile per realizzare un sito web da soli).
Solitamente si occupano della costruzione e messa in rete di un sito web singoli esperti professionisti o apposite agenzie di web design.
Ciò non toglie che possiamo provarci! Chi sia appassionato e interessato all'argomento, che abbia la voglia di mettersi in gioco e di imparare, di cominciare a documentarsi, studiare, magari di seguire dei corsi anche online e gratuiti, sappia comunque che occorrono tanta passione, pazienza, perseveranza, tempo, capacità intuitive e logiche e l'umiltà per riflettere e imparare dai propri errori.
Difficile ma non impossibile!
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!
 |
| fonte web |
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
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
 |
| fonte web |
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...)
Una volta pubblicato il sito web avrà, ad esempio, questa forma:
https://www.nomedelsito. it
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 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
- Javascript è un linguaggio per programmare e per creare vari effetti
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}
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 #
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
______________________________________
- prova.html
- stile_prova.css
- gattino.jpg
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:<!doctype html> <html > <head>
</head> <body> <div id="container">
<div id="header">
<div id="nav"> </div><--finenav-->
</div><--fine header-->
<div id="main"> </div><--finemain-->
<div id="sidebar"> </div><--fine sidebar-->
<div id="footer"> </div> <--fine footer-->
</div> <-- fine container--> 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
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
Una volta completata la pagina va salvato il file con nome.html, in questo caso sarà: prova.html e va trasferito sul server insieme al file CSS collegato in questo caso: stile_prova.css e all'immagine del gattino utilizzata: gattino.jpg
Se tutto è stato fatto nel modo giusto scrivendo nella barra del browser l'indirizzo dell'hosting web con l'aggiunta della /pagina
esempio: https://www.nomedelsito.it/prova.html
si vedrà la pagina creata.
vediamo ora come pubblicare la pagina "prova" altre informazioni
Tralasciamo di approfondire in questo post, tutte quelle premesse necessarie per la progettazione di un sito web e che riguardano:
1. la scelta del nome del dominio, è importante perchè poi sarà quella che verrà intercettata dai motori di ricerca; occorre controllare che non sia già stata scelta da altri e che ci caratterizzi.
2. l'analisi degli obiettivi da raggiungere e del target
3. l'organizzazione delle informazioni per ottimizzare l'alberatura e la struttura del sito
4. la palette di colori da usare e i font (caratteri adatti da usare)
5. le immagini (che siano personali o royalty-free ricordandosi del copywriter)
6. i contenuti e i testi controllando grammatica e sintassi
7. documentarsi sulla legislazione per non incorrere in sanzioni, riguardanti le linee guida sui cookie e la privacy *v. garante della privacy * v. Jubenda
Se invece non avete interesse e voglia di imparare a fare da soli, potete utilizzare le piattaforme per le quali non occorrono competenze informatiche anche se almeno le basi minime è meglio averle per sapere dove mettere le mani!
Per altre informazioni e chiarimenti potete scriverci ...
vitadashabby@gmail.com