px, pt, em, %: multimedia experience.
Quando i CMS, o i loro moduli, producono html con css inline può diventare complicato modificare la forma di quel contenuto. Questa è un soluzione semplice ed efficace al problema: usare il selettore degli attributi con valore “style”.
codice html:
<span style="font-size: 15px; color: #DDDDDD">Hello, world"</span>
codice css:
span[style]{
color: inherit !important;
font-size: inherit !important;
}
Articolo originale: Override Inline Styles with CSS
Dopo alcuni anni ho riattivato il mio blog su blogger. Come prima cosa ho pensato di cambiare il tema facendo in modo che l’mmagine dell’header cambiasse ad ogni caricamento della pagina. Credevo che bastasse installare un widget fornito da blogger, ma ho scoperto, purtroppo, che non è così. Quindi ho cominciato a girare per la rete alla ricerca di una soluzione e alla fine ho trovato il modo che vi descrivo di seguito.
Per fare in modo che le immagini dell’header cambino ad ogni apertura della pagina si deve:
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<!-- Start Modification. -->
<script type='text/javascript'>
var banner= new Array()
banner[0]="http://url_della_tua_immagine"
banner[1]="http://url_della_tua_immagine"
banner[2]="http://url_della_tua_immagine"
banner[3]="http://url_della_tua_immagine"
/*banner[4]="http://url_della_tua_immagine"*/
var random=Math.round((banner.length-1)*Math.random());
document.write("<img src='"+banner[random]+"' style='display: block'/>");
</script>
<noscript>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</noscript>
<!-- End Modification. -->
</a>
</div>banner[0]="http://url_della_tua_immagine" popolando così l’array delle immagini.P.S.
Le dimensioni delle immagini devono essere, in larghezza, grandi come la larghezza del blog. Per sapere qual è la larghezza potete guardare il valore di width dello stile #content-wrapper (almeno per alcuni temi).
Per tutti i web designer, segnalo questo sito molto interessante: FontTester. Il sito permette di testare vari font mettendoli a confronto direttamente nel browser, modificando gli stili del CSS.
Si tratta di un’applicazaione molto semplice, ma al tempo stesso molto efficace. Io l’ho provato su Linux e mi ha dato dei problemi (legati all’assenza dei font presenti sulle macchine windows); prometto di testarlo anche su altri sistemi, prossimamente.
Secondo me, ma anche secondo altri miei colleghi, questa è sicuramente una delle più belle estensioni che siano state create per Firefox, almeno per gli sviluppaotori*.
Le sue capacità sono enormi. Con Firebug si riesce a analizzare ogni singolo aspetto della pagina HTML caricata: l’albero DOM, il codice HTML, i CSS, le prestazioni in fase di download della pagina e dei suoi elementi, gli script. Ma la cosa ancor più sorprendente è la possibilità di modificare il codice on the fly e vedere subito i risultati. In questo modo la definizione dei CSS, per esempio, diventa un processo diretto, fatto di prove e di errori, praticati direttamente nel browser. Ovviamente sono esclusi tutti i possibili risvolti legati all’(in)compatibilità con altri browser. Oltre a tutto questo ci sono altre funzionalità, come la possibilità di creare un log per il debugging in javascript, una console per i messaggi, ecc.
Come se non bastasse, molti altri sviluppatori hanno cominciato a implementare add-on per Firebug, estendendo ancora di più le sue già notevoli capacità (vedi post precedente su YSlow).
Vi segnalo il sito dell’add-on e il sito di chi lo ha sviluppato.
* Quando parlo di sviluppatori intendo tutti coloro che hanno a che fare con lo sviluppo o l’analisi delle pagine HTML, includendo chi si occupa di: SEO, accessibilità, web design, programmazione di web application, ecc.
Con questo post voglio iniziare un ciclo di brevi articoli nei quali parlare delle estensioni per Firefox.
Le estensioni (o add-on) sono uno degli elementi più interessanti di questo browser perché permettono di aggiungere qualsiasi tipo di funzionalità. Ad oggi il numero di add-ons è veramente impressionante ed ancora più impressionante è la qualità di questi mini prodotti (in alcuni casi per niente mini).
Il primo add-on del quale voglio scrivere è YSlow, sviluppato da Yahoo!.
Si tratta di un’estensione per un’altra estensione, Firebug (della quale parlerò prossimamente), che ha lo scopo di misurare il peso di una pagina web, dando informazioni su come ottimizzarla. Le regole che vengono utilizzate per la valutazione sono state studiate da Yahoo! e sono consultabili alla pagina di documentazione di YSlow. Il prodotto è veramente interessante e permette, come del resto Firebug, di esplorare tutta la pagina in maniera estremamente approfondita.
Categoria: sviluppo web
Non so bene perché abbia aspettato così tanto prima di segnalare questo sito web (ma soprattuto questo gruppo di ricerca: Feng-GUI, Feng-GUI Lab), il quale propone un algoritmo molto interessante per la simulazione dei movimenti oculari.
Il loro software, che implementa l’algoritmo di cui parlavo, permette di determinare quale sia la sequenza dei movimenti oculari dell’utente, dando così delle indicazioni riguardo alla rilevanza degli elementi grafici di una pagina web. L’idea è quella di dare un riferimento piuttosto preciso (ma sempre teorico) per determinare cosa è più visibile e cosa non lo è, e in che ordine.
E’ molto interessante leggere quali sono i parametri che l’algoritmo utilizza per determinare il peso degli elementi grafici, ma soprattuto è molto importante provarlo.
Di tutti gli argomenti che ho trovato in rete ne ho trovato uno particolarmente interessant: i tooltip in javscript.
I tooltip sono i balloon, le nuvolette che appaiono quando restate sopra un elemento per qualche secondo con il vostro puntatore e vi forniscono informazioni aggiuntive sull’elemento.
Realizzarli in javascript non è complicato, ma sicuramente è antipatico. Da qui la pubblicazione di una lista di librerie/plugin che permettono di inserire un tooltip in una pagina web. Scegliete quello che preferite.
Ho letto in rete un ottimo articolo per evitare l’utilizzo dei CSS hacks. Il problema è affrontato in maniera diversa da come mi sarei immaginato, ma la soluzione è funzionale ed elegante. In pratica si tratta di aggiungere del codice javascript in modo da poter creare, successivamente, degli stili personalizzati per ogni browser, in maniera semplice ed intuitiva.
Vi posto il codice sorgente:
<script type="text/javascript">
var cssFix = function(){
var u = navigator.userAgent.toLowerCase(),
addClass = function(el,val){
if(!el.className) {
el.className = val;
} else {
var newCl = el.className;
newCl+=(" "+val);
el.className = newCl;
}
},
is = function(t){return (u.indexOf(t)!=-1)};
addClass(document.getElementsByTagName(’html’)[0],[
(!(/opera|webtv/i.test(u))&&/msie (d)/.test(u))?(’ie ie’+RegExp.$1)
:is(’firefox/2′)?’gecko ff2′
:is(’firefox/3′)?’gecko ff3′
:is(’gecko/’)?’gecko’
:is(’opera/9′)?’opera opera9′:/opera (d)/.test(u)?’opera opera’+RegExp.$1
:is(’konqueror’)?’konqueror’
:is(’applewebkit/’)?’webkit safari’
:is(’mozilla/’)?’gecko’:”,
(is(’x11′)||is(’linux’))?’ linux’
:is(’mac’)?’ mac’
:is(’win’)?’ win’:”
].join(" "));
}();
</script>
Questo codice attiva i seguenti stile per i relativi browser.
.ie — Tutte le versioni di IE; .ie8 — IE 8.х; .ie7 — IE 7.x; .ie6 — IE 6.x; .ie5 — IE 5.x; .gecko — Tutte le versioni di Firefox; .ff2 — Firefox 2; .ff3 — Firefox 3; .opera — Tutte le versioni di Opera; .opera8 — Opera 8.x; .opera9 — Opera 9.x; .konqueror — Konqueror; .safari — Safari.
E questo è un piccolo esempio: in questo caso verrebbe visualizzato il testo in rosso in Opera.
.opera div {
color:red;
}
Oggi stanno diventando indispensabili per creare delle RIA, anche se qualcuno le critica perché creano alcuni problemi di accessibilità oltre a mettere il codice della pagina in secondo piano (a questo proposito, affronterò il problema delle tecnologie utilizzate nello sviluppo dei siti web in un prossimo post), ma le librerie javascript (o i framework come qualcuno li chiama) sono sicuramente il futuro.
Sono molti i “big” che ne hanno sviluppate di proprie e moltissime anche quelle dei meno big. Ormai sono una realtà dalla quale non è possibile prescindere. Io le ho utilizzate e rendono lo sviluppo delle interfacce più semplice, però ricordate: scegliete quelle che preferite all’inizio di un progetto e mantenetele resistendo alla tentazione di effettuare un mesh-up di librerie. Vi assicuro che c’è da impazzire.
Di seguito vi riporto i link di alcune delle più conosciute:
Nel precedente post ho parlato del nuovo browser di Google e di quanto mi abbia colpito positivamente. In questo nuovo post voglio invece parlare dei vantaggi che offre Firefox rispetto al primo.
Chrome, oltre ad una serie di migliorie tecniche (V8, processi separati e altro ancora), ha il suo punto di forza nella nuova interfaccia che definisce un nuovo approccio alla navigazione. Tutto ciò potrebbe far credere che per Firefox ormai sia tutto finito, niente affatto.
La complessità (relativamente a Chrome) dell’interfaccia di Firefox ha la sua forza nella possibilità di essere estesa con gli addons (come del resto tutto il programma), aspetto fondamentale per rendere il browser uno strumento complesso e personalizzabile che diventa un supporto per le attività legate sul web. Con Chrome, Google, ha concentrato l’attenzione sul contenuto trasmesso attraverso il web, mentre Firefox mantiene la possibilità di funzionare da tramite tra web application e computer in locale, oppure tra web application e altre applicazioni, sia online che offline.
Come esempio voglio parlare delle estensioni legate alla mia attività di web designer e web developer: web developer e firebug. Queste due estensioni, veramente impressionanti, sono delle vere e proprie applicazioni intergrate nel browser, che permettono:
Questi sono solo due esempio di un vasto mondo di estensioni che danno la possibilità di effettuare praticamente qualsiasi attività che nasca dal WWW e che finisca altrove.
Nonostante la grande idea della società fondata da Page e Brin, Firefox rimane uno strumento indispensabile del quale sarà difficile fare a meno.
Mi chiamo Alberto Mori - nickname flatiron - e sono un consulente informatico con esperienza in Online Multimedia. Da oltre 10 anni mi occupo di sviluppo di siti web, web application, opere multimediali e grafica. Nel corso degli anni ho potuto esaminare ogni aspetto del World Wide Web specializzandomi in: linguaggi di markup, PHP, MySql, Javascript e Flash. Per approfondire le mie competenze/esperienze vi rimando al mio curriculum vitae.
Guarda anche:
0 | Unique Visitors |
