CoolwebTeacher: USOE/WebDevelopment2009/Print

Contact Information

Kevin Hansen kevin@coolwebteacher.com

AIM[1]: coolwebteacher or kajigga SKYPE: kajigga or coolwebteacher URL: http://coolwebteacher.com

Agenda

3 day workshop to help teachers with our new standards. Attached are the new standards. I would like to cover XHTML, CSS, Site Planning, Scripting, Databases, and Hosting

Attendees

Topics/Days

Day One

• Introductions, New Standards

• Text Editors, Gui Editor, Debuggers, Browsers

• CSS, XHTML

• Tables, Table vs CSS layout, Semantic Markup

• Embedding Media

  • possibleSolution.mov

• w3c standards, compliance/ADA, Learning Resources
• Questions, Wrap-up

Day Two

• Server Setup(2)

• PHP, syntax and simple logic

• Javascript

• Ajax, Google Docs/Forms
• Widgets

Day Three

• Paint.net, Gimp

• /Databases

• Form Submissions
• SQL
• Project Management

• /Hosting

• /SitePlanning

• Questions,Comments/Critiques

Page List

Attachments

ForWebDev.zip

phpMyAdmin-3.2.0.1-all-languages.zip

CategoryWorkshop, CategoryUSOE, CategoryHtml

Describe USOE/WebDevelopment2009/NewStandards here.

Web Browsers

Text GUI Editors

There are many ways to edit HTML code and literally hundreds of software programs, or editors, that will do it. The most important thing about editing HTML, Javascript, and any other source code is that it be done as plain text. Using any rich text editor including M$ Office, WordPerfect, NotePad, M$ Works, OS X Pages, and others will results in either mangled code or no code at all. Most of these programs can, in some way or another export HTML code but it always come out horrible mutilated and usually non-functional. MS Word is particularly terrible at exporting HTML. You would think it would at least work in Internet Explorer, but it usually doesn't even work well there.

A note about Dreamweaver

This is commonly used among people learning about web development. It makes many tasks very easy and will do much of the work of designing a website in static HTML code. The thing is, most developers can point out a site developed in Dreamweaver from a mile away. Many sites were developed with it and you can tell. There is usually a definitive feel to it because of the common tools used. Many developers call it a "sledgehammer" tool when all you need it a toothpick. There are so many tools that doing some simple tasks can be more complicated than necessary. Dreamweaver also provides a "GUI" view that allows one to edit an HTML file as if it were almost a word document. Some people can be "lolled" into feeling like HTML is easy. The thing is that Dreamweaver doesn't write that clean of code either and I have spent hours cleaning it up. My personal feeling is that Dreamweaver is an expensive tool that I don't need. Since HTML is not that complicated of a markup language, I feel like I don't need the GUI Dreamweaver provides.Obviously I am a little bias against it.

Text Editors

In my opinion, there are several very important properties that a plain text editor should have. Here they are:

• Syntax highlighting
• Good search and replace
• Line numbers
• Fast
• Allow me to edit the raw code and not be in the way
• Leave the code intact so I could feasible open it in any editor and make changes. I don't want to be stuck editing a document in Dreamweaver because of some proprietary syntax that only working in Dreamweaver.
• Allow me to do as much as possible without touching the mouse.
  • I'm editing text, not a photo. I just need to type

With that list in place, here is a list of editors I would recommend trying.

You'll notice that Notepad is not in the list. I would reccomend not using notepad for any type of editing. It doesn't do syntax editing, line numbers, multiple files at once, or good line breaks. I repeat, do not use notepad.

*(My Personal Favorite)

WYSIWYG Editors

WYSIWYG stand for "What you see is what you get". M$ Word is a WYSIWIG editor and so is Dreamweaver. Some prefer one of these over editing the text itself. It can be advantagous sometimes when editing a table or list.

From Wikipedia:

"WYSIWIG HTML editors provide an editing interface which resembles how the page will be displayed in a web browser. Some editors, such as ones in the form of browser extensions allow editing within a web browser. Because using a WYSIWYG editor does not require any HTML knowledge, they are easier for an average computer user to get started with.

The WYSIWYG view is achieved by embedding a layout engine based upon that used in a web browser. The layout engine will have been considerably enhanced by the editor's developers to allow for typing, pasting, deleting and moving the content. The goal is that, at all times during editing, the rendered result should represent what will be seen later in a typical web browser.

While WYSIWYG editors make web design faster and easier; many professionals still use text editors, despite the fact that most WYSIWYG editors have a mode to edit HTML code by hand. The web was not originally designed to be a visual medium, and attempts to give authors more layout control, such as CSS, have been poorly supported by major web browsers. Because of this, code automatically generated by WYSIWYG editors frequently sacrifice file size and compatibility with fringe browsers, to create a design that looks the same for widely used desktop web browsers. This automatically generated code may be edited and corrected by hand. "

I don't often use a WYSIWIG editor, a fairly complete list can be found on wikipedia. Below is a chart of popularity of many of them. You'll notice that Dreamweaver is not there.(http://www.linuxquestions.org/questions/2008-linuxquestions.org-members-choice-awards-83/ideweb-development-editor-of-the-year-695656/)

Debugger

Figuring out what is wrong with a website can be pretty frustrating. When something doesn't work the way the developer wants, the reason is not always obvious. A common cycle most developers find themselves in is that of "write code"..."test code in browser"..."see problems"..."write code"...start over.

Most software developers use some form of a debugger to help them know what is happening with the code as it happens. There are several of thse for HTML coding, but the one I like the most is called Firebug. It is a Firefox extension. I copied this information from Firebug's website :

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Just the way you like it

• Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.

  Learn more

  • 

Inspect and edit HTML

• Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

  Learn more

  • 

Tweak CSS to perfection

• Firebug's CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can make changes and see them take effect instantly.

  Learn more

  • 

Visualize CSS metrics

• When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

  Learn more

  • 

Monitor network activity

• Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner's servers taking a siesta? Firebug breaks it all down for you file-by-file. Learn more

  • 

Debug and profile JavaScript

• Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast. Learn more

  • 

Quickly find errors

• When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML. Learn more

  • 

Explore the DOM

• The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly. Learn more

  • 

Execute JavaScript on the fly

• The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol' fashioned command line for JavaScript complete with very modern amenities. Learn more

  • 

Logging for JavaScript

• Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast. Learn more

Topic

Outline

Comments

Web Resources

• http://www.w3.org/TR/xhtml1/#diffs

CategoryWorkshop

Semantic Markup

http://www.peachpit.com/articles/article.aspx?p=369225

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title></title>
</head>
<body>
</body>
</html>

Code/Markup Conventions

General Rules

• No spaces in filenames
• Only a-z,0-9 in filenames
• Filenames only start with a-z

HTML

• No Capital Letters in filenames, HTML markup,
• Use a js/css/img folder for the corresponding filetypes
• Use relative links unless a central PHP file is set with the rool URL and path information.

• NEVER Use <font><b><i><center><justify>

• All HTML elements are in lowercase (xhtml)
• Large block elements start and end with a comment
• use ".html" not ".htm"

Programming

• tabs = 4 spaces ≠ TAB
• Indent inside methods, loops, logic, classes

• Multiline comments with */

• Try to declare variables at the top of methods/functions, scripts, and classes

Outline

Links

A book about designing HTML pages without tables.

• http://www.amazon.com/HTML-Utopia-Designing-Without-Tables/dp/0975240277/ref=sr_1_1?ie=UTF8&s=books&qid=1244685015&sr=8-1

ColorSchemeGenerators

• http://colorschemedesigner.com/

Break the <font> habit

• http://www.htmlcodetutorial.com/character_famsupp_193.html

CSS Styled Calendar

• http://veerle.duoh.com/index.php/blog/comments/a_css_styled_calendar/

CategoryWorkshop CategoryUSOE CategoryCss

Describe USOE/WebDevelopment2009/Hosting here.

CategoryUSOE

• http://colorschemedesigner.com/

• http://w3schools.com

• http://www.opera.com/company/education/curriculum/

Topic

Outline

Comments

Topic

Outline

Comments

Links

http://webstyleguide.com/wsg3/index.html

Filebased Database

Pros:

Cons:

SQL

Pros:

Cons:

Simple CMS

part2.zip

This set of files will setup a site that restricts access to logged in users. It has a calendar, and comments page.

Create each of the following files and put the associated code in them.

head.php

<?php
 session_start();
 if($_SESSION['username']){
         // user is logged in
 }else{
         // redirect to login.php
         $_SESSION['destination'] = $_SERVER['REQUEST_URI'];
         header('Location: login.php');
 }
?>

login.php

<?php session_start();
require('db.php');
//print_r($_POST);
if($_POST['submit'] && $_POST['submit'] != ''){
        // form has been submitted
        $lookupQuery = "SELECT * FROM users WHERE username='".$_POST['username']."'";
        $res = mysql_query($lookupQuery);
        if($res){
        $user = mysql_fetch_assoc($res);
                if($_POST['password'] == $user['password']){
                        $_SESSION['username']=$_POST['username'];
                        $updateLastLogin = "UPDATE users SET lastLogin = NOW() WHERE username=".$_POST['username'];
                }
        }else{
                // There is no user by that username
        }
}
include('top.php');  // Include the top part of the xhtml
if($_SESSION['username']){
        print "You are logged in.
        Do you want to <a href='logout.php'>logout</a>?";
        print "<a href='".$_SESSION['destination']."'>Continue</a>";
}else{
        print "<form action=' ' method='post'>
        Username: <input type='textbox' name='username'/>
        <br/>
        Password: <input type='password' name='password'/>
        <br/>
        <input type='submit' name='submit' value='submit'/>
        </form>";
}
include('bottom.php');
?>

logout.php

<?php
session_start();
session_destroy();
$pageTitle = "Logout";
include("top.php");
?>
You are now logged out.  <a href='login.php'>Login</a>?
<?php include("bottom.php"); ?>

db.php

<?php
$database='webdev';
$hostname='localhost';
$username='root';
$password='<password>';
mysql_connect($hostname,$username,$password);
mysql_select_db($database);
?>

top.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title><?php print $pageTitle?></title>
        <link rel='stylesheet' type='text/css'
                href='css/calendar.css'></link>
</head>
<body>
<div id='wrapper'>
    <div id='header'><h1>Kevin's Page</h1></div>
    <div id='sidebar'>
    <ul>
        <li><a href='calendar.php'>Calendar</a></li>
        <li><a href='comments.php'>Comments</a></li>
    </ul>
</div>
    <div id='content'>

bottom.php

    <!-- end of content div -->
    </div>
<!-- end of the wrapper div -->
</div>
</body>
</html>

comments.php

<?php
require('head.php');
require('db.php');
$pageTitle="Comments";
include('top.php');
if($_POST['submit'] && $_POST['submit']!=''){
        $comment = mysql_escape_string($_POST['comment']);
        $username = $_SESSION['username'];
        $insertQuery = "INSERT INTO comments (user_id,comment_text)
                                VALUES((SELECT id FROM users WHERE username='$username' ),'$comment')";
    //print $insertQuery;
    mysql_query($insertQuery);
}
$commentsList = "SELECT * FROM comments LEFT JOIN users on (comments.user_id = users.id)";
$res = mysql_query($commentsList);
while($comment = mysql_fetch_assoc($res)){
        print "<h2 class='comment-user'>".$comment['username']."</h2>";
        print "<p class='comment'>[".$comment['created']."] "
                .$comment['comment_text']."</p>";
}
?>
<form action='' method='POST'>
        <textarea name='comment' cols='30' rows='10'></textarea>
        <input type='submit' name='submit' value='submit'/>
</form>
<?php
include('bottom.php');
?>