1 / 11

Mandag

Mandag . Programmeringbegreber Hvorfor jQuery ? Ekstern js -fil Mobiltelefonen som medie jQuery Mobile Simpelt mobil-website i jQuery : grundstruktur Projekt: navigationsdiagram og sideskitse for mobil-udgave af jeres site + grundstrukturen kodet i jQuery mobile.

gunda
Download Presentation

Mandag

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mandag • Programmeringbegreber • Hvorfor jQuery? • Ekstern js-fil • Mobiltelefonen som medie • jQuery Mobile • Simpelt mobil-website i jQuery: grundstruktur • Projekt: navigationsdiagram og sideskitse for mobil-udgave af jeres site+ grundstrukturen kodet i jQuery mobile.

  2. 1. ProgrammeringbegreberEvent, eventhandler • Events (hændelser) På en webside kan events være fx: klik, dobbeltklik, mus over, mus indenfor, indlæsning af en side, at forlade en side, mus ned, mus op, tryk på tast • Event-handler Et script, som gør noget, når en event indtræffer. I html kan man sætte en event-handler i en attribut for etelement, som eventen kan ske for F.eks: <div id=”red” onclick=”alert(’du klikkede på rød’)”></div> onclick, ondblclick, onmouseover, onmouseup, onload, onunload, onmousedown, onmouseup, onkeypress I jQuery lægger man event-handleren ned mellem script-tags. F.eks. $(’red’).click(function(){…}) Click, dblclick, mouseover, mouseup, load, unload, mousedown, mouseup, keypress

  3. 1. Programmeringbegrebervariabel, if-sætning • Variabel Navn på en værdi. I scriptet kan variablens værdi ændres (tælles op, ganges med noget, sættes lig noget helt andet etc) Eks fra javascript (samme i jQuery): var venstre=10; venstre=venstre+10; • Betingelse/ condition Eksempel fra javascript (samme i jQuery): If(kontakt==0){ kontakt=1; this.backgroundColor=’red’ }else{ kontakt=0; This.backgroundColor=’blue’ }

  4. 2. Hvorfor JQuery?? Problemer med javascript: • Besværlig kode (lange sætninger)Eksempel: javascript document.getElementById("en").innerHTML=document.getElementById("to").innerHTML -> jquery $("#en").html($(”#to").html) Mange gode jquery-ressourcer på nettet – bl.a. til gallerier. • Mange elementære effekter kræver besværlig programmering(f.eks. Animation, fadeIn, skift mellem to funktioner) • Browserforskelle Løsning: javascript med jquery Programmeret i javascript For at køre jquery skal man hente jQuery-biblioteket (kræver netforbindelse): <script src="http://code.jquery.com/jquery-latest.min.js"></script>

  5. 3. Ekstern js-fil Når jQuery-koden bliver lang – eller skal genbruges på flere sider: • Klip al kode ud, som står mellem script-tags • Paste den ind i en ny fil (husk: script-tags skal ikke med). • Gem filen i js-format • Referér til filen fra html-dokumentet:<script src="minkode.js"></script>

  6. 4. Mobiltelefon som mediefor websider Fordele Kan være i lommen Tændt med det samme Bruges i sammenhænge, hvor desktoppen ikke bruges Kan spille sammen med QR-codes Stor udbredelse Ulemper Lille skærm Lille computer-kraft Langsomt internet Design af mobilwebsider: Indhold, som netop kan bruge i den særlige mobil-situation (fx ved at bruge QR-codes Indhold, som fylder så lidt som muligt Indhold, som kræver så få downloads som muligt Enkelt layout, enkel navigation Knapper, man kan ramme med en finger http://www.qrstuff.com/

  7. 5. jQuery mobile jQuery mobile Programpakke skrevet i jQuery Kører på html5 Gør det nemt at udvikle en prototype til mobil-websites Fordele: Cross-platform Let at bruge Anvender de layout-elementer, man kender fra mobil-applikationer Simulerer de overgange, man kender fra apps (transitions) Webside med dokumentation og referencer: http://jquerymobile.com/

  8. 6.Jquery mobile Grundstruktur for et site Et site kan lave i én html-fil Denne fil indeholder både forside og alle undersider <!DOCTYPE html> <html> <head> <title>Page Title</title> <metacharset="utf-8"> Et særligt meta-tag skal ind for at sikre at siden bliver vist i den rigtige størrelse: <metaname="viewport" content="width=device-width, initial-scale=1"> Tre filer skal hentes ind: jquery, jquery mobile og jquery mobiles stylesheet-fil: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> </head> <body>….. ………

  9. 7.Jquery mobile Grundstruktur for et site 6 <div id="hjem" data-role="page"> <div data-role="header"> <h3>Pet Shop Boys</h3> </div> <div data-role="content" add-back-btn="true"> <h3>Køb dyr hos os</h3> <a href="#seal" data-role="button">Sæler</a> <a href="#tiger" data-role="button">Tigre</a> </div> </div>

  10. 6.Jquery mobile Grundstruktur for et site <div id="seal" data-role="page" > <div data-role="header" > <a href='#hjem' data-icon='arrow-l'>Back</a> <h1>Sæl</h1> </div> <div data-role="content"> <p>Vi har tilbud på sælunger i denne uge</p> <imgsrc="billed2.jpeg" alt="sæl"><br> <i>Pris: 356 kr pr styk - to for 500</i> </div> </div> <div id="tiger" data-role="page"> <div data-role="header"> <a href='#hjem' data-icon='arrow-l'>Back</a> <h1>Tiger</h1> </div> <div data-role="content"> <p>En tiger som kæledyr er noget, der skaber respekt!</p> <imgsrc="billed3.jpeg" alt="tiger"><br> <i>Sibirsk tiger: 6000, Indisk 4500.</i> </div> </div>

  11. Resten af dagen navigationsdiagram og sideskitser for mobilsite Kommunikationsovervejelser: hvordan skal mobilsiden spille sammen med websitet (tænk fx på QR-codes) 1. version af mobilsite

More Related