Web Development Process The Site Development Process Site Construction is one of the last steps.

Web Development Process

The Site Development Process

http://webstyleguide.com

Site Construction isone of the last steps

Interaction Designers | User Interface Designers

User Experience Designers

Visual (Graphic) DesignersDES

IGN

Scripting and Programming

HTML, style sheets, and graphic production

DEVELO

PMEN

TCO

NTE

NT

Content Strategist

Information Architect

Information DesignerMULTIMEDIA

Content strategy and creation INFORMATION DESIGN • the organization of content and how you get to it • supports the process of getting content , message, or functionality to the users

Content Strategist

-ensures all text (buttons, labels, long text) supports the brand identity and

marketing goals of company

Information Architect /Information Designer

- organization of content (frontend and backend)

Interface DesignInteraction Designers (IxD) | User Interface Designers (UI) | User Experience

Designers (UX)| Visual Designers | Information Architects

Interface DesignHow the page works (buttons, links, navigation, etc.)How visitors move through the content/siteUsability - how easily visitors can accomplish their

goals and the overall user experience

Interaction Designers (IxD) | User Interface Designers (UI) | User Experience

Designers (UX)| Visual Designers | Information Architects

Interface Design, Information Architecture, and visual design

are tightly entwined.

Understands the needs, desires, and limitations of the userUnderstand s how the site will be used, how it will solve problems

User research and testing reports- understand the user (audience)

Wireframe diagrams- Diagram indicating how the screen real estate is divided and used (shows functionality and content… navigation, search boxes, form elements)

Site diagram- Diagram of the structure of the site – how individual pages relate to one another

Storyboards and user flow charts- Demonstrates the steps it takes to accomplish tasks, possible options (traces the path of a typical user (persona).

The web - a visual medium

Presentation & Design - everything you see screen-graphics-type- colors- layout

Document Development / Production

Document Development/Production

Authoring/markup- process of preparing content for delivery online (HTML)

Styling- Arranging the appearance of the page (CSS)

Scripting and ProgrammingAdvanced web functionality (forms, dynamic content,

interactivity)- Add behaviors and functionality to elements in the page/browser

window. (client-side programming (javascript))

- php, ruby, python and ASP.NET (server-side)

MultimediaDynamic content (sound, video, animation, Flash)

Technologies associated with web development

HTML (markup language)

CSS (Cascading Style Sheets) (presentation & formatting)

JavaScript/DOM scripting (interactivity & browser behaviors)

Server-side Programming (CGI Script; JSP; PHP; VB.NET; ASP.NET; Ruby on Rails; ColdFusion) (form handling, dynamically generated pages, shopping carts, content management systems, databases) Back-end development

XML (robust set of rules for creating other markup languages)

Java (web applets | mostly enterprise-scale applications)

Frontend – appears in or relates directly to the browserGraphic design and image production

Interface designInformation design – related to user’s experienceHTML document and style sheet developmentJavaScript

Backend – programs and scripts that work on the server – makes pages dynamic and interactive

Information design – how information is organized on the server

Forms processing

Database programming

Content management systems

PHP, JSP, Ruby, ASP.NET, Java, etc.

•Client: requests & renders content (browsers, mobile devices, screen readers)

•Web Servers: Applications that deliver web content (IIS – Internet Information Service (windows) Apache (all OS, free, open source)

How the Web Works

HTTP Client HTTP Server

Retrieving Static Data

•Client: requests & renders content (browsers, mobile devices, screen readers)

•Web Servers: Configured to dispatch request to application server (triggered by extension- .cfm, .aspx, .php)

•Application Servers: talks to DB, generates response and returns info to web server. (compiles all elements and nodes needed from DB)

•Application Servers: Adobe Coldfusion (Java Based web application);

Microsoft Active Server Pages & ASP.Net; PHP (free, open source); Ruby On Rails

•Example - ColdFusion based CMS WebsiteWritten in ColdFusion Markup Language (CFML)- running on

server & HTML, CSS, JavaScript or JQuery – executed in the browser

Dynamic ContentHow Dynamic Web Content Works

Software

Web page authoring (Dreamweaver, Nvu)

HTML editors (NotePad, TextEdit, BBEdit, jEdit)

Graphics software (Adobe Photoshop (elements); Adobe

Fireworks; Adobe Illustrator; Corel Paint Shop Pro, GIMP)

Multimedia tools (Adobe Flash; QuickTime and iMovie; Apple

Final Cut Pro; Windows Movie Maker; Adobe After Effects; Sony

Sound Forge; Audacity)

Internet tools (browsers, mobile browsers, ftp programs)

Final Course Project Part 1: Project Profile

Part 2: Information Architecture

Part 3: Interface Design

Part 4: Development

Part 5: User-testing