Sunday, November 26, 2017

Github Pages - Day 15

Github Pages

Normally, we host websites for a particular amount. But Github helps to host webpages for free.

So, lets create the github page..


Create a new repository named username.github.io, where username is your username on GitHub.
If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

Then, you have to clone the repository to your computer

$ git clone https://github.com/username/username.github.io\

After clone the repository you have to go into the username.github.io in the terminal...

$ cd username.github.io

Then you have to create a file and save it in that folder.

Now,you have to push that file to the repository from your folder.

$ git add --all    or   $ git add *   or   $ git add .

$ git commit -m "Initial commit"

$ git push -u origin master

So, you have done it...

Now browse the site
https://username.github.io.

Friday, November 24, 2017

Uki2 - British Council

It was a great experience, studying @ British Council.They are conducting class for Uki students to improve their English skills.  A book to study English for Elementary Level was given at the first class.

I started to do some English tasks and questions by myself. The person who is teaching the lessons is a British man named Tim. He is very friendly with students. We asked many question and our life long doubts still we had in English.

Such as,

Some people can't understand 13 and 30 in words. So, that we have to say
13 as One Three
and
30 as Three zero.

Its means possess. Eg: Its nose
It's means >> It is

The following are Some nations and their nationality

 USA : American
Mexico :Mexican
Brazil-:Brazilian
Argentina: Argentinian
The UK : British
Germany: Genman
Poland : Polish
France : French
Japan: Japanese
Australia : Australian
Turkey : Turkish

Thursday, November 23, 2017

Template Arrangement, Carriers in IT & setting git Url - Day 14

Today we arrange this template... The codings were given to order them and show be like this. We did using our HTML, CSS , Bootstrap knowledge got in last 13 days..

This is the Github link of the coding for template
Carriers in IT

By Studying in IT we can get the following main professional works in ITcompany
  • Backend Engineer
  • Frontend Engineer
  • UI/UX Engineer
  • Tech-writer
  • Business Analysist
  • QA Engineer
 IT Careers in Sri Lanka
IT is a fastest growing field in the world. In Srilanka many foreign companies  and government itself take forward steps to grow the IT field in Sri Lanka.

ICT Services Offered in Sri Lanka

  • Business Intelligence
  • Business Solutions and MIS
  • CAD / CAM / CAE
  • Client-Server Architecture
  • Cloud Services
  • CRM
  • Customer Support (Email/Voice/Chat)
  • Data Mining & Processing
  • Database Solutions
  • e-Business Development
  • ERP Software
  • GPS Solutions
  • GUI Designing
  • Hardware Design
  • Healthcare Solutions
  • ICT Infrastructure & Services
  • ICT Outsourcing
  • Image Processing & Truncation
  • Internet Research and Content Management
  • Intranet and Extranet Application
  • IoT
  • IT Education & Training
  • Mobile Application Development
  • Multimedia
  • Networking
  • Office Automation
  • Payments Processor
  • Real-Time System
  • Remote IT Technical Support
  • Self-Service Solutions
  • Software Development
  • Software Engineering Services
  • Software Testing
  • Systems Integration
  • Virtual & Wireless Banking
  • Web Development
  • Web Marketing
  • Wireless & Mobility Solution
So, much of works in IT field of Sri Lanka.

Git Commands....

When we are going to install a github repository from Github
We have to use the following in Terminal

$ git clone URL_you_going_to_clone

after that you finished all your project... Then you have to push the new updated file to your repository. But the repository may changed to the account where you clone the file.

You can make sure whether the repository changed or not by using following command

$ git remote -v


So you have to change the remote origin to your account.

$ git remote set-url origin https://github.com/USERNAME/REPOSITORY.git

Then once again check the repository direction...

$ git remote -v

after that the following command will appear......

$ origin https://github.com/USERNAME/REPOSITORY.git (fetch) origin 
$ https://github.com/USERNAME/REPOSITORY.git (push)

That's all now, you can push your files in your repository.

Wednesday, November 22, 2017

Intro to Bootstrap & Creative Commons - Day 12

Introduction to Bootstrap & Creative Commons License

Bootstrap contains many HTML, CSS and JavaScript frameworks to do web development very fast. Its used to develop responsive website for both desktop and mobile.

Responsive Design means that adjust automatically for good looking website in all devices according to their height and width.

Bootstrap was developed by Mark Otto and Jacob Thornton in Twitter. In 2011 they published Bootstrap as open source project in Github.

Advantages of Bootstrap

Easy to use : The already wrote codings will help to build up a good looking site. Anybody with basic knowledge in HTML and CSS can do with Bootstrap.

Responsive Site: For both mobile and desktop we can build a responsive site.

Mobile-first approach : Nowadays usage of mobile devices usage arise to high level so building a mobile responsive site for users to access is become very important. So, Bootstrap 3 offers a great mobile responsive designs to developers.

Supports to Browsers: Browsers are the software which shoes webpages to users. Mostly all browsers support to Bootstrap design.

We can get Bootstrap in 2 ways..
  1. Download Bootstrap from getbootstrap.com
  2. Bootstrap from CDN (Content Delivery Network)
 Download Bootstrap
Bootstrap is available for Off line.  By downloading Bootstrap we can do our designs and host by ourself.

Bootstrap from CDN
If we don't want to download and host by ourself we can include it from CDN.
CDN support for Bootstrap's CSS and JAvascript. You have to include jQuery also.

E.g:
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Here, link tag is the only Bootstrap code.
Other 2 tags link the JavaScript.

Advantage of CDN : CDN will help to load the website very speed. To load website the nearer server of requested user's place will provide Bootstrap from it and load speedily.

Creative Common License
Its a type of copyright license  of an author right to share,use and build upon a work that they have created.
This has several type of license.

Attribution : This is kind of license offered by creator for user to copy, distribute and make derivate of his work but the user should mention the author's name.

Share-alike (SA): Licensees may distribute derivative works only under a license identical ("not more restrictive") to the license that governs the original work. Without share-alike, derivative works might be sub licensed with compatible but more restrictive license clauses.

Non-commercial: Users can copy, distribute, display and perform derivative only if it is a non-commercial work. No one sell it or buy it.

No Derivative Works : Users can copy, distribute and cannot perform any derivatives. He should keep all as original.

License Types..

Free to use globally without any restrictions.

Attribution, Non-commercial and No Derivatives.
Attribution, Non Commercial and Share alike
Attribution and Non-commercial
Attribution and No-derivatives
Attribution and Share alike
Attribution Only. ( Author's name)

Monday, November 20, 2017

Uki2 Class 11 - Div,Id and Class Discussion & CSS Exercise

Id Class and Div

In CSS Id, Class and Div different kind of attributes are found. When writing CSS
we denote # before a word is to indicate that is an ID
and . to indicate that it is class.

The div tag is used to divide up the page into sections, for organizational purposes and to help you style sections of the page differently. Class and ID are attributes that you can apply to different elements, including div elements, so you can select them with CSS to apply styles that you specify for that class or ID.
Use ID if there's only one element on your page that's going to be styled a certain way (there should only be one element corresponding to each ID that you use) and use class if you want to apply the same styles to multiple elements.

IDs - can only be used once within the page and help pinpoint a specific item,
IDs can be targeted using things like CSS or Javascript, and can be used
on any item you wish to target.

ID's are unique
Each element can have only one ID
Each page can have only one element with that ID

Class - can be used over and over to target parts of your page,
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.

We did an exercise to create a site with multiple HTML, CSS coding...


HTML Quiz

1)Who introduced HTML?
Tim Berners Lee

2) how to add paragraph color in HTML?
<p style="color:red">I am a paragraph</p>

3) How to add heading font size in html?
<h1 style="font-size:60px;">Heading 1</h1>

4) how to add horizontal rule in HTML?<hr>

5) Why use <br> tag in HTML?
Line break

6) Why use <pre> Tag in Html?

7) How to add body background color in HTML?
<body style="background-color:powderblue;">

8) how to add font in html?
<h1 style="font-family:verdana;">This is a heading</h1>

9) how to add text alignment in html?
<h1 style="text-align:center;">Centered Heading</h1>

11) Tags’ function?
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

12) how to write comment in html?
<!-- Write your comments here →→

13) why we use comments in html?
Developers easy to understand what they have written

14) <h1 style="border:2px solid Tomato;">Hello World</h1>
What is output?

Hello World

15) how to add link html?
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

16) why we use <th> tag in html?
Table Header - Used to write Table Headings

17) what is different between an order list and an unordered list?
Order list are in Numbers like 1,2,3 or Roman Letters or a,b,c letters..
Unorder list are some shapes like disc,circle and square.

18) how to write an order list in html?
<ol>
<li> List </li>
</ol>

19) how to write an unordered list in html?
<ul>
<li> List</li>
</ul>

20) why use <marquee> tag?
To move Text right and left or bottom to top.

21) how to add video in html ?
<video> tag
<embedded> tag

22) how to insert text box in html from?
  <input type="text" name="firstname"><br>

23) how to inser redio button in html from?
<input type="radio" name="gender" value="male" checked> Male<br>

24) how to add submit button in html from?
  <input type="submit" value="Submit">

25) <fieldset> <legend> why we use these tags?
To limit the form using lines

26) how to create drop-down list n html?
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

27) what is different for textbox and textarea?
Text area we can write so many characters,... but textbox has limited characters

28) how to write textarea in html?
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

29) how add password in html?
<input type="password" name="psw">

30) why use reset button and how write reset button?
  <input type="reset">

31) how to ADD checkbox in html?
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>

32)  What HTML Stands for?
Hyper Text Markup Language

33) How to define a link in HTML?
<a href="URL">Url Description </a>

34) How to define a image in HTML?
<img src="IMG URL">

35)  What are Block Elements? Give some examples?
Block elements which cannot be write in a tag. They have to be written in a new tag.
<pre>, <div>

36) Give some examples to Inline Elements?
<a>  <p> <h1>

37) What are the ways we use, to save HTML Documents?
  • .html
  • .hml

38) What is a web browser?
Web browser is a software used to browse web pages.

39) What is a tag?
An element between < and > symbols are Tags.
Eg: <b> , <p> , <h1>

40)  What is an element?
element is a text used inside a tag.

41) What CSS Stands for?
Cascading Style Sheet

42) The function of “pre” tag?
Pre tag will show  in the webpage as what is written on html code... With same spacing and shapes and design

43)How many heading tags are there?
h1, h2 , h3 , h4, h5, h6

Uki2 Class 10 + Git Commands

10th day @ Uki....

We did the continuity of Time Table coding and then practiced in Github to push our coding to Github site.

Github

Github is an online storage repository used by developers to push their coding/ programming source codes to edit it wherever or which device platform in this world. Its very useful to handle the source code. The following are the steps to push the files to online github repository in Ubuntu OS.

 1 Installing Git for Linux
We have to open the Terminal in Ubuntu and type the following..
sudo apt-get install git


2 Configuring GitHub
After the installation we have to configure our Github account to create an online repository in Github site.

 git config --global user.name "user_name"
git config --global user.email "email_id"

we have to enter our Github user name in user_name place and then type our e-mail address in the place of email_id.

3 Creating a local repository
Then we have to create a local folder that is repository in Online cloud storing folder which will be pushed to Github later.

git init

If the process is success we will receive 

Initialized empty Git repository in /home/akshay/html/.git/

Note: This command should be typed in the folder where your coding folders which are going to be pushed are saved.

4 Adding repository files to an index

Next, we have to add the files to the repository.

git add index.html

here index.html is a file's which is going to be pushed.
You can add whole files in the folder using 

 git add . or git add *

6 Committing changes made to the index
After we add files... we have to commit that the files to be uploaded are finalized and ready to push.

 git commit -m "some_message"

"some_message" is user's description. You have to replace it with your description.

7 Creating a repository on GitHub

 Notice that the name of the repository should be the same as the repository's on the local system. 

That is your folder's name and github's repository names should be the same.

To do this login to your account on https://github.com. Then click on the "plus(+)" symbol at the top right corner of the page and select "create new repository".  

Then you have to type the folder's name in the first form...

Then click  "create repository" button.

Once this is created, we can push the contents of the local repository onto the GitHub repository inside the profile.

Then type this command and replace the link with your repository URL

git remote add origin https://github.com/user_name/html.git


8 Pushing files in local repository to GitHub repository

The last step is to push the local repository files into the GitHub, using the following command:

git push -u origin master

Then you have to enter your user name of github and password...

After that your repository is created on Github...

9 To Clone an Existing Repository
If you want a working copy of your repository on another machine

git clone https://github.com/user_name/repo_name.git  

10 To pull changes from Github Repository
git pull

Uki2 Class 9 - Time Table Exercise

Hi, Today we designed our Uki timetable using HTML and Css...

Output of the coding is given below.

The HTML coding is below..

<!Doctype html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="table.css">
   { /* Linking External CSS file to HTML                                                                                                                           document */ }
 
 <title>
    Uki2 Time Table
  </title>

</head>

<body>
  
<div width="100%"> 


<table>           { Table Tag }


   <tr>                     {1 st Row }
    <th class="day">
Time Slot
</th>

    <th class="day">
Monday
</th>

    <th class="day">
Tuesday
</th>

    <th class="day">
Wednesday
</th>

    <th class="day">
Thursday
</th>

    <th class="day">
Friday
</th>

</tr>


<tr>                                {2nd Row }
    <td class="time">
9-9.30
</td>

    <td class="yoga">
Yoga and Meditation
</td>

    <td class="pcoach" rowspan="2">
Personal Coaching 9.15 to 11.15
</td>

    <td class="yoga"">
Yoga and Meditation
</td>

    <td class="yoga">
Yoga and Meditation
</td>

    <td class="pcoach" rowspan="2">
Personal Coaching 9.15 to 11.15
</td>
</tr>

<tr>                    [ 3 rd Row ]
    <td class="time">
9.30-10
</td>

    <td class="yoga">
Touchtyping and Blogging
</td>
    <td class="eng" rowspan="2" colspan="2">
English -BC Elementary
</td>

</tr>

<tr>                             [ 4 th Row ]
    <td rowspan=""  class="time">            
  10-12
</td>

    <td rowspan="" class="pro">
   Programming Theory
</td>

    <td rowspan="" class="yoga">
  Personal Coaching/Touchtyping and Blogging
</td> 


    <td rowspan="" class="yoga">

    Personal Coaching/Touchtyping and Blogging
</td>
</tr>

<tr>                 [ 5 th Row ]
    <td class="time">
12-1
</td>

     <td class="green" colspan="5" style="text-align:center">Lunch Break - Carrom, Badminton </td>
</tr>

<tr>               [6 th Row ]
    <td class="time">
1-2
</td>

    <td class="pro">
 Programming Practicals
</td>

    <td class="pro">
Programming Theory
</td>

    <td class="pro">
Programming Theory
</td>

    <td class="pro">
Programming Theory
</td>

    <td class="pro">
Programming Theory
</td>
</tr>


<tr>                             [ 7 th Row ]
    <td  class="time">
2-4
  </td>
  
    <td  class="pro">
Programming Practicals Project
  </td>
 
    <td  class="pro">
Programming Practicals Project
  </td>
  
    <td  class="pro">
Programming Practicals Project
  </td>
 
    <td  class="pro">
Programming Practicals Project
  </td>
 
    <td  class="pro">
Programming Practicals Project
  </td>
</tr>

<tr>           [ 8th Row ]
    <td class="time">4.15-5</td>
    <td class="green" style="text-align:center" colspan="5">Tea Break</td>
  </tr>

<tr>
    <td class="time">
    4.15-5
  </td>
     <td class="other">
Tech Talk
  </td>
    <td class="red">
Toastmasters Gavel Club
  </td>
    <td class="other">
Team Building
  </td>
    <td class="other">
Team outing / Tech Movie
  </td>
    <td class="red">
Toastmasters Gavel Club
  </td>
</tr>

</table>                    [ END OF Table Tag  ]


</div>

</body>
</html>



The CSS code for this is
Here are the css codes I have written to create class and declared it on HTML page above..

-----------------------------------------------------------------------------------------------------------------

table, td, th {
border: 1px solid black;                                  [ Creating class with border 1 px solid and in black                                                                                                                                         color.]
border-collapse: collapse;                               [ Border will joined as single line..]
}

th {
text-align: center;
}

td {
height: 25px;
vertical-align: center;
}

.yoga
{                                                                                 [ declaring class for Yoga ]
background-color:lightblue;
}

.pro
{
background-color: violet;
}

.eng{                                                                          [ declaring class for English class cell ]
background-color:orange;
}

.pcoach{
background-color:lightyellow;
}

.red{
background-color:red;
}

.other
{
background-color:tomato;
}

.day
{
background-color:blue;
}

.time{
background-color:yellow;
}

.green
{
background-color:green;
}

.........................................................................................................

Wednesday, November 15, 2017

Uki2 Class 8 - Programming

Today we learned about an Introduction to CSS and Git and created a Github account.

CSSCss is Cascading Style Sheet. Its used to decorates the HTML page. HTML is a skeleton of a webpage and Css is like as a dress for webpage. CSS describes how HTML look should be.
CSS defines all HTML attributes should behave in a webpage in a single format.

The CSS have following structure
 CSS can be inserted in HTML page by 3 methods
  1. Inline CSS : using style in HTML attribute
  2. Internal - using style tag in head section.
  3. External : using external CSS file
Inline CSS

<html>
    <body>
        <h1 style="color:blue;">This is a Blue Heading</h1>
    </body>
</html>

Alignments using Inline CSS
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Font Family & Font Size using Inline CSS

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Internal CSS

<html>
<head>
    <style>
        body {background-color: powderblue;}
        h1   {color: blue;}
        p    {color: red;}
    </style>
</head>
    <body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
</html>

External CSS

<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
                          here style.css refers the following...
Styles.css

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

Then we signed up Github and learned about Git.
Git is one of the platform for developers to store their source code, by pushing and cloning the code, they can access their code anytime anywhere.

The methods to push and clone the code were explained. Then we did a practical in it.
After that we played Kiliththattu game and had fun..

Parathan.

Tuesday, November 14, 2017

Uki2 Class 7 - Programming

Today we learned some other HTML Tags and HTML Forms and did a practical in Forms. Another joyful workshop was conducted by Jay Cousins.
 
He did brain storming games and entertained us. He gave some advices and also to laugh after taking a long breath.
Then HTML classes started..

Some tags that don't have end tag are
  1. <br> - Line break
  2. <img > - Image Input Tag
  3. <hr> - Horizontal Rule Tag
  4. <input> - Input in a Form Tag
HTML Blocks
The default value for most elements is blocks  or inline. They starts with new line and take full page.

Some Block level elements are
  • <ul> - Unordered List
  • <li> - List
  • <pre> - Predefined
  • <table> - Table
  • <p> - Paragraph
  • <hr> - Horizontal Rule
HTML Iframes
Iframes used to input a webpage into a webpage.

 <iframe src="http://www.uki.life" height="200" width="300"></iframe>

Here, Uki's site is displayed in a particular width and height box.
As this website is secured. So, it can't shown in Iframes.

HTML Forms
Forms are created in a website for registration purpose or to get details about the person.

 <form>
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
<input type="submit" value="Submit"><br>
</form>

Output: 
First name:

Last name:


Input Type has difference categories
  1. text
  2. radio
  3. checkbox
  4. reset
  5. submit
Radio types will show the options to be click in a round format.
checkbox will show thee options to be click in a square box and correct symbol will be used as its clicked.
We practiced to create Forms in a website using the above tags...
This is the output we got..
Then after tea break The selection / voting process to select the committee members of Uki Gavel Club and Fitness Club was done.
Roles and their duties and responsibilities were explained. 
Then voting was done. And the team members will be announce tomorrow.

Parathan.

Monday, November 13, 2017

Uki2 Class 6 - HTML Exercises

Today 6 th day at Uki. We did HTML exercises.

<tagname>Content goes here...</tagname>

We learned some tags in HTML
  1. Heading Tag
  • Heading tag has 6 different styles. h1to 6.
  • For an example

<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>
  • The font size of the headings will decrease gradually from h1 to h6.

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
2. Paragraph Tag
This will begin as <p> tag and end as </p> tag. 
Inside p tag we can customize the font using inline css.

<p style="color:red">I am a paragraph</p>

Output:  I am a paragraph


3.Create Links
<a href="URL"> This is a link </a>
In the URL we have to put the address of site we are going to browse when clicking "This  is a link" word.
4. Image Inserting
<img src="Url" width="20px" height="25px" alt="Image">
src represents source.
So, we have to put the file path of the Image in Url place..
width and height of the Image can be customized by user's comfortable. 
Alt is used when the Image is not seen in the page, the word in the alt attribution will show.

5.Preformatted Text
<pre> tag is used to show in the browser in the format how its typed in source code.

6.Line Break Tag
<br> tag is used to break the line by one line from where it has written lastly.

  • <b> - Bold text
  • <strong> - Important text ( Like as Bold )
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text
7.Comment Tag
Comment tag is used by developer to know what has typed in the code. It will not visible in Page.
<!--      -->

8.Creating Table
<table> - To create table
<tr> -  Table Row
<td> - Table Data
<th> - Table Header

9.Lists
List is categorized as 3 parts
  1. Ordered List - <ol>
  2. Un- Ordered List - <ul>
  3. List - <li>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Output: 
  • Coffee
  • Tea
  • Milk
inside <ul> tag there are three types to point out in list section...
They are..
  1. disc        -Sets the list item marker to a bullet (default)
  2. circle -Sets the list item marker to a circle
  3. square -Sets the list item marker to a square

<!DOCTYPE html>
<html>
<body>

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

Output:
    • Coffee
    • Tea
    • Milk
    Following is a screen-shot of a Page We did in the class...

    Thank You...

    Sunday, November 12, 2017

    Uki2 Class 5 - Web Development + Toast Master


    5th day @ Uki.. The class started at 9 a.m. Morning fitness exercise was interrupted by rain. Then Personal Skill Development class was conducted. After the lunch break Introduction to Web Development was educated.

    Web Page
    Web Page is a structured platform of medias such as Music, video, texts and scripts and style sheets in a proper way to browse using browsers. These are basically written in Hyper Text Markup
    Language(HTML).

    Web Browser

    Web browser is a kind of software used to explore, present, edit , write and to access the internet. 
    Followings are some examples for Web Browser

    Web Server
    A computer that hosts a website on the Internet is a Web Server. Usually, we save our own files and data in our personal computers. When, considering internet.. server act as a computer to store data online.
    Picture explanation of how Web Server Works
    When web pages are stored in Web Server then any internet users can access it.

    Website
    Collection of webpages in a connectivity of contents. It can be accessed by browsers. A virtual location on World Wide Web.

    How it Works...????
    Computers will easily understand Binary languages, but Human uses languages to communicate. So,URL of every websites are assigned to a certain IP address. These IP address are found from DNS Server.
    The following is the step How website is shown in Browsers...?? 
    When a user opens the browser and enters the URL (Uniform Resource Locator) the browser will ask the DNS (Domain Name System) server for the IP (Internet Protocol) address of the webpage.

    Now the IP address will be given to browser and then browser will request the website's server to access a copy of website.

     The server will allow it to use and sends Data packs of HTML streaming. The webpages will load some time according to the HTML structure and the requested website is shown.

    Some types of Protocols and their Uses
    • SMTP - Simple Mail Transfer Protocol - A protocol for e-mail messages on the Internet
    • DNS - Domain Name System - translates network address (such as IP addresses) into terms understood by humans (such as Domain Names) and vice-versa
    • HTTP - HyperText Transfer Protocol - An Internet-based protocol for sending and receiving webpages
    • DHCP - Dynamic Host Configuration Protocol - can automatically assign Internet addresses to computers and users
    • FTP - File Transfer Protocol - a protocol that is used to transfer and manipulate files on the Internet
    • IMAP - Internet Message Access Protocol - A protocol for e-mail messages on the Internet
    • IRC - Internet Relay Chat - a protocol used for Internet chat and other communications
    • POP3 - Post Office protocol Version 3 - a protocol used by e-mail clients to retrieve messages from remote servers
    Languages for Web development
    For 
    • Front design: HTML,CSS
    • Client side: JavaScript
    • Server side: PHP,Node.js,Ruby,Python
    • Database: SQL
    Why we need these Languages..?
    • Easy Syntax / Keywords : As these are easy to memorize Developers use 
    • Performance : Different languages have various speed of performance
    • User Design / User Experience : CSS like languages are used to decorate HTML pages
    What is HTML...??
    HTML ( Hyper Text Markup Language ) which is a basic web development language used to create a web page and web applications.
     This was introduced by Tim Berners Lee in early 1990's.

     It has several versions
    Version                        Year
    HTML                         1991
    HTML 2.0                      1995
    HTML 3.2                 1997
    HTML 4.01                1999
    XHTML                         2000
    HTML5                     2014

    There are so many editors available to do HTML practice and developments. Normally in Windows OS Notepad is used.

    Intro to Atom :  To do advanced development Atom software is used. Its an open source IDE (Integrated Development Environment ). Its a very easy IDE to develop HTML projects. It was developed by Github site,...

       HTML Sample

    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    </body>
    </html>

    When saving HTML files we have to save it as ".html" file extension.

    Output>>>>

    After tea break... We had our first Toast Master meeting..

    Toad Master is one of the public speaking event to increase the communication skill between the people. The meeting is conducted in a scheduled time. The meeting consist of speech, table topic, president speech, minutes reading and more interesting programs. 
    It is a great opportunity to improve the English skill...

    So, that all for today..

    ♥ Parathan..

    Friday, November 10, 2017

    Uki2 Class 5 - Personal Skill Development


    Today we learned some Personal Skills Development.
    Following are the lessons..

    Team
    1. People
    2. Common Goal
    3. Team collaboration / Team Spirit
    Nowadays the Teams are autonomous teams. They have a leader to tell an instruction and the team members will do by themselves. No any instructors / person to guide them.

    Team forming stages
    1. Forming
    2. Storming
    3. Norming
    4. Performing
    5. Adjourning- celebrating success / reform teams

    • Forming

    The formation of Team happens in this stage. Members, some are feel happy some feel anxiety. The colleagues get to know each others.

    • Storming

    Getting ideas from Team members. There may be conflicts will arise. 
    Some members will leave their team due to feeling of uncomfortable.

    • Norming

    The team members will become normalized from their anxiety.
    This causes by members in team start to resolve their differences, appreciate colleagues and respect the others.

    • Performing

    The team will start to perform in a proper and dedicated way to achieve / finish their project / to achieve the goal finally.

    • Adjourning

    This is the final stage that a project / achievement comes to an end. The team members will celebrate it.

    Team Gnomes 

    Commonly accepted behaviors in a company.
    Every one should obey it.  E.g: Dress Code

    Some people in team maybe embedded mind. Like always embedded in his work and concentrate in a particular work only.
    They must become as mix + mingle with team colleagues.

    Diversity of Teams

    Important uniqueness of a single person in a team is Diversity.
    Followings are some of the Diversities found in Teams
    1. Gender
    2.  Race
    3.  Cultural
    4. Age
    5.  Sexual orientation 
    6. Disabilities 

    Internal laws control & External laws control

    Internal laws control : The persuading factor will come from internally to do a work with full concentration.
    They don't need anyone to say something to do. All the victory and defeat will be in their account. They won't regret others for their suffering or happiness.

    External laws Control: 
    These persons need others appreciation or persuade them to do a work. If that work become failure they regret others.

    Homogeneous is one of the main factor .In current situation everyone should be adapted


    Introversion & Extroversion

    Introversion :
    These type of people

    • love to be lone 
    • good at technical vise
    •  Not much engaged in communication

    Extroversion:
    These kind of people are

    • very energetic 
    • mingle with all
    • Much communicative people
    Differences of Introversion and Extroversion

    Cultural Sensitivity : When we are in a team, many people from many countries work together. So, we must be very sensitive. Everyone's culture is best in their own vision. So, a team member should have to face all problems and be very careful when exposing his views.



    Empathy: Empathy is one of the main way to solve a problem. Everyone has some valid reason for their works. So, we have to think in their view and have to realize their problem and giving ideas to solve the problem.


    When working in international trading teams we see the following characters of those companies..
    • Standardization
    • Customization
    • Transnational

    Standardization : If a company is a global company its cultural characteristics are depend on the culture of country where it Head Quarters found. They have same characteristic rules in all branches around the world.

    Customization : This is one of the tricky way to introduce a new foreign brand to a country / town. The company will follow the country's traditions and cultures to promote its product.

    Transnational: This kind of companies are mostly found all over the world. Its a binding of both Standardization and Customization.  

    Action cause behavior behavior cause success

    So, that's all for the day.. in Personal Skill Development.
    It was a great experience to get to know about Teams,their characteristics, various mindset of members and so on....

    ♥ Parathan. 

    Wednesday, November 8, 2017

    Uki2 Class 3 - Programming

    Today is the third class @ Uki. Usually the class started by 9 a.m by doing exercise.

    Then touch typing  and blogging were done..
    After that an introduction to Linux and its commands were educated.
    After lunch the class is about pseudo code and flow chart.
    Following the tea break we played team building games and finished the class.

    So, here are the informations I learned from today's class.

    The Linux Commands & Pseudo code 

    Linux is one of the Free Operating System which offers all stuffs for free since starting of 90's. Mostly used server side Operating system and nearly 2.5% of Desktop users are using in their personal computers. Linux is the most reliable, secure and worry-free OS. 

    Worry-free means 
    • No license
    • No need to clean up the computer system system
    • Free from Virus / Malware attacks
    • Free Updates
    • Free Softwares
    • Free Server
    Linux is also distributed under an open source license. Open source follows the following key philosophies:
    • The freedom to run the program, for any purpose.
    • The freedom to study how the program works, and change it to make it do what you wish.
    • The freedom to redistribute copies so you can help your neighbor.
    • The freedom to distribute copies of your modified versions to others.
    The most popular Linux distributions are:
    • Ubuntu Linux
    • Linux Mint
    • Arch Linux
    • Deepin
    • Fedora
    • Debian
    • openSUSE.
    Terminal Commads On Ubuntu.. ( Similarly Command Line in Windows Products)

    Below are some basic and important Terminal commands to be in a user's mind to work properly in Ubuntu.

    1. cd : Changing directory (cd) is the main command that always be in use in terminal. It's one of the most Linux basic commands. Using this is easy. Just type the name of the folder you want to go in from your current directory.
                 Eg:-     /home $ cd Desktop                      /home/Desktop $

    2.mkdir :-  to create a new folder or sub folder. You can use mkdir command to do that. Just give your folder name after mkdir command in your terminal.


    3. ls (list)  :  The terminal will show all the files and folders of the directory that you're in.


    4. cat :  To view some of text or code from a script in the Terminal Window
                                         E.g:     $ cat parathan.html


    5.man : The man command is used to show what are the function of command we use. We can take all information about the command.( Manual )
                                                Eg:  $ man cd  
    - This will show all the function performed by cd command. (Change Directory)


    6.rmdir : Used to remove the directory. For example if you want to delete parathan folder from Desktop...
              E.g:   /home/Desktop $ rmdir Parathan


    7.touch : Used to create files in a directory. Its like, for creating a directory we use mkdir command... To create .txt .pdf .html .js files, we use this command.
    E.g: /home/Desktop $ touch Parathan.txt
    So here, a .txt extension file will be created....


    8. rm : Delete a file from a directory...
                              E.g: /home/Desktop $ rm parathan.txt
    So, here parathan.txt named text file will be deleted from the Desktop.


    9. locate : Used to search a file you don't know where you saved it in Linux OS.


    10. clear : clean the whole commands in Terminal

    11. cp    : Copy Files

    12.logout : Logs the current user off the system.

    13. pwd : Displays the path name for current directory

    14. who :  Display who is logged on.

    15.  passwd [name [password]]  : Change the password or allow (for the system administrator) to
    change any password.

    Introduction to Linux and Basic Commands (Video Tutorial)


    Pseudo code and Flowchart 

    Algorithm is a set of instruction in plain language statement to be executed to solve a problem. 

    Algorithm is usually transformed into pseudo code or program flowchart.
    Then the algorithm is tested in pseudo code or flowchart and after that it will be written in a specific programming language.

    Flowchart : One of the best method to illustrate a solution for a problem by graphical method using arrows and etc...  Flowchart method is used all over the world in different field to solve problems.

    Pseudo code : Pseudo code is for developers who can understand in their own language. The computers can't understand. It gives a brief explanation about how a program should be written.
                                               ./or./
    The following are definitions for Pseudo code from Internet

    1. Pseudo code is an artificial and informal language that helps programmers develop algorithms. Pseudocode is a "text-based" detail (algorithmic) design tool
    2. Pseudocode is a false code which consists of plain English statements, mathematical notations and keywords that are commonly found in high level languages.
    Pseudo Code Components
    1. Variables
    2. Input/Output
    3. Assignment
    4. Selection
    5. Repetition
    1.Variable : A variable has a name, and a value. When a variable is declared certain bytes of memory is allocated in computer memory. We can call those variables anytime.

    These are the rules while assigning name to a variable:

    1.  There is no space in a variable name
    2.  Variable name should not be a keyword of pseudocode
    3.  Variable name should be relevant.

    2.Input / Output : 
    Input : We use Input operation to ask value or name to start the program. The keyword we use to do Input operation

    • Input 
    • Read 
    • Enter 

    Output : We use out put operation to give the final result to user. The
    keyword we use for Output operation are..

    • Output
    • Write
    • Print


    3.Assignment : Assignment is the physical act of placing a value into a variable. Assignment can be shown using
    1. Assign 4 to y
    2. Set y equals to 4
    3. y=4
    4. Repetition : The program will repeat as per the given condition.

    5.Selection : The option choosing structure in pseudo code. It will choose the path according to a given condition.

    Types of Pseudo code...
    • Selection
    • Repetition
    • Sequence

    Some Real world 
    examples for
    • Selection
    1. Passing an exam
    2. Will rain today..??
    • Repetition
    1. Dig the soil for about 10 m depth
    2. Taking exam for particular times (Pass / Fail)
    • Sequence
    1. Switch on TV
    2. Making Tea
    Pseudo code for calculating area of Sphere..
    1. Begin
    2. Input value for radius
    3. Calculate are (4 * pi * radius*radius)
    4. Output Radius and Area
    5. End
    Flow chart has 5 components
    1. Basic Input/Output Symbol
    2. Basic Processing Symbol
    3. Decision Symbol
    4. Flow line Symbol
    5. Start/End Symbol
    That's all for the day...
    ♥ Parathan.

    Tuesday, November 7, 2017

    Uki2 Class 2 - Programming

    Today is my second day at Uki. Morning session was Personal Skills development which I wrote about it and my experience in the previous post.

    After lunch 1o' clock I started touch typing practice. After some time our director came and officially started Programming class. He divided the class into 4 groups.
    Then he started to explain us about Programming Fundamentals.


    The first question asked by him was "What is a Computer..?" Everyone had different definitions..

    Then he explained

    A computer is a programmable machine. This means it can execute a programmed list of instructions and respond to new instructions that it is given.

    He asked several questions
    1. What can the computers do?
    2. How do they do it?
    Then he detailed about the question and answers...

    1.Computers can do
    • Calculations
    • Data Storing
    • Sharing 
    • Gaming
    • Scanning
    2.Input>>Process>>Output is a basic function method of Computer.. In this way computers are doing their work.

    After that 4 groups are asked to do a presentation on below topics...
    •  What is a programming language?
    • Why are there so many programming languages?
    • What are the types of programming languages?
    Programming Language: 
    Programming Language is the set of instruction coded to execute a specific problem by computer itself.  

    ..//or.// 

    A programming language is a set of rules that provides a way of telling a computer what operations to perform.

    Programming Languages convert high level languages to machine language by 2 methods.
    1. Compiler
    2. Interpreter
    Compiler : Compiler is one of the tool used to convert High-level language to language that can understand by computer. This will translate the whole source code and then offer the code to computer to run. As this type, the time will be higher than interpreter, but performance wise this is better one.

    Interpreter : Similarly this tool used in the same way as Compiler. This will translate the source code by single single line. Execution and run of this process is comparatively low.

    Followings are comparison between Compiler & Interpreter

    Mother of Programming Language

    Ada Augusta Lovelace was the first programmer in the computer world.She was an English mathematician and writer. She worked with Charles Babbage. She got to know that computer's simple calculations and applications are work in algorithms.

    Reason for so many programming languages:  
    • User's need
    • Developing related
    • Jobs related problems to be solved
    Types of Programming Languages are
    1. Low-level language. E.g: Binary Language
    2. Middle-level Language. E.g: Assembly Language
    3. High-level Language. E.g: Python, C, C++, C#, Java.....
    Following are some topics discussed today..

    Computer Programming:Computer Programming is the process of developing and implementing various sets of instructions to enable a computer to do a certain task

    Programmers are the one who make a solution for a problem to be solved by computer. They write codes and execute to run.

    Algorithm is a series programming source codes of instruction to be performed by computer in a proper way.

    Language VS Programming Languages

    Languages are used to instruct Human.... Programming Languages are to instruct computers..
    and some points were further discussed.

    The For Web Development... The needed languages were introduced.
    They are...
    1.  HTML
    2. CSS
    3. Java Script
    4. Node.JS
    5. PHP
    6. Java
    7. C#
    8. Ruby
    9. Perl
    10. Python
    But, in Uki... Its a six month course.. So, we have to study the very important languages only..
    Such as..
    1. HTML
    2. CSS
    3. Java Script
    4. Node.JS
     What determines a “good” language..
    1. Syntax / Keywords used in a programming language : Easy syntax like Python are very easy to understand
    2. Performance.: Some languages Syntax are easy but their performance is poor.
    3. User Interface: This is one of the main issue. Some languages are easy syntax and good performance but don't give a good user interface.
    Then a presentation on above mentioned Web development languages were done by each team had each title..

    Important facts that should be followed when  presenting a presentation..
    1. should have proper backup of presentation in DVD or USB formats.
    2. Aware of the hardware we use
    3. Presentation Language
    4. Time Management
    So, with these instruction the class was finished... It was another experience for me in the Tech World... Hoping a lot from Uki..

    ♥ Uki..

    Parathan,. 

    Monday, November 6, 2017

    Uki2 Class 2- Personal Skills Development

    Today my second class at Uki. The class was started at 9 o' clock. The Personal Skills Development coaching class was started officially. First of all, all the students are gathered out and played a game of saying each others name.

    Then some questions related to skills development was asked and if they know the answer they should move forward one step...some questions are...
    • I know what my goal is..
    • After 5 years I know what am I
    • I will work under pressure
    • My gender is  not a barrier for me
    • My culture is not a barrier for me

    Organizations: Organization is a person or group of people intentionally organized to accomplish an overall, common goal or set of goals.
    Two types of organizations are there.
    1.  Hierarchical Organization ( An old version)
    2. Flat Organization (Modern Type)
    Structure of Hierarchy Organization

    Properties of Hierarchy Organizations are.. 
    1.  Authority is Obvious
    2.  Managers are Skilled in Specific Area
    3.  Clear Promotional Pathway
    4.  Departmental Loyalty
    Structure of Flat Organization 
    Properties of Flat Organization
    1. New voices from Employees
    2. Direct communication with Higher levels
     Entrepreneur :Entrepreneur is a person who take risks in business to earn profit with development.

     Intrapreneur: Intrapreneur is person who this innovative and helps the company to achieve its vision by contributing his talents...

    SWOT
    Swot is one of the word used in personally or company wise analyzing method.This type of simple analysis structure give you the guidance to look at both internal and external factors that will create or jeopardize our success

    S stands for Strength
    W- Stands for Weakness
    O-Stands for Opportunities
    T-Stands for Threads

    SMART
    SMART goal setting creates new path to attain goal in our life.
    They bring structure to attain the objects and finally to reach our goal..

    S stands for-Specific
    M stands for -Measurable
    A stands  for - Attainable
    R stands for- Realistic
    T stands for - Timely

    It was a great session I personally got a rough sketch to lead my carrier in future....