introduksjon til phonegap
DESCRIPTION
Workshop på UIBTRANSCRIPT
![Page 1: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/1.jpg)
Introduksjon til hybridapplikasjoner
![Page 2: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/2.jpg)
Hello. Kjartan Michalsen mail: [email protected] Mobil: 40454554 twit: @liksom
![Page 3: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/3.jpg)
![Page 4: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/4.jpg)
http://d7.no/uib =lenker + denne presentasjonen
![Page 5: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/5.jpg)
Hva interaksjonsdesigner?
![Page 6: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/6.jpg)
”When we use the concept of 'interactive media' exclusively in relation to computer-based media, there is the danger that we will interpret 'interaction' literally, equating it with physical interaction between a user and a media object (pressing a button, choosing a link, moving the body), at the expense of psychological interaction. The psychological processes of filling-in, hypothesis formation, recall, and identification, which are required for us to comprehend any text or image at all, are mistakenly identified with an objectively existing structure of interactive links" (Lev Manovich:57:2001)
![Page 7: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/7.jpg)
![Page 8: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/8.jpg)
Funksjoner
Begrensninger
Muligheter Tilbydelsene (Affordances)
• Fysiske begrensninger • Semantiske begrensninger • Logiske begrensninger • Kulturelle begrensninger
![Page 9: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/9.jpg)
![Page 10: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/10.jpg)
![Page 11: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/11.jpg)
Interaksjonsdesign og hybridapplikasjoner
![Page 12: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/12.jpg)
![Page 13: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/13.jpg)
![Page 14: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/14.jpg)
![Page 15: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/15.jpg)
Dyretestet Mobil applikasjon for å søke opp produkter og sjekke om disse er testet på dyr eller ikke.
![Page 16: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/16.jpg)
Peppes Pizza Digitalt effektiviseringsverkøy
![Page 17: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/17.jpg)
Telenor Expo Interactive museum showing the history of Telenor, the 6th biggest telco in the world, also using fluxBOX.
![Page 18: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/18.jpg)
HTML og CSS – Recap
![Page 19: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/19.jpg)
![Page 20: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/20.jpg)
Hyper Text Markup Language Ikke programmeringsspråk et markeringsspråk
![Page 21: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/21.jpg)
HTML + CSS + JAVASCRIPT = WEB WEB + PHONEGAP = APP
![Page 22: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/22.jpg)
HTML strukterer CSS formaterer
![Page 23: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/23.jpg)
Viktig å kunne grunnleggende om man vil jobbe med design på web og mobil.
![Page 24: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/24.jpg)
Forståelse for det som gir form og farge, gir deg som designer muligheter
![Page 25: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/25.jpg)
Egenskapene i nye media utnyttes best om man designer for mediet, i mediet
![Page 26: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/26.jpg)
Flatt design vil alltid være en abstraksjon. Responsivt design umulig uten å også vite om det som formgir i mediet
![Page 27: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/27.jpg)
Et uendelig lærret med flytende proposjoner. Det handler om designsystemer
![Page 28: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/28.jpg)
Å kunne HTML og CSS vil gi faktisk kontroll over resultatet og deg mer tid til å designe (i web-design).
![Page 29: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/29.jpg)
CSS = Cascading Style Sheet Arv og klasser gir effektivt design Rekkefølge gir deg kontroll og smarthet
![Page 30: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/30.jpg)
CSS grunnleggende prinsipper: Mer spesifikk overstyrer mindre spesifikk Siste overstyrer tidligere
![Page 31: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/31.jpg)
Nettleseren leser HTML-kodene til å tolke innholdet på siden.
![Page 32: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/32.jpg)
<html> <body> <h1>Dette er en overskrift</h1> <p>Dette er brødtekst.</p> </body> </html>
![Page 33: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/33.jpg)
Javascript - Recap
![Page 34: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/34.jpg)
Javascript. Scriptspråk. En oppskrift som får ting til å skje.
![Page 35: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/35.jpg)
Rammeverk Ferdige funksjoner som gjør det raskere å lage interaktivt innhold
![Page 36: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/36.jpg)
![Page 37: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/37.jpg)
![Page 38: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/38.jpg)
http://www.codecademy.com/tracks/javascript
![Page 39: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/39.jpg)
Hybridapplikasjoner
![Page 40: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/40.jpg)
Det er 1,2 milliarder pc’r I verden (inkl. Tablets) Det er 1,1 milliarder fasttelefoner Det er 1,0 milliarder biler registert I bruk Det er 1,6 milliarder tv’r Det er 1,7 milliarder kredittkortbrukere Det er 2,0 milliarder internettbrukere Det er 2,2 milliarder mennesker med bankkonto Det er 3,9 milliarder radioer I verden
Det er 5,2 milliarder aktive mobilabonnenter. [7] – Tomi T Ahonen, Author and consultant in mobile and media
![Page 41: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/41.jpg)
“There are more than 250 million active users currently accessing Facebook through their mobile devices.”
http://www.facebook.com/press/info.php?statistics
![Page 42: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/42.jpg)
applikasjoner for mobil
![Page 43: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/43.jpg)
Hybridapplikasjoner for mobil
![Page 44: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/44.jpg)
Hybridapplikasjoner for hvem?
![Page 45: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/45.jpg)
![Page 46: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/46.jpg)
Ikke for deg!
![Page 47: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/47.jpg)
Native-applikasjoner
![Page 48: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/48.jpg)
Native-applikasjoner Plattformspesifikke
![Page 49: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/49.jpg)
Native-applikasjoner Skrevet I programmeringsspråket spesifikt for plattformen
![Page 50: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/50.jpg)
Hybrid-applikasjoner
![Page 51: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/51.jpg)
Hybrid-applikasjoner Skrevet i HTML5/CSS3/Javascript
![Page 52: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/52.jpg)
Hybrid-applikasjoner Pakket sammen i hybridrammeverk
![Page 53: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/53.jpg)
Hybrid-applikasjoner Ikke plattformspesifikke
![Page 54: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/54.jpg)
Native- og hybrid-applikasjoner Benytter sensorer og funksjoner i plattformen
![Page 55: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/55.jpg)
Hybridapplikasjoner egner seg ikke for:"Kompleks grafisk behandling"Kommunikasjon med tilleggsutstyr
![Page 56: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/56.jpg)
Hybridapplikasjoner egner seg for:"Navigere informasjon"Informasjon basert på sensor(GPS, kamera, osv)
Vise bilder, video, kart, grafikk ++"
![Page 57: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/57.jpg)
Hybridapplikasjoner egner seg for:"Navigere informasjon"Informasjon basert på sensor(GPS, kamera, osv)
Vise bilder, video, kart, grafikk ++"Halvparten av applikasjonene idag*
*Guestimate Kjartan Michalsen
![Page 58: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/58.jpg)
Rammeverk
![Page 59: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/59.jpg)
Rammeverkene
![Page 60: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/60.jpg)
Rammeverkene = Magi = Bro mellom webteknologi og mobil-hardware / os
![Page 61: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/61.jpg)
Rammeverkene = Bro mellom webteknologi og mobil-hardware / os = Gir standardisert tilgang til sensorer og interaksjon
![Page 62: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/62.jpg)
Rammeverkene = Gir deg tilgang til funksjoner på telefonen gjennom javascript
CSS
![Page 63: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/63.jpg)
PhoneGap
![Page 64: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/64.jpg)
Brukeropplevelse I CSS3 og HTML5 Mer tid til design og brukeropplevelse
![Page 65: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/65.jpg)
Brukeropplevelse I CSS3 og HTML5 Enklere å lage rike brukergrensesnitt
![Page 66: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/66.jpg)
Brukeropplevelse I CSS3 og HTML5 = fornøyde brukere
![Page 67: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/67.jpg)
Phonegap Getting dirty
![Page 68: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/68.jpg)
Phonegap = Cordova Cordova = Open Source prosjektet Phonegap = Adobe sin versjon
![Page 69: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/69.jpg)
Phonegap Lokalt på maskinen
![Page 70: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/70.jpg)
![Page 71: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/71.jpg)
Phonegap Lokalt på maskinen
![Page 72: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/72.jpg)
Phonegap build + github
![Page 73: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/73.jpg)
http://windows.github.com/ http://mac.github.com/
![Page 74: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/74.jpg)
![Page 75: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/75.jpg)
![Page 76: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/76.jpg)
DIY workshop
![Page 77: Introduksjon til phonegap](https://reader035.vdocuments.site/reader035/viewer/2022081404/559494471a28aba33e8b472e/html5/thumbnails/77.jpg)
Takk for meg Mail: [email protected] Twt: @liksom