نبیل
تکنیکی معاون
یہ ٹیوٹوریل محفل فورم کی چھٹی سالگرہ کے موقعے پر پیش کیا گیا ہے۔
السلام علیکم،
میں نے حال ہی میں ایک سادہ اردو ویب صفحہ بنانے کا ٹیوٹوریل پوسٹ کیا ہے جس کے آخر میں ایک سادہ ایک کالمی لے آؤٹ کے استعمال کے بارے میں بھی بتایا گیا ہے۔ سی ایس ایس لے آؤٹس کا مؤثر استعمال ویب ڈیویلپمنٹ میں مہارت میں کلیدی حیثیت رکھتا ہے اور تمام ماڈرن ویب سائٹس میں خوبصورت لک اینڈ فیل کے لیے اور انفارمیشن کو مؤثر انداز میں بلاکس کی شکل میں پیش کرنے کے لیے سی ایس ایس لے آؤٹس کا ہی استعمال کیا جاتا ہے۔ اس ٹیوٹوریل میں میں سی ایس ایس لے آؤٹس کے بارے میں معلومات فراہم کروں گا اور اس کے ساتھ ساتھ سی ایس ایس لے آؤٹس کی آسان تیاری کے لیے ایک فریم ورک 960 گرڈ کے استعمال کے بارے میں تفصیل بیان کی جائے گی۔ اگرچہ 960گرڈ سسٹم کے استعمال سے متعلقہ کئی ٹیوٹوریل انٹرنیٹ پر دستیاب ہیں، لیکن ہم اس ٹیوٹوریل میں خاص طور پر اس گرڈ سسٹم کی اردو ویب صفحات میں تیاری میں استعمال کے بارے میں سیکھیں گے۔ اس ٹیوٹوریل کو فالو کرنے کے لیے ضروریات کی لسٹ بھی وہی ہے جو کہ سادہ اردو ویب صفحہ بنانے کے ٹیوٹوریل میں بیان کی گئی ہے۔ اس میں ایک اضافہ یہ ہے کہ ہمیں الگ سے 960 گرڈ سسٹم ڈاؤنلوڈ کرنے اور اس کی سٹائل شیٹس کو استعمال کرنے کی ضرورت پیش آئے گی۔
سی ایس ایس لے آؤٹس بنیادی طور پر ایچ ٹی ایم ایل کے div ایلیمنٹ کو استعمال کرکے انفارمیشن کو مستطیل شکل کے بلاکس میں منظم کرنے کی تکنیک ہے۔ ایک div ایلیمنٹ کے ذریعے نہ صرف انفارمیشن کو بلاک کی شکل میں منظم کیا جا سکتا ہے بلکہ اس کے اندر دوسرے div بلاکس کو بھی ترتیب دیا جا سکتا ہے۔
اگرچہ سی ایس ایس کے ذریعے بلاک ایلیمنٹس کو ویب صفحے پر قرینے سے ترتیب دینے کی بنیادی سہولت تمام جدید براؤزرز میں موجود ہے، لیکن اس تکنیک پر مہارت حاصل کرنے میں کچھ وقت لگتا ہے۔ مختلف براؤزرز کی خصوصیات کا علیحدہ سے دھیان رکھنا پڑتا ہے۔ خاص طور پر انٹرنیٹ ایکسپلورر کے باکس ماڈل کی خامیوں پر قابو پانے کے لیے اکثر کچھ ہیکس کا استعمال ضروری ہوتا ہے۔ ایک سی ایس ایس فریم ورک کے استعمال کا اصل فائدہ یہی ہے کہ اس کی صورت میں آپ کو ایک ایسا فریم ورک مل جاتا ہے جو کہ تمام براؤزرز پر ٹیسٹ اور آپٹمائز کیا جا چکا ہوتا ہے اور اس کے ذریعے افقی اور عمودی سمت میں بلاکس کو پوزیشن کرنا آسان ہو جاتا ہے۔ سی ایس ایس فریم ورکس استعمال کرنے کے جہاں فوائد ہیں وہاں چند نقصانات بھی ہیں۔ سی ایس ایس فریم ورک کے استعمال کے بعد آپ ویب پیج کے لے آؤٹ کو صرف اسی فریم ورک کے پیرامیٹرز کے مطابق ہی تبدیل کر سکتے ہیں۔ خود سے سی ایس ایس لکھنے کا یہ فائدہ ہوتا ہے کہ آپ کو ویب پیج ڈیزائن پر زیادہ کنٹرول حاصل رہتا ہے۔ لیکن میری نظر میں سی ایس ایس فریم ورک کے استعمال سے حاصل ہونے والے فوائد کا وزن اس کے نقصانات سے کہیں زیادہ ہے۔
960 گرڈ فریم ورک کا تعارف
960 گرڈ فریم ورک، جیسا کہ اس کے نام سے ظاہر ہے، 960 پکسل چوڑائی کے ویب صفحات کی تیاری میں استعمال ہونے والا فریم ورک ہے۔ 960 اس لحاظ سے اچھا نمبر ہے کہ اس کو کالموں کی مختلف تعداد میں صحیح اعداد (whole numbers) میں تقسیم کیا جا سکتا ہے۔ علاوہ ازیں 960 پکسل کی چوڑائی آج کل کے بیشتر مانیٹر ڈسپلے پر بآسانی فٹ ہو جاتا ہے۔
960 گرڈ بنیادی طور پر 12 کالم گرڈ اور 16 کالم گرڈ کے طور پر استعمال ہوتا ہے۔ جو لوگ زیادہ کالم استعمال کرنا چاہیں، ان کے لیے ایک 24 کالم گرڈ بھی دستیاب ہے۔
12 کالم گرڈ
960 گرڈ فریم ورک کو 12 کالم میں تقسیم کیا جائے تو سب سے چھوٹے کالم کی چوڑائی 60 پکسل بنتی ہے۔ اس میں 80 پکسل کا اضافہ کرتے جائیں تو بڑی چوڑائی کے کالم حاصل ہوتے جاتے ہیں۔ اس طرح حاصل ہونے والے کالموں کی چوڑائیاں اس طرح بنتی ہیں:
60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 اور940
ذیل کی تصویر میں اس کی وضاحت موجود ہے:
16 کالم گرڈ
960 گرڈ فریم ورک کو 16 کالم میں تقسیم کیا جائے تو سب سے چھوٹے کالم کی چوڑائی 40 پکسل بنتی ہے اور اس میں 60 پکسل کا اضافہ کرتے جائیں تو بڑی چوڑائی کے کالم حاصل ہوتے جاتے ہیں۔ اس طرح حاصل ہونے والے کالموں کی چوڑائیاں اس طرح بنتی ہیں:
40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 اور 940
اس کی تفصیل ذیل کی تصویر میں موجود ہے:
ہم اس ٹیوٹوریل کے لیے 12 کالمی گرڈ کا استعمال کریں گے۔
کالموں کی چوڑائی اور سی ایس ایس کلاس
960 گرڈ کے استعمال سے قبل یہ جان لینا ضروری ہے کہ کس طرح مخصوص سی ایس ایس کلاسوں کے استعمال کے ذریعے مختلف چوڑائی کے کالم حاصل کیے جا سکتے ہیں۔ اس کا طریقہ نہایت آسان ہے، یعنی صرف div ایلیمنٹ پر مخصوص سی ایس ایس کلاس اپلائی کر دی جائے۔ بارہ کالمی گرڈ میں grid_1 سب سے چھوٹا کالم ہوگا، جبکہ grid_12 سب سے بڑا کالم ہوگا۔ ان سی ایس ایس کلاسوں کے استعمال کا طریقہ یہ ہے کہ افقی سمت میں ایک لائن میں رکھے جانے والے div ایلیمنٹس کی grid_ کلاسوں کا حاصل جمع 12 ہونا چاہیے۔ مثال کے طور پر ہم اگر کسی حصے کو تین برابر کی چوڑائی کے کالموں میں تقسیم کرنا چاہیں تو یہاں تین div ایلیمنٹس رکھ کر ان میں ہر ایک پر grid_4 کلاس اپلائی کر دیں گے، جیسا کہ ذیل کی تصویر میں دکھایا گیا ہے۔
الفا اور اومیگا (alpha and omega)
960 گرڈ سسٹم میں ہر div ایلیمنٹ کا margin اور padding بیس پکسل پر سیٹ ہوتا ہے جس کی وجہ سے کوئی سے دو ساتھ کے div ایلیمنٹس کے درمیان 40 پکسل کا فاصلہ ہوتا ہے۔ اس کا نتیجہ یہ ہوتا ہے کہ اگر کسی قطار کے div باکسز کو کسی اضافی div کنٹینر کے اندر رکھا جائے تو یہ ان کے لیے ایک قطار (row) میں جگہ پوری نہیں پڑتی اور یہ div باکسز اوور فلو کرکے اگلی قطار میں آ جاتے ہیں۔ اس کا حل 960 گرڈ سسٹم میں alpha اور omega کلاسز کا استعمال ہے۔ کسی بھی قطار کے پہلے div باکس پر alpha کلاس اپلائی کرنے سے اس کا لیفٹ مارجن صفر ہو جاتا ہے جبکہ آخری div باکس پر omega کلاس اپلائی کرنے سے اس کا رائٹ مارجن صفر ہو جاتا ہے اور یوں تمام div باکسز ایک ہی قطار میں پورے آ جاتے ہیں۔ آگے چل کر ہم بھی اس ٹیوٹوریل میں الفا اور اومیگا کلاسز کا استعمال کریں گے۔
960 گرڈ فریم ورک میں مزید کئی ایڈوانسڈ ٹیکنیکس کا استعمال ممکن ہے، لیکن اس ٹیوٹوریل کے مقصد کے لیے اتنی معلومات کافی ہوں گی۔
گرڈ سسٹم سیٹ اپ
ویب صفحات کی تیاری میں گرڈ سسٹم کے استعمال سے قبل اسے ڈاؤنلوڈ کرکے اس کی سی ایس ایس فائلوں کو ایسی جگہ رکھنا ضروری ہوتا ہے جہاں سے ویب صفحہ انہیں ریفرینس کر سکے۔ 960 گرڈ سسٹم کو اس ربط سے ڈاؤنلوڈ کریں اور اس کی زپ فائل کو ان زپ کریں۔ اس کے اندر آپ کو code فولڈر میں دو فولڈر css اور img نظر آئیں گے۔ ان دونوں فولڈرز کو اس ڈائریکٹری میں کاپی کر لیں جس میں آپ گرڈ سسٹم کو استعمال کرکے ایک ویب پیج تیار کرنے کا ارادہ رکھتے ہیں۔ css فولڈر میں 960 گرڈ سسٹم سے متعلقہ تمام سی ایس ایس فائلیں موجود ہیں جبکہ img فولڈر میں ہم امیج فائلوں کو رکھیں گے۔
960 گرڈ کے ذریعے پروٹوٹائپنگ
960 گرڈ فریم کے بارے میں بنیادی معلومات جاننے کے بعد اب ہم اس کے ذریعے ویب پیج ڈیزائن کے کام کا آغاز کر سکتے ہیں۔ ذیل کی تصویر میں وہ لے آؤٹ دکھایا گیا ہے جسے ہم اس ٹیوٹوریل میں تیار کرنے کی کوشش کریں گے۔
کسی ویب صفحے کی ڈیزائننگ کا کام بھی اسی طرح ایک خالی صفحے سے کیا جاتا ہے جیسا کہ ایک سکیچ کی ڈرائنگ کا آغاز ایک بلینک کینوس سے کیا جاتا ہے۔ 960 گرڈ سسٹم کے ذریعے پروٹوٹائپنگ کرنے کے لیے ذیل کی تین سٹائل شیٹس کا استعمال کیا جاتا ہے:
960.css
reset.css
text.css
960 گرڈ سسٹم میں بالا کی سٹائل شیٹس کے رائٹ ٹو لیفٹ ورژن بھی موجود ہیں جن کے نام ذیل میں ہیں:
960_rtl.ss
reset_rtl.css
text_rtl.css
چونکہ ہم 960 گرڈ سسٹم کا استعمال ایک اردو ویب صفحے کی تیاری کے لیے کرنا چاہ رہے ہیں، اس لیے ہم اس کی رائٹ ٹو لیفٹ سٹائل شیٹس کا ہی استعمال کریں گے۔ 960 گرڈ کی بنیادی سٹائل شیٹس شامل کرنے کے ساتھ ساتھ ہمیں ایک اضافی کسٹم سٹائل شیٹ کی ضرورت بھی ہوتی ہے جس کے ذریعے ہم موجودہ سٹائلز میں ضروری کسٹمائزیشنز کر سکتے ہیں اور ضروری اضافی سٹائلز ڈیفائن کر سکتے ہیں۔ اس مقصد کے لیے ہم ایک نئی خالی فائل style.css کا اضافہ کرتے ہیں جس میں ہم بتدریج اپنے کسٹم سٹائل شامل کرتے رہیں گے۔ تمام ضروری سٹائل شیٹس کو شامل کرنے کے بعد اب ہمارے خالی صفحے کا کوڈ ذیل کی مانند نظر آئے گا۔
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" lang="ur" xml:lang="ur" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>960 گرڈ سسٹم ٹیوٹوریل</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset_rtl.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960_rtl.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text_rtl.css" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
</body>
</html>بالا کے کوڈ میں تمام ضروری سٹائل شیٹس کی پاتھ درست سیٹ کی گئی ہیں۔ اس طرح اب پروٹوٹائپنگ کے لیے گرڈ سسٹم کی سی ایس ایس کلاسز لوڈ ہو جاتی ہیں اور انہیں استعمال میں لایا جا سکتا ہے۔ اس کوڈ کے ذریعے ہمیں مزید کام کے لیے ایک بنیاد مل جاتی ہے۔ آگے چل کر ہم اس میں سمت دائیں سے بائیں تبدیل کرنے کے لیے خصوصی سٹائل شیٹ کا اضافہ کریں گے۔ مزید براں ہم اس میں نئے سٹائل شامل کرنے اور موجودہ سٹائلز کو اوور رائیڈ کرنے کے لیے ایک کسٹم سٹائل شیٹ کا اضافہ بھی کریں گے۔ چونکہ ہم ایک اردو ویب پیج تیار کر رہے ہیں، اس لیے اس پیج کو utf-8 فارمیٹ میں محفوظ کرنا ضروری ہوگا۔ یہ کسی بھی utf-8 کمپیٹیبل ایڈیٹر میں کیا جا سکتا ہے۔
ویب پیج کی تیاری کے لیے گرڈ فریم کے استعمال سے قبل ایک موک اپ تیار کرنا بہتر رہتا ہے۔ اس سے اندازہ ہو جاتا ہے کہ ویب صفحے کے افقی اور عمودی سمت میں کتنے حصے کیے جائیں گے اور ہر حصے میں کتنے div ایلیمنٹس کی ضرورت رہے گی۔ اگر ہم اوپر والے لے آؤٹ کا جائزہ لیں تو ہم ذیل کی تصویر کے مطابق ایک موک اپ تیار کر سکتے ہیں۔
اس موک اپ کو نظر میں رکھتے ہوئے اگر کوڈ لکھا جائے تو یہ ذیل کی شکل میں لکھا جائے گا:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" lang="ur" xml:lang="ur" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>960 گرڈ سسٹم ٹیوٹوریل</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset_rtl.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960_rtl.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text_rtl.css" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
<div class="container_12">
<div class="grid_12"></div>
<div class="clear"></div>
<div class="grid_12"></div>
<div class="clear"> </div>
<div class="grid_7"></div>
<div class="grid_5"></div>
<div class="clear"></div>
<div class="grid_12"></div>
<div class="clear"></div>
<div class="grid_3"></div>
<div class="grid_3"></div>
<div class="grid_3"></div>
<div class="grid_3"></div>
<div class="clear"></div>
<div class="grid_12"></div>
<div class="clear"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
</div>
</body>
</html>اس طرح ہمارے پاس ایک بنیادی ڈھانچہ تیار ہو جاتا ہے۔ جیسا کہ بالا کے کوڈ میں دکھایا گیا ہے، اس لے آؤٹ کو ایک بیرونی div ایلیمنٹ میں رکھا گیا ہے جس پر container_12 کلاس اپلائی کی گئی ہے۔ اس کا مطلب یہی ہے کہ یہاں ہم 12 کالمی گرڈ کا استعمال کر رہے ہیں۔ اس کے علاوہ دیکھا جا سکتا ہے کہ div ایلیمنٹس کی ہر افقی قطار کی چوڑائیوں کا حاصل جمع 12 ہے۔ ہر قطار کے آخر میں ایک خصوصی div ایلیمنٹ استعمال کیا گیا ہے جس پر clear کلاس اپلائی کی گئی ہے۔ یہ انٹرنیٹ ایکسپلورر کے باکس ماڈل کی خامیوں کا حل نکالنے کے لیے استعمال کیا جاتا ہے تاکہ نئی قطار کا آغاز نچلی لائن سے ہو۔
بنیادی ڈھانچہ تیار کرنے کے بعد ہم اپنے مطلوبہ ڈیزائن کی جانب پیشرفت کر سکتے ہیں۔
ہیڈر اور نیویگیشن
ویب صفحے کا بالائی حصہ ہیڈر اور نیویگشن پر مشتمل ہے۔ ہیڈر میں ہم اپنے ویب پیج کے لوگو کے لیے ذیل کے امیج کا استعمال کریں گے۔
یہ لوگو تو میں نے اس ٹیوٹوریل میں استعمال کے مقصد کے لیے تیار کیا ہے۔ آپ چاہیں تو اس کی جگہ کسی اور بہتر گرافک کا انتخاب کر سکتے ہیں۔
اس کے بعد ہم نیویگیشن بار کی تیاری کی طرف آتے ہیں۔ نیویگیشن بار کی اونچائی مخصوص نہیں ہے بلکہ اس کا انحصار اس میں موجود روابط کے ٹیکسٹ پر ہوگا۔ سب سے پہلے ہم نیویگیشن بار بنانے کے لیے بالا کی ٹیمپلیٹ میں دوسرے نمبر پر موجود 12 کالم چوڑی پٹی کو ذیل کے کوڈ سے بدل دیتے ہیں جس میں چند ڈمی روابط شامل ہیں۔ لوگو امیج اور نیویگیشن روابط شامل کرنے کے لیے ذیل کا کوڈ استعمال کیا جائے گا:
HTML:
<div class="grid_12" id="header">
<a href="#"><img src="img/logo.png" alt=""/></a>
</div>
<div class="clear"></div>
<div class="grid_12" id="navbar">
<ul>
<li>مضامین</li>
<li>موضوعات</a></li>
<li>تعارف</li>
<li>مصنف</li>
<li>رابطہ</li>
</ul>
</div>
<div class="clear"> </div>بالا کا کوڈ استعمال کرنے کے بعد اب اس ویب صفحے کی صورت ذیل کی تصویر کے مطابق ہو جائے گی۔
اس کے بعد ہم نیویگیشن بار کا سٹائل درست کرنے کے لیے ذیل کی سی ایس ایس کلاسز کا استعمال کرتے ہیں:
HTML:
div#navbar {
background-color: #8FC73E;
padding: 10px 0;
}
div#navbar, div.spacer {
margin-bottom:10px;
margin-top:10px;
}
div#navbar ul {
list-style: none;
display: block;
margin: 0 10px;
}
div#navbar ul li {
float: right;
margin: 0 1.5em;
font: bold 1em 'Jameel Noori Nastaleeq';
}نیویگیشن بار سے متعلقہ سٹائلز شامل کرنے کے بعد اب ویب پیج ذیل کی تصویر کے مطابق نظر آئے گا:
متن کا بالائی حصہ (Top Section)
ویب پیج کا لوگو نیویگیشن بار موزوں کرنے کے بعد ہیڈر سیکشن کی تیاری مکمل ہو جاتی ہے اور اب ہم اصل متن کی جانب توجہ دے سکتے ہیں۔ جیسا کہ اوپر تیار شدہ ویب پیج کی تصویر میں دکھایا گیا ہے، ہم متن کے بالائی حصہ کو ایک نیوز پیج کی لیڈ نیوز کی مانند تشکیل دینا چاہتے ہیں جس میں کیپشن امیج کے ساتھ اصل خبر کا اقتباس فراہم کیا جاتا ہے۔ کیپشن امیج کے لیے ہم ذیل کی تصویر استعمال کر رہے ہیں۔
یہاں ہمارے سامنے ایک چیلنج یہ ہے ویب صفحے کو موزوں دکھانے کے لیے کہ دائیں جانب کے تحریری متن اور بائیں جانب کی تصویر والے div باکسز کی اونچائی یکساں ہونی چاہیے۔ یہ پرابلم 960 گرڈ کے استعمال سے حل نہیں ہوگی۔ اس کے لیے ہمیں کوئی اور حل ڈھونڈنا پڑے گا۔ جیسا کہ پیج کے کوڈ سے ظاہر ہو رہا ہے، ہم اس لیڈ سیکشن کو دو کالموں میں تقسیم کر رہے ہیں جو کہ بالترتیب 7 اور 5 کالم چوڑے ہیں۔ دونوں کی اونچائی یکساں کرنے کا طریقہ یہ ہے کہ پہلے دونوں کالموں پر ایک نئی کلاس topSection اپلائی کریں۔ اس طرح یہ ذیل کا کوڈ ہو جائے گا:
HTML:
<div class="grid_7 topSection">
<div>
</div>
</div>
<div class="grid_5 topSection">
<div>
</div>
</div>اس کے بعد سٹائل شیٹ میں topSection کی ڈیفینیشن کا اضافہ ذیل کے کوڈ کے مطابق کریں:
HTML:
div.topSection div {
border: solid 10px #e5e5e6;
height: 280px;
}
div.topSection div p {
margin: 10px;
}
img#poster {
width: 360px;
height: 280px;
}بالا کے کوڈ میں لیڈ سیکشن کے امیج سے متعلقہ سٹائل بھی موجود ہے جس کے ذریعے اس کی لمبائی اور چوڑائی کو کنٹرول کیا گیا ہے۔ اس طرح ہمیں ذیل کی تصویر کے مطابق دو یکساں اونچائی کے باکس حاصل ہو جاتے ہیں:
اب ہم ان باکسز میں اپنی مرضی کا متن رکھ سکتے ہیں۔ ہم دائیں والے 7 کالمی باکس میں تحریری متن رکھتے ہیں اور بائیں والے 5 کالمی باکس میں ایک تصویر رکھیں گے جس سے اب یہ لیڈ سیکشن ذیل کی تصویر کے مطابق نظر آئے گا:
درمیانی سیکشن
درمیانی سیکشن کو ہم چار برابر کے حصوں میں تقسیم کریں گے، یعنی کہ یہ چار باکس ہوں گے اور ہر ایک کی چوڑائی 3 کالم ہوگی۔ اس کے لیے ہمیں چار div ایلیمنٹس کی ضرورت ہو گی اور ان میں سے ہر ایک پر grid_3 کلاس کا استعمال کیا جائے گا۔ لیڈ سیکشن کی طرح درمیانی سیکشن میں بھی ہم کچھ ڈمی ٹیکسٹ استعمال کرتے ہیں جس میں ایک سرخی اور کچھ عبارت شامل ہے۔ یہ ذیل کے کوڈ میں دکھایا گیا ہے:
HTML:
<div class="grid_3">
<h5>لوکلائزیشن کا بہتر ورک فلو!</h5>
<p>
اردو ویب پر مختلف سوفٹویر کی اردو لوکلائزیشن کے لیے انٹرانس سوفٹویر کا استعمال کیا جا رہا ہے جسے اس ربط پر دیکھا جا سکتا ہے۔ انٹرانس خاص طور پر پو فارمیٹ کی لینگویج فائلوں کے ترجمہ کے لیے تیار کیا گیا سوفٹویر ہے۔ ہم نے اس میں اردو ویب پیڈ انٹگریٹ کر دیا ہے جس کی بدولت ترجمہ کا کام کرنے میں بہت سہولت واقع ہو گئی ہے۔
</p>
</div>
<div class="grid_3">
<h5>لوکلائزیشن کا بہتر ورک فلو!</h5>
<p>
اردو ویب پر مختلف سوفٹویر کی اردو لوکلائزیشن کے لیے انٹرانس سوفٹویر کا استعمال کیا جا رہا ہے جسے اس ربط پر دیکھا جا سکتا ہے۔ انٹرانس خاص طور پر پو فارمیٹ کی لینگویج فائلوں کے ترجمہ کے لیے تیار کیا گیا سوفٹویر ہے۔ ہم نے اس میں اردو ویب پیڈ انٹگریٹ کر دیا ہے جس کی بدولت ترجمہ کا کام کرنے میں بہت سہولت واقع ہو گئی ہے۔
</p>
</div>
<div class="grid_3">
<h5>لوکلائزیشن کا بہتر ورک فلو!</h5>
<p>
اردو ویب پر مختلف سوفٹویر کی اردو لوکلائزیشن کے لیے انٹرانس سوفٹویر کا استعمال کیا جا رہا ہے جسے اس ربط پر دیکھا جا سکتا ہے۔ انٹرانس خاص طور پر پو فارمیٹ کی لینگویج فائلوں کے ترجمہ کے لیے تیار کیا گیا سوفٹویر ہے۔ ہم نے اس میں اردو ویب پیڈ انٹگریٹ کر دیا ہے جس کی بدولت ترجمہ کا کام کرنے میں بہت سہولت واقع ہو گئی ہے۔
</p>
</div>
<div class="grid_3">
<h5>لوکلائزیشن کا بہتر ورک فلو!</h5>
<p>
اردو ویب پر مختلف سوفٹویر کی اردو لوکلائزیشن کے لیے انٹرانس سوفٹویر کا استعمال کیا جا رہا ہے جسے اس ربط پر دیکھا جا سکتا ہے۔ انٹرانس خاص طور پر پو فارمیٹ کی لینگویج فائلوں کے ترجمہ کے لیے تیار کیا گیا سوفٹویر ہے۔ ہم نے اس میں اردو ویب پیڈ انٹگریٹ کر دیا ہے جس کی بدولت ترجمہ کا کام کرنے میں بہت سہولت واقع ہو گئی ہے۔
</p>
</div>اس طرح ہمیں ذیل کی تصویر کے مطابق ایک درمیانی سیکشن مل جائے گا:
فوٹر
ویب پیج کے متن کا آخری حصہ فوٹر سیکشن میں رکھا جائے گا۔ ہم فوٹر کو تین برابر کے کالموں میں تقسیم کرنا چاہتے ہیں اور اسے ایک ڈارک بیک گراؤنڈ کے ذریعے ممتاز کرنا چاہتے ہیں۔ تین کالم حاصل کرنے کے لیے ہم تین div ایلیمنٹس استعمال کرتے ہیں اور ہر ایک پر grid_4 کلاس اپلائی کرتے ہیں، لیکن ان تین کالموں کو ایک اور div میں رکھنے پر یہ تین کالم ایک ہی قطار میں پورے نہیں آتے جیسا کہ ذیل کی تصویر میں دکھایا گیا ہے:
اس کی وجہ پہلے بیان کی جا چکی ہے کہ 960 گرڈ سسٹم کی کلاسز اپلائی کرنے کے بعد ہر div ایلیمنٹ کا مارجن اور اس کی پیڈنگ 20 پکسل ہو جاتی ہیں اسی لیے دو ساتھ کے div ایلیمنٹس کے درمیان 40 پکسل کا فاصلہ ہوتا ہے۔ یہی وجہ ہے کہ کسی اضافی div کنٹینر میں رکھنے کے بعد اندر والے div ایک ہی قطار میں پورے نہیں آتے۔ اس کا حل بھی، جیسا کہ اوپر بیان کیا جا چکا ہے، alpha اورomega کلاسز کا استعمال ہے۔ پہلے div ایلیمنٹ پر کلاس alpha اور آخری div پر omega کلاس اپلائی کرنے سے بالترتیب ان کا لیفٹ اور رائٹ مارجن ختم ہو جاتا ہے اور ایک قطار میں ان کی جگہ بن جاتی ہے۔ یہ کلاسز استعمال کرنے کا بعد فوٹر سیکشن کا کوڈ ذیل میں دکھایا گیا ہے:
HTML:
<div class="grid_12" id="footer">
<div class="grid_4 alpha">
<h6>وی بلیٹن 4 کے لیے اردو ایڈیٹر موڈ</h6>
<p>
محفل فورم کی وی بلیٹن 4 پر اپگریڈ کے بعد اس میں اردو ایڈیٹر کی انٹگریشن پہلے سے قدرے مختلف انداز میں کی گئی ہے۔ اس مرتبہ جے کویری کا اردو ایڈیٹر پلگ استعمال کیا گیا ہے۔ اس اردو ایڈیٹر کو مختلف براؤزرز کے ساتھ کمپیٹیبل بنانے کے لیے جاواسکرپٹ ورچوئل کی بورڈ کا کوڈ استعمال کیا گیا ہے۔
</p>
</div>
<div class="grid_4">
<h6>وی بلیٹن 4 کے لیے اردو ایڈیٹر موڈ</h6>
<p>
محفل فورم کی وی بلیٹن 4 پر اپگریڈ کے بعد اس میں اردو ایڈیٹر کی انٹگریشن پہلے سے قدرے مختلف انداز میں کی گئی ہے۔ اس مرتبہ جے کویری کا اردو ایڈیٹر پلگ استعمال کیا گیا ہے۔ اس اردو ایڈیٹر کو مختلف براؤزرز کے ساتھ کمپیٹیبل بنانے کے لیے جاواسکرپٹ ورچوئل کی بورڈ کا کوڈ استعمال کیا گیا ہے۔
</p>
</div>
<div class="grid_4 omega">
<h6>وی بلیٹن 4 کے لیے اردو ایڈیٹر موڈ</h6>
<p>
محفل فورم کی وی بلیٹن 4 پر اپگریڈ کے بعد اس میں اردو ایڈیٹر کی انٹگریشن پہلے سے قدرے مختلف انداز میں کی گئی ہے۔ اس مرتبہ جے کویری کا اردو ایڈیٹر پلگ استعمال کیا گیا ہے۔ اس اردو ایڈیٹر کو مختلف براؤزرز کے ساتھ کمپیٹیبل بنانے کے لیے جاواسکرپٹ ورچوئل کی بورڈ کا کوڈ استعمال کیا گیا ہے۔
</p>
</div>
</div>فوٹر پر ایک بیک گراؤنڈ اپلائی کرنے کے لیے ہم style.css میں ذیل کے سٹائل کا اضافہ کرتے ہیں:
HTML:
div#footer {
background-color: #e5e5e6;
}علاوہ ازیں ہم فوٹر کے بعد ایک کاپی رائٹ نوٹس کا اضافہ بھی کرتے ہیں۔ اور اس طرح حاصل ہونے والا فوٹر ذیل کی تصویر میں دکھایا گیا ہے:
مختلف حصوں کے درمیان فاصلہ
ویب پیج کی تشکیل مکمل کرنے کے بعد ہم اس کو بہتر بنانے کی جانب تو جہ دے سکتے ہیں۔ سب سے پہلے ہم ویب پیج کے مختلف سیکشنز کے درمیان قدرے فاصلہ کرنے کے لیے ایک سبز پٹی کا اضافہ کرتے ہیں۔ اگر آپ اب تک کے تیار کردہ ویب پیج کے کوڈ پر نظر ڈالیں تو آپ کو بالائی سیکشن اور درمیانی سیکشن کے بعد ایک بارہ کالمی خالی پٹی ملے گی جس پر grid_12 کلاس کا استعمال ہو رہا ہے۔ اس div پر ہم ایک سٹائل spacer کا اضافہ کرتے ہیں اور اس سٹائل کو ہم style.css میں ذیل کے مطابق ڈیفائن کرتے ہیں:
HTML:
div.spacer {
background-color: #8FC73E;
height: 1em;
}اس کے بعد ویب پیج کے سیکشنز کے درمیان ایک سبز پٹی کا اضافہ ہو جائے گا جیسے کہ ذیل کی تصویر میں دکھایا گیا ہے:
ٹائپوگرافی کی ایڈجسٹمنٹ
اس مرحلے پر ہمارے ویب پیج کی تیاری مکمل ہو چکی ہے لیکن ابھی اس کا فونٹ درست کی ضرورت باقی ہے۔ اس کے لیے ہم style.css میں ذیل کی کلاسز کا اضافہ کرتے ہیں:
HTML:
.grid_7 h3
{
font:18pt 'Jameel Noori Nastaleeq';
}
.grid_7 p
{
font:13pt 'Jameel Noori Nastaleeq';
}
.grid_3 h5,
.grid_4 h5
{
font:16pt 'Jameel Noori Nastaleeq';
}
.grid_3 h6,
.grid_4 h6
{
font:15pt 'Jameel Noori Nastaleeq';
}
.grid_3 p,
.grid_4 p
{
font:13pt 'Jameel Noori Nastaleeq';
}اس کے بعد ہمارا ویب پیج ذیل کی تصویر کے مطابق نظر آئے گا جس میں جمیل نوری نستعلیق فونٹ کا استعمال ہو رہا ہے:
اس طرح ہمارے ویب پیج کی تیاری بالآخر مکمل ہو گئی ہے۔ مکمل ویب پیج کا کوڈ اس پوسٹ کے ساتھ اٹیچ کر دیا ہے جسے آپ ڈاؤنلوڈ کرکے دیکھ سکتے ہیں اور استعمال کر سکتے ہیں۔
حوالہ جات
اس ٹیوٹوریل کی تیاری کے لیے میں نے ذیل کے روابط پر موجود معلومات سے استفادہ کیا ہے:
Prototyping With The Grid 960 CSS Framework
The 960 Grid System Made Easy
960 گرڈ کے بارے میں مزید معلومات کے لیے ذیل کے ربط پر معلومات دیکھی جا سکتی ہیں:
The 960 Grid System Toolbox & Resources
خلاصہ
اس ٹیوٹوریل میں ہم نے دیکھا ہے کہ قدرے پیچیدہ لے آؤٹ بھی 960 گرڈ سسٹم کے استعمال کے ذریعے بآسانی تشکیل دیے جا سکتے ہیں۔ 960 گرڈ سسٹم ویب صفحات کی تیاری کے سلسلے میں ریپڈ پروٹوٹائپنگ کے لیے ایک اچھی بنیاد فراہم کرتا ہے۔ 960 گرڈ سسٹم میں رائٹ ٹو لیفٹ ویب صفحات کی تیاری کے لیے بھی موزوں ہے جیسا کہ ہم نے اس ٹیوٹوریل میں دیکھا ہے۔ ایک سادہ اردو ویب صفحے کی تیاری بارے میں ٹیوٹوریل اور اس ٹیوٹوریل میں فراہم کردہ معلومات سے ہمارے پاس اردو ویب صفحات کی تیاری کے لیے ایک اچھی بنیاد فراہم ہو جاتی ہے۔ میرا ارادہ ہے کہ جلد ہی ایک ٹیوٹوریل کی سیریز کا آغاز کروں جس میں ورڈ پریس کے لیے ایک اردو تھیم کی تیار کی جائے۔ اس کو مناسب طریقے سے فالو کرنے کے لیے اب تک فراہم کردہ معلومات کو ذہن نشین کرنا مفید ثابت ہوگا۔
میں امید کرتا ہوں کہ آپ دوستوں کو یہ ٹیوٹوریل پسند آئے گا۔ آپ کو اس میں اگر کوئی غلطیاں نظر آئیں تو ضرور ان کی نشاندہی کریں۔ اس کے علاوہ اگر آپ کے ذہن میں اس ٹیوٹوریل میں بہتری کی کوئی تجاویز موجود ہیں تو وہ بھی یہاں پیش کر سکتے ہیں۔ میں اس پر آپ کے تبصروں اور آراء کا منتظر رہوں گا۔
والسلا
