- La guida ai Social Media
Subscribe | Log in

Design & Dev

Google Chrome 4.0

Google ha elevato Chrome 4.0.2xx dallo stato di beta a quello di software stabile, servendo così al grande pubblico pietanze a lungo attese come il supporto alle estensioni e la sincronizzazione online dei segnalibri.

La caratteristica senza dubbio più importante di Chrome 4.0 è il sistema delle estensioni, una tecnologia che dopo quasi un anno di test ha finalmente fatto il suo debutto pubblico, accompagnata da una galleria di oltre 1500 add-on: una quantità non comparabile a quella oggi disponibile per Firefox, ma Google prevede che da qui in avanti il numero di add-on per Chrome crescerà a ritmi molto sostenuti.

Tra le estensioni più popolari il sito di BigG elenca Google Calendar e Google Mail Checker, Evernote Web Clipper, IE Tab, AdBlock, Docs PDF/PowerPoint Viewer e Cooliris. Non sorprende che molti degli add-on attualmente disponibili per Chrome si limitino ad “agganciare” al browser servizi forniti dalla stessa società di Mountain View.
C’è chi afferma che le estensioni sono l’elemento che rende finalmente Chrome un diretto rivale di Firefox, e che più d’ogni altro potrebbe convincere certi utenti di Mozilla a migrare verso il più giovane browser. Ma la maggior parte degli osservatori è concorde nel dire che, almeno nel medio periodo, la stragrande maggioranza degli utenti di Firefox resterà fedele al proprio browser: se è vero che Chrome è mediamente più veloce di Firefox, soprattutto nell’esecuzione di codice JavaScript, è altrettanto vero che quest’ultimo vanta una maturità maggiore, uno sconfinato bacino di estensioni e un grande calderone di idee e progetti come Mozilla Labs.

Come molti dei componenti di Chrome, anche le estensioni girano in un processo indipendente, con tutti i benefici che la cosa porta con sé in termini di stabilità (se un’estensione va in crash non si porta dietro il browser), di sicurezza (se il sistema delle estensioni viene compromesso, per un cracker sarà più difficile prendere il controllo dell’intero browser) e di ottimizzazione delle risorse (la memoria RAM può essere gestita in modo più dinamico ed efficiente).

Va sottolineato che, al contrario di quanto avviene in Firefox, le estensioni di Chrome possono essere installate senza la necessità di riavviare il browser. Similmente al software di Mozilla, le estensioni possono essere configurate, disinstallate o disattivate dal menù Strumenti -> Estensioni.

Google ha attivato il supporto alle estensioni anche nelle più recenti beta di Chrome per Linux, e afferma che questa funzionalità sarà presto disponibile nelle versioni per Mac OS X.

L’altra novità più rilevante di Google 4.0 è data dalla funzione di sincronizzazione dei bookmark via Internet, che permette di avere gli stessi segnalibri su tutti i PC in cui si utilizza Chrome: la sincronizzazione dei bookmark, dice Google, avviene quasi in tempo reale. Questa funzione è simile a quella offerta da Mozilla attraverso l’estensione Weave, con la differenza che quest’ultima è in grado di sincronizzare molti altri elementi, quali la cronologia, le tab aperte, le password e le impostazioni del browser.

Per gli sviluppatori le novità di Chrome 4.0 sono principalmente rappresentate dall’aggiunta di alcune nuove API HTML5, incluse LocalStorage, Web SQL Database e WebSockets.

Nel Google Chrome Blog si cita inoltre un incremento di performance del 42% rispetto all’ultima release stabile (la 3.0) e del 400% rispetto alla versione 1.0.

L’ultima versione stabile di Google Chrome, la 4.0.249.78, può essere scaricata da qui in italiano. Chi già dispone di una precedente versione del browser deve solo attendere che questo si aggiorni automaticamente.


In arrivo Fennec

mozilla_fennecDopo Firefox la Volpe di fuoco, sta per arrivare il momento di quella notturna. Ecco che arriva Fennec, il browser sviluppato da Mozilla per i telefoni cellulari. Secondo la Bbc, nell’intervitsa al capo progetto Jay Sullivan, il software per navigare “mobile” – rigorosamente open source, come da tradizione – dovrebbe essere scaricabile entro pochi giorni, probabilmente prima della fine dell’anno. Inizialmente la realease sarà per il solo Nokia N900, il telefono finlandese equipaggiato con il sistema operativo Linux Maemo 5.  Poi pian piano arriverà anche per altri dispositivi, essendo in sviluppo anche per Windows Mobile e Android. Non per iPhone, dato che come spiega Sullivan stesso, “quella di Apple è una piattaforma molto chiusa e dunque non crediamo” di poter sviluppare il nostro browser per il Melafonino “molto presto”.

Fennec, con le dovute proporzioni e differenze, si propone come un browser modulare e agile così come ci ha abituato Firefox. Che, secondo una ricerca di Stats Counter citata sempre dalla Bbc, avrebbe formalmente sorpassato il rivale Internet Explorer 7, con il 21,93% di installato contro il 21,2. Dunque la Volpe notturna permetterà la navigazione attraverso l’apertura di nuove schede e sarà il primo browser per cellulari a cui si potranno aggiungere gli add-on tipici del software di Mozilla, che – adattati alla versione mobile – andranno dal lettore di news ai giochi online. Caratteristica fondamentale di Fennec, che entrerà così nei prossimi giorni in competizione con Opera, Safari e il browser di Nokia (rispettivamente, primo, secondo e terzo software più utilizzati da chi naviga con il telefonino), sarà la capacità di sincronizzarsi perfettamente con il Firefox che abbiamo installato sul nostro pc o laptop.


Ruotare, scalare, ombre su testi grazie ai css3

css3-borderimageL’evoluzione dei browser Web permette ad oggi, l’utilizzo di codice css sempre piu’ avanzato, rendendo possibile la creazione di pagine web piu’ accattivanti, veloci e funzionali.
Ci stiamo avvicinando sempre piu’ anche se molto lentamente e con non poche difficoltà, a causa di logiche commerciali spesso a mio modo di vedere “miopi”, verso standard web universali per tutte le piattaforme di computer.
Finalmente possiamo perdere meno tempo nello sviluppo di pagine web ed essere sicuri che il nostro “box sulla destra del sito” su IE verrà visualizzato correttamente;  possiamo anche pensare alla creazione di pagine web complesse senza utilizzare hack e pesanti script di front-end per standardizzare la visulizzazione e le funzionalità dei siti web.
Ad oggi grazie ai CSS 3, sempre piu’ supportati siamo in grado di avere gli “angoli arrotondati” senza utilizzare immagini di sfondo. Se vogliamo avere più immagini di sfondo in un box utilizzando un solo ID, possiamo farlo. Siamo arrivati all’epoca del web dove “il desiderio non è piu’ un problema”.

Le proprietà dei CSS 3 come border-radius, box-shadow, e text-shadow stanno cominciando ad essere supportate  in browser con motore di rendering WebKit (Safari, Chrome, ecc)  e Gecko (Firefox) . L’utilizzo di tali proprietà fanno si che sul web abbiamo sempre piu’ pagine leggere, con una user-expirience sempre maggiore e stilisticamente molto gradevoli.

Queste proprità sono solo la punta dell’ iceberg di ciò che possiamo realizzare con i CSS 3.
In questo articolo, prenderemo in considerazione le proprietà piu’ evolute dei css3  esplorando le trasformazioni, le transizioni e animazioni.

CSS Transformations

CSS Transformations  sono una bizzarria del W3C. La prima volta che ho letto le specifiche rimasi un po’ allibito.  Le specifiche sono scritte con  gergo tecnico assai ostico, improntato ad aspetti sopratutto grafici,  gergo da disegno grafico.
Dopo aver letto vari tutorial ed effetuato test su svariati browser, sono riuscito ad arrivare a buoni risultati visuali, ottenendo informazioni che credo possano essere utili.

transform ();
La proprietà transform consente funzioni simili a quelle di  SVG.  Tale proprietà può essere applicatà sia ad elementi inline-level che a elementi block-level. Possiamo ruotare, ingrandire e spostare gli elementi, tutti con una sola riga di CSS.

L’utilizo della proprità permette la creazione ad esempio un testo obliquo che non sia grafico.
Di seguito alcune interessanti e utili funzioni di trasformazione supportate:

  • rotate

Consente di trasformare un oggetto che passa da una visualizzazione lineare,  ruotato attraverso la funzione specifica.

  • scale

Scale è una funzione di zoom e può rendere qualsiasi elemento più grande.  Supporta valori  positivi e negativi, nonché i valori decimali.

  • translate

Traduce essenzialmente il riposizionamento di un elemento basato su coordinate X e Y.
Diamo un’occhiata a ciascuna di queste proprietà in modo più dettagliato.

Rotate

rotate



Fate attenzione, in IE 8 (quando non è in modalità standard)  è richiesto il filtro  “-ms-filter” invece di “-filter” nel CSS.
#nav {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

L’unico problema è che la rotazione è  un elemento molto importante di design, e molti designer  saranno restii ad utilizzarlo, se Internet Explorer non fosse in grado di utilizzarlo.

Per utilizzare tale propietà anche co IE, va utilizzato un filtro per fa fronte al supporto della proprità.  Essa può assumere quattro valori di rotazione: 0, 1, 2 e 3. Non sarà possibile ottenere lo stesso controllo capillare che viene fornito con Webkit e Gecko, ma il vostro design  rimarrà coerente tra i vari browser (anche IE6).

Scale

scale



#nav {
/* The nav element width and height will double in size */
-webkit-transform: scale(2);
-moz-transform: scale(2);
}

#nav {
/* The nav element width will double in size, but the height will remain unchanged*/
-webkit-transform: scale(2, 1);
-moz-transform: scale(2, 1);
}

#nav {
/* The nav element width will double in size and flip horizontally,
but the height will remain unchanged */
-webkit-transform: scale(-2, 1);
-moz-transform: scale(-2, 1);

La proprietà scale è supportata in Firefox, Safari and Chrome,  ma purtroppo almeno per adesso nessuna versione di IE la supporta.

Translate

Il nome della proprietà  è un po ‘ fuorviante. In realtà è un metodo per posizionare gli elementi mediante valori X e Y.
Sembra molto simile a gli  altri tipi di trasformazione, ma aggiunge una dimensione supplementare al vostro design.

translate


#nav{
/* This will move the #nav element left 10 pixels and down 20 pixels. */
-moz-transform: translate(10px, 20px);
-webkit-transform: translate(10px, 20px);

Translate è attualmente supportato in Firefox, Safari and Chrome con l’utilizzo di  -moz- and -webkit-.

Le proprietà sopra descritte ci permettono di ottenere grandi risultati usate singolarmente,  ma se le utilizziamo mixandole fra loro otteniamo pagine web veramente grandiose. Una volta che queste sarranno ancora piu’ supportate, saremo in grado di costruire pagine web leggerissime funzionali e d’aspetto tutto simile a vere e proprie applicazioni software.  Nel video che segue un esempio di cio’ che sarà possibile realizzare con i css in un futuro molto prossimo; da notare che per la realizzazione del design rappresentato nel video dimostrativo, sono state utilizzate altre due prorpietà CSS3, Transition e Animation, sulle quali per adesso pero’ non vale la pena soffermarsi troppo visto che il loro supporto e ancora minimo.

Enjoy.

References And Resources


WordPress, Joomla, Movable type o Drupal ?

cmsWordPress, Joomla, Movable type o Drupal? Personalmente li ho provati tutti e 4, continuo un po’ per diletto un po’ per sollazzo ad utilizzarli anche in ambito professionale.
Se avete bisogno in tempi non biblici di realizzare un blog, una community, un sito di e-commerce forse le recensioni che ho scritto di seguito possono aiutarvi.
Enjoy

Sei anni fa’ nasceva WordPress,  ad oggi rimane la piu’ popolare e forse la migliore piattaforma per creare blog; è stata anche la prima piattaforma del suo genere
a divenire un CMS completo utilizzato anche al di della blogosfera.
Ottima l’interfaccia di amministrazione, semplice e funzionale.  Altro pregio la disponibilità di migliaia di temi e plugin oltre alla ricca documentazione online.
Dalla versione 2.7 è possibile installare temi e plugin direttamente dall’interfaccia di admin a sua volta personalizzabile per poter utilizzare solo le funzionalità che ci servono.
Grazie alle sue carateristiche diventa molto semplice creare, anche per i meno esperti, un blog con tutte le funzionalità di base e un tema personalizzato in poco piu’ di un’ora. Basta selezionare
le funzionalità da installare, e trascinare i widget nella posizione desiderata. Riamangono piuttosto spartane le possibilità (sopratutto per i Developer piu’ smaliziati) di modifica del tema dall’interno dell’interfaccia
di amministrazione. Si possono modificare l’HTML dei vari includ che compongono la struttura delle pagine (header, footer, navbar, ecc). Per chi sviluppa CSS ha piu’ facilità di controllo
sull’aspetto delle pagine. Resta complicato e non per i neofiti dello sviluppo web, la modifica delll’architettura dell’informaione; agganciarsi ad un database esterno non è cosi’ semplice e immediato.
Anche se i post possono avere dei campi personalizzati, WordPress è e rimane un CMS basato sul concetto di post in ordine cronologico,  modificare tale concetto risulta non semplice.

Joomla, variante del popolarissimo CMS Mambo, si contraddistingue per la sua struttura modulare. CMS anche questo Opensource che è possibile rimaneggiare a proprio piacimento.
Esistono tre tipi di estenzioni, che un tempo venivano chiamate Mambot oggi Plugin; ci sono poi i Componenti grazie ai quali è possibile espandere le funzionalità del CMS. I moduli, che svolgono funzioni basilari, e facilitano l’inserimento di codice personalizzato. La comunità di svilupatori che lo supportano è molto grande e dinamica, Joomla è uno dei CMS meglio supportati online. Joomla è particolarmente
adatto alla creazione di Community, grazie ad alcune funzioni che permettono l’interazione fra forum, utenti, messaggi ecc. Aspetti negativi sono le pagine che variano molto a livello d’aspetto fra i vari template, e la difficoltà per i non esperti a standardizzarle. Altri aspetti negativi sono il markup delle pagine non prorio limpido e pulito, tabelle molto presenti e l’ottimizzazione delle risorse del server lascia molto a desiderare. Siti con molto traffico potrebbero avere problemi. Caratteristiche negative ma comunque affrontabili tranquillamente per un Webdeveloper professionista.

Movable type la prima delle tre applicazione di blogging creata da Six Apart è nata nel 2001; un anno dopo è la prima piattaforma a introdurre i trackback, permettendo cosi’ la notifica delle citazioni e dei link da parte
di altri siti. Eccelente la possibiità che il cms offre riguardo la gestione e la pubblicazione dinamica o statica; eccelente la pagina che indica i post che portano piu’ feedback, e ottima la funzione antispam.
Nell’ultima versione del CMS la novità piu’ interessante è la possibilità di modifica degli asset, cio’ rende quindi piu’ semplice cambiare le caratteristiche di file audio, video o immagine. E’ inoltre possibile pubblicare illimitati blog su piu’ server, grazie ai moduli Globally Shared Template. Purtroppo le restrizioni in termini di licenza dell’ultima versione rispetto alla precedente, ha reso di fatto inutilizzabili molti dei vecchi e popolari plugin.

Drupal nato nel 2001 come strumento forum, si è evoluto esponenzialmente in un CMS opensource  molto completo, versatile e altamente scalabile. Necessita almeno inizialmente di notevole lavoro per l’implementazione basilare, rimane comunque perfetto per la creazione di siti, dalle community al semplice blog; cio’ è permesso dal controllo granulare sui privilegi di acesso che è possibile ottenere senza moduli aggiuntivi rispetto l’installazione di base. Contentui che non siano le pagine e le storie,  contenuti di default, richiedono una customizzazione da parte dello sviluppatore non prorio semplice. Probabilmente Drupal puo’ essere definito piu’ che un CMS un Framework vero e proprio. Rimane il fatto comunque che la disponibilità di moduli e template aggiuntivi gratis, e la vasta comunità di sviluppatori, permettono la creazione con Drupal di qualsiasi tipo di sito. Molto valida la possibilità di staticizzazione del sito e il bilanciamento del carico su piu’ server, cio’ rende possibile la gestione di siti ad alto traffico.


You-Centric: Il Futuro della navigazione web

Nela conferenza tentua al “The Future of Web Apps” di LondraAza Raskin parla del futuro del browser. I punti salienti del suo intervento sono riassunti di seguito, estrapolati dal video in lingua inglese.

1. YOU-browsing Centric
2. Come il browser gestirà la vostra identità
3. Browser con elaborazione del linguaggio naturale
4. Built-in i pagamenti on-line attraverso il browser


Scrivi per il web: i 10 punti da seguire

scrittura-per-web
Scrivere per il Web è una sfida, parole abbreviate e neologismi cavalcanti, utenti che leggono scansionando parole di una frase piuttosto che leggerla per intero, guide di stile a cui aderire.
Su come si scriva per il web, ne è appunto pieno il web; di seguito ho stilato una piccola guida in 10 punti che sono stati molto utili per me:

1. Conosci i tui lettori
Conoscere personalmente uno per uno i lettori del proprio blog potrebbe essere utile, ed anche fisicamente possibile, se si scrive per un blog sfigato, da tre quattro accessi al giorno;  scherzi a parte, tale considerazione puo’ sembrare ovvia, e spesso è data per scontata.  Per scrivere articoli o post pertinenti che creino interesse nel lettore e voglia di tornare a leggerne di altri sul blog,  è fondamentale capire ed analizzare a quale tipo di pubblico ci stiamo rivolgendo. Basta partire dalle piccole cose, senza dover scomodare i grandi (nel senso grassi e obsoleti personaggi tipo UMBERTO ECO) della lingua, usate espressioni locali se scrivete per un pubblico locale;  ” De’ ” se l’area è quella livornese, “Sti Cazzi” per Roma e dintorni, e cosi’ via.  Se la scrittura è rivolta a un pubblico piu’ vasto, sii specifico, ad esempio parli di dollari, esterna se si tratta di dollari USA, o di dollari Australiani. Stai scrivendo della California specifica se si parla delle California in USA o La California a sud di Livorno.

2.  Capire perché si scrive
Capire perchè si sta scrivendo è sicuraente un punto legato a quello precedente sopra esposto. Vuoi che qualcuno si iscriva al tuo blog, vuoi vendere magliette online, stai cercando di far capire ai lettori e sopratutto alle lettrici che sei il piu’ figo del Web, vuoi risultare simpatico al mondo Nerd?
Fornire informazioni ai lettori o ottenere la loro adesione a qualcosa?
La tua risposta a queste domande dovrebbe determinare ciò che vuoi scrivere.

3.  Prima pagina
Un Titolo in home page chiaro e accativante è fondamentale per creare  l’interesse nel proseguire a leggere il resto dell’articolo.  I titoli non dovrebbero essere più lunghi di 7 parole e scritti al presente.

4.  Maiuscole
Evitare l’uso massivo di maiuscole nei vostri articoli, si impiega il 57% di tempo in più  per leggere. Evitare di iniziare nelle intestazioni ogni parola con la lettera maiuscola.

5.  Scegliere le parole giuste
Certe parole possono attrarre l’attenzione del lettore, con altre si  abbassa l’interesse alla lettura. Parole che permettano al lettore di viaggiare con l’immaginazione il pensiero, pensare al progresso, e l’ambizione. Parole meno “popolari” portano a pensare alla controversia, al fallimento, alla debolezza.
Utilizzare le contrazioni. Cio’ rende meno formale e più colloquiale l’articlo, stile che è richiesto sul web.

6.  Acronimi
Evitare l’utilizzo di questi, se possibile.  Sarebbe imprudente pensare che tutti coloro che visitano il tuo sito sono in grado di capirne il significato. Tuttavia, questo è legato alla conoscenza del proprio pubblico. La stessa regola si applica al gergo, evitare e nel caso tagliare complessità vebali e artifizi di scrittura fini a se stessi.

7.  Punteggiatura
Ridurre al minimo nel miglior modo possibile la punteggiatura.  Cio’ può essere difficile in particolare per i punti e virgola, quindi usare frasi più brevi.

8. Collegamenti ipertestuali efficaci
Le parole utilizzate per i link dovrebbero essere pertinenti e motivare l’utente nella realizzazione di un’azione. ‘Clicca qui‘, non è il massimo ma è sicuramente efficace,  e lo è ancor di più se utilizzato insieme ad informazioni contestuali, ad esempio ‘fare clic qui per richiedere un prestito‘. In questo modo l’utente sa esattamente dove sarà indirizzato.

9. La lunghezza giusta
Frasi brevi. Se sono troppo lunghe l’interesse del lettore calerà e il tuo messaggio risulterà confuso. Una regola empirica dice che le frasi dovrebbero essere tra le 15 e le 20 parole. Non contate tutte le frasi di questo articolo, credo di aver infranto la regola!
Buona cosa è che non ci dovrebbero essere più di tre frasi per paragrafo.
Utilizza le sottosezioni, rubriche ed elenchi. Se si usano liste, non cercare di avere più di 6 punti in ciascuna di esse.

10. Prova leggere
Altro punto ovvio, del resto una delle prime cose che ci vengono insegnate alle scuole elementari, ma non sempre tale consiglio viene seguito. Rileggere l’articolo e fare correzioni per evitare errori grossolani. Se un utente è molto attento a quello che legge, se trova nel testo errori di vario genere sarà immediatamente propenso ad interrompere la lettura del vostro articolo e abbandonerà il sito.

Questi sono alcuni dei miei consigli preferiti. Se ne hai di tuoi condividili utilizzando i commenti qui sotto.
Enjoy