Apresentação sobre utilização de CSS no desenvolvimento de sites. Boas práticas de acessibilidade. Desenvolvimento de sites orientado ao utilizador.

1. Building Smart
Web Sites
Responsible Web Development
Francisco Paulo
www.opensoft.pt
www.opensoft.pt

2. Responsible Web Design
www.opensoft.pt

3. Web 2.0 == User Experience
www.opensoft.pt

4. O que interessa no design de uma Wep App?
Apresentação
Interacção
Organização
www.opensoft.pt

5. 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

6. Hierarquia Visual
www.opensoft.pt

7. “Don’t make me think.”
- Steve Krug
www.opensoft.pt

8. www.opensoft.pt

9. www.opensoft.pt

10. www.opensoft.pt

11. O que permite uma hierarquia visual bem definida?
Mensagens
Acções
Informação
www.opensoft.pt

12. Mensagem
www.opensoft.pt

13. 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

14. 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

15. 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

16. 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
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

17. Acções
www.opensoft.pt

18. www.opensoft.pt

19. www.opensoft.pt

20. Informação
www.opensoft.pt

21. 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

22. 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

23. 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

24. 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

25. 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

26. Acessibilidade
www.opensoft.pt

27. www.opensoft.pt

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

29. 99% das aplicações web
que dizem que o são,
estão a “mentir”.
www.opensoft.pt

30. Percentagem do gráfico
que se parece com o
Pacman.
www.opensoft.pt

31. Checklists
Web Content Accessibility Guidelines 1.0, 2.0 e 3.0
www.w3.org/TR/WCAG10/
www.opensoft.pt

32. “
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

33. User Aplicação Web
Acessível
WAI - AAA
WAI - AA
WAI - A
Developer
xx
www.opensoft.pt

34. Checklists
vs
User Experience
www.opensoft.pt

35. www.opensoft.pt

36. Tableless Web Design
www.opensoft.pt

37. www.opensoft.pt

38. 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

39. header
menu content
footer
www.opensoft.pt

40. <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

41. <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

42. 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

43. Unobtrusive Web Design
www.opensoft.pt

44. HTML
CSS
JAVASCRIPT www.opensoft.pt

45. HTML
CSS
JS
www.opensoft.pt

46. <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

47. HTML
JS
CSS
www.opensoft.pt

48. <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

49. Isto é o melhor que
conseguimos fazer?
www.opensoft.pt

50. CSS JavaScript
design behavior
class id
XHTML/HTML
content/data
www.opensoft.pt

51. <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

52. 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

53. 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

54. <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

55. Reboot
www.opensoft.pt

56. 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

57. 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

58. <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

59. Browser Specific CSS
www.opensoft.pt

60. www.opensoft.pt

61. .center {
text-align: -moz-center;
_text-align: center;
}
www.opensoft.pt

62. <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

63. <!- - [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

64. Liquid vs Fixed
www.opensoft.pt

65. www.opensoft.pt

66. 50px
.logo {
margin-top:50px;
margin-left:50px;
50px
height:50px;
50px
width:50px;
}
50px
www.opensoft.pt

67. www.opensoft.pt

68. body {
5em
font-size:62.5%
}
.logo {
5em
margin-top:5em;
5em
margin-left:5em;
height:5em;
width:5em;
}
5em
www.opensoft.pt

69. www.opensoft.pt

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

71. www.opensoft.pt

72. Obrigado pela vossa presença.
Francisco Paulo
francisco.paulo@opensoft.pt
www.opensoft.pt
www.opensoft.pt

73. Á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