This lab aims to make sure that you have the programming infrastructure to complete the upcoming assignments. The simple components included in the test code will ensure that you are set up to do web development and testing on a mobile device or emulator.
If you run into any issues with your setup, please post to the discussion boards in Canvas, instead of emailing the teaching staff. The teaching staff will be monitoring the discussion board and will respond. However, some issues are very specific to a particular setup and so there may be another student who has run into a similar issue and can help. Similarly, please check the discussion board to see if you can help any of your fellow students with their setup.
You will use Github to host your lab directories and your web page. If you need a Git/GitHub refresher, see this GitHub Bootcamp, the GitHub Guides (especially the ones on Hello World, and Understanding the GitHub Flow), and CodeSchool's Try Git Course.
You will require an editor to edit and create html files. You can use built in editors like Notepad or TextEditor or download a new one like Notepad++, Sublime, or VS Code for this. See this HTML Editors page
You can also follow the steps below to set up your first web page:
a. Github is based on Git. You need to have Git installed to be able to clone your project locally on your computer
b. Copy the link under Clone or Download
c. On your computer open a terminal in the directory where you would like to have your project folder and use the command git clone link-to-YOUR-copy-of-the-repo to clone your repository
Note: If your unable to successfuly clone your repository with your password and you are required to provide a personal access token. You may generate one using the following steps
i. Click your profile picture at the top right of your profile and a dropdown box will appear
ii. Click on Settings
iii. On the left of your settings screen, Select Developer settings
iv. In your Developer settings, select Personal Access Tokens
v. Select Generate new token
vii. Provide a reason for why you need the token, select the priviledges you want the token to provide and finally at the bottom of your screen, Select Generate token
viii. Use the generated token as your password when cloning your repository using Git
d. Move into your lab0 directory and create an index.html file with the same content as here. You can use any editor mentioned here Save your edit.
e. Whenever you want to submit your local changes to your remote repository, open a terminal inside your project and type the following commands:
git add *
git commit -m “your commit message here should be helpful”
git push
Now if you refresh your Github repository, you shall see the newly uploaded html file
Alternative option for step 3e: Go to your Github repository, click the 'Add file' button and import your index.html file and/or other files you updated from your computer.
In your terminal again, type the following commands
git checkout -b gh-pages // create the new branch gh-pages
git status
git merge master
git push --set-upstream origin gh-pages // to do only the first time you push to a new branch otherwise just `git push` will do
a. Create a new branch called gh-pages in your repository and make sure its content is the same as the master branch.
While you are coding, you can always test your webpage locally by opening your index.html with your browser.
Testing your Github page online is only possible once you pushed your changes to the gh-pages branch. Type the following url in your browser: username.github.io/lab0/index.html
Replace username with your actual Github username and repoName with lab0
Note: Sometimes it might take a while for the latest version to refresh and load.
####1. Set up testing environments for iOS and Android devices
a. For this class, we will mostly use Chrome Developer tools, which allow you to easily test your UI to see how it will look on different devices.
- Open any website in Chrome. You can use the test page that you just created (https://username.github.io/lab0/index.html)- Make sure to replace "username” with your own Github username.
- View -> Developer Tools -> Developer Tools (you can also do ctrl+shift+i or Right-click on the page>inspect -- (Note: If you don't see this: there may be "three dots" at the right corner of your screen, -> More tools -> Developer Tools)
- Use button to toggle device toolbar
. - You can test different types of devices. For example, to test iPhone, select iPhone 6/7/8 from dropdown list:
v. Click on the three dots menu for more options. (Note: there may be other “three dots” menus on your screen. Make sure that you select the one next to the buttons shown in the screenshot below.) Then click on “Show Device Frame” which shows you the hardware:
b. Rotate the device by clicking on 
button
c. Note: It is always best to test on an actual device as a simulator will never give you the full experience. So, if you have an iphone or iPad to test on, that is even better.
d. Another option for Mac users: You can download Xcode and use the iOS simulator
- Instructions here
- Navigate to any website to test
- To use the hardware buttons (e.g. Home, Siri, etc.), use “Hardware” Menu
On canvas, submit the following:
- a link to your Github repository
- a link to your web page
- https://www.jquery-az.com/3-examples-of-git-create-new-branch/
- https://desktop.github.com/
- Some IDE like Visual Studio Code have integrated support for Git already
<!DOCTYPE html>
<html>
<head>
<title> CS 3041 </title>
</head>
<body>
<!-- HTML5 article tag for content -->
<div id="content">
<header>My CS3041 test page</header>
<!-- H1 means 1st level heading -->
<h1>Welcome to my CS3041 test page</h1>
<!-- P stands for paragraph -->
<p>This is just a test, and it looks like it is working!</p>
<footer>CS3041: Human-Computer Interaction © 2021</footer>
</div>
</body>
</html>