Building Smart Web Sites

785 views
714 views

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
785
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building Smart Web Sites

  1. 1. Building Smart Web Sites Responsible Web Development Francisco Paulo www.opensoft.pt www.opensoft.pt
  2. 2. Responsible Web Design www.opensoft.pt
  3. 3. Web 2.0 == User Experience www.opensoft.pt
  4. 4. O que interessa no design de uma Wep App? Apresentação Interacção Organização www.opensoft.pt
  5. 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. 6. Hierarquia Visual www.opensoft.pt
  7. 7. “Don’t make me think.” - Steve Krug www.opensoft.pt
  8. 8. www.opensoft.pt
  9. 9. www.opensoft.pt
  10. 10. www.opensoft.pt
  11. 11. O que permite uma hierarquia visual bem definida? Mensagens Acções Informação www.opensoft.pt
  12. 12. Mensagem www.opensoft.pt
  13. 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. 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. 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. 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. 17. Acções www.opensoft.pt
  18. 18. www.opensoft.pt
  19. 19. www.opensoft.pt
  20. 20. Informação www.opensoft.pt
  21. 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. 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. 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. 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. 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. 26. Acessibilidade www.opensoft.pt
  27. 27. www.opensoft.pt
  28. 28. 99% das aplicações web não são acessíveis. www.opensoft.pt
  29. 29. 99% das aplicações web que dizem que o são, estão a “mentir”. www.opensoft.pt
  30. 30. Percentagem do gráfico que se parece com o Pacman. www.opensoft.pt
  31. 31. Checklists Web Content Accessibility Guidelines 1.0, 2.0 e 3.0 www.w3.org/TR/WCAG10/ www.opensoft.pt
  32. 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. 33. User Aplicação Web Acessível WAI - AAA WAI - AA WAI - A Developer xx www.opensoft.pt
  34. 34. Checklists vs User Experience www.opensoft.pt
  35. 35. www.opensoft.pt
  36. 36. Tableless Web Design www.opensoft.pt
  37. 37. www.opensoft.pt
  38. 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. 39. header menu content footer www.opensoft.pt
  40. 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. 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. 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. 43. Unobtrusive Web Design www.opensoft.pt
  44. 44. HTML CSS JAVASCRIPT www.opensoft.pt
  45. 45. HTML CSS JS www.opensoft.pt
  46. 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. 47. HTML JS CSS www.opensoft.pt
  48. 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. 49. Isto é o melhor que conseguimos fazer? www.opensoft.pt
  50. 50. CSS JavaScript design behavior class id XHTML/HTML content/data www.opensoft.pt
  51. 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. 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. 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. 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. 55. Reboot www.opensoft.pt
  56. 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. 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. 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. 59. Browser Specific CSS www.opensoft.pt
  60. 60. www.opensoft.pt
  61. 61. .center { text-align: -moz-center; _text-align: center; } www.opensoft.pt
  62. 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. 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. 64. Liquid vs Fixed www.opensoft.pt
  65. 65. www.opensoft.pt
  66. 66. 50px .logo { margin-top:50px; margin-left:50px; 50px height:50px; 50px width:50px; } 50px www.opensoft.pt
  67. 67. www.opensoft.pt
  68. 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. 69. www.opensoft.pt
  70. 70. Responsible Web Design Hierarquia Visual Acessibilidade Tableless Web Design Unobtrusive Web Design Reboot Browser Specific CSS Liquid vs Fixed www.opensoft.pt
  71. 71. www.opensoft.pt
  72. 72. Obrigado pela vossa presença. Francisco Paulo francisco.paulo@opensoft.pt www.opensoft.pt www.opensoft.pt
  73. 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

×