Final Project Notes

Have implemented a framework for a site that intended to support a small, dedicated community of followers [though this base is mostly athletes themselves, and their parents]. The requirements for this site to be considered useful, is for it to provide three things:

• access to an up to date, practice and meet schedule


• access to information about events we will be attending, including location and travel directions


• rapid turnaround in providing athlete performance summaries

However, there's no getting around providing a site w/ some entertainment value too. So a goal is to collect plenty of photos and share them thru galleries and such ...

There are plenty of other features that will make the site of some appeal to a broader base, but that effort will be ongoing.

What I've put together is a general template for delivering future page content. While no time at all has been expended on styling, the template includes:

• dynamic generation of a menu and drop-down submenu bar driven thru an xml config file


• content generation from mysql


• a slideshow of randomized pics from a user directory, w/ fading-in/out effects


• connection and capture of remote webpages that utilize the sport standard for meet administration and reporting. This data is stored locally and then becomes the target of a series of filters that can be applied against it. This massages the data in expected, useful ways. Doing this required a greater than minimal level of introduction to regex processing. Pardon the temporary colors, but here's a snapshot. The form controls on the left are dynamicall generated from the data in the main content panel.
  
  

Discovered along the way that just about any 3rd party code makes of O-O practices, so I decided too to use OO. While my ramp-up was slow, I think the code is cleaner in the end and was probably easier to organize. With that said, I've had a myriad of problems, including some still current ones which prevented demo of the project. Of course these were not of an easy variety, the two most pressing problems work perfectly happily in my local environment, but not on the class server. I definitely could use another pair of eyes. These problems are:

• unable to reliably cross javascript/php bridge w/ ajax. Again, works locally.


• a LimitIterator fails to do its thing on all but it's 1st call. This breaks the filtering feature I discussed earlier. Much to my chagrin, this also works as expected locally. It would probably be easier to debug if it didn't. Code fragment is here, though I presume the problem is outside the range of my suspicion.
  
  

Will continue to hack at this as I would like to style and make available to our community at large, asap. I have other code and assets (i.e. calendar) ready to go as soon I clear the hurdles ... I will likely attempt to install onto my host isp to see if problem persists.

Here's a link to this prototype ... again no styling. There's minimal content seeded into the db.

Final Project Wireframes

Here are select wireframes in support of following the exploits of a youth track club. The club is a non-profit, small business that has no [as in zero] web presence. I've selected an initial feature set as the class project, and expect that new features will continue to be implemented after our class.

Latest Info and Updates, a gallery, and results reporting pretty much constitutes most, if not all, of what athletes and parents hope [and expect] to see. Paper of email delivery of this data doesn't seem to cut it anymore.



However, team administrators and coaches, put in considerable effort to provide this [and regurgitated variations of this] info, in several forms to others. So, there is a additional set of features that will be developed [post-final project] that will make managing team activities much easier. These [the tools] are more of the administrator variety and will be hidden behind a special login group. It's not a wireframe, but see the chosen familiar interface ...



In addition, the site will be expanded to provide info of wider scope and interest.
Academic honor roll, summer programs, college info, tracking our college roll round out our vision to become more of a community based organization.

Class Final Project

... is to build a site in support of a youth track club's administrative and operational needs. The goal is to present information of value to the following roles: athlete, parent, coach, and administrator. This project has wider scope than what will be available at course's end, but some practical set of features will be developed using the concepts learned in class.

Assignment 8 - In Class

Installed MySQL and attempted to install phpMyAdmin onto Mac machine. Could not find any forum or knowledgebase help on this. It appears you really have to be a network/unix administrator type in order to succeed at what's billed as such a straight forward process ...

Class7 Assignment

Detailed experiences[problems] and observations to follow ... meanwhile, here's the link.

PHP Notes

➔
a multiline string can be assigned as follows:
$a_string = <<< TEST
~~~~~~~~~~~
~~~~~~~~~~~
~~~~~~~~~~~
TEST;
echo $a_string;

➔
PHP tags are embedded within:
<?php
?>

➔
period('.') is concatenation operator for strings:
echo "this concatenates a variable value".$my_var."and some more text";

can use the usual combination of assignment & arithmetic operators.
'.=' is a new one. $a.="hello"; equals $a = $a."hello";

Pre && Post-fix operators exist, unlike javascript where only postfix is allowed


various comment styles are supported: <!-- --> AND /* */ AND // AND #

include command: <?php include("menu.php"); ?>
require command: <?php require("menu.php"); ?> returns a FATAL error if include file isn't found

➔ language features
if-elseif-else AND switch-case-default constructs are supported

PHP creates an associative array when an html form is used with method="POST". The indices to be used correspond to each name attribute defined in the html form. _POST is the array name for "POST", while _GET is array name for method="GET". However method=GET displays the var values appended to the URL. They will appear visible using this form:
"?item=##&quantity=##" the question mark signals to the browser that variables follow.

PHP arrays are actually maps, with each key being mapped to a value. To loop thru an associative array, use the foreach loop:
foreach ($arrayname as $key => $value) { ~~~~~ }
Yes, 'as' and '=>' are needed as specified.

➔
mysql_real_escape_string(), function to help prevent SQL Injection attacks.

magic quotes assisted in earlier releases in these attacks. this is how to test&deal with them:

// Remove those slashes
if(get_magic_quotes_gpc())
echo stripslashes($_POST['question']);
else
echo $_POST['question'];

➔
use htmlentities function for similar protection when allowing a user to enter text:
The htmlentities function takes a string and returns the same string with HTML converted into HTML entities. For example, the string "<script>" would be converted to "<script>".

$userInput = "I am going to hax0r your site, hahaha!
<script type='text/javascript'>
window.location = 'http://www.example.com/'
</script>'";

$userInputEntities = htmlentities($userInput);
echo $userInputEntities;

Class5 homework assignment

The class5 eCommerce assignment brings together class1-5 topics, including xhtml, css, and javascript. My solution was an exotic fruit site shown here. Mousing over the image grid displays an associated [text] image which purports to describe details of the image. This dynamic behavior was implemented by assigning mouseover & mouseout event handlers using features of the prototypejs framework. This framework assists in traversing thru the DOM[Document Object Module]. With a small amount of code, we can identify the moused-over image, retrieve the src attribute, clone the element, reassign the src attribute w/ use of a regex expression: /(\.{2}\/?\w+\/)*(\w+\d+)(\.\w+)/ . When mousing out, we reverse the element's attr assignment back to the original image.

➔
prototypejs introduces quite a bit of functionality, difficult to find a reason not to use it ...

most fundamentally:

for (var index=0; index<myArray.length; index++) {
var item = myArray[index];
// working code ...
}

is replaced by:

myArray.each( function(item) {
// working code ...
} );

'each' is a reserved keyword, 'item' is not.

$w( string ) ➝Array

➔
a few string method offerings ...

truncate( length=n, suffix='...' )
appends suffix to truncated string

blank() ➝ Boolean
empty() ➝ Boolean

camelize() ➝string
converts string seperated by dashes to camel case

escapeHTML() ➝ string
useful for protecting against possible malicious user entry

gsub( pattern, replacement ) ➝ string

strip()
strips all leading/trailing whitespace

➔
misc ...

$('~~~').childElements() ➝ returns an array of ... child elements ... of element '~~~'

$('nyc').adjacent('li.us') ➝ returns an array of sibling elements that match the 'li.us' selector. '.us' represents a class="us"; 'nyc' represents an element with #nyc

uniq()
method returning a duplicate free version of an array

clonePosition( element, source [,options] ) ➝returns an object cloning the dimensions and position of a source element.


$(element).wrap('div').setStyle(
{backgroundImage: 'url(images/rounded-corner-top-left.png) top left'} );
➝ set the style for selector div of element with the background image

binding ...

'this' refers to the object holding a reference to the function

Class4 Assignment Repost

This is an upgrade to earlier posted solution to class4 assignment. Added are:

• use of RegEx expression to perform email address validation


• DOM traversal combined w/ regex processing to assign a runtime an event handler to a group of properties.


Lessons learned:

• know when to use the two argument RegExp constructor versus the one arg. The 2nd arg is needed when want to set runtime flags, such as suspending exact case matches.


• Submit and Reset form types have implied default actions. Reset clears all of a forms fields, which isn't precisely what was wanted in this one-form design.

assignment 4

assign4 java script caveats ...

• Strings are objects, not primitives. Assigning string2=string1 makes string1 AND string2 references equal and pointing to the same object. This did not bode well when attempting to only reset string2. String1 was reset also because they referred to the same object.


• The String class constructor needed to be invoked: string2 = new String(string1);
  string1 and string2 now their own separate copies, so wiping one out has no effect on the other.

Javascript Notes

Javascript is a lightweight progr language, typically used to animate certain behaviors, create cookies, validate data, generate html ...

<script type="text/javascript"> must envelop JS cmds and can appear in &<head> and <body> tags. Declaring function in the head section ensures that it will be loaded and accessible when function calls are placed from within the <body> section.

External scripts declaration goes in head tag: <script src="external-script-file.js">

May need to envelope scripting command in comments for browsers not supporting JS.



Many of the same programming constructs as C and Java is supported. Only new, unfamiliar relational operator is '==='. It checks for equality in value and type.

While JS is said to be an object-oriented progr lang, it doesn't appear to support inheritance, polymorphism, etc. It does support however object decl and creation, environment defined classes, system libraries with useful methods. User defined classes supported. Its not clear whether constructors are needed. Function overload doesn't appear to be supported.

Many different types of events are recognized, too many to remember. Some of them are:
mouseclick, web page or image loading, mousing over hot spot, selecting input block in HTML form, submitting an HTL form, tracking keystrokes.

There were three types of functions that throw up dialog boxes: { alert, confirm, prompt }.
alert() has no return type, confirm returns boolean, and prompt supports a return value.

Try, Catch construct supported, w/ Error object being available as a Catch argument.

User generated exception can be thrown too.

Many string methods available that can be used to style text. big(), small(), bold(), toLowercase, toUpperCase, link() are a few examples:

For example: String object instance:
var mystring="I am an hyperlink";
mystring.link("http://www.w3schools.com");

There is extensive spport for Date objects and Regular expressions. Need to refamiliarize with regexpr patterns.


The HTML DOM defines a standard set of objects, and a standard way to access and manipulate.
For example: screen object properties
* availHeight
* logicalXDPI - horizontal dots/inch

Browser info avail too thru navigator object
i.e.
function detect_Browser() {
var browser = navigator.appname;
var b_version= navigator.appVersion;
var version = parseFloat(b_version); // which pulls out 1st thing resembling a decimal#.

<body onload ="detectBrowser()";

more-to-follow on {cookies, validation, and object creation} ...

Personal page link here.

class2 homework assignment

class2 homework assignment here.

Class2 Notes

1. installed firefox add-ons: web developer toolbar, firebug, fireshot[for screen shot capture], and a clear cache button. Also IM client pidgin was downloaded, but not installed.



2. xhtml docs require a DTD statement, we are using xhhtml 1.0 strict version. Include a the head of each html doc ...
   <!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


3. Page layout w/ using tables is old school.

Containers are used and defined w/ div statements.

4. z-index element introduced. It must be used w/ absolute positioning.


5. a href="#" defines a dummy link anchor point.


6. &<a class="~~~", href="~~~" target="_blank"> follows the referenced link in a new browser window.


7. float:left; and clear:both; is commonly used to affect positioning flow. clear:both says to clear the left and bottom edges of the preceding element.


8. Three ways of introducing CSS styling:
   
   
   
   • via external file <link rel="stylesheet" type="text/css" href="main.css" />
     
   
   
   • via the doc header, w/ following: <style type="text/css">
     
   
   
   • inline, by combining w/ html element via: <span style="font-weight:bold;">
     

This week, read about:

• pseudo classes :link, :visited, :hover, :active, :first-child
  Sequence is important. :hover if present, must follow link & visited.
  :active if present, must follow :hover
  
• why isn't first-child considered a pseudo element? hmmm. Allows different treatment of the first element in a sequence of the same [x]html element.
  
• pseudo elements, :first-line, :first-letter, [and :before, :after]. The latter two don't work in IE.
  

Added style sheet for petshop page from class2.

Attempted to build page in disciplined fashion by establishing document first ... before styling. Page is anything but bullet-proof though. Layout is sensitive [in particular,] to change in width of individual components. Ran into this issue when attempting to fine tune pixel alignment of page's components.

Isn't clear which is best ... work to define dimensions of page's components from outer containers in ... or define physical dimensions of lowest[inner] elements and allow containing components to inherit size [so-to-speak].

What doesn't work well is mixing the two techniques. It becomes difficult to predict how layout [behavior] is affected through minor change.

Anyway, there seems to be merit in reviewing coded css [in 2nd and 3rd passes] to look for opportunity to reduce/consolidate classes and identifiers.

petshop wireframe document defined

Added [x]html doc for petshop wireframe. Loading into browser shows well formed document w/intended structure and page content. Styles to be added next ...

Class2 - in-class assignment code & output ... can't seem to put relative positioning to good use.

here's a 2nd page putting some newly learned html and css elements together. Code formats and provides some indexed jumps into a formatted listing. Look is simple, but non-trivial code (a dozen or so html/css tag attributes) to achieve look.

In-class Wireframe Document

diagram implicitly suggests an implementation(javascript behavior thru tabs] & does not show content to be shown on indiviual panes, which is the purpose of the wireframe.

I get it ... for next time.

My 1st post to blog ... thrilling!