Curriculum/Digital Media/Website-making

From Graphic Design Arnhem
Jump to navigation Jump to search

Static/Dynamic website making

Static-dynamic.png

What if the difference between a static and dynamic website?


The following list is ordered from static to dynamic.

manually written HTML page

Write your HTML and CSS directly in a text file!

Old-school, but there is nothing wrong with that.

You can save a HTML file and upload it to a server.

generated HTML page

Use Python to generate your HTML. You can read folders with images or textfiles (for example structured in Markdown) and place them in a HTML template.

You can save it as a HTML file and upload it to a server.

Static Site Generators

Use a Static Site Generator (for example Pelican) to generate a static website. Write your content in Markdown. Very useful if you want to work with categories and tags.

It generates a folder of all the files you need, which you upload to a server.

Hotglue

https://hotglue.me/

Install it on a server and work on the layout of your website from the browser with the Hotglue GUI.

small PHP page

Write a small PHP script that reads files from a folder on your server dynamically. There is an PHP extension that works with Markdown.

Upload your scripts and files (images/text) to your server and your website reads them dynamically.

You can download an small PHP webpage example here.

Dropbox to Website

The following platforms allow you to use a Dropbox folder to power your website.

Small Victories

https://www.smallvictori.es

Blot

https://blot.im

Processwire

Processwire is an open source CMS with an active community and a lot of handy features, minus a lot of unnecessary things.

The CMS has four main categories that need to be understood to get started: Pages, Templates, Fields and Modules.

Pages are the pages as you see them on the front end, these are pages in the back end as well in which your text or other content is stored. Templates are linked to a set of PHP pages that you create in your file system, which in turn can be linked to the Pages to display your content in a certain way. Fields are input fields on the back end that accept a certain type of information: text, images, video .... They can be put in your Templates to input a certain type of information. Modules often offer additional functionality to your site and can be imported.

https://processwire.com/ https://processwire.com/docs/tutorials/

WordPress

Make your website as WordPress template in PHP.

(Or work with a JSON plugin to create an API to your WordPress installation and work with JS.)

Your content is written to a database. You need to install WordPress and its requirements first. When installed you upload your content through the WordPress GUI.

Be careful with spambots! Install a spambot-blocker!

Also be careful with installing plugins, they can make the site very heavy or even break it

Themes

Envato Market

Envato Market offers many design resources, including WordPress themes. They have themes for almost any purpose.

Price: from $10,-

https://themeforest.net

Semplice

"Semplice is the first fully customizable portfolio system based on WordPress. Made by designers, for designers."

Price: $99,-

https://www.semplice.com

Invisible Folio

"Highly optimised portfolio website WordPress theme for creatives"

Price: €89,-

https://invisible.tools

Customising a Theme

Wordpress itself has many ways of customising the appearance of a theme, many themes also offer various ways to customise them (look at the theme’s settings).

For more on customising in Wordpress, see the documentation.

Advanced (Child Themes)

If you get in the position where you would like to edit one of the theme’s files (change some of its code), it is possible to completely tweak a theme to your liking using child themes. The main benefit of using a child theme is that the changes you make will be preserved even when you update the “parent” theme (if you would for instance change the original files, your changes will be overwritten by the update).

To get started and for more information, see the WordPress documentation on Child Themes.

Hosting

What-shape-is-the-internet?.png

screenshot of What shape is the internet? by Noah Veltman


There are so many options!

A cheap one: https://www.vimexx.nl/webhosting

An often used one: https://www.gandi.net/en