Building Smart Web Sites

Building Smart
Web Sites
Responsible Web Development
Francisco Paulo

www.opensoft.pt
www.opensoft.pt

Responsible Web Design

www.opensoft.pt

Web 2.0 == User Experience

www.opensoft.pt

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

Hierarquia Visual

www.opensoft.pt

“Don’t make me think.”
- Steve Krug

www.opensoft.pt

O que permite uma hierarquia visual bem definida?

Mensagens

Acções

Informação

www.opensoft.pt

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?

New to patientslikeme?
? ... Learn from our network Join Now
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

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
odio. Sed

Donec scelerisque ultricies felis.
Cras vehicula nunc.
Find people like you
Aenean orci.

Curabitur luctus egestas sapien. Phasellus
? ... fermentum nisl et enim. Suspendisse facilisis
Learn from our network
rhoncus lacus. Sed convallis magna at pede.


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.


www.opensoft.pt

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
Join Now (it’s free!) Already a member? Sign in
Proin ut pede at pede
pretium semper. Donec id
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 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

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

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)

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
S.Francisco

Seattle

Chicago

New York

Miami

www.opensoft.pt

Acessibilidade

www.opensoft.pt

99% das aplicações web
não são acessíveis.

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.

www.opensoft.pt

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

User Aplicação Web
Acessível

WAI - AAA

WAI - AA
WAI - A

Developer
xx

www.opensoft.pt

Checklists
vs
User Experience

www.opensoft.pt

Tableless Web Design

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

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

<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

Unobtrusive Web Design

www.opensoft.pt

HTML

CSS

JAVASCRIPT www.opensoft.pt

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

HTML
JS

CSS

www.opensoft.pt

Isto é o melhor que
conseguimos fazer?

www.opensoft.pt

CSS JavaScript
design behavior

class id

XHTML/HTML
content/data

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

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

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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4,
h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

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

Browser Specific CSS

www.opensoft.pt

.center {
text-align: -moz-center;
_text-align: center;
}

www.opensoft.pt

<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]>
<![endif] - ->

<!- - [if lt IE 8]>
<![endif] - ->

<!- - [if lte IE 8]>
<![endif] - ->

<!- - [if gt IE 6]>
<![endif] - ->

www.opensoft.pt

Liquid vs Fixed

www.opensoft.pt

50px

.logo {
margin-top:50px;
margin-left:50px;
50px
height:50px;
50px
width:50px;
}

50px

www.opensoft.pt

body {
5em
font-size:62.5%
}

.logo {
5em
margin-top:5em;
5em
margin-left:5em;
height:5em;
width:5em;
}
5em

www.opensoft.pt

Responsible Web Design
Hierarquia Visual
Acessibilidade
Tableless Web Design
Unobtrusive Web Design
Reboot
Browser Specific CSS
Liquid vs Fixed
www.opensoft.pt

Obrigado pela vossa presença.

Francisco Paulo
francisco.paulo@opensoft.pt

www.opensoft.pt
www.opensoft.pt

Áreas de Actuação:

E-Government - Desenvolvimento de Portais Transaccionais
SIMN – Sistema Integrado de Métodos Notariais - aplicação informática
desenvolvida de raíz para os Cartórios Notariais Portugueses;
Contact – Gestão Integrada de Actos e Contratos - aplicação informática
desenvolvida para advogados e solicitadores;

Principais Clientes:

www.opensoft.pt

Building Smart Web Sites

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Building Smart Web Sites