web development process the site development process site construction is one of the last steps
TRANSCRIPT
![Page 1: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/1.jpg)
![Page 2: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/2.jpg)
Web Development Process
The Site Development Process
http://webstyleguide.com
Site Construction isone of the last steps
![Page 3: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/3.jpg)
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
![Page 4: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/4.jpg)
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)
![Page 5: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/5.jpg)
Interface DesignInteraction Designers (IxD) | User Interface Designers (UI) | User Experience
Designers (UX)| Visual Designers | Information Architects
![Page 6: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/6.jpg)
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.
![Page 7: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/7.jpg)
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).
![Page 8: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/8.jpg)
The web - a visual medium
Presentation & Design - everything you see screen-graphics-type- colors- layout
![Page 9: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/9.jpg)
Document Development / Production
![Page 10: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/10.jpg)
Document Development/Production
Authoring/markup- process of preparing content for delivery online (HTML)
Styling- Arranging the appearance of the page (CSS)
![Page 11: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/11.jpg)
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)
![Page 12: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/12.jpg)
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)
![Page 13: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/13.jpg)
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.
![Page 14: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/14.jpg)
•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
![Page 15: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/15.jpg)
•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
![Page 16: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/16.jpg)
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)
![Page 17: Web Development Process The Site Development Process Site Construction is one of the last steps](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649f585503460f94c7e43f/html5/thumbnails/17.jpg)
Final Course Project Part 1: Project Profile
Part 2: Information Architecture
Part 3: Interface Design
Part 4: Development
Part 5: User-testing