Archivio dei tag Link

A scuola di html

Francesco Degortes No Comments

Le vacanze sono finite ed è ora di tornare sui banchi.

Fatta la scorta di grasso per affrontare il freddo inverno, the winter is coming…da un pezzo, siamo prontissimi, forse, a buttarci, con un po’ di nostalgia, nel mare del web. Nel mare della rete? Ma che vuol dire? Io ho sempre visto le reti a mare, ma…stop. Facciamo i seri. Ci tuffiamo nel web, senza mare, no nostalgia, no amarcord… pesci suicidi.

Cosa tiriamo fuori dalla rete? Una lingua nuova.

Oggi impareremo a parlare html. Solo le nozioni base, quelle necessarie alla sopravvivenza del turista.

Il linguaggio nasce in terra elvetica (CERN di Ginevra) tra la fine degli anni 80 e inizi 90 del XX secolo
(quando Ligabue portava i capelli lunghi, gilet muccati e gli stivali, Will Smith era il principe di  Bel Air e per chiamare un amico si suonava al campanello di casa), ma oggi è parlato in tutto il web e la gente gira col risvoltino. I Padri dell’Html sono Tim Berners-Lee e Daniel Connolly che nel 1993 ne pubblicarono la prima definizione. Anche l’html ha la sua Accademia della Crusca, chiamata W3C (World Wide Web Consortium) che a partire dal 1994 ha la prerogativa sullo sviluppo del linguaggio… e il mondo divenne selvaggio.

L’HTML (Hyper Text Markup Language = Linguaggio di marcatori per ipertesti) è un linguaggio di formattazione (evolutosi nel tempo, oggi siamo all’html5), che descrive le modalità di impaginazione o visualizzazione grafica (layout) del contenuto, testuale e non, di una pagina web attraverso tag di formattazione (l’ho preso da wikipedia).

In parole semplici l’html, non è altro che una serie di indicazioni o elementi (tag) che indicano dove e come deve essere visualizzata una pagina web: la foto a destra, il testo a sinistra, lo stile da utilizzare, quando andare a capo, il grassetto, i colori etc, creando così un documento multimediale.

I documenti HTML sono in grado di incorporare molte tecnologie, linguaggi come CSSJavaScriptXMLJSON e altre applicazioni multimediali, che permettono di aggiungere al documento ipertestuale controlli più sofisticati sulla resa grafica, interazioni dinamiche con l’utente, animazioni interattive e contenuti multimediali.

Non lo si può definire comunque un linguaggio di programmazione sebbene supporti l’inserimento di script e oggetti esterni quali immagini o filmati, ma più di impaginazione ipertestuale. Iper(testuale) perché la lettura può non essere lineare, è possibile cioè saltare da un documento all’altro o da un punto all’altro dello stesso documento, attraverso parole chiave usate come collegamenti ipertestuali (hyperlink). Di solito queste parole sono colorate di blu o in grassetto o sottolineate per renderle riconoscibili: html

Divago un attimo, ma neanche troppo:

In contemporanea all’html nasce anche l’http L’HyperText Transfer Protocol  (protocollo di trasferimento ipertesto), che è il protocollo utilizzato per il trasferimento dati tra server e browser. (la pagina web scritta in html viene trasportata dal server al browser utilizzando questo protocollo)

E’ come se ti trovassi in Giappone in visita da un amico.

Tu sei tu, fin qui tutto bene e in Giapponese sai dire solo arigatò, che manco lo sai scrivere. Chiedi al tuo amico di andare a comprare il pesce

Il tuo amico (browser) si reca in pescheria (il server) per domandare il pesce (pagina web) al commesso che lavora in pescheria (server web: software in funzione sul server). Il serverwebpescivendolo consegnerà la merce imbustata (protocollo http). A questo punto devo forzare un po’ l’esempio. solo il tuo amico sa come scartare il pesce. Il tuo browseramico tornerà a casa e tolto l’involucrohttp ti consegnerà il tuo bel pescefrescopaginaweb. Forse era meglio l’esempio del traduttore.

Invertendo: tu digiti la pagina che vuoi raggiungere (pesce), il browser (il tuo amico) raggiunge il server (la pescheria), e chiede al server web (il pescivendolo) la pagina web desiderata (pesce). Il server web(pescivendolo) consegna la paginaweb(pesce) al tuo browser(amico), httpimbustataeimpacchettata per portarla sullo schermo del tuo pc(casa). Il browser(amico) elaborando le informazioni scritte in html ti mostrerà una pagina semplice ed ordinata ( se lo sviluppatore è stato bravo) in modo che tu possa usufruirne facilmente.

Togliendo, il pescivendolo, il tuo amico, il Giappone (lo so ti piaceva l’idea della vacanza nipponica)… rimane quanto segue:

I documenti HTML vengono immagazzinati sui dischi rigidi di macchine elaboratrici (computerserver) costantemente collegate e connesse alla rete Internet. Su queste macchine è installato un software specifico (web server) che si occupa di produrre e inviare i documenti ai browser degli utenti che ne fanno richiesta usando il protocollo HTTP per il trasferimento dati. (anche questo preso da wiki). Scusate se il lavoro è già fatto, e fatto bene, perché non sfruttarlo. Furbo come un vecchio lupo di mare, o forse quella era la volpe.

Nella definizione abbiamo detto che l’html determina la disposizione della pagine attraverso tag di formattazione, ma cosa sono questi tag (contrassegni)?

I tag sono una serie di contrassegni appunto,  rappresentati tra parentesi uncinate o angolari, i segni di minore “<” e maggiore “>”, e solitamente ne troviamo uno di apertura es. <B> e uno di chiusura </B> , costituito da una sbarra che precede il nome del tag ( in questo caso B, che sta per bold = grassetto).

esempio: <b> ciao </b> la parola ciao viene visualizzata in grassetto sul tuo pc o smartphone.

I tag possono anche essere racchiusi l’uno dentro l’altro, in questo caso si dice che sono annidati.

Es. <b><I> ciao<I> </b>

I sta per italic = corsivo  quindi vedremo scritto ciao.

Alcuni tag come  <img>, che serve per inserire un’immagine in un determinato punto della pagina, o <br>, che serve per andare a capo, non necessitano del tag di chiusura; in questo caso si parla di tag a chiusura implicita.

In XHTML, una variante di HTML4, invece, la chiusura implicita è proibita e tutti i tag devono essere sempre chiusi, in questi casi usando il carattere ‘/’ alla fine del tag stesso ( <img />; <br />).

Per realizzare un documento HTML non c’è bisogno di un particolare programma, ma è sufficiente un semplice elaboratore testi come il Blocco Note.

Anche se oggi è possibile delegare la scrittura del codice HTML ad applicazioni specifiche, gli editor html come WYSIWYG, che generano il codice vero e proprio automaticamente permettendo al designer di occuparsi dell’aspetto grafico finale della pagina.

La struttura del documento html viene detta ad albero annidato. I tag <html> e</html> delimitano tutto il documento. Questo tag  serve a comunicare al browser che tutto quello che è compreso in questo intervallo è stato redatto secondo il linguaggio di contrassegno HTML.

All’interno dei tag <html> troviamo tutte le informazioni su come sarà la nostra pagina web.

Lo standard prevede che siano sempre presenti due sezioni ben distinte e disposte in sequenza ordinata:

  • L’header=intestazione, delimitata tra i tag <head> e </head>, che contiene informazioni di controllo normalmente non visualizzate dal browser, con l’eccezione di alcuni elementi come La coppia di tag <TITLE> e </TITLE> che delimitano il titolo.
    Tutto ciò che viene digitato tra questi due tag appare nella barra del titolo (è la barra che si trova più in alto nella finestra del browser).
  • Il body=corpo, delimitata tra i tag <body> e </body>, che contiene la parte informativa vera e propria, ossia il testo, le immagini e i collegamenti che costituiscono la parte visualizzata dal browser e racchiude quindi tutti gli altri tag che verranno utilizzati per dar vita al documento HTML.

 

<HTML>
             <HEAD>
                            <TITLE>marketingacolori</TITLE>
             </HEAD>
             <BODY>

                            <H1 align=center>A scuola di html</H1>

                             <P>Spero che l’articolo vi sia piaciuto.</BR>Continuate a seguirci.

                              <P>Ciao a tutti.

                              <P>Alla prossima <BR> Francesco Degortes

               </BODY>
</HTML>


Per vedere il risultato:

  1. Apri l’elaboratore testi (Blocco Note)
  2. Copia e incolla il testo 
  3. Salva il file con il nome ciao.html
  4. Apri il file in questione.

H sta per Header = titolo che può avere un valore da 1 a 6

P sta per Paragraph = paragrafo

Br sta per Break = interruzione

I tag <P> e <Br> non necessitano tag di chiusura </P> e </BR>

I tag <P> e <H> supportano l’attributo align=allineamento, che ha tre parametri:

  1. align=right – allineamento a destra;
  2. align=center – allineamento al centro;
  3. align=left – allineamento a sinistra;

 

Spero che questo articolo vi abbia fatto entrare nel mondo Html sorridendo e senza sbadigliare troppo.

 

Alla prossima!

I Colori del SEO

Chantal Bombaci No Comments

SEO, un acronimo che sta per Search Engine Optimization , tre lettere fondamentali per ogni strategia di Web Marketing. Per questo abbiamo intervistato un collega di grande esperienza nel settore.

La parola a Daniele Muscarella, laureto in Ingegneria Informatica, si occupa di SEO per la sua web agency vidacms.it e per il portale di web reputation difesareputazione.it.

 


 

 

1 – Prima domanda: Come riuscire nell’ardua impresa dell’ottimizzazione sui motori di ricerca?

Banalmente vorrei risponderti che fare un buon lavoro SEO significa piazzare i propri contenuti nei primi posti delle SERP corrispondenti a tutte le keywords più ricercate. E’ evidente che tutti i webmaster vogliono la stessa cosa e che quindi, usando un termine tanto caro a Google, c’è moltissima competitività sulle keywords più popolari. Fare un buon lavoro oggi significa innanzi tutto identificare all’interno dei servizi/prodotti che si vuole proporre la giusta nicchia nel quale ottenere ottimi risultati. In america si usa dire “niche is rich” perché oggi la SEO si concentra sulle ricerche a coda lunga. Se ad esempio la mia azienda vende e produce gelati è molto difficile ottenere la prima posizione sulla ricerca “gelati”, è molto più proficuo lavorare su keywords come “gelati senza lattosio” o “gelati artigianali”, probabilmente la frequenza delle ricerche sarà minore ma gli utenti che hanno utilizzato la ricerca a coda lunga è molto più profilata e probabilmente interessata all’acquisto di chi magari ha cercato genericamente “gelati”.

2 – Cosa risulta essere necessario per creare dei ”contenuti di qualità”?

L’obiettivo di Google è quello di offrire ai propri utenti il miglior servizio possibile con Google Search. Vuole in pratica che i contenuti mostrati siano quelli realmente più interessanti rispetto ad una determinata ricerca. Un sistema quasi “naturale” e ben lontano dalle manipolazioni e dagli errori dei sistemi di 10 anni fa. Google premia quindi i contenuti di qualità, e all’interno di questo semplice aggettivo racchiude svariati parametri, dalla naturalezza del testo, la giusta disposizione dello stesso, l’evidenziazione delle parti più interessanti, l’integrazione con foto e video (il 2015 ed i primi mesi del 2016 hanno evidenziato la crescita esponenziale dell’interesse verso i contenuti video), e soprattutto l’originalità dei contenuti.
3 – A proposito di Inbound link: come gestirli?

Sebbene oggi abbia veramente meno importanza di un tempo è sicuramente ancora utile avere una buona referenziazione dei propri contenuti. Oggi più che ieri però bisogna stare attenti alla qualità di questi referenziatori, evitando con cura quelli “generalisti” in stile directory, cercando invece di ottenere guest post con inbound link su siti/blog popolari e famosi sull’argomento corrispondente ai contenuti che vogliamo promuovere.

4 – Andiamo un po’ sul personale, quale tra i social network è per te il più efficace in un’ottica SEO?

A dire il vero la maggior parte dei social network pubblicano i link con l’attributo no-follow e quindi in teoria non hanno alcuna valenza per la strategia SEO. Google in realtà ha cambiato radicalmente l’approccio con cui analizza i social network per valorizzare il posizionamento dei contenuti, dando maggiore importanza a tutti i profili e le pagine con molto seguito e con un alto numero di interazioni e condivisioni. Premia quindi l’autorevolezza della fonte (da qui il sempre maggiore interesse per quei profili con moltissimi follower, i così detti “influencer”) ancora una volta nel modo più “naturale” possibile. In tal senso ritengo che oggi sia Facebook quello che più di tutti può aiutare in ottica SEO.

5 – E’ il momento del linguaggio in codice: keywords, tag html, rich snippet. Parlaci di queste terrificanti creature.

Tutto il lavoro di SEO on-page è fondamentale. Non bisogna usare pratiche di over-optimizing ma seguire le indicazioni che lo stesso google fornisce nella sua Google Search Console. In tal senso i meta tag “description” ed il tag “title” sono ancora oggi molto importanti (anche perché sono parte dello snippet del tuo contenuto nelle SERP) e sono importanti anche i tag di heading e gli altri evidenziatori. Tutte le informazioni aggiuntive come i rich snippet e i dati strutturati sono parimenti importanti così come tag specifici per le condivisioni (le twitter:card e i meta open graph). In generale direi che un sito tecnicamente ben strutturato rispecchia quella “qualità” a cui facevamo riferimento anche sopra.

6 – Esponici ora una strategia per te efficace.

Io ritengo che aggiungere informazioni testuali ai link ed alle foto sia fondamentale. In tal senso gli attributi “title” ed “alt” andrebbero sempre aggiunti ai rispettivi tag.

7 – L’importanza di un sito ottimizzato per mobile, è necessario per raggiungere il nostro obiettivo?

Direi che in questo caso si dovrebbe parlare di penalizzazione. I siti non responsive sono sicuramente penalizzati nel posizionamento e quelli tecnologicamente adeguati vengono evidenziati con la dicitura “mobile friendly”. Le statistiche ormai dicono chiaramente che l’accesso ad internet avviene principalmente da dispositivi mobile. E’ ovvio che Google voglia proporre ai propri clienti contenuti che funzionano bene da smartphone e tablet.

8 – Nell’era dei Blog, cosa ci puoi dire a riguardo?

Il blog consente di aggiornare frequentemente il proprio sito. Qualche anno addietro Google ha rilasciato un algoritmo premiante in questo senso (“Google Freshness Update” o “Caffeine 2.0”). Inoltre un blog può essere utilizzato per referenziare parti del sito. E’ sicuramente utile.

9 – Velocità, compressione, interfaccia ‘user friendly’, pulizia del codice html, quanto impattano questi elementi?

Anche in questo caso direi che sono parametri che rientrano nel concetto generico di qualità. A quale utente piace aspettare svariati minuti prima di vedere apparire un contenuto sul proprio smartphone, magari perché impegnato a scaricare pesantissimi script? A nessuno suppongo! Ecco, questo google lo sa ed evita quindi di proporre siti non ottimizzati o troppo lenti.

10 – E’ il tuo grande momento, vai con la domanda (e la risposta) che non può assolutamente mancare agli sgoccioli di questa intervista.

Beh la domanda giusta poteva essere: è un lavoro semplice e dai risultati immediati? No, assolutamente. Bisogna analizzare ogni azione intrapresa valutandone gli effetti, bisogna aggiornarsi costantemente, bisogna utilizzare strumenti di monitoraggio, lavorare a stretto contatto con il cliente con trasparenza e professionalità evitando di apparire come quelli che sanno usare la “bacchetta magica”. Le magie non esistono.

11 – Qual è secondo te un buon investimento SEO per E-commerce?

Come ho detto nella premessa direi che investirei nella ricerca della giusta nicchia di mercato e magari in qualche buon influencer sociale.

12- L’algoritmo dei nostri giorni che faccia ha?

L’algoritmo cambia continuamente, per lo più con aggiornamenti che penalizzano le pratiche deprecate di over-optimizing. A Google non piace essere “fregata”.

Consulenza Marketing Realizzazione Siti Web