Il Certificato SSL: come rendere sicuri i siti web

Il certificato SSL (Secure Sockets Layer) viene applicato ai siti web per garantirne la sicurezza e l’affidabilità, criptando i dati e le informazioni che si scambiano tramite internet. Viene naturale pensare che per un eCommerce è fondamentale possedere un buon certificato SSL, per garantire che le credenziali degli utenti e dei dati sensibili (come ad esempio i codici delle carte di credito) siano trasferiti nel modo più sicuro e privato possibile, ma anche un semplice form di contatti (come quello presente nel sito di RAD) trasferisce delle informazioni nel momento in cui un utente decide di usufruirne per contattarci.

Come riconoscere se un sito è protetto dal certificato SSL?

I siti protetti dal certificato SSL si riconoscono perché il prefisso del protocollo HTTP si trasforma in HTTPS (è possibile notarlo direttamente dall’url di questo sito), inoltre le ultime versioni dei browser distingueranno i siti protetti con l’icona di un lucchetto verde.

Da notare bene che, dalla versione 56 di Google Chrome e successive, il browser segnalerà come non sicuro un sito sprovvisto del certificato SSL, con la possibilità di condividere password e dati sensibili: un grosso deterrente per un utente.

Il certificato SSL del sito di RAD
Il certificato SSL del sito di RAD

Il certificato SSL è obbligatorio?

Da gennaio 2017 praticamente sì! Tutti gli eCommerce o siti con form di contatto dovranno possederne uno. Noi di RAD lo consigliamo a prescindere, in quanto è un vantaggio in termini di immagine non indifferente: andresti mai a provare un auto in un concessionario con il cartello “queste auto non sono sicure“?

Il certificato SSL influenza il ranking dei risultati di ricerca di Google, a prescindere se ci troviamo a che fare con un eCommerce oppure no, è inoltre una richiesta obbligatoria per attivare delle campagne Google shopping.

Infine, da giugno 2017 anche PayPal obbligherà i siti web a possedere un certificato SSL per poter usufruire del suo sistema di transazioni online.

Come si implementa il certificato SSL?

Tutti i principali provider offrono il servizio di implementazione di un certificato SSL, acquistarlo non è niente di complesso ma dobbiamo assicurarci che, dal momento in cui il certificato sarà attivo, Google sia a conoscenza di questo cambiamento, in quanto tutti i link delle nostre pagine sono cambiati, anche se solo per una “S“!

Per poter aggiornare i link e non rischiare bruschi cali di traffico è necessario effettuare alcuni passaggi:

  • Creare dei redirect 301 per ogni link del nostro sito, da HTTP a HTTPS (comprese immagini e link interni).
  • Aggiornare la Google Search Console, aggiungendo un nuovo sito con l’HTTPS.
  • Aggiornare Site Map e robots.txt.
  • Verificare nuovamente Google Analytics.
  • Cambiare i link dei social che rimandano al sito con la versione HTTPS.

Effettuati tutti questi procedimenti, è possibile verificare che il certificato sia correttamente inserito tramite questo servizio: www.ssllabs.com/ssltest.

Affidati al servizio di Gestione Dominio & Hosting di RAD

Il passaggio al certificato SSL è fondamentale per un buon ranking online ma anche per far trasparire un’immagine sicura ed affidabile agli utenti del tuo sito web: non trascurare nessun dettaglio e affidati al servizio di RAD Gestione Dominio & Hosting, penseremo noi ad effettuare il procedimento di implementazione del certificato SSL.

Vai a Gestione Dominio & Hosting

Parallax scrolling: come rendere più piacevole la UX [case history]

Il parallax scrolling è una tecnica ormai molto sviluppata nel frontend development. Parallax, in italiano parallasse, deriva dal greco e significa accavallamento: il principale effetto ottenuto comporta la sovrapposizione di vari elementi all’interno della nostra pagina, che si spostano allo scroll a velocità differenti. In motion graphic questo espediente veniva utilizzato ancor prima di vederlo nel web, per ottenere un effetto tridimensionale in cui le immagini di sfondo si muovono più lentamente rispetto a quelle in primo piano.

Quando utilizzare il parallax scrolling

È possibile ottenere un perfetto effetto di parallax scrolling su pagine relativamente lunghe: questo ci permette di avere lo “spazio di manovra” necessario per scorrere la pagina e notare l’accavallamento degli elementi a velocità differenti. L’effetto non deve essere eccessivamente evidente, bastano veramente pochi accorgimenti per rendere lo scrolling più piacevole e fluido, rispetto allo standard lineare.

Grazie al parallax scrolling, l’utente si sentirà catapultato all’interno della pagina e delle immagini, creando fantastici effetti tridimensionali e di zoom. L’effetto può essere applicato sia a fotografie che a elementi di UI ma anche a caratteri tipografici e pattern di sfondo.

Come progettare una pagina web con il parallax scrolling

Progettare una pagina web con l’effetto del parallax scrolling, comporta uno studio approfondito della struttura della pagina e degli effetti che i vari elementi dovranno possedere al momento dello scroll.

Per lo sviluppo della home page e di alcune pagine interne del sito Souvenir Clubbing abbiamo prima di tutto realizzato dei wireframe, ovvero uno schema dei contenuti della pagina, completamente in bianco e nero. Questo ci ha permesso di studiare gli effetti principali e a quali velocità si dovevano muovere.

Parallax Scrolling - Come progettare un effetto parallasse aiutandosi con i wireframe
I wireframe ci permettono di definire gli ingombri e le varie tipologie di spostamento.

Con i wireframe è possibile eliminare ogni tipo di distrazione da colori, immagini e tipografia: tutta l’attenzione è dedicata alla gerarchia dei contenuti e alla User Experience.

Lo sviluppo frontend del parallax scrolling

Per questo progetto abbiamo deciso di affidarci ad un potente plugin jQuery che ci ha permesso di realizzare ogni effetto di parallax scrolling nel modo più preciso e fluido possibile: il suo nome è Skrollr e lo potete scaricare dalla sua repository github a questo link: https://github.com/Prinzhorn/skrollr.

Associato al grid system del nostro Framaework, siamo stati in grado di gestire ogni elemento in maniera tale che ogni effetto di scrolling avvenisse esattamente al momento desiderato: il sistema di ancoraggio di Skrollr riesce a gestire i breakpoints in modo molto preciso.

Schema per gestire i breakpoints di Skrollr
Schema per gestire i breakpoints di Skrollr

Conclusioni

In conclusione, sviluppare una pagina con l’effetto del parallax scrolling necessità degli accorgimenti specifici che ci permettono di ottenere uno scrolling piacevole, migliorare la User Experience delle nostre pagine e dare quel tocco di dinamicità a qualsiasi tipo di contenuto ma attenzione: senza il dovuto studio e progettazione l’effetto può risultare invadente e abbassare parecchio le prestazioni, creando scatti e delay durante la navigazione.

Potete visionare il risultato del nostro lavoro sul sito www.souvenirclubbing.net o guardare un anteprima del parallax con il video sottostante.

Stay Hungry Stay Responsive

Darwinismi Digitali

Praticamente tutti i clienti al giorno d’oggi richiedono una versione mobile del loro sito internet. I contenuti multimediali devono adattarsi a molti device e molte strutture: iphone, iPad, blackberry, netbook, kindle ed ogni anno esce qualcosa di nuovo. Nei prossimi 5 anni ci sarà il bisogno di ripensare il design per molte altre invenzioni.

Quando venticinque anni fa fu inventato il web si poteva navigare attraverso queste “informazioni fluide” per mezzo di testo e iperlinks.  Poi sono arrivate le immagini, i sistemi integrati(embedded), iframe e poi i video fino che tutto è stato tradotto in CSS e fixed widths. Con l’avvento del responsive design siamo tornati alle informazioni fluide, ma con un bel po’ di elementi interattivi.

La necessità di adattamento è, come per le specie viventi, una priorità relativa alla sopravvivenza. Se si vuole avere un ritorno monetario o di pubblico dobbiamo pensare in larga scala ed essere pronti a modificare la nostra visione. Nel campo del web design e dello sviluppo, stiamo arrivando velocemente al punto in cui diventerà impossibile tenersi al passo con nuove risoluzioni e nuovi device, pensiamo ad i vari orologi e relative applicazioni.

In molti casi creare una versione web per ogni formato e dispositivo è praticamente impossibile, per non dire inutile.

Saremo mai pronti a sopportare le conseguenze della perdita di visitatori su desktop a beneficio di un guadagno di utenti su mobile? C’è forse una soluzione?

Ethan Marcotte, il web designer che ha inventato (come scrive sul suo sito) il termine “responsive web design” ed che è “ancora sconvolto da come l’idea sia stata recepita”, ha scritto un libro a riguardo che porta come titolo l’omonima definizione coniata.

Questo l’articolo che lo ha reso Mr. RWD: fluidgrids

Da Grande voglio fare il Responsivo

Il Responsive Web Design (RWD) è quel dogma che suggerisce di sviluppare delle soluzioni che rispondano ai comportamenti dei visitatori e alle condizioni basate su misura dello schermo, piattaforma e orientamento. Nella pratica si tratta di un mix tra griglie flessibili e layout ridimensionabili conditi con delle media query CSS che riconoscono il dispositivo e permettono ai contenuti  di adattarsi. Così quando l’utente si sposterà da lpad ad iPhone, il sito si adatterà automaticamente in risoluzione, dimensione delle immagini e script. In parole povere si crea la tecnologia amica che risponde in automatico alle preferenze dell’utente.

Questo elimina tutta quella necessità alla pogettazione di design dedicati, snellendo di gran lunga la fase di sviluppo e creazione.

Il signor Morten Hjerde ha calcolato che lo schermo più grande su cui visualizzare un contenuto è 23 volte più grande rispetto quello piccolo.Un bel range con cui doversi confrontare!

Ma la parola responsive design non tratta solo risoluzioni di schermi ed immagini regolabili, piuttosto riguarda un nuovo modo di intendere e progettare il design.

Per capire di cosa stiamo parlando ci viene in aiuto questo fantastico sito!

Mi viene in mente la parola tascabile. Quei gesti che facciamo inconsciamente quando stiamo sfogliando un quotidiano al bar, quando in vacanza pieghiamo la cartina, quando sul prato pretendiamo di tenere il libro con una mano perchè l’altra sta sotto la testa. Il sito del film The Forecaster rende benissimo l’idea delle immagini di cui parlavo prima, trasposta in digitale.

Per quello che riguarda il design di immagine, ovvero la costruzione di brand identity, loghi e quant’altro, la parola responsive si declina nella ricerca di una comunicazione calcolata al millimetro, che diventa il vestito sartoriale cucito ad-hoc sul cliente.

Le griglie diventano i fondamenti del brand, il layout l’immagine di campagna e il css sarà la strategia di comunicazione.

Il 3d Nei browser: WebGL contro CSS 3D Transforms

Il WebGL e le CSS 3D transforms sono due delle principali tecniche per realizzare effetti 3D nei browser, in questi primi anni il supporto per questi sistemi era veramente scarso ma in un breve lasso di tempo molto è cambiato e, noi di RAD ci teniamo a rimanere sempre aggiornati sulle ultime tecnologie e tendenze dello sviluppo web, per poter fornire prodotti innovativi e all’avanguardia: scopriamo insieme come possiamo sfruttare le tecnologie 3D all’interno dei nostri siti web!

CSS 3D Transforms

Concepire degli effetti 3D all’interno dei nostri siti web ha un suo senso logico: come per tutti gli altri tipi di strutture 2D, l’HTML continua a progettare la struttura e il CSS 3D Transforms si occuperanno invece di realizzare la parte grafica (naturalmente in questo caso in 3D), proprio come avrebbe fatto un normale foglio di stile CSS. Fino a qui penso sia tutto molto semplice e logico per chiunque si intenda un po’ di linguaggi di markup, non continuerò comunque questo articolo con guide sulle proprietà delle CSS 3D Transforms, lo scopo di questo post sarà quello di illustrare una veloce presentazione delle potenzialità di questo nuovo CSS attraverso alcuni interessanti progetti che sarai libero di visionare.

Shading and Multiplaning

Questi termini inglesi stanno a significare ombreggiatura e livelli multipli, grazie ad essi, è possibile realizzare degli effetti che diano la sensazione di tridimensionalità, anche l’ormai famoso parallax scrolling si basa proprio su questi due concetti: i vari contenuti, che siano scritte, elementi grafici o immagini, viaggiano a diverse velocità su dei livelli multipli e, con ombreggiature e sfuocature, è possibile accentuare l’effetto di profondità.

Un altro valido esempio che utilizza gli stessi principi può essere visionato nel progetto di Nick Pettit: il Multiplane Design. In questo progetto, Nick  riesce a ricreare un effetto di profondità 3D, grazie ai movimenti dei pannelli sull’asse Z a velocità differenti che avvengono nel momento in cui si prova a scrollare la pagina con il mouse.

Rad - multiplane_landscape_layers 3d
Immagine che illustra i livelli del multiplane per creare effetti 3D

Modellazione di oggetti 3d

Oltre a questi metodi appena illustrati, è stato sviluppato un editor molto interessante, chiamato Tridiv: si comporta come un qualsiasi altro software di modellazione 3D da desktop, con diversi strumenti per modellare gli oggetti e modificare la posizione della camera. La cosa sorprendente sta nel poter incollare i codici all’interno delle nostre pagine web per ricreare delle perfette copie 3D, tutto utilizzando solamente HTML e CSS.

RAD - 3d x-wing - Tridiv

WebGL

Il WebGL è completamente differente dall’HTML e il CSS, esso infatti è renderizzato attraverso il tag <canvas>, questo permetterà di realizzare un oggetto non intrusivo rispetto al resto della pagina, ed isolato in un suo contesto specifico. Questo comunque non è un aspetto particolarmente negativo poiché il canvas fa a tutti gli effetti parte del DOM e non avrà particolari difficoltà ad essere flessibile con il resto degli elementi della pagina.

Andiamo adesso ad elencare alcuni strumenti e progetti che ci potranno essere utili per sfruttare il WebGL:

Three.js

Uno dei più importanti progetti WebGL è three.js, strumento molto utile che ci fornisce  API per render, ombre, camere, luci ed effetti di ogni genere! C’è pure una community che carica in rete demo e tutorial per aiutarci a partire a sviluppare progetti WebGL.

Voodoo.js

Un’altro dei migliori progetti WebGl è Voodoo.js poichè permette di eliminare alcuni limiti che ci vengono imposti quando utilizziamo l’elemento canvas. Usando un codice intelligente (che alcuni chiamano appunto voodoo) avrete la possibilità di mischiare elementi WebGL con del normale HTML: cliccate sul link alla pagina ufficiale di Voodoo.js e scrollate la home page per vedere gli effetti parallasse d’esempio, provate inoltre ad evidenziare il testo della citazione a fondo pagina per vedere come l’anello dorato ci passa nel mezzo: è un normalissimo testo html ma magicamente un anello realizzato con WebGL fluttua intorno ad esso!

Chrome Experimets

Se non sei ancora rimasto impressionato da tutto ciò, ti invito ad andare a vedere gli esperimenti WebGL di Chrome Experiments: ognuno di essi è praticamente spettacolare e ti mostrerà tutte le potenzialità che il WebGL può offrire. Vale la pena visionare Delight Engine demo, nel quale sono presenti degli effetti di luce in tempo reale, degni di un gioco da console.

Siete pronti a sviluppare il vostro primo progetto 3D?

Ora che ti ho illustrato alcuni dei principali metodi per utilizzare effetti 3D sul web non ci resta altro che sviluppare insieme un progetto che faccia stupire tutti quelli che lo visioneranno: per maggiori informazioni scrivici dalla pagina dei contatti!

Contattaci per maggiori informazioni

Ti lascio infine a delle  slide di Google che riassumono il 3D con degli esempi molto interessanti.