Web

Box Model in CSS | CSS Tutorial -Part 5

May 17, 2017May 17, 2017 Kamna1 Comment

CSS box model is box which is surrounds all the tags in HTML with content, padding, margin and border. If you see above box , inner most blue part represents contents, green is padding , then border and then margin. We as a developer can set these values as per our design.

Detailed explanation of these terms:

Content -Content appears in the center of the box. It is the place where text and images appear
Padding – Padding is used to clears an area around the content and make some space. The padding is transparent
Border – A border that covers the padding and content
Margin – Margin clears an area outside the border. The margin is also transparent.

We can describe this as below:

#centreDoc {
padding: 0 ;
margin-top: 40px;
margin-left: 100px;
width: 750px;
}

<!– Content –>

</body>

In order to set height, width of the box properly you need to understand below maths for this: Total width of an element should be calculated as below:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

In our case it will be:

Total element width = 750px + 0 px+0px + 0px +0px+100px+0px = 850px

See in the below example where page is divided in 2 blocks i.e. navbar and centerdoc

The highlighted orange part is div and above that there is nav tag.

More information can be collected from https://www.w3schools.com/css/css_boxmodel.asp

Background Color, Image | CSS Tutorial -Part 4

May 10, 2017May 17, 2017 Kamna1 Comment

We will be learning about all the possible design techniques we can apply to the background of the web pages. Below is the sample code to add background color to the body tag of web page:

body {
width: 100%;
font-family: monospace;
font-size: 18px;
font-weight: normal;
background-color: rgba(226, 215, 215, 0.35);
}

Similar to normal color attribute , background color can be also set as hexadecimal number, rgba, hsl and by name. It will set background color as below along with other styling which we might apply to our page.

Backgroundcolor

Fig 1

You can change the color to whatever color you like using ctrl+shift+i or using web developer tool on any browser as below:

click on rgba and it will help you change it by adjusting the color you like.

We can have some background color added to individual tags also like to h1, h2 or any tag we want as below:

h1, h2 {
font-weight: 700;
line-height: 1;
margin: 20px 0;
color: #2f2b2b;
background-color: #c5baba
}

The change in the h1 will be same as in fig 1.

Background Images: We can add background image to our web page using css. We can add any type of pic i.e. jpg, png, gif(moving pic) etc as below:

html {
width: 100%;
font-family: monospace;
font-size: 18px;
line-height: 1.5;
font-weight: normal;
background-image: url(“images/giphy.gif”);
background-repeat : repeat-y;
background-size: cover;
}

It will appear like :

Note: When you actually apply .jif pic to your web page it is moving like an animation.

background-image is the attribute which helps us providing the url of the picture we want to add to out web page along with relative or absolute path.

background-repeat is defined to describe if we want to repeat background image to fill into complete page or not. Default value is no i.e. Only part of web page may be covered according to original size of the picture. Repeat-y means it will be only repeated vertically. For more info you can check https://www.w3schools.com/cssref/pr_background-repeat.asp

background-size property specify the background size of the image. Default value is auto i.e. the background-image contains its width and height. we have selected cover to to stretch it as possible to cover entire page.

For box model in CSS , click here

There are lot many other attributes can be added to web page. Watch out this place for more articles.

ETL

Dimensional Modelling – Fact and dimension tables..

April 26, 2017 KamnaLeave a comment

RetailStoreSnowFlake

Fact: Fact is measurement of a particular business process or business itself. Fact tables are used to store the measurements as a track of business process performance.

E.G if we are selling some product at some dollar value then the measurement will be the units sold and amount of dollars earned from that product’s sale.

Each row in fact table is one measurement event. And this data is stored at specific level of detail which is called ‘grain’ such as per above example, it could be one row per product sold. Single fact table should have same grain size to avoid data inconsistency.

Mainly there are 3 type of of fact tables:

Additive : Additive facts are the ones which can be added together to generate some insights from the data. E.g To calculate total sales of a region for a year in terms of dollar value can be calculated by summing up the Sales amount for last 1 year records in fact table.
Semi- Additive: Semi additive facts which cant be added in all cases. E.g Account balance , can not be summed across the time dimension. i.e. If in morning account balance is $100 and by evening after doing the transaction it becomes $50 then total balance by end of the day can be calculated by adding $100 and $50.
Non-additive : These type of facts can never be added e.g unit price of a product. We can only perform average and count operations on this type of measures.

While storing a data in fact table, one should consider putting a valid fact information e.g if there is no sales activity for a given product than ,no row should be put in fact table. We should not populate zeroes in the fact table to represent no activity. Because despite not capturing no activity fact tables take up 90% of the space in dimensional models. We should be very judicious in using fact table space.

Grain of fact table can be categorized in 3 parts:

Transaction: This is the most common type of grain fact tables.
Periodic Snapshot
Accumulating Snapshot

Fact tables have 2 or more foreign keys connect to dimension table’s primary keys. E.g in above picture office id is primary key in dealers office dimension whereas it is foreign key in Fact table. Fact tables generally have their own primary keys composed of subset of the foreign keys of dimensions also called composite key. Fact tables have many to many relationships.

Dimension Tables: Dimension table contains the textual information in context to the fact tables. They describe ‘who, what, when ,where, how and why’ associated with the business events. E.g Time , DealersOffice are dimensions in above example. Dimensions have more attributes than fact tables but lesser rows. Each dimension table has single primary key on basis of which it can be joined with fact table.

It serves as source of the report labels and make DW/BI system understandable and useful. Naming of dimensional attribute should resemble the business properties and not always be some code which has to be memorize to understand and decode while reporting.

Sometimes looking at numeric value , it is tough to determine whether it is dimension or fact e.g cost of a product can serve as dimension also which can be fact as well as dimension. Continuously valued numeric are almost always considered as facts where discrete observations are considered as dimensions.

Fact and Dimensional tables in Dimensional modelling

Above diagram is snowflakes schema some property business. In Dimensional modelling schema are kept as simple as possible but not simpler. So that data can be processed with less joins. Dimensional model should be well planned so that when business wants to analyze the data separately every time , schema need not be changed. So generally data is kept at the lowest level of granule. Atomic data which is not aggregated is the most expressive data.

While creating a report from the dimensional models, dimension attributes supply report filters and labeling , whereas fact tables supply numeric values.

Kimball’s DW/BI architecture:

There are 4 different components to consider the DW/BI architecture:

Operational Source systems i.e. OLTP : These systems generally captures business transactions. E.g Point of Sales transaction systems are OLTP systems.
ETL systems : Extract Load Transform systems. This comes between OLTP and DW/BI presentation area. Detail on ETL can be chekced on article.
Data Presentation Layer
Business Intelligence Appications

Source: The Dataware House Toolkit- 3RD Edition by Ralph Kimball and Margy Ross

CSS

Attributes used to style your web page| CSS Tutorial -Part 3

April 21, 2017May 10, 2017 Kamna1 Comment

As we have seen the attribute “color” in Part -2 , today we will go through some other basic parameters which are needed to set to give desired layout.

Font- Family : Font-family attribute describes which font type should be used for particular tag/html page/website level. If not mentioned , default font type of the web browser is assigned to the pages. E.g of font-family attribute value:

font-family: “Courier New”, Verdana, sans-serif;

This line means that first preference should be given to font type “Courier New”. If this font is not available on person’s computer than Verdana should be used else sans-serif should be used. Most of the browsers use serif family as default font type. We can download add on font types from Google fonts.

Font-Size: Font-size is the attribute which can be used to set the font size of each tag differently in page and change the default font size. Font size can be described in 3 different ways i.e. static size which is described in pixels written as px, relative to window size which is described is viewport width written as vw and 3rd way is EM which is relative to base size set on page. Below is the example of all three:

font-size: 16px;
font-size: .9vw; /*This is if window is 100 bit size each character occupy 0.9 of 100 bit*/
font-size: 2em; /* If base size is 16px , then 2em means 16*2=32px*/

Font-Weight: Font weight can be normal, bold or bolder(only supported by some browsers). Font weight can be described in numbers also. Below is the example:

font-weight: normal;
font-weight: 400;

Text-Transform: Text transform is used to show the text in particular fashion i.e. if you want to transform the text to uppercase/lowercase or capitalize form. Example of this is given below:

text-transform: uppercase;
text-decoration: underline;

Text-align: This is used to change the alignment of the text. E.g:

text-align:center;

These are just the basic attributes and there are many more attributes which can be checked at :https://www.w3schools.com/cssref/

For background color and more attributes >>

CSS · Web

Cascading Style Sheet Tutorial – Part 2

April 19, 2017April 21, 2017 Kamna1 Comment

As we read in the last part of the tutorial that there are 2 ways to style your html page. First one was styling each tag separately and 2nd was putting the style tag in <head> tag of every html file in your website. But putting style tag in head in each page of your website can also cause the code redundancy which is tough to maintain and if any change come we have to make modification in all of the pages. To solve this we can create .css file for our website where we can list down all the styles we want to implement in our website. Below is the sample .css file :

To use this CSS file in each of the page in website we have to use link tag as below:

stylesheet.css is the name of the your css file.

To jot down below are the ways we might want to style our webpages:

If we want to style a particular tag one time in page we may style it at tag level
If we want to put some styling at page level , we can put it in <style> tag in head section
If we want to create common layout in out website, we should do it in CSS files.

So this was all about the ways you one can do styling the website. Now lets learn at the very basic level about the attributes and properties of various tags which you can set in the style sheets or tag:

Color: This is very basic property which we can set with any tag telling what should be color of the tag. e.g

p { color : black} OR

p{ color : #000000} OR

p {color: rgb(0,0,0)} OR

p { color: hsl(0, 0%, 0%)}

Above are mentioned 4 different ways we can color the text/background etc in the website.

First one is named colors, 2nd is hex code for the color, 3rd is rgb (red,green,blue as per intensity) and 4th is HSL i.e. hue, saturation and lightness. For further about colors , you can read at https://www.w3schools.com/colors/colors_hsl.asp

continue>>>>

CSS · Web

Cascading Style Sheet Tutorial – Part 1

April 17, 2017April 19, 2017 KamnaLeave a comment

CSS means cascade style sheet which is language used to style your web pages. One way to write CSS in your web page is in <style></style> tag in <head> tag or apply it at every tag separately. It is preferred to apply all styling rules in <head> tag because it makes your code less tedious for maintenance. Basic CSS example is given below having style tag in <head> tag:

The style tag is written in the head section of the HTML page. This code means that if anywhere in your page having text in between these <p> </p> tags make it black and similarly <h1> should be brown and centrally aligned. <a> tag should be blue.

To break down above written code, every line is combination of selector and declarations.CSS has 3 type of selectors:

Tag selectors = Tag selectors are given at each tag level. e.g p,h1,a
class Selector = It starts with dot. Class selectors can be used with any html tag by writing for example <p class=”classselector”> . Class selector can be used with multiple tags in single html file
Id selector= It starts with #. Id selector is used with tags like <p id=”classselector”>. Ideally id tag should be used only once in single html page.

Attribute and property combination is called as declarative i.e. {color: black}

What do we mean by cascading?

Suppose we have code below:

<h1 id=”idselector”> Intro to CSS</h1>

In this case style tag has 2 styling rules for <h1> tag ..so which one will be applied? Will it be id selector or general h1 rule. Id selector rule will be applied as this phenomenon is cascading which means rules which decide which selector will be applied to the tag in case of conflict. As per cascading rules, id has higher precedence than h1 selector.

Page Layouts/Design types in CSS

There are 4 types of layout designs in CSS which are as below:

Static Design/Fixed Pixel Design : In this design page width does not change even if we try to change the size of browser. This design is not flexible and generally a very preferred design these days. This can be used for mobile websites also but generally people have to zoom or slide to read the content.
Liquid Design : This design flows like liquid which flows as per window size. This is different than responsive design as image and text does not change its size whereas it does in responsive. Liquid designs have its limitation when the window shrinks/expands too much.
Adaptive Design : This is a design which is static design with some properties of responsive design.
Responsive Design : This design changes based on size of the window. Text and images resize and re position itself with window size. These designs are ideal for mobile apps and wider screens. This is a very flexible design.

Next>>>>>>>>>

Let’s learn together on Web development…..for more information like this and follow my blog..

Web

HTML | Mini Project | For HTML beginners..

April 13, 2017April 14, 2017 KamnaLeave a comment

HTML – HTML is computer language that is used to build website and basic building blocks to create a website. Its more like bricks which are used to build homes. A good website is combination of three languages i.e.

HTML – basic structure
CSS – Styling for website
JAVASCRIPT(Or any other similar language) – Make website intelligent and perform tasks

Below are kind of small assignments to check your html knowledge if you are a beginner:

Create Home Page of your website as below:

Requirement:

In the tab it should display “Home Page”
There should be a link which says “email me” and on clicking of that page , a mail should be open with to as mentioned address in html page of that link
Create links to several other pages in home page
Create a link to website which already hosted e.g to google.com
Create a Contact- US page as below

Create Contact US page as below:

Requirements:

There should be a link back to home page
There should be a drop down list to select the salutation
Text box size of Name and Email id should be same
There should be a radio button for complaint or feedback
Description text box should say “Enter the description”
While submitting , use “POST” method

Hints of tags that can be used :

<html>,<head>,<body>,<p>,<a>,<h1>,<hr>,<form>,<select>,<input>,<textarea> etc

Below are the codes of these 2 pages if you want to compare your code:

Home Page

Kindly share your thoughts in comment box so that I can improve my blog…

ETL

April 7, 2017April 13, 2017 Kamna1 Comment

ETL PRocess

ETL – Extract Transform and Load

ETL process is used when business needs to move data from one source system to another source system or target system, one form to another form i.e structure of data, from OLTP to OLAP systems , Enterprise OLAP to subject wise OLAPs etc. It is basically a layer where data is taken from system, transformed as per business logics and loaded in another system.

Extraction: There are multiple disparate source systems in an OLTP systems. Data can be extracted from various sources at once say data from file or DBMS can be extracted together in job,combined and do some processing on that or data could be taken from one source system only. Data Extraction strategies mainly depends upon source systems and how data is stored in source systems.

Transforming: ETL transforms the data from one format to another or we can say make the data in homogeneous format as per target systems. Below can be considered as transformation classifications:
-Data Type conversions
-Joining one or more data sources
-Performing calculations or aggregations on the source data
-Business logics
-Generating surrogate keys for datawarehouse

Below are some examples of scenarios where we can use ETL. These are just to give idea but in real life ETL is used to handle lot more complex requirements and which are tedious to do otherwise:

E.g

If in my source which could be a file or database, I have 10 columns and in my target system I only want 5 columns out of that. How will we load data we can use ETL.
If in source there are columns like first name, last name but in my target system which could be used for say reporting purpose I want to use full name , ETL can be used for this purpose.
My source has date as DDMMYYY but target wants it in form YYYY-MM-DD, ETL can be used for this

Cleansing the data : We can get corrupt data or duplicate data , ETL can easily handle such scenarios based on business rules provided.

E.g:

What should be done when we have duplicate data in source, do we want to discard this data and inform source about this issue or we want to process it by keeping one single record.
NULL handling in data.

Loading: ETL is used as bridge between source and target. Data taking from one source system and connecting and loading in another system(even if both are different systems say mainframe and database ) all can be done in one single jobs.

To read good ETL design, Click on Next>>>>

ETL

Interview Questions asked for DWH professional positions

April 7, 2017April 13, 2017 KamnaLeave a comment

Below are some interview questions which I have faced in course of finding job. There is not any single answer to these questions and can be more elaborated answers but these will give you heads up for what questions to expect in an interview.

Q1: What is the end to end procedure followed in your project from processing ETL source files to reporting along with tools and technologies?

Ans: In my project below was the flow created

Source File–>ETL Jobs–>Stage Table–> ODS tables–>Data warehouse–>Data Cubes(Summarized data)–>Reporting tools

(In your project the process may be somewhat different)

Q2: What is the full form and use of ODS in data-warehouse?

Ans: Full form of ODS is Operational Data Store. Definition of ODS is : An operational data store (or “ODS“) is a database designed to integrate data from multiple sources for additional operations on the data. Unlike a master data store, the data is not passed back to operational systems. It may be passed for further operations and to the data warehouse for reporting.

Q3: How will you print name and salary of the employee from employee table who has maximum salary?

Ans: select name,salary from employees where salary = (select max(salary) from employees)

Q4: Why cant we use group by function in above question?

Ans: If you write query like below

select name,max(Salary) from employees group by salary.

It will give error saying “ORA-00923: not a single-group group function”. This issue comes when we try to select individual and group functions together , unless individual column is included in the group by clause.

Q5: How will you optimize the query in Teradata ?

Ans: Some of the query performing techniques is as below:

See the explain plan and try understanding where the problem is
Check if Primary Index is defined properly or not and if yes the data loaded is unique in the PI column
If you have partitioned primary index created on the table, try to use it else the performance will be degraded
Try avoiding use of functions in Join conditions such as TRIM etc
Make sure there is no implicit conversion happening in join columns. Try to keep the data types same
Try to avoid using IN column if there are more values to be compared. Try to use Join instead by may be creating static table for matching values.

These are just few tips and you can find more link

Q6: What are the typical scheduling software used for scheduling ETL jobs on Linux/Unix?

Ans: Autosys, Control-M are the 2 mostly used software for the scheduling need of ETL jobs. Some ETL tools come with their own schedulers but the are not flexible enough like tools specially meant for schedulers.

Q7: Give pros and cons of using Autosys as scheduling agent?

Ans: Pros:

You can create jobs using its GUI version or JIL files
It has vast variety of commands to handle the job scheduling and execution like you can force start it, you can make it start on arrival of file or at some particular time
You can put the jobs on hold without really affecting the later jobs in it

Cons:

If you have to create jil files for say hundreds of jobs things may get tedious

Q8: What are different type of dataware house schema?

Ans: Below are the different type of schema in DWH:

Star Schema: Star schema resembles star with fact table in the centre and and dimension tables at the star points. This schema is the simplest of all the dataware house schemas. Below is the star schema of Library management system.

Snow Flake Schema: One dimension is split in multiple dimensions. Snow flake schema is where we normalize the dimension tables of star schema. Below is the image f retail management snow flake schema

Galaxy/Hybrid Schema: This the schema where conformed dimensions are used i.e. single dimension shared by multiple fact tables. Dimensions can be further normalized in these type of schemas.

Q9: What is SCD and describe different type of SCDs?

Ans: SCD means slowly changing dimensions i.e. dimensions whose attributes change slowly over the period of time. Say a customer whose address may change several times over the years.

There are 3 type of SCD implementations in DWH:

SCD Type 1 : Overwrite the old value
SCD Type 2: Add a new row
SCD Type 3 : Add a new column

Q10: How will you implement SCD type 2 in banking system?

Ans: Suppose a customer is changing an address then it will be implemented as below:

Initial record:

Actual Customer Table
id	name	year	address
1	ABC	2016	Boston

Now this customer changes the address, we can capture this change by adding new row and start and end dates

SD2 Customer Table
id	name	address	start_date	end_date
1	ABC	Boston	01-01-2015	31-12-2016
1	ABC	Portland	01-01-2017	01-01-2099

In this implementation start_date should be when first record came and end_date can be updated with date when change in address happens with end date is some future date.

These are few questions I encountered during KP’s interview. Please help me increase in the list by adding other questions in the comments.

Some Information is collected from www.wikipedia.com

python · Web

Web Scraping | Mini Project | Scrape Financial data and send email to your gmail account

April 4, 2017April 4, 2017 Kamna1 Comment

While learning a new language/methodology , it is always a good practice and start creating small projects to understand real life difficulties which you will face on real life projects. I am learning Python recently,and the best way to test my knowledge is to create a projects on it. Being beginner, we generally don’t have giant and ambitious project to work on, so why not to work on small realistic projects just like building sandcastles before pilling up the rock to build a grand castle.

With that in mind , I have come up with below project to get started on.Try to make the project by yourself before reading the code file attached by taking the hints which are jotted below.

Stock Data Scraping :

Goal : As the title mentions, this project is to take out necessary stock information and create a schedule to send an email daily for that information.

Project Specification:

Identify website which you want to scrape
Identify patterns in URL and inspect objects
Take input in file as with every addition of ticker symbol we don’t want to change code
Use your gmail account to send email
Email body should contain stock symbols and its current price
Subject should be : ” Your Daily stock Digest”
Mail should go with proper From name and not with email id
To should have multiple recipients

Below is the input file:

Output should look like:

Yellow highlighted part should be the email id from which this mail is sent. Below is the code for this project

Github Project

To take a heads up for this project go through link : Web Scraping – Stock Data Scraping Using Python 3

Kindly share your views on this article which will encourage me to post more content like this….

Share this:

Share this:

Share this:

Share this:

Share this:

What do we mean by cascading?

Page Layouts/Design types in CSS

Share this:

Create Home Page of your website as below:

Create Contact US page as below:

Share this:

Share this:

Share this:

Share this: