ব্লগ বা ওয়েবসাইটের জন্য একটি অসাধারণ ফ্লোটিং লাইক বক্স - An Awesome Floating Like Box

আসসালামু আলাইকুম,

কেমন আছেন সকলে? আজকের ওয়েবসাইট ডিজাইন নিয়ে আমার ছোটো পোস্টে আপনাদের স্বাগতম।

অনেকদিন থেকেই চেষ্টা করছি ওয়েব ডিজাইন ক্যাটাগরিতে ভালো পোস্ট করার, কিন্তু কি করবো? আইডিয়াই পাইনা, আবার টপিক।
এবার আপনাদের একটা সিম্পল ফ্লোটিং লাইক বক্স (মাঝখানে টুইটারের ফলো বক্স রাখতে পারেন, আপনার ইচ্ছা)

প্রথমেই আমাদের নিচের কোড দেখতে হবে, ন্যাটিভ এইচটিএমএল আর সিএসএস দিয়ে রাইট করা কোড।

<style>
.grplusbd_floating_likebox{
position: fixed;
right: 0px;
top: 40%;
border-radius: 10px;
padding: 10px 15px;
background-color: rgba(0, 161, 255, 0.21);
height: 70px;
}
</style>
<div class="grplusbd_floating_likebox">
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Ffacebook.com%2Fgrplusbd&width=49&layout=box_count&action=like&show_faces=false&share=true&height=65&appId" width="60" height="100" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>

কোডের ব্যাখ্যাঃ

প্রথমে একটা স্টাইল ট্যাগের মাঝে আমি সিএসএস এপ্লাই করেছি। সেখানে এর পজিশন ফিক্সড করে স্থির রেখেছি। রাইট ০ পিএক্স দিয়ে ডান দিকে ০ পিক্সেল প্যাডিং, মানে কোনো ফাক না থাকার ব্যাবস্থা করেছি। টপ ৪০% দিয়ে উপর থেকে ৪০% নিচে নামিয়েছি। এতেই এটি পেজের ডান পাশে মাঝামাঝি অংশে ভেসে থাকে বা ফ্লোট করে। বর্ডার রেডিয়াস ১০ পিএক্স দিয়ে বর্ডার গোলাকার করেছি। প্যাডইং ১০পিক্স ১৫পিএক্স দিয়ে মাঝের কন্টেন্ট মারজিন করেছি। ব্যাকগ্রাউন্ড কালারে আরজিবিএ এপ্লাই করে অর্ধ স্বচ্ছ রঙ এপ্লাই করেছি। হাইট ৭০পিক্সেল রেখেছি।

আবার যদি সাথে ক্লোজ বাটন রাখতে চানঃ 

<style>
.grplusbd_floating_likebox{
position: fixed;
right: 16px;
top: 40%;
border-radius: 10px;
padding: 10px 15px;
background-color: rgba(0, 161, 255, 0.21);
height: 70px;
}
.orthi-textlightbox-area-close {
    background-color: black;
    color: white;
    border-radius: 50%;
    padding: 10px;
    float: right;
    border: 1px solid black;
    box-shadow: 0 0 10px 0 rgba(33, 157, 216, 0.82);
    margin-top: -30px;
    margin-right: -30px;
    cursor: pointer;
    -webkit-user-select: none;
}
</style>
<script>
function grplusbd_floating_likebox(){
var w1 = document.getElementById('grplusbd_floating_likebox');
var w2 = ('display: none;');
w1.style= w2;
}
</script>
<div class="grplusbd_floating_likebox" id="grplusbd_floating_likebox" style="display:inline;">
<button class="orthi-textlightbox-area-close" onclick="grplusbd_floating_likebox()"><button class="orthi-textlightbox-area-close" onclick="grplusbd_floating_likebox()"><i class="fa fa-times" aria-hidden="true"></i></button>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Ffacebook.com%2Fgrplusbd&width=49&layout=box_count&action=like&show_faces=false&share=true&height=65&appId" width="60" height="100" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>

কোডের ব্যাখ্যাঃ

নতুন কিছুই না, ছোটো একটা জাভাস্ক্রিপ্ট দিয়েছি আর ক্রস বাটনের জন্য সিএসএস অ্যাড করে দিয়েছি।

{ক্রস বাটন কাজ করাতে হলে ফন্ট অসাম এনাবেল করা থাকতে হবে, এনাবেল করা না থাকলে হেড ট্যাগের নিচে নিচের কোড পেস্ট করে সেইভ করুন,

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

}

ডেমোঃ এই পেইজ নিজেই!

বিভাগঃ ওয়েব ডিজাইন জাভাস্ক্রিপ্ট

আরও পড়ুন

লাইফ ইজ স্ট্রেঞ্জ - Life Is Strange - শর্ট রিভিউ

লাইফ ইজ স্ট্রেঞ্জ গেমটি ডেভেলপ করেছে ডোন্টনড এন্টারটেইনমেন্ট এবং পাবলিশ করেছে স্কয়ার ইনিক্স।

এই গেইমটির পাঁচটি পর্ব রয়েছে।

বর্তমানে উইন্ডোজ, ম্যাক এবং এক্স বক্সের প্ল্যাটফর্মে পাওয়া যাচ্ছে গেইমটি।

কভার

এই গেইমটির প্লটটি ম্যাক্সিন কলফিল্ড নামে ১৮ বছর বয়সী একটি মেয়েকে নিয়ে লেখা হয়েছে।

ম্যাক্সিন ফটোগ্রাফি নিয়ে পড়াশোনা করছে। 

আরকেডিয়া বে'তে বসবাসকারী ম্যাক্সিন একদিন হঠাৎ বুঝতে পারে সে টাইম ট্রাভেলের মাধ্যমে সময়ের ঘটনা প্রবাহ পরিবর্তন করার ক্ষমতা রয়েছে। 

গেইম প্লে

অসাধারন এই ক্ষমতা ব্যবহার করে ঘূর্ণিঝড়ের হাত থেকে নিজের শহরকে বাঁচাতে চায় সে।

তাকে সাহায্য করে বাল্যবন্ধু প্রাইস। 

ঘটতে যাওয়া যেকোনো কিছু আগাম জেনে তারা দু’জনে মিলে শহরের নানা সমস্যার সমাধান করতে থাকে। 

বিভিন্ন ধরনের ষড়যন্ত্র ধাঁধা আকারে গেইমারের গেইমে আসবে। 

এসব চিহ্নিত করে তা প্রতিহত করতে হবে মেয়েটির চরিত্রে খেলা গেইমারকে।

দুইজনেই মেয়ে কিন্তু! #think_positive

এভাবে পুরো শহরকে নানাভাবে জটিল সমস্যা থেকে রক্ষা করতে থাকবে ম্যাক্সিন।

সময়কে এভাবে ব্যবহার করে গেমার যেকোনো ঘটে যাওয়া ঘটনাকে আবার করার সুযোগ পাবে।

গেমার যেকোনো কিছু পরীক্ষামূলকভাবে করে দেখতে পারবে।

 এই পরীক্ষণের মাধ্যমে নিশ্চিত হবে কোনটি ধাঁধার সমাধান ও পরিবেশ পরিবর্তনে পারদর্শী।

 গেমার একই সাথে কয়েক ধরনের স্থানে খেলার সুযোগ পাবে এবং বিভিন্ন ক্যারেকটারের সাথে যোগাযোগ করতে পারবে।

একবার কোনো বিশেষ সময়, কথোপকথনের বাছাইয়ের ওপর ভিত্তি করে গল্পের মোড় ঘুরে যেতে পারে। 

এ ধরনের বাছাই কোনো কোনো ক্ষেত্রে ভালো কিছু করলেও পরবর্তী সময়ে ক্ষতির কারণ হয়ে দাঁড়াতে পারে।

প্রয়োজনীয় হার্ডওয়্যার:

• প্রসেসর : 2.7 GHz
• র‌্যাম : 2 GB 
• গ্রাফিক্স কার্ড : 1 GB 
• ফ্রি হার্ডডিস্ক স্পেস : 3 GB

বিভাগঃ গেইমস

আরও পড়ুন

Delta Force - Black Hawk Down Team Sabre : ডেলটা ফোর্স ব্ল্যাক হক ডাউন টিম স্যাবরে

আসসালামু আলাইকুম,
প্রথমটা খেলার পর এটার এক্সপ্যানশন প্যাকেজ গেইম খেলে ফেললাম।
মজা পেয়েছি অনেক। কারন, এখানে আগের সোমালিয়ান মিশন ছাড়াও আরও দুইটি ক্যাম্পেইন ছিলো, একটি ইরানিয়ান আরেকটি কলম্বিয়ান।

এবারে যোগ করা হয়েছে আরও কয়েকটি রাইফেল। যার মধ্যে আছে জি থারটি সিক্স এবং পিএসডি ওয়ান স্নাইপার।
এছাড়া যোগ করা হয়েছে আরও কয়েকটি টেরেইন। যেমন মরুভুমি, জঙ্গল। টেরেইনের মধ্যে সাউথ আমেরিকার জঙ্গল এবং ইরানের মরু অঞ্চলই প্রাধান্য পেয়েছে।

২০০৬ সালের নভেম্বর মাসে মুক্তি পায় এই এক্সপানশন প্যাকটি।

ইরান ক্যাম্পেইনে খেললে প্লেয়ারকে একজন ইরানি জেনারেল হাতিমের বিরুদ্ধে লড়তে হবে।
এবং কলম্বিয়ান ক্যাম্পেইনে খেললে প্লেয়ারকে একজন দড়াগ লর্ড এন্টোনিও পাউলোর সাথে যুদ্ধে নামতে হবে।




মুল ভার্সন আর এই এক্সপানশন প্যাকের মাঝে পার্থক্য হলো গেইমের ডিফিকাল্টিটিতে।
এবারে এই প্যাকে গেইম সেভ থাকবে কম, শত্রু আর লেভেল থাকবে বেশি।

কলম্বিয়ান ক্যাম্পেইনে যে প্লট থাকবে,

কোস্ট গার্ড জানতে পারে যে, বিশাল একটি ড্রাগের চালান আমেরিকার বর্ডার ক্রস করতে যাচ্ছে।
ইন্টেল থেকে বলা হয়, এই চালান ড্রাগ লর্ড এন্টোনিও পাউলো চালাচ্ছে এবং সে কলম্বিয়ার এই অঞ্চলে তার ক্ষমতা বৃদ্ধি করতে যাচ্ছে।
তারা এই প্রত্যন্ত অঞ্চল নিজেদের দখলে রাখতে চায় এবং তারা গেরিলাদের টাকা দিয়ে ভাড়া করে রাখছে, যাতে কোনো রকমের বাঁধা না আসে। এন্টোনিওর বিরুদ্ধ্যে অভিযোগ থাকে যে সে আমেরিকান এবং কলম্বিয়ান সেনাদের ধরে এনে টর্চার করে এবং তথ্য আদায় করতে চায়। প্লেয়ারকে তার ডেল্টা ফোর্স নিয়ে তাদের নানা আস্তানায় হামলা করতে হবে এবং সবশেষে অনেকগুলো মিশনের পর এন্টোনিওকে হত্যা করতে হবে।

ইরানিয়ান ক্যাম্পেইনে যে প্লট থাকবে,

এইখানে দেখানো হয়েছে,ইরানের সরকার পরিবরতন হয়েছে, এবং আগের সরকার একটা বিপ্লব তৈরির সিদ্ধান্ত নিচ্ছে।

মৌলবাদী বিদ্রোহীদের পরিবহন ও অন্যান্য কাজের তেল উত্তর ও বন্দর শাহপুর থেকে খারগ দ্বীপে পাচার করা হচ্ছে।

তেল ইরানের অর্থনীতির প্রায় তিন চতুর্থাংশ এবং সেই তেল পাচার পশ্চিমা বিনিয়োগকারীদের স্বার্থের জন্য মারাত্মক ঝুঁকি প্রতিনিধিত্ব করে।

ন্যাটো ও জাতিসংঘের উভয় একমত যে সামরিক হস্তক্ষেপ, মার্কিন যুক্তরাষ্ট্রের নেতৃত্বে ডেল্টা ফোর্স জোট বাহিনীকে সেই দ্বীপে দখল নেবার কমান্ড দেয়া হয়েছে।

মাল্টিপ্লেয়ার খেলার সুবিধা আছে এই ডেলটা ফোর্স গেইমে। একত্রে ৫০ জন খেলার লিমিটেশন রয়েছে।


এই গেইমে কম্যাঞ্চ ৪ গেইম ইঞ্জিন ব্যাবহার করা হয়েছে।

প্রসেসার ডুয়েল কোর ২.০০ গিগাহার্জ, র‍্যাম ১ জিবি এবং ভির‍্যাম ৫১২ এমবি হলে ল্যাগ ছাড়াই বেশ মজা করেই এই গেইম খেলা যায়।
ডেলটা ফোর্স সিরিজের গেইমগুলোর সুবিধা দুটো, মজা পাওয়া যায়, আর পিসি রিকুয়ারমেন্ট কম লাগে ;)

ট্রেইনার ডাউনলোড করে নিন

গেইমটি ডাউনলোড করে নিতে পারেন

বিভাগঃ গেইমস

আরও পড়ুন

Delta Force - Black Hawk Down : ডেলটা ফোর্স ব্ল্যাক হক ডাউন

আসসালামু আলাইকুম,

এই ঈদের মাঝেই এই মান্ধাতার আমলের গেইম খেলে শেষ করলাম। অনেক পুরোনো গেইম, প্রেক্ষাপটও পুরোনো। কিন্তু আমি গেইমটা এই ফার্স্ট খেলায় বেশ মজা পেয়েছি।

গেইমটার প্রেক্ষাপট করা হয়েছে ১৯৯০ সালের সোমালিয়ায় জাতিসঙ্ঘ শান্তিরক্ষী বাহিনীর পরিচালিত অপারেশনের উপর ভিত্তি করে। 

মিশঙ্গুলো মুলত হয়েছিল সোমালিয়ার দক্ষিণাঞ্চলের জুব্বা উপত্যকায় এবং রাজধানী মোগাদিসুতে।

আপনাকে নানা স্টেপে মিশনের পর মিশন পাস করতে হবে। হয়তো আপনার মিশনভ থাকবে কনভয় প্রটেক্ট করা, গ্রাম ইনফিল্ট্রেট করা, স্নাইপ করা, টারগেট ডাউন করা। সবশেষে আপনাকে বড় মিশনটিই দেওয়া হয়, জেনারেল আইদিদ কে খুজে বের করে হত্যা করা।

গেইমটি ডেভেলাপ করেছে নোভালজিক স্টুডিও।

গেইমটি ২০০৩ সালের ২৩শে মার্চ উইন্ডোজের জন্য এবং ২০০৪ সালের জুলাই মাসে ম্যাক ওএসের জন্য মুক্তি পায়। 

এটা ডেলটা ফোর্স সিরিজের ষষ্ট গেইম।

এখানে আপনাকে খেলতে হবে একজন রেঞ্জার হিসেবে, আপনি একটি ৩ সদস্যের দলের কম্যান্ডার।যাদের নাম, প্রিচার, হাক এবং মাদার।

আপনাকে তাদের নিয়ে ইউটিএফ বাহিনীর হয়ে সোমালিয়ায় গৃহযুদ্ধ থামাতে জেনারেল আইদিদকে হত্যা করার মিশন দেওয়া হবে।

এখানে গেইম প্লে ভালো, আপনি একজন কম্যান্ডার হিসেবে আপনার দলকে গুলে করতে, গুলি না করতে, গ্রেনেড ছুড়তে, এই ধরনের কমান্ড দিতে পারবেন।

আপনার ছোটবেলার গেইমিং পুরাপুরি মিস যদি  আপনি ডেলটা ফোর্স সিরিজ গেইম না খেলে থাকেন।
ডেলটা ফোর্স গেইম সিরিজটা আমার অস্থির লাগে, চান্স পেলেই গেইম অভার করি।
ডেলটা ফোর্স ২, ডেলটা ফোর্স এক্সট্রিম খেলার আমন্ত্রন রইল।

মাল্টিপ্লেয়ার খেলার সুবিধা আছে এই ডেলটা ফোর্স গেইমে। একত্রে ৫০ জন খেলার লিমিটেশন রয়েছে। 

এই গেইমে কম্যাঞ্চ ৪ গেইম ইঞ্জিন ব্যাবহার করা হয়েছে।

প্রসেসার ডুয়েল কোর ২.০০ গিগাহার্জ, র‍্যাম ১ জিবি এবং ভির‍্যাম ৫১২ এমবি হলে ল্যাগ ছাড়াই বেশ মজা করেই এই গেইম খেলা যায়।
ডেলটা ফোর্স সিরিজের গেইমগুলোর সুবিধা দুটো, মজা পাওয়া যায়, আর পিসি রিকুয়ারমেন্ট কম লাগে ;)

ডাউনলোড লিঙ্ক

বিভাগঃ গেইমস

আরও পড়ুন

বিশ্বের প্রথম লিকুইড কুল ল্যাপটপ asus ROG GX700

আসুস ঘোষণা করেছে, তারা আনতে যাচ্ছে বিশ্বের প্রথম লিকুইড কুল ল্যাপটপ।
এতদিন ফ্যানের মাধ্যমে ঠাণ্ডা রাখা হতো ল্যাপটপ এবার তার ফ্যানের জায়গা নিচ্ছে পানি।
পানি ঠাণ্ডা হলেই ঠাণ্ডা থাকবে ল্যাপটপটিও।
এই ল্যাপটপের নাম asus ROG GX700
এমন ল্যাপটপের দাম একটু বেশি হওয়াটাই স্বাভাবিক।
এই নতুন ল্যাপটপ যেহেতু গেমিং ল্যাপটপের একটি অংশ তাই Hydro Overclocking System-টিও।

কোম্পানির সূত্রে জানানো হয়েছে Hydro Overclocking System ল্যাপটপ থেকে বেরনো প্রায় ৫০০ ওয়াট অবধি গরম সহ্য করে নেবে। এতে থাকছে ইন্টেলের ষষ্ঠ প্রজন্মের ‘Skylake’ Core i7-6820HK প্রসেসর। ল্যাপটপের ভিতরে থাকবে DDR4 এর ১৬ জিবি র‍্যাম যা বাড়ানো যেতে পারে ৬৪ জিবি অবধি।
গ্রাফিক্সের জন্য আসুস ল্যাপটপে দিয়েছে Nvidia GeForce GTX 980 GPU সহ ৮ জিবির GDDR5 VRAM। ল্যাপটপের থাকছে ১৭.৩ ইঞ্চি 4K UHD স্ক্রিন
এতে রয়েছে অডিও এম্প যা সামান্য আওয়াজকে বিকৃত না করেই ভলিউম বাড়াতে পারবে।
এতে থাকছে Intel®Thunderbolt 3 টেকনোলোজি এবং USB Type-C,
এতে আপনি একটি ইউএসবি পোর্ট দিয়েই 40 GBPS  ডাটা ট্রান্সফার করতে পারবেন।এই পোর্টের মাধ্যমে আপনি ফোরকে ভিডিও স্ট্রিম এবং মাল্টি ডিসপ্লে গেইমিং এর জন্য ব্যাবহার করতে পারেন।

এছাড়া এটা কেনার সাথে পাবেন একটা ল্যাপটপ কেইস যাতে করে কুলার সহ ল্যাপটপ আপনি সহজেই বহন করতে পারেন।

এই ল্যাপটপে আপনি পাবেন অ্যান্টি ঘোস্টিং কীবোর্ড, এতে আপনার কী বোর্ড একই সাথে অনেক কিপ্রেস ইনপুট নিতে পারবে।

রয়েছে গেইমপ্লে রেকর্ড করার জন্য আলাদা রেকর্ড বাটন। এছাড়া এই ল্যাপটপের সাথে আপনি XSplit Gamecaster লাইফটাইম এক্সেস পাবেন।এতে আপনি আপনার গেইম অনলাইনে লাইভ স্ট্রিম করাতে পারবেন।

 

আরও দেখুন https://www.asus.com/Notebooks/ROG-GX700VO/

বিভাগঃ কিছু টুকরো খবর হার্ডওয়্যার

আরও পড়ুন

এলো বাংলা ভাষায় প্রোগ্রামিং ভাষা - পতাকা()

বাংলাদেশে এই প্রথমবারের মতো নতুন প্রোগ্রামারদের জন্য প্রথম বাংলা প্রোগ্রামিং ল্যাঙ্গুয়েজ তৈরি হল।

নতুনদের জন্য সহজ বাংলায় প্রোগ্রামিংয়ের ধারনা দেয়া ও প্রোগ্রামিংয়ের প্রতি আগ্রহ জাগিয়ে তোলার জন্যই পতাকা তৈরির প্রাথমিক উদ্দেশ্য।

পতাকার সিন্টেক্সগুলো এমন ভাবে সাজানো হয়েছে যেন যে কেউ একটি পুরো স্টেটমেন্ট পড়লে মনে হবে এটি একটি সহজাত বাংলা বাক্য অন্যকথায় বলা যায়, একটি সহজাত বাক্যকে প্রোগ্রামিং ভাষায় কিভাবে রুপান্তর করা যায় বা করলে সেটা কি দাড়ায়।

বাংলাদেশে মাধ্যমিক স্তরে আনা হয়েছে তথ্য ও যোগাযোগ প্রযুক্তি নামের একটি বই।
এর মাধ্যমে শিার্থীদের প্রোগ্রামিংয়ের মৌলিক ধারণার সাথে পরিচয় করিয়ে দেয়ার চেষ্টা চালানো হচ্ছে।
পশ্চিমা দেশগুলোর শিক্ষার্থীরা যখন নিজের মায়ের ভাষায় খেলতে খেলতে প্রোগ্রামিংয়ে হাত পাকাচ্ছে, তখন বাংলাদেশের অনেক শিক্ষার্থীরা কাছেই এটি বিভীষিকা হয়ে দাঁড়িয়েছে।


প্রথমবারের মতো বাংলায় তৈরি প্রোগ্রামিং ল্যাঙ্গুয়েজ ‘পতাকা’ নির্মাতা দলের দলনেতা ইকরাম হোসেন জানিয়েছেন, আমাদের তরুণদের প্রোগ্রামিংয়ে পিছিয়ে থাকার মূল কারণ ভাষা সমস্যা। নতুনদের কাছে কোডিং জিনিসটি কঠিন বা ঘোলাটে লাগতেই পারে।
আইসিটি বিষয়টিতে কোডিংয়ের কিছু জিনিস রয়েছে, যা প্রথমবারের মতো অনেক ছাত্রছাত্রী সহজে নিতে পারে না। নাম্বারের জন্য হয়তো মুখস্থ করে যায় পুরোটাই কিন্তু কোডিংয়ের আসল মজাটাই তারা পায় না। এর মূল কারণ হিসেবে উপযুক্ত ‘সহযোগিতার’ অভাবকেই চিহ্নিত করেন তিনি। এই দলের সদস্যরা হলেন ইকরাম হোসেন, ওসমান গণি নাহিদ ও রাকিব হাসান অমিয়।

ড্যাফোডিল ইন্টারন্যাশনাল ইউনিভার্সিটি থেকে সফটওয়্যার প্রকৌশল নিয়ে পড়াশোনা শেষ করে নিরলসভাবে কাজ করে যাচ্ছেন ইকরাম হোসেন। সম্প্রতি মুক্তি পাওয়া পতাকার বেটা সংস্করণের পতাকা কোডের প্রতিটি লাইন হবে সম্পূর্ণ বাংলায়, মোটামুটি দৈনন্দিন ব্যবহৃত একটি বাক্যের মতো। কোড লিখার জন্য আছে কোড হাইলাইটিংসহ একটি চমৎকার কোড এডিটর। আপনার চিন্তাচেতনাকে প্রোগ্রামিং রূপ দেয়া এবং বাংলায় লেখার জন্য পতাকায় যেকোনো ইউনিকোড টুল (অভ্র/ইউনিবিজয়) ব্যবহার করতে পারবেন।
অভ্র/বিজয় পিসিতে ইনস্টল না থাকলেও সমস্যা নেই, এডিটর এ বিল্ট-ইন ফনেটিক বাংলা (অভ্র) লেখার সুবিধা রয়েছে। তা ছাড়া এডিটরের ডানে থাকা কিওয়ার্ডগুলো কিক করলেই তা ইনডেশনসহ অটো-টাইপ হয়ে যাবে, ফলে সিনট্যাক্স ভুলে যাওয়ার চিন্তা নেই।
ড্যাফোডিল ইন্টারন্যাশনাল ইউনিভার্সিটি থেকে সফটওয়্যার প্রকৌশল বিষয়ে পড়াশোনা শেষে দেশের একটি আইটি প্রতিষ্ঠানে কাজ করছেন পতাকা দলের আরেক সদস্য ওসমান গণি নাহিদ। তিনি বলেন, আমাদের কাজের লক্ষ ছিল নিজেদের মাতৃভাষায় নতুনদের সহজে প্রোগ্রামিংয়ের সঙ্গে পরিচিত করে দেয়া।
পুরো কাজ সম্পন্ন করতে আমাদের লেগেছে ছয় মাস। এর কেবল অনলাইন সংস্করণ হিসেবে চালু করা হয়েছে আপাতত।
 শিগগিরই তারা এর ডেস্কটপ সংস্করণ আর মোবাইল অ্যাপ হিসেবেও মানুষের কাছে পৌঁছে দিতে পারব। সবার অংশগ্রহণের মাধ্যমে একে আরো সমৃদ্ধ করতে চাই আমরা। আর তাই অনলাইনে ‘ওপেন সোর্স’ হিসেবেই রাখা হচ্ছে ‘পতাকা’কে।
এ ছাড়া এর সঙ্গে দেয়া গেইমিংয়ের নতুন কিছু লেভেল যোগ করবেন তারা, যার মাধ্যমে ছোটরাও খেলতে খেলতে পরিচিত হতে পারবে কোডিংয়ের নতুন এই জগতে।


ইউনিভার্সিটি অব কার্ডিফ থেকে কম্পিউটার বিজ্ঞান ও প্রকৌশল বিভাগের শিক্ষার্থী অমিয় জানান, নতুন এই বাংলা প্রোগ্রামিং ল্যাঙ্গুয়েজ নবীনদের জন্য ভালো প্ল্যাটফর্ম তৈরি করে দিতে পারবে বলে বিশ্বাস করছেন তরুণ প্রকৌশলী এই দলটি। নিজেদের এই কাজ একেবারেই অলাভজনক এবং বিজ্ঞাপনমুক্ত বলে দাবি করেন তারা। শুধু প্রথমবারের মতো বাংলা প্রোগ্রামিং ল্যাঙ্গুয়েজ তৈরির ‘কৃতিত্ব’টুকুই চান তারা। আগামী ১৬ ডিসেম্বর ‘পতাকা’-এর মূল সংস্করণ মুক্তি দিতে পারবেন বলে আশা প্রকাশ করছেন।

কোড রিপোজিটরীর এবং ছোটদের জন্য ভিজুয়াল গেম এর মাধ্যমে প্রোগ্রামিং শিক্ষায় আগ্রহী করে তুলতে পতাকার সূচনা করা হয়। আগামি ২০ তারিখ http://potaka.io/ ওয়েবসাইটে অনলাইন কম্পাইলার এবং টিউটরিয়াল সহ প্রকাশ পাবে এই ল্যাংগুয়েজ। 

ড্যাফডিল বিশ্ববিদ্যালয়ের ইকরাম হোসেন, রাকিব হাসান অমিয়, ওসমান গনী নাহিদ ডেভেলাপ করেছেন এই ল্যাংগুয়েজটি।
বর্তমানে পতাকার ওয়েবসাইটে (potaka.io) একটি অনলাইন কম্পাইলার এবং বেশ কিছু গেইম রয়েছে।
এছাড়া সেখানে অভ্র কীবোর্ড ছাড়াও লেখার ব্যাবস্থা আছে।
http://potaka.io/docs?page=contribution

পতাকার ফেইসবুক পেইজ

http://potaka.io/

পতাকার ফেইসবুক ইভেন্ট পেইজ

বিভাগঃ কিছু টুকরো খবর প্রোগ্রামিং

আরও পড়ুন

Non- Removable Footer Credit Link Javascript

আসসালামু আলাইকুম,

কেমন আছেন? আশা করি ভালই। মুসলিম ভাইয়ারা রোজা রেখেছেন নিশ্চয়ই? আমিও রেখেছি।

আমার নতুন একটা জাভাস্ক্রিপ্ট,  Non- Removable Footer Credit by 4urThoH1N (এটা আমার সাইবার নেইম, যেহেতু আমি হ্যাকার না, সেহেতু আপনাদের জানাতে দ্বিধা নেই)



আপনি টেম্পলেট ডিজাইনার হলে আপনি এই স্ক্রিপ্ট ব্যাবহার করতেই পারেন। সাথে আমার কমেন্ট (ক্রেডিট) রাখবেন, এটা কিন্তু নৈতিকতার অংশ। আমি নিজেই কোড করেছি, এই স্ক্রিপ্ট + এনক্রিপ্টার দুইটিই।

এটা একটা সিম্পল জাভাস্ক্রিপ্ট। সিম্পল বলেই হয়তো মনে প্রশ্ন জাগতে পারে, তাহলে তো ক্লায়েন্ট এটা রিমুভ করে দিতেই পারে। না, এবার আমার জাভাস্ক্রিপ্ট এনক্রিপ্সন আপনাদের সাহাজ্জ করবে। তবে রিমোট সারভারে হোস্ট করে লিঙ্ক দিয়ে জাভাস্ক্রিপ্ট এটাচ করলে ভালো হয় হয়তো। আর এই স্ক্রিপ্টের সাথে আপনার টেম্পলেটের গুরুত্তপুরন কিছু কোড, যেগুলো ছাড়া টেম্পলেট লোড হবে না, সেগুলো দিতে পারেন। এতে ইউজার জাভাস্ক্রিপ্ট রিমুভ করলে তার পুর টেম্পলেট ক্রাশ করবে।

আমি আমার জাভাস্ক্রিপ্টে যেসব ফিচার রেখেছি,

1. ক্রেডিট লিঙ্ক রিমুভ করলে সেই মডিফাই করা লিঙ্কে আবার স্বয়ংক্রিয়ভাবে আপনার ভেরিয়েবলে দেওয়া লিঙ্ক বসে যাবে।
2. এইচটিএমএল কনটেন্ট পরিবর্তন করলে স্বয়ংক্রিয়ভাবে আপনার দেওয়া ভেরিয়েবলে দেওয়া এইচটিএমএল কনটেন্ট বসে যাবে।
3. নিচের ফুটার ক্রেডিটের লিঙ্কটাই রিমুভ করে দিলে পেইজ আপনার ওয়েবসাইটে অটো রিডাইরেক্ট হয়ে যাবে।
4. কোনো কাস্টম সিএসএস দিয়ে লিঙ্ক হাইড করা যাবে না। যেমন, style="display:none" ইত্যাদি।

এখানে জেকুয়েরির ঝামেলা নেই, পিউর জাভাস্ক্রিপ্ট দিয়ে করা।

এবার কোড ব্যাখ্যা করার পালা,

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
&lt;script type="text/javascript"&gt;
function creditprotection(){
var url =  ('http://grplusbd.net');
var style =  ('display: inline; visibility: true;');
var footer =  document.getElementById('mycreditlink');
var display =  ("&lt;b&gt;GR+ Bangladesh&lt;/b&gt;");
if (footer === null) {
window.location = 'http://grplusbd.net';
}
else {
footer.href= url;
footer.style = style;
footer.innerHTML = display;
}
}
 window.onload = function(){creditprotection();};

// coded by 4urThoH1N
// tawsif.torabi
//  creative commons
// blog.grplusbd.net &amp; grplusbd.net

        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
&lt;center&gt;
Powered By &lt;a href='http://google.com' id='mycreditlink'&gt; 4urThoH1N &lt;/a&gt;
&lt;/center&gt;
    &lt;/body&gt;
&lt;/html&gt;

উপরে সম্পূর্ণ কোডের এইচটিএমএল সহ আছে। 

কমলা রঙ্গে হাইলাইট করা স্থানে আপনার কাঙ্ক্ষিত লিঙ্ক বসিয়ে দিন, প্রথমটি হবে ক্রেডিটে যে লিঙ্ক আসবে। এবং দ্বিতীয় কমলা হাইলাইট করা অংশ হবে রিডাইরেক্টে যে লিঙ্কে যাবে। আর আকাশি রঙের হাইলাইট করা অংশে আপনার লিঙ্কে যে লেখা থাকবে তা দিবেন। http://google.com হাইলাইট করা লিঙ্কে স্বয়ংক্রিয় ভাবেই পেউজ ব্রাউজারে ইন্টারপ্রেট হবার সাথে চেঞ্জ হয়ে আপনার দেওয়া লিঙ্কে পরিবর্তিত হয়ে যাবে।

ডাউনলোড ডকুমেন্ট ফাইল

ফাইল পাসওয়ার্ডঃ nonremovablecreditlink2.0

কিভাবে টেম্পলেটে অ্যাড করবেনঃ

• &lt;head&gt; এর নিচে জাভাস্ক্রিপ্ট পেস্ট করে দিন। করার আগে http://grplusbd.net/app/html-encoder ঠিকানায় গিয়ে base64 মেথডে একই কোড বারবার ৮ থেকে ১০ বার এনক্রিপ্ট করুন, এতে কোড বোধগম্য হবে না। ফলে ইউজারের কোড খুজে ডিলিট করার ধৈর্য চলে যাবে।

• এনক্রিপ্ট করার কোডের সাথে টেম্পলেটের গুরুত্বপূর্ণ কিছু কোড কাট করে নিয়ে পেস্ট করে এনক্রিপ্ট করুন, এতে ইউজার রিমুভ করতে পারলেও তার টেম্পলেট কোড ক্রাশ করবে।
• ব্লগার টেম্পলেট হলে, লগিন করে কাঙ্ক্ষিত ব্লগে দিয়ে টেম্পম্লেট ট্যাবে গিয়ে এডিট এইচটিএমএল ক্লিক করুন।

• এবার কোড টেম্পলেটে প্রবেশ করান।
• &lt;head&gt; এর নিচে এনকোড করা স্ক্রিপ্ট পেস্ট করুন বা রিমোট সারভারে হোস্ট করে লিঙ্ক করে দিন।

• এবার এইচটিএমএল টি পেস্ট করুন, আপনি ডিজাইনার হলে আশা করি বুঝতে পারবেন কোথায় ক্রেডিট লিঙ্ক বসাতে হয়।
• যদি আপনার id='mycreditlink' ওয়েবপেইজের কোথাও না থাকে তবে এটী রিডাইরেক্ট করবে। থাকলে সে লিঙ্ক তৈরি করে প্রিন্ট করবে।

 না বুঝতে পারলে ডকুমেন্টেশন ডাউনলোড করে দেখুন। অথবা আমার সাথে ফেসবুকে যোগাযোগ করুন।

বিভাগঃ জাভাস্ক্রিপ্ট

আরও পড়ুন

হিন্দি সিরিয়ালের স্ক্রিপ্ট এবং আমাদের আইকিউ!

বর্তমানে মা বোনদের কাছে ট্রেন্ড হল হিন্দি সিরিয়াল। একটা সন্ধ্যা যদি হিন্দি সিরিয়াল ছাড়া চলতে পারে, তবে ঘরে যেন নীরবতার শান্তি নেমে আসে।

আমি সিরিয়াল দুই চোখে দেখতে পারি না। এক নম্বর আজাইরা কারন, আমি একজন ছেলে, তাই কুটনামি সহ্য করতে পারি না। দেখলেই থাপড়ায় কালা পাটির সাদা দাঁত উপড়ায় দিতে মন চায়। হাজার হোক, বাপের টাকায় কেনা টিভি, তাই রাগ দেখাতে পারি না।

যে সিরিয়ালের কাহিনী আমরা মুখে সামারি বলতে লাগবে পনের কি বিশ মিনিট, এই চুলটারে টেনে টেনে পাঁচ বছরের প্যাঁচের কাহিনী বানাতে একজন স্ক্রিপ্ট রাইটারের লাগে সাড়ে পাঁচ ঘন্টা। এটা আমার উর্বর মস্তিষ্কের উদ্ভট ক্যাল্কুলেশনের মাধ্যমে বের করা হয়েছে।

বলতেই হবে কিন্তু,হিন্দি বা ভারতীয় বাংলা সিরিয়ালের স্ক্রিপ্ট রাইটারেরা এবং ডিরেক্টরেরা জাদু জানেন, একেবারেই ম্যাজিকমণি তারা! 

কিভাবে কিভাবে তারা পাঁচ মিনিটের তারছেঁড়া গল্পগুলোকে মা বোনদের মাথায় ইঞ্জেক্ট করে দিচ্ছে। সত্যি! বুদ্ধি আছে বলতে হবে। বুদ্ধি না থাকলে এসব বুলশিট অন এয়ারেই যেতে পারত না। এখন কিনা এসব সারাক্ষন চালানর জন্য গোটা দশেক চ্যানেলই আছে! যেমন স্টার গলশা, জী? বাংলা :p ভবিষ্যতে এসকিউএলআই এর বদলে বলা হবে এইচএসআই (হিন্দি সিরিয়াল ইঞ্জেকশন)

আচ্ছা, আমি এলা এট্টু ক্ষান্ত দেই। আপনেই বলেন, গত আট দশ বছরে দেখা সিরিয়ালে কোনো নতুনত্ব পেয়েছেন কি? 

সব চুলই একরকম, একটার সাথে আরেকটার কোন ফারাক নেই। গ্রামে যায়, একটা মেয়ের সাথে বিয়ে হয়, শহরে আসে, আরেকটা বিয়ে জোর করে হয়। ব্যাস! দুই সতীনের গৃহযুদ্ধ এবং অতঃপর ইতিহাস। 

আমি মুল প্রসঙ্গে যাওয়ার আগে কাহিনী গুলোর অ্যালগোরিদম দিয়ে যাই।

অ্যালগোরিদম নাম্বার একঃ

পয়সাওয়ালার ছেলে গ্রামে যাবে, কোনো মেয়েকে বিপদে পড়তে দেখে বা বিপদে পড়ে বিয়ে করে নিবে। সেই মেয়ের পরিচয় সে গোপন রাখবে। শহরে যাবে, আগে থেকে ঠিক করে রাখা পয়সাওয়ালার লাফাঙ্গা কন্যাকে বিয়ে করবে। বিয়ের পর সে সবার সামনে প্রথম স্ত্রীর পরিচয় দেবে (হারামি আগে দিবে না) তারপর দুই বউ নিয়ে থাকবে। একসময় এক বউ আরেক পুরুষের প্রেমে পাগল হয়ে গ্রুপ লিভ দিবে। #ঠুগ_জীবন

অ্যালগোরিদম নাম্বার দুইঃ

এই কাহিনী গুলোয় টুইস্ট আছে। টাইমিং টুইস্ট। এবং জিলাপির টুইস্ট! দেখা যাবে একটা গল্প চলছে। একটা মেয়ের তার বাবা মায়ের সাথের সুখি জীবনের গল্প। মেয়ের বিয়ে হবে। বিয়ের পরে সে হটাৎ জানতে পারে তার শ্বশুর তার জন্মদাতা পিতা :3 আবার জিলাপির প্যাঁচ খেয়ে ইউ, ভি ডাবলু সব টার্ন মাইরা কাহিনী কোনদিকে গেছে সেটা বোঝা আরেকটা আইকিউ টেস্ট।

ঐদিন আম্মা কী একটা সিরিয়াল দেখছিল। সেখানে এক স্বামী তার স্ত্রীকে ছেরে পালিয়ে বেরাচ্ছে, কারন সে মিথ্যা মামলায় ফেরারি আসামি। মামলার কারন সে তার সৎ মায়ের খুনি। কিন্তু সৎ মা ছদ্মবেশে নিজ বাড়িতে অবস্থান করছে। পুলিশের চোখে ধোঁকা দিতে সৎ মা মরার অভিনয় করে হাসপাতালে স্ট্রেচারে মৃতের মতো অভিনয় পর্যন্ত করে। ঠগ হইল এখানে, পুলিশ কি লাশ ময়না তদন্ত করে না। করলে তো বুড়ি লাফ দিয়া উইঠা বসতো!

ফেরারি আসামি স্বামী বাবার অসুস্থতার খবর পেয়ে হাসপাতালে যায়। সেখানে স্ত্রীকে দেখে তার প্রেম জাগ্রত হয়......

ইতিহাস......

কিন্তু তার সৎ ভাই  হিডেন ক্যামেরা সেট করে রাখে বলে স্ত্রীর সাথের ছবি তোলা হয়ে যায় গোপনে। হিডেন ক্যমেরার ভিডিও যখন ভিলেন সৎভাই নাটকীয় ভঙ্গিমায় দেখাতে যায়, তখন দেখা যায়, দুই পয়সার হিডেন ক্যামেরাও ফোর কে রেজুলেশনে ছবি তুলতে পারে। আবার সেই ইন্টারেক্টিভ ক্যামেরা! এদিক সেদিক নরে চরে! যেদিকে টারগেট, সেদিকে ফিরে ফোকাস করে ভিডিও করে। -_-

সামনে জোরে জোরে আওয়াজ দিয়ে ষড়যন্ত্র করছে, হাতের আইফোন দিয়ে তা ভিডিও করার বুদ্ধিটাও নেই।

আমাকে একটা জিলাপি দিবেন? খাই... খুব ঝাল তাই না???

বিভাগঃ আমার দৃষ্টিতে

আরও পড়ুন

Prisma for Android - ভাইরাল অ্যাপ "প্রিজমা" এখন এন্ড্রয়েডেও!

সামাজিক যোগাযোগ মাধ্যমগুলোয় ভাইরাল হয়ে উঠেছে একটি ফিল্টার সেট। নাম প্রিজমা। এই ফিল্টার দেওয়া ছবি আপলোড হচ্ছে ফেসবুক, টুইটার এবং ইন্সট্রাগ্রামে। এই ফিল্টারে ছবি দিলে মনে হবে না কোন ছবি, মনে হবে বিখ্যাত কোনো শিল্পী একে দিয়েছেন আপনার ছবি!

এই জাদুর অ্যাপ ৭ দিনেই ভাইরাল হয়ে গেছে এবং আই টিউন্স থেকে ৭ মিলিওন বার ডাউনলোড হয়েছে! ৪০টির উপর দেশে টপ র‍্যাঙ্কিংএ উঠে এসেছে!

ব্যাবহারকারিদের জনপ্রিয়তা ও প্রশংসা পেয়ে এবার এর রাশিয়ান ডেভেলপারেরা বানালেন এর এন্ড্রয়েড ভার্সন!

গতকালই রিলিজ পেল এই অ্যাপটির বেটা এন্ড্রয়েড ভার্সন।

এই অ্যাপএর বিশেষত্ব হল, এটি যেকোনো ছবিতে আর্টওয়ার্ক করতে পারে।

বিখ্যাত শিল্পীদের আর্টওয়ার্ক অ্যালগরিদম ব্যাবহার করে এখানে বেশকিছু চমৎকার ফিল্টার দেওয়া হয়েছে।

 New Google Play Release

iTunes

বিভাগঃ এন্ড্রয়েড অ্যাপ

আরও পড়ুন

আমাদের হাত জৈবিক, যান্ত্রিক নয় মন্ত্রিমশাই

এবার আরেক গুটির আবির্ভাব, ৭ খানা সৃজনশীল।

যখন থেকে আমাদের সৃজনশীল পদ্ধতির আবির্ভাব, তখন থেকেই আমরা ৬টি সৃজনশীল দিয়েই আসছি। এবার নাকি আমাদের পরানপ্রিয় শিক্ষামন্ত্রি নুরুল ইসলাম নাহিদ স্যার সুন্দর করে আমাদের ঘাড়ে আরেকটি বেশি সৃজনশীল চাপিয়ে দিয়েছেন।তাও একেবারে শেষ মুহূর্তে! যখন আমাদের এসএসসি পরীক্ষার আর মাত্র ৩টি মাস বাকি! এখন আমরা কিভাবে মাত্র ১০ মিনিট দিয়ে আরেকটি সৃজনশীল লিখবো যেখানে আমরা ২ ঘন্টা ১০ মিনিটেই ৬টা লিখতে গিয়ে কুপোকাত হয়ে যাই? অনেকেই সম্পূর্ণ উত্তর লিখতে পারে না, মুল বক্তব্য লিখে চলে আসে, এই সময়ের অব্যাবস্থাপনায় তারা তাদের গ্রেড পায় কম। আবার অনেক দুর্বল শিক্ষার্থী না লিখেই চলে আসতে বাধ্য হয়।

কিভাবে কেবল মাত্র ৪ মাসে আমরা ১০ মিনিটে একটা সৃজনশীল লেখার অনুশীলন করবো? এটা কি কখনো সম্ভব?

চিত্রগ্রাহকঃ তাহজীব ইসলাম জামি

এখন যদি কিশোরদের কিশোরীদের বর্তমানের আদর্শ মানুষটাও, প্রিয় মানুষটাও তাদের বিরুদ্ধে দাঁড়ান, এই অমানবিকতার পক্ষে থাকেন, তবে আমরা কি বলতে পারি?
আমার বন্ধু নাফসিন বিজ্ঞান কংগ্রেসে ডঃ মুহম্মদ জাফর ইকবাল স্যারকে কতগুলো প্রশ্ন করে,
ছিলো এইরকম,

নাফসিনঃ ২০১৭ সাল থেকে ৭ টা সৃজনশীল লেখতে হবে, এটা কি আপনি সমর্থন করেন?
মুহম্মদ জাফর ইকবালঃ অবশ্যই সমর্থন করি।
নাফসিনঃ স্যার, এটা করার উদ্দেশ্য কি?
মুহম্মদ জাফর ইকবালঃ আমি জানি না।(উনি না জেনেই সমর্থন করছেন)

নাফসিনঃ কিন্তু স্যার, আমাদের তো একটা প্রস্তুতির ব্যাপার আছে... আমরা সারাটা সময় ৬টা দিয়ে এসেছি, এখন শেষ মুহূর্তে এভাবে একটি বাড়িয়ে দিলে...

মুহম্মদ জাফর ইকবালঃ ৭টা যা, ৭০০টা তা, ৭০০০টা তাই... একই

ভিডিও কনভারসেশন লিংক 

আরেকজন কিছু বলতেই উনি বলে বসেন, অভিযোগ করবে না,যা দিয়েছে তা মেনে নাও এবং লিখতে না পারলে পড়াশোনা ছেড়ে দাও।

কেনো? লিখতে না পারলেই পড়াশোনা ছেড়ে দেবো কেনো? আপনারা যা খুশি করবেন, আর আমরা মুখ বুজে সহ্য করবো? কেনো? আমাদের দোষ কি? আমরা কি আপনাদের অফিসে গিয়ে পরীক্ষার আগের রাতে প্রশ্ন চুরি করে ফাঁশ করি? যেসব চুনোপুটি গুলো করে তাদের ধরেন... ধরে আমাদের হাতে ছাড়েন, দেখবেন আর প্রশ্ন চুরি যাবে না। প্রশ্ন চুরি যায়, ফাঁশ হয় আপনাদের মতো উঁচুদরের মানুশগুলোর বেখেয়ালিপনায়। যার ফলাফল আমরা ভোগ করি।

আরেকটা কথা ডিয়ার জাফর ইকবাল স্যার, আপনি একজন বিশ্ববিদ্যালয়ের শিক্ষক, বোর্ড পরীক্ষক নন, আপনি জানেন না, আমরা কি পরিমান লেখার পর নাম্বার তুলি। আমরা কেবল মুল বক্তব্য লিখলে এবং কেবল মুল বিষয় লিখলে একটি উচ্চতর দক্ষতায় পাই ২ বা ৩। যেখানে আমরা আমাদের উত্তর দিয়ে ৪ এর মাঝে ৪ পাওয়ার যোগ্যতা রাখি সেখানে আমাদের ২ বা ৩ দেওয়া হয়। অনেক অমানুষের মতো শিক্ষক তো ইচ্ছেমত কম দিয়ে আবার খাতার ছবি তুলে সামাজিক যোগাযোগ মাধ্যমগগুলোয় পোষ্ট করেন।
আমরা অনেকটা বাধ্য হয়েই একটা ২০ লাইনের উত্তরের যায়গায় বেশি নাম্বারের আশায় রচনা লিখে ফেলি। সেখানে আমাদের সময় অনেক ক্ষেত্রেই কুলিয়ে উঠে না। এবং অনেকেই যে ৫টির পর লেখার আগ্রহ হারিয়ে ফেলে সেটা একটা ওপেন সিক্রেট।
এবং আমাদের এই সৃজনশীল শিক্ষা ব্যাবস্থা কখনই আমাদের সৃজনশীলতা বিকশিত করে না। হয়তোবা করে, আমরা বুঝতে পারি না 😁😁
তবে এই ৭টি সৃজনশীল কোনো সৃজনশীলতার বিকাশ নয়, বরং এটি আমাদের পরীক্ষার হলের মানসিক চাপ বাড়িয়ে দিচ্ছে।

আমরা, মানে আমাদের এই এস এস সি ২০১৭ ব্যাচ যেনো সব কিছুর গিনিপিগ। আমাদের দিয়ে অংকে সৃজনশীল শুরু, JSC 2014
PSC শুরু আমাদের দিয়ে
এবার ৭টি সৃজনশীল শুরু আমাদের দিয়েই।
কেনো? আমরাই কেনো সবসময় এসব উদ্ভট শিক্ষানীতির শিকার?
 আমাদের হাত কিন্তু জৈবিক, যান্ত্রিক নয় মন্ত্রিমশাই 😒
আমরা এই অতিরিক্ত সৃজনশীল লিখবো না, আমাদের প্রথমেই জানালে হয়ত আমরা প্রস্তুতি নিতাম, শেষ মুহুর্তে কেনো? আমাদের পরের ব্যাচ থেকে সাতটি হোক। আপনাদের ভুলভ্রান্তির মাশুল আমাদের হাত কেনো দেবে?
আমরা এই ৭টি সৃজনশীল বয়কট করি।
আগামীকাল মিরপুর ১০ র‍্যালি এবং মানববন্ধন। ঠিক সকাল ১১.৩০ সময়ে, সকল শিক্ষার্থীকে স্কুল পোশাকে থাকার আমন্ত্রন জানাচ্ছি।

প্রথম প্রকাশঃ জিআর+, সেপ্টেম্বর, ২০১৬

বিভাগঃ আমার দৃষ্টিতে

আরও পড়ুন

পোর্টফোলিও ওয়েবসাইট ডিজাইন - পর্ব ২ - প্রথমে একটা বেসিক পোর্টফোলিও ওয়েবসাইট ডিজাইন শিখো

এবার আমরা একটা বেসিক পোর্টফলিও সাইট করে দেখবো।তো যারা জানো তারা জানো, যারা জানো না তারা তাদের এডিটর খুলো প্লিজ।
যেকোনো এডিটর ইউজ করা যেতে পারে, যার যেটা ভালো লাগে। আমি এনপিপি ইউজ করি :)

এবার আমরা তাহলে শুরু করি। আবার বলে রাখি, পোস্টটি নতুন্দের জন্য।

আমাদের আজকের প্রোজেক্টের ডেমো এবং কোডের ডাউনলোড লিঙ্ক পোস্টের একেবারে শেষে দেওয়া হয়েছে :)

প্রথমে একটা এইচটিএমএল ফাইল তৈরি করো, আমাদের একটা ডিরেক্টরি প্রয়োজন হবে। যারা লোকালহোস্ট দিয়ে কাজ করবে, তারা ইনডেক্স নাম দিয়ে করলে সুবিধা পাবে।

তো আমি ইনডেক্স ফাইলে প্রয়োজনীয় মেটা ট্যাগ দিয়ে নিচ্ছি, এখানে কেবল ব্যাসিক দেখাবো বলে কেবল দুইটি মেটা ট্যাগ দিচ্ছি। এর পরের পর্বে আরও কিছু দেখানো হবে :)

Meta Tag দেওয়া

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Tawsif Torabi's Portfolio Website&lt;/title&gt;
&lt;link rel="stylesheet" href="style.css"/&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;

এই হেড ট্যাগে ওয়েবপেইজের টাইটেল এবং একটি সিএসএস ফাইলকে লিঙ্ক করা হয়েছে।

এবার আমাদের স্টাইলশিট ফাইল বা সিএসএস ফাইল তৈরি করতে হবে।

নোটঃ 
যে নাম লিঙ্ক করা হবে সেটির নামেই স্টাইলশিট ফাইলের নাম দিতে হবে।

 

এবার আমরা এইচটিএমএল এবং সিএসএস কোড লেখা শুরু করতে পারি 


আমাদের প্রথমে ওয়েবপেইজের মেইন স্ট্রাকচার দাড়া করাতে হবে।
নিচে আমার ওয়েবপেইজের স্ট্রাকচারের কোড দিলাম :)

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Tawsif Torabi's Portfolio Website&lt;/title&gt;
&lt;link rel="stylesheet" href="style.css"/&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;center&gt;
&lt;div class="header"&gt;
&lt;h2&gt;Simple Portfolio Website&lt;/h2&gt;
&lt;h4&gt;My Photography and Graphics Works&lt;/h4&gt;
&lt;/div&gt;
&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;

এবং সিএসএস কোড, 

body{ background-color: skyblue; font-family: Arial;}h2{ font-size: 35px; text-shadow: 1px 1px 2px black;}.header{ border-radius: 9px; padding: 2px 6px; background-color: white; box-shadow: 0px 0px 8px black;}

এবার আমরা কোড রান করলে দেখতে পাবো,

এবার আমরা পোর্টফলিও করা শুরু করবো,
আগে আমরা আমাদের স্টাইলশিটে নিচের সিএসএস কোড অ্যাড করে নেই,

.portfolio-item {    width: 182px;    padding: 4px;    background: #eee;    text-align: center;    float: left;    margin: 0 7px 14px 7px;}.portfolio-item p.btn {    margin: 0;}
.picture-items { height: 150px; width: auto;}
.portfolio-item p.btn a {    display: block;    width: 183px;    height: 29px;    padding: 7px 0 0 0;    background-color: #b5deff;    font-weight: bold;    text-align: center;    text-decoration: none;}#content {    padding: 57px 69px 50px 69px;    overflow: hidden;}.imageContainer {    overflow: hidden;} 

এবার আমাদের প্রতিটি ছবির জন্য একবার করে একটা ইমেজ কন্টেইনার বসাতে হবে।
কন্টেইনারের কোড হলো,

&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;
&lt;a href="#"&gt;
&lt;img class="picture-items" src="images/9.jpg" alt="View more info" /&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;

See More লেখার মাঝে কোনো লিঙ্ক বা ইমেইজের ডিটেইল দেওয়া যেতে পারে।

উপরের কোডটি প্রতিটী ইমেজের জন্য ডুপ্লিকেট করে নিতে হবে। 

যেমন,

&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/1.jpg" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt; &lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/2.jpg" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/3.png" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/4.png" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;

প্রশ্ন করতে পারো যে, আমি কেনো আবার ইমেজ কন্টেইনার নামে আবার আরেকটা ডিভিশন তৈরি করেছি। এটা বাদ দিলেও তো হতো... আচ্ছা, বাদ দিয়ে দেখ।

এটা তোমার পোর্টফলিও ইমেজ গুলোকে রেস্পন্সিভ করে এবং অভারফ্লো দেখাতে দেয় না। ফলে আমরা একটা ক্লিন ডিজাইনের পোর্টফলিও দেখতে পাই।

এবার আমরা সেইভ করে ফলাফল দেখি,

এবার ফাইনাল কোড;

HTML:

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Tawsif Torabi's Portfolio Website&lt;/title&gt;
&lt;link rel="stylesheet" href="style.css"/&gt;
&lt;/head&gt;


&lt;body&gt;
&lt;center&gt;
&lt;div class="header"&gt;
&lt;h2&gt;Simple Portfolio Website&lt;/h2&gt;
&lt;h4&gt;My Photography and Graphics Works&lt;/h4&gt;
&lt;/div&gt;





&lt;div id="content"&gt;


&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/1.jpg" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;



&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/2.jpg" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;


&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/3.png" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;


&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/4.png" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;


&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/5.jpg" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;


&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/6.png" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;


&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/7.png" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;


&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/8.jpg" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;


&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/9.jpg" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;



&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/9.jpg" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;



&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/9.jpg" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;


&lt;div class="portfolio-item"&gt;
&lt;div class="imageContainer"&gt;&lt;a href="#"&gt;&lt;img class="picture-items" src="images/9.jpg" alt="View more info" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p class="btn"&gt;&lt;a href="#"&gt;See more&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;


&lt;/div&gt;


&lt;/center&gt;
&lt;/body&gt;


&lt;/html&gt;

এবং CSS কোডঃ

body{
background-color: skyblue;
font-family: Arial;
}
h2{
font-size: 35px;
text-shadow: 1px 1px 2px black;
}
.header{
border-radius: 9px;
padding: 2px 6px;
background-color: white;
box-shadow: 0px 0px 8px black;
}
.clear{
height: 100px;
}
.portfolio-item {
width: 182px;
padding: 4px;
background: #eee;
text-align: center;
float: left;
margin: 0 7px 14px 7px;
}
.portfolio-item

p.btn {
margin: 0;
}



.picture-items {
height: 150px;
width: auto;
}



.portfolio-item

p.btn

a {
display: block;
width: 183px;
height: 29px;
padding: 7px 0 0 0;
background-color: #b5deff;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#content {
padding: 57px 69px 50px 69px;
overflow: hidden;
}
.imageContainer {
overflow: hidden;
}

এবার তোমরা চাইলে প্রোজেক্টের ফাইল ডাউনলোড করে নিতে পারো বা এখানে এই লিঙ্ক থেকে ডেমো দেখে নিতে পারো। এরপরের পর্বে তোমাদের আমার ডিজাইন করা টেম্পলেটটি দেবো এবং শিখিয়ে দেবো কিভাবে প্রফেশনাল এইচটিএমএল পোর্টফলিও টেম্পলেট ডিজাইন করা।
তাই আমার সাথেই থাকো। আমার সাথে অথবা আমাদের ফেইসবুক পেইজে লাইক অথবা ফলো দিয়ে একটিভ থাকো, তবে আমি ফেইসবুক পোস্টের মাধ্যমে তোমাদের নোটিফাই করতে পারবো।

আমার সাথে ফেইসবুকে অ্যাড হতে পারো :)

fb.com/tawsif.torabi

বিভাগঃ ওয়েব ডিজাইন

আরও পড়ুন

পোর্টফোলিও ওয়েবসাইট ডিজাইন - পর্ব ১ - পোর্টফোলিও কি এবং কেন?

কেমন আছো সকলে? পড়াশোনায় ব্যাস্ত থাকায় ব্লগপোস্ট করা নিয়মিত হয়ে ওঠে না।

এই ওয়েব ডিজাইন পোস্ট সিরিজে তোমাদের আমি পোর্টফলিও ওয়েবসাইট ডিজাইন সম্পর্কে ব্যাসিক এবং প্রফেশনাল দুইটি অংশ সম্পর্কে সম্যক ধারণা দেবো এবং টিউটোরিয়াল দেখাবো। এছাড়া তোমরা আমার একটি পোর্টফলিও ওয়েবসাইটের এইচটিএমএল টেম্পলেট বিনামুল্যে পাবে এই সিরিজে! :)

চলো আগে জেনে নেই পোর্টফোলিও কি?

চাইলে উইকিপিডিয়া থেকে দেখে নিতে পারো।

পোর্টফলিও হল ব্রিফকেইস। হ্যাঁ!
ঠিক তাই।

ব্রিফকেসের মাঝে যেরকম নানা রকম ফাইল সাজানো গোছানো থাকে, সেরকম ব্যাবস্থাকেই বলা হয় পোর্টফলিও।

আর এভাবে আমাদের কোনো কাজ সুন্দর করে সাজিয়ে ভিজিটর বা ক্ল্যায়েন্টের সামনে উপস্থাপন করার জন্য যে ওয়েবসাইট ডিজাইন করা হয় তাকে পোর্টফলিও ওয়েবসাইট বলে।

• পোর্টফোলিও ওয়েবসাইট হচ্ছে এমন একটি ওয়েবসাইট যা একজন ব্যক্তির অথবা প্রতিষ্ঠানের গুন এবং কর্মসূচীগুলো বিশ্বের সকলের কাছে সহজে সুন্দরভাবে উপস্থাপন করার সুযোগ করে দেয়।
  সেই ওয়েবসাইটের মালিকানাধিন কোম্পানি হতে পারে গ্রাফিক ডিজাইন টিম, এনিমেশন স্টুডিও, ওয়েব ডেভেলপার টিম কিংবা যে কোন সংগঠন।
• আবার ব্যাক্তিগত পোর্টফোলিও ওয়েবসাইট হল এমন একটি ওয়েবসাইট যা একজন ব্যক্তির গুন এবং কর্মসূচীগুলো বিশ্বের সকলের কাছে সহজে সুন্দরভাবে উপস্থাপন করার সুযোগ করে দেয়।
  সেই ওয়েবসাইটের মালিকানাধিন ব্যাক্তি হতে পারে গ্রাফিক ডিজাইনার, অ্যানিমেটর, ওয়েব ডেভেলপার, লেখক কিংবা যে কেউ।

Portfolio Website

এখন বলি, পোর্টফোলিও কেন করা হবে।

আসলে একজন ভিজিটর অথবা ক্লায়েন্ট কোনো ওয়েবসাইটের কভার পেইজে লেখা আর্টিকেল কিংবা সার্টিফিকেট দেখতে চায় না। কারন এতকিছু দেখার সময়ও তাদের হাতে থাকে না এবং তারা অধৈর্য হয়ে পরে।

তারা দেখতে চায় তুমি কি কাজ করো, কেমন করে করো।
সেটাই যদি তুমি তোমার ওয়েবসাইটে তুলে ধরতে পারো তবেই নানা রকম বেনিফিটপূর্ণ কাজ পাবার সম্ভাবনা অনেক বেড়ে যায়।

একটা পোর্টফলিও সাইটে কি কি থাকতে পারে,

1. তুমি যেসব প্রোজেক্ট করেছ সেই সব প্রোজেক্টের লিষ্ট
2. প্রোজেক্টের ছবি
3. কাজের ক্ষুদ্র বর্ণনা
4. কাজের রেইট এবং ফিস

আগামি পর্বেই শুরু হবে টিউটোরিয়াল। তাই, স্টে টিউন্ড ;) 

আমার সাথে ফেইসবুকে অ্যাড হতে পারো :)
fb.com/tawsif.torabi

বিভাগঃ ওয়েব ডিজাইন

আরও পড়ুন