Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DA355A - RWD & Ramverk

DA355A - RWD & Ramverk

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

April 12, 2021
Tweet

Transcript

  1. RWD & Ramverk Att bygga webbplatser för olika enheter, snabbt,

    effektivt och kvalitativt
  2. Frågor om kursen?

  3. None
  4. None
  5. None
  6. None
  7. None
  8. Dagens Agenda • HTML & CSS: Skapa layout • CSS

    Flexbox • CSS Grid • Responsiv webbdesign • Designa för olika enheter • Dator • Surfplatta • Mobiltelefon • CSS Breakpoints • CSS (och JS) Ramverk • Bootstrap • Layout • Komponenter • + Andra ramverk
  9. None
  10. None
  11. Layout

  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. <header> <main> <aside> <nav> <footer> <section> <article>

  20. CSS - Grid Designa webbsidor enligt ett rutnät (rader &

    kolumner)
  21. None
  22. Sidhuvud Huvudinnehåll Nyheter Övrigt

  23. Sidhuvud Huvudinnehåll Nyheter Övrigt

  24. Låt oss testa CSS Grid!

  25. Övergripande layout

  26. https://css-tricks.com/snippets/css/complete-guide-grid/

  27. CSS - Flexbox Placera en samling element enligt givna regler

  28. None
  29. Vad är flexbox? • Ett sätt att positionera ut element

    på en webbsida • Ett alternativ till att använda t.ex. float för att bygga layouter • Flexbox utgår från att positionerna ut barn-element i en ”container” på olika sätt.
  30. None
  31. #container flex-direction: row-reverse; flex-direction: row; flex-direction

  32. #container flex-direction flex-direction: column; flex-direction: column-reverse;

  33. #container flex-wrap flex-wrap: nowrap; flex-wrap: nowrap; flex-wrap: nowrap-reverse;

  34. #container flex-direction: row-reverse; flex-direction: row; justify-content justify-content: flex-start; justify-content: flex-end;

    justify-content: center;
  35. #container flex-direction: row-reverse; flex-direction: row; justify-content justify-content: flex-start; justify-content: space-between;

    justify-content: center; justify-content: space-around;
  36. align-items • align-items: flex-start; • align-items: flex-end; • align-items: flex-end;

    #container
  37. • align-items: baseline; • align-items: stretch; align-items #container

  38. Exempel på användning av flexbox

  39. None
  40. None
  41. None
  42. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  43. Låt oss testa CSS Flexbox!

  44. CSS Flexbox

  45. None
  46. None
  47. None
  48. Responsiv webbutveckling

  49. None
  50. None
  51. None
  52. None
  53. None
  54. Responsive design vs. Adaptive design

  55. Responsive v.s adaptive design https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/ Mer bra läsning: https://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly

  56. Varför är det så viktigt att fokusera på responsiv design?

  57. Allt fler surfar med mobiler/surfplattor

  58. Ger oss möjlighet anpassa innehållet efter det medium som användaren

    användare
  59. Många webbsidor hittas genom social media, vilket används mest på

    mobiler
  60. Responsiva webbplatser prioriteras av Google vid sökningar

  61. Responsiva webbsidor snabbar upp laddningstiderna

  62. 6. Vi använder mer och mer olika enheter, för att

    utföra, eller fortsätta utföra en uppgift
  63. Med andra ord – tänk responsivt!

  64. Vad krävs för att bli responsiv? 1. En flexibel, ”grid”-baserad

    layout (boxar…) 2. Flexibla bilder, media, och 3. Media queries
  65. None
  66. None
  67. http://mah-dv.github.io/

  68. None
  69. None
  70. Inspiration för responsiv design? http://mediaqueri.es/

  71. http://www.w3.org/TR/css3-mediaqueries/

  72. http://alistapart.com/article/dao The web’s greatest strength, I believe, is often seen

    as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. —John Allsopp, 2000
  73. Att formge olika medier Print & Screen

  74. Olika typer av stilmallar <link rel="stylesheet" type="text/css” media="screen" href=”style.css"> <link

    rel="stylesheet" type="text/css” media="print" href=”print.css">
  75. Att styla för olika mål

  76. Att styla för olika upplösningar

  77. Att styla för olika upplösningar

  78. Demo Print & Screen

  79. None
  80. Flexibel layout & media

  81. None
  82. None
  83. Att jobba med dynamisk bredd % istället för pixlar Auto

  84. Brytpunkter? Hur var när?

  85. None
  86. None
  87. http://www.peachpit.com/articles/article.aspx?p=1945831 "Start with the small screen first, then expand until

    it looks like *crap*. Time to insert a breakpoint!"
  88. None
  89. None
  90. None
  91. None
  92. Dags för demo!

  93. Visa korrekt layout på mobiler

  94. None
  95. Ramverk & bibliotek för webbutveckling

  96. None
  97. None
  98. Dagens föreläsning •Hur har vi arbetat tidigare? •Hur brukar man

    arbeta? •Praktiska exempel på ramverk
  99. Nytt projekt, nya möjligheter!

  100. None
  101. None
  102. Välkomna! På denna site kan man se vilka filmer som

    har beskådats, man kan även se vad filmerna handlade om och vilka betyg de fått av betraktarna tillsamman eller var och en för sig. Trots vår storabiosalong så är det inte plats till fler ordinarie medlemmar, men pass upp plötsligt vidgarvi vyerna och bjuder in till specailarrageman. g Titta gärna runt och få enkänsla för varför vi anseratt sista måndagen i månaden alltid är månadens höjdpunkt.
  103. None
  104. None
  105. Välkomna! På denna site kan man se vilka filmer som

    har beskådats, man kan även se vad filmerna handlade om och vilka betyg de fått av betraktarna tillsamman eller var och en för sig. Trots vår storabiosalong så är det inte plats till fler ordinarie medlemmar, men pass upp plötsligt vidgarvi vyerna och bjuder in till specailarrageman. g Titta gärna runt och få enkänsla för varför vi anseratt sista måndagen i månaden alltid är månadens höjdpunkt.
  106. Hmm… en ganska lång bit kvar…

  107. None
  108. None
  109. Kan vi inte vara effektivare?

  110. None
  111. Bibliotek – färdig kod att använda

  112. None
  113. De grundläggande tankarna bakom ramverk är enkla: Samla fungerande kod

    och gör den återanvändbar. Passa samtidigt på att presentera ett enhetligt sätt att skriva kod. http://computersweden.idg.se/2.2683/1.606077/ramverk-eller-inte-ramverk--det-ar-fragan
  114. Fördelar med ramverk • Utvecklare slipper skriva kod för grundläggande

    uppgifter själva • Koden i ett ramverk kan antas vara testad och tämligen felfri • Det blir enklare att få en struktur för hur kod ska skrivas • Medlemmar i utvecklarorganisationer och projekt kan enklare anamma ett enhetligt arbetssätt
  115. Exempel på ramverk för webbdesign

  116. Bootstrap Gettingstarted ess Components JavaScript Customize Themes Expo Slog

  117. None
  118. None
  119. None
  120. Får vi använda koden? Vilken licens använder sig ramverken av?

    Tips: http://choosealicense.com/
  121. None
  122. Dokumentation? Ett sätt att lära sig hur andras mjukvara fungerar!

  123. None
  124. CSS & JS-ramverk

  125. None
  126. Bibliotek för JavaScript

  127. None
  128. http://trends.builtwith.com/javascript/jQuery

  129. Ramverk för JavaScript

  130. None
  131. Hur använder man ett ramverk?

  132. None
  133. Är det ”fusk” att använda ramverk?

  134. Dags att kolla in ramverk! - Bootstrap https://getbootstrap.com

  135. Bootstrap Gettingstarted ess Components JavaScript Customize Themes Expo Slog

  136. JS HTML ess

  137. I B I Home Documentation Examples Themes Jobs Expo Blog

    Search... Gett ingstarted l n t r o duction Downlo ad Contents B r owsers& devices Ja va S cr ipt O ptions Build tools W ebpack Acces i b s i l i t y Starter template Be sure to have your pages set up with the latest design and development standards. That means using an HTMLS d oc type and including a viewport meta tag for proper resp onsive behaviors. Put it all together and your pages should look like this: <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-s··> <meta name="vieo,port" content="oidth=device-ioidth, initial-scal=e1, shrink-to-fit=no"> Layout Content Components Utilities Extend Migration <!-- Bootstrap ess --> <link rel="stylesheet"href="https/:/maxcdn.bootstarpcdn.com/bootstrap/4.0.0- beta/css/bootstrap.min.css··integrit </head> <body> <h1>Hello, tvorld!</h1> <!-- Optional JavaScript --> <!-- jQueryfirst, then Popper.js, then Bootstrap JS --> <scritpsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtikvYIK3UENzmM7KCkRr/rE9/ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypi <scritp src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch </body> </html> ◄
  138. I B I Home Documentation Examples Themes Jobs Expo Blog

    Search... Precompiled Bootstrap Once downloaded, unzip the compressed folder and you'II see something like this: Gett ingstarted lntroduction Downlo ad Contents Browsers & devices JavaScript Optio ns Build too ls Webpack Access ibility boot s t rap/ boot st rap. cssm. ap boot st rapm. i n . cs s boot st rapm. i n. cs sm . ap f- ess/ I f- boot st rap. css I f- I f- I L- L_ js / f- L- boot st rap. js boot st rapm. i n . js Layout eontent eomponents Utilities Extend Mig ration This is the most basic form of Bootstrap: precompiled files for quick drop -in usage in nearly any web project. We provide compiled ess and JS ( boot st ra p. • ), as well as compiled and minified ess and JS ( bootst rapm. i n . * ). ess source maps ( bootst rap. •m.ap ) are available for use with certain browsers· developer tools. Bootstrap source code The Bootstrap source code download includes the precompiled ess and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includesthe following and more: boot s t rap/ f- dis t /
  139. Vad ingår i Bootstrap?

  140. Vad ingår i Bootstrap? • Layout • Responsiv layout genom

    ”grids” • Grundläggande CSS • Typografi • Tabeller • Figurer • Bilder • Etc. • Komponenter • Olika visuella / funktionella komponenter så som menyer/knappar/bildspel/etc. • Hjälpmedel för att skräddarsy sin webbsida
  141. None
  142. None
  143. Låt oss ta en närmre titt! =) https://getbootstrap.com