Design web e seo 2017.

Il 6 agosto 1991 gli ingegneri Timothy John Berners-Lee (Londra 1955) e Robert Cailliau (Tongeren 1947) pubblicarono per il CERN il primo sito web al mondo.

Olivetti Personal Computer
Personal Computer del passato: 386 Olivetti

La ricerca partì per l’esigenza del prestigioso Istituto di ricerca, di scambiare informazioni e scoperte in modo discreto e rapido. Il contenuto era ipertesto ossia testo dattiloscritto che aveva la possibilità di essere collegato direttamente ad un click saltando ad altre pagine di contenuti ipertestuali. Senza alcun dubbio fu una rivoluzione poter lanciare gli ipertesti html (collegamenti ipertestuali) e renderli disponibili per la comunità internet. Questa rivoluzione va sotto il nome di Web 1.0. Il primo periodo di lancio e di diffusione del web, dava peso al contenuto. Le possibilità grafiche erano limitate dai linguaggi elementari ancora in sperimentazione o proprietari costosi, e dalla lentezza della connessione analogica internet. Le pagine potevano contenere oltre al testo anche immagini, video, audio, ma in maniera statica di pura consultazione. La navigazione risultava lenta e macchinosa. La grafica era relegata ad una considerazione marginale, in quanto gli sforzi che si facevano per rendere gradevole un sito male venivano ripagati per via delle limitazioni tecnologiche.

Lo sviluppo della tecnologia come l’introduzione della connessione adsl, la fibra, l’ampia diffusione della consultazione internet, lo sviluppo di linguaggi leggeri e flessibili (php [1995], javascript [1995], css [1996], html5 [2014]), ha permesso una evoluzione del web, tale da coinvolgere la grafica in un livello essenziale.
Si parla quindi di Web 1.5 con la diffusione dei forum di discussione e con i blog. Con la diffusione dei blog (1997) nascono le piattaforme di condivisione multimediale (CSM) per gestire i contenuti di una testata di caratteristiche giornalistiche. Drupal (2001), WordPress (2003), Joomla (2005).
Nel 1999 si afferma l’ultima versione rilasciata HTML 4.01, ancora prevalentemente orientata al contenuto e anche la successiva XHTML sebbene orientata ad applicazioni web sempre più elaborate non permette alcun errore o incertezza di programmazione (superato solo con l’html5 nel 2007 che di fatto si è diffuso nel 2014).
Abbiamo quindi assistito ad una trasformazione, già a partire dal 2004 delle pagine html che hanno iniziato ad includere applicazioni online che permettono una rilevante interazione tra utente e sito web. La novità del web dinamico si è affermata negli anni seguenti ed è stata denominata Web 2.0.

Lo sviluppo dinamico del web passava per i commenti ai blog, forum, chat, wiki, i social media.

La grafica e il design web ha iniziato a contare sempre di più portandosi ai vertici dell’interesse, coinvolgendo sempre un maggiore numero di utenti. Utenti che appartengono ad una comunità di condivisione e dinamica dei contenuti. Che partecipano e forniscono informazioni, spunti, commenti, idee sui social network (Instagram, Facebook, Pinterest, Linkedin, Twitter) e di fotografie, sui canali video (Youtube, Viomeo).

Web design.

Definizione di Web Design.
Il Web Design letteralmente significa disegno per il Web, per la rete internet. E’ l’attività di progettazione, svilippo tecnico, estetico, grafico, comunicativo per i siti web.
In base alla complessità e al budget, in questa moderna attività vengono coinvolte diverse figure professionali. L’analista ascoltate le necessità e le richieste del cliente individua le esigenze tecniche professionali del caso e le passa ai rispettivi collaboratori.
Il web master si occupa della gestione del sito a livello amministrativo e tecnico una volta che è on-line. Il web marketing si occupa della definizione delle strategie di promozione e comunicazione per una maggiore visibilità nel web.
Al graphic designer viene affidato il compito di curare gli aspetti e gli elementi visuali, grafici. Il web designer sistema i contenuti testuali, grafici e sonori, definendo l’aspetto complessivo visivo delle varie pagine web html interattive. Il web architect che delinea le componenti funzionali e tecniche dell’intero sito.

Storia del web design.
Per anni il web era stato graficamente dominato dall’uso smodato del design metaforico
(scheumorfico), molto caro a Steve Jobs, e alla Apple. Dall’ottobre 2012 i media hanno iniziato il dibattito sull’opportunità e i vantaggi nel superare estetica e stile visivo di imitazione del mondo reale scheumorfica.
Già da tempo Windows con il suo sistema operativo proponeva di superare lo scheumorfismo con il
SO Windows Media Center (2002), Windows Phone (2010) e Windows 8 (2011). Questa tipologia viene denominata Metro design language o Modern UI. Apple ha lanciato un nuovo sistema operativo per dispositivi iOS 7 con questa grafica rinnovata. Anche i web designer hanno cambiato orientamento. A partire dal 2013 abbiamo navigato per il web incontrando siti con il tradizionale design piatto – flat design (eliminazione di elementi grafici come ombre, riflessi, sfumature, smussi, tridimensionali). L’approccio bidimensionale dello schermo con enfatizzazione dei contenuti, semplicità essenzialità e pulizia, navigazione intuitiva e comunicazione più diretta.
Le nuove tendenze del web design del 2017 adottano proposte ideate nel passato e le combinano con delle novità più recenti.
La tendenza è quella di realizzare dei siti che si possano adattare a tutti i dispositivi, senza preferenze rimanere flessibili, veloci da consultare con elementi multimediali, user-friendly e di notevole impatto estetico.
Attualmente, i web designer propongono i classici CMS (Content Management System) come Drupal, Joomla, (WordPress per il blog) che hanno una gestione più semplice, una volta impostati. Oppure funzionalità alternative che realizzano progettando il sito in maniera personalizzata con linguaggi html5, css, php, java.
Comunque l’orientamento grafico prevede una miscela molto gradevole a livello estetico.
Il mix è responsive design per tutti i dispositivi (sia pc, tablet che smartphone), scrolling infinito*(1) con effetto parallax*(2), storytelling interattivo*(3), uso del menu hamburger*(4), presentazione dei contenuti secondo il layout denominato card layout. La sobrietà e pulizia dello sfondo e la navigazione snella ed essenziale lascia libero e forte utilizzo di varie risorse multimediali. Tornano quindi di moda animazioni, GIF, intestazioni creative, scelta del font tra caratteri grafici più elaborati, elementi di sfondo e illustrazioni di qualità disegnati a mano, linee, forme geometriche, pattern, effetto duotone per esaltare toni medi e alteluci delle immagini.

Scrupolosa cura per tutte le pagine del sito con attenzione pari a quella dedicata all’home page per aumentare le conversioni.
L’evoluzione e la tendenza si chiama Web 3.0. Una nuova fase le cui direttrici sembrano delinearsi su vari fronti.
Trasformazione del web in metadati fruibili da applicazioni diverse dai browser classici per passare ad un Web della Semantica. Pagine html non più valutate in base ai collegamenti ipertestuali ma a reali contenuti semantici impliciti. Si avrebbe un giovamento nei risultati proposti dai motori di ricerca che fornirebbero risultati più apprezzabili;
Geospatial web ossia web 3D virtuale che faccia uso della realtà aumentata per definire meglio il mondo e Web potenziato, in grado di influire sulla realtà. Quindi in sostanza un web molto vocato alla grafica specialmente vettoriale che descriva l’Internet of Things, delle cose.

Rich snippet.
I motori di ricerca generano in automatico titoli e descrizioni -snippet- delle pagine web, prendendo come riferimento i contenuti della pagina e eventuali rimandi del Web.
Una tradizionale snippet fornisce come risultati un titolo, il link e una breve descrizione di 155 caratteri. Le snippet servono agli utenti per orientarsi meglio sui risultati della ricerca in base alla query immessa. I motori di ricerca quindi cercano di fornire dei risultati appropriati. (Spesso i risultati vengono alterati da pubblicità o da siti che hanno come obbiettivo la seo più che i contenuti). Per avere risultati più appropriati, occorre selezionare con pertinenza le parole della nostra query. Dal 2009, Google ha reso possibile ampliare le snippet generate.
Questa possibilità forniscono le cosiddette rich snippet come risultato.

Rich snippet sono gli elementi o informazioni aggiuntive oltre s titolo (in blu), link (indirizzo web) e descrizione (155 caratteri) forniti con i meta tag <title> e <description>.
I rich snippet si richiamano con i breadcrumb -briciole di pane.
I breadcrumb sono dei menu che indicano la posizione semantica di una pagina rispetto ad una struttura annidata ad albero di un sito web. Sono utili sia agli utenti in quanto indicano la posizione di una pagina rispetto ad una gerarchia. Sono utili ai motori di ricerca per una classificazione dei siti di tipo semantico.
I rich snippet si ottengono programmando nel proprio sito web una marcatura con dati strutturati.
La marcatura con dati strutturati è una possibilità di contraddistinguere le proprie pagine web
secondo una specifica tipologia di contenuti. La presenza di questo tipo di marcatori negli html permette ai motori di ricerca di identificare e fornire maggiore precisione nei serp di seguito a richieste specifiche degli utenti.

I dati strutturati servono per il posizionamento dei siti web in modo indiretto. Fornire indicazioni chiare sull’architettura dell’informazione del proprio sito agevola il motore di ricerca nel compito di fornire serp appropriate. L’utente del motore di ricerca ha delle informazioni più pertinenti alle proprie ricerche secondo un criterio semantico.

Nel contenuto strutturato è necessario includere un’appropriata creazione dei titoli, le parole chiave -focus keywords- e le call-to-action. Questo è essenziale per ottenere snippet con impatto visuale d’effetto nei motori di ricerca.

schema.org *(6)è un progetto comune tra Google, Microsoft, Yahoo e Yandex, per creare, mantenere e promuovere schemi e vocabolario (589 Types, 860 Properties, 114 Enumeration values) per i dati strutturati in Internet.

I diversi tipi di linguaggio RDFa – JSON-LD – Microdata, fanno uso del vocabolario schema.org per la programmazione di una rich snippet per un sito. Altra recente introduzione con rango W3C Candidate Recommendation, è il tipo di linguaggio di interrogazione dell’RDF denominato SPARQL con sintassi Turtle (estensione di N-Triples). JSON-LD va inserito all’interno di un tag <script> senza senza necessità di marcare il testo html visibile agli utenti della pagina web. Il marcatore Microdata e RDFa vanno inseriti all’interno dei contenuti della pagina divenendo visibili all’utente. Presentano le informazioni per tipologia fornisce un’implementazione del codice interno della http, descrizione l’oggetto con nome e valore. Dal lato utente creano chiarezza nella navigazione, anche se non sono gradevoli graficamente. Dal lato motore di ricerca sono più apprezzati.

Gogle test tool google per funzionamento delle proprie pagine
Le scelte più appropriate per fornire un meta descriptions del sito personale SERPs firendly, ed avere più conversioni di visitatori in clienti.

  • non eccedere 155 caratteri per la descrizione.

Call-to-action
La call to action (CTA) è una frase per convincere l’utente a seguire le indicazioni delle nostre pagine web. Il fine è quello di ottenere una conversione CTR (Click-Through rate).
Devono essere dirette, immediate, proporre dei contesti in sui si si possa immedesimare, provocare emozioni e ripercussioni se non si seguono i consigli, trasparire competenza e qualità dei servizi, risparmio e benefici.

Manuale grafica web.
Nel progettare la grafica per il web, possiamo richiamare a grandi linee le regole per la grafica tradizionale. La raccomandazione è quella di considerare che nella tradizionale si progetta per la carta stampata, mentre per il web per lo schermo video.
Lo schermo del computer ha una forma orizzontale diversa da quella del foglio di carta usata in verticale. Le linee verticali trasmettono tensione ed instabilità quindi dinamicità (consentono uso di testo e elementi grafici), le linee orizzontali stabilità e tranquillità.
La risoluzione della carta stampata è più alta rispetto a quella del video. La carta riflette la luce, lo schermo genera luce.
Nelle interfacce utente*(7) dei computer gli elementi più importanti sono posizionati in alto e nel lato sinistro.
Nelle grafiche tradizionali la sezione in basso del foglio fornisce un’idea di pesantezza, mentre le parte in alto trasmette leggerezza.
Nella parte alta a sinistra delle pagine sono collocati il titolo, i menu, i pulsanti e la barra indirizzo del sito.
E’ molto importante confrontare anche siti analoghi dei concorrenti. Comunque è bene dotarsi di un sito leggero ed elegante, veloce usando con ponderazione elementi pesanti.
La realizzazione di un sito web parte da una scelta fondamentale. Prima cosa dobbiamo scegliere se occuparcene di persona o se è il caso che sia affidato a dei professionisti.
La seconda scelta è quella di valutare se è più appropriato specialmente in caso di particolari funzionalità di cui dovrà essere dotato se occorra considerare la realizzazione in maniera personalizzata. Oppure se affidarci ai più semplici ed affidabili CMS (Content Management System).
I CMS sono applicativi informatici che si basano su template. I template sono dei siti funzionanti d’esempio che danno l’idea complessiva di come sarà la formattazione stilistica o grafica approssimativa del sito web da sviluppare.

Un quarto dei siti al mondo utilizza WordPress come sistema di gestione dei contenuti. Il 60% dei siti che usa un CMS, ha installato WordPress. Nel 2017 sono stimati circa 75.000.000 siti in tutto il mondo. Il 61,7% usa una programmazione proprietaria

I principali CMS nel 2015 avevano i seguenti valori:
WordPress 23,3% (60,7% dei cms) – Per il 2016 è stata del 25,5%, per il 2017 è di circa 29.7%
Joomla 2,9% (7,6%)
Drupal 2,0% (5,1%)
Blogger 1,1% (2,9%)

Fonte: https://builtwith.com/

WordPress è il riferimento per riviste e blog online perchè molto intuitivo e semplice nel funzionamento. Con il plugin WooCommerce è anche il cms più usato per l’ecommerce.
Come template di più recente sviluppo per la fotografia suggeriamo: Uncode – Uno – Photocrati –
Soho – Darkroom – Bow
Drupal risulta invece molto più professionale per i siti personali per via delle possibilità grafiche e dinamiche che vi si possono sviluppare.
Temi – Template suggeriti per la Fotografia
Drupal One Page Portfolio Theme (2016) – theme a una pagina per Drupal versione 8.0.
Bilderblock photo theme (2016)
Photography Zymphonies Theme (2015)
Photo (2013) – indicato per Fotografia e multimedia con full screen slideshow.
MD Foto (2013)
Hatch (2012)
Mallorca
Photogenic (2011)
ST Dulcian (2011) – Visualizza le foto con le mappe Gmap.
ST Viola (2010)

Fullscreen (2014) style design pulito con Galleria effect. Doppia visualizzazione Pinterest Grid Layout e Galleria Slideshow.
WP Blog (2011) – un modulo blogging in stile WordPress per drupal
ST Shamisen (2012)
ST Kanjira (2013) doppia visualizzazione Pinterest Grid Layout e Galleria Slideshow.

Moduli Drupal. Sono dei software che permettono di passare da un csm ad un’altro rispettando le impostazioni d’origine. Sono importanti perchè l’utente ottiene controlli e accessi per la modifica del sito simile all’originale come le informazioni per i motori di ricerca (importante per non perdere l’indicizzazione sui motori di ricerca).
Migrate (2009)
WordPress Migrate (2010)

WordPress Import ( 2007) è un modulo che importa siti costruiti con WordPress in Drupal partendo da files wordPress eXtended RSS (WXR) file.
Joomla è una via di mezzo tra semplicità e performance.
CMS Joomla a pagamento gradevolissimi per risaltare le fotografie i seguenti temi:
MY Folio responsive, font selezionabile; Eight responsive; Panekah ottimizzato per l’arte visiva

La licenza da sviluppatore include non solo un dominio per installazione ma un numero maggiore di licenze a prezzi ridotti.

Negozi online – Ecommerce.
WooCommerce 42%
Zen Cart 13%
Prestashop 12%
Magento 7% (per grandissimi negozi onlne)
[dati 2017]

WordPress nella versione negozi online adotta il plugin WooCommerce.
I principali motori di ricerca sono: Google, Bing, Yahoo, Ask.com.

SEO -Search Engines Optimization.

Google Website Optimizer permette di conoscere quali cambiamenti a una tua pagina possono produrre percentuali di conversione visitatori migliori.

Google Analytics e strumenti per i Webmaster di Google strumento per migliorare il sito web personale.

Google AdWords è uno strumento per permette di promuovere il proprio prodotto o sito nelle pagine di ricerca di Google.

AdSense è il servizio di Google per ospitare banner pubblicitari nei siti personali.

Per la posizione Seo, il titolo di una pagina html dove essere di poche parole o una frase breve. Il meta tag description può contenere un breve paragrafo o una, due frasi.

Google usa come frase di descrizione o snippet il tag description per le pagine html del sito personale. A volte il motore di ricerca potrebbe usare anche una query di ricerca di un utente in alternativa al tag service.

Dmoz
non più operativo dal 14 Marzo 2017.
ODP (Open Directory Project), era un catalogo gratuito che elencava siti web non commerciali. Strutturato in una directory suddivisa in categorie con traduzione in svariate lingue.
Era la più vasta e completa directory del la rete gestita e mantenuta da una comunità di editori umani volontari. Uno strumento per contenuti e quindi non promozionale strutturato gerarchicamente.

Inserire una favicon personalizzata sul sito personale WordPress
La favicon è una icona, delle misure 16×16 pixel, che i browser visualizzano a sinistra dell’URL della barra di indirizzo http. E’ un’utile accorgimento per i navigatori per riconoscere più facilmente il sito web dal trademark. Quella di defaul è una h azzurra standard.

Con WordPress 4.3, si è iniziata la possibilità di inserire direttamente la favicon dalla bacheca.

Aspetto > Personalizza > Identità del Sito. > Icona del sito.

NOTE.
*(1) Scrolling infinito (un tipo di navigazione della pagina web che permette all’utente di visualizzare i contenuti scorrendo la pagina invece che cliccare nuovi link. Il riferimento per comprendere meglio sono i social network come Facebook o Instagram. Unica avvertenza è di fare attenzione all’ottimizzazione dei tempi di caricamento dei contenuti). E’ un layout ideato nel 2005.

*(2) Lo scorrimento parallax -parallax scrolling- è un tipo di layout per una pagina web in cui singoli elementi della pagina web, come foto, si muovono in maniera asincrona rispetto al controllo del mouse ottenendo particolari effetti visivi. E’ un layout ideato nel 2009.

*(3) all’utente viene comunicato il messaggio con l’ausilio di diversi strumenti multimediali testo, immagini, illustrazioni, foto, video, sotto forma di storia.

*(4) Il menu a pulsante, chiamato menu hamburger – hamburger button – è il simbolo uguale ≡ utilizzato nelle app e per i menu a tendina dei siti mobile e ora adottato anche su pc desktop.

Ideato per semplificare la presentazione di un menu di navigazione nel 1990 da Norm Cox per la Xerox Star, abbandonato fino al 2009 anno in cui venne reintrodotto da iOS per un registratore di suoni dello smartphone.

*(5) La presentazione dei contenuti testuali, quelli basati su immagini, foto o su pulsanti -Call to Action- sono disposti secondo il layout denominato card layout – card-based design– ossia presentati su più riquadri (box), ridistribuibili con il responsive design sull’intera pagina web. Il riferimento per comprendere meglio è la visualizzazione adottata da Pinterest. E’ un layout ideato nel 2006.

*(6)

Alcuni utili link diretti ai rich snippet per i siti di attività più interessanti:
http://schema.org/PaintAction
http://schema.org/PhotographAction
http://schema.org/WriteAction
http://schema.org/CookAction
http://schema.org/DrawAction
http://schema.org/ScholarlyArticle
http://schema.org/Blog
http://schema.org/WebSite
http://schema.org/TelevisionStation
http://schema.org/TelevisionChannel
http://schema.org/Event
http://schema.org/ExhibitionEvent
http://schema.org/Store
http://schema.org/HotelRoom
http://schema.org/Recipe
http://schema.org/Language

*(7) L’Interfaccia Utente (UI) del web è una pagina rappresentata sullo schermo del pc per veicolare contenuto, informazioni, elementi multimediali e funzioni.

La progettazione delle pagine va indirizzata all’utente e alla semplicità e intuitività della navigazione.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *