Information Technology: August 2016

23 Aug 2016

Scalar Vector Graphics

Using SVG tag in HTML, one can draw various shapes like rectangle, circle, ellipse and polygon in web page. Below is one demonstration of SVG tag including HTML file, CSS file and output image:

HTML File:

 <!----------------------------------  
 Author: Qaidjohar  
 Creation Date: Aug 23,2016  
 Logical Comment: HTML file for SVG Demo  
 ----------------------------------->  
   
 <html>  
 <head>  
 <title>SVG Demo</title>  
 <link rel="stylesheet" type="text/css" href="../css/blog_svg.css">  
 </head>  
 <body>  
 <!-------------------------Main Div-------------------------------->  
 <div class="main">  
 <!-------------------------Header Div------------------------------>  
 <div class="header">  
 <h1>Scalar Vector Graphics</h1>  
 </div>  
 <!-------------------------Container Div--------------------------->  
 <div class="container">  
 <svg height=100% width=100%>  
 <!----------------------Mountain and Sun--------------------------->  
 <polygon points="0,500 125,250 250,500" fill="brown" stroke="orange" stroke-width="3px"/>  
 <circle cx="365" cy="322" r="50px" fill="yellow"/>  
 <polygon points="187,375 250,250 375,375 312,500 250,500" fill="brown" stroke="orange" stroke-width="3px"/>  
 <polygon points="312,500 437,250 500,500" fill="brown" stroke="orange" stroke-width="3px"/>  
 <!-------------------------House----------------------------------->  
 <rect height="125px" width="60px" x="625" y="375" fill="cyan" stroke="black" stroke-width="2px"/>  
 <rect height="125px" width="190px" x="685" y="375" fill="cyan" stroke="black" stroke-width="2px"/>  
 <polygon points="625,375 655,312 685,375" fill="pink" stroke="black" stroke-width="2px"/>  
 <circle cx="655" cy="353" r="13px" fill="black"/>  
 <ellipse rx="5px" ry="8px" cx="662" cy="353" fill="grey"/>  
 <polygon points="655,312 845,312 875,375 685,375" fill="pink" stroke="black" stroke-width="2px"/>  
 <rect height="50px" width="30px" x="640" y="450" fill="grey" stroke="black" stroke-width="2px"/>  
 <rect height="25px" width="25px" x="720" y="410" fill="grey" stroke="black" stroke-width="2px"/>  
 <rect height="25px" width="25px" x="805" y="410" fill="grey" stroke="black" stroke-width="2px"/>  
 <!-------------------------Tree------------------------------------>  
 <rect height="63px" width="25px" x="927" y="437" fill="brown"/>  
 <polygon points="900,437 937,400 980,437" fill="green"/>  
 <polygon points="900,417 937,380 980,417" fill="green"/>  
 <polygon points="900,395 937,355 980,395" fill="green"/>  
 </svg>  
 </div>  
 <!-------------------------Footer Div-------------------------------->  
 <div class="footer">  
 <p>(: Open Source :)</p>  
 </div>  
 </div>  
 </body>  
 </html>

CSS File:

 /*  
 Author: Qaidjohar  
 Creation Date: Aug 23,2016  
 Logical Comment: CSS file for SVG Demo  
 */  
   
 *  
 {  
      margin:0px;  
      padding:0px;  
 }  
   
 body  
 {  
      background-color:pink;  
 }  
 .main  
 {  
      height:650px;  
      width:1000px;  
      margin-left:183px;  
 }  
   
 .header  
 {  
      height:100px;  
      width:1000px;  
      background-color:black;  
 }  
   
 h1  
 {  
      color:yellow;  
      text-align:center;  
      line-height:90px;  
 }  
   
 .container  
 {  
      height:500px;  
      width:1000px;  
        
 }  
   
 svg  
 {  
      background-color:#AAAAFF;  
 }  
   
 .footer  
 {  
      height:50px;  
      width:1000px;  
      background-color:grey;  
 }  
   
 p  
 {  
      color:white;  
      text-align:center;  
      line-height:50px;  
      font-size:20px;  
 }

Output:

18 Aug 2016

Keep calm and love responsive design..!

Responsive design is a simple implementation in CSS which is very effective when you don't want to compromise with your GUI of web page whether it is surfed from large or small footprint devices. Just add:

/* For laptop or computer */
@media only screen and (max-width:1366px)
{
}

/* For smartphone */
@media only screen and (max-width:320px)
{
}

HTML Code:

 <!-------------------------  
 Author: Qaidjohar  
 Start Date: 16/08/2016  
 End Date:  
 Logical Comment: Responsive Demo  
 -------------------------->  
 <html>  
 <head>  
 <title>Responsive Demo</title>  
 <link rel="stylesheet" type="text/css" href="../css/project_review_responsive_demo.css">  
 </head>  
 <body>  
 <!-----------------------------Main-------------------------->  
 <div class="main">  
 <!-----------------------------Header------------------------>  
 <div class="header">  
 <div class="logo">  
 <img id="aits" src="../images/atmiya-night-vision.jpg"/>  
 </div>  
 <div class="menu">  
 <ul>  
 <li class="menu_li"><a class="menu_a">Home</a></li>  
 <li class="menu_li"><a class="menu_a">Portfolio</a></li>  
 <li class="menu_li"><a class="menu_a">About Us</a></li>  
 <li class="menu_li"><a class="menu_a">Contact Us</a></li>  
 </ul>  
 </div>  
 </div>  
 <!----------------------------Container---------------------->  
 <div class="container">  
 <div class="left_c">  
 <p id="quote"><i>"A place to learn, a chance to grow with divinity."</i></p>  
 </div>  
 <div class="center_c">  
 <p id="intro">To be an academic institution with dynamic equilibrium with its environment striving continuously for excellence in education, research and forming of an idyllic human resource development center to serve the society that lead to academic enrichment and perennial advancement.</p>  
 </div>  
 <div class="right_c">  
 <img id="light" src="../images/etcee2.jpg"/>  
 </div>  
 </div>  
 <!---------------------------Footer-------------------------->  
 <div class="footer">  
 <p id="p_footer">&copy; Atmiya Institute of Technology and Science</p>  
 </div>  
 </div>  
 </body>  
 </html>

CSS Code:

 /*  
 Author: Qaidjohar  
 Start Date: 16/08/2016  
 End Date:  
 Logical Comment: Responsive Demo  
 */  
   
 *  
 {  
      margin:0px;  
      padding:0px;  
 }  
 @media only screen and (max-width:1366px)  
 {  
 .main  
 {  
      height:auto;  
      width:100%;  
 }  
   
 .header  
 {  
      height:220px;  
      width:100%;  
      background-color:grey;  
 }  
   
 .logo  
 {  
      height:150px;  
      width:100%;  
 }  
   
 #aits  
 {  
      height:100%;  
      width:100%;  
 }  
   
 .menu  
 {  
      height:70px;  
      width:100%;  
 }  
   
 .menu_li  
 {  
      list-style-type:none;  
      float:left;  
      height:100%;  
      width:25%;  
      text-align:center;  
      font-size:40px;  
      line-height:70px;  
      background-color:orange;  
      box-shadow:0px 0px 20px 5px black inset;  
      border-radius:10px;  
 }  
   
 .menu_li:hover  
 {  
      background-color:green;  
      color:orange;  
 }  
   
 .menu_a  
 {  
      text-decoration:none;  
 }  
   
 .container  
 {  
      height:400px;  
      width:100%;  
 }  
   
 .left_c  
 {  
      height:400px;  
      width:20%;  
      box-shadow:0px 0px 20px 5px black inset;  
      float:left;  
 }  
   
 #quote  
 {  
      margin:40px 0px 0px 20px;  
      font-size:50px;  
 }  
   
 #intro  
 {  
      font-size:20px;  
      margin:20px 20px 0px 20px;  
 }  
   
 .center_c  
 {  
      height:400px;  
      width:50%;  
      box-shadow:0px 0px 20px 5px black inset;  
      float:left;  
 }  
   
 .right_c  
 {  
      height:400px;  
      width:30%;  
      box-shadow:0px 0px 20px 5px black inset;  
      float:left;  
 }  
   
 #light  
 {  
      margin:50px 0px 0px 45px;  
      height:75%;  
      width:75%;  
 }  
   
 .footer  
 {  
      height:50px;  
      width:100%;  
      box-shadow:0px 0px 20px 5px black inset;  
      background-color:grey;  
 }  
   
 #p_footer  
 {  
      text-align:center;  
      font-size:20px;  
      line-height:45px;  
 }  
 }  
   
 @media only screen and (max-width:320px)  
 {  
 .main  
 {  
      height:auto;  
      width:100%;  
 }  
   
 .header  
 {  
      height:350px;  
      width:100%;  
      background-color:grey;  
 }  
   
 .logo  
 {  
      height:150px;  
      width:100%;  
 }  
   
 #aits  
 {  
      height:100%;  
      width:100%;  
 }  
   
 .menu  
 {  
      height:200px;  
      width:100%;  
 }  
   
 .menu_li  
 {  
      list-style-type:none;  
      float:left;  
      height:25%;  
      width:100%;  
      text-align:center;  
      font-size:40px;  
      line-height:50px;  
      background-color:orange;  
      box-shadow:0px 0px 20px 5px black inset;  
      border-radius:10px;  
 }  
   
 .menu_li:hover  
 {  
      background-color:green;  
      color:orange;  
 }  
   
 .menu_a  
 {  
      text-decoration:none;  
 }  
   
 .container  
 {  
      height:1050px;  
      width:100%;  
 }  
   
 .left_c  
 {  
      height:400px;  
      width:100%;  
      box-shadow:0px 0px 20px 5px black inset;  
      float:left;  
 }  
   
 #quote  
 {  
      margin:40px 0px 0px 45px;  
      font-size:50px;  
 }  
   
 #intro  
 {  
      font-size:20px;  
      margin:20px 20px 0px 20px;  
 }  
   
 .center_c  
 {  
      height:250px;  
      width:100%;  
      box-shadow:0px 0px 20px 5px black inset;  
      float:left;  
 }  
   
 .right_c  
 {  
      height:400px;  
      width:100%;  
      box-shadow:0px 0px 20px 5px black inset;  
      float:left;  
 }  
   
 #light  
 {  
      margin:50px 0px 0px 35px;  
      height:75%;  
      width:75%;  
 }  
   
 .footer  
 {  
      height:50px;  
      width:100%;  
      box-shadow:0px 0px 20px 5px black inset;  
      background-color:grey;  
 }  
   
 #p_footer  
 {  
      text-align:center;  
      font-size:15px;  
      line-height:45px;  
 }  
 }

Laptop/Computer (width: 1366px) Output:

Smartphone (width: 320px) Output:

Click here to download the entire implementation

15 Aug 2016

Happy 70th Independence Day, INDIA

 #list  
 indep1 = ['I','N','D','E','P']  
 indep2 = ['E','N','D','E']  
 indep3 = ['N','C','E']  
 sev1 = ['S','E','V']  
 sev2 =['N','T','Y']  
 day = ['A','Y']  
 happy = ['H','A','P','P','Y']  
   
 for i in range (0,5):  
      for k in range (0,3):  
           print(' '),  
      for j in range (3,8):            
           if (i == 1 or i == 3) and (j == 4 or j == 5 or j == 6):  
                print(' '),  
           elif j == 3:  
                print('{0} '.format(indep1[i])),  
           elif i == 2 and j == 4:  
                print('{0} '.format(day[0])),  
           elif i == 2 and j == 5:  
                print('{0} '.format(day[1])),       
           elif j == 7:  
                print('{0} '.format(happy[i])),            
           else:  
                print('* '),  
      print  
   
 for i in range (5,9):  
      for k in range (0,3):  
           print(' '),  
      for j in range (3,4):  
           print('{0} '.format(indep2[i-5])),  
      print  
   
 for i in range (10,13):  
      for k in range (12,i,-1):  
           print(' '),  
      for j in range (10,i+1):  
           if i == 12:  
                for index in range (0,3):  
                     print('{0}'.format(sev1[index])),  
                break  
           else:            
                print('*'),  
   
      for j in range (3,4):  
           print('{0}'.format(indep3[i-10])),  
   
      for j in range (10,i+1):  
           if i == 12:  
                for index in range (0,3):  
                     print('{0}'.format(sev2[index])),  
                break  
           else:            
                print('*'),  
      print