Accessing device hardware

Types

  • Camera
  • Accelerometer
  • Phone calls and text messages
  • Geolocation
  • Device motion
  • Vibration
  • Ambient light

Types

HTML/CSS3: getUserMedia

Trick for accessing the camera

Types

HTML/CSS3: getUserMedia

3 types of parameters:


constraints – This should be an object that specifies which media streams you would like to access. For example, to get both video and audio you would use: { video: true, audio: true }
successCallback – A function that will be called if the media stream is successfully loaded. The function will be passed a LocalMediaStream object.
errorCallback (optional) – A function that will be called if the media stream cannot be loaded.

 

Types

HTML/CSS3: getUserMedia

 

 

What about Safari?

 

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camera">

Demo with camera

Types

Javascript API's

  • Geolocation: supported in most major browsers
  • Device Orientation: IE11 plus all major browser
  • Media Capture: 
  • Vibration: Not supported in IE or Safari
  • Ambient Light: Only supported by firefox

Types

Flashlight Demo

FORMS WITH jQuery Mobile

From scratch or using Dreamweaver

About

  • Use Ajax: Allows for faster processing
  • Form elements are part of the theme
  • Certain form elements are unique to jQuery mobile including sliders and toggles
  • You can opt out of the jQuery UI style by adding the attribute data-role="none" to the form element
    • Form will not be styled, not be responsive and certain elements like toggles may not work correctly until you add styling to them.
  • Form elements must have unique ID's
  • Same HTML Form rules apply (must be wrapped in a form tag, have a label, use GET, POST for submission)
  • http://demos.jquerymobile.com/1.4.3/forms/

Prototyping with Invisionapp

Made with Slides.com