MOVE
MOVE
MOVE
MOVE
MOVE
MOVE
Venerdì
00:05:55
Marzo
25 2022

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

View 756

word 1.3K read time 6 minutes, 36 Seconds

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

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.

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

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.

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

è 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.

Questa riga di codice #OBJTag utilizza sia avatar che fs20 p40 m20

L'effetto che si ottiene è il seguente

Come sfruttare al massimo il sistema dei tag object: Lo sport preferito dagli Italiani

Qui si sta usando: fs20 p40 m20

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.»

Tabella di sintesi dei TAGs FS P e M


fs20 “font / size / pixel”

► determina la dimensione del carattere e si può utilizzare per determinare le dimensioni del carattere da: fs3 fino a fs35 poi si ha fs40 , fs45, fs50, fs60, fs70, fs80, fs90, fs100qpoi si ha fs40 , fs45, fs50, fs60, fs70, fs80, fs90, fs100

p40 “padding / pixel”

► 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 pnpt = 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, ml, mr e stessa scala come per pnmt = 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 ]

Come sfruttare al massimo il sistema dei tag object: Lo sport preferito dagli Italiani

Qui si sta usando: fs20 p40 m20

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.

È 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.

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

Source by Redazione


LSNN is an independent editor which relies on reader support. We disclose the reality of the facts, after careful observations of the contents rigorously taken from direct sources, we work in the direction of freedom of expression and for human rights , in an oppressed society that struggles more and more in differentiating. Collecting contributions allows us to continue giving reliable information that takes many hours of work. LSNN is in continuous development and offers its own platform, to give space to authors, who fully exploit its potential. Your help is also needed now more than ever!

In a world, where disinformation is the main strategy, adopted to be able to act sometimes to the detriment of human rights by increasingly reducing freedom of expression , You can make a difference by helping us to keep disclosure alive. This project was born in June 1999 and has become a real mission, which we carry out with dedication and always independently "this is a fact: we have never made use of funds or contributions of any kind, we have always self-financed every single operation and dissemination project ". Give your hard-earned cash to sites or channels that change flags every time the wind blows , LSNN is proof that you don't change flags you were born for! We have seen the birth of realities that die after a few months at most after two years. Those who continue in the nurturing reality of which there is no history, in some way contribute in taking more and more freedom of expression from people who, like You , have decided and want to live in a more ethical world, in which existing is not a right to be conquered, L or it is because you already exist and were born with these rights! The ability to distinguish and decide intelligently is a fact, which allows us to continue . An important fact is the time that «LSNN takes» and it is remarkable! Countless hours in source research and control, development, security, public relations, is the foundation of our basic and day-to-day tasks. We do not schedule releases and publications, everything happens spontaneously and at all hours of the day or night, in the instant in which the single author or whoever writes or curates the contents makes them public. LSNN has made this popular project pure love, in the direction of the right of expression and always on the side of human rights. Thanks, contribute now click here this is the wallet to contribute


Similar Articles / Rendere ...t in html