On-line produktion TDDC61

Transkript

1 On-line produktion TDDC61

2 Sök till Legionen!

3 Förra gången MuddyCards PHP Lab 4.

4 Agenda Webbtermer och annat som är bra att veta Bildoptimering Javascript jquery Portfolio Avstämning kurs.

5 Webbsida Webbsida - unik sida, webbadress Webbplats (sajt) - flera sidor, länkade till varandra, ofta under samma domännamn eller subdomän Hemsida - undvik att använda, tvetydigt Kommer från home page men en. home sv. hem Kan även använda startsida eller ingångssida Svenska datatermgruppen - visning.html?obj=a20

6 Typsnitt på webben Se upp med licenserna Brukar vara olika licenser för print och web alltså kanske ej ok att ladda upp font-filer på server och använda.

7 Hotlinking Länka till filer (oftast bilder) på annan server och använder dem på egen webbplats Tar kraft av andra servern Kan spärras eller bytas på andra servern Tveksamt rättsläge Lägg filer och bilder som används på egen server. (Eventuellt med undantag för CDN, Google Fonts, reklamtjänster och dylikt).

8 Bildoptimering Filstorlek - laddningstider Kort laddningstid = nöjda besökare/kunder jpg - foto gif - grafik, kan vara genomskinliga, kan vara animerade png - passar både foto och grafik, kan vara genomskinliga svg - vektorgrafik (inte så vanlig)

9 Bildoptimering Ha inte större bilder än vad som kan visas på webbsidan Undvik att skala om med CSS Vid album så använd tumnaglar/miniatyrbilder Tips: beskär att minibilder till samma format I Photoshop finns val för Save for Web and Devices.

10 Retina Högre upplösning än vanligt Kan ha dubbelt så stora bilder och skala ner dem för 72dpi Mkt extra data Alternativa CSS-regler för skärmar med hög dpi. Likt RWD-koden. Script (retina.js) som byter ut bilder om det behövs och finns högupplösta varianter.

11 En bild för flera små bilder CSS sprites Minskar laddningstider och HTTP Requests #nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}

12 Javascript Körs hos klienten Kan vara avstängt eller inte fungera Kan ge en rikare upplevelse Javascript är inte Java

13 Javascript Java

14 Javascript kan t ex Leta reda på delar av HTML-kod och manipulera innehåll Ändra presentation Reagera på användarens handlingar Animera Kontrollera formulär

15 Javascript - se upp! Alla användare har inte tillgång till Javascript Undvika att använda Javascript till något viktigt utan att ha ett alternativ Crawlers/spindlar/robots kör inte Javascript - Sökmotorsoptimera utan Javascript Javascript kan krascha/hänga webbläsaren (eller tab).

16 Javascript Syntax likt andra programmeringsspråk Ganska klurigt språk Finns färdiga bibliotek att använda - jquery, script.aloco.us, Prototype, Dojo Biblioteken gör JS mycket lättare att använda Finns även färdiga moduler för responsive web och fotoalbum.

17 jquery the fairy godmother of javascript Gör det enklare att använda javascript Liten fil med kod CSS3 stöd Stöder flera webbläsare.

18 Demo - jquery

19 Progressive enhancement Bygg först så det ser OK ut i enkla webbläsare Bygg sedan så det ser bra/ bättre ut i mer avancerade webbläsare Enkel webbläsare är inte alltid samma sak som gammal PE ger god tillgänglighet och användbarhet för många samtidigt som man kan jobba med mer avancerad design och upplevelesen av en webbplats. Ordning: 1. HTML, korrekt syntax, korrekt semantik, sidan ska se ok och logiskt ut utan CSS 2. CSS, presentation helt separerad från innehåll, anpassa för olika storlekar (responsive web) 3. Javascript (t ex jquery) för att göra upplevelsen bättre.

20 Favicon Används (inte alltid) för: Adressfältet Tabbar Bokmärken Sökmotorslistningar.

21 Laboration 5 Webbplats med fotoalbum Fokus på jquery Hitta på saker som ni tycker tillför er webbplats något Nytt ämne - nya filer - ny design Tänk på er portfolio och framtiden - gör fina webbplatser!

22 Ordning och reda Labbar i olika mappar Lägg olika typer av filer i egna mappar i labbmapparna, t ex: lab5/images/ lab5/includes/ lab5/scripts/ lab5/stylesheets/ Efter ni skickat in för redovisning - flytta inte, ändra inte i filer eller mappar.

23 Inför projekt Kolla på labbtid med handledare så ni kommer åt ert eget serverutrymme på IDA Vänta inte med att försöka ladda upp till det natten innan deadline.

24

25

26 Förberedelser Design Implementation Utvärdering Portfolio

27 Portfolio - Förberedelser Förebildsanalys Målgruppsanalys Persona.

28 Portfolio - Design Moodboards Wireframes Skisser/mock-ups (hög detaljnivå - ska (nästan) se ut som färdig färdig webbsida).

29 Portfolio - implementation Bygg! (Notera om ni ändrar något, hur och varför - ta med i rapporten) Krav för G, betyg 3: Korrekt HTML och CSS, välgjort design/layout som passar målgrupp, separation mellan innehåll och presentation. Meriterade för betyg 4 och 5: Utmärkt design/layout/grid, RWD, SEO, PHP, javscript/jquery, Progressive enhancement, tillgänglighet, användbarhet, CSS3, bildoptimering.

30 Portfolio - Utvärdering Arbetsrapport Argumentation & kritik Reflektion & självvärdering ord (med kontrollerad stavning och grammatik).

31 Portfolio - Redovisning Projektdokument - ska vara pdf Webbplats - publicerad på www Kod - tillgänglig antingen bifogad, länkad eller.phps Deadline 30/10, kl Uppsamling 8/1, kl Senare redovisningar hänvisas till nästa redovisningstillfälle. Generellt inga kompletteringar. Allt ska vara validerat och kontrollerat innan inlämning. (Precis som i verkligheten.) Ändra inte i kod/filer/adresser efter deadline!

32 Betyg U, 3, 4, 5 50% Implementation 50% Dokumentation 3 = Allt OK 4 = Ett par delar bra och ett par delar OK 5 = Allt bra, eller många delar mycket bra.

33 Sammanfattning av kursen

34 1. HTML & CSS Kursupplägg Semantisk korrekt mark-up Sökmotorsoptimering Tillgänglighet Validering.

35 2. RWD Layout & styling Färger SEO Att separera innehåll från presentation.

36 3. Animation CSS3 Animation.

37 4. PHP Dynamiska sidor HTML formulär.

38 5. jquery Javscript jquery Progressive enhancement Bildoptimering.

39

40 Frågor/kommentarer

41 www-fortbildning The Smashing Books

42 Tack & lycka till! foto Surfskolan.nu