Big Data-Know and How

Twitter, Facebook, world data centre, Amazon and Google all these social networking or ecommerce site has huge footprint in terms of number of users, transactions they perform and data they crunch day in day out. These numbers are so big that it range from
terabyte to petabytes.

1. Data Explosion
2. Monetization
3. Social Media
4. Data mobilization
5. Technology Advancement

Big Data -

high amount of data to be processed, produced and available with respect to diversity of source inside and outside.

Areas require Big Data

• Image processing
• Video processing
• Seisemic processing
• sensor data analysis
• network analysis
• enterprise monitoring
• Enterprise data warehouse
• Low latency Non Relationship Database
• Key value - Amazon dynomite
• Column oriented- cassandra hbase,Riask
• Document databases- Couch db/Mongodb
• Graph based- Neoo4j,Allegrograph

Big data analytics aims at fluid architecture. change for future and flexible architecture.

CSS3 reference

-webkit for Chrome and safari sometimes opera
-MS is for IE9 and IE10

Transform Rotate

transform: rotate(25deg)(for IE 11)
-ms-transform: rotate(25deg)(For lesser version of IE)
-webkit-transform:rotate(25deg) (for rest of the browser)
transform: rotateX(25)(for IE 11)
transform: rotateY(25)(for IE 11)
transform: rotateZ(25)(for IE 11)
transform: rotate3D(100,300,100,60deg)(for IE 11)

Transform Matrix
transform: matrix(0.9,-0.3,0.7,0.8,0.1,0.2)//6 values
transform: matrix3d(0.9,-0.3,0.7,0.8,0.1,0.2)//16 values

Transform Translate
position: absolute
left: 100px
right:100px
Alternative
transform: translate(100px,100px)

Scaling Object

transform: scale(1.5,1.5)
transform: scaleX(1.5)

Skewing objectstransform:skew(30deg,10deg)

Adding Perspective Objects
transform:rotateX(60deg) rotateY(40deg)
transform:perspective(800px) rotateX(60deg) rotateY(40deg)

Animation with keyframes

animation:mymove 5s 1; /*IE 11 and Firefox*/
-webkit-animation:mymove 5sa 1 ;/* for safari,chrome and opera*/
-ms-animation:mymove 5sa 1;/*for IE9 and IE10 */
@keyframes mymove /*IE 11 and Firefox*/
{
        from {left:0px;}
       to {left: 300px;}
}
frequency 5s and cylce: 1
@-ms-keyframes mymove
@-webkit-keyframes mymove
animation :movDiv 5s infinite;

Frames from and to translated to percentage
@keyframes movDiv /*IE 11 and Firefox*/
{
       0%  {left:0px;}
       25% {left:200px;}
        50% {left:300px;}
        100% {left:400px;}
}
@keyframes movDiv /*IE 11 and Firefox*/
{
from {background-color: #fff;}
to {backgroung-color:#000;}
}
Color with keyframes
@keyframes movDiv /*IE 11 and Firefox*/
{
0%{background-color: #fff;}
100%{backgroung-color:#000;}
}
//Rotate we can use left and right
@keyframes movDiv /*IE 11 and Firefox*/
{
0%{transform:rotate(0deg);}
50%{transform:rotate(25deg);}
100%{transform:rotate(90deg);}
}

Background Image
body{
background-color: #fff;
background-image:url(/images/something);
background-repeat:norepeat;
}


Creating columns and flow text using css3
#content{
float:left;
column-count: 3;
-moz-column-count:3;
-webkit-column-count:3;
}

using image alignment
.imgleft{
float:left;
padding-right:5px;
}


pseudo selector ::
Apply bullet before and after of p tag
p::before, p:: after{
content:url ("bullet.png");
}

p:: first-line{
color:#fff;
font-variant:small-caps;
}
p::first-letter{
color:#ffd800;
font-Size:30Px;
}

BOX Shadow

3D Inset emboss
.titlebox{
box-shadow: 10px,10px,5px #ffff inset;
}
text-shadow: 10px,10px,5px #ffff;

Linear gradient
background:linear-gradient(red,yellow,blue);

-ms-linear
-o-linear //opera
-moz-linear
-webkit-linear

background:linear-gradient(left,#ff 0%,#ff 50%,#ff 100%);

Radial Gradient
background:radial-gradient(circle,#ff 0%,#ff 50%);

Gradient text
background:-webkit-linear-gradient(25deg, yellow,blue))
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
Transparent
opacity:0.5;
filter:aplha(opacity=50);

Range Slider style

input[type="range"]{
-webkit-appearance:none;
-webkit-border-radius:10px;background-image:-webkit-linear-gradient(top,black,white,black);
}

Create Arrow using Border.uparrow{
                 width:0px;
                 height:0px;
                 border-left: 50px solid transparent;
                 border-right: 50px solid transparent;
                  border-bottom: 50px solid ##ff0000;
}

The Story of the Trojan Horse

King Menelaus
Wife: Helen
City : Sparta
Country: Greece
Soldiers: Greek
Two kings: Odysseus/Agamemnon


King: Priam
City: troy
Country: Turkey
Son: Paris

Sinon- Greek soldier who misled the Troy soldier-Trojan.

Cassandra- The king's Priam daughter suspected, and said the horse statue would bring trouble.

Plot: Paris fell in love with Helen and took him away from Greece to Troy in Turkey

The Trojan war went on for ten years!

During the Trojan war, the Trojans(Soldiers of Troy) receive the gift of a huge wooden horse from the Greeks.
Thinking the gift means that they have won the war, the Trojan celebrate. But what they don't realize is that Greek soldiers are hidden inside the huge horse.. waiting to attack!

Theme: Big giant Wooden hollow horse was built taller than the wall around Troy.Greek soldier were hid inside the horse.

They had made it inside the walls of Troy at last.

Beware of Greek bearing the gifts!