DA355A - RWD & Ramverk

Transcript

1. RWD & Ramverk Att bygga webbplatser för olika enheter, snabbt, effektivt och kvalitativt
2. Frågor om kursen?
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
11. Layout
19. <header> <main> <aside> <nav> <footer> <section> <article>
20. CSS - Grid Designa webbsidor enligt ett rutnät (rader & kolumner)
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
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.
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
42. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
43. Låt oss testa CSS Flexbox!
44. CSS Flexbox
48. Responsiv webbutveckling
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
67. http://mah-dv.github.io/
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
80. Flexibel layout & media
83. Att jobba med dynamisk bredd % istället för pixlar Auto
84. Brytpunkter? Hur var när?
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!"
92. Dags för demo!
93. Visa korrekt layout på mobiler
95. Ramverk & bibliotek för webbutveckling
98. Dagens föreläsning •Hur har vi arbetat tidigare? •Hur brukar man arbeta? •Praktiska exempel på ramverk
99. Nytt projekt, nya möjligheter!
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.
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…
109. Kan vi inte vara effektivare?
111. Bibliotek – färdig kod att använda
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
120. Får vi använda koden? Vilken licens använder sig ramverken av? Tips: http://choosealicense.com/
122. Dokumentation? Ett sätt att lära sig hur andras mjukvara fungerar!
124. CSS & JS-ramverk
126. Bibliotek för JavaScript
128. http://trends.builtwith.com/javascript/jQuery
129. Ramverk för JavaScript
131. Hur använder man ett ramverk?
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
143. Låt oss ta en närmre titt! =) https://getbootstrap.com