iGEM Wiki Web Workshop 2
Hi, I’m Jonas Johansson, a developer, and designer. As a member of the Stockholm iGEM team, part of my responsibility is to work the wiki. This post is an extension of a session I held within our team and will go through the following:
- General information about the World Wide Web
- What a server is and which type to choose
- What a domain is and how to get one
- Various ways of building a site
- What wireframing is and how it can be used to design an experience
This post is not directly connected to the iGEM wiki but instead topics born from interest within the team. To learn about how you effectively work with the wiki, read my first post.
With that said, let’s start at the beginning (get ready for acronyms).
What is the web? 🕷️
The World Wide Web was invented in 1989 and began general usage in 1991. It relies on a system of web pages formatted in Hypertext Markup Language (HTML), found via URLs (Uniform Resource Locators). World Wide Web is not to be confused with the Internet.
No one really says World Wide Web or www anymore, simply say Internet.
You will often see HTTP, or HyperText Transfer Protocol, in front of a URL. HTTP is a set of rules used under-the-hood of the browsing experience. On Medium, it’s not just HTTP but HTTPS with an additional s for Secure. Serious sites use HTTPS, and you should never provide any sensitive information to one that doesn’t.
A URL does not use only a protocol but also a domain name, which points to an IP-address that, in turn, is points to a server (where the content of this page exists). This system is part of the invention of Tim Berners-Lee mentioned earlier.
Serving extravaganza
You may have heard of server farms, which are massive collections of storage units. These servers contain all our information, and they are running hot, serving us continually, which is why they exist underground or otherwise chilled locations.
A side note, we are at the point where using bandwidth is highly damaging to the environment, please make sure to consider climate compensation policies when making your choice. We have yet to put a limit the amount of information we create and server farms will continue to grow and effectively heat up the environment, on locations where they have the potential to do most harm.
For personal websites, there’s a long list of server providers, most of which do provide not only the server space but also the domain name as well as email services. They refer themselves as Web Hotels, which is what you should use as a keyword for searches.
Here are a few that I have used in the past, in no specific order:
- one.com (cheap)
- manufrog.com (Swedish)
- binero.se (Swedish)
- godaddy.com (cheapest)
- gandi.net
- transip.eu
Does it matter which country the servers exist? Yes, the further away the server is, the potentially slower it will be for the visitors. It’s unwise to use a server in Asia for a website viewed in Europe.
FTP
Remember HTTP? Welcome to FTP, or File Transfer Protocol. For a web developer starting FTP is a straight-forward way of working, it’s mostly a remote folder that you can transfer your documents to. I recommend using Cyberduck for this process.
However, for many years, I use Git and Github Pages (and similar services). The reasons are:
- FTP is slow and risky, and if something happens during transfer the files may become corrupt
- FTP has no version history which means it is not possible to traverse the change history
FTP is still useful, especially when deploying larger CMS that relies on PHP and MySQL (web technologies that web hotels often provide and which Github Pages does not).
VPS
Not interested in a small folder on a server? Get your own! A VPS (Virtual Private Server) is a service that provides you with your own server space. A VPS is useful when the web hotel does not support the technologies you wish to use, or you have a high need for customization. I will not go into detail on how this works but mention that some web hotels provide this. I recommend trying out Digital Ocean!
Git and Github Pages
For quite some time now, modern web development has become more and more molecular. Smaller changes, more files (a lot more), and so Git emerged as a way for developers to track and share updates while keeping the process safe and sturdy. The creators of Git later created Github Pages, which allows its users to get a website up for free. I ❤️ this service and suggest you learn more by going to their website. Github Pages is a Static Site Generator, and you can find many alternatives, I happen to enjoy this one.
Besides FTP, VPS, and Github Pages, there’s Glitch. An online community and platform that provides not only a code editor but HTTPS and a custom domain name let’s check it out!
Glitch
Glitch is a community of code that gets you creating immediately in a fun environment. I use this often with students that are starting out learning web technologies as they only need a browser to get the essentials.
Sign in with the button at the top right, feel free to connect with your Github account if you have one.
Once logged, you will see your profile home. I have already done some projects. To get started, choose New Project and hello-webpage.
Glitch generates a domain name for you; in this case, it’s catnip-telescope and is live at catnip-telescope.glitch.me. Neat huh? The site is already live. Try editing the index.html. If you don’t recall the bit of HTML from the first post, try adding the following inside the body tag:
<img src=”https://unsplash.com/photos/TH3ax0OeiX0">Don’t worry about refreshing the browser to see the changes as Glitch does that automatically.
Unsplash is a great source for quality imagery, make sure to check it out as it can greatly improve the reading experience to have complementary imagery.
I’ll leave you here to explore on your own.
cool.domain.bro
Both Github Pages and Glitch can connect to a domain that does not involve them; for instance, I have jonasjohansson.se, which points to my Github Pages.
Domain Name Registrars can purchase domain names, and some registrars have several domain names while some have few. I use Binero for my .se-domains but Godaddy for all others. I want to mention that there are many alternatives, such as Namecheap.
Does my domain name matter?
Yes! In the beginning, there were only a few top-level domains, such as .org (organization), .com (company), and .net (network). Most countries also had their domains such as .se (Sweden), .no (Norway), or .co.uk (United Kingdom). These have been around for quite some time and are useful as they can inform the visitor about the website. If you can get your name with your country code or any other of the domains mentioned, take it (or someone else will)!
Using the right domain name may improve your sites search engine rating. To learn more about how to increase your visibility lookup Search Engine Optimisation (SEO).
Nowadays we have a lot of domains to choose from, such as .cool, .ninja, .fashion and many (many…) more. This part of the domain is
By going to Godaddy’s domain name search, you can try out domains. Here I tried igem.cool, which is available — a great success! And a decent cost, at least for the first year.
My precious
In the early days, scalpers would purchase domains and then sell them for a higher price. Many also bought domains similar to popular ones, as spelling mistakes would give them visitors — which could lead to ad revenue or hacking opportunities. Read this article and interview with a domain prospector if you’re curious to learn more!
If your domain is not available, you can research who purchased it when it expires. To do this, open up Terminal on Mac or Command Prompt on Windows. Type “whois”, followed by a space and the domain that you wish to research. On Windows type “whois -v”.
We’ve covered the basics of a server and domain, time to look into how to get them to dance the tango.
Domain + Server = 💃🏽🕺🏿
A straight-forward direction is the previously mentioned web hotel where a domain name and server space exist as a package. When that is not an option, both Github Pages and Glitch provide the option to use custom domains.
Look mum, no code!
Not keen on making things from scratch? Sometimes it’s nice to focus on content and less on the code. Which is why there are so many web page builders around that help you create! Some of the most popular are Cargo and Squarespace, which are focused on showcasing portfolios. If you want to set up a shop, check out Etsy, and if you want to share your art and design, have a glance at Behance (owned by Adobe) and Dribbble. Just like Medium provides a no fuzz experience for writing articles, the above can do the same and more.
These services provide templates that are highly customizable at a monthly and annual fee. They also offer plenty of support and tutorials, for instance, connecting a custom domain.
One downside using templates is that at the end of the day, it’s tricky to create a unique experience. You are using a template, after all. It is possible but will likely require much more time than expected (in which case you could learn to build it yourself)
Whether you have decided to start from scratch or use a web page builder, you are likely to need some way of planning your site. I know you may want to get started building the final thing right away, but I’d suggest you take a step back and plan out what you want to accomplish.
Wireframes to the rescue
Outlining an experience is not only for a web page, but it can also be used for pretty much anything. It’s a method that leaves certain aspects of aesthetics out while focusing on the information architecture. While you can do this with pen and paper (and in many cases, you should), there are a few tools that I’d like to share with you, in various ranges.
Check out Sans Francisco for a publically curated list of greatness, try some out and make up your own mind.
Whimsical
There are so many great tools out there for designing, and I’ve tried a lot of them. One that I’ve begun to like is Whimsical, which, like most tools I enjoy, does a specific thing flawlessly. I use Whimsical to create wireframes and also flowcharts. I won’t go into substantial detail but share how that could look.
Sign up and later sign in with the buttons at the top right.
Once in, you should have some free boards you can use, mine are all out. 😢
Go ahead and create a New Wireframe.
In the example above, I’ve dragged in two screens, one for desktop and one for a smartphone. I can easily share this page with others and make it collaborative. Whimsical is an excellent start for getting a rough understanding of the content you wish to present and how it can look on different devices — a significant first step before looking at the color, typography, and decorative elements.
What You See Is What You Get
WYSIWYG was a thing. You designed, and that which you created was live immediately for others to view and use. Pretty cool, but also somewhat hated because it taught design and code superficially, and in some ways, miseducated users. Anyhow, enough my ranting, WYSIWYG is back and stronger than ever thanks to tools like Webflow and Figma.
Both of these tools allow you to design your digital experiences directly in the browser. Webflow doesn’t only let you design but also launch your work online, and it’s powerful! If you are curious about learning great tools for UI/UX design as well as moving from design to code in an innovative way, I urge you to explore these two options.
I also want to mention Notion, which allows you to create public pages of content. An example of this is the wiki for MethodKit, which uses a custom domain forwarding to a Notion page.
Bonus 🎉 License and copyright 🏳️
Copyright is automatic and applies as soon as you, the creator, have manifested your work in some tangible form. The © symbol has no power; it can, however, still be useful in combination with name and year as to declare the copyright ownership.
You can use a license to allow others legal access to your work, such as if you have created an application that you wish others to share. Read more at Choose A License to get acquainted with the alternatives.
With that said, anything that is uploaded can be taken and re-used. Be careful with what you upload; if it’s an image and you don’t want it used by others, a watermark can help. The Internet is open source if your work is online — it’s accessible to others.
Summary
- Use a service such as Cargo or Squarespace if you are not a developer.
- Use Glitch or Github Pages if you are curious about development and want to build from scratch.
- Register your domain and connect it to stand out!
- Plan your site using wireframing tools, and use modern design tools that export directly to code if you have the time.
I hope this was useful and that it can serve as an easy to grasp starting point for continued learning. Find me at jonasjohansson.se and reach out with any questions.
