https://virgool.ir/feed/@m_50078426fa2026-11-12 02:14:45https://files.virgool.ir/upload/users/1496752/avatar/Rkjdm2.jpeghttps://virgool.ir/@m_50078426https://virgool.ir/@m_50078426/قالب-بندی-آسان-صفحات-html-به-کمک-flexbox-ts5yxplhhv9hflex-boxاگر ما جزء افرادی بودیم که قبل از طراحی و پیاده سازی flex box به کار طراحی و کد نویسی قالب مشغول میشدیم احتمالا مزیت این تکنولوژی را بیشتر درک میکردیم . قبل از معرفی و معروف شدن این تکنولوژی برنامه نویسیان صفحات وب معمولا از ویژگی هایی مانند float و position برای طرح بندی و چیدمان صفحات وب استفاده میکردند که علاوه بر سختی هایی که هنگام چیدمان عناصر با آن مواجه میشدند، عمل ریسپانسیو سازی صفحات وب که امروزه اهمیت زیادی دارد را پیچیده می کرد .فلکس باکس یک روش چیدمان تک بعدی برای چیدن عناصر به صورت ردیفی یا ستونی است . CSS Flexible Box Layout که به طور خلاصه flexbox نامیده میشود یک مدل لایه بندی ارائه شده در css3 است . عناصری که در یک عنصر والد با این خاصیت قرار میگیرند میتوانند بسط یابند تا کل عرض یا ارتفاع عنصر را بگیرند و یا کوچک شوند که همگی در یک ردیف یا یک ستون قرار گیرند . این تنها یکی از مزایای flex box است !!برای مثال اگر بخواهیم مثال های زیر را به کمک ویژگی های قدیمی تر css انجام دهیم ممکن است کار دشوار یا حتی غیر ممکنی باشد، در حالی که جزء مزایای flex box محسوب میشود:وسط قرار دادن یک بلوک از محتوا درون والد خود همه فرزندان یک عنصر را صرف نظر از این که چقدر عرض/ارتفاع دارند با هم هم اندازه کنیم (عرض/ ارتفاع)همه ی ستون های یک طرح را بدون در نظر گرفتن این که چقدر محتوا دارند هم ارتفاع کنیم . فلکس باکس چگونه کار میکند؟برای استفاده از flexbox اولین کاری که باید انجام دهیم انتخاب عنصری است که میخواهیم چیدمان فرزندان آن را تنظیم کنیم و دادن ویژگی زیر به آن عنصر است:element { display:flex;}این کد باعث میشود که عنصر element به یک flex container یا به اصطلاح ظرف انعطاف پذیر تبدیل شود و ما میتوانیم فرزندان این عنصر را به صورت عمودی یا افقی و با چیدمان خاصی کنار هم قرار دهیم . flex-containerflex-itemsمحور های اصلی و متقاطع در flex-boxعناصر فرزند عنصر element در امتداد دو محور قرار میگیرند :محورهای تکنولوژی flex-boxمحور اصلی که به آن main axis گفته میشود جهتی است که فرزندان عنصر flex در امتداد آن قرار میگیرند .محور متقاطع که به آن cross axis گفته میشود بر محور اصلی عمود است .عنصر پدر که دارای ویژگی display : flex است به عنوان flex-container شناخته میشود . عناصری که داخل flex-container قرار دارند، flex-item نامیده میشوند . چیدمان عناصر به صورت عمودی و ستونی در flexboxیکی از مهم ترین ویژگی های flexbox امکان چیدن عناصر به صورت ردیفی و ستونی است . به کمک ویژگی flex-direction ما میتوانیم انتخاب کنیم که عناصر به صورت افقی یا عمودی در کنار هم قرار گیرند . flex-direction : column;به صورت پیش فرض مقدار این ویژگی روی row یا ردیف تنظیم شده است . با تغییر این ویژگی ما در واقع جهت محور های اصلی و متقاطع را مشخص میکنیم (main axis و cross axis). در واقع با تنظیم مقدار row محور اصلی افقی و محور متقاطع عمودی است .جهت محور های فلکس باکسو با تنظیم مقدار flex-direction روی column، محور اصلی عمودی و محور متقاطع افقی است .جهت محور های فلکس باکستراز بندی عناصر به صورت افقی و عمودی در flexboxفلکس باکس دو ویژگی بسیار مهم برای تراز بندی کردن عناصر در جهت محور های اصلی و متقاطع دارد .ویژگی align-items : نحوه قرارگیری و چیدمان عناصر روی محور متقاطع را مشخص میکند .مقدار strech : به طور پیش فرض این مقدار را دارد که باعث میشود همه ی آیتم های فرزند در جهت محور متقاطع کشیده شوند . و اگر والد عرض یا ارتفاع ثابتی در جهت محور متقاطع نداشته باشد همه آیتم ها به اندازه طولانی ترین آیتم کشیده می شوند.مقدار center : باعث میشود که آیتم ها اندازه ذاتی خود را حفظ کنند و در امتداد محور متقاطع وسط چین شوند.مقدار flex-start : همه آیتم ها را در ابتدای محور متقاطع قرار میدهد .مقدار flex-end : همه آیتم ها را در ابتدای محور متقاطع قرار میدهد.این ویژگی مقادیر دیگری نیز میپذیرد که از حوصله این مطلب خارج است . مقادیر مختلف ویژگی align-itemsویژگی justify-content : نحوه قرارگیری و چیدمان عناصر روی محور اصلی را مشخص میکند .مقدار flex-start : مقدار پیش فرض است که باعث میشود همه ی موارد در ابتدای محور اصلی قرار گیرند. مقدار flex-end : باعث میشود همه آیتم ها در انتهای محور اصلی قرار گیرند . مقدار center : باعث میشود همه آیتم ها در مرکز محور اصلی قرار گیرند .مقدار space-around : همه ی موارد را در امتداد محور اصلی با فاصله مساوی و کمی فاصله از اطراف آیتم ها قرار میدهد.مقدار space-between : دقیقا شبیه space-around است با این تفاوت که هیچ فاصله ای اطراف آیتم ها قرار نمی دهد.مقادیر مختلف ویژگی justify-contentما در این مقاله به توضیح اجمالی در رابطه با تکنولوژی flexbox پرداختیم . شما میتوانید به کمک منابع زیادی که در اینترنت وجود دارد به آموزش کامل این مبحث مهم و پرکاربرد بپردازید . با آرزوی موفقیت . نجمه نجفینجمه نجفیTue, 15 Feb 2022 00:16:05 +0330https://virgool.ir/@m_50078426/فرانت-اند-front-end-چیست-ffvr46onayydبهتر است پیش از پرداختن به تعریف front-end کمی درباره ی وب سایت ها صحبت کنیم . وب سایت صفحه یا مجموعه ای از صفحات مرتبط با هم است که معمولا حاوی مطالب ،لینک ها ، فایل های تصویری ، صوتی و غیره است که امروزه نقش بسیار مهمی در زندگی ما ایفا می کنند . تفاوت back-end و front-endیک وب سایت را از نظر ساختار و اجزا سازنده میتوان به دو بخش کلی تقسیم کرد : Front-end و Back-end این دو جزء هر دو برای تولید یک وب سایت مهم و حیاتی هستند اما تفاوت چشم گیری با یکدیگر دارند. یک وب سایت برای نمایش و عملکرد صحیح به تعامل درست هر دو جزء نیاز دارد .اگر وب سایت را به یک انسان تشبیه کنیم اجزا داخلی بدن انسان عملکردی مانند بخش Back-end و صورت و ظاهر انسان عملکردی مانند Front-end دارد.تفاوت back-end و front-endتوسعه ی بک اند (Backend Development)بک اند سایت که به آن server-side هم گفته میشود در حقیقت شامل داده ها و کد هایی است که برای ما قابل مشاهده نیست . در واقع کد هایی که سمت بک اند اجرا میشوند داده های سایت را پردازش ، ذخیره و مرتب میکنند. کاربران سایت به طور مستقیم با بک اند سایت تعاملی ندارند و وقتی در سایت عملیاتی انجام میدهند یا درخواستی ارسال میکنند این درخواست به سمت بک اند سایت منتقل میشوند و نتیجه حاصل درخواست به صورت front سایت برای کاربر نمایش داده میشود. توسعه ی فرانت اند (Front End Development)در این قسمت از مطلب به موضوع اصلی میپردازیم. front-end به بخشی از وب سایت گفته میشود که کاربر به طور مستقیم با آن تعامل دارد هم چنین به آن client-side هم گفته میشود. این بخش شامل همه چیز هایی است که کاربر با چشم میبیند و با آن ها تعامل برقرار میکند. مانند جداول ، فرم ها ،نمودار ها و غیره ...زبان ها و تکنولوژی های اصلی که سمت فرانت سایت با آن ها ساخته و توسعه داده میشود شامل HTML ، Css و Javascript هستند که هر کدام وظیفه خاص خود در ساخت ظاهر وب سایت را به عهده دارند .تفاوت Html ، css و javascriptزبان نشانه گذاری ابر متن (HTML)این تکنولوژی زبان برنامه نویسی محسوب نمی شود . HTML مخفف کلمات Hyper Text Markup Language است به معنی زبان نشانه گذاری ابر متن ، در واقع این زبان متن ها و اشکال موجود در یک صفحه وب را ساختار و معنا می بخشد. این زبان از ساختار هایی به نام تگ ساخته شده است که هر تگ معنا و مفهوم مشخصی دارد و مرورگر که وظیفه پردازش کد های فرانت اند و نمایش آن ها را دارد بر اساس این تگ ها تصمیم میگیرد که محتوا را چگونه نمایش دهد . اگر فرانت یک وب سایت را به یک اتومبیل تشبیه کنیم HTML بدنه ی خام ماشین است . تگ ها ی html برگه های استایل دهی آبشاری (css)این زبان هم مانند زبان HTML از نوع زبان های برنامه نویسی محسوب نمی شود . css مخفف Cascading Style Sheets است و یکی از تکنولوژی های اصلی برای ساخت و طراحی صفحات و اپلیکیشن های وب است . این زبان نحوه ی نمایش محتوای سایت را توصیف می کند . همان طور که گفته شد HTML ساختار یک صفحه وب را تشکیل میدهد و به کمک css با اعمال رنگ ها ، فونت ها ، تنظیم فاصله ی بین عناصر ساختار صفحه وب را زیبا میکنیم . در واقع صفحات وب بدون css خشک و ساده هستند . اگر وب سایت را یک اتومبیل در نظر بگیریم css ظاهر ماشین مانند رنگ و فرم ماشین را شامل می شود . تفاوت html و cssجاوا اسکریپت (Javascript)قبل از پیدایش زبان جاوا اسکریپت صفحات وب فقط شامل html و css بودند و کاملا خشک بودند و هیچ گونه تعاملی با کاربر نداشتند . جاوا اسکریپت این امکان را به ما میدهد که محتوای وب سایتمان را بر اساس رفتار و عملکرد کاربر تغییر دهیم و به رفتار های کاربر واکنش نشان دهیم . جاوا اسکریپت به ما کمک می کند موارد پیچیده ای را در وب سایت خود پیاده کنیم . برای مثال نقشه های تعاملی ، سنجش اطلاعات و اعتبار سنجی فرم ها ، انیمیشن های دو بعدی و سه بعدی و بسیاری موارد دیگر ....امیدوارم مطالب برای شما مفید بوده و درک درستی از واژه ی فرانت اند پیدا کرده باشید . با آرزوی موفقیت . نجمه نجفینجمه نجفیMon, 07 Feb 2022 20:39:57 +0330