imaniy

چند سوال کوچیک درباره طراحی وب (بوت استرپ - وسط چین کردن عناصر - کد ریست مروگر)

imaniy ۱۳۹۷/۰۶/۲۳ 125 مباحث عمومی برنامه‌نویسی

1- برای وسط چین کردن عناصر میشه هم از float استفاده کرد هم از display : inline-block و هم از display: flex میخام بدونم تفاوت اینها چیه و اصولا چه فرقی دارن و کجاها مورد استفاده قرار میگرن؟

2- اگر float برای ترازبندی عناصر استفاده میکنید همیشه مقدار مارجین و پددینگ را برای عنصر بدنه تعریف کنید تا از نمایش متفاوت ان در در مروگر های متفاوت جلوگیری کنید.... این یعنی چی؟

3- آیا استفاده از فریم ورک هایی مثل بوت استرپ و فونت آسوم باعث نمیشه که قالب سنگین تر بشه برای لود؟ اگه یکی بخاد سایتش مثالا مثل سافت 98 سبک باشه ما باید برای طراحی چیکار کنیم؟

4- من قبلا تو پروژه های کوچیکم از css reset استفاده میکردم ولی شنیدم تو بوت استرپ همچین فایلی حتی کامل تر وجود داره چطور میشه از اون استفاده کرد؟

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

پاسخ‌ها به این تاپیک
امیر
امیر امیر هستم. یک توسعه‌دهنده فرانت‌اند
۱۳۹۷/۰۶/۲۳

پاسخ به مورد 1: برای وسط‌‌چین کردن از float استفاده نمیشه و اون دو مورد دیگه‌ای هم که گفتین مربوط به وسط‌چین کردن نیست اما ممکنه در این کارتاثیر داشته باشد.
در واقع وسط‌چین کردن روی اجزای مختلف، روش‌های مختلفی داره اما چیزی که مشخصه اینه که المنتی که float داره وسط‌چین نمیشه و خیلی وقتا با یه margin: 0 auto; ساده میتونیم قسمت مربوط به خودمونو وسط چین کنیم. (هرچند که گفتم بستگی به قسمت مربوطه داره و positionها و دیگر موارد هم تاثیرگذار هستن)

پاسخ به مورد 2: از اونجایی که در مرورگرهای مختلف کمی فاصله‌ها متفاوته توصیه میشه از css reset ها استفاده بشه یا به صورت دستی خودتون margin و padding بدین که ترجیحا تفاوت توی طرح بین مرورگرها ایجاد نشه.

پاسخ به مورد 3: قطعا این فریم‌ورک‌ها موارد بسیار زیادی دارند که از همۀ اونا استفاده نمیشه و درنتیجه بار سایت کمی سنگین میشه. برای رفع این مشکل راه‌ها و ابزارهای مختلفی هست. مثلا یکی از راه‌ها اینه که بعد از انتشار سایتتون با ابزارهایی که بررسی کنید ببینید از چه کدها و منابعی استفاده نشده و اونارو حذف کنید. در مورد فونت هم به همین شکله. میتونین با ابزارهایی مانند http://fontastic.me فونت سفارشی شدۀ خودتون رو گلچین کنید که باز اضافی نداشته باشه.

پاسخ به مورد 4: درون بوت‌استرپ تعبیه شده و فقط برای نسخه‌های قدیمی جدابود. (Normalize.css)

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

در مورد سوال بعدی هم باید بگم که بله، برای طراحی رابط کاربری و تجربه کاربری علاوه بر فتوشاپ نرم‌افزارهای تخصصی زیادی وجود داره مانند Adobe XD

موفق باشید

علی رضا کامکار
علی رضا کامکاربرنامه نویس وب و موبایل
۱۳۹۷/۰۶/۲۳

سلام.

۱ - برای وسط چین کردن، بسته به vertical یا horizontal بودن راه های زیادی داره ولی میشه گفت در اکثر مواقع برای وسط چین کردن به شکل vertical استفاده از flex بهترین انتخاب و برای horizontal هم text-align:center جواب میدهد. میتونید توی لینک زیر راه های مختلف وسط چین کردن رو ببینید.

http://howtocenterincss.com/

برای یادگیری flex هم میتونید از لینک زیر استفاده کنید.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

۲ - تجربه شخصی من توی این چند سال اینه که هر موقع که با float کار میکردم به کلی مشکل بر میخوردم که مثلا collapse شدن المنت ها یکی از مواردی بود که پیش میومد که برای حلش هم چند راه وجود داشت اما به طور کلی از موقعی که flex معرفی شد تقریبا از float دیگه استفاده نکردم :). بوت استرپ ۴ هم از flex برای صفحه بندی استفاده میکنه.

۳ - فریم ورک ها ولایبرری ها هر کدوم حجم های مختلفی دارن و باید توجه داشته باشید که از نسخه minify شده استفاده کنید که فشرده شده باشن و به طبع حجم کم تری هم دارا باشن.

وقتی که بوت استرپ رو دانلود میکنید یه فایل boostrap.min وجود داره که نسخه کامل هستش برای این که حجم اون رو کم کنید میتونید از فایل های bootstrap-grid.min که فقط یک سیستم صفحه بندی در اختیارتون قرار میده استفاده کنید. برای سبک تر کردن صفحه و بهبود سرعت راه های خیلی زیادی مثل استفاده از CDN ها و یا bundle کردن فایلا هست که به نظرم تو اینترنت سرچ کنید به نتایج بهتری میرسید.

۴ - بله همونطور که توی مورد قبلی اشاره کردم چندین فایل در پکیج بوت استرپ وجود دارند که یکی از آن ها bootstrap-reboot هست و به طور پیشفرض داخل خود bootstrap.min وجود داره و میتونید به شکل جداگانه هم از اون استفاده کنید.

۵ - راه "درست تر" بله این هستش که اول طرح رو آماده کنید و بعد شروع به پیاده سازی کنید. ابزار های خیلی زیادی برای طراحی اپلیکیشن و وبسایت وجود دارند که مخصوص این کار طراحی شده اند ولی متاسفانه بعضی هاشون فقط روی سیستم عامل مک اجرا میشن مثل Sketch بعضی ها هم مشترک روی ویندوز و مک هستند مثل Adobe XD.

موفق باشید.

imaniy
imaniy
۱۳۹۷/۰۶/۲۳

خیلی ممنون که سریع پاسخ دادین متاسفانه تو ایران انجمن خوب برای طرح مشکلات طراحی و برنامه نویسی وب من ندیدم انجمن هایی مثل انجمن barnamenevisan.org و. .  رو که کلا باید دورش خط کشید. 

در پاسخ به

علی رضا کامکار
علی رضا کامکاربرنامه نویس وب و موبایل
۱۳۹۷/۰۶/۲۳

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

در پاسخ به

ادمین
ادمین اکانت رسمی ادمین سایت سکان آکادمی
۱۳۹۷/۰۶/۲۳

آقای کامکار گرامی سلام،

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

با تشکر

ارادتمند

مدیریت سکان آکادمی

در پاسخ به

علی رضا کامکار
علی رضا کامکاربرنامه نویس وب و موبایل
۱۳۹۷/۰۶/۲۳

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

در پاسخ به