Scarica appunti informatica base e più Sintesi del corso in PDF di Fondamenti di informatica solo su Docsity!
Glossario con le parole: CTA= “call to action” pulsante con valenze diverse Fare over= cioè andare sopra qualcosa col cursore Menù primario= quello in alto principale che apre il secondario Menù secondario/mega menù= quello secondario che contiene più informazioni Hamburger menù= nella visione da telefono è quello che sta in alto a destra e sembra appunto un hamburger Header = non l’ho capito Footer= il menù che trovi in basso alla pagina di un sito web e ripropone informazioni come quelle del memù secondario Tag IMG Ancora applicativi per pagine web: Visual Studio Code (c'è anche il link su moodle ) per decoding. Gratuito e multipiattaforma. Versione online -> vscode.dev (meglio usare Chrome in questo caso) Responsinator.com ci copio ed incollo il sito per vedere se si gestisce bene su telefoni e dispositivi sia in verticale che orizzontale Finito questo modulo si passa alla parte grafica : per questo Gimp (vedi da dove si scarica perché è importante) inkscape.org
- Se non segui vedi programma non frequentanti (due manuali da leggere) programmi:
- grafica raster : pixel (photoshop)
- grafica vettoriale : lavoro con vettori, sono molto più preciso (vedi per geometria) (illustrator) Parte alta, intestazione, (header) contiene luogo, barra di ricerca e pulsante con valenze diverse, chiamato “cta” (=call to action- chiamati all’azione) in alto a dx. (tipo quello dei “biglietti “del sito uffizi) Parte relativa ai vari social In alto a sx “tema alto contrasto “cosa cambia? Si legge meglio. Il contenuto è inclusivo, per tutti. Non ho più testo su foto ma ho sfondo scuro e testo chiaro Quando ho testo su immagine non ho capito
Se “faccio over” (cioè metti il cursore su un tasto) hanno colori diversi, “gli uffizi” giallo “palazzo pitti” rosso/magenta ecc. se clicco su Boboli ad esempio, che è verde, le call to action rispettano il colore. Come concordanza il colore si usa in maniera strutturata, opportuna, vi è un elemento di dettaglio poi su ogni immagine che richiama quel colore. Elementi di cura. Anche noi sceglieremo tavolozza di colori e la useremo in modo continuo. Il menù secondario è sotto, con più elementi che posso visionare, in gergo “Mega menù” Sotto immagine a livello contrasto e sotto elementi testuali con eventi ecc a cui vogliamo dare risvolto ->sito unifi “hero” è la cosa nel mezzo che si può sfogliare a sx e dx. Tornando a Uffizi: area bassa “piè di pagina” elemento che ha acquisito sempre più valore negli anni. Il “footer” che contiene appunto info utili a chi consulta li sito. Se il sito fatto bene lì si ritrovano rimandi presenti nel menu principale “footer menù”. Importanti aspetti di responsive, cioè quando lo stringo come nella visione da telefono non è più così fruibile. Nel caso degli uffizi scompare però il menù principale e secondario, si utilizza quindi l’hamburger menù (le tre lineette in alto a dx) e rimangono le call to call to action ed i social. Responsinator.com ci copio ed incollo il sito per vedere se si gestisce bene su telefoni e dispositivi sia in verticale che orizzontale.
- Cosa abbiamo fatto di pratico nella lezione del 21/02/25 -
- Fa cartella poi su vscode su chrome. Voce “apri cartella “ ed apriquella cartella do il permesso
- Clicco sul nome della cartella e poi sul file nome : index.html Ogni pag web ha la sua anatomia di riferumento vedi la testa e corpo
- Punto esclamativo per creare la strutturabase del sito. I “tag” (etichette) hanno un loro significato
- Dentro la sezione “body” (al 9 ) metto titolo o”h1”, titolo importante perché dentro scrivo quello che voglio succeda nel sito , sia allìinizio che alla fine h1 “h2” per il titolo
- Vado su sito uffizi faccio salva con nome sul logo il formato è vettoriale, quindi se zoommo la qualità non viene intaccata lo salvo nella cartella lezione 1 su cui sto lavorando
- Torno sul codice per caricare il logo tramite tag “IMG” sotto h2 scrivo img e premo invio: src indica il percorso che rimanda all’immagine, alt invece utile sia per descrivere l’immagine, dare una descrizone puntuale del contenuto della pagina, soprattutto se si vuole creare un contenuto inclusivo
- serif: per aggraziare
- sans-serif: priva di elementi “decorativi”, tratto più lineare prova per vedere se funziona quello che ho scaricato (funziona)
prova due
se fai su google font share per fare coppie o famiglie di font. Cosa hai fatto finora:
- vai su google font
- scegli font
- download
- vai su cartella e fai estrai tutto
- poi installa adesso appunto su font share struttura è lo scheletro del documento, lo stile è la parte visuale. Creo una pagina di stile a parte rispsetto ad html per la quantità di roa che ci va dentro e lo chiamo “style.css” dove css è il linguaggio di formattazione! vanno cancellati entrambi i tag di apertura e chiusura “style”! vado dentro ad head sotto title per creare il ponte con index “link” e invio. Dentro href scrivo style.css perché appunto è il nome tornando su google font vai sul carello poi quel get embed code e vado su web lo copio e lo incollo sotto title vado su style in h1 sotto l’ultima proprietà e sotto scrivo ff (font family) il nome del font lo metto tra apici ‘’ e poi in questo caso dopo la virgola scrivo sans-serif e poi ; sotto posso scrivere tt e poi uppercase per il masiuscolo apro tag “p” sotto h2 in index.html scrivo dentro lorem ipsum in style sotto h1 metto p{} e dentro “ta” e justify così che sia allineato. Se “restringo” il testo (tipo visione da telefono) si formano crateri tra una parola e l’altra quindi per evitare questo (che è dovuto al giustificato) non è che si debba sempre giustificare, a volte anche l’allineamento a bandiera funziona ( a meno che non richiesto quello giustificato obbligatoriamente) per evitare crateri: metti “left” al posto di justify (?) su chatgpt scrivo ti incollo un codice, ho notato però che si crea un moro testo, vorrei sedimentare il contenuto in più paragrafi, metti magari un h3 finto fra i paragrafi
poi gli chiedo 2ora ti incollo un css, ho notato degli errori, puoi aiutarmi a trovarli, mi fornisci la versione corretta?” ed a capo incollo il mio codice di css con gli errori ovviambete hanno ancora le “allucinazioni”, non sono perfettamente a posto per ridimensionare immagine “width” dentro le <> con misura che vuoi cartella : tasto destro, comprimi ->zip e carichi su moodle come consegna font pairings!! 03/03/ Biblioteca digitale “liber liber” […] Portable document format -> pdf, congelare il contenuto, ci permette di ottenere quello standard. Formato epub si adatta bene anche in base a dimensioni schermo, vedi discorso telefono. Differenza tra ebook e tablet riguarda il colore, il tablet è multitasking ha più funzioni (quindi costa anche di più) Epub quindi su ebook reader e tablet ma anche telefono dà soddisfazione-> è formato liquido (no come pdf) ODT: equivalente di doc che è quello di word, è un formato editabile. Ci posso lavorare sopra, posso copiare ed incollare, inserire ecc. “open document text” Audiolibro si può scaricare in formato mp Cntrl+f e poi quello che voglio cercare : ti trova le cose Formato html : quello che hai cercato è fruibile tramite browser. Accanto html anche la verisone zippata: cartella compressa che viene scaricata Vado alla fine della mia struttura, ma semore sopra la fine (body) metto tag “section “, mi serve a sedimentare il mio contenuto in sezioni riconoscibili, quindi non tanto a livello visivo ma semantico. Per creare un’architettura il più facile ed accessibile possibile Apro un h2 in section e scrivo scarica l’opera Poi h3 e copio quello che è presente su liber liber. H2 è il sottotitolo, poi h3, metto sia lettere che rime in h3 per un dicscorso gerarchico, altrimenti sembrerebbe che fosero subordinate “Ul” per fare elenco puntato, dentro al quale metto “li”, li è singolo elemento di vista, dentro ci posso mettere “pdf “/”ePUB”/”ODT” Sotto li creo ancora, ancora di chiusura va sotto PDF
Vado su style vado in font e scrivo .fa-brands ed apro{ importante il “.” All’inizio, quando richiamo un contenuto di class devo metterlo, dentro scrivo font-size: 3em; (non ho ben capito il discorso 3 em cos’è em) posso anche mettere il colore dentro color: ed l colore, per cambiare colore alle icone à voglio far diventare un’ancora insta vado sotto h3 e metto ancora, provvisoriamente metto # dentro lo spazio del link. dentro l’ancora colloco l’icona (seleziona, taglia, incolla dentro ancora) anche ancora per yt vado sul sito uffizi o yt e cerco il canale ufficiale. Cerco link ufficiale per yt ed insta, lo incollo al posto di # Se sul mio documento clicco yt il documento non c’è più, il sito ufficiale fa si che si apra un’altra scheda rispetto a quello ufficiale, così che se linko un’altra scheda l’utente non si perde , posso farlo anche io , prima di > metto target=_blank” quindi questo per aprire una nuova scheda dopo aver linkato qualcosa!! Poi se voglio effettivamente mettere un video vero e proprio esco da footer e vado prima di quello in section e faccio spazio vuoto, la chiamo section e dentro metto video coerente col mio progetto, cerco una clip su uffizi tv appunto Trovo clip, faccio condividi->incorpora->copio link->incolllo nella section questo metodo per incorporare video nel progetto Questo video ha un peso nella cartella? No, è su yt non nella cartella, non incide a livello di peso Apro analizza e vedo che se restringo non mi risponde il video alla pagina Vado su chatgpt copio ed incollo tutta la roba del codice della clip e gli dico “ti fornissco un iframe, lo rendi responsive utilizzando un css inline. Funziona, lui mi dà il codice, io lo incollo al posto di quello di prima ed il video ora è responsivo Parte laboratorio oggi : abbiamo inserito la parte multimedialità Creare targhetta museale: lunedì vediamo cosa fare col programma milo Immahginiamo codice qr che rimandi a quelle informazioni su scheda secondo livello Pagina vuota per fare una buona struttura ordinata
Da fare: struttura con buona gerarchia con info di base : artista, nome completo, nasita e morte, nome opera anno realizzazione, numer inventario. Poi creare h2 Analisi dell’Opera creando un codice qr e nella parte approfondimenti con bibliografia essenziale, critica ecc, poi h2 contenuti multimediali quindi inserire elemento video che si adatti. Se si riesc e creare pagina gemella con testo semplificato per bambino/ persona con problemi. Quindi sections con h Oggi- 10/03/25 vediamo “miro” la lavagna collaborativa, perché posso lavorare con un collega o più. Anche in campo umanistico. Devo avere un account, poi apre dashboard Vedi barra strumenti a sx del sito con la pagina bianca Partiamo: post it e dopo averlo posizionato al centro ci scrivo concetto di partenza , con le radici puoi creare delle macro aree Vado su wikimedia commons e cerco immagine che voglio per poterci lavorare Poi copio incollo immagine, faccio freccetta per collegare e clicco sul segno accanto ad “alt” per “maascherare l’immagine”, così gli do il formato che voglio-> funzione “non distruttiva”, non disturbi l’immagine ma la mascheri e basta Vado su barra di sx e clicclo sul triangolo oer mettere diverse forme, faccio quella e ci metto il colore dentro ci sscrivo e posso mettere anche il testo nella parte che preferisco, ho messo il testo in basso cliccando sul menù. Poi trascino l’immagine lì dentro, mi va dietro, quello che sta dietro è quello messo prima, la gerarchia è decisa a livello cronologico, tasto destro sulla forma e clicco send to back. Entra qui il concetto di gruppo, col mouse abbraccio entrambi, figura e forma, quando entrambi sono selezionati faccio cntrl +g e si raggruppano Vado su uffizi tv, scelgo un video, faccio condividi e copio l’url (è sufficiente quello) e lo copio sulla lavagna, diventa un oggetto si può anche tagliare il video, basta che ci clicci sopra, una volta tagliato mi crea un video e anche un post it che mi dice appunto che segmento ho, si può togliere, poi scegli il video che vuoi e sposti di lato quello integrale In alto a destra icona condividi, chiamo la lavagna,anyone with the link->non access->viewer-> copia link(ora entriamo su quella del prof, ha cambiato l’opzione da viewer, e commenter così si possono lasciare commenti a cui si può rispondere, non c’è una gerarchia, ognuno può vedere e commentare. Ora vediamo come se stessimo lavorando col collega, quindi do potere di editor, comunque il proprietario della lavagna ha il “potere”, il permesso è sempre revocabile. Si può provare a creare un frame con le info, in basso a sx c’è iconcina che dà font di diverse dimensioni, altrimenti cliccando f. quale formato? per ora foglio
Scrivo tag “div” che serve per divdìidere la section in più parti. Si utilizza wuando ci serve una porzione di codice da delimiataere. Ipotizzo il primo tag (img) nel primo div. Io non ho immagine definitava ma posso cercaela. (controlla diritti che sia a pubblico dominio). Prendo imm da lì, scarico e metto su img nella lezione 1, poi nel tag img appunto scrivo img che è la cartella con le immagini e metto il link Mi va a dx poi con calma si leva il comando che su css sposta le immagini a dx Ho il secondo div, lì sorge spontaneo il diifferenziare il div perché di base sono lo stesso tag, lo differenzio in base al tag. La classe può essere giocata più volte, il tag invece div è univoco?? Div -> class”figura” Sotto “descrizione” L’id opera è univoco, la classe posso usarla quanto voglio Vado su style.css ed elimino il float right e vado sotto .fa-brands e richiamo la section Scrivo = section#opera{ Scrivo display: flex; questo comando mette in riga i comandi, è molto potente Potrei dire ai div di questa section di avere ingombri diversi, non c’è spazio tra gli elementi Scrivo quindi “gap” sotto display e metto 40px Per richiamare div diversi: vaso in css, scrivo come prefisso section#opera, poi spazio e nome elemento, se è una classe metto il puntino “section#opera .figura {}” poi scrivo border: 2px solid red; poi le do un “padding” e scrivo 20 px padding viene caricato tra u bordi e l’oggetto simile al padding il margin: 20px margin viene caricato fuori dal bordo, quindi distanza tra cornice e testo per fare spazio su un lato specifico posso anche dire fai margin-bottom poi faccio il section#Opera(idiota scrivi con la maiuscola) .descrizione{} sotto metto border e poi “border-radius: 16 px, per avere un angolo più smussato e metto padding sotto siccome tra loro non sono allineati vado in section#Opera e metto align- items:center; adesso lavoro in modo che quando uno clicca su L’Opera rimanda ad Opera e così via. Cioè devo creare un collegamento interno. Faccio cosa che
nroamlmente non si fa, copio ed incollo i div nelle altre sezioni artista ecc (questione di tempo) come si agganciano gli elementi? vado dentro section id opera, subito sotto metto un h2 che chiamo “L’Opera” così etichetto il testo poi vado nelle ancore fatte prima ed accanto al # metto Opera/Artista/Contesto ovviamnete non funziona se mi dimentico l’# vado nel footer e ipotizzo altra area div dentro ancora, metto # e poi Torna in cima quindi ricapitolando: classe simile ad id ma valenza diversa, elemento che sto usando come figura inquesto caso, posso usarlo più volte, fine ultimo della classe: essere richiamato dentro style con il punto venerdì facciamo parte di miro? oppure creiamo la pagina come dice lui? Penso di si, si venerdì facciamo il sito per bene 21/03/ Oggi facciamo la scheda dell’opera, nuova cartella Creo nuovo file index.html e style.css e poi cambio in index lilngua e titolo. Ho messo i fonts in head poi vado nel body e scrivo il tag header e dnyto posso mettere qualcosa di utile all’intestazione. Lavoro con tag neutri che mi permettono di impaginare porizioni di testo. Metto un div che non ha un riscontro visivo ma mi è utile perché mi divide il codice in più oarti. Metto class=” museo-info” (evito maiuscole, spazio vuoto o parole accentatE) Poi in h4 metto titolo museo e sotto div sempre in header metto nav (perché voglio il menù dentro) faccio quindi ul>li*4 e creo l’elenco puntato. Poi preparo i link, faccio ancore nei li e nel primo metot L’Opera. Al posto dell’# posso già mettere #opera perché so che quello che farò dopo sarà cliccare su quello ALT+Z PER RESTRINGERE IL TESTO L’ultimo li è la call to action per la scheda semplificata, metto l’ancora ma ancora non so di preciso quindi solo # e poi per bambini. Do nome btn-nav alla classe di questa ancora, do questo nome per ricordarmi che è nome bottone di una call to action Poi vado sotto header e scrivo main, è un tag di significato, contiene contenuto principale della scheda. Dentro metto section di nome hero dentro cui starà nome opera ecc Scrivo h1 e h2 e poi faccio div che ospita i tag (div a cui metto nome ovviamente, class”tags”. Dentro metto tag span che è neutro
ora importante è lavorare sulla hero voglio mettere il testo dentro contenitore hero più staccato tra testo e bordo, quindi uso padding col margine poi inserisco un po’ di spazio nel bordo per distanziare le scritte nell’hero faccio .hero h1{ così so che ciò che scrivo andrà solo nell’h ora sistemo i tag faccio poi i -tags span per creare dei bottoni, a mano metto la size dei border radius perché il mio di default era troppo piccolo devo trovare modo di dare un margine alla galleria in alto a sx perché troppo appiccicata a menù. Creo sempre dentro un file semplificato.html e ricopio codice index, ovviamente poi devo modificare. Quindi dentro modificata scrivo hero kids per cambiare in style.css le robe, come aggancio ora la call to action a semplificata? Il # prima messo come provvisorio lo cancello ed a mano scricvo semplificata.html 28/03/ Oggi vediamo anche come mettere immagini anche perpendicolari. Vado su Pixabay e cerco pinboard. Scarico sia la bacheca che delle polaroid. Poi apro legno e bacheca con Gimp3 così da avere schede diverse. Voglio portare la bacheca sul legno, faccio cntrl+a (vul dire seleziona tutto). Quindi, copio ed incollo la bacheca sullo sfondo di legno, poi vado in quello che mi permette di ridurre o ingrandire e prima lo ruoto. (insomma lo adatto). Quando ruoti trascini col mouse e pigi anche shift. Per dare qualche effetto alla bacheca uso i filtri, c’è l’icona in alto (in questo caso tocca aggiungere canale alfa) poi vado su ombre e luci e poi proietta ombra. Spesso se il filtro non è cliccabile è perché serve il canale alfa appunto. Ci chiede quanta ombra sulla x e quanta sulla y. Vedi un po’ Poi apro anche le polaroid sul programma, uso strumenti di tracciato (basta che pigi b) e seleziono la foto, poi a sx seleziona dal tracciato, poi copi e incolli. Processo per mettere l’immagine:
- selezioni foto dal sito, metti nella cartella e poi apri in gimp
- copia ed incolla foto sul piano dove lavori
- ruota/adatta foto
- poi nascondi la foto dal piano con l’occhietto
- con la bacchetta vai sulla polaroid ed in automatico selezionerà il vuoto nero
- rendi di nuovo visibile la foto
- trascinala sulla polaroid e mettila in modo tale che nel riquadro rientri quello che vuoi vedere
- poi fai seleziona->inverti ->canc. Così ti elimina solo la parte dentro e non fuori
