My slideshow application for a Web 2.0 Office

A recent post on Techcrunch about Preezo, which looks GREAT by the way, and all the talk lately of Zoho/Google Office had me reminiscing of a slideshow tool I was working on very recently.

The slideshow project was born from a web based courseware development tool I’m developing for work. It started as a concept of what a version 2 would be like; in the current tool, you have to select predefined page layouts, but I want users to place content elements where ever they wished.

Once I had a great div positioning, scaling, content defining system, I thought it would be great as a way to set up slide shows… and from there, in any spare time I had, I developed my prototype slideshow builder.

Slideshows Directory
This is a directory of all your current slideshows. The link will take you to the editor for that slideshow. In the future, there would be controls to allow live sharing of the show (collaborative viewing) and ways to embed the slideshow in a blog or social network.
1.jpg

bullet_1 Icon to open control panel for adding a new slideshow.
 

Slideshows Directory w/Control Panel to add a new show
This is the directory page again, showing the “add show” control panel.
2.jpg

bullet_1 Close/Cancel adding a new slideshow.
bullet_2 Save Slideshow.
 

The Slideshow work area
The work area for a slide show. It consists of 3 parts: A list of slides in this show, general comments for this show, and the slide work area.
3.jpg

bullet_1 Icon to add slides.
bullet_2 Icon to add comments.
bullet_3 Icon to add container elements to a slide and the current slide selected name.
bullet_4 Icons to play slide show, debug (for testing) and to go back to Presentation Directory.
 

Adding a slide to a show
Clicking the green (+) in the slides area will open the New Slide Control Panel.
4.jpg

bullet_1 New Slide dialog.
bullet_2 Slide title.
bullet_3 Slide type: Normal Slide (Text/Images/Etc.) or RSS Slide (talked about below).
bullet_4 Save Slide Icon.
 

Adding a comment to a slide show
Clicking the green (+) in the comment area will open a New Comment Control Panel.
5.jpg

bullet_1 Slides that have been added.
bullet_2 Controls for the slides include: Delete, Sorting and Preferences for each Slide.
bullet_3 A comment window for collaborating on slideshow creation.
 

A successfully added comment
Displays a comment added to the current slide, or in reference to the entire slideshow if no slide is currently selected. The Slides and Comments area constantly looks for new data and refreshes as needed to make sure two or more people working on a show always see the latest work from their collaborators.
6.jpg

bullet_1 Comment added at Presentation root level. Comments appear only where they are taken. A comment taken on slide “Introduction” will not appear on slide “Summary”.
 

The work area for a selected slide
Now that a slide is selected, the slide work area becomes active so we can begin to build our slide.
7.jpg

bullet_1 Selected slides title appears over the work area.
bullet_2 New Icons appear for help creating the slideshow.
 

Preferences Control Panel for a slide
Each slide has a preferences control panel that you can use to define that slide (or set as a global for all slides)
8.jpg

bullet_1 Slide Preferences have been click for the current slide.
bullet_2 Preference include: Time, Background and Duplicate Slide with room to add more functionality as needed.
 

Preferences Control Panel – Time Controls
Accessing the time controls for a slide in the slide control panel.
9.jpg

bullet_1 Time Preference selected.
bullet_2 Option for when to change slide: On click, or based on number of seconds.
bullet_3 Option to specify number of seconds to wait until the slide changes, if option selected.
bullet_4 Option to apply these settings to all slides.
 

Preferences Control Panel – Background Controls
Accessing the background (image/color) controls for a slide in the slide control panel.
10.jpg

bullet_1 Background Preference selected.
bullet_2 Option to use an HTML color code for background.
bullet_3 Option to specify an image hosted on the web as the background.
bullet_4 Option to apply these settings to all slides.
 

Adding a Container to a slide
The data on a slide is made up of various containers. For example, you may have a container for each bullet point, or for an image.
11.jpg

bullet_1 Adding a container to the slide.
bullet_2 Container Name.
bullet_3 Container Type: Text, Image, Flash, Video.
bullet_4 Background has been set to the image we linked to above.
 

A successfully added container
The container shows up onscreen after being added with controls to modify it.
12.jpg

bullet_1 Our container now appears.
bullet_2 Option to delete the container.
bullet_3 Options to edit content of container / drag it elsewhere on screen.
bullet_4 Option to scale container to desired size.
 

The container alignment grid
To help align items properly, there is a grid that can be displayed behind all containers.
13.jpg

bullet_1 We can turn on a grid to help us align our containers.
 

Editing content (text) of a container
A rich text editor is available for creating the perfect copy for the presentation.
14.jpg

bullet_1 Our container is aligned where we want it.
bullet_2 The Edit Container Content button.
bullet_3 The Edit Container Content Control Panel. This container is a text element, so it brings up the text editor.
 

A container with it’s content
15.jpg

bullet_1 Our text content is saved in the container.
 

Adding an image container
16.jpg

bullet_1 Adding another container with type set to Image.
bullet_2 The Edit Container Content button.
bullet_3 The Edit Container Content Control Panel. This container is an image element, so it brings up the image link area.
 

Successfully showing an image container
17.jpg

bullet_1 The image is now loaded into the container.
 

Scaling container media content
18.jpg

bullet_1 As the container scales, so does the image.
 

Container Control Panel
Kind of like Layers in Photoshop, each container on this slide is listed out here.
19.jpg

bullet_1 The container management (for this slide) button.
bullet_2 The container management window, displaying all containers and their settings.
bullet_3 Type.
bullet_4 Location (from top).
bullet_5 Location (from left).
bullet_6 Width.
bullet_7 Height.
8.jpg Edit Icon.
 

Editing containers from the Control Panel
Each container can be hidden, or its settings edited.
20.jpg

bullet_1 The image container was hidden.
bullet_2 The Text container is being edited so all settings become editable.
bullet_3 Save Icon.
 

Setting up an RSS based slide
A pretty unique feature, I think, is the ability to use RSS to populate slide content. With this, the presentation could be a live document that is always changing based on current, for instance, sales figures.
21.jpg

bullet_1 This page is an RSS generated page, as specified when created.
bullet_2 RSS Icon, grayed out because no feed has been selected for this page.
bullet_3 RSS Feed Control Panel.
bullet_4 URL of RSS feed.
bullet_5 Number of ITEMs from the RSS feed to display – effectively, how many times this slide will loop with different data from the feed.
bullet_6 Save button.
 

RSS nodes creating containers
Slide showing all nodes of and item element defined as containers. This examples used a feed from Digg.
22.jpg

bullet_1 Now that the Feed has been selected and saved, it is checked out and a container is created for each items node. Now you can arrange the feeds data as you wish.
 

Deleting a container
Example shows how a user would delete a container.
23.jpg

bullet_1 Nodes (or any container) that you don’t wish to use can be deleted. Confirmation is required.
bullet_2 The system highlighting the container you are about to delete so no mistakes are made.
 

RSS Node Containers positioned as needed
With the nodes aligned as wished, the next step would be to set font size, colors, etc for the elements. Unfortunately, that step is still on the to-do list. Also, until the slideshow is ran, placeholder data populates the container, it is also noted what node is related to which container.
24.jpg

bullet_1 Slide now as all feed elements desired arranged to the users liking.
bullet_2 The nodes are specified so the user knows what data from the feed is in what container.
 

Adding a comment with a pointer
To help with collaborative commenting, I thought it would be neat to allow a comment to point to an area onscreen that it was talking about.
25.jpg

bullet_1 A comment is added to this slide.
bullet_2 The comment pointer, a tool to help specify what the comment is about, is selected.
bullet_3 A drag-able, rotate-able arrow is displayed on screen to the person leaving the comment and point to the area of the slide he is talking about.
 

Seeing the Comment Pointer
When I am looking at a comment left by someone else, and I mouse over it, the pointer becomes visible so I have a better idea of what is being said in the comment.
27.jpg

bullet_1 When the mouse is over the comment, it highlights and;
bullet_2 The comment pointer appears.
 

The slideshow playing (first slide)
The first slide as seen when the slideshow is playing.
28.jpg

The slideshow playing (RSS slide)
The RSS (first item) slide as seen while slideshow is playing. Formatting needs to be applied to the data.
29.jpg

There is still a ton of work to be done on this. However, I am particularly happy about its progress so far. I really like the RSS feed integrating; I don’t believe anyone else has done that with a slideshow.

Anyone want to fund me finishing this?!? 🙂

Advertisements

10 comments

  1. Pretty element of content. I just stumbled upon your website and
    in accession capital to assert that I acquire in
    fact enjoyed account your weblog posts. Anyway
    I will be subscribing for your augment and even I fulfillment you
    get right of entry to constantly rapidly.

  2. I’m not sure exactly why but this site is loading very slow
    for me. Is anyone else having this problem or is it a issue on my end?
    I’ll check back later on and see if the problem
    still exists.

  3. Hi! I understand this is somewhat off-topic but I needed to ask.

    Does operating a well-established website such as yours require a massive amount
    work? I’m completely new to writing a blog but I do write in my journal
    every day. I’d like to start a blog so I can easily share my experience and views online.
    Please let me know if you have any ideas or tips for
    brand new aspiring blog owners. Appreciate it!

  4. Write more, thats all I have to say. Honestly, it seems
    as though you relied on the video to make your point. You obviously know what you’re
    talking about, why waste your intelligence on just posting videos to your weblog when you
    could be giving us something enlightening to read?


Comments are closed.