web development process the site development process site construction is one of the last steps
TRANSCRIPT
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