Ottimizziamo il peso delle immagini con: Image Optimizer

Image-Optimized

Spesso capita che le immagini di un sito, ritardino di molto il caricamento di una pagina, questo perchè spesso si trascura il loro peso.

Per questo motivo voglio presentarvi un ottimo tool gratuito che consente in pochissimi click, di alleggerire notevolmente il peso delle vostre immagini senza perdere troppo nella definizione, sto parlando di: ImageOptimizer.

Il servizio consente di caricare un’immagine dal disco fisso e scegliere le dimensioni e la qualità del risultato:

Options

Una volta premuto suOptimize Now!, i risultati parleranno da soli, per esempio io ho caricato un’immagine di:

  • Risoluzione: 2592×1944
  • Peso: 2615 KB

Siamo arrivati in 1.171 secondi ad avere un’immagine di:

  • Risoluzione: 800×600
  • Peso: 54 KB

Result

Un servizio molto comodo per chi non avesse a disposizione photoshop, per alleggerire le immagini, poi è semplice e gratuito.

Minore è, meglio è.

Ecco KeyWord Fishing!!

KeyWord Fishing è un ottimo software per analizzare la “competizione delle parole chiave” sulla rete.

Il suo funzionamento è molto semplice e la schermata di presentazione è molto intuitiva:

KeyWord-Fisher

Analizziamo assieme le varie opzioni seguendo i punti indicati:

  1. Inseriamo la parola o le parole da voler analizzare (una per riga)
  2. Utiliziamo lo slider per selezionare quante pagine vogliano analizzare
  3. Vuoi aumentare la raccolta dati? Aumenta questo parametro!
  4. Selezioniamo il numero dei processi da attivare (aumentando i processi si dimezzano i tempi di ricerca ma comporta un maggiore utilizzo del processore)
  5. Carichiamo una lista di KeyWord già creata in precedenza
  6. Carichiamo il report di una lista di chiavi
  7. Salvataggio
  8. Ripristina la situazione di default
  9. COMINCIA LA PESCA DELLE KEYWORD

ATTENZIONE: aumentando i valori dei parametri 2 - 3 e 4 aumenterà anche il tempo d’analisi.

Una volta avviata la ricerca il software trova tutte quele parole simili o derivate che stiamo cercando e le posiziona in una tabella composta da tre campi:

KeyWord-Fisher-Phrases

  • Occurrences = il numero delle occorrenze trovate
  • Saturation = la percentuale di competizione (più è alta e minore sarà la possibilità di ottenere buoni risultati nella SERP)
  • Phrase = termini simili trovati

Spostandoci sul tab intitolato: Word Summary avremo gli stessi parametri della Phrase Summary, ma con un sensibile aumento dei valori percentuali e delle occorrenze.

Questo perchè è logico che una singola parola può essere ripetuta in più contesti differenti con una maggior frequenza rispetto ad una frase presa singolarmente.

KeyWord-Fisher-Unique

Questo è tutto! Vi ricordo che sia per le parole che per le frasi, è necessario trovare i termini più adeguati controllando il loro grado di saturazione: MINORE è questo valore e meglio è, per trovare posizioni favorevoli nella SERP.

Questo tool lo uso da molto tempo per fare le mie analisi SEO sulle pagine web, per questo lo consiglio caldamente e diffidate dai servizi online, perchè spesso non hanno la stessa precisione nei risultati.

typoGenerator – il reale astratto

Nato da un progetto universitario di due studenti Austriaci, typoGenerator è un servizio web 2.0 molto particolare.

Consente infatti di generare delle composizioni astratte di parole in modo del tutto casuale.

L’applicazione si snoda su 5 semplici opzioni:

  1. Inserimento delle parole su cui creare l’effetto
  2. Il formato: orizzontale o verticale
  3. Lo stile del testo
  4. Il colore
  5. Lo sfondo

TypoGenerator

E’ un servizio che non può essere spiegato a parole, ma deve essere assolutamente provato!

Creiamo dei loghi d’impatto in pochi click

WebFandom-Logo-GeneratorPochi click bastano per generare un logo d’impatto come quello sopra.

Basta utilizzare: Web 2.0 Free Logo Generator un servizio molto comodo per la generazione online di Loghi personalizzati.

Il servizio è molto immediato e mette a disposione le seguenti opzioni:

Opzioni-LogoCreator-WebFandom

  • Testo da formattare
  • Colore dello sfondo
  • Colore della parola
  • Font
  • Colore dell’effetto della parola
  • Effetto reflex
  • Eventuali simboli da inserire
  • DPI dell’immagine e relativa tipologia

La velocità di creazione e la qualità del risultato rendono Logo Generator un’ottimo strumento, da tenere in considerazione per chi non ha esperienza nel campo della grafica.

Altri servizi molto validi sono:

Le form del poco tempo

Form-Editor-1

PHPForm è un comodo editor di form on-line, gratuito, veloce che non richiede registrazione.

Consente in pochi click di avere delle vere form in formato HTML, pronte all’uso. I passaggi per crearle sono pochi e gli strumenti a disposizione tanti.

Per prima cosa selezioniamo lo schema di colore che vogliamo applicare, premiamo su next e passiamo alla prossima schermata.

Qui troveremo diverse opzioni per personalizzare la form, quali:

Strumenti-1

man mano che si aggiungono elementi sarà possibile editarli per rinominare le label e personalizzare i titoli della form.

L’affetto finale sarà una struttura HTML leggera alla quale noi potremo apportare diverse modifiche, sia dal punto di vista grafico che dal punto di vista del codice.

Form-Editor-Risultato

Sfortunatamente questo servizio non crea un file CSS per personalizzarne lo stile, per questo motivo vi riporto un altro servizio gratuito che ci aiuterà a crearlo: FormStyleGenerator.

StileForm-Generator

Il servizio permette di dare una formattazione a:

  • Sfondo
  • Bordo
  • Font e testi
  • Label
  • Eventi del mouse in base al click

Una volta generato il codice, lo potremo applicare a qualsiasi delle nostre form e magari modificarlo per creare degli effetti più accattivanti.

Questi due servizi sono rivolti principalmente a chi non ha molta confidenza con html e css, perchè li ritengo molto utili come basi da cui partire per poter creare form più complesse.

Dove la videocamera non basta

ScreenToaster-1

Non voglio fare altro altro rumore, perchè sulla rete c’è già molto riguardante questo argomento.

Però mi sono arrivate alcune mail, di persone che chiedevano se esisteva un servizio gratuito On-line per creare dei video tutorial.

Esiste ScreenToaster, ottimo servizio gratuito per effettuare delle riprese di screen recorder, ovvero registrare tutti i movimenti fatti da noi sul nostro monitor.

ScreenToaster-2

Il servizio mette a disposizione diverse opzioni:

  • Ripresa a pieno schermo
  • Ripresa parziale di una determinata zona rettangolare, da noi impostata
  • Registrazione di audio
  • Ripresa via WebCam

Si possono poi impostare le geek settings che comprendono:

  • L’impostazione del playback speed
  • Ripresa di operazioni da server

La parte interessante arriva ora, infatti ScreenToaster mette a disposizione delle interessanti opzioni al termine della ripresa, ovvero:

ScreenToaster-4-opzioni

  • Riepilogo delle specifiche del file generato (peso, durata ecc…)
  • Consente di caricare il video direttamente su YouTube
  • Salvarlo nei formati .mov e .swf
  • Editarlo
  • Caricarlo sul server di ScreenToaster in alta definizione per condividerlo con altri utenti.

ScreenToaster-3

Una volta registrati i video verranno allocati nello spazio del profilo, dove voi potrete:

  • Inserire i dettagli della vostra anagrafica
  • Gestire l’account
  • Scaricare i viedo nei formati stabiliti

Un servizio comodo, rapido e gratuito che consente in pochi passi di poter creare dei video tutorial di grande qualità.

Contiamo i pixel? No grazie!

Generatore di sprite

Il titolo dell’immagine dice già tutto.

Oggi vedremo come generare uno sprite d’immagini, utilizzando dei servizi gratuiti.

Per prima cosa generiamo un file zip nel quale andremo a mettere, tutte le immagini di cui si vuole generare lo sprite.

Andiamo sul sito SpriteGen e carichiamo il file zip dall’apposito pannello.

Sorgenti

dopodiché potremo settare diversi parametri quali:

  • Immagini Duplicate
  • Ridimensionamento Immagini Originali
  • Opzioni Sprite Generato
  • Opzioni CSS Generato

Premendo poi sul bottome “Crea Immagine” otterremo tutto quello che ci serve:

  • le coordinate del background-position già calcolate
  • e lo sprite d’immagini compattato

Sprite ottenuto

Un servizio comodo e intuitivo e molto semplice da utilizzare.

Simile è CssSprite comodo anche lui ma con meno opzioni.

Come mi vedono gli altri?

BrowserShot-NetRender

Un problema che capita spesso ai WebDesign è quello di dover verificare che il sito sia ben visibile su tutti i web browser.

I casi sono due:

  • Vi installate più di 40 browser per fare le vostre prove.
  • Oppure usate dei bei servizi che fanno il lavoro gratuitamente e in poco tempo.

Potete usare il più famoso in assoluto che è BrowserShots oppure NetRenderer.

Con BrowserShots potrete visualizzare come viene visto il vostro sito in più di 40 browser, riportandovi semplicemente lo screenshoot delle visualizzazioni. E’ uno strumento molto potente ma anche molto lento, perchè impiega parecchio tempo per genereare tutte le anteprime che avete selezionato.

NetRenderer è più limitativo all’apparenza, ma consente di testare il sito sui vecchi Internet Explorer, che generalmente sono quelli che danno più problemi, riportandovi anch’esso lo screenshoot della pagina, però in alta risoluzione.

Voi invece, come verificate i vostri siti?

Evitiamo di passare dal commercialista

vendi-nuda-proprieta-webfandom

Voglio presentarvi oggi un servizio web 2.0, molto particolare: il calcolo della nuda proprietà, un’argomento che non c’entra assolutamente nulla con questo blog ma molto inerente per il servizio gratuito che propone.

Infatti inserendo soltanto il valore commerciale dell’immobile e la relativa età, verrà visualzzato: l’usufrutto e la nuda proprietà (vi ho riportato nei link per le relative definizioni).

Un calcolo che altrimenti dovrebbe essere fatto da commercialisti o notai.

Il sito è molto carino anche di Design, leggero e semplice. Quindi perchè non provate a vedere quanto vale il vostro immobile?

vendi-nuda-proprieta

Creiamo icone con favicon-generator

favicon URL Avete mai notato che nella barra dell’URL del vostro browser, ogni tanto compare un’iconcina diversa a seconda del sito che si stà visualizzando?

Bene quest’icona delle dimensione di 16×16 pixel si chiama favicon e può essere inserita in qualsiasi sito con una sola riga di codice.

Per crearla ci sono diversi modi:

  1. Vi comprate un programma per disegnare icone – :(
  2. Vi scaricate un programma freeware per disegnare icone – :(
  3. Oppure usate dei comodi servizi web gratuiti come favicon-generator:D

Il servizio totalmente gratuito e privo di registrazione, vi consente d’importare immagini da riadattare ad icone, oppure di disegnarvele voi stessi.

Favicon-generator

La scermata di presentazione è la seguente:

FaviconGeneratornella quale potrete caricare un’immagine dal vostro disco fisso e convertirla in icona, scegliendo di mantere le proporzioni dell’immagine, oppure di aggiungerla alla galleria delle icone.

Io le cose amo farle da me, quindi vi ho disegnato un piccolo Super Mario come iconcina utilizzando l’editor:

EditorNella schermata potrete eseguire diverse operazioni quali:

  • Selezione della cromatura
  • Disegno
  • Selezione automatica del colore
  • Gomma
  • Ripristino immagine
  • L’ultima opzione consente di aggiungere l’icona alla galleria delle immagini del sito

Una volta ultimato il disegno premiamo su Create Favicon, e il servizio ci consentirà di scaricare l’icona su disco.

Favicon-generatorCi verrà inoltre ricordato come si inserisce la favicon nel nostro sito internet, infatti bisognerà utilizzare il seguente tag all’interno dell’head del documento HTML, in questo modo:

<html>
<head>

<link rel=”shortcut icon” href=”http://www.VostroSito.com/favicon.ico”>

</head>

<body>

</body>
</html>

Ovviamente l’icona la dovete caricare su server nella stessa cartella dove avete la index page, in modo tale da non dover modificare il pathname per trovare l’immagine!

Favicon-Generator è un servizio 2.0 gratuito, veloce, intuitivo e molto leggero che non richiede competenze di programmazione, ma solo un pò di fantasia! E voi la vostra icona come l’avete creata?

Prima Ultima 8 di 9

Il progetto WebFandom

WebFandom Logo

Internet e' la prima rete dati pubblica e capillarmente diffusa presso famiglie e imprese, percio' e' un canale di distribuzione virtuale in grado di raggiungere clienti di qualunque dimensione.

WebFandom si occupa di una realizzazione e distribuzione di informazioni, prodotti e servizi sulla rete per imprese di medie e grandi dimensioni, progettando siti internet e sistemi informativi aziendali a forte impatto visivo. Organizziamo campagne pubblicitarie sia online che offline, per promuovere persone, prodotti e aziende.

Se sei interessato potresti consultare i nostri servizi o profili. Se invece pensi che siamo in grado di darti una mano, puoi guardare il nostro portfolio per farti un'idea di cosa sappiamo fare.

Elementi di comunicazione visiva

WebFandom - eBook gratuito

Il primo eBook gratuito italiano sulla comunicazione visiva, un manuale teorico di progettazione grafica che si divide in: Basic e Brand Design. Lo scopo e' quello di fornire un metodo per lo sviluppo di un marchio aziendale.

Seguici su facebook!

Aderiamo ai seguenti Network:

WebFandom - Bergamonews

BergamoNews e' tra i piu' visitati quotidiani online di Bergamo e Provincia, informazioni libere e gratuite da tutta la citta', isole, provincia e Italia. Webfandom aderisce al loro network di blog.

WebFandom - Young Digital

Young Digital Lab e' il network dei migliori giovani professionisti italiani nel campo dei social media. Una societa' di formazione e consulenza sulla comunicazione ai tempi del Social Web.

SideBlog: Notizie Flash dalla rete

Archivio sideblog

Ultimi Preferiti Più letti