The AutoMagical Link Shortener – Introduction – The Features Of the Site



The AutoMagical Link Shortener – Introduction – The Features Of the Site

0 0


moreinfo-talk

Paul's Talk from April 29 FES talk

On Github FESuffolk / moreinfo-talk

The AutoMagical Link Shortener

Presented By Paul Hutson / @PaulHutson

Introduction

What is MoreIn.Fo?

What I'm going to cover in this talk...:

  • The Features Of the Site
  • How it's made - the Software Architecture
  • Responsive Design - Keeping Mobiles in Mind
  • Analysing the Data - What sort of things are shared
  • The Future

The Features Of the Site

This one might be a suprise... it shortens URLs:

http://www.ThisIsAReallyLongURL.com/WithALoad/OfExtraRouteItems?and=a&query=string Which we can convert to a shorter link, i.e. http://morein.fo/123

Account System

Meaning you can save your URLs for access on any device.

Vanity URLs

Instead of http://morein.fo/123 we could have had http://morein.fo/Short

Analytics Tracking

Tracking the data about your clicks...

... you can also track individual clicks.

There is also an "aggregated" analytics view as well.

Easy Sharing...

Through Social Media

And through using the bookmarklet and Chrome/Firefox Plugin's

Grouped Data

You can automatically group links together to make using them easier... ... your data can also be tracked by #hashtag (which is used to identify the grouped data items).

Software Architecture

Database

Using SQL Server Tables Stored Procs

Web Services

Webservices Returning JSON

Front End

HTML

Link Copying: - Flash - Mobile Select / Copy

AJAX requests to the WebServices

"Less" generated style sheets

Interestingly the top image area is actually created using shapes on top of a square image.

Bookmarklet

Using a bookmark to store javascript...

When clicked it grabs the URL of the page... Then puts it into another URL... The new URL is loaded in a new window... On load MoreIn.Fo automatically shortens the link

Browser Plugins

Like the bookmarklet the plugins also shorten the links...

Plugins for both Firefox and Chrome.

Both are created using a mix of HTML and Javascript

Responsive Design

Using the @media tag to resize elements between several sizes on resize of a window...

We had to make it work on both a desktop...

... and on mobiles - without *any* feature loss.

Analysing the Data

Data is being collected ...

When a link is created

When a link is clicked

What Data?

Header Information from the client, i.e. browser, OS, etc...

Also the IP of the request, for locational data.

Locational Click Data

What is being shared?

Mostly...

Porn - yes, the internet is a filthy place...Interestingly, lots of them are created late at night...

Quick Links for friends to find things...

Marketing Data, so that companies can properly track clicks.

Loads of other things!

Future Enhancements

  • API Data Access
  • Searching and Sorting Information
  • Trend Data

Questions?

THE END

MoreIn.Fo