TESTO. gestione e utilizzo

Transcript

1 TESTO gestione e utilizzo

2 Queste slide Queste slides fanno parte del corso Web Design & HTML. Il sito del corso, con il materiale completo, si trova in Data la rapida evoluzione della rete, il corso viene aggiornato ogni anno. Il presente materiale è pubblicato con licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 ( by-nc-sa/3.0/it/deed.it ): La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati. L autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.

3 INTRODUZIONE Il testo rappresenta la maggiorparte del contenuto dei siti web ed è sicuramente di grande importanza per l utente e per i motori di ricerca.

4 TESTO IN HTML Esistono diversi elementi in grado di gestire gerarchie e scopo del testo. Definire un elemento significa definire il valore semantico. Principali tag: <h1> <h2> <h3> <h4> <h5> <h6> altri tag: <p> <br> <span> <b> <i>

5 TESTO IN HTML Esistono tag per contesti peculiari <abbr> abbreviazione <acronym> acronimo <address> informazioni di contatto <blockquote> citazione lunga <q> quatozione <cite> citazione breve <dfn> definizione

6 FORMATTAZIONE TESTO Attraverso i css possiamo gestire la formattazione testo. Le principali istruzioni sono font e text Font-size corpo del font line-height interlinea font-family famiglia carattere font-style stile del font (normal/italic/oblique) font-weight grassetto del testo (bold, bolder,400,600,900) font-variant variazioni (small-caps, normal) text-decoration decorazione del testo (underline, none ecc) text-transform maiuscolo/minuscolo (uppercase, lowercase) text-indent indentazione del testo text.align allineamento del testo

7 FORMATTAZIONE TESTO altri... color colore del testo white-space forza il testo ad andare a capo o a rimanere sulla stessa linea letter-spacing spaziatura tra le lettere word-spacing spaziatura tra le parole alcune psudo-elementi applicabili al testo: :first-letter seleziona la prima lettera :first-line seleziona la prima linea di testo

8 CARATTERE DEI FONT SU WEB La scelta dei caratteri è sempre limitata da famiglie di font websafe font-family:helvetica, arial, sans-serif; In questo modo viene definito come font principale l helvetica, nel caso il computer dell utente non disponga di questo font verrà utilizzato l arial o in alternativa un font senza grazie disponibile nel sistema operativo.

9 FONT REPLACEMENT CSS Per inserire un font nella nostra pagina web possiamo utilizzare la tecnica font replacement font-family: myfontname ; src:url(../font/myfontfile.otf ); }

10 FONT REPLACEMENT CSS Per verificare questa tecnica possiamo appoggiarci a servizi che offrono font utilizzabili liberamente come:

11 PERCHÈ FONT SQUIRREL Font squirrel è un sito web da dove è possibile scaricare font gratuiti, tuttavia di interesse maggiore offre un servizio di creazione di web font kit. Cos è un web font kit? È un kit composto da diversi font file con diverse estensioni, con le quali è possibile visualizzare on-line un font che non appartiene alle famiglie font web safe. Il web font kit è caratterizzato anche da un file css che richiama tutti i font con le loro estensioni. Che tipo di font usare? Le estensioni di font disponibili per la conversioni sono: TTF (true type font), OTF(open type font) Assicurarsi che il font sia legale e/o non faccia parte della libreria typekit di Adobe altrimenti risulta difficile se non impossibile caricarlo.

12 FONT SQUIRREL - metodo Step 1 - caricare Assicurarsi che il font rispetti i requisiti. Cliccare su webkit generator, spuntare la checkbox e cliccare generate, sucessivamente download. Step 2 - la cartella Dopo il download rinominare la cartella (nome: font) e inserirla nella root folder del sito. Rinominare anche il file css (nome: font_style.css) Step 3 - il codice HTML Creare un link nel documento HTML che richiami il file appena rinominato. Step 3 - il codice CSS Inserire dove serve (Es. h1 p...) la regola: font-family: myfontname ;

13 PERCHÈ GOOGLE FONT? Google Font è una libreria che offre una vasta gamma di font on-line. Anche loro utilizzano la tecnica font face ma a differenza del metodo spiegato precendentemente qui abbiamo tutto on line. Vantaggi: scelta rapida del font, velocità nel caricamento, velocità nell istallazione, ottima compatibilità svantaggi: libreria limitata, necessità di una connessione anche in fase di progettazione

14 FONT REPLACEMENT CUFON Cufon è una libreria javascript in grado di sostituire il font nella pagina web L utilizzo di questa tecnica implica l inclusione della libreria nella pagina web e l inserimento di un file custom generabile sul sito di cufon