Teaching a Standards-based Web Curriculum Digital Design: Foundations of Web Design Fran Weaver Course Technology [email protected]
Mar 27, 2015
Teaching a Standards-basedWeb Curriculum
Digital Design:Foundations of Web Design
Fran WeaverCourse Technology
Agenda
The Players and Tools
Curriculum Goals and Challenges
Digital Design Curriculum
How can we help you?
Web Tools …the Players
Curriculum Goals and Challenges
What are schools teaching?
It’s all over the map Microsoft Adobe Macromedia Web page design HTML and JavaScript Video editing
Who is teaching these programs?
Curriculum Goals
Teach the professional web design and development process
Criteria: Develop students’ career skills Provide engaging, real-world projects Use industry-standard professional web design
tools Correlate the curriculum to state and national
standards Pilot with teachers and revise to meet their needs Increase enrollment of girls into IT courses
IT Career Cluster
Washington is one of 10 states participating in the National IT Career Cluster Initiative sponsored by USDOE and the National School-to-Work office Create a national model and curricular framework for IT
careers (www.careerclusters.org)
Network Systems
Information Support and Services
Programming and Software Development
Interactive Media
WA OSPI took on the task to create a curriculum to prepare students for digital-media and web-design careers
Maps to Interactive Media IT Career Pathway
Digital Design Project
The challenge: Limited resources and broad expertise among
teachers and administrators to build the curriculum all on their own
The partnership: 2001-02: Macromedia and WA teachers
collaborated to developed and test the curriculum in over 35 high schools across the state
Digital Design Curriculum
Now offered as a career and technical-education elective in urban, suburban, and rural high schools throughout country Consistent teacher acclaim about student retention and
achievement
States adopting Digital Design WA trained 200 additional teachers summer 2003 for fall classes Michigan
Mapped DD to the Bus. Mgmt. & Administration Career Cluster Trained 90+ add’l. teachers summer 2003 for fall classes
Indiana, Connecticut, Florida Training this summer: Wisconsin and Idaho Many others… on individual district-by-district basis
Course Technology and Macromedia
Course Technology partnered with Macromedia as the exclusive Macromedia Education publishing partner Integrating Macromedia's subject-matter expertise with Course
Technology's innovative approach to educational publishing
The commitment — Enable faculty and students to use Macromedia products for teaching and enhance learning
90% of professional web developers use Dreamweaver Millions of people see Flash and Shockwave enabled web
sites every day
Digital Design Curriculum Guide
Yearlong, project-based curriculum teaching the professional Web design process and Web tools Develops students’ career skills
Provides engaging, real-world projects
Coverage includes Flash, Dreamweaver, and Fireworks
Correlates to educational technology and national IT standards
Addresses core academic skills specific to writing, reading, communications, and art
Studio MX 2004 ISBN 0-619-18396-9
Studio MX ISBN 0-619-05516-2$262.50 from Course Technology
Student Learning Objectives
Develop Collaborative and team skills through group projects
Communication skills through web design
Higher-order analysis and problem-solving skills
Design and project management experience
Technical skills with professional web tools
Skills taught in a spiral Each project adds more challenging skills onto
foundation proficiencies
The Standards
ISTE NETS for Students Standard 1: Basic operations and concepts
Standard 2: Social, ethical, and human issues
Standard 3: Technology productivity tools
Standard 4: Technology communications tools
Standard 5: Technology research tools
Standard 6: Technology problem-solving and decision-making tools
NWCET Standards for Students Digital Media
Project Management
Curriculum Content
Digital Design
First Semester
Foundation for producing Web-ready communications Effective personal
communications
Graphic design principles
Site analysis and design
Project planning
Peer teaching and evaluation
Authentic assessment that ties back to the standards
Tools: Fireworks
Dreamweaver
Projects: Graphical images
Electronic portfolio
Web photo album
Interactive graphics
Curriculum Hours 150
Activities 51
Process Guides 20
Technical Guides 50
Second Semester
Perspective shifts from individual to client Soft skills (interviewing and
responding to feedback)
Working on a team
Working for a client
Project planning and design
Redesigning a site according to client specs
Advanced web design tools
Technical Web publishing
Tools: Dreamweaver
Fireworks
Flash
Projects: Design documents and visual
composites for client review
Develop Web site designs that solve specific communication challenges
Build technical skills to address client needs
Web Design and Development Process
PlanResearchSchedule
Goals and audienceCost-benefit analysis
EvaluateUsability
AccessibilityContent
Client feedback
DevelopContent
GraphicsMultimediaWeb pages
Redesign & ReworkDesignSite map
Visual compsPrototypes
Storyboards
DESIGN TECHNICAL
Open-ended projects
Graphics and navigation
Page layout
Digital narrative
Design documents
Broad, independent use of industry-standard web software
Increasingly complex projects
Spiraling skill growth
PROJECT MANAGEMENT RESEARCH & COMMUNICATION
Individual and team projects
Project plans
Development process
Design process
Higher-order analysis and problem-solving
Website review and comparison
Personal and peer review
Presentations
Portfolio
Supports Key Career Skills
Design Technical Project Management Research & Communication
Digital Design Approach
Builds web design skills in ever-larger, more complex projects:
NameplateOnline
Business Logo
Virtual Business
Card
Electronic Portfolio
Web Photo Album
Interactive Graphics
Simple Client Website
Redesigned Client
Website
Rich Media Client
Website
Pilot Teacher Feedback
Engaging projects focus on student interests
Useful guide provides prep, lesson plans, resources and assessment tools
Students are engaged as team members, critical thinkers
Collaboration grew with each project
Empowered students’ learning and use of professional tools
Listen to Joann Fevergeon, Digital Design Teacher, Ellensburg High School
Digital Design resources:
Digital Design curriculum includes Teacher Lesson Plans Introductory presentations Student Concept Guides Technical “how to” Guides Assessment guidelines Correlations to Standards Suggested lesson time
Instructor Resource CD includes Learner Study Guides
Teacher notes
ExamView testing software and test bank (Win & Mac)
PowerPoint presentations
Data files
And more…
Digital Design Concepts and Technical Guide includes Printed Student Concepts and
Technical Guides, $21 each Studio MX 2004 ISBN 0-619-18397-7 Studio MX ISBN 0-619-18334-9
ISBN 0-619-18438-8$121.00 from Course Technology
Digital Design Staff Development Guide
Prepares instructors to teach the Digital Design Curriculum Includes project management, design, research
and communication, and technical skills
Reproducible binder includes Workshops that emphasize content and
methods for teaching courses on web design and development
3-day workshop covers 1st semester (Dreamweaver and Fireworks)
2-day workshop covers 2nd semester (Flash) Participants reflect on skills learned, discuss
ways to use tools and projects in the classroom, support student learning, and assess the technology use
Student Examples
Sample Student Work - Logos
Sample Student Electronic Portfolio
Sample Student Electronic Portfolio
© Anacortes High School
© Ellensberg High School
© Arlington Elementary School
© Anacortes High School
© Anacortes High School
© Anacortes High School
Supporting theDigital Design Program
Gathering Support
Identify key players who can lend support to your program Vocational director
Technology coordinator
School principal
Other colleagues
Think outside the business or computer technology department in your school
Promoting Digital Design
Seek Art credit
Educate counselors
Hold showcase days to exhibit student work
Write articles about Digital Design for school and local newspapers
Promoting Digital Design
Special K-12 Site License for
Macromedia Studio MX 2004
Studio MX 2004 K-12 Site License
Includes both Windows and Macintosh Dreamweaver MX 2004 Flash MX 2004 Fireworks MX 2004 Freehand MX ColdFusion MX 6.1 Developers Edition (Win only) Macromedia University’s online Studio MX 2004 courses
for 1 person at your school for 1 year Home-use rights for teachers for school-related work Curriculum published by Course Technology
Teacher Resource CDs Sample project for both Dreamweaver and Flash
Studio MX 2004 K-12 Site License
Pricing 500 or fewer students
ISBN 0-619-18438-8, $2,500 501 or more students
ISBN 0-619-18437-X, $3,500
Order software and curriculum directly from Thomson Learning @ 800 824-5179
Include your complete school information where the software will be installed
Include a contact person at that school
Studio MX K-12 Site License Upgrade
Upgrade your current Studio MX K-12 Site License from Course Technology: 500 students or less: $1,875
501 students or more: $2,625
Special upgrade pricing available through 6/30/04
Must provide copy of original invoice as proof of purchase
Additional Curriculum from Macromedia
Macromedia Studio MX 2004 Step-by-Step
Textbook of projects using Studio MX 2004 to develop commercial websites Includes projects on Dreamweaver,
Flash, Fireworks and FreeHand
50 hours of step-by-step instruction and explanation of Web-authoring tools
Interactive training modules to introduce tools
School price from Course Technology $35.75
Ships with K-12 Site LicenseStudio MX 2004 ISBN 0-619-18390-X
Also available: Studio MX ISBN 0-619-05507-3
Studio MX 2004 Step-by-Step
Just Studio MX 2004 products (Director and UltraDev to be covered in other books)
4-color layout!
Just a textbook – no duplication allowed
Numerous teacher materials on instructor resource CD: PowerPoint presentations, lesson plans, learner study
guides, teacher notes, ExamView testing software, and test bank
Flash Project: Gallery San Luis website
Project: Create a Flash
website for a photography studio
Tool: Macromedia Flash
Macromedia Flash project from the textbook: Macromedia Studio MX 2004 Step-by-Step Projects
Multimedia Projects for Flash and Dreamweaver
Teaches web design within academic classes Step-by-step projects that integrate
multimedia into other academic subjects
Reproducible projects for MacromediaFlash, Dreamweaver, and Fireworks
Project planning, scheduling and assessment
Interactive training modules to introduce Studio tools
School price from Course Technology $105
Studio MX 2004 ISBN 0-619-18394-2Ships with K-12 Site License
Also available:Studio MX ISBN 0-619-05514-6
Multimedia Projects
Updated for Studio MX 2004
Shipped in 3-ring binder
Materials are reproducible
Numerous teacher materials on instructor resource CD: PowerPoint presentations, learner study guides,
teacher notes, ExamView testing software, and test bank
Electronic Portfolio project
Project: Design an electronic
portfolio website to share and reflect on work in a course or across a subject
Tool: Dreamweaver
Electronic Portfolio project from the teacher guide Multimedia Projects for Macromedia Flash and Dreamweaver
Digital Autobiography Project
Project: Design and build a
digital narrative that incorporates text, audio, and graphics
Tool: Macromedia Flash
Digital Autobiography project from the teacher guide Multimedia Projects for Macromedia Flash and Dreamweaver
Additional Multimedia-Web Design Titles from Course
Technology
Design Professional Series
Designed for digital media students and instructors with in-depth “why” information
Quick Reference steps
Landscape layout
Professional quality graphics and design
BASICS Series
Ideal for introductory, shorter courses (25+ hours)
Most simplified approach of all series
Covers most popular features in easy step-by-step format
Wide range of topics
Shelly Cashman Series
Unique project-based approach
Step-by-step, screen-by-screen instructions keep students on track
Comprehensive coverage of concepts w/numerous hands-on activities
Extensive end-of-chapter exercises reinforce new skills learned
Most documents created from scratch
New Perspectives Series
Realistic business case-based approach to make learning meaningful
Critical thinking and problem solving skills are encouraged
Extensive end-of-chapter materials build in complexity
Higher level approach for comprehensive coverage
Web Warrior Series
Focus on Web development and Internet programming for upcoming Web professionals
Learn to construct powerful dynamic Web sites using the latest Internet technologies
Students gain concrete skills by building Web portfolios they can use outside the classroom
Professional approach for higher level classes
Macromedia Studio MX 2004
K-12 Staff Development GuideWorkshops for Using Web Tools in theClassroom
K-12 Staff Development Guide
Designed to help K-12 schools and districts provide teachers with Macromedia training Reproducible 3-ring binder
Four 1-day workshops
Teaches web tools with educationally relevant projects
Correlated to ISTE teachers standards Technology operations and concepts
Productivity and professional practice
Macromedia Studio MX 2004ISBN 0-9742273-6-6
Macromedia Studio MXISBN 0-9742273-0-7
$399.00
In Conclusion…
In Conclusion
Digital Design meets the challenge of business and industry and education
Provides real-world curriculum developed as a partnership with classroom teachers and the leading multimedia and web developer Correlated to national standards with clear measurable objectives
Value to students Teaches higher level thinking skills
Research and communication
Project management and collaboration
Professional design and web development process
Learn more about Macromedia and Digital Design www.course.com/macromediaeducation
Thank You!For information on all Macromedia products from Course Technology
www.course.com
To download a copy of this presentation, go to
www.geocities.com/flweaver2003