Archivio articoli - CSS Design

\\ Home Page : Archivio : CSS Design (inverti l'ordine)
Di seguito gli interventi pubblicati in questa sezione, in ordine cronologico.
 
 

Come impedire il salvataggio di foto o immagini dal mio blog o sito?

Di Marco Barontini del 03/04/2012 @ 21:20:00, in CSS Design, letto 10437 volte)

 

Spesso vorremmo impedire il salvataggio di una foto o di un’immagine che abbiamo pubblicato sul nostro blog (o sito web). Diciamo subito che non è possibile impedire una simile operazione. Basta avere un po’ di dimestichezza con i browser e qualsiasi contenuto pubblicato online è scaricabile.

Tuttavia è possibile complicare un po’ le cose e, quanto meno, ostacolare tutti quegli utenti meno esperti che di fronte ad una bella foto cliccano con il tasto destro del mouse per scegliere la voce “Salva con nome…”.

Il sistema che vi mostrerò si basa su di un semplice meccanismo che sovrappone una foto trasparente a quella originale. In questo modo facendo clic con il tasto destro del mouse e scegliendo “Salva con nome…”  si salverà solo la trasparenza e non la foto “vera”.

Mettiamo ad esempio che la foto da inserire nel nostro blog sia quella rappresentata qui sotto:

Impedire salvataggio foto

Il codice HTML da inserire sarà pertanto il seguente:

<img src=”image-m-048.jpg" width="530" height="398">

Per rendere la nostra foto non salvabile si deve sostituire il codice visto sopra con il seguente:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image:url(image-m-048.jpg);" width="530" height="398">

In pratica la nostra immagine sorgente (img src) è diventata questa riga

data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Che altro non è che la trasposizione codificata in base64 di un’immagine gif di 1x1 pixel trasparente.

R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

è un'unica stringa (negli esempi qui sopra spezzata su 2 righe a causa della formattazione della pagina).

La vera immagine è stata inserita nella proprietà background-image.
Per una corretta funzionalità è necessario impostare le dimensioni esatte dell’immagine originale (in questo caso width="530" height="398"). Se volete provare l'effetto provate a scaricare questa foto con il tasto destro del mouse:


(La foto fa parte della mia raccolta disponibile nella sezione Foto gratis)

 

Font per siti web: Google web fonts

Di Marco Barontini del 21/02/2012 @ 15:40:13, in CSS Design, letto 3622 volte)

 

La scelta del font da usare all'interno delle pagine dei siti web è sempre stata assai limitata. Il font richiamato all'interno del nostro file CSS, per essere visualizzato correttamente, deve essere presente nella raccolta di font installati sulla macchina client. Per questo le famiglie di font Arial, Helvetica, Verdana, Times hanno imposto la loro "supremazia" sul web.
Erano (e sono) i tipi di font la cui presenza è praticamente assicurata su tutte le piattaforme (Windows, Mac, *nix) oltre ad essere i font che offrono senz'altro il grado più elevato di leggibilità a video.

Ai web design più creativi che non volevano comunque rinunciare ad un proprio stile personale sono venuti in soccorso alcuni strumenti di font replacement come sIFR o Cufòn, che però (a mio avviso) sono utilizzabili solo per alcuni tag specifici della pagina (come i tag designati per i titoli h1, h2, h3, ecc) e che comunque introducono un certo grado di  "pesantezza" nella pagina web stessa dovendo richiamare sia il file JavaScript di gestione del font replacement sia quello contenente la codifica del font. Inoltre tale tecnica è inutilizzabile nel caso l'utente abbia disattivato il caricamento di Javascript sul proprio browser.

Con Google web fonts si introduce invece un paradigma diverso basato sul concetto (tanto di moda in questo momento) di "cloud". Le specifiche del font che ci interessa si trovano su server esterni (di Google) e si richiamano tramite un'apposita istruzione all'interno della sezione <head> della nostra pagina web. Definito il font da usare lo si può implementare all'interno del nostro file CSS tramite il suo nome.

Nell'immagine qui sotto potete vedere la pagina del sito Google web fonts da cui si può precedere alla scelta e selezione dei font.

Font per siti web

Una volta selezionato il font che più ci piace possiamo vedere, tramite il link Quick-use, l'impatto che avrà nel caricamento della pagina (se rallenterà o meno il caricamento della pagina e di quanto).

Nella stessa pagina troveremo inoltre la direttiva (che non è di tipo JavaScript bensi "text/css" e quindi immune dal problema detto in precedenza) da copiare nella nostra pagina web per richiamare il font prescelto oltre ad un esempio di integrazione all'interno del file CSS.

Nelle 2 immagini qui sotto potete vedere come introdurre la riga contenente la direttiva per richiamare il font 'Doppio one' e un esempio di utilizzo del font stesso all'interno del tag h1 del file CSS.

Font per pagine web
Google web fonts esempio


 
Pagine: 1

Articoli per Categoria: