lesson1.html

<!DOCTYPE HTML>
<html lang="bn-BD">
<head>
	<meta charset="UTF-8">
	<title>আমার ওয়েব : অধ্যায় ১</title>
	<link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy|Alfa+Slab+One' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="prism/prism.css">
</head>
<body>

<hgroup>
  <h1>আসলে ওয়েব কি? কেন এটা এত মজার?</h1>
  <h2>আমার ওয়েব : অধ্যায় ১</h2>
</hgroup>

<nav>
  <p><a href="index.html">প্রধান সূচিপত্র</a></p>
  <p>পরবর্তী:<br><a href="lesson2.html">Getting started</a></p>
</nav>

  <main>

  <p>স্বাগতম <em>আমার ওয়েবে</em>.এটি একটি দশ সপ্তাহের কোর্স , যার লক্ষ্য হল যারা ওয়েব ডিজাইনে একে বারে নতুনদের তাদেরকে ওয়েব ডিজাইনের প্রাথমিক কিছু জিনিস শেখানো। আমাদের হাতে যথেষ্ঠ পরিমাণে সময় নেই তোমাকে ওয়েব সাইট তৈরিতে দক্ষ করে তুলতে, কিন্তু আমরা তোমাকে ওয়েব ডিজাইন শেখা  শুরু করতে সাহায্য করতে পারি , এবং আমরা তোমাকে তোমার নিজের পথে চলতে এবং আরো শিখতে উৎসাহ দিবো।</p>

  <p>এই অংশে আমরা দেখব ওয়েব কেন এত মজাদার এবং কিভাবে এটি কাজ করে, এবং শেষের দিকে তোমার স্কুলের ওয়েব সাইটের সঙ্গে একটুখানি হ্যাকিং!</p>

  <h2>ওয়েব কি,এবং কেন এটা এত মজার?</h2>

  <iframe src="//slid.es/chrisdavidmills/what-is-the-web/embed" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

  <p>তুমি আরো দেখতে পারো <a href="http://slid.es/chrisdavidmills/what-is-the-web">"ওয়েব কি?"</a>এর নিজস্ব পেজে।এই পেজেন্টটেশনটি তৈরি করতে ব্যবহার করা হয়েছে <a href="http://slid.es/">slid.es</a>, যেটি আবার তৈরি হয়েছে<a href="https://github.com/hakimel/reveal.js/">RevealJS</a> নামক জাভাস্ক্রিপ্ট লাইব্রেরী দিয়ে।</p>

  <h2>ওয়েব কিভাবে কাজ করে?</h2>

  <p>ওয়েব তৈরিতে  টেকনোলজির একটি সিরিজ ব্যবহার করা হয়েছে তথ্য আদান-প্রদান করার জন্য, এবং কিছু প্রোগ্রামিং ভাষা ব্যবহার করা হয়েছে যাতে তুমি তোমার মত করে তথ্যসমূহ দেখতে পারো। নিচে তার মধ্যে কয়েকটি টেকনোলজি সম্পর্কে আলোচনা করা হয়েছে:</p>

  <ul>
    <li>ক্লায়েন্ট :এটি হল তোমার বাড়ীতে থাকা কম্পিউটার যেটি তুমি ওয়েবে প্রবেশ করার জন্য ব্যবহার করো।</li>
    <li>সার্ভার :এটি একটি কম্পিউটার যেটি কোন স্থানের একটি রুমে বসানো থাকে,এটি ওয়েব সাইট সংরক্ষণ করে। তুমি যখন তোমার কম্পিউটার  দিয়ে কোন ওয়েব সাইটে প্রবেশ করো,তখন সার্ভার থেকে তোমার ক্লায়েন্ট কম্পিউটারে ওয়েব সাইটির ডাটার একটি কপি পাঠানো হয় যাতে তুমি তা দেখতে পাও।</li>
    <li>তোমার ইন্টারনেট সংযোগ: তোমাকে ওয়েবে ডাটা আদান-প্রদান করার অনুমতি প্রদান করে।এটি সাধারণ ভাবে একটি বিরাট রাস্তার মত যা দ্বারা মানুষ এবং গাড়ী যাতায়াত করতে পারে। </li>
    <li><acronym title="Transmission Control Protocol">TCP</acronym>/<acronym title="Internet Protocol">IP</acronym>: তোমার ডাটা কিভাবে রাস্তা দিয়ে যাতায়াত করবে তা নিদের্শ করে।এটি কার এবং বাসের মত মানুষ যেগুলো যাতায়াতের জন্য ব্যবহার করে।</li>
    <li><acronym title="HyperText Transfer Protocol">HTTP</acronym>: কিভাবে  এবং কখন তথ্য ক্লায়েন্ট এবং সার্ভারের মধ্যে পাঠানো উচিত তা নিধারণ করে। এটি কিছু লোকের মত যারা সিদ্ধান্ত নেয় রাস্তা দিয়ে এগিয়ে যেতে তাদের কি ধরণের ভ্রমণ প্রয়োজন, কতদূর তাদের যেতে হবে, যাতায়াতের কোন ধরণের মাধ্যম  তাদের ব্যবহার করা উচিত, ইত্যাদি।</li>
    <li><acronym title="Domain Name Server">DNS</acronym>: ডোমেন নেইম সার্ভার হল অনেকটা ওয়েব সাইটের ঠিকানা বইয়ের মত। যখন তুমি ব্রাউজারে কোন অ্যাড্রেস টাইপ করো তখন ওয়েব সাইটটি তোমার কাছে প্রাপ্ত হওয়ার আগে  ব্রাউজার ওয়েব সাইটটি কোথায় আছে তা খুঁজতে ডোমেন নেইম সার্ভারে যায়, বিষয়টা অনেকটা তুমি তোমার ঠিকানা বই থেকে কারো ঠিকানা খুঁজে বের করার মত যাতে তুমি তার সাথে দেখা করতে পারো।  তোমার ব্রাউজারে এটি টাইপ করে http://212.58.251.195 দেখো।</li>
    <li><acronym title="HyperText Markup Language">HTML</acronym>, <acronym title="Cascading Style Sheets">CSS</acronym> and JavaScript: ওয়েব সাইট তৈরি করার জন্য ব্যবহৃত প্রধান তিনটি প্রোগ্রামিং ল্যাংগুয়েজ।</li>
    <li>Assets: এটি অনান্য সকল উপাদানের সমষ্টিগত নাম যেগুলোর সমন্বয়ে একট ওয়েব সাইট তৈরি হয়, যেমন ইমেজ ফাইল, এমপিথ্রি এবং ভিডিও,ওয়ার্ড ডকুমেন্ট, পিডএফ,ইত্যাদি।</li>
  </ul>

  <h3>ক্লায়েট এবং সার্ভারের একটি খেলা</h3>

  <p>চলো একটি গেম খেলি! গেমটি আমাদের যা যা প্রয়োজন:</p>

  <ul>
    <li>কিছু লেগো ইঁট (বা কোন ধরণের কিছু রঙ্গিন কার্ড)</li>
    <li>একজন লোক ওয়েব সার্ভার হিসেবে খেলার জন্য</li>
    <li>একজন লোক HTTP হিসেবে খেলার  জন্য।</li>
    <li>২-৩ লোক ক্লায়েন্ট হিসেবে খেলার জন্য</li>
    <li>একজন লোক DNS হিসেবে অভিনয় করার জন্য</li>
    <li>এবং আমাদের ওয়েব সাইটের ডাটা হিসেবে খেলার জন্য উপযুক্ত সংখ্যক মানুষ</li>
  </ul>
  
  <p>প্রথমেই,একটি সফল ওয়েব অনুরোধ:</p>

  <ol>
    <li> প্রথমে ক্লায়েন্টরা একটি ওয়েব পেজের জন্য অনুরোধ করবে।</li>
    <li> ক্লায়েন্টের ওয়েব ব্রাউজার DNS ব্যবহার করে ওয়েব সাইটির আইপি অ্যাড্রেস খুজবে।</li>
    <li>HTTP সার্ভারকে জানাবে যে ক্লায়েন্টরা একটি ওয়েব সাইটের জন্য অনুরোধ করেছেন, সাথে সার্ভারের কাছে একটি মেসেজ পাঠাবে। একে বলে HTTP অনুরোধ।</li>
    <li>ক্লায়েন্টকে ওয়েব সাইট না দেখানোর কোন কারণ না থাকলে, সার্ভার উত্তর দিবে "200, OK". HTTP ক্লায়েন্টের কাছে এই উত্তর ফেরত পাঠাবে।</li>
    <li>ওয়েব সাইটের ডাটাকে ক্লায়েন্টের কাছে পাঠানো হবে। প্রত্যেক অনুরোধের জন্য একটি করে ডাটার কপি পাঠাবে।</li>  
    <li> ক্লায়েন্ট কম্পিউটারটি ডাটাকে একটি কর্মরত ওয়েব সাইটে উপস্থাপন করবে যাতে এর ব্যবহারকারী এর সংঙ্গে সম্পৃক্ত হতে পারে।</li>
  </ol>

<p>এখন, ব্যার্থ ওয়েব অনুরোধ:</p>

  <ol>
    <li>প্রথমে ক্লায়েন্টরা একটি ওয়েব সাইটের জন্য অনুরোধ করবে, কিন্তু তারা ঠিকানাটা পেয়েছে তাতে সামান্য ভুল আছে।</li>
    <li>ক্লায়েন্টের ওয়েব ব্রা্উজার DNS ব্যবহার করে ক্লায়েন্টের দেওয়া আইপি অ্যাড্রেসটি খুঁজে দেখবে।</li>
    <li>ওয়েব সাইটি যেহেতু খুঁজে পাওয়া যাবে না, তাই HTTP ক্লায়েন্টকে "404, NOT FOUND" এই উত্তরটি ফেরত পাঠাবে।</li>
  </ol>

<p>যখন ডাটা পাঠানো হয়, তখন এগুলো ক্ষুদ্র ক্ষুদ্র অংশে বিভক্ত থাকে যাদের<em>প্যাকেট</em> বলা হয়। আমাদের প্রত্যেকটি ডাটাকে লোকজন একটি প্যাকেট হিসেবে বিবেচনা করে! যদি ডাটাগুলোকে ক্লায়েন্ট কম্পিউটারের কাছে পাঠানোর আগে প্যাকেটে বিভক্ত না করা হত, তবে সব জায়গায় এগুলো পাঠানো আরও কঠিন হত। ব্যাপারটা অনেকটা তোমার বাড়ীর সামনের দরজা দিয়ে আলমারী নিয়ে সিঁড়ি দিয়ে উঠিয়ে তোমার শোবার ঘরে রাখার মত।  তোমার আলমারীকে কয়েকটা খন্ডে বিভক্ত করে সিঁড়ি দিয়ে তোমার শোবার ঘরে নিয়ে গিয়ে একত্রে সংযোগ করা অনেক সহজ, সম্পূন্ন আলমারীকে সিঁড়ি দিয়ে একবারে বহন করে নিয়ে যাওয়ার চেয়ে! </p>

<h2>The open source, hackable web</h2>

<p>As I mentioned before, one of the main principles the Web was created on was being developed openly and made available to all for free. This is a very good thing for humanity: think about how much the Web shapes our lives. It would be very scary indeed if one company or government was in control of the Web, and started developing it in secret.</p>

<p>ওয়েব তৈরি হয়েছিল ওপেন স্ট্যাডান্টের সিরিজের উপর ভিত্তি করে, অর্থাৎ তুমি তোমার কোড যে কোন কম্পিউটারে রান করাতে পারবে যেটিতে শুধু একটি ওয়েব ব্রাউজার আছে , এবং তোমাকে ওয়েব তৈরি করতে কাউকে কোন কিছু দিতে হবে না , শুধুমাত্র তুমি যে কম্পিউটারটি ব্যবহার করছ সেটি এবং ইন্টারনেট সংযোগের খরচ ছাড়া।</p>

<p>স্ট্যাডান্টগুলো খুবই গুরত্বপূর্ণ -এগুলো আমাদের জীবনযাত্রাকে অনেক সহজ করে দেয়। এগুলো একি রকম ভাবে কাজ করে যেমন বাস্তব জীবনে এগুলো যেভাবে কাজ করে। একবার ভাবো এটা কত সহজ হতো যদি আমাদের দেশে আমরা যে সকল সরঞ্জামাদি ব্যবহার করি তাদের সবার বৈদ্যুতিক সকেট যদি একি রকম হতো, এবং সব ধরণের ইস্কুপ যদি ২-৩ ধরণের স্ক্র-ড্রাইভার দ্বারা যদি খোলা যেত।</p>

<p>এই উম্মুক্তোতার আরেকটি দিক হল তুমি যেকোন ওয়েব সাইটের কোড দেখতে পারবে,এবং জানতে পারবে সেগুলো কিভাবে কাজ করে। প্রত্যেকটি ব্রা্উজারের "View source" বলে একটি অপশন থাকে। চলো এটা চেষ্টা করে দেখি। শেখার জন্য এটা খু্বই উপকারী। ওয়েব ডেভলপমেন্ট কমিউনিটিও উম্মুক্ত,এক সংঙ্গে কাজ করার উপযোগী এবং সাহায্যপ্রবণ। অনেক লোক আপনাকে ওয়েব ডিজাইন ও ডেভলপমেন্ট শেখাতে আর্টিকেল প্রকাশ করে। উদাহরণস্বরূপ, আমি আমার বেশীর ভাগ কাজই <a href="https://developer.mozilla.org/en-US/">মোজিলা ডেভলপার নের্টওয়ার্কে</a> প্রকাশ করি। সাধারণত হাজার হাজার মানুষ এই ওয়েব সাইটে অবদান রাখে।</p> 

<p>তুমি এমনকি অন্যজনের ওয়েব সাইটে তোমার কোড লিখতে পারবে এবং এর ফলাফলও দেখতে পারবে। তুমি এটা ব্রাউজারের অ্যাড-অনস কিংবা এক্সটেনশন ব্যবহার করে করেত পার। চলো এর মত কিছু দেখি।</p>

<h2>চলো এবার ওয়েবকে দেখি এক্সরে গগোলস্ এর সাথে !</h2>

<p>  প্রথমে একটি অ্যাপ্লিকেশনের সাহায্যে কিছু ওয়েব কোড দেখে আমরা এই সপ্তাহ শেষ করব, যার নাম <a href="https://goggles.webmaker.org/">Xray Goggles</a>.</p>

<ol>
  <li>উপরের লিংঙ্কটিতে ক্লিক করো।</li>
  <li>এই পেজে ,  "X-Ray Goggles" বাটনটিতে ক্লিক করো। এখন তুমি যখন তোমার মাউস পয়েন্টারকে পেজের মধ্যে নড়াচ্ছো, তখন পেজের বিভিন্ন অংশ হাইলাইট হয়ে তোমাকে বলছে যে ওই অংশের জন্য কোন কোড ব্যবহার করা হয়েছে।</li>
  <li>পেজের একেবারে উপরে "X-Ray Goggles" টাইটেলটি তে ক্লিক করো: একটি নতুন উইন্ডো ওপেন হবে এবং তোমাকে পেজটি সম্পাদনা করার অনুমতি দিবে!</li>
  <li>পেজটির টাইটেল টেক্সট কিংবা অন্যকিছু পরিবর্তন করো।</li>
  <li> "Commit changes" বাটনটিতে ক্লিক করো: এখন তুমি দেখবে যে পেজটির কিছু পরিবর্তন হয়ছে।</li>
  <li>তুমি চাইলে delete/backspace চেপে পেজের কিছু অংশ মুছে ফেলতে পারো, এবং P তোমার হ্যাকড ভারর্সনটি পাবলিশ করতে পারো!</li>
  <li>পেজের সঙ্গে কিছুক্ষণ খেলা কর, তারপর Esc চেপে Xray Goggles বন্ধ করে দাও।</li> 
  <li>তুমি Xray Goggles কে যেকোন পেজে ব্যবহার করতে পারো শুধুমাত্র তোমার ব্রাউজারের সাথে একে যুক্ত  করে: তুমি Xray Goggles বাটনটিকে ড্রাগ করে তোমার বুকমার্ক টুলবারে রাখতে পারো,অথবা একে বুকমার্ক মেনুতে যুক্ত করতে পারো।</li>
</ol>

<div class="note">
  <p><strong>নোট</strong>: তুমি শুধুমাত্র তোমার কাছে থাকা পেজটির কপিটিতে পরিবর্তন করেছো, সার্ভারে থাকা অরিজিনাল পেজটিতে নয়। যদি তুমি পেজটি রিলোড দাও (Ctrl + R অথবা Cmd + R ম্যাকে) তাহলে তুমি দেখতে পাবে যে পেজটিতে কোন পরিবর্তন হয়নি।</p>
</div>

<h3>স্কুলের ওয়েবসাইট হ্যাকিং</h3>

<p>চলো স্কুলের ওয়েব সাইটটি কম্পিউটারে লোড করি এবং পরিবর্তন করার চেষ্টা করি। তোমার কাজ শেষ হলে,তুমি P চেপে তোমার রিমিক্স করা ওয়েব পেজের  ভারর্সনটি এর নিজস্ব ঠিকানায় প্রকাশ করতে পারো।</p>

<p>তুমি যদি পেজের কোন ছবি পরিবর্তন করতে চাও, তবে এই কাজটা কিছুটা জটিল হবে, কিন্তু তুমি এটি খুব সহজেই কোন ঝামেলা ছাড়া করতে পারো। চলো , প্রথমে পেজে ছবি যুক্ত করার জন্য একটি ছবি নির্বাচন করি। ছবি পেজে যুক্ত করে ব্যবহার করার জন্য ছবি খোজার সবচেয়ে ভাল উপায় হল <ahref="http://www.google.co.uk/imghp">Google image search</a>, এটি গুগুলের একটি ওয়েব সাইট যেটি তোমাকে শুধু ছবি খুঁজতে দেয়।</p>

   <ol>
     <li> "Google Images" কে নতুন একটি ট্যাবে চালু কর।</li>
     <li>কোন কিছু খোজো যেটি তুমি দেখাতে চাও, এবং "image result" এ ক্লিক করো। ছবিটি বড় এবং হাইলাইট হয়ে আসবে।</li>
     <li><em>View image</em> বাটনটিতে ক্লিক করো; এর ব্রাউজারে শুধুমাত্র ওই ছবিটি প্রদশিত হবে।</li>
     <li>Select the whole web address of the image that you should now see in the address bar of your browser and copy it (you can also do this in Firefox by Right/Ctrl + clicking and selecting <em>Copy image location</em>; most other browsers have a similar option.)</li>
     <li>যে ট্যাবে Xray Goggles চালু আছে ঐ ট্যাবে ফিরে যাও।</li>
     <li>Click on one of the images: it should come up with the Xray Goggles window, showing an <code>&lt;img&gt;</code> tag, with a bunch of other information inside it. If you don't see this, press <em>Cancel</em> and try something else. Not all images are as they seem.</li>
     <li>যে ছোট্ট অংশটি তোমার পরিবর্তন করা দরকার তা হল <code>src</code> অ্যাট্রিবিউট, যেটা দেখতে  <code>src="http://some.kind-of-web-address.com"</code>এইরকম। তোমাকে উদ্ধৃত চিহ্নের ভেতরের অংশটুকুর (<code>" ... "</code>) পরিবর্তে গুগুল ইমেজ থেকে কিছুক্ষণ আগে যে লিংঙ্কটি কপি করেছো তা দিতে হবে।</li>
     <li>Save  তে ক্লিক করো,এবং তুমি দেখবে যে ছবি পরিবর্তন হয়েছে।</li> 
   </ol>

<p>এই সপ্তাহের জন্য এতটুকুই। পরবর্তী সপ্তাহ পর্যন্ত ভাল থেকো!</p>


  </main> 

<nav>
  <p><a href="index.html">Main index</a></p>
  <p>Next:<br><a href="lesson2.html">Getting started</a></p>
</nav>

<hr>
<p><a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>. Share it, make it better, use it for good.</p>

</body>
  <script src="prism/prism.js"></script>
</html>