ایجاد نسخه موبایلی وبلاگ با Mobify

صادق — Sat, 12 Sep 2009 11:59:40 +0000

امروزه با توسعه یافتن کاربری اینترنت به وسیله تلفن های همراه، نیاز همگون سازی طراحی وب سایتها و وبلاگها با مرورگرهای موبایلی بیش از پیش احساس می شود. در همین راستا وب سرویس ها و ابزارهایی طراحی شده اند که به صاحبان سایتها و وبلاگها این امکان را میدهند تا وبگاههایشان را برای بازدیدکنندگان موبایلی شان آماده کنند. یکی از بهترین وب سرویسهایی که من دیده ام، Mobify نام دارد!

بطور کلی Mobify وب سرویسی است که ابزارهایی را در اختیار صاحبان سایتها قرار می دهد تا به کمک آنها نسخه های موبایلی وبگاهشان را طراحی و مدیریت نمایند.

یکی از مهمترین ویژگی های Mobify آن است که هم دارندگان هاستهای شخصی و هم وبلاگ نویسانی که از سرویس دهنده های رایگان (مثل wordpress.com، بلاگفا، پرشین بلاگ و…) استفاده می کنند، می توانند از این سرویس دهنده استفاده کنند. از ویژگی های دیگر Mobify عبارتند از:

تشخیص خودکار مرورگر موبایل و هدایت کردن آن به سمت قالب موبایلی وبگاه
انتخاب آسان بخشهایی از قالب وبگاه که باید در نسخه موبایلی نمایش داده شوند
امکان طراحی شمایل (CSS) برای هر یک از صفحات قالب موبایلی
اختصاص دادن یک دامنه رایگان برای نسخه موبایلی
امکان تعریف دامنه شخصی برای نسخه موبایلی

در ادامه بصورت گام به گام، با نحوه ایجاد نسخه موبایلی وبگاه، به کمک Mobify آشنا می شویم:

۱- برای شروع به کار در سایت mobify.me روی Sign Up کلیک کنید و فرم ثبت نام (که شامل آدرس ایمیل و یک کلمه عبور دلخواه می باشد) را پر نمائید.

(برای دیدن اندازه بزرگتر تصاویر، روی آنها کلیک کنید!)

۲- پس از وارد شدن به پیشخوان حساب کاربری تان، در کادر بالای صفحه، آدرس وبلاگتان را وارد کنید و روی Click here to begin! کلیک نمائید!

۳- بخش اول برای راه اندازی نسخه موبایلی، انتخاب (Choose) قسمتهایی از قالب اصلی وبلاگتان است. (موبی فای، توصیه می کند برای استفاده از همه امکانات این بخش از مرورگرهای FireFox یا Safari استفاده کنید!)

در صفحه ای که باز می شود، شما وبلاگتان را بصورت کامل مشاهده می کنید. حالا روی هر بخشی که کلیک کنید، آن بخش، به ترتیب، برای نمایش در نسخه موبایلی وبلاگتان نیز انتخاب می شود.

برای مثال، در نسخه موبایلی بلاگ نوشت، من ابتدا روی لوگوی بلاگ نوشت کلیک کردم تا این قسمت در بالای نسخه موبایلی هم نمایش داده شود. سپس از سایدبار وبلاگم، روی کادر جست و جو کلیک کردم، تا زیر لوگو، کادر جست و جو قرار گیرد. در انتها هم روی قسمت مطالب کلیک کردم تا این بخش بصورت کامل در نسخه موبایلی هم نمایش داده شود.

۴- بعد از اینکه انتخاب هایتان را کردید، در بالای صفحه روی دکمه Next کلیک کنید.

در بخش دوم، شما می توانید به طراحی شمایل (Design) نسخه موبایلی تان بپردازید. برای این کار فایل CSS نسخه اصلی وبلاگتان در کنار پیش نمایش نسخه موبایلی در اختیار شما قرار دارد. شما با دست بردن در فایل CSS می توانید شکل و رنگ دیگری به نسخه موبایلی وبلاگتان بدهید. مثلاً می توانید اندازه فونتها، رنگ آنها و یا نحوه قرار گیری شان را تغییر دهید.

هر تغییری که در فایل CSS بدهید، نتیجه آنرا در کادر پیش نمایشی که در سمت راست صفحه قرار دارد، می توانید ببینید. برای صفحه پیش نمایش هم چهار حالت در نظر گرفته شده است: iPhone، Nokia، RAZR و BlackBerry. بدین ترتیب شما می توانید نسخه موبایلی وبلاگتان را روی صفحات چهار نوع تلفن همراه نیز ببینید!

۵- در بخش سوم، شما این امکان را به وبلاگتان می دهید، تا اگر شخصی با موبایل وارد آن شد، بصورت خودکار به نسخه موبایلی هدایت شود. برای این کار در صفحه Manage روی گزینه Launch کلیک کنید.

در صفحه جدیدی که باز می شود، شما بایستی یکی از انواع سرویس های سایت موبی فای را انتخاب کنید. که البته نسخه Basic آن رایگان و بقیه پولی هستند!

پس از انتخاب نوع سرویس مورد نظر، وارد صفحه نهایی می شوید:

گام اول: یک نام برای نسخه موبایلی که ساخته اید، انتخاب کنید. (توجه داشته باشید، نامی که انتخاب می کنید، قسمتی از آدرس نسخه موبایلی وبلاگتان خواهد شد. بدین صورت http://name.mobify.me)

گام دوم: کد جاوایی که در کادر قرار گرفته است را کپی نمائید و در قالب وبلاگتان، زیر تگ قرار دهید تا امکان تشخیص و هدایت خودکار به نسخه موبایلی، در وبلاگتان مهیا شود.

چنانکه از سیستم های مدیریت محتوایی چون WordPress یا Drupal و… استفاده می کنید، می توانید به جای قرار دادن کد جاوا، افزونه (Plugin) مربوطه را نصب نمائید. برای دانلود کردن افزونه ها به این صفحه مراجعه کنید.

گام سوم (اختیاری): چنانکه تمایل دارید آدرس دامنه یکتایی برای نسخه موبایلی وبلاگتان داشته باشید (مثل m.blognevesht.com) بعد از تنظیماتی که در کنترل پنل دامنه تان انجام می دهید، آدرس را در کادر مربوطه وارد نمائید. برای کسب اطلاعات بیشتر در مورد تنظیماتی که باید برای ایجاد یک رکورد DNS CNAME انجام دهید، این صفحه را ببینید.

نکته آخر:

با انجام مراحل فوق، نسخه موبایلی وبلاگ شما آماده است. فقط توجه داشته باشید که شما فقط تنظیمات مربوط به صفحه اول (Index) نسخه موبایلی وبلاگتان را انجام داده اید، و چنانکه وبلاگتان دارای صفحات داخلی باشد (مثل وبلاگهایی که بر پایه وردپرس مدیریت می شوند) لازم است که در مورد صفحات داخلی نیز مراحل انتخاب (Choose) و طراحی (Design) را انجام دهید! و خبر خوش اینکه Mobify، صفحات داخلی مشابه را تشخیص می دهد!

برای دیدن لیست قالب صفحات طراحی نشده نسخه موبایلی وبلاگتان، در بخش Manage، روی گزینه Templates کلیک کنید. حالا برای انتخاب و طراحی هر یک از صفحات، در کنار نام آنها، روی گزینه Choose کلیک کنید و مراحل ۳ و ۴ را در مورد آن انجام دهید.

در انتها بر خود لازم می دانم تا از دوست خوبم امیر زارع، بخاطر معرفی این وب سرویس تشکر کنم.

در همین رابطه:

عصیان » سایت خودتان را برای موبایل سازگار کنین

ندای امروز » سایت خودتان را برای موبایل سازگار کنید (نسخه‌ی تکمیلی)

آدرس نسخه موبایلی بلاگ نوشت: m.blognevesht.com

مطالب مشابه:

19 دیدگاه برای این نوشته:

کامران:
۲۱ شهریور ۱۳۸۸ خیلی کامل و جامع توضیح دادی، ممنون منهم 5تا روش برای ساخت نسخه موبایل وب سایت رو در سایتم در این پست توضیح دادم : http://www.ittutorial.ir/?p=1294
AmirTnT:
۲۲ شهریور ۱۳۸۸ سلام صادق جان: بسیار خوب و کامل این سرویس رو معرفی کردی! لازم نبود اسمی از بنده ببری ولی لطف کردی. موفق باشی :)
امین:
۲۳ شهریور ۱۳۸۸ من این سرویس رو در یکی از سایت های خارجی دیدم و باهاش کار کردم،خوب شد شما هم آوردید، نکته ی مهمش همینامکان درج hostj است که سایتتون می شه m.yoursite.com
سعید:
۲۳ شهریور ۱۳۸۸ جالب و کامل مثل همیشه :)
کافه هواداران میر حسین:
۲۳ شهریور ۱۳۸۸ به نام خدا ممنون واقعا دستتون درد نکنه! این هم نسخه موبایلی من: http://mircafe.mobify.me/

| مشاهده‌ 14 نظر دیگر

بلاگ‌نوشت - FaceOff - روزلاگ

بلاگ‌نوشت » آموزش گام به گام

ایجاد نسخه موبایلی وبلاگ با Mobify

مطالب مشابه:

19 دیدگاه برای این نوشته: