1 / 14

Websider til mobil

Websider til mobil. Mobilen som medie jQuery Mobile Simpelt mobil-website i jQuery mobile: grundstrukturen Projekt: navigationsdiagram og sideskitse for mobil-udgave af jeres site + grundstrukturen kodet i jQuery mobile. 1. Mobiltelefon som medie for websider. Plusser

reece
Download Presentation

Websider til mobil

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. Websider til mobil • Mobilen som medie • jQuery Mobile • Simpelt mobil-website i jQuery mobile: grundstrukturen • Projekt: navigationsdiagram og sideskitse for mobil-udgave af jeres site+ grundstrukturen kodet i jQuery mobile.

  2. 1. Mobiltelefon som mediefor websider Plusser Kan være i lommen Tændt med det samme Bruges i sammenhænge, hvor desktoppen ikke bruges Kan bruges sammen med QR-coder Har berøringsfølsom skærm Stor udbredelse Minuser Lille skærm Lille computer-kraft Langsomt internet Designovervejelser Minimalt og overskueligt indhold Overskuelig og praktisk navigation Knapper, man kan ramme med en finger Indhold, som fylder så lidt som muligt Indhold, som kræver så få downloads som muligt Praktisk øvelse: åbn dit website på mobilen ogs se, hvordan den opfører sig http://www.qrstuff.com/

  3. 2. jQuery mobile jQuery mobile Programpakke skrevet i jQuery Kører sammen med jQuery og 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/

  4. 3-1. jQuery mobile head-del: viewport og hent biblioteker Her er dokumentets øverste del – før body-sektionen: <!DOCTYPE html> <html> <head> <title>Page Title</title> <metacharset="utf-8”> <metaname="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js”> </script> </head> <body>…

  5. 3.2. Jquery mobile body-delen: alle undersider <div id="hjem" data-role="page"> <h1>Forside</h1> <a href="#side1" >side 1</a> <a href="#side2" >side 2</a> <imgsrc="c1.jpg"> </div> <div id="side1" data-role="page"> <h1>Side 1</h1> <a href='#hjem'>Back</a> <a href="#side1" >side 1</a> <a href="#side2" >side 2</a> <imgsrc="c2.jpg"> </div> <div id="side2" data-role="page"> <h1>Side 2</h1> <a href='#hjem'>Back</a> <a href="#side1" >side 1</a> <a href="#side2" >side 2</a> <imgsrc="c3.jpg"> </div>

  6. 3.3. jQuery Mobile headers <div id="hjem" data-role="page"> <div data-role="header”> <h1>Forside</h1> </div> <a href="#side1">side 1</a> <a href="#side2">side 2</a> <img src="c1.jpg"> </div> <div id="side1" data-role="page"> <div data-role="header"> <a href='#hjem'>Back</a> <h1>Side1</h1> </div> <a href="#side1" >side 1</a><a href="#side2" >side 2</a> <img src="c2.jpg"> </div> <div id="side2" data-role="page"> <div data-role="header"> <a href='#hjem'>Back</a> <h1>Side 2</h1> </div> <a href="#side1" >side 1</a> <a href="#side2" >side 2</a> <img src="c3.jpg"> </div>

  7. 3.4. jQuery Mobile content <div id="hjem" data-role="page"> <div data-role="header”> <h1>Forside</h1 </div> <div data-role="content"> <a href="#side1">side 1</a> <a href="#side2">side 2</a> <img src="c1.jpg"> </div> </div> <div id="side1" data-role="page"> <div data-role="header"> <a href='#hjem'>Back</a> <h1>Side1</h1> </div> <div data-role="content"> <a href="#side1" >side 1</a> <a href="#side2" >side 2</a> <img src="c2.jpg"> </div> </div> (også på side 2 )

  8. 3.5 jQueryMobile button <div id="hjem" data-role="page"> <div data-role="header"> <h1>Forside</h1> </div> <div data-role="content” > <a href="#side1" data-role="button">side 1</a> <a href="#side2" data-role="button">side 2</a> <imgsrc="c1.jpg"> </div> </div> <div id="side1" data-role="page"> <div data-role="header"> <a href='#hjem'>Back</a> <h1>Side1</h1> </div> <div data-role="content"> <a href="#side1" data-role="button" >side 1</a> <a href="#side2" data-role="button">side 2</a> <imgsrc="c2.jpg"> </div> </div> (også på side 2 )

  9. 3.6. jQuery Mobile data-transition <div id="hjem" data-role="page" > <div data-role="header"> <h1>Forside</h1> </div> <div data-role="content"> <a href="#side1" data-role="button" data-transition="flip">side 1</a> <a href="#side2" data-role="button" data-transition="flip">side 2</a> <imgsrc="c1.jpg"> </div> </div> <div id="side1" data-role="page"> <div data-role="header"> <a href="#hjem"data-transition="flip" >Back</a> <h1>Side1</h1> </div> <div data-role="content” > <a href="#side1" data-role="button" data-transition="flip" >side 1</a> <a href="#side2" data-role="button" data-transition="flip">side 2</a> <imgsrc="c2.jpg"> </div> </div> (også på side 2 )

  10. 3.7. jQuery Mobile collapsible <div id="side1" data-role="page"> <div data-role="header"> <a href='#hjem’>Back</a> <h1>Side1</h1> </div> <div data-role="content”> <a href="#side1" data-role="button" data-transition="flip" >side 1</a> <a href="#side2" data-role="button" data-transition="flip">side 2</a> <div data-role="collapsible"> <h3>Se billederne</h3> <img src="c1.jpg"> <img src="c2.jpg"> <img src="c3.jpg"> <img src="c4.jpg"> <img src="c5.jpg"> <img src="c6.jpg"> </div> </div> </div>

  11. 3.8. jQuery Mobile navbar <div id="side1" data-role="page"> <div data-role="header" > <a href='#hjem' data-transition="flip" >Back</a> <h1>Side1</h1> </div> <div data-role="content" > <div data-role="navbar"> <ul> <li><a href="#side1">Side 1</a></li> <li><a href="#side2">Side 2</a></li> </ul> </div> <div data-role="collapsible"> <h3>Se billederne</h3> <img src="c1.jpg"> <img src="c2.jpg"> <img src="c3.jpg"> <img src="c4.jpg"> <img src="c5.jpg"> <img src="c6.jpg"> </div> </div> </div> (også på side 2 )

  12. 3.9. jQuery Mobile data-theme data-theme a – e Kan sættes på som attribut til enkeltdele på undersiden, så man får en blanding <div id="hjem" data-role="page" data-theme="e" > <div data-role="header" > <h1>Forside</h1> </div> <div data-role="content" > <a href="#side1" data-role="button" data-transition="flip">side 1</a> <a href="#side2" data-role="button" data-transition="flip">side 2</a> <imgsrc="c1.jpg"> </div> </div> Man kanbygge sit eget data-theme: http://jquerymobile.com/themeroller/

  13. 3.10 En url-adresse, todestinationer Script til at læggepåmobil-sitet. Hvis en desktop kørerscriptet, omdirigeres til en andenadresse, desktop.html <script> var mobile= (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); if(!mobile){document.location="desktop.html";} </script> Scriptetskalsættesindi head-delenafmobilsitet.

  14. 3.11 @mediaResponsive design I style sheetet, kan man skriveregler, som kun gælderbestemteenhedervha Eksempel: @media screen and (max-width: 800px) { #wrapper { width: 90%; min-width: 0; } } Adaptivt design: énwebside men forskellige style-regler for forskelligeskærme.

More Related