2. Web Development Process The Site Development Process http://webstyleguide.com Site Construction is one of the last steps

3. Interaction Designers | User Interface Designers User Experience Designers Visual (Graphic) Designers DESIGN Scripting and Programming HTML, style sheets, and graphic production DEVELOPMENT CONTENT Content Strategist Information Architect Information Designer MULTIMEDIA

4. 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)

5. Interface Design Interaction Designers (IxD) | User Interface Designers (UI) | User Experience Designers (UX)| Visual Designers | Information Architects

6. Interface Design How the page works (buttons, links, navigation, etc.) How visitors move through the content/site Usability - 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.

7. Understands the needs, desires, and limitations of the user Understand 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).

8. The web - a visual medium Presentation & Design - everything you see screen -graphics -type - colors - layout

9. Document Development / Production

10. Authoring/markup - process of preparing content for delivery online (HTML) Styling - Arranging the appearance of the page (CSS)

11. Scripting and Programming Advanced 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) Multimedia Dynamic content (sound, video, animation, Flash)

12. 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)

13. Frontend – appears in or relates directly to the browser Graphic design and image production Interface design Information design – related to user’s experience HTML document and style sheet development JavaScript 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.

14. 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 ClientHTTP Server Retrieving Static Data

15. 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 Website Written in ColdFusion Markup Language (CFML)- running on server & HTML, CSS, JavaScript or JQuery – executed in the browser Dynamic Content How Dynamic Web Content Works

16. 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)

17. Final Course Project Part 1: Project Profile Part 2: Information Architecture Part 3: Interface Design Part 4: Development Part 5: User-testing