Opened 11 years ago

Closed 10 years ago

Last modified 10 months ago

#8956 closed patch

ScummVM website re-write as per 2009-02-15

Reported by: SF/fredrik_w Owned by: sev-
Priority: normal Component: Web
Keywords: Cc:
Game:

Description

Heya,

Here's the ScummVM website re-write files. A bunch of directories are emtpy and need to be filled with the content of the old website, namely:
- data/media
- data/news
- data/screenshots
- downloads

I haven't written any documentation yet, but the code should be pretty straightforward. There is an array in index.php the controlls what Controller::index() function to call. $_GET['p'] holds the requested page, which is the key in the array. It defaults to displaying the main page when no page is asked for, or if it's not found in the array.

There are still somethings that aren't complete, mostly related to the screenshots. The screenshot viewer on the main page is hardcoded to show just one picture. I haven't written the javascript for it yet. The same goes for the random screenshot found under the screenshots section.

Oh, and the XML-file for the downloads is kind of "half-messy". I had some ugly code that made it auto-complete paranthesises around the file sizes that I removed some time ago. I also started to fix the XML-file but kind of stopped in the middle. With 0.13.0 around the corner I won't fix it until after the release.

I would also like to find a nicer way to position the purple tentacle. For now I'm using min-height, but I'd like to find a better way.

Hopefully I didn't remove any file needed to run it, if so shout really high and I'll upload it.

Regards,
Fredrik

Ticket imported from: #2603381. Ticket imported from: patches/1061.

Attachments (16)

ScummVM_website_rewrite_2009-02-15.tar.bz2 (190.3 KB ) - added by SF/fredrik_w 11 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS)
ScummVM_website_rewrite_2009-02-22.tar.bz2 (224.0 KB ) - added by SF/fredrik_w 11 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)
website-screesnhots-bug.jpg (141.7 KB ) - added by fingolfin 11 years ago.
Small bug in the new screenshots section
ScummVM_website_rewrite_2009-03-01.tar.bz2 (214.2 KB ) - added by SF/fredrik_w 11 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)
downloads_page_error.jpg (138.6 KB ) - added by joostp 11 years ago.
Downloads page alignment problem on Safari
ScummVM_website_rewrite_2009-04-11.tar.bz2 (234.8 KB ) - added by SF/fredrik_w 10 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)
ScummVM_website_rewrite_2009-04-11.tar.2.bz2 (235.0 KB ) - added by SF/fredrik_w 10 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)
ScummVM_website_rewrite_2009-04-12.tar.bz2 (230.7 KB ) - added by SF/fredrik_w 10 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)
ScummVM_website_rewrite_2009-04-25.tar.bz2 (229.4 KB ) - added by SF/fredrik_w 10 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)
ScummVM_website_rewrite_2009-05-05.tar.bz2 (223.7 KB ) - added by SF/fredrik_w 10 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)
ScummVM_website_rewrite_2009-05-06.tar.bz2 (224.2 KB ) - added by SF/fredrik_w 10 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)
ScummVM_website_rewrite_2009-05-07.tar.bz2 (224.4 KB ) - added by SF/fredrik_w 10 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)
credits.pl.patch (6.6 KB ) - added by SF/fredrik_w 10 years ago.
credits.pl patch to generate credits.xml for the new site.
news.patch (10.7 KB ) - added by SF/fredrik_w 10 years ago.
Patch for news files (images reside in data/news/ instead of news/ now).
ScummVM_website_rewrite_2009-05-17.tar.bz2 (222.8 KB ) - added by SF/fredrik_w 10 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)
ScummVM_website_rewrite_2009-05-22.tar.bz2 (232.3 KB ) - added by SF/fredrik_w 10 years ago.
ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

Change History (71)

by SF/fredrik_w, 11 years ago

ScummVM website re-write (PHP, Smarty templates, CSS)

comment:1 by fingolfin, 11 years ago

Finally got around to downloading this. I tried it on my Mac OS X system, which has Apache and PHP preinstalled. First I had to chmod a+w the "include/smarty/template_c", as it was otherwise giving an error. Now I don't get an error, just a blank page. Looking at its source, it is:

<div class="box">
<a name="<br />
<b>Fatal error</b>: Call to a member function getDate() on a non-object in <b>/Users/mhorn/Sites/scummvm-newweb/include/smarty/template_c/%%A9^A9B^A9B6E5C0%%news.tpl.php</b> on line <b>9</b><br />

comment:2 by SF/fredrik_w, 11 years ago

Did you copy the news items from the old web? Otherwise it's probably trying to call getDate() on a boolean.

It seems like I forgot to mention that the error handling isn't done yet, sorry. My plan is do add that last, just throwing exceptions where it fails. Of course I'd write an exception handler that makes that appear in some nice way on the webpage.

by SF/fredrik_w, 11 years ago

ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

comment:3 by SF/fredrik_w, 11 years ago

I've uploaded a new tarball. Now the screenshots section is alive and kicking!

You should notice that if you turn off javascripts it'll still work. For the javascripts I've used jQuery and the slimbox2 (lightweight lightbox clone) plugin.

What's left (that I can think of at the moment) is some general polishing, error handling (exceptions), some CSS bugs (look at the footer on "short" pages). And whatever you guys find/have opinions about.

comment:4 by fingolfin, 11 years ago

Thanks for the update. No, I didn't copy the news items from the old web, how should I have known... :). Also, I would expect it to die with a "print 'Could not find news directory', or even better, just make it work if no news items are present.. ;).

So I downloaded your new tarball, and copied the news/ directory from the current website. It still produces the following output:

<div class="box">
<a name="<br />
<b>Fatal error</b>: Call to a member function getDate() on a non-object in <b>/Users/mhorn/Sites/ScummVM_website/include/smarty/template_c/%%A9^A9B^A9B6E5C0%%news.tpl.php</b> on line <b>9</b><br />

So, I still haven't had a chance to look at the whole thing :-/.

comment:5 by fingolfin, 11 years ago

OK, as always, in the millisecond I pressed the update button I noticed my own stupidity, but of course then it was too late... :-). Of course you *did* write that we should populate data/news/, and I only missed out on it, due to my own fault. And now I put the news into the wrong dir... :) After correcting that, the page loads, yippie :). (though I still think it should handle no news items more gracefully ;).

comment:6 by fingolfin, 11 years ago

OK, so in addition to what you described, it turns out I also have to copy the content of the old images/ dir over, fair enough. anything else besides images, media, screenshots, news and download that I would have to copy?

Overall, it looks pretty awesome, good work so far :). I am sure the remaining small problems can all be resolved.

The screenshots system is very cool. A quick bug report: On the screenshots page, I went to "/?p=screenshots&cat=lec&game=zak", i.e. the page for zak. My window was so narrow that it displayed the images in two columns. Now, for some images the tagline fits into one line, for others it takes two lines. This results in a "gap", see attached screenshot.

comment:7 by fingolfin, 11 years ago

Owner: set to sev-

by fingolfin, 11 years ago

Attachment: website-screesnhots-bug.jpg added

Small bug in the new screenshots section

comment:8 by SF/fredrik_w, 11 years ago

Yeah, I hit the screenshots bug as well. It's because the images are floated and the webbrowser is handling them differently. I'll try and see if I can find some solution to the problem.

And I did write in my comment that error handling isn't done yet. I guess you're too tired/eager to test it to read my comments. :-P

comment:9 by SF/fredrik_w, 11 years ago

Oh, and I don't think there's any more files that need to be copied other than mentioned. But hey, if it breaks you're probably missing some files. ;-)

SF.net only allows 256kB sized attachments and I didn't feel like spending time to create multiple files when you already have the old files.

comment:10 by wjp, 11 years ago

Looks very nice and clean; well done. A couple of minor points:

Touche screenshots are labelled Touch&eacute; ([vEX] mentioned on IRC this would be fixed soon.)

On short pages (e.g., contact, press) there's a little 'gap' in the form of a rounded corner below the main content on the left. (Both in firefox and opera.)

IMO, the fading/animation effect in the screenshots viewer is very annoying, and I would much prefer it to be disabled.

comment:11 by fingolfin, 11 years ago

I *did* read your comment, and your statement on missing exception handling. I just find it unusual to write error handling last, and also find it unusual that not having any news items or screenshots would cause an error in the first place.

comment:12 by SF/fredrik_w, 11 years ago

Well, half of the error handling was written, though most of them just returned false and then in the templates there was no check for that. But as I planned on using exceptions and a custom exception handler I figured to wait before converting them.

wjp: Regarding the gap, that's the footer that isn't fixed at the bottom yet.

The fading/animation thing is up to you guys to decide whether it should be kept or not. [1] details the different settings one can change.

[1] http://www.digitalia.be/software/slimbox2#usage

by SF/fredrik_w, 11 years ago

ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

comment:13 by SF/fredrik_w, 11 years ago

I uploaded a new tarball, this one fixes the problems with HTML-entities that wjp reported. It also fixates the the footer to the bottom. So now it should look okay in all modern browsers, though IE6 doesn't support min-height so I still have to come up with a solution. Also implemented the Atom and RSS feeds and got rid of the temporary 'rewrite.css' file (I was only using it for testing).

I've added error handling basics, though at the moment I don't catch the exceptions anywhere but just let them get displayed. I want input from you first on what to do when someone asks for i.e. a non-existing news item or screenshot category. Should I just display the list of news items/screenshots galleries?

comment:14 by sev-, 11 years ago

I really like it. Downloads page, though is displayed incorrectly in Firefox 3. At least the top box has incorrec alignment, also the bullets thtere are standard and not skinned.

Otherwise, the work is impressive.

comment:15 by sev-, 11 years ago

Ah, another remark is about the bottom validity logos. They're aligned to the left instead of the center.

comment:16 by SF/fredrik_w, 11 years ago

The downloads page looks fine to me in Firefox 3.0.6 (Linux x86_64), think you could provide a screenshot?

I've intentionally left the footer logos left aligned, if you look you'll notice that the GOG one is missing from the right side as well. I'm not really sure what to do about it, I know there was quite the debate about it. Do they provide any image that would fit into the footer ones? I'm not really sure it fits in on the right side with the menu.

by joostp, 11 years ago

Attachment: downloads_page_error.jpg added

Downloads page alignment problem on Safari

comment:17 by joostp, 11 years ago

Looks very good! Seems to render just fine on Safari on OSX, except for the downloads page alignment (which _sev already pointed out). This also happens on Firefox2 on Linux, so supposedly it's a more generic problem.

I've attached a screenshot, hope it helps.
File Added: downloads_page_error.jpg

comment:18 by criezy, 11 years ago

The Game Demos page has also the same alignment issue than the one reported for the Downloads page (on Safari 3 OSX).

comment:19 by SF/fredrik_w, 11 years ago

Okey, that alignment issue should now hopefully be fixed (assuming I managed to upload the files correctly).

No new tarball yet though, but it's available on the stage: http://fredrik_w.users.sourceforge.net/

comment:20 by spookypeanut, 11 years ago

Looks good! Just noticed one tiny flaw: on the documentation page, the ohloh widget is on the same line as the README link. Otherwise, looks ready to go to me (firefox 3 on ubuntu if you're keeping score).

comment:21 by sev-, 11 years ago

Now mentioned rendering bug is gone.

Speaking of the GOG.com button. I would like to have it in both places just like the donation button. Main reason for that is that it is more visible there. As of the button size, GOG.com designer says that that button size is too small, i.e. he will be struggling to squeeze all info in it. So if you have some gfx skills (I don't) and can provide an updated image, that would be really nice.

Still the buttons on the bottom should really be distributed horizontally, not crowded like they're now. This looks ugly.

Another note. For the random screenshot on the start page you should use thumbnail, not the full version of it. As that will increase loading time badly.

Also I would prefer to use mod_rewrite or "ForceType application/x-httpd-php" to make the URLs look more nicely and easier to remember.

I see that our old(ish) technology site is going to be replaced by an excellent product!

comment:22 by fingolfin, 11 years ago

The SF.net logo system has been changed. You may wish to look at <https://sourceforge.net/community/forum/topic.php?id=4666> and switch to the new logo (which also links to a different place now).

comment:23 by fingolfin, 11 years ago

One more thing (this is really for the "TODO" list, and should not be a blocker for this patch): As I mentioned in the past, it would be nice to improve our download page. It is big and messy right now. Some ideas (mind you, ideas, and all can be altered):

* Only show the most important downloads by default, and use AJAX to implement a "Show more" button/ link.

* Use auto-detection of the users OS to offer a big default download button. You know, like on <http://www.mozilla-europe.org/firefox/>. With the other downloads below.

* In fact this big download button could already be on the start page.

* The game downloads are confusing. People who want a specific game get lost. Ideas to improve this:
** Separate this into multiple sections, one for each game. Clearly distinguish (by space, size, icons, whatever) between the "main" download, and add-ons. E.g. have a section "Lure of the Temptress", and below that five "big" links / buttons for each language version. These could be in a table instead of a list, too, BTW.
** The "lure.dat" in the above example should already be pre-installed for most users, right? So, maybe mark it accordingly with a comment: "The following file may already have been bundled with your copy of ScummVM." Or so. Or at least instructions on how to use lure.dat ... Same for other data files.

comment:24 by fingolfin, 11 years ago

So, how do we proceed with this?

comment:25 by sev-, 11 years ago

hot on the front page, put GOG.com button (in two places), center the buttons on the bottom, bring the URL structure back, so old links will work, and I'm giving a green light to it.

comment:26 by sev-, 11 years ago

Fix screenshot on the front page, put GOG.com button (in two places), center the
buttons on the bottom, bring the URL structure back, so old links will
work, and I'm giving a green light to it.

comment:27 by SF/fredrik_w, 11 years ago

Hi, sorry for the lack of updates recently, but I've been pretty busy. I'll try and finish most of the issues during the week.

comment:28 by fingolfin, 10 years ago

What is the status of this item?

comment:29 by SF/fredrik_w, 10 years ago

Unfortunally it's progressing very slow due to real life. I've uploaded an updated tarball with some fixes since the last one.

The downloads section is still outdated and I haven't fixed the height issue with IE6 yet. Then I think it's just the mod_rewrite stuff left, I believe all other sections should be done now.

by SF/fredrik_w, 10 years ago

ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

by SF/fredrik_w, 10 years ago

ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

comment:30 by SF/fredrik_w, 10 years ago

Uploaded a new tarball with the downloads section updated.

Still need to fix that darn IE6 bug still, and then I think it's just mod_rewrite stuff left. Need to check everything over of course to make sure I don't miss anything.

comment:31 by SF/fredrik_w, 10 years ago

Just uploaded it all to the sf.net developer web a.k.a. the re-write stage [1], so feel free to poke around and report any problems. All SVN builds will look blank, that's because there are no files in the downloads folder. Think it's possible to symlink them to the real ones, or should I just upload them?

[1] http://fredrik_w.users.sourceforge.net/

by SF/fredrik_w, 10 years ago

ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

comment:32 by SF/fredrik_w, 10 years ago

Uploaded a new tarball, as well as updated the stage. The IE6 min-height issue is now fixed.

What I can think of that's left is:
- Update all sections that have changed (faq/screenshots/compatibility and possibly downloads)
- Properly space the bottom bar badges
- Double check all links (incase I screwed up on the downloads)
- Verify all pages in all browsers so that noone accidentaly broke while another got fixed
- mod_rewrite

For the FAQ it would be nice if someone could tell me how those crazy ID numbers are generated, I've not managed to get them with my XSL. Which means I'd either have to put them in the XML, or set up mod_rewrite to map those to the new style (#<section>_<number>).

by SF/fredrik_w, 10 years ago

ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

comment:33 by SF/fredrik_w, 10 years ago

Uploaded a new tarball. I've now verified that the pages render correctly in the following browsers:
- Apple Safari 4 Public beta (528.16)
- Google Chrome 1.0.154.48
- Microsoft Internet Explorer 6.0.2900.5512.xpsp.080413-2111
- Midori 0.1.6
- Mozilla Firefox 2.0.0.20
- Mozilla Firefox 3.0.9
- Opera 9.64

There are some pages that don't validate, and I just noticed that all namespaces in the XML-files are XHTML, and not HTML. Need to fix that, as well as the XMLParser or it'll freak out.

comment:34 by SF/fredrik_w, 10 years ago

Uploaded a new tarball (as well as the stage), all pages are now complete and synched against r40328. The "only" thing missing is mod_rewrite rules, and then updating all internal links.

I've also created a small GOG-button which you can view on the stage, think that is okay with GOG?

comment:35 by spookypeanut, 10 years ago

All looks good to me. Found a slight issue though: why does Lure appear twice in the screenshots list? once in the revolution section, and once in the others. Is it related to the fact that the (new) T7G screenshots aren't there?

comment:36 by SF/fredrik_w, 10 years ago

Oops. Looks like even though I double checked it, I managed to miss it. It's added twice in my converter script that generates the XML-file from the scr-screenshots.php/screenshots.csv files. Nice catch, I'll fix it right away!

by SF/fredrik_w, 10 years ago

ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

comment:37 by SF/fredrik_w, 10 years ago

Uploaded an updated tarball and updated the stage, it now lists "The 7th Guest" instead of Lure again under others.

comment:38 by sev-, 10 years ago

Really, really nice. And I like your GOG.com button. I.e. we need to replace the one on the right panel too.

I think we're ready Max, what would you say?

comment:39 by fingolfin, 10 years ago

I am busy at work. I'll look at it tonight or tomorrow.

comment:40 by fingolfin, 10 years ago

I will get to it in detail tonight, but on quick test in a local install, it seems to work well.

One reason I look forward to this transition: It should make it possible to make some things "saner" than they currently are. E.g. in screenshots.csv, we currently have each line as
maincategory | subcatgeory | running number | filename | caption
where the first three are *numbers*. E.g.
0|0|0|lec/maniac/scummvm_0_0_0|Maniac Mansion (NES)

With the new code, it should be trivial to change that to just

lec|maniac|lec/maniac/scummvm_0_0_0|Maniac Mansion (NES)

and use the sorting implied by the line order. Or just do without the CSV and store this data in a PHP file as displayed in converters/demos_convert.php (although this seems to violate the separation between data and code ?))

Anyway, these are just some musing for *future* improvements, after this has been committed :)

comment:41 by SF/fredrik_w, 10 years ago

Those converters are just small CLI tools for converting from the old codebase to XML-files. If you check data/screenshots.xml you'll see the new format, the CSV-file isn't used at all.

What I'd really need help with is make the faq-xml.xsl generate the same IDs you have got generated with the current XSL. I just have no idea on how to do that. Otherwise I'll have to write a bunch of ugly mod_rewrite rules mapping the old F.A.Q. IDs against the new style (#<section>_<question>).

by SF/fredrik_w, 10 years ago

ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

comment:42 by SF/fredrik_w, 10 years ago

I've uploaded a new tarball, as well as updated the stage, mod_rewrite rules are now in place.

http://fredrik_w.users.sourceforge.net/<anything>.php -> http://fredrik_w.users.sourceforge.net/<anything>/
So all old URLs will get forwarded, however any args passed will not work:
documentation.php?view=md5 -> documentation/?view=md5 which just leaves you at the documentation page.

Should I spend some time on trying to take care of those?

Doesn't this URL look beautiful or what?
http://fredrik_w.users.sourceforge.net/screenshots/lec/tentacle/

comment:43 by fingolfin, 10 years ago

I noticed a bug: http://fredrik_w.users.sourceforge.net/screenshots/lec/zak/ shows stuff it shouldn't show.

Don't wory about the args style URLs, I'd say.

The IDs in the FAQ are generated in different ways, depending on which Docbook processing tool one uses. I think they are generated using some kind of hashing or so. I don't know either.

comment:44 by SF/fredrik_w, 10 years ago

Fixed the bug, there was a small error in the screenshots converter script.

What do we do about the FAQ then? All old links which use /faq.php#<id> will not point to the question/answer anymore if we don't have the same IDs.

I'm actually considering making some effort to fix some of the old URLs with args, namely the compatibility and news section as it would be really nice if those were correct. The screenshots ones I can't map against since I don't use the number system for the re-write.

comment:45 by SF/fredrik_w, 10 years ago

Was actually really easy to do (for once!). :-)

http://fredrik_w.users.sourceforge.net/compatibility.php?version=0.9.1&details=zak

by SF/fredrik_w, 10 years ago

ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

comment:46 by sev-, 10 years ago

One thing is left to do:
- Replace GOG.com icon on the right with that one which you drew, i.e. smaller one.

Frederik, please, tell me when you will be able to do that, and we will sit together and push the site.

by SF/fredrik_w, 10 years ago

Attachment: credits.pl.patch added

credits.pl patch to generate credits.xml for the new site.

comment:47 by SF/fredrik_w, 10 years ago

Uploaded a new tarball, as well as updated the stage. As well as replace the GOG-button I've also synced against the latest SVN (r40644).

Also attached patches for credits.pl and the news items which I've updated since with the rewrite news/ resides in data/news/ (fixing images links).

comment:48 by SF/fredrik_w, 10 years ago

jvprat just found a bug with the mod_rewrite rules for the compatibility list, fixed tarball uploaded.

by SF/fredrik_w, 10 years ago

Attachment: news.patch added

Patch for news files (images reside in data/news/ instead of news/ now).

by SF/fredrik_w, 10 years ago

ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

comment:49 by SF/fredrik_w, 10 years ago

Uploaded new tarball that's synced against r40652 (BS1 subtitles download/news item).

comment:50 by sev-, 10 years ago

Excellent! We are ready for the prime time. When you will have some time to push the site together? Also I would like you to become our official website maintainer.

comment:51 by SF/fredrik_w, 10 years ago

Well, thursday is a common holiday in Sweden, and I'm planning to take friday off, so that's a 4-day span when I should be able to find some time.

by SF/fredrik_w, 10 years ago

ScummVM website re-write (PHP, Smarty templates, CSS, javascripts)

comment:52 by SF/fredrik_w, 10 years ago

Uploaded a new tarball synced against latest changes (downloads page, extras), r40788.

comment:53 by sev-, 10 years ago

Exellent work! And welcome to the team

comment:54 by sev-, 10 years ago

Status: newclosed

comment:55 by digitall, 10 months ago

Component: Web
Note: See TracTickets for help on using tickets.