The concept of version control is completely new to me. I have used Google drive for my day to day uses and for certain small project, but a version control of this magnitude and sophistication is new. To understand the basic concept of git I went through this tutorial from:
This Hello word tutorial explains the basic process on how to create a Repository, what is a branch how to make a commit etc. This gave me a basic idea of git. Further on going through: Understanding the GitHub flow gave me a clearer picture of how the entire system functions. So this my understanding. Git basically is a management system where all the data for the project is uploaded and shared with multiple users. It creates a backup of all the files and can be restored when necessary. When a change needs to be made, a branch can be taken from the master file, so the modifications do not affect the present condition of the project.The uploaded files can be viewed and modified by multiple users. The changes do not take place in the main files until approved. The changes made, are documented and can be recalled when necessary.
The Following are the steps that are to be followed is creating a git repository and to sync it with your computer.
1. Account in Gitlab
- Open your account in https://gitlab.fabcloud.org/
- Go to repository and create new file call Index.html
- Create another .yml file by choosing the .yml template and HTML
-These files will be displayed in the repository.
2. SSH Key Generation
SSH (Secure Socket Shell), is a network protocol that provides administrators with a secure way to access a remote computer. This step is to link your computer to the server.
- Generate SSH key by opening up Git Bash and typing:
ssh-keygen -t rsa -C "your.email@example.com"
cat ~/.ssh/id_rsa.pub
-Then type in:
-This would generate a key. Copy the key and paste it into the profile.
-Now the Git link needs to be linked to the system. Copy the link
-The SSH from the profile needs to be copied and pasted in the system variables which I sunder the environmental variables in advanced system settings.
3. Cloning the repository
- In Git Bash type:
git clone ‘key’
-Now the computer and the server is synced. A copy of the files in the server is created in the computer in the specified folder.
-To locate the folder use:
cd ‘the drive name’
Ls to list out the items in the folder
4.Syncing files
These are the basic commands to add, commit and push files:
Git pull
Git status
(to get files from the repository)
(to see the files and changes if made any)
Git add --all
(to add files to the index)
Git commit -m “change message”
(to commit changes if made)
Git push
(to upload the modified files to the repository)
Website Creation
The whole concept of web design is new to me as I have never done coding of any sorts before. The first lecture on web design and the structure was a little overwhelming as the concept of HTML, JAVA etc was completely new. I have used Photoshop extensively for my design works and hence thought it would be best to use Dreamweaver. However, I heard from my colleagues here that Adobe Muse is much simpler to use than Dreamweaver.
Adobe Muse is a website builder that allows designers to create fixed, fluid, and adaptive websites without having to write any code. Muse generates static websites giving users the freedom to host their sites with any hosting provider. Users can add more advanced functionality such as blogging and e Commerce to their website with plugins created by third-party developers. This is muse official site
I started watching these tutorials on Youtube to learn muse.
This channel guides through most of the basic topics on using muse. And this channel helps to make the site for interactive
I didn't want to go with a templated design, hence I started sketching out how I wanted my site to look. Once I had a basic idea I started with the application. I created a new file with the following parameters.
Home Page Creation
I decided to go with a dark theme but didn't want that to continue throughout. So I started with the first page. I wanted to make it slightly interactive and keep it as minimal as possible. The main intent is to convey the visitor what this site is all about. As I said the project pages I inverted the color but again kept it minimal.
Project Index
I made a page an index page that contains all the weekly projects. The visitor can navigate to any week from this index. This page is then subdivided into the various week projects.
Other Pages
The rest of the pages have a similar template with the necessary information on them. A complete page is dedicated to the final project. All of these pages can be navigated to by using the main menu.
Muse has a wide variety of resources Online that can be used to make the website interesting. There are numerous widgets and templates that are free and here are a few sites that I used in building my site.
The greatest difficulty I found working in muse is that the alignment of text and objects keep getting displaced when viewed in different monitors of varying screen sizes. Also the shortcuts and functionality of certain tool types do not match that of photoshop. But in general Muse was easy to use, and I have explored only the basic functions of muse and a lot more is left unexplored.
Exporting HTML
Once the creation of the site with the relevant data was done the HTML could be exported and pushed to the Git repository.
The command is available in the file menu - Export as HTML. A dialogue box appears asking for the location to be exported to.
The exported file must be copied to the Git folder on the computer and then pushed to the server.
Update
As I had mentioned earlier the difficulty I faced in creating this site is the displacement of the text while the screen size changes. The same was commented on by my regional instructor Ohad. He had asked me to rectify as it is a common problem in Muse. I went through some tutorials on youtube to find a solution for the same. The solution was to add breakpoints at certain sizes where the design gets a little messy. The layout then needs to be organized as per the new breakpoint. Listed below are the youtube links for understanding this.
As shown in the picture above, I added break points at 1000 and 768. So as the screen width reduces it adjusts itself to the next layout.
A commonly asked question was the home page animation. Though I have used a readily available widget, I did some research on how that could be made. The below link has basic introduction and tutorials on how interactive graphics can be made.
As per my global evaluators - Epifanio comment I had to convert all my gif images to mp4 as gif is not a very efficient format, the quality of the output is low and it occupies a lot of space. This resulted in my website size to bulk up to about 286mb of which 112mb were just gif images. I had used gif images as means of interactive and interesting web design but unfortunately it occupied a lot of space.
My evaluator introduced a new tool to convert gifs to mp4s.
I am quite blown away by this tool as it was so easy to use and my files were converted to few kbs. There are also lot of other options other than conversion, like to resize, crop etc. The software is online and is free to use.
After all the conversion to upload the videos into muse I used the widget from the following site.
As I said earlier what was 286mb was reduced to 160mb. Thats a reduction of almost 100mb. =D
Conclusion:
Why Muse?
I started using muse because I didn't know coding and the UI were similar to Photoshop. Muse was really easy to use but then there are certain features when it comes to responsive design that is sometimes confusing. However, there are a lot of tutorials on youtube to resolve such issues though it does require some time and patients. I would definitely use Muse in the future as more features are being added and its really easy to use.
This week dealt with version control and creating a personal website. Various management functions such as synchronization, content management, video conferencing and cloud computing were explained to us during the lecture. All these are tools to share or express a project on a large scale. This week’s assignment is to create a personal website to document my learning process in fab academy and to upload it Git.
