رفتن به مطلب

تفاوت مراحل طراحی قالب واکنش گرا با قالب عادی


پست های پیشنهاد شده

سلام دوستان.

می خواستم بدونم مراحلی که برای طراحی یک قالب وردپرسی واکنش گرا استفاده می شه چه فرقی با یک قالب عادی داره چون الان آموزش های زیادی برای طراحی قالب وردپرس هست ولی همگی قالب عادی رو آموزش می دهند اما حالا قالب واکنشگرا را دیگه نمیشه کنار گذاشت و باید حتما ازش بهره برد.

ممنون میشم کامل توضیح بدید

لینک به ارسال

توضیحات جالبی داده اینجا

http://wp.smashingmagazine.com/2012/06/28/create-responsive-mobile-first-wordpress-theme/

لینک به ارسال

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

برای این کار شما باید از متاها و ریداریکت ها استفاده کنید و یک شیوه نامه هم برای هر کدوم از دستگاه ها ایجاد کنید . کاربرانی که با موبایل وارد میشن مسلماً دوست دارن عرض صفحه کمتر باشه . گرافیک کمتر باشه تا سریعتر لود شه و . . .

این مورد نیاز به آموزش های خاصی نداره و بیشتر تو طراحی باید سعی بشه که استایل خاصی رو برای موبایل ها و صفحات نمایش کوچکتر در نظر گرفت و کدهایی رو در هدر قرار داد تا به محض اینکه کاربر با موبایل و یا تبلت وارد شد به ساب دامین و یا دایرکتوری خاصی هدایت بشه و از اون طریق سایت رو ببینه و یا اینکه استایل جدید براش لود شه دقیقاً چیزی تو مایه های اینکه توی بعضی از سایت ها کاربری که با ie وارد میشه شیوه نامه جدید برای مرورگر ie لود میشه تا سایت به نحو مطلوب نمایش داده بشه

لینک به ارسال

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

برای این کار شما باید از متاها و ریداریکت ها استفاده کنید و یک شیوه نامه هم برای هر کدوم از دستگاه ها ایجاد کنید . کاربرانی که با موبایل وارد میشن مسلماً دوست دارن عرض صفحه کمتر باشه . گرافیک کمتر باشه تا سریعتر لود شه و . . .

این مورد نیاز به آموزش های خاصی نداره و بیشتر تو طراحی باید سعی بشه که استایل خاصی رو برای موبایل ها و صفحات نمایش کوچکتر در نظر گرفت و کدهایی رو در هدر قرار داد تا به محض اینکه کاربر با موبایل و یا تبلت وارد شد به ساب دامین و یا دایرکتوری خاصی هدایت بشه و از اون طریق سایت رو ببینه و یا اینکه استایل جدید براش لود شه دقیقاً چیزی تو مایه های اینکه توی بعضی از سایت ها کاربری که با ie وارد میشه شیوه نامه جدید برای مرورگر ie لود میشه تا سایت به نحو مطلوب نمایش داده بشه

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


@media screen and (max-width: 980px) { }

ولی حالا آیا باید در نوشتن کدهای اچ تی ام ال هم تغییری داده بشه تا از قابلیت واکنشگرا استفاده کرد؟ فریم ورک هایی مانند Bootstrap برای چی هستند چجوری آنها را باید به کار برد؟

ویرایش شده توسط سعید شعبانی
لینک به ارسال

تقریبا مراحلش فرقی نداره ، هر قالب معمولی ای رو میشه ریسپانسیو کرد

اما اگر از اول با فریمورک های ریسپانسیو قالب رو طراحی کنید راحت ترید

چند فریمورک ریسپانسیو :


http://www.webtarget.ir/blog/%D8%B7%D8%B1%D8%A7%D8%AD%D8%A7%D9%86-%D9%88%D8%A8%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A7%D8%B2-%DA%86%D9%87-%D9%81%D8%B1%DB%8C%D9%85%E2%80%8C%D9%88%D8%B1%DA%A9%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%B3%DB%8C-%D8%A7/


http://webhub.ir/framework-36-%D8%A8%D8%B1%D8%A7%DB%8C-css-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-responsive


http://webhub.ir/%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D9%88-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%81%D8%B1%DB%8C%D9%85-%D9%88%D8%B1%DA%A9-960grid


http://mihanlearn.com/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8/7-%D8%A7%D8%A8%D9%80%D8%B2%D8%A7%D8%B1-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7/


http://responsify.it/

و مقالاتی دررابطه با ریسپانسیو دیزاین :


http://www.webtarget.ir/blog/%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%87%D8%A7%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-responsive-web-design/


http://webhub.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-responsive-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-css3

مقالاتش بسیار زیاده ، تو منابع انگلیسی اگر جستجو کنید به نتایج جالب تری میرسید

لینک به ارسال

فقط بحث استایل ها نیست کلا تشخیص دیوایس خواننده و اعمال دستوراتی خاص در مقابل اپلیکیشن های متفاوت است موبایل - آیفون و یا هر چیز دیگه مثلا می شه فرض کرد رزولیشن مونیتور اگر 800 در 600 بود در نتیجه گرافیک سیستم استفاده کننده هم به همان میزان ضعیف است و قالب را با تمام جزئیاتش به پوشه ای دیگر هدایت کرد که با گرافیک مناسب نوشته شده باشند

لینک به ارسال

فقط بحث استایل ها نیست کلا تشخیص دیوایس خواننده و اعمال دستوراتی خاص در مقابل اپلیکیشن های متفاوت است موبایل - آیفون و یا هر چیز دیگه مثلا می شه فرض کرد رزولیشن مونیتور اگر 800 در 600 بود در نتیجه گرافیک سیستم استفاده کننده هم به همان میزان ضعیف است و قالب را با تمام جزئیاتش به پوشه ای دیگر هدایت کرد که با گرافیک مناسب نوشته شده باشند

منظورتون این هست که مثلا اگر با گوشی htc one x سایت رو باز کنی یک استایل نشون می ده و اگر با گوشی ای Lumia 920 که همان رزولوشن one x رو داره سایت رو باز کنیم یه استایل دیگه رو نشون می ده؟ یا منظورتون این هست که بستگی به رزولیشن دستگاه ها داره؟

تقریبا مراحلش فرقی نداره ، هر قالب معمولی ای رو میشه ریسپانسیو کرد

اما اگر از اول با فریمورک های ریسپانسیو قالب رو طراحی کنید راحت ترید

شما می گید که هر قالبی رو میشه واکنش گرا کرد خوب آیا باید در کدهای html قالب هم تغییری ایجاد کرد؟

این فریمورک ها چجوری باید ازشون استفاده کرد آیا استایل و html خام رو در اختیار می گذارند و درون آنها باید کد های وردپرس رو بگونجونیم؟

لینک به ارسال

دوستان گرامی من به طور کلی توضیح می دم . در کل سه نوع طراحی مخصوص تبلت ها یا می نی لبنتابها یا اسمارت فونها است

  1. طراحی رسپانسیو با طاهر اصلی سایت اما با سایز های متفاوت و همچنین ویرایش عکس و المانهای وب در سطح ساده در سطح حرفه ای غیر فعال کردن برخی کدهای جاوا و فریمورک ها و افزودن کدهای جاوای متناسب برای سیستم مورد نظر به طور خلاصه برای رسیدن به هدف اول استفاده از مدیا کوئری ها و هدف دوم جاوا و جی کوئری ...
  2. طراحی اختصاصی برای سیستم ها جدا از ظاهر اصلی سایت و استفاده از فریم ورک های چون جی کوئری موبایل و تکنیک کار استفاده از توابع javascript browser detect
  3. طراحی وب اپ مخصوص سیستم های ios و آندروید . در مقایسه با ( Native app )

اگر این معرفی بانی بر تبلیغ نباشه اگه ام بود که مدیران عزیز اینو ویرایش کنن. برای نمونه اول و سوم من نمونه طراحی انجام دادم می توننید به عنوان نمونه نگاه کنید دمو

برای دیدن نحوه کار وب اپ لازمه برای ios بروی سفری رفته و بروی گزینه add to home sreen کنید تا با نحوه کارش آشنا بشین .

لینک به ارسال

دوستان گرامی من به طور کلی توضیح می دم . در کل سه نوع طراحی مخصوص تبلت ها یا می نی لبنتابها یا اسمارت فونها است

  1. طراحی رسپانسیو با طاهر اصلی سایت اما با سایز های متفاوت و همچنین ویرایش عکس و المانهای وب در سطح ساده در سطح حرفه ای غیر فعال کردن برخی کدهای جاوا و فریمورک ها و افزودن کدهای جاوای متناسب برای سیستم مورد نظر به طور خلاصه برای رسیدن به هدف اول استفاده از مدیا کوئری ها و هدف دوم جاوا و جی کوئری ...
  2. طراحی اختصاصی برای سیستم ها جدا از ظاهر اصلی سایت و استفاده از فریم ورک های چون جی کوئری موبایل و تکنیک کار استفاده از توابع javascript browser detect
  3. طراحی وب اپ مخصوص سیستم های ios و آندروید . در مقایسه با ( Native app )

اگر این معرفی بانی بر تبلیغ نباشه اگه ام بود که مدیران عزیز اینو ویرایش کنن. برای نمونه اول و سوم من نمونه طراحی انجام دادم می توننید به عنوان نمونه نگاه کنید دمو

برای دیدن نحوه کار وب اپ لازمه برای ios بروی سفری رفته و بروی گزینه add to home sreen کنید تا با نحوه کارش آشنا بشین .

دوست عزیز توضیحات خوبی بود اگر وقت دارید ممکن هست یک سری آموزش طراحی قالب واکنشگرا در انجمن بنویسید؟

لینک به ارسال

قبل از اینکه برای طراحی این نوع پوسته ها آماده بشید باید سطح html-css خودتون رو بالا ببرید.

حتما کمی php و مخصوصا جی کوئری هم کار کنید.

لینک به ارسال

منظورتون این هست که مثلا اگر با گوشی htc one x سایت رو باز کنی یک استایل نشون می ده و اگر با گوشی ای Lumia 920 که همان رزولوشن one x رو داره سایت رو باز کنیم یه استایل دیگه رو نشون می ده؟ یا منظورتون این هست که بستگی به رزولیشن دستگاه ها داره؟

می تتونه بر اساس هر نوع مشخصه ای تنظیم بشه حتی بر اساس آیتمهایی که به سخت افزار بازدید کننده مربوط نباشه اما اغلب منظور شناسایی سخت افزار ارجاع شده و ارایه سرویس مناسب با آن است

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...