Rendere un articolo un capolavoro estetico. Gli Object TAGs in LSNN e gli stylesheet in html

Nel precedente articolo si è parlato di Object TAGs ed è stata proposta una tabella comparativa con i Object TAGs principali. Oggi riportiamo un breve tutorial sui tag da utilizzare con i Object TAGs.

Per riprendere la definizione degli Object TAGs clicca qui: « Object TAGs »

Introduzione Quando si crea un articolo, è possibile scrivere il contenuto in modo standard, come si fa con un comunissimo programma di scrittura ad esempio OpenOffice, Word oppure Page. Il portale LSNN mette a disposizione un Editor potente e user friendly. L'editor è di tipo WYSIWYG, acronimo che sta per l'inglese What You See Is What You Get. Il termine è proprio del campo dell'informatica ed ha sostanzialmente tre significati. Il primo significato si riferisce al problema di ottenere sulla carta del testo e/o immagini che abbiano una disposizione grafica equivalente a quella visualizzata sullo schermo del pc, personalmente provengo da quel periodo e sono una professionista che ha promosso in Italia questa tecnologia. Con il tempo il significato dell'acronimo si è esteso per analogia anche ad alcune problematiche nella creazione di pagine web. Per intenzione dei suoi creatori, il codice HTML descrive le pagine in maniera logica e non dà nessuna informazione sulla disposizione grafica degli elementi al dispositivo o al browser che dovrà interpretare il codice. Per superare il problema sono stati sviluppati nuovi standard. Uno di questi è il foglio di stile (CSS: Cascading Style Sheets, Fogli di stile a cascata), che è un codice che tra le sue potenzialità possiede anche quella di poter descrivere, entro ragionevoli limiti, l'aspetto grafico di una pagina web (questo purché il dispositivo o il browser che interpretano il codice della pagina siano compatibili con i fogli di stile).

Ora che si ha chiara questa definizione, è possibile introdurre alcuni elementi chiamati TAGs anch'essi che determinano gli spazi e le dimensioni delle aree destinate ai contenuti. Come detto nel precedente articolo “È un buon sistema per creare Leading page accattivanti e coinvolgenti.”

A questi elementi abbiniamo la struttura HTML che il portale LSNN ha nativamente. Due di questi elementi sono 1) la modalità Responsive e 2) le modalità Chiaro Scuro.

Cosa sono questi elementi [img]CSS-media-query-breakpoints.jpg[/img]

Questa immagine ci aiuta nel comprendere il significato di #Responsive. Come si osserva è semplice, responsive è quindi un sito che si adatta automaticamente e in modo fluido al dispositivo e alle sue caratteristiche e cioè alla grandezza dello schermo, alla sua risoluzione, al colore e al suo orientamento, anche nascondendo o eliminando informazioni superflue per alcune modalità di fruizione.

Avendo chiara questa definizione, è più facile progettare pagine che diano l'esatta esperienza, senza che l'utente si ponga la domanda su cosa e come fare per vedere quel contenuto.

[img-left]oscura-dark-light.png[/img-left] Allo stesso modo abbiamo la modalità Chiaro Scuro, in termini di web design, uno schema di colori chiaro su scuro (chiamato anche modalità nera, modalità #oscura, tema scuro o modalità notte) è uno schema che predispone il dispositivo alla visione in una modalità di colori predefinita che crea la migliore l'esperienza di leggibilità del dispositivo, all'utente. In due parole di sera leggere dei contenuti con luce molto forte potrebbe essere fastidioso, quindi i dispositivi (device) di nuova generazione hanno implementato questa possibilità operativa. LSNN ha nativamente implementato questa tecnologia.

puoi leggere l'articolo che ho scritto a febbraio « Semplici modi per ridurre l'affaticamento degli occhi del computer » per avere maggiore realtà sugli effetti prodotti da questa tecnologia. Qui è spiegato “Cos'è l'affaticamento visivo digitale?, Cos'è la luce blu? e 5 consigli per ridurre l'affaticamento della vista digitale”

Cosa comporta tutto questo [img-left]oscura-dark-light-sun-moon.png[/img-left]Un sito che sfrutta questa tecnologia, migliora l'esperienza dell'utente. La rende adeguata alla situazione.

Ma perché stiamo riportando questi dati?

Il motivo è semplice. Se si crea una leading page, si dovrà tenere conto di queste due condizioni, quindi il fatto che sia #responsive e che sia presente nativamente, la modalità #oscura.

Il consiglio che si da agli autori di pagine, è il seguente

Quando si progetta un contenuto destinato a un prodotto che richiede maggiore impatto estetico, L'effetto voluto su di un target specifico di persone. Chi sono questi utilizzatori di dispositivi? Computer Desktop, Tablet o Mobile? «smartphone»

Il secondo quesito: la modalità Oscura”. L'accostamento di colori che in chiaro/light siano leggibili ma che, in una pagina oscura/dark con colori sgargianti peggiora l'esperienza dell'ospite.

I TAGs, e come si utilizzano all'interno di un « Object TAGs » un esempio semplice di « Object TAGs » potrebbe essere questo [ avatar ] contenuto [ / avatar ]

Determinare il modo in cui il contenuto dentro a AVATAR dovrà presentarsi è semplice. Ci viene in aiuto un insieme di TAG che determinano margine, imbottitura, dimensione dei caratteri o delle icone e i colori degli sfondi o del carattere.

Se si desidera creare un blocco che ospiterà AVATAR (area che ospita una scheda specifica di contenuti) è necessario abbinarlo a FIELDSET Object Tag che può essere utilizzato con o senza etichetta.

Ecco due esempi di utilizzo che ne determinano gli effetti visibili.

[rect][ fieldset ][ legend ] Come sfruttare al massimo il sistema dei tag object: [ /legend ][ /fieldset ]

[p fs15]è stato inserito anche avatar per riempiere l'esempio di contenuti. Come si osserva non sono stati fissati i colori, quindi il risultato sfrutta lo schema nativo del core del portale LSNN. [/p][p]Questa riga di codice #OBJTag utilizza sia avatar che fs20 p40 m20 [/p] [/rect]

L'effetto che si ottiene è il seguente [fieldset][legend]Come sfruttare al massimo il sistema dei tag object:[/legend] [avatar fs20 p40 m20] [icon ito-running1 fs25 pb20][/icon][span pb20 ]Lo sport preferito dagli Italiani[/span][p]Qui si sta usando: fs20 p40 m20

[p]esempio «I Rich Snippet, poi, rappresentano il "plus" della categoria dal momento che, come si comprende bene dall'aggettivo che ne precede il nome, sono arricchiti con diverse tipologie di contenuto aggiuntivo. Anche quando questi "valori aggiunti" non esistevano ancora, comunque, l'attenzione sugli snippet e sulla loro funzione è sempre stata molto alta. Importantissima, innanzitutto, la loro ottimizzazione garantendo, innanzitutto, che Meta Description e contenuti fossero coerenti e monitorando continuamente le preferenze degli algoritmi di Google. Si è sempre cercato di procedere alla costruzione di url che fossero SEO friendly e che dessero ai motori di ricerca ogni dato possibile per sapere come appaiono i siti agli utenti.»[/p]

[/fieldset]

Tabella di sintesi dei TAGs FS P e M [img-right]margin-border-padding.png[/img-right] ► fs20 “font / size / pixel” [span] ► determina la dimensione del carattere e si può utilizzare per determinare le dimensioni del carattere da: fs3 fino a fs35[/span][span]poi si ha fs40 , fs45, fs50, fs60, fs70, fs80, fs90, fs100qpoi si ha fs40 , fs45, fs50, fs60, fs70, fs80, fs90, fs100[/span]

[span]► p40 “padding / pixel” [/span]

► determina il margine interno all'area che si sta implementando

► con pn si intende senza margine interno, poi si segue pn1 a pn10, pn12, pn15, pn20, pn25, pn30, pn35, pn40, pn50

► determinare i margini interni i lati specifici alto, basso, destro, sinistro

► si ripete per le dimensioni lo stesso schema numerico con pt, pb, pl, pr e stessa scala come per pn “ pt = padding-top - pb = padding-bottom - pl = padding-left - pr = padding-right”. Questi determinano gli ingombri interni delle aree specifiche in cui sono presenti.

► determinare i margini esterni i lati specifici alto, basso, destro, sinistro rispettivamente mt, mb, mr, ml,

► si ripete per le dimensioni lo stesso schema numerico con mt, mb, m l, mr e stessa scala come per pn “ mt = margin-top - mb = margin-bottom - ml = margin-left - mr = margin-right”. Questi determinano gli ingombri esterni delle aree specifiche in cui sono presenti. Quindi un riquadro che ha margini = a 10px si scrive con m10 all'interno del #OBJTag [ code m10 ] contenuto html o di testo / immagini / video [ / code ]

[fieldset][legend]Come sfruttare al massimo il sistema dei tag object:[/legend] [avatar black white-text fs20 p40 m20] [icon ito-running1 white-text fs25 pb20][/icon][span white-text pb20 ]Lo sport preferito dagli Italiani[/span][img-right]margin-paggind.jpg[/img-right] [p white-text]Qui si sta usando: fs20 p40 m20[/p] [p white-text fs14]Esempio con valori sfondo Black e testo White. L'immagine è [ img-right ] di dimensioni minime 480px larghezza per dare la corretta resa anche quando si visita la pagina da un dispositivo #Mobile.[/p][p white-text]È interessante osservare quanto renda estetica, una pagina web l'uso corretto di questi #snippet. Aumentano l'impatto visivo, rendono le pagine funzionali e comunicative e ne determinano l'estetica. [/p][/fieldset]

[ppie]Lo snippet (letteralmente "ritaglio") è un frammento o un esempio di codice sorgente, di solito distribuiti nel pubblico dominio o come freeware[/p]