Abilità Informatiche

Esame Abilità informatiche

Facoltà Lingue e letterature straniere

Università Università degli studi Ca' Foscari di Venezia

Appunto

Nozioni di base dei sistemi di HTM, CSS e Java seguite da nozioni di base di problem solving e programmazione per poter comprendere il funzionalemento di un calcolatore. Appunti basati su appunti personali del publisher presi alle lezioni della prof. Rossi.

…continua

Anteprima

Vedrai una selezione di 6 pagine su 22

Anteprima di 6 pagg. su 22.
Scarica il documento per vederlo tutto.

Scarica

Anteprima di 6 pagg. su 22.
Scarica il documento per vederlo tutto.

Scarica

Anteprima di 6 pagg. su 22.
Scarica il documento per vederlo tutto.

Scarica

Anteprima di 6 pagg. su 22.
Scarica il documento per vederlo tutto.

Scarica

Disdici quando
vuoi

Acquista con carta
o PayPal

Scarica i documenti
tutte le volte che vuoi

Estratto del documento

Il CSS e la formattazione dei siti web

Il CSS (Cascading Style Sheets) viene utilizzato per definire lo stile di un sito web, includendo colori, font e dimensioni. Viene inserito all'interno del codice HTML e permette di creare un layout personalizzato.

Per definire il colore di un elemento, si utilizza il selettore di elemento seguito dalla proprietà "color" e dal valore desiderato. Ad esempio, per i titoli h2 si può utilizzare il seguente codice:

<style>
  h2 {
    color: "valore";
  }
</style>

Per selezionare il colore di sfondo di un elemento, si utilizza il selettore "body" seguito dalla proprietà "background-color" e dal valore desiderato. Ad esempio:

<style>
  body {
    background-color: rgb(...);
  }
</style>

Per selezionare gli elementi in base al nome del tag, si utilizza il selettore di elemento. Ad esempio, per selezionare tutti gli elementi h1 si utilizza il seguente codice:

<style>
  h1 {
    /* stile desiderato */
  }
</style>

, —e qualunque altro elemento HTML può essere selezionato con CSS usando il nome del tag senza le parentesi ad angolo(< e >). Per esempio, si possono selezionare tutti i tag

della pagina web usando il selettore di elemento p. Ecco una regola CSS che cambia il colore di ogni paragrafo della pagina web:

Lezione 14

CSS: selezione per id Per selezionare solo una parte (un solo titolo, o solo una parte del paragrafo)—selezione per identità (comunicare che intendiamo applicare lo stile all'elemento che contiene esclusivamente quell'identità): 1. Modificare l'HTML: all'interno del tag di apertura digitare id seguito da un uguale e le virgolette all'interno delle quali inseriremo l'identità.

N.B.: non si possono lasciare spazi tra le parole all'interno del tag di

apertura→utilizzo di trattini o underscore tra due parole2.

Dopo l’ultima regola inseriamo un’ulteriore riga che inizierà per # seguitodall’identità inserita precedentemente all’interno del tag

h2

#...

Le identità devono essere uniche!! (=non si possono ripetere più identità in tagdiversi)

HTML con id unico →attribuisco un’identità

Lezione 16

Selezione per classe

Modo per assegnare ad un gruppo un elemento particolare

Per aggiungere una classe bisogna aggiungere un attributo di classe, così come si faper le identità

Cancellare il tag che si andrà a sostituire
All’interno di <p> aggiungere seguito da un uguale e le virgolette
Aggiungere

all'interno delle virgolette il titolo che si vuole dare alla classe

4. Aggiungere l'attributo ad ogni classe che si desidera

5. Mettere in pratica la regola del CSS:

Tornare al tag <style> e cancellare il selezionatore
Digitare un punto di seguito al quale si digiterà il nome della classe. (background-color/color)
Tra parentesi graffe scrivere proprietà e valore

Esempio:

  
    <style>
      .rabbit-song {
        background-color: yellow;
      }
    </style>

ALTRO SUI TAG HTML

Read more about HTML history → creazione di un link

per aprirlo in un'altra finestra: Si possono linkare anche le immagini Immagine

Love animals

LINK HTML INTERNI→aggiungi attributo id

History of the Web

History of the Web

TABELLE HTML

Pet name	Species	Color
Black & White	...	B & W

Pet name Species ColorBlack and White ... B & W

COMMENTI

Commenti per altri utenti e non per il browser (non appare nel sito finale)

Sono verdi. Posso aggiungere link

PROPRIETÀ TEXT CSS CSS Zen Garden PROPRIETÀ font-family CSS Roman Si può specificare ex: "Helvetica", sans-serif (→default) cursive /fantasy /monospace /serif /sans-serif PROPRIETÀ font-size CSS

MODULO 2: JAVA SCRIPT

INTRODUZIONE ALLA PROGRAMMAZIONE

DISEGNARE CON JS

posizione dimensioni

ellipse (200, 200, 300, 350); → cerchio

distanza da sx alto-basso larghezza altezza

X 0→400 y 0→400

ellipse (200, 250, 100, 10);

ellipse (150, 150, 30, 30);

ellipse (275, 150, 30, 30);

DISEGNARE ALTRE FIGURE CON LA PROGRAMMAZIONE

rect (); → rettangolo

x: controlla l’angolo in alto a sx del rettangolo

rect (x, y, larghezza, altezza); //face → commento per capire a quale figura si riferisce

la regola scritta rect (x, y, l, a); //mouth

punto fine

line (x, y, z, k); → disegnamo una linea

NB: l’ordine è importante!

COLORARE

Con la programmazione

background (red, green, blue) //RGB → deve stare prima degli altri

comandi per non sovrapporsi alle forme disegnate

noStroke (); → no contorni

//face

fill (-,-,-) per riempire la forma

ellipse (-,-,-) arc (-,-,-,-, start)

Formattazione del testo

disegnare un arcostop

        eyesfill (-,-,-)
        ellipse (-,-,-,-)
        ellipse (-,-,-,-)

        headband
        strokeWeight (_)
        → spessore della linea
        stroke (-,-,-)
        → colore della linea
        line (-,-,-,-)

VARIABILI

INTRODUZIONE ALLE VARIABILI

→ modo per memorizzare valore

        var=variabile va definita sempre prima dell’elemento
        var eyeSize;
        eyeSize = 20; (può essere modificata) lo sostituiamo agli elementi che vogliamo

        eyes
        ellipse (157, 151, eyeSize, eyeSize);
        ellipse (304, 142, eyeSize, eyeSize);
        var eyeSize = 33;

ALTRO SULLE VARIABILI

        var x = 200;
        ellipse (x, -,-,-)
        ellipse (x-50, -,-,-) cambio x, si muove tutto
        ellipse (x+100,-,-,-)

ANIMAZIONI

CREARE LE ANIMAZIONI. *.. eseguito 1 volta..

        draw = function (background (-,-,-) {
            *taglio e incollo da var a fine
        }

Sposto var x = 10 sopra draw

        Sotto draw (infondo prima di })
        x = x + 1
        x - 1 (per andare verso sx)
        noStroke ();

        //position of the car
        var x = 10;
        draw = function () {
            background (-,-,-);
            //car body
            fill (-,-,-);
            reet (x, -,-,-);
            reet (x + 15, -,-,-);
            //wheels
            fill (-,-,-);
            ellipse (x + 25, -,-,-);

-,-,-);ellipse (x+75,-,-,-) ;x=x+10 ; per la velocità dell’animazione}
ABBREVIZIONI PER INCREMENTARE LE VARIABILIno Stroke ();
var x=200
var y=350
var ballWidth=300
var ballHeight=200
draw=function () {
    background (-,-,-);
    fill (-,-,-);
    ellipse (x, y, ballWidth, ballHeight);
    x+=1; ←x=x+1
    y-=2; ←y=y-2
    ballWidth *= 99/100; ←ballWidth = ballWidth*=99/100; *moltiplicazione/divisione
    ballHeight *= 99/100; ←ballHeight = ballHeight*=99/100;
}
UNA SCORCIATOIA PIÙ CORTA
eyeSize=eyeSize+1 → eyeSize +=1
eyeSize++ (++ quando la variabile cresce di 1)
INTERAZIONE CON IL MOUSE
//mouseX and mouseY
draw=function () {
    background (-,-,-); //background ()→se background: effettopennello
    ellipse (mouseX, mouseY, 30, 30);
}
si può

Dettagli

Publisher

codae

A.A. 2019-2020

22 pagine

SSD Scienze matematiche e informatiche INF/01 Informatica

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher codae di informazioni apprese con la frequenza delle lezioni di Abilità informatiche e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Università degli studi Ca' Foscari di Venezia o del prof Rossi Sabina.