I just had to post on the Emmy nominees to point out a few, LOST-related nods. I’m hoping that the Emmy voters (who are they anyway) do what the Oscars did for Return of the King, where since the series is over, they will shower LOST with Emmys to show their appreciation for what the show has done to our culture (and prime time for that matter). 

Outstanding Art Direction For A Single-Camera Series: Ab Aeterno

“Ab Aeterno” is pitted against Glee (should not stand a chance), Modern Family’s “Moon Landing” (which I must say was hilarious, but not on par), Heroes “Brave New World” (is that show still on?), and HBO’s “True Blood” (I think this is the only one that might give LOST a run for its money).   

Outstanding Directing for a Drama Series: Jack Bender

This nominee was for Jack Bender’s work on “The End.” Just like the Oscars gave a nod to Peter Jackson with Return of the King, the Emmys should give a nod to Jack Bender. I hope we haven’t seen the last of him. 

Outstanding Music Composition For A Series (Original Dramatic Score)

Whom else but Michael Giacchino deserves an Emmy for his compositions? When he gets his Emmy (he must receive one), it will truly be a nod to his body of LOST work, seeing as the Emmy will be for “The End” and Giacchino weaved all of the beloved LOST musical themes so deftly in that episode. 

Outstanding Lead Actor in a Drama Series

As much of a LOSTie as I am, I want to point out that I’m not so into LOST that I’m blind to other talent out there, and just to prove it, I’m going to concede that I’m not sure if Matthew Fox will pull this one off. If he does, it’s got to be for his two (count them: two) great man cry scenes (on the beach after his realization that Jin and Sun died, and with his father at the church). He has his work cut out for him though because he’s going against the Dexter guy as well as Hugh Laurie (House). I still think he most probably will, and if he does it’s more because of the fact that it’s the last chance to award Emmys for LOST. 

Outstanding Supporting Actor in a Drama Series

The Emmys are standing in between Scylla and Charybdis here. Like Sophie’s choice, the Emmys must decide between the two best actors on television…IN HISTORY! Michael Emerson as Ben or Terry O’Quinn as The Man in Black posing as Locke (or Faux Locke or just Flocke). I hate to even consider choosing between the two. I think if I had to make a choice (let’s say a gun was pointed to my head), then I would have to go for Michael Emerson (but just barely). I hope Terry will forgive me if he reads this. 

Terry’s strength is his range (from confident hunter and gatherer Locke to cowering unsteady Locke who just lost his faith in the island to the duplicitous “it was all their fault that I killed everyone in the temple” Flocke). Michael Emerson’s strength is in the nuance and the subtle details. Only a rare handful of actors could ever pull off a character like Ben. If you aren’t sure, just rewatch the episode in season 2 (The Whole Truth) when “Henry” tells the LOSTies that if he were an other, he would have led the LOSTies to a secluded place where they would be ambushed by his people so they could trade the LOSTies for him. He says it with such a cat and mouse type toying that you cannot tell if that’s his real plan or he’s just messing with them (and it’s all played with such subtlety). 

Outstanding Writing for a Drama Series

Is there any doubt who deserves the Emmy. If they could award an Oscar, they should do it for the writing of LOST as well (who cares if it was made for television, it’s better than many movies).

Outstanding Guest Actress In A Drama Series

Elizabeth Mitchell as Juliet in “The End” got the nomination here. I don’t think I watched any of her rivals in the list of nominees. It’s lucky she got nominated seeing as she only made a few minor appearances in the rest of the season. She has always done a great job, so I’m not surprised, but I might not be too shocked if she doesn’t get the award. 

Outstanding Drama Series

No question in my mind. Emmy people, you know what to do. 

Outstanding Special Class Programs

This one goes to the Mysteries of the Universe – The Dharma Initiative, and I have to say that it should get it because of its inventiveness. If you ever saw In Search Of… (hosted by Leonard Nimoy), then you know exactly where the inspiration came from. What a great way to extend the “mythology” of LOST! I loved it. 

Other Nominations

Let’s just say they should all go to LOST: 

• Outstanding Sound Editing For A Series
• Outstanding Sound Mixing For A Comedy Or Drama Series (One Hour)

Here is my PowerPoint that I planned to present during the workshop: PHP Form Validation PowerPoint 

Disclaimer 

I must make 2 disclaimers. One, you should type F5 to view this as a PowerPoint, or some slides will not make sense (I overlapped some code and animated the presentation).

Two, the Powerpoint is just an introduction to form validation. The content I present is only at a hobbyist level at best, this is not meant to cover all aspects of security. Trying to create your own email processor would most likely lead you open to all kinds of attacks. If you really want a decent PHP form processor, I highly recommend you look into Tectite Forms.

The Superfish plug-in rocks the free world, if you ask me, but I had a few problems implementing the JavaScript on my own CSS-styled menus. I therefore set out to expand their instructions and “fix” the ones that caused problems.

Start with a nested list of links.

There are many resources on using CSS to create fancy navigation bars. My top recommendation for any web designer is to start with CSS Max Design. They have a listutorial that explains the trick to creating horizontal and vertical navigation menus using only HTML and CSS. They also explain how to style nested lists. CSS Max Design also has a repository of probably 100 different menu styles, all using HTML and CSS only.

For the Superfish menu to work, you must begin with a nested list of links. Go to CSS Max Design’s Listamatic 2 and chose a CSS-driven layout that we liked (horizontal or vertical) – my favorite was “borders and indents” – you pick your own. It really doesn’t matter which menu you like because they all use the exact same HTML code.

Step 1: Copy the HTML Code and paste it on your web page.

A good place to stick this code is right after your header (<h1>) or in a banner or header div (<div id=”banner”>

Step 2: Change the <ul id=”subnavlist”> to <ul class=”subnavlist”>

Why? With the listamatic, they only contain 1 nested list (under “item one”). However, in the real world, there are typically 2 or more nested lists. Since the id attribute is a unique identifier, in theory, you should not have the same id attribute twice. That’s reserved for a class attribute.

Your nested list of links should look something like this when you’re done:

<div id="navcontainer">
<!-- Create an unordered list of links -->
<ul id="navlist">
 <li><a href="index.html">Home</a></li>
 <li><a href="#">Page One</a>
 <ul>
 <li><a href="#">Sub Item One</a></li>
 <li><a href="#">Sub Item Two</a></li>
 <li><a href="#">Sub Item Three</a>
 </li>
 <li><a href="#">Page Two</a></li>
 <li><a href="#">Page Three</a>
 </ul>
 <li><a href="#">Sub Item One</a></li>
 <li><a href="#">Sub Item Two</a></li>
 </ul>
 </li>
 <li><a href="#">Page Four</a></li>
</ul>
</div>

Create an external style sheet for your Navbar

Did you see my post on Notepad++, because it’s the best web design tool in the universe. If you don’t have Notepad++, download it now, and then you can proceed.

Step 3: Find a Listamatic2 Navbar that you Like

Note: if you are a seasoned code monkey, you may wish to create your own CSS code for the navigation bar. If that’s you, just skip the steps involving copy and paste from listamatic2.

1. In Notepad++ (or whatever editor you like) Create a new file
2. Find the listamatic2 CSS code that you want to use on your site
   • Note: you’re welcome to do all the code yourself
3. Copy all the CSS code and paste it into the file
4. Title it, “navigation.css”
   • note: I’m a firm believer in having a separate CSS file for your navigation, so it’s easier to locate

Step 4: Make Any Stylistic Changes that You Want

I often times make my students change the color schemes and fonts and encourage them to experiment with background images as well.

Step 5: Fix the CSS to Match the HTML Change from Step 2

What you’re going to do now is change every line of code in your CSS that states, “#subnavlist” to “.subnavlist” That’s because in CSS # is for an id attribute and the dot . is for class attributes.

Have you met my favorite shortcut key from Notepad++? It’s called “Replace.” In Notepad, it’s called “Find and Replace” either way, this is the time to familiarize yourself with that little shortcut.

1. In Notepad++ AND in Notepad, type “Ctr + H” that opens the find and replace
2. In the find window, type “#subnavlist”
3. In the replace window, type “.subnavlist”
4. Choose “Replace All”

Step 6: Test and Fix the navbar to make sure it looks good

This I can’t help you with. If you get stuck, or things are not working, you may wish to start over. It’s most likely due to steps 2 and 5. If you don’t mind having only 1 subnavlist or you what to throw semantic markup out the window, ignore steps 2 and 5 and hope for the best.

Add Your Superfish Files

Step 7: Download and Extract the Necessary JavaScript Files

Get the zip archive from the Superfish download page. Extract all files, then grab all JavaScript files from the ‘js’ folder and save them into a folder in your website (Note: even though you will link to 2 javascript files, all files will be used–don’t be stingy).

Step 8: Link to 2 External JavaScript Sheets

In the head of your HTML page, you will add 2 <script> tags that will link to two different JavaScript Sheets. WARNING: Make sure you link in the proper order, from top to bottom:

1. First link to ‘jquery-1.2.6.min.js’ through a script tag
2. Next, link to ‘superfish.js’ through a script tag

Note: the link to superfish.css is unnecessary for this (since we used the CSS from Listamatic2

Step 9: Initialize the Superfish

Initialize the superfish through a script tag like so

<script type="text/javascript">
//Initialize the SuperFish Plugin
 jQuery(
 function(){
 jQuery('ul#navlist').superfish();
 }
 );
</script>

According to the instructions on the Superfish home page, it says to add a class=”sf-menu” to your unordered list, but that’s only because they don’t realize how smart you are. You already gave an id attribute of ‘navlist’ to your <ul>. When you initialize the plug-in, you specify what tag gets adjusted by the Superfish, it’s the section where it says jQuery(‘ul.sf-menu’). Since our list has an id of navlist, you simply change the jQuery function call to jQuery(‘ul#navlist’), and it will work just fine.

Note: you could also just add class=”sf-menu” to your unordered list, but then it would be jQuery(‘ul.sf-menu’)

On day two, we began by looking at a modification on the Image Map exercise

Get the PowerPoint: Stupid Browser Tricks – day 2

Image Map Expansion Set

The image map idea we did in day one simply displays text when you hover over a region of your image (the <area> tag). It uses the innerHTML() method to inject content. You can inject tags as well as text. This allows us to inject images, tables, lists, whatever. Taking advantage of this fact, you can inject the image tag and have an image appear when you hover over the region.

I recommend that you inject an image tag inside of a div tag, since the image tag is an inline tag. I also recommend that all images displayed have the same width (and, preferrably) height. I also recommend that you display a default image on mouseout.

For the sample code with notes, view the JavaScript Samples: Image Map (with Expansion Set)

The SuperFish Menu

I should probably review all the steps in general. I decided to make a separate post on just the Superfish, since it is after all, super-fishey. Stay tuned for that. When I get it all up and running, I’ll come back here and post a link.

Troubleshooting JavaScript

After many trials and errors in all of the various projects we did, we came to the conclusion that there were only 2 main sources of errors with our JavaScript coding:

Spelling (Primarily Case-Sensitivity)

Some of the following samples of errors because of spelling or case-sensitivity mismanagement were real examples from our class and some were made up to prove a point (I’ll let you guess):

• MyFunction(), myFunction(), myfunction() are all different functions
• alertTxt is not the same variable as alerttxt
• We initialize the jQuery plugin with the jQuery() function call—not the jquery() function call and not the jQuerry() function call.

The Curly Braces { } v. the Parentheses ( )

As long as you use copy and paste, there typically isn’t an issue with this problem. It usually occurs when you are writing your own home-made code, or you’re in a workshop like mine trying to type what you see. That being said, if you know the difference between the two symbols, you’ll make far fewer mistakes (especially for the “home brewed” JavaScript). Here are the rules:

• Parentheses ( ) are for function or method calls like alert(“Yikes!”);
  • When you define your function
  • When you call your function
• Parentheses ( ) are also for comparing values – like after the if, else if, else, for, with, and while keywords
  • if (x > 25)
  • with (thisForm)
• Curly Braces { } are for surrounding blocks of code
  • When you define a function, all the code for that function goes inside a set of curly braces
  • After conditional statements like if (x > 10), we need to group the code that will run under that condition
  • After loop headers like while (x > 0), we need to group the code that will run each time we loop

Please let me know if I missed anything. Note also that I did not cover the brackets [ ], that’s only because we didn’t have the time to cover those, but if you are interested, it’s used for index values of arrays or strings, and gets used often times with for loops.

The JavaScript Function

Place the following JavaScript into the <head> of your web page:

<script type="text/javascript">
<!--
function writeText(txt, imgsrc, imgalt)
{
 var WinText = '<div><img src="' + imgsrc + '" alt="';
 WinText += imgalt + '" /></div>';

 document.getElementById("desc").innerHTML = txt;
 document.getElementById("window").innerHTML = WinText;
}
-->
</script>

The Image itself

Place your image in a <div> tag on your page like so:

<div>
<img src="TheBrain.jpg" alt="Picture of a Human Brain" width="513px" height="303px" usemap="#BrainMap" />
</div>

Note: you will need the usemap attribute to create your image “hot spots”

The Image Map

<map id="BrainMap">
<area shape="circle" coords="181,237,33" alt="Cerebellum" onMouseOver="writeText('The cerebellum takes care of the automatic functions of the body, like balance, breathing, etc.', 'cerebellum.jpg', 'image of the cerebellum')" />
<area shape="rect" coords="0,0,100, 100" alt="test" onMouseOver="writeText('Test area (51)', 'alien.png', 'alien picture')" />

The onMouseOver attribute calls the JavaScript function (writeText()).

The area that displays information

<p id="desc"></p>
<div id="window"><p>No Image Here</p></div>

Note: the <p id=”desc”></p> tag will display text, and the <div id=”window”></div> will display your image. You can put either tag in any order.

The Functions:

Place the JavaScript Functions in the <head> element of your page:

<script type="text/javascript">
<!--
// Required Fields -
function validate_required(field, alertTxt){
 with (field) {
  if (value==null || value=="") {
   alert(alertTxt);
   return false;
  }
  else {
   return true;
  }
 }
}

// Validate Email - Make sure email is in proper format
function validate_email(field,alerttxt)
{
with (field)
  {
  apos=value.indexOf("@");
  dotpos=value.lastIndexOf(".");
  if (apos<1||dotpos-apos<2)
    {alert(alerttxt);return false;}
  else {return true;}
  }
}

/* Validate the entire form *
*/
function validate_form(thisform) {
 with (thisform) {
  if (validate_required(name, "You forgot to add your name")==false) {
   name.focus();
   return false;
  }
  else if (validate_required(email, "You forgot to add your email address")==false) {
   email.focus();
   return false;
  }
  else if (validate_email(email, "Your email is in an incorrect format")==false)
  {
   email.focus();
   return false;
  }
 }
}
-->
</script>
</head>
<body>
<h1>JavaScript: Contact Us</h1>
<p>Please let us know what you're thinking. Drop us a note, say 'hi,' ask any question.</p>
<p><em>* Denotes Required Field</em></p>

<form action="contactUs.php" onsubmit="return validate_form(this)" method="post">
<p>* Name:</p>
<p><input type="text" id="name" name="name" value="your name" /></p>
<p>Age:</p>
<p><input type="text" id="age" name="age" value="your age" /></p>
<p>* Email:</p>
<p><input type="text" id="email" name="email" value="your email" /></p>
<p>Comments:</p>
<p><textarea id="comments" name="comments" rows="5" cols="40">Add your comments here</textarea></p>
<p><input type="submit" />&nbsp;&nbsp;<input type="reset" />
</form>

</body>
</html>

Various Built-in JavaScript Functions We Covered

• alert("Help Me!!! I'm trapped in an alert box!");

  • Alert rings the bell and pops up a window of information

• prompt("What's Your Sign?", "Neon");

  • Prompt asks a question (“What’s your sign?”), and then adds a prompt (“Neon”) as a possible answer or hint as to how to enter the box
  • Prompt will return what the user types in the input box

• confirm("Can I move on now?");

  • Confirm asks a question (“Can I move on now?”), and returns either  a
    • true (if ‘okay’ was pressed)
      OR
    • false (if ‘cancel’ was pressed)

Objects in JavaScript

JavaScript is like PHP, ActionScript, or Python in that it can be coded as a top-down, procedural language (run one statement at a time, working your way from top to bottom) or it can be coded using the Object-Oriented Programming (OOP) paradigm. This makes JavaScript one way for a teacher to introduce Object-Oriented Programming in small chunks. When it comes to browsers, JavaScript has some built-in objects that make working with web pages very handy.

The three objects introduced yesterday were:

• document – The document class refers to web pages. Every web page has properties and methods.
• navigator
• date

Anatomy of a Function & Function Calls