On-line produktion TDDC61

Transkript

1 On-line produktion TDDC61

2 Förra veckan Kursupplägg HTML FTP Validering Laboration 1.

3 Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle 1: 30/10, kl 08 Portfolio, tillfälle 2: 8/1, kl 08

4 Schema Pass märkta A/B är halvklass med handledare Övriga pass öppna för helklass Med och utan handledare Finns som kommentarer i schemat Kursen kräver mer arbete än endast schemalagt.

5 Grupper Extra handledare - Sahand Grupper är lite omflyttade. Inget byte A - B. Kolla i WebReg innan ni skickar redovisning så ni skickar till rätt handledare.

6 Idag SEO Grids Cards Positionering Global reset RWD Separation av innehåll och presentation

7 SEO Search Engine Optimization Sökmotorsoptimering Underlättar för sökmotorer att indexera Hjälper till att hamn högt i index Hjälper till att få besök från sökmotorer.

8 En sökmotors anatomi ~200 parametrar som avgör Page Rank - räknar länkar från andra sidor och hur många länkar de sidorna har till sig. Ord i länken (och nära länken) White House - Failure Facebook Login Semantiskt information på sidan.

9 SEO och HTML Vissa taggar tyder på att sidan handlar med om ett ämne (mer vikt): title, h1, h2, em, strong Även ord tidigt Ord i URL Format på URL Ska vara lätt att läsa och komma ihåg ( written for humans )

10 SEO och copy Bra (säljande/lockande) text ger mer besökare

11 Grids Rutnät, kolumner, rader Ger bra layout Lätt för ögat/tanken att förstå Vertikalt och horisontellt

12 Cards Delar av webbplats som upprepas T ex pinterest, facebook, twitter Använd class och taggar.

13 Positionering Absolute - lägger sig på koordinater, kan scrollas Fixed - lägger sig på kordinater, fast Relative - ritas ut i flödet, kan knuffas iväg relativt till var den ritas ut Static - (default) ritas ut i flödet, kan inte knuffas.

14 Float float: left/right flyter till sidan och tillåter annat innehåll att flyta upp om det finns plats clear: left/right/both stoppar float, läggs på box som inte ska floata overflow: auto vid problem med float där boxen inte sträcks ut.

15 Responsive Web

16 Responsive Web Samma webbsida för olika enheter Anpassar layout efter storlek på skärm/fönster och upplösning Länka till olika CSS Media queries Hantera olika storlekar på bilder (senare i kurs).

17 Separation av innehåll och presentation Enklare skapa, underhålla och återanvända Speciellt när man börjar bygga dynamiska webbplatser Går att göra olika design beroende på webbläsare Laddningstider blir kortare.

18 Global Reset Webbläsare har lite olika inställningar för margin och padding och annat Gör pixelperfekt layout svår För att undvika och få samma layout i alla webbläsare så gör alltid en css global reset /01/03/reset-revisited/

19 Demo

20 Portfolio Förberedelser Förebildsanalys Målgruppsanalys Persona Börja logga er tid för portfolion.

21 Förebildsanalys Titta på andra webbplatser inom samma genre (andra portfolios) eller andra webbplatser Notera saker man gillar, vill ha med på egen webbplats; och dåliga lösningar eller saker man inte vill ha med Argument för och emot sin design För minst tre webbplatser Redovisa med skärmdumpar och text T ex färg, typografi, copy, känsla, meny, uppdelning, interaktion, etc Kan göras parallellt med hela projektet.

22 Exempel Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit

23 Målgruppsbeskrivning Vem ska använda? När? Varför? Primär, sekundär? Krav, syften och förväntingar Gör klart tidigt och använd som stöd under designprocessen Ligger till grund för persona Ca ord.

24 Persona Användararketyp Verktyg för att sätta sig in i någon annans situation, tankar och användning av tjänst/ produkt/webbplats Gör klart tidigt och använd som stöd under designprocessen. 1-2 st personas Ca ord per persona. Ta gärna med bild.

25 Inför laboration 2 Webbplats om film, författare, fotbollslag, tv-serie, el dyl Arbeta mer än schemalagd labbtid. 20 h eget arbete på lab 2. Genomtänkt och övergripande layout och design är krav för godkänt. Tillämpa vad ni lärt er sen tidigare på GDK. Grids, cards RWD för två bredder SEO Tydlig koppling mellan innehåll och presentation.

26

27 Inför nästa föreläsning CSS-animation. Kommer som video på kurswebben på onsdag 16/9 Gör gärna klart laboration 2 tills dess.

28 www-allmänbildning alistapart.com smashingmagazine.com sixrevisions.com sitepoint.com doctype.com webdesignerdepot.com google.com/webmasters developer.yahoo.com

29 Tack och lycka till!