Corso web designer esame PDF

Corso web designer esame Wordpress Wordpress è il CMS più utilizzato al mondo. è una pen source, ovvero una fonte aperta a tutti che ci offre la possibilità di gestire i contenuti senza essere degli esperti in HTML. Wordpress è diviso in due parti: ​ back end...

Corso web designer esame Wordpress Wordpress è il CMS più utilizzato al mondo. è una pen source, ovvero una fonte aperta a tutti che ci offre la possibilità di gestire i contenuti senza essere degli esperti in HTML. Wordpress è diviso in due parti: ​ back end: tutto ciò che c’è dietro un sito; ​ front end: il sito che gli utenti vedono. Pregi e difetti ​ facile da usare, gratuito e puoi trovare supporto facilmente, vasta disponibilità di plug-in ( funzioni aggiuntive che danno a Wordpress tutto quello che non ha); ​ è il più attaccato dagli hacker. Per funzionare, Wordpress ha bisogno di un hosting, o macchina virtuale. Un hosting è lo spazio di un sito web che ti danno per mettere le cartelle in Wordpress. Per inserire dei contenuti su Wordpress esistono due modi: ​ ARTICOLI: vengono realizzati contenuti dinamici e sono soggetti a commenti da parte degli utenti; ​ PAGINE: servono a realizzare contenuti stabili , che non cambiano mai. A differenza degli articoli, le pagine non possono essere commentate. Un sito web è composto da: ​ header: la parte iniziale; ​ navbar: la barra di ricerca; ​ main: la parte centrale di un sito, o corpo; ​ footer: la parte finale. HTML Inventato da Tim Berners-Lee e Robert Caillau nel 1989-1990. Una pagina HTML è formata da: Page title testo TAG CONTENITORI ​ testo ​ testo → paragrafo ​ testo TAG DI FORMAZIONE TESTO ​ testo → testo in grassetto ​ testo → testo in italico ​ testo → testo sottolineato ​ → break, va da capo ​ → horizontal rue, traccia una linea orizzontale I tag h1, h2, h3, h4, h5 e h6 sono le “teste”, dove il titolo e le grandezze sono 6. La 1° è la grandezza più grande che va via via a diminuire fino alla 6°. TAG PER I LINK. Indica l’inizio e la fine di un lik. ex: text. TAG PER LE LISTE ​ → lista segnata da punti ​ → liste ordinate ​ → per separare le singole voci della lista TAG PER INSERIRE IMMAGINI CODIFICA UTF-8: possono essere utilizzate tutte le lettere accentate e apostrofi. Flexbox Il flexbox è un modello CSS progettato per creare dei layout flessibili e reattivi e nasce per utilizzare gli assi dello schermo. Le varie proprietà ​ proprietà genitore, justify-content: definisce l’allineamento lungo l’asse principale; ​ align-items: definisce il modo in cui vengono allineati sull’asse: ​ align-content: mette i contenuti uno sotto l’altro. Possono essere flex-start, flex-end, center, stretch, space-between, space-around; ​ proprietà figlio, gap: i contenuti vengono messi in ordine; ​ align-self: controlla l’allineamento di un singolo individuo. Figma Figma è uno strumento gratuito e aperto a tutti, idealizzato a creare progetti ed animare. Con Figma è possibile creare applicazioni e giochi di vario tipo, tramite le sue molteplici funzioni: ​ Componenti; ​ Istanze; ​ Auto layout; ​ Prototipazione; ​ Design System; ​ Variabili; ​ Animazione. CSS Cascading Style Sheets, separa contenuto e presentazione nelle pagine web. Indica le caratteristiche tipografiche e di layout di un documento HTML. Le regole Il CSS ha una struttura e delle regole ben precise, che devono essere seguite. Nel caso di h1 { color: blue;}, la regola è composta da due parti, il selettore (h1) e la dichiarazione (color: blue;). A sua volta, la dichiarazione si divide in altre due parti: la proprietà (color) e il valore (blue). Perciò, la struttura sarà così: selettore { ​ proprietà: valore;​ } Proprietà nelle dichiarazioni è possibile far uso di proprietà singole o in forma abbreviata:  ​ proprietà singole: permettono di definire un singolo aspetto di stile; ​ proprietà abbreviate: consentono di definire un insieme di aspetti, usando solo una proprietà. Background La definizione dello sfondo può essere applicata a due soli elementi: body e tabelle. Proprietà singole e valori: ​ background-color: colore oppure transparent; ​ background-image: url di un’immagine o none; ​ background-repeat: {repeat|repeat-x | repeat-y|no-repeat}; ​ background-attachment: {scroll | fixed}; ​ background-position: x, y in % o assoluti o parole chiave (top | left | bottom | right}; Proprietà in forma breve: background ​ selettore {background: background-color; background-image; background-repeat; background-attachment; background-position;}. Un font è una serie completa di caratteri con lo stesso stile. Possono essere classificati sulla base di diversi criteri: ​ presenza o assenza di grazie o “bastone” (il sans serif o solo sans); ​ spaziatura fissa o proporzionale. Le grazie sono piccole decorazioni che sporgono dal corpo della lettera. Nei testi stampati ad alta risoluzione i caratteri con grazie risultano più leggibili. Quando però si lavora a bassa risoluzione, i caratteri senza grazie risultano più leggibili. Esistono alcuni font senza grazie, come per esempio il Verdana, che sono stati pensati per essere leggibili anche se i caratteri sono molto piccoli. Font-family La proprietà che ci permette di definire il tipo di carattere è font-family che prende come valore il nome di un font: p {font-family: Verdana} I font pongono un problema di compatibilità piuttosto complesso su piattaforme diverse (Windows, Mac, Linux...). Sono disponibili caratteri diversi e ogni utente può avere un proprio set personalizzato. Per gestire questa situazione CSS mette a disposizione due meccanismi: ​ La definizione di famiglie generiche; ​ La possibilità di dichiarare più font in una proprietà. Font-weight La proprietà font-weight definisce il peso del carattere (la grossezza dei tratti che lo compongono). L’esempio più noto è normale/neretto (impropriamente chiamato grassetto), ma è possibile avere una gamma più ampia di pesi. Il peso si può esprimere in diversi modi: ​ Valori numerici: 100, 200,...800, 900 ​ Parole chiave assolute: normal, bold ​ Parole chiave relative: bolder, lighter Font-style La proprietà font-style permette di definire varianti del testo rispetto al normale. In tipografia, il corsivo viene progettato separatamente e può essere anche molto diverso dal tondo: Il testo obliquo è invece derivato per deformazione dal tondo. Javascript Consiste in un linguaggio formale che fornisce al browser determinate istruzioni da compiere. Tramite il JavaScript, è possibile conferire dinamicità alle pagine web permettendo, ad esempio, di creare semplici applicazioni per il Web. Inserire un Javascript in una pagina HTML Per inserire un codice JavaScript in una pagina HTML, è necessario semplicemente usare l'etichetta. Ad esempio: Il codice JavaScript può essere inserito sia nella sezione head che nella sezione body della pagina HTML. Inserire dei commenti In JavaScript è possibile inserire dei commenti, ovvero porzioni di testo che verranno ignorate dal parser, di una o più righe delimitati da. È possibile inoltre prevedere commenti di una sola riga utilizzando //. Ad esempio: questo codice verrà interpretato questo codice verrà interpretato questo verrà interpretato //e invece questo no //e questo neppure! Le variabili Identifica una cella di memoria nella quale vengono salvati durante l'esecuzione dello script i dati. Quando si lavora con le variabili, è necessario per prima cosa indicare al parser il suo nome utilizzando l'istruzione var: var nome_variabile; dichiara una variabile nome_variabile. Le stringhe una stringa è una sequenza di uno o più caratteri alfanumerici. In JavaScript le stringhe si indicano inserendole all'interno di virgolette doppie (") o apici ('). Bisogna però fare attenzione a chiudere una stringa con lo stesso apice con la quale è stata aperta; sono ad esempio stringhe valide: "Hello, world ! 1234" "Peter O'Toole" Dati booleani Un dato è detto booleano quando può assumere solo i valori true e false. Operatori matematici Restituiscono sempre un valore numerico. Si utilizzano i normali operatori algebrici, addizione (+), sottrazione (-), moltiplicazione (*) e divisione (/). Operatori stringa Consiste nell'unire due stringhe accostando una di seguito all'altra. L'operatore di concatenazioni in JavaScript è il più (+). Operatori booleani Sono per esempio: ​ < minore; ​ = maggiore o uguale; ​ > maggiore. Selezione è una delle tre strutture fondamentali della programmazione e consiste in una scelta tra due blocchi di istruzioni da seguire in base ad una condizione valutata inizialmente, che può essere vera o falsa. Una selezione può essere semplice, assume i valori if ed else e delle condizioni che devono essere rispettate, può esserci più di una condizione. Il valore if può essere seguito da un altro if. Esiste una forma particolare di else dove si può inserire un’altra selezione. Switch è un tipo di selezione che permette di verificare i possibili valori dell’espressione presa in considerazione. switch (espressione) { case val1: istruzioni1; case val2: istruzioni2;... case val_n: istruzioni_n; default: istruzioni } Iterazione è una struttura di controllo come la selezione, e permette l’esecuzione di una sequenza che ha una o più istruzioni per far verificare una determinata condizione. Cicli con condizione: il ciclo while, è composto da una condizione valutata inizialmente, si ha un numero indefinito di cicli e la condizione va avanti fino a quando quella condizione non risulterà vera. Il ciclo for, ha un numero predefinito di cicli e viene considerato un ciclo con contatore. Aumenta o diminuisce ad ogni ripetizione.