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).