ict.ken.be

Notes on Creating Web and App Prototypes with InVision by Jay Boucher

https://app.pluralsight.com/library/courses/web-app-prototypes-invision-2014
https://projects.invisionapp.com/d/main#/projects

Features

• Screen Status (In Progress, Needs Review, Approved)
• Click and hold to highlight the hotspots
• Create templates and apply them to multiple pages
• Setting fixed header point
• Maintain scroll position after click
• Global dropdown menu with slide effects
• Updating and synchronising files (manual or dropbox)
• Version history using time stamp
• Sharing and commenting
• Download and put on your own web server
• Real-time collaboration and feedback using liveshare
• Save snapshots of chat drawings
• Build from Photoshop file visible layer groups (+, *, &, .png)
• Build from Sketch (-)

by Yasser Shohoud

http://facebook.com/shohoudy

http://developers.facebook.com/socialdesign/

• Community: people we know and trust
• Conversations: help people get in contact
• Identity: how each user wants to be seen, express themselves

Social graph and social channels
Graph API & FQL, Authentication & Permissions, Dialogs, Social Plugins
Applications: Pages, Page Tabs, Canvas, Web Sites, Mobile, Desktop & Devices

The social graph

Edges: play, like, friends, read, checkin, connect, use

Pages

• Presence of your brand
• Apps can be surfaced as page tabs
• Website presence, Canvas app experience, Page tab experience

Social Plugins

• like button 
• activity feed
• comments
• recommendations
• like box
• registration
• facepile
• live stream
• login button 
• send button

Dialogs

• feed dialog: post to timeline or friends timeline
• send dialog
• request dialog

Meta Data

• You need to put og meta properties in the head of your html. 
• Facebook will scrape your page and guess the properties otherwise.
• http://developers.facebook.com/tools/debug

Add javascript SDK to your page

• When using the feed dialog, you do not need to request permissions.
• So if possible always use this instead of the api.

Graph API

Authentication
https://developers.facebook.com/docs/authentication

Access objects using their ID as the first path component /object_id

?ids=cocacola,pepsi
?ids=http://www.imdb.com/title/tt0117500
/me
/me?metadata=1

Access a connection by specifying it as the second path component
/notes is a collection of note objects

Limiting results and paging

?fields=id,name,location
?limit=3
?offset=100
?offset=100&limit=50
?since=1320105600&until=1320192000

Creating objects
POST to /me/events with event parameters

https://developers.facebook.com/tools/explorer

Batching API Calls
https://developers.facebook.com/docs/reference/api/batch/

Real-Time Updates

• Get pings from Facebook when specific data changes
• You get just the changed fields, not the changes
• Every 5 seconds/1000 changes
• You set up an endpoint to receive pings
• You call /app_id/subscriptions to create/update/delete subscriptions
• https://developers.facebook.com/docs/reference/api/realtime/

Facebook Query Language (FQL)

• Table abstraction on top of social graph
• SQL-style query language (SELECT only)
• Only specific columns
• No JOIN but can use sub queries
• Execute using Graph API fql object /fql?q=...
• https://developers.facebook.com/docs/reference/fql/

/fql?q=SELECT name FROM user WHERE uid=574937872

/fql?q=SELECT uid,name,pic_square FROM user WHERE uid = me()
OR uid IN (SELECT uid2 FROM friend WHERE uid1 = me())

/fql?q={"query1":"SELECT uid,rsvp_status FROM event_member WHERE 
eid=12345678","query2":"SELECT name,url,pic FROM profile WHERE id IN
(SELECT uid FROM #query1)"}

Dates

• Returned in ISO-8601 (2011-11-17T18:00:16+0000)
• Can specify a date_format following php date function
• http://php.net/manual/en/function.date.php
• eg. date_format=U for Unix dates 1321552816
• eg. date_format=r for Thu, 17 Nov 2011 18:00:16+0000
• Default graph api timezone is UTC
• Default fql timezone is PST -> UTC-8

More

Solid Tests: https://solid.fbdublin.com
Forums: htttp://facebook.stackoverflow.com
Bugs: https://developers.facebook.com/bugs
Roadmap: https://developers.facebook.com/roadmap

by Jesse Stay

• Hangouts will give more humanity to your business

Why Google+?

• Social layer on top of all google products, not a social network.
• Google calls it their social spine/glue.
• Follow people on the stream that are related to your keywords.
• Your tagline is included in the search results of Google, so important for your keywords.
• Target towards people, not the brand ! (people, content, places)
• Google+ page (no touch policy) vs Google profile.

What to do?

• Focus on building your personal page first and then promote your page after this.
• Segment your audience, especially influencers. And target them with specific content.
• Use people to point to the brand (make a person represent the service) eg. Dell Computers
• Schedule Hangouts and broadcasts to create followers.

Page Analytics on your profile.

To know what kind of posts your people are interesting in. And at what time they read it.

Direct Connect and +1 Badges for your website, so you have +1 buttons in the search.
http://google.com/+/business/

Hangouts Videochats

• eg. Michael Dell, Scott Jarvie, DJ Kaskade
• Up to 10 people in one chat room.
• There is an api that allows you to hangout extentions.
• Crash other peoples hangouts, especially if you have lots of fans.

Google+ and Search

• Also use plus.google.com
• Search people and pages.
• Search Google+ Hangouts

Trending terms and search

• Real time, rich content 
• If you type into a trending, it will pop-up in this stream.
• People see their search bubble, so you need a way in. Circle lots of people.
• rel="author" tags to google+ profile will rank your article higher.
• Authority is greater then recency and other facters!
• Google "Search Plus Your World"
• Add plus1 button to your site.

Customize + Snippet

• Inserting rich data that Google+ will show on sharing
• schema.org
• You can put this in the body or in the head.

Adding an author

• <a href="your google link" rel="author">same name as profile</a>
• and add site to your profile

Utilize badges and +1 buttons

Google+ Hangouts API

Google+ Developer API (and limits)

plus.google.com Tools

• Tools that allow multiple social posts:
• hootsuite 
• hearsay social
• vitrue
• involver
• chrome extensions: reformatting interface, cross posting, ...

Books to read:

• How to win friends and influence people - Dale Breckenridge Carnegie
• Enchantment - Guy Kawasaki

Social Media: The Big Picture
AmberMac.com

• 2002 Friendster
• 2004 Facebook (1 billion)
• 2006 Twitter (100 million)

The big players

• FourSquare : location based from sharing to suggesting locations
• Pinterest : sharing photos (mainly female subscribers)
• Thumblr : (50milj) short bloggers
• LinkedIn
• Twitter
• Google+ : hangout with multi people video chat
• Facebook
• YouTube

Engagement 

• Friending
• Following
• Tweeting
• Retweeting
• Pinning
• Klout : a popular tool that measures a person's online influence (http://klout.com/how-it-works)

Authenticity

• As human and real as possible.
• eg. Blendtec (williteblend.com) ROI -> 500% increase in sales

Bravery

• Doing bold things to stand out in the crowd.
• eg. SitorSquat by charmin (market toilet paper brand by giving users an application that finds clean toilets)

Consistency

• Going out on a regular basis. Never leave long gaps.
• Map out on calandar and measure success.
• eg. OldSpice ROI -> 100milion views and 107% increase in sales

ROE : Return on engagement

Your Social Story

• eg. Dave Carroll -> 10% share drop, 180 milion dollar loss
• Pay attention to what people are saying about you in the social circles. 

• eg. Chipotle sustainable farms

• Brandtelling uses a series of brand stories to make your brand relevant to your target market or audience.
• These can be stories about the company, its products and innovations or its people. - Arthur Germain

• History section of website
• Add humor
• Add personal stuff

Facebook

Twitter

YouTube

LinkedIn

Pinterest

Google+

Digital Plan

• http://policytool.net
• Set guidelines for interaction
• Internal vs external guidelines
• Manage (not control) the conversation
• When removing link, put a pointer to social policy rules.

Creating Content

• Remember the story
• Include a call-to-action, always get people to do something
• Nurture your community, getting to know your people
• Study your stats
• Watch your competition, esp. their successes.

Top Trends