web design umbriaQuando si applicano le formattazioni sul testo in HTML, servono dei segnaposto o placeholder per generare dei paragrafi di prova in attesa di ricevere quelli con contenuti validi dal copywriter. Il sito dove generare questi contenuti da sostituire è https://it.lipsum.com/ ; in ottica SEO lo strong è rilevante molto più del BOLD che è deprecato. La stessa regola di ottimizzazione dei contenuti per i motori di ricerca vale per italic ed EM, dove non c’è nessuna differenza per i broiwser, ma solo a livello semantico, quindi si consiglia l’uso di I come italic. SMALL o <small> si usa per rimpicciolire le frasi, occorre sempre fare attenzione all’ annidamento dei tag, con aperture e chiusure pertinenti tra un tag e l’altro. Per le citazioni si usa il Q o <q> magari aggiungendo l’italic che mette le virgole, mentre il blockquote consente anche un rientro per le citazioni menzionate precedentemente. Poi abbiamo anche elementi strutturali come liste ordinate e disordinate, tag come <ul> o <ol> e <li> con i relativi tag di chiusura, dove gli <li> sono gli elementi interni; gli elementi decorativi si possono cambiare in alternativa al pallino e con i CSS posso costruire anche menù orizzontali, con sottoliste annidate, sempre inserendo <ul>; e del link ne vogliamo parlare, la famosa ancora come si applica? Ilo tag <a> circonda il link che vogliamo creare usando l’attributo href, che fa assumere la caratteristica colorazione blue di default al testo per indicare il collegamento ipertestuale. Utilissimo anche il tag <a> ancora per collegare le parti della singola pagina, usando il famoso cancelletto# coordinato con l’ID degli elementi interni da linkare; l’ ID è l’essenza del DOM e sta alla base anche per i linguaggi di programmazione e soprattutto utile per i fogli di stile. Sulle tabelle i pezzi costituenti sono <table> <tbody><thead> <tr> e <td>, ossia i marcatori, l’area di intestazione, le righe e le celle e l’area che delimita i contenuti TBODY inserito sotto l’intestazione che ha la descrizione della griglia; è bene usare i <div> e le <section> dove inserire elementi come le tabelle. Per inserire i video della nostra cartella video posso usare il tag <video> che ha gli attributi di lunghezza e altezza e il tag <source src=””> per dire al browser dove attingere al video in formato mp4 (standard supportato dai browser). Posso usare all’ interno del tag video l’attributo autoplay settato a valore = 1, che va usato con parsimonia in quanto riproduce con moto continuto gli stessi suoni e immagini. Posso anche usare il tag <iframe> con l’embed, facendo il copia e incolla dai link proposti da you tube per esempio e usare l’attributo autoplay semplicemente aggiungendolo a fine stringa; a questo punto siamo pronti e maturi per saltare all’ argomento stile, anche se non abbiamo esaurito l’analisi dei tag a corredo presenti nell’ HTML; abbiamo tre modi di lavorare con gli stili, interni, esterni, in linea. Quest’ ultimi e gli interni sono sconsigliati in quanto appesantiscono il caricamento della pagina e snaturano l’idea di fondo di una separazione tra contenuto e contenitore per semplificare la gestione e la lettura del codice. Gli stili sono fatti di regole definite da selettori e proprietà, con il “color” posso cambiare il colore di un elemento, per esempio. I CSS in linea inoltre presuppongono il cambio manuale di ogni singolo elemento nella pagina, mentre con i css esterni possiamo modificare solo una volta la proprietà che mi interessa per modificare la risonanza per tutta la pagina. Gli stili incorporati vanno usati con parsimonia all’ interno delle strutture HEAD sempre per la stessa ragione, caricamento della pagina e complessità nella scrittura del codice. Come web designer noi dobbiamo semplificare non creare matasse complesse di situazioni che possono convivere in maniera separata. L’uso delle tre situazioni dipenderà dal tipo di progetto e le scelte sono condizionate appunto da che tipo di cambiamenti vogliamo modellare sulle pagine. Quando ci sono poche pagine tutto è concesso, ma integrare i css all’ interno di lunghe pagine per la leggibilità e l’ottimizzazione non è appropriata. Separare la struttura dallo stile è la prassi comune, i file con estensione css esterni ci aiuteranno a rendere il ns progetto più veloce e performante ma anche più gestibile in quanto tutti gli elementi sono ordinati dentro cartelle specifiche, identificate dalla loro funzionalità. I fogli stile si collegano con il tag <link rel=”stylesheet” href=”css/base.css”> e inseriti nel tag HEAD. In questo modo cambiare da rosso a verde per un tag H3, agendo sul singolo foglio css consentirà una sola modifica per tutte le pagine che subiranno l’effetto della nostra gestione. E i font da utilizzare presi da https://fonts.google.com/ come vanno usati? Sempre con parsimonia per non appesantire la pagina. E’ bene customizzare il font prescelto, inserendo lìopzione BOLD e garantendo comunque un caricamento moderato, accettabile. Con la scrittura link href ordino alla pagina di scaricare quello che mi necessità, il link viene fornito da Google sulla scheda di selezione. La proprietà font-family sui selettori si applicherà nelle varie regole a seconda dell’ utilizzo, tenendo presente quei criteri di uniformità e di omogeneità per non proporre troppe distrazioni all’ utente che deve essere guidato per mano verso un azione di conversione. La grandezza del font si esprime con font-size; con il font-weight si definisce la pesantezza in bold del carattere per metterlo in evidenza; background-color é la proprietà che mi consente di gestire gli sfondi dei selettori, ad esempio posso mettere un grigio di sfondo su tutti gli h3, ovviamente questa regola applicata al body colorerebbe tutta la pagina con quel colore annotato; CHROME ha il tool colorzilla con il color picker per estrapolare gli esadecimali o gli RGB delle pagine in linea, con palette e scale da sfruttare per la nostra costruzione dei nostri accostamenti cromatici. Con il selettore TABLE i nostri CSS possono gestire, il bordo con diverse opzioni, la lunghezza e la larghezza della tabella, il colore, lo sfondo, font etc, etc; con la proprietà border-collapse settata a collapse la doppia riga di definizione delle celle diventa una. Con la proprietà text-transform e il valore UPPERCASE posso trasformare il testo in maiuscolo. Classi e identificativi unici che cosa sono quando si parla dei fogli di stile. E se io volessi diversificare lo stile dei tag div per esempio? Posso definire delle classi, dei nomi arbitrari, in modo da applicare ogni regola per le mie esigenze, quindi definisco una classe, un modello, che posso customizzare e personalizzare per le mie diversificazioni senza influire su tutti i blocchi testo, per esempio. Le classi nel foglio stile si definiscono con un PUNTO (.) seguito dal nome scelto per definire il modello, mentre per applicarla basterà digitare nella pagina HTML semplicemente class=”nomescelto”; posso anche usare la tecnica degli identificativi univoci, ossia quando gli elementi della pagina sono battezzati con dei nomi specifici, posso richiamare questi nomi tramite la sintassi del cancelletto nel foglio di stile. Per le classi esiste anche la regola dell’ ereditarietà, nel senso che i figli dei parent, possono essere modellati senza conflittualità con altri elementi esterni, basta aggiungere l’elemento dopo la regola definita per il parent, ad esempio potrei avere l’esigenza di cambiare un h2 senza influenzare gli altri tag analoghi che non appartengono a una porzione specifica di pagina, in questo modo la regola lavora esclusivamente sui selettori menzionati. Per l’allineamento del testo si usa la proprietà text-align, con vari valori che possono essere justify, center destra o sinistra, right o left per l’appunto. Le parole inglesi aiutano molto per gestire la gestione delle pagine web. Esiste anche un modo per aggiungere una classe alla classe, spaziando e aggiungendo il richiamo voluto ad esempio se ho una class=testobold io posso aggiungere a questa anche un class=testobold (spazio) centrato con l’accortezza di creare nel foglio stile le classi menzionate con l’attribuzione dei valori alle proprietà, ossia .testobold e .centrato per l’appunto. I CSS sovrascrivono le regole, se applico una classe a un DIV e questo ID ha un nome identificativo unico, posso aggiungere un altrà proprietà a quel div, ad esempio una caratteristica di font-weight che passa da 300 a un altro valore, per esempio. Ad esempio un logo ha come caratteristica proprio un identificativo unico perché ne abbiamo solo uno, quindi conviene usare la tecnica del cancelletto perché è più facile intervenire.

Annunci