Mongo Database - Day 33

CURD operation is one of the main operation used in Database.

C -Create

U - Update

R - Read

D - D 

The basic syntax of update() method is as follows >db.COLLECTION_NAME.update(SELECTION_CRITERIA, UPDATED_DATA)
Following example will set the new title 'Parathan' of the documents whose title is 'Jaffna'.

>db.mycol.update({'title':'Jaffna'},{$set:{'title':'Parathan'}})

Mongo DB Database - Day 32

MongoDB is a cross-platform, document oriented
database that provides, high performance, high
availability, and easy scalability. MongoDB works on
concept of collection and document.

MongoDB - Advantages

• Schema less: MongoDB is a document database in which one
collection holds different documents. Number of fields, content
and size of the document can differ from one document to
another.
• Structure of a single object is clear.
• No complex joins.
• Deep query-ability. MongoDB supports dynamic queries on
documents using a document-based query language that's nearly
as powerful as SQL.
• Tuning.
• Ease of scale-out: MongoDB is easy to scale.
• Conversion/mapping of application objects to database objects
not needed.
• Uses internal memory for storing the (windowed) working set,
enabling faster access of data.

Why Use MongoDB?
• Document Oriented Storage: Data is stored in
the form of JSON style documents.
• Index on any attribute
• Replication and high availability
• Auto-sharding
• Rich queries
• Fast in-place updates
• Professional support by MongoDB

Where to Use MongoDB? :

• Big Data
• Content Management and Delivery
• Mobile and Social Infrastructure
• User Data Management
• Data Hub

To create Database
use database_name

To create Collection
db.createCollection("collection_name")

Insert Document Syntax
To insert a document into a Collection. We use
>db.COLLECTION_NAME.insert(document)

To insert multiple documents in a single query
>db.COLLECTION_NAME.insert([
{
document
},
{
document
},
{
document
}
])

Saas - Function & Operations - Day 29

 Functions in Sass allow for an easier way to style pages, work with colors, and iterate on DOM elements.

Mixins: Mixins are a powerful tool that allow you to keep your code DRY. Their ability to take in arguments, assign default values to those arguments, and accept said arguments in whatever format is most readable and convenient for you makes the mixin Sass's most popular directive.
Mixins should only be used if they take in an argument, otherwise, you should extend the selector's rules, whether it be a class, id, or placeholder.

The & selector* is a Sass construct that allows for expressive flexibility by referencing the parent selector when working with CSS psuedo elements and classes.

String interpolation is the glue that allows you to insert a string in the middle of another when it is in a variable format. Its applications vary, but the ability to interpolate is especially useful for passing in file names.

Sustainability is key in Sass, planning out the structure of your files and sticking to naming conventions for both variables, mixins, and selectors can reduce complexity.

Understanding CSS output is also essential to writing sustainable SCSS. In order to make the best choices about what functions and directives to use, it is important to first understand how this will translate in CSS.

Saas - Day 28

 SAAS (Syntactically Awesome Style Sheet) is a kind of CSS creator which reduces the repetition of CSS coding. That means it create CSS code in a readable manner. [ Easy, Structured & Maintainability high ]

Its coded in Ruby to create CSS files.

Why to Use SASS?

❖ It is a pre-processing language which provides indented syntax (its
own syntax) for CSS.
❖ It provides some features, which are used for creating stylesheets that
allows writing code more efficiently and is easy to maintain.
❖ It is a super set of CSS, which means it contains all the features of
CSS and is an open source pre-processor, coded in Ruby.
❖ It provides the document style in a good, structured format than
flat CSS. It uses re-usable methods, logic statements and some of the
built-in functions such as color manipulation, mathematics and
parameter lists.

Features of SASS

❖ It is more stable, powerful, and compatible with versions of CSS.
❖ It is a super set of CSS and is based on JavaScript.
❖It is known as syntactic sugar for CSS, which means it makes
easier way for user to read or express the things more clearly.
❖ It uses its own syntax and compiles to readable CSS.
❖ You can easily write CSS in less code within less time.
❖ It is an open source pre-processor, which is interpreted into CSS.

Advantages of SASS

❖ It allows writing clean CSS in a programming construct.
❖ It helps in writing CSS quickly.
❖ It is a superset of CSS, which helps designers and developers
work more efficiently and quickly.
❖ As Sass is compatible with all versions of CSS, we can use any
available CSS libraries.
❖ It is possible to use nested syntax and useful functions such as
color manipulation, mathematics and other values.

Disadvantages of SASS

❖ It takes time for a developer to learn new features present in this
pre-processor.
❖ If many people are working on the same site, then should use the
same preprocessor. Some people use Sass and some people use CSS
to edit the files directly. Therefore, it becomes difficult to work on
the site.
❖ There are chances of losing benefits of browser's built-in element
inspector

Sass - Syntax

❖ SASS supports two syntaxes namely SCSS and Indented syntax.
❖ The SCSS (Sassy CSS) is an extension of CSS syntax. This means
every valid CSS is a valid SCSS as well. SCSS makes much
easier to maintain large stylesheets and can recognize vendor
specific syntax, Many CSS and SCSS files use the extension .scss.
❖ Indented − This is older syntax and sometimes just called as
SASS. Using this form of syntax, CSS can be written concisely.
SASS files use the extension .sass.

jQuery - Day 27

jQuery is a JavaScript library. As like Bootstrap for CSS. Many lines of code in JavaScript is replaced by less amount of jQuery code.

jQuery can be used by downloading as package or online CDN.

<script src="jquery-3.2.1.min.js"></script>  

Features of jQuery Library

1. HTML / DOM Manipulation
2. CSS Manipulation
3. HTML event methods
4. Effects & Methods
5. AJAX
6. Utilities

jQuery Syntax

Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".


 $(document).ready(function(){

   // jQuery methods go here...

}); 

 The code inside document. ready(function) will prevent the code from loading before the page loads fully. This will make a good site.

JSON - Day 26

JSON stands for JavaScript Object Notation. JSON objects are used for transferring data between server and client, XML serves the same purpose. However JSON objects have several advantages over XML  These are in text style.

Features of JSON:

• It is light-weight
• It is language independent
• Easy to read and write
• Text based, human readable data exchange format

Sending Data to Server

var person ={ "name":"Parathan", "age": 19, "place" :"Jaffna"};
var myJSON= JSON.stringify(person);

Receiving Data from Server

var myJSON= { "name":"Parathan", "age": 19, "place" :"Jaffna"};
var person = JSON.parse(myJSON);

Storing Data

var person ={ "name":"Parathan", "age": 19, "place" :"Jaffna"};
var myJSON= JSON.stringify(person);
localStorage.setItem("textJSON", myJSON);

Retrieving Data

text= localStorage.getItem("testJSON")
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;


Why use JSON?
Standard Structure: As we have seen so far that JSON objects are having a standard structure that makes developers job easy to read and write code, because they know what to expect from JSON.

Light weight: When working with AJAX, it is important to load the data quickly and asynchronously without requesting the page re-load. Since JSON is light weighted, it becomes easier to get and load the requested data quickly.

Scalable: JSON is language independent, which means it can work well with most of the modern programming language. Let’s say if we need to change the server side language, in that case it would be easier for us to go ahead with that change as JSON structure is same for all the languages.

JSON data structure types and how to read them:

• JSON objects
• JSON objects in array
• Nesting of JSON objects

JSON & JavaScript:
JSON is considered as a subset of JavaScript but that does not mean that JSON cannot be used with other languages. In fact it works well with PHP, Perl, Python, Ruby, Java, Ajax and many more.

Just to demonstrate how JSON can be used along with JavaScript, here is an example:
If you have gone though the above tutorial, you are familiar with the JSON structures. A JSON file type is .json

JavaScript - If, Else,Else if , Switch Conditions - Day 21

Conditions are used to do particular conditions several times.

Following are some conditions used in JavaScript

if condition will execute a block of code.., if is used when statement is whether true or false.
else condition used when a block of statement is false
else if condition used to check more & more statements whether they are true
switch to specify many alternative blocks of code to be executed

If condition

if (condition) {
    block of code to be executed if the condition is true}

if should be in lower case... if is in uppercase then JavaScript will show error.

<p id="demo"></p>

<script>

if (5 == 5) {

    document.getElementById("demo").innerHTML = "True";

}

</script>

Output : True

Else Condition

<p id="demo"></p>

<script>

if (5 == 7) {

    document.getElementById("demo").innerHTML = "True";

}else {

    document.getElementById("demo").innerHTML = "False";

}

</script>

Output: False

Else if Statement

if (condition1) {
   statement

} else if (condition2) {
   statement

} else {
   statement

}

Switch Statement

switch(expression) {

    case n:

        code

        break;

    case n:

        code

        break;

    default:

     code

}

Break Keyword : When execution reached Break keyword the program will run out of Switch statement. If we don't use Break all codes will be read by device. 

Default Keyword : The default keyword specifies the code to run if there is no case match

JavaScript Arrays - Day 20

Arrays are one of the Type of Object. Its used to store many variable in a single variable using Index values. In objects we use name:value property to store and when call the object the same procedure.

But Array is little different..

We call Arrays using Index. The first index is 0 (Zero-based Index).

To Create an Array :---

var array_name = [item1, item2, ...];

<p id="demo"></p>
<script>

var cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML = cars;

</script>
Output: Saab,Volvo,BMW


Another way of creating Array is
var Array_name = new Array( );

E.g: 

<p id="demo"></p>

<script>

var cars = new Array("Maruthi", "Fiat", "Nissan");

document.getElementById("demo").innerHTML = cars;

</script>

Output: Maruthi, Fiat, Nissan

Accessing Array
1. Using indexing Method

<p id="car_info"></p>

<script>

var cars = ["Maruthi", "Fiat", "Lamborgini"];

document.getElementById("car_info").innerHTML = cars[0];

</script>

Output: Maruthi

2.  Calling the Name inside curly braces

<p id="first"></p>

<script>

var person = {firstName:"Parathan", lastName:"Thiyaa", age:19};

document.getElementById("first").innerHTML = person["firstName"];

</script>

Output:  Parathan

Length of Array : This will return the number of values in the Array.
<p id="demo"></p>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = fruits.length;

</script>


Output:4

typeof

This will return the Data Type of the variable..

E:g-

<p id="type"></p>

<script>

var person = ["Parathan", "Saravanan", "Varshanan"];

document.getElementById("type").innerHTML = typeof person;

</script>

Output: object

Array.isArray() : This method will check if that variable is an array or not.

<p id="test"></p>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("test").innerHTML = Array.isArray(fruits);

</script>

Output: true

Another way of instanceof array is used to test the array

<p id="demo"></p>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = fruits instanceof Array;

</script>

Output: true

Math Function and Numbers in JavaScript - Day 19

Math Function is used to do mathematical works in JavaScript. Lets know one by one.

• Math.PI  == Will output the value of PI

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.PI;
</script>

Output:  3.141592653589793

• Math.round(num) 

Replace num with any decimal numbers. You will get the answer as a whole number which is nearly to the decimal number.

• Math.pow(x,y) will out put the x to the power of y.

Eg: Math.pow(3,2)
Output: 8

• Math.sqrt()

The above will give the square root of a given number.
E.g:   Math.sqrt(4)
Output: 2

• Math.random() will give a random number
• Math.floor will output the maximum whole number below that decimal number.

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.floor(Math.random()*50);
</script>

The above function will return Random numbers between 50. The output will change time to change when you run the code.

*50 defines the range of Random numbers to be selected.


Math.min() and Math.max()

Math.min() and Math.max() can be used to find the lowest or highest value in a list of arguments.

Output the Date & Time using JS

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Date();
</script>

If you want to Output a Particular Date & Time..

<p id="demo"></p>

<script>
var d = new Date("October 13, 2014 11:13:00");
document.getElementById("demo").innerHTML = d;
</script>

Output:    Mon Oct 13 2014 11:13:00 GMT+0530

Numbers

<p id="demo"></p>

<script>
var x = 2456e6;
var y = 2456-5;

document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

Output:
2456000000
0.02456

e means Exponential & e5 means 10 to the powers of 5. e-5 = 10 to the power of -5.

Adding Numbers

<p id="demo"></p>

<script>
var x = 30;
var y = 20;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

Output : 50

Adding Strings & Numbers

<p id="demo"></p>

<script>
var x = "540";
var y = "560";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

Output: 540560

Here inside the double quotation JS will take as String, therefore it will print as it is.

NaN - Not a Number

NaN is a JavaScript reserved word indicating that a number is not a legal number.

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 100 / "Orange";
</script>

Output: NaN

JavaScript - Objects - Day 18

Variables are used to assign single data values. Objects are also Variables.But object can contain many values.

<html>
<body>

<p id="para"></p>

<script>
var Parathan = {age:"19", Town:"Jaffna", like:"Movies"};
document.getElementById("demo").innerHTML = Parathan.Town;
</script>

</body>
</html>

Output : Jaffna

To get output from Objects we use name, value pairs. name:values

JavaScript objects are containers for named values called properties or methods.

We can use Two types to access Objects.

• objectName.propertyName
• objectName["propertyName"]   

Object Constructors

We are also able to create objects using constructor functions.

A constructor function is given a capitalized name to make it clear that it is a constructor.

Here's an example of a constructor function:

var Car = function() {
this.wheels = 4;
this.engines = 1;
this.seats = 5;
};

In a constructor the this variable refers to the new object being created by the constructor. So when we write,

this.wheels = 4;

inside of the constructor we are giving the new object it creates a property called wheels with a value of 4.

You can think of a constructor as a description for the object it will create.

JavaScript Functions - Day 18

Function is a line of code which is write for one time & can be reused again & again. So, these functions eliminates writing a specific code again & again in a program.
How to Write a Function...??/
We have to start with "function" keyword and then we have to name the function. Then a parameter which contain parameters or null should be written.. after that curly braces should be wriiten..

<script>
      function functionname (  parameter-list  )
      {
         statements
      }
</script>

---

Calling Function

So, now you have write the Function and then you have to call the function anywhere in the program to run.
Simply, you have to type the name of the function with parenthesis ()

<html>
   <head>
      <script>
         function sayHello()
         {
            document.write ("Hello there!");
         }
      </script>
   </head>
   <body>
      <p>Click the following button to call the function</p>
      <form>
         <input type="button" onclick="sayHello()" value="Say Hello">
      </form>
   </body>
</html>

---

Function With Parameters

Still we haven't put any parameters inside the function.So, now we have to practice with parameters
There is a way to insert parameters; when calling function inside parenthesis you can put the argument.

<html>
   <head>
      <script>
         function sayHello(name, age)
         {
            document.write (name + " is " + age + " years old.");
         }
      </script>
   </head>
   <body>
      <p>Click the following button to call the function</p>
      <form>
         <input type="button" onclick="sayHello('Parathan', 19)" value="Say Hello">
      </form>
   </body>
</html>

Click the following button to call the function

---

Return Statement inside a Function

If you want to get a statement from function you have to code this at the bottom of the function where it ends.
For example, you can pass two numbers in a function and then you can expect the function to return their multiplication in your calling program.

<html> 

<head> 

<script>

 function firstFunction(first, last) {

 var full; full = first + last; 

return full; 

} 

function lastFunction() { 

var result; 

result = firstFunction('Parathan', 'Thiyagalingam'); 

document.write (result ); 

}

 </script> 

</head> 

<body> 

<p>Click the following button to call the function</p> <form> 

<input type="button" onclick="lastFunction()" value="Call Function"> </form>

</body> 

</html>

Click the following button to call the function

JavaScript Syntax [ Identifiers, Variables, Comments ] - Day 17

As we already learned in last post... JavaScript can be inserted to a HTML page in both head & body tags. The following is a sample code of  "How JS works..??"

<html>
   <body>
      <script>
            document.write("Hello World!")  
      </script>
   </body>
</html>

Output: Hello World!

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. You can write with white space, newline & tabs for your readability.

End of Statement =>> Semicolon Used

If a single statement is finished it will be defined by a semi colons in most of the Programming Languages. But JS allows your code If you won't add a semi colon. Anyway writing with Semi colon is best idea. (It is a good programming practice to use semicolons.)

JavaScript is a Case Sensitive language as most of the Programming Languages.

This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.

So, name , Name are different according to JavaScript...

Comments in JavaScript

For single line comment we use :   //

For multi line comment  we use :   /*  line goes here /*

JavaScript Identifiers

All JavaScript variables must be identified with unique names.

These unique names are called identifiers.

Identifiers can be short names (like x and y) or more descriptive names (age, sum, totalVolume).

The general rules for constructing names for variables  are:

• Names can contain letters, digits, underscores, and dollar signs.
• Names must begin with a letter
• Names can also begin with $ and _
• Names are case sensitive (y and Y are different variables)
• Reserved words (JavaScript keywords) cannot be used as names

Variable 

When declaring a variable in JavaScript... 

var Syntax is used

Now, In ECMA 6 we can use const & let keyword also..

const means constants and let will change its value if you change the value...

Variable Scope in JS

Global Variable : Global Variable can be defined anywhere in your JavaScript code.

Local Variable : Local Variables can be visible only within a function where it is defined. Function parameters are always local to that function.

Have a look at this code

<html>

   <body>

      <script >

            var myVar = "global";                // Declare a global variable

            function parathan( ) {

               var myVar = "local";              // Declare a local variable

               document.write(myVar);

            }

         

      </script>

   </body>

</html>

Output : local

as document.write() is printed inside a function & that function contains a myVar variable... So, the output will display "local" only.

If you code document.write() outside the function then the output is "global"

The lifetime of a JavaScript variable starts when it is declared.

Local variables are deleted when the function is completed.

In a web browser, global variables are deleted when you close the browser window (or tab), but remains available to new pages loaded into the same window.

Intro to JavaScript - Day 16

JavaScript is one of the main 3 languages that a developer should know.

1. HTML
2. CSS
3. JavaScript

JavaScript is like a programming language in Web development. We can make movements & graphical (Dynamic Pages) movement in a webpage using JS. 

JS is a lightweight, more easy to learn & user friendly.

JavaScript was first known as LiveScript / ECMA Script, but Netscape changed its name to JavaScript. 

Following are some characterestics of JS

• JavaScript is a lightweight, interpreted programming language.
• Designed for creating network-centric applications.
• Complementary to and integrated with Java.
• Complementary to and integrated with HTML.
• Open and cross-platform

We use JS while check whether the user entered a valid e-mail address in a form.

If and only if the user entered valid entries only JS starts to execute the code & submit the values to the Web Server.

Advantages of JavaScript

• Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

• Less server interaction − We can validate the entries of users before they submitted to the Servers. This will reduce the traffic to the web server. 

• Immediate feedback to the visitors − If users forget to submit any required info JS will tell them to submit.

• Increased interactivity − When user take the mouse cursor near JS coded gadget it will react immediately.

Type of Inserting JavaScript in HTML

You can add JavaScript in 

1. <body> Tag
2. <head> Tag
3. In both body & head Tag

Inserting External JavaScript

You can insert JavaScript externally as you insert CSS

<script src="myScript.js"></script>

You have to replace the myScript.js with your external JavaScript path.

Different types of JavaScript Display Possibilities

into an HTML element, using .innerHTML

into the HTML output using document.write()

into an alert box, using window.alert()

into the browser console, using console.log()

JavaScript accepts both double and single quotes:

Here, "demo" is name of ID which will be call in a HTML page...

Don't worry about it..

document.getElementById("demo").style.fontColor = "Brown";

document.getElementById('demo').style.fontColor = 'Brown';

JavaScript takes both " " and ' ' as same... So, no  problem when typing....

Advantages of Using External JavaScript 

• Easy to read the code 
• Cached Script codes will be stored in browser..So loading would be faster
• Seperates HTML and script code

Nowadays JavaScript Version 5 & Version 6 are used. [ ECMA 5 & ECMA 6]

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..

Visit https://pages.github.com/

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.

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

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.

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)

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;
}

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

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.

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.