index.html is illegible and has TIDY errors

mckoss commented 13 years ago

Since I'd like this to be a good sample application, I want index.html to be formatted to be legible and easy to understand. It still violates TIDY for me. I also do not want ANY inline styles in index.html - they should all be in the style sheet.

There are also many unnecessary nested divs in your file.

I've hacked a sample to show what I'm looking for - though this does not work with your current code, I think because I removed some of the nested divs and the selectors no longer match:

<!DOCTYPE html>
<html>
  <head>
    <title>Flap Display Simulator</title>

    <link rel="icon" type="image/png" href="/images/icon.png"/>
    <link rel="apple-touch-icon" href="/images/touch.png"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="stylesheet" type="text/css" href="/lib/beta/css/client.css"/>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/beta/js/json2.min.js"></script>
    <script type="text/javascript" src="/lib/beta/js/utils.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
      $(document).ready(namespace.com.pageforest.flipper.onReady);
    </script>

  </head>

  <body>
    <div class="page">
      <h1><script>document.write(document.title);</script></h1>

      <div id="warning">
        <span>Sorry, no split-flap animation for you! Your browser doesn't support
          CSS3 animation.</span>
        <a href="javascript:void(0)" onClick="$(this).parent().hide()">Close this </a>
      </div>

      <div id='display'></div>

      <div id="nav">
        <a id="rev" href="javascript:void(0)" onclick="flipper.rev()" name="rev">Back</a>
        <a id="play" href="javascript:void(0)" onclick="flipper.play()"
           name="play">Play</a> <a id="stop" href="javascript:void(0)"
                                   style="display:none" onclick="flipper.stop()" name="stop">Stop</a>
        <a id="fwd" href="javascript:void(0)" onclick="flipper.fwd()" name="fwd">Forward</a>

        <div id="pageof">Page <span id='offset'></span> of <span id='limit'></span></div>
      </div>

      <textarea id='input'></textarea>
      <div>
        <a href="javascript:void(0)" onclick="flipper.linkToDisplay()">Link to this display</a>
      </div>

    </div>
  </body>
</html>

grg021 commented 13 years ago

Cleaned up index and display html

mckoss commented 13 years ago

Thanks. I reduced the indent to 2 spaces instead of 4 in my repo. I find 4 spaces gets excessive pretty quickly for HTML documents.

mckoss commented 13 years ago

Thanks. I reduced the indent to 2 spaces instead of 4 in my repo. I find 4 spaces gets excessive pretty quickly for HTML documents.

grg021 commented 13 years ago

Synced my repo with yours, thanks.

mckoss commented 13 years ago

no prob

grg021 / pfflipper

index.html is illegible and has TIDY errors #24