On-line produktion TDDC61

Relevanta dokument
On-line produktion TDDC61

Förra gången. jquery Lab 4 Muddy Cards resultat.

Webbprogrammering TDDD52

Elektronisk publicering TNMK30

On-line produktion TDDC61

On-line produktion TDDC61

Webbprogrammering 725G54

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

On-line produktion TDDC61

Föreläsning 4. CSS Stilmallar för webben

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät

Elektronisk publicering TNMK30

TNMK30. Elektronisk publicering

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter

2I1073 Föreläsning 1. HTML och XHTML XHTML

Optimering av webbsidor

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.

Webbprogrammering. Sahand Sadjadee

Webbutveckling Laboration 1: HTML5 och CSS3.

Webbprogrammering, grundkurs 725G54

Laboration 2: Xhtml och CSS.

Carl-Oscar Hermansson WEBB DESIGN

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011

Lektion 2 - CSS. CSS - Fortsätt så här

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

Frågor och svar Gränssnittsdesign/Webbutveckling

JavaScript in SharePoint and not just for Apps. Wictor Wilén

TNMK30 - Elektronisk publicering

Webbteknik för ingenjörer

CMS. - Content management system

Språk för webben introduk4on 4ll HTML

Axiell Arena. Optimering av prestanda

Publiceringsverktyget

Projektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum:

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Webbprogrammering - 725G54 PHP. Foreläsning II

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

Projekt Foreläsning VI

Introduktion Översikt av kursen och området webbteknik

MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 1 HELENE BROGELAND

WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm

Innehålls förteckning

Prislista. Information. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet

EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript

JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI

Webbplats analys emreemir.com

Copy Cat Laboration 4

Labora&on 7 Syfte med laborationen:

Webbdesign vt Innehållsförteckning

F12 Mobila enheter Dagens agenda

Introducerande övningar i HTML

Game of 40. Regler och om sidan är in princip samma sak. Det som skiljer dem åt är att de inte har samma text.

Tentamen på kursen Webbdesign, 7,5 hp

Webbplats analys villagetalkies.com

Programmeringteknik. Planering MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Publiceringsverktyget

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt

Bilder. Bilder och bildformat

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)

Webbteknik II - 1DV449 Laboration 3

Struktur & Layout med CSS

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.

Labora&on 1 Variabler och beräkningar övningar/uppgi9er

Materialspecifikationer webb 2014

SLUTRAPPORT. Sebastianlund.com. Individuellt mjukvaruutveckingsprojekt, 1DV430. Författare: Sebastian Lund WP11 Datum:

WD406F - Interaktiva medier I 7,5hp Moment: Web Usability Inlämningsuppgift 1ab. Wynona Ekesrydh

Avancerade Webbteknologier

Labora&on 3 HTML och struktur övningar/uppgi:er

Webbservrar, severskript & webbproduktion

Materialspecifikationer

Tillämpad programmering CASE 1: HTML. Ditt namn

Lägga till bild i e- handeln

Portfolio Mathias Andelin

PHP. Dynamiska webbsidor

HTML. Introduktion till HyperText Markup Language

INT 3 F3. En texts läsbarhet. Teckensnitt. Medieteknik Del1. Färger, teckensnitt och bildformat

Sammanfattning av hantering av redovisning av uppgift U1

Optimering av prestanda

En stiligare portal Laboration 3

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?

ATT ARBETA MED VEKTORGRAFIK

Webbdesign vt Innehållsförteckning

Grunder. Grafiktyper. Vektorgrafik

Laboration 1. Webbprodution Struktur & innehåll HT2015

Webbplats analys playhousenightclub.com

PROJEKT Kurs om hållbar utveckling

Ljud och video på webbsidor

Visuell design Bilder & färger

Manual Anvisningar vid annonsering på startsida i Ratsit 3.0.

Publiceringsverktyget

Laborationsanvisning. HTML5 Laboration 6. Författare: Johan Leitet Version: 1 Datum:

Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem

Formulär, textsträngar och en del annat

En grund i bildbearbetning för webben i Photoshop CS5

Skeleton plane & Responsiv webbdesign med CSS

Bildredigering i EPiServer & Gimp

Föreläsning 2. Operativsystem och programmering

Transkript:

On-line produktion TDDC61

Förra gången MuddyCards Animation Portfolio Lab 3.

Muddycards - resultat Positiva kommentarer Tempo föreläsningar Labbhandledning, pedagogik Mer labbhandledning Instruktioner LISAM Labbtid efter föreläsning Tempo Frågor? Synpunkter?

Portfolio Bildoptimering Javascript jquery Agenda

Förberedelser Design Implementation Utvärdering Portfolio

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

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

Portfolio - implementation Bygg!

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

Bildoptimering Filstorlek påverkar laddningstider Kort laddningstid = nöjda/fler besökare/kunder (Amazon skulle förlora $1.6 miljarder på 1 sek extra i laddtid) 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).

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

Demo Bildoptimering

Sprite sheets En bild för flera små bilder Minskar laddningstider och HTTP Requests http://css-tricks.com/css-sprites/ #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;}

Bildoptimering Använd inte bilder för att visa text Tar mycket plats och bandbredd/trafik Oflexibelt, krångligt att uppdatera.

Bildoptimering text med styling istället för bilder, menyer, knappar, headers även enklare att ändra och uppdatera bättre tillgänglighet

Bildoptimering Använd glyphs/dingbats/wingdings/emojis istället för ikoner och små återkommande bilder

Rita med SVG Bildoptimering

Bildoptimering för SEO Använd sökord i bildnamn DCMIMAGE10.jpg vs 2012-Ford-Mustang-LX- Red.jpg I img-taggens alt-attribut beskriv vad som visas på bilden. T ex alt= 2012 Ford Mustang LX Red

Retina, mfl Högre upplösning än vanligt Funkar att göra bilder dubbelt så stora och sen skala ner med HTML/CSS (men är dåligt för bandbredd och användare med vanlig skärm) Går att göra alternativa CSS-regler för skärmar med hög dpi. Likt RWD-koden fast istället för width så kollas dpi eller pixelratio Script (retina.js) som byter ut bilder om det behövs och finns högupplösta varianter Kommer (kanske) men är inte standard ännu: <img src= low-res.jpg srcset= high-res.jpg >

Retina, mfl För Lab 4 krävs ej retina-anpassning För portfolio/projekt är det meriterande för högre betyg.

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

Javascript Java

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

Javascript - se upp! En del användare har inte tillgång till Javascript Crawlers/spindlar/robots kör inte Javascript - Sökmotorsoptimera utan Javascript Javascript kan krascha/hänga webbläsaren (eller tab).

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.

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 Finns mängder av färdiga script att använda.

Demo - jquery

jquery Färdiga bibliotek med kod för t ex bildvisning, effekter, osv Hitta effekt som passar Ladda ner filer och kolla i instruktioner för var filer ska ligga och hur kod ska modifieras Brukar vara lite pilligt innan det funkar Kolla noga på filnamn och sökvägar.

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

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

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

www-allmänbildning infosthetics.com evhead.com/2005/11/ten-rules-for-web-startups.asp www.alistapart.com/articles/indefenseofeyecandy/ gettingreal.37signals.com/toc.php mnmlist.com/w/ www.theonion.com/articles/let-me-explain-why-miley-cyrus-vma-performance-was,33632/ alistapart.com/article/understandingwebdesign dribbble.com

Tack & lycka till! foto Surfskolan.nu