Visuell design Bilder & färger

Transkript

1 1ME321 Webbteknik 1 Lek0on 8 Visuell design Bilder & färger Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Agenda Veckoplanen Vecka 43 Läsanvisningar UpphovsräPslagen Kort sammanfapning Exemplet Gretas Blommor Skicka formulär SökfunkJon Förstora bilder Inkludering av karta gretas-blommor8" 2

3 Exemplet Gretas blommor hdp:// Skicka formulär kontakt.htm" Från kontaktsidan: form = Kontakt på Gretas Blommor name = Rune = abc.xyz@lnu.se message = EP litet testmeddelande. sendad = on Se även Felke- Morris, Basics of Web Design, sid. 327 Från ordersidan: form = Beställning på Gretas Blommor artnr = day = 8 month = november r_name = Nisse r_street = Tomtegatan 7 r_zip = r_town = Tomtebo r_telephone = r_door = on 3 order.htm" card = Gra_s på födelsedagen Nisse. Från Rune c_name = Rune c_ = abc.xyz@lnu.se pay_method = on acceptterms = on

4 Exemplet Gretas blommor Sökfunk0on Skapas med Google anpassad sökning hpp:// I depa fall skapas en grajs sökmotor för webbplatsen Koden från Google anpassad sökning läggs in i alla html- filer, där sökrutan ska finnas. alla html-dokument! hdp://medieteknik.lnu.se/gretas- blommor 4

5 Exemplet Gretas blommor Förstora bilder Från lek0on 5: InterakJon för ap förstora bild på produkt: 1. Klicka på bilden, så visas en ruta med förstorad bild. 2. Klicka på den förstorade bilden, så döljs den igen. buketter.htm" + alla produktsidor! Implementeras med en kryssruta: Input- tagg för checkbox injll varje img- tagg. CSS- kod som känner av om kryssrutan är markerad eller ej: - Markerad: förstora bilden genom ap ändra width. - Ej markerad: bilden visas med den CSS- kod som annars valts för img- taggarna. 5

6 Exemplet Gretas blommor Karta som visar var bu0ken finns Karta på Google maps Välj önskad plats och vy. Kopiera kod för inbäddning. Justera sjl. Ta bort en del apribut och lägg in sjl i CSS- filen istället. Anpassa för responsiv design. kontakt.htm" contact.css" 6

7 Exemplet Gretas blommor Kontroll mot kravspecen Kravspecifika,on Innehåll - Produkter ska visas med bild, namn och pris. - Produkterna är kategoriserade i bukeper, kransar och övrigt. - Veckans erbjudanden ska visas på ingångssidan. - Ingångssidan ska ha foto som visar bujken och öppe_der ska anges. - Interiörbilder från bujken samt kort presentajon av personalen (namn och bild). - Kontaklormulär. - Karta som visar plats för bujken. - Förslag på blommor emer vad de ska användas Jll, födelsedag, bröllop, begravning - Beställningsformulär där Jlläggsavgimer och totalpriset hela Jden visas. Grön: Helt uppfyllt Gul: Nästan uppfyllt Röd: Delvis uppfyllt Funk,onellt - Bilder på produkter ska kunna förstoras. - Man ska kunna sortera inom kategorierna på pris eller i bokstavsordning. - Man ska kunna beställa bukeper och kransar för leverans. - Man ska kunna göra en fritextsökning på webbplatsen. Kräver JavaScript Teknisk specifika,on - Ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner Jll 320 pixels bredd. - Ska fungera i webbläsarna Chrome, Firefox, Internet Explorer, Opera och Safari (även 5 år gamla versioner). 7

8 UpphovsräPslagen styr vad vi får och inte får göra med andras material. Lag (1960:729) om upphovsräp Jll liperära och konstnärliga verk UpphovsräDslagen UpphovsräPslagen i korthet Ekonomisk räp och ideell räp. Konstnärliga och liperära verk. Skyddar svenska verk. AutomaJsk rä_ghet när verket skapas ( behövs ej). Gäller i 70 år emer upphovsmannens död. UpphovsräPen skyddar ej fakta och idéer, utan upphovsmannens upryck av innehållet. Böter eller fängelse upp Jll två år. Lundgren, J. (2006) UpphovsräD och Internet, Docendo Lag (1960:729) om upphovsräp Jll liperära och konstnärliga verk, hpp:// 8

9 Upphovsmannen har alltså dessa rä_gheter. Den ekonomiska räpen kan genom avtal överlåtas Jll andra. Den ideella räpen gäller dock alljd. Skydd av upphovsmannens rätgheter Ekonomisk räp, 2 RäP ap framställa exemplar. RäP ap göra ep verk Jllgängligt för allmänheten. RäPen gäller i 70 år emer upphovsmannens död. Om man köpt räpen ap använda materialet eller fåp Jllstånd genom avtal eller på annat säp från upphovsmannen, så får man använda det. Annars får man ej använda det. Ideell räp, 3 Upphovsmannen ska anges då verket görs Jllgängligt för allmänheten. Upphovsmannen kan motsäpa sig ap verket ändras så ap det liperära eller konstnärliga anseendet kränks. Upphovsmannen kan motsäpa sig ap verket görs Jllgängligt i sådan form eller sammanhang ap hans/hennes anseende kränks. RäPen gäller för evigt. Upphovsmannen ska alljd anges på lämpligt säp. 9

10 Vad får man göra? Utan Jllstånd får man bl.a. göra följande: Ta del av verk, t.ex. läsa, betrakta, lyssna på verk som finns publicerade på en webbplats. Framställa kopior för privat (eget) bruk av verk som man skaffat på laglig väg, dock med vissa undantag, 12. I enlighet "med god sed" citera andras verk: Källan måste anges, citatet ska också användas för ap krijsera eller belysa det egna eller någon annans verk, ej för ap göra sip eget verk mer läsvärt. FriP använda idéer, struktur, layout, ämne, etc. ifrån andra verk. Använda allmänna handlingar. Använda verk där skyddsjden gåp ut. 10

11 Vad får man inte göra? Utan Jllstånd får man bl.a. inte göra följande: Framställa digitala kopior av verk (inte ens för privat bruk) t.ex. får man inte scanna in ep fotografi. t.ex. får man skriva ut en webbsida på papper för privat bruk, men man får inte spara den som en fil på datorn. Tillfälliga kopior i cache- minnet är Jllåtet Lagra verk på Internet eller i intranät. Ändra ep verk. Det har tagits fram ep begrepp kallat creajve commons, som bl.a. används på många webbplatser där användarna lägger upp material, t.ex. flickr. Genom creajve commons kan upphovsmannen markera hur materialet får användas. Andra lagar som kan vara bra ap känna Jll: varumärkeslagen och avtalslagen. UpphocsräP i Sverige, hpp://sv.wikipedia.org/wiki/upphovsr%c3%a4p_i_sverige CreaJve commons, hpp://sv.wikipedia.org/wiki/creajve_commons 11