On-line produktion TDDC61

Transkript

1 On-line produktion TDDC61

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

3 Deadlines Laborationer: 14/10 Lämna in efterhand ni blir färdiga Vi rättar inom 5 arbetsdagar Portfolio, tillfälle 1: 28/10, kl Portfolio, tillfälle 2: 7/1, kl Rättning inom 10 arbetsdagar.

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

5 Kurswebb Inget på LISAM Eller sök på: TDDC61.

6 Hotlinking Att använda bilder som inte ligger på egen server. Undvik! Ingen kontroll på vad det är för bild som visas Den kan bytas till annan bild med samma filnamn Bild kan blockeras av andra servern Tar kraft av andra servern.

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

8 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.

9 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) <a href= >Failure</a> Facebook Login Semantiskt information på sidan.

10 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 )

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

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

13 Cards Delar av webbplats som upprepas med samma typ av innehåll och layout T ex pinterest, facebook, twitter Använd class och taggar.

14 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.

15 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.

16 Responsive Web

17 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).

18 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.

19 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 problem med olika defaults och få samma layout i alla webbläsare så gör alltid en css global reset /01/03/reset-revisited/ Lägg in en Global Reset från början.

20 Selectors.myclass - alla taggar med class= myclass #myid - alla taggar med id= myid p - alla p-taggar p.myclass - alla p-taggar med class= myclass h1, p - alla h1- och p-taggar div.myclass p - p-taggar som ligger i div.myclass a:hover - a-tag som pekas på p::after - lägg in innehåll efter p-tag p:first-child - för p-taggen efter förälder p:first-letter, p:first-line, osv Med flera.

21 Demo

22 Laboration 2 Webbplats om film, författare, fotbollslag, tv-serie, el dyl Genomtänkt och övergripande layout och design är krav för godkänt. Tillämpa vad ni lärt er sen tidigare på GDK. Layout i grids Meny/navigation på alla sidorna Upprepande/återkommande innehåll enl princip om cards RWD för två bredder - med mycket tydligt att det är olika layouter. SEO Tydlig koppling mellan innehåll och presentation.

23

24 Labbtaktik - tips Kursen kräver mer arbete än endast schemalagt Läs och förbered innan labbpass Välj ämne, bilder, osv För pass med handledare jobba innan så ni har problem och frågor med er till passet Har ni tid och/eller siktar på högre betyg (eller jobb inom webb) så gör ambitiösa lösningar där ni lär er mer.

25 Nästa föreläsning CSS-animation Projektgenomgång Gör gärna klart laboration 2 tills dess.

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

27 Tack och lycka till!