Archivio: 2007 March
Accessibilità ed usabilità nelle form
Dopo aver visto come creare e far funzionare un semplice motore di ricerca, ora vedremo, usando pochi accorgimenti, come renderlo accessibile via codice HTML.
Form iniziale:
HTML:
Il fatto di usare solo elementi strutturali usando l'elemento "fieldset" aiuta sicuramente l'interpretazione della pagina da parte dei browser testuali e tecnologie assistive. L'elemento "legend" servirà a dare un nome ai vari gruppi della form. Nel caso specifico avremo bisogno di un solo "legend".
HTML:
-
<legend>Modulo di Ricerca</legend>
-
</fieldset>
Occorre associare delle etichette (label) significative ai relativi input e legarle con l'attributo "for" al corrispettivo "id" dell'input.
Occorre controllare, soprattutto in caso di form molto complesse, che vi sia un ordine logico e che questo possa essere seguito anche attraverso la navigazione da tastiera spostando il focus delle azioni con il tasto "tab". Per far questo useremo l'attributo "tabindex".
HTML:
Per far si che le "input" siano accessibili anche usando le combinazioni dei tasti di scelta rapida, daremo loro l'attributo "accesskey" indicando nel label corrispettivo la lettera tra parentesi quadre.
HTML:
NB: IE: tasto ALT + numero o lettera tra parentesi + INVIO. FF: ALT + SHIFT + numero o lettera tra parentesi. Apple: componendo la combinazione del tasto CMD ("tasto mela") + numero o lettera tra parentesi.
Quindi il risultato finale del nostro semplice form sarà :
HTML:
Per approfondire:
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>
10 Firefox plugins for design developers
Colorzilla
https://addons.mozilla.org/en-US/firefox/addon/271
[With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page.]
Firebug
https://addons.mozilla.org/en-US/firefox/addon/1843
[Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.]
Html Validator
https://addons.mozilla.org/en-US/firefox/addon/249
[HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.]
IE Tab
https://addons.mozilla.org/en-US/firefox/addon/1419
[This is a great tool for web developers, since you can easily see how your webpage displayed in IE with just one click and then switch back to Firefox.]
MeasureIt
https://addons.mozilla.org/en-US/firefox/addon/539
[Draw out a ruler to get the pixel width and height of any elements on a webpage.]
Mozilla Accessibility Extension
https://addons.mozilla.org/en-US/firefox/addon/1891
[The Mozilla/Firefox Accessibility Extension makes it easier for people with a disability to view and navigate web content. Developers can use the toolbar to check their structural markup to make sure it matches the page content.]
Open Image In New Tab
https://addons.mozilla.org/en-US/firefox/addon/2248
[Adds right-click context menu item for opening images in new tabs.]
OperaView
https://addons.mozilla.org/en-US/firefox/addon/1190
[Open pages in Opera from Firefox and Mozilla context menus. Very usefull for web developers but not only!]
Screengrab!
https://addons.mozilla.org/en-US/firefox/addon/1146
[It will save what you can see in the window, the entire page, just a selection, a particular frame... basically it saves webpages as images.]
Web Developer
https://addons.mozilla.org/en-US/firefox/addon/60
[Adds a menu and a toolbar with various web developer tools.]
un semplice motore di ricerca in asp
capita spesso di dover creare un semplice motore di ricerca.
le soluzioni possono essere molteplici, questa è quella un po' "ruspante" che per un po' ho adottato io e che sicuramente può tornare utile.
poniamo che la form di ricerca sia una cosa semplicissima tipo questa
HTML:
vediamo ora la pagina che riceverà la chiamata
ASP:
-
strCerca = Request.QueryString("s")
e ricordiamoci di chiudere tutto il codice che segue all'interno dell'if seguente
ASP:
-
If strCerca<>"" then
-
'codice da inserire
-
Else
-
response.write("inserire almeno un termine di ricerca")
-
End If
quindi andiamo a sostituire gli apici, per evitare che diano problemi nella query sql e splittiamo la stringa, in modo da poter riportare i risultati ricerca per le singole parole
ASP:
-
strCerca = replace(strCerca,"/'/g","''")
-
arrCerca = Split(strCerca)
e ora vediamo la costruzione della query Sql con delle like.
sostanzialmente andiamo a fare un ciclo sull'array inserendo per ogni termine cercato la seguente richiesta:
trova qualsiasi risultato che contenga ciascun termine cercato in almeno uno tra i campi fldName1, fldName2 e fldName3 (il numero dei campi può essere aumentato o diminuito a piacere aggiungendo OR alla stringa)
ASP:
-
sql = "SELECT * FROM dbName.tblName WHERE "
-
-
For i = LBound(arrCerca) To UBound(arrCerca)
-
If arrCerca(i)<>"" Then
-
If i> 0 Then _
-
sql = sql & " AND "
-
-
sql = sql & "(tblName.fldName1 like '%" & arrCerca(i) &"%' OR tblName.fldName2 like '%" & arrCerca(i) &"%' OR tblName.fldName3 like '%"& arrCerca(i) &"%')"
-
-
End If
-
Next
spero di aver scritto tutto correttamente
css hack for browsers (included IE7)
to select the html element in different browsers:
IE 6 and below
CSS:
-
* html {
-
}
IE 7 and below
CSS:
-
*:first-child+html {
-
}
or
CSS:
-
* html {
-
}
IE 7 only
CSS:
-
*:first-child+html {
-
}
IE 7 and modern browsers only
CSS:
-
html>body {
-
}
Modern browsers only (not IE 7)
CSS:
-
html>/**/body {
-
}
10 useful links
A List Apart
http://www.alistapart.com/
[For people who makes websites.]
Accessibility101
http://accessibility101.org.uk/
[Accessible Website Design by Shaun Anderson.]
css Zen Garden
http://www.csszengarden.com/
[A demonstration of what can be accomplished visually through CSS-based design.]
Design Meltdown
http://www.designmeltdown.com/
[Design elements, trends, and problems in web design.]
Dexigner Design Portal
http://www.dexigner.com/
[Is the leading online information service for designers and artists.]
Good-Tutorials.com
http://www.good-tutorials.com/
[Good-Tutorials.com lists 13,180 and more Adobe Photoshop tutorials.]
Ideasonideas
http://www.ideasonideas.com/
[Is a blog that invites dialogue on issues relevant to communication designers and brand strategists]
Netdiver
http://www.netdiver.net/
[Digital culture magazine + new media design portal.]
WhatTheFont
http://www.myfonts.com/WhatTheFont/
[Upload a scanned image of the font and instantly find the closest matches.]
Will the browser apply the rule(s)?
http://centricle.com/ref/css/filters/
[Browser rules.]
laboratorio caffeina - le origini
Perchè la caffeina è uno stimolante e la comunicazione deve essere stimolante, perchè la caffeina può migliorare la memoria e il ragionamento logico e memoria e ragionamento logico sono fondamentali per comunicare concretamente, perchè la caffeina crea una blanda dipendenza e noi ne siamo affetti.
Dal 1998, di fatto, Diego e io lavoriamo su progetti web.
Eravamo 2 ragazzini e abbiamo cominciato per passione.
Abbiamo creato i nostri progetti e li abbiamo portati avanti da autodidatti.
Con i limiti che ne conseguivano.
Poi gli anni sono passati e ora per entrambi è diventata una professione (seppure in città e ambiti diversi).
Il progetto di aprire un laboratorio di comunicazione web insieme è rimasto un sogno nel cassetto e quindi ci siamo ritagliati questo luogo virtuale in cui portiamo avanti i nostri progetti e condividiamo le conoscenze acquisite.
Un po' perchè scambiarsi 20 mail al giorno con "hai visto questo script?", "hai letto quell'articolo?", "cosa ne dici di questo?" alla lunga è pedante, un po' perchè crescendo professionalmente è cresciuta anche la cerchia di conoscenti, collaboratori, colleghi e amici che del web fanno un mestiere (o un hobby d'alto bordo).
Quindi abbiamo pensato di confrontarci e condividere.
La partecipazione è aperta a chiunque voglia collaborare.
