1. Know the Pros and Cons of Flash, as discussed by Steve Jobs and other sources.
  1. PROS
  1. Easiest way to create complex animation on the Web without code
  2. Fairly lightweight, depending on how well the content is designed
  3. Currently the best way to view video on the Web
  4. Allows artists / designers to protect their code and content
  1. CONS
  1. Banned from iPods, iPads, and iPhones
  2. Proprietary = Source code is owned and controlled by Adobe = Not open for public modification and re-distribution
  3. Requires Flash to be purchased in order to edit Flash content
  4. Requires the Flash Player plugin to be installed on browser
  5. Bad for SEO, since most search engines allow little or no crawling capabilities within SWFs (Shock Wave Files)
  1. Understand the distinct roles that HTML, CSS, Flash, PHP, and Javascript play on the Web.
  1. HTML
  1. Think of HTML as a set of nouns. It describes WHAT is on a page.
  2. HTML is the basic skeletal structure of any Web page. It’s like the framework of a building.
  1. CSS
  1. Think of CSS as a set of adjectives. It describes HOW things are on a page.
  2. CSS identifies certain elements by their tag names, ID names, or Class names and applies characteristics to those elements.
  1. Flash
  1. Flash content most often resides on a Flash page within a black box (figuratively).
  2. It can do all kinds of tricks, but those tricks are most commonly contained inside the box.
  3. However, Flash can link in various ways to non-Flash content of many kinds.
  4. Flash allows for complex and visually stunning animation and effects.
  1. Javascript
  1. Think of Javascript as a set of verbs. It describes what HAPPENS on the page.
  2. Javascript adds more visual and interactive capability to a Website.
  3. This is not to be confused with another coding language Java or jScript
  4. Some common features of Javascript are animation, various types of rollovers, popup dialogs, non-Flash or video animation, dynamic CSS and HTML manipulation, etc.
  5. Frameworks have been built around Javascript that allow for very complex amounts of code to be executed with very little code. The most popular framework is jQuery.
  1. PHP
  1. PHP allows for dynamic, database-driven features on a Website.
  2. PHP allows the user to submit data and queries to the Website and get unique feedback from the site.
  3. Some popular examples are login systems, form submission, commenting, Wikis, blogs (that don’t require editing and uploading HTML files), file uploads, etc.
  1. Understand the main principles of User Experience, Information Architecture, and Experience Design, and how they relate to interactive media.
  1. User Experience (UX)
  1. Deals with how a user interacts with a system, whether digital or otherwise.
  2. Can encompass digital devices like computers or cell phones or can refer to a building’s layout and navigation
  3. Good user experience is one in which the user navigats intuitively and with ease
  4. It should play upon human psychology and be very predicable and require very little guesswork or contemplation
  5. Reach the first two chapters of “Don’t Make Me Think” to get a much stronger idea
  1. Information Architecture (IA)
  1. the art of expressing a model or concept of information used in activities that require explicit details of complex systems.
  2. This is commonly used with large Websites or systems where there are heavy amounts of diverse data that needs to be handled efficiently and easily for later retrieval or modification
  1. Experience Design (XD)
  1. the practice of designing products, processes, services, events, and environments with a focus placed on the quality of the user experience and culturally relevant solutions, with less emphasis placed on increasing and improving functionality of the design.
  1. Know the varous areas and mediums that interactive media encompasses and the various forms of input methods that exist.
  1. Touch Screen / Multi-touch
  1. Examples: iPod Touch, iPad, iPhone, NEW iPad Nano, Apple Magic Mouse, ATM, Kiosk
  1. Keyboard
  1. PC, Laptop
  1. Mouse
  1. PC
  1. Tablet / Stylus
  1. Wacom, Palm PC, Credit Card pads at checkout, Delivery confirmation
  1. Gesture
  1. Wii, New PS3 Games, Minority Report, emerging technologies
  1. Voice
  1. PC, iPod Shuffle, Goog411, Mobile Phone Voice Dial
  1. Eye Movement
  1. Used mostly for statistical and psychological purposes such as people’s browsing habits on the Web
  1. Thought
  1. Mostly used for disabled people (prosthetic limbs, wheel chairs, PC)
  1.  Discuss the current revolution of HTML5, CSS3, AJAX and Web 2.0 and how it has changed how we interact with the Web.
  1. HTML5
  1. This is a somewhat ambiguous term referring to some of the later features emerging from HTML.
  2. Although many of these features are great, many of them are useless if they are not supported in a particular browser.
  3. Currently, Google Chrome ranks the highest for the number of  HTML5 features it supports. For more information, check out this site:
  1. CSS3
  1. Some of the more advanced features in CSS, such as rounded corners, drop shadow, gradient on text, gradient on backgrounds, and opacity.
  2. But like HTML5, these features are completely dependant on their support on the various browsers.
  3. Google Chrome also ranks the highest for its support of CSS3 features.
  1. AJAX
  1. Stands for Asynchronous Javascript and XML (Extensable Markup Language)
  2. Even though XML is in the name, AJAX is not limited to XML, but can also be used in conjunction with PHP.
  3. AJAX allows for data to be loaded dynamically, on-the-fly without requiring the view to “refresh” his page.
  1. Web 2.0
  1. This is a buzz word or fluff term that refers to more modern, interactive features as well as a certain asthetic of more modern looking Websites
  2. Some prime examples of Web 2.0 Websites are Twitter, Facebook, and Youtube, as they allow for a community dialogue between the system and multiple users.
  3. jQuery and other animated and flashy effects can be associated with Web 2.0, which cause the user experience to be much smoother and alive.
  4. The general asthetic associated with Web 2.0 is having glossiness, subtle gradients, drop shadows, bevels, and other, more photographic looking effects that break away from the traditional, boring, 16-bit, MS Word-looking Websites from the 90s.
  1. Understand e basic syntax and function of several of the main HTML tags.
  1. Basic Syntax
  1. HTML is based on various “tags” which are written like this: <tag></tag>
  2. Each tag must have an opening tag and a closing tag. A closing tag has a slash before the name.
  3. A tag, however can be self-closing, such as <img/> or <br/>. In that case, the slash is place after the name.
  4. Tags can be nested in other tags. For example, a paragraph tag can be place inside a div tag. It would look like this: <div><p></p></div>
  5. Each tag can have parameters applied to give it further functionality. For example, an image will call for its source inside the tag. That would look like this: <img src=”image.jpg” />
  6. White space (tabs, spaces, and line breaks) are not normally rendered in HTML. For example if you have several lines between one line of code and the next, it will not make a difference in how it appears in the browser. However, words do need to be separated in order to be understood. For example, this would cause a browser to break down: <imgsrc=”image.jpg/>. In that example, img and src were merged.
  7. HTML is NOT case sensitive. It will not make a difference whether you write <html> or <HTML>. However, if you are linking to an external file, the file name IS case sensitive. So src=”Image.jpg” will be different than src=”image.jpg”
  1. Main Tags
  1. <html>
  1. Encloses the entire HTML document to tell the browser that it is viewing HTML code
  1. <head>
  1. Placed inside the <html> tag, but above the <body> tag. Non-visible information is stored here such as meta data, calls to external code sources, and the page title.
  1. <meta>
  1. These tags are mostly used for SEO (search engine optimization).
  2. Keywords and descriptions, which the search engines seek out, will be pulled from here and used to better rank and index a Website.
  3. This tag can also be used to automatically redirect the user to another page or to automatically refresh the page after a certain period of time.  
  1. <title>        
  1. This is where the name of the page in the very top of the window comes from.
  2. This also boosts the SEO score of a site.
  1. <style>
  1. Place CSS in this tag to style out an HTML page. This code can override an external CSS file if the <style> tag is places after the call to the external file.
  1. <script>
  1. Place Javascript or jQuery in this tag to add functionality to the page.
  1. <link>
  1. This tag is used to call for external CSS files.
  1. <body>
  1. This is where all the visible content that shows up in the browser window is placed.
  1. <p>
  1. Basic paragraph tag for blocks of text.
  1. <h1> - <h6>
  1. These are the 6 header tags used for larger title text on the page.
  2. The higher the number, the smaller the header text.
  3. Although these have default font sizes associated with each of them, they can still be styled with CSS to be any size.
  1. <a>
  1. Stands for Anchor and is used to create links to other pages.
  1. <br>
  1. Line break. Moves down one line.
  1. <img>
  1. Image tag.
  1. <table>
  1. These are used to create grid-like layouts.
  2. These used to be the primary way that Web pages were laid out, but is used only when absolutely necessary, since the <div> tag has taken its place to arrange Websites.
  1. <tr>
  1. Table Row.
  2. Table cells <td> can be placed inside of rows.
  1. <td>
  1. Table Cell
  1. <div>
  1. This is a empty container with almost no characteristics.
  2. It is currently the most popular tag to place Web page data in, since it can be styled almost endlessly to fit the needs of the designer.
  1. ID
  1. This is used to help identify an HTML element for later use in CSS or Javascript
  2. The symbol for this element is #
  3. For example, a div with an ID of “header” would be listed in CSS as div#header
  1. Class
  1. This is also used to help identify HTML elemts in CSS or Javascript
  2. The symbol for this element is .
  3. For example, a link with an class of “current” would be listed in CSS as a.current
  1. Understand the basic layout and principles of Flash and how to build a simple animation with some simple controls.
  1. Properties Panel
  2. Tool Bar
  3. Timeline
  4. Symbols
  5. Shapes
  6. Tweens
  7. Armature / Rigging / Bones
  8. Colors
  9. Gradients
  10. Strokes, Fill
  1. Undertand the diffrence between the various methods of Tweening in Flash.
  1. Classic Tween
  1. Traditional tween in which keyframes are manually set in the timeline
  2. Used only with symbols. Cannot handle shape changes
  1. Motion Tween
  1. New to CS4, allows for automatic keyframe setting
  2. Creates an animation curve automatically, which can be manipulated
  1. Shape Tween
  1. Allows tweening for non-symbol elements
  2. Allows for morphing between shapes and colors
  1. Be able to build a simple site with basic jQuery, CSS, and Flash features.
  1. Build a basic HTML skeleton or framework for the page
  2. Place elements like links, headers, paragraphs, images, and Flash content with HTML tags.
  3. Use CSS, either via an external stylesheet or inside a Style tag, to define the look of the page elements.
  4. Use jQuery to add features like tabs, animation, accordians, or draggability.
  5. Embed a Flash file using one of the three methods I’ve shown in class, the notes, or the online videos.
  6. Make sure you understand file location and hierarchy in relation to your HTML file.

Feel free to look over past week’s notes and videos for help.

If you have a question, please feel free to email me at I will try to respond ASAP.