20 اگست 2011

بلاگ سپاٹ اردو ڈیزائن



آر ٹی ایل ٹیگ میرے بلاگ کو ہمیشہ تھیم کی آؤٹ لائن سے نکال کر سو فیصد سکرین پر پھیلا دیتا ہے۔ اس وجہ سے میں نے تھیم کو انٹیکٹ رکھتے ہوئے اردو ڈیزائن بنانے کے لیے صرف رائٹ الائن ٹیگ کا استعمال کیا ہے۔

اس استعمال کو سمجھنے سے پہلے ایک بات دھیان میں رکھنا ضروری ہے کہ بلاگ سپاٹ کا اپنا ڈیزائن وقت کے ساتھ بہت تبدیل ہو چکا ہے۔ سمپل یا مینیما جیسے سادہ اور پرانے ٹمپلیٹس جو کسٹمائزیشن کی بنیاد بنائے جاتے تھے اب علیحدہ سیکشن میں دیے جاتے ہیں۔ نئے اپڈیٹڈ ٹمپلیٹس میں رن ٹائم تبدیلیوں کو ممکن بنانے کے لیے ڈیزائن سکرین موجود ہے جو ٹیکسٹ سے لیکر ہیڈر امیج تک کو بہت آسانی سے تبدیل کر دیتی ہے۔

اس کے ساتھ ہی یوزر کی دخل اندازی کا شائد تدارک کرنے کی کوشش کی ہے۔ ڈائینمک ایکس ایم ایل جو نئے ٹمپلیٹس میں متعارف کی گئی ہے وہ اچھے ویب ڈیزائنرز کے لیے بھی کچھ مشکل ہی ہے، میری طرح کہ مبتدی کے لیے اس کو سمجھنا بہت زیادہ وقت کا متقاضی ہے۔



اس کی مثال کوڈز کے ایک چھوٹے سے موازنے سے سامنے آ سکتی ہے

عمومی ٹیمپلیٹ کے ہیڈر کی تفصیل

#header-inner {
background-position:center;
margin-left:auto;
margin-right:auto;
}
#header {
position:absolute;
top:20px;
right:0;
width:450px;
text-align:right;
}
#header h1 {
font:normal 2.5em Georgia, Times, Serif;
line-height:1.3em;
color:#fff;
}
#header .description {
font-family:Arial;
color:#fff;
font-size:15px;
margin-top:-30px;
}
#header img {
margin-left:auto;
margin-right:auto;
}


نئے ٹمپلیٹس کے مطابق ہیڈر کی تفصیل:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;
color: $(header.text.color);
-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}

پہلی مثال میں بہت ہی بیسک سی ایس ایس ہے  جس میں ایچ ٹی ایم ایل میں مستعمل اصطلاحات کا استعمال کیا گیا ہے۔ فونٹ فیملی، مارجن اور کلر وغیرہ اور ان کو سادہ طریقہ سے انہی پرانے پکسل اور نمبرز سے ڈیفائن کیا گیا ہے جو ہمیشہ سے ایچ ٹی ایم ایل میں استعمال کیے جاتے ہیں۔

لیکن اس کے برعکس دوسری مثال میں ڈالر سائن کے ساتھ ویری ایبل دیے گئے ہیں جس کا مفہوم یہ ہے کہ جاوا سکرپٹنگ یا دوسری ڈائینمک کوڈنگز کی طرح اب یہ تمام ٹیگس پہلے اوپر ہیڈر میں پری ڈیفائن کرنے پڑیں گے پھر اس کو استعمال کر سکتے ہیں جس کے لیے ایڈوانس سی-ایس- ایس کی معلومات درکار ہونگی۔

بظاہر آن سکرین ٹمپلیٹ ڈیزائنر استعمال کنندہ کو سکرپٹ کو چھوئے بغیر بہت سی تبدیلیاں کرنے کی آسانی دیتا ہے۔ تھیمز کلرز، فونٹس، ہیڈر امیج، کالم کی چوڑائی، ریشو، وجٹ سٹائلز وغیرہ میں بہت متنوع قسم کی آپشنز ہیں۔چند سادہ کلکس سے بلاگ میں ان کا اضافہ و ترمیم کی جا سکتی ہے۔ لیکن اس کی بھی لمٹس ہیں۔ اور ان کو کوڈ لیول پر تبدیل کرنا اس لیے مشکل ہے کہ بہت سے ایلیمنٹس کو ویری ایبل کے ذریعے باہم مربوط کر دیا گیا ہے۔ ایک ایلیمنٹ میں تبدیلی دوسرے کو بھی تبدیل کر دیتی ہے تا آنکہ کہ ہم ہیڈر میں ان کے علیحدہ علیحدہ ویری ایبل وضع کریں۔

سب سے زیادہ مشکل وجٹ پروگرامز کو تبدیل کرنے کے لیے ہوگی جو پہلے سائیڈ بار یا سیکشن بی کے تحت موجود تھے لیکن اب اس کو میکرو ٹیگ سے ظاہر کیا گیا ہے۔

<aside>
<macro:include id='main-column-left-sections' name='sections'>
<macro:param default='0' name='num' value='0'/>
<macro:param default='sidebar-left' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>

ایسے میں کوڈ لیول پر کام کرنے کے لیے بہترین بیس یا تو پرانے ٹمپلیٹس ہیں یا ویب پر موجود بے شمار فری تھیمز سے فائدہ اٹھایا جا سکتا ہے۔ کسی بھی آسان اور عمومی تھیم کو بیس تھیم کے طور پر چن کر اس میں اپنی مرضی کے ہیڈر اور بیک گراؤنڈ امیجز اپلوڈ کیے جا سکتے ہیں۔ اور اردو کے لیے ہمیشہ جہاں بھی فونٹ کی انفو ہو اس کے ساتھ رائٹ الائن ٹیگ اور فونٹ فیمیلی میں اردو فونٹس کا ٹیگ ایڈ کردینے سے بہت آسانی سے ایک اردو تھیم بن جائے گی۔
اس کا طریقہ کار ایسے ہے:

ڈیزائن >> ایڈٹ ایچ ٹی ایم ایل

اس میں ڈاونلوڈ فل ٹیمپلیٹ کرکے بیک اپ فائل لے لیں، یہ ایکس ایم ایل فائل بنے گی۔ اور کسی غلطی کی صورت میں اسے دوبارہ اپلوڈ کرکے موجودہ ڈیزائن واپس لایا جاسکتا ہے (یاد رہے کہ یہ صرف ڈیزائن کا بیک اپ ہے۔ بلاگ کے مندرجات کا نہیں۔ بلاگ کے مندرجات ڈیزائن تبدیل کرتے وقت نہ تو متاثر ہوتے ہیں اور نہ ہی ان کا بیک اپ یہاں سے لیا جاسکتا ہے۔ لیکن سائڈ بار یا وجٹس وغیرہ متاثر ہو سکتے ہیں اس لیے پوچھنے پر ہمیشہ
"keep widgets" کا آپشن استعمال کریں

اب جو کوڈ سامنے نظر آ رہا ہے اس میں
.post
سرچ کریں۔ اور اس میں دیکھیں جہاں ٹیکسٹ کی انفو ہے۔ وہیں
text-align:right کا ٹیگ ڈال دیں آخرمیں سیمی کولن۔

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
text-align:right;
line-height:1.4em;
color:$titlecolor;
}

وہیں ایکسپینڈ وجٹ ٹمپلیٹ کا لنک ہے اسے کلک کریں گے تو اس کا کوڈ بھی باقی سارے کوڈ میں نظر آنا شروع ہو جائے گا۔ اس میں بھی ٹیکسٹ الائنمنٹ کی جا سکتی ہے۔ صرف آرکائیو کی الائنمنٹ نہیں ہوتی۔
رائٹ کے علاوہ سنٹر اور جسٹیفائی بھی موجود ہے۔ اپنے ڈیزائن کے حساب سے استعمال کر سکتے ہیں۔ بس جہاں فونٹ کی انفو ہوگی وہیں ایڈ کرنا ہے۔بیک اپ ہمیشہ اپ ٹو ڈیٹ رکھیں اور اوور رائٹ نہیں کریں بلکہ ملٹی پل کاپیز اچھی ہیں۔
الائنمنٹ ٹیگ کے ساتھ ہی فونٹ فیمیلی کا ٹیگ بھی اپڈیٹ کر سکتے ہیں۔ عمومی تھیمز میں تہوما۔ جارجیا یا ایریل فونٹس استعمال کیے جاتے ہیں ان کو ہٹا کر یا پیچھے کر کے اردو فونٹ فیمیلی ایڈ کی جا سکتی ہے۔

#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: normal normal 110% Arial, Tahoma;
}
تبدیلی کے بعد

#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: normal normal 200% 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq', 'Nafees Web Naskh', 'Urdu Naskh Asiatype', Arial, Tahoma;}

اس کے علاوہ
page element
پر جائیں گے تو اس میں مختلف وجٹس کو کلک کریں اس کا عنوان اردو میں رکھ سکتے ہیں۔ اور باقی تبدیلیاں بھی کر سکتے ہیں۔

بلاگ کی تحاریر کا بیک اپ بھی اپ ٹو ڈیٹ رکھنا ضروری ہے۔ اس کے لیے بلاگ سیٹینگ میں جائیں تو بلاگ کو امپورٹ ایکسپورٹ کرنے کی آپشن ہے جس سے پورا بلاگ ڈاؤنلوڈ ہو جاتا ہے۔ اور بوقت ضرورت یہیں اس فائل کو اپلوڈ کر کے بلاگ ری کوور کیا جا سکتا ہے۔ لیکن زیادہ تر صرف لائن بریک تک ری کوور ہوتا ہے اس لیے اپنی تحاریر کی ایک کاپی کہیں اور ضرور سیو رکھیں۔
آرکائیو اور کمنٹ الائنمنٹ میں ابھی نہیں کر پائی۔ اردو کمنٹ وجٹ کیسے استعمال کرنا ہے اس سلسلہ میں ٹرائل اینڈ ایرر کا سلسلہ بشرط فرصت مستقبل بعید میں شروع ہوگا۔ : ) 

7 تبصرے:

مطلوب کہا...

آپ نے بہت اچھی معلومات دی ہیں
سی ایس ایس تھری نے پرانے کوڈ کی جگہ لینی شروع کردی ہے
جیسا کہ آپ نے مثال میں بتایا ہے یہ سی ایس ایس تھری کا کوڈ ہے ۔

Zero G کہا...

مجھے بھی کچھ معلومات چاہیے ، مدد کریں گی ؟

Zero G کہا...

مسئلہ صرف اتنا ہے کہ آپ کے بلاگ میں جو فونٹ استعمال ہو رہا ہے یعنی نستعلیق ، میں چاہتا ہوں کے میرا مرتب کردہ بلاگ بھی اسی فونٹ میں نظر آئے کچھ مدد دفرمائیں شکریہ

رافعہ خان کہا...

ورڈ پریس کی صرف فری سروس میں نے استعمال کی ہے اس میں کوڈ لیول پر تبدیلی کے آپشنز مجھے نظر نہیں آؕے۔ ورنہ فونٹ کی تبدیلی کے لیے صرف فونٹ کا نام تبدیل کیاہے میں نے اور ایریل سے نستعلیق کر دیا ہے۔ جیسے اوپر بتایا ہے

font: normal normal 200% 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq', 'Nafees Web Naskh', 'Urdu Naskh Asiatype', Arial, Tahoma;

نورمحمد ابن بشیر کہا...

بہت اچھی معلومات ہیں

شکریہ

Zero G کہا...

اچھا چلیں بلاگ اسپاٹ کاہی بتا دیں ۔
:)

Zero G کہا...

اوہ سوری نظر آ گیا مجھے