Unboxing iPad
Con un giorno di anticipo, e dopo un'attesa di mesi dal giorno della presentazione ufficiale, ho tra le mani il mio iPad 32GB 3G.... è arrivato alle 14.30 mentre io ero al lavoro e solo ora ho avuto modo di metterci le mani .... lo scopo di questo post è quello di pubblicare le prime foto del nuovo prodotto Apple durante il rituale dell'unboxing...
Come avete potuto vedere dalle foto, la confezione dell'iPad è minimalista come tutti i prodotti Apple degli ultimi anni... al suo interno è presente il carica batterie con cavetto usb, un piccolo manualetto di istruzioni, i classici adesivi Apple e la "molletta" per estrarre il vano porta sim.
L'assenza più sgradita del prodotto sono le classiche cuffie bianche Apple... che a mio parere sono una grassa mancanza vista la vocazione del prodotto di accesso ai contenuti di varia natura...
La prima sensazione, dopo pochi minuti di utilizzo, è POSITIVA per via della velocità di risposta ai comandi e per la comodità di utilizzo della tastiera virtuale che, grazie ai tasti ben spaziati, consente una battitura veloce e senza grossi errori.
Per il momento mi fermo qui e vi invito a continuare a seguire questo blog perchè nei prossimi giorni sarà disponibile una recensione dettagliata del prodotto! A presto!
userAgent Script…come selezionare il foglio di stile in base al browser
Dopo qualche settimana impegnativa, eccomi nuovamente tra di voi per introdurre qualche nuovo trucco di ottimizzare dei contenuti web in base al browser di accesso ad un sito.
Vi confesso che l'articolo "Mobile SEO prime riflessioni" è stato molto apprezzato con tanto di email con domande di chiarimenti, consigli e con alcune richieste di consulenze .
I complimenti e gli apprezzamenti sono sempre graditi ma ogni volta rimango basito dal fatto che gli utenti preferiscono sempre di più discutere privatamente e non pubblicamente le loro domande…infatti, la totalità dei visitatori, di questo blog,preferisce contattarmi privatamente tramite email per pormi le loro domande invece che utilizzare i commenti pubblici… speriamo che questo trand migliori con il corso del tempo.
Ma torniamo a noi, con questo post voglio rispondere in modo pubblico alla domanda ricevuta più frequentemente in queste due settimane e che riguarda la modalità di sviluppo di uno script java per selezionare il foglio di stile adeguato al tipo di browser utilizzato dall'utente.
Lo script, che vi propongo nel seguito del post, sfrutta lo userAgent per selezionare il foglio di stile adeguato al browser utilizzato dall'utente migliorando quindi la presentazione dei contenuti accessibili nel vostro sito.
Prima di illustrare lo script cerco brevemente di illustrarvi il concetto di UserAgent.
Che cos'è lo userAgent?
Lo user Agent è una qualsiasi applicazione che utilizza il protocollo di rete; in pratica è un'applicazione installata sul computer dell'utente che si collega ad un server.
Al momento dell'invio di una richiesta http da un browser (ma anche da una qualsiasi altro software di rete) fra le varie informazioni inviate è presente anche una stringa, chiamata userAgent String, il cui prefisso è "User-Agent", che comprende informazioni relative all'applicazione richiedente la connessione ma che può anche contenere anche altri dettagli come il tipo di sistema operativo utilizzato, la lingua e anche un'indirizzo email dello sviluppatore.
La struttura di questa stringa non è mai stata standardizzata quindi le informazioni da ricercare per distinguere i diversi browser si trovano sparse all'interno della stringa stessa.
Le informazioni contenute sono le seguenti:
"User-Agent" ":" 1* (product | Comment)
Product = dovrebbe indicare il nome (uso il condizionale perchè come vedremo nel seguito non tutti i browser inseriscono le loro informazioni in posizione)
Comment = contiene commenti di varia natura tipo informazioni sullo sviluppatore, versioni varie ecc.
Per Esempio:
Mozilla/4.04 (Win95; I)
Mozilla rappresenta il prodotto , 4.04 rappresenta la versione mentre tutto il contenuto tra parantesi tonde rappresenta il commento.
In teoria questa dovrebbe essere la struttura standard della stringa userAgent… ma nella realtà non è così in quanto, nel corso degli anni, i produttori di browser hanno sparso le informazioni in posizioni diverse nella stringa. Infatti, come possiamo vedere nel seguito, la stringa relativa ad internet explorer è diversa dalla precedente:
Mozilla/4.0 (compatibile, MSIE 8.0, Windows vista)
In questo caso Microsoft ha adottato la strategia di inserire il nome del browser e la relativa versione all'interno dei commenti... allo stesso modo anche Chrome e Safari hanno scelto di disporre le informazioni in posizioni diverse dai precedenti esempi.
Safari= Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_7; en-us) AppleWebKit/533.4 (KHTML, like Gecko) Version/4.1 Safari/533.4
Chrome = Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.9 (KHTML, like Gecko) Chrome/6.0.400.0 Safari/533.9
Potete visualizzare una lista completa delle stringhe userAgent inviate dai diversi Browser cliccando qui!
Javascript per l'identificazione del Browser mediante UserAgent
Quello riportato nel seguito è un esempio di javascritp per identificare il tipo di browser e selezionare il foglio corrispondente in base alla stringa userAgent vista in precedenza.
Lo script che ho realizzato è una versione base e va integrato in base alle vostre esigenze.
Vi ricordo che gli script, all'interno di una pagina internet, vanno riportati tra il tag <head> di apertura e il tag </head> di chiusura
<SCRIPT language="Javascript1.2">
<!--
var chrome = (/Chrome/.test(navigator.userAgent))?1:0;
var safari = (/safari/.test(navigator.userAgent))?1:0;
var firefox = (/firefox/.test(navigator.userAgent))?1:0;
var ie=(/MSIE (\d+\.\d+);/.test(navigator.userAgent))?1:0;
if (chrome || (chrome && safari)){
document.write("<LINK rel=stylesheet href='chrome.css' type='text/css'");
}
if (ie){
var str = navigator.userAgent;
var index = str.search(/MSIE/);
var vers = str.substring(index+5,index+6);
if (vers == 8 )
document.write("<LINK rel=stylesheet href='ie8.css' type='text/css'");
}
if (vers == 7)
document.write("<LINK rel=stylesheet href='ie7.css' type='text/css'");
}
if(safari){
document.write("<LINK rel=stylesheet href='safari.css' type='text/css'");
}
if(firefox){
document.write("<LINK rel=stylesheet href='mozilla.css' type='text/css'");
}
//-->
</SCRIPT>
Le quattro variabili (chrome, safari, firefox, IE) verificano la presenza delle rispettive espressioni regolari (/Chrome/, /Safari/, /firefox/, /MSIE/) all'interno della stringa userAgent ottenuta mediante la funzione navigato.userAgent. Se la stringa userAgent contiene una o più delle espressioni regolari indicate in precedenza le rispettive variabili assumono il valore 1 altrimenti vengono poste a zero.Subito dopo le variabili sono presenti una serie di if in cascata per verificare quale delle variabili precendenti è stata settanta ad uno… quando la condizione è verificata verrà selezionato il foglio di stile corrispondente.I primi due if sono più interessanti in quanto nel primo caso (chrome || (chrome && safari)),per caricare il foglio di stile dedicato al browser di Google,è necessario verificare la presenza, nella stringa userAgent, della parola Chrome oppure la coppia Chrome e Safari in quanto gli ingegneri di Google hanno pensato di usare stringe diverse per versioni diverse dei Chrome invece di distinguerli solamente per la versione… Per esempio
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.2 (KHTML, like Gecko) Chrome/6.0
nel secondo caso è presente sia il termine chiome che safari
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.9 (KHTML, like Gecko) Chrome/6.0.400.0 Safari/533.9
Il secondo caso di interesse è relativo ad internet explorer in quanto il nome e la versione del browser sono presenti nei commenti della stringa userAgent. Per internet explorer, vista la sua capacità di non seguire gli standard HTML, è di fondamentale importanza creare fogli di stile diversi in base alla versione del browser. Per fare ciò sono state necessarie una serie di istruzioni aggiuntive che iniziano con l'istruzione var str = navigator.userAgent necessaria per ricavare la stringa userAgent, seguita dall'istruzione per ricavare l'indice della posizione del primo carattere dell'espressione regolare MSIE all'interno della stringa userAgent. Una volta individuato l'indice si estrae la sottostringa che identifica la versione del browser e a questo punto si distinguono i fogli di stile di internet Explorer in base alla versione.
Come avete potuto vedere il codice è molto semplice e permette di inviare all'utente il foglio di stile adeguato al browser che sta utilizzando… con la stessa metodologia e sfruttando la lista di userAgent raggiungibile da qui, potete caricare i fogli di stile adeguati al dispositivo mobile che richiede il vostro sito...
Piaciuto il consiglio?Ovviamente potete sviluppare anche altri metodi per ricavare il tipo di browser dalla userAgent String ma qui lascio a voi il piacere di sviluppare in base alle vostre esigenze.… voi solitamente che tipo di scelte effettuate in base allo sviluppo di una pagina internet a livello di compatibilità e visualizzazione per un sito internet?
Mobile SEO prime riflessioni
Dopo otto mesi di post è giunto il momento di fermarsi un attimo a riflettere sui dati statistici raccolti in questo primo periodo di attività. Da una prima analisi, è emerso un dato interessante che riguarda l'aumento dei visitatori che utilizzano dispositivi mobili per accedere ai contenuti del blog. Questo risultato conferma, nel mio piccolo, la tendenza generale del cambiamento delle abitudini degli utenti, i quali accedono sempre più ai contenuti del web in mobilità tramite i loro smartphone ( iPhone, Android ecc).
Lo scopo di questo post è quello di condividere con voi alcune informazioni che ho raccolto in questi giorni in merito al Mobile SEO. Come ben sapete i motori di ricerca cercano di premiare i siti i cui contenuti e "forme" sono sviluppate pensando agli utenti quindi, un buon inizio, per una corretta fruizione dei contenuti di un sito, tramite dispositivi mobili, è applicare le regole basilari del mobile SEO che cercherò di riassumere nel seguito dell'articolo.
Mobile SEO: che cosa bisogna Sapere
Forse per molti la cosa sembrerà strana ma i motori di ricerca mobili usano Crawler e Algoritmi diversi dai tradizionali motori di ricerca in quanto le esigenze sono diverse. In primo luogo, i crawler e algoritmi per dispositivi mobili valutano il modo in cui il sito viene renderizzato dai browser mobili e per la catalogazione e il ranking di questi siti ricorrono ad approcci classici quali l'utilizzo di keywords, tag che rappresentano metodologie adottate dai motori di ricerca classici agli inizi dell'era internet.
Le nozioni in questo ambito sono sempre in crescita e cambiano rapidamente ma cercherò di riassumere, in modo semplice, i punti fondamentali per iniziare con il piede giusto le prime attività di mobile SEO sul vostro sito. Passiamo alla prima delle due soluzioni:
1° Soluzione
L'approccio che richiede un minore sforzo lavorativo è quello di creare un secondo foglio di stile chiamato "handheld.css" con il quale ottimizzare le pagine esistenti per ottenere una corretta renderizzazione sui vari smartphone evitando quindi di creare una sezione mobile per i contenuti del sito. L'utilizzo del foglio di stile handheld.css è molto importante in quanto è riconosciuto dalla maggior parte dei dispositivi mobili di utlima generazione tranne che per l'iPhone, il quale richiede l'utilizzo di un foglio di stile apposito chiamato "iPhone.css".
I vantaggi principali di questa soluzione sono due:
- si evita il rischio di essere penalizzati per la presenza di contenuti duplicati
- il valore del sito tradizionale (inteso come punteggio di ranking) viene trasferito nei motori di ricerca mobili.
Google Chrome … sempre piu’ veloce!
Qualche giorno fa Google ha rilasciato una nuova versione beta del Browser Chrome la cui vera novità è un ulteriore aumento nelle performance di caricamento delle pagine web.
Per dimostrare le fantastiche performance di Chrome, a Mountain View,hanno pensato di eseguire dei test di velocità originali e fuori dagli schemi ... per capire di cosa parlo guardate il video seguente:
Come avete potuto vedere la velocità di caricamento di un sito web è stato confrontato con :
- lo sparo di una patata
- le onde sonore
- fulmini
Per chi volesse vedere il backstage dei test può guardare il seguente video:
Potete scaricare da qui Chrome per i vari sistemi operativi:
- Mac
- Linux
- Windows
Originali vero?
