TDDD52 Internet & HTML

Transkript

1 Internet? Webbläsare? Chrome? Firefox? IE? Opera? Safari? Grundläggande förståelse om Internet och HTML IP adress? Server? Klient? TDDD52? TDDD52 Internet & HTML HTML? Webbsida, Webbplast, WebbapplikaJon, Hemsida, Site, Sajt...? Förståelse för hur TDDD52 är uppbyggd och vad som krävs av examinajonen TDDD52 Internet & HTML Examinator Jalal Maleki Kursansvarig Marcus Bendtsen Kontaktpersoner Kursassistenter Torbjörn Lönnemark Jakob Pogulis Robin Keskisärkkä LaboraJoner LaboraJoner Två studenter per grupp Anmäl via webreg (se instrukjoner för laborajon 0) InstrukJoner för laborajonerna finns på kurshemsidan. Läs instrukjonerna noga, det kommer ae underläea för er. Kurshemsidan har all informajon om kursen och laborajoner: heps:// Labora&oner Förberedelser (Lab 0) HTML & CSS (Lab 1) JavaScript (Lab 2) PHP (Lab 3) MySQL (Lab 4) Muntlig redovisning AdministraJvt Verktyg (Betyg 4) Profil (Betyg 5) Assistenter räear måndag förmiddag (innan klockan 12:00) Alla laborajoner som lämnats in i föregående vecka räeas då (ibland kanske Jdigare om det finns Jd) Vid hård deadline (fredag vecka 10) måste allt vara inlämnat. Assistenterna har då två veckor på sig ae räea och studenterna har max en kompleeering på sig ae få godkänt. (Assistenterna har egna kurser som de skriver tenta för i vecka 11, därav den längre räeningsperioden) Om man lämnar in tomma dokument bara för ae skjuta på deadline kommer inte labben ae räeas När man är klar med labb 4 (dvs minimum för betyg 3) så ska man redovisa sie arbete muntligt för sin assistent. Boka en Jd med assistenten under ee labbpass för ae visa vad ni gjort. Under redovisningen kommer assistenten ställa frågor Jll er individuellt, och be den andra personen vara tyst. Tänk på ae ni ska förstå hela era system ni byggt för ae kunna svara på frågorna. Tyvärr har vi inte Jd ae lära känna er personligen under en så pass kort kurs, så ni måste ta med er era LiU- ID vid den muntliga redovisningen. 1

2 LaboraJon 0 Sen anmälan Regler och Policy LaboraJonsmaterial Grupper Kodskelee MySQL och phpmyadmin Redovisas genom ae man registrerar sig i WebReg. Deadline för labb 0 är denna vecka, studenter som är registrerade och vill läsa kursen måste registrera sig i WebReg. Deea för ae Jllåta andra studenter ae få plats i kursen. OBS: Man måste vara registrerad på kursen för ae anmäla sig i WebReg, det kan ibland ta 24 Jmmar från ae man registrerat sig på kursen Jlls man får skriva in sig i WebReg. För Jllfället är kursen full, men det är vanligt ae inte alla som anmält sig kommer ae registrera sig och läsa kursen. Det finns därför ola några lediga platser, men vi kan inte avgöra deea Jll dess alla som vill läsa kursen har skrivit in sig i WebReg. Om man vill göra en sen anmälan måste man: Hiea räe dokument ae fylla i från LiTH. Få den signerad av Marcus. När man har signatur från Marcus så lägger man den vid studierektorns (Jalal Maleki) kontor. SamJdigt skickar man ee mejl Jll Jalal Maleki där man säger ae man vill senanmäla sig, ae man fåe Marcus signatur och ae dokumentet ligger utanför hans kontor. Sedan kommer vi processa ansökningarna enligt först Jll kvarn beroende på hur många platser det finns i kursen. Föreläsningar & Deadlines Förändringar Måndag Fredag V 3 Fö Intro & HTML Deadline Lab 0 V 4 Fö CSS Deadline Lab 1 V 5 Fö JavaScript Deadline Lab 2 V 6 Fö PHP Deadline Lab 3 V 7 Fö MySQL V 8 Fö MySQL + PHP (+ Bootstrap, jquery) Deadline Lab 4 V 9 Extra labbjllfälle Deadline Lab 5 V 10 Extra labbjllfälle Deadline Lab 6 Kolla TimeEdit för exakta Jder och salar. Där finns också Jder för handledda laborajoner, utnyeja dessa Jllfällen ae ställa frågor Jll assistenterna. Vecka 9 och 10 är fokuserade på laborajoner för högre betyg och muntliga redovisningar för laborajon 1-4, därför finns extra labbjllfällen. Önskemål från kursvärderingar Snabbare räeningar. Mer nye material i laborajoner för högre betyg. Förändringar Kodskelee för snabba på räeningen. (Och visa på ee ingenjörsmässigt säe ae arbeta) SamJda räening på måndagar av assistenter. Sammanslagning av förra årets laborajon 1 och 2 Jll laborajon 1. AutomaJsk räening av laborajon 1 för ae snabba på räeningar. För betyg 5 finns två val, komplexitet eller volym. 2

3 Kurslieeratur Varför jobba i par? Det finns förslag på böcker, men ingen officiell kurslieeratur. Kursen är bred snarare än djup, och därför blir de flesta böcker överflödiga. Böckerna är bra för de som vill fördjupa sig på egen hand. Sök på nätet, det finns otroligt mycket informajon när det gäller de tekniker och verktyg som vi använder. Dessa resurer är också mer up to date än vad böcker ibland är. En av Universitetets huvuduppgiler är ae ge ut examina. För ae få en examina måste studenter klara ee visst antal kurser (poäng). För ae få poäng måste studenter klara examinajonen i en kurs. För ae klara examinajonen måste studenten lära sig materialet i kursen. Men hur lär man sig då kursens material? Tyvärr är inte kunskap något man kan ge eller byta bort. Vi kan inte (ännu) överföra informajon så som Trinity i Matrix när hon lär sig flyga helikopter. Ae själv hiea informajon är en av de vikjgaste kunskaper som man bör förvärva sig under studiejden. Varför jobba i par? Forts. Det finns många teorier om hur man lär sig, ee klassiskt exempel är Ivan Pavlovs hundar (bejngat lärande). Men Pavlovs teorier funkar inte så bra när man ska lära sig webbprogrammering. Ivan Pavlov Den närmaste utvecklingszonen Uppgifter som studenten kan lösa på egen hand Vi vill omvandla den grå rutan Jll grönt och den gula Jll gråe, vi vill expandera den närmaste utvecklingszonen Uppgifter som studenten kan lösa tillsammans med andra studenter och med handledning Uppgiler som studenten inte kan lösa Lev Vygotsky var med och utvecklade något som kallas det sociokulturella perspekjvet på lärande. En del av denna teori beskriver något som vi kallar den närmaste utvecklingszonen. Lev Vygotsky Studenterna kommer Jll laborajonssalen och löser uppgiler Jllsammans med andra studenter och ibland med hjälp av assistenten. Logiken som använts för ae lösa uppgilerna Jllsammans kan studenten sedan använda själv, dvs det gråa har omvandlats Jll grönt (kunskap har förvärvats). Sedan kan man acceptera in nya uppgiler från det gula fältet in i det grå osv, osv Det finns andra vikjga komponenter i det sociokulturella perspekjvet på lärandet inte bara närmaste utvecklingszonen. 3

4 Kursplan & Kursinnehåll Kursplan & Kursinnehåll - Tolkning Kursplan Exemplifiera problem och möjligheter med ae använda en webbaserad applikajon Förklara fördelarna med ae separera strukturbeskrivning (HTML) och layout (CSS) för dokument vid publicering på WWW Implementera en fungerande webbplats genom ae använda HTML, CSS samt grundläggande funkjoner i PHP och SQL (MySQL) Utveckla och dokumentera ee PHP- program Utveckla och dokumentera ee Javascript- program Kursinnehåll Allmänt om Internet och webben HTML, CSS, layout och formulär Grundläggande programmering i PHP: datatyper, funkjoner, filer, databaskoppling Grundläggande JavaScript Koppling mellan databaser och webbapplikajoner Många studenter har förkunskaper inom området. Kursen avser ae säkerställa ae alla studenter har samma kunskaper för vidare studier. Grundläggande kurs. Studenter kommer ae behöva ta med sig olika kunskaper från kursen beroende på förkunskaper. Javascript, PHP & MySQL CSS HTML PHP & MySQL Javascript CSS HTML Förklara de grundläggande begreppen gällande Internet, såsom Client- Server struktur, TCP/IP, IP- adresses, skillnaderna mellan Client- side och Server- side applikajoner, mm Internet Ee nätverk av nätverk Internet, Klient, Server, IP- adress, TCP/ IP, DNS, webbapplikajoner 4

5 Klient Server IP Vad kan man hämta från en server? En server är en vanlig dator som har speciell mjukvara installerad som kan dela med sig av sidor. En klient hämtar resurser från en server. Med IP adresser hiear klienter och servrar räe på Internet Man kan inte hämta resurser från en dator som inte är en server. En server kan dela med sig av vilka filer som helst. Det är upp Jll klienten ae ha räe programvara för ae tolka den moeagna filen. Jag vill hämta en sida från google.com, jag vet inte vilken IP- adress de har? DNS DNS Internet Domain Name System servrar (DNS) Jllhandahåller en katalogtjänst, du behöver inte kunna några IP- adresser. Du behöver inte i den här kursen veta hur deea fungerar, men det är bra ae veta ae det finns något som heter DNS och ae det är ee katalogtjänst som mappar IP- adresser Jll domän namn. Utan DNS hade det inte varit så läe ae branda på nätet. Inte så många som tänker på ae de måste uppdatera sin: status? Varför utvecklar vi webbapplikajoner? Skrivbords applika&on Mr Gates Mr Gates Outlook 2003 släpps Användare köper och installerar. Outlook 2007 släpps Nu krävs ny marknadsföring och skeppning av produkter Jll bujker Användare behåller det gamla office paketet, tycker inte det behöver uppdateras, eller vet kanske inte ens om ae man kan uppdatera. 5

6 Varför utvecklar vi webbapplikajoner? Skrivbords applika&on Mr Gates Outlook 2003 släpps Användare köper och installerar. Webbapplika&on Office 365 lanseras Användare skapar konto på nätet och betalar en liten summa varje månad. Mr Gates Varför använder vi webbapplikajoner Inga installajoner (om datorn har en webbläsare). Om man sieer 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. Outlook 2007 släpps Nya uppdateringar görs av sidan Kan logga in från hela världen och t ex läsa sin mejl. Nu krävs ny marknadsföring och skeppning av produkter Jll bujker 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 ae man kan uppdatera. Användare får direkt Jllgång Jll nya uppdateringar utan ae man behöver marknadsföra dessa Jll existerande kunder eller skeppa Jll bujker. Inkomsterna är konjnuerliga varje månad, så länge man håller kunden nöjd med utbudet av tjänsten. Mr Gates En av de bästa saker med Facebook är ae personer kan använda det på t ex semestern, från vilken dator som helst. Tänk om Facebook varit en skrivbords applikajon som skulle installeras på datorn, hade företaget blivit värderat Jll $50 miljarder under 2011? Webbplatser, sidor, hemsidor, sajter... I den här kursen lär vi oss ae utveckla mer tradijonella webbplatser med informa<on framför funk<on. T ex kurshemsidor eller produkthemsidor. Vi kallar ola dessa för sidor, hemsidor, webbplatser, webbsidor, sajter mm... MEN: De tekniker som vi lär oss i denna kurs är fullt Jllräckliga för ae utveckla mer avancerade webbapplikajoner; man kan redan eeer denna kurs börja snickra på fram<da ekonomiska oberoenden. HTML TDDD52 6

7 Server 1. Hämtar ee rent text dokument, användaren kan läsa med viss svårighet. Server 1. Hämtar ee rent text dokument, användaren kan läsa med viss svårighet. 2. Hämtar ee HTML dokument, hjälper inte användaren ae läsa, blir bara värre. <h1>kapitel 1</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>avsnie 1</h2> <p>vesjbulum venenajs, velit sed cursus ultricies, sem nisi fringilla erat.</p> Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnie 1 VesJbulum venenajs, velit sed cursus ultricies, sem nisi fringilla erat. Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnie 1 VesJbulum venenajs, velit sed cursus ultricies, sem nisi fringilla erat. Server 1. Hämtar ee rent text dokument, användaren kan läsa med viss svårighet. Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnie 1 VesJbulum venenajs, velit sed cursus ultricies, sem nisi fringilla erat. 2. Hämtar ee HTML dokument, hjälper inte användaren ae läsa, blir bara värre. <h1>kapitel 1</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>avsnie 1</h2> <p>vesjbulum venenajs, 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 ee läsbart och indelat dokument. Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. AvsniT 1 VesJbulum venenajs, velit sed cursus ultricies, sem nisi fringilla erat. Indelning och semanjk Delar upp text på ee logiskt säe i dokumentet. Ger textstycken en semanjsk betydelse, t ex rubriker. Ger webbläsaren en chans ae tolka dokumentet innan visning. Ger sökmotorer möjlighet ae bäere förstå innehållet på webbplatsen. HTML Formulär Ger ee dokument komponenter som ingår i formulär. Knappar, textbox, radiobueon, checkbox etc. Dessa formulär är en vikjgt del i kommunikajonen mellan användare och ägare av en webbplats. T ex kontokortstransakjoner, kommentarfält... Länkar Kan länka dokument Jll andra dokument. Skapar ee nätverk av dokument som kan ses av användaren som en sida. Länkarna kan också ge en hint Jll sökmotorer om innehåll och relevans. 7

8 HTML Taggar exempel 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 en webbplats ser ut på olika webbläsare. Elersom webbläsare kan rendera HTML lite olika är det vikjgt ae testa sin webbplats på flera läsare under utvecklingens gång. HTML <h1>rubrik</h1> <h2>rubrik</h2> <p>stycke text</p> <ul> <li>punkt 1</li> <li>punkt 2</li> </ul> <table> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> Rendering exempel Rubrik Rubrik Stycke text Punkt 1 Punkt 2 <a href= >Google</a> Google Cell 1 Cell 2 Cell 3 Cell 4 (här har vi ee exempel på HTML aeribut, i form av href ) En tagg börjar alljd med en hake: Sedan följer namnet på taggen, t ex a om vi vill ha en länk. < <a 8

9 Sedan kan man ha aeribut, olika taggar har Jllgång Jll olika aeribut, man måste själv ta reda på vilka aeribut som finns Jllgängliga för en viss tagg. För taggen a finns aeributet href som gör det möjligt ae välja vilket dokument som vi vill länka Jll. (Observera mellanrummet mellan a och href ). <a href Aeribut behöver också Jlldelas ee värde, deea görs med = och ee värde på högersidan. I deea fallet skriver vi dokumentet som vi vill gå Jll när man klickar på länken. (Observera användandet av runt värdet). <a href= index.html När man är klar med sina aeribut (en tagg får gärna ha flera aeribut) så avslutar man med en ny hake. Sedan följer det som användaren fakjskt ser, i deea fal den text som skall klickas på. <a href= index.html > <a href= index.html >Klicka här 9

10 När man är klar med sin tagg så stänger man taggen med en ny hake < en slash /, namnet på taggen a och en Jll hake > Om en webbläsare ser denna tagg så kommer det ae renderas som deea: <a href= index.html >Klicka här</a> <a href= index.html >Klicka här</a> Klicka här Och om vi klickar på den blå texten kommer vi förflyeas Jll dokumentet index.html Ibland blir det mer komplex då man har taggar inne i taggar, som t ex när man gör en lista. Men det vikjga är ae komma ihåg ae öppna och stänga sina taggar korrekt, och ae använda korrekt aeribut. <ul> <li>punkt 1</li> <li>punkt 2</li> </ul> Punkt 1 Punkt 2 Ibland blir man lite förvånad när man ser deea. Här stänger vi taggen direkt, utan ae ha en extra </img> eleråt. Deea är Jllåtet för vissa typer av taggar, tyvärr är HTML specifikajonen full av undantag! <img src= bild1.png /> 10

11 HTML Formulär <form> Name: <input type= text /><br /> <input type="radio" name="sex" value="female" /> Female<br /> <input type="radio" name="sex" value="male" /> Male<br /> <button type= submit >Send</button> </form> Flera exempel på HTML aeribut <form> <input type="checkbox" value="cc" />Send CC<br/> Message: <textarea rows="3"></textarea><br /> <button type="submit">send</button> </form> HTML Formulär När man skapar formulär är det många taggar och aeribut ae hålla reda på, det lämnas som en övning ae ta reda på dessa. Två aeribut som har lite speciell betydelse är id och name. Det är lite för Jdigt ae förklara varför de är speciella, men det kommer bli tydligt senare. Det är dock vanligt ae det ser ut ungefär som nedan på ee fält som är tänkt ae t ex fyllas i med en mejladress: <input type= text name= id= /> Specialtecken HTML EnJJes Om man vill göra ee < eller > tecken i sin text tolkar webbläsaren deea som början eller slutet på en tag, och allt blir fel. Använd då: < eller > Om man vill göra ee tecken som inte finns på tangentbordet t ex copyright symbolen. Använd då: DemonstraJon av HTML TDDD52 För en komplee lista av alla s k html enjjes kolla länkarna på laborajon 1 11

12 Validering av HTML kod hep://validator.w3.org Korrekt skriven HTML kod gör ae webbläsaren inte behöver gissa hur den skall tolka koden Deea leder Jll ae din webbplats har större chans ae se ut som du tänkt dig i alla webbläsare I laborajonsserien skall koden valideras som HTML5 Om du har fel, räea ee i taget Jlls du får grönt DemonstraJon AutomaJsk räening av LaboraJon 1 Väldigt (väldigt!) nye system, och innehåller säkert massor av buggar. Men jag vill gärna testa deea på laborajon 1 för ae få en uppfaening om det är värt ae fortsäea utvecklingen utav det. Tanken är ae snabba upp räeningen, men också slippa massor med små- kompleeeringar fram och Jllbaka mellan student och assistent för små detaljer. Om räeningen säger ae ni har fel någonstans men ni inte håller med, så har ni säkert räe. Kolla med er assistent. Hur man använder systemet framgår av laborajonsinstrukjonerna. HTML Head unika taggar <html> <head> <title>tddd52 > Hemsida</title> </head> <body> </body> </html> <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 electronics, toys, apparel, sports, tools, groceries and general home and garden items. /> </head> <body> </body> </html> SökmotorsopJmering TDDD52 12

13 SökmotorsopJmiering En stor branch, med många företag som endast livnär sig på ae opjmera sidor för sökmotorer så som Google. Det finns mycket man kan göra och läsa, och sökmotorerna ändrar sina algoritmer konjnuerligt. Ae ligga på de första 10 sökresultaten på de större sökmotorerna för vikjga nyckelord är avgörande för många företag. Antag ae 40% av alla klick görs på det första resultatet. (Deea beror mycket på typ av produkt man söker, men en bra utgångspunkt) På bara Google görs 400 miljoner sökningar varje dag. SökmotorsopJmieringar - Nyckelord En stor del av jobbet när man sökmotorsopjmerar är ae hiea räe nyckelord ae opjmera för. Nyckelord relaterar Jll det som användaren skriver när den söker eler din webbplats. Antag ae du har en hemsida som säljer maeor. Nyckelord kan vara: maia, maior, golv, inredning, feng- shui Allt beror på vilken profil dina maeor har, och vad man tror ae ens kunder kommer ae söka eler. Kanske passar nyckelordet modern- feng- shui- maia egentligen bäst för din produkt, men söker personer verkligen eler deea? Om du opjmerar för golv kanske du lägger Jd och pengar på kunder som inte alls var ute eler en maea. Använd t ex Googles verktyg Keyword Tool för ae ta reda på om vilka nyckelord som är mest använda. golv eller inredning? SökmotorsopJmeringar En mycket bra sida för ae komma igång med sökmotorsopjmering. (kolla länkar under LaboraJon 1) Läs och Jllämpa Google Search Engine OpJmizaJon Starter Guide (kolla länkar för LaboraJon 1) Grundläggande op&meringar Länkar Jll din webbplats är avgörande. Om många bra sidor länkar Jll dig ökar din status. Se Jll ae <Jtle>, <h1>, <h2> innehåller de sökord du vill opjmera för. Gärna Jdigt på sidan. Undvik ae upprepa nyckelord för många gånger, sk keyword spamming. Unik <Jtle> och meta descripjon för varje sida. HTML5 vs HTML4 vs XHTML TDDD52 13

14 HTML, XHTML, HTML5 Igår HTML 4 Hyper Text Markup Language XHTML - Extensible Hyper Text Markup Language Två olika specifikajoner för hur man märker vanlig text med taggar Idag HTML5 - FramJden för HTML HTML5 är inte bara Jll för semanjk, 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 funkjoner för HTML5 är inte implementerade i alla webbläsare. En vikjgt del utav framjdens applikajoner, inte bara för webben, men för mobila enheter (Android och ios) samt för desktop (Windows 8 etc) I denna kurs använder vi HTML5, men kallar det bara HTML. Vi använder dock inga funkjoner från HTML5 som inte skulle kunna göras i HTML4 eller XHTML. De första stegen när man skapar ee HTML dokument... XHTML HTML 5 <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "hep:// strict.dtd"> <html xmlns="hep:// <head> <meta hep- equiv="content- type content="text/html;charset=u - 8" /> <Jtle>An XHTML 1.0 Strict standard template</jtle> </head> <body> <p> Your HTML goes here </p> </body> </html> HTML 4 <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 TransiJonal//EN" "hep:// transijonal.dtd"> <html> <head> <meta hep- equiv="content- type content="text/html;charset=u - 8" /> <Jtle>Title of the document</jtle> </head> <body> <p> Your HTML goes here </p> </body> </html> <!DOCTYPE html> <html> <head> <meta hep- equiv="content- type content="text/html;charset=u - 8" /> <Jtle>Title of the document</jtle> </head> <body> The content of the document... </body> </html> TDDD52 godkänd metod I den här kursen använder vi HTML5 definijonen, men när man söker på nätet eler informajon kommer man ola stöta på XHTML och HTML4 versionerna, så det är bra ae förstå ae det finns skillnader. LaboraJon 1 Steg 1 Inför nästa föreläsning HTML Skapa en webbplats för ee fikjvt företag som har tre produkter En webbplats med endast HTML. Det finns strikta krav på koden och u örandet, kolla instrukjonerna noga. (Använd autoräeningen för ae kolla ae allt är ok innan ni skickar för räening) Se Jll ae ha installerat kodskeleeet från laborajon 0 innan ni börjar med laborajon 1. Det fikjva företagets webbplats kommer ae utvecklas vidare i de kommande laborajonerna. Se Jll ae ni får klart laborajon 0 så fort som möjligt, deadline är redan denna vecka. Nästa vecka handlar det om CSS och layout av webbplatser. Steg två i laborajon 1 kräver CSS kunskap, men det rekommenderas ae börja med steg ee redan denna vecka. Tack! 14