introduksjon til phonegap
DESCRIPTION
Workshop på UIBTRANSCRIPT
Introduksjon til hybridapplikasjoner
Hello. Kjartan Michalsen mail: [email protected] Mobil: 40454554 twit: @liksom
http://d7.no/uib =lenker + denne presentasjonen
Hva interaksjonsdesigner?
”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)
Funksjoner
Begrensninger
Muligheter Tilbydelsene (Affordances)
• Fysiske begrensninger • Semantiske begrensninger • Logiske begrensninger • Kulturelle begrensninger
Interaksjonsdesign og hybridapplikasjoner
Dyretestet Mobil applikasjon for å søke opp produkter og sjekke om disse er testet på dyr eller ikke.
Peppes Pizza Digitalt effektiviseringsverkøy
Telenor Expo Interactive museum showing the history of Telenor, the 6th biggest telco in the world, also using fluxBOX.
HTML og CSS – Recap
Hyper Text Markup Language Ikke programmeringsspråk et markeringsspråk
HTML + CSS + JAVASCRIPT = WEB WEB + PHONEGAP = APP
HTML strukterer CSS formaterer
Viktig å kunne grunnleggende om man vil jobbe med design på web og mobil.
Forståelse for det som gir form og farge, gir deg som designer muligheter
Egenskapene i nye media utnyttes best om man designer for mediet, i mediet
Flatt design vil alltid være en abstraksjon. Responsivt design umulig uten å også vite om det som formgir i mediet
Et uendelig lærret med flytende proposjoner. Det handler om designsystemer
Å kunne HTML og CSS vil gi faktisk kontroll over resultatet og deg mer tid til å designe (i web-design).
CSS = Cascading Style Sheet Arv og klasser gir effektivt design Rekkefølge gir deg kontroll og smarthet
CSS grunnleggende prinsipper: Mer spesifikk overstyrer mindre spesifikk Siste overstyrer tidligere
Nettleseren leser HTML-kodene til å tolke innholdet på siden.
<html> <body> <h1>Dette er en overskrift</h1> <p>Dette er brødtekst.</p> </body> </html>
Javascript - Recap
Javascript. Scriptspråk. En oppskrift som får ting til å skje.
Rammeverk Ferdige funksjoner som gjør det raskere å lage interaktivt innhold
http://www.codecademy.com/tracks/javascript
Hybridapplikasjoner
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
“There are more than 250 million active users currently accessing Facebook through their mobile devices.”
http://www.facebook.com/press/info.php?statistics
applikasjoner for mobil
Hybridapplikasjoner for mobil
Hybridapplikasjoner for hvem?
Ikke for deg!
Native-applikasjoner
Native-applikasjoner Plattformspesifikke
Native-applikasjoner Skrevet I programmeringsspråket spesifikt for plattformen
Hybrid-applikasjoner
Hybrid-applikasjoner Skrevet i HTML5/CSS3/Javascript
Hybrid-applikasjoner Pakket sammen i hybridrammeverk
Hybrid-applikasjoner Ikke plattformspesifikke
Native- og hybrid-applikasjoner Benytter sensorer og funksjoner i plattformen
Hybridapplikasjoner egner seg ikke for:"Kompleks grafisk behandling"Kommunikasjon med tilleggsutstyr
Hybridapplikasjoner egner seg for:"Navigere informasjon"Informasjon basert på sensor(GPS, kamera, osv)
Vise bilder, video, kart, grafikk ++"
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
Rammeverk
Rammeverkene
Rammeverkene = Magi = Bro mellom webteknologi og mobil-hardware / os
Rammeverkene = Bro mellom webteknologi og mobil-hardware / os = Gir standardisert tilgang til sensorer og interaksjon
Rammeverkene = Gir deg tilgang til funksjoner på telefonen gjennom javascript
CSS
PhoneGap
Brukeropplevelse I CSS3 og HTML5 Mer tid til design og brukeropplevelse
Brukeropplevelse I CSS3 og HTML5 Enklere å lage rike brukergrensesnitt
Brukeropplevelse I CSS3 og HTML5 = fornøyde brukere
Phonegap Getting dirty
Phonegap = Cordova Cordova = Open Source prosjektet Phonegap = Adobe sin versjon
Phonegap Lokalt på maskinen
Phonegap Lokalt på maskinen
Phonegap build + github
http://windows.github.com/ http://mac.github.com/
DIY workshop
Takk for meg Mail: [email protected] Twt: @liksom