HT17 - DA156A - Sammanfattning av kursen
•
0 likes•236 views
HT17 - DA156A - Sammanfattning av kursen
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to HT17 - DA156A - Sammanfattning av kursen
Similar to HT17 - DA156A - Sammanfattning av kursen (20)
More from Anton Tibblin
More from Anton Tibblin (20)
HT17 - DA156A - Sammanfattning av kursen
- 2. Supersnabb genomgång av kursen
- 4. Internet och Webben är inte samma sak Viktiga begrepp att hålla isär
- 5. Tekniker i modern webbutveckling http://business-marketing-tips.com/wp-content/uploads/2013/07/Responsive-Web-Design1.jpg
- 9. Hur såg webbsidorna ut?
- 10. 2002-
- 11. Nytt sätt att anvä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.
- 14. Resultat • En webbläsare visar oss en webbsida efter att ha renderat ett HTML- dokument
- 15. Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
- 16. HTML • Hypertext Markup Language • 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
- 18. Element? • Det finns olika 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 <!DOCTYPE HTML> <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
- 22. 22
- 24. Metadata • Beskriver vilket innehå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ör tabeller • <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öjligheter med 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 - olika element 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
- 32. GET/POST
- 35. Samma innehåll – fast olika utseende
- 36. Samma innehåll – fast olika utseende • Produkter – olika utssende, samma innehåll
- 38. Olika typer av element • 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 – Same same but different • Formgivning åt HTML-dokument • Typografi • Layout • Färger • Bildhantering m.m.
- 41. Hur skriver man CSS? • 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ör text i css
- 43. Boxmodellen Total bredd för en box är: Content (width) + Padding + Border. Margin är sedan marginalen från boxen
- 44. Boxar
- 45. Identifiera element genom id • 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 genom klasser • 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 element genom 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ör att 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 elementen i 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 element bredvid 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 man en layout?
- 54. Vi behöver alltså • Sidhuvud <header> • Navigation <nav> • Innehåll <main> • Sidfot <footer>
- 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.
- 58. Responsiv webbdesign Genom media queries
- 59. Dagens föreläsning • Vad innebär responsiv webbdesign? • Media queries? • Att designa för olika enheter
- 60. 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">
- 61. Att styla för olika upplösningar
- 62. Brytpunkter? Hur var när?
- 63. Ramverk & bibliotek för webbutveckling
- 64. Dagens föreläsning • Hur har vi arbetat tidigare? • Hur brukar man arbeta? • Praktiska exempel på ramverk
- 69. 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
- 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 kolla in ramverk! - Bootstrap https://getbootstrap.com
- 78. JavaScript Om JavaScript, om användningsområden, exempel
- 79. Programmering handlar om att 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 sammanhang anvä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 man gö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) • Ett program 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 ett program • 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
- 90. Hur, var, när skiver 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.
- 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 inte anvä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?