igem website design workshop
Post on 23-May-2022
9 Views
Preview:
TRANSCRIPT
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
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018 3
● 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
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018 4
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
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018 5
● 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
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018 6
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/
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018 7
Getting Started in Web DevelopmentInserting CSS
1) External Style Sheet
2) Internal Style Sheet
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018 8
● 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
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018 9
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
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018
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
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018
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
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018
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
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018
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
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018
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:
iGEM Website Design Workshop Lujain Ibrahim | NYU Abu Dhabi | iGEM | 2018
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
top related