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

Coding Critique is the place to post source code for peer review by other members of DevNetwork. Any kind of code can be posted. Code posted does not have to be limited to PHP. All members are invited to contribute constructive criticism with the goal of improving the code. Posted code should include some background information about it and what areas you specifically would like help with.

Popular code excerpts may be moved to "Code Snippets" by the moderators.

Moderator: General Moderators

User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

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

Post 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.
Last edited by Jonah Bron on Sun Dec 13, 2009 7:31 pm, edited 2 times in total.
MichaelR
Forum Contributor
Posts: 148
Joined: Sat Jan 03, 2009 3:27 pm

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

Post by MichaelR »

Looks good. I'd suggest adding the following to stop Chrome's annoying textbox highlighting:

Code: Select all

:focus {
  outline: none;
}
galfrid
Forum Newbie
Posts: 7
Joined: Sun Dec 13, 2009 11:52 am

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

Post 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 ^_^
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Post 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.
galfrid
Forum Newbie
Posts: 7
Joined: Sun Dec 13, 2009 11:52 am

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

Post 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.
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

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

Post 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
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Post by Jonah Bron »

I'll setup a sourceforge project as soon as someone comes up with a name for it.
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Post 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".
galfrid
Forum Newbie
Posts: 7
Joined: Sun Dec 13, 2009 11:52 am

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

Post 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!
Griven
Forum Contributor
Posts: 165
Joined: Sat May 09, 2009 8:23 pm

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

Post 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?
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Post by Jonah Bron »

Emails, IM, Twitter, blogs, RSS, Podcasts, project management, contacts, etc.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

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

Post 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.
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

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

Post 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
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

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

Post 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.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

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

Post 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?
Post Reply