Bioc0015 Coursework: Website

Introduction

In our modern society, we rely on online tools and resources for information, research and educational purposes. Communicating scientific information, online, is increasingly an important means of reaching a diverse world-wide audience.  This assignment is designed to provide an opportunity to specifically demonstrate key skills in creativity and innovation, information technology and presentation of material to key decision makers with varied scientific backgrounds and perspectives.

Aim and Objective

This assignment involves creating a webpage based upon presenting a molecular mechanism in technology-based context (e.g., method, drug, product, service, company).  The molecular mechanism must be chosen from (or inspired by) a theme presented during your lectures and also supported with additional reading. This assignment aims to exercise your skills in innovation and creative thinking as well as researching and presenting science.

You must use the literature to research an applied technology You should use peer-reviewed articles and may also use papers submitted to established repositories such as BioRxiv.

You are encouraged to create or develop a novel or innovative applied technology. This can also include advancing or repurposing current technology.

Well-researched science is key!

Website guidelines

· There is a limit of ca. 9 students who can be assigned to each lecturer’s theme(s) (Cabrita, Christodoulou, Thalassinos, Raleigh, King, Purton, Djordjevic, Marechal, Santini). Please fill out the Online Form with your choice BEFORE you start the coursework. You will not be able to submit otherwise. The availability of a lecturer’s theme is on a “first-come-first-served” basis.

· The website should be presented in a way that is relevant to the context that you have chosen to describe your mechanism. For example, if you are a company selling a drug that targets a particular mechanism, it should have the look/feel of a company.

· The website design is up to you and needs to relay the technology and underlying science effectively.

· Your website must be prepared for a general audience and consist of no more than 8 tabs:

o One tab must describe the underlying detailed science for a specialist audience (must be fully referenced)

o An area or section in your website must describe the science for a non-specialist (i.e. a scientist outside of your field)

o One tab must be for references

o Please include a disclaimer on your website stating that the content presented is for UCL’s BIOC0015 course.  It is also recommended that the disclaimer mentioning that the contents of the website is fictional and for educational purposes only.

· Any web hosting platform. may be used (e.g Wix, Weebly or similar), as long as the published webpage will be available up to June 30th 2025, for marking and for viewing by the external examiners as part of the examinations process. There are free website hosts available, though you may also wish to use UCL servers to host their web-based presentation. Some additional guidance for these approaches can be found on pg 4.

· Assessors will be using Macs or PCs so please check that your website can be viewed on e.g. Chrome and Safari

Note: This assignment is not about web development (i.e., you will not need to use coding skills).

Submission

For this assignment you’ll submit your website’s URL within the coursework pulldown menu (details will be posted on Moodle). You will also need to provide 2 screenshots: (1) tab showing the science for the specialist science (2) any other tab that shows the format of your website.

The assignment must be uploaded by 11.00am on 15 January 2025. SoRA candidates are permitted extra time as stipulated in their conditions. Late submissions will not be permitted.

Assessment

This assignment counts towards 65% of the module.  The website will be assessed on the science, including how well it has been researched and presented, the organisation of the website itself.  The marking guidelines include:

Scientific content · Applied technology and its relevance · Basis for the scientific phenomenon · Quality of the scientific detail provided for the topic of choice · Quality and detail of the science for the technology to be credible · Sources used for content

Website layout, organisation and use of visual elements to relay the science · Context and clarity of the basis for the website · Overall navigation, flow of information to describe/present the science · Use of figures and schematics to support the text · Appropriate use of dynamic elements (videos, gifs, clickable links, links to external sources as necessary)

Overall impression & audience accessibility · Spelling, grammar · Effectiveness of how the science presented, relative to the website’s context · Content and overall use of language appropriate for both specialists and non-specialists

You will receive marks and feedback within 4 weeks of submission, unless otherwise stated.

How to start?

o What to choose?

- You may choose any molecular mechanism with a role in either biotechnology or health and disease (or both if you wish), or other aspects of applied research in academia or industry – as inspired from the themes presented by lecturers in the course

- Alternatively, you may also instead focus on presenting a technique or technology that is used to characterize a molecular mechanism

Examples in previous years have included:

· New therapeutic treatments (small molecules, antibodies) acting at a chosen molecular target

· Novel treatments for a human disease

· Fictional start-up companies

o Presenting “new” treatments / molecules / antibodies

If you choose to create a new treatment/molecule/antibody, you must provide a detailed specification of your invention, together with a very clear description of the mechanism by which it acts to modulate its target pathway.

o Including a fictional start-up/company

If your web-page includes a fictional start-up/company, your website should also offer an insight into what your start-up/company is about (vision, aims, deliverables etc)

o Some examples from previous years

https://algalbioworks.weebly.com/

https://zcbtxwu.wixsite.com/ariella

https://zcbtgjw.wixsite.com/mysite/toxic-metal-pollution

https://zcbtntk.wixsite.com/therasis

Where do I find website builders/hosts?

Some free website hosts include:

o weebly: https://education.weebly.com/

o wix: www.wix.com (education version: http://www.wix.com/wixed/wixed-beta/complete-your-website)

o dreamweaver (available on UCL-based computers or remotely using Desktop@UCL)

Instructions for accessing and using Dreamweaver on the UCL network:

Note:  these instructions have been derived from a web-building/hosting course in UCL

1.  Accessing Dreamweaver 8(“Macromedia Dreamweaver 8”)

On UCL computers:

o Login to WTS using your UCL username and password

Remote access via Desktop@UCL

o Go to: http://www.ucl.ac.uk/isd/services/computers/remote-access/desktop

o Click on Desktop@UCL link

After logging in:

· Map the T-drive to your account (Start | Programs | Utilities | Mount-Unix FileStore (T-drive)).

· Important: You will have to do this every time you connect to WTS.

· Navigate to your T drive: check that you have a folder called html.pub

· Close Windows Explorer.

2. Setting up a site in Dreamweaver 8

· Open Dreamweaver 8 (Start | Programs | Applications M-N | Macromedia | Dreamweaver 8 | Macromedia Dreamweaver 8)

· Go to Manage Sites on the Site menu and click New and then Site.

· Click the Advanced tab (at the top of the dialogue box).

· Site Name is My Homepage

· Local Root Folder is T:\html.pub\

· Remove the tick from the Enable Cache box.

3. Writing your first HTML page

· Create an empty file, if there is not already one open, by going to File | New. Make sure that Basic Page and HTML are selected. Click “Create”.

· Type the following:

Homepage

This is my first HTML page.

I am [first name] [surname].

Resources

Google!

IS

HTML

Images etc.

· In the Title row (at the top of Dreamweaver), replace Untitled Document with Homepage of [your name]. This is what appears in the browser’s Title Bar and, if the page is bookmarked, it will appear on the Bookmarks or Favorites menu in the browser.

· Save the file as index.htm by going to Save on the File menu. Make sure that it is saving in the T:\html.pub\ folder. Click Save.

· Go to the View menu and select Code and Design. This view is useful for trouble-shooting. You can drag the line between the views up and down, and edit the page in either view. Go to Design on the View menu to return to the original view.

Note: If a change is made in Code view you need to click in Design view before it takes effect.

4. Headings h1-h6

· Display the Properties Window, if it isn’t already open, by going to Properties on the Window menu. It appears at the bottom of the screen.

· Highlight Homepage in the document and select Heading 1 in the Format box in the Properties Window.

· Highlight Resources and select Heading 2 in the Format box.

Note: h3-h6 also exist — the higher the number, the smaller the heading.

5. Formatting text

· Highlight your surname and click the B icon in the Properties Window. Your surname should appear in bold.

Tip: Do not use underline in HTML files, otherwise your users will think it's a link!

· Highlight Google!, IS and HTML, and click the icon in the Properties Window with the three squares and the three lines. You should now have a bulleted list.

· Click above Resources and go to Insert | HTML | Horizontal Rule on the Insert menu. You should now have a line across the page.

· Save the file by going to Close on the File menu. Click Yes to save the changes.

Note: It is good to use plenty of headings and lists to make your pages easy to understand, and accessible to disabled users.

· Create a new file by going to the File menu and click New. Click Create.

· In the Title row, type Images. Also create a Heading 1 with the text Images.

· Save the file with the name more.htm

Tip: Keep file and folder names simple — only use 0-9, lower case a-z and hyphen. Do not use spaces

6. Links

Still in more.htm, type the following line:

Return to homepage.

· Highlight Return to homepage and in the Link box in the Properties Window, type index.htm

· Close the file by going to Close on the File menu. Save any changes if prompted.

· Back in index.htm, highlight Images etc. and in the Link box, type: more.htm

Note: In the case of the following links to other sites, you should select _blank in the Target box (to the right of the Link box), so that the other site opens in its own window. Otherwise the visitor to your site would have to click the Back button to return to your site.

· Highlight Google! and in the Link box, type http://www.google.co.uk/

· Highlight IS and in the Link box, type http://www.ucl.ac.uk/is/

· Highlight HTML and in the Link box, type http://www.homepages.ucl.ac.uk/~ccaacdi/knowhow/building.htm#html

· Highlight your name and in the Link box, type mailto: followed immediately by your e-mail address.

You can use similar techniques to link to any type of file — including PDFs, Word documents, images and sound files (.wav or .mp3).

7. Putting your files on www.homepages.ucl.ac.uk

Close index.htm by going to Close on the File menu. If prompted to, save any changes.

· In the Site pane (on the right, go to the Window menu and click Site if it is not there).

· Make sure the drop-down box at the top of the Site pane says Local (NOT Remote) View.

· Click the refresh icon (circular arrow, second icon from the left).

· Highlight the file index.htm and click the blue up-arrow Put Files icon.
Do not include dependent files, if prompted to.
Highlight more.htm and click the same icon.

The UCL homepages server requires an additional step not normally necessary on other servers:

· Go to Start | Programs | Software I-P and click Publish Web Pages.
Again, use your UCL User ID and e-mail password.

You should now be able to see index.htm and more.htm in Internet Explorer at:

www.ucl.ac.uk/~userid  e.g. www. ucl.ac.uk/~zcgbh01

Are your links working?

If not:

· Open the file whose links are not working in Dreamweaver.

· Fix the link.

· Close the file, saving the changes.

· Put the file again.

· Reload the page in the browser by navigating to it and pressing F5.

Notes:

· The “HTML” link goes to a place (an “anchor”) in an HTML file, not to the top of the file. If you want to put an anchor in a file, go to the Insert menu, click Named Anchor and give it a name. There must be no spaces or uppercase letters in anchor names. A link to an anchor has a # before the anchor. It is not necessary to put an anchor at the top of a document, as linking to the document’s own file name e.g. index.htm will reload e.g. index.htm at the top.

8. Images

· In Internet Explorer go to www.ucl.ac.uk/ls/specdig and find an image you like. Right-click on it and click Save Picture As. Give the image a name and save it in R:\website.

· In Dreamweaver return to the bottom of more.htm.

· Go to the Insert menu, click Image, locate your image and click OK.

· Click the image to select it. Enter a description of the image in the Alt box in the Properties Window.

Note: You can resize the image by dragging its corners. However, this should really be done in an image processing program such as Photo Shop Elements (Start | Programs | Graphics Packages | Photoshop | Photoshop Elements. If you resize an image by dragging its corners in Dreamweaver, it slightly slows down the loading of your page. Images should be JPEGs or GIFs and not larger than 150Kb (check the size in Windows NT Explorer).

9. Tables

The easiest way of controlling where images and text appear on an HTML page is to use a table.

· At the end of more.htm, go to the Insert menu and click Table.

· Enter the number of rows and columns (start with 3 and 2 respectively) you require.

· Border should be 0 (NOT 1), as you do not want to be able to see the table's borders.

· Set the table width to 100 percent.

· Click your image and use Edit | Cut and Edit | Paste to move your image into the right-hand cell of your table. If the image is large, you may need to drag the left edge of its cell a little to the right to open up the left hand cell. Type a little text in the left hand cell, and you will see how it all works. By default, text appears in the middle of a cell. Change Default in the Vert box in the Properties Window to get the text to appear at the top of the cell. You may need to click the little triangle, bottom right of the Properties Window to expand the Properties Window so that you can see the Vert box.

Table formatting

· If you want another row in your table, click in the last cell and press the Tab key.

· To merge cells, select the row by clicking to the left of it. Wait until the mouse cursor becomes a small arrow pointing right. Right-click and select Table and then Merge Cells.

10. Colours

· You can change the background page colour and the font colour on an individual webpage by first right-clicking on the page. Click Page Properties. Click the squares next to Background color and Text color and select the colours.

· You may also change the colour of a small amount of text by selecting it, and clicking the square two to the right of Size in the Properties Window.

· You may change the colour of the background of a particular cell by selecting all of the contents of the cell with your mouse and selecting a colour in the Bg square two to the right of Header in the Properties Window, which needs to be expanded by clicking the arrow in its lower right corner.

11. Viewing and deleting files on the server

In the early days of learning HTML, you may wish to delete files on the server if you do not want the search engines to find them.

· Select Remote view in the Local view drop-down box in the Site pane on the right. (Press F8 if the Site pane is hidden.)

· If you are not already connected to the server, click the Connects to remote server icon (first from the left; looks like two plugs).

· Highlight any file(s) you wish to delete and press the Delete button on your keyboard.