580 likes | 684 Views
10 Web Development. Learning Outcomes. Describe Necessary Web Skills, Functions, & Jobs Understand the System Development Life Cycle Describe the Activities in Conceptualization Analysis Design Production Compare Website Goals To Results. Testing Launch Maintenance Evaluation.
E N D
10 Web Development
Learning Outcomes • Describe Necessary Web Skills, Functions, & Jobs • Understand the System Development Life Cycle • Describe the Activities in • Conceptualization • Analysis • Design • Production • Compare Website Goals To Results • Testing • Launch • Maintenance • Evaluation
Development Options • Make (Create In-house) • More Control • Buy (Acquire from Software Vendor) • Lower Overall Cost • Higher Quality • Faster Implementation • Less Staff Required
Position — Web Operations Manager • Oversees Strategy & Operations • Content Creation & Maintenance • Develops Business Plan & Annual Budget • Accountable for: • Staff • Product & Service Delivery
Position — Administration: Level 1 • Performs Research • Assists in Determining Practices for Admin & Ops • Hardware & Connectivity Requirements • Monitoring Technical Integrity • Create Proposals
Position — Administration: Level 2 • New Technologies • Connectivity Requirements • Intranet, LAN, WAN • 3rd Party Liaison • Implement Security Measures
Position — Administration: Level 3 • Develop & Administer Processes • Infrastructure • Firewall • Site Monitoring • Quality Assurance Reviews
Position — Content: Level 1 • Updates Content Based on Standards • Posts Documents to Site • Review Site for Outdated Content • Collect Materials for Content
Position — Content: Level 2 • Modify & Create Content • Review Content for Accuracy & Quality • Provides Direction for Converting Text to Pages
Position — Content: Level 3 • Support of Web Content Strategy • Ensures Development & Implementation Standards • Content Submission & Approval Procedures
Position — Design: Level 1 • Documents Project Plans • Researches Competing Sites • Design Elements • Unique Features
Position — Design: Level 2 • Creates Project Plans & Standards • Direct Implementation of UI • Approves Layout & Verifies Usability • Work w/ Developers • Special Effects, Animation, Graphics
Position — Design: Level 3 • Develop UI • Organizational Structure, Navigation • Labeling Conventions • Search Systems • Final Review of Graphics, Layout, Clarity • Approves Layout & Verifies Usability
Position — Development: Level 1 • Program • HTML, CSS, JavaScript, XML, Java • Formulates Site Scope for Web Apps • Assists in Preparing Detailed Specs • Test, Debug • Analyze/Revise Logic & Documentation
Position — Development: Level 2 • Devises Capabilities to Solve Complex Problems • Prepares Detailed Specs • Technical Resource • Codes Complex Routines • Oversees Testing, Debugging • Guidance & Training for Less-Experienced Staff
Position — Development: Level 3 • Defines Scope & Objectives for Web Apps • Responsible for Technical Design and UI • Leads Development of Specs & Project Plans • Oversees Program Design, Coding, Testing, Docs • Performs Quality Assurance Reviews • Directs Team Members
Position — Marketing: Level 1 • Monitors Site Activity • Prepares Analysis for Management Review • Marketing Research Support
Position — Marketing: Level 2 • Input/Recommendations • Channels, Strategic Partners • Branding, Marketing, Hyperlinks • Assists in Developing Marketing Plans • Identify Revenue-Generating Opportunities
Position — Marketing: Level 3 • Develop/Implement Web Promotion Strategy • Develop Strategic Partner Relationships • Significant Service/Product Marketing Experience
Consulting Tips • Communicate Through Chain of Command • Don’t Stop at Your Contact • Gain Knowledge Regarding Your Client’s Business • Outline Decisions, Present Options • Communicate Progress, Show Results • Punctuality • Get Sign-offs, Document Decisions • Know When to Fold ‘Em
System Development Life Cycle • Planning • Project Definition • Analysis • Site Structure • Design • Visual Design
System Development Life Cycle • Implementation • Site Development • Testing • Launch • Support • Maintenance
Planning — Project Definition • Conduct Client Survey Interview • Purpose of Project • Launch a Business Presence • Selling Goods or Services • Increase Brand Recognition • Product Information • Provide Operational Instructions • Employment
Planning — Project Definition • Conduct Client Survey Interview • Target Audience • Demographics • Age • Gender • Education • Financial • Geographic • Measurable Goals
Planning — Project Definition • Conduct Client Survey Interview • Branding/Perception Goals • Signifies Goods/Services • Name • Slogan • Logo • Color Scheme
Planning — Project Definition • Conduct Client Survey Interview • Content Source • Initial Technical Specs • Web Benchmarking • Competition • Paradigm Shifts • Other Sites that Your Users Frequent • Offer Comparable Features / Capabilities • Communication Strategy
Planning — Project Definition • Write Project Brief • Derived from Client Survey • Your Understanding of: • Project Goals • Audience Profile • Audience Perception • Primary Message • Competitive Advantage
Planning — Project Definition • Develop Persona(s) • Derived from Client Survey • Create Imaginary Audience Member • Photo, Name, Quote, & Description • Demographics • Technical Profile • Top Three User Goals • Top Three Business Objectives
Planning — Project Definition • Write Technical Specifications • Establish Requirements • Screen Resolution • Browser Compatibility • Download Time • Web Standards • Accessibility
Planning — Project Definition • Develop Project Plan/Timeline • For Each Phase of Project • Establish Timeline for Deliverables • Establish Timeline for Tasks • Assign Due Dates • Assign Resources
Planning — Project Definition • Document Maintenance Considerations • Develop Web Site Maintenance Plan • Document How Site Will Be Regularly • Reviewed • Updated • Set Clear Expectations Regarding Support & Maintenance
Analysis — Site Structure • Content Outline • Create List of Existing Content • Brainstorm Content that Needs to be Added • Trim Anything that Does Not Match Goals • Group Content Into Categories • Card Sort • Create Outline of Content • Review with Clients for Accuracy
Analysis — Site Structure • Site Diagram • AKA Sitemap, Flowchart • Visual Representation of Content Outline & Site Structure
Analysis — Site Structure • Page Description Diagram (PDD) • Display Content that Belongs on Page • Display Priority of Each Piece of Content • Use Horizontal Axis for Priority • First Column Lists High Priority Content • Second Column Lists Medium Priority Content • Third Column Lists Low Priority Content
Analysis — Site Structure • Wireframe • Layout of Web Page • Depict Containers for All Major Page Elements & Functionality • Navigation • Images • Content • Functional Elements (e.g., Search) • Footer • Created for Home Page • Each Unique Second Level Page • Any Other Significantly Different Page On Site
Design — Visual Design • Review • Project Brief • Sitemap • Wireframes • Brainstorm Design Solutions • Branding Guidelines • Technical Requirements for Screen Resolution • Browser Compatibility • Download Time • Web Standards • Accessibility
Design — Visual Design • Implement Design Principles • Balance • Rhythm • Proportion • Dominance • Use Design Elements • Point / Line • Shape • Color • Typography • Usability
Design — Visual Design • Deliverables • 1st Draft for Home Page & One Sub-page • Client Provides Feedback on Designs • 2nd Draft for Home Page & One Sub-page • Client Selects Design & Provides Feedback • 3rd Draft for Home Page & All Unique Sub-pages • Client Provides Feedback on Design • Final Designs for Home Page & All Unique Sub-pages • Client Approval of Final Design
Implementation — Site Development • Technical Plan • Targets Designed For or Supported • Browsers • Operating Systems • Display Resolution • Connection Speed • Page Download Size • 30K and Under • 30-80K (Typical) • 80-100K (Heavy) • 100K+ (Requires Broadband)
Implementation — Site Development • Functional Plan • HTML • DHTML (Dynamic HTML) • Interactivity • JavaScript, CSS • XHTML (Extensible HTML) • Includes Features of HTML & XML • XML (Extensible Markup Language) • Elements Describe Data Passed to Client • Ties Database Data to Web Pages • Client, Rather Than Server, Processes Data
Implementation — Site Development • Functional Plan • WML (Wireless Markup Language) • Design Pages Specifically for Wireless Devices • Uses WAP (Wireless Application Protocol) • AJAX (Asynchronous JavaScript and XML) • Create Interactive Web Applications • Designed To Provide Immediate Response • Google Maps • PHP (PHP: Hypertext Preprocessor) • Server-side Database Access
Implementation — Site Development • Functional Plan • Java • Create Web Applications • CGI (Common Gateway Interface) • Defines how Server Communicates with Clients • CGI Script • Perl (Practical Extraction and Report Language) • Web Design Software • Create Web Pages Without Programming • Generates HTML / Some JavaScript • Dreamweaver, Expression Web
Implementation — Site Development • Functional Plan • Rich Media • Audio / Video • Search • Secure Credit Card Transactions • Backend Technologies • Database, CMS, Personalization, Login • Web Analytics
Implementation — Site Development • Project Plan • Timeline • Tasks • Dependencies • Responsibilities • Target Dates with Deliverables • Build Site
Implementation — Testing • Quality Assurance Lead • Create Realistic QA Plan • Manage Testing Process • Prioritize Issues • Ensure High Priority Issues are Solved • Conduct Final Review • Release Site
Implementation — Testing • QA Testing • Content • Accurate, Understandable, Spelling, Grammar • Conducted by Content Contributors / Content Editors • Links • Review Site For Linkrot • Broken Links • Functionality • Does Site Perform Functions Defined in Project Definition
Implementation — Testing • QA Testing • Validity • Validate HTML / XHTML / CSS • Accessibility • Section 508 Tests • Browser / OS / Resolution • Test Site on Target Browsers • Connection Speed • Get Analysis & Recommendations on Page Speed/Size
Implementation — Testing • QA Testing • Usability • Informal or Formal Testing with Target Audience • Search Engine Optimization • Load Testing • Contact Server Administrator to Discuss Techniques • Security • Review File Authorizations • Review Authentication Method • Conduct Authentication Test
Implementation — Testing • Prioritize Issues • Priority 1 • Critical • Must be Fixed Before Launch • Priority 2 • Would Enhance The Site, Can Go Live Without It • Address as Soon as Time Permits • Priority 3 • Nice Idea / Feature, Future Enhancement • Will Consider For Future Release
Implementation — Launch • Style Guide • Visual Design Standards • Logos, Colors, Typography (Keep Site on Brand) • Naming Conventions • Files, Directories, CSS, Images, Titles • Site Structure • Document Site Diagram • Indicate How Structure is Built to Handle Growth • Templates • Provide (X)HTML Templates and CSS • Indicate Layout, Typography, Size, Color, Navigation, Menus