Organizing data with widgets

  • 1
  • Question
  • Updated 9 years ago
  • Answered
At the moment, this is how I am organizing my radio shows. Is there a better way of doing this?

It would be great if there is a way to duplicate widgets so that you don't have to redefine the wheel so to speak. :)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • curious

Posted 9 years ago

  • 1
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey Randy,

Please don't take offence, but that way looks really boring.
It needs some life to entice your viewers (or listeners) to delve deeper.

Here's how I would tackle it (Whoo hoo, you gonna love this one)

Use a calender with mouseovers. Here's an example of what I have in mind.
This is just an idea... You have to do some lateral thinking here with me.
Take this calender for example.



Replace the bird pictures with some nice sexy pictures of me.. ok you can have a
few ;-) Circle some dates in red and have mouseover pop ups with a text description or picture/text tooltips. The calender will be one large image map with links on certain dates.

Don't worry, it's easy stuff. I'll give you a hand with it.
Just an idea. Use it or don't. No offence if you don't like it.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I love new ideas!!! No offence at all but would this mean that I have to create a calender for every year from 1988 to the present? I know that what I currently have is kinda boring but I can't think of any other way. I thought of using tables as well but I think it would be a real pain to maintain. I'm looking for something esy and flexible.

I'm still interested in your calendat thingy though :)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey, thats only 21 or 22 Calenders ;-)

I'm sure I've seen a calender app in the MS Office suite somewhere. Can't remenber where now. You don't really need the pictures above each month. Maybe just one per year or none if you prefer.

You could have one calender with left right arrows below it to navigate from one year to the next. Everything will happen on one page. How much maintenance would there
have to be once it's all set up?

Have a look at this page of mine to see a custom made image map (literally a map) in action. Use your imagination now... The map is your calender and all the big green dots are your circled dates. http://travelsa.cc/map-wc.php

Sold yet ?
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
This is all done in Yola? I'm getting there. Sounds very interesting Boomer! Have you ever watched the show Mad Men? I feel like a client being sold on an ad campaign :).

I'd love to try this calendar idea out and see what happens. Can you give me a hand with this?

I could put pics of jazz musicians for every month.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Of course I can give you a hand :-) I love trying new stuff. Thats how I learn as well.
To start off, I'll set up a dummy page of what I have in mind and we can take it from there. If you dont like it you can back out at any stage. I really won't take offence.
We all have different tastes and ideas of what we want. I'll put something together tomorrow - it's too late here to start now (also gives me some time to think about it).

Mad Men - never seen the show, I don't watch much TV anymore. I like the idea of an artist per month. Is that how your shows work ? Do you highlight an artist per show or per month? I must confess, I've never listened to any.

Anyway, you wanted to learn HTML and CSS, so what better way than with a practical example. The B-Randy project... I like it :-)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Sounds exciting. I have HTML behind my current Radio Shows page. My weekly shows are all spontaneous in the true spirit of Jazz :)

I like the calendar idea as long as it is easy for users to figure out. I was thinking of maybe putting a pull down menu of the years so that users can quickly go to a particular year. Just a thought. I'll wait to see what you come up with.

Thanks for the help!! Are you in Europe?
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
If this calendar option works out, I might use it for my playlists page as well.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I'm in South Africa - birthplace of Yola :-)
Here is another one of my sites. It's where I live. Close to Monique BTW.
http://helderberg.cc/

While you are on the page, have a look at the Horoscope drop down and how each star sign opens up in the same frame without leaving the page. Is this the kind of idea you have in mind? Each frame could easily be turned into a (calender) image map with the hover over tool tips you saw ealier on the other site.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I really like that Horoscope effect! Simple, fast and visually appealing to the user. That's what I am after.

So all of your sites are done with Yola?

I used to use Rapidweaver for the Mac. It's a really nice app. Sort of a poor man's Dreamweaver. I find I am getting further quicker with Yola. So far I really love it!!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Another issue I would love your opinion on has to do with my home page. I was wondering if there is a way when you click on a picture, text could be displayed below. Here is my old web site. You can see on the home page this effect.

http://sd.mcran.com
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Boomer! I will wait to hear back from you to see what you come up with!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Wow Randy, I didn't realise what a mammoth task this is going to be.

The code part is the easy bit. The calendars and the gathering of all the images is going to be the time consuming part for you. Not trying to scare you off - I think it will look great if you go this route. I'll take my hat off to you if you do decide to do it.

I'll be here all the way to help out, but my job is the easy part.
I've only done 3 years. 2007 is blank, 2008 has got just the normal "title" text and 2009 has got tool tips. If you decide to go the tool tip route, I would stick to just one per month else you will have to collect 52 images per year :-(

Here is what I have done so far (6 hours later)
http://hindsite.synthasite.com/page-r...
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Wow, thanks Boomer!!

There are only four maybe five shows a month. I already have some images if I decide to use them. I'm almost wondering if the same layout but with a table or somehow a modified calendar would be better because there are only four or five dats a month that would have shows.

When I was using Rapidweaver, I went nuts trying different ways of presenting the data. I learned quite a bit from that. What I do like is the drop down menu wit the years that I would gather is very easy to modify?

I love the pic of Neil, the man!!!

What does the code look like that allows you to do all this?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
The code to do this is pretty simple once you analyse it. The way it works is by using iframes. Before I continue I'm going to apologise for my explanation of how the code works to all the coding guru's out there. This is just my way of explaining how it works and I'm sorry if I use the wrong terminology.

What we have here is basically 4 pages. A "container" page and 3 other pages (2007, 2008 and 2009). Each page (year) is loaded into the frame when you select it from the drop down. You will have to create a new site in your account and have one page per calendar year. There may be an easier way (there always is) but this, for me, is the easiest way to edit them afterwards.

Each year (page) is an image map with the coordinates mapped for your shows.
Each coord (that you decide on) will pop up a tool tip and display an image or text that you have told it to display. Setting up the infrastructure to do this is quite simple.

Creating the calendars and mapping them is the tedious part, but once done, I think the effect is worth it. Each calendar has to be exactly the same size. One pixel out and it will be noticeable. The easiest calendar to use, that I found in my brief search, was this one: http://www.vertex42.com/calendars/ I know the blue colour may not match your site, but it was the easiest one to demo what I wanted to do.

Creating the calendar's is your job Randy, and if you want to make it simpler, by all means... I think it will be better as well. Just remember, they all need to be exactly the same size. The code to do all of this is split over the pages, so I can't just post it here in one shot. It's slightly more involved than that but like I said, not difficult. I will go through each step with you, one at a time. Terrified yet? Don't be.

Give me the go ahead and I post the first step.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Sounds good Boomer. Maybe you could make a screencast explaining all this, but as you said, I don't think it is all that diffficult. I just want something that is simple to setup/ maintain and that is scalable (if that is the correct word).
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I was just thinking that maybe I could just use what I have now (My Radio Shows page) and incorporate the drop down menu with the list of years so it looks more visually appealing Just a thought.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Just saw this... It's up to you Randy. It can also be done this way - with a list.
Let me know which way. Ok, now I'm off to bed. Cheers!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Cool... let's start. The first thing we need is calendars... lots!
Remember, all the same size ;-) You need to create a new site using the Clean Slate template (this is an important part). Call it Randy calendar or something (sounds like something Pirelli would call their site) Just kidding about the last part... call it anything you like. I think I'm about 9 hours ahead of you, so I'll check out how far you are tomorow. It's tomorow here already ;-) Good night!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I think the list may be less work than the calendar? If so, how would I go about doing this?

I will create a new site soon using the Clean Slate template as you suggest.

We had a major snow storm today. Have t do some serious shoveling of the white stuff :) Do you ever get snow in South Africa?
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I just thought of something else. If we do go with the list idea instead of a calendar, maybe there is a way I can put my playlists, Radio Shows and both Archive pages all on one page, each with their own box and pull down menu. Sound feasible? It would surely simplify my site to only two or three pages.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Wow guys.. I'm interested to see how this all pans out!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I blame it all on Yola:) Seems like one gigantic soap opera but someone has to do it.:)

We'll see where this latest adventure takes us. At least we will both learn something that hopefully we can share with the Yola community.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey Randy,

I've done two more examples for you to check out.
Hover over the link icons at the bottom of the two new frames.
http://hindsite.synthasite.com/page-r...
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
OMG Boomer, those two examples are awesome. I could use one of them for my interviews and the other for my Radio shows. Actually I think I can use this for all of my pages including my Playlists, Bennett Archives, and In Transition Archives, all on one page.

Sorry, I have to pinch myself to see if this is really happening. You have made my day!! I see all kinds of possibilities now. Shat do you think? Is it easier using the list method instead of the calendar way? We can tweak a few things like maybe CSS to make it look even better but what you have done with these two examples is simple, intuitive to the user and functional. I really want to try this out.

Thanks again Boomer!!!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Thought you may like this :-) I also see loads of possibilities going this route.
Each frame is like a mini webpage. It's nice the way the radio shows play with the Snap Shot tool straight away. No more downloading those huge mp3 files of yours ;-) There is a snag though. The Snap Shot get cropped by the frame if the link is to high up or to far over to the right. I'm not sure how to get around this...

I need to pop out for 30min. Be back soon.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Randy,
While I'm busy writing up some instructions, maybe you can set up a new site so long using the Clean Slate template and replacing the banner with a plain white image. Publish the site so that the URL is "live" After that go to http://www.snap.com/ and sign up an account. (It's FREE)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
This may be of interest to you Randy.
You could now possibly embed your ugly mug in your mp3 files ;-)
Embedding Album Art in MP3 Files
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Boomer,

Here is the test site as you requested. Is this OK?

http://wreaths123.yolasite.com/

I now have an account with snap.com
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
The image does not look white. Ok... go here and right click next to March (next to the blue header) http://hindsite.synthasite.com/frame-... Select "view background image". You won't see the image because it is white, but it is there in the top left corner. Right click in the top left corner and select "save image as". Save it to your desktop and upload it to your banner on the new site.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Oops... What you also need to do is remove the pages from the menu :)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I thought I had a white image but it looks light grey. Don't know why because when I recreated it it said white.

OK. The header is now white.