Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Design (Web) responsiv

3 419 vues

Publié le

O prezentare despre designul Web responsiv + tehnologiile aferente. Pentru alte resurse de interes, a se vizita http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

A presentation regarding responsive Web design and various existing technologies. For additional resources of interest, visit http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Publié dans : Design

Design (Web) responsiv

  1. 1. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco Dr. Sabin Buraga Facultatea de Informatică, Universitatea „A. I. Cuza” – Iași, România www.purl.org/net/busaco invitație la un festin
  2. 2. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco aperitiv
  3. 3. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco am dori (să învățăm) să „preparăm” produse digitale aplicații – desktop, Web, mobile, omniprezente,… – oferind o funcționalitate specifică și/sau conținut de interes
  4. 4. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco ingrediente umane proiectanți (designers) dezvoltatori (technologists) strategiști (management) Alan Cooper et al., About Face (4th Edition), 2014
  5. 5. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco evoluția proceselor de dezvoltare a produselor digitale (software) Alan Cooper et al., 2014
  6. 6. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco Care este interacțiunea cu produse digitale?
  7. 7. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
  8. 8. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco interacțiunea dintre utilizator(i) și software este facilitată de o interfață cu utilizatorul (user interface)
  9. 9. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco așteptările utilizatorilor în ceea ce privește interfața Peter Morville
  10. 10. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco utilizabilitate se referă la maniera „adecvată” de exploatare de către utilizatori a funcționalității unui sistem interactiv
  11. 11. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco learnability cât de ușor se învață utilizarea sistemului? efficiency care-i modul optim de utilizare a interfeței? memorability cât de ușor e să ne reamintim interacțiunea cu aplicația? errors cum pot fi prevenite/corectate erorile utilizatorului? satisfaction utilizatorului îi place să folosească aplicația/serviciul?
  12. 12. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco http://noisydecentgraphics.typepad.com/design/images/2008/03/11/yourproduct.jpg
  13. 13. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco experiența utilizatorului (UX – User Experience) definește percepția unui produs/serviciu (digital) din punctul de vedere al persoanei/persoanelor care-l utilizează și aparenta plăcere/satisfacție conferită
  14. 14. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco http://garrettdimon.com/pages/improving_interface_design
  15. 15. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco felul întâi
  16. 16. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco Proiectarea interacțiunii cu utilizatorul (interaction design)
  17. 17. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco interacțiunea e deseori influențată de context: scopurile și atitudinea utilizatorului (e.g., starea emoțională), timpul disponibil, localizarea, mediul (social/cultural),… http://optimizely.slides.com/tobyurff/deliver-ux-that-converts-on-web-mobile-and-apps
  18. 18. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
  19. 19. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco “Design, v.: What you regret not doing later on.” /usr/games/fortune “I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.” Jeff Veen
  20. 20. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco Tradițional, interacțiunea cu utilizatorul recurge la elemente de interfață suprafețe de redare pagini, zone interactive,… elemente de interacțiune câmpuri de intrare (input fields), legături hipermedia, controale specifice (e.g., bară de defilare, buton) etc.
  21. 21. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco Cum percepe utilizatorul interfața? design vizual
  22. 22. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco Elemente importante ale designului vizual (Dan Safer, 2006) layout grid visual flow typography color, shape, texture
  23. 23. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
  24. 24. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco layout unde și cum sunt plasate conținutul și mijloacele de interacțiune http://alistapart.com/topic/layout-grids
  25. 25. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco layout pentru desktop vs. layout pentru dispozitiv mobil (Ronan Cremin & Luca Passani, 2012)
  26. 26. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco layout fix lățime prestabilită versus layout „lichid ” lățime variabilă
  27. 27. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco layout e facilitat și de template-uri (machete de prezentare) specificarea aranjamentului și stilului vizual via HTML + CSS + conținuturi grafice exemplificare: WordPress Themes – http://wordpress.org/themes/
  28. 28. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco Recurgerea la sisteme de aplicare a machetelor de prezentare – Web template systems utilizând specificații de prezentare a conținutului (Web template), datele persistente (e.g., preluate dintr-o bază de date) sunt folosite de un procesor – template engine – pentru a genera documente HTML ori alte formate
  29. 29. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco Recurgerea la sisteme de aplicare a machetelor de prezentare – Web template systems la nivel de server Haml (Ruby), Mustache (C++, JS, PHP, Python, Scala,…), Smarty (PHP), Velocity (Java) etc.
  30. 30. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco Recurgerea la sisteme de aplicare a machetelor de prezentare – Web template systems la nivel de client disponibile pentru JavaScript: Dust.js, Ejs, HandleBars, Mustache, Nunjucks,…
  31. 31. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco grid oferă o structură coerentă a informațiilor prezentate www.thegridsystem.org
  32. 32. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco aranjamentul spațial poate fi stabilit via grid – uzual, în tipografie aici, utilizarea secțiunii de aur: alistapart.com/article/content-out-layout
  33. 33. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco visual flow vizează metodele de înțelegere de către utilizator a datelor prezentate și/sau de interacțiune cu acestea context: arhitectura informațiilor (Information Architecture)
  34. 34. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
  35. 35. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco visual flow asigurarea echilibrului orizontal/vertical simetrie versus asimetrie
  36. 36. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco visual flow gruparea diverselor elemente de interfațăunitate
  37. 37. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco visual flow poate fi realizat și prin intermediul contrastului, recurgând la diverse variabile vizuale asigurarea focalizării atenției
  38. 38. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco chromatique culoarea considerată cod vizual, indicând categoria (tipul) de informații redate utilizatorului
  39. 39. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco „roata” culorilor pentru Web culori caldeculori reci armonie cromatică redarea plăcută a elementelor de interesestetică vizuală
  40. 40. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco instrumente pentru „prepararea” de palete cromatice Color Scheme Designer – colorschemedesigner.com colr – www.colr.org Colrd – colrd.com Color Explorer – colorexplorer.com
  41. 41. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco typography prezentarea conținutului textual via corpuri de literă (fonturi) conform unor anumite reguli de prezentare
  42. 42. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco typography NU înseamnă alegerea unui font „gustos”
  43. 43. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco în contextul Web-ului, a se studia http://webtypography.net/
  44. 44. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco navigabilitate găsirea „drumului” care conduce utilizatorul către satisfacerea scopului minimizarea distanțeiergonomia interfeței
  45. 45. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco navigabilitate „ingrediente” principale: meniuri, legături conexe, divizarea conținutului, harta sitului (site map), căutare internă (site search)
  46. 46. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco navigabilitate navigare multicriterială (faceted navigation/search) navigare socială navigare bazată pe termeni de conținut – tag-uri navigare cartografică …
  47. 47. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
  48. 48. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco navigabilitate semantici diferite ale legăturilor hipermedia: navigare download procesare asociere de meta-date – exemplu: tagging
  49. 49. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco felul al doilea
  50. 50. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco multitudinea dimensiunilor „meselor” cu care interacționăm pentru a savura diverse „festinuri” Web
  51. 51. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco responsive Web design utilizarea unei suite de tehnologii Web ce permite adaptarea designului la contextul de redare (e.g., orientare a ecranului, rezoluție, densitate de pixeli,…) Ethan Marcotte, 2010 www.alistapart.com/articles/responsive-web-design/ diverse „delicatese” oferite și de https://responsivedesign.is/
  52. 52. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco media queries flexible image (+media, +font) flexible/fluid grid Jacob Surber, “The Page Is Dead”, SXSWi 2012 www.slideshare.net/jacobsurber/page-death
  53. 53. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco rezoluții de ecran diverserecurgerea la valori diferite pentru anumite proprietăți CSS via reguli @media Media Queries (recomandare a Consorțiului Web, 2012) www.w3.org/TR/css3-mediaqueries/
  54. 54. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco <link rel="stylesheet" media="only screen and (color)" href="stiluri-pentru-ecrane-color.css" /> @media screen and (max-width: 768px) and (orientation: portrait) { /* stiluri pentru tablete*/ } /* redarea pe 2 coloane pentru rezoluții mari */ @media (min-width: 1140px) and (min-resolution: 300dpi) { .content { column-count: 2; column-gap: 1em; font-size: 1.5em; } } @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { /* ecran lat */ } pentru alte detalii, a se studia http://developer.mozilla.org/docs/Web/Guide/CSS/Media_queries
  55. 55. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
  56. 56. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco iPhone 5 (320 px) iPhone 6 (667 px) Android (240 px) iPad 2 (1024 px) „degustarea” designului Web cu instrumentul Responsinator http://www.responsinator.com/
  57. 57. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco multimedia responsive imagini flexibile + alte resurse grafice – e.g., video <picture> <source media="(min-width: 40em)" srcset="mare.jpg 1x, mare-hd.jpg 2x"/> <source srcset="mic.jpg 1x, mic-hd.jpg 2x" /> <img src="implicit.jpg" alt="..." /> </picture> <img src="mic.jpg" alt="Un cârnat apetisant" srcset="mare.jpg 1024w, mediu.jpg 640w, mic.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" /> informații de interes la https://responsiveimages.org/
  58. 58. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco diverse studii de caz sunt servite de http://mediaqueri.es/
  59. 59. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco multimedia responsive client – recurgerea la biblioteci JavaScript precum HiSRC – https://github.com/teleject/hisrc Foresight.js – www.cdnconnect.com/docs/foresightjs soluții de optimizare la nivel de server – exemple: http://adaptive-images.com/ http://www.resrc.it/ https://developers.google.com/speed/pagespeed/module
  60. 60. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco fonturi Web responsive fonturile externe nu trebuie încărcate în contextul dispozitivelor având rezoluții reduse ale ecranului soluții: încărcarea asincronă a fonturilor (Web font loading) considerarea graficii vectoriale – SVG (Scalable Vector Graphics) detalii la http://webtypography.net/talks/rdo13/
  61. 61. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco layout-urile flexibile utilizează lățimi relative pentru coloane în vederea organizării conținutului
  62. 62. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco responsive Web design alte strategii: adoptarea unităților de măsură relative pentru valorile unor proprietăți CSS (% em rem)
  63. 63. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco alte strategii: linearizarea conținutului în contextul redării pe dispozitive mobile layout shifter column drop http://www.lukew.com/ff/entry.asp?1514
  64. 64. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco responsive Web design alte strategii: stabilirea zonei de redare (viewport) la dimensiunea reală a ecranului dispozitivului <meta name="viewport" content="width=device-width, initial-scale=1" />
  65. 65. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco desert
  66. 66. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco responsive Web design patterns șablon de proiectare = „rețetă” ce poate fi pusă în aplicare într-un context pentru rezolvarea unei probleme date o „carte de bucate” cu rețete vizând proiectarea interacțiunii: http://profs.info.uaic.ro/~evalica/patterns/
  67. 67. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco http://bradfrost.github.com/this-is-responsive/patterns.html șabloane de proiectare pentru aranjament spațial, navigare, conținut grafic, formulare,…
  68. 68. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco situație: conținut tabelar responsiv (responsive table) posibile soluții: http://exisweb.net/responsive-table-plugins-and-patterns
  69. 69. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco situație: conținut responsiv trimis prin poșta electronică (responsive e-mail) șabloane de proiectare: http://responsiveemailpatterns.com/
  70. 70. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco …de „savurat” și niște instrumente Web specifice: Bootstrap – getbootstrap.com Foundation – foundation.zurb.com Fluid Grids – fluidgrids.com Semantic UI – semantic-ui.com Skeleton – www.getskeleton.com UIKit – getuikit.com Web Starter Kit – developers.google.com/web/starter-kit/
  71. 71. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco conținut grafic bazat pe scene din serialul „Hannibal” – www.nbc.com/hannibal/ poftă bună la experimente!

×