Transcript ppt - pantherFILE

WebDev
Web Development Process
Site Construction is
one of the last steps
The Site Development Process
http://webstyleguide.com
Interaction Designers | User Interface Designers
User Experience Designers
Visual (Graphic) Designers
Scripting and Programming
CONTENT
HTML, style sheets, and graphic production
Content Strategist
Information Architect
Information Designer
MULTIMEDIA
DEVELOPMENT
DESIGN
“Web Design” – COMBINES A NUMBER OF DISCIPLINES
Web Development Process
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 Design
Interaction Designers (IxD) | User Interface Designers (UI) | User Experience
Designers (UX)| Visual Designers | Information Architects
Web Development Process
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.
Design: (IxD, UI, UX)
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).
Design: Graphic (visual) design
The web - a visual medium
Presentation & Design
- everything you see screen
-graphics
-type
- colors
- layout
Document Development / Production
Web Development Process
Document Development/Production
Authoring/markup
- process of preparing content for delivery online (HTML)
Styling
- Arranging the appearance of the page (CSS)
Web Development Process
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)
Web Development Process
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)
Web Development Process
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.
Retrieving Static Data
How the Web Works
•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)
HTTP Client
HTTP Server
Dynamic Content
How Dynamic Web Content Works
•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
Web Development Process
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)
Course Description
Final Course Project
Part 1: Project Profile
Part 2: Information Architecture
Part 3: Interface Design
Part 4: Development
Part 5: User-testing