2008 Corso Base Programmazione Web in ambiente Linux

Transcript

1 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

2 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

3 2009 Workshop Programmazione e realizzazione di un sito web con Linux

4 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

5 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

6 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

7 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

8 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

9 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: ISBN-13: Product Dimensions: 9.7 x 8 x 0.9 inches

10 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: ISBN-13:

11 Come procedere? Analizzare la struttura che si vuole dare al sito Quante pagine o sezioni? Che tipo di contenuti deve avere ogni pagina?

12 Come procedere? Analizzare la struttura che si vuole dare al sito BANNER Quante pagine o sezioni? Che tipo di contenuti deve avere ogni pagina?

13 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

14 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

15 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

16 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

17 Come procedere? Decidere uno stile grafico da dare al sito

18 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

19 Quali strumenti utilizzare? GIMP Firefox con gli add-ons Web-Developer BlueFish

20 Quali strumenti utilizzare? GIMP Firefox con gli add-ons Web-Developer BlueFish

21 Quali strumenti utilizzare? GIMP Firefox con gli add-ons Web-Developer BlueFish

22 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

23 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

24 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

25 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

26 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

27 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

28 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

29 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

30 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

31 Come fare questi file php? PROGRAMMAZIONE STRUTTURATA PROGRAMMAZIONE AD OGGETTI (PHP5) FRAMEWORK MODEL VIEW CONTROLLER

32 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

33 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

34 AL LAVORO! Presentazione realizzata con: OpenOffice Impress Gimp