Modulo di informatica

(1)

Modulo di informatica

Master di I livello in

• Gestione e Valorizzazione dei Beni Ambientali

•Economia Gestione e Valorizzazione dei Beni Culturali

(2)

orari

• 6 nov. ore 8-14

• 16 nov. ore 8-14.

• ??

(3)

Modulo di informatica

Master di II livello in

•Direzione e Management dei Beni Ambientali

•Direzione e Management dei Beni Culturali

(4)

orari

• 6 nov. ore 14-20

• 7 nov. ore 14-20

• 10 nov. ore 8-14

• 16 nov. ore 14-20

• ??

(5)

Docenti

• Prof. Stefano Bistarelli

• Dr. Pamela Peretti

(6)

Materiale del corso

• Disponibile su pagina web del corso

• http://www.sci.unich.it/~bista /didattica/master-tecweb/

(7)

Introduzione all’uso della macchina

• Il sistema operativo windows (vedi file windows.ppt)

• Le reti (vedi file reti.ppt)

(8)

esercitazione

• Nel proprio spazio di lavoro (cartella Documenti), creare una cartella di nome “esercizi". Nella cartella appena creata, creare le seguenti cartelle “es1", “es2",“es3"

• Creare un file testo con NotePad con il testo "Questo è di sicuro un file di caratteri" e salvare il file nella cartella “es1" con il nome

"unico.txt"

• Copiare il file "unico.txt" nella cartella “es2". A questo punto avrete due copie del file "unico.txt", una dentro “es1" e una su “es2".

• Modificare il testo del file "unico.txt" nella cartella “es2" in " Questa è una copia, l'originale è in es1"

• Creare dentro la cartella “es3” una cartella dal nome “immagini”.

• Con il trova-files (dal menù avvio) trovare tutti i files di tipo immagine, selezionarne 3 e copiarli in es3.

• Collegarsi a google (www.google.it) e cercare 2 immagini di animali

(9)

(10)

Capitolo 1

Intro e alcuni tag

(11)

Server e Browser

Internet Explorer Netscape Navigator Opera

Server

(12)

Server

• Server = computer particolari che forniscono servizi di accesso alle informazioni su rete

– sempre collegati tra loro e alla rete – contengono tutti i file del sito

– basta conoscere l’indirizzo del server – ricevuta la richiesta di visualizzare una

pagina del sito, il server invia i file che la compongono

(13)

Browser

• Browser = programma per visualizzare le pagine web (ed accederle tramite

Internet)

– comunica col server

• chiede la pagina

• riceve tutti i dati (spediti a “pacchetti”)

• li interpreta, ricostruendo la pagina

• visualizza il risultato sullo schermo

(14)

Pag4: html source

(15)

Pag5: html results

(16)

Tag:

• Tag contenitore

– html – head – title – body

– h1 … h6 – p

– em

• Tag vuoti

– Img

(17)

Conosciamo HTML-KIT

• Lab.

(18)

Esercizio pag10 20 min

(19)

(20)

(21)

Esercizio pag10 20 min

– Testo_ex_starbuzz_index_html.txt

• index.html

(22)

(23)

(24)

(25)

(26)

• Aggiungere le seguenti istruzioni di stile:

body {

background-color: #d2b48c;

margin-left: 20%;

margin-right: 20%;

border: 1px dotted gray;

padding: 10px 10px 10px 10px;

font-family: sans-serif;

}

(27)

Esercizio pag27 30 min

(28)

Esercizio mission.html

• Fotocopia tazza pag 27

(29)

• Aggiungere le seguenti istruzioni di stile:

body {

background-color: #d2b48c;

margin-left: 20%;

margin-right: 20%;

border: 1px dotted gray;

padding: 10px 10px 10px 10px;

font-family: sans-serif;

}

</style>

(30)

(31)

Capitolo 2

ancore

(32)

Pag44: le ancore!

(33)

Pag47: html source

(34)

(35)

Esercizio

• Scaricare i file che trovate on line dentro la cartella degli esercizi del capitolo 2:

(36)

1-Organizzare le directory!

(37)

Aprire lounge.html con html-kit

(38)

Provatelo …

• … non funziona …

– Perché???

(39)

Provatelo …

• … non funziona …

– Perché???

• Modifichiamo il path!!!

(40)

Cambiare path!

(41)

Fatelo voi!

• Cambiate path per directions.html e per le immagini

(42)

Risultato:

(43)

E ora:

• Aggiungiamo un link al padre

(44)

Controlliamo che tutti i file siano ok!

• Controlliamo il file elixir.html

– Non funziona link all’immagine!!

– Perché?

(45)

Controlliamo che tutti i file siano ok!

• Controlliamo il file elixir.html

– Non funziona link all’immagine!!

– Perché?

(46)

• E ora una sfida sui link tra voi!!

(47)

(48)

(49)

(50)

(51)

(52)

Cap 3

Quote <q> e <blockquote>

liste nesting entities

(53)

Un altro amico!

(54)

Come lo formattereste? Che tags?

(55)

(56)

Risultato:

(57)

Orafatelo voi!

• Partire da file

• journal_html.txt

– Creare pagina web aggiungendo i tag!

(58)

Aggiungere quotation <q>

• <q>A Journey ….. Segway</q>

(59)

Si vede? Non si vede?

• Dipende dal browser!

• Separazione stile visualizzazione da contenuti

(60)

E se la quotation e’ .. Un

paragrafo?

(61)

Blockquote!!

<p>

</p>

</blockquote>

(62)

Funziona?

• Ottenete questo?

(63)

Funziona?

• Ottenete questo?

• Il tag <br>

(64)

NOTA!! (riempite i puntini!)

• Tag vuoti

– <br>

• Tag contenitori

– <p>, …

• Tag inline

– <q>

• Tag blocco

(65)

liste

(66)

Come fareste voi ad ottenerle?

(67)

Come fareste voi ad ottenerle?

Fatelo anche voi nel vostro esercizio!!!

(68)

Uhm liste

• Ordinate <ol>

• …

• E non ordinate? … <ul> !!!

(69)

Esercizio! <ul>!

(70)

Nesting eserc pag 112

• Distribuire fotocopie pag 112 o visualizzarla a video

(71)

Regola! Nesting!

(72)

(73)

Ricordate!

(74)

Esercizio!

(75)

(76)

Esercizio ripasso tag!

(77)

Entities!!

• <html> <html>

• See w3schools.com/tags/ref_entities.asp

• www.unicode.org/charts/

(78)

Es pag115

• Crack the location! Fotocopie da consegnare

(79)

Divertitevi!

(80)

Cap 4

Link su nuova finestra (target=“blank”)

e a sezioni in documento (# e id)

(81)

Cap 5

Atributo alt, width, heigth su img Uso di programmi grafica

Lo fa pamela

(82)

• Fare anche colori a pag 364-374

(83)

Cap 6-7

Fino a XHTML

(84)

• Nesting immagini solo dentro un blocco!

• Doctype e meta per charset iso-8859-1

• Validare a validator.w3.org pagine fatte finora (dopo aver aggiunto doctype e

meta)

• Fotocopie pag 253-254

• Pag 259: cosa non si fa

(85)

Esercizio pag 260

• Trovare gli errori

(86)

• Pag 268: come passare a xhtml

• Pag 272 xhtml check list

(87)

Cap 8

Intro to css

(88)

• Struttura regole di stile pag 289

(89)

• Tag stile pag 291 o link a foglio esterno pag305

(90)

• Esercizio 292--:

– settare a marrone il colore dei paragrafi del file lounge.html

– Stile per headings (regole per piu’ di un elemento)

– Seconda regola solo per h1 (che aggiunge proprieta’ non comuni ad h2) pag 296

(91)

Esercizio: pag 304

• Creare file lounge.css

• E linkarlo come foglio stile da lounge.html, elixir.html e directions.html

(92)

EREDITARIETA’

(93)

EREDITARIETA’

(94)

EREDITARIETA’

(95)

EREDITARIETA’

(96)

EREDITARIETA’

(97)

EREDITARIETA’

(98)

EREDITARIETA’

(99)

(100)

SELETTORI DI CLASSE

(101)

(102)

SELETTORI DI CLASSE

(103)

SELETTORI DI CLASSE

(104)

CLASSI MULTIPLE E REGOLE DI

PRIORITA'

(105)

CLASSI MULTIPLE E REGOLE DI

PRIORITA'

(106)

(107)

(108)

Esercizio

(109)

(110)

• Validazione di fogli stile

– http://jigsaw.w3.org/css-validator/

(111)

(112)

• Tag stile pag 291 o link a foglio esterno pag305

(113)

Cap 9

Css fonts and colors

(114)

TEXT E FONTS

(115)

TEXT AND COLOR PROPERTY

(116)

TEXT AND WEIGHT PROPERTY

(117)

TEXT AND DECORATION

PROPERTY

(118)

FONT FAMILY

(119)

SPECIFING FONT FAMILY WITH

CSS

(120)

HOW FONT-FAMILY SPECIFICATION

WORK

(121)

(122)

(123)

(124)

(125)

(126)

(127)

(128)

(129)

(130)

(131)

(132)

(133)

(134)

Cap 10-11

Box model

(135)

a

(136)

(137)

Starting with a few simple upgrade

(138)

Esercizio per casa

(139)

Box Model

(140)

What you can do to boxes

(141)

(142)

(143)

(144)

Creating the guarantee style

(145)

(146)

(147)

(148)

Padding, border, margin for the

guarantee

(149)

Adding some padding

(150)

(151)

Adding some margin

(152)

(153)

(154)

Adding a background image

(155)

(156)

Test driving the background image

(157)

(158)

Fixing the background image

(159)

Fixing the background image

(160)

(161)

How do you adding padding only

on the left?

(162)

Are we there yet?

(163)

How do you increase the margin

just on the right?

(164)

(165)

(166)

(167)

(168)

The id attribute

(169)

How to use id in CSS

(170)

Using multiple style sheets

(171)

Style sheet for several media

(172)

Cap 11

(173)

• Div!!

• Esempio cat and dogs pag 433--436

(174)

Div

(175)

Div

(176)

How we can divide a page into

logical section

(177)

Identify your logical sections

(178)

Using <div>s to mark sections

(179)

Labelling the <div>s

(180)

(181)

Adding some style

(182)

Exposing even more structure

(183)

Adding structure on structure

(184)

• Div in the elixir!!

• Da pag 439 a pag 443

(185)

Div in the

Elixir

(186)

Taking the <div> for the test drive

(187)

(188)

Adding a border

(189)

An over-the-border test drive

(190)

Adding some

real style to

elixir section

(191)

Working on Elixir width

(192)

Test driving the width

(193)

Pag 444-446

• Spiegazione proprieta’ width dell’oggetto, del pading, del bordo e del margin

– Sommandoli si ottiene la larghezza totale

(194)

The width property specifies the

width for the content area only

(195)

(196)

(197)

• Continuando con elixir:

• Padding e margin, text-align: pag 447-449

• Esercizio pag 450!

• Color for h2 figlio di div! Pag 452-455

• Line height: 456

(198)

Adding the basic style to elixirs

(199)

Test driving the

new style

(200)