Download to read offline
![Programmering handlar om att instruera en
maskin eller del av en maskin […] att utföra ett
visst arbete.](https://image.slidesharecdn.com/presentation-171011132029/85/HT17-DA156A-Sammanfattning-av-kursen-79-320.jpg)
Uploaded byAnton Tibblin
HT17 - DA156A - Sammanfattning av kursen
HT17 - DA156A - Sammanfattning av kursen
More Related Content
Similar to HT17 - DA156A - Sammanfattning av kursen
HT17 - DA156A - Sammanfattning av kursen
- 2. Supersnabb genomgång avkursen
- 4. Internet och Webbenär inte samma sak Viktiga begrepp att hålla isär
- 5. Tekniker i modernwebbutveckling http://business-marketing-tips.com/wp-content/uploads/2013/07/Responsive-Web-Design1.jpg
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. Nytt sätt attanvända webben http://www.pbdink.com/blog/wp- content/uploads/2013/08/networks.jpg
- 12. Webbläsare • Tolkar kod(html m.m.) och visar upp det för användaren.
- 13.
- 14. Resultat • En webbläsarevisar oss en webbsida efter att ha renderat ett HTML- dokument
- 15. Vad består enwebbplats av? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
- 16. HTML • Hypertext MarkupLanguage • Märkspråk • Används för att ge dokument en struktur – vad är vad? • HTML byggs upp utav element som märker upp vilken typ av innehåll som finns på sidan
- 17.
- 18. Element? • Det finnsolika element som representerar olika innehåll, t.ex. rubriker, paragrafer, listor m.m. • Grundprincipen är att det finns en start- och ett sluttagg. Det innehåll som finns mellan dessa taggar tilldelas elementets formatiering. • Kan även ha attribut
- 19. Ett HTML-dokuments struktur <!DOCTYPEHTML> <html> <head> <meta charset=utf-8"> <title>Min sida</title> </head> <body> <!-- Här kommer innehåll som visas för användaren ligga --> </body> </html> Element som alltid ingår i ett HTML-dokument: - <html>, rotelementet - <head>, dokumenthuvud (info om dokumentet) - <title>, dokukmentets titel - <body>, dokumentets innehåll
- 20.
- 21.
- 22.
- 23.
- 24. Metadata • Beskriver vilketinnehåll som finns på HTML-sidan • Det kan vara saker som: - Sidans titel - Vilken teckenkodning som används - Vilket språk sidan är på - Vilka författare som gjort sidan - Funktion & utseende på sidan • Detta skrivs inom <head>-taggen och berör hela dokumentet. 24
- 25. Grundläggande element förtabeller • <table> Skapar en tabell • <caption> Beskrivning/rubrik för tabell • <tr> tabellrad (table row) • <th> Rubrik-kolumn (table header) • <td> Data-kolumn (table data) • Obs, alla taggarna har start- och slutttagg.
- 27. … fler möjlighetermed tabeller • Det finns lägen då man inte vill att alla rader/kolumner ska se exakt lika ut: • En kolumn som sträcker sig över x antar rader
- 29. Översikt - olikaelement i ett formulär Knapp Text-fält (stort) Text-fält Checkboxar Radioknappar Drop-down meny
- 30. Varför används formulär? •Ett sätt att skicka data från klienten (webbläsaren) till en server - Spara data - Validera data - Analysera data
- 31.
- 32.
- 33.
- 35. Samma innehåll – fastolika utseende
- 36. Samma innehåll –fast olika utseende • Produkter – olika utssende, samma innehåll
- 38. Olika typer avelement • Det finns två huvudtyper av element (finns fler, mer om det sen). • Block • Inline • Block-element visas generellt (utan styling från css) upp över hela skärmen horisontellt, som ett block • Inline-element visas generellt (utan styling från css) endast upp där dess innehåll finns.
- 39. CSS – Samesame but different • Formgivning åt HTML-dokument • Typografi • Layout • Färger • Bildhantering m.m.
- 41. Hur skriver manCSS? • Först måste man ange vad som ska stylas (s.k. selektor). T.ex. om man vill styla alla h1-taggar skriver man ”h1” följt av tecken {}. Mellan {} skrivs de egenskaper som <h1>-taggarna ska ha. T.ex. h1{ color: blue; text-align: center; }
- 42. Olika egenskaper förtext i css
- 43. Boxmodellen Total bredd fören box är: Content (width) + Padding + Border. Margin är sedan marginalen från boxen
- 44.
- 45. Identifiera element genomid • I HTML kan man identifiera specifika element genom att ge dem ett unikt id • Ett id ges genom attributet ”id” samt namnet på id:t • T.ex. för att ange ett id för en paragraf kan man skriva: • Eller för att ge en rubrik ett id: • Eller för att ge en bild ett id:
- 46. Identifiera element genomklasser • I HTML kan man identifiera element genom att ge dem en klass • En klass ges genom attributet ”class” samt namnet på klassen • T.ex. för att ange en klass för en paragraf kan man skriva: • Eller för att ge en rubrik ett id: • Eller för att ge en bild ett id:
- 47. Att formge elementgenom att ange klasser i CSS • För att referera från CSS till de element som har tilldelat sig en viss klass skriver man . (punkt) och klassnamnet • T.ex. för att referera till paragraferna: Så skriver man i CSS: • Och för att ge texten i paragraferna med klassen ”blue” blå färg skriver man i CSS:
- 48. CSS Repetition • Föratt referera till ett element skriver man: • element{egenskap:värde;} • För att referera till element med en klass skriver man: • .klassnamn{egenskap:värde;} • För att referera till ett element med ett id skriver man: • #id{egenskap:värde;}
- 50. Elementet <div> “The <div>tag defines a division or a section in an HTML document.”
- 51. Positionering • Visar elementeni den ordning de skrivs i HTML-koden • Static (standard) • Relative • Visar elementen i relation till förälder-elementet eller dokumentet • Absolute • Fixed
- 52. Att lägga elementbredvid varandra • Egenskapen ”float” • Gör så att man kan placera block-element bredvid varandra • Float:left; Flyttar elementet till vänster • Float:right; Flyttar elementet till höger • Gäller • postion: static • position: relative
- 53. Hur skapar manen layout?
- 54. Vi behöver alltså •Sidhuvud <header> • Navigation <nav> • Innehåll <main> • Sidfot <footer>
- 55.
- 56. 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.
- 57.
- 58.
- 59. Dagens föreläsning • Vadinnebär responsiv webbdesign? • Media queries? • Att designa för olika enheter
- 60. Olika typer avstilmallar <link rel="stylesheet" type="text/css” media="screen" href=”style.css"> <link rel="stylesheet" type="text/css” media="print" href=”print.css">
- 61. Att styla förolika upplösningar
- 62.
- 63. Ramverk & bibliotekför webbutveckling
- 64. Dagens föreläsning • Hurhar vi arbetat tidigare? • Hur brukar man arbeta? • Praktiska exempel på ramverk
- 69. De grundläggande tankarnabakom 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
- 70. 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
- 73. Dags att kollain ramverk! - Bootstrap https://getbootstrap.com
- 78. JavaScript Om JavaScript, omanvändningsområden, exempel
- 79. Programmering handlar omatt instruera en maskin eller del av en maskin […] att utföra ett visst arbete.
- 80. Vad är JavaScript? •En teknik för att utveckla interaktiva webbsidor • Ett programspråk inbäddat i webbläsare http://en.wikipedia.org/w/index.php?title=File:Unofficial_JavaScript_logo_2.svg&page=1
- 81. I vilket sammanhanganvänds JavaScript? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
- 82. Exempel på JavaScript •Bildspel: http://wowslider.com/javascript-slideshow-quiet-rotate-demo.html • Dynamisk innehåll: http://gmail.com, http://facebook.com, https://twitter.com/ • Beräkningar: http://valuta.se • Validera formulär: http://yensdesign.com/tutorials/validateform/ • Interaktiva element: http://mrdoob.com/projects/chromeexperiments/ball_pool/ • Spel: http://www.phoboslab.org/ztype/ • Super mairo: http://mario5.florian-rappl.de • Animationer: http://codepen.io/juliangarnier/pen/idhuG • Blandade exempel: http://tibbelit.se/film
- 83. JavaScript - Historik •Utvecklades av Netscape under mitten av 90-talet • Har inget med Java att göra – det är ett eget programmeringsspråk • Microsoft skapade sin egen version av JavaScript – Jscript • På senare dagar (2005) har ajax blivit en populärt • Lägger till extra funktionalitet för webben och webbläsare
- 84. Vad kan mangöra med JavaScript? • I princip vad du vill! (som har med webbsidor att göra) • Men det används ofta till att skapa interaktiva webbsidor • Med interaktiv menas: Reagera på användaras handlingar och modifiera webbsidans innehåll
- 85. Programspråk • Programspråk är,till skillnad från t.ex. svenska och engelska, formella språk • De ska uttrycka något utan tvetydighet. • Men programspråk delar vissa likheter med naturliga språk – vokabulär och grammatik. • Även uttryck och instruktioner.
- 86. Instruktion (statement) • Ettprogram består av en lista instruktioner • En instruktion består av minst ett uttryck och avslutas med ett semikolon ”;” 5; alert(”Hej och välkommen”); var birthYear = 2017 – age;
- 87. Att skapa ettprogram • Uppgiftsformulering, vad är det för uppgift som ska lösas? • Vilka steg behöver utföras för att lösa uppgiften? • Vilka instruktioner kan användas för att utföra varje delsteg (algoritm)
- 88. Algoritm • En beskrivningöver hur man löser ett problem. Algoritmen består av ett antal instruktioner och beskriver i vilken ordning instruktionerna ska utföras. http://www.recepten.se/recept/pasta_carbonara.html
- 89.
- 90. Hur, var, närskiver man JavaScript-kod?
- 91. Inbäddat skript • HTML-elementet<script> används för att definiera ett JavaScript- block. - Jämför detta med att inkludera inbäddad CSS-mall med hjälp av <style> • Elementet <script> kan placeras var som helst i HTML-dokumentet, inte bara i <head> • JavaScript-koden körs på den plats JavaScript-elementet finns.
- 92.
- 94.
- 95. Definition av användbarhet(1) • “The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use” (ISO)
- 96. Definition av användbarhet(2) Använd- barhet Lätt att lära Effektiv Ändamåls- enlig Fel- tolerans Engage- rande
- 97. Definition av användbarhet(3) • Effektivitet o Rätt funktionalitet o Stödjer användarens arbetsuppgifter o Lätt att lära och komma ihåg • Produktivitet o Gör sällan fel o Klarar många arbetsuppgifter o Snabb • Nöjda användare o Kanske rent av kul o Bra till mods o Ej ohälsosamt o Orsakar inte stress o Orsakar inte arbetsskador • Säkerhet o Användarna kan inte ”förstöra” av misstag o Man kan ångra sig
- 98. Utvecklare är inteanvändare
- 99. Användarna – vilkaär de? • Demografisk information • Vad kan dem? • Vad kan de lära sig? • Vad är deras generella bakgrund? • Vad är deras domän?