20. Web Development Process

CSS Optional — Paper-II, Section-B · P-II.VI.20 · The phases a web project goes through, with deliverables and roles. Pairs with the Methodologies page (which covers how the phases are organized: waterfall, agile, etc.).

1. Phases of Web Development

graph LR
    A["1. Planning and requirements"] --> B["2. Analysis"]
    B --> C["3. Design: IA, UI/UX, architecture, DB"]
    C --> D["4. Content creation"]
    D --> E["5. Development"]
    E --> F["6. Testing"]
    F --> G["7. Deployment and launch"]
    G --> H["8. Promotion"]
    H --> I["9. Maintenance and evolution"]
    I --> A

2. Information Architecture and Design Artefacts

• Sitemap: hierarchical map of all pages (Home → About, Programs → BSCS, Admissions → Apply, Contact).
• Wireframe: low-fidelity skeleton showing layout and element placement, no colours.
• Mockup: high-fidelity static visual design (colours, fonts, images).
• Prototype: clickable, interactive simulation for user testing (Figma, Adobe XD).
• Style guide / design system: colours, typography, components for consistency.

3. Roles in a Web Team

Project manager · business analyst · information architect · UX/UI designer · graphic designer · content writer/SEO specialist · front-end developer · back-end developer · database administrator · QA/tester · DevOps/system administrator · digital marketer.

4. Environments and Tooling

• Development → Staging (test, mirrors production) → Production (live).
• Version control: Git (GitHub/GitLab) with branches and pull requests.
• CI/CD: automated build, test and deployment pipelines (GitHub Actions, Jenkins).
• Issue tracking: Jira, Trello.

5. Worked Example — Plan for a University Website

1. Goal: online information + admissions; audience: prospective students, parents, faculty.
2. Requirements: program pages, online admission form, fee payment, news/events, Urdu/English, mobile-friendly, WCAG AA.
3. Design: sitemap with 6 main sections; wireframes for home, program page and application form; brand-colour style guide.
4. Content: department write-ups, faculty profiles, photos, fee structures.
5. Development: Laravel back end, MySQL, responsive front end; payment API integration.
6. Testing: cross-browser, load test for 20,000 users on admission deadline day, security scan.
7. Deployment: .edu.pk domain, cloud hosting, SSL, CDN.
8. Promotion: SEO for "BSCS admission Karachi", Facebook/Instagram campaigns.
9. Maintenance: monthly updates, security patches, annual redesign review.

---

🎯 CSS Exam Angle

Draw the cyclic phase diagram, then the phase → activities → deliverables table, and illustrate with a short project example. Emphasize that the process is iterative and that maintenance feeds new requirements.

⚠️ MCQ Traps

• Wireframe = low-fidelity layout; mockup = high-fidelity static; prototype = interactive.
• Staging mirrors production for final testing.
• Content creation is a separate phase in web projects — a common cause of delays.
• The web development process is iterative, not a one-time sequence.

---

✅ Self-Check (with Answers)

Q1. List the main phases of web development.

Ans: Planning/requirements, analysis, design, content creation, development, testing, deployment, promotion, maintenance/evolution.

Q2. Differentiate wireframe, mockup and prototype.

Ans: Wireframe — low-fidelity layout skeleton; mockup — high-fidelity static visual design; prototype — interactive, clickable simulation used for user testing.

Q3. Why use a staging environment?

Ans: To test the complete site in conditions identical to production (same server config, data structure) before release, catching deployment and integration problems without affecting live users.

Q4. What is a sitemap in the design phase?

Ans: A hierarchical diagram of all pages and their relationships, defining the site's information architecture and navigation.

Q5. Name four roles in a web project team.

Ans: Project manager, UX/UI designer, front-end developer, back-end developer (also content writer, QA tester, DevOps engineer, SEO specialist).

📜 Past-Paper Questions & MCQs (CSS 2016–2026)

2023 · Paper-II · Q8(b) · 8 marks

Q. Your web team is going to make a contract with a customer and you need to estimate the cost of application development. What pricing factors do you consider?

Ans.

• Size and complexity: number of pages, features and user roles.
• Functionality: e-commerce, payment gateway, user accounts, search, content management, reporting, and integrations with other systems (APIs).
• Design: template or fully custom design, branding, responsive and mobile design and usability work.
• Content: who creates text, images and video, and migration of existing content.
• Technology and platform: frameworks, licences, database, third-party services and cloud costs.
• Non-functional needs: security level, performance and scalability targets, accessibility and multilingual support.
• Effort and team: person-days of analysts, designers, developers and testers multiplied by their rates.
• Testing and quality assurance, and documentation and training.
• Deployment and running costs: hosting, domain, SSL certificate, backups and maintenance and support after launch.
• Time and risk: deadline pressure, changes in scope, and a contingency margin.
• Method: break the work down (work-breakdown structure), estimate each task (expert judgement, analogy, function or story points), add overheads and risk, and agree on fixed price or time-and-materials.