Elektronisk publicering TNMK30

Transkript

1 Elektronisk publicering TNMK30

2 Förra gången Usability & interaktionsdesign Projektintroduktion Bildbehandling.

3 Byte av handledare Istället för Martin Johansson Annsofi Pettersson, Skicka redovisningar och kompletteringar till Annsofi.

4 Idag Sessions Javascript Progressive enhancement jquery XML AJAX Projektet Sammanfattning av kursen.

5 Sessions För att spara data mellan sidor likt cookies session_start(); För att det ska fungera på en del servers (bland annat ITN) måste ni först köra: session_save_path(sökväg); Används likt POST och GET Hämta $value = $_SESSION[ value ]; Lagra $_SESSION[ value ] = $new_value;

6 Om databastabeller varje tabell ska beskriva en typ av sak, varje rad i tabellen data om en sådan sak, och de data som vi lagrat för varje sak ska finnas på en enda rad

7 Javascript Körs hos klienten Är avstängt eller fungerar inte för många Kan ge en rikare upplevelse Javascript är inte Java

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

9 Javascript - se upp! Alla användare har inte tillgång till Javascript Använd alltså inte Javascript till något viktigt utan att ha ett alternativ Designa även så att det känns ok att besöka webbplatsen utan Javascript Crawlers/spindlar/robots kör inte Javascript - Sökmotorsoptimera utan Javascript Javascript kan krascha/hänga webbläsaren

10 Demo

11 jquery Javascript-bibliotek Ofta enklare att använda än att göra egna javascript Plug-ins UI Andra bibliotek: script.aloco.us, Prototype, Dojo.

12 Demo

13 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. (X)HTML, korrekt syntax, korrekt semantik, sidan ska se ok och logiskt ut utan CSS 2. CSS2, presentation helt separerad från innehåll 3. (eventuellt CSS3) 4. Javascript

14

15 Tänk på... Progressive enhancement Separera innehåll (XHTML), presentation (CSS), beteende (JS) För felsökning i JS använd - Firebug (Firefox) - Safari (Develop-menyn)

16 Tänk också på... Ge feedback till användaren: när något inte gått att utföra och varför när något utförts korrekt Feedback bör vara vänlig/artig och utan teknisk jargon För säkerhets skull ge inte feedback som innehåller information om databas eller filer Validera alltid data från användaren på serversidan.

17 Mash-up Kombinerar data från två eller fler källor flickrvision.com - foto & karta digg.com - nyheter & omdömen gis.chicagopolice.org/clearmap_crime_sums/ brottslighet i Chicago & karta XML underlättar ofta

18 XML Extensible Markup Language Enkelt kodspråk för att märka upp (tagga) data Kan användas till det mesta Bra för överflyttning av data från en applikation till en annan XHTML är XML för webbsidor.

19 XML, exempel <recipe name="bread" prep_time="5 mins" cook_time="3 hours"> <title>basic bread</title> <ingredient amount="8" unit="dl">flour</ingredient> <ingredient amount="10" unit="grams">yeast</ingredient> <ingredient amount="4" unit="dl" state="warm">water</ ingredient> <ingredient amount="1" unit="teaspoon">salt</ingredient> <instructions> <step>mix all ingredients together.</step> <step>knead thoroughly.</step> <step>cover with a cloth, and leave for one hour in warm room.</step> <step>knead again.</step> <step>place in a bread baking tin.</step> <step>cover with a cloth, and leave for one hour in warm room.</step> <step>bake in the oven at 180(degrees)C for 30 minutes.</step> </instructions>

20 AJAX Asynchronous Javascript and XML Hämtar nya delar till en webbsida utan att ladda om hela dokumentet Används för att bygga webbapplikationer som liknar skrivbordsapplikationer gmail.com, calendar.google.com.

21

22

23 Inför laboration 5 Webbplats om bildbehandling Javascript Progressive enhancement Ska se ok ut utan CSS2/CSS3 och utan JS jquery eller dylikt.

24 Projektuppgiften 2-3 studenter per grupp. Samma ambitionsnivå. Design och implementation av en databasdriven webbplats Utökad filmdatabas, blogg, forum, webbplats för ett företag, webbshop, el dyl. Stäm av er idé med handledare. Via gränssnitt ska man kunna lägga till, ta bort, och ändra i innehåll på webbplatsen Använd och fördjupa kunskaper från labbarna. Ska även skriva konkurrensanalys och arbetsrapport 3 hp 2 veckors arbete heltid 160 h för två studenter Bokade tider med handledning Deadline 22/12. Redovisning per mail.

25 Upphittad kod Från forum, böcker, bloggar - enstaka rader kod OK Gör alltid en kommentar i koden var ni fått den i från om ni inte själva skrivit den Gäller även kod som är ändrad eller anpassad Att använda jquery eller dylikt är OK Frameworks och färdiga CMS är ej OK. (Dvs Joomla, CodeIgniter, WP, RubyOnRails, med flera - ej OK).

26 Ingen föreläsning nästa vecka 30/11

27 Sammanfattning av kursen

28 1. XHTML Kursupplägg Semantisk korrekt mark-up Sökmotorsoptimering Tillgänglighet Validering.

29 2. CSS Layout & styling Färger Sökmotorsoptimering Att separera innehåll från presentation.

30 3. PHP Dynamiska sidor (X)HTML formulär Säkerhet.

31 4. MySQL ER-diagram MySQL.

32 5. Usability Användbarhet Designprinciper Interaktionsdesign Läsbarhet.

33 Olika grafikformat Bitdjup Färglägen och kanaler Komprimering Filformat Bildkvalitet 6. Bildbehandling Upplösning & Interpolering

34 7. Javacript Javascript jquery Progressive enhancement Sammanfattning av kursen.

35 Frågor! Synpunker?

36 fortbildning/inspiration

37 Till sist... Hör gärna av er Feedback Jobb som labbhandledare Examensarbeten.

38 Tack! Lycka till!