Spelprogrammering med JavaScript och HTML5
|
|
- Stefan Sandström
- för 9 år sedan
- Visningar:
Transkript
1 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. Det ska vara lätt att skriva koden oavsett operativsystem. Ett enkelt exempel med library.js Så här ser kan koden se ut i utgåva ett av vår bok. litetspel.html <html> <head> <title>lek med canvas</title> <script src=" <script src="litetspel.js"> </head> <body> <canvas id="canvas" width="800" height="400"></canvas> </body> </html> litetspel.js circle(200, 150, 70, "red"); Problem vi har stött på Nybörjare skrev av HTML-koden fel. Nybörjare hade problem med att skriva två kodfiler, speciellt när de skulle börja med nästa uppgift och skapa två nya filer. Förenklingarna för nybörjare var begränsande för avancerade elever. Vi hade gjort det hyfsat enkelt för nybörjare att sätta igång och hyfsat enkelt för duktiga elever att fortsätta. Men vi ville att det skulle vara mycket enklare för nybörjare, och samtidigt lättare att bygga vidare för de duktigaste eleverna... Vår lösning blev en uppdelning i två bibliotek. Ett som förenklar så mycket som det bara går och ett som passar in i mer avancerade lösningar. SITSNET seminarium 6, , Roboro. Sida 1 av 7.
2 Det enkla biblioteket - simple.js Eleverna skapar bara en kodfil, t.ex. mittspel.html De kommer igång direkt med programmeringen, mängden kod som behöver skrivas av utan att förstå är minimerad. Koden följer inte nödvändigtvis god sed eller standarder, vi gör allt för att det ska bli så enkelt som möjligt. Det här är hela HTML-filen som behöver skrivas av: <script src=" Notera att all vanlig HTML är borta, eleven ska inte behöva ha sett HTML innan. Mellan de två sista script-taggarna skriver man sin JavaScript-kod. Exempelvis: <script src=" circle(100, 200, 20, 'red'); circle(mouse.x, mouse.y, 20, 'blue'); Detta ger en röd cirkel på x-koordinat 100 och y-koordinat 200, och en blå cirkel som följer muspekaren. Det enkla biblioteket gör alltså att man nästan helt slipper skriva HTML-kod och man behöver bara skapa en fil. Eleverna kommer igång i princip direkt och får automatiskt tillgång till hela webbläsarens yta. Vi använder oss av det enkla biblioteket för att lära ut grunderna i programmering, bygger enkla spel och experimenterar med fysik och avancerad matematik. I princip samma saker som redan finns i vår bok, men det blir lättare att komma igång med. Det avancerade biblioteket: advanced.js Eleven skriver hela HTML-koden själv, inklusive canvas-element. Antagligen skrivs JavaScript i separata filer. Målet är att HTML-koden ska följa standarder och god programmeringssed. Eleven kan ha flera canvas-element och experimentera med att använda konceptet för annat än spel. Exempelvis effekter på hemsidor. Man kan enkelt använda biblioteket medan man lär sig HTML och CSS. SITSNET seminarium 6, , Roboro. Sida 2 av 7.
3 Exempel där eleven gjort allt i en HTML-fil: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>mitt spel</title> <style> #one border: 1px solid red; #two border: 1px solid blue; </style> </head> <body> <canvas id="one" width="800" height="200"></canvas> <canvas id="two" width="800" height="200"></canvas> <script src=" a = new RoboroCanvas('one'); b = new RoboroCanvas('two'); a.update = function() a.circle(a.mouse.x, a.mouse.y, 10, 'brown'); ; b.update = function() b.circle(b.mouse.x, b.mouse.y, 10, 'yellow'); ; </body> </html> Med det avancerade biblioteket måste eleven själv hantera all HTML och CSS och även skapa canvas-elementen. Som exemplet ovan visar kan man skapa flera canvas-element som blir helt oberoende av varandra. Eleverna uppmuntras att utnyttja allt som är häftigt med JavaScript, och integrera det med korrekt HTML och CSS. Vi har delat upp funktionaliteten i advanced.js i flera API:er som alla bygger på objektorientering. Själva canvas-ritandet, inklusive musrörelser och pethändelser, går genom RoboroCanvas, tangentbordsinteraktion genom RoboroKeyboard och ljud genom RoboroSound. SITSNET seminarium 6, , Roboro. Sida 3 av 7.
4 Några exempel med simple.js En röd boll <script src=" circle(100, 200, 20, 'red'); Styr färg och storlek med variabler <script src=" size = 20; color = 'red'; circle(100, 200, size, color); Fråga användaren om färg och storlek <script src=" size = prompt('what size?'); color = prompt('what color?'); circle(100, 200, size, color); Rita många bollar med en loop <script src=" size = prompt('what size?'); color = prompt('what color?'); for (i = 0; i < 100; i += 1) circle(100 + i, i, size, color); SITSNET seminarium 6, , Roboro. Sida 4 av 7.
5 Animation <script src=" x = 100; circle(x, 200, 10, 'red'); x += 1; Interaktion med musen, bollen följer musen <script src=" circle(mouse.x, mouse.y, 10, 'red'); Interaktion med tangentbordet, ny boll styrs med pilarna <script src=" cat = ; cat.x = 100; cat.y = 100; cat.speed = 10; circle(mouse.x, mouse.y, 20, 'red'); circle(cat.x, cat.y, 20, 'blue'); if (keyboard.up) cat.y -= cat.speed; if (keyboard.down) cat.y += cat.speed; SITSNET seminarium 6, , Roboro. Sida 5 av 7.
6 if (keyboard.left) cat.x -= cat.speed; if (keyboard.right) cat.x += cat.speed; Avsluta spelet om bollarna kommer nära, lägg till poängräknare, byt ut bollarna <script src=" cat = ; cat.x = 300; cat.y = 300; cat.speed = 10; score = 0; picture(cat.x - 200, cat.y - 150, 'tom.png'); picture(mouse.x - 50, mouse.y - 50, 'jerry.png'); text(20, 40, 20, 'Score: '+score); if (keyboard.up) cat.y -= cat.speed; if (keyboard.down) cat.y += cat.speed; if (keyboard.left) cat.x -= cat.speed; if (keyboard.right) cat.x += cat.speed; if (distance(mouse.x, mouse.y, cat.x, cat.y) < 40) stopupdate(); score++; SITSNET seminarium 6, , Roboro. Sida 6 av 7.
7 Förkorta koden <script src=" cat = x: 300, y: 300, speed: 10 ; score = 0; picture(cat.x - 200, cat.y - 150, 'tom.png'); picture(mouse.x - 50, mouse.y - 50, 'jerry.png'); text(20, 40, 20, 'Score: ' + score); cat.x += (keyboard.right - keyboard.left) * cat.speed; cat.y += (keyboard.down - keyboard.up) * cat.speed; if (distance(mouse.x, mouse.y, cat.x, cat.y) < 40) stopupdate(); score++; Vad händer nu Köp gärna vår bok och ge oss tips och idéer på hur vi kan bli bättre. Vi håller på för fullt med att skriva en ny utgåva där simple.js och advanced.js används. Denna beräknas vara färdig om några månader. Vi kommer att hålla uppdaterad med mer information. SITSNET seminarium 6, , Roboro. Sida 7 av 7.
Tillämpad Programmering. Ekonomi + Spel + Javascript
Programmerat exempelprojekt (följ länk och tryck på RUN) https://repl.it/@hakanandersson/canvas-shop Tillämpad Programmering. Ekonomi + Spel + Javascript Håkan Andersson Webbapplikationer Java applets
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.
Lektion 3 HTML, CSS och JavaScript
Lektion 3 HTML, CSS och JavaScript I den här lektionen behandlas HTML, CSS och JavaScript (JS). Det förutsätts att lektion 1 och 2 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML
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
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
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
JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?
Innehåll JavaScript En introduktion till skriptspråket JavaScript och till DOM Scripting Introduktion till JavaScript och DOM JavaScript Syntax DOM och DOM Scripting Händelsehantering och CSS Historia
Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:
Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både
WEBDESIGN A - DTR 1210
Lektion 6: Tabeller Vi ska lägga till en tabell i hemsidan. Först ska vi titta lite på hur man gör tabeller. Vi börjar med enklast tänkbara tabell. En tabell med bara en ruta: Nu ska vi gå igenom steg
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
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
Lektion 2 - CSS. CSS - Fortsätt så här
Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt
Programmering. Scratch - grundövningar
Programmering Scratch - grundövningar Lär känna programmet: Menyer för att växla mellan att arbeta med script, utseende/bakgrund och ljud. Scenen där allting utspelar sig. Här klickar du på bakgrunden
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
CSS-övningar. 1. Grunder
CSS-övningar 1. Grunder CSS Testa stilmallar Klasser Elementen div och span Ärvda egenskaper Mer om typsnitt, marginaler och mått Textdekor Fristående CSS -fil Attributet style Prioritetsordning hos stilelement
WEBDESIGN A - DTR 1210
Lektion 9: Tips tricks och diverse Bakgrundsbilder Bakgrundsfärg och textfärg är några sätt att ge sin hemsida ett visst utseende. Ett annat sätt är att använda bakgrundsbilder. Man behöver en bild: HTML-koden
Slutrapport för Internetfonden
Slutrapport för Internetfonden Webbprogrammering i matematik och fysikundervisning Mikael Tylmad mikael@roboro.se Fredrik Atmer fredrik.atmer@gmail.com Ella Kai-Larsen e@k-l.se 10 april 2014 http://www.profyma.se/
JavaScript del 9 Dynamik och animeringar
JavaScript del 9 Dynamik och animeringar Det sista vi ska titta på när det kommer till att lära oss JavaScript är hur vi skapar dynamik på vår webbplats, ge användarna chansen att påverka vad som händer
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
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
Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!
Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna
Extramaterial till Matematik Y
LIBER PROGRAMMERING OCH DIGITAL KOMPETENS Extramaterial till Matematik Y NIVÅ TRE Algebra ELEV Det finns många olika programmeringsspråk. Ett av dem är Python, som du ska få bekanta dig med i den här uppgiften.
Teknikprogrammet, inriktning informations- och medieteknik
Teknikprogrammet, inriktning informations- och medieteknik Varför välja oss? Kursplan Presentation av våra datatekniska kurser Eftersom företag mycket sällan anställer gymnasieelever (de vill att ni ska
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
E07 "Greased Lightning"
E07 "Greased Lightning" Föreläsning 7, HT2014 CSS och Event Kurs: 1dv403 Webbteknik I Johan Leitet E07 Greased Lightning Dagens agenda CSS-egenskaper Händelsestyrd programmering Händelsehanterare Typer
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
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
JavaScript. En Introduktion
JavaScript En Introduktion Innehåll Introduktion till JavaScript Händelsehantering och CSS Felhantering i JavaScript Validering i JavaScript Introduktion Ingen koppling till Java Statiska och dynamiska
Det ska endast finnas två bilder av samma typ på spelplanen.
Laboration 3 Laboration 3, Memory Observera För att bli godkänd på laborationen ska din källkod följa den standard vad det gäller kommentering, val av variabelnamn m.m. som gåtts igenom på föreläsning.
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
<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
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
Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma
Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Föreläsning 2 Internet Hypertext Server och klient HTTP HTML Internet Många sammankopplade nät Gemensamma adresser T ex 10.10.0.1 Gemensamma protokoll Protokoll = regler och algoritmer för kommunikation
Loopar och ljud 3 av 7. Lektionen handlar om att lära sig programmera loopar och använda ljudeffekter med verktyget Scratch. Loopar och ljud 3 av 7
Lektionen handlar om att lära sig programmera loopar och använda ljudeffekter med verktyget Scratch. Lektionsförfattare: Lotta Ohlin Andersson Till läraren 1. Loopar och ljud 2. Repetera det du gjort En
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
Loopar och ljud 3 av 7. Lektionen handlar om att lära sig programmera loopar och använda ljudeffekter med verktyget Scratch. Loopar och ljud 3 av 7
Lektionen handlar om att lära sig programmera loopar och använda ljudeffekter med verktyget Scratch. Lektionsförfattare: Lotta Ohlin Andersson Till läraren 1. Loopar och ljud 2. Repetera det du gjort Sida
Om include-filer i PHP
Programmering för webben! 1 Om include-filer i PHP För att få bättre struktur och slippa skriva vanligt förekommande kod flera gånger använder man ofta include-filer i PHP. Här kommer en kort beskrivning
Post Mortem för Get The Treasure!
Post Mortem för Get The Treasure! Av: Emil Lindberg - Grupp 15 Vi skulle göra ett action multiplayerspel som spelades över nätverket. Vilket vi nästan lyckades göra. Tiden tog slut och programmerarna han
Lektion 2 Del 1 Kapitel 6
Lektion 2 Del 1 Kapitel 6 Inlärningsmål Att kunna kontrollera och styra webbsidors utseende med hjälp av CSS mallar Att med hjälp av CSS mallar kunna ge en hel website ett gemensamt utseende Att med hjälp
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
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,
Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20
Laboration 3 CSS del 2 1 av 20 Vad kommer jag att lära mig på laboration 3? 1. Skriva en stilmall Boxegenskaper o border o margin o padding o width o float o clear Färger och bakgrundsbilder Positionering
Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012
Oktober 2012 Uppgiften går ut på att redovisa dina kunskaper kring JavaScript, liksom din förmåga att skapa en CSS-baserad layout. Detta gör du genom att lämna in ett resultat som följer specifikationerna
Den hungriga fisken. Vi ska göra ett spel om en hunrgig fisk! Styr den stora Hungriga Fisken och försök att äta upp alla kräftor som simmar omkring.
Nivå 2 Den hungriga fisken 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.
Innehålls förteckning
Programmering Uppsats i skrivteknik Axxell Företagsekonomi i informationsteknik 19.3.2015 Respondent: Tomas Björklöf Opponent: Theo Wahlström Handledare: Katarina Wikström Innehålls förteckning 1. Inledning...3
Carl-Oscar Hermansson WEBB DESIGN
Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...
Programmeringsappar. Av Alex
Programmeringsappar Av Alex Omdöme 4/5 40 Kr 10+ År Robot School Robot School kommer från företaget Next is Great I appen Robot School hjälper man roboten R-obbie att nå sitt batteri genom att placera
F07 Stilmallar Dagens agenda
F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Stilmallar
Slump och statistik med Scratch
Lektionen handlar om att simulera tärningskast och skapa en statistikapplikation genom att arbeta med modifiera algoritmer. Lektionsförfattare: Måns Jonasson En digital lektion från https://digitalalektioner.iis.se
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,
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.
DOM (Document Object Model) är modellen efter vilken en webbläsaren är uppbyggd. Alla objekt/element i webbläsaren finns hierarkiskt ordnade i DOM.
JavaScript del1 Syftet med detta häfte är att sammanfatta det viktigaste i JavaScript så kort och koncist som möjligt men ändå tillräckligt omfattande för att ge god kännedom om en av de vanligaste teknikerna
Mattekungen åk 6-9 vers. 1.0
Presentation av programvara våren 2008 Bodil Holmström Anna Holmström Bearbetat av Karolina Höglund Mattekungen åk 6-9 vers. 1.0 Allmänt om programmet Mattekungen är ett undervisningsprogram som produceras
E13 Behind the Wild. Dagens agenda. Cookies Context/ändra context Augmentation (förstärkning) Klassiskt arv Att låna metoder Namespaces Postludium
E13 Behind the Wild Dagens agenda Cookies Context/ändra context Augmentation (förstärkning) Klassiskt arv Att låna metoder Namespaces Postludium Cookies Alternativ: IP-adress URL
Tepz klon. - Projektrapport. Linnéuniversitetet, Individuellt mjukvaruutvecklingsprojekt Janina Bergström, WP12 Distans
Tepz klon - Projektrapport Janina Bergström jb222qp WP12 Distans 8/6-2013 Linnéuniversitetet, Individuellt mjukvaruutvecklingsprojekt 1 Abstrakt Denna rapport handlar om min klon av det existerande spelet
F r a m e s - r a m a r
skriv ut» F r a m e s - r a m a r Exempel på framesets» Ramkanter (borders)» Färg på ramkanter» Bläddringslister (scrolling)» Marginaler» Länkning i ramar» Uppdatera flera ramar samtidigt» IFRAME - inbäddad
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
En stiligare portal Laboration 3
Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt
Högskolan i Halmstad Multimedia och visuell kommunikation Övning 1 Adobe Flash, grundfunktioner & interpolering. Efter övningen förväntas du kunna:
Högskolan i Halmstad Multimedia och visuell kommunikation Övning 1 Adobe Flash, grundfunktioner & interpolering Efter övningen förväntas du kunna: Skillnaden mellan: o Bildrutor och nyckelbildrutor; o
Lär dig programmera! Prova på programmering med enkla exempel! Björn Regnell www.bjornregnell.se
Lär dig programmera! Prova på programmering med enkla exempel! Björn Regnell www.bjornregnell.se Mål Så enkelt som möjligt: låg tröskel Ett riktigt programmeringsspråk: inget tak Roliga uppgifter som går
Övning (X)HTML 2. Sidan 1 av 7 2010-11-11
Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan
Instruktioner för Articulate Studio 13
Instruktioner för Articulate Studio 13 Instruktion för kursproduktion till Netcompetence Talent Portal NETCOMPETENCE 2016-12-19 Innehåll Inledning... 2 Om Articulate... 2 Om Studio 13... 2 Om Storyline
Slump och statistik med Scratch. Se video
Se video I lektionen simuleras hundratals tärningskast på kort tid. Eleverna får skapa en statistikapplikation och lära sig att skapa och modifiera algoritmer. Måns Jonasson, Internetstiftelsen, har arbetat
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
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
Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1
Internet A HTML Grunder 1 HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en 2 untitled Min
Slutrapport för JMDB.COM. Johan Wibjer 2012-06-03
Slutrapport för JMDB.COM Johan Wibjer 2012-06-03 Abstrakt Den här rapporten kommer handla om mitt projekt som har handlat om att gör en webb sida för ett personligt media bibliotek, hur jag har jobbar
Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket.
e-line mobilversion Pyramid Business Studio 3.42A servicepack 05 (2015-07-13) Mobilversionen av e-line är i grunden samma applikation som fullversionen av e-line. Skillnaden är att endast valda delar av
Att prova på en enkel Applet och att lära sig olika sätt att hämta data från tangentbordet. Du får även prova på att skapa din första riktiga klass.
Datateknik A, Syfte: Att prova på en enkel Applet och att lära sig olika sätt att hämta data från tangentbordet. Du får även prova på att skapa din första riktiga klass. Att läsa: Lektion 2 Uppgifter:
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
Grundläggande programmering, STS 1, VT Sven Sandberg. Föreläsning 20
Grundläggande programmering, STS 1, VT 2007. Sven Sandberg Föreläsning 20 Förra gången: GUI: Sammanfattning Fler exempel: KryssEnkat och FotoAlbum Fönster med variabelt antal objekt Idag: Ett stort exempel:
Nallelek Lärarvägledning
NALLELEK - LÄRA MERA PROGRAM AB Nallelek Lärarvägledning NALLELEK... 2 1.1 Programmet... 2 1.2 Övningar som stärker förmågan att iaktta bilder och se detaljer... 3 1.2.1 Pedagogiska tips... 3 1.3 Kategorisering
JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI
JavaScript JavaScript Ramverk (Bibliotek) jquery + jquery UI Allmänt ramverk/bibliotek Importera JavaScript-kod Plattformsoberoende JavaScript Prototype + script.aculo.us jquery + jquery UI Återanvända
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Dokument i övningarna I denna labora&on finns inga filer ar
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
Skapa mappar, spara och hämta dokument
Skapa mappar, spara och hämta dokument Övningen görs på hårddisken i mappen Mina dokument 1a Starta programmet utforskaren 1 b Huvudgrupper i utforskaren 1c Expandera huvudgrupper, enheter och mappar Skapa
Materialspecifikationer
HD SYDSVENSKAN CITY NÄRA H I T TA H E M. S E MERAJOBB.SE Materialspecifikationer webb 2015 www.hdsydsvenskan.se Standardformat Panoramabanner Storlek: 980x240 px Enhet: Dator / Läsplatta Video / ljud:
Tillgänglighetskrav på teknik Dessa krav baseras på WCAG 2.0, http://www.w3.org/tr/wcag20/
Tillgänglighetskrav på teknik Dessa krav baseras på WCAG 2.0, http://www.w3.org/tr/wcag20/ UPPDRAGSGIVARE: Malmö stad VÅR REFERENS: Andreas Cederbom 08-555 770 64 andreas.cederbom@funkanu.se DATUM: 2009-04-03
Materialspecifikationer webb 2014
SYDSVENSKAN CITY NÄRA H I T TA H E M. S E MERAJOBB.SE SYDSVENSKAN WEBBYRÅ Materialspecifikationer webb 2014 www.sydsvenskan-webbyra.se Standardformat Panoramabanner Storlek: 980x240 px Framerate: 18-24
Undervisningen i ämnet webbutveckling ska ge eleverna förutsättningar att utveckla följande:
WEBBUTVECKLING Ämnet webbutveckling behandlar de tekniker som används för att presentera och bearbeta information i webbläsaren samt utifrån dessa tekniker skapa och vidareutveckla statiska och dynamiska
// //Constructor public function Main_Playground() { init(); }
Den här övningen kommer även den att beröra kontroll av figurer med piltangenter, men denna gång ska vi träna på att plocka upp och släppa objekt, samt hantera kollisioner. 1. Öppna filerna du förberedde
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
Teknikblock på TIS Stockholm
Det här är en beskrivning av hur vi kommer att jobba med teknik och entreprenörskap detta år. Teknikblock på TIS Stockholm Teknikblock är ämnesövergripande aktiviteter i undervisningen. De är kärnan i
E13 "Behind the Wild"
E13 "Behind the Wild" Föreläsning 13, HT2014 Det vi missat och lite till Kurs: 1dv403 Webbteknik I Johan Leitet E13 Behind the Wild Dagens agenda Cookies Web storage Context/ändra context Augmentation
Laborationsanvisning. HTML5 Laboration 6. Författare: Johan Leitet Version: 1 Datum: 2011-10-03
Laborationsanvisning HTML5 Laboration 6 Författare: Johan Leitet Version: 1 Datum: 2011-10-03 Inledning I denna avslutande laboration ska du testa att märka upp en sida med de nya taggarna i HTML5. Mikroformat
On-line produktion TDDC61
On-line produktion TDDC61 Förra gången MuddyCards Animation Portfolio Lab 3. Muddycards - resultat Positiva kommentarer Tempo föreläsningar Labbhandledning, pedagogik Mer labbhandledning Instruktioner
Vi börjar med en penna som ritar när du drar runt den på Scenen.
Nivå 3 Målarlådan 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. Introduktion
Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0
Webbtillgänglighet Webbtillgänglighet Att göra webbinnehåll så att de är tillgängliga för alla oavsett vilka funktionsnedsättningar man har Att göra webbinnehåll tillgängligt oavsett vilken in- och utmatningsutrustning
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/
Julskoj. Nivå. Introduktion
Nivå 2 Julskoj 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. Introduktion
För att få respektive betyg krävs: 25 för godkänt, 37,5 för väl godkänt (obs betyget gäller tentan, inte kursen som helhet)
Webbdesign Provmoment: Ladokkod: Tentamen ges för: TentamensKod: TEN NWD011 SV16 7,5 högskolepoäng Tentamensdatum: 31 okt 2017 Tid: 9-13 Hjälpmedel: Färgpennor är tillåtna. Totalt antal poäng på tentamen:
Copy Cat Laboration 4
Laborationsanvisning Copy Cat Laboration 4 Författare: Johan Leitet Version: 1 Datum: 2011-09-19 Inledning Vi kommer på denna laboration fortsätta med CSS och nu finslipa vår sida. Du kommer även att få
KOM IGÅNG, UPPDRAG OCH KOMPONENTER
KOM IGÅNG, UPPDRAG OCH KOMPONENTER Kom igång: Gå in på http://microbit.org/ http://microbit.org/guide/ 1 http://microbit.org/guide/quick/ Koppla in din micro:bit och gå in på http://microbit.org/code/
12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration
REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap
Tisdag 50 Onsdag 50 Fredag 90
Tidsplanering: 10 11 Tisdag 50 Onsdag 50 Fredag 90 6/3 Lektion 1 Vad är programmering? Övningar 13/3 Lektion 4 7/3 Lektion 2 Övning Blue-bot 13/2 Lektion 5 9/3 Lektion 3 16/3 Lektion 6 12 20/3 Lektion
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
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
Övnings hemtentamen med förslag till lösning, webbprogrammering
Övnings hemtentamen med förslag till lösning, webbprogrammering Se detta som ett förslag efter som uppgifterna ofta går att lösa få flera sätt. Uppgift 1 CSS 4 poäng Alla css regler skall placeras i en
Instruktioner för Articulate Storyline 2
Instruktioner för Articulate Storyline 2 Instruktion för kursproduktion till Netcompetence Talent Portal NETCOMPETENCE 2016-12-19 Innehåll Inledning... 2 Om Articulate... 2 Om Studio 13... 2 Om Storyline