1. >> Web Development Process & Technologies

2. Web-based Systems | Misbhauddin
MEET
PLAN
THE PROCESS
DESIGN
DEPLOY
PROGRAM
Web-based Systems | Misbhauddin

3. Web-based Systems | Misbhauddin
The Process
Wireframe
Content
Functional Code
Planning
Concept
Design
Development
Launch
Site Map
Functional Specs
Design Layout
Web-based Systems | Misbhauddin

4. Consult & Plan 1 2 3 4 PHAS E 1 Gather Clients Requirements WHAT
Interview, Questionnaires
HOW
extended development time, cost overruns & missed deadlines
WHY
PHAS E 1
Needs Assessment
Site Outline 1 2 3 4
Initial Meeting
Research
Profile Customers, Analyze Business
WHAT
Competitor Analysis
Best Practices
HOW
Targeted Development
WHY
Web-based Systems | Misbhauddin

5. Concept 6 5 PHAS E 2 WHAT HOW WHY Create a flat concept design
Simplified sketch of the important information in a page
Get Client Feedback
PHAS E 2
Wireframe 6 5
Content Outline
RSS Feeds
Blogs
Survey
E-commerce
WHAT
HOW
WHY
Advertising
Discussion Forum
Define each type of content
Relate contents
Writing Skills
Target Audience
Call to Action
Enhance the appeal and usefulness of the website
Search
Links
Forms
Image Gallery
Social Media
Web-based Systems | Misbhauddin

6. Web-based Systems | Misbhauddin
Design
Color Schemes
Vector Editing Software
PHAS E 3
Inner Page(s) Artwork 7 8
Landing Page Artwork
Royalty-Free Images
Icons
Web-based Systems | Misbhauddin

7. Cross-Browser & Device Testing
Development
{Placeholders}
Content Population
Coding
PHAS E 4 12 11 10 9
Cross-Browser & Device Testing
Validation
Responsive
Web Design
Web-based Systems | Misbhauddin

8. Web-based Systems | Misbhauddin
Launch
Search Engine Submission
Sitemaps
Social Media Buzz
Link
Advertisements
PHAS E 5
SEO 13 14 15
Refinement
Launch
Pre-Launch Checklist
Clean Design
Clean Code
Proof-read
Web Hosting
FTP
Server-Platform
Server-Type
Free
Shared
Dedicated
Web-based Systems | Misbhauddin

9. Web-based Systems | Misbhauddin
Technology Framework
Web Systems
Static
Dynamic
Client-Side
Server Side
Web-based Systems | Misbhauddin

10. Server-Side Web Development Languages
General-purpose language designed for web development to produce dynamic web pages
Ruby is an OOPL designed to make programming fun and flexible
Python is a high level language designed to emphasize productivity and code readability
ASP .Net is a web application framework that allows development of dynamic websites, web apps and web services
Web-based Systems | Misbhauddin

11. Web-based Systems | Misbhauddin
Wireframing
Web-based Systems | Misbhauddin

12. Web-based Systems | Misbhauddin
Wireframe
a.k.a Page Architecture, Page Schematic, or Blueprint
{def.} Highly simplified sketch of the important information in a page
 {goal} Reflect importance of different elements, including the content and the navigation on the page
Web-based Systems | Misbhauddin

13. Web-based Systems | Misbhauddin
Types of Wireframes
Wireframes
Low-Fidelity
High-Fidelity
rough sketch or a quick mock-up
less detail
quick to produce
Detail matches actual webpage
Takes longer to create
Used in documentation
Web-based Systems | Misbhauddin

14. Wireframing Techniques/Tools
UI Kits / Stencils
Online Tools
Offline
Difficulty in Collaboration
Time Consuming
Pen & Paper
Specific
Diagramming
Desktop Application
Built online right in the browser
Easy to Collaborate
Faster
Adobe Illustrator AI,
Vector EPS
Adobe Photoshop PSD
Web-based Systems | Misbhauddin

15. Wireframing Techniques/Tools
UI Kits / Stencils
Web-based Systems | Misbhauddin

16. Wireframing Techniques/Tools
Online Tools >> Specific
1 project with 10 pages; 2 users; no archived projects
Free/Paid
Free/Paid
1 project; 1GB space; 2 users
Paid
$9/mo; 10 projects; 1GB space
Free/Premium
Single page
30-Day Free Trial
Free for Students (Invited by Instructor
Paid
Free
Web-based Systems | Misbhauddin

17. Wireframing Techniques/Tools
Online Tools >> Diagramming
1 folder with 25 sheets; 15 users;
Free/Paid
Free/Paid
5 diagrams; 2mb space; 0 users
Free/Paid
60 objects/diagrams; 25mb space; 1 users
Web-based Systems | Misbhauddin

18. Wireframing Techniques/Tools
Offline Tools >> Desktop Applications
FlairBuilder
Paid
$99; 15-Day Free Trial
OmniGraffle
Paid
$49.99; Mac & iPad;
Adobe
Fireworks
Paid
£282.9; 30-Day Free Trial
Paid
$ $999; 60-Day Free Trial
PowerMockup
Paid
Powepoint Plugin; Trail Version Available
Web-based Systems | Misbhauddin

19. Web-based Systems | Misbhauddin
Sample -1
Web-based Systems | Misbhauddin

20. Web-based Systems | Misbhauddin
Sample -2
Web-based Systems | Misbhauddin