طراحی ریسپانسیو

[mohamad_torabi]

سلام
من میخوام بدونم چه جوری میشه بردون استفاده از فریم ورک وبی داشته باشم که تو تمام صفح نمایشا یکی باشه
مرسی

[mohamad_torabi]

منظورم این که سایتی مثل نردبان (http://nardebaan.ir/)

[ateryad]

سایت نردبان از دروپال استفاده کرده دویت عزیز

ولی یک نگاه به این مقاله انگلیسی بندازی:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

به زودی یک این مقاله فارسی خواهد شد.

[mohamad_torabi]

این مقاله فارسیش وجود داره
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
:چشمک:

[mhbitarafan]

دوست عزیز طراحی ریسپانسیو بدون فریم ورک کار خیلی مشکلیه و از نظر زمان و کارایی اصلن به صرفه نیست ... من به شما فریم ورک سی اس اس bootstrap رو پیشنهاد میدم و کار کردن باهاش خیلی راحته تقریبا و شما میتونید از راهنمایی های خود سایت بوت استرپ استفاده کنید

[f_talebi]

دوست عزیز طراحی ریسپانسیو بدون فریم ورک کار خیلی مشکلیه و از نظر زمان و کارایی اصلن به صرفه نیست ... من به شما فریم ورک سی اس اس bootstrap رو پیشنهاد میدم و کار کردن باهاش خیلی راحته تقریبا و شما میتونید از راهنمایی های خود سایت بوت استرپ استفاده کنید

رسپونسیو کردن با بوت استرپ نمیدونم چجوری هست مثلا من این سایتو (http://www.kimya.xzn.ir/) با بوت استرپ ساختم چجوری باید رسپونسیوش کنم؟

[mohamad_torabi]

رسپونسیو کردن با بوت استرپ نمیدونم چجوری هست مثلا من این سایتو (http://www.kimya.xzn.ir/) با بوت استرپ ساختم چجوری باید رسپونسیوش کنم؟
خب صفحه مرورگررو کوچیک کنید میبینید که عناص میان زیر هم میشه ریسپانسیو دیگه

[mhbitarafan]

رسپونسیو کردن با بوت استرپ نمیدونم چجوری هست مثلا من این سایتو (http://www.kimya.xzn.ir/) با بوت استرپ ساختم چجوری باید رسپونسیوش کنم؟

کدهای سی اس اس فریم ورک بوت استرپ که از سایتش دانلود میکنید 3 نوع هست :
1. bootstrap.css
2. bootstrap.min.css
3. bootstrap-responsive.min
که کافیه فایل سوم که مخصوص سایت های ریسپانسیو هست رو داخل سایتتون قرار بدید ...

[r4hgozar]

سلام.
اقا ترابی من خیلی وقته نمیام اما خوشحالم می بینم شما همچنان دارین کارتون رو ادامه میدین.
اما می خواستم بگم شما که از افراد فعال این تالار هستین چرا پستی میزارین که دربارش خخیلی بحث شده و سرچ نمی کنین.
به نظر من البته من زیاد حرفه ای نمی دونم خودم رو اما نظرم اینه که شما از درصد برای اندازه دادن به صفحاتتون استفاده کنید.
روش های دیگه ای وجود داره مثل همین فریم ورک ها مثل بوت استرپ اما شما وقتی از این فریم ورک ها استفاده می کنید میاین یک فایی رو ضمینه میکند که این فایل مثلا 50 کیلو حجم داره.
شما شاید از این فایل 50 کیلویی فقط 5 درصد کدش رو استفاده می کنید اما هر دفعخ که سایت فراخونی میشه این 50 کیلو هم فراخونی میشه.
شاید بگین که 50 کیلو که چیزی نیست. حق با شماست اما تو سایت های کوچیک به مرر زمان که سایت بازدید بخوره 1 کیلو هم خودش 1 کیلو هیتش.
کار با درصد ها زیاد سخت نیست به نظرم سختی اولش به حرفه ای شدن و راحتی آخرش می ارزه.
موفق باشید

[بهزاد علی محمدزاده]

1. bootstrap.css
2. bootstrap.min.css
3. bootstrap-responsive.min

سلام . این دیگه تمام شده !! نسخه جدید همه چیز در یه فایل 70K هست و کلا هم تغییر کرده . دیگه این نسخه رو بذارید کنار و با راهنمای Bootstrap می تونید از نسخه دو به سه مهاجرت کنید .

[mohamad_torabi]

من به جوابم رسیدم از Bootstrap میخوام استفاده کنم خیلی توپه

[mhbitarafan]

در بوت استرپ شما میتونی customize (شخصی سازی) کنی یعنی قبل از این که کد هارو دانلود کنی بهش میگی چیا رو میخوای و بعد اون کد ها رو بهت میده که حجمش خیلی کم میشه
فکر نمیکنم استفاده از درصد کار درستی باشه چون من تجربه ی استفاده از درصد رو دارم و اعصاب آدم خورد میشه بعضی جاها و آخرم به نتیجه دلخواه نمیرسی معمولن ....

[mhbitarafan]

من حدود 3 هفته پیش این فایل رو از سایت دانلود کردم و خیلی هم راضی هستم ...
دلیلی نداره به 3 مهاجرت کنم ....
:P

[f_talebi]

وقتی که صفحه (http://www.kimya.xzn.ir)رو با ctrl + بزرگ کنیم، خبرنامه میاد توی یه سطر مستقل ، و سایت بهم ریخته میشه. اینو چجوری باید درست کنم دوستان؟


کدهای سی اس اس فریم ورک بوت استرپ که از سایتش دانلود میکنید 3 نوع هست :
1. bootstrap.css
2. bootstrap.min.css
3. bootstrap-responsive.min
که کافیه فایل سوم که مخصوص سایت های ریسپانسیو هست رو داخل سایتتون قرار بدید ...

ممنونم .الان این فایل رو اضافه کردم و اگه سایت رو ببینین وقتی که ctrl - بزنیم ، گزینه های منو محو میشن... این دلیل چی هست چجوری میتونم درستش کنم


سلام . این دیگه تمام شده !! نسخه جدید همه چیز در یه فایل 70K هست و کلا هم تغییر کرده . دیگه این نسخه رو بذارید کنار و با راهنمای Bootstrap می تونید از نسخه دو به سه مهاجرت کنید .
من بوت استرپ 3 رو دانلود کردم. کمی فایل هاش زیاد بودن ، میخواستم بدونم که این فایلهایی که باید به سندم لینک کنم همین هایی هستند که در پوشه ی dist که داخلش پوشه های css و js وجود دارند..؟

[mazaher5723]

رسپانسیو بوت استرپ که رسپانسیو نیست.من خودم بوت استرپ استفاده کردم دارم رسپانسیو شو دستی می نویسم با رسپانسیو بوت استرپ استفاده نمی کنم.

[mohamad_torabi]

کلا کار باهاشو حال کردم طی چند دقیقه تونستم یه سایت بسازم:لبخند:

[بهزاد علی محمدزاده]

من بوت استرپ 3 رو دانلود کردم. کمی فایل هاش زیاد بودن ، میخواستم بدونم که این فایلهایی که باید به سندم لینک کنم همین هایی هستند که در پوشه ی dist که داخلش پوشه های css و js وجود دارند..؟

من مستقیم از سایتش دانلود نکردم چون ما نسخه راست به چپ رو می خوایم . با ویژوال استدیو کار می کنم و اونجا به وسیله NuGet این بسته ها نصب میشن و مسیر راست به چپ شده جداست . شاید امکاناتی در بخش Customize باشه برای راست به چپ کردن باشه که من وقت نکردم بررسی کنم .

اما فایل هایی که استفاده می کنم و آپلود کردم .

لینک دانلود . (http://uploadtak.com/images/9943_Bootstrap_3_RTL.rar)

[mhbitarafan]

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

[ateryad]

این مقاله فارسیش وجود داره
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
:چشمک:


درسته، خود بنده هم این مقاله رو خوانده بودم، ولی باز این مقاله رو ترجمه خواهم کرد.
:چشمک:

[ateryad]

دوست عزیز طراحی ریسپانسیو بدون فریم ورک کار خیلی مشکلیه و از نظر زمان و کارایی اصلن به صرفه نیست ... من به شما فریم ورک سی اس اس bootstrap رو پیشنهاد میدم و کار کردن باهاش خیلی راحته تقریبا و شما میتونید از راهنمایی های خود سایت بوت استرپ استفاده کنید


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

[mhbitarafan]

بوت استرپ رو راحت میشه شخصی سازی کرد (customize)

[ateryad]

بوت استرپ رو راحت میشه شخصی سازی کرد (customize)

مگه بنده گفتم نمیشه همچین کاری کرد....؟!؟!؟!

[mhbitarafan]

مگه بنده گفتم نمیشه همچین کاری کرد....؟!؟!؟!


نگفتید نمیشه گفتید که
چون شما ممکن هست از بعضی از قسمت های فریم ورک بخواهید استفاده کنید ولی سنگینی کل اون فریم ورک روی قالب و سایت شما اعمال خواهد شد.

[mohamad_torabi]

رسپونسیو کردن با بوت استرپ نمیدونم چجوری هست مثلا من این سایتو (http://www.kimya.xzn.ir/) با بوت استرپ ساختم چجوری باید رسپونسیوش کنم؟
سلام میخواستم ازتون بپرسم شما مشکل منوتون رو چه جوری حل کردین؟

[f_talebi]

سلام میخواستم ازتون بپرسم شما مشکل منوتون رو چه جوری حل کردین؟
سلام فقط همونطور که دوستمون گفتند فایل css رسپونسیو بوت استرپ رو اضافه کردم به صفحه ام. البته اگه نگاه کنین وقتی صفحه رو با ctrl + بزرگ کنیم گزینه های منو مخفی میشن. و من اینو نمیخوام. بنابراین مجبورم فایل رسپونسیو رو حذف کنم و خودم یه فکری به حالش بکنم.

[بهزاد علی محمدزاده]

چند روز پیش توی پیام خصوصی به دوستی می گفتم که بعضی از اعضا توی کارشون در واقع فقط سمت کاربر رو دارند و html , css و javascript کار می کنن اما باز هم می بینیم که خیلی ها اونجوری که باید سراغش نمیرن و مدام سوالاتی داریم که طراحی رسپانسیو چی هست و چطور هست ...!

توی بخش PHP بعضی از بچه ها گیر MVC‌ هستند و شی گرایی و اینجا گیر رسپانسیو !!! ... آخه اینها جز مباحث پیشرفته و سخت علوم کامپیوتر نیستند که اینقدر ما گرفتارشون هستیم ... اگر امنیت اطلاعات بخونیم چیکار می کنیم ؟ این نه الگوریتم های پیچیده ایی داره و نه حتی خیلی از مباحث درگیر در برنامه نویسی وب رو داره . مثل طراحی دیتابیس ... مباحث نرم افزاری مثل الگو های طراحی ... امنیت و مباحث مدرن nodejs و ...

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

آخه سراغ رسپانسیو رفتن اینقدر پیچیده است که ما مدام در موردش سوال و تاپیک داریم ؟

آنچه که من متوجه شدم اینه که اولا این دوستان در پایه ضعیف هستند . خصوصا پایه تئوریک ... یعنی چند تا مرجع خوب کنار دستشون ندارند و مطالعه نمی کنند و فقط با کار عملی می خوان پیش برن .

سی جی دیت ( متخصص پایگاه داده ) نقل قولی رو از سقراط ( اگر اشتباه نکنم ) آورده که کسی بدون دانش تئوریک می خواد کار کنه مثل ناخدایی هست که بدون قطب نما و نقشه میزنه به دریا !!!

من چند توصیه به این دوستان دارم :

تمرین خوبه و لازمه اما کار سطحی انجام دادن خوب نیست و اون وقت رو بذارید روی تحقیق و مطالعه .

یه کتاب خوب از css رو بذارید کنار دستتون و مطالعه اش کنید . ( کنار دست به عنوان مرجع هم باشه ) ... بعد می خواید رسپانسیو کار کنید : با جستجو های مختلف منابعش رو ( به انگلیسی ) پیدا کنید این منابع شامل کتاب و مقاله و ویدیو آموزشی هستند :
responsive web design video tutorial

کلماتی اینجوری سرهم و گوگل کنید ... منابع خودشون رو نشون میدن .

کتاب هایی که پیشنهاد شده رو ببرید به سایت amazon و ببیند چه رتبه ایی رو به خودش اختصاص داده و نقدهای کاربران و در موردش یه نگاه بندازید . از بازخوردها متوجه میشید که این کتاب و پیدا کنید یا نه .... اونوقت دانلود کتاب هم که برای ما مجانی هست . وقتی مطمئن شدین که این کتاب خوبی هست . ببرید ازش چاپ کنید ... یا سیمی یا جلد و هرجور دیگه ایی که راحت هستین ...

بعدش کتاب و بخونید ! به همین راحتی ... متن هاشون خیلی ساده و روان هست ( معمولا ) چون طوری نوشته میشن که هندی ها چینی ها غربی ها و همه بتونن بخوننش ... خلاصه بین المللی در نظر گرفته میشه .

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

اونهایی که برای دانلود هستند و بذارید توی صف دانلودهاتون . و مقالات رو هم پرینت بگیرید مطالعه کنید و کدها رو اجرا کنید . بعد از یه مدت خودتون شاید مقاله بنویسید در مورد رسپانسیو ... ( انشا الله )

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

و در نهایت این ویدیو رو به عنوان نمونه معرفی می کنم . برای کسانی مناسب هست که نه مقدماتی هستند و نه پیشرفته . حتما توصیه می کنم سرفصل ها (http://www.lynda.com/Web-Interactive-CSS-training/CSS-Page-Layouts/86003-2.html) رو ببینید .