Kommunikation och Användargränssnitt
|
|
- Charlotta Lindqvist
- för 7 år sedan
- Visningar:
Transkript
1 Kommunikation och Användargränssnitt TNM040 AngularJS Laboration 2 Per Lind perli379@student.liu.se
2 Introduktion Målet med denna laboration är att göra egna layouts i Bootstrap och att använda Angular för att animera användarens interaktioner med sidan. Bootstrap Vi använder Bootstrap för att det använder ett grid-system som är enkelt att lära och låter oss snabbt bygga responsiva layouts anpassade till olika skärmstorlekar. Vad ska vi göra i labben? Vi ska utgå från den single-page app vi gjorde i laboration 1 och göra ett nytt användargränssnittet till den. Det kommer alltså handla om att designa ett grafiskt användargränssnitt i Bootstrap. Vi ska också använda nganimate för att skapa animationer när vi får indata från användaren. Vad behövs? Ni behöver ha gjort laboration 1 så att ni har en kodbas att utgå ifrån. Hur går vi tillväga? Precis som föregående laborationen bör denna göras i grupper av inte mer än två personer per dator. Det blir enklaste om ni redovisar alla delar på samma gång när ni känner er klara.
3 Uppgift 1: Bootstrap navbar med collapse Ni ska redan ha lagt till en navbar, nu ska vi bara se till att den är responsiv och kollapsar när skärmen är smalare än 768px. För att kunna visa dess kollaps-funktionalitet så måste vi förutom bootstrap.css också inkludera bootstrap.js vilket innehåller deras collapse plugin. Det är den som lägger till och tar bort de CSS klasser som får menyn att visas och döljas av knappen. Det är attributen data-toggle och data-target som låter oss lägga till eller ta bort CSS klasserna. Data-target ger vi id selector för det element vi vill använda collapse på. Det skulle alltså räcka att bara lägga till dessa två attributen. De CSS klasser som lagts till som heter collapse, navbar-collapse och collapsed är alltså inte nödvändiga men används för att sätta utsprungligt state och för att style:a menyn. <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- menyn ska ta upp 100% width --> <!-- navbar header --> <div class="navbar-header"> <a class="navbar-brand" href="#!/">angular-lab</a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Navbarens innehåll --> <div class="collapse navbar-collapse" id="menu"> <ul class="nav navbar-nav"> <li><a href="#!/weather"">väder</a></li> <li><a href="#!/forecast">prognos</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> Uppgift 2: Välj layout.container eller.container-float Första saken ni borde välja är om ni ska använda en 100% width layout eller om ni vill ha fix bredd på era views. Det här är en smaksak så det är upp till er. Använd en av klasserna container och container-float på erat ng-view direktiv i index.html. Uppgift 3: Välj utseende på weather.html Vi ska börja med att göra en layout för mobiler, detta gör vi i Bootstrap med hjälp av utility klasser med namnet *-xs som låter oss bestämma vilka HTML element som ska visas eller
4 döljas för skärmar som är mindre än 768 pixlar i bredd. Exempel: <div class="hidden-xs col-sm-9"> <forecast-details forecast="currentforecast"></forecast-details> </div> Om vi vill dölja ett element kan vi använda hidden-xs, så att det inte syns på mobiler. Om vi istället skulle visa endast på mobil skulle vi använda visible-xs-block eller visible-xs-inline. Börja med göra en layout som ser bra ut för breakpoint xs, gå sedan över till breakpoints sm, md och till sist lg. Det finns inga rätt eller fel här så det är egentligen upp till er att tänka ut hur ni vill strukturera saker på sidan och sedan positionera dom på så vis med col-*-* klasser. För att få lite inspiration kan ni se dessa exempel: Uppgift 4: Välj utseende på forecast.html Lägg några minuter på att fundera ut på vilket sätt ni vill presentera väderdatan. Kanske vill ni ersätta HTML-mallen för direktivet ni skrev med andra boostrap komponenter istället för panel, kanske med well, label, jumbotron, carousel eller kanske bara en tabell? Gör dom ändringar ni vill, gå sedan över till att strukturera upp layouten för de olika breakpoints så som ni gjorde i den första vyn. Tänk på att börja med att få layouten att se bra ut för skärmar mindre än 768px i bredd och sedan jobba uppåt i storlekarna. När ni fått layouten att anpassa sig väl till samtliga skärmstorlekar och är nöjda med resultatet kan ni gå vidare. Uppgift 5: Typsnitt Bootstrap-teman sätter en standard font-family på sidans body element. Vill man ersätta detta typsnittet har man ett val, det första alternetivet är att skapa ett custom bootstraptema och ändra vilken font-family som används.
5 Det andra alternativet är att helt enkelt sätta ett style-attribut på body och skriva över den font-family som Bootstrap använder. Det första alternetivet är i de flesta sammanhang bättre, fast för enkelhetens skull rekommenderas att ni i det här fallet skriver över värdet. När vi ska välja vilken annan font som ska användas så har vi ytterligare ett val att göra. Antingen använder vi de system-fonter som finns i alla webbläsare eller så länkar vi in en webfont. Här finns en lista på system-fonter: Om ni vill använda webfonter istället så har google ett snabbt och smidigt system: Nackdelen med att använda webfonter är att dessa måste hämtas ner och vissa webbläsare använder sin fallback font under tiden, så på dessa system kan användaren uppleva ett hack när den byter mellan fonterna efter sidan laddats klart. Detta är inte ett jätte problem men något som man kan vara medveten om. Er uppgift är att bytta ut "Helvetica Neue" som är standrad font-family och istället använda någon annan eller några andra typsnitt. Uppgift 6: Ikoner Bootstrap kommer med ett paket font-ikoner som kallas glyphicons. Dessa går bra att använda out-of-the-box. Två andra populära uppsättningar font-ikoner finns här: (För att länka in font awesome ikoner kan ni använda cdn: Välj någon av de tre ikon paketen. Vi ska nu lägga in några ikoner på sidan, förslagsvis kan vi lägga in ikoner i navbaren. Font-awesome ikonerna fa-sun-o och fa-binoculars.
6 Uppgift 7: Bootstrap-tema Det finns flera sätt att ändra bootstrap temat, eftersom vi inte kan använda några csspreprocessors i datorsalarna så kan vi inte hämta ner Bootstraps LESS fil, göra ändringar och generera ut en egen CSS. Så det enklaste blir då att använda getbootstraps egna verktyg ( eller leta upp ett bootstrap-tema CSS tema online att utgå ifrån. Det finns många alternativ, har bra teman som är testade och fungerar. Det är bara att byta ut bootstrap.css och de är alla hostade på cdn så det är väldigt smidigt att inkludera Andra sidor som har även dom custom CSS filer fast de finns oftast inte tillgängliga från cdn, utan man får då hämta ner filerna och hosta dem själv på sin egna webserver. Välj ut något tema vara sig det är ett anpassat vanilla bootstrap tema eller bootswatch. Navigera runt på sidan och försäkra er om att det ser ut som ni vill. Om det är några visuella fel så kan ni fixa dessa med att skriva rätta de värden som är fel i ett CSS fil som ni läser in i index.html efter er bootstrap.css. new-age.css
7 Uppgift 8: Animera ng-view I föregående laboration så la vi till ytterligare en sida så vi har två vyer vi kan gå emellan. Nu är tanken att vi lägger till en transition, en animation som körs när man byter mellan vyerna. Förslagsvis en fade-in eller slide-in. För att kunna göra några animationer över huvud taget så måste vi först se till att vi har angular-animate.js i index.html och så måste vi komma ihåg att lägga till nganimate som beroende i myapp-modulen. Jag kommer visa ett exempel på hur man kan göra en fade-in med en CSS3 animation som använder keyframes. Det första som vi behöver göra är som alltid lägga till en klass på det element vi vill animera. I detta fallet så är det elementet som har ng-view direktivet. <div ng-view class="view-frame container"></div> Vi kan kalla klassen view-frame så vi vet vilket element vi animerar. Ni kan se en tabell över vilka animationer som olika direktiv har här: har enter och leave event hooks, detta innebär att de kommer lägga till klasserna ng-enter och ng-leave när dessa event triggas. Så vi skapar en ny css fil för att göra animationer, vi kan kalla den app.animations.css och samla alla CSS animationer där för enkelhets skull. Så innan vi börjar skriva någon CSS så får vi komma ihåg att lägga till det nya stylesheet:et i index.html. Här följer ett förslag på fade-in animation:.view-frame { background: transparent; position: absolute; left: 0; right: 0; top: 72px; /* offset navbar height + margin */ /**** ng-view animation *****/.view-frame.ng-enter { animation: 0.5s fade-in; animation-timing-function: ease-in;.view-frame.ng-leave { animation: 0.4s fade-out; animation-timing-function: fade-in { from { opacity: 0; to { opacity: 1;
8 @keyframes fade-out { from { opacity: 1; to { opacity: 0; /*****************************/ Gör något liknande eller någon helt annan animation, för exempel på hur man skriver CSS3 animationer titta på w3schools: Vill ni ha några andra ease-funktioner utöver de vanliga kan ni hitta några förslag här: Om ni är osäkra på hur cross-browser stödet för några CSS3 eller HTML5 features ser ut (t.ex. CSS3 transform) så rekommenderas sidan Det är en extremt användarbar resurs när man funderar på om man borde använda en webbteknik. För att göra nästa uppgift så bör ni ha kopplat ihop select-elementet i forecast.html så att datan som visas uppdateras. Har ni gjort detta kan ni fortsätta till uppgift 8. Ifall ni inte har kopplat ihop select-elementet i forecast.html så att er controller ändrar värdet på $scope.weatherdata, så behövs det göras nu. Deklarera en funktion i er controllers $scope och anropa den med ng-change direktivet på selectelementet. ng-change direktivet kommer anropa funktionen den tilldelats när värdet i ng-model ändras. Detta innebär att ng-change kräver att vi också använder ngmodel på samma element. Ni kan se hur det gjordes i weather.html och weather.js. Uppgift 9: Animera direktiven i forecast.html Direktivet forecast-detail som ni skrev i förra labben ska vi nu animera. I forecast.html så bör ni ha något som ser ut ungefär så här: <div class="col-sm-12" ng-if="weatherdata.forecast[0]"> <forecast-details forecast="weatherdata.forecast[0]"></forecast-details> </div> Vi har ett ng-if direktiv för att visa första datamedlemmen dvs. måndagens väder. ng-if har två events, enter och leave. När ng-if= true så triggas enter-eventet och klassen ng-enter läggs till på det. Och motsatt så när ng-if= false så triggas leave och ng-leave klassen läggs till. Vi gör precis samma sak som när vi animerade ng-view, lägg först till en klass på elementet med ng-if. Ge den klassen ett bra namn så ni vet vad den gör, t.ex. first-forecast.
9 När ni är klara med att animera ng-if så kan vi gå vidare och animera ng-repeat. Det är precis likadant som föregående uppgifter fast denna har tre event; enter, leave och move. Move-eventet triggas om någon post i listan skulle tas bort, ett exempel är om man skulle filtrera ut datan med ett sökfält. I vårt fall kommer inte move eventet att triggas om ni inte lägger till nytt beteende I ForecastController. Som tidigare lägg till en ny CSS klass på ng-repeat direktivet. <div class="col-sm-12 col-md-6 col-lg-4 forecast-item" ng-repeat="forecast in weatherdata.forecasts" ng-if="$index > 0"> <forecast-details forecast="forecast"></forecast-details> </div> Vi kan kalla den nya klassen forecast-item. Nu är det upp till er att välja någon typ av animation. Istället för att använda css3 animation testa att göra något med transition. Ett till exempel:.forecast-item.ng-enter,.forecast-item.ng-leave,.forecast-item.ng-move { transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) all; /*Start with no height and no opacity*/.forecast-item.ng-enter,.forecast-item.ng-move { opacity:0; top: 120px; left: 0; right: 0; /*Fade-in and increase height*/.forecast-item.ng-enter.ng-enter-active,.forecast-item.ng-move.ng-move-active { opacity:1; top: 0; left: 0; right: 0; Uppgift 10: Active klass på navbar Detta är en frivillig uppgift. När man har valt en route så vore det trevligt om man markerade posten i navbarens lista med klassen active. Det smidigaste sättet att lägga till klassen är med ng-class direktivet vilket låter dig sätta upp ett vilkor för när en klass ska fästas på elementet. Vi ska skriva en funktion som matchar url routen med ett värde som vi skickar in. Detta gör vi i en controller som vi kopplar till navbaren med ng-controller.
10 <ul class="nav navbar-nav" ng-controller="menuctrl"> Skapa klassen menu.controller.js angular.module('myapp.menu', []); angular.module('myapp.menu').controller('menuctrl', ["$scope", "$location", function($scope, $location) { $scope.isactive = function(path){ return $location.path() == path; ]); Använd nu den nya isactive metoden i listan med routes. <li ng-class="{'active': isactive('/forecast')"><a href="...">prognos</a></li>
Webbutveckling med AngularJS
Webbutveckling med AngularJS Kommunikation och Användargränssnitt HT 2016 Per Lind Upplägg Laboration 1 - Skapa en SPA (single-page application) med AngularJS Laboration 2 - Responsiv design, mobile-first
Läs merEn 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
Läs merInnehåll Introduktion... 3 InteractiveScene.config... 3 Scener <scenes>... 3 Typsnitt <fonts>... 3 Övergångar <transitions>...
Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener ... 3 Typsnitt ... 3 Övergångar ... 4 Mall för slide ... 5 , ...
Läs merINTRODUKTION 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
Läs merORDLISTA 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.
Läs merLaboration 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
Läs merTillä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
Läs merLabora&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
Läs merXhtml 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
Läs merEDA095 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
Läs mer<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
Läs merLektion 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
Läs merWebbutveckling Laboration 1: HTML5 och CSS3.
Institutionen för 2015-11-30 Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan
Läs merHTML 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
Läs merE07 "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
Läs merLabora&on 6 CSS och responsiv webbdesign övningar/uppgi:er
Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on
Läs mer21/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
Läs merWebbteknik 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
Läs merLabb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller
Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller Beräknad tidsåtgång: ca. 3 timmar. I ASP.NET 4.5 finns en stor mängd nya funktioner för att förenkla utvecklingen
Läs merASP.NET MVC. Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se. Innehåll
ASP.NET MVC Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se Innehåll Introduktion till MVC Controller Action-metoder Views Arbeta med Layout-sidor och sektioner Route konfiguration
Läs merFortsättningskurs Webbklientprogrammering
Tentamen, Fortsättningskurs Webbklientprogrammering (40 YH-poäng) Plats: Övningstenta Tid: Övningstenta Tillåtna hjälpmedel: Papper, penna, suddgummi, linjal. Ej tillåtna hjälpmedel: Datorer, mobiltelefoner,
Läs merHTML 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
Läs mer/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }
/*CSS document*/ /* nollställer margin för alla element*/ * { margin: 0; /*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height:
Läs merFörkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">
CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg layout-tagg Kurslitteratur: Niederst Robbins, Learning
Läs merLektion 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
Läs merEn 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
Läs merLaboration 2. Webbproduktion En stiligare webbsida HT2015
Laboration 2 Webbproduktion Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt sätt som möjligt. Nu är det dags att ge ögat något vackert att vila på.
Läs merRepetition. 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
Läs merRepetition. 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
Läs merFö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
Läs merJavaScript. 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
Läs merLab5 för prgmedcl04 Grafik
Lab5 för prgmedcl04 Grafik Viktigt läs detta först:den här labblydelsen är ganska lång, detta betyder inte att labben tar lång tid.en hel del av lydelsen är anvisning om hur man går tillväga för att kunna
Läs merJavaScript. 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
Läs merF07 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
Läs merFrågor och svar - Diagnostisk prov ht14 - Webbutveckling 1
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi
Läs merAppar 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
Läs merHybridappar. Utveckla mobilappar i HTML, Javascript och CSS
Hybridappar Utveckla mobilappar i HTML, Javascript och CSS Presenterat av Erik Tufvesson, Presis i Lund AB Kort om mig Erik Tufvesson Systemarkitekt och utvecklare på Presis! Brinner för utveckling av
Läs merFö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
Läs merIGÅR. Internet, www, TCP/IP, IP-adress, DNS, URL. HTTP Request. HTTP Response (HTML & status code)
CSS Presentation IGÅR Internet, www, TCP/IP, IP-adress, DNS, URL client HTTP Request server HTTP Response (HTML & status code) HTML Innehåll och struktur via semantiska märkningar Block, inline element
Läs merJavaScript. 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
Läs merINSTÄLLNINGAR FÖR IRONCADS 2D-RITNING
INSTÄLLNINGAR FÖR IRONCADS 2D-RITNING Innehållsförteckning Justera storlek och antalet decimaler för måttsättning...2 Ändra färg på ritningselement...4 Justera färg för ett enskilt element genom att byta
Läs merRäkna med ASP.NET Web Forms
Instruktion Räkna med ASP.NET Web Forms Introduktionsuppgift Författare: Mats Loock Kurs: ASP.NET Web Forms Kurskod:1DV406 Innehåll Du ska följa steg för steg -instruktionen i denna introduktionsuppgift
Läs merTDDD52 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
Läs mer12/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
Läs merLabora&on 4 CSS och validering övningar/uppgi9er
Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna
Läs merAgil användbarhetsutveckling för handhållna enheter. Per Lind
Agil användbarhetsutveckling för handhållna enheter Per Lind perli379@student.liu.se per.lind@inspireit.se Laboration Pass 1: Tors. 4:e feb 13-17 Pass 2: Tors. 18:e feb 13-17 Uppgift: Skapa en app för
Läs merDet här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer.
Informationsinfrastruktur 7.5 hp Mattias Nordlindh Inledning Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer. Dokumentet består av
Läs merLektion 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
Läs merOn-line produktion TDDC61
On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle
Läs merWebbdesign Process till produkt
Webbdesign Process till produkt Umeå Universitet Mediaproduktion för www II 7,5hp Isak Madoun Introduktion; VÅR-KOKBOK Är en kokbok som i sin första upplgaga kom ut på 50-talet. Boken innehåller mer av
Läs merExemple på Tentauppgifter Webbprogrammering
LUNDS TEKNISKA HÖGSKOLA 1(6) Institutionen för datavetenskap Exemple på Tentauppgifter Webbprogrammering 2019 02 28 version 2019-03-20 15:36:14+01:00 Tillåtna hjälpmedel: inga. Detta är ett exempel på
Läs merBygga kurser för mobila enheter
Bygga kurser för mobila enheter NETCOMPETENCE 2017-10-30 Innehåll Inledning... 2 Om Responsive Design och Adaptive Design... 3 Responsive Design... 3 Adaptive Design... 3 Exempel... 4 Tips och rekommendationer...
Läs merCSS. TNMK30 - Elektronisk publicering
CSS TNMK30 - Elektronisk publicering Dagens föreläsning CSS Layout med CSS Vad är CSS? Cascading Style Sheets (CSS), ett språk som beskriver hur HTML element ska se ut. Utseende Layout Presentation (HTML
Läs merLaboration 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,
Läs merE07 "Greased Lightning"
E07 "Greased Lightning" Föreläsning 7, HT2012 CSS och Event Kurs: 1dv403 Webbteknik I Johan Leitet E07 Greased Lightning Dagens agenda CSS-egenskaper Händelsestyrd programmering Händelsehanterare Typer
Läs merLabora&on 2 HTML och validering övningar/uppgi:er
Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det
Läs merVisa och dölja element med JavaScript
Föreläsning i webbdesign Visa och dölja element med JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Visa och dölja element Förändra elementets sdl för display eller visibility
Läs merAtt 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.
Läs merInför prov 1 i webbdesign
Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke
Läs mer<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim
Kursledare: Mahmud Al Hakim Lektionstillfällets mål Introduktion till CSS CSS Regler och egenskaper Externa CSS-filer: Link-taggen Intern CSS: Style-taggen Inline CSS: Attributet
Läs merMÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND
MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND 1 Innehåll Inledning... 3 Framework... 3 Val av ramverk... 3 Arbetet med Bootstrap... 4 Preprocessorer... 5 Val av preprocessor... 5 Arbetet
Läs merLabora&on 4 CSS och validering samt fråga D övningar/uppgi?er
Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna
Läs merE09 - Totally Tool Time
E09 - Totally Tool Time Dagens agenda Fönster Systemdialoger Location History DOM och BOM DOM Document Object Model BOM Browser Object Model BOM hanterar Insorterat under denna rubrik hittar vi: Timers
Läs merÖ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
Läs merKravspecifika.on, pappersprototyp & CSS
1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna
Läs mer// GET: Test1/Index2 // Syftet är att se hur olika url:er leder till olika actions
Test1Controller.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Mvc.Ajax; using System.Net; using Newtonsoft.Json; using System.Threading.Tasks;
Läs merAnvä ndärguide Nyä Expeditionsresor
Anvä ndärguide Nyä Expeditionsresor Hjälpguide för att använda Wordpress och Nya Expeditionsresor.se 2014-08-10 Innehållsförteckning Logga in till Wordpress-panelen... 3 Skapa bildspel... 4 Färgkoder...
Läs merFrågor och svar Gränssnittsdesign/Webbutveckling
Frågor och svar Gränssnittsdesign/Webbutveckling Bilder och optimering 1. Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi eller 96
Läs merLabbrapport: 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):
Läs merI 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
Läs merLabora&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
Läs merJAVASCRIPT. 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
Läs merLab 5: ASP.NET 4.5 Site Navigation
Lab 5: ASP.NET 4.5 Site Navigation Enkel navigering är en viktig del av en modern webbapplikation. Eftersom en stor del av utvecklingstiden för en site används för att bygga menyer, trädstrukturer och
Läs merLektion 2, Grundläggande funktioner i ASP.NET
Lektion 2, Grundläggande funktioner i ASP.NET Lektionen behandlar kapitlen 3 och 4 i kursboken. Application och Page Framework Med Visual Studio 2005 levereras ett antal inbyggda verktyg bland annat SQL
Läs merDu skall naturligtvis visa körexempel med output där det behövs i din rapport!
och databprogrammering Christilinda Göstson - PL/SQL, paket och ref cursor Du skall naturligtvis visa körexempel med output där det behövs i din rapport! OBS! Denna labb redovis i labbrapport via mail
Läs merAsp.net mvc intro PER KVARNBRINK, 2015-01-27
Asp.net mvc intro PER KVARNBRINK, 2015-01-27 Byggstenarna i ett mvc-projekt 1. Databasen 2. Datamodellen (M:et) 3. Entity framwork 4. Routing 5. Kontroller (C:et) 6. Vy (V:et) 7. Vymodeller 8. Troligen
Läs merLaboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter
Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter 1M321 Webbteknik 1, 7,5hp Medieteknik 2018 Rune Körnefors rune.kornefors@lnu.se 1. Skapa ett nytt HTML-dokument I denna laboration
Läs mer1. FORMULÄR. A. Skapa formulär
. FORMULÄR På Internet är det inte ovanligt att du hittar formulär där du direkt på skärmen kan fylla i uppgifter som sedan kan skickas tillbaka till webbservern. De är ofta gjorda med HTML-kod och har
Läs merObjektorienterad programmering Föreläsning 15. Grafiska användargränssnitt (GUI Graphical User Interface)
Objektorienterad programmering Föreläsning 15 Copyright Mahmud Al Hakim mahmud@dynamicos.se www.webacademy.se Agenda Grafiska användargränssnitt (GUI Graphical User Interface) Standardklassen (Control)
Läs merMVC med Javascript och Ajax. Filip Ekberg
MVC med Javascript och Ajax Filip Ekberg MVC med Javascript och Ajax Lektion 7 ASP.NET MVC mail@filipekberg.se Veckans mål ASP.NET MVC Repetition & Diskussion Vad är MVC? Vad är ASP.NET MVC? Hur skapar
Läs merLabora&on 5 Dynamisk HTML och &mers övningar/uppgi=er
Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er 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
Läs merSidan 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
Läs merInstruktioner 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
Läs merÖ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
Läs merVillaägarna. Redaktörsmanual för Samfälligheter
Villaägarna Redaktörsmanual för Samfälligheter Grundstruktur för Samfälligheter... 3 Behörigheter... 3 Hitta din förenings webbplats... 4 Redigera sidor... 5 Samfällighet... 7 Övre delen... 8 Undre delen...
Läs merHTML5 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
Läs merLab 5: ASP.NET 2.0 Site Navigation
Lab 5: ASP.NET 2.0 Site Navigation Enkel navigering är en viktig del av en modern webbapplikation. Eftersom en stor del av utvecklingstiden för en site används för att bygga meyer, trädstrukturer och andra
Läs mer07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html
Stilmallar - styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html iecept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Utseende
Läs merSMD091 Lektion 9. Definition. Inkapsling. Lite repetition. Grafik. Gränssnitt Definition och Implementation. Sammansättning... Implementation.
SMD091 Lektion 9 Inkapsling Lite repetition Grafik 1 2 Gränssnitt Definition och Implementation Sammansättning... Definition...är ofta det bästa sättet att använda funktionalitet i andra klasser. Ratt
Läs merModern webbutveckling. av Robert Welin-Berger
Modern webbutveckling av Robert Welin-Berger robertwb@kth.se Modern webbutveckling 1. Projektstorlek och Arkitektur 2. Callbacks 3. Event driven arkitektur 4. MEAN stack 5. ODM/ORM 1. Projektstorlek och
Läs merOn-line produktion TDDC61
On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 14/10 Lämna in efterhand ni blir färdiga Vi rättar inom 5 arbetsdagar Portfolio, tillfälle 1:
Läs merAnvä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
Läs merInstruktioner 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
Läs merÖ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
Läs merSkapa en webbplats med WordPress
Skapa en webbplats med WordPress Daniel Karlsson 2016-01- 26 Licens Creative Commons Attribution- NonCommercial 2.0 Du får fritt sprida, redigera och kopiera guiden, men ej för ekonomisk vinning och endast
Läs merOn-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
Läs merLaboration 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
Läs merHur 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
Läs merLaboration 3 GUI-programmering
Laboration 3 GUI-programmering Syfte Erbjuder studenterna en möjlighet att lära sig grunderna i gränssnittsprogrammering i Java. Genomförande Genomförs individuellt eller i grupp om 2 personer. Uppskattad
Läs merStyla med CSS3. Översikt. Lektion 1: Styla text med CSS3
Styla med CSS3 Översikt Styla text med CSS3. Styla med Block element. Pseudo-Classes och Pseudo-Elements. Förhöja grafiska effekter med CSS3. Lektion 1: Styla text med CSS3 Fonter och storlek. @font-face.
Läs mer