Tag: coding
Scroll boxes
Il titolo forse non è dei più immediati, ma vorrei presentare delle proprietà degli elementi HTML utilizzabili con Javascript per creare degli scroller personalizzabili o automatici ( classico box delle news a scorrimento continuo ) o quant'altro preveda il movimento di un blocco scrollabile.
Innanzitutto presentiamo le proprietà degli elementi HTML che utilizzeremo negli script.
clientHeight
Proprietà in sola lettura che ritorna il numero di pixels dell'altezza interna di un elemento, incluso il padding ma escluse l'altezza della scrollbar, del bordo o del margine.
JavaScript:
-
var element = document.getElementById(id);
-
var height = element.clientHeight;
clientWidtht
È il corrispettivo di clientHeight ma per la larghezza interna di un elemento.
JavaScript:
-
var widht = element.clientWidtht;
scrollHeight
È una proprietà in sola lettura che restituisce il numero di pixels dell'altezza di un elemento relativa al layout, quindi comprensiva di padding e bordi.
JavaScript:
-
var scrollHeight = element.scrollHeight;
scrollWidth
È il corrispettivo di scrollHeight ma riguardante la larghezza un elemento.
JavaScript:
-
var scrollWidth = element.scrollWidth;
scrollTop
È una proprietà in lettura e scrittura che può assumere un valore qualsiasi intero positivo rappresentate la distanza in pixel tra il lato superiore e la prima parte visibile dell'elemento countenuto.
JavaScript:
-
var scrollTop = element.scrollTop;
scrollLeft
È il corrispettivo di scrollHeight ma riguardante la larghezza un elemento.
JavaScript:
-
var scrollLeft = element.scrollLeft;
Schema riassuntivo
Note: le proprietà presentate sino ad ora sono state introdotto dal object model di MSIE, quindi non sono nè una specifica nè una raccomanandazione W3C. In ogni caso sono implementate anche dal render Gecko ( Firefox, Mozilla, Netscape, etc. )
Queste proprietà si applicano a numerosi elementi, per avere maggiori dettagli consultate pure la MSDN DHTML library
tips and tricks per il seo: usare gli elementi HTML
Un documento HTML è composto principalmente da due parti: head e body. Nel'"head" vi sono informazioni circa il documento corrente: il titolo, le parole chiave ed altri dati che non sono considerati come contenuto del documento. La parte "body" invece racchiude il contenuto di cui si ha generalmente bisogno. In questo articolo ci concentreremo sull'importanza della correttezza formale del body anche dal punto di vista del SEO (Search Engine Optimization).
Le informazioni sono contenute in diversi elementi ognuno dei quali ha una specifica funzione, alcuni sono detti "elementi di blocco" (block elements) come per es. <div>, <p> e <ul>; altri vengono definiti "elementi in riga" (text level) come per es. <em>, <cite> e <tt> (testo a spaziatura fissa, poco conosciuto). La distinzione tra i due viene fatta seguendo alcune nozioni: Modello di contenuto; Formattazione; Direzione del testo.
In generale possiamo dire che gli elementi di blocco possono contenere elementi in riga o altri elementi di blocco (a questo ci sono delle limitazioni logiche) mentre gli elementi in riga non possono mai contenere elementi di blocco. Per esempio,
è sbagliato. Mentre
sarà corretto.
Perchà© questa introduzione? Perchà© avere pagine "pulite" e validate secondo gli standard (usando quindi i markup HTML) del W3C aiuta ad essere indicizzati meglio e perchà©, è ormai assodato, pagine scritte utilizzando correttamente gli elementi HTML o XHTML saranno "lette" più velocemente dagli spider dei motori di ricerca.
- Un "errore" classico è quello di usare in maniera inpropria i <div> (un po' come avveniva tempo fa con le tabelle). Invece che,
usiamo,
poi sfruttiamo la cascata del css per intervenire sull'estetica
CSS:
-
div#header h1{...}
- Altra buona regola sarebbe quella di sfruttare le liste (ul, ol e dl) per inserire una serie di link, o per fare dei menu di navigazione del sito e ricordiamoci di usare l'attributo "title" dei link:
- Rispettare l'ordine logico di importanza degli elementi di titolo <h1> ... <h6>
- àˆ preferibile usare il tag <strong> invece che <b> in quanto il bold è un tag non più raccomandato dal W3C come l'italic (usare <em>).
- In generale bisognerebbe strutturare il codice delle pagine in modo che i contenuti importanti si trovino il più possibile vicini all'inizio del markup e che i menu vengano dopo le informazioni importanti (gestendo via css la loro posizione a video):
HTML:
- Evitare l'utilizzo di JavaScript "intrusivi" per gestire la navigazione, perchà© il crawler non interpreta gli script e non seguirà questi collegamenti.
Questi solo alcuni degli aspetti da valutare e tenere in considerazione, ovviamente ce ne sono altri e spero che nei commenti ne vengano fuori tanti...
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ò! ;)
Utilizzare il Tab in una Textarea
Nel normale funzionamento di un form il tasto tab passa da un campo all'altro.
Capita però (come in questo blog) di dover dare la possibilità a chi scrive di inserire del codice e tutti sappiamo quanto sia FONDAMENTALE l'indentazione per renderlo comprensibile.
O ci si affida all'intelligenza di chi scrive, sperando che utilizzi in modo coerente gli spazi o il copia e incolla, oppure si utilizza questa funzione (via l4x.org ):
JavaScript:
-
function insertTab(event,obj) {
-
var tabKeyCode = 9;
-
if (event.which) // mozilla
-
var keycode = event.which;
-
else // ie
-
var keycode = event.keyCode;
-
if (keycode == tabKeyCode) {
-
if (event.type == "keydown") {
-
if (obj.setSelectionRange) { // mozilla
-
var s = obj.selectionStart;
-
var e = obj.selectionEnd;
-
obj.value = obj.value.substring(0, s) + "\t" + obj.value.substr(e);
-
obj.setSelectionRange(s + 1, s + 1);
-
obj.focus();
-
} else if (obj.createTextRange) { // ie
-
document.selection.createRange().text="\t"
-
obj.onblur = function() { this.focus(); this.onblur = null; };
-
} else {
-
// unsupported browsers
-
}
-
}
-
if (event.returnValue) // ie ?
-
event.returnValue = false;
-
if (event.preventDefault) // dom
-
event.preventDefault();
-
return false; // should work in all browsers
-
}
-
return true;
-
}
HTML:
-
<textarea onkeydown="return insertTab(event,this);" onkeyup="return insertTab(event,this);" onkeypress="return insertTab(event,this);" rows="30" cols="80"></textarea>
