Transcript CIS 1310 – HTML & CSS

10
Web Development
CIS 1310 – HTML & CSS
Learning Outcomes

Describe Necessary Web Skills, Functions, & Jobs

Understand the System Development Life Cycle

Describe the Activities in


Conceptualization

Testing

Analysis

Launch

Design

Maintenance

Production

Evaluation
Compare Website Goals To Results
CIS 1310 – HTML & CSS
Development Options

Make (Create In-house)


More Control
Buy (Outsourcing)

Lower Overall Cost

Higher Quality

Faster Implementation

Less Staff Required
CIS 1310 – HTML & CSS
Project Job Roles

Web Operations Manager

Oversees Strategy & Operations

Content Creation & Maintenance

Develops Business Plan & Annual Budget

Accountable for:

Staff

Product & Service Delivery
CIS 1310 – HTML & CSS
Project Job Roles

Administration: Level 1

Performs Research

Assists in Determining Practices for Admin & Ops


Hardware & Connectivity Requirements

Monitoring Technical Integrity
Create Proposals
CIS 1310 – HTML & CSS
Project Job Roles

Administration: Level 2

Connectivity Requirements

Intranet, LAN, WAN

3rd Party Liaison

Implement Security Measures
CIS 1310 – HTML & CSS
Project Job Roles

Administration: Level 3


Develop & Administer Processes

Infrastructure

Firewall

Site Monitoring
Quality Assurance Reviews
CIS 1310 – HTML & CSS
Project Job Roles

Content: Level 1

Updates Content Based on Standards

Posts Documents to Site

Review Site for Outdated Content

Repurpose Brochures, Newsletters, White Papers
CIS 1310 – HTML & CSS
Project Job Roles

Content: Level 2

Modify & Create Content

Review Content for Accuracy & Quality


Grammar & Consistency
Provides Direction for Converting Text to Pages
CIS 1310 – HTML & CSS
Project Job Roles

Content: Level 3

Support of Web Content Strategy


Strategic & Creative Development
Ensures Development & Implementation Standards

Content Submission & Approval Procedures

Oversees Content Changes
CIS 1310 – HTML & CSS
Project Job Roles

Design: Level 1

Documents Project Plans

Researches Competing Sites

Design Elements

Unique Features
CIS 1310 – HTML & CSS
Project Job Roles

Design: Level 2

Creates Project Plans & Standards

Direct Implementation of UI


Approves Layout

Builds Prototype & Verifies Usability
Work w/ Developers

Special Effects, Animation, Graphics
CIS 1310 – HTML & CSS
Project Job Roles

Design: Level 3


Develop UI

Organizational Structure, Navigation

Labeling Conventions

Search Systems
Final Review of Graphics, Layout, Clarity

Approves Layout & Verifies Usability
CIS 1310 – HTML & CSS
Project Job Roles

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
CIS 1310 – HTML & CSS
Project Job Roles

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
CIS 1310 – HTML & CSS
Project Job Roles

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
CIS 1310 – HTML & CSS
Project Job Roles

Marketing: Level 1

Monitors Site Activity

Prepares Analysis for Management Review

Marketing Research Support

Coordinate with Print, Radio, & Television
CIS 1310 – HTML & CSS
Project Job Roles

Marketing: Level 2

Input/Recommendations

Channels, Strategic Partners

Branding, Marketing, Hyperlinks

Assists in Developing Marketing Plans

Identify Revenue-Generating Opportunities
CIS 1310 – HTML & CSS
Project Job Roles

Marketing: Level 3

Develop/Implement Web Promotion Strategy

Develop Strategic Partner Relationships

Significant Service/Product Marketing Experience
CIS 1310 – HTML & CSS
Project Job Roles

Project Manager

Plans, Schedules, & Controls Activities

Establishes Scope

Goals, Objectives, & Expectations of Project

List Required Activities

Time Required

Cost Estimate

Order & Dependency
CIS 1310 – HTML & CSS
Project Job Roles

Graphic Designer

Determines Appropriate Use of Color & Graphics

Designs Wireframes

Creates Logos & Images

Optimized for Web
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
System Development Life Cycle

Planning


Analysis


Project Definition
Site Structure
Design

Visual Design
CIS 1310 – HTML & CSS
System Development Life Cycle


Implementation

Site Development

Testing

Launch
Support

Maintenance
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Planning — Project Definition

Conduct Client Survey Interview

Target Audience


Demographics

Age

Gender

Education

Financial

Geographic
Measurable Goals
CIS 1310 – HTML & CSS
Planning — Project Definition

Conduct Client Survey Interview

Branding/Perception Goals

Signifies Goods/Services

Name

Slogan

Logo

Color Scheme
CIS 1310 – HTML & CSS
Planning — Project Definition

Conduct Client Survey Interview

Content Source

Initial Technical Specs

Web Benchmarking

Competition


Other Sites that Your Users Frequent


Paradigm Shifts
Offer Comparable Features / Capabilities
Communication Strategy
CIS 1310 – HTML & CSS
Planning — Project Definition

Write Project Brief

Derived from Client Survey

Your Understanding of:

Project Goals

Audience Profile

Audience Perception

Primary Message

Competitive Advantage
CIS 1310 – HTML & CSS
Planning — Project Definition

Develop Persona(s)

Derived from Client Survey

Fictional, Yet Realistic, Description of Typical or Target User

Photo, Name, Quote, & Description

Demographics

Technical Profile

Top Three User Goals

Top Three Business Objectives
CIS 1310 – HTML & CSS
Planning — Project Definition

Persona Benefits

Provide an Easy Way to Describe Target Audience

Used as a Guide for Expert Reviews


How Each Persona Would Deal with Process

Determine Potential Issues within Interface
Consider as Template for Prospective UX Study Recruits
CIS 1310 – HTML & CSS
Planning — Project Definition

Write Technical Specifications

Establish Requirements

Screen Resolution

Browser Compatibility

Download Time

Web Standards

Accessibility
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Analysis — Site Structure

Site Diagram

AKA Sitemap, Flowchart

Visual Representation of Content Outline & Site Structure
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Design — Visual Design

Implement Design Principles





Balance
Rhythm
Proportion
Dominance
Use Design Elements





Point / Line
Shape
Color
Typography
Usability
CIS 1310 – HTML & CSS
Design — Visual Design

Most Frequently Produced Deliverables
CIS 1310 – HTML & CSS
Design — Visual Design

Most Effective Deliverable For Each Audience Type
CIS 1310 – HTML & CSS
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)
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Implementation — Site Development

Functional Plan

Rich Media

Audio / Video

Search

Secure Credit Card Transactions

Backend Technologies


Database, CMS, Personalization, Login
Web Analytics
CIS 1310 – HTML & CSS
Implementation — Site Development

Project Plan

Timeline

Tasks



Dependencies

Responsibilities
Target Dates with Deliverables
Build Site
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Implementation — Testing

QA Testing

Validity


Accessibility


Section 508 Tests
Browser / OS / Resolution


Validate HTML / XHTML / CSS
Test Site on Target Browsers
Connection Speed

Get Analysis & Recommendations on Page Speed/Size
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Implementation — Launch

Style Guide

Visual Design Standards


Naming Conventions



Logos, Colors, Typography (Keep Site on Brand)
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
CIS 1310 – HTML & CSS
Implementation — Launch

Minimize Downtime


Deploy


Consider Current Web Site Traffic Patterns
FTP (File Transfer Protocol)
Everyone on Team is on Call
CIS 1310 – HTML & CSS
Support — Maintenance

Decide What Content Needs Updating

Determine Frequency

Day, Week, Month, Quarter, Annual

Who Maintains Site Content

Who are Content Contributors

How Will Site be Updated
CIS 1310 – HTML & CSS
Support — Maintenance

Analytics (Collect Statistics)

Number of Visitors

Pages Viewed

Views Per Visit

Duration

Popularity
CIS 1310 – HTML & CSS
Support — Maintenance

Analytics Uses

Issue Indication

Diagnose Specific Issues

Clues to Guide Further Investigations

Measurement Plan
CIS 1310 – HTML & CSS
Support — Maintenance

Analytics Uses

Investigations

Prove/Disprove Theories

Traffic – Increase/Decrease Due to Referrer

Technical – Page Not Loading Properly

Content – Does Not Effectively Communicate

Visual Design – Distract from Calls To Action (CTA)

Navigation – Specific Links/Buttons Not Being Clicked
CIS 1310 – HTML & CSS
Domain Names

Company Name or Business Description

Be Brief

Avoid Hyphens

Choose Appropriate TLD

.com, .net, .biz, .us, .mobi, etc.

.org for Non-profits
CIS 1310 – HTML & CSS
Domain Names

Brainstorm Potential Keywords

Avoid Trademarked Words or Phrases

Know the Industry / Competition

Use Searches

Verify Availability

Register Domain

Private Registration

Additional Fee

Personal Info is Kept Private & Out of WHOIS Database
CIS 1310 – HTML & CSS
Web Hosting

Allows Website to be Accessible Via the Web

Space Allocated on an Owned or Leased Web Server

Considerations

Future Growth & Scalability of Web Host

Operating System

Types of Server-side Processing Supported

Bandwidth of Internet Connection

Guaranteed Uptime

Technical Support
CIS 1310 – HTML & CSS
Web Hosting Types


Virtual Hosting

Server is Divided into a Number of Virtual Domains

Multiple Websites are Set up on the Same Computer
Dedicated Web Server

Exclusive Use of a Rented Computer & Internet Connection

Housed in the Web Hosting Company's Premises

Can be Configured & Operated Remotely

Can Pay the Web Host Provider to Administer Site for You
CIS 1310 – HTML & CSS
Web Hosting Types

Co-Located Web Server

Computer Your Organization has Purchased & Configured

Rent Space at Web Host Provider's Location

Server is Located & Internet-connected at Provider Location

Your Organization Administers the Computer
CIS 1310 – HTML & CSS