Using webdeveloper tools to study programming techniques

Today on our return from vacation we begin by studying techniques used on other sites for features we might want to incorporate on our own. So our first tool to evaluate is the popular “WebDeveloper” for Firefox which will let us look at html, css, and javascript source code from any sight including our own.

Also, to simplify our future work, we start the processing of linking more to external stylesheets and javascript libraries. For our sample code, I continue to leave space for custom scripts and styles on a given page, but often these will not be needed in the final production work if the elements in the master libraries include everything needed.

tago11.html starter page

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://bazaesperanto.com/css/baza.css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://bazaesperanto.com/js/baza.js"></script>
        <script>
            $(document).ready(function() {

            });
        </script>

        <style type="text/css">    
            body {
                background-color: #DDD;
            }
        </style>
    </head>
    <body>
        <h1>Traduki</h1>
        <ol>
            <li>Monday: <input size="10" data-correct="lundo" type="text" /> </li>
            <li>Tuesday: <input size="10" data-correct="mardo" type="text" /> </li>
        </ol>
    </body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s