• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Bedre nettsider på i pad og iphone
 

Bedre nettsider på i pad og iphone

on

  • 1,249 views

Presentasjon holdt på meetup Framsia.

Presentasjon holdt på meetup Framsia.

Statistics

Views

Total Views
1,249
Views on SlideShare
1,249
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Presentasjonen kunne like gjerne hatt denne tittelen (nesten).
  • Bruk viewport for å utnytte skjermbredden best mulig.
  • Kilde: A pixel is not a pixel is not a pixel - http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
  • Har lest at ting som skal trykkes på i grensesnittet bør være minimum 80x80px og ha en avstand på minst 20px. Dette vil variere fra skjerm til skjerm og bør egentlig oppgis i millimeter.
  • http://articles.sitepoint.com/article/adapting-an-interface-for-touch-devices
  • Bruk type-attributtet på input-elementer for å gi brukeren det beste grensesnittet.
  • WP7: ”Pin to Start”
  • For Android to pick up the icon you need a precomposed iconIn 2.1-update1, on the Droid, and I presume other 2.* OS phones, when adding a bookmark to the homescreen, the homescreen only displays a custom icon if the link rel="apple-touch-icon" or apple-touch-icon-precomposed have a FULL url path. Full meaning domain and everything.
  • WP7:The keyword “device-width” is intended to set the width of the Viewport to the width of the device that is viewing the page. On Windows Phone 7, the device width is 480 pixels. However, you will notice that if you set the Viewport width to “device-width”, IE actually sets the width to 320 (and also pins it to 320 if you specify a width of less than 320).
  • http://diveintohtml5.org/offline.html
  • http://www.w3.org/standards/techs/mobileapp#w3c_all
  • PhoneGap er et (av flere) rammeverk som gjøre det mulig å lage native apps basert på HTML, CSS og JS. Gir tilgang til hardware devicer i de ulike enhentene. PhoneGap e opensource. Se http://www.phonegap.com/features for hvilkemulighetersomgjørestilgjengeligpå de ulikeplattformene.

Bedre nettsider på i pad og iphone Bedre nettsider på i pad og iphone Presentation Transcript

  • MeetupsFramsia
    av Andreas Rübner Johnsen den2. februar 2011
    Bedre nettsider på iPad og iPhone- og andre dingser
  • Bedre nettsider på Samsung Galaxy og SE Xperia- og andre dingser
  • 800
    800
    980 piksler
    800 piksler
  • Endre viewport
    <meta name = "viewport" content = "width = 800">
  • Standard bredde på viewport
    980 px*
    850 px
    800 px
    * Gjelder både iPhone 3 og iPhone 4
  • Trykkvennlig design
  • Detektere «touch»
    Sniffe User-Agentpå serveren
    Finne skjermstørrelsen med CSS
    Bruke Javascript:
    if(window.Touch) /* kun iPhone*/
    document.ontouchstart
  • Input-elementer
    <input type="text">
    <input type="number">
    <input type="tel">
    <input type="email">
    <input type="file">
  • Ikke bruk!Safari på mobil er ikke helt det samme som på desktop
    Flash
    Mouse-over
    Filopplasting og -nedlasting
    Nedlastbare fonter
  • Simulatorer
    iPhone 3/4 og iPad simulator
    installer iOS SDK 4 (kun for Mac)
    Android emulator
    installer Android SDK (for Windows, Mac, Linux)
    må først definere en Android VirtualDevice
    Opera Mobile emulator
    Windows, Mac, Linux
    Opera Mini Simulator
    http://www.opera.com/mobile/demo/
    Windows Phone 7 emulator
    installer Windows Phone Developer Tools
  • Web apps på en, to, tre, fire, fem!
  • 1. Home screen
  • 2. Legge til ikon
    <html>
    <head>
    <title>itDagene</title>
    <link rel="apple-touch-icon" href=”itdagene.png">


    iOS, Android, BB6,
  • 3. Optimal bredde
    <html>
    <head>
    <title>itDagene</title>
    <link rel="apple-touch-icon" href=”itdagene.png">
    <meta name="viewport" content="width=device-width">


    iOS, Android, webOS, Opera, WP7
  • 4. Slå av zoom
    <html>
    <head>
    <title>itDagene</title>
    <link rel="apple-touch-icon" href=”itdagene.png">
    <meta name="viewport" content="width=device-width, user-scalable = no">


    iOS, Android, webOS, WP7, Opera
  • 5. Skjule Safari
    <html>
    <head>
    <title>itDagene</title>
    <link rel="apple-touch-icon" href=”itdagene.png">
    <meta name="viewport" content="width=device-width, user-scalable = no">
    <meta name="apple-mobile-web-app-capable" content="yes">


  • 6. Offline web app
    <html manifest="itdageneapp.manifest">
    CACHE MANIFEST
    /itdagene.html
    /itdagene.css
    /itdagene.js
    /itdagene-logo.png
  • Offline Web Apps
    Offline Web Apps kan brukes på mobilen uten å være tilkoblet internett.
    Standardisert i HTML5.
    Støttes av Safari, Chrome og Opera, iPhone og Android.
    HTML5
    • ApplicationCaching
    • Client-side SQL
    • LocalStorage
    • Online API
  • GmailEksempel på offline web application
  • Web Widgets
    Web apps som kan
    kjøres uten nettleser.
    • Dashcode for Mac
    • W3C Widgets
  • Nye W3C spesifikasjoner
    Posisjon, orientation, kompassogadresse
    GeolocationAPI Specification
    SMS, MMS, epost
    The Messaging API
    Kontaktliste
    Contacts API
    Kameraoglydopptak
    HTML Media Capture
    Temperatur, batteri, båndbredde +++
    The System Information API
  • PhoneGap
  • HTML5/CSS3 demoer
    Demo av Deviceorientation API
    http://kurrik-slides.appspot.com/html5-techtalk/#slide30
    NB! Kun for Chrome påMacbook
    NB! Tar oftenoensekunderfør den starter
    HTML5 candance
    http://code.bocoup.com/audio-data-api/flash-vs-html5/
    NB! Kun Firefox 4 – WebGLmåslåspå (beskrevetpåsiden)
    Kombinasjon av:
    Webfonts
    SVG Filters
    <video>
    WebGL (3d canvas)
    Mozilla’sAudio Data API