Pro Yearly is on sale from $80 to $50! »

HT20 - DA106A - Ramverk och bibliotek för webben

1e708b2afb8622d5c5f070a94a3425a9?s=47 Anton Tibblin
September 30, 2020

HT20 - DA106A - Ramverk och bibliotek för webben

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

September 30, 2020
Tweet

Transcript

  1. Ramverk & bibliotek för webbutveckling

  2. None
  3. None
  4. None
  5. Dagens föreläsning •Hur har vi arbetat tidigare? •Hur brukar man

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

  7. None
  8. None
  9. 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 stora biosalong så är det inte plats till fler ordinarie medlemmar, men pass upp plötsligt vidgarvi vyerna och bjuder in till specailarrageman. g Titta gärnarunt och få enkänsla för varför vi anseratt sista måndagen i månaden alltid är månadens höjdpunkt.
  10. None
  11. M itt proiekt

  12. Urklipp Ordna Nytt Öppna Markera ® • t ►Den här

    datorn ►S k r ivbord ►Projekt ► Mitt projekt Qi l Q [i .- 1 8 · % / h Start Mitt projekt Dela Visa @ □i Klipp ut i X Ta bort • i leNytt objekt • 'UEnkel åtkomst • D I;+Öppna • Redigera ILi Historik Ee Markeraalla ggAvmarkeraalla @:lKopiera sökväg Kopiera Klistra (B Klistra in genväg Flytta Kopiera Byt namn Ny Egenskaper .. ClInvertera markering in till • till • mapp t( Favoriter ;J Dropbox Tidigare platser Hämtade filer mSkrivbord Il BoxSyne iIIJ D e n h är datorn rni Bild er (ilDokument Filmer GalaxyS8 [i Hämtade filer Musik Skrivbord it OSDisk (C:) 2' WebShare(L:) 2' TSANTI (M:) 2' Share(N:) Namn Senast ändrad Typ Storlek Denna mapp är tom. E."ljl Nätverk
  13. C:\Users\TSANTI\Desktop\Projekt\Mitt projekt\index.html - Notepad++ G) I lii I z; [!)

    å Vg Arkiv Redigera 2ök Yisa .Eor mat Se råk Jnställningar Vgrktyg Makro ör ! illägg Fönster 1 0 ri[;il Cl I !i@i8iI c4' 0 I ;, C Il!!l l > a I -t I[i I[5111 ; IE index.htm lC J I 1
  14. 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 stora biosalong så är det inte plats till fler ordinarie medlemmar, men pass upp plötsligt vidgarvi vyerna och bjuder in till specailarrageman. g Titta gärnarunt och få enkänsla för varför vi anseratt sista måndagen i månaden alltid är månadens höjdpunkt.
  15. Hmm… en ganska lång bit kvar…

  16. None
  17. Sakta men säkert…

  18. None
  19. Sen lite CSS, JS, och finlir!

  20. None
  21. None
  22. Kan vi inte vara effektivare?

  23. None
  24. Bibliotek – färdig kod att använda

  25. None
  26. 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
  27. 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
  28. Ramverk vs. Bibliotek?

  29. A library performs specific, well-defined operations. A framework is a

    skeleton where the application defines the "meat" of the operation by filling out the skeleton. The skeleton still has code to link up the parts but the most important work is done by the application. http://stackoverflow.com/questions/148747/what-is-the-difference-between-a-framework-and-a-library
  30. Exempel på ramverk för webbdesign

  31. Bootstrap Gettingstarted ess Components JavaScript Customize Themes Expo Slog

  32. None
  33. None
  34. None
  35. Får vi använda koden? Vilken licens använder sig ramverken av?

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

  38. None
  39. CSS & JS-ramverk

  40. None
  41. Bibliotek för JavaScript

  42. None
  43. http://trends.builtwith.com/javascript/jQuery

  44. Ramverk för JavaScript

  45. None
  46. Hur använder man ett ramverk?

  47. None
  48. Är det ”fusk” att använda ramverk?

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

  50. Bootstrap Gettingstarted ess Components JavaScript Customize Themes Expo Slog

  51. JS HTML ess

  52. 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 JavaScrip t 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 <scritpsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch </body> </html> ◄
  53. 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 Migration 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- di s t /
  54. Vad ingår i Bootstrap?

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

    ”grids” (ej samma som CSS 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
  56. None
  57. None
  58. Låt oss ta en närmre titt! =) https://getbootstrap.com