Webtechnologie INF

Web Technology INF

5 EC

Semester 1, periode 3

5061WEIN5Y

Eigenaar Bachelor Informatica
Coördinator dr. M. Avgeris
Onderdeel van Bachelor Informatica, jaar 1Dubbele bachelor Wiskunde en Informatica, jaar 1
Links Zichtbare leerlijnen

Studiewijzer 2025/2026

Globale inhoud

In this course the students learn about web technologies used to build dynamic and interactive websites. In one month course, they learn and use such important technologies as HTML and CSS used for designing webpages that allow flexible content presentation and formatting, Javascript and PHP used to make webpages dynamic and interactive, database and database access language SQL to allow interactive web content. The course also introduces web API, their design and practical use for accessing external data. Additionally, it overviews the best practices in building user oriented web site/portal and secure websites design including user authentication, password management and access control, as well as security threats and vulnerabilities analysis. As a practical part, the students learn how to design dynamic interactive websites by creating their own website that will use all above mentioned technologies. By working in groups to develop their website, the students get  to experience project development, deployment and testing.

Leerdoelen

  • The student is able to develop website structure and its information model including user and data management by applying best practices in website and portal design.
  • The student is able to design well-formatted and modern looking website using basic and advanced features of HTML and CSS.
  • The student is able to integrate SQL/relational database(s) to their design in order to access and manage the website information.
  • The student is able to develop client-server side, dynamic webpages through the use of JavaScript and PHP.
  • The student is able to apply state-of-the-art security practices in the development of their website.
  • The student is able to collaborate effectively within a development team by communicating progress, giving and receiving feedback, and contributing responsibly to shared project goals.

Onderwijsvormen

  • Presentatie/symposium
  • Begeleiding/feedbackmoment
  • Zelfstudie
  • Hoorcollege
  • Laptopcollege
  • Zelfstandig werken aan bijv. project/scriptie

Hoorcollege (Lecture):
Lectures introduce key concepts, demonstrate technologies, and provide structured explanations of the relevant technology and security principles. They help students build foundational understanding before applying these concepts in practice.

Zelfstudie (Self-study):
Students use provided tutorials, online resources, and documentation to explore technologies independently. This fosters digital literacy, resourcefulness, and the ability to learn new tools autonomously. This is also an essential exit qualification.

Zelfstandig werken aan project/scriptie (Independent project work):
In their group project, students integrate all course components (i.e., frontend, backend, database, security) into a real website. This trains problem-solving, planning, collaboration, and the application of multiple skills in an authentic context.

Laptopcollege (Laptop-based lecture / interactive lecture) & Begeleiding/feedbackmoment (Guidance and feedback moments):
Weekly small-group consultations with TAs provide continuous formative feedback and a safe space for questions. These sessions support inclusive learning, help monitor progress, and ensure students receive personalised guidance on their project development.

Presentatie/symposium (Project fair presentation):
During the final project fair, student groups present their website, explain design choices, and answer questions. This develops communication skills, deepens understanding through articulation, and allows students to reflect on their learning.

Verdeling leeractiviteiten

Activiteit

Uren

 

Hoorcollege

16

 

Laptopcollege

14

 

Presentatie

2

 

Zelfstudie

24

 

Zelfstandig werken aan bijv. project/scriptie

84

 

Totaal

140

(5 EC x 28 uur)

Aanwezigheid

  • Voor sommige studieonderdelen geldt een aanwezigheidsplicht. Indien er een aanwezigheidsplicht geldt, dan staat dit aangegeven in de studiegids die te raadplegen is via de UvA-website. De onderbouwing voor, en invulling van, deze aanwezigheidsplicht kan per vak verschillen, en is indien van toepassing opgenomen in deze studiewijzer.
  • Aanvullende eisen voor dit vak:

    1) Attendance at the weekly consultation meetings is mandatory for all group members, including the required logs and demos. These meetings are essential for monitoring individual contributions and providing the feedback needed to complete the project successfully. If a student does not attend or fails to submit the required materials without valid justification, their individual contribution grade becomes insufficient. Since this grade must be sufficient, non-attendance will result in failing the course.

    2) Attendance and active participation in the Project Fair are mandatory for all students. This session is required to finalize the assessment of the group project, including evaluating each student’s understanding and contribution. Assessment here is performed by a commission of TAs and the course coordinator. If a student does not attend or present, the project cannot be graded. In such cases, the student fails the course.

    Toetsing

    Onderdeel en weging Details

    Eindcijfer

    0.6 (60%)

    Project Outcome

    0.2 (20%)

    Technical Report

    0.2 (20%)

    Individual Contribution

    Moet ≥ 5 zijn

    Bonus Points:

    • 0.5 bonus points are awarded to each member of the groups that win one of the two Project Fair Awards: Technical Excellence or User Friendliness (awarded per session).
    • Students can earn up to 0.5 individual bonus points through correct answers in the in-lecture quizzes.

    *Completion of the course is conditional to acquiring a passing grade on group role and participation assessment (i.e., Individual Contribution). 

    Inzage toetsing

    This moment will be communicated to the students through Canvas. 

    Opdrachten

    Assessed:

    1. Group Project: Website Development (graded, group) -> Students work in groups to design and implement a fully functional dynamic website that integrates HTML/CSS, JavaScript, PHP, SQL databases, and security mechanisms. The project spans the entire course and requires the integration of all course ILOs. This component counts for 60% of the final grade. Continuous formative feedback is provided in weekly TA consultations, demo sessions, and during the Project Fair. Summative feedback is given via the final grade and written comments.

    2. Technical Report (graded, group) -> Each group submits an individual technical report (in English or Dutch) describing the architecture, design choices, database model, implementation decisions, and security considerations of the website. This component counts for 20% of the final grade and is evaluated on structure, clarity, depth of technical explanation, and correctness. Written feedback is provided upon grading; students may also discuss comments with the TA.

    3. Teamwork and Individual Contribution (graded, individual) -> Students are assessed on their role and contribution within their project group. This includes initiative, organisation, planning, communication, division of tasks, and professional behaviour. This component counts for 20% of the final grade. A minimum of 5/10 is required to pass the course. Formative feedback is provided weekly during consultations. Summative evaluation is based on TA observations, weekly logs, demo engagement, and final Project Fair participation.

    Non-Assessed:

    4. Weekly Demos (not graded, group) -> In Weeks 2–4, each group gives a short (5–10 minute) demo to the TA showing their progress. Immediate oral feedback is provided by the TA. Demos help students check alignment with expected deliverables and ensure progress remains on track.

    5. Weekly Activity Logs (not graded, group) -> In Weeks 1–3, groups submit a structured weekly log. The log documents planned and completed tasks, division of work, encountered problems, and next steps. TAs review each submission and provide oral feedback during the first tutorial session of the following week. Logs inform the individual contribution grade.

    Optional: Individual Tutorial Assignment: Web Design Fundamentals & Git Usage (not graded, individual) -> In Week 1 each student completes an individual introductory assignment covering essential topics such as basic web design principles, HTML/CSS structure, and Git usage. Students may skip topics they already know; the goal is to ensure all students begin the group project with a common baseline of skills and preparedness. Although there is no submission or grade, this activity supports early identification of knowledge gaps and helps students enter the project phase more confidently.

    Fraude en plagiaat

    Over het algemeen geldt dat elke uitwerking die je inlevert ter verkrijging van een beoordeling voor een vak je eigen werk moet zijn, tenzij samenwerken expliciet door de docent is toegestaan. Het inzien of kopiëren van andermans werk (zelfs als je dat hebt gevonden bij de printer, in een openstaande directory of op een onbeheerde computer) of materiaal overnemen uit een boek, tijdschrift, website, code repository of een andere bron - ook al is het gedeeltelijk - en inleveren alsof het je eigen werk is, is plagiaat.

    We juichen toe dat je het cursusmateriaal en de opdrachten met medestudenten bespreekt om het beter te begrijpen. Je mag bronnen op het web raadplegen om meer te weten te komen over het onderwerp en om technische problemen op te lossen, maar niet voor regelrechte antwoorden op opgaven. Als in een uitwerking gebruik is gemaakt van externe bronnen zonder dat een bronvermelding is vermeld (bijvoorbeeld in de rapportage of in commentaar in de code), dan kan dat worden beschouwd als plagiaat.

    Deze regels zijn er om alle studenten een eerlijke en optimale leeromgeving aan te kunnen bieden. De verleiding kan groot zijn om te plagiëren als de deadline voor een opdracht nadert, maar doe het niet. Elke vorm van plagiaat wordt bestraft. Als een student ernstige fraude heeft gepleegd, kan dat leiden tot het uitschrijven uit de Universiteit. Zie voor meer informatie over het fraude- en plagiaatreglement van de Universiteit van Amsterdam: www.student.uva.nl

    Weekplanning

    Weeknummer Onderwerpen Studiestof Assignment Deadlines
    1

    Structure & Front-End

    Setup Groups, Plan Development, Basic site structure & navigation, Visual design prototype, Identify Data & Data model sketched (paper or digital)

    HTML/CSS,
    Javascript, Data Model, DB design, MySQL

    Activity Log 1,

    Individual Tutorial (no submission)

    2

    Database & Backend Setup

    Finish site design (webpages), Connect MySQL, 
    Database schema created, CRUD operations via forms, Backend functional & connected to site (website skeleton)

    MySQL,
    phpMyAdmin and
    PHP (PDO)

    Activity Log 2, 

    Demo 1

    3

    Application Logic

    Login & user interface implemented, 
    Dynamic content and services working, 
    Web APIs/Scraping integrated for external dat and services

    PHP, JavaScript,
    AJAX, Web APIs, Web Scraping

    Activity Log 3,

    Demo 2

    4

    Security, Testing & Finalization

    Security issues fixed,   
    Full system tested, 
    Report completed, 
    Ready for demonstration

    PHP, Validation, Security checks,
    Report writing

    Demo 3,

    Final Project + Report

    Aanvullende informatie

    Canvas site available. 

    Lectures in English. 

    For this course there is no single textbook. All the literature the student will need is available on the Internet.

    Contactinformatie

    Coördinator

    • dr. M. Avgeris

    Each project group is assigned a Teaching Assistant (TA), who serves as the primary point of contact for all project-related questions. Students meet their TA twice a week for approximately 30 minutes during scheduled consultation sessions. During these meetings, the TA provides guidance, answers technical questions, reviews progress, and helps resolve practical issues related to implementation, planning, or group organisation. Students are encouraged to prepare questions in advance to make effective use of these sessions.

    Outside the scheduled consultations, students may also communicate with their TA through Microsoft Teams, where they can ask follow-up questions, share code snippets, and request clarification when needed. For issues that cannot be resolved by the TA, such as grading questions, course policy, assessment criteria, or course logistics, students should contact the course coordinator directly.

    Docenten

    • Adeela Ashraf MSc
    • Lex Bolt BSc
    • Niels van Griethuijsen
    • Pieter Helleman
    • Marijn Kneppers
    • Raoul Koudijs MSc
    • R.A. Muijsert
    • P.H.W. Wildschut