Author Topic: MegaGlest Website  (Read 35829 times)

tomreyn

  • MegaGlest Team
  • Airship
  • ********
  • Posts: 2,764
    • View Profile
    • MegaGlest - the free and open source cross platform 3D real-time strategy game
Re: MegaGlest entry point on the web, was: Looking for a web designer
« Reply #25 on: 7 December 2010, 15:37:36 »
First of all, a big N-O to music in sites. That is the *fastest* way to make everyone hate your product (well, second fastest after full sized flash ads that include music). Music in sites is amateurish, annoying, and fraught with incompatibilities.

Well, it can be annoying, that's true. And as far as I know it can also give you compatibility trouble, even with HTML5. So you are probably right.

In my opinion, image scrollers (the things that have a few images, automatically scrolling between them to show the "headlines") looks very professional, and can be done with javascript for compatibility and ease of use.

Sounds good, but how would you go about viewing these if you have javascript disabled/no javascript support?

Trailers work, provided the trailer themselves look good, and preferably match the design of the website at least a little (ie: if the website is darker colours, like this one, the video would be too). Also a good idea to use a custom video player (like how nexiuz does) instead of a youtube video, since that looks better, and generally, one wants to present an aura of cleaness, professionalism, and ability.

In case of HTML5 conforming browsers you should not need a player, but you'd surely need one for a fallback. There's some code on mozdev.org / mozilla.org for exactly this scenario (but I forgot where exactly, searching for site:mozdev.org + HTML5 + video + fallback + javascript + flowplayer may help).

* does not require flash
* does not require javascript
I think that, as always, they should be there to ENHANCE the user's experience, though not at all required to use the site. It's like HTML5  border radius. If the browser can't support it, it simply downgrades to corners, letting those with supportive browsers see it better, while those with unsupported browsers aren't penalized for that.
I completely agree there. To me, this also means that without these extras, I should still be able to access all content of the website by means of an acceptable UI. I.e. 20 layers of same-sized images at the exact same absolute position may work for a javascript based image viewer, but not if Javascript is disabled.

* optionally have all below pages shown in a frameset and load and autoplay game music in a tiny frame (with start/stop button), possibly also make the web chat always visible this way (but it would be good if it was also resizable then)
I immensely loath frames, and recommend not to use them. Even google has ditched them for good, and they aren't even supported in strict XHTML...
I didn't know that's the case, but yes, there's XHTML-strict, XHTML-frameset and XHTML-transitional. The reason I came up with the suggestion of using a frameset in te first place is because it allows you to have certain elements loaded and active all the time while you atr navigating and exploring a complete website. This would be helpful for the background music (which would be nno longer relevant now) as well as for the webchat. You wouldn't want the webchat to reload every time you click a link on some page of a website. Is there a better solution for this (other than popups/popunders?

DOWNLOAD: automatic detection of downloads matching the user agents' OS (and, if possible, architecture) by javascript or server side branching code (see https://www.mozilla.com/en-US/products/firefox/ for example), complete overview on all available downolads if detection fails and as opt-out of branching
Hmm, I once tried to experiment with different user agents... I know of no way to detect architecture, but browsers and operating systems are easy to detect. Except, of course, the browsers that lie...
On this computer, my web browser identifies it self as:
Code: [Select]
Mozilla/5.0 (X11; U; Linux x86_64; de; rv:1.9.2.12) Gecko/20101027 Ubuntu/10.10 (maverick) Firefox/3.6.12
x86_64 would seem to indicate this is a 64 bit architecture. So at least in some cases, it should be possible to determine what you're dealing with.
Unfortunately, I never got to test my script, since I only had windows available on hand... Of course, this might violate your earlier rule of non dependancy on JS, but it is possible to have it list "everything" with a <noscript> tag for browsers with javascript off. Won't solve very old browsers that don't have JS at all, but I've never seen any said browsers ever, and even the oldest library computers had at least IE5...

My understanding is that the <noscript>...</noscript> area is not just to be interpreted when there is javascript support but it is deactivated, but also when there is no javascript support in the client at all. So these would still get parsed, unless it was a web browser which doesn't conform with the most basic HTML standards from many years ago.

Implementation principles:
* Since this is game and thus the website is and will always remain an hobby, we need to keep the website as easily manageable as possible, with as little outdating content as possible
  * This may require a future-proof but simple CMS, and one which has a flat learning curve, rich text editor or the like (such as a wiki), but is still able to match the design principles
  * Alternatively, custom code (based on a PHP framework?) can be used, but keep it simple and document it so others can take over maintenance
Possible idea: Text areas are created from txt files and included with PHP's include function. Sort of similar to how the Glest Guide's archives work, but for text files that will fill in the text on a page instead of the whole page itself. A bit messy, but simple and easy to do, abet, since it will contain HTML code, I'd recommend password protecting it and only sharing the password with people you trust. Besides, only the MG team should have to edit the pages, right?

If you use PHP's include() then you have PHP parse this file, so you interpret PHP code contained in it. I don't see how this helps separating in terms of model, view, controller. Where this approach could make more sense is when you have BBCode (or Textile, or one of the other gazillion competing formats) in plain text files and PHP does readfile() on them, then parses the pseudocode. But I still don't like this approach so much, unless these text files are stored in a structured way and how new ones are added, outdated ones removed and, most of all, existing ones edited, is well defined. And at this point you are pretty close to a Wiki with a file backend. So why reinvent the wheel (unless the existing solutions are incompatible with your design goals)?

Regarding who has access to edit the pages, while a simple and strict definition of this, as you suggest, is an option (an an attractive one for its simplicity) I think it would be nice to keep in mind that people, roles and who takes which role can be somewhat fluid amongst open source projects, so it can be nice to be able to quickly grant the ability to view, or to view and edit page X to this and that guy (if not in this version, then maybe in the future), but not to all. This would be already possible with most existing Wiki implementations, and easily manageable, too. But this surely can be achieved by other ways, too.

Now what needs to happen next is that we need some design drafts. Omega and ElimiNator, can the two of you please provide one or two sketches of what the main page would look like based on what's written above, with your suggested design(s)? I think the web design can ultimatively only be made by one person, so we will need to decide, and this should help us with this. But, more importantly, this will provide us with an idea of what the site may be looking like when it's done!
Eh? I'm no good for ideas themselves. I can make what is given to me, but for the most part, you're welcome to go grab a piece of paper and sketch out how you think the layout should look... I am merely offering my services and web prowess to make this for you. The actual planning rests in your hands.

Oh I see, sorry I misunderstood you there, then. Unfortunately I'm not that creative. So everyone is welcome to provide their suggestions on how the new site should be looking. Please sketch something up, upload it and link it here... I'll try to come up with a suggestion myself these days but this will likely not be so great - so your input is very appreciated.

Omega, it's good discussing these things with you, I feel it's really helps us dvancing on the planning, and towards keeping production times short.
« Last Edit: 7 December 2010, 15:45:48 by tomreyn »
atibox: Ryzen 1800X (8 cores @3.6GHz), 32 GB RAM, MSI Radeon RX 580 Gaming X 8G, PCI subsystem ID [1462:3417], (Radeon RX 580 chipset, POLARIS10) @3440x1440; latest stable Ubuntu release, (open source) radeon (amdgpu) / mesa video driver
atibox (old): Core2Quad Q9400 (4 cores @2.66GHz), 8 GB RAM, XFX HD-467X-DDF2, PCI subsystem ID [1682:2931], (Radeon HD 4670, RV730 XT) @1680x1050; latest stable Ubuntu release, (open source) radeon / mesa video driver
notebook: HP envy13d020ng
internet access: VDSL2+

· · · How YOU can contribute to MG · Latest development snapshot · How to build yourself · Megapack techtree · Currently hosted MG games · · ·

titi

  • MegaGlest Team
  • Airship
  • ********
  • Posts: 4,240
    • View Profile
    • http://www.titusgames.de
Re: MegaGlest entry point on the web, was: Looking for a web designer
« Reply #26 on: 7 December 2010, 17:18:20 »
All the things you talk about here are maybe a bit too much for a simple site?
Please try to keep the things as simple as possible. Its basically one mainpage and maybe 2-5 sub pages, or am I wrong?

But keep in mind that I don't know anything about webdesign, so its maybe nonsens what I am talking about.
Try Megaglest! Improved Engine / New factions / New tilesets / New maps / New scenarios

Omega

  • MegaGlest Team
  • Dragon
  • ********
  • Posts: 6,167
  • Professional bug writer
    • View Profile
    • Personal site
Re: MegaGlest entry point on the web, was: Looking for a web designer
« Reply #27 on: 8 December 2010, 06:47:52 »
Agreed, simplicity is the best way to start.

I'm still not so sure about frames, as despite having a separate DTD, they are still largely unused today, and the iframe was depreciated with XHTML 1.0. Not sure if one would even NEED to be browsing the site while using a webchat, since I would presume the site has little content to read, like the glest site, where most of the content is the forums.

I never planned to use HTML5 for any videos (and probably won't use any hard-dependency HTML5 tags for some years, until they become very widespread) since that's just a lot more work to have to detect if the browser can do HTML5, and have the fallback player if not... Using existing flash players, and converting the video to an flv, it'd be very easy to use one simple 3rd party video player not unlike nexiuz's site.

The image swappers would merely display the first image if there was no javascript because my preferred way to do it is to use a tag with an id and modify that tag with Javascript.

Yes, that's the user string, but there's usually other commands to get specific parts without having to use risky and highly variable regular expressions. Namely, "window.navigator.platform()" and "window.navigator.appName()" (plus "window.navigator.appVersion()").

For a visual of how using PHP to "separate" the control, please see the Glest Guide's archives (attempt to make a new article). It uses PHP and a WYSIWYG editor to let users create new pages, then edit the main page to include links to that. If you are highly experienced with PHP, take a look at the theme PHP files and how mods work for SMF.

It's like how the Glest Guide keeps the versions of GAE and MG on the main page uptodate with a little page where you can "edit" the versions. But this is actually editing a text file which is included into the main page (after being filtered of course, since it is not password protected).

Cheers. :D
Edit the MegaGlest wiki: http://docs.megaglest.org/

My personal projects: http://github.com/KatrinaHoffert

tomreyn

  • MegaGlest Team
  • Airship
  • ********
  • Posts: 2,764
    • View Profile
    • MegaGlest - the free and open source cross platform 3D real-time strategy game
Re: MegaGlest point of entry website, was: Looking for a web designer
« Reply #28 on: 8 December 2010, 08:23:26 »
Responding to Titi:

All the things you talk about here are maybe a bit too much for a simple site?
Please try to keep the things as simple as possible. Its basically one mainpage and maybe 2-5 sub pages, or am I wrong?

But keep in mind that I don't know anything about webdesign, so its maybe nonsens what I am talking about.

You are right, I may be blowing this up a bit too much.

Nevertheless, we do need both a web design template, and a most exact idea of what is to be displayed on those web pages.

We also will have some parts which must be editable, and I think having to edit plain XHTML files is not the way to go (let alone for the fact that you may introduce errors which make the web page incompatible to the XHTML standard). So we do need to think of a way for editing content. I think the least we need is a simple WYSIWYG editor which produces XHTML conforming code.

Finally, keeping the web page simple for the user, can mean that you spend some time on making it more usable on the backend. The javascript branching for the download page is one example for this. While more difficult to code, it would make life easier for most MG novices and save us the question of "which download do i need?" in most cases.

Responding to Omega:

I'm still not so sure about frames, as despite having a separate DTD, they are still largely unused today, and the iframe was depreciated with XHTML 1.0. Not sure if one would even NEED to be browsing the site while using a webchat, since I would presume the site has little content to read, like the glest site, where most of the content is the forums.

Most web browsers have tabbed browsing now, which can, in a way, be a substitute for frames, so there really is no need for having a chat frame, especially as the website will consist of few pages only, as you say. So let's forget about frames and stick with XHTML 1.0-strict.

I never planned to use HTML5 for any videos (and probably won't use any hard-dependency HTML5 tags for some years, until they become very widespread) since that's just a lot more work to have to detect if the browser can do HTML5, and have the fallback player if not... Using existing flash players, and converting the video to an flv, it'd be very easy to use one simple 3rd party video player not unlike nexiuz's site.

nexuiz.org, or rather http://nexuizninjaz.com/nexuiz_video/ (where the video on the front page is loaded from) uses SWFObject v1.5. People like me who browse the web with deactivated Javascript support by default, get to see this:
Can't see the video? Download Flash Player or download the h264 version or ogg version.

Three different video versions - now this doesn't seem exactly like little work was involved there either. ;-)

Downgrading from <video> tags for web browsers which don't support it is actually quite simple. And <video> with OGG Theora media files works for all of Firefox, Google Chrome/Chromium and Opera. For Internet Explorer, 9.0 will be the first version to support <video> (only with H.264) and this is not even released, yet. So whether or not we end up using <video> tags for web browsers which support it, we will need some Flash player. MIT licensed SWFObject 2.2 would be one option, the free (as in freedom - GPL v3 - and as in beer) Flowplayer is another. And there can be more - suggestions welcome!

The image swappers would merely display the first image if there was no javascript because my preferred way to do it is to use a tag with an id and modify that tag with Javascript.

Personally I consider it to be problematic if you only can get to see a single image when javascript is off. I don't like forcing people to activate it just to be able to access all images.

For a visual of how using PHP to "separate" the control, please see the Glest Guide's archives (attempt to make a new article). It uses PHP and a WYSIWYG editor to let users create new pages, then edit the main page to include links to that. If you are highly experienced with PHP, take a look at the theme PHP files and how mods work for SMF.

It's like how the Glest Guide keeps the versions of GAE and MG on the main page uptodate with a little page where you can "edit" the versions. But this is actually editing a text file which is included into the main page (after being filtered of course, since it is not password protected).

I just started having a look at it, but then the web server became inaccessible (tested from 2 locations) - not my fault - I hope.

Anyway, WYSIWYG and a PHP based backend (be it SMF or a wiki or something else) seems like a good option to me.
« Last Edit: 8 December 2010, 09:37:36 by tomreyn »
atibox: Ryzen 1800X (8 cores @3.6GHz), 32 GB RAM, MSI Radeon RX 580 Gaming X 8G, PCI subsystem ID [1462:3417], (Radeon RX 580 chipset, POLARIS10) @3440x1440; latest stable Ubuntu release, (open source) radeon (amdgpu) / mesa video driver
atibox (old): Core2Quad Q9400 (4 cores @2.66GHz), 8 GB RAM, XFX HD-467X-DDF2, PCI subsystem ID [1682:2931], (Radeon HD 4670, RV730 XT) @1680x1050; latest stable Ubuntu release, (open source) radeon / mesa video driver
notebook: HP envy13d020ng
internet access: VDSL2+

· · · How YOU can contribute to MG · Latest development snapshot · How to build yourself · Megapack techtree · Currently hosted MG games · · ·

Omega

  • MegaGlest Team
  • Dragon
  • ********
  • Posts: 6,167
  • Professional bug writer
    • View Profile
    • Personal site
Re: MegaGlest point of entry website, was: Looking for a web designer
« Reply #29 on: 9 December 2010, 04:14:34 »
Er, the WYSIWYG editor was just an example, to be honest... There's no WYSIWYG editor on earth powerful enough for my web designing  ;D. Even the Glest Guide archives is very limited and only renders part of the page, and cannot load data properly (which is a HUGE issue, since it's important to be able to edit existing data). I was thinking more of a barebones editor to ensure we can use classes (an absolute MUST for well formatted and file size efficient code, and not something that can be done with a WYSIWYG editor online).

Personally I consider it to be problematic if you only can get to see a single image when javascript is off. I don't like forcing people to activate it just to be able to access all images.
Well, do you have any better ideas? Besides, to be honest, from a web developer viewpoint, people who disable javascript are the lowest rung. Disabling javascript in my browser to test a few sites to prove my point, google's instant search doesn't work, which actually makes it SLOWER on the long run, facebook has to load a new page instead of using Ajax to update, chat fails, and the site design is different. Sending a PM on the Glest Board sends you to a new page every time you try to search for a member because it can't open a new tiny window to auto-update. The Glest wiki won't let you edit a page because the rich text editor requires javascript, and many other features are broken or disabled. The Glest Guide can't pop up information about XML tags or Lua code. Youtube displays just a black box instead of a video, and comments can't be posted, expanding boxes don't expand, and many features are visibly broken... I don't really think anyone with JS disabled is gonna expect to be bale to see a video... They should be thankful that example even tells why the video won't work (rather than visibly breaking like youtube). "Better" wikis (that I'd love to sometime have our wiki revival, if only more would help) work even worse because they use even more JS, and many features cause bad formatting without JS...

In other words, just letting JS-disabled people see one image is more than they can expect. We can try and make the site as accessable as possible, but for the most part, they are going to suffer as they always have. Though, to be honest, I've never once seen anyone with disabled JS... Then again, they can't even post comments and stuff, so that's no surprise. ;)
Edit the MegaGlest wiki: http://docs.megaglest.org/

My personal projects: http://github.com/KatrinaHoffert

titi

  • MegaGlest Team
  • Airship
  • ********
  • Posts: 4,240
    • View Profile
    • http://www.titusgames.de
Re: MegaGlest point of entry website, was: Looking for a web designer
« Reply #30 on: 9 December 2010, 14:26:09 »
I don't think JS is evil. I see no problems in using it. 

Evil things are: Flash, Silverlight or the worsed of all >>>ActiveX<<<<  ( just to remind you! )
Try Megaglest! Improved Engine / New factions / New tilesets / New maps / New scenarios

Omega

  • MegaGlest Team
  • Dragon
  • ********
  • Posts: 6,167
  • Professional bug writer
    • View Profile
    • Personal site
Re: MegaGlest point of entry website, was: Looking for a web designer
« Reply #31 on: 9 December 2010, 21:25:59 »
I don't think JS is evil. I see no problems in using it. 

Evil things are: Flash, Silverlight or the worsed of all >>>ActiveX<<<<  ( just to remind you! )

Agreed. The only exception is with video, since there's no universal way to do that, and flash is the most common and best accepted, used by sites like youtube. JS is far more secure than any of those anyway. ActiveX? Never seen anyone (other than Micro$oft) use it, and the security risks associated with it? Numberless.
Edit the MegaGlest wiki: http://docs.megaglest.org/

My personal projects: http://github.com/KatrinaHoffert

charlieg

  • Guest
Re: MegaGlest point of entry website, was: Looking for a web designer
« Reply #32 on: 9 December 2010, 23:36:49 »
No frames.  No music.  No HTML5 dependency.  ;)

KISS and a bit pretty.  Include a trailer, basic news functions (rss of another source?), a gallery, and basic documentation (a wiki?).

Some inspiration:
http://peragro.org/
http://ufo2000.sourceforge.net/
http://www.freedroid.org/
http://supertuxkart.sourceforge.net/
http://ufoai.ninex.info/

Omega

  • MegaGlest Team
  • Dragon
  • ********
  • Posts: 6,167
  • Professional bug writer
    • View Profile
    • Personal site
Re: MegaGlest point of entry website, was: Looking for a web designer
« Reply #33 on: 10 December 2010, 02:37:21 »
No frames.  No music.  No HTML5 dependency.  ;)

KISS and a bit pretty.  Include a trailer, basic news functions (rss of another source?), a gallery, and basic documentation (a wiki?).

Some inspiration:
http://peragro.org/
http://ufo2000.sourceforge.net/
http://www.freedroid.org/
http://supertuxkart.sourceforge.net/
http://ufoai.ninex.info/
Agree, agree, and agree. KISS is a good principal for web design (and every thing else). It's al

Alternative proposal that was inspired by Charlie:
Rather than having multiple editable sections, just use an RSS feed for the news and perhaps a feature list and download links. The RSS feed would not only be used for a literal RSS feed, but could be parsed (it's an XML, after all) by PHP and used to generate the actual news on the site, simplifying it greatly (XML is a great format for formatting data that's easy for the end user).

And of course, another noteworthy "inspiration" site is the glest main page itself, perhaps even more so, because it's simple, compatible, and serves its function, even if not perfect.

(Interesting case:)
Glest cannot be validated as proper XHTML because it uses non compatable characters directly in the code instead of the character code alternatives. For example, it should be using "&#241" instead of "ñ" directly. That mismatched character representation causes the validator to fail.
Edit the MegaGlest wiki: http://docs.megaglest.org/

My personal projects: http://github.com/KatrinaHoffert

tomreyn

  • MegaGlest Team
  • Airship
  • ********
  • Posts: 2,764
    • View Profile
    • MegaGlest - the free and open source cross platform 3D real-time strategy game
Re: MegaGlest website, was: Looking for a web designer
« Reply #34 on: 19 December 2010, 03:21:19 »
So I've finally come up with a webdesign which is based on the structure I previously described in this thread.



What you see here is how I imagine the main page would look like. In fact all the other pages would look almost the same, but the image in the center column would be replaced by text, web links, smaller images and videos.

Of course, some of you will not like this, and (hopefully) others will. That's the case with everything someone creates. There is no doubt that this can be improved on, I do not consider it a final version, most of all Titi and Softcoder have not had a say on this, yet, nor did they even get to see it, yet. So their opinions matter the most, but all opinions are welcome.

And not just opinions. In fact I want you to improve upon this. This image is an exported copy of a layered XCF file, as produced by The Gimp, which, I think, also loads into some Windows programs such as Photoshop. You are welcome to download this file, change it, experiment with it, and if you think the result is better than or as good as what we have now then please do post it here.

atibox: Ryzen 1800X (8 cores @3.6GHz), 32 GB RAM, MSI Radeon RX 580 Gaming X 8G, PCI subsystem ID [1462:3417], (Radeon RX 580 chipset, POLARIS10) @3440x1440; latest stable Ubuntu release, (open source) radeon (amdgpu) / mesa video driver
atibox (old): Core2Quad Q9400 (4 cores @2.66GHz), 8 GB RAM, XFX HD-467X-DDF2, PCI subsystem ID [1682:2931], (Radeon HD 4670, RV730 XT) @1680x1050; latest stable Ubuntu release, (open source) radeon / mesa video driver
notebook: HP envy13d020ng
internet access: VDSL2+

· · · How YOU can contribute to MG · Latest development snapshot · How to build yourself · Megapack techtree · Currently hosted MG games · · ·

ultifd

  • Airship
  • ********
  • Posts: 4,443
  • The Glest Video Guy :) The one and only. :P
    • View Profile
    • My Youtube Channel
Re: MegaGlest website, was: Looking for a web designer
« Reply #35 on: 19 December 2010, 04:01:53 »
Design seems to not bad/it's a good start. Enough to provide info, etc...since that is the purpose of this.
BTW, thanks for hosting megaglest.org.  :thumbup:

Also, stickied because of this threads importance.

Omega

  • MegaGlest Team
  • Dragon
  • ********
  • Posts: 6,167
  • Professional bug writer
    • View Profile
    • Personal site
Re: MegaGlest website, was: Looking for a web designer
« Reply #36 on: 19 December 2010, 07:50:25 »
Nice to see you got a start to a concept. :thumbup:

My comments:
How will you do the "current servers"? The simplest way would be to have one file in one set location that all the servers listed, which the site can read with some basic Ajax javascript or a PHP include function (depending on the format of the file). Of course, I must ask the simplest question: what does it mean? And what are the numbers?

News: Best done from a simple XML file, so it can be easily edited.

Forums: That's very tricky, since we have no direct control over the forums, and the RSS feed for it is for the entire forums, not just the MG forums, making it sort of pointless to have, and having non MG related topics listed would be a bad idea (especially if the most recently posted topic is some vague off topic thread, or suppose it's from the vanilla glest bug reports, since some random user might not realize that it's for Vanilla Glest, not MG.)

Newsletter: I'll assume you plan to create a sourceforge mailing list (if you don't have one)?

Language Links: I don't think you should have anything other than english. I'll list my reasons at the bottom of this post to avoid cluttering this list.

Big image in the Middle: Needs a cool looking, epic screenshot. This means no HUD, interesting vantage point, good lighting, and preferably some combat (combat = interesting). This image will also ideally have a fade out effect.

(Understanding that this is not your concept for the graphics) How should the buttons look? I say something like how Glest's buttons look, as that will look very interesting. Should the green bar at the top be the same as the forums? And what would those side columns look like? I assume something like Glest's buttons.



My Concept idea: The site would be a replica of the Main Menu screen of Glest, but all the buttons which are normally menu options become the navigational buttons, in the same art style, with larger boxes with news, etc on the sides (like Tomreyn's concept). For the other pages, the navigational buttons would be moved to the top, in a single row, while the information is in a large box in the middle, also in Glest "button style".

To clarify, "Glest Button Style" would mean like this (notice the Glest menu button's borders, but expanded center to fit the content):



Why I Think Different Language Support Is a Bad Idea:
-VERY hard to keep up to date (who's to say those who speak that language will be able to keep up to date with those updates, or to even stick with it for an indefinate span of time?)
-Encourages people to post in different languages on the forums. I'm gonna be blunt, I hate that. It leaves the (vast majority) of the community left out and makes it possible to hide insults/trolling/inappropriate conduct from those who cannot speak that language.
-The Glest Boards are english and nobody has ever had problems with it.
-Harder to create when trying to bear in mind that the different languages might not format properly.
-Causes problems when doing a major change, since the translated versions may not be compatable.
-Text in images cannot be translated short of hardcoded HTML, making that a bit harder to change.
-HARDCODED TEXT IS HARD TO TRANSLATE! (unless said translator is also a PHP whiz...)

Besides, Glest doesn't really have a large enough community to be able to provide accurate, up-to-date translations for the site (and the hardcoded values).

Of course, if you truly must have different languages NOW, please see this page for some advice.
Edit the MegaGlest wiki: http://docs.megaglest.org/

My personal projects: http://github.com/KatrinaHoffert

titi

  • MegaGlest Team
  • Airship
  • ********
  • Posts: 4,240
    • View Profile
    • http://www.titusgames.de
Re: MegaGlest website, was: Looking for a web designer
« Reply #37 on: 19 December 2010, 14:49:47 »
Well, I have problems with this layout.

- the yellow/orange color looks bad
- too much information at once  ( overloaded )
- background picture in the middle is not so good. By this most of the space is lost because you will not see anything if you write on it.

Just an idea:
Maybe we can design it like the ingame menu of glest? By this we show a decent screenshot and have a simple to access page with a unique look.
Just tell me what you need I know how to work with gimp ;-) .
Buttons picture ...?

update: I can take a screenshot without any buttons/raindrops/logos and so on by disabeling it in the code. Maybe this is a good choice...
« Last Edit: 19 December 2010, 15:09:43 by titi »
Try Megaglest! Improved Engine / New factions / New tilesets / New maps / New scenarios

tomreyn

  • MegaGlest Team
  • Airship
  • ********
  • Posts: 2,764
    • View Profile
    • MegaGlest - the free and open source cross platform 3D real-time strategy game
Re: MegaGlest website, was: Looking for a web designer
« Reply #38 on: 19 December 2010, 15:07:17 »
You're welcome ultifd. :thumbup: for the sticky.

How will you do the "current servers"? The simplest way would be to have one file in one set location that all the servers listed, which the site can read with some basic Ajax javascript or a PHP include function (depending on the format of the file). Of course, I must ask the simplest question: what does it mean? And what are the numbers?

I'd like to primarily discuss the (X)HTML + CSS template for now, since creating this is the next step we need to take. However, I can see how the question of how dynamically updated information will get transported into the final web pages is an interesting, topic. too. My plan is to preproduce such information, in a variety of formats, in regular intervals (such as every couple of seconds in case of the server list) so that subsequent requests are less costly (caching). The serverlist, for example, would probably be available as HTML output (not a complete HTML page but just the neccessary elements, ready to be included by PHP's readfile(). Another option, possibly better, is to just include the PHP code neccessary to produce this HTML code into the presentation layer of the web CMS.

Those server list entries you see on the list are an example of what it could look like, I am not sure about what it will exactly look like in the end. The numbers in this example represent 'activeSlots', 'networkSlots', 'connectedClients', which is some of the information the current master server interface provides. But, as I say, this is merely an example, I'm not sure about the exact presentation of this part, yet. Here's all the information currently available to the master server (this is, to date, completely deleted off the master server as soon as a game is over), with an example entry:

glestVersionplatformbinaryCompileDateserverTitleiptechmaptilesetactiveSlotsnetworkSlotsconnectedClientsexternalServerPort
v3.4.0-devGNU64bitDec 19 2010 02:43:42tomreyns game123.123.123.123Megapack2riversAutumn66161357

Since there will (and should) be little room for the server list on the main page, I would imagine that some of this information can displays only as you mouse those entries. If any of you would like to suggest what information should be always visible here and what should be available on mouse over, please give it a go.

We may make these server entries clickable (starting up your game and making it connect to this server) if you have used the MG installer to install your game. This would mean some extra work since it needs to be done for every operating system, possibly for every possible web browser, separately (need to add a URL scheme handler and/or content type handler), but it should be achievable, and may make things easier for the users. But this is not just extra work, it is also a design/strategic decision, so I'd want to head titi's and softcoder's opinion before introducing this.

News: Best done from a simple XML file, so it can be easily edited.

Actually the CMS I have in mind (and already installed: CMS Simple) provides a nice way of editing just a given area in a web page, so this doesn't need to be a separate XML file - though it could be. I'm not yet sure whether the news section should be manually edited or should just transport the MG forum announcements on the main page. I tend more towards a manually edited section, though, where the news content can be reused to display within the game (titi has already implemented this in the 4.0 dev builds), since this content needs to be manually edited anyway, and it would look nicer than the forum announcements (which are also not wasy to make look nice).

Forums: That's very tricky, since we have no direct control over the forums, and the RSS feed for it is for the entire forums, not just the MG forums, making it sort of pointless to have, and having non MG related topics listed would be a bad idea (especially if the most recently posted topic is some vague off topic thread, or suppose it's from the vanilla glest bug reports, since some random user might not realize that it's for Vanilla Glest, not MG.)

SMF provides an 'API' (not sure it deserves this term), which allows for exporting this information, per (sub-)forum, in a good enough format for parsing. So this is not an issue.

Newsletter: I'll assume you plan to create a sourceforge mailing list (if you don't have one)?

Exactly, there already is an announcement-only mailing list on sf.net and this form would interface with it.

Big image in the Middle: Needs a cool looking, epic screenshot. This means no HUD, interesting vantage point, good lighting, and preferably some combat (combat = interesting). This image will also ideally have a fade out effect.

Better images would be nice to have. Titi started a screenshot thread on the forums a couple days ago. So far, the number of people submitting high quality screen shots to this thread are limited. Being a community project, MegaGlest is dependant of everyones' contribution and constructive criticism (hint!).

Here's what softcoder had to say about this:
Quote from: softcoder
You need to have more advanced units in the screenshot maybe, like a fire, and archers shooting. But its nice.
Perhaps rotating pictures every 30 seconds - fade from one to another faction, showing all 'official' factions.
I'm sure people would submit GREAT shots for consideration, make it a contest.

I think this is a great idea. If titi agrees, we'll have such a contest shortly.

(Understanding that this is not your concept for the graphics) How should the buttons look? I say something like how Glest's buttons look, as that will look very interesting. Should the green bar at the top be the same as the forums? And what would those side columns look like? I assume something like Glest's buttons.

I like simplistic designs, which don't make you load lots of graphics. Graphics are bad because they enforce minimum screen sizes and somewhat fixed sizes to graphical elements. They also increase page load times, and increase bandwidth requirements (MG is a low bandwidth game and the website should support this impression). But if there's a majority which prefers nicer looks over complete compatibility/flexibility then this can be discussed. So, for example, I'm not neccessarily opposed to have color blending by means of image files (unless this is also achievable with CSS by now, which I assume but do not know).

But I also think that all further improvements, like these, eat time and are not really neccessary for the first version of the website. And both titi and I would like a first version (which can be completely replaced by a second version later) to go live as soon as possible - this is the main goal (next to usability and not looking completely crap, such as the current maintenance page does). However, if you think you can implement something similar to the game menus' buttons via CSS and without images easily this would seems like a great improvement of the looks of the main menu 'buttons' which,  in my design draft, are placed to the left and right of the game logo.

If you have concrete ideas/suggestions/recommendations, please use the XCF file, save and upload it (and also export as JPG or similar image which can be displayed in a web browser) and demonstrate them to us, so we can discuss. Of course, if you prefer not to get into this, that's perfectly okay, too.



My Concept idea: The site would be a replica of the Main Menu screen of Glest, but all the buttons which are normally menu options become the navigational buttons, in the same art style, with larger boxes with news, etc on the sides (like Tomreyn's concept). For the other pages, the navigational buttons would be moved to the top, in a single row, while the information is in a large box in the middle, also in Glest "button style".

I was thinking about this option, but decided against it: first, something which works well in a game, doesn't need to be suitable (very different media type) and look good on a web page, secondly, as explained above, I like minimalism when it comes to use of image files, and finally I think it would look somewhat boring on a web page. Maybe my imagination is limited, and a design preview would be more convincing.



Why I Think Different Language Support Is a Bad Idea:
-VERY hard to keep up to date (who's to say those who speak that language will be able to keep up to date with those updates, or to even stick with it for an indefinate span of time?)
-Encourages people to post in different languages on the forums. I'm gonna be blunt, I hate that. It leaves the (vast majority) of the community left out and makes it possible to hide insults/trolling/inappropriate conduct from those who cannot speak that language.
-The Glest Boards are english and nobody has ever had problems with it.
-Harder to create when trying to bear in mind that the different languages might not format properly.
-Causes problems when doing a major change, since the translated versions may not be compatable.
-Text in images cannot be translated short of hardcoded HTML, making that a bit harder to change.
-HARDCODED TEXT IS HARD TO TRANSLATE! (unless said translator is also a PHP whiz...)

Besides, Glest doesn't really have a large enough community to be able to provide accurate, up-to-date translations for the site (and the hardcoded values).

Having up to data translations of dynamically changing contents is not my intention. My intention is to have the static web page elements (main menu, 'about' page, etc.) translated into multiple languages. Glest was originally developed by spanish speakers, it has always been a multi language project, and also now we have people who speak many different languages natively (often not understanding english very well) on both the forums and on IRC, there are also numerous websites in foreign languages out there discussing MegaGlest already. I do not want to shut these people out, and only having an english language website would do exactly this.

Moreover, I think that this goal is very achievable. Most content of this website is indeed static (just the news are not, and I don't intend to translate those unless it turns out there are people who wish to do so), so they only require a one time translation. Major changes to the content of the web page are not going to happen anytime soon. It's basically just like the language files of the game. While we can start with just an english language web page, we can and should be open to adding others later.

I don't think the decision on which languages the website is provided in is dependant on which languages may be used on the forums. If you don't like anything but english to be used there (if you can have foreign language moderators then I don't see a reason not to, but this is a different and unrelated matter), then just have a rule there saying so and that's that. But this should not impact what the games' website may or may not look like.

And thanks for providing another reason for not using more images than absolutely neccessary.  ;)

Thanks your comments, please keep them coming.

Now, does your offer to craft this web design still stand (or did I misunderstand you there)?
atibox: Ryzen 1800X (8 cores @3.6GHz), 32 GB RAM, MSI Radeon RX 580 Gaming X 8G, PCI subsystem ID [1462:3417], (Radeon RX 580 chipset, POLARIS10) @3440x1440; latest stable Ubuntu release, (open source) radeon (amdgpu) / mesa video driver
atibox (old): Core2Quad Q9400 (4 cores @2.66GHz), 8 GB RAM, XFX HD-467X-DDF2, PCI subsystem ID [1682:2931], (Radeon HD 4670, RV730 XT) @1680x1050; latest stable Ubuntu release, (open source) radeon / mesa video driver
notebook: HP envy13d020ng
internet access: VDSL2+

· · · How YOU can contribute to MG · Latest development snapshot · How to build yourself · Megapack techtree · Currently hosted MG games · · ·

Omega

  • MegaGlest Team
  • Dragon
  • ********
  • Posts: 6,167
  • Professional bug writer
    • View Profile
    • Personal site
Re: MegaGlest website
« Reply #39 on: 19 December 2010, 19:54:17 »
Now, does your offer to craft this web design still stand (or did I misunderstand you there)?
Yes, it still stands, though, obviously not till the community reaches consensus and a final concept on what the website should look like.

- the yellow/orange color looks bad
I think that's just a place holder. If not, it can be. I still think we should use a background style similar to Glest's buttons. Also, to clarify, this is NOT a large image. Being a background of a resizable area means it needs a method of stretching. It would actually be a tiny top border image, a tiny images on the side and bottom for their borders, and a tiled content area image. This is done with a table, and I have used it before with very fast loading times, even on bad internet connections. All the images end up a few kb max.

- too much information at once  ( overloaded )
Quote from: Tomreyn
SMF provides an 'API' (not sure it deserves this term), which allows for exporting this information, per (sub-)forum, in a good enough format for parsing. So this is not an issue.
I don't think this would be very up to date then? Unless I misunderstand. Perhaps this could be excluded?

Quote from: Titi
Just an idea:[/b] Maybe we can design it like the ingame menu of glest? By this we show a decent screenshot and have a simple to access page with a unique look.
Just tell me what you need I know how to work with gimp ;-) .
Buttons picture ...?

update: I can take a screenshot without any buttons/raindrops/logos and so on by disabling it in the code. Maybe this is a good choice...
I still think this could be a good idea. You worry about heavy image dependancy? I'll discuss that at the bottom of this post (long topic). Can you take a screenshot like that? I was heeded by that limitation, and that would be excellent. (OT: Even if we don't decide to create the website in that style, can you get me a copy of a screen like that? I have use for it in other projects...).



Why Images are Awesome:
You worry that too much image dependency is a bad thing? On the contractory, they (1) spice up an otherwise boring page, (2) can fall back to browser rendered gradients and colours, and (3) add a feel of professionalism (whereas a gradient or solid colour overuse can look, to put simply, nooby ;)).

I've come to learn how to take advantage of good image usage, having used Dialup internet for years, and even now, have one of the worst broadband internet connections I've ever seen. Firstly, images can be tiled well. The header of the forum is only 200x138 image, with only 3kb filesize! It is looped repetitively x-wise. The Glest logo is a separate image imposed over top. Expandable content areas can be done in Glest button style by using 3x3 tables. Each cell is a corner/edge except the center, which is a tiled image. The old Glest Guide layouts did this, and the best current example I can think of is the navigational buttons on the forums (Home, Search, Profile, etc) which have a table in a row, with the edges being the extra sides. Filesize usage per image: <2 kb each. With Glest's tiny border on the buttons, it wouldn't even be a full kb per image!

Nextly, images are optimized. JPG would be used for screenshots, around 90-95 quality, depending on how it looks (Judgement is a must) in the preview. PNG is the dominant format for the web design elements, and 8 bit PNG can be used whenever possible, since many UI parts won't need a full swath of colors (again, it must be judged when and when not to use it by the laws of Common Sense). And even then, all PNG's can be run through a rigourous optimizer (PNGGauntlet).

And even while those images are loading, places can have the solid colors and browser rendered gradients (done with HTML5) until the image has fully loaded.

Even if we were to go with the concept of a "main menu" home page, each button would just appear a solid brown until the image has loaded, allowing the button to look like the Glest buttons, and the background image wouldn't be too huge, maybe 1024x768 max, and would fade to black at it's edges to allow it to be viewed properly at any resolution. Looking at this test with a quick screenshot, it ends up being only 180kb and that's with the buttons and logo in it! Since the logo and buttons use many more colours that the base image does not have, once removed, the filesize will reduce (to as much as 150kb, and if saved as 90 quality, 120kb). Plus, the background image will load after the text, making it practical to use such an image.
Edit the MegaGlest wiki: http://docs.megaglest.org/

My personal projects: http://github.com/KatrinaHoffert

ultifd

  • Airship
  • ********
  • Posts: 4,443
  • The Glest Video Guy :) The one and only. :P
    • View Profile
    • My Youtube Channel
Re: MegaGlest Website
« Reply #40 on: 20 December 2010, 07:19:37 »
Wait...didn't Jose say that he was going to lend Glest.org's design to us?  :confused:

tomreyn

  • MegaGlest Team
  • Airship
  • ********
  • Posts: 2,764
    • View Profile
    • MegaGlest - the free and open source cross platform 3D real-time strategy game
Re: MegaGlest Website
« Reply #41 on: 21 December 2010, 15:21:07 »
Wait...didn't Jose say that he was going to lend Glest.org's design to us?  :confused:

Yes, I checked with him whether we could reuse their design and got his permission (under simple terms). When checking with him, I made it clear that this would be just one of our options and that we may or may not end us using this design as a basis.

Personally I like the old design but it would require quite some work to make it compatible to current web standards (it's been around for a while, just like Glest, so that's no surprise). Some people don't like the old design so much, though.

So I came up with a concrete design suggestion. Some like it, some not so much. Titi likes it not so much and he makes the final decision, so we need a new design proposal now. I'm not planning on making another one shortly, so our hopes will now have to rest on someone else coming up with a concrete design suggestion, that is not just textual but visual.
« Last Edit: 21 December 2010, 15:25:30 by tomreyn »
atibox: Ryzen 1800X (8 cores @3.6GHz), 32 GB RAM, MSI Radeon RX 580 Gaming X 8G, PCI subsystem ID [1462:3417], (Radeon RX 580 chipset, POLARIS10) @3440x1440; latest stable Ubuntu release, (open source) radeon (amdgpu) / mesa video driver
atibox (old): Core2Quad Q9400 (4 cores @2.66GHz), 8 GB RAM, XFX HD-467X-DDF2, PCI subsystem ID [1682:2931], (Radeon HD 4670, RV730 XT) @1680x1050; latest stable Ubuntu release, (open source) radeon / mesa video driver
notebook: HP envy13d020ng
internet access: VDSL2+

· · · How YOU can contribute to MG · Latest development snapshot · How to build yourself · Megapack techtree · Currently hosted MG games · · ·

Cygal

  • Guest
Re: MegaGlest Website
« Reply #42 on: 21 December 2010, 21:58:03 »
Another proposal (it's not mine):


ElimiNator

  • Airship
  • ********
  • Posts: 3,391
  • The MegaGlest Moder.
    • View Profile
Re: MegaGlest Website
« Reply #43 on: 21 December 2010, 22:29:42 »
Looks cool, but should be more of a green colour.
Get the Vbros': Packs 1, 2, 3, 4, and 5!

Omega

  • MegaGlest Team
  • Dragon
  • ********
  • Posts: 6,167
  • Professional bug writer
    • View Profile
    • Personal site
Re: MegaGlest Website
« Reply #44 on: 22 December 2010, 07:05:12 »
Also worth mentioning that while search bars are great for large sites, I don't see MG's site being more than a few pages, making a search unnecessary and unhelpful. It's a nice concept, though it would be more suitable for a futuristic game than the medieval/fantasy of Glest.
Edit the MegaGlest wiki: http://docs.megaglest.org/

My personal projects: http://github.com/KatrinaHoffert

Cygal

  • Guest
Re: MegaGlest Website
« Reply #45 on: 22 December 2010, 11:02:57 »
Here's the work in progress for another proposal that should fit better MegaGlest's theme; detailed criticism is more than welcome to help improve anything.

Concerning the search bar, it could redirect to the wiki and/or the forums, but it has been removed for now.

Gabbe

  • Guest
Re: MegaGlest Website
« Reply #46 on: 22 December 2010, 12:34:01 »
MG is (atleast i think) colourfull.

Omega

  • MegaGlest Team
  • Dragon
  • ********
  • Posts: 6,167
  • Professional bug writer
    • View Profile
    • Personal site
Re: MegaGlest Website
« Reply #47 on: 22 December 2010, 18:35:48 »
That's a very nice header Cygal. Though, how to plot out the rest of the page...

I'm still interested in seeing a proposal on what a "main menu" style graphic will look like. I'd make one, but I have no way to get the main menu graphic without the buttons/logos.
Edit the MegaGlest wiki: http://docs.megaglest.org/

My personal projects: http://github.com/KatrinaHoffert

ElimiNator

  • Airship
  • ********
  • Posts: 3,391
  • The MegaGlest Moder.
    • View Profile
Re: MegaGlest Website
« Reply #48 on: 23 December 2010, 02:23:25 »
I like that stone one.  :)
Get the Vbros': Packs 1, 2, 3, 4, and 5!

Cygal

  • Guest
Re: MegaGlest Website
« Reply #49 on: 23 December 2010, 08:51:36 »

TeaR is still working on it, and it's starting to look really good to me. :) The next step is to integrate some kind of horizontal menu.
For example, colors can still be changed: he tried to stick to green and yellow, is this ok? Any comments?
« Last Edit: 23 December 2010, 12:15:41 by Cygal »

 

anything