Responsible Web Development (Enei 2008)

Post on 19-Jun-2015

776 views 0 download

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 of Responsible Web Development (Enei 2008)

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

francisco.paulo@opensoft.pt

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;