![Page 1: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/1.jpg)
Corso di Progettazione di Applicazioni Web e Mobile
Mirko Calvaresi
Università di Camerino - Mirko Calvaresi - Progettazione Applicazioni Web e Mobile
![Page 2: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/2.jpg)
HTML AND CSS3
Università di Camerino - Mirko Calvaresi - Progettazione Applicazioni Web e Mobile
![Page 3: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/3.jpg)
Let’s start with some good documentation
https://w3c.github.io/html/introduction.html#a-quick-introduction-to-html
https://html.spec.whatwg.org
Università di Camerino - Mirko Calvaresi - Progettazione Applicazioni Web e Mobile
![Page 4: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/4.jpg)
MODERN WEB PAGE ELEMENT
1. HTML2. CSS3. JAVASCRIPT
HTML defines the static structure of the page CSS the design JAVASCRIPT the dynamic and behaviour
![Page 5: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/5.jpg)
MODERN WEB PAGE ELEMENT
![Page 6: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/6.jpg)
JAVASCRIPT
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction
JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive.
![Page 7: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/7.jpg)
JAVASCRIPT
<!DOCTYPE html><html> <head> <title>Example</title></head> <body> <button id="hellobutton">Hello</button> <script> document.getElementById('hellobutton').onclick =function() { alert('Hello world!'); // Show a dialog varmyTextNode = document.createTextNode('Some new words.'); document.body.appendChild(myTextNode); // Append "Some new words" to the page }; </script> </body> </html>
Javascript API can manipulate the DOM (Document Object Model) adding dinamyc behaviour to the page
![Page 8: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/8.jpg)
JAVASCRIPT
<!DOCTYPE html><html> <head> <title>Example</title></head> <body> <button id="hellobutton">Hello</button> <script> document.getElementById('hellobutton').onclick =function() { alert('Hello world!'); // Show a dialog varmyTextNode = document.createTextNode('Some new words.'); document.body.appendChild(myTextNode); // Append "Some new words" to the page }; </script> </body> </html>
Javascript API can manipulate the DOM (Document Object Model) adding dinamyc behaviour to the page
![Page 9: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/9.jpg)
JAVASCRIPT FEAUTURE
class Rectangle { constructor(height, width) { this.height = height; this.width = width;
}}
JavaScript now supportes classes, introduced in ECMAScript 2015
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
![Page 10: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/10.jpg)
CSS
A language to control the page layout and style
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
![Page 11: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/11.jpg)
CSS SELECTOS
![Page 12: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/12.jpg)
Getting started
Università di Camerino - Mirko Calvaresi - Progettazione Applicazioni Web e Mobile
Install Node JS http://blog.teamtreehouse.com/install-node-js-npm-windows
https://bower.io
https://italia.github.io/design-web-toolkit/docs/sviluppare
https://getbootstrap.com/docs/3.3/getting-started/
![Page 13: Corso di Progettazione di Applicazioni Web e Mobile -lec2didattica.cs.unicam.it/lib/...di...web_e_mobile2.pdf · Corso di Progettazione di Applicazioni Web e Mobile Mirko Calvaresi](https://reader034.vdocuments.site/reader034/viewer/2022042919/5f61ef39fab12d1fff1cd1ac/html5/thumbnails/13.jpg)
BOOTSTRAP Template
Università di Camerino - Mirko Calvaresi - Progettazione Applicazioni Web e Mobile
https://getbootstrap.com/docs/4.1/getting-started/introduction/https://www.sitepoint.com/beginners-guide-node-package-manager/