Uki KSP: May 2019

Thursday, May 30, 2019

Bootstrap

What is Bootstrap?
Bootstrap is a free and open source front end development framework for the creation of websites and web apps. The Bootstrap framework is built on HTML, CSS and JavaScript(JS) to facilitate the development of responsive, mobile-first sites and apps.

Bootstrap download link:- https://getbootstrap.com/docs/4.2/getting-started/download/

Typography

The elements below are HTML elements that will be styled a little bit differently by Bootstrap than browser defaults.

Element/Class Description

<h1> - <h6> h1 - h6 headings
<small> Creates a lighter, secondary text in any heading
.small Indicates smaller text (set to 85% of the size of the parent)
.lead Makes a text stand out
<mark> Highlights text
<del> Indicates deleted text
<ins> Indicates inserted text
<u> Indicates underlined text
<strong> Indicates bold text
<em> Indicates italic text
.text-left Indicates left-aligned text
.text-center Indicates center-aligned text
.text-right Indicates right-aligned text
.text-justify Indicates justified text
.text-nowrap Indicates no wrap text
.text-lowercase Indicates lower cased text
.text-uppercase Indicates upper cased text
.text-capitalize Indicates capitalized text

Bootstrap Grid System

Grid Classes

The Bootstrap grid system has four classes:

xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)

The classes above can be combined to create more dynamic and flexible layouts.

Grid Example

<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>

</body>
</html>

Button Styles
To achieve the button styles, Bootstrap has the following classes:

.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

Button style examples

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h2>Button Styles</h2>

<button type="button" class="btn">Basic</button>

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

</div>

</body>

</html>

Button Sizes

The classes that define the different sizes are:

btn-lg
.btn-md
.btn-sm
.btn-xs

Monday, May 27, 2019

GitHub

GitHub is a web-based version-control and collaboration platform for software developers.
Git is used to store the source code for a project and track the complete history of all changes to that code.

GitHub products and features

GitHub offers an on-premises version in addition to the well-known SaaS product. GitHub Enterprise supports integrated development environments and continuous integration tool integration, as well as a litany of third-party apps and services. It offers increased security and auditability than the SaaS version.

Other products and features of note include:

GitHub Gist allows GitHub users to share pieces of code or other notes.
GitHub Flow is a lightweight, branch-based workflow for regularly updated deployments.
GitHub Pages are static web pages to host a project, pulling information directly from an individual's or organization's GitHub repository.
GitHub Desktop enables users to access GitHub from Windows or Mac desktops, rather than going to GitHub's website.
GitHub Student Developer Pack is a free offering of developer tools that is limited to students, and includes cloud resources, programming tools and support, and GitHub access.

Saturday, May 25, 2019

Cascading Style Sheet (CSS)

CSS Definition

Stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of web pages that previously could only be defined in a page's HTML.

CSS can be added to HTML elements in 3 way:

Inline - by using the style attribute in HTML elements.
Internal - by using a <style> element in the <head> section.
External - by using an external css file.

Inline

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

<html>

<body>

<h1 style="color:navy;"> Inline </h1>

</body>

</html>

Internal

An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page,

within a style element:

<html>

<head>

<style>

body{background-color:blue;}

</style>

</head>

<body>

Internal

</body>

</html>

External

An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site,

by changing one file!

To use an external style sheet, add a link to it in the <head> section of the HTML page:

<html>

<head>

</head>

<body>

External

</body>

</html>

external.css

body {

background-color:powerblue;

}

h1, p {

color:red;

font-style:itlalic;

}

Some property

Background color :- {background-color:red;}
Color :- {color:blue;}
Font style :- {font-style:italic;}
Font weight :- {font-weight:bold;}
Font family :- {font-famil:courier;}
Text decoration :- {text-decoration:overline;}
Text transform :- {text-transform:uppercase;}
Background image :- {background-image:url(apple.jpg)}
Border style :- {border-style:dotted;}
Opacity :- {opacity:0.5;}

Property Values

Font style

Italic
Oblique
Initial
Inherit

Weight

Bold

family

Arial
Times new roman
Helvetica
Geneva
Tahoma

Decoration

Overline
Line-through
Underline

Transform

Uppercase
Lowercase

Border style

Solid
Dotted
Dashed
Double
Groove
Ridge
Inset
Outset

opacity

0.1 - 1.0

Wednesday, May 15, 2019

HTML

Hyper Text Markup Language

(HTML)

What is HTML?

HTML (Hyper Text Markup Language) is a text-based approach to describing how content contained within an HTML file is structured. This markup tells a web browser how to display the text, images and other forms of multimedia on a web page.

HTML Tags Example Explained

The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The lang attribute defines the language of the document
The <meta> element contains meta information about the document
The charset attribure defines the character set used in the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph

HTML Formatting Elements

<b>- Bold text
<strong>- Important text
<i>- Italic text
<em>- Exphasized text
<mark>- Marked text
<small>- Small text
<del>- Deleted text
<ins>- Inserted text
<sub>- Subscript text
<sup>- Superscript text

Flowchart

Flow Chart

Flow Chart Defined

A flow chart is a graphical or symbolic representation of a process. Each step in the process is represented by a different symbol and contains a short description of the process step. The flow chart symbols are linked together with arrows showing the process flow direction.

Common Flowchart Symbols

Terminator :- An oval flow chart shape indicating the start or end of the process.
Process :- A rectangular flow chart shape indicating a normal process flow step.
Decision :- A diamond flow chart shape indication a branch in the process flow.
Connector :- A small, labeled, circular flow chart shape used to indicate a jump in the process flow.
Data :- A parallelogram that indicates data input or output (I/O) for a process.
Document :- Used to indicate a document or report.

A simple flow chart showing the symbols described above can be seen below.

Tuesday, May 14, 2019

Pseudo code

Pseudo Code

Pseudocode Definition

Pseudocode is a simple way of writing programming code in English. Pseudocode is not actual programming language. It uses short phrases to write code for programs before you actually create it in a specific language. Once you know what the program is about and how it will function, then you can use pseudocode to create statements to achieve the required results for your program.

Saturday, May 11, 2019

Nano Text Editor

Nano Text Editor

Original author(s) :- Chris Allegretta
Initial release :- 6 June 2000
Operating system :- Cross-platform
Available in :- English
Written in :- C
Type :- Text editor

Nano Text Editor Commands

CTRL+A :- Jump to the beginning of the line.
CTRL+E :- Jump to the end of the line.
CTRL+V :- Scroll page up.
CTRL+Y :- Scroll page down.
CTRL+W :- Search for a specified phrase in your text. To search for the same phrase again press ALT+W.
CTRL+K :- Cuts the entire selected line to the "cut buffer".
CTRL+U :- Pastes the text from the "cut buffer memory" into the selected line.
CTRL+J :- Justifies the paragraph.
CTRL+_ :- Go to specified line and column number.
CTRL+C :- See where your cursor currently is.
CTRL+X :- Exits nano text editor. In case you made any changes to the file,it will prompt a save request.

Thursday, May 9, 2019

Ubuntu Terminal Commands

Terminal commands

The terminal is an interface in which you can type and execute text based commands

Ubunthu Commands Examples

ls :- List directory contents
man :- Get information or help about a command
pwd :- Path of working directory
cd :- Change working directory
mv :- Move file or change name
cp :- Copy file
mkdir :- Make directory
rm :- Remove files and directories
mount / mnt / zip :- Mount zip disk on directory
cat :- output contents of a file
find :- look for file
gref :- search for a string of text
passwd :- Change password
poweroff :- Copumter shut down
touch :- Text file create
tree :- Floder view
clear :- Terminal full clear
cd .. :- Floder back
df :- Disk space
nano :- Editor

Add click :- Terminal commands video

Terminal Commands Examples :- https://www.howtoforge.com/linux-commands/

Wednesday, May 8, 2019

Klavaro

Source Code :- klavaro-3.05.tar.bz2

Previousversion :- http://sourceforge.net/projects/klavaro/files

About Klavaro

Growing frustrated with other options that rely mostly on a few specific keyboards, Klavaro is libre software that intends to be keyboard and language independent, saving memory, time and money.

Features

1. Progress charts: At the completion of each exercise, some characteristics of your performance are saved and can be showed graphically. Thus, you can easily observe your learning progress.

2. Fluidness exercises: Type complete paragraphs, with good sense sentences. Spelling errors must be corrected before proceeding. Special attention is given to the rhythm, aiming to be as uniform as possible. Load any text files, independent of language.

Tuesday, May 7, 2019

Slack

What is slack?

Slack is a collaboration hub where you and your team can work together to get things done. From project kickoffs to budget discussions, and to everything in between- slack has you covered.

Original authors :- Stewart Butterfield, Eric costello, cal henderson, and Serguei Mouracho

Trello

What is trello?

Trello is a collaboration tool that organizes your projects into boards. In one glance, trello tells you what's being worked on, who's working on what, and where something is in a process.

Imagine a white board, filled with lists of sticky notes. with each not as a task for you and your team.Now imagine that each of those sticky notes has photos, attachments from other data sources like Bitbucket or salesforce, documents, and a place to comment and collaborate with your teammates. Now imagine that you can take that whiteboard anywhere you go on your smartphone, and can access it from any computer through the web. That's Trello.

Google Classroom

What is the classroom?

Google classroom is a free collaboration tool for teachers and students. Teachers can create an online classroom, invite students to the class then create and distribute assignments. awithin the google Classroom students and teachers can have conversations about the assignments and teachers can track the student's progress. school must register for a free google apps for education account to use classroom.

Classroom Features

Under the Classroom app,students and teachers have access to features that are not found in personal google accounts. For example, in Forms, teachers can add images to questions or as multiple choice answers. Inbox by Gmail has classroom messages grouped in inbox, Making it easy for teachers and students to find important updates and highlights. Also, the classroom tool lets teachers organize the class stream by adding topics to posts, and teachers and students can fillter the stream for specific topics

Uki KSP

Thursday, May 30, 2019

Bootstrap

Bootstrap Grid System

Grid Classes

The Bootstrap grid system has four classes:

Button Sizes

Monday, May 27, 2019

GitHub

Saturday, May 25, 2019

Cascading Style Sheet (CSS)

Wednesday, May 15, 2019

HTML

Flowchart

Tuesday, May 14, 2019

Pseudo code

Pseudocode Definition

Saturday, May 11, 2019

Nano Text Editor

Thursday, May 9, 2019

Ubuntu Terminal Commands

Wednesday, May 8, 2019

Klavaro

Klavaro

About Klavaro

Features

Tuesday, May 7, 2019

Slack

Slack

What is slack?

Trello

Trello

What is trello?

Google Classroom

Google Classroom

What is the classroom?

Classroom Features

Express

Report Abuse

Labels