Testautomatisering. HTML, Dev Tools, Watir
|
|
|
- Stefan Göransson
- för 8 år sedan
- Visningar:
Transkript
1 Testautomatisering HTML, Dev Tools, Watir
2 Schemaändring Samma tider som innan Mån, FM: Intro-lektion, veckans topic Fre, FM: Liknande verktyg, veckans topic + Video Kan strykas till förmån för extra handledning Vi reder ut det med handuppräckning i början av lektionen Slajds + Länk till video kommer finnas för de som ej behöver handledning. Korta punkter
3 FM: HTML Crash Course Browser Dev Tools Watir (och Record/Replay vs. WebDriver) EM: Virtual Machine Intro Labbintro Idag
4 Watir är inte Record/Replay á la Selenium Identifiera intressanta element Kunskap om HTML Dev Tools Varför HTML + Dev Tools?
5 Vad är HTML? Hierarkiskt ordnad information på en hemsida Vad är en webb-sida? HTML (Hierarki + information) CSS (layout / utseende) javascript (beteende) Crash Course HTML
6 Enkelt exempel: <!DOCTYPE html> <html lang="en xmlns=" <head> <meta charset="utf-8" /> <title>sidtitel i tabbarna</title> </head> <body> <a href= </body> </html> Crash Course HTML
7 Tag / HTML Element Grundbulten i HTML inom "<" och ">" Normalt starttag och sluttag. Sluttag markeras med "/" ex: "<html></html>" "<h1>jag är en rubrik</h1>" i vissa fall ingen sluttag: "<img>", "<input>" i vissa fall inbakad sluttag: "<input />" Crash Course HTML
8 Namnet på taggen - säger vad taggen är till för ex: "<input>" - någon form av inmatningsfält "<img>" - en bild "<p>" - en paragraf "<button>" - en knapp Det finns en uppsjö av taggar de flesta är dock inte särskillt intressanta för oss. Crash Course HTML
9 Utöver tag-namnet så har en tag ytterligare information Nästan alla denna information är valfri id - en unik identifikation för taggen ex: "<img id="img_logo"> Om vi hittar en tagg med id= IMG_logo så är det bild-taggen ovan. Crash Course HTML
10 class anger vilken CSS-klass taggen har. Men vi kan också använda class för att identifiera en viss tagg Om det bara finns en knapp "<button>" med klassen "class='savebutton'" så kan vi identifiera knappen. Fråga efter ett element "button" med klassen "SaveButton" - trots att knappen kanske saknar id Ex: <button class= SaveButton > Crash Course HTML
11 attributes - ytterligare bestämning för taggen. Olika taggar har olika attribut ex: "<input type='checkbox'>" "<img src= logo.jpg > Crash Course HTML
12 Ett antal exempel på vanliga taggar Crash Course HTML
13 gruppering: "<div>" Ett antal element som på något sätt hör samman ex: "<div id="menu">...ytterligare element... </div>" Crash Course HTML
14 text: normalt innanför "<p>", "<h1>", "<span>", "<div>"- taggar men många andra taggar kan innehålla text - t.ex. "<body>denna text kommer visas</body> I stort sett alla taggar som består av en start-tagg och en slut-tagg kan innehålla text. Crash Course HTML
15 inmatningsfält: "<input>" ex: "<input type='text'>" ex: "<input type='radio'>" ex: "<input type='checkbox' checked='true'>" ex: "<input type='password'>" ex: "<input type='button' value='save Button'>" ex: "<input type='submit'>" ex: "<input type='hidden'>" ex: "<input type="image"> Type image och button kommer behandlas som en button av watir. Crash Course HTML
16 Inmatningsfält, Nyare, ej lika vanliga ännu ex: "<input type='date'>" ex: "<input type=' '>" etc... finns totalt 24 st. De 8 första jag visade är vanligast Crash Course HTML
17 Länkar: "<a> (anchor-tagg) ex: "<a href=" kan också vara en omstylad knapp, eller t.ex. en "<div>" Crash Course HTML
18 Knappar: "<button>", "<input type='button'>", Men: kan också vara en omstylad "<a>"-tag Men: kan också vara en omstylad "<div>"-tag Nästan alla taggar går att styla om många taggar går att göra så de ser ut som knappar. Om ni räknar med att alla element kan göras klickbara så är ni inte helt fel ute (Utvecklaren har använt javascript för att ändra standardbeteendet för element). Crash Course HTML
19 Form: "<form>...</form>" formulär. Data som kommer skickas tillsammans till servern. Ex. "Fyll i dina personliga uppgifter" Kommer för det mesta med en "<input type='submit'>" Crash Course HTML
20 Break: <br /> Line Break Bör eg. inte användas Crash Course HTML
21 Exempel på HTML-element Jag sitter i en vanlig text-editor. Jag laddar html-filen direkt i browsern Crash Course HTML
22 Exempel på HTML-element Jag sitter i en vanlig text-editor. Jag laddar html-filen direkt i browsern Vi kan se hur html för en sida ser ut genom högerklick -> Visa källa. Crash Course HTML
23 Varning: HTML är i praktiken väldigt ofta en sörja id behöver inte vara unikt Problem? Lösningar? HTML används inte enligt standard Problem? Lösningar? Djup och komplex hierarki Problem? Lösningar? Crash Course HTML
24 Resurser: Introduction to HTML HTML element reference Missa inte: "See also" HTML Attributes list Glömt hur en checkbox taggas? Googla "HTML Checkbox" (Engelska sökningar bättre än svenska) Crash Course HTML
25 Varför? Hitta element Se fel på sidan (Avsaknad av resurser, Javascript-fel, etc) Se hur lång tid sidan tar att ladda Se storleken på sidan mm... (för utvecklare: t.ex. debugga javascript) (för designers: t.ex. ändra färger, flytta element on the fly) Crash Course Developer Tools
26 Varför? Låt er inte luras av namnet - kan vara ett utmärkt hjälpmedel för er Crash Course Developer Tools
27 Vi kommer bara kika på inspect element idag. Crash Course Developer Tools
28 Firefox: Firefox -> Webbutvecklare -> Utvecklarfältet Inspektera Element Märkpanel Crash Course Developer Tools
29 Chrome: Meny -> Verktyg -> Verktyg för programmerare Select Crash Course Developer Tools
30 IE: Verktyg -> F12-Utvecklingsverktyg Välj Crash Course Developer Tools
31 Watir Watir
32 Watir: Vad? Scripta End-to-end test i browser m. ruby Samma typ av tester som Record/Replay-tester Watir
33 Stödjer: IE (Endast Windows) Chrome FF Safari (Inte helt 100) Opera Etc. Vi kan även göra test på Android/iPhone-lurar Watir
34 Vilka använder Watir? Watir
35 Alternativ WatiN (C#/.Net) WatiJ (Java) Selenium IDE / Selenium WebDriver => Watir är multiplatform/multispråk Watir
36 Fullt automatiserade test Ex: Ett automatiserat End-to-end test Halvt automatiserade test Ex: Hjälp med att fylla i formulär vid manuella tester Watir
37 Selenium vs. Watir Watir
38 Selenium vs. Watir Watir och selenium WebDriver delar grundkomponenter Watir
39 Selenium vs. Watir Record/Replay (Selenium IDE) ej möjligt med watir out of the box Record/Replay går snabbare att utveckla och är väldigt mycket enklare att lära sig => Men! När man suttit med watir ett tag så är skillnaden inte särskillt stor => Men! Merparten av tiden för att utveckla tester av den här typen är inte implementation Watir
40 Selenium vs. Watir Scriptade test (WebDriver) Många tycker att watir är enklare att lära sig Watir
41 Selenium vs. Watir Watir är kraftfullare out of the box Watir
42 Selenium vs. Watir Varför Watir i denna kurs? En anledning att kika på Watir: Exponering för fler verktyg Watir
43 Selenium vs. Watir Varför Watir i denna kurs? En bättre anledning: Record/Replay har vissa problem jämfört med WebDriver-test. Watir
44 Problematik med Record/Replay Record/Replay-tester generellt sett mer instabila och går lättare sönder vid uppdateringar av SUT Watir
45 Problematik med Record/Replay Record/Replay-tester spelar in onödiga saker (detta bidrar till instabiliteten) Watir
46 Problematik med Record/Replay Vissa element är svårare att spela in: T.ex: Frames, popups Watir
47 Problematik med Record/Replay Selenium har historiskt sett haft större timingproblem (bidrar till instabiliteten) Watir
48 Problematik med Record/Replay Vi kan inte köra record/replay-tester på en build server/ci server hur som helst => Exempel/målbild nästa sida Watir
49 Watir
50 CI (Jenkins) Översiktspanel - vi kan även generera mails, plugins för att exportera till andra format/program Watir
51 Problematik med Record/Replay Vi kan inte integrera record/replay-tester med Unit Tests/BDD-tester hur som helst => Vi kommer kika på detta under senare veckor i kursen. Watir
52 Både selenium och watir utvecklas aktivt ~3-10 releases/år Speciellt WebDriver är fortfarande ganska ungt Watir
53 Vad skall jag välja? Några scenarion Watir
54 Scenario 1: Vi behöver snabbt få upp automatiserade end-to-end test för några vanliga uppgifter. t.ex. tidig utveckling - vi har inte nått upp till en stabil produkt ännu och itererar snabbt => Kör record/replay Watir
55 Scenario 2: Det är inte viktigt att dessa tester fungerar om 6 månader t.ex. en kampanjsite som skall ligga upp 1 månad => Kör record/replay Watir
56 Scenario 3: Det du försöker testa är inte möjligt att spela in Scenario 4: Ett långsiktigt perspektiv - underhåll av dessa test är viktiga Scenario 5: Testerna skall köras på en Build Server (CI) normalfallet? => WebDriver Watir
57 Det sagt: När ni kommer ut i arbetslivet... => Om ni känner er bekväma med Record/Replay - kör på det => Om ni har utrymme att experimentera - vidga era kunskaper till sådant ni är mindre bekväma med => Om ni stöter på patrull med Record/Replay - håll i bakhuvudet att scriptning med ex. watir är en möjlighet som kan lösa era problem Watir
58 Både selenium och watir utvecklas aktivt ~3-10 releases/år Speciellt WebDriver är fortfarande ganska ungt Watir
59 Att använda Watir: definiera vilken browser vi vill använda browser = Watir::Browser.new :ie Watir
60 Att använda Watir: gå till en URL browser.goto 'bit.ly/watir-webdriver-demo' Watir
61 Att använda Watir: verifiera att någonting finns på sidan vi är på div = browser.div :class => 'ss-form-desc ss-no-ignore-whitespace' div.exists? Watir
62 Att använda Watir: vilken typ av element vill vi göra någonting med? HTML element / taggar hur identifierar vi det specifika element vi vill göra någonting med? Vi kommer långt med id, name mer på fredag Även XPath mer på fredag Vad vill vi göra med detta element? Nu:.click Watir
63 Att använda Watir: Mer komplex interaktion: Fredag Watir
64 vänta på X innan vi utför nästa sak Vänta på att en viss tid passerat Vänta på att ett villkor uppfylls Vänta på att ett objekt försvinner Vänta på att ett objekt dyker upp (resurs för vänta: Watir
65 vänta på X innan vi utför nästa sak require 'watir-webdriver b = Watir::Browser.start 'bit.ly/watir-webdriver-demo b.button(:value => 'Submit').wait_while_present b.select_list(:id => 'entry_1').wait_until_present b.text_field(:id => 'entry_0').when_present.set 'your name Watir::Wait.until { b.text.include? 'Thank you' } Watir
66 Resurser - Watir: Watir-boken: (Anses vara 30% färdig) (Snabba exempel) Watir
67 Några allmänna ord om verktygen De flesta verktyg i den här klassen...förutsätter en viss datorvana...har inte någon fokus på användbarhet => Räkna inte med tydliga felmeddelanden Installation VBox
68 ...kryptiska felmeddelanden i textlog - för det mesta hjälper googling...var uppmärksam på fel => För guider: Läs, Läs igen - övertyga dig själv om att du inte missat ngt steg. Fundera även ifall du gjort antaganden som kanske inte stämmer Installation VBox
69 Vid fel Min erfarenhet: Ngt steg i installationsförfarandet missades => felmeddelande har i senare skede visats, men missats Installation VBox
70 Några ord om miljö: Om mig => Min standardmiljö: Windows => Jag tycker om Windowsmiljön => Dvs. Jag är inte en linux-fanatiker Installation VBox
71 När ni jobbar med de flesta scriptspråk (ruby, php, python, etc.) => Föredra *nix (Linux/Unix/BSD) Installation VBox
72 När ni jobbar med de flesta scriptspråk (ruby, php, python, etc.) => Information => ofta utvecklat för *nix Installation VBox
73 När ni jobbar med de flesta scriptspråk (ruby, php, python, etc.) => kontentan: *nix är generellt sätt mer friktionsfritt för språk och verktyg i denna kategori => Hade vi jobbat i WatiN (C#/.Net-variant av Watir) så hade Windows varit miljön att föredra Installation VBox
74 Snabbintro - xubuntu + sublime text + ruby + watirwebdriver Installation VBox
75 Målsättning med labbar: Hands on! Visa grundläggande, men nyttiga scenarion/tekniker => Jag hoppas att ni efter labbarna skall se att ni har någon nytta av de tekniker vi utnyttjar Installation VBox
76 Målsättning denna lab: Mjukstart => Jag räknar med vissa installationsproblem => Schemaändring => Om ni inte uppfattar det som mjukstart: Säg till Installation VBox
77 Om otydligt formulerad fråga: Säg till direkt. Installation VBox
78 Handledning: För "G"-nivå: Väldigt hjälpsam (Räkna med mer hints på tisdagen och mer konkreta saker på fredagen dock) - Räkna med att söka "viss" information på egen hand För "VG"-nivå: Jag kommer hjälpa er, men jag kommer vara mycket mindre konkret - räkna med att ni behöver söka en hel del information på egen hand här Installation VBox
79 Om ni har problem: Gör minst en googling i syfte att lösa problemet Varför vill jag att ni skall söka information på egen hand? Hela hemligheten med att bli IT-proffs: Bli bra på att Googla och snabbt utvärdera ifall informationen ni hittat är vettig Installation VBox
80 Feedback Tänk inte att någon annan säger till ifall det är för svårt Om endast en elev säger till mig => mindre troligt att jag ändrar något Installation VBox
81 Ge inte upp för lätt! Kan du bryta ned problemet i mindre delar - är det något av de mindre problemen du kan lösa?` Har du gjort något liknande som du kan transformera till en lösning på problemet? Kan du börja i någon annan ände? Experimentera! Installation VBox
82 Google + Självförtroende + Pannben = Lösta problem Installation VBox
83 Inga överkursuppgifter => Testa CI-tjänst/Sätt upp CI-server/Build-server (ex: Jenkins) => Scripta upp en Testmiljö (ex: Vagrant) => Utforska själv veckans ämne djupare => Utforska programmering vidare (ex: webbutveckling) => Utforska något av de ämnen vi tar upp på fredagar => Utforska något tidigare ämne ni studerat djupare => Jag bollar gärna idéer med er => Jag kommer fokusera på de som har frågor kring labbarna, så räkna med att vara hyfsat självgående Installation VBox
84 Watir fördjupning Mer avancerade scenarion XPath om det är omöjligt att identifiera ett element Exempel maila gärna Whitebox vs. Blackbox testing Har ni pratat om detta innan? Scripts för enklare test T.ex. för att testa ett Web API Nästa gång
85 Fin
Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.
Lab1 - CV-sidan Du ska bygga en variant av en CV-sida i HTML och CSS. Sidan ska åtminstone innehålla en bild på dig, en klassisk tabell med utbildningar/erfarenheter, ditt favoritcitat, en eller flera
Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen
MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering
Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550
Del 1 och 2 HTML/CSS Vi har fått i uppgift att göra en hemsida av eget val! Jag har bestämt mig för att skapa en hemsida åt en påhittad restaurang här i Umeå som inriktar sig på exklusiv nyttig mat och
En grundkurs i hemsidor och hur de är uppbyggda
En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och
Avancerade Webbteknologier
Projektledning, Business Knowledge Användbarhet & Layout Avancerade Webbteknologier Lkti Lektion 1 Kommunikation Tobias Landén tobias.landen@chas.se Avancerade webbteknologier del 1 (4 KY poäng) Syfte
CMS. - Content management system
CMS - Content management system Agenda CMS Server, webbhotell och FTP Wordpress, ställ mycket frågor Om vi hinner - Snabb genomgång av CMS - uppgiften Nu & Då Sidor med bara HTML och CSS kräver manuell
ORDLISTA WEBBDESIGN 100P
ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.
Du kan själv följa med i denna steg-för-steg guide i din texteditor.
Grundläggande HTML HTML Steg-för-steg Du kan själv följa med i denna steg-för-steg guide i din texteditor. doctype Linköpings universitet I textdokument som används på internet finns på första raden information
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
AngularJS Skriven av: Isak Glans. Datum: 2015-04-29. Kurs: Webbutveckling. Lärare: Per Sahlin. Utbildning: Systemutvecklare i.net, Newtons Yrkeshögskola. 1 Sammanfattning Syftet med denna uppsats är att
Labora&on 8 Formulär övningar/uppgi6er
Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument
Appar med ryggrad. Introduktion till JavaScriptramverket Backbone
Appar med ryggrad Introduktion till JavaScriptramverket Backbone Vanlig webbsida Databas MVC - Model View Controller MVC - Model View Controller MVC Backbone.js Ger struktur Bygger på MVC konceptet Tvingar
Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem
Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem Målsättning Att bygg upp en komplett webbplats i ett publiceringssystem. Platsen ska vara snygg,
Webbprogrammering 725G54
Webbprogrammering 725G54 Hej! Jakob Bandelin, gästadjunkt jakob.bandelin@liu.se Interaktionsdesign, webbdesign, apputveckling Agenda Kursmål och -upplägg HTML Teckenkodning Validering Lab 1. Kursmål exemplifiera
HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)
HTML och CSS Eric Elfving Institutionen för Datavetenskap (IDA) Upplägg Introduktion Grundläggande HTML Ändra utseende med CSS 2 Introduktion HyperText Markup Language används för att strukturera text
JavaScript. DOM Scripting
JavaScript DOM Scripting Vad är Document object Model (DOM)? En standardiserad modell där man ser en webbsida och dess innehåll som objekt document.getelementsbytagname( p ); document.getelementbyid( mittid
Webbprogrammering. Sahand Sadjadee
Webbprogrammering Sahand Sadjadee Agenda Webb The World Wide Web (WWW) is a network of online content that is formatted in HTML and accessed via HTTP. The term refers to all the interlinked HTML pages
Laboration 2: Xhtml och CSS.
Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och
Spelprogrammering med JavaScript och HTML5
Spelprogrammering med JavaScript och HTML5 Vad är vårt syfte? Eleverna ska komma igång fort med programmering. Det ska vara roligt från början. Resultatet ska vara enkelt att visa för kompisar och familj.
Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)
Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet
NU! NU! Bygg en webbplats NU! Bygg en webbplats. Swedish Language Edition published by Docendo Sverige AB. Bygg en webbplats.
web_omslag.qxp 2006-03-20 17:06 Sida 1 NU! CDn innehåller: Upptäck hur du: Använder "dra och släpp-metoden" för att lägga till text, bilder och andra objekt till en webbsida Skapar listrutor och dynamiska
Kort om World Wide Web (webben)
KAPITEL 1 Grunder I det här kapitlet ska jag gå igenom allmänt om vad Internet är och vad som krävs för att skapa en hemsida. Plus lite annat smått och gott som är bra att känna till innan vi kör igång.
Nätet. Uppgiften. Nivå
Nivå 1 Nätet All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Uppgiften Har
Introducerande övningar i HTML
Introducerande övningar i HTML En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att formatera innehållet. Har man bilder på sidan, så finns de som separata filer
Att styla webbsidor. Nivå. Uppgiften
Nivå 2 Att styla webbsidor All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.
Testautomatisering. Intro
Testautomatisering FM: Presentation Genomgång av Kursplan / Kursupplägg Varför testautomatisering? Video + diskussion Idag David Gullmarsvik david.g@jetas.se Software Developer Tidigare Lärare KYH, TI
Testautomatisering. Labbar, FitNesse, TDD, BDD
Testautomatisering Labbar, FitNesse, TDD, BDD Lab 4 Utökad deadline? Lab 4 FM: Lab 1-3 snack FitNesse TDD BDD EM: Handledning Idag Watir::Wait.until {"OK"} Lab 1-3 I Ruby: False: false eller nil True:
En bortsprungen katt
Nivå 1 All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. En bortsprungen katt
Ehandelslösningars komma igång tips!
Ehandelslösningars komma igång tips! Här kan du få reda på allt du behöver för att komma igång och sälja dina produkter! Om du behöver redigera bilder kan du göra det gratis på www.pixlr.com (exempelvis
Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5
Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med
HTML. Introduktion till HyperText Markup Language
HTML Introduktion till HyperText Markup Language 1 Frågor innan vi börjar? 2 Dagens föreläsning Snabb introduktion till webben Varför använder vi HTML? Ett första HTML-dokument Metadata Teckenkodning Validera
EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript
EDA095 HTML Per Andersson Lund University http://cs.lth.se/pierre_nugues/ April 26, 2017 Innehåll: HTML, CSS, DOM, JavaScript Per Andersson EDA095 HTML April 26, 2017 1 / 23 Webben Webben byggs upp av
Webbappar med OpenLayers och jquery
Webbappar med OpenLayers och jquery Johan Lahti GIT-utvecklare Malmö stad ULI Uppsala, 3 oktober 2011 smap (www.smap.se) Samarbete sedan maj 2009 Kartramverk byggt på OpenLayers och jquery Gemensam server
För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:
Hemsida CSS Introduktion till Cascading Style Sheets (CSS) Detta är en mycket kort genomgång av CSS med exempel på hur sådan kod ska läsas och hur den kan användas på IdrottOnline-sidor. Är man ute efter
WEBBUTVECKLING Kursplanering
Kursplanering v 35-37: Struktur, mappar, google-skills, planering, html-grunder, bra/dåliga exempel, webbläsare, editorer v 38-43: HTML - länkar, färger, text, listor, bilder. v 44: Höstlov v 45: Repetition,
Skissa och gissa. Individuellt Mjukvaruutvecklingsprojekt, 1DV430. Christian Nilsson, cn222gc, WP
Skissa och gissa Individuellt Mjukvaruutvecklingsprojekt, 1DV430 Christian Nilsson, cn222gc, WP2012 2013 06 07 1 Abstrakt Detta är min slutrapport för arbetet med att ta fram ett spel kallat Skissa och
Alla filer som bearbetar PHP script ska avslutas med ändelsen.php, exempelvis ska en indexsida till en hemsida heta index.php
Introlektion PHP är ett av de enklare språken att lära sig just pga. dess dynamiska struktur. Det används för att bygga upp båda stora och mindre system. Några vanliga system som använder sig av PHP är
Formulär, textsträngar och en del annat
1ME322 Webbteknik 2 Lektion 6 Formulär, textsträngar och en del annat Rune Körnefors Medieteknik http://medieteknik.lnu.se/1me322 1 2018 Rune Körnefors rune.kornefors@lnu.se Agenda JavaScript Interaktion
Instruktion för användande av Citrix MetaFrame
Instruktion för användande av Citrix MetaFrame Öppna valfri browser, helst Google Chrome eller annan modern browser. Firefox, Safari, MS Edge, IE osv fungerar också men Internet Explorer är dock inget
Kommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod
html och css Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa : http://www.w3schools.com/browsers/
Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka
Webben som verktyg Idag: Hur hänger det ihop? Viktiga tekniker Stegen i ett webbprojekt Verktyg Dreamweaver Photoshop Joomla CMS Storyboard och flödesschema Fixa webbhotell Hur hänger det ihop? För att
TDDD52 CSS. Färger. Färger 1/3/13
Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis
Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.
Laboration 2: HTML och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny
Laboration med Internet och HTML
Laboration med Internet och HTML Denna laboration går ut på att du skall kunna skapa enkla hemsidor i HTML. Vi kommer inte att ta upp edstorer för hemsidor som t.ex. DreamWeaver eller FrontPage. Dessa
21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html
Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar
Översikt. Installation av EasyPHP 1. Ladda ner från http://www.easyphp.org/ Jag använder Release 5.3.4.0 2. Installera EasyPHP.
Laboration 1 Översikt 1. Att komma igång med laborationsmiljön a. installera Aptana Studio 3 b. Installera EasyPHP 2. Testa lite programmering a. Testa enkla uppgifter b. Testa automatiskt 3. Skapa inloggningsformulär
Hja lp till Mina sidor
Hja lp till Mina sidor Vanliga Frågor Varför godkänner inte Mina sidor mitt personnummer trots att jag har prövat flera gånger och är säker på att jag skrivit rätt? Du behöver använda ett 12 siffrigt personnummer
Föreläsning 4. CSS Stilmallar för webben
Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll
Labbrapport: HTML och CSS
Labbrapport: HTML och CSS Utförd av: Natalie Olmosse Mailadress: natalie.olmosse@gmail.com Datum: 2015 12 18 Kursansvarig: Karin Fahlquist Övriga lärare: Ulrik Söderström Första inlämningen Resultat (Godkänd/Retur):
Labora&on 1 Variabler och beräkningar övningar/uppgi9er
Labora&on 1 Variabler och beräkningar övningar/uppgi9er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns
Testramverk och Model based testing med java i praktiken
WHITE PAPER MODEL BASED TESTING Testramverk och Model based testing med java i praktiken Prolore AB Page 1 (6) Web: www.prolore.se Målet med artikeln Den här artikeln syftar till att praktiskt visa hur
"Content is king" - Vacker Webbdesign & Effektiv Sökmotorsoptimering för företag
"Content is king" Skapad den jul 20, Publicerad av Anders Sällstedt Kategori Webbutveckling Jag funderade ett tag på vad jag skulle kalla detta blogginlägg. Problemet som sådant är att många undrar varför
Bilder. Bilder och bildformat
och bildformat Det första du måste göra är att skaffa bilder att lägga in i ett HTMLdokument. Ta en bild med din mobil/ webbkamera eller rita bilden själv.du kan ta gratisbilder från Google, gå in på bilder
Google Analy+cs. Umeå universitet
Google Analy+cs Umeå universitet Webbanalys? Återkoppling Kommunika+onsbehov Strategi Sociala medier Webb Kampanjer Effekt Vad ska vi mäta? Ansökningar Nedladdade filer Läst vik+g info Fyllt i kontaklormulär
Introduktion till MySQL
Introduktion till MySQL Vad är MySQL? MySQL är ett programmerings- och frågespråk för databaser. Med programmeringsspråk menas att du kan skapa och administrera databaser med hjälp av MySQL, och med frågespråk
Elektronisk publicering TNMK30
Elektronisk publicering TNMK30 Förra gången Usability & interaktionsdesign Projektintroduktion Bildbehandling. Byte av handledare Istället för Martin Johansson Annsofi Pettersson, annpe655@student.liu.se
Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er
Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi
Game of 40. Regler och om sidan är in princip samma sak. Det som skiljer dem åt är att de inte har samma text.
Presentation av uppgiften Vi har fått i att skapa en webbapplikation med ett spelbart spel inbyt i sig. Eller som läraren formulerar sig: uppgiften är att skapa en webbapplikation där en eller flera spelare
Kursplanering Utveckling av webbapplikationer
Kursplanering Utveckling av webbapplikationer Fakta Ämne Programmering Poäng 40 Yh-poäng Kurskod YSYS-WEB Klass Systemutvecklare.NET Syfte och koppling till yrkesrollen För att kunna arbeta som systemutvecklare
INTRODUKTION TILL ANGULAR JS
INTRODUKTION TILL ANGULAR JS DEL 1 Mahmud Al Hakim www.alhakim.se mahmud@alhakim.se VAD ÄR ANGULAR? Angular är ett JavaScript ramverk. Angular används för utveckling av frontendwebbapplikationer. Angular
Idag. Webben, HTML och CSS. Live demo. Webbens funktion
Idag Webben, HTML och CSS Institutionen för system- och rymdteknik Luleå tekniska universitet Moment F om webben, HTML och CSS startar nu Dead-line: fredag 28 sep (dvs om en dryg vecka). Uppgift: Skriv,
F15 Tillgänglighet/Accessibility Dagens agenda
F15 Tillgänglighet/Accessibility Dagens agenda Varför bry sig? Vad tjänar jag? WAI Funka Nu WCAG 1, 2 Hjälpmedel Prolog Varför bry sig? En stor del av Sveriges befolkning lider av funktionsnedsättningar
Evaluation Summary - CDT104 Grundläggande Webbdesign HT07 Dan Levin
Evaluation Summary CDT Grundläggande Webbdesign HT7 Dan Levin Antal kursutvärderingar: Q. Anser du dig ha tillräckligt med förkunskaper för att klara kursen? (=JA =NEJ) 9 Skriv kommentarer här... Q. a
Guide Ett FitNesse-test
Guide Ett FitNesse-test Ladda ned RubySlim Från: fitnesse.org -> plugins -> Ruby Slim for Ruby 1.9.3 Klicka på länken till github Leta reda på Zip-knappen -> ladda ned Lägg rubysiim valfri katalog jag
F06 A table form Dagens agenda
F06 A table form Dagens agenda Länkar Tabeller Formulär Hyperlänkar index.html feed/news.html klickbar text hippo.png about.html Relativ länk till webbsida via klickbar länk: klickbar
Nya webbservern Dvwebb.mah.se
Nya webbservern Dvwebb.mah.se Bakgrund: BIT (Bibliotek och IT) beslutar att ta ner Novell systemet 28/3 som är en katalogtjänst som styr bland annat alla studenter s.k. hemkataloger på Malmö högskola såväl
Arbetsmaterial HTML pass 1 - Grunder
Arbetsmaterial HTML pass 1 - Grunder Det vi idag kallar Internet växte fram ur ett amerikanskt nätverk kallat ARPAnet som skapades i slutet av 60 talet. Ett topphemligt verktyg för att koppla ihop stordatorer
Hemsida. Lathund för medlemsföreningar. Funktioner för medlemsföreningar på hemsidan. Syfte med medlemsföreningens sidor
Hemsida Lathund för medlemsföreningar 2015 10 13 Funktioner för medlemsföreningar på hemsidan Varje medlemsförening har en egen sektion på scuf.se Styrelsen kan redigera sin medlemsförenings sidor, skriva
Hemsideskolan - Cheklistor
Hemsideskolan - Cheklistor Den här PDF filen innehåller de checklistor som ingår i Hemsideskolan på www.hemsida24.se. Ladda ned hemsideskolan Hemsideskolan är en guide för dig som vill lära dig mer om
Introduk+on +ll programmering i JavaScript
Föreläsning i webbdesign Introduk+on +ll programmering i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Språk Naturliga språk Mänsklig kommunika+on T.ex. Svenska, engelska,
HUR MAN SKAPAR EN SÖKMOTORVÄNLIG LANDNINGSSIDA.
HUR MAN SKAPAR EN SÖKMOTORVÄNLIG LANDNINGSSIDA. Innehåll Introduktion... 2 Title... 2 Huvudrubrik... 2 Underrubriker... 3 Alt-attributet... 3 Fetstil och kursivering... 3 Brödtexten... 4 Meta Description...
Olika slags datornätverk. Föreläsning 5 Internet ARPANET, 1971. Internet började med ARPANET
Olika slags datornätverk Förberedelse inför laboration 4. Historik Protokoll, / Adressering, namnservrar WWW, HTML Föreläsning 5 Internet LAN Local Area Network student.lth.se (ganska stort LAN) MAN Metropolitan
Instruktion för användande av Citrix MetaFrame
Instruktion för användande av Citrix MetaFrame Öppna valfri browser, t ex Internet Explorer eller Firefox, och ange url en www.git.ltu.se. Detta medför att följande bild presenteras. OBS! Ny version av
ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML
ITK:P2 F1 FTP, HTTP, HTML, XML och XHTML DSV Peter Mozelius 1 Hemsidor med HTML Hur många av er har provat på att bygga en egen hemsida med HTML eller XHTML? För hand eller med hjälpverktyg? Har ni lagt
Användarhandledning. edwise Webbläsarinställningar 2012-10-24
Användarhandledning edwise Webbläsarinställningar 2012-10-24 Sida 2/11 Innehållsförteckning 1 Webbläsarinställningar... 3 1.1 Internet Explorer Kompatibilitetsläge... 3 1.1.1 Inställningar för kompatibilitetsvyn...
Föreläsning 2. Operativsystem och programmering
Föreläsning 2 Operativsystem och programmering Behov av operativsystem En dator så som beskriven i förra föreläsningen är nästan oanvändbar. Processorn kan bara ges enkla instruktioner såsom hämta data
Komponenter i en dator Operativsystem Vanliga applikationer Internet Säkerhet Nyttiga webb-appar/webb-sidor Scenarion. Översikt
Data Grunder Komponenter i en dator Operativsystem Vanliga applikationer Internet Säkerhet Nyttiga webb-appar/webb-sidor Scenarion Översikt Vilka delar ingår i en dator? En dators uppbyggnad Processor
Labora&on 7 Syfte med laborationen:
Labora&on 7 Syfte med laborationen: - att förstå enkel 7ilhantering i PHP - att repetera grundläggande PHP- begrepp såsom loopar, arrayer, stränghantering och formulär. VIKTIGT: uppgift 3-5 är repetitionsuppgifter
03/12/2015. Logga in på: b.socrative.com eller ladda ner appen
Logga in på: b.socrative.com eller ladda ner appen Använder Har skapat använt skrivit internet i webbsidor. CSS html. (stilmall). (nästan ) dagligen. 1 Dator med webbläsare Interne t Webserver Smartphon
Webbteknik för ingenjörer
Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera
Webbprogrammering TDDD52
Webbprogrammering TDDD52 ERD MySQL+PHP. Förra gången Idag Javascript jquery Progressive enhancement XML & AJAX Lab 4 och 5 Sammanfattning av kursen. Om databastabeller varje tabell ska beskriva en typ
JAVASCRIPT. Beteende
JAVASCRIPT Beteende OVERVIEW HTML Formulär JavaScript Syntax Events DOM Validering av fomulär WEBBPROGRAMMERING PÅ KLIENTSIDAN Skriptspråk som körs på klientsidan (klientskript) Koden exekveras i webbläsaren
TDP003 Projekt: Egna datormiljön
. TDP003 Projekt: Egna datormiljön Egen utvecklingsmiljö Kursmaterial till kursen TDP003 Höstterminen 2017 Version 2.2 2017-06-30 2017-06-30 Egen utvecklingsmiljö INNEHÅLL Innehåll 1 Revisionshistorik
LUVIT LMS Quick Guide LUVIT Composer
www.grade.com LUVIT LMS Quick Guide LUVIT Composer LUVIT Composer LUVIT Composer är ett verktyg för att enkelt skapa snyggt innehåll direkt i LUVITs kurser. Verktyget innehåller designade mallar som du
HTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren.
Vad är Semantic Elements? HTML5 Semantic Informationen kommer från w3schools.com Semantik (av grekiska sema, "tecken") avser det vetenskapliga studiet av teckensystems innebörd och tolkning. Semantic elements
Uppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 4. Peter Dalenius Institutionen för datavetenskap
Uppmärkningsspråk TDP007 Konstruktion av datorspråk Föreläsning 4 Peter Dalenius Institutionen för datavetenskap 2015-02-03 Från förra gången XML-dokument specificeras med t.ex. en DTD Två olika sätt att
Övningar i JavaScript del 5
Övningar i JavaScript del 5 I dessa övningar ska vi ta upp några lika händelsehanterare. Dessa ska dck inte läggas in med attribut i HTML-kden, så sm vi gjrt tidigare med nclick. Istället ska vi nu lägga
Uppdaterad: 2014-03-18. Lathund. Anslagstavlan
Uppdaterad: 2014-03-18 Lathund Anslagstavlan 1 1 Innehållsförteckning Inledning 3 Anslagstavlan 4 Sponsorlogga 4 Klickbar logga 5 Youtube film 7 Facebook gilla knapp 9 2 2 Skriv ej ut manualen! För att
ANVÄNDARMANUAL, INTERAXO
ANVÄNDARMANUAL, INTERAXO 1 VARFÖR ÄR DET OLIKA FÄRG OCH UTSEENDE PÅ MAPPARNA? Gula mappar Blå mappar Blårandiga mappar Enkla mappar som man känner igen från Utforskaren. En gul mapp kan innehålla undermappar
I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.
Lokal Gästbok I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Gästboken ska fungera som så att man har ett fält där man kan
Att bygga enkla webbsidor
Nivå 1 Att bygga enkla webbsidor All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/18cplpy to find out what
Prova på-laboration i PHP Johan Sjöholm johsj@ida.liu.se Institutionen för datavetenskap, Linköpings universitet 2009-08-09
Prova på-laboration i PHP Johan Sjöholm johsj@ida.liu.se Institutionen för datavetenskap, Linköpings universitet 2009-08-09 1. Introduktion till webbprogrammering Webbprogrammering består av ett antal
Sammanställning av kursutvärdering Samlad bedömning
Webbdesign med JavaScript och Document Object Model, 7. hp Sammanställning av kursutvärdering Samlad bedömning Fristående nätkurs Kurs: Webbdesign med JavaScript och Document Object Model, 7. hp Kurskod:
F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet
Föreläsning 2, HT2013 HTML F02 HTML Kurser: Klientbaserad Webbutveckling 1DV435 Johan Leitet F02 HTML Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML
Webbplats analys emreemir.com
Webbplats analys emreemir.com Genereras på Mars 10 2019 18:41 PM Ställningen är 66/100 SEO Innehåll Titel Emre Emir, Full-Stack Web Developer Längd : 35 Perfekt, din titel innehåller mellan 10 och 70 tecken.
Uppdaterad: 2014-03-18. Lathund. Nyhetsbrev
Uppdaterad: 2014-03-18 Lathund Nyhetsbrev 1 1 Innehållsförteckning Inledning 3 Nyhetsbrev 4 Nyhetsbrevsanmälan 4 Skapa nyhetsbrevsanmälan 4-6 Skapa layout för nyhetsbrev 7-10 Skapa nyhetsinnehåll 10 Lägg
Tillgänglighet som en naturlig del i våra projekt. Sid 1 Mars 2016 Tillgänglighet
Tillgänglighet som en naturlig del i våra projekt Sid 1 Mars 2016 Tillgänglighet Sid 2 Mars 2016 Tillgänglighet Responsiv webb Projektet Responsiv webb 28 nov 2015 Responsiva produkten v 1.0 Maj 2016 Responsiva
HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015
. HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17
Bloggdesign { ALEXANDRA 299:- 359:- Lilla Designpaketet. Designpaketet Mellan. Prislista: Designpaket
Bloggdesign Dessa designpaket är utformade för dig som bloggar och vill ha en ny, proffsigare och mer personlig design. Jag gör designer för blogg.se/webblogg.se/blo.gg. När du har bestämt dig för vilket
Integrerad i egen cup-portal Sid 1
Integrerad i egen cup-portal Sid 1 Skillnader mellan fristående och integrerad cup-portal En liten viktig synpunkt innan ni går vidare: Det går snabbt och enkelt att växla mellan den fristående och integrerade
Ge ditt supportärende en flygande start. Tips och fallgropar.
Ge ditt supportärende en flygande start Tips och fallgropar. Vi upplever problem vid redigering. Vad är problemet? Klas Hedström Supportmedarbetare klas.hedstrom@sitevision.se VI PÅ SUPPORTEN 5 Ge ditt