Debian Start! (beta)

September 1, 2009 – 3:58 am by Adnan Hodzic

First of all, thank you for all your comments/feedback on previous Start! entries.

What kept me busy for last ~25hrs (literally) was making Start! to be properly rendered in all of the browsers and resolutions except IE of course. In the end, I ended up writing the whole thing from scratch, 709 lines which also passed W3 Validator, pretty sweet Smile

Whole thing is a combination of html + css + php + javascript; it’ll work fine even if you have JavaScript disabled, but for “full experience” I recommend you got it enabled. It works/renders properly in pretty much every browser (links, Iceweasel/Firefox, Epiphany, Konqueror, Opera, Chrome) except IE (surprisingly 4.15% of Start! users use IE).

Either way, now that we have the “rendering” problem solved, what you can expect from next version is “options” dialog, with hopefully interesting options Smile After that, possible multilingual support (if required) and that should round up to the final v1.0 Smile

Comments of any kind as always are welcome Grin

start.debian.net

  • Jimmy Kaplowitz

    Great job Adnan! Looks really good. I’m glad you’re doing this. You should provide a way to uncheck “Debian only” such as by using a check box instead of a radio button.

    If you’re trying to make it fully standards-compliant, try fixing the CSS errors:

    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fstart.debian.net%2F

    Already it’s much more compliant than almost every site on the Internet! Smile I think there’s also an ECMAScript (== standard JavaScript) validator in existence, but only so much of this is worth your time unless you find it important.

  • Jimmy Kaplowitz

    Oops, busted about the OS! Rest assured Debian is still my primary OS. Smile

  • Chip Richards

    Great look, Adnan, very clean and spare.

    My complaints:

    1. The tail of the Debian logo falls behind the last nav-menu item and obscures it. The text is rather low contrast against the background, and the bright logo totally washes it out. If I didn’t know it said “Mailing Lists” I’d have a hard time making it out.

    2. Once the “Debian Only” checkbox is checked, I couldn’t uncheck it. Had to do a Shift-Reload to reset it. Was that intentional?

    3. Given the small number of elements on the page, what the heck do you need JavaScript for?! This is more a matter of taste, I guess, not really a complaint, but it does seem a bit like overkill.

    Otherwise, I think it’s a worthy start page for the distro. Good work!

  • Seems perfect. Yes, the radio button can be a checkbox. Would be useful. Smile

    And how about more radio buttons, for searching mailing lists, planets, etc. which are related to debian. Using Google Custom Search?

  • Jimmy, Haha, that really made me laugh Grin

    Either way, yea, taking care of css validition was going to be my next step Smile

    Chip Richards,

    1. Yea I gotta take care of that already … will do

    2. Reason I put “radio” instead of “checkbox” is because checkbox doesn’t render so good in Opera, but I put it back to checkbox Smile

    3. Overkill, well kinda, since css took care of all of it really, but will see what makes out of it in future Smile

    Aamod, “returned” the checkbox Smile

    No custom search here, but I’ll see about that in future versions where I’m planning to extend some options so will keep an eye on that Wink

  • Petteri

    The forum link has gone. I think it is very important as the web forums are more (new) user friendly than those other links.

  • Please do not abuse the text field and put “Google search…” in there when it’s not being used. This makes the page less accessible and is annoying when JavaScript is turned off. Use a tag, and if you want it to look similar to what’s currently happening, you may be able to position the label and hide/show it with the :focus property and other magic. I think having the text box just be blank is enough.

    I’d personally like to see other search engines offered, and the preference kept with e.g. a cookie.

    Finally, please note that the Debian forums are not official in any way.

    It looks very nice, even though I have suggestions! Wink

  • Continuing on from Martin’s point. For accessibility, insert the “Google Search…” text with JS, so that it doesn’t hurt non JS viewers.

  • I think the online version of this (start.debian.net) could be used to get some revenue for the debian project through google adwords or the like…

  • We do not advertise, except for direct sponsors.

  • You really, really, really should be adding a link to the main Debian website there. Sure, it could use some updating, but the fact that it’s “ugly” doesn’t mean it’s not useful.

  • Jonas

    PHP, why? Any reason at all that this couldn’t be a static page (so it can properly be used as default page for browsers in Debian)?

  • Because of the MySQL backend. Wink

  • Jörgen

    What benefits does the link to google analytics give?

  • martin, sime, text field, I actually put that up there to make it “nicer” for links users … either way it’s been taken care of, there Smile

    drcursor, there are actually couple of ways Start! could generate profits, but this is the last task on my todo for now Smile

    wouter, debian website … problem is that everybody keeps suggest links, that in the end I just might end up “handing out” a poll which links to put up there.

    jonas, why php? well all in its time Wink

    Jörgen, to generate statistics which can later on help me in future development of this site, from which browser/os with what resolution user uses to possibly rely on this data if “how to generate profits” idea comes along Wink So far it helped me.

  • “nice” is very subjective. Wink

    But yes, thank you, it’s better now.

  • I don’t like how it’s using XHTML. Consider using HTML5.
    http://validator.nu/?doc=http%3A%2F%2Fstart.debian.net%2F

    It also uses inline CSS, that should be external. Check caching with redbot.org

    It also has a crap load of Javascript. A lot of it is Google tracking. There is no real need for that tracking crap if you access to the server logs.

    I’d rather you not log my search at all thanks very much.

    Are you working for Google? All this seems to be is a Debian sanctioned Google portal. LAME really.

  • Looks really good!

    As others have suggested, ditch the label within the text field. Instead, focus the text field by default, so people just have to type and hit enter. Most other search pages do this: Google, Firefox Start, and Ubuntu’s start page all do.

    Ditching the label will also ditch a lot of unnecessary JavaScript from the page, including a browser detection script; set a good example by not doing that kind of thing. Smile Note that I don’t think you need to remove all JavaScript from the page (for instance, focusing the text field requires some); you should try to keep it minimal, though.

    Also, ditch the Google Analytics. Know your audience. In particular, know that your audience doesn’t want you to know your audience. Smile

    Your CSS has some oddities in it, such as the rules for * (generally not something you want), squelching the visited link color to the same as non-visited, and referencing specific non-free fonts rather than just the generic alternatives like “sans-serif”.

    Please, rename your external CSS file. Wink

    Since you already have an external CSS file, merge the rest of the page’s CSS into it.

    Please put a label like “News: ” in front of the news at the bottom; sometimes the headline doesn’t immediately look like a news item.

    The autocomplete mechanism seems quite interesting; it seems to focus on FOSS terms specifically. While cool, I don’t think that fits the purpose of the page very well. Most people using Debian Start won’t necessarily have a FOSS-specific search in mind; they’ll just want to search the web.

    Regarding the “Debian only” checkbox, your mention of a radio button reminded me that most sites express this more verbosely by having *two* radio buttons: “Search the Web” and “Search $FOO”. That might prove clearer.

    Please do add the link to the Debian homepage.

    Finally, you should put a FOSS license on the page/style/etc, both to set a good example and to allow packages to include a local version of the page.

  • martin, Wink

    Kai, there’s another external css.

    I’m not working for Google, nor does this have to do anything with Google. Since this is not first complaint against “Analytics” I just removed them completely.

    Josh, Thank you, this was one constructive commentary Smile

    I did ditch the label, it all works fine, “tab” and there you’re ready to search, both with/without JavaScript.

    Analytics, gone

    CSS, I still have to take care of it, so it can pass w3 css validator. Once I take care of that, I’ll merge both css’s into one “general” one (external).

    Heh, I have renamed external css file, I couldn’t resist that name initially Grin

    Will take care of the “News: ” in front and “Debian” frontpage link.

    Regarding the radio’s, I’m good with checkbox for now, in case I do decide to move to radio’s I’ll definitely do what you suggested.

    Search keywords are really new “feature” to search itself, time will have to pass until I got “right” keywords users want to see.

    Regarding FOSS license and packaging, I still have to take care of some things, then create project on alioth, and definitely release everything public under FOSS licences!

  • Looks awesome Smile

    Anyway, wanted to tell you there were like 5 errors when i validated your document.

    Errors found while checking this document as XHTML 1.0 Transitional!

    Keep it up man!

  • Pingback: Debian mit eigener Startseite | Linux|Lounge.net()

  • There are no reason for any of your DIVs.

    Make the links an inline list. Random a paragraph with the id random.

    Does it really need Javascript?

    No need for description meta tag. Everything ignores it.

    And use HTML5. XHTML is for losers. Wink

  • Martin, >_< I fixed it Smile Kai, yup, I'll definitely look into it, just give it time Wink

  • Jörgen

    nit:
    on a nokia n810 the start page is ~4 mm to high in default resolution/zoom so that the vertical scrollbar activates.

  • Robert Collins

    It wouldbe good not to spawn new tabs/windows when clicking on the links.

  • @Robert: I’d rather not have that. You can tell your browser when clicking if this is what you want, but it’s a pain if it’s enforced. It’s been kicked out of XHTML and HTML5 for good reason and now requires JavaScript to implement the functionality.

  • Jörgen, please check on http://start.debian.net/testing if that’s it? Also mind to provide me with screenshot or some other visual aid?

    Robert, same goes for you ^. If this goes well, I’ll put it into /

    Even though I agree with Martin, on this topic lets give it a try Smile

  • Jörgen

    http://start.debian.net/testing improved, now there’s ~2 mm on the vert scrollbar. The ~4 mm I remarked on earlier was really more like 6 or 8.
    Sorry, couldn’t find any dump program to help you with a screen shot.

  • Jörgen, testing should be fine for you now. Please confirm tho.

    Kai, also testing is HTML5 valid

  • Jörgen

    confirmed, looking good

  • Just one more question: Why does the search-field (Google search …) turn into (really ugly) green, while I’m clicking on it?
    Guess, It didn’t to that before.

    Peter

  • Do you have start.debian.net under source control?

    I think your changes could help people learn how to write better Web applications. You seem to be making all the familiar mistakes all beginners do.

    http://static.natalian.org/2009-09-03/start/

  • Kai, do you have all your comments to this post (and the other ones you make in similar style) available in source control somewhere? I think your contributions could help people learn by counter-example how not to be discouraging.

    Of course the goal should be to be “Designing With Web Standards” (there’s a book suggestion in that), but 100% compliance is not necessary and can only be described as zealotry. Furthermore, suggesting HTML5 over XHTML at this stage is just idiotic — it’s still a draft, after all.

    It’s cool that Adnan does this, but please consider that his motivation may neither be to become proficient in web standards, nor to let people learn from his mistakes.

    The page you suggest at http://static.natalian.org/2009-09-03/start/ looks spartanic, but it’s probably 100% compliant. Maybe instead of duplicating the efforts by working your way up from the standard to something that will appeal to the *user*, you could ask Adnan for the source code in a less demoralising and condescending way, and provide proper patches?

    There is also nothing from keeping you from creating a web site dedicated to save all the beginners from these “familiar mistakes”, but to assume that beginners will learn from source control is quite removed from reality, IMHO.

  • Sorry, I might have come across as discouraging.

    HTML5 may be a draft but it’s ready IMO for use now.

    A patch? I quickly put together http://static.natalian.org/2009-09-03/start/ as a lazy path than providing diffs.

    I do not want to ridicule people who write Web applications that could be better. I really want to help guide people better to write Web applications with less cruft.

    I do believe there is some sort of evolution Web developers go through and I do want to blog about those stages, because I have been through them myself.

    Apologies again for any offence caused.

  • aion

    I see no images on the site. I used to, but not anymore. I only have the input field with a button. Not the blue background image, in all browsers here.

  • martin, thank you for the “side kick” Smile

    aion, try clearing your cache, because it all works perfectly fine.

  • Rolyin

    working good for me Smile (side note back on debian suse got on my nerves)

  • Pingback: Altertux-Blog » Pagina iniziale per il vostro browser()

  • Dado

    Great job, I really like it.And I like those links opening in new tab, then using backspace when you want to check out other links is not necessary. Yeah, I know there is middle button for stuff like that, but I it just my opinion..

  • p.f.

    The search-field still turns green. Are you going to change this?

  • @p.f, patience please, also do you have a better/nicer color suggestion?

  • p.f.

    …don’t hurry. why not use blue/ white (clicked) as default?

    peter

  • New stuff has been uploaded

    p.f – Hope you’re happy now Smile

  • p.f.

    yeah … me happy ..-)
    respects p.