2008 Corso Base Programmazione Web
in ambiente Linux
●
●
Come funziona il web
(server web – client browser)
Come e' scritta una pagina web
(HTML)
●
Cosa sono i fogli di stile (CSS)
●
A cosa serve il php
●
A cosa servono i javascript
A cura di Samuele Cacchiarelli
2008 Corso Base Programmazione Web
in ambiente Linux
●
●
Come funziona il web
(server web – client browser)
Come e' scritta una pagina web
(HTML)
●
Cosa sono i fogli di stile (CSS)
●
A cosa serve il php
●
A cosa servono i javascript
A cura di Samuele Cacchiarelli
2009
Workshop
Programmazione e realizzazione di un
sito web con Linux
A cura di Samuele Cacchiarelli
Cosa ci serve?
●
Accesso al Server Web
Accesso Diretto o via FTP
●
Un editor di testi o specifico per HTML PHP
Vim, Bluefish, NetBeans
●
Un browser
Firefox, Explorer, Safari
●
Un programma di disegno e fotoritocco
GIMP
A cura di Samuele Cacchiarelli
Cosa ci serve?
●
Accesso al Server Web
Accesso Diretto o via FTP
●
Un editor di testi o specifico per HTML PHP
Vim, Bluefish, NetBeans
●
Un browser
Firefox, Explorer, Safari
●
Un programma di disegno e fotoritocco
GIMP
A cura di Samuele Cacchiarelli
Cosa ci serve?
●
Accesso al Server Web
Accesso Diretto o via FTP
●
Un editor di testi o specifico per HTML PHP
Vim, Bluefish, NetBeans
●
Un browser
Firefox, Explorer, Safari
●
Un programma di disegno e fotoritocco
GIMP
A cura di Samuele Cacchiarelli
Cosa ci serve?
●
Accesso al Server Web
Accesso Diretto o via FTP
●
Un editor di testi o specifico per HTML PHP
Vim, Bluefish, NetBeans
●
Un browser
Firefox, Explorer, Safari
●
Un programma di disegno e fotoritocco
GIMP
A cura di Samuele Cacchiarelli
Cosa ci serve?
●
Accesso al Server Web
Accesso Diretto o via FTP
●
Un editor di testi o specifico per HTML PHP
Vim, Bluefish, NetBeans
●
Un browser
Firefox, Explorer, Safari
●
Un programma di disegno e fotoritocco
GIMP
A cura di Samuele Cacchiarelli
Cosa bisogna sapere?
●
(x)HTML, CSS
Learning Web Design A Beginner's
Guide to HTML, CSS, Graphics
Jennifer Niederst Robbins
Paperback: 479 pages
Publisher: O'Reilly Media, Inc.; 3 edition (June 15, 2007)
Language: English
ISBN-10: 0596527527
ISBN-13: 978-0596527525
Product Dimensions: 9.7 x 8 x 0.9 inches
A cura di Samuele Cacchiarelli
Cosa bisogna sapere?
●
PHP
Learning PHP 5
David Sklar
Paperback: 368 pages
Publisher: O'Reilly Media, Inc.; 1st edition (June 25, 2004)
Language: English
ISBN-10: 0596005601
ISBN-13: 978-0596005603
A cura di Samuele Cacchiarelli
Come procedere?
Analizzare la struttura che si
vuole dare al sito
●
●
Quante pagine o sezioni?
Che tipo di contenuti deve avere
ogni pagina?
A cura di Samuele Cacchiarelli
Come procedere?
Analizzare la struttura che si
vuole dare al sito
●
●
BANNER
Quante pagine o sezioni?
Che tipo di contenuti deve avere
ogni pagina?
A cura di Samuele Cacchiarelli
Come procedere?
Analizzare la struttura che si
vuole dare al sito
●
●
Quante pagine o sezioni?
Che tipo di contenuti deve avere
ogni pagina?
BANNER
Menu
Link1
Link2
A cura di Samuele Cacchiarelli
Come procedere?
Analizzare la struttura che si
vuole dare al sito
●
●
Quante pagine o sezioni?
Che tipo di contenuti deve avere
ogni pagina?
BANNER
Menu
Link1
Link2
Contenuto
della pagina
A cura di Samuele Cacchiarelli
Come procedere?
Analizzare la struttura che si
vuole dare al sito
●
●
Quante pagine o sezioni?
Che tipo di contenuti deve avere
ogni pagina?
BANNER
Menu
Link1
Link2
Contenuto
della pagina
IMG
Creditts – contatti – ecc
A cura di Samuele Cacchiarelli
Come procedere?
Analizzare la struttura che si
vuole dare al sito
●
●
Quante pagine o sezioni?
Che tipo di contenuti deve avere
ogni pagina?
BANNER
Menu
Link1
Link2
Contenuto
della pagina
IMG
DISEGNARE UNA BOZZA DELLE
VARIE PAGINE
Creditts – contatti – ecc
A cura di Samuele Cacchiarelli
Come procedere?
Decidere uno stile grafico da dare
al sito
●
http://www.freecsstemplates.org/
●
http://www.free-css-templates.com/
A cura di Samuele Cacchiarelli
Cosa fare in questa fase?
●
●
●
Decidere le proporzioni e le dimesioni degli elementi che comporranno la
nostra pagina web
Disegnare gli elementi grafici del nostro sito
Creare infine uno o piu fogli di stile (CSS) da utilizzare per amalgamare
facilmente gli elementi grafici che vogliamo avere nelle pagine del nostro sito
A cura di Samuele Cacchiarelli
Quali strumenti utilizzare?
●
●
●
GIMP
Firefox con gli
add-ons
Web-Developer
BlueFish
A cura di Samuele Cacchiarelli
Quali strumenti utilizzare?
●
●
●
GIMP
Firefox con gli
add-ons
Web-Developer
BlueFish
A cura di Samuele Cacchiarelli
Quali strumenti utilizzare?
●
●
●
GIMP
Firefox con gli
add-ons
Web-Developer
BlueFish
A cura di Samuele Cacchiarelli
Risultato?
ALLA FINE DI QUESTA PRIMA
FASE DOVREMMO AVER
CREATO:
●
●
●
Almeno un file HTML da usare
come modello di pagina
Almeno un file CSS (foglio di stile)
da richiamare nei file html
Una cartella che contenga le
immagini e gli elementi grafici della
pagina
A cura di Samuele Cacchiarelli
Risultato?
ALLA FINE DI QUESTA PRIMA
FASE DOVREMMO AVER
CREATO:
●
●
●
Almeno un file HTML da usare
come modello di pagina
Almeno un file CSS (foglio di stile)
da richiamare nei file html
Una cartella che contenga le
immagini e gli elementi grafici della
pagina
A cura di Samuele Cacchiarelli
Risultato?
ALLA FINE DI QUESTA PRIMA
FASE DOVREMMO AVER
CREATO:
●
●
●
Almeno un file HTML da usare
come modello di pagina
Almeno un file CSS (foglio di stile)
da richiamare nei file html
Una cartella che contenga le
immagini e gli elementi grafici della
pagina
A cura di Samuele Cacchiarelli
Risultato?
ALLA FINE DI QUESTA PRIMA
FASE DOVREMMO AVER
CREATO:
●
●
●
Almeno un file HTML da usare
come modello di pagina
Almeno un file CSS (foglio di stile)
da richiamare nei file html
Una cartella che contenga le
immagini e gli elementi grafici della
pagina
A cura di Samuele Cacchiarelli
Prossimi Passi?
●
●
●
Analizzare più in dettaglio gli
elementi che devono essere
presenti dentro ogni pagina del sito
Distinguere gli elementi statici da
quelli dinamici (che cambiano
automaticamente al cambiare di un
determinato contesto)
Scomporre la pagina (file HTML) in
file piu piccoli che gestiranno i
singoli elementi del sito
A cura di Samuele Cacchiarelli
Prossimi Passi?
●
●
●
Analizzare più in dettaglio gli
elementi che devono essere
presenti dentro ogni pagina del sito
Distinguere gli elementi statici da
quelli dinamici (che cambiano
automaticamente al cambiare di un
determinato contesto)
Scomporre la pagina (file HTML) in
file piu piccoli che gestiranno i
singoli elementi del sito
A cura di Samuele Cacchiarelli
Prossimi Passi?
Banner
●
●
●
Analizzare più in dettaglio gli
elementi che devono essere
presenti dentro ogni pagina del sito
Distinguere gli elementi statici da
quelli dinamici (che cambiano
automaticamente al cambiare di un
determinato contesto)
Menu
Link
Corpo
Scomporre la pagina (file HTML) in
file piu piccoli che gestiranno i
singoli elementi del sito
A cura di Samuele Cacchiarelli
Prossimi Passi?
●
●
●
Analizzare più in dettaglio gli
elementi che devono essere
presenti dentro ogni pagina del sito
Banner
Menu
Link
Corpo
Distinguere gli elementi statici da
quelli dinamici (che cambiano
automaticamente al cambiare di un
determinato contesto)
Scomporre la pagina (file HTML) in
file piu piccoli che gestiranno i
singoli elementi del sito
A cura di Samuele Cacchiarelli
Prossimi Passi?
●
●
●
Analizzare più in dettaglio gli
elementi che devono essere
presenti dentro ogni pagina del sito
Distinguere gli elementi statici da
quelli dinamici (che cambiano
automaticamente al cambiare di un
determinato contesto)
CREARE FILE PHP
CHE GENERERANNO
AUTOMATICAMENTE
E DINAMICAMENTE
LE PAGINE HTML
Scomporre la pagina (file HTML) in
file piu piccoli che gestiranno i
singoli elementi del sito
A cura di Samuele Cacchiarelli
Come fare questi file php?
PROGRAMMAZIONE
STRUTTURATA
PROGRAMMAZIONE
AD OGGETTI (PHP5)
FRAMEWORK
MODEL VIEW
CONTROLLER
A cura di Samuele Cacchiarelli
Cosa serve in questa fase?
Il browser non elabora i file php ma
solo i file html
●
Per poter visualizzare le pagine
generate dinamicamente dai file php
abbiamo bisogno di utilizzare il
server web
A cura di Samuele Cacchiarelli
Cosa serve in questa fase?
Il browser non elabora i file php ma
solo i file html
●
Per poter visualizzare le pagine
generate dinamicamente dai file php
abbiamo bisogno di utilizzare il
server web
A cura di Samuele Cacchiarelli
AL LAVORO!
Presentazione realizzata con:
OpenOffice Impress
Gimp
A cura di Samuele Cacchiarelli