Review my application

Discussion in 'Websites' started by API_PHP, Jul 27, 2013.

  1. #1
    Hey, some background: I made a metasearch engine, where the results from Bing, Yahoo, and Google are aggregated and displayed in one list. If a document appears in more than one engine it receives a more favourable rank.

    This has been made for a university assignment and is for educational purposes. Based on a test of 50 queries from the Trec 2012 Web Track, this engine performs approximately 12% better than the highest performing individual engine (Google).

    I would like you to view, and test the application, at http://www.metasearch.me . There is a page where you can leave feedback via a form..I would appreciate if you could do this, which will aid me greatly in the generation of my written report.

    The user interface design is not necessarily the most important feature of this application, more the usability and functionality.

    Anyway, thanks for looking.
     
    API_PHP, Jul 27, 2013 IP
    Devtard likes this.
  2. xtmx

    xtmx Active Member

    Messages:
    359
    Likes Received:
    12
    Best Answers:
    4
    Trophy Points:
    88
    #2
    You should put the doctype at the beginning, before the newline. Currently, you have activated quirks mode for IE, which is not a good thing.
     
    xtmx, Jul 27, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    visually you've got a busted layout here with 'yahoo' going down to it's own line -- and the logo for the site with the improper aliasing looks like ass. What appears to be a fixed width layout is accessibility rubbish, as is the use of serif fonts on screen. The goofy massive slow loading full screen background should probably also have an ax swung at it, particularly since it's non tile-able and falls apart at anything over 1920 wide.

    Navigation and graceful degradation seems to be a joke, and a peek under the hood explains why -- endless pointless DIV for nothing, classes for nothing, and little if anything remotely resembling semantic markup. Paragraphs around non-paragraph elements, attributes like ALIGN that have no business in any HTML written after 1997, lack of labels around the inputs, fixed px widths, presentational images in the markup, no headings whatsoever (should at LEAST have a H1), pointless TITLE for nothing, false simplicity thanks to that STUPID MALFING HTML5 PLACEHOLDER GARBAGE (in a X tranny doc at that), invalid characters in name (the question marks), redundant/poiintless VALUE attributes on the radio-buttons, and of course the time-wasting redundant to server-logs Google Analytics nonsense (with the bizarro outdated version of the script at that...).

    Just to give you an idea what I mean, there is little legitimate reason for that layout/content to vary much from this markup:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; initial-scale=1.0"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Search - Metasearch
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		MetaSearch
    		<span><!--image replacement --></span>
    	</h1>
    
    	<ul id="mainMenu">
    		<li><a href="index.php">Web</a></li>
    		<li><a href="images.php">Images</a></li>
    		<li><a href="news.php">News</a></li>
    		<li class="metaSearch">MetaSearch</li>
    		<li><a href="google.php">Google</a></li>
    		<li><a href="bing.php">Bing</a></li>
    		<li><a href="yahoo.php">Yahoo</a></li>
    	</ul>
    
    	<form action="websearch.php" method="post" id="metaSearch">
    		<fieldset>
    			<label for="metaQuery">Search</label>
    			<input type="text" name="query" id="metaQuery" />
    			<br />
    			<input type="radio" name="aggregated" id="metaAggFalse" value="0" />
    			<label for="metaAggFalse">Non-Aggregated</label>
    			<input type="radio" name="aggregated" id="metaAggTrue" value="1" checked="checked" />
    			<label for="metaAggTrue">Aggregated</label>
    			<input type="submit" value="Search" class="submit" />
    		</fieldset>
    	</form>
    
    	<div id="footer">
    		<ul>
    			<li><a href="form.php">Feedback</a></li>
    			<li><a href="about.html">About</a></li>
    		</ul>
    		<span>Please note that this website is for educational purposes only.</span>
    		&copy; Metasearch
    	<!-- #footer --></div>
    
    <!-- #pageWrapper --></div>
    
    </body></html>
    Code (markup):
    Or at least, that's how I'd have written the same page.
     
    deathshadow, Jul 29, 2013 IP