-
Notifications
You must be signed in to change notification settings - Fork 0
/
assignment1.html
216 lines (163 loc) · 13.3 KB
/
assignment1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>CSCI-UA.0061 : Spring 2021</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<style type="text/css">
.imageholder {
border: 1px solid #eee;
padding: 25px;
width: 600px;
margin-bottom: 50px;
}
.imageholder img {
width: 500px;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Web Development & Programming, Spring 2021</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="index.html">Home</a></li>
<li><a href="syllabus.html">Syllabus</a></li>
<li class="active"><a href="schedule.html">Schedule</a></li>
</ul>
</div>
<div id="content" class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Macro Assignment 01: Hello, World</h1>
<p>For your first assignment you will be spending some time setting up a website that will be used to document your work and serve as your digital portfolio in this class. This page will require you to use your HTML & CSS skills to create a static page that is functional as well as visually appealing. Here’s how to get started!</p>
<h3>Step 1: Installing a Local Web Server</h3>
<p>This semester we will be working with a number of dynamic web technologies, including JavaScript and PHP. As you may recall from a previous web development class, most of these dynamic techniques are only accessible when they are run on a page being served through a web server (i.e. a page will work fine if you publish it to the i6 server, but if you just double click on the file on your local computer and open it in a browser it appears "broken")</p>
<p>In order to get around this issue you will be installing a "development environment" on your own computer that will emulate a local web server. This technique will give you full access to all of JavaScript's capabilities, even those that require your page to be published to a server. It will also give you full access to a host of back-end scripting environments (Python, PHP, etc) right from your computer.</p>
<p>Here's how to get started:</p>
<ul>
<li>First, open up your computer's file explorer and navigate to your Documents folder (Mac) or My Documents folder (PC)</li>
<li>In this folder create a new folder called 'MAMP'. Inside of the 'MAMP' folder create another folder named 'webdev'.</li>
<li>Next, visit the MAMP download page at <a href="https://www.mamp.info/en/" target="_blank">https://www.mamp.info/en/</a> - click the Download button</li>
<li>Select your operating system and download the MAMP & MAMP Pro package (button on the left side of the screen)</li>
<li>Install MAMP once your download completes</li>
<li>Next, launch MAMP (looks like a small circle with an elephant in the center). A control console will appear, and a browser window may pop up.</li>
<li>Click on the MAMP menu and select Preferences. Then navigate over to "Web Server". Find the area labeled "Document Root" and find a button that looks like a small folder (when you mouse over this button your interface should say 'Select new document root'). </li>
<li>Click on this button and navigate to where you want to store all of your files. Find the 'MAMP' folder you created at the beginning of this process and set it as your document root.</li>
<li>Click on the Ports menu and make sure that MAMP is running on port 8888. If for some reason MAMP fails to run you can come back here and change the port number to something else. Any number above 8888 should work unless another program on your computer is using that port (you may need to experiment a little to find a usable port) -- but on most computers port 8888 works just fine.</li>
<li>On PCs running Windows 10 - select the PHP menu and select PHP version 7.2.14. There seems to be an issue with the latest version of PHP, but this slightly older version works.</li>
<li>That's it! Now you can place files into this folder as you would with any other file. These files will be accessible to you via your own personal web server at the following URL: <a href="http://localhost:8888" target="_blank">http://localhost:8888</a> as long as your MAMP server is running on your computer. Note that you may need to change the '8888' value in the URL if you changed the port # when setting up MAMP.</li>
</ul>
<h3>Step 2: Installing an IDE</h3>
<p>You can use any plain-text editor to write code for this class. I'll be using <a href="http://atom.io" target="_blank">Atom</a>, <a href="http://brackets.io/" target="_blank">Brackets</a>, <a href="https://www.sublimetext.com/" target="_blank">Sublime</a> and <a href="https://nova.app/" target="_blank">Nova</a> throughout the semester, but you can use any tool that works for you.</p>
<h3>Step 3: Set up your landing page</h3>
<p>Now we need to make a "landing page" that will let serve as the first page for your digital portfolio. Create a new file named 'index.html' inside of your 'MAMP/webdev' folder. You can use the following a a bare-bones template to get you started:</p>
<pre><!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Web Development 2021</title>
</head>
<body>
<h1>Web Development 2021</h1>
</body>
</html>
</pre>
<p>Your MAMP home directory should now look like the following:</p>
<pre>MAMP
webdev
index.html</pre>
<p>You should verify that you can access this file using your local webserver (http://localhost:8888) - you should be able to visit your 'portfolio' folder and see your newly created page.</p>
<h3>Step 4: Enhance your landing page</h3>
<p>Next, update your landing page to include the following features:</p>
<ul>
<li>A long, horizontal header that display's the title 'Web Development 2021' along the top of the page.</li>
<li>A long, horizontal footer that displays "© 2021 YOUR NAME" along the bottom of the page.</li>
<li>A series of icons / text units that represent each class assignment. These icons should behave as follows:
<ul>
<li>Each icon should react to the mouse hovering over them.</li>
<li>When the page has enough horizontal room (>= 961px) the icons should be spaced into three rows of six icons each.</li>
<li>When the page has less room (>= 481px and <= 960px) the icons should be spaced into six rows of three icons each.</li>
<li>When the page has even less room (<= 480px) the icons should be spaced into eightteen rows of one icon each.</li>
</ul>
Hint: use media queries and the <code>float</code> property to do this. See the course wrap-up for Day 2 and Day 3 for some code samples. You are also welcome to use flexbox or CSS grid to layout your site, if you wish.
</li>
</ul>
<p>Here are a few visuals that show how your page could potentially look. Note that you are welcome to take as many liberties as you wish in terms of layout, images, color choices, fonts, etc. as long as you stick to the basic structure laid out above.</p>
<div class="imageholder">
<p>Large layout</p>
<img src="images/assignment01/assignment01_ss1.png">
</div>
<div class="imageholder">
<p>Medium layout</p>
<img src="images/assignment01/assignment01_ss2.png">
</div>
<div class="imageholder">
<p>Small layout</p>
<img src="images/assignment01/assignment01_ss3.png">
</div>
<div class="alert alert-info">Note: You will need to resize your browser in order to test all possible layouts. You may also need to zoom in and zoom out using the View -> Zoom In / View -> Zoom Out commands, especially to see the smallest layout.</div>
<h3>Step 5: Publishing your site</h3>
<p>As part of this class you have been given access to a web server here at Courant to host your site. In order to use this server you will need to obtain a username and password before you can proceed. Here's a quick overview of this process:</p>
<ul>
<li>If you already have an i6 account from a previous class (Introduction to Web Design, Database Design, Web Programming, etc) and you know your password then you are ready to go!</li>
<li>If this is your first Computer Science class that requires you to build a website then you should have been sent an e-mail with your login information from the CIMS Helpdesk.</li>
<li>If you already have an i6 account from a previous class but you do not remember your password you can go ahead and reset it by visiting this site: <a href="https://cims.nyu.edu/webapps/password/reset" target="_blank">https://cims.nyu.edu/webapps/password/reset</a></li>
<li>If you have any trouble with your password please see me ASAP - do not contact the CIMS Helpdesk!</li>
</ul>
<p>Next you need to connect with the server so that you can begin to add files to your site. You can do this using a SFTP program such as <a href="https://www.nyu.edu/life/information-technology/getting-started/software/fetch.html" target="_blank">Fetch</a> (Mac Only) or <a href="http://winscp.net/eng/index.php" target="_blank">WinSCP</a> (Windows only). Whatever program you use, be sure to connect using SFTP (as opposed to FTP, which is not secure). If you are using Fetch, here is the opening screen; fill it in as follows but with your own NetID and click "Connect."</p>
<div class="imagecontainer">
<img src="images/assignment01/fetch01.png">
<p>SFTP Settings to connect to the i6 server</p>
</div>
<p class="alert alert-info">If you have problems logging into your i6 account, speak with me as soon as possible (and DO NOT contact the CIMS Helpdesk!)</p>
<p class="alert alert-info">Note for Fetch users on a Mac: When you download the ZIP file for Fetch it will contain a file named <code>NYU_licensing.rtf</code> - open this file to obtain your licensing code which will register Fetch and prevent you from being prompted to purchase it after 30 days.</p>
<p>Once you can log into the server you should see a folder called "public_html" -- double click on this folder to open it up. Any file that you place into this folder will be made accessible via the web server, which means that anything place in here can be viewed using a web browser. For example, if you created a file called "hello.txt" in this folder it would be accessible via your browser at the following URL:
<pre>http://i6.cims.nyu.edu/~YOUR_NET_ID/hello.txt</pre></p>
<p>Next you will need to 'synchronize' your development server with the i6 server. You can do this by transferring your entire 'webdev' folder to the i6 server. Then go ahead and test your work by opening up a web browser (Chrome, Firefox, etc) and visiting your site using the following URL:
<pre>http://i6.cims.nyu.edu/~YOUR_NET_ID/webdev/index.html</pre></p>
<div class="alert alert-warning">Note: Make sure that your "webdev" folder is stored inside of your "public_html" folder on the server -- files stored outside of the "public_html" folder are not web accessible!</div>
<p>The basic process for publishing your site in the future will be as follows:</p>
<ul>
<li>Build your projects on your local computer inside of your MAMP/webdev folder</li>
<li>Test it using your local web server (http://localhost:8888/webdev)</li>
<li>When you are happy with your project synchronize your files with the i6 server - the easiest way to do this is to upload your entire 'webdev' folder to the server.</li>
</ul>
<h3>What to Submit</h3>
<p>When you’re finished you should submit a ZIP file of your 'webdev' folder as well as the absolute URL to your site to our NYU classes page. Here’s how to do this:</p>
<ul>
<li>Visit <a href="http://newclasses.nyu.edu" target="_blank">http://newclasses.nyu.edu</a> and log in.</li>
<li>Next, click on the Assignments tab</li>
<li>Click on the Assignment 01: HTML & CSS</li>
<li>Submit the absolute URL to your site. You can obtain this URL by visiting your site and copying the URL in the location bar. It will look something like this:
<pre>http://i6.cims.nyu.edu/~NETID/webdev/index.html</pre></li>
<li>Also submit a ZIP archive of your source code (just ZIP up your entire 'webdev' folder and submit this)</li>
</ul>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/assets/js/docs.min.js"></script>
</body>
</html>