Skip to content

Commit 0f023c4

Browse files
karina-rodriguezkarina-rodriguez
committed
web server added
1 parent b5ffbee commit 0f023c4

File tree

6 files changed

+166
-12
lines changed

6 files changed

+166
-12
lines changed

‎episodes/fig/dockervar.png‎

191 KB
Loading

‎episodes/fig/imagesweb-server.png‎

223 KB
Loading

‎episodes/fig/searchinbar.png‎

172 KB
Loading

‎episodes/fig/webseverhtml.png‎

45.4 KB
Loading

‎episodes/urls.Rmd‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,51 @@ to learn how data, of any type, is made available over the Internet.
3535
A webpage is usually written in HTML and other web-languages,
3636
such as JavaScript, TypeScript or PHP.
3737

38+
::::::::::::::::::::::::::::::::::::: challenge
3839

39-
Usually, we can link or find a website on a browser
40-
through its URL (Uniform Resource Locator),
40+
## Challenge: Create simple html page
41+
42+
In your PC, create a new folder called *'htmlpages'*.
43+
44+
Using a texteditor, create a new file and copy the following
45+
HTML code:
46+
47+
```html
48+
49+
<!DOCTYPE html>
50+
<html>
51+
<head>
52+
<title>My Webpage</title>
53+
</head>
54+
<body>
55+
56+
<h1>My Webpage</h1>
57+
<p>Welcome to My Very Own Webpage</p>
58+
59+
</body>
60+
</html>
61+
62+
63+
```
64+
65+
Save it as *index.html* in the folder you just created.
66+
67+
If you open a *File Explorer* you will be able to see the
68+
browser opening your file and displaying the text on the web
69+
browser.
70+
71+
72+
::::::::::::::::::::::::::::::::::::::::::::::::
73+
74+
75+
The previous example showed you an HTML file
76+
in the local computer.
77+
78+
Normally, websites with HTML files
79+
are in remote computers so that everyone can access them.
80+
To find them, we use
81+
a link on a browser
82+
called an URL (Uniform Resource Locator),
4183
such as [https://www.brighton.ac.uk](http://www.brighton.ac.uk),
4284
[https://www.europeana.eu/en](https://www.europeana.eu/en).
4385

@@ -85,7 +127,7 @@ and change the content of the webpage accordingly.
85127

86128
::::::::::::::::::::::::::::::::::::: challenge
87129

88-
## Challenge 1: Use a query in a URL
130+
## Challenge: Use a query in a URL
89131

90132
Try searching a word in the [Europeana homepage][Europeana]
91133

‎episodes/web-services.Rmd‎

Lines changed: 121 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: 'Web server'
2+
title: 'Web Services in a Container'
33
teaching: 10
44
exercises: 2
55
---
@@ -14,19 +14,131 @@ applications by passing the input the user gave via the URL. The software then p
1414
the input and provides a suitable response.
1515

1616

17-
## Where I can get a server?
17+
## Where I can get a server?
1818

1919
Any PCs which is connected to the Internet could act as a server, but you will
20-
usually require one with suitable specificaitons depending on the software
21-
that it needs to run. There are also virutal servers which commercial
20+
usually require one with suitable specifications depending on the software
21+
that it needs to run. There are also virtual servers which commercial
2222
companies provide access to. This are normally focused on web-hosting,
2323
and provide GUIs to easily deploy websites and other common types of software.
2424

25-
To learn how web severs work, we will deploy a basic solution
26-
in this tutorial using a container platform. A ** software container** is a readily-made
27-
software system which already includes all the software dependencies
28-
and configurations required to run. The software docker is a popular
29-
system to create and deploy containers. So, we will use thos
25+
## Meanwhile, how can I learn to serve multi-dimensional content
26+
27+
To learn how web severs make available multi-dimensional data
28+
for storytelling, we will deploy a basic solution
29+
in this tutorial using a **software container** platform.
30+
31+
A **software container** is a readily-made
32+
software which delivers to the user a software,
33+
its environment, the dependencies and
34+
the configuration required to run in a package called container.
35+
The software [Docker](https://www.docker.com/) is a popular
36+
system to create and deploy containers.
37+
38+
39+
[![Containers video](https://i.ytimg.com/vi/HelrQnm3v4g/maxresdefault.jpg)](https://www.youtube.com/watch?v=HelrQnm3v4g "How can software containers help your research? &copy;
40+
Australian Research Data Commons - ARDC")
41+
How can software containers help your research? &copy;
42+
Australian Research Data Commons - ARDC
43+
44+
45+
46+
To run a container, you will need to have installed Docker in your laptop or
47+
PC.
48+
49+
## Starting a basic web server container in Docker
50+
51+
Open Docker Desktop, and look for the search bar.
52+
This allow you to search for already packaged contaners in [Docker Hub](https://hub.docker.com/). Type in the Search textbox the following
53+
container: **karinardz/local-web-server**
54+
55+
![Search in Docker Hub for karinardz/local-web-server](fig/searchinbar.png){alt='Download local-web-server.'}
56+
57+
58+
59+
If you know how to use the command line,
60+
you can also call commands from Docker
61+
through the command line:
62+
63+
```console
64+
foo@bar:~$ docker pull karinardz/local-web-server
65+
```
66+
67+
Once you pull the image you should be able to see this in
68+
your Docker list of images.
69+
70+
![Docker Desktop application showing karinardz/local-web-server image has been downloaded](fig/imagesweb-server.png){alt='Local local-web-server.'}
71+
72+
73+
To run the container, click on the *Play* button, and specify the following
74+
Optional Settings before clickin on *Run* (see image below):
75+
76+
- Container name: my-local-webserver
77+
- Ports: 80
78+
- Volumes: select the folder where you created an HTML page
79+
- Container path: /var/www/html
80+
81+
82+
![Docker Desktop 'Run a new container' interface to input parameters](fig/dockervar.png){alt="variables web server docker"}
83+
84+
Finally, open on the browser the URL: [http://localhost:80](http://localhost:80)
85+
86+
![Browser showing the index.html page on the local web server](fig/webseverhtml.png){alt="local web server created by Docker"}
87+
88+
89+
::::::::::::::::::::::::::::::::::::: challenge
90+
91+
## Challenge: Add a new page
92+
93+
Create another HTML page in your folder, copy-pasting the same code.
94+
You can add some more text or other elements.
95+
96+
See: [https://www.w3schools.com/html/html_elements.asp](https://www.w3schools.com/html/html_elements.asp)
97+
98+
Name this new file: *page1.html*
99+
100+
Link the new page from the main *index.html* page.
101+
102+
:::::::::::::::::::::::: solution
103+
104+
105+
From the main file, you can link to the new page by adding:
106+
107+
```html
108+
109+
<a href="page1.html">Access more information</a>
110+
111+
```
112+
113+
114+
:::::::::::::::::::::::::::::::::
115+
116+
::::::::::::::::::::::::::::::::::::: challenge
117+
118+
## Challenge: Add a new image
119+
120+
Copy an image into your same folder.
121+
122+
Link the image from the main *index.html* page.
123+
124+
:::::::::::::::::::::::: solution
125+
126+
127+
From the main file, you can link to the new page by adding:
128+
129+
```html
130+
131+
<a href="myimage.png">This is my new image</a>
132+
133+
```
134+
135+
136+
:::::::::::::::::::::::::::::::::
137+
138+
::::::::::::::::::::::::::::::::::::::::::::::::
139+
140+
::::::::::::::::::::::::::::::::::::::::::::::::
141+
30142

31143

32144
## More information

0 commit comments

Comments
 (0)