SlideShare a Scribd company logo
Ramverk & bibliotek för
webbutveckling
Dagens föreläsning
• Hur har vi arbetat tidigare?
• Hur brukar man arbeta?
• Praktiska exempel på ramverk
Nytt projekt, nya möjligheter!
Hmm… en ganska lång bit kvar…
Sakta men säkert…
Sen CSS, JS, och finlir!
Kan vi inte vara effektivare?
Bibliotek – färdig kod att använda
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
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
Ramverk vs. Bibliotek?
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
Exempel på ramverk för
webbdesign
Får vi använda koden?
Vilken licens använder sig ramverken av?
Tips: http://choosealicense.com/
Dokumentation?
Ett sätt att lära sig hur andras mjukvara fungerar!
Bibliotek för JavaScript
http://trends.builtwith.com/javascript/jQuery
Ramverk för JavaScript
Hur använder man ett ramverk?
Är det ”fusk” att använda
ramverk?
Dags att kolla in ramverk!
- Bootstrap
https://getbootstrap.com
Vad ingår i Bootstrap?
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
Låt oss ta en närmre titt! =)
https://getbootstrap.com

More Related Content

Similar to HT18 - DA156A - Frameworks

HT23 - DA106A - Ramverk & Bibliotek
HT23 - DA106A - Ramverk & BibliotekHT23 - DA106A - Ramverk & Bibliotek
HT23 - DA106A - Ramverk & Bibliotek
Anton Tibblin
 
Metodik - Versionshantering, pakethantering, paketering och testning
Metodik - Versionshantering, pakethantering, paketering och testningMetodik - Versionshantering, pakethantering, paketering och testning
Metodik - Versionshantering, pakethantering, paketering och testning
Johan Holmberg
 
Responsiv webbdesign + HTML5 + CSS5
Responsiv webbdesign + HTML5 + CSS5Responsiv webbdesign + HTML5 + CSS5
Responsiv webbdesign + HTML5 + CSS5
Martin Carlsson
 
VT24 - Responsiv design & Ramverk inom webbutveckling
VT24 - Responsiv design & Ramverk inom webbutvecklingVT24 - Responsiv design & Ramverk inom webbutveckling
VT24 - Responsiv design & Ramverk inom webbutveckling
Anton Tibblin
 
Webbapplikationer - Kursintroduktion (anton.tibblin@mah.se)
Webbapplikationer - Kursintroduktion (anton.tibblin@mah.se)Webbapplikationer - Kursintroduktion (anton.tibblin@mah.se)
Webbapplikationer - Kursintroduktion (anton.tibblin@mah.se)
Anton Tibblin
 
Vad är webb
Vad är webbVad är webb
Vad är webb
Andreas Ek
 
Vad är webb för oss?
Vad är webb för oss?Vad är webb för oss?
Vad är webb för oss?
Andreas Ek
 
HT18 - DA156A - Extra
HT18 - DA156A - ExtraHT18 - DA156A - Extra
HT18 - DA156A - Extra
Anton Tibblin
 
TypeScript DevSum 2013
TypeScript DevSum 2013TypeScript DevSum 2013
TypeScript DevSum 2013
Michael Herkommer
 
HT23 - DA106A - Introduktion till JavaScript
HT23 - DA106A - Introduktion till JavaScriptHT23 - DA106A - Introduktion till JavaScript
HT23 - DA106A - Introduktion till JavaScript
Anton Tibblin
 
VT2019 - DA355A - jQuery och Ajax
VT2019 - DA355A - jQuery och AjaxVT2019 - DA355A - jQuery och Ajax
VT2019 - DA355A - jQuery och Ajax
Anton Tibblin
 
jQuery and Ajax
jQuery and AjaxjQuery and Ajax
jQuery and Ajax
Anton Tibblin
 
VT2018 - DA355A - Phonegap, react, vue.js
VT2018 - DA355A - Phonegap, react, vue.jsVT2018 - DA355A - Phonegap, react, vue.js
VT2018 - DA355A - Phonegap, react, vue.js
Anton Tibblin
 
HT17 - DA354A - Webbapplikation
HT17 - DA354A - WebbapplikationHT17 - DA354A - Webbapplikation
HT17 - DA354A - Webbapplikation
Anton Tibblin
 
HT18 - DA354A - Bottle web app
HT18 - DA354A - Bottle web appHT18 - DA354A - Bottle web app
HT18 - DA354A - Bottle web app
Anton Tibblin
 
Kravställning i webbprojekt
Kravställning i webbprojektKravställning i webbprojekt
Kravställning i webbprojekt
7minds AB
 
Sparx EA frukostmöte presentation
Sparx EA frukostmöte presentationSparx EA frukostmöte presentation
Sparx EA frukostmöte presentation
Lars Lundgren
 
HT19 - DA354A - Webbprogrammering med bottle
HT19 - DA354A - Webbprogrammering med bottleHT19 - DA354A - Webbprogrammering med bottle
HT19 - DA354A - Webbprogrammering med bottle
Anton Tibblin
 
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbteknikerVT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
Anton Tibblin
 

Similar to HT18 - DA156A - Frameworks (20)

HT23 - DA106A - Ramverk & Bibliotek
HT23 - DA106A - Ramverk & BibliotekHT23 - DA106A - Ramverk & Bibliotek
HT23 - DA106A - Ramverk & Bibliotek
 
Metodik - Versionshantering, pakethantering, paketering och testning
Metodik - Versionshantering, pakethantering, paketering och testningMetodik - Versionshantering, pakethantering, paketering och testning
Metodik - Versionshantering, pakethantering, paketering och testning
 
Responsiv webbdesign + HTML5 + CSS5
Responsiv webbdesign + HTML5 + CSS5Responsiv webbdesign + HTML5 + CSS5
Responsiv webbdesign + HTML5 + CSS5
 
VT24 - Responsiv design & Ramverk inom webbutveckling
VT24 - Responsiv design & Ramverk inom webbutvecklingVT24 - Responsiv design & Ramverk inom webbutveckling
VT24 - Responsiv design & Ramverk inom webbutveckling
 
Webbapplikationer - Kursintroduktion (anton.tibblin@mah.se)
Webbapplikationer - Kursintroduktion (anton.tibblin@mah.se)Webbapplikationer - Kursintroduktion (anton.tibblin@mah.se)
Webbapplikationer - Kursintroduktion (anton.tibblin@mah.se)
 
Vad är webb
Vad är webbVad är webb
Vad är webb
 
Vad är webb för oss?
Vad är webb för oss?Vad är webb för oss?
Vad är webb för oss?
 
HT18 - DA156A - Extra
HT18 - DA156A - ExtraHT18 - DA156A - Extra
HT18 - DA156A - Extra
 
TypeScript DevSum 2013
TypeScript DevSum 2013TypeScript DevSum 2013
TypeScript DevSum 2013
 
HT23 - DA106A - Introduktion till JavaScript
HT23 - DA106A - Introduktion till JavaScriptHT23 - DA106A - Introduktion till JavaScript
HT23 - DA106A - Introduktion till JavaScript
 
13 cms ht14
13 cms ht1413 cms ht14
13 cms ht14
 
VT2019 - DA355A - jQuery och Ajax
VT2019 - DA355A - jQuery och AjaxVT2019 - DA355A - jQuery och Ajax
VT2019 - DA355A - jQuery och Ajax
 
jQuery and Ajax
jQuery and AjaxjQuery and Ajax
jQuery and Ajax
 
VT2018 - DA355A - Phonegap, react, vue.js
VT2018 - DA355A - Phonegap, react, vue.jsVT2018 - DA355A - Phonegap, react, vue.js
VT2018 - DA355A - Phonegap, react, vue.js
 
HT17 - DA354A - Webbapplikation
HT17 - DA354A - WebbapplikationHT17 - DA354A - Webbapplikation
HT17 - DA354A - Webbapplikation
 
HT18 - DA354A - Bottle web app
HT18 - DA354A - Bottle web appHT18 - DA354A - Bottle web app
HT18 - DA354A - Bottle web app
 
Kravställning i webbprojekt
Kravställning i webbprojektKravställning i webbprojekt
Kravställning i webbprojekt
 
Sparx EA frukostmöte presentation
Sparx EA frukostmöte presentationSparx EA frukostmöte presentation
Sparx EA frukostmöte presentation
 
HT19 - DA354A - Webbprogrammering med bottle
HT19 - DA354A - Webbprogrammering med bottleHT19 - DA354A - Webbprogrammering med bottle
HT19 - DA354A - Webbprogrammering med bottle
 
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbteknikerVT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
 

More from Anton Tibblin

2024 - Localstorage & cookies Geolocation Mediahantering.pdf
2024 - Localstorage & cookies Geolocation Mediahantering.pdf2024 - Localstorage & cookies Geolocation Mediahantering.pdf
2024 - Localstorage & cookies Geolocation Mediahantering.pdf
Anton Tibblin
 
DA395A - VT24 - JavaScript & Document object model
DA395A - VT24 - JavaScript & Document object modelDA395A - VT24 - JavaScript & Document object model
DA395A - VT24 - JavaScript & Document object model
Anton Tibblin
 
VT24 - DA395A - Kursintroduktion: Flerplattformsapplikationer med webbtekniker
VT24 - DA395A - Kursintroduktion: Flerplattformsapplikationer med webbteknikerVT24 - DA395A - Kursintroduktion: Flerplattformsapplikationer med webbtekniker
VT24 - DA395A - Kursintroduktion: Flerplattformsapplikationer med webbtekniker
Anton Tibblin
 
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med PythonHT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
Anton Tibblin
 
HT23 - DA354A - Fil- och felhantering
HT23 - DA354A - Fil- och felhanteringHT23 - DA354A - Fil- och felhantering
HT23 - DA354A - Fil- och felhantering
Anton Tibblin
 
HT23 - DA354A - Listor och lexikon
HT23 - DA354A - Listor och lexikonHT23 - DA354A - Listor och lexikon
HT23 - DA354A - Listor och lexikon
Anton Tibblin
 
HT23 - DA354A - Kursintroduktion
HT23 - DA354A - KursintroduktionHT23 - DA354A - Kursintroduktion
HT23 - DA354A - Kursintroduktion
Anton Tibblin
 
HT23 - DA106A - Användbarhet (2)
HT23 - DA106A - Användbarhet (2)HT23 - DA106A - Användbarhet (2)
HT23 - DA106A - Användbarhet (2)
Anton Tibblin
 
HT23 - DA106A - Användbarhet 1
HT23 - DA106A - Användbarhet 1HT23 - DA106A - Användbarhet 1
HT23 - DA106A - Användbarhet 1
Anton Tibblin
 
HT23 - DA106A - Responsiv webbutveckling
HT23 - DA106A - Responsiv webbutvecklingHT23 - DA106A - Responsiv webbutveckling
HT23 - DA106A - Responsiv webbutveckling
Anton Tibblin
 
HT23 - DA106A - Layout (2)
HT23 - DA106A - Layout (2)HT23 - DA106A - Layout (2)
HT23 - DA106A - Layout (2)
Anton Tibblin
 
HT23 - DA106A - Layout med CSS (1)
HT23 - DA106A - Layout med CSS (1)HT23 - DA106A - Layout med CSS (1)
HT23 - DA106A - Layout med CSS (1)
Anton Tibblin
 
Introduktion till CSS
Introduktion till CSSIntroduktion till CSS
Introduktion till CSS
Anton Tibblin
 
HTML - Tabeller och formulär
HTML - Tabeller och formulärHTML - Tabeller och formulär
HTML - Tabeller och formulär
Anton Tibblin
 
Introduktion till HTML
Introduktion till HTMLIntroduktion till HTML
Introduktion till HTML
Anton Tibblin
 
Kursintroduktion
KursintroduktionKursintroduktion
Kursintroduktion
Anton Tibblin
 
LocalStorage - GeoLocation - Media
LocalStorage - GeoLocation - MediaLocalStorage - GeoLocation - Media
LocalStorage - GeoLocation - Media
Anton Tibblin
 
jQuery & Ajax
jQuery & AjaxjQuery & Ajax
jQuery & Ajax
Anton Tibblin
 
VT23 - RWD & Ramverk
VT23 - RWD & RamverkVT23 - RWD & Ramverk
VT23 - RWD & Ramverk
Anton Tibblin
 
JavaScript & DOM
JavaScript & DOMJavaScript & DOM
JavaScript & DOM
Anton Tibblin
 

More from Anton Tibblin (20)

2024 - Localstorage & cookies Geolocation Mediahantering.pdf
2024 - Localstorage & cookies Geolocation Mediahantering.pdf2024 - Localstorage & cookies Geolocation Mediahantering.pdf
2024 - Localstorage & cookies Geolocation Mediahantering.pdf
 
DA395A - VT24 - JavaScript & Document object model
DA395A - VT24 - JavaScript & Document object modelDA395A - VT24 - JavaScript & Document object model
DA395A - VT24 - JavaScript & Document object model
 
VT24 - DA395A - Kursintroduktion: Flerplattformsapplikationer med webbtekniker
VT24 - DA395A - Kursintroduktion: Flerplattformsapplikationer med webbteknikerVT24 - DA395A - Kursintroduktion: Flerplattformsapplikationer med webbtekniker
VT24 - DA395A - Kursintroduktion: Flerplattformsapplikationer med webbtekniker
 
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med PythonHT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
 
HT23 - DA354A - Fil- och felhantering
HT23 - DA354A - Fil- och felhanteringHT23 - DA354A - Fil- och felhantering
HT23 - DA354A - Fil- och felhantering
 
HT23 - DA354A - Listor och lexikon
HT23 - DA354A - Listor och lexikonHT23 - DA354A - Listor och lexikon
HT23 - DA354A - Listor och lexikon
 
HT23 - DA354A - Kursintroduktion
HT23 - DA354A - KursintroduktionHT23 - DA354A - Kursintroduktion
HT23 - DA354A - Kursintroduktion
 
HT23 - DA106A - Användbarhet (2)
HT23 - DA106A - Användbarhet (2)HT23 - DA106A - Användbarhet (2)
HT23 - DA106A - Användbarhet (2)
 
HT23 - DA106A - Användbarhet 1
HT23 - DA106A - Användbarhet 1HT23 - DA106A - Användbarhet 1
HT23 - DA106A - Användbarhet 1
 
HT23 - DA106A - Responsiv webbutveckling
HT23 - DA106A - Responsiv webbutvecklingHT23 - DA106A - Responsiv webbutveckling
HT23 - DA106A - Responsiv webbutveckling
 
HT23 - DA106A - Layout (2)
HT23 - DA106A - Layout (2)HT23 - DA106A - Layout (2)
HT23 - DA106A - Layout (2)
 
HT23 - DA106A - Layout med CSS (1)
HT23 - DA106A - Layout med CSS (1)HT23 - DA106A - Layout med CSS (1)
HT23 - DA106A - Layout med CSS (1)
 
Introduktion till CSS
Introduktion till CSSIntroduktion till CSS
Introduktion till CSS
 
HTML - Tabeller och formulär
HTML - Tabeller och formulärHTML - Tabeller och formulär
HTML - Tabeller och formulär
 
Introduktion till HTML
Introduktion till HTMLIntroduktion till HTML
Introduktion till HTML
 
Kursintroduktion
KursintroduktionKursintroduktion
Kursintroduktion
 
LocalStorage - GeoLocation - Media
LocalStorage - GeoLocation - MediaLocalStorage - GeoLocation - Media
LocalStorage - GeoLocation - Media
 
jQuery & Ajax
jQuery & AjaxjQuery & Ajax
jQuery & Ajax
 
VT23 - RWD & Ramverk
VT23 - RWD & RamverkVT23 - RWD & Ramverk
VT23 - RWD & Ramverk
 
JavaScript & DOM
JavaScript & DOMJavaScript & DOM
JavaScript & DOM
 

HT18 - DA156A - Frameworks