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 का जरूर उपयोग करें|

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 जानकारीयां हासिल की उम्मीद है यह आपको पसंद आई होगी|
Advertisement

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 पर पहुँच जाएगा|

Tuesday, 28 November 2017

Learn Basics of Photoshop in Hindi

learn Photoshop in hindi - basics

Photoshop in Hindi: Photoshop एक ऐसा software है जिसकी जरूरत हर creative professionals को पड़ती है, आप कोई graphic designer हों, photographer हों, या web designing सीख रहे हों आपको Photoshop में काम करना जरूर आना चाहिए|

अगर आपको Photoshop चलाना नही आता तो आपको जल्दी से इसे सीख लेना चाहिए क्योंकि इसे सीखने के बाद graphics designing का लगभग हर काम आसान हो जाता है|

आज इस article में आप Photoshop की basic जानकारी हिंदी में हासिल करेंगे, इसके बाद आपको आगे और भी advanced tutorials हिंदी में मिल जायेंगे इसलिए आप इस वेबसाइट को subscribe कर लें या हमारा Facebook page like कर लें जिससे आपको नए पोस्ट की notification तुरंत मिल जाए|

Photoshop Introduction In Hindi

भले ही आपने कभी image editing का काम न किया हो, आपने Photoshop का नाम जरूर सुना होगा |

Photoshop Adobe company का एक product है जो बहुत ही powerful design software है जिसमे लगभग सभी प्रकार के image editing का काम किया जा सकता है|

Print media से लेकर movies, video games, website designing, logo designing हर जगह फोटोशॉप का उपयोग होता है ऐसे में इसे सीखना आपके लिए फायदेमंद होगा|

Adobe Photoshop Basics For Beginners in Hindi

अगर आप पहली बार फोटोशॉप open कर रहे हैं तो आपको इसके interface में काफी confusion हो सकता है, लेकिन यह इतना भी कठिन नही है, आज आप इस Photoshop tutorial को पढ़ कर इसकी basic tools और interface के बारे में जान पाएंगे|

Photoshop नही है? कहाँ से download करें?

अगर आपके system में फोटोशॉप installed नहीं है तो आप इसकी official site पर जाकर इसे download कर सकते हैं जो की 30 दिनों के लिए free trial होगा|

इस tutorial में हमने Photoshop CS4 version का use किया है, यदि आपके पास कोई दूसरा version है तो परेशान होने की जरूरत नही हैं क्योंकि लगभग सभी versions में ये सारे tools common होते हैं|

Photoshop Interface

सबसे पहले हम इसके इंटरफ़ेस में उपलब्ध अलग-अलग टूल्स और options के बारे में जानेंगे| फोटोशॉप के interface का screenshot आप नीचे देख सकते हैं|
PS-interface-webinhindi

Photoshop का interface आसानी से समझ आ जाये इसके लिए हमने इसे 6 भागों में divide कर दिया है:
  1. Application Bar
  2. Menu Bar
  3. Tool Bar
  4. Option Bar
  5. Palettes
  6. Document Window
चलिए अब इनको विस्तार से समझते है:

Application Bar
Application bar से हम Photoshop को maximize, minimize, close कर सकते हैं इसके अलावा Bridge को access कर सकते है, Photoshop के layout और workspace को customize कर सकते हैं|

Windows में application bar menu bar के right side में होता है|
ps- application bar
आप ऊपर application bar का screenshot देख सकते हैं, अब हम उसमे उपलब्ध options के बारे में जानेंगे:
  • Launch Bridge: Bridge Adobe का ही एक application है, जो की एक प्रकार का file manager है जिसमे आप अपने system में उपलब्ध किसी भी files की पूरी details देख सकते हैं, इसे आप सीधे Photoshop के application bar से भी open कर सकते हैं|
  • View Extras:  अपने document में grids, guides या rulers का उपयोग करना चाहते हैं तो आप view extras में जाकर इस enable कर सकते हैं| design बनाते समय इनका उपयोग किया जाता है जिससे डिजाईन objects की size measurement में आसानी होती है|
  • Zoom Level: Document को zoom करने के लिए हम zoom level का percentage सेट कर सकते हैं |
  • Hand Tool: Click करके Photoshop canvas को drag करने के लिए इसका उपयोग होता है, यदि canvas पहले से ही screen पर fit हो तो यह tool काम नही करेगा,  document को zoom करने के बाद hand tool का उपयोग कर सकते हैं|
  • Zoom Tool: Open किये गये image के किसी भी हिस्से को zoom करने के लिए इसका use कर सकते हैं|
  • Rotate View Tool: Document को किसी भी angle पर rotate कर सकते हैं, इसके लिए rotate view tool का use कर सकते हैं|
  • Arrange Documents: अगर हम multiple documents open करते हैं तो हमारे पास options होते हैं की उन डाक्यूमेंट्स को अपने screen पर कैसे दिखाएँ, चाहें तो हम एक window पर सिर्फ एक या जितने चाहें अपने अनुसार multiple documents को side-by-side open कर सकते हैं  और उन पर काम कर सकते हैं|
  • Screen Mode: तीन प्रकार के screen modes दिए गये हैं जिसमे से standard screen mode by default mode होता है इसके अलावा “Full screen Mode With Menu Bar” या  “Full Screen Mode” का option भी होता है| हम इसे shortcut (F) button से भी access कर सकते हैं|
  • Workspace options: Photoshop में कई प्रकार के tools और palettes/panels होते हैं लेकिन जरूरी नही की हम सभी का उपयोग करें ऐसे में हम खुद का एक workspace set करते हैं जिसमें हम हमेशा use होने वाले palettes को सामने रखते हैं और बाकी को hide कर देते हैं  ताकि हम अपना काम आसानी से और जल्दी से कर सकें|  Photoshop पहले से कुछ workspace के presets होते हैं जिसमे से हम अपने जरूरत के अनुसार workspace choose कर सकते हैं या हम चाहें तो खुद का नया workspace बनाकर save कर सकते हैं|

Menu Bar
Menu bar से आप file create कर सकते हैं, save कर सकते हैं और जितने भी tools Photoshop में हैं सभी को menu bar से access किया जा सकता है|

Photoshop -menu bar

चलिए अब menu bar के कुछ basic options के बारे में जानेंगे जिसके बारे में आपको जानना जरूरी है:
  • File > New: नया file बनाने के लिये इसका shortcut Ctrl+N है 
  • File > Open: पहले से उपलब्ध files को open करने के लिए (Ctrl+O) 
  • File > Save: File को save करने के लिए (Ctrl+S)
  • File > Save as:  फाइल को किसी दुसरे नाम से और अलग format में save करने के लिए उपयोग होता है (Ctrl+Shift+S)
  • File > Save for Web & Devices: image को.png, .jpeg, या .gif format में सेव करने के लिए use किया जाता है (Ctrl|+Alt+Shift+S)
  • Image > Image Size: image की साइज़ को बदलने के लिए use होता है (Ctrl+Alt+I)
  • Window: इस option से हम फोटोशॉप में available palettes और tool box को hide या show कर सकते हैं
Tool Bar
Tool bar या  toolbox में कई सारे set of tools होते हैं जिनका उपयोग image editing, graphics designing आदि में किया जाता है|

कुछ tools group में भी होते हैं जिसमे से सिर्फ एक दिखाई देता है और बाकी hidden होते हैं जिसे देखने के लिए उस tool के ऊपर double click करके hold करना होता है, इस group के पहचान के लिए इसके ऊपर lower right corner में एक छोटा सा triangle बना होता |
PS-Tool bar

Photoshop tools को 6 मुख्य भागों में बाँटा गया है:
  1. Selection tools
  2. Crop and slice tools
  3. Retouching tools
  4. Painting and drawing tools
  5. Type, pen and path tools
  6. Navigation tools
Selection tools
PS-selection tools-webinhindi.com
इसके अंदर 4 tools होते हैं:
  • Move tool (v): Image के किसी selected part को एक स्थान से दुसरे स्थान move करने के लिए  इसका उपयोग होता है
  • Marquee tools (m): किसी object को rectangle, square, और ellipse आकार  में select करने के लिए
  • Lasso tools (l):  Freehand selection के लिए इसका उपयोग होता है, polygonal lasso से  polygonal selection बनाया जा सकता है  इसके अलावा magnetic lasso tool है जो की मेरा पसंदीदा  टूल है यह automatically edges को detect कर selection create करता है|
  • Wand tools (w): Single click से similar color के area को select किया जा सकता है|
Crop and slice tools 
PS- Crop Slice tools-webinhindi.com

Crop tool के बारे में आपको जरूर पता होगा आपने कभी न कभी इसका use किया ही होगा, इससे large image से काम आने वाले part को select करने के लिए किया जाता है |

Slice tools का उपयोग ज्यादातर web page design करते समय किया जाता है, यह एक बेहतरीन टूल है इससे पूरे डिजाईन को अलग-अलग भाग में divide किया जा सकता है|

मान के चलिए हम कोई वेब पेज डिजाईन कर रहे हैं तो slice tool की मदद से हम header, footer, navigation, buttons और सारे parts अलग-अलग कर save कर सकते हैं|

Retouching tools
PS- retouching tools-webinhindi.com

Image retouching के लिए Photoshop में कई सारे टूल्स हैं जैसे:
  • Healing Brush Tools: अगर आपको image से scratches, या कुछ object को remove करने की जरूरत है तो आप इसका उपयोग कर सकते हैं, जैसे हमें face के दाग धब्बे हटाने हैं तो इस काम के लिए यह best tool है|
  • Patch Tool: यह भी healing brush की तरह है, इसमें एक spot को select कर दूसरी जगह चिपका दिया जाता है|
  • Red Eye Tool: कभी-कभी कैमरे से ली गयी picture में आँखें लाल दिखाई देती है, इस टूल के नाम से पता चल रहा है की यह red eye को remove करने के लिए उपयोग होता है|
  • Clone Stamp Tool: हम alt press कर एक area choose करते हैं फिर दुसरे area में paint करना शुरू करते हैं इससे जो area हमने पहले चुना था वह copy होने लगता है|
  • History Brush Tools: जब आप किसी design पर काम कर रहे होते हैं तो एक-एक steps Photoshop history में record होते जाते हैं, History Brush से हम पहले perform किये steps को कुछ अलग effects के साथ design के ऊपर paint कर सकते हैं|
Painting and drawing tools
PS- Drawing tools-webinhindi.com

यदि आप पेंटिंग या ड्राइंग करना चाहते हैं तो इसके लिए भी फोटोशॉप में कई सारे टूल्स हैं जैसे:
  • Brush 
  • Pencil
  • Eraser 
  • Paint Bucket 
  • Gradient
इन टूल्स का उपयोग करना बहुत ही आसान है| आगे के articles में हम आपको इसके बारे में विस्तार से बताएँगे|

Type, pen and path tools
Type-pen-Path Tools -webinhindi.com
 अगर आपको अपने document पर text लिखना है तो इसके लिए आप type tool का उपयोग कर सकते हैं| Pen tool और path tools से आप custom shapes, आकृतियाँ और vector image design कर सकते हैं|

Option Bar
यह menu bar के ठीक नीचे होता है| जब भी हम tool bar से किसी एक टूल को select करते हैं तो option bar में उससे related options show होते हैं जिससे हम उस टूल को और भी customize कर सकते हैं|

PS-option-bar-webinhindi
ऊपर जो screenshot दिया गया है उसमे move tool के options दिखाई दे रहे हैं क्योंकि हमने टूल बार से मूव टूल को सेलेक्ट किया हुआ है|

Palettes
कुछ छोटे-छोटे windows जिसे आप screen के right side में देख सकते हैं, Palettes कहलाते हैं| यहाँ से color swatches, layers, history, actions, paragraph आदि चीजों को आसानी से manage किया जा सकता है|

फोटोशॉप में कई सारे palettes होते हैं जिन्हें हम menu bar के window option में जा कर enable या disable कर सकते हैं|

इनमें से कुछ जरूरी palettes इस प्रकार हैं:
  • Layer - बाकी palettes की तुलना में layer palettes सबसे ज्यादा उपयोगी होता है जिसमे आप अपने document के सभी layers को देख सकते हैं, उनके order को बदल सकते हैं, visibility, opacity, blending modes आदि को manage कर सकते हैं| 
  • Color Swatches - अगर आपको अपने डॉक्यूमेंट पर कलर का उपयोग करना है तो आप color swatches से color pick कर सकते हैं|
  • Character - इस palette से आप text के लिए font, size, color, bold, italic, underline आदि को सेट कर सकते हैं|
  • History - Photoshop में अपने task को undo का पीछे जाने के लिए history palette का उपयोग किया जाता है जिससे by default 50 actions तक undo किया जा सकता है|
  • Action - अगर आप कोई task बार-बार perform करते हैं तो आप उसे record कर सकते हैं और जब भी वह काम करना हो तो उसे play कर सकते हैं जिससे वह task automatic perform हो जाएगा|

इस article में हमने Photoshop की सिर्फ बेसिक जानकारी दी है लेकिन आगे आपको जल्द ही Photoshop के और भी tutorials इसी वेबसाइट पर मिलेंगे| 

सिर्फ 20 मिनट में सीखें HTML हिंदी में आपको यह आर्टिकल Learn Basics of Photoshop in Hindi कैसा लगा कमेंट के जरिये जरूर बताएं|