Tag: web 2.0
Form highlighting
Dopo l'autofocus, altro script a mio parere utilissimo è quello dell'highlighting degli input field e delle textarea, ovvero un semplice meccanismo javascript + css che permette di evidenziare il campo della form attualmente in uso. Vi propongo una funzione sviluppata in maniera che sia abbastanza adattabile ai diversi casi.
JavaScript:
-
window.onload = function(){
-
/*applico l'highlight a tutti i campi di input*/
-
var inputFields = document.getElementsByTagName("INPUT");
-
for(i=0; i<inputFields.length; i++){
-
var field = inputFields.item(i);
-
if ( field != undefined){
-
if ( field.type=="text" || field.type=="password" ){
-
/*onfocus cambio la classe corrente con quella focus*/
-
field.onfocus = function(){this.className="focus";}
-
/*onblur ripristino la classe di default*/
-
field.onblur = function(){this.className="";}
-
}
-
}
-
}
-
/*stesso vale per le textarea*/
-
var textareas = document.getElementsByTagName("TEXTAREA");
-
for(i=0; i<textareas.length; i++){
-
var textarea = textareas.item(i);
-
textarea.onfocus = function(){this.className="focus";}
-
textarea.onblur = function(){this.className="";}
-
}
-
}
Chiaramento a questo script va assocciato un opportuno foglio di stile con almeno una classe focus.
CSS:
-
input.focus{
-
border: 1px solid #a00;
-
}
-
textarea.focus{
-
border: 1px solid #a00;
-
}
-
input, textarea{
-
padding: 1px;
-
background-color: #eee;
-
border: 1px solid #999;
-
}
Visto che sostenere l'utilità di questi script può essere discutibile, vi propongo un esempio completo di una tipica form di contatti.
N.B: Questi script non trattano campi del tipo checkbox, ma in quel caso bisognerebbe studiare una soluzione ad hoc che evidenzi l'intera area contente tutti i radio button o checkbox e non il singolo, poichè la check box o i radio button sono uno o più valori per un campo.
Testato su:
Firefox 2.0.0.3 (Linux)
Mozilla 1.7.13 (Linux)
Epiphany 2.16.1 (Linux)
Galeon 2.0.2 (Linux)
IE 6.0 (Linux)
Introduzione DOM e Javascript
La sinergia DOM e Javascript, tecnologie alla base di AJAX (Asynchronous JavaScript and XML), insieme ai fogli di stile permette la creazione di interfacce utente Web interattive e accattivanti, vediamo quindi di introdurne i principi fondamentali.
DOM
Il Document Object Model (DOM) è un insieme di interfacce di programmazione (API) che forniscono un modello strutturato per documenti XML e dialetti derivati, come XHTML (ovviamente anche HTML), nata dal lavoro del World Wide Web Consortium (W3C).
Prendiamo una pagina HTML può essere vista in un browser o il rispettivo codice sorgente in un editor di testo, in entrambi i casi è un documento a cui il DOM fornisce una rappresentazione equivalente fatta di nodi e oggetti ai quali attribuisce proprietà e metodi.
Consideriamo un paragrafo di una ipotetica pagina HTML:
può essere rappresentato con il seguente albero DOM:
Esistono element nodes, text nodes and attribute nodes e altri ancora ( comment nodes per esempio ), da notare che tra i nodi ci sono precise relazioni di parentela, nell'esempio riportato il nodo P è padre del nodo STRONG e del nodo di testo, questi ultimi quindi sono fratelli.
Per approfondire i dettagli delle specifiche DOM niente di meglio che leggerle direttamente sul documento ufficiale W3C.
Javascript
Ora passiamo al lato puramente programmativo, Javascript implementa nativamente le API DOM. Incorpora nell'oggetto document appunto l'albero DOM della pagina HTML corrente. Quindi di seguito un po' di codice Javascript esemplificativo.
Navigare l'abero DOM
JavaScript:
-
/*ottenere il nodo <strong>*/
-
var strong = document.getElementsByTagName('STRONG')[0];
-
-
/*raggiunre il nodo <strong>*/
-
var p = strong.parentNode;
-
-
/*infine il text node*/
-
var nodeList = p.childNodes;
-
var testo_semplice = nodeList[1];
NB: nel caso delle liste di nodi, sconsiglio di usare gli indici per raggiungere il nodo desiderato, poichè gli a capo vengono codificati come text node e potremmo quindi sbagliare i conti.
Modificare l'albero DOM
e quindi il relativo documento HTML.
JavaScript:
-
/*modificare il nodo <strong>*/
-
strong.firstChild.nodeValue='ModLorem';
-
-
/*eliminare il nodo <strong>*/
-
p.removeChild(strong);
-
-
/*creare un nuovo nodo <u>Lorem</u>*/
-
var u = document.createElement('U');
-
var testo = document.createTextNode('Lorem');
-
u.appendChild(testo);
Per avere i dettagli completi vi consiglio di visionare la Gecko DOM Reference.
In questo articolo ho voluto introdurre le basi concettuali che sostengono le applicazioni che prossimamente vi mostrerò! ;)
How to be 2.0 (aka Aspettando La Bolla)
Choose a odd name, misplace dots and don't forget to be in beta version .
Then you should choose colors and create a 2.0 logo.
Layout: I suggest a gradient or a striped diagonal background, colorful rounded buttons, a huge footer (as huge as you can) and big (not, that's not big: bigger!) fonts.
Remember to get a remarkable favicon, to let people get you on their bookmark as fast as possible.
Then find a good ajax loader image, so when people will tag your (or their, which is better) content they won't be annoyed by the waiting: they'll be hypnotized by the loader.
At the end you have to create a widget to let folks share contents on their blog, myspace or whatever
...
What is your core business?
Nevermind, but how's your score?
