These instructions help you work on your play web site at home. The idea is that you will add some content (images and video or audio) to the play web site to enhance it and make it more compelling.
If you have a MAC at home then you should be able to install as per the following instructions.
Note: Even if you have already grabbed a copy of Atom previously I still recommend that you get a fresh updated copy as in these instructions.
You will only need the application called Atom and to help you get the correct settings I am providing you with a distribution package as a zip
file. This will create an atom
folder which you need to place inside your Home
folder.
From the Finder use Go
to find your Home folder. Read the readme.md
file that comes inside this zip file.
Note: If you use Safari as your browser then the zip file will unpack into your downloads folder. Now take the following steps:
Go > Home
) create a new folder and name it Applications
(note the capital A).Atom.app
into this Applications folder.for_home_folder.zip
file into the home folder.atom
(but you won’t see it).You can view hidden files by using
SHIFT-CMD full-stop
on the keyboard.
Note: I have created a screencast on YouTube that goes through the process described above.
If you have a PC at home running Microsoft Windows, you can install Atom from the Atom web site for free.
Here are the instructions for you.
To make this easier for you I have a settings file available here: www.publisha.org/resources/forwindows/atom.zip
Once you have downloaded the configuration file from the link above you can then go to the Atom web site and download the application.
How to install Atom on a PC and use for your GitHub site
Go to https://atom.io and install atom for your PC
If you have successfully dowloaded the configuration file above, you should see the toolbar along the bottom of the Atom window. If not, you may* install the packages yourself. Here are the instructions for doing that:
Locate the Packages
menu and scroll down to Settings View > Install packages/themes
In the Install box for Packages you need to find the following and install them one at a time:
Please note: The packages added above are only to help write markdown. If you are not using Atom to write blog posts then this will not be needed.
Close Atom
Leave Atom for the moment, now you need to install git from here:
https://git-scm.com/download/win
You can choose the 64bit version if you have a recent PC otherwise choose the 32bit version but NOT the portable version.
Just go through the setup and choose the default settings as it goes through.
Then it will automatically run something called git-bash
You then need to type this first with your own email:
git config --global user.email “9999999@brookes.ac.uk”
With the email you used on GitHub
git config --global user.name “Your Name”
This would be the username on GitHub
Now you should have Atom installed on your PC and we can now follow the instructions for both MAC and PC users.
Go to Github.com and sign in with your credentials.
Select the play repository and locate the button labelled Clone or download
. Once you click this, you need to copy the URL (the button to the right of the URL field will copy this for you).
If you have a MAC you will probably need to install the shell commands.
If you have installed as per instructions you should see a set of icons at the bottom of the window. The icon at the far right end looks like this:
Click this and a window appears. Paste into the top box.
If you have a PC you may not have this icon so you will need to:
Locate Packages > Command palette > Toggle
You now can type into the box GitHub:Clone
Paste into here the link above and Clone onto your PC.
Note: I have created a screencast on YouTube that goes through the process described above.
Once you have everything running on your computer at home, you should be able to take the next steps to fulfil the assignment brief which is to:
You can use the same images that you previously added to your re-flowable eBook (or you can source new or different ones). To get the images used before you can grab them from your assets in the InDesign project that should have been kept on Google drive. If you cannot get access to those files, then you can unpack the ePub file that you submitted and extract the images from there.
An ePub is actually a compressed ZIP file by another name, so there are various ways to unpack:
Get this application (eCanCrusher) from here:
Or just rename the ePub file by editing .epub
to .zip
then use an extractor program. This will already be available on the MAC and on the PC you can download from here: https://www.winzip.com/
Within your Atom project panel you should see the images
folder. You need to transfer the images that you intend to use into this folder.
Once you have located a position within the long HTML of the play, you then need to add the following markup (changing the filename and alt tag accordingly):
1
<img src="images/forestscene.jpg" alt="Picture of a forest with tall trees" />
You will need this at least 12 times choosing appropriate locations.
Please Note: The images will need to be
JPG
orPNG
- not Photoshop files.
Note: I have created a screencast on YouTube that goes through the process described above.
Once you have added the HTML markup to the page for the play, you can now focus on modifying the CSS to take control of the way the images are displayed. Locate the local copy of the HTML file for the play and open this in your browser.
To be certain that you are editing the correct CSS file look in the head section of your play HTML to see where this file is located. Here is mine:
1
2
3
4
5
<head>
<meta charset="utf-8" />
<title>A Midsummer Night's Dream</title>
<link href="css/play.css" rel="stylesheet" type="text/css" />
</head>
You should find a reference to the IMG
tag within you existing CSS file. It may look like this:
1
2
3
img {
width:100%;
}
When you see these newly added images in the browser for your play, you may be happy as they are, but there are some things you may wish to consider in the way the images combine with the text. Here are some examples:
The images are too tall.
If you have some images that are in portrait mode (taller than wide) then, have a width of 100% may make the images too tall. You can resolve this by changing the width to less than 100%, however you may want to differentiate between wide and tall images by adding a class name to the tall images like this:
1
<img class="portrait" src="images/athens.jpg" alt="Map of Athens" />
Then in the CSS you can have:
1
2
3
4
5
img.portrait {
width:60%;
display:block;
margin:12px auto;
}
This will make those images only 60% wide and centred.
Look at the following YouTube video for other examples.
Although you may not have finished your work on this, it may be wise to push your changes up to GitHub.
In Atom, you need to invoke the GIT pane on the right by clicking Git. This will probably have a number in a bracket Git(2)
Here is an annotated image of the Atom screen:
Remember to select Stage All
and then put a message in the Commit message
box. Then you can Push
the changes.
Here is a YouTube screencast that demonstrate this.
In the next document we look at adding multimedia and some other ways to enhance the viewing of images.
Filed under: HTML and CSS, Multi-Platform Publishing, GitHub
This page last edited on: 2020-04-20 14:44