Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    Human Computer Interaction: Lab Report # 02

    Uploaded by

    malik shahzaib
    This lab report summarizes a student's work on designing an interactive portfolio for a job application. [1] The student learned about applying principles of human-computer interaction like visibility, feedback, constraints, and consistency to portfolio design. [2] They created an HTML portfolio page highlighting their education and including a profile picture. [3] The report evaluates how well other portfolios follow HCI principles.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Human Computer Interaction: Lab Report # 02

    Uploaded by

    malik shahzaib
    4 views7 pages
    This lab report summarizes a student's work on designing an interactive portfolio for a job application. [1] The student learned about applying principles of human-computer interaction like visibility, feedback, constraints, and consistency to portfolio design. [2] They created an HTML portfolio page highlighting their education and including a profile picture. [3] The report evaluates how well other portfolios follow HCI principles.

    Original Description:

    Original Title

    ACFrOgAwUnvyrvs FaEBCmfXIV Xy5rJlnOYiHt HLW7iWekzOz8mlPmp BdFk2sg21Wv4a1QYFNTb5K52vlo651Rq6GAizm7S2YoU5i4aDoE6HYHys ZnnFTzXsKURX01bl7EVca9iO3ikOKtkP

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This lab report summarizes a student's work on designing an interactive portfolio for a job application. [1] The student learned about applying principles of human-computer interaction like visibility, feedback, constraints, and consistency to portfolio design. [2] They created an HTML portfolio page highlighting their education and including a profile picture. [3] The report evaluates how well other portfolios follow HCI principles.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    4 views7 pages

    Human Computer Interaction: Lab Report # 02

    Uploaded by

    malik shahzaib
    This lab report summarizes a student's work on designing an interactive portfolio for a job application. [1] The student learned about applying principles of human-computer interaction like visibility, feedback, constraints, and consistency to portfolio design. [2] They created an HTML portfolio page highlighting their education and including a profile picture. [3] The report evaluates how well other portfolios follow HCI principles.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 7

    HUMAN COMPUTER INTERACTION

    LAB REPORT # 02

    Submitted To:

    Ma’am Iram Abdullah

    Submitted By:

    Wajeeha Anum

    Reg No:

    17-CS-077 (Section A)

    Dated:

    October 2nd , 2020


    Lab #02

    PORTFOLIO DESIGN

    Objectives:

     To design a portfolio by keeping in mind the basics of HCI.


     To apply Visibility, Feedback, Constraints and Consistency on a Portfolio for Evaluation.

    Software tools:

     Google Sites

    Theory:
    In this lab we learned to apply HCI on a basic portfolio that we create while applying for a job
    interview. A portfolio is actually an interactive resume the difference between a resume and
    portfolio is that, Portfolio has no boundaries when it comes to design we can add different
    transitions, images alongside our details. Portfolio helps us in explaining ourselves more
    interactively and a good portfolio always stands out when it comes into comparison with a good
    resume.

    We designed our portfolio in this lab by keeping in mind the four principles of HCI that are:

    Visibility:

    Is our portfolio is fairly visible whenever the recruiter will see it. If our portfolio is not completely
    visible our the main information that recruiter wants is not highlighted then there is a high chance
    that the recruiter will skip the information he is looking for. So visibility is important and it should
    be kept in mind while designing.

    Feedback:

    Is our portfolio gives instruction or any hints whenever recruiter scrolls around or clicks on a
    particular thing in our portfolio. Feedback is very important for engaging the recruiter with our
    portfolio. A thing that responds to certain actions is always better as compared to the one who
    doesn’t respond.

    Constraints:

    There are two types of constraints Physical and Logical. When it comes to our portfolio we will
    only focus on logical constraints, By this we mean that whether our portfolio is using the correct
    information while engaging with the recruiter for example if we are applying for a job in a
    professional workspace our portfolio should not contain anything the portrays unprofessionalism.

    Consistency:

    In our portfolio the data we have been using should be consistent from start to end and the written
    stuff should be perfectly aligned and fonts and colors should be consistent as well.

    Procedure:

    Task 01:

     Open notepad++ and write the HTML code given below.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>YourName</h1>
    <p>Mission Statement<p>

    </body>
    </html>

    Output:

     Modify the h1 tag using the code given below and check the effect.

    <h1 style="color:blue;">YourName</h1>

    Output:
     Add the below style in the head and check the effect.

    <style>
    h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
    }
    p {
    color: red;
    font-family: courier;
    font-size: 160%;
    }
    </style>

    Output:

     Add the below table to add your educational experience.

    <table style="width:100%">
    <tr>
    <th>Degree</th>
    <th>Institute</th>
    <th>CGPA</th>
    </tr>
    <tr>
    <td>YourDegreeName</td>
    <td>YourInstituteName</td>
    <td>YourCGPA</td>
    </tr>
    </table>

    Output:

     Add the below code to add the picture

    img src="pic_profile.jpg" alt="Picture" style="width:304px;height:228px;">

    Output:

    Task 02:

    Consider yourself as an applicant of a job and design a webpage of your information.

    Output:
    Conclusion:
    In this lab we designed a portfolio by keeping the basic principles of HCI in our mind we also
    evaluated other portfolios based upon these principles.

    ====================================================

    You might also like