Anteprima
Vedrai una selezione di 14 pagine su 61
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 1 Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 2
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 6
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 11
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 16
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 21
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 26
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 31
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 36
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 41
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 46
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 51
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 56
Anteprima di 14 pagg. su 61.
Scarica il documento per vederlo tutto.
Scarica
Linguaggi e nuove tecnologie per il web - Appunti schematizzati Pag. 61
1 su 61
D/illustrazione/soddisfatti o rimborsati
Disdici quando
vuoi
Acquista con carta
o PayPal
Scarica i documenti
tutte le volte che vuoi
Estratto del documento

TIPOGRAFIA: PIXEL, EM E REM

Sono valori assoluti:

  • le parole chiave xx-small, x-small, small, medium, large, x-large, xx-large;
  • valori (unità di misura):
    • Assoluti (xx-small, x-small, small, medium, large ecc. + px): si consiglia di usare la seconda solo per CSS destinati alla stampa.
    • Quelli espressi con unità di misura come pixel (px) o punti (pt).

Sono valori relativi:

  • Relativi (smaller, larger, em, %, rem):
    • Le parole chiave smaller e larger;
    • Quelli espressi in em;
    • Quelli espressi in percentuale;
    • I rem sono una unità di misura relativa introdotta con i CSS3, ma è relativa rispetto al font-size del root element. Se non viene specificata nel codice CSS diversamente, i browser di default hanno il font-size del tag html pari a 16px, dunque 1rem.

pixel) ma ha corrisponderà a 16px, a prescindere dal font-size dei box progenitori.praticità. A differenza degli em,NON è proporzionale rispetto al Dei modi per definire le misure dei caratteri tipografici in css le più usate sono pixel,elemento/progenitore ma soloal font-size del root element em e rem.(tag html). Siamo abituati a usare soprattutto per i testi, ma anche per le spaziature, delle unità dimisure fisse (più semplice e pratico) e quindi a utilizzare i pixel. In realtà fin dall’inizio→del web una unità molto diffusa era EM. Tale unità di misura calcola la dimensionedel testo in base ad una misura fissa di base. 1em, quindi, corrisponde alla dimensionedi base assegnata al documento o all’elemento e/o al suo progenitore. Visto che lafont-size è una proprietà ereditata dal progenitore, questo rende scomodo definirlo pergli elementi nidificati che hanno un progenitore con

L'unità di misura del testo definita in em. La soluzione pratica al problema di avere un'unità di misura scalabile e non fissa in pixel, ma avere la stessa praticità dei pixel è stata creata con i CSS3 che hanno introdotto l'unità di misura REM. I rem a differenza degli em non sono proporzionali rispetto all'elemento o al progenitore ma solo alla dimensione del carattere del nostro root element, quindi al font-size del root element (il tag html, per intenderci). Come gli em, i rem sono unità scalabili e flessibili e vengono tradotte visivamente dal browser in pixel, a seconda delle impostazioni di dimensione del carattere nel vostro file css. Bootstrap 4 ha una dimensione di default per i caratteri di 1rem (visto che il default la dimensione font-size del browser è 16px possiamo dire che anche per bootstrap di default font-size: di default per i caratteri di 1

Il testo ha una dimensione di carattere di 16px e un'interlinea del 150% (1.5).

La famiglia di caratteri predefinita per Bootstrap è "Helvetica Neue", ma è buona norma specificare anche le fallback fonts che sono "Helvetica", "Arial" e la famiglia di caratteri sans-serif.

Tutti i paragrafi <p>, i titoli <h1> <h2> <h3> <h4> <h5> <h6> e le liste <ul> <ol> hanno un margine inferiore di 1rem e un margine superiore di 0 (margin-top: 0;).

Titoli

I titoli hanno un margine inferiore di 0.5rem.

Paragrafi (p)

I paragrafi hanno un margine inferiore di 1rem.

Liste (ul, ol)

Le liste hanno un margine inferiore di 0.5rem e le liste nidificate non hanno margine inferiore.

Troviamo ulteriori formattazioni per i testi come ad esempio i "display headings" per ingrandire ulteriormente le nostre titolazioni ma usando un font diverso.

Il testo fornito può essere formattato utilizzando i seguenti tag HTML: - Per evidenziare il testo, possiamo utilizzare il tag `` o `` per rendere il testo in grassetto. - Per citazioni, possiamo utilizzare il tag `
`. - Per definire una firma, possiamo utilizzare il tag `
`. - Per gestire il peso del testo, possiamo utilizzare i tag `` o `
` con l'attributo `class` per applicare le classi di stile desiderate. Ecco un esempio di come potrebbe essere formattato il testo utilizzando i tag HTML: ```html

light peso di font "light" e vengono applicati tramite le 4 classi: .display-1, .display-2, .display-3, .display-4 - All'elemento HTML5 <mask> viene aggiunto un padding e il giallo del background -

citazioni + più leggero di quello di default
- Le citazioni <blockquote> sono più grandi del testo di default e hanno la possibilità di ingrandendolo usando un peso - definire la firma con la classe .blockquote-footer - la classe .lead ci permette di evidenziare un testo ingrandendolo e usando un peso - .font-weight: per gestire peso light ( font-size: 1.25rem; font-weight: 300; ) - .font-weight-bold / .font-weight-light / .font-weight-normal / .font-italic sono le classi che ci permettono di gestire il peso e lo stile dei testi - ecc. ALLINEAMENTO

``` Ricorda di includere anche i fogli di stile CSS necessari per applicare le classi di stile correttamente.DEI TESTI Utili per allineare velocemente i testi del mio layout e usare gli allineamenti in maniera Classi per allineare i testi: responsive sono le classi per l'allineamento dei testi che vanno appunto ad applicare la - o oppure o proprietà text-align: ... all'elemento. Negli esempi sotto dove abbiamo * possiamo sostituirlo (allinea a dx o sx partire da quel con sm md lg e xl e funzionano esattamente come per le colonne breakpoint) » o / il testo è sempre allineato a bandiera sinistra o destra Linguaggi e nuove tecnologie per il web - oppure » o / il testo è allineato a bandiera sinistra o destra (allinea al centro partire da quel breakpoint quindi su viewport small, medium, large o xlarge partire da quel breakpoint) » / il testo è sempre centrato - » / il testoè centrato a partire da quel breakpoint quindi su viewport small, medium, large o xlarge» .text-justify / il testo è giustificato ALLINEAMENTO DELLE COLONNE→? Ricordiamo che Bootstrap lavora con i flexbox, quindi ci saranno delle classi specifiche per modificare gli allineamenti, l’ordine degli elementi come per i flexbox:» le row sono il nostro flexbox container» le col sono i nostri flexbox items Per cui alle nostre row potremo dare una serie di classi come align-items-center / justify-content-start / ecc. Per cui alle nostre col potremo dare una serie di classi come align-self-center, order-1 ecc. IMMAGINI RESPONSIVE Bootstrap ci fornisce una serie di classi per la gestione delle immagini (immaginiClassi per la gestione delle responsive). Bootstrap ci permette infatti di gestire automaticamente le dimensioni immagini responsive: - img-fluid per fare in modo delle immagini per adattarsi allo schermo o meglio al proprio progenitore. Per cui che scalinoin base all'elemento possiamo andare ad applicare la classe img-fluid alle nostre immagini per fare in modo che scalino in base alla dimensione dell'elemento progenitore. Infatti la classe img-fluid applica una max-width: 100% e una height: auto. IMMAGINI IN BOOTSTRAP: FORME Possiamo aggiungere alle nostre immagini delle classi per la gestione della loro forma: - Con la classe rounded otterremo un'immagine con gli angoli arrotondati. - Con la classe rounded-circle avremo immagini con forma ellittica o circolare. - Con la classe thumbnail avremo un'immagine con un piccolo bordo attorno. IMMAGINI IN BOOTSTRAP: ALLINEAMENTI Esistono una serie di altre classi che ci permettono invece di gestire l'allineamento dei nostri elementi: - float-left per allineare l'elemento a sinistra. - float-right per allineare l'elemento a destra. - mx-auto per centrare l'elemento orizzontalmente. - my-auto per centrare l'elemento verticalmente.nostre immagini. Le classi float-left e la classe float-right applicano appunto un float: left oppure right alla nostra immagine. - d-block + mx-auto per centrare le immagini possiamo utilizzare una combinazione di classi che sono centrare l'immagine d-block (display: block;) per cambiare il comportamento display delle nostre immagini, in modo da poterle poi centrare applicare i margini automatici tramite la classe mx-auto. Linguaggi e nuove tecnologie per il web Barra di navigazione MENU E NAVIGAZIONE (nav o navbar) Uno degli elementi comuni a tutti i siti web è la barra di navigazione (o nav o navbar). Contiene link che consentono di muoversi nel varie sezioni del sito web (è l'area della pagina che ospita il menu). Bootstrap propone nav e diverse navbar e offre la

Possibilità di inserire all'interno delle navbar molti elementi oltre ai collegamenti verso altre pagine: è possibile inserire un campo di ricerca, un elenco a discesa e molti altri elementi.

NAV ❖ NAV → elemento di navigazione

Prima di approfondire le navbar vediamo l'elemento di navigazione base di bootstrap, fatto con flexbox e permette di creare menu di navigazione flessibili. Eventualmente possiamo variare l'aspetto con nav-tabs e nav-pills (di default è a sinistra):

Posso modificare l'allineamento del componente "nav" attraverso le classi che permettono di modificare il flusso flexbox (default allineato a sinistra direction row):

  • .justify-content-center per allinearla al centro
  • .justify-content-end per allinearla a destra
  • .flex-column per menu
per centrarlo verticalmente
per allinearlo a destra
per ripristinare il menu orizzontale
verticale (flex direction)
eventualmente con text-center
per ripristinare il menu orizzontale

Dropdown e Burgen icon menù ❖ → DROPDOWN e BURGER ICON MENU

Il dropdown è un tipo di menu a discesa (si apre quando si fa clic o si passa sopra). La burger icon menu, chiamata anche menu a comparsa o menu a scomparsa, è un tipo di menu nascosto che appare quando l'utente fa clic sull'icona "hamburger".

Quando abbiamo bisogno di aggiungere alla nostra navigazione dei comportamenti specifici (come un comportamento al click e non sull'hover), usiamo Javascript.

Il comportamento sull'hover si verifica quando l'utente posiziona il mouse sopra un elemento.

cursore del mouse su un
Dettagli
Publisher
IsaIsa.30
A.A. 2022-2023
61 pagine
SSD Scienze matematiche e informatiche INF/01 Informatica
I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher IsaIsa.30 di informazioni apprese con la frequenza delle lezioni di Linguaggi e nuove tecnologie per il web 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 di Milano - Bicocca o del prof Quarti Diana.