forked from m4hi2/weeks-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
lesson10.html
222 lines (112 loc) · 15.9 KB
/
lesson10.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE HTML>
<html lang="en-US">
<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>পূর্ব বর্তি:<br><a href="lesson9.html">CSS positioning</a></p>
<p><a href="index.html">Main index</a></p>
</nav>
<main>
<p>আবারো স্বাগতম! </p>
<p> আমরা আমাদের এই কোর্সের শেষ প্রন্তে দেখবো যে সবাই কি তৈরী করেছে , আমরা আলোচনা করবো তোমার কি কি সরঞ্জাম(ট্যুল) লাগবে ওয়েব ডিজাইনিং/ডেভলপমেন্ট করতে, তারপর আমরা আলোচনা করবো ওয়েব ডেভলপার হতে তোমার কি ধরণের জ্ঞান ও স্বভাব থাকা লাগবে। তারপর আমি কিছু প্রশ্ন নিয়ে আলোচনা করবো, এবং আনেক ধারণা।</p>
<h2>প্রকল্পের উপস্থাপনা</h2>
<p> চলো কিছু সময় নিয়ে দেখে আসি সবাই এই কোর্সে কি তৈরী করেছে !</p>
<h2> তোমার কি কি সরঞ্জাম(টুল) দরকার?</h2>
<p> ডিজাইনার/ডেভলপার হতে তোমার কিছু জিনিষ যোগাড় ও কিছু নিনিষ বুঝতে হবে। আমরা এই কোর্সে সবকিছুর ব্যাবহার করবো না,এগুলো শুধু তোমার জ্ঞানের জন্য।</p>
<ul>
<li>ওয়েব ব্রাউজার</li>
<li>কোড এডিটর</li>
<li>ফাইল স্ট্রাকচার</li>
<li>ওয়েব কমিউনিটি</li>
<li>গ্রাফিক্স এডিটর</li>
<li>ডোমেইন এবং হোস্টিং সার্ভার</li>
<li>FTP প্রোগ্রাম</li>
</ul>
<h3> ওয়েব ব্রাউজার (Web browsers)</h3>
<p> একজন ডেভলপার হিসাবে তোমাকে অনেক কিছু করতে হবে, তোমাকে ওনেক কিছু পরীক্ষা করতে হবে, এটা নিশ্চিত করতে যে তুমি যেই ওয়েব সাইটটি তৈরী করেছো সেটা সব ওয়েব ব্রাউজার ঠিক মতো কাজ করছে। এরজন্য তোমাকে তোমার মেশিনে নানান ধরণের ব্রাউজার ইন্সট্রল দিতে হবে , এবং নানাণ ধরণের যন্ত্রের ব্যাভার জানতে ও করতে হবে ( বর্তমানে নানান ধরনের যন্ত্র নানান ভাবে ওয়েবে প্রবেশ করে)</p>
<h3>একটি কোড সম্পাদক</h3>
<p> ওয়েব সাইট তৈরীর ক্ষেত্রে তোমাকে কোড লিখা জানতে হবে। এবং এই কোড লিখার জন্য তোমার কোড সম্পাদকের দরকার হবে। এটা সাধারণত একধরণের এ্যাপ্লিকেশন যা তোমার কম্পিউটারে আছে, এটা তমাকে কোড সম্পাদনা করতে দেয় যেমনটা তুমি ওয়ার্ড এ গল্প সম্পাদনা কর।</p>
<p> কিছু প্রয়োজনীয় কোড এডিটর:</p>
<ul>
<li><a href="http://notepad-plus-plus.org/">Notepad++</aWindows এর জন্য</li>
<li><a href="http://www.barebones.com/products/textwrangler/">Textwrangler</a> Mac এর জন্য</li>
<li><a href="http://bluefish.openoffice.nl/index.html">Bluefish</a> Linux এর জন্য</li>
<li><a href="http://www.sublimetext.com/">Sublime text</a> সকল প্ল্যাটফর্মের জন্য; ফ্রি আজীবন ট্রায়াল ভার্সান</li>
</ul>
<p class="note">* I said <em>usually</em> above, because throughout this course we have been writing code inside Thimble, which is a web page.</p>
<h3>একটি ফাইলের গঠন</h3>
<p> তুমি এখন তোমার কোড সম্পাদক পেয়েগেছো, এবং এটি চলছে তাহলে তুমি তোমার কোডের ফাইল তৈরী করা আরম্ভ করতে পারো। একজন ডিজাইনার/ডেভলপার হিসেবে,তোমাকে বেশিরভাগই সাধারণ শব্দের ফাইল নিয়ে চলতে হবে (উদাহরণ স্বরূপ মাইক্রোসফট ওয়ার্ড কোড লিখার জন্য ঠিক নয়, কেননা শব্দের ফাইল গুলো সাধারণ নয় সেগুলো বাইনারি’র ফাইল, ফলে সেগুলোর ভিতরে নানান কোডের তথ্য থাকে যে সব শব্দ তুমি তোমার ডকুমেন্টের মধ্যে লিখ)</p>
<p> তুমি বেশির ভাগ কোড সম্পাদকে এই “File > New, or pressing Ctrl + N (Cmd + N on a Mac.)” পদ্ধতিতে নতুন ফাইল তৈরী করতে পারবে । ওয়েব সাইট তৈরী করার সবচেয়ে ভালো হবে প্রধাণ পাতাকে index.html নামে ব্যাবহার করা । :</p>
<img src="images/10a.jpg" alt="An image of a simple website directory structure showing index file and style, script and other directories">
<p>It is a matter of structuring your files intelligently so you will know where to find everything, and the files can easily talk to one another.
<p class="note">Windows has a really annoying option turned on by default called "Hide extensions for known file types", which makes it impossible to create the <code>.html</code>, <code>.css</code>, etc. files that you need to do web development. You can turn this off in Windows Explorer using View > Folder Options > View > untick "Hide extensions for known file types".</p>
<h3>একটি গ্রাফিক্স সম্পাদক</h3>
<p> এটি অপরিহার্য নয়, কিন্তু এটি সামনে ধাবিত হওয়ার জন্য জরুরী। পরিশেষে তোমাকে কিছু গ্রাফিক্স তৈরী করতে হবে। ভালো এবং ফ্রী গ্রাফিক্স সম্পাদক পাওয়া কোড সম্পাদক পাওয়ার মতো ওতটা সহজ না। বেশিরভাগ মানুষই ফটোশপ (Photoshop) ব্যাবহার করে বা করতে বলে, এই একটু দামী এবং একটু জটিল ও বটে । কিছুর নাম দেওয়া হলঃ:</p>
<ol>
<li><a href="http://windows.microsoft.com/en-us/windows7/products/features/paint">Paint</a>: Microsoft Paint has been available for free as part of Windows for ever. It is really basic and regarded by some as a bad joke, but it is still fine for performing basic functions such as resizing, cropping, and saving images in different file formats.</li>
<li><a href="http://www.gimp.org/">The GIMP</a>: The <em>GNU Image Manipulation Program</em> is available for Mac, Windows and Linux, and is free. It is fairly complex to use, but a fairly powerful option.</li>
<li><a href="http://imageoptim.com/">ImageOptim</a>: This Mac product takes images and makes them as small as possible. This is a very useful function for a web designer to perform, as you want to make your websites as small in file size as possible.</li>
<li><a href="http://www.photoscape.org/ps/main/index.php">Photoscape</a>: A fairly decent Windows graphics editor</li>
</ol>
<p> গ্রাফিক্স ডিজাইন আসলেই এর আলাদা নিজস্ব সম্পূর্ণ বিষয় আছে, এবং এবং সত্যি আমার এই কোর্সে এই ব্যাপারে আলোচনা করার আমার সময় নেই ।
</p>
<h3>সার্ভাররের জায়গা এবং ডোমেইন</h3>
<p> তুমি যখন তোমার কম্পিউটার এ কোড করা ওয়েব সাইটটি ওয়েবে ছাড়তে চাও যাতে অন্যরা ব্যাবহার করতে পারে, তাহলে তোমার দুইটি জিনিষের প্রয়োজন হবেঃ</p>
<ul><li> সার্ভাররের জায়গা সর্বদা হস্টিং নামে পরিছিতঃ এটার অর্থ তুমি অন্যের ওয়েবের জায়গা ভাড়া নাও তোমার ওয়েব সাইট রাখার জন্য । এটি সাধারণত <em> ওয়েব হস্টিং কোম্পানি</em> দিয়ে থাকে </li>
<li> একটি ডোমেইনের নামঃ এটি হল তোমার ওয়েব সাইটে প্রবেশের নাম এটিও ভাড়া নিতে হয় <em> ডোমেন নেইম রেজিস্ট্রার (domain name registrars)</em> কোম্পানি থেকে।</li>
</ul>
<h3>An <acronym title=" একটি এফ টি পি প্রোগ্রাম">FTP</acronym> program</h3>
<p> একটি এফ টি পি প্রোগ্রাম হল এক ধরণের এ্যাপ্লিকেশন যা তোমার ওয়েব সাইটকে তোমার নিজস্ব কম্পিউটার থেকে ওয়েবে হস্তান্তর করে। এটি হল তোমার ওয়েবসাইটকে ওয়েবে ছাড়ার মাধ্যম! একটি এফ টি পি প্রোগ্রাম সাধারণত নিম্নের মতো দেখতে হয়ঃ </p>
<img src="images/10b.jpg" alt="A typical FTP program, showing a window with a file structure on the left and right">
<p>ভাল(ফ্রী) এফ টি পি প্রোগ্রামে অন্তর্ভুক্তঃ</p>
<ul>
<li><a href="https://filezilla-project.org/"> ফাইলজিলা(FileZilla)</a>: এটি একটি উন্মক্ত এফ টি পি প্রোগ্রাম Windows, Mac and Linux এর জন্য।</li>
<li><a href="http://cyberduck.io/"> সাইবার ডুক(CyberDuck)</a>: শুধুমাত্র Mac এর জন্য ।</li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/fireftp/"> ফায়ার এফটিপি (FireFTP)</a>: একটি ফায়ারফক্স ব্রাউজারের এক্সটেনশন/ অপসান।</li>
</ul>
<h2>একজন ডিজাইনার/ডেভলপার হওয়া </h2>
<p> ওয়েব প্রযুক্তিতে কাজ করা কিছুটা ভালোর দিকঃ</p>
<ul>
<li>তুমি যেমন ইচ্ছা তেমন পোশাক পরিধান করতে পার।</li>
<li>এটির রোজগার খুব ভালো (নকসা এবং কোড হল এটির মূলমন্ত্র)</li>
<li> তোমার কাজ পাবার জন্য কোন প্রকার ডিগ্রী অথবা পি এইচডির প্রয়যোজন নেয় (তুমি নিজেই এটা শিখতে পারো)</li>
<li>তুমি নানান ধরণের মজাদার মানুষের সাথে দেখা করতে পারবে।</li>
</ul>
<p> সাধারণত তোমার মজার মজার জিনিষ তৈরির অনুভূতি থাকতে হবে , কম্পিউটার এ দক্ষতা এবং ধোর্জ থাকতে হবে । তুমি কুনো পরীক্ষা করার সময় আটকিয়ে গেলে ভয় পাবা না । ব্যর্থ হবার জন্য ভয় পাবা না । প্রথমত নকসা এবং কোডিং করা খুব কঠিন মনে হবে কিন্তু তুমি যখন এগুলো কিভাবে কাজ করে বুঝতে শিখবে তখন এগুলো সহজ হয়ে উঠবে । আমি মনে করি কিছু মানুষের অতিব প্রতিভা আছে কিন্তু আমি বিশ্বাস করি যে, যেকেউই কোডিং এবং ডিজাইন শিখতে পারে । </p>
<p> স্টিভ জবস এটির ভাল ব্যাখ্যা দিয়েছেনঃ</p>
<blockquote><p>Everything around you that you call life was made up by people that were no smarter than you and you can change it, you can influence it, you can build your own things that
other people can use.</p></blockquote>
<h2>Further resources</h2>
<p>Some links to further teaching resources that may help to teach, or will at least provide inspiration.</p>
<ul>
<li><a href="http://learn.shayhowe.com/">A Practical Guide to HTML and CSS</a>, by Shay Howe</li>
<li><a href="http://www.w3.org/community/webed/wiki/Main_Page">Web standards curriculum</a></li>
<li><a href="https://mozlearning.etherpad.mozilla.org/DesigningForWeb">Designing For Web Etherpad</a></li>
<li><a href="https://webmaker.org/en-US">Webmaker home</a></li>
<li><a href="https://webmaker.org/teach">Webmaker: let's teach the Web!</a></li>
<li><a href="https://support.mozilla.org/en-US/kb/pro-tips-webmaker-teaching-kits">Pro tips on Webmaker teaching kits</a></li>
<li><a href="https://mozteach.makes.org/thimble/xray-goggles-teaching-kit">Xray Goggles teaching kit</a></li>
<li><a href="https://www.codeclub.org.uk/">Code Club</a></li>
<li><a href="http://www.codecademy.com/">Codecademy</a></li>
<li><a href="https://www.khanacademy.org/">Khan academy</a></li>
</ul>
</main>
<nav>
<p>Previous:<br><a href="lesson9.html">CSS positioning</a></p>
<p><a href="index.html">Main index</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>