Scripting for Designers

1
Scripting for Designers
Session 01
2
Scripting for Designers
Tonights agenda

• Review last course
• Introductions
• Overview this course
• Course requirements
• Design/development process
• Discuss the project
• Plan out the project
• What is JavaScript
• JavaScript examples
• Resources

3
Review
What do we know?

• Design
• XHTML / CSS Syntax
• Semantic markup
• CSS for layout
• HTML forms
• WordPress?!!
• Questions, concerns

4
About Me
Zac Gordon

• Webucator
• WaSP EduTF
• Wide Sky Designs
• Inliner (retired, again)

5
About You
Dont be shy

• Name
• Background/Interest/Profession
• Favorite web design resource

6
Scripting for Designers
What we will cover

• Review previous courses
• The project Slicing service order form
• Building and styling forms
• JavaScript (up, down, in, and out)
• Unobtrusive JavaScript
• Form validation, security issues
• Navigating the DOM

7
Scripting for Designers
In more detail

• HTML forms
• Styling forms
• JavaScript history
• JavaScript syntax
• Variables
• Math and concatenation
• Conditionals
• Debugging
• Security issues
• Functions
• Event handlers

• The DOM
• Navigating the DOM
• Form validation
• Event listeners
• JavaScript libraries
• jQuery, oh yeah!

8
Course Requirements
To make everything easier

• Bring all work on drive or server each night
• Dont work on computers during lectures
• Homework?

9
Scripting for Designers
Tonights agenda

• Review last course
• Introductions
• Overview this course
• Course requirements
• Design/development process
• Discuss the project
• Plan out the project
• What is JavaScript
• JavaScript examples
• Resources

10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
The Design Process
What do you say?
What is your design process?
15
Scripting for Designers
Tonights agenda

• Review last course
• Introductions
• Overview this course
• Course requirements
• Design/development process
• Discuss the project
• Plan out the project
• What is JavaScript
• JavaScript examples
• Resources

16
The Project
CSS Slicing Service Order Form

• Overview
• One page
• Order form
• CSS Slicing service
• Requirements
• Strong design
• Live price updates
• Toggle views
• Unobtrusive

17
The Project
Planning

• Research
• Decide on services
• Sketch designs
• Functionality
• Build out HTML
• Style with CSS
• Add JavaScript

18
The Project
Beginning your research
http//vandelaydesign.com/blog/design/psd-to-html-
services/
19
Scripting for Designers
Tonights agenda

• Review last course
• Introductions
• Overview this course
• Course requirements
• Design/development process
• Discuss the project
• Plan out the project
• What is JavaScript
• JavaScript examples
• Resources

20
About JavaScript
Switch to other slides

• Client and server
• 3 layers of the web
• Examples of JS
• Technical Jargon

21
Wrap Up
Weve got a plan!

• The project
• JavaScript can docool stuff
• Need to learn someprogramming