Your SlideShare is downloading. ×
  • Like
Responsible Web Development (Enei 2008)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsible Web Development (Enei 2008)

  • 760 views
Published

“Abordagens à forma de desenvolvimento de interfaces para sistemas web no âmbito da Acessibilidade e Usabilidade. …

“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”

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
760
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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