#192 - The Socoder Design Challenge

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|38\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Wednesday Workshop -> #192 - The Socoder Design Challenge
Page : 1 2 Next Prev
Tue, 10 Mar 2009, 18:19
Jayenkai	#192 - The Socoder Design Challenge The Challenge Redesign Socoder Do whatever you want. If you want to use pen and paper, do that. If you want to recolour, do that. If you want to completely change, do that. Do whatever. If you want to render a website in 3D.. probably best not to do that... Socoder's source is ready for tweaking into whatever form you can come up with. Make Coder So Gets! -=-=- ''Load, Next List!''
Wed, 11 Mar 2009, 14:30
Phoenix	Lamest WW so far. Count me in! By no means final! No footer yet, for instance. It's also a design where I've taken the liberty of making small changes (removed the 'Your' bit from the navigation, stripped the failure only known as Campfire away). Couldn't fit the shoutbox in there without making the image larger, but I think we all know what it looks like anyway Love? Hate? Apathy? Shoot!
Wed, 11 Mar 2009, 15:19
Afr0	I like it. ... and lol @ 'Lamest WW so far.' -=-=- Afr0 Games Project Dollhouse on Github - Please fork!
Wed, 11 Mar 2009, 15:59
Jayenkai	I like it, too, but MAN that needs tweaked! Decent colourscheme, but 3 sidebars is going a wee bit overboard, and that won't scale down to small res's very nicely. (1280x1024 is top res for visitors, 17.50%, 1024x768 is 2nd, 17.09%.. Think of the little people!!) But it's nice.. I'll play with it. Need more.. -=-=- ''Load, Next List!''
Wed, 11 Mar 2009, 20:40
Scherererer	-=-=- YouTube Twitter Computer Science Series: Logic (pt1) (part 2) (part 3) 2's Complement Mathematics: Basic Differential Calculus
Thu, 12 Mar 2009, 02:06
Jayenkai	Not your own, you're disqualified. I haven't had a single theme idea submitted since July 2007.. (Apart from Phoenix's, up there..) Get to work.. -=-=- ''Load, Next List!''
Thu, 12 Mar 2009, 05:43
JL235	I think some of Phoenix's ideas should be added as a new theme, regardless of the changes. Like the background and alternate titles.
Thu, 12 Mar 2009, 05:49
Jayenkai	Yeah, and the new rightbar's probably going to happen. Not sure about squeezing things in, though.. shrugs More themes.. -=-=- ''Load, Next List!''
Thu, 12 Mar 2009, 12:49
Phoenix	How about asking spinal if he perhaps knows someone who could do a wonderful design, all for free, even though this hypothetical person usually gets paid? wink wink
Thu, 12 Mar 2009, 14:44
Scherererer	Haha, no, I was saying I vote we keep the design how it is! -=-=- YouTube Twitter Computer Science Series: Logic (pt1) (part 2) (part 3) 2's Complement Mathematics: Basic Differential Calculus
Thu, 12 Mar 2009, 15:52
Jayenkai	I'm not going to ask Helen to do it. She's a big pro at things, and she's good at it. To ask for a freebie would be unwarranted. It might be true that I'm a cheapskate, but I'm not that bad And, yes, the site does look nice. Especially the Grey+Green. We're throwing around ideas, here, and I want to see more. MORE!!! -=-=- ''Load, Next List!''
Thu, 12 Mar 2009, 16:01
Phoenix	It was a joke, hence the winks But I also want to see more from people around here! I might make another one if I get the time, which is unlikely.
Thu, 12 Mar 2009, 17:16
spinal	- I already suggested that she should come up with something for the challenge, but she said no Although she has said in the past that the front page looks far too cluttered. I can't agree or disagree with that, I have proven on many occasions that I do not possess a single cell of designer talent in my entire body. -=-=- Check out my excellent homepage!
Sun, 15 Mar 2009, 12:16
CodersRule	Needs work.
Sun, 15 Mar 2009, 12:36
Stealth	Concept for SoCoder Theme Rendering Engine The basic file structure looks like this: /mytheme/ /styles/ main.css ie7fix.css /images/ logo.jpg background.jpg /templates/ index.tpl viewtopic.tpl myprofile.tpl ..etc.. /inc/ header.tpl footer.tpl --v Each page of the website is linked to a template file name. For instance, the home page is linked to index.tpl. Here is a sample template file: index.tpl <html> <head> <title>{SITE_TITLE}</title> </head> <body> <h1>{WELCOME}</h1> <p> {WELCOME_MESSAGE} </p> <div class="contests"> <h1>{CONTEST_TITLE}</h1> <b>{CURRENT_CONTEST_TITLE}</b> <p> {CURRENT_CONTEST_DESCRIPTION} </p> <img src="{CURRENT_CONTEST_IMGURL}"> </div> <p>{COPYRIGHT}</p> </body> </html> --v The template file contains a set of variables. Now (since you're sane) you're probably thinking that looks complicated. And you're right, it is. Building the system is initially complex, but the benefits outweigh the time making it. This setup gives the designer complete access to all the html of the design, and thus more sophisticated themes can be produced. In the end, it makes developing themes a lot easier. Designers no longer have to be annoyed with complex CSS rules to achieve the look they want. If you noticed in my file structure, I had a /inc/ folder inside of the /templates/ folder. There is a reason for this. Themes generally keep a consistent header throughout the design. To make updating the header/footer easier, they are included. Lets see how this applies to our template sample above. index.tpl {include=/inc/header.tpl} <h1>{WELCOME}</h1> <p> {WELCOME_MESSAGE} </p> <div class="contests"> <h1>{CONTEST_TITLE}</h1> <b>{CURRENT_CONTEST_TITLE}</b> <p> {CURRENT_CONTEST_DESCRIPTION} </p> <img src="{CURRENT_CONTEST_IMGURL}"> </div> {include=/inc/footer.tpl} --v The template file has been considerably shrunk. As you can imagine, our header.tpl and footer.tpl files look like this. header.tpl <html> <head> <title>{SITE_TITLE}</title> </head> <body> --v footer.tpl <p>{COPYRIGHT}</p> </body> </html> --v Simple enough. We now have this other issue, certain pages are outputted in loops. How can we design a view forum topic page? We need a way for the rendering engine to know how to output looped content. This can be solved by declaring a loop section in our template file. <h1>{TOPIC_TITLE}</h1> {POSTS_LOOP} <b>{POST_USER}</b> {POST_DATE} <p> {POST_CONTENT} </p> {/POST_LOOPS} --v Problem solved. Here is another issue, what if a page is added to the site and there is not a template file yet for it in the theme folder? In this case, the theme rendering engine would default to the "default theme's" page template file and use that (until the template designer updates the template). Having a default theme ensures no page is ever broken. Another issue we face is the likely event that an existing page is updated and more functionality is added. I think the best way to deal with this is to have version compatibility numbers for all pages. This is best explained in example. Lets say our site has only two pages, homepage.tpl and faq.tpl. Each page has version 1.0 theme compatibility. Our theme is also version 1.0 compatible. Our theme works great. Now lets say homepage.tpl is updated, so it's compatibility version is changed to 1.1 and our faq.tpl file remains version 1.0 compatible. When the theme engine tries to render the homepage, it compares version numbers. Our theme is version 1.0 while the page requires version 1.1. Crap! So the rendering engine reverts to the default theme ensuring the page renders correctly. However, if the rendering engine tries to render faq.tpl, it sees that both theme and page version number are version 1.0. Success. Eventually the theme creator revises the theme to be version 1.1 compatible and now the homepage is rendered correctly. Obviously, it's a good idea to give theme designers a 1 week heads up before pushing a theme update. Having a special beta version of the new rendering engine for theme designers to test on would be a good idea. Cacheing is also a good idea, to speed up load times. It could even be possible to convert themes in to a PHP version once they are submitted. So that {PAGE_TITLE} becomes <?=$page_title?>. This would speed up load times as well. I think if we want to do a theme engine right, this is the best way to go. Let me know if you have any questions regarding my idea. -=-=- Quit posting and try Google.
Sun, 15 Mar 2009, 13:34
Phoenix	That theme engine looks exceedingly complex for a site such as SoCoder. Probably useful if there's a team of dedicated designers working with a deadline, but as of now I'd say that plain old CSS would suffice. Although I do agree that the HTML of this site in its current state is fairly theme-hostile, with some restructuring more flexibility could be achieved with CSS.
Sun, 15 Mar 2009, 14:36
Stealth	That theme engine looks exceedingly complex for a site such as SoCoder. Probably useful if there's a team of dedicated designers working with a deadline, but as of now I'd say that plain old CSS would suffice. It only seems complex because I explained it in great detail (and I also accounted for many conflicts we would face). The truth is, most theme systems work this way. If you look at your average prebuilt forum or CMS, this is the way it's done. I wouldn't say this is a complex way to do it, a CSS only system would be (as jay would call it) a "half-assed" system. This system solves many problems we normally encounter with updating the site. Themes wouldn't go a-wall on every update (forcing Jay to patch everything). And more importantly, it lets the theme developers do anything. A css only system lets designers do color and positioning tweaks. If I wanted to design a special iPhone version, I can. If I want to enhance the site with javascript slide and zoom effects, I can. If I wanted to add a huge clock on the homepage, it's my choice. Also, if you don't want to create this rendering engine in PHP, I'll certainly provide code for you. As for complexity, it's quite simple once you get going. Once Jay comes up with the next great idea, he would design the page's default theme using HTML/CSS. Then he would replace all the output points with {TAGS}. Then go in to PHP and write the PHP to set all the vars. Like: Real World Example // Standard Output $render_vars["TAG1"] = "Content"; $render_vars["TAG2"] = "Content"; // Loop Output for($i=1,$i<=5;$i++) { // Get Template $template = get_loop_template("TAG3_LOOP"); // Render Tags $template = dorender("TAG3_TITLE", "Content", $template); $template = dorender("TAG3_USER", "Content", $template); $template = dorender("TAG3_TEXT", "Content", $template); // Add to Loop Render $tag3_loop .= $template; } $render_loops["TAG3"] = $tag3_loop; --v -=-=- Quit posting and try Google.
Sun, 15 Mar 2009, 15:52
Jayenkai	FFS, Stealth, keep it simple. Geeze.. .. As an example.. <div class="contests"> <h1>{CONTEST_TITLE}</h1> <b>{CURRENT_CONTEST_TITLE}</b> <p> {CURRENT_CONTEST_DESCRIPTION} </p> <img src="{CURRENT_CONTEST_IMGURL}"> </div> --v In Socoder's actual current script is quite literally.. $query="SELECT * FROM post WHERE ID=3193"; $result=mysql_query($query); echo format(mysql_result($result,0,"text")); --v With the actual data being BBCode in the actual post. I came up with something interesting, whilst at work, today.. I might give it a try tomorrow. But I also have to code an entire AGameAWeek tomorrow, too, so.. Might not have time!! -=-=- ''Load, Next List!''
Sun, 15 Mar 2009, 16:15
Stealth	FFS, Stealth, keep it simple. I was simply explaining it in full detail to avoid confusion with anybody on the site. I was also discussing aspects of the system. This is as simple as it can be without letting people write full blown PHP. Just look in to it more and chat with me if you have questions. I would really like to see this implemented. -=-=- Quit posting and try Google.
Sun, 15 Mar 2009, 16:59
Phoenix	The implementation complexity isn't what we're referring to when saying "keep it simple," I'd imagine that it's merely a case of regex search 'n' replace. This is as simple as it can be without letting people write full blown PHP. Provided that people actually need to meddle with the structure of the content. But how good is that, anyway? Your approach is probably excellent in "the real world" but themes should, in my opinion, strictly be themes. I'd rather see that the layout of the site could be positioned on a per-user basis (eg. iGoogle), so that I can employ any styling I want and then decide myself where I want the content to appear. Perhaps I value showcases a lot more than the daily poll, whereas you enjoy the competition section and want to give that top relevance. Should that really be decided by the theme designer, then?
Mon, 16 Mar 2009, 02:10
Afr0	sigh Again, we're asked to come up with a design for Socoder. Stealth comes up with a full-blown rendering engine, and it is shut down. What's new? -=-=- Afr0 Games Project Dollhouse on Github - Please fork!
Mon, 16 Mar 2009, 02:52
Jayenkai	TWO YEARS AGO (Jan 2007) I rebuilt the CSS so that people could make "Even More Complex" themes for Socoder. Since then, Nobody's done diddly squat, and you can see my growing frustration as I continuously repeat the fact that "Anything goes, you can design anything, and I will happily rebuild Socoder to fit it." I've made every single new theme since then. Phoenix's is the FIRST new theme I've had since then. It's an idea, it's a starting ground, and since the only other one is CR's little sketch, they're both being smushed together into a new template, with little options in. Do you want it EASIER, or do you want it HARDER? Example. .. Using an approximation of Stealth's layout, given above in great detail, Afr0 And Stealth both have until WW-End-time to give me a full blown design, each. They must be entirely different from each other, enough that it's worth doing all that crap, and not simply relying on a few options in an .ini file. -=-=- ''Load, Next List!''
Mon, 16 Mar 2009, 03:26
Afr0	Did you ever implement dynamic polls? Or any polls at all? /me don't think you did. At least not polls in topics. Which was what I originally had in mind. -=-=- Afr0 Games Project Dollhouse on Github - Please fork!
Mon, 16 Mar 2009, 03:42
oscar	i think tis starting to get off point. I can see Jays point in not wanting to implement features (fairly complex features at that) that may not even get used. If the current theme feature hasn't been used at all, it's not a very good omen that another theme engine will get used much more then that. By fairly complex i mean actually implementing it in an existing codebase. From experience this sort of thing isn't particularly easy to do when you're going back and adding it to a codebase that wasn't built with this in mind. You have to build an instruction interpreter to know where to put what content in the theme and all the functionality that it entails (getting content and rendering it) and you have to do it SITEWIDE. Which means jay would have to essentially restructure the entire site if not build alot of it again. I really like phoenix's one... maybe if you reduced the font sizes and the padding a bit it might fit into a smaller size?
Mon, 16 Mar 2009, 05:02
JL235	Anti-CSS HTML FTW! But I'm kinda with Jay on this one. Throwing out theoretical ideas might be a fun exercise, but what we really need to see are results. So far we've had very few new designs.
Page : 1 2 Next Prev

#192 - The Socoder Design Challenge

The Challenge