Developing a WebSite
About Me
My name is Mohammad Al-Matori - Married and a father - Can play amost any sport or video game - Hold bachelor Degree of Computer Engineering - Work in Kuwait Gulf Oil Company for the last eight years in IT field. My work environment includes being introduced to a new technology as Information Technology Field changes on high frequent basis. Therefore, I believe I will share a similar experience in FAB LAB. Looking forward to this course.
My Final Project
The Idea of the project is to develop a device that helps peolpe carry their bags to higher floors. Elderly poeple and physical weak whom live in 2nd and upword floors feel difficlulties in carrying thier bags. Here come left basket, it carryout your bags right to your window. all you have to do is send your stuff to your floor.
Introduction
In this section i will explain some definitions used in the developing web pages.
HTML:
HTML (Hypertext Markup Language) is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page. The markup tells the Web browser how to display a Web page's words and images for the viewer. Each individual markup code is referred to as an element but many people also refer to it as a tag. Some elements come in pairs that indicate when some display effect is to begin and when it is to end.
CSS:
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language. CSS is a technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
CSS is designed primarily to enable the separation of presentation and content, including aspects such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
Developing a WebSite
I have been introduced with my first task in this program "develop your own website". I do have background knowledge of programming in addition to a gained experience in analyzing the code behavior.But, this is the first time I make a web page. I looked into using sublime text 3 application from Youtube.com in addition to online Forums. I learned that a web page consist of Index code contains paragraph , images, titles etc..., CSS that have styles and Java for special effects.
Sample of the learning experience:
1) Inspecting the code of a website.Writing the paragraph between.
2) Inserting/changing image.
3) Adding link to another page.
4) Adjusting layouts.
5) Writing the paragraph between.
I surfed the internet for free website templates to serve the following needs:
1) Portfolio layout.
2) final project layout.
3) weekly progress field.
4) informative fields.
5) additional motivation fields.
After finding the appropriate website and downloading the source code. I started modifying the code. at the begging I started changing the code details and monitoring the changes. later on gradually with the help of the instructor I grasped a general understating of the code utilizing the inspection feature. I customized the website based on the needs mentioned above.
Some of the commands samples I learned is how to change the color & Font size of a text, how to start a paragraph, How to reference a link or attachment, how to center text or attachment..etc.
More in Developing a Page
There are many ways to generate the html page. one way is to use convert the word files to html format. another way is to use a free website to convert word to html. the problem with the last option is that the result code is much more of a spaghetti which modifying or enhancing the content would be a real hassle.
What is GIT:
Git is a version control system (VCS) for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for software development,but it can be used to keep track of changes in any files. Two main service providers for GIT are GitHub and GitLab, both are web-based Git repositories. A git repository is a central place where developers store, share, test and collaborate on web projects. GitHub and GitLab shares almost the same features of issue tracking and project management with some key differences such as assigning the roles of a work group and subscription fees. GitHub might seems a lot expensive compared to GitLab, yet GitHub positioned itself among its community of developers. And its popularity is mainly driven by the highly active GitHub community. So, to find a like-minded community of developers, chances are high that GitHub is the better place to be.
Impleminting GIT and SSH:
I have started by creating new account in GitLab "http://git.fabacademy.org" and by that I am joining "fablabkuwait". Then I started the process of installing Git on my local Laptop.
First process is by updating the version and packages on my laptop "sudo apt update" then install Git "sudo apt install git". Next step is to generate SSH keys by typing "ssh-keygen -t rsa -b 4096 -C "my email: mmatori@kgoc.com". I kept the SSH key in its default location. then I was required to enter and confirm the password.
After creating the SSH key, I checked the availability of the SSH Agent "eval "$(ssh-agent -s)"" then add the key to the SSH agent "ssh-add ~/.ssh/ id_rsa". then I connected my laptop with GitLab using my username and email account as follows "git config --global user.name "mmatori"" and "git config --global user.email "mmatori@kgoc.com"".
Next procedure is to add my generated SSH public key to GitLab account. First of all I get the Key data "sudo gedit ~/.ssh/ id_rsa.pub" and copy the content data, then access my GitLab account - Profile Settings → SSH Keys and paste the Key data under "KEY" and ADD a Key.
Final step is to clone the repository from fablabkuwait to my local laptop "git clone git@git.fabacademy.org:fabacademy2017/fablabkuwait.git".
Upload to Archive
To upload our code, images and attachments to fabacademy, we should type the following from terminal:
git pull | Download all modifications on fablabkuwait Folder.
git add --all | Add all the files to fablabkuwait Folder.
git commit -m "comment" | Save the changes in addition to the comments.
git push | push the changes to the server.