introduzione allo sviluppo web - ineed.coffee · strumenti ‣ browser • microsoft internet...
TRANSCRIPT
![Page 1: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/1.jpg)
Introduzione allo sviluppo WebStudium Generale, a.a. 2013-2014, II semestre
1
![Page 2: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/2.jpg)
Contatto
‣ Daniel Graziotin
‣ http://task3.cc/teaching/introduzione-allo-sviluppo-web
2
![Page 3: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/3.jpg)
Strumenti
‣ Browser
• Microsoft Internet Explorer
• Mozilla Firefox
• Google Chrome
• …
‣ Editor di testo:
• Sublime Text 3
‣ Server:
• Apache 2.22.x o 2.24.x e PHP 5.X.
• XAMPP (Windows), LAMP (Linux), MAMP (OS X)
Per tutto il corso servono solo tre strumenti
3
![Page 4: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/4.jpg)
Strumenti
‣ Il programma che usate quando navigate nel Web. Serve a
• Scaricare ed aprire documenti remoti (che stanno su un server)
• Interpretare e visualizzare i documenti scritti in HTML
‣ Esempi di browser
• Internet Explorer è incluso in Windows
• Google Chrome: http://www.google.it/intl/it/chrome/browser/
• Mozilla Firefox: http://www.mozilla.org/it/firefox/new/
‣ Ne basta uno (per noi)
Browser
4
![Page 5: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/5.jpg)
Strumenti
‣ Sublime Text 3
‣ Download: http://www.sublimetext.com/3
‣ Non è gratis ma non lo si deve pagare per forza.
Editor di testo
5
![Page 6: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/6.jpg)
Strumenti
‣ Sublime Text 3
‣ Componenti aggiuntivi
‣ Package Control: https://sublime.wbond.net/installation
• Per installare componenti aggiuntivi
Editor di testo
6
![Page 7: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/7.jpg)
Strumenti
‣ Sublime Text 3
‣ Componenti aggiuntivi
‣ Package Control: https://sublime.wbond.net/installation
‣ Tag
• Per gestire meglio la programmazione Web
‣ Color Picker
• Per aiutare a scegliere i colori
Editor di testo
7
![Page 8: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/8.jpg)
Strumenti
‣ Per installare
‣ Copiare il testo da https://sublime.wbond.net/installation
‣ View->Show Console
‣ Incollare il testo nel campo che compare in basso (vedi prossima foto)
Editor di testo
8
![Page 9: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/9.jpg)
StrumentiEditor di testo
9
![Page 10: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/10.jpg)
Strumenti
‣ Premere INVIO
‣ Chiudere Sublime Text 3
‣ Riaprire Sublime Text 3
‣ Tools -> command palette
• Nella finestrella che compare, scrivere package
Editor di testo
10
![Page 11: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/11.jpg)
Strumenti
Se compaiono voci che iniziano con «Package»
TUTTO OK
Editor di testo
11
![Page 12: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/12.jpg)
Strumenti
‣ Tag
• Per gestire meglio la programmazione Web
• Tools -> command palette
• Scrivere install e premere INVIO
• Attendere pochi secondi la comparsa di un’altra finestra
• Scrivere Tag e premere INVIO
Editor di testo
12
![Page 13: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/13.jpg)
Strumenti
‣ Color Picker
• Per aiutare a scegliere i colori
• Tools -> command palette
• Scrivere install e premere INVIO
• Attendere pochi secondi la comparsa di un’altra finestra
• Scrivere Color Picker e premere INVIO
Editor di testo
13
![Page 14: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/14.jpg)
Strumenti
‣ XAMPP
‣ http://www.apachefriends.org/it/index.html
‣ Premere il tasto grigio XAMPP per Windows
• È a fianco del tasto verde Download
Server
14
![Page 15: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/15.jpg)
Strumenti
‣ XAMPP
‣ http://www.apachefriends.org/it/index.html
‣ Premere il tasto grigio XAMPP per Windows
• È a fianco del tasto verde Download
‣ Far partire l’installazione
• Premere Sì e OK ai due dialoghi iniziali
Server
15
![Page 16: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/16.jpg)
Strumenti
‣ Scegliere solo Apache e PHP
Server
16
![Page 17: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/17.jpg)
Strumenti
‣ De-selezionare Bitnami for XAMPP
Server
17
![Page 18: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/18.jpg)
Strumenti
‣ Se compare un avviso di sicurezza Windows
• Spuntare entrambe le caselle
Server
18
![Page 19: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/19.jpg)
Strumenti
‣ Se usate Skype
Server
19
![Page 20: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/20.jpg)
Strumenti
‣ Se usate Skype
• In Skype, Strumenti -> opzioni -> Avanzate
‣ De-selezionare
• Usa le porte 80 e 443 come alternative …
‣ Riavviare Skype
Server
20
![Page 21: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/21.jpg)
Strumenti
‣ Andare nella cartella
• C:\xampp\htdocs
‣ Creare una cartella chiamata admin
‣ Spostare tutti i file e le cartelle dentro alla cartella admin
‣ Andare nella cartella
• C:\xampp
‣ Click con il tasto destro sulla cartella htdocs
• Invia a -> Desktop (crea collegamento)
Server
21
![Page 22: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/22.jpg)
Strumenti
‣ Andare sul Desktop
‣ Ci sarà una cartella chiamata htdocs – Collegamento (o un nome simile)
‣ Rinominarla www
‣ Da ora in poi, le pagine Web andranno create lì dentro.
Server
22
![Page 23: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/23.jpg)
Strumenti
‣ Ogni volta che avviate il pc dovete avviare XAMPP
‣ Il programma che cercate si chiama «XAMPP Control Panel»
• Tasto Start -> Tutti i programmi -> XAMPP -> XAMPP Control Panel
Server
23
![Page 24: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/24.jpg)
Strumenti
‣ Ogni volta che avviate il pc dovete avviare XAMPP
Server
24
![Page 25: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/25.jpg)
Strumenti
‣ Aprire un terminale
‣ Digitare
• sudo apt-get install tasksel
‣ Premere INVIO e inserire la propria password
• È normale che non compaia nulla mentre la si digita
‣ Premere INVIO
‣ sudo apt-get install lamp-server
Ubuntu
25
![Page 26: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/26.jpg)
Strumenti
‣ Digitare• sudo adduser vostronomeutente www-data
• sudo subl /etc/apache2/sites-enabled/000-default
‣ Fare un search and replace di /var/www/
• Sostituire con /home/vostronomeutente/www/
‣ Digitare
• mkdir /home/vostronomeutente/www
‣ Riavviate il computer
Ubuntu
26
![Page 27: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/27.jpg)
Strumenti
‣ Creare una cartella chiamata www nella vostra Home
‣ Scaricare MAMP http://www.mamp.info/en/downloads/
‣ Installare
‣ Aprire MAMP (non MAMP pro)
‣ Click su Preferences -> Apache
‣ Per Document root, selezionarela cartella www prima creata
Mac OS X
27
![Page 28: Introduzione allo sviluppo Web - ineed.coffee · Strumenti ‣ Browser • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome ‣ Editor di testo: • Sublime Text](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f19df165e99cd510468e7e3/html5/thumbnails/28.jpg)
Strumenti
‣ Tutto è già installato
‣ Dovete cercare una cartella chiamata ISWdentro alla vostra home
‣ Lì dentro vanno le pagine Web
Computer del laboratorio
28