580 likes | 702 Views
This guide provides an in-depth overview of essential web development skills, functions, and job roles. It elaborates on the System Development Life Cycle (SDLC), detailing each phase from conceptualization and analysis to design, production, testing, launch, and maintenance. Learn about key positions such as Web Operations Manager and various administration, content, design, development, and marketing levels. Gain insight into development options, project planning, and effective communication strategies to ensure successful web projects, streamlined operations, and robust marketing initiatives.
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