Saturday, 27 January 2018

Web Designer कैसे बने? इसके लिए क्या-क्या सीखें?

Web designer kaise bane? iske liye kya seekhen

इससे पहले एक post में हमने आपको web design सीखने के 15 कारण बताये थे जिसमे हमने यह बताने की कोशिश की थी की आपको वेब डिजाईन क्यों सीखना चाहिए और इसे सीखने के कितने फायदे हैं| आज हम आपको बताएँगे की web designer कैसे बने और इसके लिए कौन-कौन से technical skills की जरूरत पड़ती है|

यदि आप एक professional web designer बनना चाहते हैं लेकिन confused हैं की इसके लिए क्या-क्या सीखें और कहाँ से शुरुआत करें तो आप बिलकुल सही जगह पर आये हैं|

आज हम आपको इस article में बताएँगे की एक professional web designer बनने के लिए आपको क्या-क्या सीखना चाहिए और किन-किन बातों को ध्यान में रख कर आप इस field में बेहतर career बना सकते हैं |

Web Designer बनने के लिए क्या-क्या सीखें?

Design Sense
web design sense
Design sense एक प्रकार का soft skill है जो की किसी भी product को बनाने से पहले उसको plan करने और उसका blueprint create करने में हमारी मदद करता है |

जाहिर सी बात है यदि आप एक अच्छा designer बनना चाहते हैं तो आपकी design sense अच्छी होनी चाहिए|

यदि हम web design की बात करें तो आपको एक अच्छा website design करने के लिए कई सारी चीजों का ध्यान रखना पड़ेगा जैसे :
  • Color Palette 
  • Typography 
  • Layout Design
  • Images का सही उपयोग  
  • UX ( User Experience ) आदि 
यदि आपको लगता है की आपकी design sense अच्छी नही है तो आपको परेशान होने की जरूरत नही है आप नीचे दिए गये कुछ tips को follow करके अपना design sense improve कर सकते हैं :

चीजों को observe करें :
जैसा की आपको पता है की जब हम किसी चीज को अच्छी तरह से observe करते हैं तभी हम उसे ठीक तरह से समझ पाते हैं, ठीक ऐसे ही आपको पहले से बने हुए designs पर बारीकी से ध्यान देना है |

जब भी किसी website पर visit करें तो नीचे दिए गये कुछ चीजों पर ध्यान दें:
  • Layout structure
  • Navigation design
  • Fonts
  • Images
  • Icons
  • Elements के बीच white spaces
अपने inspiration के लिए आप नीचे दिए गये कुछ websites पर visit कर सकते हैं:
इस तरीके से आप उस वेबसाइट के अलग-अलग elements पर focus कर पाएंगे और उनके डिजाईन को अच्छे से समझ पायेंगे|

Good और bad design के बीच के difference को समझें
आपको अगर कोई भी अच्छा design बनाना है तो सबसे पहले आपको good design और bad design के बीच के अंतर को समझना होगा|

यदि कोई डिजाईन अच्छा है तो आपको इस चीज पर focus करना चाहिए की उसमे ऐसी क्या बात है, ऐसा कौन सा element है जिसकी वजह से वह औरों से अलग और बेहतर है|

साथ ही आपको यह भी सीखना है की किस प्रकार के डिजाईन और elements का उपयोग करना है और किन चीजों के उपयोग से आपको बचना चाहिए|

Designing से related articles पढ़ें
आप web design से जुड़े नए-नये trends और techniques से updated रहना चाहते हैं तो आपको इससे जुड़े articles पढने चाहिए|

इसके अलावा आपको नई-नई चीजें सीखते रहना चाहिए इसके लिए आप internet पर web design tutorials search कर सकते हैं या हमारे इस ब्लॉग webinhindi.com पर visit करते रहें यहाँ हम आपको web design tutorials Hindi में provide करते रहेंगे|

Practice and repeat
और अंत में आपको अपने design sense improve करने के लिए ऊपर दिए गये tips को follow करते हुए लगातार practice करते रहना चाहिए|

Basic Image Editing
Image editing skill for web designer
आप एक designer हैं तो आपके पास image editing जैसी basic skill जरुर होना चाहिए यदि आपको image editing नही आती तो समय आ गया है की आप कुछ designing software जैसे Photoshop, GIMP, Sketch आदि में से कम से कम किसी एक पर editing  करना सीख लें|

एक web designer को editing से related कई सारे काम करने होते हैं जैसे logo design करना, mockup create करना, website के लिए images बनाना आदि| ऐसे में आपके लिए image editing software सीखना काफी फायदेमंद साबित होगा|

HTML & CSS
HTML-CSS

आप पहले बना हुआ theme या template use कर तो सकते हैं लेकिन अपने client के specific requirements को पूरा करने के लिए आपको थोड़ी-बहुत coding skills की जरूरत तो पड़ेगी ही|

आजकल कई सारे WYSIWYG (What You See Is What You Get) tools भी आ गये हैं जिनसे आप बिना coding किये डिजाईन बना सकते हैं लेकिन यदि आपको HTML और CSS आता है तो आप यह समझ सकते हैं की वह tool काम कैसे कर रहा और इससे आपका आपके design के ऊपर ज्यादा control रहेगा|

आप HTML और CSS सीख कर बिना किसी tool के स्वतंत्र रूप से केवल एक Notepad पर भी काम कर सकते हैं|

यदि आपको HTML और CSS नही आती तो आपके लिए नीचे कुछ links दिए हैं जिन्हें आप follow कर सकते हैं:

Javascript & jQuery
JS-jquery-hindi
वैसे तो यह एक web developer के लिए बहुत ही जरुरी होता है की उसे Javascript में code लिखना आना चाहिए लेकिन यदि आप web designer बनना चाहते हैं तो आप HTML और CSS के अलावा यदि Javascript भी सीख लें तो आप competition में कई लोगों से आगे निकल सकते हैं|

Javascript से आप एक साधारण HTML page को amazing और interactive बना सकते हैं|

As a web designer यदि आपको Javascript नही आती तो कम से कम आपको jQuery जरूर सीख लेना चाहिए|

jQuery Javascript का ही एक library है जिससे आप बड़ी आसानी से कुछ basic interactive चीजें जैसे fadeIn, fadeOut effect, form validation आदि बना सकते हैं|

Javascript और jQuery के बारे और अधिक जानने के लिए नीचे के links पर जा सकते हैं:

Responsive Design

Responsive web design hindi
आजकल हमने अलग-अलग कई तरह के devices का उपयोग करना शुरू कर दिया है ऐसे में यह आज के समय की मांग है की आपकी website responsive होनी चाहिए ताकि वह अलग-अलग size वाले devices पर सही तरह से काम कर सके|

Responsive web design से जुड़े कुछ articles आप नीचे दिए गये links पर जाकर पढ़ सकते हैं:
Front-End Framework
Bootstrap-hindi
किसी भी web designer के लिए एक framework बहुत ही उपयोगी साबित होता है यह designing के काम को आसान कर देता है और designer को एकदम शुरुआत से coding करने की जरूरत नही पड़ती |

असल में front-end framework एक प्रकार का पहले से बना हुआ collection of components  (HTML, CSS , JS documents ) होता जिन्हें हम अपने जरुरत के अनुसार अपनी website पर use कर सकते हैं|

वैसे तो front-end framework कई सारे हैं जैसे की Bootstrap, Foundation, UIkit, Bulma आदि लेकिन इनमे से सबसे ज्यादा popular Bootstrap है जिसे सीखना भी बहुत आसान है|

अगर आप Bootstrap सीखना चाहते हैं तो इसके लिए नीचे दिये गये links पर जा सकते हैं:
CMS (Content Management System)
Wordpress-CMS
Content management system एक प्रकार का software है जिसे server पर install करने के बाद हम बिना किसी coding के अपने website के contents को बड़ी आसानी से manage कर सकते हैं|

आपने Wordpress के बारे में जरुर सुना होगा यह एक CMS है जो एक user friendly environment create करता है जहाँ से website का admin webpages तथा अन्य contents को create, edit, publish और organize कर सकता है|

CMS पर आप अपने जरुरत अनुसार plugins install करके website के features को extend कर सकते हैं| उदाहरण के लिए यदि आपको e-commerce की website बनानी है तो आप Wordpress पर WooCommerce नाम की plugin install करके कुछ ही समय में एक shopping वाली site बड़ी आसानी से बना सकते हैं|

Wordpress के अलावा और भी कई तरह के CMS होते हैं जैसे Joomla, Magento, Drupal आदि इन सभी के अपने-अपने advantages और limitations हैं जिन्हें अच्छी तरह से जानने के बाद ही जरुरत के अनुसार सही CMS का चुनाव किया जाना चाहिए|

As a web designer आपको इन CMS के बारे में अच्छी जानकारी होनी चाहिए ताकि जरुरत पड़ने पर आप इनका सही तरीके से उपयोग कर सकें|

PHP, ASP, JAVA ( Optional )
Programming language
वैसे तो एक web designer को इन advanced programming languages को सीखना जरुरी नही है लेकिन यदि आप इन पर coding करना सीख जाते हैं तो आप अपना career और भी strong कर सकते हैं|

PHP, ASP, Java, Perl के अलावा और भी कई सारे languages हैं लेकिन यदि आप इनमे से कोई एक पर qualified हो जाते हैं तो यह एक वेब डिज़ाइनर के पर्याप्त होगा |

अगर आप programming सीखना चाहते हैं तो PHP से शुरुआत कर सकते हैं इसके अलावा database के लिए MySQL सीख सकते हैं|


तो आज आपने इस article में जाना की web designer कैसे बने और वेब डिज़ाइनर बनने के लिए क्या-क्या सीखें हमें उम्मीद है की आपको यह article पसंद आया होगा, यदि आपके पास इससे जुड़े कोई सवाल या सुझाव हैं तो नीचे comment box में अपने विचार रख सकते हैं|

Thursday, 11 January 2018

Bootstrap से Responsive Navigation Menu कैसे बनायें

Bootstrap menu design tutorial in Hindi

इससे पहले हमने इस ब्लॉग पर बताया था की Bootstrap क्या है और इसका grid system कैसे काम करता है | जैसा की आप जानते हैं की Bootstrap responsive web design के लिए एक बहुत ही बढ़िया और popular front end framework है, आज हम इसी Bootstrap से एक responsive navigation menu design करने वाले हैं |

इस menu design की सबसे ख़ास बात यह है की यह responsive और collapsible है यानि small screen वाले device पर यह automatically hide हो जाता है और उसकी जगह एक toggle button show होता है| जब हम toggle button पर click करते हैं तभी यह navigation bar display होता है|

Bootstrap Responsive Navigation Tutorial in Hindi

अपने website के लिए इस प्रकार की menu को design करने के लिए आपको नीचे दिए गये कुछ आसान से steps follow करने होंगे|
Step 1:  Download Bootstrap सबसे पहले इसकी official website getbootstrap.com पर जाकर download button पर click करें|

अब यहाँ से bootstrap का compiled version download कर लें |



Step 2: Unzip and Rename
  • अब इस download की गयी file को unzip/extract करें
  • सुविधा के लिए इस folder को rename करके bootstrap रख लें

Step 3: index.html नाम से एक HTML file बनायें और Bootstrap की जरूरी files include करें
  • bootstrap folder के अंदर एक basic html file बनायें और उसे index.html नाम से save कर लें | 
  • अब इसमें नीचे दिया गया code copy करके paste करें | 
  • इससे Bootstrap के सभी जरूरी CSS और Javascript के files हमारे HTML page में include हो जायेंगे और इससे एक blank HTML web page create होगा |

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<!-- viewport set karen taki responsive web page mobile device me correctly display ho sake-->
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Bootstrap Responsive Navigation Design Tutorial in Hindi - Webinhindi.com</title>
<!-- Include Bootstrap CSS file -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- jQuery aur bootstrap ki JS files ko include karen -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
  <script src="js/bootstrap.min.js">
  </script>
</body>
</html>

चलिए अब इस code को समझने की कोशिश करते हैं:
  • हमने head section में सबसे पहले दो important meta tags use किये हैं, एक charset और दूसरा viewport.
    • charset : हमने character set की value utf-8 रखा जो की एक प्रकार का character encoding होता है जिससे हम अपने पेज पर unicode characters को आसानी से display करा सकते हैं|
    • viewport: इसके बारे में हमने एक पोस्ट Media Queries से Responsive Website कैसे बनायें में विस्तार से बताया है|
  • इसके बाद हमने link tag का use करके bootstrap.min.css file को अपने page पर include किया है|
  • अब हम body section के last में यानि page के bottom में jQuery और Javascript की जरूरी files को link करेंगे|
  • Javascript files को head section में भी link किया जा सकता है लेकिन इसे bottom में add किया गया क्योकि browser web page के content को top से bottom load करता है और ऐसे में यदि top में large JS file add किया जाये तो page की loading speed कम हो सकती है|

Step 4: Navigation Menu के लिए Coding करें अब हम menu design के लिए coding करना शुरू करेंगे | Bootstrap में पहले से कई सारे CSS class बने हुए होते हैं जिनका उपयोग करके हम बड़ी आसानी से अपने website के लिए responsive menu design कर सकते हैं|

इसके लिए body section में कुछ इस प्रकार से code लिखें:
  • सबसे पहले HTML page के <body> में  <nav> tag बनायें और उसपर navbar, navbar-default, और navbar-static-top नाम की तीन CSS classes specify करें|

<body>
    <nav class="navbar navbar-default navbar-static-top">
    </nav>
</body>

  • <nav> के अंदर एक <div> बनायें जिसे container नाम का class दें|

<body>
    <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
    </div>
    </nav>
</body>

  • इसके अंदर हम header बनायेंगे जिसके लिए navbar-header नाम के class के साथ एक <div> बनायें|

<body>
 <nav class="navbar navbar-default navbar-static-top">
   <div class="container">
     <div class="navbar-header">
     </div>
   </div>
 </nav>
</body>

  • अब navbar-brand नाम के class के साथ एक <a> element बनाये और उस पर header के लिए text लिखें|

<body>
  <nav class="navbar navbar-default navbar-static-top">
   <div class="container">
     <div class="navbar-header">
      <a href="#" class="navbar-brand"> Company Name</a>
    </div>
   </div>
 </nav>
</body>

  • हमें small screen वाले device के लिए एक toggle button बनाना है जिसके लिए <button> tag बना कर navbar-toggle नाम का एक class दें इसके अलावा दो attributes data-toggle=”collapse” और data-target=”.menubar” specify करें|

<body>
 <nav class="navbar navbar-default navbar-static-top">
   <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand"> Company Name</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".menubar">
    </button>
    </div>
    </div>
  </nav>
</body>

  • Toggle button के लिए 3 horizontal line वाली icon use करेंगे जिसके लिए <button> tag के अंदर 3 <span> tag बनायें जिन पर icon-bar नाम का class specify करें|

<body>
    <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
 <div class="navbar-header">
 <a href="#" class="navbar-brand"> Company Name</a>
   <button class="navbar-toggle" data-toggle="collapse" data-target=".menubar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
</div>
</div>
  </nav>
</body>

  • अब button और navbar-header वाले div को close करने के बाद एक अलग <div> बनायें जिसका CSS class collapse, navbar-collapse, और menubar होगा|
<body>
    <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand"> Company Name</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".menubar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
    <div class="collapse navbar-collapse menubar">
     </div>
    </div>
    </nav>
</body>

  • इस <div> अंदर एक <ul> रखें जिसका class nav, navbar-nav, और navbar-right होगा| <ul> के अंदर अब हमें menu items add करने होंगे|
  • Active link को अलग दिखाने के लिए उसके <li> tag पर active नाम का class add कर दें| इसका कोड नीचे देखें|

<body>
 <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand"> Company Name</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".menubar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
    <div class="collapse navbar-collapse menubar">
    <ul class="nav navbar-nav navbar-right ">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>  
    </div>
    </div> </nav>
  <!-- jQuery aur bootstrap ki JS files ko include karen -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

Bootstrap Responsive Navigation Menu के लिए Complete Code

अब आपके website के लिए responsive और mobile friendly menu design तैयार है| इसके लिए complete code आप नीचे देख सकते है|
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"><!-- viewport set karen taki responsive web page mobile device me correctly display ho sake-->
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Bootstrap Responsive Navigation Design Tutorial in Hindi - Webinhindi.com</title><!-- Include Bootstrap CSS file -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Company Name</a> <button class="navbar-toggle" data-target=".menubar" data-toggle="collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
      </div>
      <div class="collapse navbar-collapse menubar">
        <ul class="nav navbar-nav navbar-right">
          <li class="active">
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav><!-- jQuery aur bootstrap ki JS files ko include karen -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
  <script src="js/bootstrap.min.js">
  </script>
</body>
</html>
इसका output कुछ इस प्रकार होगा:

bootstrap-default-menu

Bootstrap Inverted Navigation Bar कैसे बनायें

इससे पहले जो मेनू हमने बनाया वो Bootstrap का default navigation था जो की lite theme use करता है जबकि  inverted menu dark theme में होता है|

Inverted menu बनाने के लिए <nav> tag से navbar-default class को हटा कर simply navbar-inverse add कर देना है उसके बाद यह कुछ इस तरह दिखाई देगा:
inverted-menu

Bootstrap Fixed (Top या Bottom) Navigation Bar कैसे बनायें

Fixed navigation menu webpage के top या bottom में fixed होता है|  जब पेज को scroll किया जाता है तब यह मेनू अपने स्थान पर fixed रहता है और पेज के साथ scroll नही होता है|

  • यदि menu bar को top में fixed रखना है तो हमें <nav> tag में navbar-fixed-top नाम का class add कर देना है |
  • इसकी प्रकार bottom fixed navigation के लिए <nav> tag में navbar-fixed-bottom नाम का class add कर देना है |

Bootstrap Dropdown Navigation Menu कैसे बनायें

जिस प्रकार से पहले हमने मेनू बनाया वैसे ही एक और navigation design करेंगे लेकिन इसमें एक dropdown ( sub menu ) add करेंगे|

इसके लिए हम पहले वाले code में थोड़ा सा changes करेंगें:
<div class="collapse navbar-collapse menubar">
  <ul class="nav navbar-nav navbar-right">
    <li class="active">
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li>
          <a href="#">Web Design</a>
        </li>
        <li>
          <a href="#">Graphics Design</a>
        </li>
        <li>
          <a href="#">SEO</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</div>
Sub menu के साथ हमारा navigation कुछ इस प्रकार से दिखेगा:
responsive-dropdown

अब आपने Bootstrap से responsive navigation design करना सीख लिया है| आप चाहें तो इसे customize भी कर सकते हैं इसके लिए आप एक अलग CSS file बना लें और उसमे styling करें |

यदि आप इस पोस्ट से जुड़े कुछ पूछना चाहते हैं या कुछ सुझाव देना चाहते हैं तो नीचे comment box में अपना विचार रख सकते हैं|

Monday, 18 December 2017

Bootstrap Grid System क्या है? यह कैसे काम करता है?

Bootstrap Grid System in Hindi

Bootstrap एक बहुत ही powerful front-end framework है जो की बहुत ही कम समय में responsive website design करने के लिए web designers की मदद करता है|

जैसा की हमने पिछले article, Bootstrap क्या है? क्या इसे सीखना जरूरी है? में बताया था की Bootstrap grid system के आधार पर काम करता है और यदि आपको बूटस्ट्रैप से design बनाना है तो आपको इस grid system को समझना होगा|

आज हम इस article में Bootstrap के grid system के बारे में बात करेंगे और बूटस्ट्रैप के इस important concept को समझने की कोशिश करेंगे|

Grid क्या है?

Grid एक प्रकार का structure है (एक graph paper तरह) जिसमे किसी area को horizontal और vertical lines draw कर columns और rows में divide किया जाता है|

बाद में जब उस area पर कुछ contents रखे जाते हैं तब उनकी height-width और structure को manage करने के लिए इन columns और rows का उपयोग किया जाता है|

web design में भी ऐसे ही एक grid का उपयोग किया जाता है जिससे website के layout को design करने और contents को properly organize करने में मदद मिलती है|

Bootstrap Grid System क्या है?

Bootstrap एक page को 12 अलग-अलग columns में divide कर देता है इनकी सबसे खास बात यह है की ये responsive होते हैं यानि की ये कॉलम अपने आप को screen size के अनुसार re-arrange कर लेते हैं ताकि screen छोटा हो या बड़ा सभी में content proper तरीके से दिखाई दे सकें|

Bootstrap grid system 3 चीजों से मिलकर बना होता है :
  1. Container
  2. Rows
  3. Columns
इन तीनो के बारे में नीचे विस्तार से बताया गया है|

Container कैसे बनायें?

Bootstrap से page design करते समय सबसे पहले हमें container create करना होता है, container एक simple <div> element है जिसपर .container class apply किया जाता है| grid यानि rows और columns को इस container के अंदर रखा जाता है |

Bootstrap में दो प्रकार के container classes होते हैं:
  • .container  : इस CSS class का उपयोग fixed-width design के लिए किया जाता है 
  • .container-fluid : इससे full width design बनाया जाता है 
Fixed width container:
<div class="container"></div>

Full width fluid container:
<div class="container-fluid"></div>

Rows और Columns कैसे बनायें?

अब हम एक row create करेंगे जो की container के अंदर होगा| हम container के अंदर एक से ज्यादा rows भी create कर सकते है|

Row बनाने के लिए <div> में .row class का use करेंगे |

जब row बन जाये तो उसके अंदर हम columns create कर सकते हैं और उस पर content रखा जा सकता है |

Row:
<div class="container">
<div class="row"></div>
</div>

Column बनाने के लिए Bootstrap में 4 प्रकार के classes use किये जाते हैं:
  • .col-xs: extra small display के लिए ( जिनकी screen width 576px से कम होती है )
  • .col-sm: small screen वाले device के लिए ( जिनकी width 576px के बराबर या उससे ज्यादा होती है )
  • .col-md: medium size screen के लिए ( जिनकी width 768px के बराबर या उससे अधिक हो )
  • .col-lg: large screen के लिए ( जिनकी width 992px के बराबर या अधिक हो )
  • .col-xl: xlarge device के लिए (जिनकी screen width 1200px या उससे अधिक हो )
मान के चलिए यदि हमें medium size screen के लिए single column बनानी हो जिसकी width 12 columns के बराबर हो तो हमें .col-md-12 class का use करना होगा|
<div class="container">
<div class="row">
<div class="col-md-12">Column 1</div>
</div>
</div>

single column

2 columns के लिए हमें दो <div> elements लेने होंगे और दोनों में .col-md-6 class specify करना होगा|
<div class="container">
<div class="row">
<div class="col-md-6"> Column 1</div>
<div class="col-md-6"> Column 2</div>
</div>
</div>

two column

इस प्रकार Bootstrap 3 columns के लिए तीन div create करेंगे और प्रत्येक में .col-md-4 class use करेंगे|
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>

three columns

Grid layout example:
bootstrap layout design

अलग-अलग Width वाले Screens के लिए Code कैसे लिखे

अभी तक हम single screen के लिए design बना रहे थे लेकिन अब हम multiple screen size के लिए coding करनी है|

इस काम को करने के लिए हम एक <div> में multiple classes एक साथ लगा सकते हैं|

हम ऐसा design बनाना चाहते हैं जिसे large screen पर open करने पर एक row में 3 columns दिखे और यदि small screen वाले device में open किया जाए तो पहले row में 2 columns और सबसे नीचे तीसरा column full width के साथ display हो, तो इसके लिए नीचे दिया गया code use करेंगे|

<div class="container-fluid" >
<div class="row">
<div class="col-lg-4 col-sm-6">Column 01</div>
<div class="col-lg-4 col-sm-6">Column 02</div>
<div class="col-lg-4 col-sm-12">Column 03</div>
</div>
</div>

Output in small screen:
bootstrap multiple classes
Output in large screen:
bootstrap multiple classes - large screen
यदि हम चाहते हैं की large screen पर हमारा design एक line में सिर्फ एक ही column display करे और small screen पर एक ही row में तीन column दिखाए तो इसके लिए नीचे दिया गया कोड use कर सकते हैं|
<div class="container-fluid" >
<div class="row">
<div class="col-sm-4 col-lg-12">Column 1 </div>
<div class="col-sm-4 col-lg-12">Column 2</div>
<div class="col-sm-4 col-lg-12">Column 3</div>
</div>
</div>

Output in small screen:
col-sm-4 col-lg-12 - small screen
Output in large screen:
col-sm-4 col-lg-12 - large screen

आगे पढ़ें : Media Queries से Responsive Website कैसे बनायें
तो आज आपने इस article में Bootstrap grid system के बारे में जाना यदि आपको इससे related कोई सवाल पूछने हैं या कुछ सुझाव देना चाहते हैं  तो आप नीचे comment box का जरूर उपयोग करें|

Advertisement

Thursday, 14 December 2017

Javascript क्या है? यह HTML और CSS से कैसे अलग है?

Javascript kya hai
JavaScript in Hindi: अगर आप web designing में interested हैं तो आपने JavaScript का नाम जरूर सुना होगा और हो सकता है आपने इसका use भी किया हो|

अगर आप वेब डिज़ाइनर बनना चाहते हैं तो आपको HTML, CSS के साथ जावास्क्रिप्ट जरूर सीखना चाहिए क्योकि किसी भी वेबसाइट में जान डालने के लिए Javascript बहुत ही उपयोगी है|

आज आप इस article में जानेंगे की JavaScript क्या है, इसको सीखने से क्या फायदे हो सकते हैं और इससे क्या-क्या बनाया जा सकता है|

JavaScript क्या है?

JavaScript एक powerful scripting language है जिसे HTML के साथ add करके web page को और भी interactive बनाया जा सकता है|

JavaScript को Brendan Eich ने 1995 में Netscape में बनाया था तब इसका नाम Livescript था जिसे बाद में बदल कर JavaScript रखा गया|

कई सारे programmers Javascript और Java को एक दुसरे से related समझते हैं लेकिन असल में ये दोनों एकदूसरे से बिलकुल अलग हैं और इनके बीच कोई सम्बन्ध नही है| जहाँ पर Java बहुत ही complex programming language है वहीँ Javascript केवल एक light-weighted scripting language है|

Javascript एक client side scripting है इसका मतलब यह user के browser पर run होता है|

जब भी user किसी webpage के लिए request send करता है तब server उस पेज के HTML के साथ JavaScript के code को भी browser पर send कर देता है अब यह browser की responsibility होती है वह उस JavaScript के code को जरूरत पड़ने पर execute करे|

आप जावास्क्रिप्ट के कोड को अपने ब्राउज़र पर देख सकते हैं क्योंकि यह browser पर run होता है|

इसके विपरीत आपने server side programming जैसे PHP, ASP.Net, JSP आदि के बारे में सुना होगा इन सभी language से बना program browser पर नही बल्कि server पर run होता है और इसका output HTML में convert होकर browser में दिखाई देता है और इनके code को आप browser पर नही देख सकते|

HTML, CSS और Javascript में क्या differences हैं?

कई लोग JavaScript सीखने से पहले काफी confusion में रहते हैं और उनके मन में कुछ सवाल जरूर होते हैं जैसे:
  • HTML, CSS और Javascript में आखिर अंतर क्या है? 
  • क्या हम बिना Javascript के कोई वेबसाइट नही बना सकते?
  • क्या हमें इन तीनो को सीखना ही पड़ेगा?
इन सभी सवालों का जवाब तभी मिल सकता है जब हमें पता हो की इन तीनो का काम क्या है| तो चलिए इन तीनो के उपयोग की समझते हैं:
  • HTML: इसके जरिये web page का structure तैयार किया जाता है| पढ़ें: HTML सीखें सिर्फ 20 मिनट में
  • CSS: Cascading Style Sheets से वेबसाइट के presentation वाले part को डिजाईन किया जाता है उसमे रंग आदि भरा जाता है| पढ़ें : Complete CSS tutorial हिंदी में
  • Javascript: Page को interactive बनाया जाता है कुछ logic जैसे user किसी button पर click करे तो कौन सा function execute होगा और कौन सा task perform होगा आदि|
HTML Vs. CSS Vs. JavaScript Hindi
इन सबका मतलब यह है की आप HTML और CSS से website बना तो सकते हैं लेकिन यदि आप उसमे कुछ interactive features add करना चाहते हैं तो ऐसे में आपको जावास्क्रिप्ट का उपयोग करना होगा|

JavaScript के क्या-क्या उपयोग हैं?

इसका उपयोग एक interactive website को बनाने के लिए किया जाता है| इसका अधिकतर उपयोग कुछ इस प्रकार के task को perform करने के लिए होता:
  • Form Validation: User द्वारा किसी form पर input लेते समय ये verify करना की enter किया गया data सही format में है या नही जैसे email, mobile no. आदि|
  • Popup Windows: Popups जैसे alert dialog box, confirm dialog box आदि को भी जावास्क्रिप्ट से create किया जा सकता है|
  • Drop Down Menu: वेबसाइट के लिए dynamic drop down menu बनाया जा सकता है|
  • Browser Detection: User कौनसा browser use कर रहा है यह पता कर सकते हैं |
  • Cookies: User के browser में कुछ information store किया जा सकता है और जब user दुबारा visit करे तो उसे access कर सकते हैं इस information को cookies कहते हैं|

JavaScript के लिए कौन-कौन से Tools की जरूरत पड़ती है?

Javascript की  coding करने के लिए और उसे run करने के लिए किसी विशेष tool की जरूरत नही पडती इसके लिए सिर्फ दो चीजें आपके system में होनी चाहियें:
  • Code Editor: आप code लिखने के लिए normal text editor जैसे notepad का use कर सकते हो या किसी code editor जैसे Notepad++, Dreamweaver, Sublime, Brackets आदि में कोई भी एक use कर सकते हैं|
  • Browser: कोई modern web browser जैसे Chrome, Firefox, Safari आदि का उपयोग कर सकते हैं|

JavaScript के फायदे 

  • Fast Execution:  यह fast इसलिए है क्योंकि यह client side पर run होता है और ज्यादा server interaction की जरूरत नही पड़ती|
  • Cross Platform: यह किसी भी operating system और किसी भी modern browser जैसे Chrome, Firefox, Internet Explorer आदि में आसानी से काम कर सकता है|
  • Easy to Learn: यह language बहुत ही simple है और इसे सीखना बहुत आसान है|

JavaScript के Disadvantages

  • Security Issues: जैसा की आप जानते हैं की यह client के browser पर execute होता इसलिए यह ज्यादा secure नही होता हालांकि सुरक्षा को नज़र में रखते हुए JavaScript के अन्दर कुछ restrictions लगाये गए हैं जैसे की यह user के system के files को read या write नही कर सकता| इन restrictions के बावजूद भी कुछ malicious codes अब भी run हो सकते हैं|
  • Javascript rendering varies: यह अलग-अलग browser पर अलग-अलग तरीके से काम कर सकता है यानि के इसके outputs अभी platforms पर consistent नही होते|


आज आपने इस article में पढ़ा की JavaScript क्या है, इसके क्या काम हैं और इसके बारे में कुछ basic जानकारीयां हासिल की उम्मीद है यह आपको पसंद आई होगी|

Monday, 4 December 2017

Bootstrap क्या है? क्या इसे सीखना जरूरी है?


Bootstrap in Hindi:अगर आप web design में interested हैं तो आपने Bootstrap का नाम जरूर सुना होगा| किसी भी web designer के लिए यह एक बहुत ही important tool है जिसका उपयोग करके बहुत ही आसान तरीके से और तेज गति से responsive website design किया जा सकता है|

आज आप इस article में जानेंगे की Bootstrap क्या है और आपको वेबसाइट बनाने के लिए इसका use क्यों करना चाहिए आखिर इसके क्या फायदे हैं|

Bootstrap क्या है?

Bootstrap एक प्रकार का framework है जिसे HTML, CSS और Javascript से बनाया गया है जिसका उपयोग responsive और mobile friendly website बनाने के लिए किया जाता है|

Bootstrap को Twitter कंपनी के employee Mark Otto और Jacob Thornton ने अपनी एक टीम के साथ मिलकर बनाया था |

शुरुआत में उन्होंने इसे Twitter Blueprint नाम दिया था क्योंकि वे इसे Twitter के लिए एक internal tool की तरह उपयोग करना चाहते थे लेकिन बाद में उन्होंने इसे 19 अगस्त 2011 में एक open source project के रूप में GitHub पर Bootstrap के नाम से release कर दिया ताकि दुसरे लोग भी इसका use कर इसका फायदा ले सकें|

देखते ही देखते यह बहुत ज्यादा popular हो गया और आज पूरी दुनिया के developers responsive website design करने के लिए इसका उपयोग करते हैं|

वैसे तो इस प्रकार के कई सारे frameworks हैं लेकिन Bootstrap उनमे से सबसे ज्यादा popular और सबसे ज्यादा उपयोग होने वाला framework है|

Bootstrap काम कैसे करता है?

जब कोई वेब डिज़ाइनर Bootstrap से वेबसाइट डिजाईन करता है तब उसे बहुत ज्यादा coding करने की जरूरत नही पड़ती क्योंकि बूटस्ट्रैप में पहले से ही कई सारे codes दिए गये होते हैं जिन्हें HTML page पर सिर्फ reuse किया जाता है|

Bootstrap में CSS के कई सारे predefined classes होते हैं जिन्हें आसानी से अपने पेज पर call करके use किया जा सकता है|

Bootstrap एक grid system पर काम करता है जो की पूरे पेज को बराबर columns और rows में divide करता है| सभी rows और columns के लिए अलग-अलग CSS classes बनाये गये हैं जिन्हें जरूरत के अनुसार अपने web page पर उपयोग किया जा सकता है|

पढ़ें: Bootstrap Grid System क्या है? यह कैसे काम करता है?

Bootstrap से website design करने के क्या फायदे हैं?

  • समय की बचत: Bootstrap का यह सबसे बड़ा advantage है की इसका use करने से development speed बढ़ जाती है और बहुत ही कम समय में काम हो जाता है इसके विपरीत यदि आप खुद से बिना बूटस्ट्रैप के responsive design बनाना चाहते हैं तो आपको इसमें काफी समय लग सकते हैं|
  • Use करना आसान है: यदि आपको HTML और CSS की basic knowledge है तो आप बड़ी आसानी से बूटस्ट्रैप का उपयोग कर सकते हैं|
  • Responsive Design: बूटस्ट्रैप के माध्यम से आप बड़ी आसानी से responsive design बना सकते हैं| यदि आपकी वेबसाइट responsive है तो वह किसी भी platform या device जैसे desktop, laptop, mobile आदि में screen size के हिसाब से अपने आपको adjust कर लेती है|
  • Cross Browser Compatible: Bootstrap को इस तरह बनाया गया है की यह हमारा वेबपेज लगभग सभी modern browsers जैसे Firefox, Chrome, Internet Explorer, Opera आदि में एक समान दिखाई देगा|
  • Open Source: इसकी सबसे बढिया बात यह है की आप इसे free में उपयोग कर सकते हैं |

आज आपने इस article Bootstrap क्या है? क्या इसे सीखना जरूरी है? में  Bootstrap की basic जानकारी हासिल की लेकिन इसके बाद हम आपको Bootstrap से responsive website बनाने की जानकारी भी देंगे तो यदि आप interested हैं तो नीचे जाकर इस वेबसाइट के newsletter को subscribe कर सकते हैं जिससे अगला article सीधे आपके e-mail पर पहुँच जाएगा|