Webbprogrammering TDDD52

Transkript

1 Webbprogrammering TDDD52

2 ERD MySQL+PHP. Förra gången

3 Idag Javascript jquery Progressive enhancement XML & AJAX Lab 4 och 5 Sammanfattning av kursen.

4 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

5 Lästips

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

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

8 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

9 Demo

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

11 Demo

12 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 logisk ut utan CSS 2. CSS2, presentation helt separerad från innehåll 3. (eventuellt CSS3) 4. Javascript

13

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

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

16 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

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

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

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

20

21

22 Inför laboration 4 Webbplats med validering av formulär och bildvisning. Eget Javascript och/eller jquery Progressive enhancement Ska se ok ut utan CSS2/CSS3 och utan JS (Ni behöver ej imlementera serversidevalidering (PHP)).

23 Lab 5 Helst grupper om 2 studenter. 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é en handledare. Via ett gränssnitt ska man kunna visa, lägga till, ta bort, och ändra i innehåll på webbplatsen Använd och fördjupa kunskaper från de tidigare labbarna. 2,5 hp 130 h arbete per grupp Bokade tider med handledning. Observera att det är få tillfällen mot slutet. Deadline 19/3. Redovisning per mail.

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

25 Sammanfattning av kursen

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

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

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

29 4. Databaser och ERD ER-diagram SQL. id namn efternamn gata nummer Person 1 N äger Hus

30 5. MySQL ER-diagram MySQL.

31 6. Javacript Javascript jquery Progressive enhancement Sammanfattning av kursen.

32 Frågor! Synpunker?

33 fortbildning/inspiration

34 Hör gärna av er Feedback Examensarbeten.

35 Tack! Lycka till!