Css on Nicola Iarocci https://nicolaiarocci.com/tags/css/ Recent content in Css on Nicola Iarocci Hugo -- 0.143.1 en Produced / Written / Maintained by Nicola Iarocci since 2010 Sat, 04 Jan 2014 00:00:00 +0000 Web Standards Killed the HTML Star https://nicolaiarocci.com/web-standards-killed-the-html-star/ Sat, 04 Jan 2014 00:00:00 +0000 https://nicolaiarocci.com/web-standards-killed-the-html-star/ <blockquote> <p>What we may not have realized is that once the browsers don’t suck, being an HTML and CSS “guru” isn’t really a very marketable skillset. 80% of what made us useful was the way we knew all the quirks and intracries of the browsers. Guess what? Those are all gone. And if they’re not, they will be in the very near future. Then what?</p> <p>A lot of folks who came up from that time and headspace have diversified their skillsets since. Many are now programmers, or project managers, or creative directors, or business owners. But a lot of others are still making a go of it as an HTML and CSS guru, often in a comfortable job they’ve had for years. What happens when that gig comes to an end?</p>

What we may not have realized is that once the browsers don’t suck, being an HTML and CSS “guru” isn’t really a very marketable skillset. 80% of what made us useful was the way we knew all the quirks and intracries of the browsers. Guess what? Those are all gone. And if they’re not, they will be in the very near future. Then what?

A lot of folks who came up from that time and headspace have diversified their skillsets since. Many are now programmers, or project managers, or creative directors, or business owners. But a lot of others are still making a go of it as an HTML and CSS guru, often in a comfortable job they’ve had for years. What happens when that gig comes to an end?

via Web Standards Killed the HTML Star – JeffCroft.com.

]]> Come usare al meglio WebKit Inspector https://nicolaiarocci.com/come-usare-al-meglio-webkit-inspector/ Fri, 15 Jun 2012 00:00:00 +0000 https://nicolaiarocci.com/come-usare-al-meglio-webkit-inspector/ <p>Se vi occupate di frontend non perdetevi lo spettacolare articolo in cui Majd Taby ci spiega <!-- raw HTML omitted -->come usare al meglio il WebKit Inspector<!-- raw HTML omitted -->.</p> <blockquote> <p>Il panorama mobile è monopolizzato da WebKit e di conseguenza gran parte degli strumenti e dell’infrastruttura per lo sviluppo di applicazioni frontend mobile (e non solo, ndr) risiedono nel WebKit Inspector. Per questo ne analizzerò con cura gli strumenti e spiegherò come e quando usarli.</p> Se vi occupate di frontend non perdetevi lo spettacolare articolo in cui Majd Taby ci spiega come usare al meglio il WebKit Inspector.

Il panorama mobile è monopolizzato da WebKit e di conseguenza gran parte degli strumenti e dell’infrastruttura per lo sviluppo di applicazioni frontend mobile (e non solo, ndr) risiedono nel WebKit Inspector. Per questo ne analizzerò con cura gli strumenti e spiegherò come e quando usarli.

Ci sono anche le slide.

]]> Imparare HTML e CSS Online con Codecademy https://nicolaiarocci.com/imparare-html-e-css-online-con-codecademy/ Tue, 03 Apr 2012 00:00:00 +0000 https://nicolaiarocci.com/imparare-html-e-css-online-con-codecademy/ <p>Codecademy propone da ieri un corso gratuito e interattivo su <!-- raw HTML omitted -->HTML e CSS<!-- raw HTML omitted -->. Il corso, per principianti, si affianca a quello ormai collaudato (e recentemente ampliato) su JavaScript.</p> <!-- raw HTML omitted --> <!-- raw HTML omitted --> <p>Il meccanismo è quello della <em>gamification</em>, con tanto di punteggi e badge da conquistare man mano che si raggiungono obiettivi prefissati . Presto dovrebbe uscire anche un corso su Python.</p> Codecademy propone da ieri un corso gratuito e interattivo su HTML e CSS. Il corso, per principianti, si affianca a quello ormai collaudato (e recentemente ampliato) su JavaScript.

Il meccanismo è quello della gamification, con tanto di punteggi e badge da conquistare man mano che si raggiungono obiettivi prefissati . Presto dovrebbe uscire anche un corso su Python.

Compi i tuoi primi passi con HTML e CSS. Non è necessaria alcuna esperienza precedente — cominceremo dalle basi e in poco tempo ti ritroverai a lavorare alla tua homepage personale!

]]> Evidenziare il codice sorgente via JavaScript e CSS con Rainbow https://nicolaiarocci.com/evidenziare-il-codice-sorgente-via-javascript-e-css-con-rainbow/ Mon, 02 Apr 2012 00:00:00 +0000 https://nicolaiarocci.com/evidenziare-il-codice-sorgente-via-javascript-e-css-con-rainbow/ <blockquote> <p><!-- raw HTML omitted -->Rainbow<!-- raw HTML omitted --> è una libreria per l’evidenziazione del codice scritta in Javascript. E’ leggera (1.4kb), facile da usare, estensibile e completamente configurabile via CSS.</p></blockquote>

Rainbow è una libreria per l’evidenziazione del codice scritta in Javascript. E’ leggera (1.4kb), facile da usare, estensibile e completamente configurabile via CSS.

]]> Print.css è il foglio di stile per il web designer attento all’ambiente https://nicolaiarocci.com/print-css-e-il-foglio-di-stile-per-il-web-designer-attento-allambiente/ Mon, 05 Sep 2011 00:00:00 +0000 https://nicolaiarocci.com/print-css-e-il-foglio-di-stile-per-il-web-designer-attento-allambiente/ <p>Carta e inchiostro costano eppure ci sono (ancora) molte ragioni per mandare in stampa una pagina web. David Bushell ha creato <a href="http://printstylesheet.com/" title="Print.css">Print.css</a>, un mini sito che incoraggia i web designer alla creazione di fogli di stile eco-compatibili che inviino alla stampante solo il necessario. In effetti la direttiva CSS <code>@media</code> permette di farlo con facilità.</p> <!-- raw HTML omitted --> <!-- raw HTML omitted --> Carta e inchiostro costano eppure ci sono (ancora) molte ragioni per mandare in stampa una pagina web. David Bushell ha creato Print.css, un mini sito che incoraggia i web designer alla creazione di fogli di stile eco-compatibili che inviino alla stampante solo il necessario. In effetti la direttiva CSS @media permette di farlo con facilità.

]]> HTML e CSS di base per i Web Designer del futuro https://nicolaiarocci.com/html-e-css-di-base-per-i-web-designer-del-futuro/ Tue, 23 Aug 2011 00:00:00 +0000 https://nicolaiarocci.com/html-e-css-di-base-per-i-web-designer-del-futuro/ <p><!-- raw HTML omitted -->Don’t Fear the Internet<!-- raw HTML omitted --> è una ottima risorsa per Web Designer principianti. Attenzione ai dettagli, grande cura e ottimi contenuti sono il marchio distintivo di questo progetto di <!-- raw HTML omitted -->Jessica Hische<!-- raw HTML omitted --> e <!-- raw HTML omitted -->Russ Maschmeyer<!-- raw HTML omitted -->:</p> <blockquote> <p>Sei un disegnatore, un fotografo, un artista o, più in generale, un creativo? Hai un sito che mai messo insieme con Dreamweaver grazie a quell’UNICA lezione scolastica di web design? Il sito non ce l’hai nemmeno, perché sono due anni che aspetti che tuo cugino lo faccia per te? Bè, noi siamo qui per aiutarti.</p> Don’t Fear the Internet è una ottima risorsa per Web Designer principianti. Attenzione ai dettagli, grande cura e ottimi contenuti sono il marchio distintivo di questo progetto di Jessica Hische e Russ Maschmeyer:

Sei un disegnatore, un fotografo, un artista o, più in generale, un creativo? Hai un sito che mai messo insieme con Dreamweaver grazie a quell’UNICA lezione scolastica di web design? Il sito non ce l’hai nemmeno, perché sono due anni che aspetti che tuo cugino lo faccia per te? Bè, noi siamo qui per aiutarti.

]]> Bootstrap è il CSS Framework di Twitter https://nicolaiarocci.com/bootstrap-from-twitter-twitter-developers/ Sun, 21 Aug 2011 00:00:00 +0000 https://nicolaiarocci.com/bootstrap-from-twitter-twitter-developers/ <p>Twitter rilascia Bootstrap, il CSS Framework creato inizialmente per uso interno e ora disponibile al pubblico.</p> <blockquote> <p>It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny (only 6k with gzip) resource.</p></blockquote> <!-- raw HTML omitted --> <p>A prima vista sembra molto ben fatto. Per tutte le informazioni e il download visitate la bella <!-- raw HTML omitted -->home page<!-- raw HTML omitted --> del progetto.</p> Twitter rilascia Bootstrap, il CSS Framework creato inizialmente per uso interno e ora disponibile al pubblico.

It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny (only 6k with gzip) resource.

A prima vista sembra molto ben fatto. Per tutte le informazioni e il download visitate la bella home page del progetto.

]]> Siti fluidi coi CSS Framework: Inuit.css https://nicolaiarocci.com/siti-fluidi-coi-css-framework-inuit-css/ Fri, 06 May 2011 00:00:00 +0000 https://nicolaiarocci.com/siti-fluidi-coi-css-framework-inuit-css/ <p><!-- raw HTML omitted -->Dopo l’articolo introduttivo sui <a href="http://nicolaiarocci.com/costruire-siti-fluidi-coi-css-framework-tiny-fluid-grid/">siti fluidi e i CSS Framework</a> è giunta l’ora di dare una occhiata a un framework vero e proprio. Come dicevo prediligo strumenti agili, leggeri, specializzati e possibilmente fatti in casa. Se scelgo un framework quest’ultimo deve essere essenziale, leggero, flessibile. <strong><!-- raw HTML omitted -->Inuit.css<!-- raw HTML omitted --></strong>, ultimo nato nella numerosa e agguerrita famiglia dei Framework CSS, sembra nato apposta per fare di me un uomo felice.</p> Dopo l’articolo introduttivo sui siti fluidi e i CSS Framework è giunta l’ora di dare una occhiata a un framework vero e proprio. Come dicevo prediligo strumenti agili, leggeri, specializzati e possibilmente fatti in casa. Se scelgo un framework quest’ultimo deve essere essenziale, leggero, flessibile. Inuit.css, ultimo nato nella numerosa e agguerrita famiglia dei Framework CSS, sembra nato apposta per fare di me un uomo felice.

Flessibilità e qualità prima di tutto

Inuit.css è pronto all’uso, se siete di corsa e non avete esigenze particolari potete usarlo così com’è. Quando serve è facile adattarlo al nostro progetto, soprattutto grazie all’alta qualità del codice sorgente, commentato molto bene. E’ proprio la cura che l’autore ha dedicato alla documentazione l’elemento chiave che ci consente di intervenire rapidamente, eliminando le parti superflue o ritoccando il codice ove necessario.

Qui sopra vedete uno snippet tratto dal foglio di stile originale. Notate come l’autore si sia preoccupato di fornire indicazioni su come organizzare la gerarchia dei font. Ben fatto!

La potenza è nulla senza controllo

Difficilmente Inuit.css prende l’iniziativa, preferisce lasciarla al designer. Prendiamo gli elementi base di HTML5 e CSS3. Inuit.css li supporta ma li isola in classi dedicate che useremo all’occorrenza.

La scelta del basso profilo è apprezzabile. Lascia il controllo nelle nostre mani, ma corre il rischio che – soprattutto al primo impatto – il framework sembri meno ricco rispetto ad altre soluzioni. In effetti non è sulla ricchezza che punta Inuit ma su flessibilità, estensibilità e… mobilità.

Tablet, smartphone e non solo

Il supporto per l’attributo @media consente a Inuit di ridefinire dinamicamente gran parte delle impostazioni in base al dispositivo (tablet, smartphone, stampante) che consuma la pagina. Il Grid System adottato deriva dal capostipite 960 Grid System (vedi in proposito l’articolo precedente), supporta matrici (grid) a 12 e 16 colonne e implementa un ingegnoso marchingegno che evita l’inserimento della classica class=end nell’ultima colonna.

A differenza della Tiny Fluid Grid vista la volta scrosa, Inuit è un Framework vero e proprio e supporta ben più della sola Grid. Sono presenti impostazioni predefinite e ben fatte per tutti gli elementi più comuni di una pagina HTML: header, paragrafi, liste numerate e non, tabelle, form, citazioni, link, immagini. Non manca una implementazione del Eric Meyer CSS Reset e il supporto per la modalità debug che rende visibile la grid sullo sfondo. Una occhiata alla pagina demo e soprattutto al suo sorgente è sufficiente per rendersi conto di quanti sono gli stili che Inuit.css ci mette a disposizione.

Giovani di belle speranze

Inuit è il nuovo arrivato, ha solo una ventina di giorni ed è in revisione continua. E’ giovane come il suo autore, il ventenne Harry Roberts (l’età non tragga in inganno, Harry è la mente che si cela dietro CSS Wizardry). Come tutti i giovani di belle speranze Inuit guarda al futuro e se ne frega allegramente del passato: supporta Internet Explorer a partire dalla versione 7 (update del 24.5: la release 1.5 introduce un supporto base per le grid in IE6).

Dovrà sgomitare un bel pò per conquistarsi uno spazio in una nicchia già affollata da una concorrenza agguerrita. Ha tutte le carte in regola per sfondare, prova ne è il fatto che a pochi giorni dal lancio qualche sito qui e là ha già cominciato ad adottarlo.

Se scegliete di usare Inuit nei vostri progetti fatemelo sapere. Chissà, potrebbero finire dritti dritti nella Web Gallery del sito ufficiale.

]]> Costruire siti fluidi coi CSS Framework: Tiny Fluid Grid https://nicolaiarocci.com/costruire-siti-fluidi-coi-css-framework-tiny-fluid-grid/ Fri, 29 Apr 2011 00:00:00 +0000 https://nicolaiarocci.com/costruire-siti-fluidi-coi-css-framework-tiny-fluid-grid/ <p>Fino a non molti anni fa la gamma di risoluzioni video disponibili alla gran parte degli utenti era piuttosto limitata, tanto che nel disegnare siti web non ci si preoccupava granché di questo aspetto. La diffusione di massa di monitor wide, netbooks, tablet e smartphone ha cambiato rapidamente le carte in tavola. Per raggiungere con efficienza il loro pubblico i siti odierni devono essere capaci di adattare il loro aspetto alla risoluzione del dispositivo usato dal visitatore. Devono, in una parola, essere <em>fluidi</em>.</p> <h2 id="il-grid-design-e-l8217era-dei-css-framework">Il Grid Design e l’era dei CSS Framework</h2> <p>L’avvento dei CSS Framework si deve (principalmente) alla necessità di soddisfare l’esigenza di fluidità. Il capostipite, se non in ordine cronologico senz’altro per l’influenza che ha avuto, è il <!-- raw HTML omitted -->960 Grid System<!-- raw HTML omitted -->. Altri prodotti famosi, per citarne solo un paio, sono <!-- raw HTML omitted -->Blueprint<!-- raw HTML omitted --> e <!-- raw HTML omitted -->Emastic<!-- raw HTML omitted -->. Questi framework hanno in comune l’obiettivo di velocizzare creazione, gestione e manutenzione dei fogli di stile ma se andiamo al nocciolo della questione ci accorgiamo che tutti si basano sul concetto chiave di <strong><!-- raw HTML omitted -->Grid Design<!-- raw HTML omitted --></strong>:</p> Fino a non molti anni fa la gamma di risoluzioni video disponibili alla gran parte degli utenti era piuttosto limitata, tanto che nel disegnare siti web non ci si preoccupava granché di questo aspetto. La diffusione di massa di monitor wide, netbooks, tablet e smartphone ha cambiato rapidamente le carte in tavola. Per raggiungere con efficienza il loro pubblico i siti odierni devono essere capaci di adattare il loro aspetto alla risoluzione del dispositivo usato dal visitatore. Devono, in una parola, essere fluidi.

Il Grid Design e l’era dei CSS Framework

L’avvento dei CSS Framework si deve (principalmente) alla necessità di soddisfare l’esigenza di fluidità. Il capostipite, se non in ordine cronologico senz’altro per l’influenza che ha avuto, è il 960 Grid System. Altri prodotti famosi, per citarne solo un paio, sono Blueprint e Emastic. Questi framework hanno in comune l’obiettivo di velocizzare creazione, gestione e manutenzione dei fogli di stile ma se andiamo al nocciolo della questione ci accorgiamo che tutti si basano sul concetto chiave di Grid Design:

Una griglia tipografica è una struttura bidimensionale composta da una serie di guide verticali e orizzontali intersecanti (matrice) usata per organizzare il contenuto della pagina. La griglia offre una traccia sulla quale il designer può organizzare testo e immagini in maniera ordinata e razionale (Wikipedia)

Niente di nuovo, i tipografi hanno usato questa tecnica per secoli. Il Grid Design in declinazione web è fluido: le colonne (e gli spazi tra le colonne) che compongono la matrice sono capaci di adattarsi alla risoluzione dell schermo.

Gran parte dei CSS Framework non si limitano a implementare versioni più o meno sofisticate del Grid System ma offrono una serie di servizi aggiuntivi nel tentativo di risparmiare al designer i compiti più ripetitivi e tediosi. Non sempre ci riescono. Ogni sito ha esigenze specifiche e ogni designer abitudini consolidate. E’ difficile che una soluzione standard sia l’ideale per ogni esigenza. Spesso preferisco la via di mezzo: strumenti agili che consentono di portare a casa rapidamente il risultato senza aggiungere (molto) più del necessario.

In questa mini-serie di tre articoli prenderò in esame tre diverse soluzioni che implementano il Grid Design e che ci permettono di implementare, con diversi gradi di complessità (e numero di funzionalità), pagine web fluide.

Tiny Fluid Grid

Se non altro amerete questa soluzione a causa del suo design: il sito è oggettivamente splendido. E facile da usare. In effetti Tiny Fluid Grid non è un CSS Framework vero e proprio ma una semplice soluzione interattiva che vi consente, agendo su tre semplici regolazioni (numero di colonne, spazio tra le colonne e larghezza dell’area client), di configurare online la vostra CSS grid. Il pulsante Preview offre una anteprima (anch’essa interattiva) della grid. L’unica altra opzione disponibile è il Download. Otterrete un archivio compresso che contiene due files: il foglio di stile grid.css e un index.html che contiene un esempio d’uso della grid appena creata:

Una occhiata al foglio di stile ci consente di capire la struttura della grid

Una classe per ogni larghezza di colonna. Poiché larghezza e margini delle colonne sono espressi in percentuale la nostra grid si adatta alla risoluzione dello schermo, con i limiti imposti dagli attributi min-width e max-width. L’implementazione lato HTML è banale (tralascio le parti non rilevanti):

La nostra grid è contenuta in un div di classe “container”. Le colonne sono a loro volta dei div. Per ottenere più colonne nella stessa riga dobbiamo assicurarci che la somma dei numeri contenuti nel nome di ogni classe (grid_x) sia uguale al numero di colonne di cui è composta la grid. Nel nostro caso la seconda riga è composta da tre div grid_4 (4×3=12); la terza riga da due colonne: grid_3 e grid_9 (3+9=12). Semplice no? Naturalmente possiamo ritoccare il foglio di stile come vogliamo, adattandolo alle nostre esigenze.

Nel prossimo articolo della serie affronteremo un CSS Framework vero e proprio, anche questo snello e semplice da usare. Se ancora non l’avete fatto abbonatevi al feed RSS per non perdere la prossima puntata, oppure iscrivetevi alla mailing list (riquadro in alto a destra). Mi raccomando!

]]> Eclipse Foundation lancia la beta pubblica di OrionHub https://nicolaiarocci.com/eclipse-foundation-lancia-la-beta-pubblica-di-orionhub/ Tue, 22 Mar 2011 00:00:00 +0000 https://nicolaiarocci.com/eclipse-foundation-lancia-la-beta-pubblica-di-orionhub/ <p><a href="http://www.eclipse.org/">Eclipse Foundation</a> ha avviato il beta testing di <a href="http://www.eclipse.org/orion/"><strong>OrionHub</strong></a>, una implementazione hosted del suo Progetto Orion. Orion è una piattaforma di sviluppo aperta dedicata allo sviluppo per il web, dentro il web. La IDE Orion gira nel browser e fornisce un completo ambiente di produzione per progetti JavaScript, HTML e CSS. Il risultato è ottenuto grazie a un plugin lato client sviluppato in HTML5.</p> <p>Per un approfondimento dai una occhiata a <!-- raw HTML omitted -->Il futuro del codice sorgente è online?<!-- raw HTML omitted -->, la panoramica sul Progetto Orion e sulle IDE Online che ho pubblicato qualche tempo fa.</p> Eclipse Foundation ha avviato il beta testing di OrionHub, una implementazione hosted del suo Progetto Orion. Orion è una piattaforma di sviluppo aperta dedicata allo sviluppo per il web, dentro il web. La IDE Orion gira nel browser e fornisce un completo ambiente di produzione per progetti JavaScript, HTML e CSS. Il risultato è ottenuto grazie a un plugin lato client sviluppato in HTML5.

Per un approfondimento dai una occhiata a Il futuro del codice sorgente è online?, la panoramica sul Progetto Orion e sulle IDE Online che ho pubblicato qualche tempo fa.

]]> Il meglio di Stack Overflow in una collana di eBook gratuiti https://nicolaiarocci.com/il-meglio-di-stack-overflow-una-collana-di-ebook-gratuiti/ Wed, 02 Feb 2011 00:00:00 +0000 https://nicolaiarocci.com/il-meglio-di-stack-overflow-una-collana-di-ebook-gratuiti/ <p><!-- raw HTML omitted --><a href="http://stackoverflow.com/"><strong>Stack Overflow</strong></a> è la risorsa per programmatori più famosa e apprezzata della Rete. Purtroppo domande e risposte pubblicate sul sito si succedono a un ritmo tale che è impossibile seguire gli aggiornamenti in tempo reale. Per questo motivo la gran parte degli utenti (sottoscritto incluso!) ricorre a Stack Overflow solo al momento del bisogno, quando è necessario trovare in fretta la soluzione a un problema critico. E’ un peccato perchè Stack Overflow è una vera <strong>minera di informazioni</strong> <strong>preziose</strong> e  meriterebbe maggiore attenzione…</p> Stack Overflow è la risorsa per programmatori più famosa e apprezzata della Rete. Purtroppo domande e risposte pubblicate sul sito si succedono a un ritmo tale che è impossibile seguire gli aggiornamenti in tempo reale. Per questo motivo la gran parte degli utenti (sottoscritto incluso!) ricorre a Stack Overflow solo al momento del bisogno, quando è necessario trovare in fretta la soluzione a un problema critico. E’ un peccato perchè Stack Overflow è una vera minera di informazioni preziose e  meriterebbe maggiore attenzione…

Gli eBooks di Stack Overflow

Recentemente Greg Hewkill ha annunciato la creazione di uno script open source che genera un eBook per ognuno dei 20 tag più popolari di Stack Overflow. Ogni libro contiene le domande (e risposte) più votate nella sua categoria. Il risultato è una vera e propria collana Stack Overflow che propone il concentrato dei migliori contenuti del sito. Basta scorrere i titoli (tag) per rendersi conto che ce n’è davvero per tutti i gusti. Ecco una lista parziale:

  • JAVA (26M)
  • C# (24M), C++ (21M), C (11M)
  • NET (21M)
  • PYTHON (20M), DJANGO (1.6M)
  • JAVASCRIPT (15M)
  • PHP (9.6M)
  • IPHONE (7.3M)
  • HTML (6.0M), HTML 5 (3.0M)
  • CSS (5.7M)
  • JQUERY (5.5M)
  • ASP.NET (4.8M)
  • DATABASE (4.8M)
  • RUBY (3.1M), RUBY ON RAILS (1.9M)
  • ANDROID (2.7M)
  • MY SQL (2.5M), ORACLE (662K), SQL SERVER (2.8M), SQL (5.1M)
  • AJAX (2.1M)
  • COCOA (1.5M), OBJECTIVE-C (3.1M)
  • VB.NET (1.5M)
  • SILVERLIGHT (1.1M)
  • FLASH (509K)

Alcuni sono di dimensioni notevoli il che ne fa ideali letture da divano! Il formato usato per confezionare gli eBook è Mobipocket, compatibile con [Stack Overflow è la risorsa per programmatori più famosa e apprezzata della Rete. Purtroppo domande e risposte pubblicate sul sito si succedono a un ritmo tale che è impossibile seguire gli aggiornamenti in tempo reale. Per questo motivo la gran parte degli utenti (sottoscritto incluso!) ricorre a Stack Overflow solo al momento del bisogno, quando è necessario trovare in fretta la soluzione a un problema critico. E’ un peccato perchè Stack Overflow è una vera minera di informazioni preziose e  meriterebbe maggiore attenzione…

Gli eBooks di Stack Overflow

Recentemente Greg Hewkill ha annunciato la creazione di uno script open source che genera un eBook per ognuno dei 20 tag più popolari di Stack Overflow. Ogni libro contiene le domande (e risposte) più votate nella sua categoria. Il risultato è una vera e propria collana Stack Overflow che propone il concentrato dei migliori contenuti del sito. Basta scorrere i titoli (tag) per rendersi conto che ce n’è davvero per tutti i gusti. Ecco una lista parziale:

  • JAVA (26M)
  • C# (24M), C++ (21M), C (11M)
  • NET (21M)
  • PYTHON (20M), DJANGO (1.6M)
  • JAVASCRIPT (15M)
  • PHP (9.6M)
  • IPHONE (7.3M)
  • HTML (6.0M), HTML 5 (3.0M)
  • CSS (5.7M)
  • JQUERY (5.5M)
  • ASP.NET (4.8M)
  • DATABASE (4.8M)
  • RUBY (3.1M), RUBY ON RAILS (1.9M)
  • ANDROID (2.7M)
  • MY SQL (2.5M), ORACLE (662K), SQL SERVER (2.8M), SQL (5.1M)
  • AJAX (2.1M)
  • COCOA (1.5M), OBJECTIVE-C (3.1M)
  • VB.NET (1.5M)
  • SILVERLIGHT (1.1M)
  • FLASH (509K)

Alcuni sono di dimensioni notevoli il che ne fa ideali letture da divano! Il formato usato per confezionare gli eBook è Mobipocket, compatibile con]7 e credo con altri lettori di eBook. Ricordo che è possibile leggere i libri per Kindle con l’applicazione gratuita disponibile per PC, Mac, [Stack Overflow è la risorsa per programmatori più famosa e apprezzata della Rete. Purtroppo domande e risposte pubblicate sul sito si succedono a un ritmo tale che è impossibile seguire gli aggiornamenti in tempo reale. Per questo motivo la gran parte degli utenti (sottoscritto incluso!) ricorre a Stack Overflow solo al momento del bisogno, quando è necessario trovare in fretta la soluzione a un problema critico. E’ un peccato perchè Stack Overflow è una vera minera di informazioni preziose e  meriterebbe maggiore attenzione…

Gli eBooks di Stack Overflow

Recentemente Greg Hewkill ha annunciato la creazione di uno script open source che genera un eBook per ognuno dei 20 tag più popolari di Stack Overflow. Ogni libro contiene le domande (e risposte) più votate nella sua categoria. Il risultato è una vera e propria collana Stack Overflow che propone il concentrato dei migliori contenuti del sito. Basta scorrere i titoli (tag) per rendersi conto che ce n’è davvero per tutti i gusti. Ecco una lista parziale:

  • JAVA (26M)
  • C# (24M), C++ (21M), C (11M)
  • NET (21M)
  • PYTHON (20M), DJANGO (1.6M)
  • JAVASCRIPT (15M)
  • PHP (9.6M)
  • IPHONE (7.3M)
  • HTML (6.0M), HTML 5 (3.0M)
  • CSS (5.7M)
  • JQUERY (5.5M)
  • ASP.NET (4.8M)
  • DATABASE (4.8M)
  • RUBY (3.1M), RUBY ON RAILS (1.9M)
  • ANDROID (2.7M)
  • MY SQL (2.5M), ORACLE (662K), SQL SERVER (2.8M), SQL (5.1M)
  • AJAX (2.1M)
  • COCOA (1.5M), OBJECTIVE-C (3.1M)
  • VB.NET (1.5M)
  • SILVERLIGHT (1.1M)
  • FLASH (509K)

Alcuni sono di dimensioni notevoli il che ne fa ideali letture da divano! Il formato usato per confezionare gli eBook è Mobipocket, compatibile con [Stack Overflow è la risorsa per programmatori più famosa e apprezzata della Rete. Purtroppo domande e risposte pubblicate sul sito si succedono a un ritmo tale che è impossibile seguire gli aggiornamenti in tempo reale. Per questo motivo la gran parte degli utenti (sottoscritto incluso!) ricorre a Stack Overflow solo al momento del bisogno, quando è necessario trovare in fretta la soluzione a un problema critico. E’ un peccato perchè Stack Overflow è una vera minera di informazioni preziose e  meriterebbe maggiore attenzione…

Gli eBooks di Stack Overflow

Recentemente Greg Hewkill ha annunciato la creazione di uno script open source che genera un eBook per ognuno dei 20 tag più popolari di Stack Overflow. Ogni libro contiene le domande (e risposte) più votate nella sua categoria. Il risultato è una vera e propria collana Stack Overflow che propone il concentrato dei migliori contenuti del sito. Basta scorrere i titoli (tag) per rendersi conto che ce n’è davvero per tutti i gusti. Ecco una lista parziale:

  • JAVA (26M)
  • C# (24M), C++ (21M), C (11M)
  • NET (21M)
  • PYTHON (20M), DJANGO (1.6M)
  • JAVASCRIPT (15M)
  • PHP (9.6M)
  • IPHONE (7.3M)
  • HTML (6.0M), HTML 5 (3.0M)
  • CSS (5.7M)
  • JQUERY (5.5M)
  • ASP.NET (4.8M)
  • DATABASE (4.8M)
  • RUBY (3.1M), RUBY ON RAILS (1.9M)
  • ANDROID (2.7M)
  • MY SQL (2.5M), ORACLE (662K), SQL SERVER (2.8M), SQL (5.1M)
  • AJAX (2.1M)
  • COCOA (1.5M), OBJECTIVE-C (3.1M)
  • VB.NET (1.5M)
  • SILVERLIGHT (1.1M)
  • FLASH (509K)

Alcuni sono di dimensioni notevoli il che ne fa ideali letture da divano! Il formato usato per confezionare gli eBook è Mobipocket, compatibile con]7 e credo con altri lettori di eBook. Ricordo che è possibile leggere i libri per Kindle con l’applicazione gratuita disponibile per PC, Mac,]10 e Android.

Buona lettura!

]]> Eric Meyer aggiorna il suo famoso CSS Reset https://nicolaiarocci.com/eric-meyer-aggiorna-il-suo-famoso-css-reset/ Thu, 13 Jan 2011 00:00:00 +0000 https://nicolaiarocci.com/eric-meyer-aggiorna-il-suo-famoso-css-reset/ <p>Quattro anni fa Eric Meyer pubblicò la prima versione del suo CSS Reset. Concepito come un prototipo da condividere con altri sviluppatori dediti alla creazione di uno standard, il modulo riscosse subito grande successo diffondendosi rapidamente. In poche settimane venne adottato, spesso inconsapevolmente, da decine di migliaia di programmatori e designer web. Oggi gran parte dei siti web nel mondo includono nel loro codice almeno una traccia di quello che è universalmente noto come Eric Meyer Reset.</p> Quattro anni fa Eric Meyer pubblicò la prima versione del suo CSS Reset. Concepito come un prototipo da condividere con altri sviluppatori dediti alla creazione di uno standard, il modulo riscosse subito grande successo diffondendosi rapidamente. In poche settimane venne adottato, spesso inconsapevolmente, da decine di migliaia di programmatori e designer web. Oggi gran parte dei siti web nel mondo includono nel loro codice almeno una traccia di quello che è universalmente noto come Eric Meyer Reset.

Una evoluzione continua

I piccoli problemi e le nuove incompatibilità che inevitabilmente accompagnano ogni aggiornamento dei browser esistenti, nonché le uscite di quelli nuovi (Google Chrome su tutti) costringono spesso a rivedere fogli di stile e codice JavaScript. Così nel tempo altri programmatori  hanno dato il loro contribuito proponendo variazioni e aggiornamenti al tema originale. Ci sono poi le nuove tecnologie che si affacciano sulla scena; una delle revisoni più famose del Eric Mayer Reset è infatti l’HTML5 Reset Stylesheet.

Eric Meyer Reset versione 2011

Ed ecco che a sopresa lo stesso Meyer torna sulla scena proponendo l’ultima incarnazione del suo CSS Reset. Questo aggiornamento prende spunto dall’originale ma tiene conto anche del lavoro svolto nel frattempo dalla comunità, a partire proprio dal HTML5 Reset. Ecco il nuovo codice:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0b1 | 201101
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define visible focus styles!
:focus {
    outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Come annotato a caratteri cubitali nelle note iniziali ci troviamo di fronte a un lavoro non ancora definitivo. Sarà mia cura segnalare eventuali aggiornamenti, tuttavia una prima occhiata al codice fa pensare che questa prima stesura sia già valida.

Ne vale la pena?

C’è un discussione in corso da tempo tra chi sostiene che tutto sommato il CSS Reset non sia necessario e chi, al contrario, lo difende a spada stratta. Non risolve certo tutti i problemi di compatibilità tra browsers ma senz’altro CSS Reset contribuisce a ridurne sensibilmente il numero. Per approfondire l’argomento puoi cominciare dando una occhiata a Should You Reset Your CSS? (Six Revisions) e leggendo le opinioni degli utenti di Stack Overflow.

]]> Adobe Flash è una Pessima Idea https://nicolaiarocci.com/flash-adobe-e-una-pessima-idea/ Thu, 06 Jan 2011 00:00:00 +0000 https://nicolaiarocci.com/flash-adobe-e-una-pessima-idea/ <p><!-- raw HTML omitted -->E’ incredibile la quantità di siti che ancora oggi vengono sviluppati con Flash. Il fenomeno colpisce soprattutto i siti-vetrina: negozi, attività commerciali, ristoranti, artigiani. Basta farsi un giro sui siti di venditori di mobili, per esempio, per godersi il trionfo della ‘<a href="http://en.wikipedia.org/wiki/Adobe_Flash">multimedia platform</a>‘ di Adobe. Bisogna prenderne atto: nel 2011 migliaia di aziende italiane di ogni dimensione affidano la loro identità web ad Adobe Flash. Consulenti e agenzie continuano a produrre siti con tecnologie assimilate anni fa. Reticenti all’aggiornamento delle proprie competenze, si accontentano del loro confortante orticello che, tutto sommato, assicura lo stipendio.</p> E’ incredibile la quantità di siti che ancora oggi vengono sviluppati con Flash. Il fenomeno colpisce soprattutto i siti-vetrina: negozi, attività commerciali, ristoranti, artigiani. Basta farsi un giro sui siti di venditori di mobili, per esempio, per godersi il trionfo della ‘multimedia platform‘ di Adobe. Bisogna prenderne atto: nel 2011 migliaia di aziende italiane di ogni dimensione affidano la loro identità web ad Adobe Flash. Consulenti e agenzie continuano a produrre siti con tecnologie assimilate anni fa. Reticenti all’aggiornamento delle proprie competenze, si accontentano del loro confortante orticello che, tutto sommato, assicura lo stipendio.

Eppure ci sono tante buone ragioni per non ricorrere a Flash:

  1. Non è sicuro. Probabilmente Flash è l’unico prodotto che fa concorrenza a Microsoft Windows in quanto a numero di security fixes. Non per niente è stato definito il nuovo Windows Vista
  2. E’ una tecnologia obsoleta, che si affida pesantemente ai plugin di terze parti (vedi alla voce sicurezza)
  3. Rende lenta l’apertura delle pagine web, a meno che non si intervenga con ottimizzazioni ad-hoc
  4. Consuma molta, troppa memoria
  5. Richiede un forte impegno della CPU
  6. Sui dispositivi portatili consuma velocemente la batteria
  7. Non è supportato sui dispositivi iOS/Apple (iPhone, iPad)
  8. Gira comunque male su buona parte degli altri dispositivi portatili, SmartPhones soprattutto
  9. Ha seri problemi di compatibilità e prestazioni su piattaforme Mac/OSX
  10. Molti utenti e (soprattutto) aziende bloccano Flash sui loro browsers proprio a causa dei problemi di sicurezza, stabilità e prestazioni
  11. I contenuti Flash non sono facili da archiviare. Gli utenti medi hanno grosse difficoltà a salvare copie locali delle pagine. I servizi tipo Internet Archive non riescono a memorizzare il sito
  12. Flash è il nemico numero uno dei motori di ricerca. Google, Bing e gli altri hanno da sempre grosse difficoltà ad indicizzarne i contenuti
  13. Flash rende problematica, quando non impossibile, l’ottimizzazione ai fini del posizionamento sui motori di ricerca (SEO)
  14. E’ un sistema proprietario chiuso

E’ vero che ricorrendo a ottimizzazioni e tools dedicati alcune (poche) di queste limitazioni possono essere aggirate. Le prossime release di Flash promettono sviluppi interessanti, tra i quali ottimizzazioni per i dispositivi mobili e riduzione del peso dell’intera infrastruttura.

Considera le alternative

Non sono necessarie soluzioni esoteriche. Troppo spesso si ricorre a Flash per produrre effetti, transizioni e animazioni realizzabili anche con strumenti consolidati, leggeri e SEO-friendly quali JavaScript, HTML e CSS. In una parola, AJAX. Cose ormai scontate. O forse no, a giudicare da quel che ancora oggi si pubblica in rete. A ben guardare la battaglia tra Apple e Adobe, quella culminata con la [E’ incredibile la quantità di siti che ancora oggi vengono sviluppati con Flash. Il fenomeno colpisce soprattutto i siti-vetrina: negozi, attività commerciali, ristoranti, artigiani. Basta farsi un giro sui siti di venditori di mobili, per esempio, per godersi il trionfo della ‘multimedia platform‘ di Adobe. Bisogna prenderne atto: nel 2011 migliaia di aziende italiane di ogni dimensione affidano la loro identità web ad Adobe Flash. Consulenti e agenzie continuano a produrre siti con tecnologie assimilate anni fa. Reticenti all’aggiornamento delle proprie competenze, si accontentano del loro confortante orticello che, tutto sommato, assicura lo stipendio.

Eppure ci sono tante buone ragioni per non ricorrere a Flash:

  1. Non è sicuro. Probabilmente Flash è l’unico prodotto che fa concorrenza a Microsoft Windows in quanto a numero di security fixes. Non per niente è stato definito il nuovo Windows Vista
  2. E’ una tecnologia obsoleta, che si affida pesantemente ai plugin di terze parti (vedi alla voce sicurezza)
  3. Rende lenta l’apertura delle pagine web, a meno che non si intervenga con ottimizzazioni ad-hoc
  4. Consuma molta, troppa memoria
  5. Richiede un forte impegno della CPU
  6. Sui dispositivi portatili consuma velocemente la batteria
  7. Non è supportato sui dispositivi iOS/Apple (iPhone, iPad)
  8. Gira comunque male su buona parte degli altri dispositivi portatili, SmartPhones soprattutto
  9. Ha seri problemi di compatibilità e prestazioni su piattaforme Mac/OSX
  10. Molti utenti e (soprattutto) aziende bloccano Flash sui loro browsers proprio a causa dei problemi di sicurezza, stabilità e prestazioni
  11. I contenuti Flash non sono facili da archiviare. Gli utenti medi hanno grosse difficoltà a salvare copie locali delle pagine. I servizi tipo Internet Archive non riescono a memorizzare il sito
  12. Flash è il nemico numero uno dei motori di ricerca. Google, Bing e gli altri hanno da sempre grosse difficoltà ad indicizzarne i contenuti
  13. Flash rende problematica, quando non impossibile, l’ottimizzazione ai fini del posizionamento sui motori di ricerca (SEO)
  14. E’ un sistema proprietario chiuso

E’ vero che ricorrendo a ottimizzazioni e tools dedicati alcune (poche) di queste limitazioni possono essere aggirate. Le prossime release di Flash promettono sviluppi interessanti, tra i quali ottimizzazioni per i dispositivi mobili e riduzione del peso dell’intera infrastruttura.

Considera le alternative

Non sono necessarie soluzioni esoteriche. Troppo spesso si ricorre a Flash per produrre effetti, transizioni e animazioni realizzabili anche con strumenti consolidati, leggeri e SEO-friendly quali JavaScript, HTML e CSS. In una parola, AJAX. Cose ormai scontate. O forse no, a giudicare da quel che ancora oggi si pubblica in rete. A ben guardare la battaglia tra Apple e Adobe, quella culminata con la]5 con la quale Steve Jobs in persona spiegava i motivi della rinuncia di Apple alla tecnologia Flash, è cosa recente.

Investire nel futuro

Le versioni più aggiornate dei browsers moderni (Firefox, Chorme, Safari, Opera e l’ormai imminente Internet Explorer 9) supportano ampiamente i nuovi standard HTML5 e CSS3. C’è chi ritiene che la loro certificazione sia troppo lontana e chi al contrario li ha adottati con entusiasmo. Una cosa è certa:  questi sono gli standard del futuro. La rete si sta preparando da tempo ed è ricca di risorse e demo interessanti:

Da un punto di vista professionale vale senz’altro la pena investire fin da ora tempo e risorse nello studio di HTML5 e CSS3. L’avvento di Internet Explorer 9 aumenterà rapidamente il numero di navigatori HTML5-enabled; tanto che l’implementazione di siti di massa con queste tecnologie sarà possibile ben prima di quanto non si immagini.

]]>