چلتی ویب سائیٹ تبدیل کیے بغیر ڈیزائن ٹیسٹ کریں

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

عام طور پر اس مسئلہ کا حل دو طرح سے کیا جاتا ہے:

1. پہلا حل یہ ہے کہ لوکل ہوسٹ پر ویب سائیٹ کا آف لائن ورژن انسٹال کر لیا جاتا ہے۔ عام طور پر ایسا اس صورت میں کیا جاتا ہے جب ویب سائیٹ کی مکمل ٹیمپلیٹ نئے سرے سے ڈیزائن کرنے کا ارادہ ہو۔ لیکن آپ جانتے ہوں گے کہ ایسی ویب سائیٹ جن کی ڈیٹابیس کا سائز بہت بڑا ہو، اسے ڈاؤن لوڈ کر کے لوکل ہوسٹ پر انسٹال کرنا ایک چیلنج بن جاتا ہے۔ اس کا حل یہ ہے کہ ڈیٹابیس ڈاؤن لوڈ کرتے وقت صرف اس کا Structure ڈاؤن لوڈ کرنے والا آپشن منتخب کیا جائے اور Data ڈاؤن لوڈ کرنے والا آپشن غیر فعال رہنے دیا جائے۔ جب بغیر ڈیٹا کے ویب سائیٹ لوکل ہوسٹ پر انسٹال ہو جائے تو اس میں عارضی پوسٹس، وجٹس اور بلاکس وغیرہ شامل کر کے نیا تھیم یا ٹیمپلیٹ تیار کیا جا سکتا ہے۔ اور جب ٹیمپلیٹ تیار ہو جائے تو پھر ساری ویب سائیٹ کو اپ لوڈ کرنا ضروری نہیں ہے بلکہ صرف یہ نئی ٹیمپلیٹ ہی اپ لوڈ کی جائے گی۔
2. دوسرا حل یہ ہے کہ براؤزر کے ڈویلپر ٹولز کی مدد سے ویب سائیٹ کو براؤزر میں ایڈٹ کیا جائے۔ عام طور پر یہ حل اس صورت میں کیا جاتا ہے جب ٹیمپلیٹ کے کسی خاص حصے کا ڈیزائن تبدیل کرنا مقصود ہو۔ اس کا طریقہ یہ ہے کہ پہلے اپنے کمپیوٹر پر ڈیزائن کا وہ حصہ تیار کرلیں، پھر براؤزر کے ڈویلپر ٹولز کی مدد سے اس ڈیزائن کو اپنی ویب سائیٹ کے مطلوبہ حصے میں شامل کر کے براؤزر میں ٹیسٹ کریں، جب آپ اس ڈیزائن سے مطمئن ہو جائیں تو اسے لائیو ویب سائیٹ کی ٹیمپلیٹ میں شامل کر دیں۔

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

سب سے پہلے اپنے کمپیوٹر پر ایک ویب پیج بنائیں اور اس میں اپنا ڈیزائن تیار کریں۔ جب ڈیزائن تیار ہو جائے تو اس کا کوڈ کاپی کر لیں۔ لیکن یہ یاد رہے کہ فی الحال آپ نے inline اسٹائل رولز استعمال کرنے ہیں جنہیں بعد میں آپ class وغیرہ میں تبدیل کر سکتے ہیں۔

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

گوگل کروم میں آجائیں اور F12 بٹن دبا کر ڈیویلپر ٹولز کھول لیں اور پھر درج ذیل اسکرین شاٹ کے مطابق:
(1) اوپر موجود ایرو آئیکان پر کلک کریں، اب آپ ویب پیج کے جس حصے کے اوپر ماؤس کا کرسر لے کر آئیں گے وہ حصہ ہائی لائیٹ ہو جائے گا۔
(2) اس حصے پر کلک کریں جس سے پہلے آپ اپنا ڈیزائن شامل کرنا چاہتے ہیں۔
(3) ڈیولپر ٹولز کے پینل میں آپ دیکھ سکتے ہیں کہ اس ڈیزائن کا کوڈ ہائی لائیٹ ہو گیا ہے۔

کوڈ پر ماؤس کی مدد سے رائیٹ کلک کر کے مینیو کھولیں اور اس میں HTML تبدیل کرنے والے آپشن پر کلک کریں۔

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

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

درج ذیل ایک جف اینیمیشن کی مدد سے یہ عمل واضح کرنے کی کوشش کی گئی ہے۔