Il mio progetto finito

Ciao a tutti, sono Carla!

Di seguito vi racconterò in breve come ho affrontato la programmazione del mio sito. Se avete voglia, potete dare un'occhiata qui ⇉ http://www.peppahandmade.altervista.org/

In linea generale, ho fatto riferimento a due guide base online:

https://www.w3schools.com/default.asp & http://www.html.it/guide/guida-html/

Per la realizzazione della mia risorsa digitale, ho usufruito di un template responsive messo a disposizione da W3.CSS Templates. W3.CSS è un moderno framework con reattività integrata: possiede, quindi, delle classi di attributi prestabilite che vengono inserite direttamente nel documento HTML e che assegnano ai vari elementi le caratteristiche desiderate. Di conseguenza, è stato insidioso manipolare il template predefinito per renderlo congruo alle mie esigenze. 

https://www.w3schools.com/w3css/default.asp 

Il sito è stato riversato su Altervista.org e tutti i file e le cartelle relativi alla risorsa sono conservati su un hard disk esterno e su un pc.

Ho arricchito la mia risorsa utilizzando una fixed sidebar, che nel passaggio ad un piccolo schermo, si posiziona on top alla pagina, rimanendo comunque fissa durante lo scroll. Ho inserito anche l'automatic slideshow, usata per far scorrere automaticamente gli elementi (in questo caso immagini) ogni 5 secondi.

Ho riscontrato una maggiore difficoltà nell'inserimento di un portfolio gallery a due colonne: le foto che avevo a disposizione non si adattavano per nulla al contenitore, infatti, ho dovuto ridimensionarle utilizzando il programma di grafica e reinserirle. Ciò mi ha concesso di avere una risoluzione più o meno buona anche da piccolo schermo.

Nella sezione "contatti" sono stati inseriti i social media buttons, ognuno dei quali possiede un collegamento ipertestuale di riferimento. 

Per agevolare la lettura e non distrarre l'utente, il testo è disposto centralmente ed è stato utilizzato il font di base. L'uso di grassetto e corsivo è limitato al massimo; anche l'uso dei colori è stato ridotto al minimo indispensabile, con lo scopo di evitare disorientamento e mantenere uno stile coerente in tutta la risorsa. 

😊😊😊😊

TEMPLATE: cos'è e perché

DI COSA STIAMO PARLANDO?

Nel linguaggio informatico è un modello predefinito che consente di creare o inserire contenuti di diverso tipo in un documento o in una pagina web.

Sono quindi documenti d'esempio che vengono messi a disposizione gratuitamente o a pagamento su siti Internet, per lo sviluppo di altre pagine web con grafica e formattazione identiche ma contenuti diversi. Sono uno strumento utile e potente per chi vuole:

• creare un sito con uno stile uniforme pur non avendo molte competenze,

• usare un codice che spesso risulta corretto se convalidato,

• ottenere un layout 'user-friendly' e graficamente ricercato.

Solitamente vengono utilizzati i linguaggi principali del Web, l'HTML per i contenuti e il CSS per la formattazione.

COSA CONTIENE

Tra i file del nostro esempio di sito è sempre presente la pagina index.html (meglio non rinominarla), seguono poi le altre pagine di cui è composto il nostro modello e una cartella contenente vari file che gestiscono l'aspetto grafico. 

Insieme al file index e a quelli delle altre pagine (HTML) basta manipolare il file main.css (CSS) che corrisponde al foglio di stile del sito. 

DOVE TROVARLI

Qualche esempio di template su cui ci si può esercitare lo troviamo sul sito https://www.w3schools.com/ oltre a varie guide su come metter mano ai documenti HTML e CSS. Esistono poi anche altri siti come https://html5up.net/ e https://www.templatemonster.com/.

N.B.: sono molto utili per creare siti che non richiedono azioni di elevata difficoltà, ovvero creare siti molto semplici come blog di lettura. Ne esistono anche per creare mini "e-commerce" ma risultano più complessi da lavorare ed infine a pagamento. 

PRO

• Basta un editor per manipolare i codici (HTML e CSS), ad esempio Sublime Text
• Si trovano diverse funzionalità o codici gratis on-line per implementare il sito
• Viene fornito un "pacchetto" su cui lavorare
• Non è necessario conoscere linguaggi di programmazione se non elementi base di HTML e CSS
• Buon riscontro grafico, buona usabilità

CONTRO

• Le funzionalità sono limitate, non sempre si riesce ad ottenere quello che si vuole
• Il vostro sito potrebbe essere simile a quello di altri (tranne per i contenuti)
• Pur partendo da un modello semplice i codici sono numerosi, bisogna quindi conoscere i termini base di HTML e CSS per sapersi orientare e sapere dove mettere mano
• Un modo semplice e veloce per mettere online un sito web in tempi rapidi ma non sono adeguati per ogni tipo di progetto

CONCLUSIONI

Io ho provato ad usare un template per creare il mio sito, mi ha facilitato molto la situazione di partenza: una sorta di sito esempio nel quale ho trovato una impaginazione da cui partire. Il foglio di stile non è così intuitivo da manipolare e abbastanza lungo, mentre i fogli HTML sono semplici e immediati da modificare a proprio piacere. Consigliato se tra gli esempi disponibili on-line si trova un design simile a quello che vogliamo riprodurre con usabilità simile a quella che abbiamo pensato. 

WOWSlider: come creare e inserire una slideshow nel sito

DI COSA STIAMO PARLANDO?

Nel linguaggio informatico una slideshow è una modalità di presentazione di fotografie consistente nel farle scorrere automaticamente.

CREARE UNA SLIDESHOW

Un modo semplice per crearne una è utilizzare un tool da scaricare e installare sul computer. 

Uno di questi è WOW Slider che permette di creare e personalizzare la propria slideshow, infine ricavare i codici da inserire nella propria pagina HTML dove si vuole inserirla.

COME SI USA

Installiamo WOW Slider dal sito: http://wowslider.com/

Questo è un esempio di slideshow.

• Procuriamoci le foto che vogliamo utilizzare, meglio se di buona risoluzione e quanto più simile dimensione. 
•  Apriamo il tool che appare così:
  
• Ora basta selezionare le foto che ci interessano e trascinarle all'interno del box:
  
• A questo punto possiamo settare la slideshow come meglio preferiamo, animazioni, durata animazione, nome immagine, colore nome immagine, ecc.
• Una volta concluso il settaggio salviamo perché ci serviranno dei file della presentazione da unire a quelli che già abbiamo e che stiamo usando per costruire il sito (questi nuovi file diventeranno parte integrante di quelli su cui stiamo lavorando):
  
• Ora abbiamo salvato la presentazione sul computer in un luogo dove possiamo ritrovarla facilmente. Al termine del salvataggio si aprirà in automatico una pagina web con delle istruzioni da seguire per: 1)incorporare i file della presentazione (solo quelli che servono), che abbiamo creato, con quelli che già stiamo utilizzando 2)inserire i codici che ci vengono forniti per incorporare la slideshow nella pagina HTML
  

Modalità avanzate per gestire la navigazione

Il primo passo è avere nel div navigazione del CSS le categorie in formato testuale.

Nel codice HTML ogni voce ha una proprietà, messa all’interno dell’attributo “<a href”. Per esempio:  <a href=”estate.html”> estate </a>  Così richiamiamo la pagina estate.html e verrà visualizzato il testo “estate”.

Un’alternativa è usare il tag delle liste che setteremo con i fogli di stile. Per fare ciò dovremo inserire ogni blocco di codice dentro l’elemento per le liste <ul> </ul>. Ogni voce dovremo inserirla in un list item <li> </li>

Nel nostro esempio:

<div id="navigation">       navigazione

     <ul>

                <li> <a href="estate.html"> estate </a> </li>

                <li> <a href="autunno.html"> autunno </a> </li>

                <li> <a href="inverno.html"> inverno  </a></li>

                <li> <a href="primavera.html"> primavera </a> </li>   

     </ul>

     

 </div>

Con i fogli di stile è possibile creare altri livelli. Nel nostro caso: quello che metto dentro le graffe di div#navigation ul{} vale solo quando usiamo l’elemento per le liste <ul>. Lo stesso vale per div#navigation li{} e gli altri.

Per mettere i blocchi in linea dovremo inserire inline dentro div#navigation li{}.

Con <a> creiamo i link

Possiamo gestire la proprietà del “mouse over” inserendo alcune proprietà con div#navigation a:hover, nel nostro caso il testo diventa bianco e si sottolinea.

Le componenti come div#navigation a:hover  si chiamano pseudoclassi. 

Le pseudoclassi sono quelle che con i “:” posso dare a parti specifiche del codice alcune proprietà, diverse da quelle del foglio di CSS.

Per maggiori info sulle pseudoclassi:

http://www.html.it/pag/14218/le-pseudo-classi/

http://www.yourinspirationweb.com/2016/01/12/guida-css3-pseudo-classi-e-pseudo-elementi/

http://lau.csi.it/risorse/CSS2/pseudo-classi.shtml

Menu statico, con le liste, tutorial

http://www.html.it/pag/18988/menu-orizzontale-statico-con-le-liste/

Editore Sublime - link downloard

http://www.sublimetext.com/3

Come disporre le immagini nel div content

Per disporre le immagini nel div content si può partire dal HTML, assegnando al tag  <img>  l'attributo "class". Questo permetterà poi, tramite CSS, di poter posizionare l'immagine dove vogliamo. L'attributo "class" non modifica in alcun modo la presentazione della pagina se non trova corrispondenza anche nel foglio di stile.

In HTML, nel tag <img> dovremo aggiungere, oltre agli attributi "src=nomeimmagine.png" e "alt=nomeimmagine", anche l'attributo "class=nomeimmagine".

es.  <img class="contatti" src="immaginecontatti.png" alt="contatti">

Una volta salvato in HTML si passa al foglio di stile.

In CSS il selettore img. + il nome dell'attributo "class", serviranno ad assegnare le regole da attribuire all'immagine.

es. img.contatti { float: left; padding-bottom: 5% ; padding-right: 15% }