Piccole funzioni utili in Javascript

Per quanto evoluto sia asp.net, con tutte le funzionalità che sono state aggiunte per rendere il più simile possibile lo sviluppo di applicazioni Web e applicazioni Windows, resta sempre un linguaggio di programmazione server-side che richiede quindi il postback della pagina affinchè ogni porzione di codice venga elaborata.

Per questioni diciamo "estetiche" o più spesso di maggiore fruibilità da parte degli utenti è spesso preferibile procedere alla maggior parte possibile di controlli relativi all'interfaccia grafica o all'input dell'utente attraverso linguaggi client-side tra i quali senza dubbio, Javascript regna sovrano.

Volevo qui presentarvi tre semplicissime porzioni di codice che tuttavia hanno il potere a mio avviso, di semplificare e migliorare la resa finale.

Il primo punto è dedicato alla funzione confirm, che produce un messagebox che, a differenza del ben noto alert richiede all'utente la scelta tra Si e No.

if (confirm('Vuoi veramente eliminare questa foto?')==true) {
  location.href = 'Pictures_Del.aspx?imgid=' + img_id;
}

Il secondo script verifica se, durante la digitazione sia stato premuto il tasto Invio eseguendo, in caso affermativo il codice desiderato (ad es. l'invio del form o il passaggio alla textbox successiva)

function CheckKey() {
   if (event.keyCode==13) {
   //esegui;
  }
}

Chiaramente la funzione CheckKey() va richiamata nell'evento onKeyUp di ogni textbox o altro controllo che vogliamo monitorare.

Come ultimo script inserisco il classicissimo window.open per l'apertura di una pagina in una nuova finestra del browser con proprietà e dimensioni customizzate. Può sembrare superfluo presentare per l'ennesima volta questo tipo di funzione ma in fondo Repetita iuvant e poi chissà, potrebbe comunque essere di aiuto a qualcuno:

function OpenNewWin(page, w, h) {
  myWin = window.open(page, 'myWin', 'scrollbars=yes, resizable=yes, width=' + w + ', height=' + h + ', status=no, location=no, toolbar=no');
}

Tableless Layout... Si!

Qualche giorno fa mi ero ripromesso di approfittare del nuovo sviluppo di un piccolo sito che mi era capitato tra le mani per affrontare il discorso del Tableless Layout, o più semplicemente dello sviluppo della struttura di un sito attraverso i tag <div> piuttosto che con le tabelle.

Bhè, così è stato. Ieri ho ufficialmente concluso lo sviluppo e posso trarre le mie conclusioni.

Per chi come me ha sempre realizzato siti strutturati con tabelle (e ne apprezza i pregi ma ne conosce i limiti). il passaggio ai div richiede un piccolo sforzo mentale ma, se si conosce un minimo di funzionamento della logica dei fogli di stile (CSS), il passaggio è piuttosto rapido.

E' sufficiente entrare nell'ottica che ogni <div> rappresenta una porzione di pagina a se stante, alla quale possiamo assegnare peculiari proprietà di stile come lo sfondo, il carattere, l'allineamento e, cosa fondamentale per l'argomento che stiamo trattando: il posizionamento.

#header {position: relative; width: 960px;}
#menu {width: 210px; height: position: relative; float: left}
#pagebody {text-align: center; width: 750px;}

Attraverso le istruzioni CSS sopra riportate è possibile creare una pagina composta da un'intestazione, un menu a sinistra e uno spazio centrale che ospiterà il contenuto della pagina. Per quanto riguarda il codice html necessario, le istruzioni si riducono a:

<div id="header"></div>
<div id="menu"></div>
<div id="pagebody"></div>

Mi sembra evidente e quasi superfluo evidenziare l'esiguità e semplicità di questo codice rispetto a quello che sarebbe stato necessario per ottenere lo stesso risultato con le tabelle. E' evidente anche quanto sarebbe semplice per esempio invertire la posizione del menu rispetto al contenuto della pagina. Per portarlo a destra sarebbe sufficiente cambiare la proprietà float nel foglio di stile.

Considerando poi che i div possono essere nidificati proprio come le tabelle è facile immaginare come si possano ottenere layout ben più complessi.

In conclusione devo dire che è facile, con un piccolo sforzo, apprendere questo "nuovo" sistema e che i vantaggi, per la piccola esperienza che ho fin qui maturato, compensano ampiamente le 2 o 3 ore necessarie per apprendere correttamente l'uso dei <div>.

A chi fosse interessato, oltre alle solite ricerche su Google che vi forniranno tutto il materiale e il supporto di cui potreste aver bisogno, consiglio di vistare la pagina del W3C proprio dedicata a questo argomento: http://www.w3.org/2002/03/csslayout-howto.html.en

Consiglio inoltre di procurarsi un buon editor HTML che supporti il completamento automatico anche delle voci CSS come Microsoft Visual Web Developer Express (gratuito) o il nuovo Microsoft Expression Web

Tableless Layout... o no?

Come Web Designer mi sono trovato alcuni giorni fa, in occasione dell'inizio di un nuovo progetto, ad affrontare l'atroce dilemma di come strutturare il Layout del nuovo sito. Come chiunque abbia mai fatto in vita sua anche un solo sito probabilmente sa, una delle parti più delicate del progetto (chiaramente prendendo in considerazione in questo contesto solo l'aspetto grafico e tralasciando le varie considerazioni relative alla eventuale programmazione) è la creazione della struttura della pagina che dovrà poi ospitare i contenuti.

Ebbene come grafico della vecchia scuola, sono sempre stato abituato ad utilizzare tabelle per disporre i vari contenuti a mio piacimento all'interno della pagina. Sono stato abituato ad annidare tabelle dentro tabelle e ad utilizzare celle come pezzetti di un mosaico da costruire secondo i miei desideri.

Ho sempre gradito il potere di decidere l'allineamento, i bordi, lo sfondo ed ogni singolo dettaglio di ogni singola cella e dopo anni di fatica per apprenderne i segreti avevo cominciato ormai a far fare alle tabelle esattamente quello che volevo facessero. O quasi.

Se conosci l'html e il funzionamento delle tabelle, hai buone possibilità di ottenere perfettamente i risultati che vuoi, ma quando cominci ad annidare tabelle l'una dentro l'altra fai molta attenzione. Una riga o una cella non chiuse possono compromettere la visualizzazione dell'intera pagina e costringerti ad un'estenuante ricerca del tag errato.

Con l'occasione del nuovo progetto, ho deciso così di tentare la strada del Tablelesse Layout, considerando anche i seguenti fatti:

1. il W3C considera corretto questo tipo di realizzazione;
2. questo sistema facilità la fruizione delle pagine ai browser non grafici (es quelli per disabili);
3. sembra che in questo modo sia molto più facile manutenere i contenuti del sito visto che sono organizzati in blocchi logici;
4. quello che dimostra si possa ottenere con questo sistema siti come csszengarden.com

Ho già iniziato a studiare questo nuovo sistema e a parte qualche iniziale difficoltà mi sembra che il passaggio ad un layout senza tabelle non dovrebbe essere poi così difficile.

A breve posterò un nuovo articolo con le mie impressioni e con qualche consiglio.