Sunday, 17 September 2017

jQuery क्या है? इसके क्या Advantages हैं

jquery-kya-hai

jQuery in Hindi: jQuery एक lightweight Javascript framework है| यानी की हम अपनी website पर Javascript को आसानी से use कर सकें इसके लिए jQuery को बनाया गया है|

jQuery से हम कई सारे effects create कर अपने website को और भी ज्यादा attractive और मजेदार बना सकते हैं|

कई सारे common tasks जिसके लिए Javascript में लम्बे-लम्बे lines के code लिखने पड़ते थे उसे jQuery में अलग-अलग  methods में divide कर दिया गया है जिसे जरूरत पड़ने पर हम आसानी से single line के कोड से call कर सकते हैं इससे समय और space दोनों की बचत होती है|

jQuery use करने के फायदे:

अब चलिए जानते हैं की यदि आप jQuery का उपयोग करना चाहते हैं तो आपको इससे क्या-क्या benefits मिलेंगे:
  • समझना और उपयोग करना आसान है: jQuery का सबसे बड़ा advantage यह है की इसका syntax बहुत ही सरल है जिसकी वजह से इसे सीखना और use करना आसान है|
  • Speed: speed बहुत ही मायने रखता है यदि आप Javascript में coding करते हैं तो आपको कई lines के code लिखने होंगे जबकि jQuery में आप यह काम कुछ ही lines के code से कर सकते हैं|
  • Cross browser compatibility: किसी web designer के लिए सबसे बड़ी problem यह होती है की वह जो design बना रहा है वह सभी browsers में एक जैसा दिखाई देगा या नही| लेकिन jQuery उपयोग करते समय आपको इस बारे में चिंता करने की जरूरत नही है  क्योंकी इसे बनाने वाली team ने इस cross browser  compatibility का पूरा ध्यान रखा है|
  • Large library: आपको internet पर कई सारे plugins मिल जायेंगे जिनका उपयोग करके आप jQuery के features को और extend कर सकते हैं|
  • Free: इसके लिए आपको किसी तरह किसी तरह के पैसे चुकाने की जरूरत नही है यह बिलकुल free और open source है|
  • Ajax support: आप अपनी वेबसाइट पर बड़ी आसानी से jQuery के साथ Ajax के features का भी उपयोग कर सकते हैं|

jQuery के features

jQuery के कई सारे features हैं जिनमे से सबसे important features कुछ इस प्रकार हैं:
  • HTML/DOM manipulation 
  • CSS manipulation 
  • HTML event methods 
  • Animations 
  • AJAX 
  • Utilities 

jQuery ही क्यों?

jQuery के अलावा और भी कई सारे Javascript frameworks हैं लेकिन jQuery सबसे ज्यादा use होने वाली और popular framework है|

कई सारी बड़ी-बड़ी companies jQuery का उपयोग करते हैं जिनमे से कुछ का नाम नीचे दिया गया है:
  • Google
  • Microsoft
  • Twitter
  • Amazon
  • IBM
  • Netflix
इससे आपको पता चल चुका होगा की jquery कितना powerful और उपयोगी framework है|

jQuery और Javascript में क्या अंतर है?

हर beginner के मन में यह सवाल जरूर आता है की आखिर jQuery और Javascript में क्या difference है| तो चलिए
  • Javascript एक scripting language है जो की web browser पर run होता है|  आप Javascript का उपयोग कर खुद से script तैयार कर सकते हैं|
  • Javascript अपने आप में एक complete programming language है जबकि jQuery उसका एक framework है|
  • jQuery एक प्रकार की library है, जिसे Javascript language में लिखा गया है|
  • Javascript के कई सारे complicated codes को simplify कर jQuery बनाया गया है|

क्या jQuery सीखने के लिए Javascript जानना जरूरी है?

यह इस बात पर निर्भर करता है की आप क्या बनाना चाहते हैं, यदि आप अपने साईट के लिए कुछ common चीजें जैसे dropdown menu, image slider, form validation आदि create करना चाहते हैं तो इसके लिए  jQuery plugins का उपयोग कर सकते हैं और इसके लिए आपको Javascript सीखने की जरूरत नही है

jQuery सीखने से पहले आपको HTML और CSS की जानकारी होनी जरूरी है|

यदि आप advanced level पर जाना चाहते हैं या खुद से कोई advanced script create करना चाहते हैं तो आपको Javascript में coding आनी चाहिए|

आज आपने इस article में जाना की jQuery क्या है, इसके क्या फायदे हैं, इसके अलावा आपने जाना की jQuery और Javascript में क्या deferences हैं|

हम आगे आपको jQuery कैसे use किया जाता है इस बारे में भी बताएँगे |

यदि आप कुछ सवाल पूछना चाहते हैं तो आप नीचे दिए comment box का उपयोग करें|

Friday, 8 September 2017

15 कारण - आपको Web Design क्यों सीखना चाहिए

why-learn-web-design-hindi


Web designing एक कला है| आजकल हर कोई अपने personal या professional use के वेबसाइट बना रहा है| आप एक वेबसाइट के जरिये खुद का brand बना सकते हैं और internet पर अपने business को promote कर सकते हैं| 

इस काम के लिए आप किसी web design professional को hire कर सकते हैं लेकिन सबसे बेहतर विकल्प यह है आप खुद website बनाना सीख लें| 

इसे सीखना कोई मुश्किल काम नही है, यह बहुत ही आसान है और सबसे अच्छी बात आप इस field में बेहतर career भी बना सकते हैं|


आज हम 15 कारणों के बारे में बात करेंगे जिनकी वजह से वेब डिजाईन सीखना आपके लिए फायदेमंद हो सकता है|

Web design सीखने के 15 कारण 


1. कम समय में सीख सकते हैं
Web designing एक ऐसी skill है जिसे सीखने के लिए आपको सालों साल मेहनत करने की जरूरत नही है| यह बहुत ही आसान है और आप कुछ दिनों में ही website बनाना सीख सकते हैं| इसके लिए सबसे पहले आप HTML और CSS से शुरुआत करें|

2. घर बैठे online सीख सकते हैं
आप चाहें तो कहीं किसी institute से web designing course भी कर सकते हैं लेकिन यह जरूरी नही है की आपके पास कोई certificate हो तभी आप web designer बन सकते हैं|  इसके अलावा इसे सीखने के लिए एक और बेहतर विकल्प यह है की आप अपने घर पर बैठ कर आराम से online सीख सकते हैं|
Internet पर कई सारे resources हैं जिनमे से एक webinhindi.com यानि की हमारा यह blog भी है जिसका उपयोग कर आप वेबसाइट बनाने की कला में महारथ हासिल कर सकते हैं|

3. अपना पैसा बचायें
आजकल वेबसाइट की जरूरत हर किसी को है, यदि आप पहले से कोई business चलाते हैं तो उसके लिए भी आपको वेबसाइट की जरूरत होगी जिसके लिए आप पैसे खर्च कर किसी web design professional को hire कर सकते हैं या आप खुद वेबसाइट बनाना सीख कर पैसे बचा सकते हैं|

4. कोई college degree की जरूरत नही है
जैसा की आपको पहले भी बताया की इसे सीखने के लिए आपको किसी प्रकार के certificates या degree की जरूरत नही है, और जहाँ तक रही job की बात तो आप अपनी designing skills और अनुभव से काम पा सकते हैं|

5. Freelancing projects पर काम कर सकते हैं
Web designing की कला में निपुण होने के बाद आप चाहें तो किसी company में job कर सकते हैं या  freelancing कर सकते हैं| 
Freelancing में होता यह है की आप सीधे client तक पहुँचते हैं और उससे project ले कर काम करना शुरू कर देते हैं और जब project complete हो जाये तो आपको पैसे मिल जाते हैं| 

इन सारे process को manage करने के लिए client और freelancer के बीच एक online freelancing platform होता है जिस पर आपको registration करना होता है|

6. कम समय में पैसे कमा सकते हैं
Website बनाना कितना आसान है यह depend करता है की आप किस तरह की वेबसाइट बना रहें हैं| आमतौर पर देखा जाये तो जिस प्रकार की website की जरूरत school, college, offices आदि को होती है उसे design करना बहुत आसान होता है जिसे आप एक-दो दिन में ही complete कर सकते हैं इसका मतलब यह है की कम समय में अच्छे पैसे कमा सकते हैं|  

7. कोई Investment की जरूरत नही है
Web designing सीखने और काम शुरू करने के लिए आपको किसी प्रकार की investments की जरूरत नही है आपके पास उपलब्ध एक computer/laptop और internet ही काफी है|

8. Entrepreneur बनिए - खुद का business शुरू करें
आपको किसी के under में काम करने की जरूरत नही है| खुद को train कीजिये और काम शुरू कर खुद का boss बनिए आप चाहें तो अपने दोस्तों को भी अपनी team में शामिल कर सकते हैं|

9. Jobs
Job करना कोई बुरी बात नही है, इससे आपको पैसे तो मिलेंगे ही और साथ में आपको काम का experience भी होगा जो  आपके skills को और improve करेगा|
कई सारी companies skilled web designers की तलाश में हैं और इस field में opportunities की कोई कमी नही है| 

10. अच्छी salary
किसी company में आप as a web designer अच्छी salary पा सकते हैं| payscale .com के अनुसार India में एक web designer की average salary 233,558 INR per year है जो की depend करता है आपके पास काम का कितना अनुभव है|

11. अपने ideas को reality में बदलें
अगर आपके पास कोई बढ़िया सा idea है तो उसे implement करके ढेरों पैसे कमा सकते हैं| आपका एक website आपको एक नई ऊँचाई तक पहुँचा सकता है बस जरूरत है तो सिर्फ एक अच्छे idea की|

12. घर बैठे काम करें
आपको काम करने के लिए किसी physical location या office की जरूरत नही है| आप घर पर या किसी भी जगह पर बैठ कर अपना काम करने के लिए स्वतंत्र हैं|

13. Part time काम कर सकते हैं
आप यदि कहीं दूसरी जगह job करते हैं या आपके पास समय की कमी है तो आप यह काम part time भी कर सकते हैं| आपको पूरा समय इसमें लगाने की जरूरत नही है और आपके लिए यह extra income का साधन भी बन सकता है|

14. खुद का training center शुरू कर सकते हैं
अपने skills और अनुभव को दूसरों के साथ share करके उनकी help करना बहुत अच्छी बात है और यदि आप web design expert बन जाते हैं तो खुद का training institute भी open कर सकते हैं जहाँ students को training provide कर अच्छा पैसा कमा सकते हैं|

15. अपनी creativity को enjoy करें
Creative लोगों के लिए web designing बहुत ही बढिया option है, इसमे आप नये-नये experiments कर सकते हैं और पूरी दुनिया को अपनी designing skills दिखा सकते हैं|

अगर आपने वेब डिजाईन सीखने के इन 15 कारणों को पढने के बाद तय कर लिया है की आपको भी web designing सीखनी है तो webinhindi.com आप जैसे लोगों के लिए ही बनायीं गयी है| आप यहाँ website development की सारी जानकारियाँ हासिल कर सकते हैं वो भी आपकी अपनी भाषा हिंदी में|

हमसे जुड़ने के लिए आप हमें subscribe कर सकते हैं या हमारा Facebook page like कर सकते हैं|

अपने सुझाव और सवाल आप हमें नीचे दिए गये comment box के माध्यम से भेज सकते हैं|

Saturday, 2 September 2017

CSS से Animation कैसे बनायें?

css-animation-tutorial-hindi
जैसा की आप जानते हैं की animation हर किसी के लिए interesting और मजेदार होता है ऐसे में यदि आप इसका  उपयोग अपनी website पर करते हैं तो  इससे आपकी वेबसाइट आपके audience के लिए और भी interesting हो सकती है|

लेकिन website के लिए animation कैसे बनायें? यह सवाल आपके मन में आ रहा होगा, तो चलिए आज आपको  इस article में बताते हैं की कैसे आप बड़ी आसानी से सिर्फ CSS से animation बना सकते हैं|

इससे पहले आपने CSS3 transition effects के बारे में पढ़ा था जिनका उपयोग करके भी simple CSS animations डिजाईन किया जा सकता है|

CSS से अपने website के लिए animation कैसे design करें ?

CSS में animation create करने से पहले आपको दो properties के बारे में जरूर पता होना चाहिए :
  • Keyframes : animation  कैसे दिखाई देगा उसमे कितने stages होंगे और उनके styles कैसे होंगे ये keyframe से  define किया जाता है|
  • Animation property : @keyframes बनाने के बाद उसे किसी element पर apply करने के लिए animation property का use किया जाता है|
चलिए अब इन दोनों को विस्तार से समझने की कोशिश करते हैं :

CSS Keyframes

इसके द्वारा हम animation के stages को set करते हैं| प्रत्येक @keyframes तीन चीजों से मिलकर बना होता है जो कुछ इस प्रकार हैं:
  1. Animation name: animation का नाम|
  2. Animation stages: हर एक stage को percentage से define किया जाता है| जहाँ 0% का मतलब beginning stage और 100% का मतलब ending state होता है| इन दोनों के बीच multiple stages define किये जा सकते हैं|
  3. CSS properties: CSS styles, जिसे हर stage के लिए define किया जा सकता है|
Example:
@keyframes scaleme {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

आप ऊपर example में देख सकते हैं हमने एक keyframes बनाया जिसका नाम scaleme रखा और उसके अंदर तीन stages define किये |

पहले stage में element की size transform property से scale करके छोटा  रखा जाएगा फिर इसे दुसरे stage जो की 60% से start होगा उसमे size  थोडा increase किया जायेगा और finally last stage में element अपने original size में display होगा|

CSS3 Animation Properties

@keyframes define करने के बाद एनीमेशन को properly work कराने के लिए CSS animation properties का use करना आवश्यक है|

Animation properties से @keyframes को किसी selector (या element) के लिए call किया जाता है|

एनीमेशन में multiple properties हो सकते हैं जिनमे से नीचे दिए गये दो properties का use करना जरूरी है:
animation-name: एनीमेशन का नाम, जिसे @keyframes में define किया गया हो

animation-duration: एनीमेशन का duration, seconds (जैसे 5s) या milliseconds (जैसे 100ms) में specify करने के लिए

Example:
div{
animation-duration: 2s;
animation-name: scaleme;
}

या shorthand syntax का उपयोग कर सकते हैं :
div{
animation: scaleme 2s;
}

इस example में हमने पहले बनाये गये keyframes को call करके div element को animate किया है जिसका duration 2 seconds set किया है|

Output


जैसा की हमने बताया animation-name और animation-duration ये दोनों properties सबसे  जरूरी हैं लेकिन इन दोनों के अलावा एनीमेशन के लिए और भी कई सारे additional properties हैं जिनका उयोग करके advanced और complex animations design किये जा सकते हैं|

ये सारे properties नीचे दिए गये हैं:
  • animation-iteration-count
  • animation-timing-function
  • animation-delay
  • animation-direction
  • animation-fill-mode
  • animation-play-state
अब चलिए एक-एक करके इनको समझते हैं और इनके examples देखते हैं:

animation-iteration-count

एनीमेशन कितने बार run होगा यह तय किया जाता है animation-iteration-count property से |

इसकी default value 1 होती है यदि एनीमेशन को लगातार बिना रुके चलाना हो तो उसके लिए value को infinite रखनी होगी|

Synatx:
animation-iteration-count: 5;

नीचे example दिया गया है जिसमे एनीमेशन 5 बार run होगा|

animation-timing-function:

Animation की speed curve define करने के लिए animation-timing-function property का use किया जाता है|
इस property की values कुछ इस प्रकार हो सकती है:
  • ease: इससे एनीमेशन की speed starting और ending में slow होती है जबकि बीच में fast होती है| यह default value है|
  • linear: इससे animation speed starting से ending तक same होती है|
  • ease-in: एनीमेशन starting में slow होता है 
  • ease-out: एनीमेशन की speed ending में slow हो जाती है   
  • ease-in-out: slow start और slow ending के लिए use होता है 
  • cubic-bezier(n,n,n,n): खुद से कोई custom timing create करने के लिए इसका उपयोग होगा 

Syntax:
animation-timing-function: ease-in;


Example:

Animation-Delay

एनीमेशन कब start होगा यह control करने के लिए animation-delay property का उपयोग किया जाता है|

इसकी value second या millisecond में specify किया जाता है | यदि value 2s है तो इसका मतलब है की एनीमेशन 2 seconds के बाद शुरू होगा|

Synatx:
animation-delay:3s;


animation-direction

यहाँ पर direction का मतलब है forward और reverse. animation reverse direction में run होगा, forward में होगा या alternate cycle में run होगा यह specify किया जाता है animation-direction property से|

इस property के कुछ values इस प्रकार हो सकते हैं:
  • normal (default): animation forward direction (0% से 100%) में play होगा 
  • reverse: reverse direction (100% से 0%) में play करने के लिए 
  • alternate: हर odd cycle (1, 3, 5,...) में forward direction और even cycle (2, 4, 6, ...) में reverse direction में run करने के लिए|

alternate-reverse: यह alternate का just उल्टा होता है | हर odd cycle में reverse और even cycle में forward direction में play होता है|

Syntax:
animation-direction: reverse;


animation-fill-mode: 

जब animation running state में नही होता (जब एनीमेशन end हो चुका हो या उसमे कोई delay हो) तब उस element का style कैसा होगा इसे specify करने के लिए animation-fill-mode property का उपयोग होता है|

इसके values कुछ इस प्रकार हो सकते हैं:
  • forwards: जब एनीमेशन finish हो जाता है तब target  element में वह style set हो जाता है जिसे हम final keyframe (100%) में define करते हैं|
  • backwards: एनीमेशनstart होने से पहले, target element पर first keyframe (0%) में define किये गया style apply हो जाता है|
  • both:  element पर forwards और backwards दोनों rules apply हो जाते है |
  • none: यह default value है, by default animation शुरू होने और समाप्त होने पर target element पर कोई style apply नही होता|

Syntax:
animation-fill-mode: forwards;

Example:


animation-play-state

animation-play-state property से यह specify किया जाता है की एनीमेशन play हो रहा है या paused है|

इसके values कुछ इस प्रकार हो सकते हैं:

  • playing: एनीमेशन अभी run हो रहा है 
  • paused: एनीमेशन अभी paused है 

Syntax:
animation-play-state: paused;

Example:

आगे पढ़ें: 


आज आपने इस article से basic CSS animations design करना सीख लिया है| यदि आप CSS animation के बारे में कुछ सवाल पूछना चाहते हैं तो आप नीचे comment box का उपयोग कर अपना सवाल पूछ सकते हैं|

Tuesday, 22 August 2017

Media Queries से Responsive Website कैसे बनायें

Responsive-website-kaise-banaye

पिछले article में आपने पढ़ा था की responsive web design क्या है और आपको इसकी जरूरत क्यों है? जिसमे आपने पढ़ा होगा की responsive website के क्या-क्या फायदे हैं और आज के समय में यह जरूरी क्यों है|

अब यदि आपने तय कर लिया है की आपको responsive website बनाना सीखना है तो आप बिलकुल सही जगह पर आये हैं|

आज आप इस article में CSS media queries का उपयोग करके step by step तरीके से एक responsive website design करना सीखेंगे|

इस article में हमने जो responsive website design किया है उसे समझने के लिए पहले आपको नीचे दिए गये कुछ बातों की जानकारी होनी जरूरी है:

Media Queries क्या है?

हम CSS media queries का उपयोग करेंगे इसलिए आपको इसकी जानकारी होनी जरूरी है| हम media queries का उपयोग कर अलग-अलग screen size वाले devices के लिए अलग-अलग CSS styles apply कर सकते हैं|

Viewport meta tag क्या है? 

Viewport का मतलब होता है वह area जो की user अपने browser पर देख पाता है|

अगर आपको अपने webpage को mobile optimized बनाना है तो आपको उस पेज के head tag के अन्दर viewport meta tag specify करना होगा|

viewport meta tag किसी large size वाले page को device के width के अनुसार scale down करके screen पर fit कर देता है|

यदि आप बिना viewport specify किये अपने web page को mobile device में run करके देखें तो हो सकता है उस पेज पर media queries apply न हो| ऐसा इसलिए क्योंकि आपका browser device width को समझ ही नहीं पायेगा और ऐसे में media query trigger ही नही होगा|

By default Android या iPhone जैसे mobile devices किसी web page को display करते समय उसे zoom-out कर देते हैं जिससे हो सकता है आपकी site जैसा आप चाहते हैं वैसा दिखाई ना दे|

इन सभी समस्याओं से बचने के लिए Viewport meta का उपयोग करें जिससे आप पेज content की width के अलावा zoom level को भी define कर सकते हैं

तो viewport define करना न भूलें, इसके लिए <head> में जा कर नीचे दिए गया syntax लिखें:

<meta name="viewport" content="width=device-width, initial-scale=1">

जहाँ width=device-width पेज की width को device के screen-width के अनुसार set करती है| initial-scale=1 से initial zoom level set किया जाता है|

Responsive Website कैसे बनायें?

अब आप responsive website बनाने के लिए नीचे दिए गये steps को follow करते जाएँ:

Step 1: सबसे पहले हम नीचे दिए गये image की तरह एक simple सा website layout यानि की structure design करते हैं :

website-layout

Step 2:  अब इस structure के अनुसार design बनाते हैं जो की नीचे दिए गये image की तरह दिखाई देगा:

rw-website-template

Step 3: अब इस design को implement करने के लिए इसका एक HTML structure बनाते हैं जो की कुछ इस प्रकार होगा:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Website</title>
</head>
<body>
div id=”wrapper”&gt;
<div id="header"></div>
<div id="nav"></div>
<section id="content">
<div class="row1"></div>
<div class="row2">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
<footer></footer>
</body>
</html>
Step 4: इस step में header वाले div के अंदर coding करेंगे और img tag से एक logo add करेंगे:
<div id="header">
<img src="header1.jpg">
</div>

Step 5: Navigation के लिए code लिखेंगे, इसके लिए nav id वाले div में menu के लिए un-ordered list बनायेंगे और उसमे menu items add करेंगे:
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Step 6: Content add करना शुरू करेंगे, <section> के अंदर एक row add करेंगे, इसके लिए एक div बनायेंगे और उसे class देंगे row1, अब इस div में एक heading और एक paragraph होगा:
<section id="content">
<div class="row1">
<h2>Welcome to Web Company</h2>
<p>Aenean aliquet sed tortor eget venenatis. Etiam commodo ac libero aliquet facilisis. Nulla volutpat feugiat leo ut interdum. Nulla erat tortor, elementum in tortor nec, vehicula malesuada ipsum. Proin sit amet vestibulum ipsum. Sed commodo id odio imperdiet mollis. In in dignissim enim. Cras massa justo, imperdiet non nulla quis, porta dapibus quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec lacus at ante volutpat scelerisque. Donec sed velit venenatis mi auctor ornare. Fusce non interdum erat.</p>
</div>
</section>

Step 7: <section> में एक और row insert करेंगे,  इसके लिए एक div बनायेंगे और उसे row2 नाम का class assign करेंगे, जिसके अंदर 4 boxes होंगे हर box में एक heading, image, paragraph और एक button होगें:
<div class="row2">
<h2>Our Services</h2>
<div class="box">
<h2>Web Design</h2>
<img src="unnamed.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius gravida metus, sed scelerisque ipsum scelerisque et. Etiam convallis massa non est vehicula, ut fermentum lorem elementum. Sed tincidunt ante elit, id tincidunt erat eleifend eu. Nullam at molestie leo. Maecenas vel tincidunt libero</p>
<a class="button" href="#">Read More</a></div>
<div class="box">
<h2>Web Development</h2>
<img src="icon-responsive-web-design.png">
<p>Pellentesque varius gravida metus, sed scelerisque ipsum scelerisque et. Etiam convallis massa non est vehicula, ut fermentum lorem elementum. Sed tincidunt ante elit, tincidunt ante elit id tincidunt erat eleifend eu. Nullam at molestie leo. Maecenas vel tincidunt libero. ut fermentum lorem elementum tincidunt ante elit.</p>
<a class="button" href="#">Read More</a></div>
<div class="box">
<h2>SEO Service</h2>
<img src="icon-responsive.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius gravida metus, sed scelerisque ipsum scelerisque et. Etiam convallis massa non est vehicula, ut fermentum lorem elementum. Sed tincidunt ante elit, id tincidunt erat eleifend eu. Nullam at molestie leo. Maecenas vel tincidunt libero</p>
<a class="button" href="#">Read More</a></div>
<div class="box">
<h2>Graphics Design</h2>
<img src="Web_Design-512.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius gravida metus, sed scelerisque ipsum scelerisque et. Etiam convallis massa non est vehicula, ut fermentum lorem elementum. Sed tincidunt ante elit, id tincidunt erat eleifend eu. Nullam at molestie leo. Maecenas vel tincidunt libero</p>
<a class="button" href="#">Read More</a></div>
</div>

Step 8:  Footer के HTML code लिखेंगे:
<div id="footer">
<p>Web Company &copy; Copyright 2017-18</p>
</div>

अब हमारा HTML page कुछ इस प्रकार दिखाई देगा:

basic-html-page


Step 9: HTML page बनाने के बाद CSS styling करना शुरू करेंगे, style.css नाम से एक file बनायेंगे और उसमे CSS की coding करना शुरू करेंगे| सबसे पहले सभी sections के लिए height-width और background-color specify करेंगे:
body {
  margin: 0;
  padding: 0
}
#wrapper {
  max-width: 1200px;
  background: #f2f2f2;
  margin: 0 auto
}
#header {
  width: 100%;
  height: 150px;
  background: #003664;
}
#nav {
  width: 100%;
  background: #e4e4e4;
  height: 50px;
}
#content {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}
#footer {
  width: 100%;
  height: 50px;
  background: #000;
  clear: both
}

Step 10: Menu design के लिए coding करेंगे

#nav {
  width: 100%;
  background-color: #272727;
  height: 57px;
  background-repeat: repeat;
}
#nav ul {
  float: left;
  list-style: none;
  width: 100%;
}
#nav ul li {
  float: left;
  list-style: none;
  margin-right: 80px;
}
#nav ul li:hover {
  background: #003664;
}
#nav ul li a {
  text-decoration: none;
  font-size: 14px;
  line-height: 16px;
  color: #fff;
  display: block;
  padding: 7px 10px;
  margin-bottom: 1px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
}
Step 11: CSS class row1 और row2 के लिए coding:

#content .row1 {
  padding: 20px;
  overflow: hidden
}
#content .row2 {
  padding: 10px;
  overflow: hidden
}

Step 12: यह सबसे important step है इस समझना आपके लिए बहुत जरूरी है| इस step में boxes के लिए code लिखेंगे, हमने content के अंदर चार boxes बनायें हैं जिनके लिए box1, box2, box3, और box4 नाम से class बनाया है|   इन classes को define करेंगे:
#content .box1, .box2, .box3, .box4 {
  width: 21%;
  padding: 10px;
  background: #e4e4e4;
  float: left;
}
#content .box1, .box2, .box3 {
  margin-right: 1%
}
#content .box1 {
  margin-left: 3%
}

सबसे पहले हमने चारों box के लिए width, padding, background-color set किया और सभी को एक के बाद एक display करने के लिए float:left किया |

सभी boxes के बीच space दिखाने के लिए margin property का उपयोग करेंगे|

margin specify करते समय हमें ध्यान रखना है की हमें चारों बॉक्स को एक ही line में display करना हैं और सभी के बीच बराबर space होने चाहिए|

हमें first वाले box को left से space देना है जिसके लिए margin-left use करेंगे और box1, box2, box3 के लिए margin-right से right side में margin apply करेंगे|

यहाँ पर ध्यान देने वाली बात है की हम last वाले box के लिए को margin use नही करेंगे|

Step 13: Box के अंदर वाले image को center पर लायेंगे और button के लिए coding करेंगे:

Image को center में display करने के लिए हमें इसे display:block; से block element बनाना होगा उसके बाद margin:0 auto; से center करना होगा:
#content .row2 img{display: block; margin: 0 auto;}

Read more button बनाने के लिए अलग से class बनाया है जिसे define करेंगे:
.button {
  display: block;
  background: #003664;
  padding: 5px;
  color: #fff;
  text-decoration: none;
  font-family: arial;
  font-weight: 700;
  text-align: center
}

Step 14: Responsive design बनाने के लिए अलग-अलग devices के लिए media query breakpoints बनायेंगे|

 हम यहाँ पर अलग-अलग screen sizes के अनुसार तीन breakpoints का use करेंगे:
  1. @media only screen and (max-width:980px) : ऐसे devices जिनकी screen-width 980px या उससे कम है 
  2. @media only screen and (max-width:768px) :  768px या उससे कम वाले devices के लिए 
  3. @media only screen and (max-width:320px): छोटे screen जैसे mobile, smartphones आदि के लिए 
Step 15: अब इन तीनो media query breakpoints के लिए styling करते हैं| हमने सारे codes लिखने की जरूरत नही है, सिर्फ उन्ही elements के लिए code लिखेंगे जिसके लिए हमें changes करना है:
  @media only screen and (max-width:980px) {
  #content .box1, .box2, .box3, .box4 {
    width: 43%;
    margin-top: 3%
  }
  #content .box1, .box3 {
    margin-right: 3%
  }
  #content .box1, .box3 {
    margin-left: 3%
  }
}
@media only screen and (max-width:768px) {
  #content .box1, .box2, .box3, .box4 {
    width: 90%;
    margin: 2%;
  }
}
@media only screen and (max-width:320px) {
  #content .box {
    width: 100%;
    margin: 5px;
  }
}

इन codes का मतलब यह है की जब screen की size define किये गये max-width  के बराबर या उससे कम होगी तब curly braces के अंदर वाले codes execute हो जायेंगे|

Step 15: अब आपका responsive website तैयार है|  जो की अलग-अलग devices पर नीचे दिए गए image की तरह दिखाई देगा:
RWD-tutorial

Responsive Design के लिए Final HTML CSS Code 

आप इस design की पूरी HTML और CSS coding नीचे देख सकते हैं:

HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Responsive website using media queries</title>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="header1.jpg"></div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<section id="content">
<div class="row1">
<h2>Welcome to Web Company</h2>
<p>Aenean aliquet sed tortor eget venenatis. Etiam commodo ac libero aliquet facilisis. Nulla volutpat feugiat leo ut interdum. Nulla erat tortor, elementum in tortor nec, vehicula malesuada ipsum. Proin sit amet vestibulum ipsum. Sed commodo id odio imperdiet mollis. In in dignissim enim. Cras massa justo, imperdiet non nulla quis, porta dapibus quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec lacus at ante volutpat scelerisque. Donec sed velit venenatis mi auctor ornare. Fusce non interdum erat.</p>
</div>
<div class="row2">
<h2>Our Services</h2>
<div class="box1">
<h2>Web Design</h2>
<img src="unnamed.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius gravida metus, sed scelerisque ipsum scelerisque et. Etiam convallis massa non est vehicula, ut fermentum lorem elementum. Sed tincidunt ante elit, id tincidunt erat eleifend eu. Nullam at molestie leo. Maecenas vel tincidunt libero</p>
<a class="button" href="#">Read More</a></div>
<div class="box2">
<h2>Web Development</h2>
<img src="icon-responsive-web-design.png">
<p>Pellentesque varius gravida metus, sed scelerisque ipsum scelerisque et. Etiam convallis massa non est vehicula, ut fermentum lorem elementum. Sed tincidunt ante elit, tincidunt ante elit id tincidunt erat eleifend eu. Nullam at molestie leo. Maecenas vel tincidunt libero. ut fermentum lorem elementum tincidunt.</p>
<a class="button" href="#">Read More</a></div>
<div class="box3">
<h2>SEO Service</h2>
<img src="icon-responsive.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius gravida metus, sed scelerisque ipsum scelerisque et. Etiam convallis massa non est vehicula, ut fermentum lorem elementum. Sed tincidunt ante elit, id tincidunt erat eleifend eu. Nullam at molestie leo. Maecenas vel tincidunt libero</p>
<a class="button" href="#">Read More</a></div>
<div class="box4">
<h2>Graphics Design</h2>
<img src="Web_Design-512.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius gravida metus, sed scelerisque ipsum scelerisque et. Etiam convallis massa non est vehicula, ut fermentum lorem elementum. Sed tincidunt ante elit, id tincidunt erat eleifend eu. Nullam at molestie leo. Maecenas vel tincidunt libero</p>
<a class="button" href="#">Read More</a></div>
</div>
</section>
<div id="footer">
<p>&copy; Copyright 2017-18</p>
</div>
</div>
</body>
</html>

CSS Code:
/* ================ Basic Structure ============= */

body {
  margin: 0;
  padding: 0
}
#wrapper {
  max-width: 1200px;
  background: #f2f2f2;
  margin: 0 auto
}
#header {
  width: 100%;
  height: 150px;
  background: #003664;
}
#nav {
  width: 100%;
  background: #e4e4e4;
  height: 50px;
}
#content {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}
#footer {
  width: 100%;
  height: 50px;
  background: #000;
  clear: both
}

/* ============ navigation ============= */

#nav {
  width: 100%;
  background-color: #272727;
  height: 57px;
  background-repeat: repeat;
}
#nav ul {
  float: left;
  list-style: none;
  width: 100%;
}
#nav ul li {
  float: left;
  list-style: none;
  margin-right: 80px;
}
#nav ul li:hover {
  background: #003664;
}
#nav ul li a {
  text-decoration: none;
  font-size: 14px;
  line-height: 16px;
  color: #fff;
  display: block;
  padding: 7px 10px;
  margin-bottom: 1px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
}

/* =============== Contents =========== */

#content .box1, .box2, .box3, .box4 {
  width: 21%;
  padding: 10px;
  background: #e4e4e4;
  float: left;
}
#content p {
  text-align: justify
}
#content h2 {
  text-align: center
}

/* ----------row1 and row2----------*/

#content .row1 {
  padding: 20px;
  overflow: hidden
}
#content .row2 {
  padding: 10px;
  overflow: hidden
}

/*-----------boxes---------*/

#content .box1, .box2, .box3 {
  margin-right: 1%
}
#content .box1 {
  margin-left: 3%
}
#content .row2 img {
  display: block;
  margin: 0 auto;
}

/*----------Read More Button--------*/

.button {
  display: block;
  background: #003664;
  padding: 5px;
  color: #fff;
  text-decoration: none;
  font-family: arial;
  font-weight: 700;
  text-align: center
}

/*================= Media Query Breakpoint 1 ============*/

@media only screen and (max-width:980px) {
  #content .box1, .box2, .box3, .box4 {
    width: 43%;
    margin-top: 3%
  }
  #content .box1, .box3 {
    margin-right: 3%
  }
  #content .box1, .box3 {
    margin-left: 3%
  }
}

/*================= Media Query Breakpoint 2 ============*/

@media only screen and (max-width:768px) {
  #content .box1, .box2, .box3, .box4 {
    width: 90%;
    margin: 2%;
  }
  #nav {
    width: 100%
  }
}

/*================= Media Query Breakpoint 3 ============*/

@media only screen and (max-width:320px) {
  #content .box1, .box2, box3, .box4 {
    width: 100%;
    margin: 5px;
  }
  #header img {
    width: 100%;
  }
}

आगे पढ़ें:

अगर आप ऊपर दिए सारे steps follow करते हैं तो आप बड़ी आसानी से एक responsive website design कर सकते हैं|
आप अपनी आवश्यकता अनुसार इसके layout design में changes भी कर सकते हैं| इसमें यदि कोई परेशानी हो तो हमें जरूर बतायें|

Monday, 14 August 2017

Responsive Web Design क्या है और आपको इसकी जरूरत क्यों है?

responsive-webdesign-kya-hai

कुछ सालों पहले तक website की design सिर्फ desktop या laptop के screen sizes को ध्यान में रख कर fixed-width design बनायीं जाती थी क्योकि उस समय छोटे screen size वाले devices का चलन बहुत कम था और लोग website visit करने के लिए अपने desktop computer का उपयोग किया करते थे|

लेकिन जब से mobile device और smartphones के विकास में तेजी आई है तब से mobile version websites की requirement बढ़ गयी है| 

अब लोग अपने smartphone से website visit करना पसंद कर रहें हैं, ऐसे में जितना जल्दी हो सके आपको अपनी site mobile friendly बना लेनी चाहिए|

Responsive Web Design की शुरुआत कैसे हुई?

Smartphones और mobile devices use करने वालों की संख्या बढ़ने के साथ-साथ एक समस्या यह आई की web designers किसी fixed-width website को अलग-अलग size के screens पर सही तरीके से नही दिखा सकते थे|

पहले तो इस समस्या से निपटने के लिए web designers ने एक रास्ता निकाला जिसमे desktop और mobile devices के लिए अलग-अलग sites बनाया जाता था |

लेकिन यह रास्ता भी इतना आसान नही था, हर screen sizes और resolutions के लिए अलग-अलग versions create करना बिलकुल impossible सा काम था|

अगर एक वेबसाइट के अलग-अलग versions बनाये जाते तो उसका maintenance cost भी बढ़ जाता और separate sites के promotion और SEO ranking के लिए अलग मेहनत करनी पड़ती|

Finally 2010 में इन सभी समस्याओं को सुलझाने के लिए एक web designer Ethan Marcotte ने website design करने का एक नया तरीका निकाला जिसे उन्होंने Responsive Web Design (RWD) नाम दिया|

Responsive Web Design क्या है ?

Responsive web design एक ऐसी प्रक्रिया है जिसमे वेबसाइट को कुछ इस तरह से design किया जाता है की वह desktop, laptop, tablet से लेकर छोटी screen वाले mobile devices पर भी screen size और orientation के अनुसार अपने layout को adjust कर लेता है|

इसे समझने के लिए आप नीचे दिया गया animation देखें जिसमे हमने Ethan Marcotte की responsive वेबसाइट को test किया है|
ethan-marcotte-website-responsive-check

आपकी website responsive क्यों होनी चाहिए?

StatCounter.com द्वारा G20 देशों में किये गये survey के अनुसार India में बाकि देशों के मुकाबले सबसे ज्यादा (लगभग 79%) लोग mobile devices का उपयोग internet access करने के लिए करते हैं|
mobile-users-india

इस आंकड़े से आप समझ सकते हैं की आज के समय में यदि आप mobile friendly website का उपयोग नही करेंगे तो आप इन 79% लोगों तक अपनी वेबसाइट को नही पहुँचा पाएंगे|

Responsive website के फायदे:

  • Mobile traffic बढ़ेगी: अगर आपकी वेबसाइट responsive है तो इसे mobile visitors जरूर पसंद करेंगे और इससे website की traffic जरूर बढ़ेगी| 
  • Website की loading speed increase होगी: अगर आपने अपनी website  को mobile और tablets के लिए optimize किया है तो इससे webpages को open होने में ज्यादा समय नही लगेगा और site की speed improve होगी|
  • इसे manage करना आसान है: अगर आप desktop और mobile के लिए अलग sites बनाते हैं तो जाहिर सी बात है दो अलग-अलग sites को manage करना promote करना आसान नही होगा| लेकिन यदि आपकी वेबसाइट responsive है तो एक single site से आपका काम हो जायेगा|
  • Google भी recommend करता है: RWD गूगल को इसलिए पसंद है क्योंकि responsive website की URL सभी devices के लिए same होती है जिससे गूगल को इसे crawl करने indexing करने और समझने में आसानी होती है|

Responsive Web design के 3 Major Elements

Ethan Marcotte के अनुसार RWD तीन मुख्य भाग fluid grid, flexible images, और media queries से मिलकर बना हैं|

यदि आप web designing सीख रहें हैं तो आपको RWD के इन 3 मुख्य parts के बारे में पता होना चाहिए |

तो चलिए आज हम RWD के 3 major elements के बारे में जानते हैं:

Fluid Grid 

 ज्यादातर website के elements के size को pixel में set किया जाता है जो की fixed होता, लेकिन fluid grid के अनुसार website layout की height और width को pixel में set करने की जगह हम percentage का उपयोग करते हैं|

Fluid layout की size को percentage में define किया जाता है जिससे वह किसी भी screen size के अनुसार अपनी height-width को resize कर सकता है |

Flexible Images

सिर्फ fluid layout बनाने से काम नही चलने वाला क्योंकि जब तक पेज के सारे components flexible नही होंगे वह browser पर अच्छे से render नही हो पाएगा |

हमें images को भी flexible बनाना है जिससे की वह लगभग सभी screen sizes पर adjust हो सके|

Flexible image create करने के लिए हमें इसकी size को CSS से percentage में define करना होगा जिसके लिए max-width, max-height property का use करना होगा|

img{max-width:100%;}

Media Queries

CSS Media queries बहुत ही कमाल की feature है जिसके जरिये हम अलग-अलग media types जैसे screen, print, handheld आदि पर अलग-अलग तरीके से layout को display करा सकते हैं|

Media queries का उपयोग कर अलग-अलग screen resolution और orientation के अनुसार वेबसाइट के layout को customize कर सकते हैं|

Media queries क्या है और इसका कैसे उपयोग किया जाय इसको समझाने के लिए हमने इसके लिए अलग से article लिखा है जिसे पढने के लिए आप यहाँ visit कर सकते हैं|

कैसे पता करें website responsive है या नही?

अगर आपको पता करना है की कोई वेबसाइट responsive है या नही तो इसका सबसे आसान तरीका है आप उस site को browser बार open करें और फिर browser window की size को कम या ज्यादा करके देखें अगर वेबसाइट के components shift होते हैं और window size के अनुसार adjust हो जाते हैं तो समझ लीजिये की वह साईट responsive है|

इस काम के लिए आप browser में उपलब्ध developer tools या किसी online tool जैसे isresponsive.com या responsinator.com का भी उपयोग कर सकते हैं|


अब आप इस article से समझ गए होंगे की Responsive Web Design क्या है और आपको इसकी जरूरत क्यों है|
यदि आप RWD से जुड़े कोई सवाल पूछना चाहते हैं या इस article के बारे में कुछ कहना चाहते हैं तो नीचे दिए comment box का जरूर उपयोग करें|