Cenni di SEO semantica

(giovedì 17 maggio)

Con l’avvento degli anni Duemila, i Search Engine erano molto più semplici di quelli odierni, in quanto studiati per analizzare il significato del testo o delle parole e si limitavano ad applicare regole ‘preconfezionate’, dando in questo modo maggiore peso alle parole chiave e al loro posizionamento nel testo o nei tag html.

Successivamente i motori di ricerca adottarono un perfezionamento dei propri algoritmi: ci si rese conto infatti che le keywords non erano più sufficienti ad ottenere risultati di qualità poiché a fronte si faceva riferimento a regole facili da “smontare” nella loro complessità. Si cominciò a parlare di spam engine.

Sorse dunque l’esigenza di andare oltre all’analisi delle kw per provare a comprendere il significato “intrinseco” delle parole. Per rispondere a questa esigenza verosimilmente sempre più stringente si svilupparono degli algoritmi cosiddetti semantici (modelli matematici che consentono di individuare un punteggio di pertinenza di un determinato documento per una query di ricerca dell’utente) unitamente all’implementazione di contenuti che, in quanto pertinenti alla ricerca, potessero corredare la “ricerca secca”.

Ci si accorge così che è possibile creare delle “relazioni” fra i vari elementi chiamate “entità” (l’entità rappresenta qualcosa – luogo, persona, brand – che consente alla macchina di capire il significato dei contenuti pubblicati e conseguentemente di integrare la lettura con informazioni di contesto – correlate -), presentandoli non più in maniera gerarchica ma organizzandoli come aggregati basati sul valore semantico: ecco, un insieme di relazioni basate su un grafo.

In questo modo si possono estrarre informazioni aggiuntive relative anche al di fuori della pagina web in considerazione del contesto (insieme di informazioni e dati strutturati che circonda la ricerca). E’ così che si comincia a parlare di SEO semantica, volta cioè a far capire al motore di ricerca di cosa si sta parlando, realizzando un passaggio da dati non strutturati (propri del linguaggio) a dati strutturati (comprensibili dalle macchine).

Si parla di campo semantico delle parole (insieme di tutte le parole pertinenti con quella data, dove la pertinenza è espressa da un legame di appartenenza della parola stessa) per indicare insiemi di vocaboli che hanno un legame con la parola in oggetto, permettendo al search engine di cogliere il significato di una parola o di una frase ragionando così sul suo contesto.

Un primo tentativo di algoritmo semantico, peraltro abbastanza efficace, è stato l’algoritmo LDA il quale si basava sul concetto di gruppi di Topic (insieme di termini “pertinenti”) finalizzati a “snellire” la varietà di documenti su cui andare poi a fare la ricerca ‘ultima’: in funzione di una propria query di ricerca esso risponde con un valore numerico compreso in un certo range (‘indice di pertinenza’) con cui indica quanto ogni singolo risultato sia pertinente alla ricerca effettuata. A meno della definizione di un “word space” (‘ventaglio’ di parole) l’apprendimento di un algoritmo LDA andrebbe avanti ‘senza soluzione di continuità’ generando risultati via via sempre meno attendibili.

 

Grazie ad algoritmi semantici Google, analizza e classifica le pagine ed i contenuti del web.

Una potenzialità della seo semantica è la disambiguazione, cioè è in grado di scandagliare le varie sfumature di significato che può assumere la parola ricercata, ricerche poi correlate nel grafo di ricerca.

 

L’efficacia degli algoritmi semantici finisce, o perlomeno viene limitata non producendo risultati attendibili, da problemi di polisemia (parole che hanno significato diverso in contesti diversi) che di conseguenza alterano in molti casi l’output. Anche il fornire pagine web con argomentazioni fuorvianti (la sorgente dell’informazione è ricca di “rumore”) rispetto all’argomento principale (racconti personali, commenti dei lettori, snippet di testo di articoli correlati che sporcano il contenuto) porta ad avere un documento ricco di testo extra che ne diminuisce la rilevanza anche se, magari, il contenuto è il migliore in assoluto. Ad ogni modo queste problematiche sono notevolmente ridotte quando tali algoritmi lavorano su settori verticali (es. vLex, Yummly, Zaptravel).

 

Da circa 5 anni fa, per migliorare il markup delle pagine web creando un formato standard dal quale attingere dati, l’impegno di Google ed altri motori di ricerca, al fine di organizzare le informazioni e renderle universalmente accessibili e fruibili, é orientato a trovare meccanismi che permettano di meglio comprendere i contenuti esistenti; i motori di ricerca stanno diventando delle vere e proprie learning machine, e pertanto occorre cercare di semplificare il processo di comprensione. Ci sono diversi elementi utili a tale scopo, e probabilmente il principale è oggi l’uso del markup semantico che si realizza mediante lo sviluppo di un “vocabolario” che possa permettere la marcatura semantica HTML delle pagine web. Il risultato è stato Schema.org,

un sito nel quale si può trovare tutto il necessario per marcare in modo appropriato i propri contenuti. Schema.org unitamente all’adozione dei Microdati (metadati) consentono ai motori di ricerca di comprendere le informazioni presenti in modo da fornire risultati più completi nelle SERP.

 

Ma perché la SEO diventa semantica ??

Nel 2012 Ray Kurzweil viene assunto in Google con la mission di studiare la comprensione del linguaggio naturale. In questo modo, Google si avvicina all’IA (Intelligenza artificiale): si passa in sequenza dal ritrovamento di informazioni “aggiuntive” a come viene impostata la ricerca alla possibilità di comprendere la lingua utilizzata nelle pagine indicizzate e introdurre dei servizi informativi per l’utente.

 

Breve excursus sullo sviluppo dell’algoritmo di Google : nell’ultimo ventennio si è assistito ad un perfezionamento sempre maggiore degli algoritmi di calcolo passando da Hummingbird, RankBrain , ‘AI First’. Hummingbird è la revisione completa più importante e miliare capace di interpretare l’intento di ricerca nascosto dietro le richieste; RankBrain è in grado di fornire pagine attinenti (Intelligenza Artificiale di Google) con cui è in grado di approfondire maggiormente il sistema di conoscenza/intenti e fornire risposte per ricerche “disgiunte” (‘disambiguazione’, vedi sopra) nel senso che è in grado di riportare contenuti vicini anche se non espressi direttamente dall’utente;  ‘AI First’: il SEO di Google imposta una nuova visione che sposta lo strumento da semplice focus di reperimento informazioni al ritrovamento di servizi, informativi e di assistenza (tramite ‘Google Assistant’).

A fine estate del 2013, Google ha annunciato un nuovo aggiornamento algoritmico: Hummingbird.

A differenza dei precedenti algoritmi  Panda e Penguin, che possono essere visti come “revisioni” di un vecchio motore, con il suo annuncio a fine estate del 2013, Hummingbird è il motore nuovo di zecca, orientato a presentare i risultati in un modo completamente diverso rispetto al passato. Lo sforzo di Google è quello di concentrarsi sulla fase di comprensione delle ricerche. Ciò faciliterebbe le fasi successive, limitando il numero dei documenti indicizzati che vengono consultati per mostrare i migliori risultati possibili. Questa maggior attenzione alla fase di comprensione significa anche una maggior attenzione al contesto della ricerca, a come i concetti appaiono nei documenti e a come sono in relazione fra loro.

 

L’arma migliore è organizzare la conoscenza, quello che ad ora il motore di ricerca sa fare meglio: lo fa attraverso un grafo (‘Knowledge Graph’), collegando cioè le informazioni con grafi per aiutare il motore di ricerca ad interpretarle correttamente.  

 

 

 

 

 

 

La gara ora si sposta dal terreno delle keyword al terreno della semantica, dei significati: le entità sono le nuove keywords.

La varietà di dispositivi oggi utilizzati per connettersi alla Rete, rappresenta un ulteriore fattore determinante. PC, portatili, smartphone, tablet, televisori, hanno ognuno un metodo diverso di input, che va dal digitare una parola ad effettuare una richiesta vocale.

Se una volta la query-tipo era[ristoranti a Milano], oggi è diventata molto più specifica, come [dove andare a mangiare cibo indiano a Milano], o [qual è il posto migliore per mangiare cibo indiano a Milano]. Un esempio per constatare che i motori di ricerca han capito che lavorare sulle singole parole chiave non era sufficiente; hanno invece bisogno di capire come i dati sono correlati, sia all’interno dello stesso sito che nell’intero web. E’ questo il cambiamento più importante all’interno della search: il passaggio da parole chiave ad entità. Le parole diventano concetti, e i motori di ricerca evolvono in macchine in grado di apprendere.

 

Due sono i concetti fondamentali da cui ha preso origine la seo semantica: intento e contesto. L’intento parte dall’utente, il quale dichiara (più o meno) esplicitamente cosa sta cercando. E il contesto, che potrebbe essere inteso come tutto ciò che “circonda” una ricerca e la fa andare in una certa direzione, ovvero le dà un senso.

Collegando intento e contesto, i motori di ricerca sono in grado di comprendere le diverse query.

Il contenuto principale può essere pensato come un ombrello sotto cui stanno le diverse entità.

    

Machine Learning: l’ascesa del Deep Learning

(martedì 13 marzo)

Deep Learning

Gran parte di questi prodotti funzionano grazie a tecniche di Deep Learning, una sottoarea del Machine Learning, in cui si usa una rete neurale “profonda”, ovvero composta da tanti livelli di neuroni.

Il Machine Learning in questi anni si è imposto, come osserva Etham Alpaydin, autore del testo “Machine Learning – The new AI“, grazie a due fattori principali: la grande disponibilità di dati e una grande potenza di calcolo. In effetti, gran parte delle idee del Machine Learning in generale e del Deep Learning in particolare risalgono agli anni ‘70 e ‘80.

Il vantaggio del Machine Learning rispetto alla programmazione tradizionale è che non richiede al programmatore di scrivere codice e, quindi, di progettare un algoritmo. Quello che serve è solo un insieme di dati di esempio, da cui il programma può “apprendere”.

Se questo approccio non vi sembra rivoluzionario, fermatevi due minuti a pensare a come potreste progettare un algoritmo per risolvere il seguente problema: vi viene data una foto e il vostro programma deve dire se si tratti della foto di un cane oppure di un gatto; la foto può essere di un dettaglio, ad esempio solo la testa dell’animale, oppure può rappresentarlo a figura intera. Usando il Deep Learning, basta avere a disposizione tante foto di cani e di gatti, divise nei due gruppi, per addestrare una rete neurale a risolvere il problema.

Se ancora non siete convinti, citiamo un altro esempio: il recente risultato di DeepMind (una società di Google), pubblicato su Nature. In questo lavoro, usando un innovativo approccio di Deep Learning, i ricercatori di DeepMind sono riusciti a creare un’intelligenza artificiale che ha imparato da sola a giocare ai videogiochi della vecchia e classica console Atari 2600. Questa IA, chiamata Deep Q-Network, ha come input la schermata del videogioco e come output può controllare i movimenti (e il pulsante di fuoco) del joystick, come un giocatore normale.

La cosa più importante è che, per ogni videogioco, la IA non abbia idea delle regole dello stesso: l’unica informazione di cui dispone è la porzione di schermo in cui viene riportato, nel videogioco, il punteggio; l’obiettivo della IA è di massimizzare il punteggio. Sareste in grado di scrivere un programma per giocare a un videogioco che non conoscete?

(tratto da www.html.it, di Luigi Laura)

Utilità di una sezione “glossario”

(mercoledì 28 febbraio)

Così come in un glossario così come lo intendiamo “nel’uso comune” sono definiti i termini chiave utili per meglio comprendere dei concetti riportati all’interno di un libro o un manuale, una materia di studio ecc., la sua esistenza strutturale può tornare utile anche a corredo di un sito web.

Prevedere l’aggiunta di un glossario all’interno di un sito è utile sia per aiutare le persone che si avvicinano a un determinato campo – quello che è poi la materia trattata dal progetto – a comprenderlo meglio, sia per aiutare “dal’altra parte”  i motori di ricerca ad “apprezzare” i collegamenti tra le pagine e i concetti contenuti. In altre parole, il glossario è uno strumento utile per la SEO perché:

  • permette di definire meglio il dominio semantico nel quale il sito web si colloca;
  • permette di collegare i contenuti di articoli e pagine con i principali concetti menzionati al loro interno.

E’ arrivato BootStrap v. 4

(venerdì 16 febbraio)

Cullata e plasmata nelle versioni beta dalla seconda metà del 2017, l’inizio del 2018 ha visto il rilascio della versione stabile di Bootstrap 4.0, il più noto framework Open Source utilizzato per lo sviluppo di progetti ed applicazioni web responsive e mobile first. L’aggiornamento presenta diverse novità sia dal punto di vista delle feature sia per quanto riguarda gli strumenti di base, con un lavoro determinante di revisione e integrazione dei template di base.

Bootstrap 4 abbandona Less in favore di Sass ottenendo tempi di compilazione più rapidi grazie a Libsass; nel contempo il toolkit è stato reso conforme alle specifiche Flexbox per migliorare il focus verso i dispositivi mobile.

Da evidenziare inoltre l’introduzione di nuovi componenti per i layout, le Cards, che offrono dei contenitori facilmente estendibili e flessibili per i contenuti delle Web applications.

Con questa versione è stata rivista l’implementazione delle potenzialità responsive del file di Normalize.css con il supporto di un unico file Sass, mentre le opzioni per la personalizzazione sono state migliorate e integrate con nuovi strumenti. Anche diversi elementi per la stilizzazione (ombre, gradienti, transizioni..) sono stati definiti tramite variabili Sass: in questo modo, per effettuare una qualsiasi modifica basterà effettuare l’aggiornamento di una variabile e ricompilare il sorgente.

La nuova versione del toolkit abbandona di fatto la compatibilità con Internet Explorer 8 e 9.

Inoltre, i plugin JavaScript sono stati riscritti in funzione delle specifiche ES6; mentre Popper.js diventa la libreria di riferimento per tooltip, popover e dropdown. Sono stati profondamente revisionati anche i tools gestori dell’istradamento del flusso di dati con npm che prende il posto di Grunt.

Preprocessori CSS

(venerdì 16 febbraio)

Non tutti sanno (me compreso !) che buona parte delle potenzialità offerte dall’utilizzo dei fogli di stile CSS ovvero CSS3 sono permesse dai preprocessori, programmi ideati per rendere più veloce ed ottimizzare la scrittura dei fogli di stile all’interno di un sito web (si pensi alle porzioni di codice racchiuse tra parentesi graffe in cui vengono inserite le regole CSS) .

Lasciando perdere i dettagli che stanno a monte di queste strutture, quindi evitando di parlare del linguaggio C (che è un po’ il papà in materia), di preprocessori sentiamo parlarne anche a proposito dei CSS, qui introdotti per superare e risolvere alcuni limiti propri del costrutto (poter cambiare una serie di colori, riutilizzare delle parti ridondanti di codice e operazioni matematiche particolari, definire ad hoc delle classi), per i quali occorre citarne due, simili tra loro nell’utilizzo differenti per alcune regole sintattiche (ad es. la definizione delle variabili viene fatta con il simbolo $ nell’uno e con la @ nell’altro) e nella complessità: Sass e Less il cui pregio è di poter definire delle regole evitando di doverle poi ripetere nel corso del programma, rendendo così più leggero e scorrevole il codice, ciò in base al principio DRY (“Don’t Repeat Yourself“).

A partire dalla versione 4, Bootstrap ha deciso di scrivere il proprio codice in Sass abbandonando in questo modo Less.

Per ulteriori approfondimenti sui due preprocessori Less e Sass fare riferimento qui o qui.

Come monetizzare un blog

(giovedì 23 novembre)

Seguendo una delle mie guide, hai imparato come aprire un blog. Questa nuova avventura ti sta dando discrete soddisfazioni e il numero di visitatori del tuo sito sta crescendo sempre di più, adesso però vorresti tramutare in qualcosa di più “concreto” questo successo e cominciare a guadagnare qualche soldo. Non c’è dubbio, è arrivato il momento di fare la conoscenza di Google Adsense.

Google Adsense è il popolarissimo servizio di pubblicità offerto da Google. Grazie ad esso, potrai iniziare a guadagnare inserendo degli annunci pubblicitari automatici sul tuo blog. Non c’è nessun costo di attivazione e sarai pagato per ogni visualizzazione o click fatto sugli annunci dai visitatori del sito. Ecco come monetizzare un blog utilizzando questa soluzione.

Per imparare come monetizzare un blog, collegati al sito Internet di Google Adsense e clicca sul pulsante ISCRIVITI ADESSO collocato in alto a destra per avviare la creazione di un account gratuito sul servizio. A questo punto, se sei già in possesso di un account Google clicca sul pulsante Sì, procedi all’accesso con l’account Google ed effettua il login con i tuoi dati di accesso di Google, altrimenti fai click su No, crea un nuovo account Google e compila il modulo che ti viene proposto per iscriverti a Google.

Adesso inizia la procedura di iscrizione vera e propria a Google Adsense. Segui quindi la procedura guidata che ti viene proposta, digitando nel campo Pubblicherò annunci su l’indirizzo del tuo sito Internet, seleziona dal menu a tendina Lingua dei contenuti la lingua italiana, metti il segno di spunta accanto alla voce Ho letto e accetto di rispettare le norme del programma e sono consapevole che la violazione delle norme potrebbe comportare la disattivazione definitiva degli annunci o dell’account e clicca sul pulsante Continua per passare allo step successivo.

L’ultimo passo che devi compiere in questo frangente è compilare il modulo con i tuoi dati personali (nome, indirizzo, numero di telefono, ecc.) e cliccare sul pulsante Invia la mia domanda per confermare la tua richiesta di iscrizione ad Adsense. Se non ci saranno problemi e il tuo blog non viola nessuno dei termini di utilizzo del servizio, entro un paio di giorni riceverai nella tua casella di posta elettronica il messaggio con il link di conferma per attivare definitivamente il tuo account su Google Adsense.

Una volta effettuato l’accesso, sarai libero di scegliere le forme di pubblicità da inserire nel tuo blog e di personalizzarle in base alle tu esigenze. Fra i tipi di pubblicità disponibili ci sono l’AdSense per i contenuti che permette di inserire annunci pubblicitari con contenuti generati in maniera intelligente in base al contenuto della pagina in cui vengono inseriti, l’Adsense per la ricerca che consente di guadagnare tramite dei box di ricerca personalizzati da inserire nelle pagine del blog (in questo caso, i pagamenti si ricevono solo quando vengono cliccati gli annunci nei risultati delle ricerche) e l’Adsense per i video che permette di inserire dei video pubblicitari anziché degli annunci testuali sul proprio sito.

Per ciascuna delle opzioni scelte, Google ti fornirà un codice che dovrai inserire nelle pagine del tuo blog per visualizzare gli annunci pubblicitari scelti. Se hai deciso di creare un blog con Blogger, la piattaforma gratuita di Google, potrai inserire gli annunci di Adsense semplicemente recandoti nella scheda Guadagnadel pannello di controllo del blog.

I pagamenti vengono effettuati da Google sotto forma di assegno o trasferimento sul conto bancario al raggiungimento della soglia minima di 70 euro di entrate. Le modalità di pagamento puoi sceglierle tu in base alle tue esigenze, ma prima di iniziare a ricevere i proventi delle pubblicità dovrai convalidare il tuo indirizzo indicando nel pannello di Adsense il PIN di verifica che Google ti invierà per posta.

Puoi trovare maggiori informazioni su come monetizzare un blog con Google Adsense, le pubblicità e i metodi di pagamento disponibili sulla pagina di aiuto ufficiale del servizio.

 

(tratto da www.aranzulla.it, di Salvatore Aranzulla)

"Amenità": Come taggare su Facebook

(lunedì 9 ottobre)

Come taggare su Facebook

Tizio ti ha taggato in una foto, Caio ti ha taggato nella sua nota, Sempronio ti ha taggato nel suo post. Ormai la tua casella di posta elettronica è un profluvio di notifiche provenienti dagli amici di Facebook che continuano a “taggarti”, ossia ad etichettarti e segnalarti in foto, commenti e note pubblicate sul social network più famoso del mondo… e tu sei arrabbiato perché muori dalla voglia di ricambiare e non sai ancora come fare.

Ho indovinato?  Lo sapevo. Allora prenditi cinque minuti di tempo libero e scopri una volta per tutte insieme a me come taggare su Facebook i tuoi amici grazie alle indicazioni che sto per darti. Credimi, è talmente semplice che appena avrai finito di leggere ti domanderai: “ma come ho fatto a non pensarci prima?”.

Se sei dunque effettivamente interessato a scoprire che cosa bisogna fare per poter taggare su Facebook, ti suggerisco di metterti ben comodo e di concentrati sulle informazioni che trovi qui di seguito. Non temere, si tratta di un’operazione che può essere eseguita senza problemi anche da chi, un po’ come te, non si reputa esattamente un grande esperto in fatto di social network e nuove tecnologie. Detto ciò, direi dunque di mettere al bando le ciance e di cominciare subito a darci da fare. All you ready?

Prima di passare alle spiegazioni vere e proprie, facciamo sin da subito chiarezza su una cosa. Sul social network è possibile taggare altri utenti in vari modi. O meglio, la modalità mediante cui effettuare il tag è pressapoco sempre la stessa, quello che cambia sono i contenuti di riferimento. Puoi infatti taggare su Facebook in singoli post, nei commenti ad un post, nelle foto oppure nei video. Il sistema risulta molto semplice in tutti i casi. Qui sotto trovi spiegato tutto nel minimo dettaglio.

Tieni poi presente che sebbene i vari passaggi riportati di seguito siano stati eseguiti da computer, tutte le varie operazioni per taggare su Facebook possono essere effettuate in maniera più o meno analoga anche agendo da smartphone e tablet, sia tramite app ufficiale di Facebook che mediante il browser Web che generalmente utilizzi per navigare in rete dal tuo dispositivo.

Taggare nei post

Come taggare su Facebook

Ti interessa capire come fare per taggare su Facebook in un post? Allora le prime cose che devi fare dopo aver effettuato l’accesso al social network sono quella di cliccare nel riquadro con scritto all’interno A cosa stai pensando? che trovi collocato nella parte alta della sezione principale del social network, digitare il simbolo @ (lo stesso che utilizzi per gli indirizzi di posta elettronica!) ed inserire il nome dell’amico che è tua intenzione menzionare (ad esempio @salvatore aranzulla).

Per inserire correttamente i nomi delle persone da taggare nei tuoi post, puoi aiutarti con il menu di completamento automatico che compare quando si digita il simbolo @ nel riquadro per l’aggiornamento dello stato. Tieni presente che in un singolo post puoi taggare più utenti per volta ma per ciascuno di essi dovrai effettuare la procedura che ti ho appena indicato.

Completa poi il post aggiungendo il messaggio che ritieni più opportuno e, per finire, fai clic sul pulsante blu Publica per pubblicarlo subito. A messaggio pubblicato, tutte le persone taggate in esso saranno avvertite con delle notifiche automatiche da parte di Facebook.

In caso di ripensamenti, potrai sempre e comunque rimuovere il tag aggiunto ad un tuo post cliccando sulla freccia rivolta verso il basso collocata nella parte in alto a destra dello stesso, scegliendo l’opzione Modifica post, cliccando sul nome dell’amico da “staggare” e selezionando la x che trovi sempre accanto al suo nome in corrispondenza della voce Con. Successivamente pigia sul bottone Salva per confermare ed applicare le modifiche apportate.

Taggare nei commenti

Come taggare su Facebook

Se invece vuoi scoprire che cosa bisogna fare per poter taggare su Facebook all’interno di un commento, il primo passo che devi compiere è quello di individuare il post relativamente al quale è tua intenzione agire. Successivamente pigia sulla casella con su scritto Scrivi un commento… oppure seleziona la voce Rispondi, digita il simbolo @ e inserisci il nome dell’amico che è tua intenzione taggare.

Per inserire correttamente i nomi delle persone da taggare nei tuoi post puoi aiutarti con il menu di completamento automatico che compare quando si digita il simbolo @ nel riquadro per l’aggiornamento dello stato. Anche in tal caso, in un singolo post puoi taggare più utenti per volta ma per ciascuno di essi dovrai effettuare la procedura che ti ho appena indicato.

Per finire, completa il commento aggiungendo il messaggio che ritieni opportuno e fai clic sul pulsante Invio annesso alla tastiera per pubblicarlo subito. Una volta pubblicato il commento, tutte le persone taggate in esso saranno avvertite con delle notifiche automatiche da parte di Facebook.

Qualora dovessi avere dei ripensamenti, potrai annullare la procedura mediante cui taggare su Facebook nei commenti selezionando il commento “incriminato”. Cliccando sull’icona a forma di matita sul lato destro dello stesso, facendo clic sulla voce Modifica… annessa al menu a tendina che ti viene mostrato, cancellando il tag e pigiando il pulsante Invio sulla tastiera.

Taggare nelle foto

Come taggare su Facebook

Hai fatto una bella foto che immortala uno o più dei tuoi amici ed adesso vorresti capire come taggare su Facebook per poter segnalare la loro presenza all’interno dello scatto? Allora individua la foto da te pubblicata e su cui è tua intenzione andare ad agire, cliccaci sopra e poi seleziona la voce Tagga la foto annessa al menu a scomparsa che ti viene mostrato oppure seleziona l’apposito bottone per il tag che risulta collocato in alto a destra.

Successivamente fai clic nel punto della foto in cui è tua intenzione taggare un tuo amico e compila la casella con su scritto Digita un nome digitando il nome della persona che è tua intenzione taggare. Ripeti questa operazione per ciascun amico che vuoi taggare in foto. Per finire, pigia sulla voce Tag completato che risulta collocata in basso.

Anche in questo caso, una volta completata tutta la procedura per taggare su Facebook, le persone taggate in foto saranno avvertite con delle notifiche automatiche da parte del social network.

Se invece ti interessa capire come taggare su Facebook andando ad agire su una foto ancora da pubblicare, recati nella pagina principale del social network, individua il riquadro con su scritto A costa stai pensando?, cliccaci sopra, fai clic sull’icona raffigurante una macchina fotografica e seleziona la foto che vuoi postare sul social network.

Successivamente compila il campo Con chi eri? collocato accanto alla voce Con (se non lo visualizzi automaticamente, fai clic sull’icona raffigurante un omino) andando ad immettere il nome dell’utente che vuoi taggare e seleziona la giusta corrispondenza dal menu di scelta rapida che ti viene proposto. Se vuoi taggare più di un amico, devi ripetere la procedura che ti ho appena indicato per ogni singolo utente.

Per finire, completa il post immettendo un messaggio a piacere nel campo Scrivi qualcosa su questa foto…, digita eventualmente il luogo in cui è stato eseguito lo scatto, come ti senti e cosa stai facendo in questo esatto momento utilizzando gli appositi pulsanti visibili a schermo e poi fai clic sul pulsante Pubblica. A procedura completata, tutte le persone taggate in foto saranno avvertite con delle notifiche automatiche da parte di Facebook.

A prescindere dal fatto che tu abbia taggato un tuo amico in una foto già presente su Facebook o in una foto appena condivisa, potrai sempre e comunque rimuovere il tag aggiunto individuando la foto di tuo interesse, cliccandoci sopra, cliccando sul bottone Modifica e facendo poi clic sulla x che trovi in corrispondenza del nome dell’amico da rimuovere. Per confermare ed applicare le modifiche apportate, clicca sul bottone Modifica completata.

Taggare nei video

Come taggare su Facebook

Come ti ho già accennato, è possibile taggare su Facebook anche andando ad agire su un video. Per fare ciò, individua il filmato da te pubblicato in cui intendi taggare altri utenti, pigiaci sopra e poi fai clic sul bottone Tagga il video collocato sulla destra.

Adesso compila il campo Con chi eri? presente sempre sulla destra andando a digitare il nome dell’utente che intendi taggare e poi seleziona la giusta corrispondenza dal menu di scelta rapida che ti viene proposto. Se desideri taggare più di un amico, devi ripetere la procedura che ti ho appena indicato per ogni singolo utente.

Successivamente fai clic sul pulsante di colore blu Modifiche completate per portare a termine la procedura per taggare i tuoi amici. A procedura ultimata, tutte le persone taggate nel video saranno avvertite con delle notifiche automatiche da parte di Facebook.

Il video in cui desideri taggare su Facebook è ancora da pubblicare? Nessun problema. In tal caso, recati nella pagina principale del social network, individua il riquadro con su scritto A costa stai pensando?, cliccaci sopra, fai clic sull’icona raffigurante una macchina fotografica e seleziona il video che vuoi postare sul social network.

Successivamente compila il campo Con chi eri? collocato accanto alla voce Con (se non appare automaticamente pigia sull’icona raffigurante un omino) digitando il nome dell’utente che intendi taggare e poi seleziona la giusta corrispondenza dal menu di scelta rapida che ti viene proposto. Se desideri taggare più di un amico, devi ripetere la procedura che ti ho appena indicato per ogni singolo utente.

Per finire, completa il post digitando un messaggio a piacere nel campo Scrivi qualcosa su questo video…, digita eventualmente il luogo in cui è stato girato il filmato, come ti senti e cosa stai facendo utilizzando gli appositi pulsanti visibili a schermo e poi fai clic sul bottone Pubblica.

Qualora dovessi avere dei ripensamenti, potrai annullare la procedura per taggare su Facebook nei video, sia quelli già presenti sul social network sia quelli caricati al momento, individuano il filmato su cui agire, cliccandoci sopra, cliccando poi sul bottone Modifica e facendo clic sulla x che trovi in corrispondenza del nome dell’amico da rimuovere. Per confermare ed applicare le modifiche apportate, pigia sul pulsante Modifica completata.

(tratto da www.salvatorearanzulla.it, di Salvatore Aranzulla)

Il meta tag ‘viewport’

(mercoledì 13 dicembre)

La maggior parte dei browser per dispositivi mobili oggi disponibili è in grado di rendere le pagine web concepite per il desktop senza alcun problema. Parliamo di layout ma anche di interazioni Javascript e funzionalità più avanzate. Per quanto riguarda il layout, tutto avviene attraverso un meccanismo di adattamento delle dimensioni. Una pagina come la home di HTML.it, basata su un container centrato e largo 996px, viene così visualizzata sullo schermo di un iPhone 3GS:

La home page di HTML.it su iPhone

screenshot

Il browser adatta automaticamente le dimensioni della sua area di visualizzazione (viewport) per accomodare al meglio il layout della pagina, che infatti viene reso nella sua configurazione originale, quella pensata per il desktop.

Questo processo, però, avviene su uno schermo che ha una risoluzione orizzontale di 320px! La pagina viene di fatto ridimensionata e ridotta in scala proporzionalmente. Il risultato è che per leggere un articolo di HTML.it su iPhone dobbiamo necessariamente zoomare sull’area che ci interessa con il doppio tap o con il pinch, gesti che sono certamente familiari a chiunque abbia utilizzato uno smartphone per navigare in rete.

Alla base di questo meccanismo c’è la differenza, cruciale, tra dimensione (risoluzione) dello schermo e dimensione della viewport. Su un iPhone, la dimensione orizzontale dello schermo è di 320px, mentre la viewport di Safari per iOS è pari, di default, a 980px.

Tale comportamento può andare bene e risultare accettabile fino a quando non si decida di adattare il sito ai dispositivi mobili. Nel momento in cui si compie questa scelta, è fondamentale controllare il meccanismo che regola il funzionamento della viewport. Possiamo farlo attraverso un semplice meta tag.

Come funziona il meta tag viewport

Quando realizziamo un sito che vogliamo si adatti ai browser dei dispositivi mobili, dobbiamo sempre inserire nella head della nostra pagina il meta tag viewport. Semplificando: con questo meta tag siamo noi a suggerire al browser il modo in cui dovrà gestire la viewport. Il controllo passa nelle nostre mani invece che essere affidato ai meccanismi di default del browser.

L’istruzione minima da inserire è questa:

<metaname="viewport"content="width=device-width">

Stiamo dicendo al browser di impostare la larghezza (width) della viewport in base alla larghezza dello schermo del dispositivo (device-width).

Con questa istruzione, su un iPhone con orientamento portrait la larghezza della viewport sarà pari a 320px; 480px se lo smartphone è in orientamento landscape; sarà di 1024px su un iPad in modalità landscape, e così via. Saremo poi noi ad adattare il layout a queste dimensioni!

Ma cosa succede ad un sito con un layout non adattato per il mobile se si adopera quella riga di codice? Questo:

La home page di HTML.it con tag ‘viewport’ su iPhone

screenshot

Dal momento che ora l’area di visualizzazione è di 320px e non 980px come di default su Safari per iOS, il layout non viene adattato, non avviene nessun ridimensionamento in scala, visualizzeremo solo una parte della pagina larga 320px, e per accedere al resto dovremo affidarci allo scrolling orizzontale.

Ricapitolando: se abbiamo un sito che non si adatta nel layout ai dispositivi mobili, non usiamo il meta tag viewport e lasciamo che sia il browser a compiere l’adattamento nei modi che abbiamo visto; se operiamo in un contesto responsive in cui il sito si adatta automaticamente nel layout ai dispositivi mobili, dobbiamo usare il meta tag nella configurazione vista qui sopra.

Altre impostazioni del meta tag viewport

Attraverso il meta tag viewport possiamo intervenire su altre impostazioni. Nel nostro progetto guida abbiamo così configurato l’istruzione:

<metaname="viewport"content="width=device-width, user-scalable=no,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

Con la proprietà user-scalable possiamo decidere se consentire o meno all’utente di ridimensionare/zoomare la pagina. La home page de “Il viaggio” non può essere ridimensionata.

La proprietà initial-scale imposta il fattore di zoom iniziale, relativo al momento in cui la pagina viene caricata.

Con minimum-scale e maximum-scale possiamo invece stabilire di quanto l’utente può zoomare la pagina, fissando dei limiti (avendo usato user-scalable=no queste ultime istruzioni sono in realtà un di più, le abbiamo inserite nel codice solo a fini didattici).

Può bastare così. L’argomento è complesso, ma per i nostri obiettivi sappiamo tutto quello che c’è da sapere. Per una panoramica completa sul meta tag viewport le migliori risorse sono la documentazione di Apple e questo articolo apparso su Dev.Opera.

(tratto da www.html.it)

Quali sono le risoluzioni più frequenti per i display?

(lunedì 12 dicembre)

Responsive design, immagini adattive, auto-fit dei contenuti, rilevazione automatica del dispositivo corrente, orientamento degli schermi, piattaforma e browser di riferimento per le varie tipologie di utenza, ad oggi sono tante le variabili che uno sviluppatore deve tenere in considerazione nella realizzazione d’interfacce per Web applications e siti Web; ma alla base di tutti i criteri citati vi è (tra gli altri elementi) il discorso relativo alle risoluzioni, per cui potrebbe essere utile verificare quali siano quelle più frequenti e in quali device vengano utilizzate.

Risoluzioni

Rispettando un ordine crescente, potremmo individuare un primo limite al di sotto dei 320 pixel, in questo caso stiamo identificando una fascia a bassa risoluzione all’interno della quale operano soprattutto i comuni “telefonini” (non smartphone o solo pochi di essi) e alcuni dei dispositivi Apple più datati; in questo caso il livello è quindi di poco superiore a quello del quadrante di un tabellone luminoso a cristalli liquidi.

Nella zona compresa tra i 320 e i 480 pixel troviamo tutta una serie di dispositivi di “prima generazione”, anche all’interno di essa sono presenti alcuni device della Mela Morsicata, ma i device di riferimento sono in particolare i primi modelli di smartphone prodotti più o meno in concomitanza con l’iPhone (release 2G o EDGE); mentre tra i 480 e i 720 pixel abbiamo quella che potremmo chiamare la “smartphone zone”, popolata da modelli di cellulari con caratteristiche avanzate ivi compresi modelli più recenti di iPhone.

Tra i 720 e i 768 pixel vi è una maggiore distribuzione di tablet, in buona parte iPad, mentre le due aree successive riguardano rispettivamente la modalità di visualizzazione portrait (“ritratto”, dai 768 ai 900 pixel) e landscape (“panorama”, dai 900 ai 1024 pixel) per le quali sono coinvolti soprattuto tablet, phablet e smartphone dotati di diagonali sufficientemente ampie.

Tra i 1024 e i 1200 pixel regnerebbero invece sovrani gli schermi dei desktop, oltre i 1200 pixel si troverebbero invece tablet di ultima generazione (ma non necessariamente dotati del supporto per la tecnologia Retina) e pochi altri device.

Sostanzialmente potremmo quindi definire sei diversi breakpoints: tre minori, 320, 720 e 900 pixel, e tre per le risoluzioni massime: 480, 768 e 1024 pixel.

 

(tratto da www.mrwebmaster.it, 6 dicembre 2013)

Perché è importante avere un sito Mobile-Friendly?

Il responsive design per i dispositivi mobili

(tratto da www.dndcom.com)