https://virgool.ir/feed/@mohamadmehdi.jmlیک برنامه نویس تازه کار که داره برای گسترش مهارتاش تلاش میکنهfa2026-11-12 03:56:37https://files.virgool.ir/upload/users/1739500/avatar/VQ4TGi.jpeghttps://virgool.ir/@mohamadmehdi.jmlhttps://virgool.ir/@mohamadmehdi.jml/چینش-المنت-های-وبسایت-با-فلکس-باکس-flex-box-dqvraqgx960k اگر تا به حال راجع به طراحی وبسایت و چینش المنت های آن تحقیق کرده باشید حتما به مبحث شیرین و کاربردی flex-box برخورد کرده اید اما واقعا این flex-box چیست ؟ من قراره در ادامه با یک توضیح ساده شمارو با این مبحث آشنا کنم .مفهوم flex-box به زبان ساده شما در روزمرگی خودتان زیاد پیش آمده که میخواستید چند کتاب را مرتب در یک ردیف قرار دهید یا چند جعبه را مرتب روی هم قرار دهید ، درسته؟ در lay out بندی صفحات وبسایت یا به عبارتی همان چینش المنت ها ما از ابزارهای css که flex-box و grid نام دارند استفاده میکنیم که به طور خلاصه از flex-box برای چینش المنت ها به صورت تک بعدی یعنی یک ستون column یا یک سطر row استفاده میکنیم یعنی یک ستون را به چند سطر و یا یک سطر رو به چند ستون تبدیل میکنیم و قسمت grid هم میتواند چند سطر و چند ستون از المنت ها را کنار هم مرتب بچیند ؛ حالا با مفهوم ساده flex-box اشنا شدیم.تعریف تخصصی flex-box و نحوه استفاده از آندر واقع flex-box یک نوع display در css است که ما به container هامون میدیم که چینش المنت های اون رو مرتب کنیم که به شکل زیر ما در کد های css استفاده میکنیم :.container { display : flex ; }و الان چینش المنت های container مورد نظر حالت flex-box را متوجه شدند ولی شاید چیزی که شما میخواهید نشده باشد درسته چون flex-box یک سری ویژگی ها داره که باعث میشه چینش المنت های ما مرتب تر و دقیق تر بر اساس نیاز ما باشه پس بریم سراغ ادامه و من ویژگی های کاربردی flex-box رو براتون توضیح بدم .ویژگی های flex-boxflex-directionیادتونه گفتم که ما میتونیم المنت هامونو به صورت ستونی یا column و سطری یا row بچینیم اما چطوری ؟ با استفاده از flex-direction یا جهت دهی به آن اما چطوری ما این کارو انجام بدیم ؟.container { flex-direction : row / column / row-reverse / column-reverse ; }یکی از مقادیر را با توجه به نیازمان به آن میدهیم ؛ در مقادیر بالا 2 عدد مقدار داریم که کلمه reverse به خودشون گرفتن که به معناب بالعکس هستش یعنی چی یعنی مقادیر را نسبت به سطر یا ستون قرینه میکند.flex-wrapاین ویژگی به عبارتی به این معناست که اگر فضای مورد نیاز المنت ها از یک سطر یا ستون بیشتر شد آیا اجازه دارند به سطر یا ستون بعدی بروند یا باید در همان سطر یا ستون بمانند که به شکل زیر میتوان از آن استفاده کرد (مقدار دیفالت یا اولیه این ویژگی nowrap هستش) :.container { flex-wrap : wrap / nowrap / wrap-reverse ; }justify-contentنحوه چینش و فاصله بین آن ها در سطر یا ستون به این ویژگی بستگی دارد یعنی با توجه به عکس بالا هر یک ازین مقادیر را بدهیم المنت ها به شکل مشخص شده فاصله را بین المنت ها تقسیم میکند و به شکل زیر نوشته میشود : .container { justify-content : flex-start ; }align-itemsاین ویژگی در واقع چینش المنت ها نسبت به یک خط صاف است یعنی اگر ما یک خط در وسط سطر یا ستون رسم کنیم المنت های ما نسبت خط وسط چگونه قرار بگیرند و به شکل زیر استفاده میشود :.container { align-items : stretch ; }یک ویژگی دیگه هست که اسمش align-content ولی من عکسشو قرار میدم و دوست دارم شما دیدگاهتونو نسبت بهش بگید و کامنت کنید که نظرتون نسبت به عکس کاراییش چی هست و به چه دردی میخوره :کلام آخرکاربرد flex-box در css و طراحی وبسایت و layout بندی صفحات یا همون چینش المنت ها بسیار زیاده و ویژگی های بیشتری هم داره اما به طور خلاصه و پر کاربرد ترین ویژگی هاشو باهم مرور کردیم ولی اگر دوست دارید بیشتر راجبش بدونید حتما تحقیق کنید و چیز های باحال تری هم راجع بهش پیدا میکنید . امید وارم مقاله رو دوست داشته بودید ، موفق باشید .Mohammad Mehdi JamalpourMohammad Mehdi JamalpourMon, 15 Aug 2022 15:01:54 +0430https://virgool.ir/@mohamadmehdi.jml/وقتی-از-هاست-و-دامین-صحبت-میکنیم-منظورمان-چیست-rqpucuszplbzدامین چیست و چه وظیفه ای دارد؟ به طور خلاصه دامنه آدرس وبسایت شماست، یعنی اگر وبسایت نقش یک خانه را داشته باشد دامین آدرس آن خانه میباشد .در دنیای بی‌کران اینترنت بدون دامین همه چیز گم میشد پس نیاز داشتیم با آدرس دهی وبسایت هامون رو ساماندهی کنیم؛ حالا حتما براتون سوال پیش میاد که پس IP چیه ؟ درسته بزارید من توضیح بدم هر کامپیوتر در دنیای اینترنت یک IP مختص به خودشو داره دقیقا مثل کد ملی یا شماره شناسنامه و هر IP متشکل چند عدد چند رقمیست به طور مثال 66.234.12.165 حالا فرض کنید کلیه سایت هایی که قرار است استفاده کنیم با IP بودند و مجبور به حفظ آن ها بودیم قطعا سخت میشد پس بجای آن ما از دامین ها استفاده میکنیم و کارمون راحت تر میشه.دامین چگونه کار میکند؟! وقتی شما تصمیم میگیرید وارد یک سایت بشوید پس از اینکه در مرورگر دامین سایت مورد نظر را وارد میکنید و تایید میکنید ، درخواستی برای DNS ارسال میشود سپس DNS با پیدا کردن IP مرتبط سایت را به ما نشان میدهد. سوال بعدی DNS چیست ؟ مخفف Domain Name System است. مرکزی از سرورهای غول‌پیکر که به‌عنوان محل قرارگیری تمام دامنه‌ها و تبدیل آن‌ها به آدرس IP شناخته می‌شود. درواقع برای اینکه از طریق دامین بتوانید وارد سایت موردنظرتان شوید، DNS باید دامین را تبدیل به IP سایت کند تا دسترسی برقرار شود.فرق دامنه با URL چیست ؟!کلمه URL مخفف عبارت Uniform Resource Locator هستش که به اصطلاح به آن آدرس سایت میگوییم اما فرق آن با دامین چیست ؟ فرق URL با دامین را با مثال براتون توضیح میدم برای مثال شما وقتی وارد سایت دیجی کالا میشوید و وارد بخش تخفیفات ویژه میشوید لینک مرورگر شما تبدیل میشود به https://www.digikala.com/promotion-center/ یا نسبت به هر بخش این آدرس عوض میشود پس به طور کل دامین سایت میشود https://www.digikala.com/ اما وارد هر بخشی از سایت بشویم URL مورد نظر تغییر میکند فک کنم متوجه شده باشید ؛ یعنی به طور کل تمامی صفحات دیجیکالا URL های زیر مجموعه دامین اصلی هستند .اجزای تشکیل دهنده یک URL چیست؟!ساب دامینساب دامین یا زیردامنه، چیزی است که قبل از نام دامنه می‌آید و گاهی از دامنه اصلی مستقل است.که میتواند WWW معروف که مخفف World Wide Web باشد یا میتواند Blog نیز باشد .پروتکل Httpsپروتکل https مثل یک تونل بزرگ است که اطلاعات از طریق آن بین کامپیوترها جابه‌جا می‌شود. برای همین وقتی آدرس سایت‌ها را وارد می‌کنید، اول اسم تونل اطلاعاتی یعنی همین https می‌آید و سپس اطلاعات ازین تونل رد میشود و سپس به سایت مورد نظر میرودنام دامنهبعد از تایپ کردن WWW و گذاشتن نقطه نام سایت شما ،یا همان دامین قرار میگیرد و نکته اینجاست که دامین ها یونیک و منحصر به فرد هستند و نمیتوان از دامین تکراری استفاده کرد همچنان در دامین فقط میتوان از "-" استفاده کرد.پسوند دامینو در آخر پسوند دامین وارد میشود مانند Com ،Net،Org و در ایران نیز پسوند Ir ، جز پرکاربرد ترین و پر مصرف ترین پسوند ها هستند .هاست چیست ؟ و چه کاربردی دارد؟! یادتونه میگفتم دامین مثل آدرس خانه شما میمونه؟ هاست الان دقیقا زمین خود اون خانه است که گفتیم ؛جالبه نه ؟! حالا ما یک سری شرکت داریم که نقش مشاور املاک رو اجرا میکنند و سرویس های هاستینگ ارائه میدن ولی بیاید یک تعریف دقیق و تخصصی از هاست داشته باشیم :هاست (Host) بخشی از یک سرور است که اطلاعات سایت شما روی آن قرار می‌گیرد. در فضای هاست می‌توانید صفحات وبسایت، تصاویر، عکس‌ها، و انواع فایل‌ها را وارد کنید. به این ترتیب، کاربران در سرتاسر جهان، می‌توانند از سایت‌تان بازدید کنند. (راستی به هاست، میزبانی وب هم می‌گویند ) حالا حتما سوال پیش می‌آید سرور چیست ؟ در ادامه با من باشید .سرور چیست و چه فرقی با هاست دارد؟سرور نوعی کامپیوتر است؛ اما با عملکرد خاص خودش! این دستگاه‌های قدرتمند از قطعات سخت‌افزاری‌ای تشکیل شده‌اند که بالاترین قدرت پردازش را دارند. از سرورها برای کارهایی مثل میزبانی وب یا همان هاستینگ استفاده می‌شود. به دلیل همین کاربرد مهم، این دستگاه‌ها باید همیشه روشن، متصل به اینترنت و در دسترس باشند.تا الان باید متوجه شده باشید که فرق هاست و دامین چیست اما اگر متوجه نشدید من دوباره توضیح میدم خدمتتون ؛ پس به تعریف زیر خوب دقت کنید. یک سرور میزبان وب، فضای خود را تقسیم می‌کند و هر بخش آن را در اختیار یک مشتری قرار می‌دهد. وقتی شما هاست اجاره می‌کنید، صاحب فضای کوچکی از این سرور می‌شوید. از یک تا ۵۰۰ سایت (در شرایط خاص) می‌توانند همزمان از سرور به صورت مشترک استفاده کنند! برای درک بهتر،  سرور را ساختمان بزرگی تصور کنید که یک واحد کوچک از آن را به عنوان هاست اجاره می‌کنید.لوکال هاست چیست ؟لوکال هاست همان کامپیوتر شماست که به عنوان سرور می‌تواند استفاده شود. وقتی شما یک آدرس IP را داخل کامپیوترتان صدا می‌زنید، در حال وصل شدن به یک کامپیوتر دیگر در شبکۀ اینترنت هستید. اما اگر آدرس 127.0.0.1 را صدا بزنید، انگار که به لوکال هاست (کامپیوتر خودتان) وصل شده‌اید . حالا کاربرد آن چیست ؟ اگر بخواهید یک اپلیکیشن یا سایتی را راه اندازی کنید برای شروع و تست میتوانید از آن استفاده کنید .انواع هاست و ویژگی های آنها ما چندین نوع هاست داریم که بر اساس ویژگی هایشان به چند دسته تقسیم میشوند که در ادامه خواهیم دیدهاست اشتراکیهاست اشتراکی که از روی اسمش پیداست به صورت اشتراکی تقسیم میشود یعنی یک سرور را تصور کنید که به چندین قسمت تقسیم شده هر کدام ازین قسمت ها یک اشتراک محسوب میشود که ویژگی این نوع هاست این است که قیمت مناسب تری دارد و اقتصادی تر است.هاست اختصاصی هاست اختصاصی اینطور است که یک سرور برای فقط یک مشتری در نظر گرفته میشود و معمولا برای سایت های پر بازدید مورد استفاده است و قیمت این نوع هاست گرانتر اما سرعت و حجم یا همان disk بیشتری در اختیارتان قرار میگیرد (در ادامه برایتان توضیح میدهیم که disk یا سرعت چه تاثیری دارند ).هاست یا سرور مجازی(VPS) هاست مجازی (یا سرور مجازی که اکثراً آن را با نام VPS می‌شناسیم) چیزی بین هاست اختصاصی و اشتراکی است! در این سرویس، فضای یک سرور به کمک تکنولوژی hypervisor تقسیم‌بندی می‌شود.این نوع هاست توضیحات اختصاصی خودش را دارد که در صورتی که علاقه داشته باشید میتوانید راجب این هاست بیشتر تحقیق کنید.هاست ابری (Cloud Web Hosting)و در آخر آخرین تکنولوژی هاستینگ وب و فرق آن این است که در ورژن های قبل یک سرور هاست سایت شما بود اما در این صورت چندین سرور به صورت همزمان میزبانی وبسایت شما را انجام میدهند و ویژگی این نوع هاست این هستش که اگر یکی از سرور ها دچار مشکل شد سرور دیگر همزمان فعال است و قطعی وبسایت شما به صفر میرسد.ویژگی های هاست های مختلفپهنای باندبرای اینکه تعداد زیادی از کاربران بتوانند همزمان یک سایت را ببینند به پهنای باند بالا نیاز است. پهنای باند درست مثل یک اتوبان است. هر چقدر این اتوبان عریض‌تر باشد خودروهای بیشتری از آن حرکت می‌کنند و کسی پشت ترافیک نمی‌ماند.فضا یا حجم هاست (Disk space)فضای هاست همان حجمی است که در اختیار شما قرار می‌گیرد تا اطلاعات سایت خود را روی آن قرار دهید.این مفهوم درست مثل کارت حافظه موبایل یا هارد دیسک کامپیوتر است. طبیعتا هرچه فضای هاست بیشتر باشد، می‌توان اطلاعات بیشتری روی آن قرار داد.ویژگی های دیگری مانند افزودن دامنه (Addon Domain) ، کنترل پنل (Control panel) ، بکاپ گیری (Backup) ، آپ تایم (uptime) که به صورت جداگانه میتوانید درباره آن ها تحقیق کنید.سیستم عامل های هاست هاو در آخر هر هاستی یک سیستم عامل دارد میتواند سیستم عامل آن ویندوز یا لینوکس باشد که هر کدام آن ها ویژگی خاص خود را دارند و کاملا مرتبط به زبانی که وبسایت با آن توصعه داده شده است ربط دارد و اینکه بگوییم کدام سیستم عامل هاست بهتر است اشتباه است چون بر اساس زبان برنامه نویسی و مباحث تخصصی تر بررسی میشود .نکته آخر با توجه به تعریف هاست میتوان گفت شما با توجه به خواسته های مورد نظرتان باید شرکت ارائه دهنده خدمات هاستینگ خود را انتخاب کنید و قبل از آن شرکت را مورد بررسی قرار دهید برای مثال یک شرکت امنیت بالا تری را برای سرور های خود ایجاد کرده یا یک شرکت پشتیبانی بهتری ارائه بدهد ، این وظیفه شماست که با توجه به نیاز هایتان شرکت مورد نظر را انتخاب کنید . امیدوارم از خوندن این مقاله لذت برده باشید؛ موفق باشید.Mohammad Mehdi JamalpourMohammad Mehdi JamalpourWed, 10 Aug 2022 22:26:10 +0430https://virgool.ir/@mohamadmehdi.jml/فرانت-اند-یا-ویترین-یک-فروشگاه-زنجیره-ای-spkyqn0yfqma فکر کنید برای خرید میخواهید به یک فروشگاه بروید، شما دوست دارید کم ترین زمان و با خیالی اسوده و راحت خرید کنید و موقع خرید در به در دنبال اجناس مختلف در هر ردیف و هر طبقه نگردید درسته ؟!پس فروشگاهی رو انتخاب میکنید که منظم ، مرتب ، دسته بندی شده و کارمندان خوش مشربی داشته باشه .یک سوال پیش میاد ؟ این قضیه چه ربطی به فرانت اند یا ظاهر وبسایت دارد ! درسته حق با شماست من براتون در ادامه توضیح میدم.فرانت اند (front-end) چیست ؟هر وبسایتی که ما استفاده میکنیم از دو بخش فرانت اند (Front-end) و بک اند (Back-end) تشکیل میشود که به زبان ساده فرانت اند سایت ما دقیقا مثل ویترین یک فروشگاه زنجیره ای هستش و بک اند ما قسمت انبار و پشت پرده ی فروشگاه ما ، دیدید چقدر ساده بود! حتما برایتان پیش امده که موقع استفاده از یک وبسایت گیج شده اید و چیزی که نیاز داشتید را به سختی پیدا کردید ، دقیقا مثل فروشگاه درهم ریخته و نامرتب ، فک کنم الان متوجه شدید که چرا فرانت اند یک سایت رو با ویترین یک فروشگاه مقایسه کردم ؛ پس ما موقع استفاده از یک وبسایت نیز دوست داریم تمامی امکانات سایت مورد نظر در کمترین زمان و راحت ترین روش در اختیار ما که کاربر سایت باشیم قرار بگیرد . . . .ابزار مورد نیاز برای تشکیل فرانت اند یا ظاهر سایت :ما برای تشکیل ظاهر وبسایت نیاز به چندین ابزار مختلف داریم که بخش بخش با آن ها و کاربردشون آشنا میشیم ؛ ما به طور پایه نیاز به 3 ابزار که به ترتیب :زبان نشانه گذاری "HTML" که مخفف شده ی "Hyper Text Markup Language" هستش و وظیفه تشکیل ساختار اولیه ی وبسایت را بر عهده دارد .زبان استایل دهی "CSS" که مخفف شده ی "Cascading Style Sheets" هستش و وظیفه استایل دادن یا به اصطلاح رنگ و لعاب دادن به وبسایت ما را دارد .زبان برنامه نویسی " javascript " که بر خلاف دو زبان قبلی یک زبان برنامه نویسی هستش که در وبسایت نقش پویا سازی یا به اصطلاح داینامیک کردن وبسایت ما را دارد.حق میدم که الان شاید یکمی نا مفهوم شده باشه براتون اما بزارید با یه عکس و توضیح کارو براتون اسونتر کنم.فک کنم با دیدن عکس یکم ساده تر شده باشه براتون اما بزارید براتون توضیح بدم ؛ زبان نشانه گذاری ما که HTML نام داشت نقش اسکلت یک بدن یا اسکلت سایت ما رو اجرا میکنه که نه ظاهر و شکل مناسبی داره نه میتونیم بهش بفهمونیم که کاری برای ما انجام بده پس در ابتدا نیاز داریم اسکلت سایتمون رو زیبا کنیم که در این مرحله از زبان استایل دهی CSS کمک میگیریم که به کمک اون میتونیم ظاهر و رنگ و لعاب ببخشیم به اسکلت وبسایتمون ، در این مرحله ما اسکلت و ظاهر وبسایتمون آمادست اما نیاز دارید به یک زبانی که بتواند خواسته های مارو بفهمه و نسبت به خواسته های ما کاری انجام بده و سایتمون رو پویا کنه و خواسته های مارو برآورده کنه در این نقطه زبان برنامه نویسی javascript ظاهر میشود و خواسته های مارا برآورده میکند.آخرین نکته :شما در حال حاضر با تکنولوژی های مورد نیاز و ابتدایی ایجاد صفحات فرانت اند یک وبسایت آشنا شدید ولی اگر بیشتر علاقه مند شدید به دانستن بیشتر در این حوزه بهتون پیشنهاد میدم راجع به فریم ورک های جاوااسکریپت و انواع آن ها تحقیق کنید اطلاعات بیشتری در این حوزه حتما پیدا میکنید ؛ موفق باشید. Mohammad Mehdi JamalpourMohammad Mehdi JamalpourMon, 08 Aug 2022 19:43:29 +0430