Le mie immagini su WEB: l ABC per iniziare 6 maggio 2008 1
1) Le nostre immagini su internet; perchè? 2) il WEB...il pc di chi accede (il client)...il sito (server); 3) costruzione del sito (design, strumenti di editing e di testing...l html); 4) un esempio elementare di struttura sito; 5) pubblicazione del sito (strumenti, cenni all FTP ed ai freeware disponibili); 6) manutenzione ed aggiornamento; 7) i link dove trovare info. Le mie immagini su WEB: l ABC per iniziare 8) i CSS (costruire una sola volta l impronta grafica del sito e usarla per alleggerire le pagine); 9) l organizzazione delle informazioni (per riuscire a gestire siti complessi con molte foto); 10) che cos e un linguaggio di scripting lato server per far interagire la base dati con le pagine (con conseguente introduzione del concetto di pagine dinamiche); 11) cenni di javascript. 2
3
4
5
6
7
8
Programmare è difficile! 9
Fare un bel sito è facile! 10
12
http HyperText Transfer Protocol (protocollo di trasferimento di un ipertesto). Usato come principale sistema per la trasmissione di informazioni sul web. 13
14
FTP Il File Transfer Protocol è protocollo antico (la prima specifica risale al 1971), ha subito una lunga evoluzione negli anni; ha come principali obiettivi : Promuovere la condivisione di file Incoraggiare l'uso indiretto o implicito di computer remoti. Risolvere in maniera trasparente incompatibilità tra differenti sistemi di stoccaggio file tra host. Trasferire dati in maniera affidabile ed efficiente. 15
16
17
18
19
WYSIWYG What You See Is What You Get (quello che vedi è quello che ottieni) 20
21
22
23
24
25
Jalbum JAlbum permette di creare gallery di immagini digitali. Il software è semplice da utilizzare, per inserire le immagini basta trascinarle nell'apposita area. Le thumbnails e le pagine HTML da pubblicare vengono create automaticamente. Per creare le gallerie è possibile utilizzare vari template. Supporta i formati IPTC/EXIF, i fogli di stile ed i filtri. Il programma integra un client FTP/FSTP che permette il trasferimento dei file sul server senza la necessità di utilizzare un'altra applicazione. 26
27
28
HTML HTML (Hyper Text Mark-Up Language) è il linguaggio usato per descrivere i documenti ipertestuali disponibili nel Web. Tutti i siti web presenti su Internet sono costituiti da codice HTML, il cui codice viene letto ed elaborato dal browser che poi genera la pagina come noi la vediamo. Non è un linguaggio di programmazione, ma un linguaggio di markup, ossia descrive il contenuto, testuale e non, di una pagina web. 29
30
31
<HTML> <HEAD> </HEAD> <TITLE> Pagina Fotografie </TITLE> <BODY BGCOLOR="yellow"> <TABLE ALIGN=CENTER> <TR> <TD ALIGN=CENTER> <IMG SRC= uno.jpg"> </TD> </TR> <TR> <TD ALIGN=CENTER> <IMG SRC= due.jpg"> </TD> </TR> </TABLE> </BODY> </HTML> 32
dove posso trovare le informazioni? www.html.it http://xhtml.html.it/guide/leggi/51/guida-html/ 33
In ogni caso mantenere ordine! 34
35
36
SQL Il termine database indica un archivio di dati strutturato in modo tale da consentire la gestione dei dati stessi (inserimento, ricerca, cancellazione, aggiornamento) da parte di applicazioni software. L'SQL è uno strumento per lavorare con database che seguano il modello relazionale. 37
Un possibile approccio 38
39
40
41
PHP PHP (acronimo ricorsivo che sta per PHP: Hypertext Preprocessor) è un linguaggio di scripting interpretato concepito per la realizzazione di pagine web dinamiche. Attualmente è utilizzato principalmente per sviluppare applicazioni web lato server ma può essere usato anche per scrivere script a linea di comando o applicazioni standalone con interfaccia grafica. 42
43
44
45
46
CSS I fogli di stile a cascata (Cascading Style Sheets) vengono usati per definire la rappresentazione di documenti HTML. La loro introduzione si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare. 47
48
Javascript JavaScript è un linguaggio di scripting che che offre la possibilità di poter eseguire funzionalità complesse. Il codice viene un interpretato dal browser che esegue riga per riga in modalità runtime quanto trascritto nello script. 49
Immagine uno.jpg due.jpg tre.jpg Archivio Fotografo Paolo Danilo Danilo Tipo Natura Ritratto Natura 50
Immagine uno.jpg due.jpg tre.jpg Archivio Fotografo Paolo Danilo Danilo Tipo Natura Ritratto Natura SELECT Immagine FROM archivio WHERE Fotografo = Danilo AND Tipo = Natura; 51
Immagine tre.jpg Archivio Fotografo Danilo Tipo Ritratto SELECT Immagine FROM archivio WHERE Fotografo = Danilo AND Tipo = Ritratto; 52
<HTML> <HEAD> </HEAD> <TITLE> Pagina Fotografie </TITLE> <BODY BGCOLOR="yellow"> <TABLE ALIGN=CENTER> <TR> <TD ALIGN=CENTER> <IMG SRC= due.jpg"> </TD> </TR> <TR> <TD ALIGN=CENTER> descrizione fotografia </TD> </TR> </TABLE> </BODY> </HTML> 53
54
<?php include("config.inc.php"); $db = mysql_connect($db_host, $db_user, $db_password);<html>?> <HEAD> <TITLE> Pagina Fotografie </TITLE> </HEAD> <BODY BGCOLOR="yellow"> <TABLE ALIGN=CENTER> <TR> <TD ALIGN=CENTER> <IMG SRC="tre.jpg"> </TD> </TR> <TR> <TD ALIGN=CENTER> descrizione fotografia </TD> </TR> </TABLE> </BODY> </HTML> 55
<?php include("config.inc.php"); $db = mysql_connect($db_host, $db_user, $db_password);<html>?> <HEAD> <TITLE> Pagina Fotografie </TITLE> </HEAD> <BODY BGCOLOR="yellow"> <TABLE ALIGN=CENTER> <TR> <TD ALIGN=CENTER> <IMG SRC="tre.jpg"> </TD> </TR> <TR> <TD ALIGN=CENTER> descrizione fotografia </TD> </TR> </TABLE> </BODY> </HTML> 56
[ ] <?php $query = ( SELECT Immagine FROM archivio WHERE Fotografo = Danilo AND Tipo = Natura; ); $result = mysql_query($query); while ($row = mysql_fetch_array($result)) { echo ( <TD>. $row[immagine]. </TD> ); }?> [ ] 57
58
<?php // File and new size $nomefile = 'test.jpg'; $percentuale = 0.5; // Content type header('content-type: image/jpeg'); // Get new sizes list($width, $height) = getimagesize($nomefile); $newwidth = $width * $percentuale; $newheight = $height * $percentuale; // Load $thumb = imagecreatetruecolor($newwidth, $newheight); $source = imagecreatefromjpeg($nomefile); // Resize imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); // Output imagejpeg($thumb);?> 59
60
EasyPHP (www.easyphp.org) permette di far funzionare localmente (senza connettersi ad un server esterno) degli script PHP. EasyPHP è un ambiente di sviluppo comprendente Apache, MySQL), PHP e un amministratore di database MySQL con interfaccia grafica chiamato phpmyadmin. Permette di installare in un volta sola tutto il necessario per iniziare lo sviluppo locale di PHP. Offre il vantaggio di installare tutti i software necessari per la progettazione e il funzionamento di un sito web in locale : è' possibile vedere le pagine progettate semplicemente digitando l'indirizzo: http://localhost nella barra degli indirizzi del proprio browser. 61
62