Articoli con Tag ‘HTML’


Tecniche di Text Replacement in HTML/CSS

Il modo corretto di inserire titoli in grafica in una pagina Web è quello per sostituizione tramite i fogli di stile (vedi Progressive Enhancement in Accessibilità e Usabilità: unobtrusive Javascript). Questa tecnica permette di rendere accessibile il contenuto del sito a prescindere dalla visualizzazione grafica imposta dai fogli di stili. Inoltre, crawler e spider, avranno una lettura corretta dell’HTML ignorando la sostituzione grafica offerta all’utente finale. Inserire direttamente un’immagine (TAG img), infatti, rende il testo del titolo inaccessibili ai normali lettori ASCII (crawler, spider, blog plugin, screen-reader, etc…).

Continua...

Snipplr code 2.0: frammenti (snipp) di codice utile

Snipplr Era da tempo che volevo segnalare questo utilissimo servizio dedicato al mondo della programmazione. Snipplr (code 2.0) è un vero e proprio aggregatore o repository di frammenti di codice utili. È possibile registrarsi gratuitamente ed inviare le proprio porzioni di codice e, soprattutto, usufruire dei tantissimi snipp già presenti su sito. I linguaggi trattati sono tantissimi (Actionscript, ASP, C#, MatLab, PHP, Rails, SVN, etc…), tutti ben ordinati e catalogati. È possibile anche installare un comodo plugin per WordPress in grado di visualizzare sul nostro blog un snipp-code tramite il suo id univoco.

Continua...

Gratis la Pocketguide Adobe AIR for Javascript

image Scritta direttamente dal team AIR, questa guida è rilasciata sotto la licenza Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License, insomma è liberamente accessibile! Nonostante la sua semplicità, contiene molte informazioni interessanti (e corrette, visto che è il team AIR a scriverle) per lo sviluppo di applicazioni AIR con Javascript, HTML e CSS.  Grazie ad Ajaxian è possibile scaricare il testo, in formato PDF,  cliccando qui, oppure – se preferite – potete ordinarlo su Amazon. Su Adobe Labs trovate altre utili informazioni.

Continua...

WordPress: categorie in dropdown

Premetto che stiamo parlando di WordPress 2.0.6. Se cercate di impostare le categorie in modalità “combo” – dropdown – occhio alle indicazioni proposte sul sito di WordPress. Quando si realizza una FORM HTML con un bottone SUBMIT bisogna stare attenti a non impostare il nome del TAG INPUT proprio a “submit”, pena mandare in rovina tutto appena si cerca di submittare la FORM via Javascript.

Sul sito di WordPress viene proposto il seguente codice:

1
2
3
4
5
6
<li id="categories">
<?php _e('Categories:'); ?>
<ul><li>
<form action="<?php echo $PHP_SELF ?>" method="get"> <?php dropdown_cats(); ?> <input type="submit" name="submit" value="view" /> </form>
</li></ul>
</li>

Notate che il bottone di invio ha l’attributo name impostato a “submit”. Se cercate di esguire una codice Javascript tipo questo:

1
document.forms.nomeform.submit();

L’interprete va in confusione in quanto non distingue il metodo submit() dall’elemento “submit” che è invece un bottone! La soluzione è semplice: chiamate il bottone come vi pare ma non “submit”!

Il codice che ho usato per visualizzare le categorie in dropdown mode io è il seguente:

1
2
3
4
5
<div id="cmb_months">
<form name="xcats" id="xcats" action="/index.php" method="get">
<?php dropdown_cats(); ?>
</form>
</div>

Ho dovuto anche modificare il Kernel di WordPress (cosa che non andrebbe fatta…). Nel file “template-functions-category.php” ho modificato la funzione dropdown_cats() quando prepara il TAG SELECT ho aggiunto:

1
onchange="document.forms['xcats'].submit();"

Ecco il pezzo di codice da rintracciare:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$categories = $wpdb->get_results($query);
echo '<select name="cat" class="postform" onchange="document.forms[\'xcats\'].submit();">'."\n";
if ( intval($optionall) == 1 ) {
  $all = apply_filters('list_cats', $all);
  echo "\t<option value='0'>Seleziona una Categoria</option>\n";
}
if ( intval($optionnone) == 1 )
  echo "\t<option value='-1'>".__('None')."</option>\n";
if ( $categories ) {
  foreach ( $categories as $category ) {
    $cat_name = apply_filters('list_cats', $category->cat_name, $category);
    echo "\t<option value=\"".$category->cat_ID."\"";
    if ( $category->cat_ID == $selected )
      echo ' selected="selected"';
    echo '>';
    echo $cat_name;
    if ( intval($optioncount) == 1 )
      echo '&nbsp;&nbsp;('.$category->cat_count.')';
    if ( intval($optiondates) == 1 )
      echo '&nbsp;&nbsp;'.$category->lastday.'/'.$category->lastmonth;
    echo "</option>\n";
  }
}
echo "</select>\n";

Una cosa che la funzione non fa è impostare il combo sulla categoria scelta quando viene ricaricata la pagina… appena ho tempo lo guardo meglio.

Come nota a tutto ciò, per esigenze di completezza, sottolineo che bisognava agire con un codice non intrusivo (Unobtrusive) invece di inserire l’onchange direttamente nella costruzione del combo. Inoltre le categorie visualizzate con il combo non sono accessibili per i browser con Javascript disabilitato. Tuttavia questo lo si può risolvere utilizzando il TAG NOSCRIPT nella sidebar e visualizzare le categorie come lista di link – modalità di default di WordPress – aggiustamenti che farò a breve ;) .

Continua...

Adobe Apollo Alpha Release

Finalmente Adobe ha rilasciato la versione Alpha di Apollo. Siamo ancora lontani dalla versione finale, tuttavia è possibile verificare alcune delle sue funzionalità grazie ai Demo delle applicazioni (file .air) proposte online. L’installazione (Apollo runtime) di questa Alpha pesa circa 6Mb – per Windows. I Demo (Apollo sample applications) non arrivano a pesare nemmeno 600Kb. Dopo aver installato il runtime di Apollo nulla sembrerà cambiato sul vostro PC (non viene aggiunto nessun link sul desktop o sulla barra delle applicazioni), nonostante abbiate installato – di fatto – il nuovo browser di Adobe! Vedi Web2.0: Adobe ci prova con Apollo? 

Continua...

Dove Javascript vince

Scegliere la tecnologia da usare nello sviluppo di una Web Application è di vitale importanza, per non ritrovarsi nei guai subito dopo. Il tipo di Web Application, le sue caratteristiche di funzionamento, sono il primo punto da prendere in considerazione per poter scegliere il FrameWork e le tecnologie correlate.
Ho spesso discusso sull’efficacia di script Javascript nei confronti di tecnologie diverse come Adobe Flash o Java. Tuttavia è bene sottolineare un aspetto importante spesso sottovalutato: l’accesso al DOM. Javascript, in questo caso, è il candidato (per non dire il solo) prediletto per questo tipo di operazione.

Strumenti con Snap, ad esempio, funzionano su un semplicissimo meccanismo: quando la pagina HTML è caricata (e dopo aver inserito il caricamento dello script Javascript) viene eseguita una scansione della pagina HTML e aggiunto un nuovo codice in punti particolari. Nel caso specifico di Snap vengono identificati tutti i link a pagine esterne (o interne nella configurazione dell’ultimo rilascio), i TAG <A> per indenderci. Questi vengono modificati in modo tale che al passaggio del mouse si apra una finestra di anterpima del link (vedi questo stesso Blog per un esempio).

Non solo Snap ma molti altri script Javascript fanno praticamente la stessa cosa. Ultimamente questa tecnica si è largamente diffusa grazie alla libreria Prototype, che mette a disposizione tutta una serie di metodi (come il famoso $ o doppio-dollaro $$ – vedi Prototype: l’uso del doppio dollaro ($$)) sia per rintracciare che modificare – al volo – gli elementi di una pagina HTML.

Muoversi all’interno del DOM HTML è dunque compito specifico di Javascript. Storicamente, tra l’altro, Javascript fu introdotto proprio per leggere e scrivere i contenuti di una pagina HTML.
Se ad esempio volessimo fare alcune modifiche ad una pagina HTML tramite Adobe Flash, ci aggorgeremmo – o presto o tardi – di essere costretti ad invocare una funzione Javascript. Il nuovo ActionScript 3.0, ad esempio, mette a disposizione una classe (ExternalInterface) adatta a tale scopo. Una volta (nelle precedenti versioni di ActionScript) si usava il comando getURL() – oggi sostituita dalla migliore flash.net.navigateToURL() – o fscommad() per chiamare una funzione Javascript:

1
getURL("javascript:miaFunzione()");

Inoltre:

The ExternalInterface class is the External API, an application programming interface that enables straightforward communication between ActionScript and the Flash Player container; for example, an HTML page with JavaScript, or a desktop application with Flash Player embedded.

Notate quel “desktop application” che tanto ricorda Apollo!

Oggi, grazie a ExternalInterface, è possibile invocare una funzione Javascript in modo quantomeno più pulito (questa classe permette una gestione notevolmente più efficace rispetto a getURL(), come ad esempio il passaggio di parametri):

1
2
3
4
5
6
/* calls the external function "addNumbers"
passing two parameters, and assigning that function's result
to the variable "result" */
var param1:uint = 3;
var param2:uint = 7;
var result:uint = ExternalInterface.call("addNumbers", param1, param2);
1
2
3
4
5
6
<script><!--
    // adds two numbers, and sends the result back to ActionScript
    function addNumbers(num1, num2) {
        return (num1 + num2);
    }
// --></script>

Cosa possiamo concludere quindi? Tra tutti i vari framework e librerie disponibili l’analisi iniziale del progetto che si vuole realizzare rimane di fondamentale importanza. Sbagliare questa fase può compromettere seriamente le successive fasi di qualsiasi progetto Web2.0. Javascript, quindi, vince su tutti quando si deve interagire con il DOM.

Continua...

Reverse Engineering: i compressori di codice

Una questione trascurata nell’ambito del Web2.0 è la protezione del codice sorgente. In un ottica Open Source, dove il Web2.0 trova nella beta la sua massima espressione, condividere e far partecipare la comunità lascia sicuramente in secondo piano questioni legate alla protezione del codice sorgente. Ricordiamo, infatti, che gli script Javascript vengono scaricati all’interno del browser dal Web Server, come file testuali, quindi totalmente visibili all’utente finale.
Mentre il codice Server è protetto per definizione (è impossibile accedere al codice di una pagina PHP tramite il protocollo HTTP del browser, salvo i rari casi di malfuzionamento del Web Server), il codice client potrebbe essere soggetto ad un Reverse Engineering.

Esiste tuttavia una semplice protezione ideata, ai suoi esordi, per dimuire la dimensioni degli script Javascript; oggi diventati veri e propri framework in alcuni casi.
Esistono infatti applicativi e siti Web che permettono di comprimere (crunch) il codice Javascript, ma non solo. Questa caratteristica, in modalità diversa, può essere applicata anche al codice HTML e ai fogli di stile CSS. Il codice Javascript, in particolare, oltre ad essere compresso può essere nascosto, ottenendo così una protezione del codice (a vista) tale da rendere più articolata la procedura di Reverse Engineering.

Le differenze tra HTML, CSS e Javascript sono importanti e sostanziali. Mentre la compressione di pagine HTML e fogli di stile può solo agire sull’eliminazione di caratteri inutili o superflui, come ‘a capo’, ‘spazi doppi’, ecc…, Javascript è un linguaggio di programmazione che può quindi eseguire uno speciale codice per decomprimere se stesso.

JavascriptCompressor.com è un servizio gratuito, utilizzabile online, che permette di comprime un codice sorgente Javascript. Le opzioni lo rendono estremamente versatile, garantendo al contempo l’oscuramento del codice.

Esempio, codice di partenza:

1
2
3
function MyFunction() {
  alert("Hello World");
}

Codice con compressione semplice:

1
function MyFunction(){alert("Hello World")}

Encoding normale:

1
eval(function(p,a,c,k,e,d){while(c--)if(k[c])p=p.replace(new RegExp('\\b'+c+'\\b','g'),k[c]);return p}('4 3(){2("1 0")}',5,5,'World|Hello|alert|MyFunction|function'.split('|')))

Ovviamente questo è un esempio, con codici piccoli comprimere non ha davvero molto senso, si rischi di peggiorare le cose e basta (a meno che non siate interessati esclusivamente all’oscuramento del codice a vista).

MemTronic Cruncher Compressor è anch’esso un servizio online (come il precedente funzionano anche in modalità offline) parzialmente gratuito, nel senso che alcune funzioni sono disponibili solo nella versione a pagamento (come la funzione Obfuscade). Rispetto al precedende servizio dovrebbe offrire maggiori prestazioni e sicurezza nel crittaggio del codice. Io li uso indistintamente, a seconda dei casi.

Peterbe.com non permette di comprimere Javascript (salvo che elimando spazi e ‘a capo’), ma propone un compressor per HTML, CSS e XHTML. Io, ad esempio, lo uso per comprimere i fogli di stili.

A meno di usare algoritmi particolari di crunching, che tuttavia appesantirebbero l’elaborazione dei dati, è sempre possibile eseguire un Reverse Engineering del codice, anche quello compresso. O presto o tardi, infatti, il codice originale deve essere inviato all’interprete del browser, il quale lo riconosce (per ora) solo in chiaro. In un futuro, con nuove versioni dei browser, questo impedimento potrebbe essere superato. Sarebbe infatti vantaggioso se venisse implementata, all’interno dei browser, una qualche tecnologia in grado di accettare codice Javascript pre-compilato, in binario per intenderci (caso mai crittato). In questo modo si abbatterebbero i tempi di download degli script, consentendo una naturale protezione dal Reverse Engineering e, non ultimo, maggior performance a livello di esecuzione degli script.

Continua...

Web2.0: Gran Paradiso-Firefox 3.0 e Apollo

È disponibile online la versione Alpha 2 di Firefox 3.0, nome in codice Gran Paradiso. Tra le novità annunciate (la versione definitiva è attesa per fine 2007) troviamo la possibilità di utilizzare il browser in modalità off-line. Tutto questo ricorda Adobe Apollo che, nonostante non si presenti come browser, ne evoca i tratti essenziali.

Continua...

Browser War: la guerra continua?

A Sunnyvale, California, Yahoo riunisce al Silicon Valley WebBuilder Mike Shaver di Mozilla, Chris Wilson del team Microsoft di IE e Hoon Lie di Opera, per confrontarsi sull’attuale state dell’eterna guerra tra i browser.

Da sottolineare sono le parole di Mike Shaver di Mozilla:

Don’t look to the W3C for the future

E le critiche alla mancata presenza di Apple:

They refused to send someone saying that “we are busy writing software”.

Che, tra l’altro, dista 10 miglia da dove si è tenuto l’incontro!

Continua...

Weebly: crea il tuo sito Online

Abbiamo parlato spesso dell’uso delle Web Application (del Web2.0) e di come il mercato del software si stia spostando online per applicazioni normalmente installate sulla nostra macchina. Ultimo importante segnale quello di Adobe (vedi Net Software) che vuole rilasciare – o sta iniziando a rilasciare – una serie di software in modalità online.

Oggi vi propongo uno strumento davvero eccezionale, Weebly, che si propone di realizzare un sito direttamente online, con tanto di dominio (tuoweb.weebly.com) e strumenti per l’editing davvero interessanti. Vedi video demo qui sotto. 


Se non vedi il video clicca qui

L’idea, ovviamente, non è nuova, ma l’approccio di Weebly mostra in modo evidente perchè a breve avere Adobe Photoshop online sarà davvero un passo avanti. Oltre alla semplicità d’uso questo servizio offre strumenti di editing interessanti, come lettori RSS, inserimento di Mappe Google, inserimento di Video (da varie fonti) e altro. L’uso di Ajax e DHTML (Dynamic HTML) è davvero per sfruttato, il che rende il lavoro di editing davvero semplice e alla portata di tutti.
Il punto interessante, a mio avviso, è che quando si inserisce un’immagine è possibile attivare un piccolo editor per effetuare operazioni varie come Crop - ritaglio - e Resize – ridimensionamento.

We just rolled out a couple of new features: You can now Edit, Crop, Resize, Enhance and Adjust your pictures in the new integrated Snipshot image editor, we’ll present a warning (but allow you to continue) if you are using an unsupported browser, we released some small updates to the themes, and a couple other small changes & fixes.

Il nodo fondamentale risiede qui. A breve strumenti come Weebly potranno avvalersi di editor di immagini come Adobe Photoshop, il che renderà l’attività di Web Design Online al pari dell’editing tradizionale.
Ovviamente questa è sola una parte di quello che potrebbe accadere; editor Video, Audio  e Testo avanzati sono i prossimi ad entrare prepotentemente online!

Continua...



Stop SOPA