News
Subscribe with RSS to keep up with the latest news. For site changes, see the changelog kept with the code base.
Website, How To
November 16, 2022How to Website
Hi, I’ve been trying to create a website to show my work, using WordPress, but it has been a very frustrating experience so far since it seems the platform won’t let me customize anything unless I pay many $$$. Do you have any advice or can you point me towards a better direction to create a personalized and efficient website? Does one always has to pay to make a website? How do I free myself from the corporate world and create something of my own? I hope these questions make sense […]
I’m delighted to have a question! And it’s actually a good one. Short answer: I’m not aware of any system of having a website that you can modify at cost zero, but this does not necessarily mean that you cannot afford the costs. Ambiguous enough? Let’s go for the long answer, then!
You need (at least) three things to have website
A webpage it’s a document hosted by a computer (let’s call it computer 1) and served to another one (let’s call this, in a masterpiece of imagination, computer 2) through a network. Computer 1 hosts (in the sense “is the house of”, “is where it lives or where it’s stored”) the website and serves it to computer 2: that’s why we may refer to computer one as host, hosting, or server (because it serves the webpage, more on that in a minute), and computer 2 is often called a client computer (because clients are always right? Or maybe because master would have another connotation). The computer client has to reach the server and request the website. In other words, we need:
- A Document(s): The webpage(s) itself
- A host or a server where this document is stored
- A direction of the host that the client can reach.
And of course, a client with someone willing to reach your website. We assume that you have someone.
The Document(s): The webpage(s) itself
Create a .txt document and open it with your browser (yes, it does not look good, but you can do that). Even more, if you put this document in a shared folder (a folder shared with your internal network) others may also open it in the browser (or in a .txt editor). You could consider that a website, but it gets interesting if instead of a .txt you get a .html file.
Websites are normally written in HTML (HyperTextual Markup Language): it’s a Markup Language because it uses tags (
Even if you could pack everything in the same document, normally there are different files, connected through the HTML (that makes everything easier). A Browser (what you use to read this website: Firefox, Chromium etc.) can request an HTML file and all the other connected files and display the HTML content following the indications of the aspect of each element (CSS) and possible interactions (JavaScript) with it. It’s not common to build a website directly in HTML: with all the tags in the middle, it’s not really practical and everything will be messy in short time, even for people that works with HTML. That’s where Markdown (the opposite of a Mark-Up Language) helps us: for humans, it’s easy to read, and for 90% of writing its enough; for machines it’s also practical because you can easily convert it into HTML. For the 10% of things that you cannot do with Markdown, you just write HTML in Markdown. Take our website as an example: it makes no sense that every time I’m writing a new post I copy-paste that on top left there should appear “The abc of digital literacy”. It’s a process easy to automatize once divided in small pieces: for every website I will create in a comfortable Markdown, please transform it in HTML and don’t forget to put “the abc of digital literacy” thing on the top for me.
Content Management System (as the one on WordPress, Drupal, Joomla, etc.) facilitates this puzzling of pieces and normally offers an interface thought for people not familiar with all this. The advantage of this simplified user interfaces is simplification but the disadvantage it’s also simplification: sometimes you may need long workarounds to be able that the webpage do exactly what you want, but if you are in the foreseen workflow everything will be rally easy. We are using Jekyll, where everything it’s not so easy at the beginning, but allows us lot of possibilities to change things (and also makes the hosting part easier).
There are a lot of CMS out there divided in two big groups: Static websites, in which all the pieces are mounted and delivered together, and dynamic websites, that store all the pieces in a database and ensembles only the necessary pieces for a website every time it receives a request. The theory is that small easy websites works and are easy maintained with statics, and more complex need dynamic website. Don’t overthink this: if the difference really is important for your project, you should be working with someone that can help you with this decision.
How to choose a “good” CMS? That’s really complicated because it depends on many things: The better you know your skills or define what you expect on your website, the easier it will be. Search what other people are using when confronted with a similar problem as yours, or talk to your friends. And don’t let the 0-euro seduce you: normally that’s just the entrance to a limited version and some features you may want will be in the paid version (there’s nothing bad in fairly prize versions, by the way!).
A direction of the host that the client can reach
You have a website in your computer, but how could you reach it? Obviously, accessing somehow your computer through a network. The common way would be using the IP Address: a combination of numbers similar to a telephone. Every time you connect to a Network (Wi-Fi or with cable) the router will assign you, as all the other connected devices, a number (a classical: 192.168.1.X in which x is your device). You can reach other devices in the network through this number, as in internal telephone systems, where you only mark the extension (actually, in networks you are able also to call yourself).
That’s great, but normally the world you are interested in is in other networks: Then you exit your network (which is connected with other networks), signal in which network you want to connect and which extension you would like to reach. Could you imagine that? Having to remember the number of Google? Or the number of your favorite website? We will need a huge telephone guide (actually, Daniel Temkin played with this idea in Internet directory, 2018).
Luckily, we have another approach, based on Domain Name System. Basically, some top-level domains were established: generic, managed by the Internet Corporation for Assigned Names and Numbers (ICANN) e.g., .com (munication), .net (work), .info (rmation), .org (anization), .edu (cation) etc. or based in country codes, managed by the respective countries (.de, .us, .es). These domains are often managed by a foundation that establishes the criteria to accept (or not) a website in their domain. If you apply for an .edu domain, you should demonstrate that you’re connected to education or if you want a .cat domain, your website should be in Catalan or somehow connected to Catalan culture. For a .de website, you should have an impress, as your website will be under German laws.
You probably want to buy a domain for your website and connect to the IP of the computer that hosts your website. You could also have a subdomain, but that may be complicated, as well as using the subdomain provided by the hosting service (more on that, later). Searching around, you will find some top-domains cheaper than others, and prizes may vary depending on the domain provider and the offers that apply.
One last thing to consider is if you want a Dynamic or Static DNS: that depends basically on the hosting system you want to set up. For a classical hosting service, a static DNS will be enough. A Dynamic DNS make sense if you plan to host your website in a home server, that is connected with, e.g., your home network. The IP address that you have at home may change without you noticing it (because you normally go out of this network or connect to devices in the same network): that’s a problem if someone from outside is trying to reach a computer in your network. Dynamic DNS updates with your new IP Address every time it changes.
(Not so) Funny fact: Our website is hosted under .io domain, which is a country code for British Indian Ocean Territory, an archipelago in the Indian Ocean claimed by Mauritius and part of the Overseas Territory of the United Kingdom. Due to the similarity with I/O (Input, Output) was appreciated and used by informatics and GitHub. More on this fascinating story, in the Wikipedia article.
The host or a server where this document is stored
Until now, we have a website and one direction, but where is the website actually stored?
Your first thought may be: Well, actually in my laptop. You need to configure it as a server: not impossible, but also not so easy, and what is worse: I would not recommend that. Well, I would recommend for some uses, as checking how your website looks like, but you will be using a probably €1000 machine to do what a €100 machine (or even less) could do.
And even worse: Every time your laptop is shut down, your webpage will not be reachable. Or every time you change the network, you should reconfigure the DNS. Not to mention potential risks of having in the same machine data you want to share (your website) and data you would rather not share (the rest of data in your computer).
That’s why we refer to servers as something different of computers, even if they’re conceptually the same thing. When we say servers, we normally intend big computers designed to do stay all the time on and with hardware specifications focused on the use (no fancy graphic cards, but a lot of RAM). For hosting companies, it’s easy to maintain less big computers that countless small ones, and hence their virtualize. To virtualize means (in this context) having a gigantic computer and dividing it in many small computers, in which every part thinks that is a real computer (even if it’s only a part of a computer). This Platonic “personality disorder” (remember, we’re talking about a machine) had an incredible influence in the pop culture of the ‘90 and early 2000s (from The Matrix to Inception). This is a way to save costs for the maintainers: When you ask for a hosting service, you normally get a virtual machine you can access, and you will have no contact with your “neighbors” in the computer.
You can search some hosting providers in internet, and decide which one feeds better with your principles and your project. Some of them offer hosting with already installed CMS: You will find low-cost solutions, for which you should ask yourselves how they reduce costs. We’re particularly impressed (and that’s why we mention) by the approach of uberspace, a hosting provider with excellent documentation, support and reasonable prizes that give you the power to do whatever you want in your space. The “downside” if that you are autonomous, and you should learn some technical things (for which they provide documentation).
Or you can take another approach as the Solar.Lowtechmagazine and install your website in a Raspberry Pi (not your laptop) and use it a server for your website, powered by a solar panel. Here is the How-To.
How we (tried to) solve this problem
Our Hosting Provider is GitHub, which makes it easy to integrate the development part. We’re using Jekyll, a static website generator (it would be misleading to call it a CMS, but it’s how we manage our content) that is connected to GitHub.
To edit the website, we have a copy of the repository (i.e., all the files) in our computer that we can “synchronize” with GitHub (also with Nextcloud, but this we do manually): That’s where we work, create or edit the fragments of the website. To see the results, we launch Jekyll in our computer, that mounts the website and delivers to a virtual network (we’re telling our computer that is part of an imaginary network, that we can reach with the browser). In that way, we (and only we) can see what we are changing (is creating the website after every change).
When we’re happy with the changes, we push them to GitHub (i.e., we synchronize what we have in our computer with what there is in GitHub, overwriting the changes). When this happens, GitHub asks Jekyll (another Jekyll from GitHub) to create the static website assembling the modified fragments and once it’s done it delivers back to GitHub, resulting on the website you’re seeing. The domain you get with GitHub is not so nice, but it will work: for some money you may have a domain, but you could also (we do) live without it. You will find more information on the Documentation².
In conclusion: one way of making websites without paying money and with a reasonable limit is to learn Jekyll and using GitHub (you may also use GitLab). It’s not so easy, but it’s not impossible… and we’re here to help you if you found any difficulties.
The HfG-cloud (II): notes, draw.io & other apps
October 24, 2022→ There was no Presentation
Concepts
Guides
The HfG-cloud (I): clients, groups, calendar, tasks
October 20, 2022[20.10] The HfG-cloud (I): clients, groups, calendar, tasks
→ Presentation
Concepts
Guides
Session 0: Dataflows, markdown, git, eduroam
October 16, 2022→ Presentation
Concepts
Digital
information codified to be read, processed or outputted by a computer
Cybernetics Input-Blackbox-Output Feedback Environemnt
Program != Code
Workflow & Dataflows
Pipelines Automatization
HTML Markdown
Guides
→ Eduroam
Course, presentation of this
October 16, 2022This crash course is aimed at all those people (beginners or not, students or not) who want to learn about and get the most of the digital infrastructure offered by HfG. It is a warm-up to face the new semester and get the digital part ready and well tempered: we will talk about how to search and find help, how to document and configure eduroam (WiFi), the Mail (and use the filters critically) and the exchange and much more (forms, calendars, etc.) platform Nextcloud, as well as Moodle and BigBlueButton. All this, with hands-on approach, so get up, stand up and bring your laptops! This is an early-bird course: it runs during the semester’s opening week (Monday 17, Wednesday 19, Thursday 20 October) and the following week (Monday 24, Tuesday 25 October), from 9am to 10am. Details of each session will be available on Moodle.
Goals
- Enable you to understand digitality and (all possible) digital tools
- Awake your critical capacity on deciding which tools you want to use
- Empower you to confront digital related problems
- Make you aware of the importance of documentation
- Share this knowledge with everyone
- Have fun
Related: Data Literacy and Data Competence [#TO-DO]
Pedagogical approach
From each according to his ability, to each according to his needs
- Sessions oriented towards your necessities
- We can discuss whatever program/topic you like: just Ask for it!
- Spark sessions, DIY (at your rhythm), during the whole semester
- No exams, no attendance obligation, no certificates: only your pure interest
contents
Literacy, Digital (vs Competence, Digital)
October 16, 2022Digital Literacy (vs digital competence)
The request we received for this course was to train digital competences, an umbrella term at least in our context problematic. First of all because “digital” as “things you can do with a laptop” is really a huge term. Competence is more precise, and considers that there are a group of (digital) tools people need to use and in order to do that they need to develop their skills. The advantage of this approach is that you can evaluate it: after the course you ask participants to perform a task and either they do (and you conclude they have the skills) or not.
The problem with this approach is that digital tools changes fast and constantly introduces new features and possibilities. That’s the reason we think a more general approach, focusing on framework of the tools may be more useful. Understanding how a program works or being able to describe the problem you’re facing or searching in the manual seems the skills that will help participants, now and in 10 years.
We prefer the term “digital literacy” because it transmits quite good the idea that we can teach you a minimal alphabet formed of few signs, that combined can be really powerful. This will allow you to develop your skills, reading or writing.
Want to see more? See the News Archive.