MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND
|
|
- Linnéa Magnusson
- för 8 år sedan
- Visningar:
Transkript
1 MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND 1
2 Innehåll Inledning... 3 Framework... 3 Val av ramverk... 3 Arbetet med Bootstrap... 4 Preprocessorer... 5 Val av preprocessor... 5 Arbetet med LESS... 5 Fortsatt arbete med ramverk och prekompilatorer... 5 Referenser
3 Inledning I beskrivningen för den här examinationsuppgiften föreslogs att vi skulle kunna använda oss av den portfolio som skapats tidigare och arbeta om denna i valt ramverk. Jag valde en mycket enkel layout med lite innehåll på varje sida i min portfolio och därför anser jag det inte vara lämpligt att arbeta om portfolion i den här uppgiften eftersom detta inte skulle vara särskilt utmanande. Jag har dock utgått från de menyalternativ/filnamn som användes i porfolion med tillägg av undersidor för två huvudsidor. För var och en av HTML-sidorna har jag skapat lite olika layout med i huvudsak större textblock och bilder. Detta för att visa på lite olika sätt att bygga upp layouten i aktuellt ramverk. Framework För att inte behöva börja om från början varje gång man skall arbeta fram en webbplats kan man utnyttja något av de mer eller mindre innehållsrika ramverk (frameworks) som finns att tillgå. Detta kan bidra till att man lättare kan hålla sig till nuvarande webbstandarder, förkorta ledtiden vid framtagande av en ny webbplats och bygga in mobilitet i webbplatsen (medium: online, tillgänglig: hämtad: ). Val av ramverk I föreläsningen om ramverk (medium: online, tillgänglig: marksprak-och-stilmallar-ii/ramverk-i-html5/, hämtad: ) nämns fyra olika typer av ramverk nämligen Skeleton, Bootstrap, Foundation och Boilerplate. Dessa kan man säga representerar ramverk på lite olika nivåer. Vad jag förstår så stöder alla aktuella ramverk mobilitet och responsiv design vilket är en mycket viktig aspekt i dagsläget. Enligt en rapport från KPBC (medium: online, tillgänglig: slide 32, hämtad: ) så ökar andelen mobilt användande av internet med en rasande fart. För att tillmötesgå detta krävs att man kontinuerligt tänker responsivt vid framtagande av webbplatser. Vid val av ramverk för aktuell examinationsuppgift går jag främst på de rekommendationer som Christian Ohlsson ger i sin föreläsning om ramverk (medium: online, tillgänglig: ei.hv.se/~imcoh/kurser/marksprak-och-stilmallar-ii/ramverk-i-html5/, hämtad: ), dvs Bootstrap och Foundation. Dessa känns som mer kompletta ramverk jämfört med övriga (Skeleton och Boilerplate). Båda ramverken har en väl utbyggd hjälpfunktion där Foundation även har en fungerande community. En fördel jag kan se med Bootstrap är att detta ramverk erbjuder ett relativt stort urval 3
4 av exempellayouter som man kan ladda hem och utgå ifrån. Jag ser även en fördel med Bootstrap eftersom ramverket fungerar tillsammans med prekompilatorn LESS (som jag valt att använda mig av). Om jag förstått det hela rätt så använder sig Foundation av SASS istället. Utifrån dessa punkter så väljer jag att arbeta vidare med Bootstrap för den här uppgiften. Arbetet med Bootstrap Det första jag gör är att ladda hem Bootstrap via getbootstrap.com. Jag väljer sedan att spara ner HTML-koden för en av de exempellayouter som finns att tillgå i Bootstrap. Jag har länge varit nyfiken på att arbeta med en layout som har en fixerad horisontell meny med möjlighet till drop-downfunktionalitet. Som tur är finns denna typ av layout som exempellayout ( medium: online, tillgänglig: hämtad: ) så jag väljer att spara ner HTML-koden för denna layout. Det första jag gör är att anpassa exempellayouten och skapa en HTML-mall som jag kan använda mig av när jag skapar mina sidor. Anpassningen görs genom att jag ser till att menyn läggs inne i container istället för att sträcka sig över hela skärmbredden. Dessutom tar jag bort avsnittet jumbotron och lägger till en enkel footer på sidan. I början av mitt arbete blir jag lite fundersam över en formulering i beskrivningen av aktuell uppgift, nämligen att två av sidorna skall ha undersidor. Jag tolkar det som om man först skall komma in på en sida för att sedan kunna gå vidare till dess undersida. Så som drop-down-menyn är utformad i mitt sparade exempel så fungerar inte detta utan man kommer enbart in på undersidan i drop-downmeny. På grund av detta får jag manipulera menyn så att den fungerar som jag tänkt. I Bootstraps gridsystem finns 12 kolumner. Dessa har lite olika bredd beroende på vilken skärmbredd man vill koncentrera sig på. Jag väljer att arbeta med den som är anpassad för skärm med max 768 pixels bredd och där varje kolumn har en bredd på 60 pixlar (klasserna som börjar på col-sm- ). Jag anser detta ger en tilltalande responsiv design och sidorna ser bra ut både på stor skärm (jag arbetar med 1600*900 pixlar) och på de olika storlekar som visas i Firefox-verktyget Visa layouter för anpassningsbar webbdesign (chrome://web-developer/content/generated/view-responsivelayouts.html) Jag bygger upp lite olika layouter med rader och olika bredd på kolumnerna på sidorna och utnyttjar bland annat möjligheten att nästla rader/kolumner för att erhålla önskad layout. Jag väljer att fylla kolumnerna främst med text-block och bilder för att ge en uppfattning om aktuell layout. Genomgående använder jag mig av att hämta bilderna från Lorem Pixel (lorempixel.com). På en av sidorna utnyttjar jag en inbyggd javascript-komponent nämligen carousel för bildvisning. att få en 4
5 Preprocessorer Ett sätt att få mer flexibilitet i sin CSS-kod är att gå vägen via en preprocessor (LESS eller SASS). Då kan man jobba med variabler, argument ( inparametrar ) etc. Val av preprocessor Som det sägs i föreläsningen om preprocessorer (medium:online, tillgänglig: cumulus. ei.hv.se/~pb/kurser/webbdesign/lesssass/, hämtad: ) så är LESS och SASS väldigt lika varandra. Det verkar dock som om LESS har några användningsområden som saknas hos SASS (enligt föreläsningsfilmerna), nämligen mixin guards och pattern match. Jag uppfattar att dessa områden gör att LESS känns ännu mer användbart och flexibelt jämfört med SASS. Eftersom jag arbetar i PC-miljö upplever jag det mycket smidigare att installera och använda LESS än vad som är fallet med SASS eftersom jag behöver installera två komponenter i det senare fallet (Ruby och Scout). Jag väljer därför att arbeta med LESS och att installera SimpLESS från Arbetet med LESS Eftersom det finns mycket CSS-funktionalitet inbyggt i Bootstrap så utnyttjar jag detta till stora delar vid skapandet av examinationsuppgiftens webbsidor. Arbetet med LESS koncentrerar jag främst till att på ett smidigt sätt kunna skapa ett flexibelt färgschema för sidorna. Jag definierar upp ett antal färg-variabler som tilldelas olika färgvärden. Sedan skapar jag en som sätts till någon av färg-variablerna. Efter det skapar jag mixins som innehåller olika funktioner för bearbetning av färgen som satts De olika komponenterna på sidorna tilldelas sedan någon av dessa mixins. Jag skapar även en mixin för rundade hörn och en för kantlinje. Båda dessa görs flexibla då jag väljer att anropa dem med argument. Dessutom gör jag några media queries för att hantera de olika utseenden som menyn får beroende på skärmbredd. Fortsatt arbete med ramverk och prekompilatorer Som det känns efter arbetet med den här uppgiften så kommer jag säkerligen arbeta vidare med och fördjupa mig i både ramverk (troligen Bootstrap) och LESS. Jag ser en stor nytta i att arbeta med den funktionalitet/flexibilitet som finns inbyggd i LESS för att göra arbetet med framtagandet av CSS så smidigt som möjligt även i mindre utvecklingsprojekt. Självklart är det smidigt att även arbeta utifrån ett ramverk men jag kan känna att nyttan till viss del är beroende på projektets storlek och om det kanske är fler inblandade i arbetet. 5
6 Referenser chrome://web-developer/content/generated/view-responsive-layouts.html
MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 1 HELENE BROGELAND
MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 1 HELENE BROGELAND 1 Innehåll Inledning... 3 Optimering av min webbportfolio... 4 Analys och dokumentation av utgångsläget... 4 Optimeringsaktiviteter...
Läs merATT ARBETA MED VEKTORGRAFIK
ATT ARBETA MED VEKTORGRAFIK Helene Brogeland Vektorgrafik och animation VT 2014 2014-04-29 Inledning Före aktuell kurs hade jag bara en vag uppfattning av innebörden av vektorgrafik och hade aldrig jobbat
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 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 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 merTabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.
Lektion 7 Tabeller Under denna lektion kommer du att få lära dig hur man bygger upp tabeller med HTML och hur man styr layout och utseende på en webbsida som innehåller tabeller. Enkla tabeller Av tradition
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 merBloggdesign { 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
Läs merResponsiv webbplats. Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 2014-02-17 1
Responsiv webbplats Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 1 Vad är responsivt? Det betyder att webbplatsen känner av vilken skärmstorlek användaren surfar
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 merProjektrapport. Projekt - Anna Broström Keramik
Projektrapport Projekt - Anna Broström Keramik Kurs: Medieteknik A, VT 2013 Delkurs: Interaktiva medier och Publicering via Internet Inlämningsdatum: 2013-06-04 FIMS: Freja Krogh-Andersen, Ida Josefsson,
Läs merSkeleton plane & Responsiv webbdesign med CSS
1ME321 Webbteknik 1 Lek0on 6 Skeleton plane & Responsiv webbdesign med CSS Rune Körnefors Medieteknik 1 2016 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen U2 deadline Exemplet Gretas Blommor
Läs merINDIVIDUELL INLÄMNINGSUPPGIFT
INDIVIDUELL INLÄMNINGSUPPGIFT Sofia Aronsson ANVÄNDBARHET OCH GRAFISK DESIGN MIS 13, Nackademin Yrkeshögskola Lärare: Ellinor Ihlström Inledning... 3! Analys... 3! Hitta... 3! Förstå... 5! Använda... 6!
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 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 merSymmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan.
WorkShop II Checklistor 1.2 Överordnad Struktur Balance: Gränssnittet har just nu viss balans i innehållet, men menyn behöver justeras i förhållande med innehållet samt en fast container för innehållet
Läs merCopy 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å
Läs merDokumentation för användning av administrationspanelen på Xtractor.se
Dokumentation för användning av administrationspanelen på Xtractor.se Kontrollpanelen når man på: http://xtractor.se/admin Xtractors webbplats är uppbyggt på en skräddarsydd variant av publiceringssystemet
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 merKom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.
Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu
Läs merManual för. 2.4 KALAS Sitemanager
Manual för 2.4 KALAS Sitemanager 1. Introduktion Den här manualen skall hjälpa dig att komma igång så att du själv på ett enkelt sätt kan lägga till, redigera eller ta bort webbsidor på din webbplats.
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 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 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 merVilken version av Dreamweaver använder du?
Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser
Läs merAtt arbeta med. Müfit Kiper
Att arbeta med Müfit Kiper Att skriva nya inlägg Alla inlägg som är postade visas i kronologisk ordning, det vill säga det senast postade inlägget kommer visas först om inget annat angetts i temafilerna.
Läs merLathund Blogg hos moobis.se (skapad av Marie Linder marielinder.se)
Lathund Blogg hos moobis.se (skapad av Marie Linder marielinder.se) 1) Gå till moobis.se 2) Klicka på skapa blogg i menyn längst upp och sedan på 4) Välj användarnamn och fylla i din epostadress. Du kan
Läs merDaniel Persson. Födelsedatum: 1986-02- 08 Vindragaregatan 3B, 417 03 Göteborg Telefon: 070 839 51 88 Email: info@danielp.se Portfolio: www.danielp.
1 Daniel Persson Front end utvecklare Födelsedatum: 1986-02- 08 Vindragaregatan 3B, 417 03 Göteborg Telefon: 070 839 51 88 Email: info@danielp.se Portfolio: www.danielp.se CURRICULUM VITAE Yrkesmässiga
Läs merASTRAKAN COURSEPLAN. Programmet som sparar tid... ... och förenklar kursadministrationen! ASTRAKAN COURSEPLAN BESTÅR AV TVÅ DELAR:
ASTRAKAN COURSEPLAN Programmet som sparar tid...... och förenklar kursadministrationen! Med webbaserade Astrakan CoursePlan kan onödig administration undvikas samtidigt som kursdeltagarna erbjuds en förstklassig
Läs merKonverteringsskola Del 3: Vad är användbarhet?
Konverteringsskolans andra del behandlade vikten av att lära känna sina besökare. Vi kommer nu att arbeta vidare med besökarna i åtanke och fokusera på hur pass väl de kan använda webbplatsen. Om webbplatsen
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 merASTRAKAN KURSPLAN ESF Edition
ASTRAKAN KURSPLAN ESF Edition Nu i specialversion för ESF-projekt inom kompetensutveckling Spara massor av administration - och ge era projektdeltagare bättre service! I samarbete med flera ESF-projekt
Läs merIkon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering
Innehåll Redigeringsverktyget... 3 Hantera bilder... 5 Infoga pdf-fil... 5 Lägg till mall... 6 Infoga YouTube-klipp... 6 Infoga länk... 7 Infoga tabell... 8 Kodupprensning... 10 CSS-klass... 10 Egna anteckningar:...
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 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 merProjektplan för Website Project Japan
HT11 Mediateknik A Södertörns högskola 2011-12-15 Projektplan för Website Project Japan Publicering via Internet Interaktiva medier Belsam Djehiche Carina Johansson Kim Olsson Johansson Innehåll Projektet
Läs merEn jämförelse av front-end ramverk för utveckling av responsiva webbsidor
Vedran Lipovac En jämförelse av front-end ramverk för utveckling av responsiva webbsidor A comparison of front-end frameworks for developing responsive websites Informatik C-uppsats Termin: Handledare:
Läs merManual till publiceringsverktyg
Manual till publiceringsverktyg Allmänt När man har loggat in hamnar man direkt på översikten över hela webbplatsen. Överst hittar man en meny som alltid ligger med i verktyget. Denna meny innehåller översikten
Läs mernollning.nu - en liten handbok
nollning.nu - en liten handbok 2015 Litet förord Så är det nu dags att få tillgång till era webbplatser. Vi i KAOS har jobbat på för att göra allt så smidigt som möjligt för er men självklart finns det
Läs merDel 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
Läs merPortfolio Mathias Andelin www.webbformgivare.se mathias.andelin@gmail.com
Portfolio Mathias Andelin www.webbformgivare.se mathias.andelin@gmail.com 1 Innehåll Redesign.......................................................................3 Värvet........................................................................
Läs merProjektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum: 2012-10-09
Projektanvisning Webbsideprojekt Författare: Johan Leitet Version: 2 Datum: 2012-10-09 Inledning Du har nu under ett antal laborationer i webbteknik fått relativt styrda uppgifter där du ensam fått lösa
Läs merQuick Start CABAS. Generella systemkrav CABAS / CAB Plan. Kommunikation. Säkerhet
Gunnel Frogedal 2014-07-17 6 32753 1 of 5 Quick Start CABAS Generella systemkrav CABAS / CAB Plan Applikationen stöds av följande operativsystem: Windows Vista SP2 Windows 7 SP1 Windows 8 (inte RT) Windows
Läs merStruktur & Layout med CSS
1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs
Läs merA" utveckla kartor med responsiv design. Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad
A" utveckla kartor med responsiv design Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad Innehåll 1. Vad och varför responsiv design? 2. Hur kan det genomföras? 3. Exempel (smap)
Läs merManual för webbpublicering. Enköpings kommun
Manual för webbpublicering Enköpings kommun Innehåll ATT LOGGA IN I SWWWING 3 Inloggningsrutan 3 GRÄNSSNITTET 4 Filhanteraren 4 Content Management 4 Verktyget Notify - Dags att uppdatera 4 SKAPA OCH REDIGERA
Läs merPrislista. Information. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet
Prislista Prislista Produkt Information Pris, SEK Kampanjsida 8.500 Nyhetsbrev 3.500 Banners 900-1200 Mobilwebapp 12.000 Logotyper 8.000-14.000 Informationswebbplats 13.500 Offertbaserade webbplatser Offertbaserade
Läs merVälkommen till Studiekanalen.se
Välkommen till Studiekanalen.se Det här produktbladet beskriver besökarens (elevens) väg till utbildningen, hur de matchas mot rätt skola och utbildning. Det beskriver även hur utbildningsanordnaren kan
Läs merGrafiska användargränssnitt i Java
jonas.kvarnstrom@liu.se 2017 Grafiska användargränssnitt i Java En genomgång av de viktigaste begreppen Alternativ 2 Från början fanns AWT, Abstract Window Toolkit Till stor del ersatt av Swing: Mer omfattande,
Läs merDen rättvisa webben. Kandidatarbete i Medieteknik, 30 hp Vårtermin En miljö för alla, oavsett förmåga. Patrik Thorsson
Kandidatarbete i Medieteknik, 30 hp Vårtermin 2014 Den rättvisa webben En miljö för alla, oavsett förmåga Patrik Thorsson Handledare: Linus de Petris & Jens Sjöberg Examinator: Lena Trojer Blekinge Tekniska
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 merFöreningarnas nya sidmall. Version 4, 12.4.2016
Föreningarnas nya sidmall Version 4, 12.4.2016 Innehållsförteckning Föreningarnas nya sidmall... 1 Introduktion... 3 Sammanfattning... 3 Sidmallar och sidornas uppbyggnad... 4 Gamla sidmallen... 4 Nya
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 merbehövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.
1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera
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 merWidgetguiden Vad är Publits widgetshop?
Widgetguiden Den här guiden är till för dig som vill använda Publits widgetshop för att enkelt sälja böcker direkt på din egen hemsida, blog eller Facebook. Här går vi steg för steg igenom processen för
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 merMamut Enterprise Kund- och Partner Web
Mamut Enterprise Kund- och Partner Web Detta är en introduktion till hur du använder tilläggsprodukten Mamut Enterprise Kund och Partner Web. Först får du en genomgång av vad Mamut Enterprise Kund och
Läs merAdministrera behörighet IdrottOnline Klubb Administrera behörighet
Uppdaterad 2011-03-09 Administrera behörighet IdrottOnline Klubb Administrera behörighet Inledning IdrottOnline är idrottens verktyg för kommunikation och administration. IdrottOnline ägs och utvecklas
Läs merPLANERING MULTIMEDIAPROJEKTET FAMILJEN GURKA
PLANERING MULTIMEDIAPROJEKTET FAMILJEN GURKA Helene Brogeland Multimediaproduktion VT 2014 2014-05-15 1 Innehåll Inledning... 3 Designbeskrivning... 3 Syfte... 3 Målgrupp... 3 Beskrivning... 3 Ingående
Läs merSophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR
Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Del 4 BILDER OCH TABELLER 0. Arbeta med bilder... 9. Redigera bilder... 96. Klickbara bilder/imagemaps... 0. Tabeller... 04 4. Skapa
Läs merWORDPRESSGUIDE 2013. Uppdaterad 20131029. WORDPRESSGUIDE 2013 Sida 1
Uppdaterad 20131029 WORDPRESSGUIDE 2013 Sida 1 WordPress är ett modernt publiceringsverktyg med fokus på utseende, webbstandard och användarvänlighet. Det perfekta verktyget för både privatpersoner och
Läs merProjekt Rapport. RaidPlanner. Jeanette Karlsson UD10
Projekt Rapport RaidPlanner Jeanette Karlsson UD10 Abstrakt: Denna rapport handlar om mitt projekt i kursen Individuellt Mjukvaruutvecklings projekt. Rapporten kommer att ta upp hur jag gått tillväga,
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 merNyheter i PowerPoint 2010
Nyheter i PowerPoint 2010 Nytt utseende Programfönstret i Office 2010 har ett nytt utseende. Likt Office 2003 är Arkiv tillbaka. Som i Office 2007 finns det flikar och grupper i det övre verktygsfältet.
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 merDokumentation. Joomla - Administrationsguide 1. Logga in i administrations-gränssnittet 2. Ändra globala inställningar 2.
Joomla - Administrationsguide Joomla - Administrationsguide 1 Logga in i administrations-gränssnittet 2 Ändra globala inställningar 2 Ändra titel 3 Artiklar, kategorier och sektioner 4 Skapa sektioner
Läs merManual för. 2.5 KALAS Sitemanager
Manual för 2.5 KALAS Sitemanager 1. INTRODUKTION...1 1.1 SYSTEMKRAV...1 1.1.1 Visning av sidor...1 1.1.2 Produktion av sidor...1 1.1.3 Inloggning...1 2. KALAS SITEMANAGER...3 2.1 LÄGGA TILL EN WEBBSIDA...4
Läs merGrafiska användargränssnitt i Java
TDDD78, TDDE30, 729A85 jonas.kvarnstrom@liu.se 2018 Grafiska användargränssnitt i Java En genomgång av de viktigaste begreppen Alternativ 2 Från början fanns AWT, Abstract Window Toolkit Stora delar har
Läs merGrafisk manual. Innehåll. Kontakt: max@desmond.com
Grafisk manual Innehåll Kontakt: max@desmond.com Förutsättningar Hoop skall ha en modern och sportig profil som skall vara denna manual trogen i allt formellt material som: Brev, Mejl, Instruktionsböcker
Läs merKundhandledning för EBIS. E-space Business Intelligence System. Version
Kundhandledning för EBIS E-space Business Intelligence System Version 1 10-10-06 E-space Communication AB 2010 Innehåll 1. Introduktion 3 2. Filerna har olika egenskaper 4 2.1. Analys i kundzonen. 4 2.2.
Läs merEhandelslö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
Läs merKom i gång med PING PONG
Kom i gång med PING PONG Studentmanual Version 6 Kom igång med PING PONG Studentmanual. Version 6 Anita Eklöf, Sektionen för pedagogiskt arbete, Högskolan i Borås. 2015-02-16 1 ATT LOGGA IN... 1 2 STARTSIDAN...
Läs merWordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm
WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm WordPress är ett kraftfullt publiceringsverktyg för webben som trots sin flexibilitet och styrka är lätt att komma igång
Läs merLaboration Fuzzy Logic
BILAGA B Laboration Fuzzy Logic Lär dig simulera ett program! ABB INDUSTRIGYMNASIUM Fuzzy Logic Wikingsons Wåghalsiga Wargar Projekt ABB VT 2006 Västerås Innehåll 1 Introduktion... 3 2 Uppgiften... 3 2.1
Läs merURVAL AV UTFÖRDA FRILANSJOBB
URVAL AV UTFÖRDA FRILANSJOBB Här följer information om ett urval av utförda frilansjobb. CONTENT MANAGEMENT- OCH GROUPWARE RAMVERK Kund: Sundance MD&M En modulär flashapplikation med en PHP och MySQL backend
Läs merTomas Axelsson
Tomas Axelsson tomas.axelsson@highendmedia.se https://highendmedia.se Vad är WooCommerce? WooCommerce är ett e-handelsplugin till WordPress. Det är idag världens populäraste e-handelsplattform! WooCommerce
Läs merIntroduktion Till WordPress
Introduktion Till WordPress Vad är WordPress? ett blogg- och innehållshanteringssystem skrivet i PHP och som använder databasen MySQL för datalagringen Wordpress har under åren utvecklats från ett bloggsystem
Läs merWebbdesign. Fotografiska vann bästa webbsite 2015 i kategorin turism:
Webbdesign Man kan definiera webbdesign som konsten att skapa webbplatser. En webbdesigners uppgift är att välja färger som passar, lägga till bra och rätt funktioner till webbplatsen och sedan se till
Läs merSVENSK FILMINDUSTRIS WEBBPLATS
EXPERTANALYS AV SVENSK FILMINDUSTRIS WEBBPLATS JENNY DAFGÅRD MDI.INTERAKTIONSDESIGN GRAFISKA GRÄNSSNITT 23 OKTOBER 2003 INNEHÅLLSFÖRTECKNING INLEDNING...4 SVENSK FILMINDUSTRIS WEBBPLATS...6 ÖVERGRIPANDE
Läs merUppdaterad: 2014-03-18. Lathund. Arbetsrum
Uppdaterad: 2014-03-18 Lathund Arbetsrum 1 1 Innehållsförteckning Inledning 3 Arbetsrum 4 Skapa arbetsrum, steg 1 4 Skapa arbetsrumslista 4 Olika typer av arbetsrum 6 Skapa arbetsrum, steg 2 6 Lägg in
Läs merTRAINING DAY SASS AND COMPASS FOR RWD RWD
23-27 september anordnades europeiska DrupalCon, för åttonde året, och denna gång med 1840 deltagare från hela världen. Från Sverige var vi ett tappert gäng på lite drygt 40 deltagare, från olika företag
Läs merWebbsida i Wordpress. Existens på webben och bli sökbar
Webbsida i Wordpress Existens på webben och bli sökbar Om Susann Rickan Susann Rickan bor i Nora Byggt webbsidor i 16 år Eget företag sedan 2009. Hjälper företag med webb och foto. Tycker om att bygga
Läs merResponsiv Webbdesign är det framtiden?
Beteckning: Akademin för teknik och miljö Responsiv Webbdesign är det framtiden? Daniel Karlsson juni 2011 Examensarbete, 15 högskolepoäng, C Datavetenskap Datavetenskapliga programmet Examinator: Ann-Sofie
Läs merUndervisningen 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
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 merIdrottOnline Förbund Administrera behörighet. Administrera behörighet
IdrottOnline Förbund Administrera behörighet Administrera behörighet Inledning IdrottOnline är idrottens verktyg för kommunikation och administration. IdrottOnline ägs och utvecklas av Riksidrottsförbundet,
Läs merManual för visionutv.net Redigera
Manual för visionutv.net Redigera Version 2.0 Visionutveckling 2004 Innehåll: 1 Om Redigera 3 1.1 Bakgrund 3 1.2 Hur Redigera är uppbyggt 3 1.3 Vad är? 4 2 Inloggning 6 3 Nyheter i Redigera 2.0 7 3.1 Funktionsknappar
Läs merHögskolan i Borås HT10 Webbredaktörsprogrammet distans Grafisk produktion för webb och tryck. Projektarbete Solveig Betnér
Högskolan i Borås HT10 Webbredaktörsprogrammet distans Grafisk produktion för webb och tryck Projektarbete Solveig Betnér Sammanfattning och syfte Företaget Solveig skapar textila handarbetade produkter
Läs merDomarassistenten.com. - en introduktion för domare
Domarassistenten.com - en introduktion för domare Innehåll 1. Introduktion 2. Vad förväntas av mig 3. Inloggningsuppgifter 4. Menyn 5. Återbudsmatcher 6. Mina matcher 7. Hur fungerar matchtillsättningen?
Läs merInlä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
Läs merGuide 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
Läs merSÅ LEVERERAR DIN WEBBPLATS VÄRDE OCH KUNDNYTTA
SÅ LEVERERAR DIN WEBBPLATS 7 steg för en bättre användarupplevelse Den externa webbplatsen är affärskritisk för de allra flesta organisationer och besökarnas krav på användarvänlighet är skyhöga. Här är
Läs merKREATIV OCH LJUDABSORBERANDE
PRIM 2 Prim Prim 3 PRIM Prim är ett musikintervall mellan två toner där Prim är den första rena tonen. Ordet kommer från latinets primus som betyder första. Vår Prim är en kreativ rumsavdelare som har
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 merUtseende. Lauri Watts Översättare: Stefan Asserhäll
Lauri Watts Översättare: Stefan Asserhäll 2 Innehåll 1 Utseende 4 1.1 Allmänt............................................ 4 1.2 Teckensnitt.......................................... 4 1.3 Stilmallar...........................................
Läs merEnkel Digital Skyltning
Enkel Digital Skyltning på några minuter... färdiga, enkla och stabila system från Enkel Digital Skyltning 105mm i litet format... Det finns enkel digital skyltning, med enkla genomtänkta system... Paketen
Läs merSidpanelen och gadgetar De är nya. De är smarta. Lär dig hur du använder dem.
Kap 03.indd 444 KAPITEL TRE Sidpanelen och gadgetar De är nya. De är smarta. Lär dig hur du använder dem. Gadgetar och den nya Sidpanelen är nog mina favoriter bland de nya funktionerna i Windows Vista.
Läs merGör en modern släktbok för CD eller webben
Gör en modern släktbok för CD eller webben 21 Den traditionella släktboken består av ett antal tabeller och i bästa fall en grafisk stam- eller antavla, och man kan med ett register eller hänvisningar
Läs merNi administrerar er hemsida genom att logga in på en uppdateringsmodul (även benämnd administrationsgränssnitt eller administration).
Joomla Guide 2.5.11 TILLVÄGAGÅNGSÄTT Sida 1 av 9 TILLVÄGAGÅNGSÄTT Att använda uppdateringsmodulen kräver att man vet vilka innehållsdelar man kan ändra på sin hemsida. De delar man kan ändra är oftast
Läs mer