Assignment:
This week I have to develop my personal website and draw a rhough sketch of final project
Idea 1 ----->SMART GUIDE
First of all I have an idea of making a Smart Guide .A Smart Guide is device capable of moving in a particular path , identify the devices to be explained and it will give a breif expalnation about the device in the FABLAB to the visitor. Smart Guide has a computer with imageprocessing capability inorder to identify devices to be explained,a camera,speaker,sensors for line following, motor driving circuits.
Idea 2 ----->Ultimaker Filament Measuring Instrument
My first idea is to make a smart guide ,but considering the complexity involved I changed my idea .U-FMI stands for Ultimaker filament measuring instrument. U-FMI consists of a rotary encoder unit connected to microcontroller which measures the length of PLA used for 3D-printing .The process used is simple,the moving PLA rotates the rotary encoder and the rotation is converted back to linear scale using the microcontroller.The value is displayed in LCD display.
The draft sketch of my final project is given above.It consists of microcontroller,LCD display, Rotary encoder and switches.
I am new to linux ,for installing linux we can follow the link here.
usually we need some linux commandcommon
to deal with linux.Our instructer Vishnu Easwaran provided a link
about linux for further application.
The Linux open source operating system, or Linux OS, is a freely distributable, cross-platform operating system based on Unix that can be installed on PCs,
laptops, netbooks, mobile and tablet devices, video game consoles, servers, supercomputers and more.
After serching in internet I got a breif idea of what is the importance of linux.Almost all versions ofLinux operating system is able to manage hardware resources,
launches and handles applications, and provides some form of user interface.Linux has been used for many
areas of computing.
Linux as we all know is a popular operating system for web servers , networking,
scientific computing , running databases, desktop/endpoint computing and running mobile devices .
For making a website I thought of using basic html.The basic idea of html was obtained from w3schools.com which has an online editer to try our code one by one.Page source of webpages were analized in order to get a basic idea of the flow of html coding. html is used to give the structure and content of the web page where as CSS is giving the style to the structure.
The above figure describes how I started studying html from w3schools.com .There is an option "try it yourself" where we can check each and any commands in html.
Now it is time to have a breif description of some of the HTML code used by me in my documentation. I am using documentation available in w3schools.com for the detailed explaination.
HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language It describes the structure of Web pages using markup HTML elements represents the building blocks of HTML pages HTML elements are represented by tags which label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page
While writing html code the commands such as html,/html,body,/body,div,/div,h1,/h1,
etc should be written inside < >
,in my explanation I am not including <> with each commands. All HTML documents must start with a document type declaration written !DOCTYPE html
.
The HTML document begins with html
command and ends with /html
command.
The visible part of the HTML document is between body and /body .
![]() |
![]() |
---|
HTML headings are defined with the h1
to h6
tags.
where h1
defines the most important heading and h6
defines the least important heading. From the below figure it is clear that as we go from h1
to h6
size of the leters used in the heading decreases
![]() |
![]() |
---|
HTML paragraphs are defined with the p
tag and similarly html links are defined with a
tag.As discussed previously it is clear from the below figure that we need to include html,/html,body,/body
with every html code.
![]() |
![]() |
---|
Thehref
attribute specifies the URL of the page the link goes to.
If the href attribute is not present, the a
tag is not a hyperlink.
![]() |
![]() |
---|
The HTML class
attribute makes it possible to define equal styles for elements with the same class name.
Here we have three div
elements that point to the same class name ren
.The div
tag defines a division or a section in an HTML document.
The div tag is used to group block-elements to format them with CSS.
![]() |
![]() |
---|
The screenshot below shows my web page.
My personal details can be obtained from here
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is completely free to download and use!
Bootstrap is a free front-end framework for faster and easier web development.Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.Bootstrap also gives you the ability to easily create responsive designs.Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
The HTML lang
attribute can be used to declare the language of a Web page or a portion of a Web page,it is used in order to to assist search engines and browsers.
The head
element is a container for metadata (data about data) and is placed between the html
tag and the body
tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, links, scripts, and other meta information
.
The following tags describe metadata: title, style, meta, link, script, and base.So meta gives additional information about the page.
The above figure show how I have done with my first bootstrap frame work.A collection of full, multi-page website themes and templates built with Bootstrap are available for download from internet.I have used such a bootstrap theam
I used atom as my text editor.In order to install Atom ,I used following command in terminal
sudo add-apt-repository ppa:webupd8team/atom
sudo apt update; sudo apt install atom
Actually git is a project management system, used to collaborate between a team over internet.The work done by us will be safe in the repository in the server.But ,be careful dealing git when we want to acess git first we have to git pull then only we have git push . Our instructer YADU SHARON, provided the file howtogit,which describes in detail how to Create an account in git lab, Install git,Generate ssh keys,Add SSH agent,Add global username and global email id,Add your public key to gitlab account and Clone the repository.
-->after completing the steps in the above figure
1)Copy the entire thing and close the gedit
2)Open the gitlab account (git.fabacademy.org)
3)Click on Profile Settings -SSH Keys ,Paste the content under -Key, Give a title to identify which PC has the above Key and Click on Add key
4)make sure that current location is in the folder named student Id eg 162,clone the repo using the command
git clone git@git.fabacademy.org:fabacademy2017/fablabtrivandrum.git
whenever we want to use git we have to do the below commands in order
1)git status
2)git add ----(eg 1)git add index.html,2)git add week1/)
3)git commit -m "text message"
4)git pull
5)git push
note:when deleting a file from the folder also we have to git add deleted_filename,otherwise it will not be reflected,i came across this problem during my work.
step by step procedure which i done is given below
what I understand about Git repository is that if a group of people residing in different contries want to work on a common project,it will be better to use git repository,so that if any updation is happening it will be seen by all.
This week I have created my git repository, I think from next week onwards I have to upload the files to the git repository which I created,so that it will be hosted in web. when ever we have to update ,the procedure to be followed is first we have to do git pull then git status after that git add . and then git commit -m"my updation" atlast git push. It is simple but we have to be careful enough to do the procedure in order .