2. Project Management¶
This week I discover Git and the GitLab environment. GitLab is used by the FabAcademy as a system for many purposes. We communicate with the issue system. The website is installed and maintain by each student with different kinds of systems: Raw html, Markdown interpreted by Mkdocs or Jekyl… The Git system offers several ways to work. It enables to work with different users on the same project. It keeps tracks of who is doing what and a control version system.
I tried GitLabs WebIDE, it’s an easy wysiwyg system. But that’s not the goal of this week…
I choose to keep the MkDocs system to this website. I edit the text files with the Sublime text editor .
I also had to create the ssh key on GitLab and copy it to Git. Then I was able to make a local copy of the website.
Picture Compression¶
I’m an old fan of Irfanview software. I use it to resize and compress manually my pictures and screenshots.
I add some compressed pictures.
To download the Irfanview software : https://www.irfanview.com/64bit.htm
To download the many plugins available : https://www.irfanview.com/plugins.htm . The plugins allow you to open pictures and videos in many different formats.
During the installation you can select the file format you want to associate with the software, that way when you double click it open directly in that software.
They are many keyboard shortcuts, the most useful are the arrow key, the + and - to zoom.
For the fabacademy, I use a lot the “ctrl+r” to resize the pictures
Then the save for web plugin.
That open a new window where you can see the actual result of the compression parameter.
In Jpeg mode, you can slide the Quality parameter and see the size of the file and play with all the parameters.
Personal point of view¶
As I have been working in the Cinema industry for several years, I’m opposed to the “informatician” way of launching a bash scripted compression of a whole folder containing different pictures without checking the actual quality of each picture.
I have the same logic for sound and videos. Lossy compression is not just a mathematical operation, it modifies the perception.
Git Installation and First Configuration¶
I had help from Madjid to install Git.
I had to add my email address and name with the right command.
git config --global user.name "Luc Hanneuse" git config --global user.email "my@ema.il"
I also had to create the ssh key on GitLab and copy it to Git.
Then I was able to make a local copy of the website.
git clone https://gitlab.fabcloud.org/academany/fabacademy/2019/labs/sorbonne/students/hanneuse-luc
I scan, changed state, commit and push several times to get used with the markdown system.
git status git pull git add . git commit -m "some description" git push
Markdown¶
The markdown structure uses several commands
For headers
# H1 ## H2 ### H3 #### H4
For the links
[Sublime text editor](https://www.sublimetext.com/)
For Pictures
For Youtube videos
<iframe width="640" height="480" src="https://www.youtube.com/embed/KadNyHPxmt0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
I’ve problems with the lists, it does not show a correct result
⋅⋅*
A useful link for all the Markdown commands
Comments¶
I’ve a problem as I’m using 3 different keyboard layout, Belgian, German and French. I’m switching from one computer to another and play with up to 5 different computers in the week.
I had trouble, I’ve not yet figured out what I did.
Website Opinion¶
I had the Internet since 1994. I’ve designed many websites.
I built my first one in 1995. At that time, I had to write raw html file in a text file editor. I had to scan pictures with this kind of hand scanner. It was tricky and slow.
From 1994 till 2019, many things had evolved.
I had spent a lot of time learning Flash to be able to put sound, videos and animations. Then it was not compatible anymore. I had even used RealAudio compression in 1996.
I had used CMS systems, raw html, I paid for well-designed CSS template …
You can see one of my latest website on : http://www.biobobar.eu/
It uses HTML4 , CSS and many JavaScript. Before building that website, I know exactly the structure and the whole content. That’s not the case of my FabAcademy website.
Website is a difficult task. They are many trends. After many years, I decide several years ago to modify my personal website to an extreme choice http://www.utopia-sound.com/ . I can’t follow the trends, it’s a waste of time.
As some pages were referenced, I decide to put a back door : http://www.utopia-sound.com/index2.html . I had page references on old forum, wikipedia… And I want to maintain the links.
“Internet” as evolved and nowadays The way I surf on the internet is part of History. People don’t navigate on websites anymore and I’m talking about the 80/90 % of people.
For the FabAcademy, I want to focus on the content.
I decide to use the MkDocs as described above. It’s handy for this kind of website : I document week by week and I’m not certain of all the content I will put on it.
Website schematic¶
HTML¶
Traditionaly website use only an html file. It’s text with tags :
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
CSS¶
You could encode directly some style or form like the color of the text and many things. But standardisation has come and it’s now common to use another file CSS to apply some aesthetic design rules.
The CSS file will modify the way the html file is displayed.
You will find many examples and explanations on https://www.w3schools.com/w3css/w3css_intro.asp
JavaScript¶
JavaScript is now and again, more and more in the trend.
It enables to run some code on your computer. Some other systems enable to run code on the server side.
It can modify the content of the webpage or the way it is displayed.
Websites are more and more complex and can have really high level of interaction and be considered like a real software.
Mods http://mods.cba.mit.edu/ is a good example.
Some good JavaScript tutorials : https://www.w3schools.com/js/DEFAULT.asp
Like
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>