Cloud Everything !


1 Comment

Salesforce1 : Share/Upload photo directly to Chatter from mobile camera using Salesforce1 App


Extending the functionality of Chatter check-in, here is the way of attaching image directly from iOS device to Salesforce Chatter feeds using iphone/android camera or photo gallery. This functionality may be announced during Dreamforce 2014

Required:

1) Jquery

2) Bootstrap

Salesforce1 compatible Visualforce page:

 

<apex:page id="checkin" standardController="Account" extensions="CheckInController" showheader="false" doctype="html-5.0" standardStylesheets="false">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<apex:includeScript value="{!$Resource.JQuery1110}"/>
<apex:includeScript value="{!URLFOR($Resource.Bootstrap311, 'js/bootstrap.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.Bootstrap311, 'css/bootstrap.min.css')}"/>
<style>
.margin {margin-top:2px;margin-bottom:2px;}
input
</style>
	<apex:form id="form">
		<div class="container-fluid">
		    <div class="row">
		    <apex:outputpanel id="info" styleclass="bg-primary text-primary col-md-12 col-xs-12" layout="block">
				{!$CurrentPage.parameters.info}
			</apex:outputpanel>
			<apex:outputpanel id="error" styleclass="bg-info text-primary col-md-12 col-xs-12" layout="block">
				{!error}
			</apex:outputpanel>
			</div>
			<div class="row">
				<div class="input-group">
					<span class="input-group-addon"><span class="glyphicon glyphicon-pushpin"></span></span>
					<apex:inputTextArea value="{!text}" styleclass="form-control col-md-12" html-placeholder="Share..." rows="5"/>
				</div>
			</div>
			<div class="row margin">
			    <div>
			    	<span class="btn btn-primary margin col-md-6 col-xs-6" style="text-align:center;" onclick="$('.file1').click();">
			    	Add an Image
					</span>
				</div>
				<div>
				<!-- 	<apex:commandbutton rerender="error" onclick="" action="{!checkin}" value="Check-In" styleclass="btn btn-success margin col-md-6 col-xs-6" oncomplete="$('.loading').css({ 'display':'none'});"></apex:commandbutton>  -->
					<apex:commandbutton action="{!checkin}" value="Check-In" styleclass="btn btn-success margin col-md-6 col-xs-6"></apex:commandbutton>
				</div>
			</div>
			<div class="row margin">
			    <div>
					<button onclick="geoFindMe();" class="btn margin col-md-12 col-xs-12" type="button">Reset</button>
				</div>
			</div>
		</div>
		<apex:inputHidden html-class="geoloc" id="geoloc" value="{!geolocation}"/>
		<apex:inputFile title="Add an Image" styleclass="file1" style="opacity:0;display:none;width:100%;" accept="image/*;capture=camera" value="{!image}"/>
	</apex:form>
<apex:outputpanel id="info">
<div id="out" class="bg-success"></div>
</apex:outputpanel>
<script>

$(document).ready(function()
{
	 if ("geolocation" in navigator) {
  		console.log('Geolocation available');
  		geoFindMe();
	} else {
 		alert('Geolocation un-available');
	}
	$('.btn-success').click(function(){
	  if($('.loading') == undefined || $('.loading').length==0)
      $('<div class="loading container-fluid"><span style="position:absolute;display:block;left:45%;top:50%;color:white">Saving...</div>').prependTo(document.body); 
      $('.loading').css({ "position":"absolute",
                          "display":"block",
					      "left":"0%",
					      "top":"0",
					      "height":"100%",
					      "width":"100%",
					      "z-index":"1010",
					      "background-color":"rgba(0, 0, 0, 0.72)"} );
   	});
});
function geoFindMe() {
  var output = document.getElementById("out");
  $(".bg-info").html("");
  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = 37.769167;//position.coords.latitude;
    var longitude = -122.433137;//position.coords.longitude;
    $(".bg-info").html("");
    var img = '<img width="100%" class="img-rounded" src="https://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:A%7C' + latitude + ',' + longitude + '&center=' + latitude + ',' + longitude + '&zoom=16&size=720x720&sensor=false"/>';
	
	$('.geoloc').val(latitude+','+longitude);
    output.innerHTML=img;
    $(".bg-info").html("");
  };

  function error() {
    $(".bg-info").html("Unable to retrieve your location");
    $(".bg-success").html("");
  };

  $(".bg-info").html("Locating...");
  $(".bg-success").html("Locating...");
  
  var geo_options = {
  timeout           : 27000
  };

  navigator.geolocation.getCurrentPosition(success, error);
  //var wpid = navigator.geolocation.watchPosition(success, error, geo_options);
}

</script>
</apex:page>

Apex Controller:

 

public with sharing class CheckInController
{
	public String geolocation {get; set;}
	public String text {get; set;}
	public String error {get;set;}
	public boolean isUser {get;set;}
	public transient blob image {get;set;}
	
	public CheckInController(ApexPages.StandardController con)
	{
		// TO DO : In case of Standard pages
	}
	
	// Post to chatter with geolocation
	public pagereference checkIn()
	{
		// Check if geolocation found or not
		if(geolocation==null || geolocation.length()<8)
		{
			error = 'Unable to retreive location';
			ApexPages.currentPage().getParameters().put('info',error);
			return Apexpages.currentpage();
		}
		if(text == null || text.trim().length()==0)
		{
			error = 'Nothing to post';
			ApexPages.currentPage().getParameters().put('info',error);
			return Apexpages.currentpage();
		}
		try
		{
			// Post to chatter of current user
			FeedItem post = new FeedItem();
			post.ParentId = Userinfo.getUserId();
			post.Body = text;
			
			if(image!=null)
			{
				post.ContentData = image;
	         	post.ContentFileName = 'Location.jpg';
	         	post.Type = 'ContentPost';
	         	post.Body = post.Body + '\nLocation: http://maps.google.com/maps?q=' + geolocation;
			}
			else
			{
				post.Type = 'LinkPost';
				post.LinkUrl = 'http://maps.google.com/maps?q=' + geolocation;
			}
			
			insert post;
			image = null;
			post = null;
			text = '';
			geolocation = null;
			error = 'Posted Successfully !';
			ApexPages.currentPage().getParameters().put('info',error);
		}
		catch(Exception ex)
		{
			error = ex.getMessage();
		}
		return Apexpages.currentpage();
	}
}
Advertisements


1 Comment

Show Custom Visualforce page in Salesforce1. Setup publisher action to allow user to check-in using Salesforce1 app


Salesforce1 provides collaboration on the move ! With Salesforce1 app any important detail or feedback on any product can be provided using chatter. Chatter allows ability to ask question, respond to question or any other information/document which should be share with other users. But sharing of user location is not so easy and natively not supported in chatter.

But in Salesforce1 app there is a possibility why which user can check-in and share some detail using following custom “Check-In” app:

_20140323_223551

Salesforce1 compatible visualforce page:

<apex:page id="checkin" standardController="Account" extensions="CheckInController" showheader="false" doctype="html-5.0" standardStylesheets="false">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<apex:includeScript value="{!$Resource.JQuery1110}"/>
<apex:includeScript value="{!URLFOR($Resource.Bootstrap311, 'js/bootstrap.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.Bootstrap311, 'css/bootstrap.min.css')}"/>
<style>
.margin {margin-top:2px;margin-bottom:2px;}
</style>

<apex:form id="form">
  <div class="container-fluid">
    <div class="row">
      <apex:outputpanel id="error" styleclass="bg-info text-primary col-md-12 col-xs-12" layout="block">
        {!error}
      </apex:outputpanel>
    </div>
    <div class="row">
      <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-pushpin"></span></span>
        <apex:inputTextArea value="{!text}" styleclass="form-control col-md-12" html-placeholder="Share..." rows="5"/>
      </div>
    </div>

    <div class="row margin">
      <div>
        <button onclick="geoFindMe();" class="btn margin col-md-6 col-xs-6" type="button">Reset</button>
      </div>
      <div>
        <apex:commandbutton rerender="error" onclick="" action="{!checkin}" value="Check-In" styleclass="btn btn-success margin col-md-6 col-xs-6" oncomplete="$('.loading').css({ 'display':'none'});"></apex:commandbutton>
      </div>
    </div>
   </div>
   <apex:inputHidden html-class="geoloc" id="geoloc" value="{!geolocation}"/>
</apex:form>

<apex:outputpanel id="info">
  <div id="out" class="bg-success"></div>
</apex:outputpanel>

<script>

$(document).ready(function() {
  if ("geolocation" in navigator) {
    console.log('Geolocation available');
    geoFindMe();
  } else {
    alert('Geolocation un-available');
  }
  $('.btn-success').click(function(){
  if($('.loading').length==0)
    $('<div><span style="position:absolute;display:block;left:45%;top:50%;color:white">Saving...</div>').prependTo(document.body);
  $('.loading').css({ "position":"absolute",
                      "display":"block",
                      "left":"0%",
                      "top":"0",
                      "height":"100%",
                      "width":"100%",
                      "z-index":"1010",
                      "background-color":"rgba(0, 0, 0, 0.72)"} );
    });
 });

function geoFindMe() {
  var output = document.getElementById("out");

  $(".bg-info").html("");

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

function success(position) {
  var latitude  = position.coords.latitude;
  var longitude = position.coords.longitude;

  var img = '<img width="100%" src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:A%7C' + latitude + ',' + longitude + '&center=' + latitude + ',' + longitude + '&zoom=16&size=720x720&sensor=false"/>';

  $('.geoloc').val(latitude+','+longitude);
  output.innerHTML=img;
  $(".bg-info").html("");
};

 function error() {
   $(".bg-info").html("Unable to retrieve your location");
   $(".bg-success").html("");
 };

 $(".bg-info").html("Locating...");
 $(".bg-success").html("Locating...");

 navigator.geolocation.getCurrentPosition(success, error);
}
</script>
</apex:page>

Simple Apex Controller:

public with sharing class CheckInController
{
  // Geo location: longitude and latitude
  public String geolocation {get; set;}
  // Post text
  public String text {get; set;}
  // Error or Info
  public String error {get;set;}

  public CheckInController(ApexPages.StandardController con)
  {
     // TO DO : In case of Standard pages
  }

  // Post to chatter with geolocation
  public void checkIn()
  {
     // Check if geolocation found or not
     if(geolocation==null || geolocation.length()&lt;8)
     {
        error = 'Unable to retreive location';
        return;
     }

     if(text == null || text.trim().length()==0)
     {
        error = 'Nothing to post';
        return;
     }

     try
     {
        // Post to chatter of current user
        FeedItem post = new FeedItem();
        post.ParentId = Userinfo.getUserId();
        post.Body = text;
        post.Type = 'LinkPost';
        post.LinkUrl = 'http://maps.google.com/maps?q=' + geolocation;
        insert post;
        error = 'Posted Successfully !';
     }
     catch(Exception ex)
     {
        error = ex.getMessage();
     }
  }
}
Salesforce1 App

Salesforce1 App

_20140323_223624

In Chatter you will see:

Screen Shot 2014-03-23 at 11.28.54 pm


2 Comments >


Salesforce1 has been launched during Dreamforce ’13 and with this a new and very essential way to connect with customers has opened for all. This is the mobile device accessibility.  Salesforce has provided a complete customisation of Force.com platform to make itself compatible to mobile devices e.g; smartphones, tablets etc.

Now all the essentials features of Salesforce platform are available to mobile devices like accessing Salesforce’s object records, creating new record and various other native functionalities. But what about the custom functionality which are provided using custom Visualforce pages, inline visualforce pages? Answer to this question is Publisher actions and mobile cards. But it is rare that custom Visualforce page has compatibility to mobile device from UI/UX point of view.

Salesforce has not provided any CSS styles to make Salesforce1 look and feel. But here are some instructions and CSS style which can be helpful in providing Salesfroce1 like UI to Visualforce pages.

First thing to remember when creating visualforce page mobile devices is do not set width of the container in pixels. If width page is set in pixels it will be fixed and will look awkward on small screen devices and can overflow screen dimensions. For ex: A page having container width 960px will overflow on a device which has 480px resolution. Instead of providing width in pixels provide width in percentage %. Also all components inside the container must have width in percentage if there are any chances that component can overflow the screen. Components dimension must be provided by considering the smallest screen device.

Salesforce1 Custom Visualforce Page

Salesforce1 Custom Visualforce Page

On Visualforce pages Pageblock , PageblockSection, PageblockSectionItem frequently used. These components are good for non-mobile devices but on mobile they looks awkward and looks very small and uncomfortable. Following components must not be used on Salesforce1 compatible pages and Salesforce1 don’t recommend them to use:

<apex:pageBlock> 
<apex:pageBlockButtons> 
<apex:pageBlockSection> 
<apex:pageBlockSectionItem> 
<apex:pageBlockTable>

Following native apex tags can be used but may not support Salesforce1 look and feel.

<apex:input>
<apex:inputField>
<apex:inputText>
<apex:outputText>
<apex:outputLabel>

Now the Question arises that how we can make Salesforce components of same look and feel like Salesforce1. So here are some CSS styles to provide similar look:

For input text and textarea add the following css style:

.sf1input, .sf1textarea{
width:100%;
font-family: 'ProximaNovaSoft-Regular','Helvetica Neue;
font-size: 15px;
color: #3c3d3e;
padding: 7px 14px;
line-height: 25px;
border: 1px solid #cfd0d2;
border-radius: 5px;
background-color: #e8eaeb;
box-shadow: inset 0 2px 2px rgba(0,0,0,.07);
margin:2px 20px 2px 2px;
}

.sf1input:focus, .sf1textarea:focus {
border: 1px solid #bbc0c4;
background-color: #fff;
outline-style: none;
}

For SelectOption list following CSS style used:

.sf1select {
 -webkit-appearance: none;
 border: 1px solid #bbc0c4;
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImRvd25fMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJEb3duX3g0MF8yeC5wbmdfMV8iPg0KCTxnIGlkPSJkaXJlY3Rkb3duX2NvcHkiPg0KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiM5Njk4OTkiIGQ9Ik01NS4wNjYsMTcuODY2Yy0wLjUzMy0wLjkzNC0xLjQ2Ny0xLjUzMy0yLjUzMy0xLjZDNTIuMzk4LDE2LjE5OSw0Mi4zOTgsMTUuNiwzMiwxNS42DQoJCQkJYy0xMC4zOTksMC0yMC40LDAuNi0yMC41MzMsMC42NjdjLTEuMDY2LDAuMDY2LTIuMDY2LDAuNjY2LTIuNTMzLDEuNmMtMC41MzMsMC45MzQtMC41MzMsMi4wNjYsMCwzDQoJCQkJYzcuOTMzLDE0LjA2NiwyMC40LDI2LjI2NywyMC45MzMsMjYuNzMyYzEuMiwxLjA2NiwzLjA2NiwxLjA2Niw0LjI2NywwYzAuNTMzLTAuNDY3LDEzLTEyLjY2NiwyMC45MzMtMjYuNzMyDQoJCQkJQzU1LjYsMTkuOTMzLDU1LjYsMTguOCw1NS4wNjYsMTcuODY2eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=);
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImRvd25fMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJEb3duX3g0MF8yeC5wbmdfMV8iPg0KCTxnIGlkPSJkaXJlY3Rkb3duX2NvcHkiPg0KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiM5Njk4OTkiIGQ9Ik01NS4wNjYsMTcuODY2Yy0wLjUzMy0wLjkzNC0xLjQ2Ny0xLjUzMy0yLjUzMy0xLjZDNTIuMzk4LDE2LjE5OSw0Mi4zOTgsMTUuNiwzMiwxNS42DQoJCQkJYy0xMC4zOTksMC0yMC40LDAuNi0yMC41MzMsMC42NjdjLTEuMDY2LDAuMDY2LTIuMDY2LDAuNjY2LTIuNTMzLDEuNmMtMC41MzMsMC45MzQtMC41MzMsMi4wNjYsMCwzDQoJCQkJYzcuOTMzLDE0LjA2NiwyMC40LDI2LjI2NywyMC45MzMsMjYuNzMyYzEuMiwxLjA2NiwzLjA2NiwxLjA2Niw0LjI2NywwYzAuNTMzLTAuNDY3LDEzLTEyLjY2NiwyMC45MzMtMjYuNzMyDQoJCQkJQzU1LjYsMTkuOTMzLDU1LjYsMTguOCw1NS4wNjYsMTcuODY2eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=),-moz-linear-gradient(#ffffff,#f1f1f1);
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImRvd25fMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJEb3duX3g0MF8yeC5wbmdfMV8iPg0KCTxnIGlkPSJkaXJlY3Rkb3duX2NvcHkiPg0KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiM5Njk4OTkiIGQ9Ik01NS4wNjYsMTcuODY2Yy0wLjUzMy0wLjkzNC0xLjQ2Ny0xLjUzMy0yLjUzMy0xLjZDNTIuMzk4LDE2LjE5OSw0Mi4zOTgsMTUuNiwzMiwxNS42DQoJCQkJYy0xMC4zOTksMC0yMC40LDAuNi0yMC41MzMsMC42NjdjLTEuMDY2LDAuMDY2LTIuMDY2LDAuNjY2LTIuNTMzLDEuNmMtMC41MzMsMC45MzQtMC41MzMsMi4wNjYsMCwzDQoJCQkJYzcuOTMzLDE0LjA2NiwyMC40LDI2LjI2NywyMC45MzMsMjYuNzMyYzEuMiwxLjA2NiwzLjA2NiwxLjA2Niw0LjI2NywwYzAuNTMzLTAuNDY3LDEzLTEyLjY2NiwyMC45MzMtMjYuNzMyDQoJCQkJQzU1LjYsMTkuOTMzLDU1LjYsMTguOCw1NS4wNjYsMTcuODY2eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=),-webkit-linear-gradient(#ffffff,#f1f1f1);
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImRvd25fMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJEb3duX3g0MF8yeC5wbmdfMV8iPg0KCTxnIGlkPSJkaXJlY3Rkb3duX2NvcHkiPg0KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiM5Njk4OTkiIGQ9Ik01NS4wNjYsMTcuODY2Yy0wLjUzMy0wLjkzNC0xLjQ2Ny0xLjUzMy0yLjUzMy0xLjZDNTIuMzk4LDE2LjE5OSw0Mi4zOTgsMTUuNiwzMiwxNS42DQoJCQkJYy0xMC4zOTksMC0yMC40LDAuNi0yMC41MzMsMC42NjdjLTEuMDY2LDAuMDY2LTIuMDY2LDAuNjY2LTIuNTMzLDEuNmMtMC41MzMsMC45MzQtMC41MzMsMi4wNjYsMCwzDQoJCQkJYzcuOTMzLDE0LjA2NiwyMC40LDI2LjI2NywyMC45MzMsMjYuNzMyYzEuMiwxLjA2NiwzLjA2NiwxLjA2Niw0LjI2NywwYzAuNTMzLTAuNDY3LDEzLTEyLjY2NiwyMC45MzMtMjYuNzMyDQoJCQkJQzU1LjYsMTkuOTMzLDU1LjYsMTguOCw1NS4wNjYsMTcuODY2eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=),-ms-linear-gradient(#ffffff,#f1f1f1);
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImRvd25fMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJEb3duX3g0MF8yeC5wbmdfMV8iPg0KCTxnIGlkPSJkaXJlY3Rkb3duX2NvcHkiPg0KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiM5Njk4OTkiIGQ9Ik01NS4wNjYsMTcuODY2Yy0wLjUzMy0wLjkzNC0xLjQ2Ny0xLjUzMy0yLjUzMy0xLjZDNTIuMzk4LDE2LjE5OSw0Mi4zOTgsMTUuNiwzMiwxNS42DQoJCQkJYy0xMC4zOTksMC0yMC40LDAuNi0yMC41MzMsMC42NjdjLTEuMDY2LDAuMDY2LTIuMDY2LDAuNjY2LTIuNTMzLDEuNmMtMC41MzMsMC45MzQtMC41MzMsMi4wNjYsMCwzDQoJCQkJYzcuOTMzLDE0LjA2NiwyMC40LDI2LjI2NywyMC45MzMsMjYuNzMyYzEuMiwxLjA2NiwzLjA2NiwxLjA2Niw0LjI2NywwYzAuNTMzLTAuNDY3LDEzLTEyLjY2NiwyMC45MzMtMjYuNzMyDQoJCQkJQzU1LjYsMTkuOTMzLDU1LjYsMTguOCw1NS4wNjYsMTcuODY2eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=),linear-gradient(#ffffff,#f1f1f1);
 background-repeat: no-repeat;
 background-position: 95% 50%;
 background-size: 16px 16px,100% 100%;
 color: #3c3d3e;
 padding: 7px 14px;
 line-height: 25px;
 font-family: 'ProximaNovaSoft-Regular', 'Helvetica Neue';
 font-size: 15px;
 width: 100%;
 padding: 7px 14px;
 margin:2px 20px 2px 2px;
 border: 1px solid #cfd0d2;
 border-radius: 5px;
 }

For Salesforce1 like checkbox:

.sf1input[type="checkbox"] {
-webkit-appearance: none;
display: inline-block;
height: 22px;
margin: 0 6px 0 0;
border: 1px solid #c3c6c9;
padding: 0;
width: 22px;
vertical-align: middle;
background: white -webkit-linear-gradient(bottom,rgba(0,1,1,0.05) 0,rgba(255,255,255,0.05) 100%);
box-shadow: 0 1px 0 rgba(0,0,0,0.05),inset 0 0 1px 1px white;
}

.sf1input[type="checkbox"]:checked {
border: 1px solid #2c75a3;
background-color: #3b9fdd;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2);
-moz-box-shadow: 0 0 2px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2);
box-shadow: 0 0 2px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2);
background-image: -webkit-gradient(linear,50% 100%,50% 0,color-stop(0,#3b9fdd),color-stop(100%,#3b9fdd));
background-image: -webkit-linear-gradient(bottom,#3b9fdd 0,#3b9fdd 100%);
background-image: -moz-linear-gradient(bottom,#3b9fdd 0,#3b9fdd 100%);
background-image: -o-linear-gradient(bottom,#3b9fdd 0,#3b9fdd 100%);
background-image: linear-gradient(bottom,#3b9fdd 0,#3b9fdd 100%);
}

.sf1input[type="checkbox"]:checked::after {
display: block;
left: 3px;
top: 3px;
height: 6px;
width: 10px;
border-bottom: 4px solid white;
border-left: 4px solid white;
-webkit-transform: rotate(-45deg);
position: relative;
content: '';
}

Salesforce1 like label following css can be used:

.sf1label {
font-family: 'ProximaNovaSoft-Regular','Helvetica Neue';
font-size: 13px;
color: #696e71;
margin: 0;
padding-bottom: 8px;
display: block;
min-width: 100px;
}

UI Buttons. There are two types of buttons used by Salesforce1. White and Blue.
For White button which is SF1 use for CRUD operation like Edit, Delete, Clone etc. following css can be used:

.sf1button {
font-size: 16px;
color: #44596c;
text-shadow: none;
margin: 0;
padding: 4px 14px;
height: 35px;
font-size: 16px;
font-family: 'ProximaNovaSoft-Regular';
font-weight: normal;
border: 1px solid #bbc0c4;
border-radius: 5px;
background: -moz-linear-gradient(#ffffff,#f1f1f1);
background: -webkit-linear-gradient(#ffffff,#f1f1f1);
background: -ms-linear-gradient(#ffffff,#f1f1f1);
background: linear-gradient(#ffffff,#f1f1f1);
box-shadow: none;
text-align: center;
cursor: pointer;
box-sizing: border-box;
}

.sf1button:active {
background: #e9e9e9;
}
Blue button:
<pre>.sf1buttonSFBlue {
 font-size: 16px;
 color: #44596c;
 text-shadow: none;
 margin: 0;
 padding: 4px 14px;
 height: 35px;
 font-size: 16px;
 font-family: 'ProximaNovaSoft-Regular', 'Helvetica Neue';
 font-weight: normal;
 border: 1px solid #bbc0c4;
 border-radius: 5px;
 background: -moz-linear-gradient(#2a93d5,#107abb);
 background: -webkit-linear-gradient(#2a93d5,#107abb)
 background: -ms-linear-gradient(#2a93d5,#107abb);
 background: linear-gradient(#2a93d5,#107abb);
 box-shadow: none;
 text-align: center;
 cursor: pointer;
 box-sizing: border-box;
 color:white;
 }

Salesforce1 List View can be created with ordered-list and <li> tag. Suppose list is created as:

<ol>
      <apex:repeat value="{!oppList}" var="op">
         <li class="sf1List">
           <a>
                {!op.name}
            </a>
         </li>
         </apex:repeat>
</ol>

So following CSS style can be used to makes Salesforce1 like list:

Salesforce1 List View

Salesforce1 List View

.sf1List {
margin: 0;
display: list-item;
padding: 14px;
border-bottom: solid 1px #cfd4d9;
list-style: none;
font-size: 16px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: rgb(60, 61, 62);
}

.sf1List:first-child {
border-radius:4px 4px 0px 0px;
}

.sf1List:last-child {
border-radius:0px 0px 4px 4px;
border-bottom:none;
}

ol {
background-color:rgb(230, 230, 230);
list-style: none;
margin: 0;
padding: 0;
margin-top:5px;
border-radius:4px;
border:solid 1px #cfd4d9;
}

.sf1List a {
text-decoration: none;
color: rgb(60, 61, 62);
}

Using above css style we can make our Visualforce similar to Saleforce1. However there are some other things remain like Date field, Sections and layouts those are possible by Javascript only. They are in development and will be available soon. For now a basic solution has been provided.

Next question is how to get images/icons like Salesforce1 to use in Visualforce page. Salesforce UI/UX team has exposed this on Heroku http://sfdc-styleguide.herokuapp.com/ contains all icons used in Salesforce1 mobile app.