TDP013. Kursens nyckelpersoner. Kursens design. Kursens litteratur Kursens kunskapsfilosofi. Examinator: Anders Fröberg. Kursansvarig: Anders Fröberg

Transkript

1 Kursens nyckelpersoner TDP013 Webbprogrammering och interaktivitet Introduktion, HTML5, CSS & Selenium Anders Fröberg Institutionen för Datavetenskap (IDA) Examinator: Anders Fröberg Kursansvarig: Anders Fröberg Kursssistent: Alexander Kazen Kontakta mig gällande frågor om kursen. Kontakta kursassistent för hjälp kring laborationerna. 2 Kursens design I högskoleförordningen står det under mål för kandidatexamina bland annat att: För kandidatexamen skall studenten - visa förmåga att söka, samla, värdera och kritiskt tolka relevant information i en problemställning samt att kritiskt diskutera företeelser, frågeställningar och situationer, - Högskoleförordningen (1993:100) Kursen är byggd på ett sätt som lägger stor vikt vid att ge studenterna möjlighet att själva söka efter den information som behövs för att lösa de innefattande laborationerna. Kursens litteratur Kursens kunskapsfilosofi Det finns ingen officiell tryckt litteratur till kursen. Varje föreläsning redovisar för dess referenser på kurshemsidan. Tänk på examina-målet! visa förmåga att söka, samla, värdera och kritiskt tolka relevant information i en problemställning samt att kritiskt diskutera företeelser, frågeställningar och situationer Föreläsningarna är tänkta att introducera ämnena och hjälpa studenterna att komma igång med sin informationssökning. 3 4

2 Kursens innehåll Kursen behandlar webbteknik med fokus på programmering av webbapplikationer. Kursen består av ett antal programmeringsuppgifter (laborationer) som behandlar viktiga teknikdelar som HTML5, CSS, JavaScript, Node.js och MongoDB. Kursens examination Laborationer och projekt görs i par och registreras i webreg i vanlig ordning. Instruktionerna för varje laboration visar tydligt vilka kurs-, program- och examensmål laborationen är tänkt att examinera. För godkänt i kursen skall laborationerna genomföras, men graderat betyg avgörs av projektet. Mer info på kurshemsidan. Ett större programmeringsprojekt genomförs slutligen. Kursen bygger i stor grad på egen programmering. Examination sker genom muntlig demonstration och presentation av funktion och kod. 5 6 Kursens teknikval Kursen har gjorts om från att vara en klassisk PHP -> MySQL kurs till att bli en bleeding-edge Node.js,MongoDB, HTML5 kurs. Vi vill utmana IP studenter med en bit av det som spås bli framtiden för webbutveckling. Även om inte just Node.js eller MongoDB kommer vara framtiden så kommer idéerna, och framför allt JavaScript, ha en stor betydelse. Kursens tekniska innehåll Klientsida (dvs det användaren ser och som körs i webbläsaren) HTML, CSS, JavaScript ->HTML5 Serversida (dvs det som körs på en datorn någonstans som innehåller all information som skall visas) Node.js+Express.js (JavaScript) och MongoDB (databas) Förutom detta kommer vi titta på olika verktyg för att testa klient och serversida. 7 8

3 Varför utvecklar vi webbapplikationer? Varför utvecklar vi webbapplikationer? Skrivbords applikation Skrivbords applikation Webbapplikation Mr Gates Outlook 2003 släpps Mr Gates Outlook 2003 släpps Office 365 lanseras Mr Gates Användare köper och installerar. Användare köper och installerar. Användare skapar konto på nätet och betalar en liten summa varje månad. Outlook 2007 släpps Nu krävs ny marknadsföring och skeppning av produkter till butiker Outlook 2007 släpps Nu krävs ny marknadsföring och skeppning av produkter till butiker Nya uppdateringar görs av sidan Nästa gång användaren loggar in syns dessa nya ändringar Mr Gates Användare behåller det gamla office paketet, tycker inte det behöver uppdateras, eller vet kanske inte ens om att man kan uppdatera. Mr Gates Användare behåller det gamla office paketet, tycker inte det behöver uppdateras, eller vet kanske inte ens om att man kan uppdatera. Användare får direkt tillgång till nya uppdateringar utan att man behöver marknadsföra dessa till existerande kunder eller skeppa till butiker. Inkomsterna är kontinuerliga varje månad, så länge kunderna är nöjda. Mr Gates Varför använder vi webbapplikationer? Inga installationer (om datorn har en webbläsare). Om man sitter hemma hos någon eller på internetcafé spelar ingen roll, så länge man har en webbläsare och internet. Samma filer på alla datorer man loggar in från. Kan logga in från hela världen och t ex läsa sin mejl. Server 1. Hämtar ett rent text dokument, användaren kan läsa med viss svårighet. En av de bästa saker med Facebook är att personer kan använda det på t ex semestern eller jobbet, från vilken dator som helst. Tänk om Facebook varit en skrivbords applikation som skulle installeras på datorn, hade företaget blivit värderat till $50 miljarder dollar under 2011? Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.

4 2. Hämtar ett HTML dokument, hjälper inte användaren att läsa, blir bara värre. 2. Hämtar ett HTML dokument, hjälper inte användaren att läsa, blir bara värre. Server Server 1. Hämtar ett rent text dokument, användaren kan läsa med viss svårighet. <h1>kapitel 1</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>avsnitt 1</h2> <p>vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.</p> 1. Hämtar ett rent text dokument, användaren kan läsa med viss svårighet. <h1>kapitel 1</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>avsnitt 1</h2> <p>vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.</p> 3. Om vi låter vår webbläsare få ta hand om HTML dokumentet, så visar den upp ett läsbart och indelat dokument. Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat. Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat. Kapitel 1 Lorem ipsum dolor sit amet, elit. consectetur adipiscing Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat. HTML Taggar exempel HTML <h1>rubrik</h1> <h2>rubrik</h2> <p>stycke text</p> Rendering exempel Rubrik Rubrik Stycke text Det finns många webbläsare på marknaden, och de är inte alla lika. Därför kan man ibland bli lite förvånad över hur ens webbplats ser ut på olika webbläsare. Eftersom webbläsare kan rendera HTML lite olika är det viktigt att testa sin webbplats på flera läsare under utvecklingens gång. <ul> <li>punkt 1</li> <li>punkt 2</li> </ul> <table> <tr> <td>cell 1</td> <td>cell 2</td> Punkt 1 Punkt 2 Cell 1 Cell 2 Cell 3 Cell 4 <a href= >Google</a> Google (här har vi ett exempel på HTML attribut, i form av href )

5 HTML Class och ID class Markera att elementet på något sätt är viktigt eller av en viss typ. HTML dokumentet får innehålla flera element med samma class värde. <div class= ingress >Detta är text</div> <a class= external href=... >External</a> id Markera ett unikt element i HTML koden. HTML dokumentet får bara innhålla ett element med ett visst id värde. <button id= send >Send</button> <a id= googlelink href=... >Google</a> <form> HTML Formulär Name: <input type= text /><br /> <input type="radio" name= gender" value="female" /> Female<br /> <input type="radio" name= gender" value="male" /> Male<br /> <button type= submit >Send</button> </form> Flera exempel på HTML attribut <button class= image-button ></button> <div id= leftcontent >...</div> Element kan ha både class och id definierade <form> <input type="checkbox" value="cc" />Send CC<br/> Message: <textarea rows="3"></textarea><br /> <button type="submit">send</button> </form> <html> <head> <title>tddd52 > Hemsida</title> </head> <body> </body> </html> HTML Head unika taggar Specialtecken HTML Entities Om man vill göra ett < eller > tecken i sin text tolkar webbläsaren detta som början eller slutet på en tag, och allt blir fel. Använd då: < eller > <html> <head> <title> Amazon.com: Online Shopping for Electronics, Apparel, Computers, DVDs & more</title> <meta name= description content= Online retailer of books, movies, music and games along with apparel, sports, tools, groceries and general home and garden items. /> </head> <body> </body> </html> electronics, toys, Om man vill göra ett tecken som inte finns på tangentbordet t ex copyright symbolen. Använd då: Leta på nätet efter en komplett lista

6 Validering av HTML kod HTML Korrekt skriven XHTML kod gör att webbläsaren inte behöver gissa hur den skall tolka koden Detta leder till att din webbplats har större chans att se ut som du tänkt dig i alla webbläsare I laborationsserien skall koden valideras som XHTML Strict Om du har fel, rätta ett i taget tills du får grönt Indelning och semantik Delar upp text på ett logiskt sätt i dokumentet. Ger textstycken en semantisk betydelse, t ex rubriker. Ger webbläsaren en chans att tolka dokumentet innan visning. Ger sökmotorer möjlighet att bättre förstå innehållet på webbplatsen. Formulär Ger ett dokument komponenter som ingår i formulär. Knappar, textbox, radiobutton, checkbox etc. Dessa formulär är en viktigt del i kommunikationen mellan användare och ägare av en webbplats. T ex kontokortstransaktion er, kommentarfält... Länkar Kan länka dokument till andra dokument. Skapar ett nätverk av dokument som kan ses av användaren som en sida. Länkarna kan också ge en hint till sökmotorer om innehåll och relevans. HTML, XHTML, HTML5 De första stegen när man skapar ett HTML dokument... Igår HTML 4 Hyper Text Markup Language Idag HTML5 - Framtiden för HTML XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" Gamla sättet XHTML - Extensible Hyper Text Markup Language Två olika specifikationer för hur man märker vanlig text med taggar HTML5 är inte bara till för semantik, formulär och länkar men även för avancerade tekniker så som: lokala databaser, video, sockets etc Idag är vi i början av denna utveckling, och alla funktioner för HTML5 är inte implementerade i alla webbläsare. <head> <meta http-equiv="content-type content="text/html;charset=utf-8" /> <title>an XHTML 1.0 Strict standard template</title> </head> <body> <p> Your HTML goes here </p> </body> </html> HTML 5 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type content="text/html;charset=utf-8" /> <title>title of the document</title> </head> <body> The content of the document... </body> </html> Projekt godkänd metod

7 Färger Färger På webben används s k additativ färgblandning Man blandar färgerna Röd, Grön och Blå (RGB) Hexadecimala A B C D E F # eller #000 = Svart #FFFFFF eller #FFF = Vit #FF0000 eller #F00 = Röd Man kommer givetvis inte ihåg alla dessa färger, utan använder en lista eller program för att få fram den färg man vill ha. Boxmodell Boxmodell padding height Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. height Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. width width

8 Boxmodell Boxmodell border border padding padding height Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. height Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. width width margin Den faktiska bredden är = width + padding + border + margin CSS CSS - Selector Cascading Style Sheet Hur innehåll skall presenteras Cascade tolkar vi som ärver och skriver över Mest exakta regeln styr Ett oerhört viktigt och kraftfullt verktyg för att få webbplatser användbara En selector är ett syntax som avgör vilka element som skall påverkas av vilka regler. Selector h1.ingress #sendbutton div.ingress Förklaring En visst typ av element, t ex alla h1 element Alla element med attributet class satt till något värde, t ex class=ingress Elementet med ett visst id, t ex id=sendbutton Alla div element med class=ingress Regler som appliceras sist gäller de som är före Kan förändra färger, storlekar, placeringar etc Tolkas utav webbläsare, vilket kan leda till lite olika resultat beroende på val av läsare div h1 div.ingress h1 Nestlade selectorer, t ex alla h1 som ligger innuti div Alla kombinationer fungerar

9 En property avgör vilka egenskaper som skall ändras och value avgör vad den skall ändras till. CSS - Properties Property color width border border-style Values RGB färgkod, sätter texten i det valda elementet till denna färg. Sätter bredden av ett element, använder enheter som px, % etc value kan vara 5px solid red som ger en 5px tjock solid kant Sätter kanten till en annan typ, t ex dotted, dashed, double, groove, ridge, solid etc Det finns en uppsjö olika property-value man kan använda. CSS a { color: #F00; } div h1 { font-size: 12px; border: 1px solid #CCC; } div.ingress { font-weight: bold; } img { cursor: pointer; } CSS - Exempel Utfall Alla länkar blir nu röda istället för standard blå Alla h1 taggar som ligger nestlade under div taggar får en mindre font storlek och en grå kant Alla div taggar som har class=ingress får fet stil Alla bilder gör nu om muspekaren till en hand istället för vanlig pekare när man håller musen över bilden. CSS Hover selector a:hover { background-color: yellow; } En selector som först applicerar sina regler när musen förs över elementet Kolla denna länk om ni använder :hover i era webbplatser, det finns några saker man måste tänka på om man använder den i kombination med a elementet.

10 Live example1 38 HTML span - inline HTML div - block <span> <div> När jag vill markera något i en flytande text t ex att <span class= red >detta ska vara rött</span> men att texten annars ska flyta på... När jag vill markera något i en flytande text t ex att detta ska vara rött men att texten annars ska flyta på... Används för att gruppera inline element i ett dokument. Denna grupp kan man sedan ändra med CSS eller Javascript (senare föreläsning). När jag vill gruppera block element <div class= green-border > <ul> <li>item 1</li1> <li>item 2</li1> <li>item 3</li1> <li>item 4</li1> </ul> </div> Item 1 Item 2 Item 3 Item 4

11 CSS Float & Clear CSS Float & Clear Antag att vi har fyra div taggar efter varandra. När webbläsaren ser nästa div tagg kommer den att göra en radbrytning och sedan rendera hela div taggen. Om vi på den blå div taggen sätter float: left; så placeras den så långt till vänster som möjligt. Efterkommande element hamnar sedan direkt efter. Den röda div taggen har inte float, så den vita hamnar på nästa rad. CSS Float & Clear CSS Float & Clear Om vi även på den röda sätter float: left; så kommer den gröna direkt efter. Kan även använda float: right; och clear: right; Om vi vill undvika att det nästkommande elementet hamnar direkt efter den röda, så sätter vi clear: left; på det gröna elementet. Att kunna sätta float på element möjliggör att man kan skapa andra layouter än bara rakt upp och ner Med float kan vi placera element på andra sätt än med ren HTML

12 Validering Separation av innehåll och presentation Som med HTML, är korrekt CSS nödvändig för att webbläsaren skall slippa gissa vad som menas med koden. Om man skriver stora stylehsheets är det smart att validera ofta. Congratulations! No Error Found. Enklare att skapa, underhålla och återanvända När man bygger dynamisk a webbsidor är detta oumbärligt Går att skapa olika design beroende på webbläsare HTML CSS CSS CSS En mänsklig validering som kollar att webbplatsen ser ut som det är tänkt på alla större webbläsare är fortfarande nödvändig. Man kan skapa helt olika utseenden vid behov för samma HTML innehåll. Titta på:

13

14

15 CSS i HTML dokument Länkat... <head> <link rel= stylesheet type= text/css href= style.css /> </head>... Godkänd metod Header style... <head> <style type= text/css > a { color: #F00; } div.ingress { font-weight: bold; } </style> </head>... Detta är ibland OK i andra sammanhang CSS i HTML dokument CSS3 Inline <body> <div style= font-weight: bold; > This text will be bold </div> </body> Detta är aldrig ok i denna kurs. Om ni får för er att göra såhär, tänk på hur det hade påverkat Zen Garden om de gjorde så. En ny standard för CSS Innehåller specifikationer för rundade kanter, gradients, skuggor, roteringar etc. Endast nya webbläsare kan hantera dessa. Äldre webbläsare hanterar inte CSS3

16 Selenium Ett verktyg för att testa webbplatser. Selenium Ett verktyg för att testa webbplatser. I ett programmeringsspråk (t ex Python) skriver man kod för att beskriva olika flöden genom webbplatsen. Öppna sidan Hitta elementet med id värdet q Skriv in ordet Cheese i elementet med id q Detta kan för vissa vara ett av de viktigaste verktyg man lär sig i sin karriär. Att automatisera testning av webbplatser kan spara enormt mycket tid och därmed även pengar. import selenium from selenium import webdriver from selenium.common.exceptions import TimeoutException from selenium.webdriver.support.ui import WebDriverWait import time driver = webdriver.firefox() driver.get(" Tryck enter Vänta max tio sekunder på att titeln på sidan börjar med ordet cheese Selenium Ett verktyg för att testa webbplatser. Selenium Ett verktyg för att testa webbplatser.... inputelement = driver.find_element_by_name("q") inputelement.send_keys("cheese!") inputelement.submit() print driver.title try: WebDriverWait(driver, 10).until( lambda driver : driver.title.lower().startswith("cheese!") ) print driver.title finally: driver.quit() 63 64

17 Selenium En sista notis ECMAScript Selenium öppnar en webbplats via http, detta innebär att ni måsta ha era HTML, CSS och JavaScript filter på en webbserver för att testa de. Detta kan man göra genom att lägga sina filer i www-pub mappen. Specifikationen för JavaScript och JScript Specificeras (delvis) av JavaScript och JScript Innehåller inte Document Object Model (DOM) Ett annat alternativ är att exekvera python m SimpleHTTPServer i den mappen man har sina filer (antaget att man har Python och SimpleHttpServer modulen installerad) Användning av ECMAScript ECMAScript edition 5 Mozilla Firefox Google Chrome Google documents Microsoft.NET Framework Adobe Flash Lanserades 2009 Nuvarande version Stöd för JSON Uppdatering 5.1 Lanserades 2011 (Mer) kompatibel med edition 3 Adobe Acrobat 67 68

18 ECMAScript edition 7 Variation hos olika applikationer Lanserades Juni 2016 Nuvarande version Inte fullt stöd i webbläsarna än Officially known as ECMAScript 2016 Mindre tillägg till ECMAScript 2015 Mozilla Firefox JavaScript (edition 5.1) Google Chrome JavaScript (edition 6) Internet Explorer JScript 9.0 (edition 5) Opera ECMAScript (edition 6) Adobe Flash ActionScript 3 (edition 3) Adobe Acrobat JavaScript 1.7 (edition 3) Tilldelningar och scope Variabler kan var som helst definieras globalt Funktioner har bara ett scope PROGRAMMERING 71 72

19 Tilldelningar och scope Tilldelningar och scope function functiona() { variable = Hello, world ; } function functionb() { return variable; } functiona(); functionb(); // Returnerar Hello, world function functiona() { var variable = Hello, world ; } function functionb() { return variable; } functiona(); functionb(); // ReferenceError: variable is not defined Tilldelningar och scope Tilldelningar och scope var persons = new Array(); persons[ Anders ] = Froberg ; persons[ Erik ] = Berglund ; function functionc() { for (p in persons) { alert(p); } } functionc(); alert(p); var persons = new Array(); persons[ Anders ] = Froberg ; persons[ Erik ] = Berglund ; function functionc() { for (var p in persons) { alert(p); } } functionc(); alert(p); 75 76

20 Tilldelningar och scope Tilldelningar och scope var persons = new Array(); persons[ Anders ] = Froberg ; persons[ Erik ] = Berglund ; function functionc() { for (var p in persons) { alert(p); } alert(p); } functionc(); function functiond() { if (1 == 1) { var variable = Hello, world ; } alert(variable); } functiond(); Objektorienterad programmering Prototyping JavaScript använder prototyping till skillnad från Java/Python/C++ JavaScript stödjer endast arv från en (1) prototyp Vanlig objektorienterad programmering i JavaScript är möjligt, men kostar mer minne då varje objekt definierar sina egna funktioner. Funktioner är motsvarigheten till klasser Funktioner kan innehålla funktioner Klasser kan utökas efter att objekt har skapats Objekt kan utökas efter att de skapats 79 80

21 Prototyping Prototyping function Animal() { // Constructor alert( Animal::Constructor ); } Animal.prototype.talk = function() { // Method return undefined; } var myanimal = new Animal(); alert(myanimal.talk()); Animal.prototype.scream = function() { return undefined; } alert(myanimal.scream()); function Animal() { // Constructor alert( Animal::Constructor ); } Animal.prototype.talk = function() { // Method return sound ; } var myanimal = new Animal(); Animal.prototype.whisper = function() {v return. ; } myanimal.scream = function() { return SOUND! ; } alert(myanimal.whisper()); alert(myanimal.talk()); alert(myanimal.scream()); Arv (inheritance) Arv (inheritance) Utökar egentligen bara ett objekt med fler prototyper Konstruktorn till sub-klassen måste refereras explicit, annars används konstruktorn för föräldern Konstruktorn i föräldern måste anropas när arvet definieras function Dog() { Animal.call(this); alert( Dog::Constructor ); } Dog.prototype = new Animal(); Dog.prototype.constructor = Dog; Dog.prototype.talk = function() { return woff woff ; } var mydog = new Dog(); alert(mydog.talk()); 83 84

22 Callbacks Funktioner som argument till funktioner Lämnar över ansvaret för att fånga upp data och event till den kallade funktionen Stor del av JavaScript och tredjeparts-bibliotek Om jag ger dig mitt telefonnummer så ringer du mig när du laddat ner nästa avsnitt av The Newsroom (2012) [red. anm. från itunes]... The road to hell is paved with good intentions DOCUMENT OBJECT MODEL

23 Noder Navigera i DOM Varje element i ett HTML dokument är en nod i DOM-trädet (inklusive <!-- kommentarer -->) Det finns 12 olika typer av noder element, TextNode och AttributeNode är de tre typer som är intressanta för webbdesign getelementbyid( param ) returnerar ett (1) element om det existerar ett element med angivet ID. getelementbytagname( param ) returnerar en lista med element som det existerar ett eller flera sådana element Operationer på noder Modifiera DOM-trädet element.childnodes returnerar en lista med alla noder direkt under element i DOM-trädet. element.parentnode returnerar den nod som finns direkt ovanför element i DOM-trädet. element.nextsibling returnerar den nod som finns direkt till höger och på samma nivå som element i DOM-trädet. element.previoussibling returnerar den nod som finns direkt till vänster och på samma nivå som element i DOMträdet. document.createelement( param ) skapar ett nytt element. document.createtextnode( param ) skapar en ny TextNode. element.appendchild(element) placerar det angivna elementet sist i listan av noder direkt under det specificerade elementet. element.removechild(element) tar bort ett element från listan av noder direkt under det specificerade elementet

24 93 The Write Less, Do More, JavaScript Library JQUERY