Ci è capitato in molte occasioni, di riscontrare un problema di lettura sulla grandezza dei fonts, durante la fase di testing di alcuni siti web su Browser Safari per iPhone. Sappiamo bene che chi naviga da iPhone spesso e volentieri evita di installare Applicazioni apposite ma cerca direttamente attraverso google e non dico che pretenda un sito usabile come una App, ma certamente un progetto web fruibile anche da questo.

Solo che in alcuni casi ci si trova ad avere una formattazione “in termini di grandezza dei font” sbilanciata e quindi a discapito del nostro Design. Ecco che a tal proposito esiste una regola CSS molto utile che formatta il tutto in modo corretto.

-webkit-text-size-adjust

Ricordiamo solo che tale regola deve essere inclusa dopo il classico “font-size” se questo dovesse esistere all’interno dello stile.

body {
..
font-size: 11px;
-webkit-text-size-adjust: 100%;
..
}

Lavorando per un progetto di un nuovo Cliente ci siamo imbattuti nel dover ricreare un effetto di immagini in fullscreen senza però utilizzare linguaggio Flash, poichè la richiesta è che il sito debba poter essere visionato anche da piattaforme mobile o Tablet quali iPad e iPhone.

Bene allora armati di buon impegno abbiamo lavorato su un foglio di stile e il risultato è l’integrazione di un Background inserito nel template grafico a DIV utilizzando CSS.

L’altro problema era legato al fatto che lo stesso background doveva in qualche modo adattarsi sia al tipo di browser che al tipo di risoluzione o apertura della finestra. In sostanza utilizzando la classe CSS3 “background-size”  abbiamo ricreato l’effetto.

Importante: Questo metodo è Cross-Browser e non richiede il supporto di Javascript… comodo no?

Ecco il Codice CSS di Base

html, body {
 background: url(marylin.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

 font-family: 'Philosopher', cursive;
}

Clicca qui per visionare la Demo Online

Questa premessa è stata fatta solo perché in molte occasioni ci troviamo a confrontarci con pseudo nuovi Clienti che richiedono preventivi e seppur competitivi, mostrano più interesse nel commissionare la creazione del proprio sito web ai sopra menzionati.. ritrovandosi poi ad avere un sito web che non rispecchia le proprie esigenze.

Scegliete un Azienda per la realizzazione del Vostro Sito Web

Valutate e prendete in considerazione un’Azienda che sia nel mercato da almeno 5/10 anni, un team di sviluppo che possa garantirvi progetti di piccola e grande entità ma soprattutto, un’Azienda che abbia un portfolio degno di essere chiamato tale.

Ed è proprio qui che a parer nostro stà l’inghippo. Una Web Agency di qualità oltre ad essere reperibile su web attraverso i motori di ricerca e avere un proprio sito internet degno di nota, deve necessariamente avere un portfolio di lavori web di ottima qualità e di varia natura tra i quali: creazione siti aziendali,  siti magazine & blog,  siti internet in flash, siti ecommerce, siti con gestionali personalizzati quindi siti professionali con piattaforme di gestione contenuti, siti versioni mobile e smartphone, e ottimi lavori di grafica coordinata. Questo perchè spesso e volentieri oltre alla necessità della creazione di un sito internet si ha l’esigenza di voler avviare anche progetti grafici tra cui la creazione di loghi e marchi, realizzazione di brochure aziendali, creazione di una Brand Identity e altro.. credeteci non si smette mai di ricercare nell’innovazione e spesso è ciò che è nuovo che attrae ma non necessariamente vincente.

Quindi un buon team dovrà necessariamente avere nel proprio organico dei programmatori web, ma anche un ottimo grafico e un buono consulente per il piano marketing e di lavoro il tutto, strutturato da gente competente e di esperienza.

La Qualità e l’Amore verso il nostro lavoro.. la base dei nostri Successi!

Non a caso ci si trova a creare il proprio sito internet e successivamente, a volte anche più importante, a doverlo aggiornare per non risultare datati o poco seri. Infatti, la notevole mole di siti aziendali presenti nella rete sono poco aggiornati sia nei contenuti che nella ricerca costante di un immagine di successo. Ecco perchè affidarsi a freelance improvvisati, che oggi esistono e domani chissà, sia penalizzante e a volte poco costruttivo; il freelance (a patto che non abbia già una propria attività avviata o sia davvero un talento) spesso e volentieri salta da un lavoretto ad un altro senza poter successivamente sostenere la mole di aggiornamenti dei vari Clienti acquisiti. Questo porta matematicamente a ricercare persone o team in grado di saper sostenere tutto questo e quindi allontanandosi da quelle figure provvisorie poco professionali.

Qui in Artwork abbiamo e ci obblighiamo ad esigere concretezza, da parte nostra e da parte del Cliente, garantendo professionalità, celerità e qualità in ogni progetto e/p aggiornamento di siti web e portali.

Detto questo, passiamo ad illustrarvi ciò che secondo il nostro modesto parere, un sito internet deve avere per ottenere il giusto risultato sulla qualità senza penalizzare la visibilità.

• Naturalmente ottima grafica web e immagine coordinata impattante (in caso effettuare un restyling del Vs. logo)
• Un linguaggio di programmazione nuovo e che sia compatibile con ogni piattaforma o browser
• Utilizzo dei canoni base di programmazione per il giusto andamento della presenza e indicizzazione
• Affidabilità delle informazioni descritte e di ogni singolo contenuto
• Contenuti scritti da competenti e/o appassionati della materia
• Testi originali e NON duplicati o ripresi da web con qualche leggera modifica
• Contenuti senza errori grammaticali, di programmazione e soprattutto di grafica
• Contenuti scritti fornendo vere informazioni (e non con lo scopo di scalare le posizioni con parole chiave etc..)
• Testi che denotino valore se confrontati con analoghi siti o Aziende competitor
• Controllo costante sulla qualità dei contenuti (senza sottovalutare news e informazioni brevi)
• Informazioni vere ma NON per creare semplice “quantità”
• Autorevolezza e riconoscibilità nell’ensable grafico (immagine coordinata di buon livello)
• Contenuti con descrizioni complete e comprensive sull’argomento proposto
• Valutare e NON eccedere nella presenza/invadenza di messaggi pubblicitari
• Evitare contenuti o articoli corti o con buchi di informazione (a patto che il sito non sia semplicemente una vetrina)
• Attenzione ad ogni dettaglio grafico, a volte l’essenza e la sobrità sono molto più impattanti

Si potrebbe scrivere tanto e ancora ed è naturale pensare che in tutto questo, esistano anche dei trucchi o piccoli segreti che portino un sito web a scalare vette sull’indicizzazione nei motori di ricerca, ma è un aspetto da considerarsi in fase di progettazione ma anche successivamente alla messa in opera del progetto web.

Che dire, speriamo in questo nostro focus di aver risposto ad almeno una domanda delle tante, poichè crediamo che nel nostro settore esista pochissima informazione onesta e concreta, la stessa che porterebbe un probabile Cliente a scegliere davvero.. con la certezza di ricevere un servizio degno di essere chiamato tale.

]]> http://www.artworkstudios.it/on-focus/realizzazione-sito-internet/feed/ 0 http://www.artworkstudios.it/realizzazione-siti-internet-milano/motori-di-ricerca-realizzazione-siti-internet-milano/meta-tag-utilizzabili/ http://www.artworkstudios.it/realizzazione-siti-internet-milano/motori-di-ricerca-realizzazione-siti-internet-milano/meta-tag-utilizzabili/#comments Tue, 05 Jul 2011 11:50:30 +0000 artwork tm http://www.artworkstudios.it/?p=984 I meta tag sono metadati presenti nel linguaggio HTML utilizzati per fornire informazioni sulle pagine agli utenti o ai motori di ricerca. A differenza di ogni altro tag inseribile in una pagina web, i meta tag non forniscono al browser alcun dato di formattazione della pagina, per cui il loro influsso sul layout finale è praticamente nullo; sono perciò totalmente invisibili all’utente se non attraverso la visualizzazione del codice sorgente in HTML della pagina oppure tramite le finestre di proprietà dei browser. Spesso e volentieri ci si trova a scontrarsi contro la comprensione della miriade di meta tag, per processare …

<META NAME="DC.Title" CONTENT="Titolo">

<META NAME="description" CONTENT="La descrizione del sito o della pagina">

<META NAME="keywords" CONTENT=" le parole chiave separate da virgole es: mela, mela smith, mela verde, apple">

<META NAME="robots" CONTENT="all | none | index | noindex | follow |nofollow">

<META NAME="revisit-after" CONTENT="7 days">

<META NAME="rating" CONTENT="General">

<META HTTP-EQUIV="distribution" CONTENT="Global">

<META NAME=GENERATOR CONTENT="nome del tuo editor">

<META NAME="copyright" CONTENT="Copyright.ARTWORK">

<META HTTP-EQUIV="expires" CONTENT="Wed, 04 Jul 2011 08:00:00 GMT">

<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;expires=Wednesday, 11-Jul-04 06:00:00 GMT; path=/">

<META http-equiv="REFRESH" content="3; url=http://www.artworkstudios.it">

<META NAME="creation_date" CONTENT="15/06/2011">

<META NAME="author" CONTENT="Artwork tm info@artworkstudios.it ">

<META HTTP-EQUIV="reply-to" CONTENT="info@artworkstudios.it ">

<META NAME="DC.Language" SCHEME="RFC1766" CONTENT="Ita">

<META HTTP-EQUIV="expires" CONTENT="0">

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

<META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans(Duration=X,Transition=Y)">

<META HTTP-EQUIV="Page-Exit" CONTENT="RevealTrans(Duration=X,Transition=Y)">

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

<meta name="proprietà" content="valore" />

Cosa fa, come funziona e a cosa serve..

Ovviamente, per poter utilizzare il pulsante in questione, dovrete avere un account Google e dovrete essere loggati.

Come fatto intuire da Google, questa nuova funzionalità potrebbe avere effetti sul posizionamento dei siti web sul motore di ricerca o sulle pubblicità visualizzate.

Da Mountain View arriva la possibilità di inserire il bottone “Google +1″ in qualunque sito. Infatti, è possibile copiare il codice HTML che si può trovare su questo sito: http://www.google.com/webmasters/+1/button/index.html e seguire le istruzioni riportate.

“La bellezza dei +1 è la loro rilevanza – avrete le giuste raccomandazioni (perché arrivano da persone che hanno legami con voi), nel momento giusto (quando state cercando un’informazione su quell’argomento) e nel giusto formato (i vostri risultati di ricerca)“, scrive Google sul proprio blog.

Con un semplice +1, Google riuscirà a capire sempre meglio ciò che vi interessa ed a offrirvi ciò che cercate sempre più rapidamente.

Video Dimostrativo

Clicca qui per vedere il video incorporato.

Per informazioni dettagliate vi rimandiamo alla guida ufficiale di Google

WordPress fornisce moltissime possibilità ma in alcune occasioni ci si trova a voler ottimizzare il codice per usi di vario genere. Bene speriamo che questo tutorial possa essere di vostro gradimento e possa aiutarvi nella progettazione dei Vostri template grafica.

//Excerpt: usare  - <?php echo excerpt(15); ?>

function excerpt($limit) {
 $excerpt = explode(' ', get_the_excerpt(), $limit);
 if (count($excerpt)>=$limit) {
 array_pop($excerpt);
 $excerpt = implode(" ",$excerpt).'...';
 } else {
 $excerpt = implode(" ",$excerpt);
 }
 $excerpt = preg_replace('`\[[^\]]*\]`','',$excerpt);
 return $excerpt;
}

Crediamo che ormai in molti sappiano che per far indicizzare un sito a Google servono semplicemente dei links da siti già indicizzati in modo che lo spider li possa seguire.

Non sempre però è facile ottenere questi links e soprattutto l’indicizzazione di un sito necessita qualche tempo se i siti in questione non sono “spiderizzati” spesso; la domanda che ci si pone ora è: Come fare allora ad indicizzare un nuovo sito velocemente nei motori di ricerca?

No-Contents? No-Party!

Il mio consiglio è quello di creare un minimo di pagine -ottimizzate per i motori di ricerca- ancor prima che il sito venga indicizzato: non andiamo a far indicizzare siti web senza ancora nemmeno una home page, focalizziamo quindi inizialmente la nostra attenzione sui contenuti e poi passiamo all’indicizzazione e al posizionamento: che senso ha creare un sito web non appetibile per l’utenza? In fin dei conti il SEO è un supporto al sito web, credo sia ovvio che fare SEO con l’obbiettivo unico di posizionare il sito, senza pensare all’utenza, sia completamente inutile.

Non starò qui a spiegare come ottimizzare le pagine web, do per scontato che la fase di creazione contenuti e ottimizzazione interna sia già stata in parte completata: passiamo ora al vero contenuto di questo articolo.

Inseriamo negli indici di Google il nostro sito

Il nostro sito ora è pronto ad essere inserito nel grande database di Google. Come ho detto, per far sì che questo avvenga il metodo più efficace è probabilmente l’inserimento di links in altri siti già indicizzati.

Non tutti però hanno un sito già indicizzato in cui inserire il proprio link e molto spesso anche inserendo un link in uno-due siti ci vuole un po’ di tempo prima che il motore indicizzi il nostro sito web. In questo caso si può ricorrere ai servizi di Social Bookmarking come Digg, Delicious e simili, siti che si sono rivelati molto apprezzati da Google e che hanno fatto e stanno facendo discutere i SEO in tutto il mondo.

Registratevi quindi ad alcuni siti di social bookmarking e segnalate il vostro sito. Qua sotto vi propongo qualche sito in cui potete inserire il vostro sito web per assicurarvi un’indicizzazione veloce.

1. Digg: Segnalando qui il vostro sito potreste riscontare la presenza del vostro sito negli indici di Google in poche ore. Dopo alcuni test, si è dimostrato il migliore in assoluto.
2. Delicious
3. OK Notizie
4. Segnalo

Ora non ci resta che aspettare l’inclusione del nostro sito web nei motori di ricerca. Quindi rilassiamoci e aspettiamo la mattina dopo per vedere se google ha inserito il sito nei suoi indici. Se avete altri siti per guadagnare link per il vostro sito sfruttateli!

Per controllare se siete presenti nel database di Google esiste un semplicissimo comando che ci semplifica la vita! Basta inserire nella casella di ricerca il codice site:www.miosito.it, sostituendo a http://www.miosito.it l’url del vostro sito, per vedere se google ha indicizzato il vostro sito web e quante pagine ha in database.

La sitemap XML

Una volta che il nostro sito web è indicizzato segnaliamo una mappa del sito a Google per “tenerlo aggiornato” dei cambiamenti che facciamo al nostro sito.

Se non l’abbiamo già fatto registriamoci a Google e successivamente clicchiamo su “Account Personale” in alto a destra per accedere ad una schermata navigazione. A questo punto scegliamo “Strumenti per i WebMaster” e, una volta caricata la pagina, aggiungiamo il nostro sito web.

Prima di segnalare la nostra Sitemap dobbiamo generarla. Per creare una sitemap sono disponibili vari tools online, una lista buona e affidabile è quella postata da nbriani sul forum GT: Lista programmi per creare sitemap.

Una volta creata la sitemap e hostata sul nostro spazio web provvediamo a segnalarla a Google tramite la scheda apposita degli Strumenti per WebMaster a cui vi siete iscritti.

Bhe, che c’è da dire: create contenuti a valanghe per la felicità di Google e dei vostri utenti. E ogni volta aggiornate la sitemap e notificate la modifica a Google tramite l’apposito comando.

Approfondimento Speciale

Sull’argomento Alan Curtis, vincitore del SEO Contest Pagerank Patatrak per la categoria domini già registrati, ha scritto un articolo in cui espone i risultati dei suoi test: PR Patatrak e Zanzara Mannara e la Potenza del Social Bookmarking. [da Seopoint]

Innanzi tutto bisognerebbe individuare alcuni elementi fondamentali tra cui: Appartenenza settore merceologico aziendale, gli obiettivi da raggiungere attraverso il posizionamento sui motori di ricerca e soprattutto la stesura di testi di qualità che possano giovare sia all’utente che legge (quindi fornendo la giusta soddisfazione nel trovare le risposte alle domande inconscie del navigatore). Da qui come start-up, si può capire quante siano le variabili per un corretto posizionamento sui motori ma a noi oggi interessa l’argomento legato alle parole chiave (dette keywords) quindi a quelle famosa riga di codice nascosto che possa aiutarci a centrare l’obiettivo.

Sottolineo che questo articolo non vuole essere un tutorial, ma un semplice consiglio su come selezionare ed individuare le giuste parole da associare al meta tag keywords.

Innanzi tutto stiamo parlando della seguente riga di codice da inserire dopo il tag <head> della nostra pagina:

<meta name=”keywords” content=”google,indicizzazione,motori di ricerca,realizzazione siti internet milano” />

Frasi chiave: come effettuare la scelta corretta!

La fase legata alla scelta delle parole chiave o meglio delle “frasi chiave” è a parer mio uno dei momenti più delicati. Questo punto è tanto importante quanto la stesura grafica e organizzativa dei contenuti sul Vostro sito web.
Bisogna sottolineare che la scelta dovrebbe orientarsi verso parole o frasi chiave (dette anche key phrase) un pò più articolate rispetto la consueta idea inziale, per farVi un esempio, se stiamo pubblicando un sito di un Hotel che presta la propria attività in Milano, ci rendiamo conto che spulciando tra gli indici di google o altri motori di ricerca, la frase Hotel a Milano è così utilizzata da rendere satura sia l’indicizzazione che la ricerca ottimale. Nel caso specifico le variabili sono legate oltre che hai competitors diretti anche a tutti quei portali che dominano le vette del posizionamento sui motori.

La scelta ottimale delle parole chiave

In tal caso, sarebbe più logico specificare tra le parole chiave alcuni elementi che contraddistinguono l’Hotel quindi, attraverso una semplice analisi di mercato, bisognerebbe innanzi tutto capire quali siano i punti a favore rispetto ai concorrenti.
L’esempio pratico potrebbe essere la selezione di alcuni servizi interessanti tra cui un parcheggio gratuito disponibile per i Clienti, piuttosto che un servizio di wi-fi gratuito fornito dallo stesso Hotel o tutti quei servizi che possano fornire un valido supporto al Cliente e che potrebbero giustificarne la scelta.

Pertanto le frasi/parole al quale dovremmo fare riferimento saranno: hotel a milano (è comunque consigliabile inserirlo), albergo, hotel a milano, hotel con parcheggio gratuito milano, wifi gratis, servizio internet hotel gratis etc.. etc..

Non bisogna sottovalutare l’errore più comune ciò quello di essere troppo vaghi nell’inserimento delle parole, difatti se provo ad effettuare una ricerca su Google.it, la parola “hotel a milano” restituisce una SERP di circa 69.400.000 di pagine indicizzate. Se invece adottassi la prerogativa di rispondere alle domande del potenziale Cliente e quindi inserendo parole o frasi chiave che possano dare una risposta concreta allora i giochi cambiano. In sostanza riprovando su google e scrivendo una frase più dettagliata, meno competitiva ma forse più mirata al nostro obiettivo: “hotel con parcheggio gratuito milano” a questo punto vediamo che le pagine indicizzate scendono drasticamente a 7.330.000 e quindi, da qui l’idea che si possano avere più possibilità sull’incremento nel posizionamento sui motori di ricerca.

E’ doveroso un appunto, è chiaro che non siano solo le parole o frasi chiave a risolvere il quesito, ma queste, accostate ad una stesura pulita e chiara del contenuto (laddove si evidenzieranno anche qui tutte quelle parola necessarie al posizionamento), ad una buona qualità grafica del sito con immagini esaurienti e che possano richiamare l’attenzione, senza dubbio questi ed altri elementi possono aiutarVi moltissimo.

Un sito ben indicizzato può ricevere dai motori di ricerca fino all’ 80% del totale delle proprie visite. Quindi aguzzate l’ingegno e sfruttate tutte quelle possibilità che possano giovare sia per un ottimo posizionamento sui motori (apertura di un blog organizzato e sempre aggiornato, inserimento di news reali e non sporadiche, aggiornamento costante dell’ambiente grafico, una buona campagna di Google Adv iniziale etc..) e naturalmente senza mai sottovalutarlo, sfruttate le competenze di Professionisti che si dedicano a questo quotidianamente.

Vuoi una Consulenza e ottenere un buon posizionamento per il tuo sito?

Richiedi un consulto telefonico gratuito adesso o un preventivo mirato alle Vostre esigenze!

In primo luogo, creiamo la pagina HTML. Abbiamo bisogno di includere la libreria jQuery nell’intestazione della pagina. E facciamo avvolgere ogni immagine con un div.

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Visual Preload Immagini usando jQuery</title> 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
</head>

Inserisco lo Script

Aggiungendo lo script permetto di creare lo script preloader falso e lo inserirsco sul colpo.

<!-- IMG FADE ARTWORK --> 
<script type="text/javascript"> $(function () { $('img').hide(); //elimino tutte le immagini nella pagina }); 
var i = 0;//inizializzo 
var int=0;//Internet Explorer Fix $(window).bind("load", function() 
{//L'evento load verrà generato solo se l'intera pagina o documento è completamente caricato 
var int = setInterval("doThis(i)",500);//500 questa é la velocità el fade calcolata in millisecondi }); function doThis() 
{ var imgs = $('img').length;// Qui conto il numero di immagini presenti nella pagina if (i >= imgs) {// Loop delle immagini clearInterval(int);// Quando si raggiunge l'ultima immagine del ciclo termina } $('img:hidden').eq(0).fadeIn(500);// Sfuma nelle immagini nascoste uno per uno i++;// Inserisco 1 al conteggio } </script> <!-- FINE IMG FADE --> 

Ora posso aggiungere il preloader animato. Si può generare la propria immagine di caricamento qui. Creiamo un nuovo file CSS nel nostro editor di codice preferito.

.image-holder{ float:left; width:500px; height:313px; padding:10px; margin:10px; border:1px solid #ddd; background:#eee url(loading.gif) 50% 50% no-repeat; display:inline; } 

Non dimenticare di inserire il tuo css document dentro l’header di pagina:

<link rel="stylesheet" href="preloader.css" type="text/css" />

Sommario e conclusioni

Anche se sappiamo a priori che questa non è una vera soluzione per precaricare immagini, in questo modo possiamo aggiungere un effetto davvero cool al nostro sito Web. Questo metodo precarica qualsiasi immagine da qualsiasi fonte o percorso. Il solo difetto è che non vedrete il preloader animato su immagini non avvolte nel DIV css .image-holder, ma se state cercando un tutorial o uno script che precarica le immagini in modo sequenziale e ordinato, questo script fà per voi. Questo è tutto! Spero che vi piaccia il semplice demo / tutorial. Se avete domande o suggerimenti, si possono lasciare i vostri commenti qui sotto.