DpiBlog

Categoria: tecnica

giovedì 29 aprile 2010

Steve Jobs spiega perché i suoi device mobili non supportano flash

Why No Flash? The Bullet Points

[…]

To sum up quickly (the full release is below), Jobs says this of Flash:
1. It's proprietary.
2. Most web video plays on the iPhone/iPod Touch/iPad
3. Who needs Flash games? We have apps for that.
4. Flash has poor security.
5. Flash doesn't perform well on mobile devices.
6. Flash negatively affects battery life.
7. Flash was designed for PCs, not touchscreens.

(via readwriteweb.com)

Dario @ 18:38 | plink | categoria: tecnica | commenti (0)

domenica 26 ottobre 2008

Minimal Firefox

I nuovi netbook (o i vecchi Pc) hanno un monitor davvero piccolo, e le barre di un browser fanno sì che metà schermo sia occupato. Certo alcune barre le possiamo nascondere facilmente, ma potrebbe non essere abbastanza.

MozillaLink consiglia una serie di estensioni per minimizzare lo spazio occupato dalle barre di Firefox. Ho seguito le istruzioni ma c'è qualche cosa da aggiungere e qualche potenziale problema da risolvere.

Premessa

Più è pulito firefox, meno estensioni sono istallate, più è alta la probabilità che il tutto andrà a buon fine. Visto che potremmo dover istallare su un profilo nuovo, potrebbe essere saggio fare un backup del profilo e istallare per prima cosa le nuove estensioni necessarie a minimizzare. Per salvare le vecchie estensioni io ho usato FEBE.

Rendiamolo minimale!

1. Innanzitutto installiamo Hide menubar, che vi servirà a far sparire la barra dei menu (File, Modifica, ecc.). Riavviate e non nascondete per ora la menubar.

2. Installate Hide Caption. È importante controllare che la finestra si possa spostare dalla statusbar. Se non è così allora qualche componente va in conflitto. Create un nuovo profilo e ricominciate da capo.

3. Nascondete la barra dei menu e istallate Compact Menu 2.

4. Istallate Stop-or-Reload Button.

5. Se avete la Googlebar, disinstallatela.
6. La barra di ricerca inserita di default in Firefox occupa inutilmente spazio. Le ricerche le faremo usando la barra dell'indirizzo (sempre che non abbiate Ubiquity): apriamo la tendina della barra di ricerca e scegliamo Gestione motori di ricerca, selezioniamo i motori e scegliamo una parola chiave (io uso le iniziali, g per google, w per wikipedia, ecc). Confermiamo e eliminiamo la barra di ricerca in modo da fare spazio: le ricerche le faremo direttamente dalla barra degli indirizzi digitando ad esempio "g parola chiave".

7. Istallate autoHideStatusbar che si occupa di nascondere quandop non serve la statusbar (questa estensione va poco d'accordo con TwitterFox)

Fatto.
Il risultato finale sarà un browser che ha massimizzato la parte dedicata alla pagina, riducendo al minimo indispensabile pulsanti e barre.

Dario @ 3:40 | plink | categoria: tecnica | commenti (0)

martedì 26 agosto 2008

Vettori (Array e Oggetti) a 3 dimensioni in javascript

È noto che javascript non ha nella sua sintassi un comando che permetta di gestire vettori (Array) a più dimensioni. Di norma quindi usiamo array semplici a una dimensione

[mese = new Array ();

mese [0] = "Gennaio";
mese [1] = "Febbraio";
mese [3] = "Marzo";

ecc.]

Una maggiore complessità può essere gestita creando i cosiddetti oggetti generici personalizzati:

[utente = new Object ();

utente.nome = "Pippo";
utente.city = "Topolinia"
utente.telefono = "02 00000000"

ecc.]

Un po' meglio ma ancora insufficiente. Per fortuna è possibile creare array di array e array di oggetti.

ad esempio

[utente = new Object ();

utente [0] = new Object ();
utente [0].nome = "Pippo";
utente [0].city = "Topolinia"
utente [0].telefono = "02 00000000"

utente [1] = new Object ();
utente [1].nome = "Topolino";
utente [1].city = "Topolinia"
utente [1].telefono = "01 999999"

ecc.]

Nel mio caso avevo bisogno di memorizzare informazioni su tre livelli, una cosa tipo: Per ogni regione (es. la Lombardia) abbiamo più province (Milano, Varese, Brescia, ecc.) e per ogni provincia (es. Milano) abbiamo più comuni (Sesto, Cinisello, Melzo, ecc.)

in pratica:

e così via.

ecco quindi come sfruttare la possibilità di creare array di array e array di oggetti per ottenere un vettore a tre dimensioni

Per chiarezza l'esempio non usa i cicli, ma nella realtà il tutto sarà basato proprio su cicli nidificati.

[
regione = new Object ();
regione [0] = new Object ();
regione [0].id = 1;
regione [0].nome = "Lombardia"

regione [0].provincia = new Object ();
regione [0].provincia [0] = new Object ();
regione [0].provincia [0].id = 1
regione [0].provincia [0].nome = "Milano"

regione [0].provincia [0].comune = new Object ();
regione [0].provincia [0].comune [0] = new Object ();
regione [0].provincia [0].comune [0].id = 1;
regione [0].provincia [0].comune [0].nome = "Cinisello";

analogamente

regione [0].provincia = new Object ();
regione [0].provincia [1] = new Object ();
regione [0].provincia [1].id = 2
regione [0].provincia [1].nome = "Varese"

regione [0].provincia [1].comune = new Object ();
regione [0].provincia [1].comune [1] = new Object ();
regione [0].provincia [1].comune [1].id = 1;
regione [0].provincia [1].comune [1].nome = "Busto";

regione [0].provincia [1].comune = new Object ();
regione [0].provincia [1].comune [2] = new Object ();
regione [0].provincia [1].comune [2].id = 2;
regione [0].provincia [1].comune [2].nome = "Ispra";

ecc]

Il funzionamento è più semplice di quel che sembra tutti i comuni che "provincia [1]" saranno comuni della Provincia di Varese, quelli provincia [0], saranno in provincia di Milano.

NB.
In maniera del tutto analoga potete creare array di array.

Dario @ 3:06 | plink | categoria: tecnica | commenti (0)

sabato 12 luglio 2008

Questo è divertente

Piccolo trucco per rendere editabile la pagina che state visitando. Scrivete nella barra degli indirizzi:

[javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
]

Ovviamente non si va a modificare davvero il codice, ma è comunque divertente.

(via stormdamage)

Dario @ 2:21 | plink | categoria: tecnica | commenti (0)

sabato 5 luglio 2008

Fisarmonica con CSS e JS

Molto utile e leggero (appena 1kb) questo codice che permette di realizzare grazie a CSS e javascript uno spazio a "fisarmonica" all'interno di pagine web.
Lo script è stato testato per IE6, IE7, Firefox, Opera e Safari.

questo il codice html:

[<ul id="sm" class="sm">
<li><img src="images/1.gif" alt="" /></li>
<li><img src="images/2.gif" alt="" /></li>
<li><img src="images/3.gif" alt="" /></li>
<li><img src="images/4.gif" alt="" /></li>
</ul>]

e questa l'istruzione javascript da far eseguire:

[slideMenu.build('sm',200,10,10,1)]

Sul sito leigeber lo script da scaricare e la documentazione.

Aggiunta personale:
lavorando sui CSS è anche possibile sostituire le immagini con elementi testuali, basta inserire al posto dell'immagine un elemento block (ad es. un div) e fissarne nel CSS le dimensioni (sia larghezza che altezza)

per esempio, l'html:

[<ul id="sm" class="sm">
<li><div id="according1">qui il testo 1</div></li>
<li><div id="according2">qui il testo 2</div></li>
<li><div id="according3">qui il testo 3</div></li>
<li><div id="according4">qui il testo 4</div></li>
</ul>]

e il css da aggiungere:

[#according1 { background: #eee; width: 100%; height: 100px; }
#according2 { background: #ddd; width: 100%; height: 100px; }
#according3 { background: #ccc; width: 100%; height: 100px; }
#according4 { background: #777; width: 100%; height: 100px; }
]

(via cssmagazine)

Dario @ 23:37 | plink | categoria: tecnica | commenti (0)

giovedì 3 luglio 2008

Tooltips con i CSS

Un modo molto elegante di inserire dei "Tooltps" su un testo o su una foto usando solo CSS è stato proposto da Leonie su stormdamade.org:

[<a class="tooltiplink" href="#">this is a link<span> This is a tooltip</span></a>

a.tooltiplink span {display:none; }
a.tooltiplink:hover span { display:inline; position:absolute; padding:5px; color:#0c0; background-color:#eee; border:1px solid #000; text-decoration:none; }]

Molto comodo e molto personalizzabile.

Sullo stesso sito vengono proposte due tecniche per sostituire un testo con una immagine (cosa molto utile per gestire stili multi canale e per l'accessibilità). Nessuna delle due tecniche mi fa impazzire, ve ne presento una terza, simile alla loro seconda:

[<div id="replace">
<h1><span>Qui il testo</span></h1>
</div>

#replace {background: url(title.gif) no-repeat 0px; width: 200px; height: 100px;}
#replace H1 {width: 200px; height: 100px;}
#replace H1 SPAN {display: none;}
]

DPi

web ad alta risoluzione mentale