« Back to Tiny



Tiny Walkthrough.


Ok so here are some screenshots from the dev version of the site. Funnily enough - using one of the production modes like the slideshow would be a very useful way to share this project - but I'm not yet ready to share the live site.

I have uploaded larger screenshots to imgur - click on images below.


1. A production using the 'impress presentation' mode - explaining what the site it.

(click for larger image)


2. Part of the same 'slide' show. Explaining the site.

Also showing is the fork/love/rate/share .. option drop down which you see on every production. 

(click for larger image)


3. Getting stuck into creating content.

This is the screen showing someone bulk uploading images form their computer.

Cool stuff - it will grab, location and date from photo exif data if possible.  (click for larger image)


4. Adding stuff from your cloud - using the excellent filepicker.io 

Cool stuff - Box.net, Google Drive, Picassa, Flickr, Evernote, Web Cam, Internet Image Search, lots more.

(click for larger image)


5. Adding stuff from dropbox - using the dropbox chooser.

Slightly redundant because of the above.

(click for larger image)


6. Adding a Map to your 'snaps'.

All elements used in productions are called snaps - they can be images, maps, sound clips, text, documents, video, youtube , vimeo, google documents anything basically - not all implemented.  

Cool stuff  - 3 options - using html 5 gelocation api, using autocomplete from google maps api, drag and drop marker.

(click for larger image)


7. Then just select the ones you want to use for a production.

Either select an existing production or use the new production option - pick what type of production it is going to be. 

Cool stuff - someone looking at your production can switch from the default to another view.

(click for larger image)


8. Looking at a default view of the site aka pinterest with some recent productions showing.

Cool stuff - uses bootstrap and isotope for nice sorting, filtering and responsive resizeing. Uses infinite scroller to append new stuff as you scroll.

(click for larger image)


9. Another aspect of tiny is the ability to browse content from other 'social/news/blog/clouds' from within the site.

So far only reddit has been implemented. When you see something you like you can add it to your 'snaps'.  The idea here is similar to reddit or google plus. It uses rss to provide a social google reader experience.


10. Clicking on a photo takes us to a fullscreen popup and a slideshow viewer.

By hovering at the bottom of the image we can see options  to edit (fork / love /comment / rate etc.  

Cool stuff - Responsive full screen - no clutter untill you hover over the image.

(click for larger image)


11. Going into Edit photo mode. The idea of the site is that everything is there to be forked and revised.  

Cool stuff - not just a meme generator or instagram clone!

(click for larger image)


12. As well as a fullscreen gallery popup, some productions will open up as a production view like this timeline.  

You can navigate to the next production without coming out of the modal. The modal is responsive taking up as much screen as it can.


13. Flip-book view production.

Cool stuff - works well on ipad - good for text heavy productions - nice zoom in and out of full screen articles (think flipboard clone)

(click for larger image)


14. Map view production.   

Cool stuff - this map starts with the whole world and icon markers for gallery clusters - then zooms in and out.

(click for larger image)


15. Timeline view Production.

Each of the views allows for the embedding of 'any' rich media source.  

(click for larger image)


16. Slideshow view production.

Cool stuff - Uses the amazing impress plugin in this mode it is a simple 'powerpoint' slideshow. Can also have all sorts of 3D zooming, rotating and scanning. (Prezi clone: http://bartaz.github.com/impress.js/#/bored)

(click for larger image)



0 Attachments
Average (0 Votes)
The average rating is 0.0 stars out of 5.
No comments yet. Be the first.