Thursday, 10 May 2018

Raster और Vector Graphics क्या है? दोनों में क्या अंतर है? कब किसका use करें?

raster vs vector image in hindi
Digital graphics को हम दो categories में divide कर सकते हैं: raster और vector. अगर आप इन दोनों graphics को लेकर confusion में हैं तो आपको यह article जरूर पढना चाहिए क्योंकि आज हम इन्ही दोनो के बारे में बातें करने वाले हैं।

आज इस article में हम नीचे दिए गये कुछ points पर focus करने वाले हैं:
  • Raster (bitmap) Image क्या है?
  • Vector Image क्या है?
  • Raster और Vector Graphics में क्या अंतर है?
  • Raster और Vector में से किसका कब use करें?
Raster और vector graphics के बारे में पूरी जानकारी पाने के लिए इस article को पूरा जरूर पढ़ें।

Raster Image क्या है?


Raster image या bitmap image कई सारे छोटे-छोटे squares या dots से मिलकर बने होते हैं जिन्हें हम pixels कहते हैं। अगर आप इस image को zoom करेंगे तो आप इन छोटे-छोटे pixels को देख पायेंगे। 

आपके mobile phone के कैमरे से ली गयी तस्वीरें भी raster image के example हैं।

इस प्रकार के images pixel और resolution based होते हैं। इनके resolution का निर्धारण DPI (Dots Per Inch) या PPI (Points Per Inch) से होता है।

Pixel based होने के कारण जब इनकी size बड़ी की जाती है तो एक limit के बाद ये blurred या pixelated हो जाते हैं और इनकी quality ख़राब हो जाती है।

Raster image में आप बड़ी आसानी से अलग-अलग कई सारे रंगों को मिलाकर एक smooth painting बना सकते हैं।

Raster image को बनाने या edit करने के लिए आपको Photoshop, GIMP जैसे software की जरुरत पड़ती है।

JPEG, PNG, GIF जैसे format में save किये गये images raster images ही होते हैं।

Vector Graphics क्या है?

vector image in hindi

Vector image pixel based नही होते हैं ये resolution independent होते हैं। Vector graphics mathematical calculations पर आधारित होते हैं।

इस प्रकार के image के size को हम जितना चाहें उतना कम या ज्यादा कर सकते हैं और ऐसा करने पर image की quality पर कोई असर नही पड़ेगा। 

यानी बिना quality खोये हम इस तरह के इमेज को किसी भी आकार में print कर सकते हैं और यही vector graphics का सबसे बड़ा advantage है।

Vector graphics drawing बनाने के लिए perfect है, आप Adobe Illustrator या Corel Draw से इस प्रकार की drawings कर सकते हैं।

Raster और Vector Graphics में क्या अंतर है?

नीचे दिए गये table में दोनों type के graphics को आपस में compare किया गया है जिससे आप raster और vector image में क्या differences हैं ये आसानी से समझ सकते हैं।

Raster Image Vector Image
Pictures Pixel-based होते हैं Mathematical calculations के जरिये shapes बनते हैं
इमेज का का dimension और resolution निश्चित होता है किसी भी आकार में scale किया जा सकता है
Image का आकार जितना बड़ा होगा file की size भी उतनी ही बड़ी होगी File size छोटा होता है
File formats: .jpg, .gif, .png, .tif, .bmp, .psd File formats: .ai, .cdr, .svg;
Common raster software: Photoshop, GIMP Common vector software: Illustrator, CorelDraw, InkScape
आसानी से कई सारे colors को blend करके painting किया जा सकता है बिना rasterizing के colors को blend कर पाना मुश्किल है
Painting के लिए perfect है Drawing के लिए perfect है
Raster को vector में convert किया जा सकता है लेकिन इसमें काफी समय लगता है Vector image को आसानी से raster में convert कर सकते हैं

Raster और Vector में से किसका कब use करें?

अब शायद आपके दिमाग में यह सवाल जरुर आ रहा होगा की आखिर इन दोनों graphic format में से बेहतर कौनसा है और इनमे से किस फॉर्मेट का उपयोग हमें करना चाहिए?

सच तो यह है की दोनों formats के अपने-अपने advantages और disadvantages हैं और ये अलग-अलग काम के लिए उपयोग होते हैं।

Raster और vector में से कौनसा format use करें यह depend करता है की आप किस प्रकार का image/graphic design कर रहें हैं।

Raster Image का उपयोग कब करें?
  • Digital image, photography के लिए raster graphics का उपयोग करें।
  • Internet पर उपलब्ध अधिकतर images JPEG, GIF और PNG format में होते हैं जो की raster image हैं।
  • Web design में इसका उपयोग होता है। Website के लिए images design करने के लिए raster format बेहतर है।
  • Picture में gradient, blur, texture, shadow effects आदि add कर रहें हैं तो raster उपयोग करें।
Vector Image का उपयोग कब करें?
  • जब आप बहुत large size का कोई design जैसे banner, poster आदि बना रहें हों तो vector का use करें।
  • Logo डिजाईन में vector image उपयोग होता है ताकि जरुरत पड़ने पर logo को किसी भी आकार में scale किया जा सके।
  • Illustration बनाने में इस फॉर्मेट का उपयोग कर सकते हैं।
  • CAD, engineering design, 3D modeling आदि में भी vector का use होता है।
उम्मीद है Raster और vector graphics के बारे में यह जानकारी आपके काम आएगी और अगली बार जब आप digital image पर काम करेंगे तो यह तय कर पायेंगे की अच्छे result के आपको कौनसा format चुनना है।

Tuesday, 20 March 2018

कौनसा Image Format use करें? JPEG, PNG, GIF, TIFF के बीच क्या अंतर है?

Image format in Hindi

Image के कई सारे formats होते हैं जिनमे से सबसे ज्यादा JPEG, PNG और GIF का उपयोग web pages में किया जाता है। सभी image format के अपने-अपने फायदे और नुकसान हैं इसके अलावा कुछ formats ऐसे भी हैं जो की किसी ख़ास काम के लिए बनायें गये हैं।

आपको यह जरूर पता होना चाहिए की कौन से काम के लिए आपको कौन सा इमेज फॉर्मेट उपयोग करना चाहिए और कौन से format के उपयोग से बचना चाहिए ताकि आपको optimum result मिल सके।

Image File Formats in Hindi

तो चलिए आज हम computer graphics के कुछ image formats के बारे में जानते हैं की आखिर उनमे क्या खूबियाँ और क्या खामियां हैं और उनका किस जगह use किया जाना चाहिए।

JPEG Format
jpeg example

JPEG का full form Joint Photographic Expert Group है, यह सबसे ज्यादा उपयोग होने वाला image format है। यह lossy compression का use करता है यानि की जब आप किसी image को JPEG format में save करते हैं तो यह उसमें से कुछ image information को ख़त्म कर देता है जिससे की image का size कम हो जाए।
  • JPEG में 24 bit color per pixel होते हैं और यह 16 million colors को support करता है।
  • Image को compress करके file size कम कर देता है।
  • Photography के लिए अधिकतर इसी format का use होता है और लगभग सभी digital cameras में इसका उपयोग होता है।
JPEG का कब Use करें?
  • Digital Photographs - Mobile, computer devices के लिए, online upload करने के लिए।
  • Printing के लिए - यदि आप high resolution में photo print करना चाहते हैं तो यह फॉर्मेट उपयोगी है।
JPEG का कब उपयोग न करें?
  • अगर आपको transparent image चाहिए तो इसके लिए JPEG सही नही है। आप इस format में transparent image नही बना सकते।
  • जिस इमेज में text हो, sharp edge वाले shapes हों उसके लिए JPEG use न करें क्योकिं compression के कारण text, color और edges blur हो सकते हैं।
  • Animated file चाहिए तो JPEG का use नही कर सकते।
GIF Format
GIF example

GIF का full form Graphics Interchange Format है। web image और ज्यादातर animated graphics के लिए इसका बहुत उपयोग किया जाता है। इसमें सिर्फ 256 colors होते हैं। कम कलर्स होने की वजह से file size बहुत कम हो जाता है।
  • GIF 8 bit format use करता है और सिर्फ 256 colors को support करता है।
  • GIF lossless होता इसलिए इसे बड़ी आसानी से customize किया जा सकता है।
GIF Image का कब उपयोग करें?
  • Simple images के लिए जिसमे ज्यादा colors न हों, GIF use कर सकते हैं।
  • Web animation, buttons, social media meme आदि के लिए बहुत उपयोगी है।
  • Transparent background चाहिए तब इसका use कर सकते हैं।
GIF का कब उपयोग न करें?
  • High quality photographs के लिए यह उपयुक्त नही है।
  • Gradient image design करने के लिए GIF use न करें क्योंकि इसके color limitation की वजह से image blur हो जायेगा।
  • Print design में इसका use नही कर सकते।
PNG Format
PNG Example

PNG का full form Portable Network Graphics है। इसे आप GIF का improved version भी समझ सकते हैं। इसे web को ध्यान में रख कर बनाया गया है। यह GIF जैसा ही है लेकिन PNG image में 16 millions colors हो सकते हैं।
  • GIF को replace करने के लिए PNG को बनाया गया था।
  • PNG file का size GIF के मुकाबले काफी कम होता है।
  • PNG 24 bit colors use कर सकता है।
  • इससे आप full transparent या alpha transparent image भी बना सकते हैं।
PNG का use कब करना चाहिए?
  • High-quality web graphics design करने के लिए PNG बहुत अच्छा है।
  • Smooth transparent design के लिए और alpha transparent जैसे drop shadow effect आदि के लिए PNG format उपयुक्त है।
  • Small size image के लिए।
PNG का use कब नही करना चाहिए?
  • Photographs के लिए इसका use नही करना चाहिए।
  • GIF की तरह PNG से animated graphic नही बना सकते।
  • आप printing के लिए design तैयार कर रहें हैं तो बेहतर है की आप JPEG use करें क्योंकि PNG format की image केवल screen के लिए सही होता है।
TIFF Format
TIFF example
TIFF का full form Tagged Image File Format है। इस format में image की quality बहुत ज्यादा होती है इसलिए इसका उपयोग desktop publishing और professional photography में किया जाता है।
  • TIFF image lossy या lossles दोनों हो सकता है।
  • Scanning और printing जैसे काम के लिए इसका ज्यादा उपयोग होता है।
  • JPEG, GIF की तरह इसमें भी image compress किया जा सकता है।
TIFF format का use कब होगा?
  • TIFF का use करें यदि आप high-quality graphics print करने जा रहें हैं, यदि lage size का image print करना है तो उसके लिए सबसे बढिया format है।
  • Scan किये document, photos की quality कम नही होने देना चाहते तो TIFF format में scan करें।
TIFF Format का उपयोग कब नही करना चाहिए?
  • Web graphic के लिए इसका use नही करना चाहिए यह printing के लिए बेहतर है।
  • High-quality online image के लिए इसका use न करें, इस format का file size बहुत बड़ा होता है, ज्यादा space लेता है और load होने में भी समय लेता है।
उम्मीद है आपको image formats की यह जानकारी अच्छी लगी होगी। यदि आप कुछ सवाल पूछना चाहते हैं या सुझाव देना चाहते हैं तो नीचे comment करके हमें जरूर बताएं।

Thursday, 1 March 2018

PHP क्या है? What is PHP in Hindi

What is PHP in Hindi
PHP in Hindi: PHP बहुत ही popular और powerful language है यदि आप web development सीखना चाहते हैं तो आपको PHP जरूर सीखना चाहिए। आज हम आपको इस article में बताएँगे की PHP क्या है? इसके क्या उपयोग हैं? यह काम कैसे करता है और इसके क्या-क्या फायदे व नुकसान हैं।

PHP क्या है? What is PHP in Hindi 

PHP का full form "PHP: Hypertext Preprocessor" है यह एक server side scripting language है जिसका उपयोग web development में किया जाता है।

Server side scripting यानी PHP में लिखा गया program हमेशा server में run होता है और जो भी output होता है वह HTML page के रूप में convert होकर user के web browser पर display होता है।

किसी website के HTML और CSS code को देखा जा सकता है लेकिन PHP के code को user देख नही सकता क्योंकि इसके कोड हमेशा server में रहते हैं और कभी भी client के system तक नही पहुँचते।

PHP एक बहुत ही powerful language है और आज internet पर मौजूद लाखों websites PHP का उपयोग कर रहें हैं।

लगभग सभी popular CMS जैसे Wordpress, Joomla, Drupal आदि PHP से ही बने हैं।

E-commerce हो या social networking की site हर जगह PHP का उपयोग हो रहा है।

Facebook की वेबसाइट भी PHP के code से बनी है।

अगर हम PHP के history के बारे में बात करें तो 1994 में Rasmus Lerdorf ने अपने online resume वाली website में आने वाले visitors को count करने के लिए PHP को बनाया था जिसे "Personal Home Page Tools" नाम दिया गया था।

समय के साथ इसमें कई सारे बदलाव किये गये इसका नाम बदल कर "PHP Hypertext Preprocessor" रखा गया और कुछ नई functionalities add किये गये।

PHP का क्या उपयोग है?

  • Dynamic website या web application बनाया जा सकता है।
  • वेबसाइट को database से connect कर सकते हैं।
  • PHP के जरिये database में data insert, update या delete किया जा सकता है।
  • User login system बनाया जा सकता है। server side validation भी हो सकता है।
  • PHP के जरिये आप यह तय कर सकते हैं की कौन सा user कौन से page को access कर सकता है।
  • Forms create कर सकते हैं जिसके जरिये user से data input करा कर database में store किया जा सकता है।
  • Email send और receive किया जा सकता है।
  • Browser के cookies को set और access किया जा सकता है।
  • Data encryption और decryption भी कर सकते हैं।

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

  • PHP के code को HTML के साथ लिखा जाता है लेकिन इसके execution के लिए server install होना जरुरी है।
  • PHP असल में एक software है जो की web server में installed होता है जहाँ यह web developer द्वारा निर्धारित tasks को perform करता है और इसके output को कुछ ही milliseconds में user के browser पर send कर देता है।
  • जब भी user अपने web browser के द्वारा किसी PHP document के लिए server को request send करता है तब server उस document को find out करने के बाद सबसे पहले PHP processor पर send कर देता है।
  • PHP processor पर दो प्रकार के operations perform होते हैं:
    • Copy mode: इस step में plain HTML को final output पर copy कर दिया जाता है।
    • Interpret mode: इसमें PHP के कोड को interpret यानि execute किया जाता है और उसके द्वारा प्राप्त output को final output में जोड़ दिया जाता है। 
How PHP works in Hindi


Advantages of PHP

  • PHP free और open source है यानि इसे आप फ्री में download करके उपयोग कर सकते हैं।
  • यह platform independent है यानि किसी भी platform जैसे Windows, Linux, Mac आदि में use किया जा सकता है।
  • इसका syntax बहुत आसान है इसलिए इसे बड़ी आसानी से सीखा जा सकता है।
  • इसका execution speed बहुत fast होता है।
  • Built-in database module का उपयोग कर बड़ी आसानी से database से connection create किया जा सकता है।
  • Powerful library support
  • Apache और IIS दोनों तरह के servers के लिए compatible है।

Disadvantages of PHP 

  • PHP से कोई large application develop करना काफी मुश्किल काम है क्योंकि यह highly modular नही है जिसकी वजह से किसी बड़े application को manage करना कठिन हो जाता है।
  • PHP open source है इसलिए इसके source code को कोई भी देख सकता है ऐसे में यदि code में कोई bug हो तो उसका गलत फायदा उठाया जा सकता है।


आज आपने इस article में जाना की PHP क्या है, यह काम कैसे करता है, इसके क्या फायदे और क्या कमियां हैं। हमें उम्मीद है की आपको यह जानकारी पसंद आई होगी। आगे आप इसी साईट पर PHP के tutorials भी पा सकते हैं| Notification पाने के लिए नीचे newsletter जरुर subscribe करें।

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 में अपने विचार रख सकते हैं|
Advertisement

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 में अपना विचार रख सकते हैं|