Informatica 4°
Informatica 4°
<!doctype html > dichiarazione che comunica al browser il tipo di documento che dovrà
interpretare, in modo che possa farlo correttamente
per fare commenti in html, racchiudere ciò che si vuole tra <!— commento —>
"viewport"
fornisce al
browser
istruzioni su
come controllare
le dimensioni
della pagina e la
scala iniziale.
width=device-wi
dth: Imposta la
larghezza del
viewport (la
"finestra"
attraverso la
quale il tuo sito
web è
visualizzato)
sulla larghezza
effettiva del
dispositivo.
initial-scale=1.0:
Imposta il livello
di zoom iniziale
quando il sito
viene caricato
per la prima
volta. Un valore
di 1.0 indica
nessun
ingrandimento o
rimpicciolimento
iniziale.
Questi parametri
sono
fondamentali per
garantire che il
tuo sito web sia
visualizzato
correttamente su
una vasta
gamma di
dispositivi,
adattando la
larghezza del
contenuto alla
larghezza
effettiva dello
schermo del
dispositivo e
impostando una
scala iniziale
appropriata. In
sintesi, questi
tag
contribuiscono a
migliorare
l'esperienza
dell'utente su
dispositivi con
schermi di
diverse
dimensioni,
supportando
così il design
responsivo del
tuo sito.
text: attributo
che imposta il
colore delle
scritte
background:
attributo che
consente di
impostare
un’immagine
come sfondo
bgcolor: attributo
che imposta il
colore dello
sfondo
onload:attributo
che fa eseguire
la funzione
specificata in
script quando si
verifica il
caricamento
completo del tag
body della
pagina
<p> </p> tag che align, class, align: attributo <p align=“center”
definisce un eventi, id che allinea in </p>
paragrafo, ossia una certa
un blocco di posizione un
testo standard elemento,
paragrafi,
immagini,
tabelle, ecc della
pagina web
color: attributo
che definisce il
colore del tag
<a> </a> tag che rende href, target href: contiene il <a>
possibile percorso del link href=“https://chat.o
l’ipertestualità, penai.com/c/157a5
collegamenti o target: b0a-4648-4bb2-b6
link tra le stabilisce se il 4b-fa8ac1e4aec5”
risorse web, link viene aperto target=“_blank/_sel
quindi tra una nella stessa f” Premere su
pagina web e pagina della questo link per
un’altra pagina web vedere un gatto
originale (_self) </a>
o in un’altra
pagina (_blank)
width: attributo
che definisce la
larghezza di
un’immagine,
riducendo o
aumentando le
sue dimensioni
rispetto alle
dimensioni
originali
height:attributo
che definisce la
larghezza di
un’immagine,
riducendo o
aumentando le
sue dimensioni
rispetto alle
dimensioni
originali
usemap:
attributo che
consente di
identificare
l’immagine
acquisita come
mappa
<footer>
<p>
disclaimer: tutto ciò
che state leggendo
è frutto della mia
interpretazione,
non affidatevi
troppo a una come
me
</p>
</fotter>
<ol> </ol> tag che type, start type: attributo <ol type=“i”
definisce un che stabilisce start=“10”>
elenco puntato l’indice della lista <li> ananas</li>
secondo un ordinata, <li> mela </li>
indice ordinato, a=lettera, <li> penna </li>
come un i=numero </ol>
numero romano
normale, 1=numero di
romano o una partenza
lettera
start=indice di
partenza
🖊️
<dt> </dt> tag che <dd> frutto rosso o verde</dt>
contiene i <dt> penna </dt>
termini da <dd> utensile per scrivere </dd>
definire della </dl>
lista
rowspan:
attributo che
indica quanti
riquadri verticali
della tabella una
determinata
cella dovrebbe
occupa
CERCHIO
<svg width=“70”
height=“75” >
<a href=“link”
target=“_blank/_sel
f”>
<circle cx=“100”
cy=“50” r=“40”
stroke=“red”
stroke-width=“5”
fill=“green” >
<text> fill=white
font-size=“40”
font-family=“verdan
a” x=45 y=50 CIAO
</text>
</a>
</svg>
ANIMAZIONE
<style>
rect {width: 100 px;
height:100 px;
background:red;
transition
duration:5s;}
<svg width=“400”
height=“400” >
</svg>
autoplay: fa
partire
automaticament
e il video inserito
muted: disattiva
automaticament
e l’audio del
video inserito
</audio>
<textarea></textar
ea>
<input
type="radio"
name="anni"
value="mag">si<br
>
<input
type="radio"
name="anni"
value="min">no<br
>
</fieldset>
</body>
</html>
colori in html
CSS: linguaggio dei fogli di stile che permette di trasformare l’aspetto visivo delle pagina
web, curandone l’estetica
per differenziare un link già visitato da uno da visitare, colorare il link, inserire nell’head il tag
style interviene sul colore del link,
</style>
attributi:
width: lunghezza contenuto
height: altezza contenuto
border: spessore cornice contento
padding: spazio tra il contenuto e la sua
cornice
margin: spazio tra la cornice e gli altri box
della pagina
DOM DOCUMENT
● document object model ● oggetto principale del DOM
● rappresentazione gerarchica e associato alla pagina web corrente.
strutturata di una pagina web che ● Attraverso esso è possibile
consente agli script, come quelli accedere agli elementi della pagina,
scritti in JavaScript, di accedere modificarne il contenuto, la struttura
dinamicamente e manipolare il o gli attributi e gestire eventi.
contenuto, la struttura e lo stile di ● document.getElementById(nome_id)
una pagina web. può essere utilizzato per ottenere un
● Rappresenta la pagina come un riferimento a un elemento HTML con
albero di oggetti, dove ogni nodo un determinato ID, infatti viene
dell'albero rappresenta un elemento invocato il metodo getElementById
della pagina (come tag HTML) e gli dell’oggetto document e gli viene
oggetti forniscono metodi e proprietà passato come parametro “id”, che è
per manipolare quegli elementi. il tag su cui si vuole agire
BOM: WINDOW
● browser object model oggetto chiave nel BOM che fornisce
● gerarchia di oggetti manipolabili un'interfaccia per interagire con la finestra
attraverso JavaScript che del browser e gestire vari aspetti
rappresentano l'interfaccia grafica dell'ambiente di esecuzione del JavaScript
del browser. all'interno di una pagina web
● comprende oggetti come document
e window
codice descrizione
compleanno="23112006";
somma=età+compleanno;
document.getElementById("types
4").innerHTML = "somma tra la mia età ed il
mio compleanno: "+somma;
document.getElementById("types
5").innerHTML = "somma tra la mia età ed il
mio compleanno: "+età+compleanno+". In proprietà dell’oggetto
questo caso invece, siccome età e variabili con cui si esegue il ciclo for/in, che
compleanno non sono le prime variabili a - non ha un indice numerico
comparire vengono interpretate come - esegue in modo iterativo le
stringhe da accodare"; istruzioni tra {} ripetendole una
document.getElementById("types volta per ogni oggetto
6").innerHTML = Questa riga non verrà
stampata a video perchè vanno sempre
messi gli apici!!+età+compleanno;
</script>
<!-->ARRAY<->
</script>
<p id="unoo"></p>
<p id="due"></p>
<p id="tre"></p>
<p id="quattro"></p>
<p id="cinque"></p>
<p id="sei"></p>
<p id="sette"></p>
<p id="otto"></p>
<p id="nove"></p>
<p id="dieci"></p>
<p id="undici"></p>
<script>
var numeri_angelici = [111, 222, 333];
var misto = [111, "ananas", 33.3];
document.getElementById("unoo").innerHT
ML = numeri_angelici;
document.getElementById("due").innerHTM
L = numeri_angelici[1];
document.getElementById("tre").innerHTML
= sommaNumeri;
document.getElementById("quattro").innerH
TML = sommaNumeri;
}
document.getElementById("cinque").innerH
TML = numeri_angelici.length;
document.getElementById("sei").innerHTML
= frutti;
document.getElementById("sette").innerHT
ML = frutti.push("arancia");
document.getElementById("otto").innerHTM
L = frutti.unshift("pesca");
document.getElementById("nove").innerHT
ML = frutti.sort();
document.getElementById("dieci").innerHTM
L = frutti.shift();
document.getElementById("undici").innerHT
ML = frutti.pop();
</script>
<!-->ELENCHI<->
<p id=”elenco”> </p>
<script>
var elenco = "<ol>";
var i;
var frutti = ["mela", "ananas", "pera"];
for (i = 0; i < frutti.length; i++) {
elenco = elenco + "<li>" + frutti[i] + "</li>";
}
elenco = elenco + "</ol>";
document.getElementById("elenco").innerH
TML = elenco;
</script>
<!-->OGGETTO, ESEMPIO
SENZA METODI <->
<p id=”obj”> </p>
<script>
var oggetto= {nome=”rettangolo”,
lunghezza:16.5, larghezza:8.5};
var x, testo=” ”;
for (x in oggetto)
{
testo=testo+oggetto[x]+ “ ”;
}
document.getElementById("oggetto").innerH
TML =testo;
</script>
<!-->OGGETTO, ESEMPIO
CON I METODI<->
<p id="funzione"></p>
<script>
var oggetto =
{
nome: "Isabella",
anni: 17,
altezza: 160.5,
stampa: function()
{
return this.nome + " ha " + this.anni + " anni
ed è alta " + this.altezza + " cm";
}
};
document.getElementById("funzione").inner
HTML = oggetto.stampa();
</script>
<!-->OGGETTO 2, ESEMPIO
CON I METODI<->
<p id="obj2"></p>
<script>
var oggetto2 =
{
nome2: "Anna",
anni2: 16,
altezza2: 170.5,
stampa2: function(nome2, anni2,
altezza2)
{
return nome2 + " ha " + anni2 + " anni ed è
alta " + altezza2 + " cm";
}
};
document.getElementById("obj2").innerHTM
L = oggetto2.stampa2(oggetto2.nome2,
oggetto2.anni2, oggetto2.altezza2);
</script>
<!-->METODO COSTRUTTORE<->
<p id="m1"></p>
<p id="m2"></p>
<script>
function MetodoCostruttore (nome, anni,
altezza)
{
this.nome=nome;
this.anni=anni;
this.altezza=altezza;
};
var Elisa = new MetodoCostruttore("Elisa",
17, 165.5);
var Emma = new
MetodoCostruttore("Emma", 17, 162.5);
document.getElementById("m1").innerHTML
= Elisa.nome+" ha "+Elisa.anni+" anni ed è
alta "+Elisa.altezza;
document.getElementById("m2").innerHTML
= Emma.nome+" ha "+Emma.anni+" anni ed
è alta "+Emma.altezza;
</script>
quindi ha 2 vantaggi:
1) sgrava il browser dell’utente dal compito di eseguire script che potrebbero rallentare
il caricamento della pagina
2) evita problemi di compatibilità tra il linguaggio e il browser del client
CODICE DESCRIZIONE
<!DOCTYPE html> apertura e chiusura del tag php
<html> dichiarazione di una variabile numerica
<head> funzione che stampa la stringa nella pagina web
<meta charset="UTF-8"> Stringa di testo che contiene il testo "x = 5/2 = ".
<title>PHP: tipi di dato</title> operatore di concatenazione (.), che viene utilizzato per
</head> unire la stringa di testo alla variabile $x.
<body> istruzione che viene stampata nella pagina web
<?php La funzione gettype restituisce il tipo di dato della variabile
$x=5/2; x
echo "x = 5/2 = ".$x."<br>"; dichiarazione di una variabile string
echo "Il tipo di dato di x è " .gettype($x). "<br><br>"; funzione che restituisce il numero di caratteri della stringa
$y = 1; (spazi compresi)
echo "Il tipo di dato di y è " .gettype($y).“<br>"; variabile string a cui viene assegnato un carattere della
$frase= “Buongiorno a tutti”; stringa
echo strlen($frase). “<br><br>”; funzione che ricerca una sottostringa
$lettera=$frase{3}; “or”: sottostringa da ricercare
echo $lettera.“<br><br>”; funzione che permette di mandare a capo il testo così da
echo stristr($frase, “or”).“<br>”; rispettare un margine prefissato
$frase: stringa su cui agire
echo wordwrap($frase, 8, “<br>”); 8:numero massimo di caratteri per riga
<br>”: carattere da usare a fine riga
echo str_word_count(“ciaooo sono isa”).“<br>”; restituisce il numero di parole che compongono la stringa
tra parentesi in base al riconoscimento degli spazi bianchi
echo strpos(‘ciaooo sono isa’, ‘isa’).“<br>”; trova la prima occorrenza della sottostringa specificata
nel secondo argomento all’interno della prima
$giorni = array (1=>"lunedì", 2=>"martedì", array associativo: strumento che permette di visualizzare
3=>"mercoledì") dati di tipo diverso, come string e integer, associati ad un
indice a scelta numero o stringa, che parte da un indice
scelto, da specificare
$giorni = array (“day1”=>"lunedì", “day2”=>"martedì",
“day3”=>"mercoledì") indice=key
rsort($giorni);
ordina gli array classici, in ordine decrescente dei valori;
print_r($giorni);
asort($giorni);
print_r($giorni); ordina l'array per valori: rimescola quindi le lettere così che
siano in ordine alfabetico
foreach(range(0,100,10) as $decine) range: funzione che si usa se si vuole creare un array i cui
elementi formano una sequenza con intervalli regolari, es:
{
tabellina del 10
echo $decine.” ”;
} 0: valore di partenza
100: valore finale
10: frequenza dell’intervallo
criterio di accessibilità
substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2)
</select>
<p>e-mail</p><input type="email" name="email">
<p>Password </p><input type="password" name="pwd">
COOKIE DESCRIZIONE
<?php funzione PHP che restituisce la data e l'ora corrente
$nome = "mio_cookie"; secondo un particolare formato
$valore = "ultima visita: ".date(DATE_W3C); funzione che crea un cookie, lo invia al browser del cliente
setcookie($nome, $valore); e lo recupera, va chiamata prima dell'apertura della pagina
?> web dal client
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP e i cookie</title>
</head> isset: funzione che ha come argomento in contenuto del
<body> cookie restituito da $_COOKIE, variabile superglobale
<br> che memorizza il contenuto del cookie
<?php
if(!isset($_COOKIE[$nome]))
{echo "Cookie non settato.";}
else
{echo "Cookie settato! <br> ";
echo $_COOKIE[$nome];}
?>
</body>
</html>
CHE REQUISITI DEVONO SODDISFARE I SERVIZI 1. attenzione ai problemi di efficienza per ottimizzare
OFFERTI DA UN DBMS? le richieste di ricerca nei dati
2. l’autenticazione e controllo degli accessi ai dati, per
garantire la persistenza, la condivisione dei dati e
la loro integrità, quindi la
non-modifica/danneggiamento dei dati
3. la disponibilità di funzionalità che permettono di
semplificare la trascrizione dei dati, lo sviluppo
delle applicazioni e l’amministrazione dei database
CHE SVANTAGGI HA UN FILE SYSTEM RISPETTO AD ● i meccanismi di condivisione sono più limitati, in
UN DBMS? particolare, il file non può essere modificato
simultaneamente da più persone
● ci potrebbero essere descrizioni errate e
inconsistenti perché l’accesso ai file condivisi
richiede che i file stessi siano descritti nel codice
sorgente della applicazioni
● non può rendere disponibili molti servizi offerti solo
dal DBMS
MODELLO LOGICO DEI DATI l'astrazione logica che descrive la struttura dei dati, le
associazioni tra loro e i vincoli che devono
rispettare con lo scopo di tradurre in uno schema
logico le informazioni contenute nel modello e-r.
VINCOLO DI DOMINIO O VINCOLO SUI VALORI - caso particolare dei vincoli sulla tupla
- vincolo che si riferisce ai valori ammissibili
- Può essere ad esempio il dominio di una colonna,
cioè i valori per cui una colonna è limitata, es, nella
colonna voti, le istanze possono assumere valori
tra 1 e 10
VINCOLO DI CHIAVE vincoli che vieta la presenza di tuple distinte in cui certi
attrbuti hanno lo stesso valore
VINCOLO REFERENZIALE
colonna che deve essere chiave primaria ID_ nomeclasse