responsible web development (enei 2008)
DESCRIPTION
“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”TRANSCRIPT
10/27/2008
1
www.opensoft.pt
Responsible Web Development
Responsible
Web DevelopmentFrancisco Paulo
www.opensoft.pt
www.opensoft.pt
10/27/2008
2
www.opensoft.pt
Responsible Web Design
www.opensoft.pt
WEB
Utilizador
WEB 2.0
10/27/2008
3
www.opensoft.pt
Web 2.0 == User Experience
www.opensoft.pt
Designer Developer
JAVA SQL
JSP
HTML JS
CSS
“O centro do ódio”
10/27/2008
4
www.opensoft.pt
Apresentação
Interacção
Organização
O que interessa no design de uma Wep App?
www.opensoft.pt
Comunicar rapidamente...
“O que é isto?” – Utilidade
“Como é que eu uso isto?” – Usabilidade
“Eu quero usar isto?” – Desirability*
Qual é o objectivo do design?
* Pago um café a quem conseguir arranjar uma tradução de jeito para isto...
10/27/2008
5
www.opensoft.pt
Hierarquia Visual
www.opensoft.pt
“Don’t make me think.”
- Steve Krug
10/27/2008
6
www.opensoft.pt
www.opensoft.pt
10/27/2008
7
www.opensoft.pt
www.opensoft.pt
Mensagens
Acções
Informação
O que permite uma hierarquia visual bem definida?
10/27/2008
8
www.opensoft.pt
Mensagem
www.opensoft.pt
patientsLikeMeLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sign in
Username
Password
Sign in
Forgot your password?
New to patientslikeme?
Join Now
Donec scelerisque ultricies felis.
Cras vehicula nunc.
Aenean orci.
Suspendisse in ligula. Ut velodio. Sed
? ...
Track your progressProin ut pede at pede pretium semper. Donec id orci id felis vehicula ullamcorper.
Find people like youProin ut pede at pede pretium semper. Donec id orci id felis vehicula ullamcorper.
Learn from our networkProin 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.
Our Network
Fusce sollicitudin Pellentesque
Proin ut pede at pede pretium semper
eget luctus tortornisl quis nisi
Curabitur luctus egestas sapien. Phasellus fermentum nisl et enim. Suspendisse facilisis rhoncus lacus. Sedconvallis magna at pede.
10/27/2008
9
www.opensoft.pt
patientsLikeMe Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sign in
Username
Password
Sign in
Forgot your password?
New to patientslikeme?
Join Now
Donec scelerisque ultricies felis.
Cras vehicula nunc.
Aenean orci.
Suspendisse in ligula. Ut velodio. Sed
? ...
Track your progressProin ut pede at pede pretium semper. Donec id orci id felis vehicula ullamcorper.
Find people like youProin ut pede at pede pretium semper. Donec id orci id felis vehicula ullamcorper.
Learn from our networkProin 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.
A new system of medical care
Curabitur luctus egestas sapien. Phasellusfermentum nisl et enim. Suspendisse facilisisrhoncus lacus. Sed convallis magna at pede.
by patients, for patients
• Donec porttitor• dolor lacinia ullamcorper• dui tortor tincidunt
our network my space patients
www.opensoft.pt
patientsLikeMe Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
? ...
Proin ut pede at pede pretiumsemper. Donec id orci id felisvehicula ullamcorper.
patientsLikeMe Nulla risus diam, commodo sed, consequat in, sodales in, elit. Fusce sollicitudin fringilla diam. Nam gravida diam malesuada tellus.
A new system of medical care
Curabitur luctus egestas sapien. Phasellus fermentum nisl et enim. Suspendisse facilisis rhoncus lacus.
by patients, for patients
Find out what surviving patient are trying.
Learn about new treatments
Determine what’s right for you
Join Now (it’s free!)
Already a member? Sign in
Track your progress Find people like you Learn with us
Suspendisse in ligula. Ut velodio. Sed
Proin ut pede at pede pretiumsemper. Donec id orci id felisvehicula ullamcorper.
Proin ut pede at pede pretiumsemper. Donec id orci id felisvehicula ullamcorper.
Nunc tincidunt mi sed dui. Fusce arcu est, posuere ultrices, vestibulum eget.
Nunc tincidunt mi sed dui. Fusce arcu est, posuere ultrices, vestibulum eget.
10/27/2008
10
www.opensoft.pt
patientsLikeMe How it works? | About us | Contact links
Share real results with real patients
for real diseases.
Patientslikeme is an entire community striving to makepatients live better each day, every day.
Join Now (it’s free!) Already a member? Sign in
Suspendisse in ligula.
?...
Track
Share
Learn
Proin ut pede at pedepretium semper. Donec idfelis vehicula ullamcorper.
Proin ut pede at pedepretium semper. Donec idfelis vehicula ullamcorper.
Proin ut pede at pedepretium semper. Donec idfelis vehicula ullamcorper.
Find out more...
Find out more...
Find out more...
Active communities
Proin ut pede asd erea At pede donc id Felis pretium semper
Proin ut pede asd erea At pede donc id Felis pretium semper
patientsLikeMe About us | Site map | User agreement Nulla risus diam, commodo sed, consequat in, sodales in, elit. Fusce sollicitudinfringilla diam. Nam gravida diam malesuada tellus.
www.opensoft.pt
Acções
10/27/2008
11
www.opensoft.pt
www.opensoft.pt
10/27/2008
12
www.opensoft.pt
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.473.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 3.422.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.834.35 3.17 3.06 1.37 0.19 0.11 0.03 0.05 0.20 1.22 2.86 3.095.35 4.03 3.77 2.51 1.84 1.59 0.85 1.22 1.94 3.25 5.65 6.001.53 1.36 2.69 3.64 3.32 3.78 3.66 4.22 3.82 2.41 2.92 2.473.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 3.422.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.834.35 3.17 3.06 1.37 0.19 0.11 0.03 0.05 0.20 1.22 2.86 3.095.35 4.03 3.77 2.51 1.84 1.59 0.85 1.22 1.94 3.25 5.65 6.001.53 1.36 2.69 3.64 3.32 3.78 3.66 4.22 3.82 2.41 2.92 2.473.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 3.422.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.83
10/27/2008
13
www.opensoft.pt
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
Precipitação média (mm/mês)
www.opensoft.pt
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
Precipitação média (mm/mês)
10/27/2008
14
www.opensoft.pt
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
Precipitação média (mm/mês)
www.opensoft.pt
Jan Fev Mar Abr Mai Jun Jul Ago Set Out Nov Dez
S.Francisco
Seattle
Chicago
New York
Miami
Precipitação média (mm/mês) 4+ 3-4 2-3 1-2 < 1
10/27/2008
15
www.opensoft.pt
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
10/27/2008
16
www.opensoft.pt
www.opensoft.pt
99% das aplicações web não são acessíveis.
10/27/2008
17
www.opensoft.pt
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.
10/27/2008
18
www.opensoft.pt
Checklists
Web Content Accessibility Guidelines 1.0, 2.0 e 3.0
www.w3.org/TR/WCAG10/
www.opensoft.pt
Use "alt" for the IMG, INPUT, and APPLET elements, orprovide a text equivalent in the content of the OBJECT andAPPLET elements.
“”
<img src=“...”/>
<img alt=“Mapa” src=“...”/>
<img alt=“” src=“...”/>
10/27/2008
19
www.opensoft.pt
WAI - A
WAI - AA
WAI - AAA
Aplicação Web Acessível
User
Developerx x
www.opensoft.pt
Checklists vs
User Experience
10/27/2008
20
www.opensoft.pt
www.opensoft.pt
10/27/2008
21
www.opensoft.pt
www.opensoft.pt
Tableless Web Design
10/27/2008
22
www.opensoft.pt
www.opensoft.pt
Tabelas dentro de tabelas dentro de tabelas...
O markup estético ultrapassa o conteúdo.
O consumo de largura de banda aumentadesnecessariamente.
O parsing da página por screen readers torna-secaótico.
Dificulta o trabalho de web crawlers.
10/27/2008
23
www.opensoft.pt
header
menu content
footer
www.opensoft.pt
<table>
<tr>
<td colspan="2">
header
</td>
</tr>
<tr>
<td>
menu
</td>
<td>
content
</td>
</tr>
<tr>
<td colspan="2">
footer
</td>
</tr>
</table>
<div>header</div>
<div>menu</div>
<div>content</div>
<div>footer</div>
10/27/2008
24
www.opensoft.pt
<div class=“header”>
header
</div>
<div class=“menu”>
menu
</div>
<div class=“content”>
content
</div>
<div class=“footer”>
footer
</div>
.header {
}
.menu {
float:left;
}
.content {
float:left;
}
.footer {
clear: left;
}
www.opensoft.pt
O standard W3C recomenda a utilização deste tipo dedesign.
Praticamente todos os browsers suportam CSS paracontrolo 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 osite.
10/27/2008
25
www.opensoft.pt
Unobtrusive Web Design
www.opensoft.pt
O html
o css
e o javascript
10/27/2008
26
www.opensoft.pt
HTML
CSS
JS
www.opensoft.pt
<span style="border: 1px solid red;" onmouseover="alert('O hai! I can haz msg?');">Point your mouse here.
</span>
Point your mouse here
10/27/2008
27
www.opensoft.pt
HTML
CSS
JS
www.opensoft.pt
<script type="text/javascript">function showMsg(){
alert('O hai! I can haz msg?');}
</script>
<style type="text/css">.msg {
border: 1px solid red;}
</style>
<span class="msg" onmouseover="showMsg();">Point your mouse here.</span>
10/27/2008
28
www.opensoft.pt
Isto é o melhor que conseguimos fazer?
www.opensoft.pt
CSSdesign
JavaScriptbehavior
XHTML/HTMLcontent/data
class id
10/27/2008
29
www.opensoft.pt
.html
.css.css.css
.css.css.js
<link rel="stylesheet" type="text/css" href=“.css" />
<script type=“text/javascript” src=".js“/>
language=“javascript”
www.opensoft.pt
jQuery.fn = jQuery.prototype = {init: function( selector, context ) {
// Make sure that a selection was providedselector = selector || document;
// Handle $(DOMElement)if ( selector.nodeType ) {
this[0] = selector;this.length = 1;return this;
}// Handle HTML stringsif ( typeof selector == "string" ) {
// Are we dealing with HTML string or an ID?var match = quickExpr.exec( selector );
( JQuery )
10/27/2008
30
www.opensoft.pt
HTM
LC
SSJS
<span id="teste" class="teste">Point your mouse here.</span>
.teste {
border: 1px solid red;
}
$(document).ready(function() {
$("#teste").click(function() {
alert("Hello world!");
});
});
var teste = document.getElementById(”teste”);
teste.onclick = function() {alert("Hello world!");
}
www.opensoft.pt
<html>
<head>
<script type="text/javascript“ src="jquery.js"></script>
<script type="text/javascript" src="example.js"></script>
<link rel="stylesheet" type="text/css" href="example.css“/>
</head>
<body>
...
<span id="teste" class="teste">Point your mouse here.</span>
...
</body>
</html>
10/27/2008
31
www.opensoft.pt
Reboot
www.opensoft.pt
O nosso objectivo é minimizar estas diferenças.
Os browsers não carregam uma página a partir da mesma base.
Isto leva a comportamentos inesperados.
10/27/2008
32
www.opensoft.pt
www.opensoft.pt
<html><head>
<link rel="stylesheet" type="text/css" href="reset.css" media="all"/><link rel="stylesheet" type="text/css" href="page.css" media="screen"/>
</head>
<body>...
</body></html>
10/27/2008
33
www.opensoft.pt
Device Specific CSS
www.opensoft.pt
<link rel="stylesheet" type="text/css" href="page.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="page.css" media=“handheld"/>
<link rel="stylesheet" type="text/css" href="page.css" media=“print"/>
<link rel="stylesheet" type="text/css" href="page.css" media=“aural"/>
10/27/2008
34
www.opensoft.pt
www.opensoft.pt
10/27/2008
35
www.opensoft.pt
<html><head>
<link rel="stylesheet" type="text/css" href="reset.css" media="all"/><link rel="stylesheet" type="text/css" href=“main.css" media="screen"/><link rel="stylesheet" type="text/css" href=“mobile.css" media=“handheld"/><link rel="stylesheet" type="text/css" href=“aural.css" media=“aural"/><link rel="stylesheet" type="text/css" href=“print.css" media=“print"/>
</head>
<body>...
</body></html>
www.opensoft.pt
Browser Specific CSS
10/27/2008
36
www.opensoft.pt
www.opensoft.pt
.center {text-align: -moz-center; _text-align: center;
}
10/27/2008
37
www.opensoft.pt
<html><head>
<link rel="stylesheet" type="text/css" href=“main.css" media=“screen"/><!- - [if IE]>
<link rel="stylesheet" type="text/css" href=“ie.css" media=“screen"/><![endif] - ->
</head>
<body>...
</body></html>
www.opensoft.pt
<!- - [if IE 6]><link rel="stylesheet" type="text/css" href=“ie.css" media=“screen"/>
<![endif] - ->
<!- - [if lt IE 8]><link rel="stylesheet" type="text/css" href=“ie.css" media=“screen"/>
<![endif] - ->
<!- - [if lte IE 8]><link rel="stylesheet" type="text/css" href=“ie.css" media=“screen"/>
<![endif] - ->
<!- - [if gt IE 6]><link rel="stylesheet" type="text/css" href=“ie.css" media=“screen"/>
<![endif] - ->
10/27/2008
38
www.opensoft.pt
Liquid vs Fixed
www.opensoft.pt
em
10/27/2008
39
www.opensoft.pt
50px
50px
50px
50px
.logo {margin-top:50px;margin-left:50px;height:50px;width:50px;
}
www.opensoft.pt
10/27/2008
40
www.opensoft.pt
5em
5em
5em
5em
body {font-size:62.5%
}
.logo {margin-top:5em;margin-left:5em;height:5em;width:5em;
}
www.opensoft.pt
10/27/2008
41
www.opensoft.pt
Quirks vs Strict
www.opensoft.pt
Quando o Netscape 4 e o Explorer 4 implementaramCSS, o seu suporte não correspondia aos standardsW3C.
Os web designers foram obrigados a desenvolver CSSde acordo com os desejos dos browsers, não dostandard.
O que acontece quando uma página criada para essarealidade é apresentada num browser moderno?
10/27/2008
42
www.opensoft.pt
A solução:
1. Permitir aos web developers que conheciam osstandards escolher entre dois modos defuncionamento: Strict ou Quirks.
2. Continuar a apresentar páginas antigas deacordo com as regras antigas (Quirks).
www.opensoft.pt
doctype<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
10/27/2008
43
www.opensoft.pt
HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
www.opensoft.pt
Quirks Mode
10/27/2008
44
www.opensoft.pt
Strict Mode
www.opensoft.pt
Quirks Mode width:200px; padding:20px;
20px 20px160px
200px
10/27/2008
45
www.opensoft.pt
Strict Mode width:200px; padding:20px;
20px 20px200px
240px
www.opensoft.pt
1Responsible Web Design
Hierarquia VisualAcessibilidade
2Tableless Web Design
Unobtrusive Web DesignReboot
Device Specific CSSBrowser Specific CSS
Liquid vs FixedQuirks vs Strict
10/27/2008
46
www.opensoft.pt
“Genius is eternal patience.”
- Michelangelo
www.opensoft.pt
Obrigado pela vossa presença.
Francisco Paulo
www.opensoft.pt
10/27/2008
47
www.opensoft.pt
Principais Clientes:
Á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;