Page 1 of 2

"Cyber Manager" (for lack of a better name)

Posted: Sat Dec 12, 2009 7:20 pm
by Jonah Bron
Hello, world!

Just though I'd share a project I'm working on with everyone. It's a centralized online "presence" manager. It takes care of email, feeds, blogs, everything. The reason I'm doing this, is partly for the challenge (advanced CSS and making an HTML5 web app), and partly because I don't use Google, but I really like their "look".

So, here it is. No dynamics, just the bare bones. No hacks (see viewtopic.php?f=68&t=108996). Just one stylesheet, and displays perfectly in Webkit and Gecko. This is the most advanced CSS I've ever done. Let me know what you think. It's a mix between Wave and Chromium.

http://nucleussystems.com/test_files/cybermanager/

P.S. Please ignore the lame name. It's all I can come up with for now. Got a better one?

Edit: Used CSS suggested by MichaelR, added logo, placed all code under GPL-3.

Re: "Cyber Manager" (for lack of a better name)

Posted: Sun Dec 13, 2009 6:13 am
by MichaelR
Looks good. I'd suggest adding the following to stop Chrome's annoying textbox highlighting:

Code: Select all

:focus {
  outline: none;
}

Re: "Cyber Manager" (for lack of a better name)

Posted: Sun Dec 13, 2009 12:47 pm
by galfrid
This looks great - very clear and usable interface, although when I click on a tab (any tab), it pretends it's doing something but doesn't go anywhere ("Main" tab stays highlighted)

I love this idea - I'm trying to do something similar but it's not coming out quite so clean or pretty. I hope this project progresses well for you ^_^

Posted: Sun Dec 13, 2009 12:58 pm
by Jonah Bron
Thanks, MichaelR. I hadn't figured out how to get rid of that, yet.

About the tabs, they don't do anything yet; they're just links. When this thing is finished, I may put all the code (including the PHP) under a open source license.

Re: "Cyber Manager" (for lack of a better name)

Posted: Sun Dec 13, 2009 1:14 pm
by galfrid
ahh, that explains why they don't seem to do anything. Still, looks great - if you're planning to develop under an Open Source license, I'd love to see your source code (I'm a css n00b, the tabs concept alone awes me), but I wouldn't be offended if you said no.

Re: "Cyber Manager" (for lack of a better name)

Posted: Sun Dec 13, 2009 2:21 pm
by Jonah Bron
Sure, but there is none, yet. What you see is all I've done so far. I'll setup a page for it. Keep you posted.

If you come up with a good name for this thing, let me know. :D

Posted: Sun Dec 13, 2009 5:06 pm
by Jonah Bron
I'll setup a sourceforge project as soon as someone comes up with a name for it.

Posted: Mon Dec 14, 2009 2:46 pm
by Jonah Bron
Okay, I've decided to make this part of a larger project, called Cloud Suite. It'll be several opensource web apps to run on a personal server. Here's the project:

https://sourceforge.net/projects/cloudsuite/

You can download what's done so far on "Data Manager".

Re: "Cyber Manager" (for lack of a better name)

Posted: Mon Dec 14, 2009 4:14 pm
by galfrid
I'm grabbing this as I type - really looking forward to toying around with it - just wanted to say thanks for making this available as open source ^_^

I also see it's part of a suite of web-apps, I'm thinking based on what I've already seen, I can hardly wait to see what other goodies are in there. Again, kudos and thanks!

Re: "Cyber Manager" (for lack of a better name)

Posted: Mon Dec 14, 2009 11:30 pm
by Griven
I've got my copy. You've got some nice looking HTML here.

Tab titles aside, what sorts of information do you see this application housing and keeping track of?

Posted: Tue Dec 15, 2009 10:03 am
by Jonah Bron
Emails, IM, Twitter, blogs, RSS, Podcasts, project management, contacts, etc.

Re: "Cyber Manager" (for lack of a better name)

Posted: Thu Dec 17, 2009 11:31 am
by kaszu
Bug: "/img/bottom-strip-....png" images are white at the top, but background is #F4F9FE
All top navigation images you could place into single sprite file to save few requests.

Re: "Cyber Manager" (for lack of a better name)

Posted: Thu Dec 17, 2009 12:18 pm
by Jonah Bron
I see. Didn't notice that, thanks. I'll look into sprite files.

Okay, this is wierd. I just switched over to my Linux OS, and Firefox (3.5.6) doesn't display it correctly anymore. Chromium works fine. Is there some sort of difference between Windows Firefox and Linux Firefox? If so, how do I change the stylesheet for Firefox?

Thanks.

Edit: By "change the stylesheet", I mean selective stylesheet loading

Re: "Cyber Manager" (for lack of a better name)

Posted: Thu Dec 17, 2009 5:39 pm
by social_experiment
Maybe you could use something like the code below for 'changing' the stylesheet. The second line of code is for I.E, I don't know of any that might be specific to Firefox.

Code: Select all

 
<html>
@import url("../style/test.css");
<!--[if IE]><link rel="stylesheet" type="text/css" href="../style/test.css"  media="screen" /><![endif]-->
</html>
 
Nice work on the css, it's refresing to see a developer/designer using % widths, floats and not the dreaded table. Kudos on that. Btw, tested it on vista ( not on FF 3.5.6 yet ) and it looks good.

Re: "Cyber Manager" (for lack of a better name)

Posted: Thu Dec 17, 2009 11:06 pm
by daedalus__
looks sort of funny to me. like there are "artifacts". looks exactly the same in opera 10.10 and firefox 3.5.5 on ubuntu. css is kind of hard to follow. think about structuring it differently and having a order for the tags.

i go from top to bottom of the page with child elements following parent elements and i usually place all the images in their own little space to make it easy to find them. i always order attributes like so:

Code: Select all

 
display: block;
 
position: relative;
z-index: 10;
top: 0;
left: 0;
 
width: 1em;
height: 1em;
 
margin: 0;
padding: 0;
border: 0;
 
overflow: auto;
 
text-align: right;
vertical-align: bottom;
 
font-family: tahoma;
font-size: 11pt;
font-weight: normal;
 
color: #0a1634;
background-color: #efefff;
 
images like this:

Code: Select all

 
/* Images ****************************************************/
 
header div#image { background: transparent url('../img/header.png') left bottom no-repeat; }
 
footer div.l { background: transparent url('../img/menu_bg_left.png') bottom no-repeat; }
footer nav    { background: transparent url('../img/menu_bg_grad.png') bottom repeat-x; }
footer div.r { background: transparent url('../img/menu_bg_right.png') bottom no-repeat; }
 
nav a.button div.l { background: transparent url('../img/menu_button_left.png'); }
nav a.button div.m { background: transparent url('../img/menu_button_grad.png'); }
nav a.button div.r { background: transparent url('../img/menu_button_right.png'); }
 
nav a.button:hover div.l { background: transparent url('../img/menu_button_left_hover.png'); }
nav a.button:hover div.m { background: transparent url('../img/menu_button_grad_hover.png'); }
nav a.button:hover div.r { background: transparent url('../img/menu_button_right_hover.png'); }
 
nav a.button:hover div.l { background: transparent url('../img/menu_button_left_hover.png'); }
nav a.button:hover div.m { background: transparent url('../img/menu_button_grad_hover.png'); }
nav a.button:hover div.r { background: transparent url('../img/menu_button_right_hover.png'); }
 
div.audio div.l { background: transparent url('../img/player_left.png') no-repeat; }
div.audio div.t { background: transparent url('../img/player_grad.png') repeat-x; }
div.audio div.f { background: transparent url('../img/player_frame.png') no-repeat; }
 
div.audio div.t div#track div.l { background: transparent url('../img/player_track_left.png') no-repeat; }
div.audio div.t div#track div.m { background: transparent url('../img/player_track_grad.png') repeat-x; }
div.audio div.t div#track div.r { background: transparent url('../img/player_track_right.png') no-repeat; }
 
div.audio div.t a div#last { background: transparent url('../img/player_seek_last.png') no-repeat; }
div.audio div.t a div#next { background: transparent url('../img/player_seek_next.png') no-repeat; }
div.audio div.f a div#play { background: transparent url('../img/player_play_button.png') no-repeat; }
div.audio div.f a div#pause { background: transparent url('../img/player_pause_button.png') no-repeat; }
 
div.audio div.t a:hover div#last { background: transparent url('../img/player_seek_last_hover.png') no-repeat; }
div.audio div.t a:hover div#next { background: transparent url('../img/player_seek_next_hover.png') no-repeat; }
div.audio div.f a:hover div#play { background: transparent url('../img/player_play_button_hover.png') no-repeat; }
div.audio div.f a:hover div#pause { background: transparent url('../img/player_pause_button_hover.png') no-repeat; }
 
article div#top div.left { background: transparent url('../img/article_bg_t_l.png') no-repeat; }
article div#top div.middle { background: transparent url('../img/article_bg_t_m.png') repeat-x; }
article div#top div.right { background: transparent url('../img/article_bg_t_r.png') no-repeat; }
article div#middle div.left { background: transparent url('../img/article_bg_m_l.png') repeat-y; }
article div#middle div.middle { background: transparent url('../img/article_bg_m_m.png'); }
article div#middle div.right { background: transparent url('../img/article_bg_m_r.png') repeat-y; }
article div#bottom div.left { background: transparent url('../img/article_bg_b_l.png') no-repeat; }
article div#bottom div.middle { background: transparent url('../img/article_bg_b_m.png') repeat-x; }
article div#bottom div.right { background: transparent url('../img/article_bg_b_r.png') no-repeat; }
 
and then its not really all that important anymore with all the bandwidth going around but you can structure the css of slow-loading sites to allow the layout to come together faster while elements are still loading. i remember having dial up and always hating watching website bounce around like flubber before they finished loading.

oh and by the way you are using the html5 doctype but none of the new elements?