iGEM Website Design Workshop

iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018

iGEM Website Design Workshop

1

iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018 2

HTML → define the content of the websiteCSS → specify the layout of the webpage

Javascript → to program specific behavior

Getting Started in Web Development


● HTML stands for HyperText Markup Language ● Controls the content of the webpage● Not a programming language● You code HTML in a text editor● File extension: .html● Tag based language:

<body> …….. </body>

Getting Started in Web DevelopmentHTML


1) <!DOCTYPE html> - defines the document type2) <html> - describes the content of the web

document3) <body> - describes the visible content of the

webpage4) <h1>- heading5) <p> - paragraph 6) <img src=”myimage.jpg” width=”5”, height “5”>7) <br>- line break8) <title>- title

YOU NEED TO ALWAYS CLOSE THE TAGS WITH </tag>

Getting Started in Web DevelopmentHTML


● CSS stands for Cascading Style Sheets● Contains information on how the the html elements should be displayed● Could be used to control the style and layout of multiple webpages at once● Some properties that can be changed: Text Colour, Text Alignment, Background Colour,

Text Size, Text Font ● File extension: .css● Why do we need CSS?

Getting Started in Web DevelopmentCSS


Getting Started in Web DevelopmentCSS

Colour codes: https://www.quackit.com/css/css_color_codes.cfmFont Families: https://www.w3schools.com/css/css_font.asp “Web Friendly Fonts” : https://websitesetup.org/web-safe-fonts-html-css/

https://www.quackit.com/css/css_color_codes.cfm

https://www.w3schools.com/css/css_font.asp

https://websitesetup.org/web-safe-fonts-html-css/


Getting Started in Web DevelopmentInserting CSS

1) External Style Sheet

2) Internal Style Sheet


● Javascript is NOT Java● Used to control the behavior of the webpage ● Put Javascript functions in “script” tags:

<script> …. </script>

● Where do I place my javascript commands?

1. In the body or head section of the html code2. Place at the bottom of the section to improve page load3. Can be placed in external files if it will be used in multiple html pages (file

extension of a javascript file is .js)

Getting Started in Web DevelopmentJavascript


HTML help: https://www.w3schools.com/htmlCSS help: https://www.w3schools.com/css

Javascript help: https://www.w3schools.com/js

More on web development: http://home.hit.no/~hansha/documents/software/software_develop

ment/topics/resources/programming/exercises/Introduction%20to%20Web%20Programming.pdf

Getting Started in Web DevelopmentResources

https://www.w3schools.com/html/

https://www.w3schools.com/css/

https://www.w3schools.com/js

http://home.hit.no/~hansha/documents/software/software_development/topics/resources/programming/exercises/Introduction%20to%20Web%20Programming.pdf




iGEM WikiiGEM Wiki Rules

10

Carefully read iGEM’s wiki rules here: http://2017.igem.org/Competition/Deliverables/Wiki

Some important points:

● You must use Standard Pages● Everything must be hosted on the 2018.iGEM.org server (NO files hosted on other

servers) ● NO Adobe Flash Player● NO copyrighted material, including images

http://2017.igem.org/Competition/Deliverables/Wiki


iGEM WikiStandard Pages and Evaluation

11

Carefully read iGEM’s evaluation criteria here: http://2017.igem.org/Judging/Pages_for_Awards

BRONZE SILVER GOLD (at least 2)

Deliverables Part Data Human Practices Gold (Integrated human practices)

Attributions Collaborations Demonstration

Contributions/Interlab Human Practices Silver Modelling (Mathematical modelling or computer

simulation)

Improving parts

http://2017.igem.org/Judging/Pages_for_Awards


iGEM WikiStandard Pages and Evaluation

12

Other pages not tied to awards:

For entrepreneurship award, you need an entrepreneurship page: http://2017.igem.org/Team:[NAME]/Entrepreneurship

http://2017.igem.org/Team:Example2/Entrepreneurship


iGEM WikiHow to edit the iGEM Wiki

13

On editing the iGEM wiki: http://2017.igem.org/Resources/Wiki_Editing_Help

1) Adding a wiki page:

Team: OFFICIAL team name/PageNameEx: Team: NYU_Abu_Dhabi/members

2) Using html on the wiki: ● You need to put the code in html tags: <html>... </html>● To use css and javascript in html code, use <style>...</style> and <script>...</script>

3) You can also use Mediawiki, which is it’s own markup. You can mix html and Mediawiki, as long as html code is in the html tags and the Mediawiki is not in the html tags.

4) You can upload videos using Mediawiki’s upload tool (http://2017.igem.org/Special:Upload)

5) To create a template file (like a CSS file) to add to more than one page, use Mediawiki templates (https://www.mediawiki.org/wiki/Help:Templates) - maybe not, unless very necessary

http://2017.igem.org/Resources/Wiki_Editing_Help

http://2017.igem.org/Special:Upload

https://www.mediawiki.org/wiki/Help:Templates


iGEM WikiHow to edit the iGEM Wiki

14

On editing the iGEM wiki: http://2017.igem.org/Resources/Using_HTML_CSS_and_Javascript

To create CSS and Javascript files separately and then use them in html code:

And then use <link> for CSS and <script> for Javascript to include them:

http://2017.igem.org/Resources/Using_HTML_CSS_and_Javascript


What makes a good website?

15

Good design practices

● Very easy to navigate● Minimalist● Signature graphics ● Consistent fonts (max 2 fonts) ● Consistent colour scheme ● You can get information from the home page

Documents

iGEM Website Design Workshop