No scripts, All PHP/SQL and HTML/CSS. Would love to hear the good and bads of this new project. I decided to use the one page load idea on this project, call to YouTube for the video descriptions and titles. Everything else gets stored SQL. Made my own view count for when individual videos are selected to be watched. Right now I know I need to beef up security however, I have not officially begun driving traffic to this site yet. and it wont really ever have sensitive information anyhow so it was not a main priority. http://www.coasterpov.com
I like the idea of a single page load that you've used on the site. The table structure that you've used in the Videos section looks pretty basic and also wastes a lot of space. You could give it a better design and also make efficient use of space. The ad unit doesn't seem to fit in right next to the video. IMO the leaderboard or 468x60 banner below the video would work out well.
everytime you have a form, you have it taking only 50% of the width, the other 50% is "wasted" why not try to have the form areas side by side? my idea would be to have a list of 3+ roller coasters. Have a picture on the left, small description of the right and make the image a clickable link to the youtube movie... so right now you have an embed of 1 movie, perhaps keep it as a way of featuring new vids, and have a row of 3 or more so that others can quickly view more content. just my thoughts
Still trying to fully decide on everything you said, However I have combined 2 of the forms, and the contact one is the only one with wasted space, May jam another square adsense there. Thank you
Ill give that look a try.... I figured since most youtube videos already had a horiz. ad, may not want to overload the horiz ads. thank you
It's simple and I kinda like it. The one page load is fine for this type of website. There is one annoying thing for me - the top menu's focus effect. On mouse over the text shifts because of the CSS. If you put the same borders (with background color) to the normal menu, you will fix this. It's a small thing though.
I would center the video on the main page and I wouldn't put the add next to the video on the videos page as it takes focus away from the video. Personally I would change the font and colour of the blue text. I like one page load sites , I would make the button for going back up (top) a bit bigger though so it will be easier for people to see.
Since another person says it, I did it. I have now made a horiz ad below and centered the video. Now to think on font styles and colors
The inaccessible fixed width is too big for netbooks/tablets and a crappy little stripe on my desktop, which mated to the use of px metric fonts on a great many elements and the illegible use of serif fonts on screen (serif is for print, sans-serif is for screen -- say it with me) and 'italics for nothing' generally speaking make it a serious case of "WCAG, what's that?!?" Much of the page just looks like rendering errors, like this odd grey bar on the left of the shadowed boxes, the inconsistent paddings on elements, and the dashed lines that don't even line up with the content they are for. Under the hood it's just as bad, if not worse... while you at least have media targets, the five separate files for one media target is just wasted handshakes and server overhead, and the stacks are incomplete (should also include 'projection' for kiosks and 'tv' for a number of other devices). The keywords meta is overstuffed, redundant, and doesn't even match any content inside BODY, and it's got a good number of DIV for nothing, little resembling a logical document order, and of course the pointless HTML 5 bloat. While the 9.43k of markup is relatively small, with only 2.4k of plaintext and a single object embed, it's likely TWICE what's needed on such a simple page. While it is quite refreshing to see someone using LEGENDS and LABELs, you are lacking FOR attributes on your labels decreasing their usefulness, and have DIV in there for christmas only knows what. The improper/incomplete use of blockquote, clearing DIV like it's still 2001, presence of the style attribute for no good reason, and host of other issues likely explain the 22 validation errors and six warnings -- which takes a bit of work to accomplish in the train wreck of garbage known as HTML 5 with it's "Let's throw the past decade and a half's progress in the trash and let people sleaze out websites any old way" approach to development. (can you tell what a big fan of HTML 5 I am?) I would swing an axe at the full width video since it shoehorns you into a fixed width layout, switch to elastic fonts with elastic min/max-widths for a semi-fluid layout, get some media queries on it so it's responsive, and drag the markup kicking and screaming into post 1998 practices instead of the pre 1997 methodologies it's built on now. Though it does prove something I've been saying about HTML 5 for quite some time -- the people who were vomiting up HTML 3.2 and slapping 4 tranny on it are the folks for whom HTML 5 was created. It sure as shine-ola isn't meant for anyone who embraced the reasoning behind 4 STRICT, accessibility standards, semantic markup, separation of presentation from content, or any of the other good practices and geniune improvements of the past fifteen years. It is EVERYTHING I've come to expect when I see a HTML 5 doctype, and that's NOT a compliment.
Thats what I wanted( the criticism ). The only thing I disagree with is the errors that w3 shows. You can run any major site, adobe, microsoft, walmart. and they all have a long list of errors, The layout I used what was supposed to be a responsive HTML5 layout. And so far all it has done has pissed me off. The rest I will take in to consideration. I will clean my code up and I will likely switch back to HTML 4 since HTML5 really didnt do anything for this site at all.
There is little excuse for invalid markup, and having it usually means wasting time hacking around the incorrect behaviors; a great number of CSS hacks could be avoided if people bothered fixing their markup, particularly the template part. A few might creep into the content, but things like tags or attributes that don't even exist in your chosen document type is just begging for issues OR throwing accessibility out the window. That's a bit of a 'if everyone else ran off a cliff' shtick -- two of those being companies of which taking web advice from is like taking technical advice from Forbes or financial advice from popular electronics. I mean seriously, the companies behind web expression/frontpage and Dreamweaver? The only things you can learn from them is how NOT to build a website. that could be flawed thinking and/or methodology on your part getting in the way. You've got layout elements that have no business on a modern site, and that pretty much by definition means you'd be struggling to go elastic and semi-fluid, much less responsive. Create valid semantic markup of your content or a reasonable facsimile FIRST, caring only about saying what things ARE, NOT what they are going to look like. Then use CSS to create the layout bending that markup to your will, adding DIV or SPAN as needed for presentation, but being sure not to add any you don't actually need. (since you should have plenty of semantic tags to hook onto as well). Then and only then start up the cutesy paint program of your choice to make the graphics to hang on the layout. (if any, and CSS3 is really reducing the need for 'any') That's a smart move. Really HTML 5 doesn't do anything for ANY site, being one of the dumbest specifications I've seen in some three decades of computing. Generally speaking developers are dumber for it even existing. Couple more observations: there is no such thing as type="textarea" or rows="4" on a INPUT... I probably wouldn't make the FAQ's a list, and what the devil makes the answers subscript?!? Much less you can't put subscript BETWEEN LI, that's just gibberish. Looks more like H3 and paragraph's job to me, or if you REALLY want a list, DL/DD/DT (really though that's just not what you have) If I was writing something similar, the markup would be a little more like this: <!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" /> <meta name="description" content="All the best POV's from Roller Coasters all over the entire world. Feel the ride from your seat!" /> <meta name="keywords" content="roller coaster, theme park, POV, Point of View, Front Row" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Coaster POV - Relive your favorite roller coasters! </title> </head><body> <div id="pageWrapper"> <h1> CoasterPov </h1> <ul id="mainMenu"> <li><a href="index.php#signup">Sign Up</a></li> <li><a href="index.php#login">Login</a></li> <li><a href="index.php#about">About</a></li> <li><a href="videos.php?page=1">Videos</a></li> <li><a href="index.php#faqs">FAQS</a></li> <li><a href="index.php#contact">Contact us</a></li> </ul> <div id="homePageVideo"> <h2> Six flags great adventure, Jackson NJ - http://www.youngswaggaman.com </h2> <!--[if IE ]> <object type="application/x-shockwave-flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" > <![endif]--> <!--[if !IE]>--> <object type="application/x-shockwave-flash" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" data="http://www.youtube.com/embed/_dKUk1_4UIU" > <!--<![endif]--> <param name="movie" value="http://www.youtube.com/embed/_dKUk1_4UIU" /> <param name="allowScriptAccess" value="always" /> <p> <a href="http://get.adobe.com/flashplayer/"> Adobe Flash Player </a> is required to view this content. </p> </object> <a href="http://www.youtube.com/watch?v=_dKUk1_4UIU&feature=player_embedded" title="watch on Youtube" class="watch" > Nitro | POV | Back Row | Side Shot | Bad View at times </a> <!-- #homePageVideo --></div> <form action="reg.php" method="post" id="register"> <h2>Register Now to get updates, leave comments & upload videos!</h2> <fieldset> <label for="registerEmail">E-Mail:</label> <input type="email" name="email" id="registerEmail"/> <br /> <label for="registerName">Username</label> <input type="text" name="username" id="registerName" /> <br /> <label for="registerLocation">Location/Country</label> <input type="text" name="location" id="registerLocation" /> <br /> <label for="registerRide">Favorite Ride</label> <input type="text" name="ride" id="registerRide" /> <br /> <label for="registerPass">Password</label> <input type="password" name="password1" id="registerPass"/> <br /> <label for="registerPassMatch>Confirm Password</label> <input type="password" name="password2" id="registerPassMatch" /> <br /> <input type="submit" class="submit" value="submit form →" /> </fieldset> </form> <form action="login.php" method="post" id="login"> <h2>Login to access your account and features</h2> <fieldset> <label for="loginName">UserName</label> <input type="text" name="username" id="loginName" /> <br /> <label for="loginPass">Password</label> <input type="password" name="password" id="loginPass" /> <br /> <input type="submit" class="submit" value="submit form →" /> </fieldset> </form> <div id="about" class="subSection"> <h2>About Coaster POV</h2> <div class="col col_16"> <blockquote> <p> "<b>Point-of-view</b>, or simply <b>p.o.v.</b>, camera angles record the scene from a particular player's viewpoint. The point-of-view is an <b>objective angle</b>, but since it falls between the objective and subjective angle, it should be placed in a separate category and given special consideration. A point-of-view shot is as close as an objective shot can approach a subjective shot - and still remain objective. The camera is positioned at the side of a subjective player - whose viewpoint is being depicted - so that the audience is given the impression they are standing cheek-to-cheek with the off-screen player. The viewer does not see the event through the player's eyes, as in a subjective shot in which the camera trades places with the screen player. He sees the event from the player's viewpoint, as if standing alongside him. Thus, the camera angle remains objective, since it is an unseen observer not involved in the action." </p><p class="source"> - <cite>Joseph V. Mascelli, <i>The Five C's of Cinematography</i></cite> </p> </blockquote> <p> Experience roller coasters as seen from the rider's point of view. POV footage is taken on the ride, generally in the first or last rows and shows the viewer what the rider's experience is like on the ride. </p> <!-- #about.subSection --></div> <div id="faqs" class="subSection"> <h2>FAQS</h2> <h3>Why do people record roller coaster rides?</h3> <p> Roller Coaster riders usally do it for the thrill, a video pov is a great way to relive ride's that may not exist anymore. </p> <h3>Wouldn't you be afraid of dropping the camera?</h3> <p> Well as a responsible adult and the technology we have today I would say NO! The camera has a strap - Tie it TIGHT!!! </p> <h3>Is this allowed at theme parks?</h3> <p> Only a responsible adult can do this and that is if and ONLY if the park says it is ok first. If caught you can be arrested and banned. </p> <h3>Have you ever dropped a camera or been caught recording?</h3> <p> No! This is a site where people can register and submit video's. I cannot say that for everyone. </p> <!-- #FAQ.subSection --></div> <form action="send_form_email1.php" method="post" id="contact"> <h2>Contact us about anything on your mind</h2> <fieldset> <label for="contactName">Name</label> <input type="text" name="name" id="contactName" /> <br /> <label for="contactEmail">E-Mail</label> <input type="email" name="email" id="contactEmail" /> <br /> <label for="contactMessage">Message</label> <textarea rows="4" name="comments" id="contactMessage" /> <br /> <input type="submit" class="submit" value="submit form →" /> </fieldset> </form> <hr /> <div id="footer"> Coaster POV © <a href="http://www.eddieruble.com">Broke Enterprise</a>, all rights reserved. <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup):