Esame finale

Come stabilito, le date per l'esame sono:
Giovedì, 26, alle 17,00 - Esame pratico (con Prof. Luiz)
Venerdì, 27, alle 16,05 - Esame teorico (con Prof. P. Martín)

Esame teorico
Seguire i parametri che abbiamo stabilito, in base alla proposta di Roberto.

Esame pratico
Consisterà nel dimostrare la capacità di creare ex nuovo un file html, editarlo con DreamWeaver e metterlo OnLine con FileZilla. Ecco i passi concrettamente parlando.
1. Creare un nuovo file in DreamWeaver
2. Mettere un titolo e scriverci del testo come contenuto
3. Inserire un'immagine, magari presa da internet (trovarla su google, salvarla nel proprio sito e poi inserirla nel file creato in Dreamweaver).
4. Linkare una frase del contenuto del file creato con un sito esterno (http://www.google.com) e com un file del proprio sito
5. Aprire FileZilla e trasferire i files (file html e immagine) modificati.
6. Aprire il browser e vedere se il file modificato è corretamente visibile OnLine

Pagine dinamiche con PHP

Per realizzare pagine dinamiche non possiamo limitarci ai filie html. Dobbiamo invece scegliere un linguaggio e creare i files con le loro terminazioni. I linguaggi piu comuni, nella web sono ASP (microsoft) e PHP (open source).
Per creare una pagina in PHP, prima di tutto, nel momento di salvarla devo per forza chiamarla con la terminazione php (ad esempio: prova.php).
Il linguaggio PHP permette di fare tante cose, dalle piu semplice alle piu complicate. Ad esempio, con una riga di codice posso mostrare la data attuale:
<?php echo date("d/m/Y H:i:s"); ?>
Questo codice va inserito in modalità "codice" e non "Design" (in Dreamweaver).
Altro uso semplice, ma molto pratico è l'uso delle variabili passate con il link. Cioè, posso creare un link come questo: http://www.abiblia.org/aula/prova.php?chiave=5 In questo caso la variabile "chiave" ha il valore "5". Quindi usando del codice PHP posso fare una pagina mostrare certo testo se il valore é uguale a "5". Se invece il valore é 4, mostro altro e così via. Il tutto nella stessa pagina. Il vantaggi è che con un'unica pagina mostro cose diverse, dipendendo del valore presente nella variabile del link (chiave in questo caso).

Per fare questo procedura è la seguente (e qui diventa un tantino complicato):

<?php
//questa riga qui sotto serve perche il codice sappia qual'è il valore
$chiave = $_GET['chiave'];
?>
<?php
//inizio la procedura se il valore è 1
if ($chiave == '1'){
?>
Qui iscrivo il testo in caso il valore è 1
<?php
}
//finisco la procedura se il valore è 1
?>
<?php
//inizio la procedura se il valore è 2
if ($chiave == '2'){
?>
Qui iscrivo il testo in caso il valore è 2
<?php
}
//finisco la procedura se il valore è 2
?>

Si può vedere in questo link gli esempi qui indicati.

Video YouTube nel proprio sito

Per inserire dei videos di YouTube (anche yahoovideo) nel proprio sito basta copiare il codice da incorporare offerti dai siti e incollarlo nella propria pagina web. Per YouTube basta seguire i passi indicati in questa immagine

 

Ricordiamoci che chi ha inserito il video puo aver scelto di non attivare la possibilità di condivisione. Quindi, se non trovati "Codice da incorporare" vuol dire che è stata una scelta dell'autore del video.

In questo modo usiamo nel nostro sito dei video degli altri. Se vogliamo mettere i nostri video su youtube e usarli nelle nostre pagine, sfruttando le tecnologie loro, dobbiamo scriverci nel sito di YouTube.

Per gli altri siti che lavorono con video, incorporarli nel nostro sito è ugualmente semplice. Basterà cercare dove offrono il codice da incorporare.

Visualizzazione degli archivi PDF nel proprio sito

Delle volte ci troviamo davanti a pagine che offrono delle pubblicazioni cartacee in formato PDF facilmente navigabile (come sfogliare un libro). Mettere un simile strumento nel proprio sito è molto facile, usando ISSUU (www.issuu.com). L’unico problema è che il sito è in inglese. Comunque sono sicuri che riusciamo a cavarcela. Dobbiamo essere, fisicamente, in possesso di un file PDF.

1. È necessaria la registrazione sul sito (http://www.issuu.com/signup)
2. Fare il login
3. Dopo il login carichiamo il nostro archivio PDF cliccando sul tasto “UPLOAD”
4. Si apre una finestra dove devono essere inseriti dei dati (c’è anche la possibilità di inserire diversi files, clicando nel link “Upload many files” – In questo caso non chiedi di compilare dei dati).  Prima di tutto bisogna cliccare in “Browser” per indicare il file PDF che abbiamo sul nostro computer (si aprirà la gestione delle nostre cartelle). Una volta compilato i dati (si po’ anche lasciare in bianco), premiamo sul tasto “Upload File”.
5. Il sistema ci mette un po’ per processare le informazioni del file PDF.
6. Cliccando in “MyLibrary” troviamo tutti i documenti che abbiamo caricato sul sito di ISSUU.
7. Per prendere il codice da inserire nel sito, scegliamo, selezionandolo, il documento che ci interessa.
8. Una volta selezionato il documento, clicchiamo su “Embed”
9. Si apre una nuova finestra con diverse caselle che possiamo configurare, soprattutto “Color” e “Size” (misura – va bene 600). Scelta la configurazione, dobbiamo copiare il codice presente nella casella “Embed code” (basta cliccare dentro la casella e ctrl+c).
10. Dopo aver copiato il codice, apriamo in DreamWeaver la pagina in cui vogliamo inserire il PDF e, con la visualizzazione “Code” o “Split” (per vedere sia il disegno che il codice), incoliamo (ctrl+v) il codice copiato.  
11. Basta trasferire OnLine (FTP – FileZilla) il file modificato con DreamWeaver che il gioco è fatto.

Galleria di foto nel proprio sito

Il vantaggio più segnato portato dal web 2.0 è la possibilità è la possibilità di condivisione dei contenuti, usando strumenti messo a disposizione da gruppi di programmatori di grande società, quali google, ad esempio.

Picasa è lo strumento che offre Google per gestire le proprie fotografie, mettendo a disposizione ben 1GB di spazio gratuito per le nostre immagini (circa 4.000 foto). Questo strumento (e ci sono altre nella rete!) è utile perché possiamo usarlo per integrare nel nostro proprio sito le foto che carichiamo li. E il tutto con due righe di codici.

Per usare questa tool è necessario aver un account google. Chi ha già un indirizzo di posta gmail non deve creare un altro account. Creare un account in google è molto semplice e non significa dover creare un nuovo indirizzo. Possiamo usare anche un indirizzo yahoo, ad esempio. Basta accederea questo link e compilare il modulo.

Fatta l’iscrizione, entrando nel sito di google, bisogna fare il login. Dopo il login, nella parte superiore, a sinistra, dello schermo troviamo un menu orizzontale. Tra le voci del menu troviamo “foto” (se non la vediamo, dobbiamo cliccare in “Altro”). Per caricare le foto, è sufficiente cliccare nel tasto “Carica”, sempre nella parte superiore dello schermo. Vi chiederà un nome per l’album che state creando. E poi bisogna scegliere le foto da inserire nel album. Tutto è molto intuitivo e penso non ci siano problemi.

Creato l’album, lo troveremmo nelle miniature che appaiono quando clicchiamo in “home”, del menu di picasa. Cliccando sopra apriamo tutte le miniature della galleria. Nella colonna di destra troviamo una frase linkata: “Link a questo album”. Quando clicchiamo sopra si aprono due righe di codice: la prima è il link e la seconda un codice che mostra una foto dell’album. A noi, invece interessa inserire l’album nel sito. Pertanto cliccheremmo  sulla riga “incorpora slide show”. Si apre una finestra con il codice che ci interessa. Un quadretto giallo contiene il codice che servirà. Dobbiamo copiarlo, selezionandolo e copiando (destro del mouse + copia).

Dopo aver copiato il codice, dobbiamo aprire dreamweaver, aprire la pagina che conterrà questo codice. Essendo un codice, non lo possiamo inserire nella modalità design. Quindi, dopo aver aperto il file nel quale vogliamo inserire l’album, scegliamo la modalità di visualizzazione “Split” (cioè, vediamo il codice e il disegno). Per essere sicuri di inserire nel posto giusto, clicchiamo col cursore del mouse, nel disegno, nel punto in cui vorremmo inserire l’album. Quindi vedremmo il cursore anche nel codice. Facciamo un click con il mouse nel punto giusto del codice e incolliamo il codice copiato da Picasa.

Basta salvare e trasferire l’archivio Online e avremmo un bell’album nel nostro sito.

Uso delle immagini (carrosel e galleria)

Una delle necessità classiche del sito web sono gli album fotografici. Un sito ben fatto gestisce per conto suo ogni albo. Tuttavia non è male usare degli strumenti online. Uno di questi è picasa, di google. Basta avere un account con google e il gioco è fatto. Possiamo creare degli albun caricando le nostre foto su google e poi mostrarle sul nostro sito. Guardate questo esempio.

Se vogliamo, invece, dare un tocco di modernità al nostro sito, possiamo inserire un "carrosel" (immagini che scorrono), sfruttando JQuery, una piattaforma javascript. Vi propongo un esempio, che potete scaricare (file zip) per usare nel vostro sito, con semplice modifiche.

È semplice costruire un sito con grafica attraente usando gli strumenti messi a disposizione del web 2.0

Immagini in Dreamweaver

Dopo aver editato l'immagine conforme i parametri desiderati, la salviamo nella cartella del sito che abbiamo creato a posta per metterci le nostre immagini. Se prendiamo l'immagine dal web, basta cliccare con il destro del mouse e usare l'opzione "Salva immagine con nome".
Aperta la pagina in cui dobbiamo inserire l'immagine, certifichiamo di mettere il cursore nel punto in cui la vogliamo. Possiamo quindi seguire l'opzione dal menu Insert + images + ok
Nella finestra che appare bisogna compilare il campo "Alternate text". Questo sarà il testo che apparirà quando l'utente andrà col mouse sull'immagine.
Cliccando sull'immagine, nella parte inferiore dell'area di lavoro di Dreamweaver troviamo le sue proprietà. Possiamo impostare alcune caratteristiche:
Align - mettendo, ad esempio, right, definiamo che l'immagine si sposterà a destra e l'eventuale testo scorrerà intorno.
Bordo - definisce il bordo dell'immagine
VSpace - É bene mettere "5". Definisce lo spazio tra l'immagine e l'eventuale testo (sopra e sotto)
HSpace - É bene mettere "5". Definisce lo spazio tra l'immagine e l'eventuale testo (destra e sinistra)

Abbiamo anche la possibilità di creare delle "aree cliccabile" dentro dell'immagine. Cioè, invece di mettere un link che comprende tutta l'immagine, possiamo dire, ad esempio, che cliccando sulla sua parte superiore  andiamo ad una pagina, mentre cliccando in quell'inferiore finiremo su altra pagina.
Per usare questo strumento, tenendo selezionada l'imagine, come sopra, nelle sue proprietà troviamo "Map". Scegliamo uno strumento tra i 3 disponibile e traciamo un disegno (tenendo premuto il tasto del mouse) sull'immagine.Fatto il nostro disegno, nella parte inferiore appare il quadro delle proprietà di questo disegno: link (ad esempio http://www.google.com), target (ad esempio "_blank") e Alt (la descrizione che sarà vista quando l'utente mette il mouse sopra).

Programmi per le immagini

Le immagini sono importantissime nel sito. Per gestirle conforme le nostre necessità è fondamentale l'utilizzo di un programma di edizione delle immagini. L'edizione basica spesso necessaria è il cambiamento delle misure. Le macchine fotografiche ormai fanno delle foto grandissime e pesanti. Metterli così come sono nelle nostre pagine significa rovinare il proprio layout e obbligare gli utenti ad attendere parecchio prima che la foto si carichi.

Il programma classico per l’edizione delle immagini è PhotoShop, che fa parte del pacchetto Adobe CS, insieme a DreamWeaver. E una soluzione costosa, ma molto potente.

Si fa strada tra gli utenti il programma Gimp, soprattutto perché gratuito e con strumenti che non fanno rimpiangere PhotoShop. Quest’ultimo programma po’ essere scaricato gratuitamente in http://gimpitalia.it/

Nel web si trovano diversi siti che offrono tutorials per i diversi programmi di grafica. Qui ne indico un paio.

Photoshop

1. Guida HTML.IT: http://grafica.html.it/guide/leggi/189/guida-photoshop-cs5/
2. Tutorials: http://www.lauragatto.net/category/photoshop

Gimp

1. Video guide in italiano: http://www.istitutomajorana.it
2. Guida HTML.IT: http://grafica.html.it/guide/leggi/15/guida-gimp/

Le tabelle con Dreamweaver

In Dreaweaver assicuriamoci che sia attiva la finestra inserisci (Finestra + inserisci). Clicchiamo sulla “linguetta” ‘layout’.

Apriamo la nostra pagina in DreamWeaver.  Di seguito ci posizioniamo, con il cursore sul punto in cui dovrebbe andare la tabella. Clicchiamo quindi sull’icona simile ad una tabella, nella linguetta “comuni”.

Si apre una finestra che domanda le proprietà della tabella che sto per inserire. Queste proprietà possono essere cambiate anche in un secondo momento. Per ora scegliamo 2 righe e 2 colonne. Mettiamo anche un bordo (1) per vedere bene come funzionano le tabelle.

Inserita la tabella, possiamo modificare ogni singola cella della tabella.

Ad esempio, per cambiare il colore di sfondo, ci posizioniamo col cursore sulla cella interessata. Nella parte inferiore dell’area di lavoro di DreamWeaver dovrebbe apparire “proprietà” (ci assicuriamo che sia spuntata l’opzione “html” di proprietà). In questa posizione sono presenti diverse opzioni: colore, altezza, larghezza.

Per aggiungere nuove righe, se necessario, devo assicurarmi che sia selezionata la linguetta “layout” della finestra “inserisci”. Ci mettiamo in una riga della tabella. Scegliamo quindi una delle opzioni rappresentate dall’icona di inserimento di righe e o colonne.

Per layout complessi possiamo procedere con inserimento di tabelle dentro di singole celle.

Possiamo provare costruendo una pagina simile a questa di questo link.

L' impaginazione di una pagina web

Se la nostra pagina contiene un testo unico, senza formattazione speciale, non abbiamo bisogno di preoccuparci con il layout della pagina, ma poiché il contenuto esige una presentazione particolare, il problema si pone. Prendiamo l'immagine sotto come un esempio.

Per formattare una pagina simile al disegno dobbiamo ricorrere alle tabelle o ai div. Esiste molta discussione su quale dei due metodi usare (vediamo qui lo svantaggio delle tabelle). Praticamente i siti moderni usano i div per la formattazione, mentre prima si usavano spesso le tabelle. Comunque le tabelle continuano a essere uno strumento valido, sopratutto in fase di apprendistato.
In relazione ai div, potete usare questo link per leggere e vedere degliesempi. Imparare il suo uso è fondamentale per il webmaster.
Noi iniziamo, con il prossimo post, imparando come usare le tabelle in Dreamweaver.
.

Un menu con DreamWeaver CS5

Il programma permette di creare, con pochi clicks un menu d’accordo con le nostre necessità, creando automaticamente tutti gli stili necessari.

1. Se ancora non visibile dobbiamo attivare il panello “Inserisci” (Finestra + Inserisci) – Il quadro con le differenti opzioni dovrebbe apparire sotto le voci del menu orizzontale del programma.
2. Dalle opzioni (linguette) scegliamo “Layout”.
3. Mettiamo il cursore nel punto dove vogliamo il nostro menu e clicchiamo sulla terza iconcina, “Barra di Menu Spray”.
4. Una finestra chiede conferma di quale tipo di menu vogliamo, orizzontale o verticale. Scegliamo “orizzontale”.
5. Automaticamente appare nella pagina un menu standard che possiamo modificare conforme le nostre esigenze.
6. Quando salviamo la pagina ci vieni ricordato che sono stati creati dei files (cartella “SpryAssets”), che devono essere trasferiti, via FTP, sul nostro server web.
7.  Per editare il menu, dobbiamo dividere lo schermo, per vedere il codice HTML, e cambiare le voci inserite automaticamente. Ogni menu si trova dentro del codice
8. Quindi possiamo eliminare o aggiungere delle voci al nostro piacimento.
9. Dreamweaver crea automaticamente un foglio di stile per il menu. Lo possiamo modificare, usando la solita finestra CSS.

Menu del sito con CSS

Costruire il sito significa pensare bene un menu. Ecco alcuni esempi, in puro CSS:

• Menu 1 - Orizontale
  Senza immagine - 1 unico livello con descrizione
  
• Menu 2 - Orizontale con riga sottostante
  Senza immagine - a 3 livelli
  
• Menu 3 - Orizontale
  Con immagini - unico livello con effetto selezione
  
• Menu 4 - Verticale
  1 livello, con immagini
  
• Menu 5 - Orizontale
  Con immagini - 2 livelli
  
• Menu 6 - Orizontale a tendina
  Con immagini - 2 livelli

Costruisci il proprio menu in css gratuitamente

http://www.cssmenumaker.com/

Modificare il file di foglio di stile con Dreamweaver

Esistono 2 modo di farlo

1. Aprire il file css (ad esempio "mio_stile.css") e cliccare sull’elemento che vogliamo cambiare (ad esempio la class “luca”.
   Nella finestra CSS appaiono tutte le attuali impostazioni seguita da un link “Aggiunge proprietà”, che offre la possibilità di scegliere altre proprietà da aggiungere. Inoltre, nella parte inferiore della finestra CSS appare un’icona a forma di matita. Cliccando in essa si apre il quadro che abbiamo usato quando abbiamo creato lo stile.

1. Un secondo modo è aprire qualsiasi file HTML  (ad esempio "prova.html") al quale è collegato il Foglio. Cliccando su qualsiasi elemento della pagina, un paragrafo, ad esempio, nella finestra CSS appaiono le proprietà che possono essere editate.

Cliccare qui per scaricare un file word con altre informazioni

Collegare il foglio di stile ad una pagina con Dreamweaver

1. Dopo aver finito il foglio di stile (mio_stile.css), creiamo una pagina html (File + New) – “prova.html”
2. Con in file “prova.html” aperto e la finestra dei CSS (a destra di Dreamweaver) visibile clicchiamo sull’icona catena, nella parte inferiore della finestra dei CSS
3. Si aprirà una finestra nella quale dobbiamo indicare il foglio di stile, presumendo che il CSS creato si chiami “mio_stile.css” 
4. A tutti i files del sito si deve ripetere questa procedura di associazione di foglio di stile al file

Scarica arquivo word con altre indicazioni

Creare un archivio CSS in Dreamweaver

1. Apriamo DreamWeaver e dall’elenco “Crea nuovo” scegliamo “CSS” 
2. Salviamo il file con un nome tipo “mio_stile” (automaticamente aggiungerà .css).
3. Salvato il file, tenendolo aperto, nell’area di lavoro di DreamWeaver, facciamo apparire il quadro relativo agli stile CSS
4. Per inserire nuovi elementi nel foglio di stile usiamo l’icona + messa alla parte inferiore del quadro di stile
5. Cliccando sull’icona appare una finestra nella quale dobbiamo scegliere tra 4 opzioni di stile:
   A. Classe: Possiamo inventare qualsiasi nome ("luca") e poi chiamare questo stile in ogni momento della nostra pagina
   B. ID – Possiamo inventare il nome ("matteo"), ma potremmo usarlo unicamente nell’elemento indicato, ad esempio nel paragrafo
   C. TAG – Definiamo lo stile che avrà determinato tag
   D. COMPOSTO – Definiamo alcune caratteristiche dei links 6.Una volta dato il nome o scelto l’opzione, si apre una nuova finestra dove definiamo le caratteristiche dello stile

Scarica file word con immagini guide

Foglio di stile (CSS)

Il CSS (Cascading Style Sheets) é un linguaggio che serve per formattare le pagine web. Attualmente siamo alla versione 3.0, uscita poco tempo fa.
In pocche parole, è un insieme di codice che determina le caratteristiche che certi elementi di una pagina devono avere. Ad esempio, metto tra questi codice le indicazioni che i links devono avere il colore arancione. Di conseguenza, tutti i links del sito avranno questo colore. E così via con altri elementi (paragrafi, immagini, titoli, ecc).

Il grande vantaggio è che, se cambio idea, basta andare nel codice che ho determinato il colore arancione, per i links, ad esempio, e cambiarlo in blu. Quindi tutti i links del sito diventano blu, senza che debba andare a cambiare il colore di ogni singolo link. Facendo così si separa il contenuto dallo stile e diventa veramente semplice gestire il sito.

Esistono 3 modi di usare i fogli di stile: (1) un file indipendente che contenga tutti i codici di stile, (2) mettere il codice dello stile all'inizio della pagina, (3) mettere lo stile insieme all'elemento html. Il modo migliore è creare un file indipendente.
Per usare la prima opzione, consigliabile, è necessario creare un file con l'estensione "css", ad esempio "mio_stile.css", e metterci li tutte le indicazioni. Poi, ogni pagina del sito dovrà avere un link a questo file.

Per linkare le pagine ad un file css esterno si usa questo codice:

<html>
<head>
<title>Esempio</title>
<link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/>
</head>

Lavorando con i links

Creiamo 5 pagine e li diamo questi nomi: pagine html: index.html, pagina1.html, pagina2.html, pagina3.html e pagina4.html.
Le pagine possono avere lo stesso contenuto, cambiando unicamente il titolo, come nell'immagine sotto.

Dobbiamo linkare le pagine tra di loro, seguendo questo schema:

FileZilla - Trasferire le pagine sullo spazio web

Per trasferire gli archivi dal nostro computer allo spazio che abbiamo acquistato, usiamo un programma chiamato FileZilla, gratis, uno dei piu popolare instrumento per l'FTP (File Transfer Protocol).
Il programma puo essere scaricato gratuitamente da questo link (scegliete la prima opzione).

Dopo l'istallazione, avendo in mano i dati fornti da ARUBA, nel nostro caso, procediamo nel seguente modo:

1. Dal menu orizzontale, scegliamo 'File' > 'Gestori siti...'
2. Nella finestra che appare, scegliamo l'opzione "Nuovo sito"
3. Di seguito compiliamo il modulo, nella parte dx della finestra, come indicato nella figura sotto, seguendo i punti 1, 2, 3 e 4.

• Finita la procedura, clicchiamo su "Connetti", nella parte inferiore. Le informazioni devono essere inserite soltanto nella prima

Una volta connessi, dobbiamo, con un doppio click o trascinando, passare l'archivio (immagine, archivio html) dal proprio computer a quello di Aruba. Per fare questo basta cercare il file nella parte sinistra della schermata e trasferirlo a quella destra, come mostra l'immagine qui sotto.

 

Per verificare se l'archivio è stato trasferito, scriviamo in un browser (internet explorer)  l'indirizzo:

www.miosito.org/nome_del_file_trasferito.estensioneFile

Se il browser non trova il file, vuol dire che l'abbiamo trasferito al posto sbagliato. Bisogna trasferire alla radice del sito, nella cartella principale.

Creazione nuovo sito con DreaWeaver

Prima di iniziare con Dreamweaver, creiamo nel nostro computer, in MyDocuments, una cartella che conterrà tutti i files del nostro site. La chiamiamo, ad esempio, "sito_web". Dentro di questa creiamo una cartella chiamata "immagini" dove andremmo a mettere tutte le immagini del sito. Ricordiamoci di non creare dei files con nomi contenendo spazi o lettere accentate.

1. Apriamo Dreamweaver e dal menu orizzontale scegliamo Site > New site.
2. Nel primo campo inseriamo un nome per il nostro sito, tipo “Il nostro sito”
   Nel secondo inseriamo l’indirizzo, ad esempio: http://www.ilmiosito.org
3. Nel quadro seguente, diciamo che non vogliamo usare una server tecnology
4. Nel terzo quadro spuntiamo “edit local copies” e, nel campo sotto, mettiamo il percorso dove se incontra la cartella che contiene tutti i files del mio sito, ad esempio C:\MyDocuments\miosito\
5. Nel 4 quadro, dal menu a tendina scegliamo “None” e clicchiamo in Next
6. Il 4 quadro riassume le impostazioni. Clicchiamo in “Done”
7. Completata l’operazione, dovrò vedere nel panello “Files” a destra dell’area di lavoro di DreaWeaver, l’elenco con le cartelle e files del nostro sito

Qualora volessimo cambiare le impostazioni del sito, basta scegliere, dal menu orizzontale, Site > Manage site

Un esempio di strutura/layout di un sito

Analisi dei menu - Struttura dei contenuti

Congregazioni:

1. Ordo Fratrum Minorum
2. Salesiani

Parrocchie

1. San Bernardo
2. Santa Monica

Pianificazione di un sito web - Primi passi

Quando si decide di creare un sito Web, è sempre utile pianificarlo prima di iniziare a creare le pagine e a scrivere il codice. La pianificazione del sito in anticipo può semplificare la creazione dell'aspetto complessivo del sito e dello spostamento in esso.
La dimensione di un sito Web spesso determina la quantità di tempo e le risorse dedicate alle pianificazioni. Un sito Web di piccole dimensioni, tipo brochure, che fornisce solo informazioni statiche, può essere considerato un sito relativamente semplice e richiede una pianificazione minima. Invece, un sito Web che accede a un archivio dati, autentica gli utenti e ha vincoli di localizzazione e accessibilità può richiedere più pianificazione. La disponibilità di un piano consente di risparmiare tempo nello sviluppo e nella manutenzione del sito.
Vogliamo trattare le informazioni che concernono il sito Web nell'insieme e che riguardano gli aspetti seguenti:

·         Il tipo di sito Web scelto

·         La struttura

·         Layout coerenti per tutte le pagine del sito

·         Organizzazione dei files del sito

Tipo di sito web

Basicamente il sito può essere di tipo statico o dinamico.

Statico se intendiamo mettere del contenuto in mostra, che dia delle informazioni che valgono per sempre: chi siamo, dove siamo, la missione, etc…

Il sito è dinamico se, ad esempio, inseriamo notizie. Ma pure se esiste interattività con gli utenti (FaceBook).

Bisogna considerare anche se ci saranno versioni in altre lingue.

La strutura

Si dovrebbe pensare un sito, a livello didattico, come un libro o una tesina, con le sue divisioni in capitoli e sottocapitoli. Bisogna strutturarlo in un massimo di 10 sessioni e poi trovare parole chiave che sintetizzino queste sessioni. Tali parole diventeranno il menu principale del sito. Ogni sessione può avere differenti sottotitoli, sempre sintetizzati con parole chiavi.

Layout

Il sito dove avere un disegno uniforme per tutte le pagine. La homepage può essere una eccesione.

Organizzazione dei files del sito

Per realizzare un lavoro pulito è fondamentale cominciare l’organizazzione del sito già sul proprio computer. Bisogna creare una cartella in MyDocuments e metterci dentro le sottocartelle come in questo esempio:

MioSito

            Pagine

            Immagini

            Stile

            Scripts

            Documenti

Analise dei siti web religiosi

Uno degli scopo del corso è creare una visione critica davanti ai siti web, soprattutto quelli religiosi. Guadagneremo confidenza con questa pratica attraverso gli esercizi fatti durante le nostre lezioni e le vostre analisi, che vorrei mettesti sul vostro blog.
Davanti ad un sito dovremmo fare alcune domande basiche:

1. Il sito è oggettivo – So cosa ci troverò?
2. Trovo facilmente il materiale ricercato?
3. La grafica è piacevole?
4. I colori aiutano la lettura o la disturbano
5. Com'è la navigazione?
   Andare da una pagina ad un'altra è semplice?
   C'è un menù chiaro?
6. È attualizzato?

Hosting - Abbonamento sito web

Ci sono tante ditte che offrono il servizio di hosting e dominio (posto dove metto i miei files e l'indirizzo del sito). Bisogna fare l'abbonamento ad una di loro, per avere un sito nella rete. I prezzi vanno da 20 a 100 Euro al mese, dipendendo dalle offerte e strumenti messi a disposizione. A seguire un elenco di siti per l'abbonamento.

1. http://www.lunarpages.com/ - Circa 70 Euro l'anno - Molto bono
2. http://www.aruba.it - A partire da 30 Euro l'anno - Molto popolare, ma con dei limiti
3. http://www.register.it - Il piu usato in italia - A partire da 70 Euro l'anno
4. http://www.hostingsolutions.it - A partire da 70 Euro l'anno

É importante osservare:

• Lo spazio che offrono (illimitado, 2GB, 1 GB)
• Se offre PHP e Database (MySQL), strumenti molto usati nei siti moderni
• Il traffico mensile. Cioè, quanto traffico il sito soporta. Ad esempio, alcuni mettono 20GB. Questo significa che un sito di 1 GB (totale dei files del sito) può essere scaricato 20 volte in un mese.
• Se include un dominio (normalmente sì), un indirizzo (www.miosito.org)

Aruba è una proposta molto interessante perche con 40 Euro x anno (bisogna includere MySQL, che non è compreso nel pacchetto basico) si ha tutto senza limite. Però da poco ha messo un blocco al trasferimento dei files (FTP) che rendi un po' fastidioso il mantenimento del sito.

La proposta di Lunarpages è la migliore, ma un po' più costosa.

Oggetivi Blog

Il nostro Blog dovrà essere un contenitore che raccoglie il materiale che produrremo durante il corso. Suggerisco di creare un blog con blogger.com, visto l'introduzione fatta nel corso dell’anno passato.

Ciascuno è libero di inventare. Però ci sono delle sessioni che vorrei fossero presenti sulla pagina del blog.

1. Il titolo, come sugerito da Fr. Martín, dovrebbe essere “Il sito Web religioso”
2. Una sessione con un elenco dei siti web che cercherà di analizzare durante questo semestre. Ogni settimana dovrá scrivere una breve critica di uno di questi sito, che sarà postata sul blog
3.  Un quadro che contenga le “Etichette” dei post. Infatti ogni post sará classificato d’accordo con l’assunto che tratta. Obligattoriamente avremmo queste etichette: Analise sito e Relazioni – I post inerenti ai compiti indicati da Fr. Martín, relazioni delle letture richieste
4. Un quadro di testo con la propria foto che contenga l’indirizzo e-mail come link
5. Un quadro di testo con il sito web religioso che si sviluppa durante il corso

Sintetizzo in quest’immagine quello che intendevo dire sopra

Iniciando il corso - Indicazioni generali

Sostanzialmente il nostro corso, a livello pratico, pretende da voi alcuni compiti

1. Gestione di un blog che sarà il contenitore dei compiti realizzati durante il corso
2. Lettura dei testi indicati dai professori
3. Attivazione di un account in un servizio di hosting professionale, a pagamento, che comprende anche un dominio (sito web e relativo spazio per gli archivi), magari con a disposizione un database, preferibilmente MySQL
4. Creazione e/o gestione di un sito web religioso, utilizzando Dreamweaver, di Adobe

Le lezioni pratiche si terrano tutti i giovedì, a partire dalle 17, nell'aula 4