“Abordagens à forma de desenvolvimento de interfaces para sistemas web no âmbito da Acessibilidade e Usabilidade. Demonstrar que a qualidade destes não termina nos serviços e que muitas vezes, apesar do back-end (tipicamente) estar bem feito e robusto, podemos deitar tudo a perder com uma interface fraca. Pretende-se aliar a esta sensibilização, algumas noções de novos métodos de desenvolvimento e de pensamento sobre a web. Em particular, apresentar um conjunto novo de standards/tecnologias emergentes que podem ajudar tanto os utilizadores, como os developers. Alguns tópicos a apresentar serão: • Unobtrusive Web Development • Acessibilidade (para além das check lists) • Formulários • Microformatos e outros standards”

1. 10/27/2008
Responsible
Web Development
Responsible Web Development
Francisco Paulo
www.opensoft.pt
www.opensoft.pt
www.opensoft.pt
1

2. 10/27/2008
Responsible Web Design
www.opensoft.pt
WEB 2.0
WEB
Utilizador
www.opensoft.pt
2

3. 10/27/2008
Web 2.0 == User Experience
www.opensoft.pt
HTML JS JAVA SQL
CSS JSP
Designer Developer
“O centro do ódio”
www.opensoft.pt
3

4. 10/27/2008
O que interessa no design de uma Wep App?
Apresentação
Interacção
Organização
www.opensoft.pt
Qual é o objectivo do design?
Comunicar rapidamente...
“O que é isto?” – Utilidade
“Como é que eu uso isto?” – Usabilidade
“Eu quero usar isto?” – Desirability*
* Pago um café a quem conseguir arranjar uma tradução de jeito para isto...
www.opensoft.pt
4

5. 10/27/2008
Hierarquia Visual
www.opensoft.pt
“Don’t make me think.”
- Steve Krug
www.opensoft.pt
5

6. 10/27/2008
www.opensoft.pt
www.opensoft.pt
6

7. 10/27/2008
www.opensoft.pt
O que permite uma hierarquia visual bem definida?
Mensagens
Acções
Informação
www.opensoft.pt
7

8. 10/27/2008
Mensagem
www.opensoft.pt
patientsLikeMe
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sign in
Track your progress Username
Suspendisse in
ligula. Ut vel
Proin ut pede at pede pretium semper. Donec id
odio. Sed
orci id felis vehicula ullamcorper.
Password
Sign in
Find people like you
Proin ut pede at pede pretium semper. Donec id Forgot your password?
orci id felis vehicula ullamcorper.
New to patientslikeme?
? ... Learn from our network Join Now
Proin ut pede at pede pretium semper. Donec id
orci id felis vehicula ullamcorper.
Donec scelerisque ultricies felis.
Cras vehicula nunc.
Our Network Aenean orci.
Fusce sollicitudin Pellentesque
Proin ut pede eget luctus tortor
at pede nisl quis nisi
pretium semper
Curabitur luctus egestas sapien. Phasellus fermentum nisl et enim. Suspendisse facilisis rhoncus lacus. Sed
convallis magna at pede.
patientsLikeMe Nulla risus diam, commodo sed, consequat in, sodales in, elit. Fusce sollicitudin fringilla diam. Nam gravida diam malesuada tellus.
www.opensoft.pt
8

9. 10/27/2008
patientsLikeMe Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
my space patients
our network
Sign in
A new system of medical care
Username
by patients, for patients
• Donec porttitor Password
• dolor lacinia ullamcorper
• dui tortor tincidunt Sign in
Forgot your password?
New to patientslikeme?
Track your progress
Suspendisse in
Join Now
ligula. Ut vel
Proin ut pede at pede pretium semper. Donec id
odio. Sed
orci id felis vehicula ullamcorper.
Donec scelerisque ultricies felis.
Cras vehicula nunc.
Find people like you
Aenean orci.
Proin ut pede at pede pretium semper. Donec id
orci id felis vehicula ullamcorper.
Curabitur luctus egestas sapien. Phasellus
? ... fermentum nisl et enim. Suspendisse facilisis
Learn from our network
rhoncus lacus. Sed convallis magna at pede.
Proin ut pede at pede pretium semper. Donec id
orci id felis vehicula ullamcorper.
patientsLikeMe Nulla risus diam, commodo sed, consequat in, sodales in, elit. Fusce sollicitudin fringilla diam. Nam gravida diam malesuada tellus.
www.opensoft.pt
patientsLikeMe Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
A new system of medical care
by patients, for patients Join Now (it’s free!)
Already a member? Sign in
Find out what surviving patient are trying.
Learn about new treatments
Determine what’s right for you
Track your progress Find people like you Learn with us
? ...
Suspendisse in
ligula. Ut vel
odio. Sed
Proin ut pede at pede pretium Proin ut pede at pede pretium Proin ut pede at pede pretium
semper. Donec id orci id felis semper. Donec id orci id felis semper. Donec id orci id felis
vehicula ullamcorper. vehicula ullamcorper. vehicula ullamcorper.
Nunc tincidunt mi sed dui. Fusce arcu est,
Nunc tincidunt mi sed dui. Fusce arcu est,
posuere ultrices, vestibulum eget.
posuere ultrices, vestibulum eget.
Curabitur luctus egestas sapien. Phasellus fermentum nisl et enim. Suspendisse facilisis rhoncus lacus.
patientsLikeMe Nulla risus diam, commodo sed, consequat in, sodales in, elit. Fusce sollicitudin fringilla diam. Nam gravida diam malesuada tellus.
www.opensoft.pt
9

10. 10/27/2008
patientsLikeMe How it works? | About us | Contact links
Share real results with real patients
Track
Suspendis
for real diseases.
se in
ligula.
Proin ut pede at pede
pretium semper. Donec id
felis vehicula ullamcorper.
Patientslikeme is an entire community striving to make Find out more...
patients live better each day, every day.
Share
Already a member? Sign in
Join Now (it’s free!)
Proin ut pede at pede
pretium semper. Donec id
felis vehicula ullamcorper.
Find out more...
...
Learn
?
Active communities
 Proin ut pede asd erea  Proin ut pede asd erea Proin ut pede at pede
 At pede donc id  At pede donc id pretium semper. Donec id
felis vehicula ullamcorper.
 Felis pretium semper  Felis pretium semper
Find out more...
patientsLikeMe About us | Site map | User agreement Nulla risus diam, commodo sed, consequat in, sodales in, elit. Fusce sollicitudin
fringilla diam. Nam gravida diam malesuada tellus.
www.opensoft.pt
Acções
www.opensoft.pt
10

11. 10/27/2008
www.opensoft.pt
www.opensoft.pt
11

12. 10/27/2008
Informação
www.opensoft.pt
1.53 1.36 2.69 3.64 3.32 3.78 3.66 4.22 3.82 2.41 2.92 2.47
3.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 3.42
2.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.83
4.35 3.17 3.06 1.37 0.19 0.11 0.03 0.05 0.20 1.22 2.86 3.09
5.35 4.03 3.77 2.51 1.84 1.59 0.85 1.22 1.94 3.25 5.65 6.00
1.53 1.36 2.69 3.64 3.32 3.78 3.66 4.22 3.82 2.41 2.92 2.47
3.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 3.42
2.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.83
4.35 3.17 3.06 1.37 0.19 0.11 0.03 0.05 0.20 1.22 2.86 3.09
5.35 4.03 3.77 2.51 1.84 1.59 0.85 1.22 1.94 3.25 5.65 6.00
1.53 1.36 2.69 3.64 3.32 3.78 3.66 4.22 3.82 2.41 2.92 2.47
3.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 3.42
2.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.83
www.opensoft.pt
12

13. 10/27/2008
Precipitação média (mm/mês)
Jan Fev Mar Abr Mai Jun Jul Ago Set Out Nov Dez
S.Francisco 4.35 3.17 3.06 1.37 0.19 0.11 0.03 0.05 0.20 1.22 2.86 3.09
Seattle 5.35 4.03 3.77 2.51 1.84 1.59 0.85 1.22 1.94 3.25 5.65 6.00
Chicago 1.53 1.36 2.69 3.64 3.32 3.78 3.66 4.22 3.82 2.41 2.92 2.47
New York 3.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 3.42
Miami 2.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.83
www.opensoft.pt
Precipitação média (mm/mês)
Jan Fev Mar Abr Mai Jun Jul Ago Set Out Nov Dez
S.Francisco 4.35 3.17 3.06 1.37 0.19 0.11 0.03 0.05 0.20 1.22 2.86 3.09
Seattle 5.35 4.03 3.77 2.51 1.84 1.59 0.85 1.22 1.94 3.25 5.65 6.00
Chicago 1.53 1.36 2.69 3.64 3.32 3.78 3.66 4.22 3.82 2.41 2.92 2.47
New York 3.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 3.42
Miami 2.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.83
www.opensoft.pt
13

14. 10/27/2008
Precipitação média (mm/mês)
Jan Fev Mar Abr Mai Jun Jul Ago Set Out Nov Dez
S.Francisco 4.35 3.17 3.06 1.37 0.19 0.11 0.03 0.05 0.20 1.22 2.86 3.09
Seattle 5.35 4.03 3.77 2.51 1.84 1.59 0.85 1.22 1.94 3.25 5.65 6.00
Chicago 1.53 1.36 2.69 3.64 3.32 3.78 3.66 4.22 3.82 2.41 2.92 2.47
New York 3.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 4.42
Miami 2.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.83
www.opensoft.pt
Precipitação média (mm/mês) 4+ 3-4 2-3 1-2 < 1
Jan Fev Mar Abr Mai Jun Jul Ago Set Out Nov Dez
S.Francisco
Seattle
Chicago
New York
Miami
www.opensoft.pt
14

15. 10/27/2008
Acessibilidade
www.opensoft.pt
“...it’s very easy for the wizards to forget how
the rest of the world thinks.”
- Kim Vicente, The Human Factor
www.opensoft.pt
15

16. 10/27/2008
www.opensoft.pt
99% das aplicações web
não são acessíveis.
www.opensoft.pt
16

17. 10/27/2008
99% das aplicações web
que dizem que o são,
estão a mentir.
www.opensoft.pt
Percentagem do gráfico
que se parece com o
Pacman.
www.opensoft.pt
17

18. 10/27/2008
Checklists
Web Content Accessibility Guidelines 1.0, 2.0 e 3.0
www.w3.org/TR/WCAG10/
www.opensoft.pt
“
Use quot;altquot; for the IMG, INPUT, and APPLET elements, or
provide a text equivalent in the content of the OBJECT and
”
APPLET elements.
<img src=“...”/>
<img alt=“Mapa” src=“...”/>
<img alt=“” src=“...”/>
www.opensoft.pt
18

19. 10/27/2008
User Aplicação Web
Acessível
WAI - AAA
WAI - AA
WAI - A
Developer
xx
www.opensoft.pt
Checklists
vs
User Experience
www.opensoft.pt
19

20. 10/27/2008
www.opensoft.pt
www.opensoft.pt
20

21. 10/27/2008
www.opensoft.pt
Tableless Web Design
www.opensoft.pt
21

22. 10/27/2008
www.opensoft.pt
Tabelas dentro de tabelas dentro de tabelas...
O markup estético ultrapassa o conteúdo.
O consumo de largura de banda aumenta
desnecessariamente.
O parsing da página por screen readers torna-se
caótico.
Dificulta o trabalho de web crawlers.
www.opensoft.pt
22

23. 10/27/2008
header
menu content
footer
www.opensoft.pt
<table>
<tr>
<td colspan=quot;2quot;>
header
</td>
</tr>
<tr>
<div>header</div>
<td>
menu
<div>menu</div>
</td>
<div>content</div>
<td>
content
<div>footer</div>
</td>
</tr>
<tr>
<td colspan=quot;2quot;>
footer
</td>
</tr>
</table>
www.opensoft.pt
23

24. 10/27/2008
<div class=“header”> .header {
header
</div> }
<div class=“menu”> .menu {
menu float:left;
</div> }
<div class=“content”> .content {
content float:left;
</div> }
<div class=“footer”> .footer {
footer clear: left;
</div> }
www.opensoft.pt
O standard W3C recomenda a utilização deste tipo de
design.
Praticamente todos os browsers suportam CSS para
controlo de layout.
Facilita modificações ao design.
Melhora substancialmente a acessibilidade.
Elimina muito código desnecessário.
Torna mais fácil aos motores de pesquisa indexar o
site.
www.opensoft.pt
24

25. 10/27/2008
Unobtrusive Web Design
www.opensoft.pt
O html
o css
e o javascript www.opensoft.pt
25

26. 10/27/2008
HTML
CSS
JS
www.opensoft.pt
<span style=quot;border: 1px solid red;quot; onmouseover=quot;alert('O hai! I can haz msg?');quot;>
Point your mouse here.
</span>
Point your mouse here
www.opensoft.pt
26

27. 10/27/2008
HTML
JS
CSS
www.opensoft.pt
<script type=quot;text/javascriptquot;>
function showMsg(){
alert('O hai! I can haz msg?');
}
</script>
<style type=quot;text/cssquot;>
.msg {
border: 1px solid red;
}
</style>
<span class=quot;msgquot; onmouseover=quot;showMsg();quot;>Point your mouse here.</span>
www.opensoft.pt
27

28. 10/27/2008
Isto é o melhor que
conseguimos fazer?
www.opensoft.pt
CSS JavaScript
design behavior
class id
XHTML/HTML
content/data
www.opensoft.pt
28

29. 10/27/2008
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“.cssquot; />
.css
.css
.css
.html
.css
.css
.js
<script type=“text/javascript” src=quot;.js“/>
language=“javascript”
www.opensoft.pt
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {
// Make sure that a selection was provided
selector = selector || document;
// Handle $(DOMElement)
( JQuery )
if ( selector.nodeType ) {
this[0] = selector;
this.length = 1;
return this;
}
// Handle HTML strings
if ( typeof selector == quot;stringquot; ) {
// Are we dealing with HTML string or an ID?
var match = quickExpr.exec( selector );
www.opensoft.pt
29

30. 10/27/2008
HTML
<span id=quot;testequot; class=quot;testequot;>Point your mouse here.</span>
.teste {
CSS
border: 1px solid red;
}
var teste =
$(document).ready(function() { document.getElementById(”teste”);
$(quot;#testequot;).click(function() {
JS
alert(quot;Hello world!quot;); teste.onclick = function() {
}); alert(quot;Hello world!quot;);
}); }
www.opensoft.pt
<html>
<head>
<script type=quot;text/javascript“ src=quot;jquery.jsquot;></script>
<script type=quot;text/javascriptquot; src=quot;example.jsquot;></script>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;example.css“/>
</head>
<body>
...
<span id=quot;testequot; class=quot;testequot;>Point your mouse here.</span>
...
</body>
</html>
www.opensoft.pt
30

31. 10/27/2008
Reboot
www.opensoft.pt
Os browsers não carregam uma página
a partir da mesma base.
Isto leva a comportamentos inesperados.
O nosso objectivo é minimizar estas diferenças.
www.opensoft.pt
31

32. 10/27/2008
www.opensoft.pt
<html>
<head>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;reset.cssquot; media=quot;allquot;/>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;page.cssquot; media=quot;screenquot;/>
</head>
<body>
...
</body>
</html>
www.opensoft.pt
32

33. 10/27/2008
Device Specific CSS
www.opensoft.pt
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;page.cssquot; media=quot;screenquot;/>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;page.cssquot; media=“handheldquot;/>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;page.cssquot; media=“printquot;/>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;page.cssquot; media=“auralquot;/>
www.opensoft.pt
33

34. 10/27/2008
www.opensoft.pt
www.opensoft.pt
34

35. 10/27/2008
<html>
<head>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;reset.cssquot; media=quot;allquot;/>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“main.cssquot; media=quot;screenquot;/>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“mobile.cssquot; media=“handheldquot;/>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“aural.cssquot; media=“auralquot;/>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“print.cssquot; media=“printquot;/>
</head>
<body>
...
</body>
</html>
www.opensoft.pt
Browser Specific CSS
www.opensoft.pt
35

36. 10/27/2008
www.opensoft.pt
.center {
text-align: -moz-center;
_text-align: center;
}
www.opensoft.pt
36

37. 10/27/2008
<html>
<head>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“main.cssquot; media=“screenquot;/>
<!- - [if IE]>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“ie.cssquot; media=“screenquot;/>
<![endif] - ->
</head>
<body>
...
</body>
</html>
www.opensoft.pt
<!- - [if IE 6]>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“ie.cssquot; media=“screenquot;/>
<![endif] - ->
<!- - [if lt IE 8]>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“ie.cssquot; media=“screenquot;/>
<![endif] - ->
<!- - [if lte IE 8]>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“ie.cssquot; media=“screenquot;/>
<![endif] - ->
<!- - [if gt IE 6]>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“ie.cssquot; media=“screenquot;/>
<![endif] - ->
www.opensoft.pt
37

38. 10/27/2008
Liquid vs Fixed
www.opensoft.pt
em
www.opensoft.pt
38

39. 10/27/2008
50px
.logo {
margin-top:50px;
margin-left:50px;
50px
height:50px;
50px
width:50px;
}
50px
www.opensoft.pt
www.opensoft.pt
39

40. 10/27/2008
body {
5em
font-size:62.5%
}
.logo {
5em
margin-top:5em;
5em
margin-left:5em;
height:5em;
width:5em;
}
5em
www.opensoft.pt
www.opensoft.pt
40

41. 10/27/2008
Quirks vs Strict
www.opensoft.pt
Quando o Netscape 4 e o Explorer 4 implementaram
CSS, o seu suporte não correspondia aos standards
W3C.
Os web designers foram obrigados a desenvolver CSS
de acordo com os desejos dos browsers, não do
standard.
O que acontece quando uma página criada para essa
realidade é apresentada num browser moderno?
www.opensoft.pt
41

42. 10/27/2008
A solução:
Permitir aos web developers que conheciam os
1.
standards escolher entre dois modos de
funcionamento: Strict ou Quirks.
Continuar a apresentar páginas antigas de
2.
acordo com as regras antigas (Quirks).
www.opensoft.pt
doctype
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//EN” quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
www.opensoft.pt
42

43. 10/27/2008
HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Transitional//ENquot;
quot;http://www.w3.org/TR/html4/loose.dtdquot;>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Frameset//ENquot;
quot;http://www.w3.org/TR/html4/frameset.dtdquot;>
XHTML 1.0 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//EN“
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;>
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Frameset//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtdquot;>
XHTML 1.1 DTD
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot;
quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;>
www.opensoft.pt
Quirks Mode
www.opensoft.pt
43

44. 10/27/2008
Strict Mode
www.opensoft.pt
Quirks Mode width:200px; padding:20px;
20px 20px
160px
200px
www.opensoft.pt
44

45. 10/27/2008
Strict Mode width:200px; padding:20px;
20px 20px
200px
240px
www.opensoft.pt
1
Responsible Web Design
Hierarquia Visual
Acessibilidade
2
Tableless Web Design
Unobtrusive Web Design
Reboot
Device Specific CSS
Browser Specific CSS
Liquid vs Fixed
Quirks vs Strict
www.opensoft.pt
45

46. 10/27/2008
“Genius is eternal patience.”
- Michelangelo
www.opensoft.pt
Obrigado pela vossa presença.
Francisco Paulo
francisco.paulo@opensoft.pt
www.opensoft.pt
www.opensoft.pt
46

47. 10/27/2008
Áreas de Actuação:
Desenvolvimento Web - Desenvolvimento de soluções à medida (Soluções de e-
Government);
Operations and Mobility Solutions - Desenvolvimento e implementação da solução
O2P - Open Operational Platform;
:SIMN – Sistema Integrado de Métodos Notariais - aplicação informática
desenvolvida de raíz para os Cartórios Notariais Portugueses;
Principais Clientes:
www.opensoft.pt
47