EP1000

Student Sites

Please let me know if you update/change your site URL. If you update your site URL, please enter the new URL in Google Sheet Group 1.

EP1000 Digital Fabrication & Prototyping Fundamentals
AY2020/2021 Semester 1 Group 1

Sn	Name	Site	Safety	Web	Git	F360	Comments
01	MUHAMMAD FADHLI	S	S	S	P	M	Logos are too big, images too small, either click to enlarge.write how you would use git, not just the commands
02	CHUA KEITH	U	I	I	M	M	Still work in progress, outline is there but no content
03	MUHAMMAD FARHAN	S	S	I	S	S	Write more on HTML and CSS how do you put a CSS file into your HTML and what does it do. Explanations very sketcy
04	MASON GOH	i	M	M	M	M	Only root page, no other work done, images not linked, lots to do
05	TANG KZ	I	M	M	M	M	Site incomplete, liks missing, no content, no CSS
06	FELIX NG	S	S	S	I	I	Site ok, images are small, cannot see, need more explanations, CAD missing files
07	LEE CLAIRE	S	M	M	M	M	Site ok, needs to update all the weeks work.put in a “Page under development” if necessary
08	ZHENG R	S	M	M	M	M	Site ok, missing the different chapters and pages
09	LEONG ELVIS	M	M	M	M	M	Github pages activated? filenames have spaces, can cause problems
10	EMMANUEL CHENG	S	S	S	I	G	Need to work on HTML and CSS explanations. git needs aork, something like your CAD would be good
11	HARIZ ZIKRY	S	I	I	O	O	Need to look at your initial work, the images are too small to see, perhaps click to reach larger images (done in markdown)
12	LEE HENG WEI	S	I	I	S/I	O/I	git and CAD is outstanding but there are is no explanation on the process. You need to learn how to write out the process
13	DANISH ERHAN	S	P	S	S/M	O/M	missing the text for the “how-tos”. Good images, but need to write something
14	KRYSTAL T	I	I	P	P	P	Need to catch up on work. Your CSS file is not being read so no formating done
15	ANG JOELLE	S	I	I	P	S/M	You need to write about your experiences here. For you, this should not be a problem as you are a COMMs student. start practicing now!
16	ANNA YAP	S	M/I	M	I	P	A good start, needs more content, you haven’t completed the exercises
17	NUR ARIFAH	S	S	M	M	M	A lot of work to do, but you have the Jekyl site up, time to add content
18	C AVINASH	S	I	M	M	O	Safety is only slides from ESP, missing Web and git work. Great video but text explanation needed
19	ZACKERY MAK	S	S	M	M	M	Need to link images in properly, images are there but not showing
20	TANG SQ	O	S	I	M	I	Outstanding site, added content, but still missing explanations, git is minimal, so are explanations for CAD. Use Left alignment for text

Key:

M Missing U Need work, not done I Incomplete, needs text
P Partially complete, usually needs more explanation instead of images
S Satisfactory
G Good work, keep it up
O Outstanding

Updated: 21 May 2020

FAQ

FAQ 001 Site does not display when URL is clicked

The default page which the website displays is index.html or index.md or readme.md.
You need to name your “root” page one of the above

FAQ 002 Please don’t use click here or press here to indicate a link.

Most users know what is a link and where to click it.
It would be better to use Google Search

FAQ 003 Why can’t I have a single webpage as my website?

A website is broken to sections/pages making reading easier. Topics are convered in a single page which is linked within the site.
Readers don’t like to have to scroll forever looking for the section.

FAQ 004 My images do not show.

Image was not included in the site (need to upload the image)
(windows users) Watch out for upper/lower case in the filename. E.g. MyPicture.jpg vs mypicture.jpg.
- Most servers are Linux-based and observe upper/lowercase differentiation.
Image is in a different folder, you need to navigate to the location.

FAQ 005 when do I use tables (HTML)?

You use tables when you need to represent data in an organised form.
A table has to load completely before the data is presented, so tables should be smaller than a page.
Use <div> if you want to do layout.

FAQ 006 Why do I need to use CSS with HTML, my site already looks great!

HTML should be used to layout the page. There should not be any formatting instructions (e.g. color, font, size)
CSS does not interfere with the information on the page. It is used to change the “look” and “feel” by adding color, fonts, sizing
A HTML page can be used with different CSS files for different user experiences.

FAQ 007 My website is professionally done - so what’s wrong with it?

As long as you can update your website easily, no problems, even if you use an external web generator or Adobe Illustrator or MS Word.
Can you explain to your reader how to “make” such a page? You have to do it in the 2nd topic - Website development.
if You pass this to your group, can they update the work?
This module is directed toward “sharing” information, as long as you and your group can do it, why not!

FAQ 008 Sir, I see a lot of   in your Markdown. What is this special “term”?

  is HTML for non-breaking space. That is, don’t split the line here if you have to. Two words that have a between them will not split across two lines.
I use it to generate blank lines for spacing.

FAQ 009 How to embed a Fusion 360 file in your web page?

Please follow this how-to: Fusion 360 How to embed a viewer of a Fusion 360 design into a website

Example

The code from the Autodesk site is placed directly in the Markdown file. The code sample is reproduced below. You may need to wait a bit before the image shows.

<iframe src="https://myhub.autodesk360.com/ue2dff438/shares/public/SH56a43QTfd62c1cd968a8254af243cf0912?mode=embed" width="800" height="600" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"  frameborder="0"></iframe>

FAQ 010 How-to display a 3D Model (.STL) in a HTML file

Use Javascript plugins: JSC3D

Read the reference documents and examples from the Site above.
Download the repository, extract the following .jsc3d files and place in a location with your HTML files (e.g. folder jsc3d)
- jsc3d.js
- jsc3d.webgl.js
- jsc3d.touch.js
  You need to load these files in with your HTML.

Load the JavaScript plugin code in the header area

<head>
    <script type="text/javascript" src="jsc3d/jsc3d.js"></script>
    <script type="text/javascript" src="jsc3d/jsc3d.webgl.js"></script>
    <script type="text/javascript" src="jsc3d/jsc3d.touch.js"></script>
</head>

Use the following code to load the STL file and display it:

<canvas id="cv" width=640 height=480>
    It seems you are using an outdated browser that does not support canvas :-(
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById('cv');
    var viewer = new JSC3D.Viewer(canvas);
    viewer.setParameter('SceneUrl','knight.stl');
    viewer.setParameter('ModelColor','#CAA618');
    viewer.setParameter('BackgroundColor1','#E5D7BA');
    viewer.setParameter('BackgroundColor2','#383840');
    viewer.setParameter('RenderMode','flat');
    viewer.setParameter('MipMapping','on');
    viewer.setParameter('Definition','high');
    viewer.setParameter('Renderer','webgl');
    viewer.init();
    viewer.update();
</script>

Change this line to point to your .STL file


 viewer.setParameter('SceneUrl','knight.stl');

Example: 3D model of a Knight Chess Piece

You can also embed it into the HTML or Markdown file using the following code:

<iframe src="06_STLmodel.html"
    width="800" height="600"
    allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"  frameborder="0"
>
</iframe>

Blank Classlist

May 2020