I am starting to work on designing (and creating) a completely new, professional layout engine for all wikimedia websites that should be launched with phase IV of the software.
First, from what I understand, the main idea for phase IV is that all wikipedias sit on a single software installation (and that's great!), I will add: (Just to give the general direction to tease you up)
* Layout should be separated completely from the PHP code. I will check out a template engine like smarty (http://smarty.php.net/) to see how to do that effectively.
* Site look will be redesigned to fit the 21st century (new "kick-ass" look, yes that's its name :) ). The main problem with all current designs is that they basically still think in terms of "UseModWiki". ie. sooooo 95' single content HTML with no color, dynamics, and no usability features and even GodDamnHorribleCamelCase.
I think more in terms of making a Content Management System, dynamic content type layout, which means:
* Boxes, structure and order. Everything on the page is structured dynamically. (every editable box can have a cute "edit" and "print" button on the top right corner, for example)
* Graphics, color, icons, friendliness, [put a cool thing here], ... (of course not too much stickyness .. :-))
* A page can present more than just the article. Additional content may be: TOC on the side box. Previous versions. Recent changes, announcements, news, etc. (whatever we'll choose, or the user will customize)
* No more dedicated stand-alone "special pages". These are important features that deserve to be integrated (somehow) into the engine itself. ie. forget those yellow backgrounds etc. etc.
* Discussions can be integrated into the layout. ie. they may sit after the article itself like blogs do, and may or may not be a wiki. (just an idea)
* Interface can change to whatever language the user specifies in their preferences. A side effect of the single installation, a user will able to work, say on an article in Swedish with the English interface.. (don't flame me for this, I don't know if technically it would be viable, just giving a direction...)
* W3C XHTML 1.0 Transitional/CSS. A really basic one for a modern site (I even use the strict XHTML 1.1 on my site). And yes, I will make sure it uses features that are compatible with browsers from IE 4.0+ and Netscape 6. See http://www.w3.org/ and http://www.w3schools.com/
* etc. etc. etc..
See http://www22.brinkster.com/rotemdan/Wikipedia-Vorbis-site-rip.html for a little inspiration of what I'm talking about. (I basically ripped the vorbis site, pasted the seinfeld article and made some changes to the text, there's still junk on the bottom and side).
This is an enormous task. But I really think this encyclopedia deserves to look like a modern site. I predict it will take about 2-3 months to formulate the main targets and to understand what I'm dealing with. (and to have a small working version of the engine)
I have enough PHP skills (but not too much free time as I'm a full-time student) to make a basic version of a content system. I was employed for about about a year in a software company (a couple of years ago) and worked with ASP and SQL a lot so I know a bit about dynamic content. (I think I'm getting the PHP thing..)
If anyone is interested in working on this or a similar project, please let me know. Also, please give me a complete list of the Phase IV design targets so I can generally understand how exactly the new website would be formed.
Cheers, Rotem
P.S: please don't start coming with specific suggestions on how this and that feature should/shouldn't be/look/behave. The time spent on discussions should be put in actually writing the PHP/XML code (and applying some common sense). Replying to long messages on mailing lists is really time consuming for me. I would just rather work on a preview version/design etc. get feedback, work, get feedback etc..
I have hand-coded from scratch a concept demo of the phase IV new dynamic layout I'm thinking of. This should be XHTML 1.1/CSS compatible.
http://www22.brinkster.com/rotemdan/phase4-concept-demo.htm
NOTE: please view with Mozilla (tested on 1.4), IE doesn't display the widths correctly (though it does work somehow) and the transperant logo. I haven't had the time to tweak it for IE yet.
Regards, Rotem
Not bad, i like it too...
I dont see language links... I dont see the needs for wimimedia, wikitionary....... Seinfeld is never in a big header. the title should be bigger, so we can tell its the title. It just needs to be bigger
i dont like the talk page there.....
Lightning
----- Original Message ----- From: "Rotem Dan" rotem_dan@yahoo.com To: wikitech-l@wikipedia.org Sent: Monday, July 21, 2003 12:41 PM Subject: [Wikitech-l] Re: Phase IV concept demo
I have hand-coded from scratch a concept demo of the phase IV new dynamic layout I'm thinking of. This should be XHTML 1.1/CSS compatible.
http://www22.brinkster.com/rotemdan/phase4-concept-demo.htm
NOTE: please view with Mozilla (tested on 1.4), IE doesn't display the widths correctly (though it does work somehow) and the transperant logo. I haven't had the time to tweak it for IE yet.
Regards, Rotem
Wikitech-l mailing list Wikitech-l@wikipedia.org http://mail.wikipedia.org/mailman/listinfo/wikitech-l
Creative Chemistry wrote:
Not bad, i like it too...
I dont see language links... I dont see the needs for wimimedia, wikitionary....... Seinfeld is never in a big header. the title should be bigger, so we can tell its the title. It just needs to be bigger
i dont like the talk page there.....
Lightning
I will make the header bigger. I also forgot to put "From wikipedia, the free encyclopedia".
This is just to show the concept of the dynamic boxes, XHTML, CSS and complete content-layout separation using CSS classes (Content Management System style), so I didn't have time to put the language links (and many other features). And as for the talk page, theoretically, it would disappear if press the [X] button on its top right corner :-)
I haven't given much though for the design yet. You can always rip the page and improve the style if you want (the wiki way ;-) )
Rotem
Rotem-
I have hand-coded from scratch a concept demo of the phase IV new dynamic layout I'm thinking of. This should be XHTML 1.1/CSS compatible.
When you say coded, do you mean coded, or written? Is there any actual PHP code? I prefer to use "code" for code only, and "write" for HTML/CSS.
Having the page-specific elements "attached" to the page like this is kind of neat. This also applies to delete, protect, watch etc. Putting discussion and content on the same page looks interesting, but won't work well for very long pages. Perhaps there should be a maximum length at which the discussion is linked to instead of embedded.
The search box lacks a go button equivalent. Perhaps something like Everything2's "[ ] ignore exact" could be used.
The discussion background is too dark in this demo, and the table separators are too thick.
The meaning of the [+] is not intuitively clear to me. And what would the [X] for the article display window do?
Please try to think of good ways to integrate the features that are currently running on test.wikipedia.org, namely - section editing - table of contents - appending to the bottom of a page on talk pages ("Post a comment")
Regards,
Erik
Erik Moeller wrote:
Rotem-
I have hand-coded from scratch a concept demo of the phase IV new dynamic layout I'm thinking of. This should be XHTML 1.1/CSS compatible.
When you say coded, do you mean coded, or written? Is there any actual PHP code? I prefer to use "code" for code only, and "write" for HTML/CSS.
Having the page-specific elements "attached" to the page like this is kind of neat. This also applies to delete, protect, watch etc. Putting discussion and content on the same page looks interesting, but won't work well for very long pages. Perhaps there should be a maximum length at which the discussion is linked to instead of embedded.
The search box lacks a go button equivalent. Perhaps something like Everything2's "[ ] ignore exact" could be used.
The discussion background is too dark in this demo, and the table separators are too thick.
The meaning of the [+] is not intuitively clear to me. And what would the [X] for the article display window do?
Please try to think of good ways to integrate the features that are currently running on test.wikipedia.org, namely
- section editing
- table of contents
- appending to the bottom of a page on talk pages ("Post a comment")
Regards,
Erik
This is static, hard-coded XHTML :-) you are right, "written" is more precise... My usual answer: ofcourse ofcourse ofcourse.. yes limiting dicussion length is good, button for search, interlanguage links, TOC, section editing, change damn ugly discussion background, "add a new message", bigger titles, mysetrious [+], yada yada yada. good good good will be all changed. I just don't have time, will work on it later this week!! :-)
Rotem DAN
Rotem Dan wrote:
I have hand-coded from scratch a concept demo of the phase IV new dynamic layout I'm thinking of. This should be XHTML 1.1/CSS compatible.
http://www22.brinkster.com/rotemdan/phase4-concept-demo.htm
NOTE: please view with Mozilla (tested on 1.4), IE doesn't display the widths correctly (though it does work somehow) and the transperant logo. I haven't had the time to tweak it for IE yet.
It could be great as an optional skin. But the default skin must be usable in: * Netscape 4 * text browser * speech browsers
Without the [x] and [+] which are confusing, and without the overly ambitious ideas for dynamic stuff, it could be good as a default layout if coded carefully.... this is *STILL* made with tables :-( (and it needs to be a bit lighter -- it's very dark and "heavy" at the moment)
Rotem Dan wrote:
I have hand-coded from scratch a concept demo of the phase IV new dynamic layout I'm thinking of. This should be XHTML 1.1/CSS compatible.
http://www22.brinkster.com/rotemdan/phase4-concept-demo.htm
NOTE: please view with Mozilla (tested on 1.4), IE doesn't display the widths correctly (though it does work somehow) and the transperant logo. I haven't had the time to tweak it for IE yet.
It looks really nice. It doesn't display properly in Opera 7, either, for the record.
- Stephen G.
On 22-07-2003, Stephen Gilbert wrote thusly :
Rotem Dan wrote:
I have hand-coded from scratch a concept demo of the phase IV new dynamic layout I'm thinking of. This should be XHTML 1.1/CSS compatible.
http://www22.brinkster.com/rotemdan/phase4-concept-demo.htm
NOTE: please view with Mozilla (tested on 1.4), IE doesn't display the widths correctly (though it does work somehow) and the transperant logo. I haven't had the time to tweak it for IE yet.
It looks really nice. It doesn't display properly in Opera 7, either, for the record.
I agree. It is really nice and way to go. Please keep on working. Although people should have a variety of choices.
BTW Lynx reports "Bad HTML".
Regards, Kpjas.
I have made a number of changes to the demo. Most of them are "behind the scenes" regarding the use of tables, and browser compatibility.
Version 1.1 of the demo: http://www22.brinkster.com/rotemdan/phase4-demo-v1-1.htm
phase4-metallic.css (if you want to make a new skin or modify the current one): http://www22.brinkster.com/rotemdan/phase4-metallic.css
Main points changed: * Completely table free, uses only <div> and <span> tags for positioning. I made the right column (article, discussion etc.) appear first on the HTML code (using absolute positioning) and the left to appear second. As a consequence, it will be more friendly to text browsers, speech browsers etc.
Current problems: Absolute positioning looks incorrect on Opera browser. (a bit too much to the top left), I will try to investigate this..
* "From wikipedia..", Other languages, Watch this page, Move this page, Delete this page, Search link, etc. added.
* Post a comment (for discussion). Problem: I haven't figured out how to use the "width: 100%" property without the extreme page widening on IE. will be solved.
* Minor changes to skin. Note: this is just the "metallic" skin! copy "phase4-metallic.css" from the link I gave above, edit it, and presto, you have a new skin! (content is completely separated from layout using CSS and strict XHTML, I was very careful in this).
It works with Mozilla (tested 1.4) and Explorer (tested 6.0) and positioning has a slight problem with Opera (tested 7.11). I also tried them on 800x600 and 1024x768 resolutions and they both look the same.
Regards, Rotem
Rotem Dan wrote:
I have made a number of changes to the demo. Most of them are "behind the scenes" regarding the use of tables, and browser compatibility.
Version 1.1 of the demo: http://www22.brinkster.com/rotemdan/phase4-demo-v1-1.htm
phase4-metallic.css (if you want to make a new skin or modify the current one): http://www22.brinkster.com/rotemdan/phase4-metallic.css
Nice. But please use a serif font for body text. It's a bit dark -- too much grey I'm not sure the -media, -tionary, -textbook links are a good idea. I don't see the point of appending the talk page
On 24-07-2003, tarquin wrote thusly :
Rotem Dan wrote:
I have made a number of changes to the demo. Most of them are "behind the scenes" regarding the use of tables, and browser compatibility.
Version 1.1 of the demo: http://www22.brinkster.com/rotemdan/phase4-demo-v1-1.htm
phase4-metallic.css (if you want to make a new skin or modify the current one): http://www22.brinkster.com/rotemdan/phase4-metallic.css
Nice. But please use a serif font for body text. It's a bit dark -- too much grey I'm not sure the -media, -tionary, -textbook links are a good idea. I don't see the point of appending the talk page
Nice, nice.
I would be even happier with more contrasting lettering - black on dark grey is not. And "Wikipedia" under the logo should stand out more.
Regards, Kpjas.
Rotem Dan wrote:
I am starting to work on designing (and creating) a completely new, professional layout engine for all wikimedia websites that should be launched with phase IV of the software.
First, from what I understand, the main idea for phase IV is that all wikipedias sit on a single software installation (and that's great!), I will add: (Just to give the general direction to tease you up)
I'm totally confused now. Phase IV? I thought we're going to stick with the current PHP code and only improve it over time. When I suggested to write a Phase-IV software to take care of problems such as single-login and better integration, everyone objected and told me it wasn't worth it.
So, what exactly is going on? What are the plans?
Thanks, Timwi
On Mon, 2003-07-21 at 11:32, Timwi wrote:
I am starting to work on designing (and creating) a completely new, professional layout engine for all wikimedia websites that should be launched with phase IV of the software.
I like the start. We definitely need a new look for the front-end. Whether or not that's accompanied by back-end software changes is a separate issue, and indeed I'm inclined to keep the two apart to take advantage of our diversity of talents: coders generally aren't good artists, and vice versa.
I'm still working on cleaning up the wikitext syntax before I'd consider doing any major back-end work.
Timwi wrote:
I'm totally confused now. Phase IV? I thought we're going to stick with the current PHP code and only improve it over time. When I suggested to write a Phase-IV software to take care of problems such as single-login and better integration, everyone objected and told me it wasn't worth it.
So, what exactly is going on? What are the plans?
Thanks, Timwi
OK, I arbitrarily announced it as phase IV, you can call it phase III, V, VI whatever :-) , it doesn't matter really, as long as I find the time to code it..
Rotem
Rotem Dan wrote:
Timwi wrote:
I'm totally confused now. Phase IV? I thought we're going to stick with the current PHP code and only improve it over time. When I suggested to write a Phase-IV software to take care of problems such as single-login and better integration, everyone objected and told me it wasn't worth it.
So, what exactly is going on? What are the plans?
Thanks, Timwi
OK, I arbitrarily announced it as phase IV, you can call it phase III, V, VI whatever :-) , it doesn't matter really, as long as I find the time to code it..
Code what? Phase IV would mean to me you're re-writing the entire Wikipedia software. From your demo, it seems you are only coding, as you call it, a content-management system. Is that right?
Greetings, Timwi
Timwi wrote:
Code what? Phase IV would mean to me you're re-writing the entire Wikipedia software. From your demo, it seems you are only coding, as you call it, a content-management system. Is that right?
Greetings, Timwi
Yep, a content mangement system means that 1. No more hardcoded HTML inside the PHP script. Instead the CMS gets templates like XML, Smarty etc. (I really need to investigate this more) 2. Special pages, talk pages, and the whole interface are no more hardcoded as "stand-alone" pages, but imported classes that return templates the CMS decides to lay however wherever it wants on the generated page.
For example, the demo I did had an Article, a talk page and a small recent changes box that can be enlarged on the same page. (and of course more is possible)
Basically taking the CVS code as is and drastically abstracting it + new layout manager, from a "conservative" viewpoint, I would call it a new "phase" because it introduces more bugs. However most of the SQL queries, diffs, wiki syntax parser, RC etc. "Business Logic" stays the same.
I will elaborate more as I'll be drown into the code... :-)
Rotem
Rotem Dan wrote:
- Layout should be separated completely from the PHP code. I will
check out a template engine like smarty (http://smarty.php.net/) to see how to do that effectively.
Yes!
- Site look will be redesigned to fit the 21st century (new "kick-ass"
look, yes that's its name :) ). The main problem with all current designs is that they basically still think in terms of "UseModWiki". ie. sooooo 95' single content HTML with no color, dynamics, and no usability features and even GodDamnHorribleCamelCase.
Yes... in part. But the default skin must be backwards-compatible -- this is the *curse* of all web design, sadly. Believe me, if I could simply design to CSS standards... *dreams*
I think more in terms of making a Content Management System, dynamic content type layout, which means:
- Boxes, structure and order. Everything on the page is structured
dynamically. (every editable box can have a cute "edit" and "print" button on the top right corner, for example)
hmmmmmmm.... sounds like complications Wikipedia = simple to edit. simple to learn.
- A page can present more than just the article. Additional content
may be: TOC on the side box. Previous versions. Recent changes, announcements, news, etc. (whatever we'll choose, or the user will customize)
confusing... on advanced skins, maybe. But one thing I want to improve on the current Standard skin: *too much clutter*. Let's not replace clutter with more clutter!
- No more dedicated stand-alone "special pages". These are important
features that deserve to be integrated (somehow) into the engine itself. ie. forget those yellow backgrounds etc. etc.
Why? I don't get this.
- Discussions can be integrated into the layout. ie. they may sit
after the article itself like blogs do, and may or may not be a wiki. (just an idea)
Not a good idea. We have an audience of readers. They don't need to see backstage unless they ask to. Their modems and our bandwidth doesn't need to pump out talk pages that aren't needed.
- Interface can change to whatever language the user specifies in
their preferences. A side effect of the single installation, a user will able to work, say on an article in Swedish with the English interface.. (don't flame me for this, I don't know if technically it would be viable, just giving a direction...)
hmmm.... yeah, sure why not. But bear this in mind: when I make interlanguage links, the only clue I have of which language I am on is the interface! (this is why my design proposals specify the language in the header!)
- W3C XHTML 1.0 Transitional/CSS. A really basic one for a modern site
(I even use the strict XHTML 1.1 on my site). And yes, I will make sure it uses features that are compatible with browsers from IE 4.0+ and Netscape 6. See http://www.w3.org/ and http://www.w3schools.com/
Well... I'd be happy if we made correct <p> blocks. That seems to be a hard enough goal to achieve! Let's set our sights on that to start with! (I've said it before: Mychaeel's Wookee parser handles this correctly by chomping text into objects. I don't claim to understand it, but maybe our coders should copy his code design?)
In summary: don't be too ambitious. Let's implement something like Smarty first. Then designers can easily work on new skins. -- tarquin
wikitech-l@lists.wikimedia.org