As a teacher of web design, I feel that teaching the web design process is essential, but it’s often times difficult to do, so whenever someone opens up their own process of designing a production site (especially one as nice as the site for the Da Vinci Days), I think I should link to that site. So, without further ado, you must visit The da Vinci Days Web Design Process (from the ProWorks Blog)

The next challenge for me as a designer is building the framework of the actual website so that it looks exactly like my design. The design also needs to hold up to real data getting plugged into it, so I make sure everything’s flexible. In the end we come up with an entire visual system for da Vinci Days that encompasses any type of page Brenda wants to make!

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

No web designer or web design class is complete without Notepad++ (my favorite tool for working on web pages). Download it here: http://sourceforge.net/projects/notepad-plus/files/

FEATURES:

• It’s free
• It can be loaded and run directly onto a flash drive (out of the box)
• It has color coding for your pages and supports color coding for a huge number of languages (ASP, PHP, Python, & much more)
• It allows you to open multiple windows for viewing multiple pages (Right-click and choose ‘move to another view’)
• It has FTP built right in. If you want to upload your pages to a host, and you have all the settings for FTP, you can set up a connection and work directly on the host site or work on your local folders and click the upload button.
• There’s a launch feature, it should be set up to launch pages in browser (Includes Firefox & IE out of the box)
• And, for all the hello kitty fans out there, they even have a hello kitty theme where all your code looks like the hello kitty folks styled it (little known fact there).

Warning: setting Notepad++ theme to “Hello Kitty” may cause seizures.

Before I post all the files, I want to thank all who attended my workshop. We gathered quite the range of experience. I had so much fun, and I appreciated the input you gave. I hope you take more SuperQuest courses in the future.

Here you go folks!

Flash Files

These are the source files (.fla), shockwave movies (.swf), web pages (.html), & necessary JavaScript (.js) to both edit and post animations. They are all zipped, so you will need to save them (right-click > Save Target As…) and then extract the zipped files.

• Flash-driven Website Files – here are all the files I used to create the flash-driven website:
  • the Flash CS3 source file (lost.fla)
  • the style sheet (styles.css)
  • the xml files
  • the graphics (you’ll note I added extra images since the class ended). Note: I used the <img> tag in the xml files to show them
• Image Scroller Files - Image Gallery
• Simple Frame by Frame Animation - me, talking to myself
• Simple Motion Guide Animation - just a box moving on a loop
• Simple Spotlight Mask - this was the spotlight of the image of the Golden Gate Bridge
• Spotlight Mask - this was the night-time forest spotlight

PowerPoints

• Flash-driven Websites Saved My Life
• Flash Animations in a Nutshell
• XHTML Tags