نوشته های فاطمه تیرانی

طراحی صفحه وب با فلکس باکس

فاطمه تیرانی — Tue, 16 Aug 2022 10:14:29 +0430

مفهوم فلکس باکس (Flex Box) یا Flexible Box یک مدل برای لایه بندی صفحات وب در طراحی سایت می باشد که به شما کمک میکند بدون استفاده از float و یا positioning به طراحی صفحات انعطاف پذیر و در نهایت واکنشگرا بپردازید.فلکس باکس یک زبان جداگانه نیست و زیر مجموعه ای از css است.بنابراین نیازی به دانلود کردن هیچ چیز اضافه ای نیست و به کمک همان سی اس اسی که دارید می توانید از فلکس باکس برای طراحی تان استفاده کنید. اگر با لایه بندی صفحات آشنا باشید حتما با ایرادات موجود در ویژگی float که به کمک خاصیت clear fix حل می شود مواجه شده اید.فلوت و فلکس باکس چه فرقی باهم دارند؟در عکس بالا سمت چپ زمانی است که شما از فلوت استفاده می کنید.عکس گویای این است که هنگام استفاده از فلوت المان ها انگار به صفحه مانیتور تان چسبیده است .بجز آن قسمتی که از فلوت استفاده کردیده اید, در واقع حالت سه بعدی به خودش میگیرد و شما می توانید آن را به راحتی جا به جا کنید. دقیقا در عکس قابل مشاهده است که المان های های کمرنگ چسبیده به صفحه هستند ولی آن قسمت پر رنگ تر حالت شناور به خود گرفته است.اما در عکس سمت راست که فلکس باکس را نشان میدهد المان ها همگی به صفحه چسبده اندو حالت شناور ندارند ولی ما می تواینم به راحتی آن ها را جا به جا کنیم . چرا باید سایت واکنشگرا طراحی کنیم؟ همانطور که خودتان بهتر می دانید امروزه در این عصر از تکنولوژی هر ماه و هر هفته و بلکه هر روز یک گوشی جدید یا یک تبلت جدید و... در هر صورت یک دستگاه جدید تولید میشود و خب قاعدتا در سایز های مختلفی هستند و ما به عنوان یک توسعه دهنده و طراح وب باید در صدد این برآییم که سایتی طراحی کنیم که بیشترین سازگاری را با دستگاه های موجود داشته باشد چون ما نمی توانیم برای همه دستگاه های موجود سایت رسپانسیو طراحی کنیم بنابراین بالاترین بازدهی مد نظر طراح باید قرار بگیرد.چگونه از فلکس باکس استفاده کنیم؟فلکس باکس از دو قسمت کلی تشکیل شده است.همانند عکس زیر , یک قسمت از flex container که همان مخزنی است که آیتم های آن به صورت فلکس قرار می گیرد و یک قسمت آیتم های آن که به صورت فلکسیبل هستند.کد مربوط به عکس بالا در html به صورت زیر خواهد بود:

Item1

Item2

Item3

Item4

برای فلکسیبل کردن آیتم ها در css می نویسیم:.flex-container {display: flex;}فلکس باکس چه ویژگی هایی دارد؟فلکس باکس 5تا ویژگی مهم دارد که با هم به بررسی آن ها می پردازیم:خاصیت دایرکشن:دایرکشن به معنی جهت می باشد ما با کمک فلکس باکس می توانیم آیتم هایی که در صفحه داریم را سازمان بندی کنیم.اگر بخواهیم آیتم هایمان را به صورت ردیفی یا ستونی بگذاریم می نویسیم:.flex-container { flex-direction: row / culomn / row-revers / culomn-revers; }خاصیت اوردر(order):گاهی اوقات ما می خواهیم به المان مان این الویت را بدهیم که اول نمایش داده بشود برای اینکه این دستور اعمال شود از order استفاده می کنیم.به المان مورد نظرمان همانند تصویر زیر دستور می دهیم تا در کدام جایگاه نمایش داده بشود.خاصیت wrap:به کمک این ویژگی می توان اجزا در صفحه را بسته بندی کرد. مثلا یک تکست در یک خط باشد یا در دو دو خط قرار بگیرد.در مثال زیر بسته بندی شدن آیتم ها را مشاهده می کنید.برای بر طرف کردن مشکل به وجود آمده در سمت چپ در کدهای css به صورت زیر عمل میکنیم.flex-container { display: flex; flex-wrap: wrap; }خاصیت alinging:در css برای اینکه یک جمله را به وسط صفحه بیاوریم از text-aling:center استفاده می کردیم یا برای وسط قرار دادن یا چپ و راست قرار دادن المان از فلوت رایت یا لف یا سنتر استفاده میکردیم اما با مشکلاتی مواجه می شدیم مثل clear fix و از این قبیل مشکلات .برای رهایی از این دردسر ها در فلکس باکس از خاصیت های تراز کردن یا alinging استفاده می کنیم.در زیر نحوه کد نویسی و نتیجه حاصل آن را مشاهده می کنیم..flex-container{ display: flex; justify-content: center/ flex-start / flex-end / space-between / space-around }این جابه جایی در justify-content به صورت افقی است .برای جا به جایی به صورت عمودی از aling-item استفاده میشود. نتایج در تصویر زیر آورده شده است..flex-container{ aling-item: center / flex-start / flex-end /stretch } اگه بخواهیم فقط یکی از این آیتم ها را بالا پاین کنیم چه کار باید بکنیم ؟خاصیت aling-selfبه ما این امکان را می دهد تا المان به صورت مجزا از باقی المان ها جا به جا شود.به تصویر زیر دقت کنید..item3{ aling-self: center / flex-start / flex-end /stretch/baseline ; }هامنطور که می بینید آیتم به صورت عمودی در حال تغییر است اگر بخواهید به صورت افقی آن را جا به جا کنید باید دستور زیر را به کانتیر آیتم خود بدهید..flex-container{ flex-direction: culomn; } .item3{ aling-self: center / flex-start / flex-end /stretch/baseline ; }خاصیت flex-grow: با این خاصیت می توانیم سایز آیتم ها را افزایش یا کاهش بدهیم.برای تغییر دادن اندازه هر کدام از المان ها میتوانیم از flex-grow استفاده کنیم. به تصاویر زیر دقت کنید.آیتم هایی که در کانتینر یعنی همان باکس بنفش به صورت فلکس قرار گرفته اند.به صورت دیفالت اندازه ای برابر با ایتم 1و3و4 دارند اما در آیتم 2 این اندازه بزرگ تر است در واقع با نوشتن کد زیر آیتم 2 اندازه اش مقداری می شود تا قسمت باقی مانده کانتینر را در بر بگیرد .item2{ flex-grow: 2; } در تصویر بالا قسمت اول حالت دیفالت نشان داده شده است وقتی مقدار 1 را به flex-growبدهیم تمامی آیتم ها به یک اندازه کل container را پر میکنند.حالا اگر به صرفا یکی از آیتم ها مقدار بیشتر از 1 بدهیم این آیتم متناسب با عددی که برای آن لحاظ شده است اصطلاحا کش (stretch) پیدا میکند.این مقدار نه پیکسل است نه em نه vh و نه واحد اندازه گیری دیگری .بلکه فقط یک میزان تناسب است.که به درستی در تصویر نشان داده شده است.برای درک بهتر در تصویر زیر مقدار 3 به flex-grow داده شده است.همانطور که مشاهده کردید فلکس باکس راه حل های خیلی ساده تری را برای طراحی سایت ارائه داده است.و در این مقاله سعی شد مهم ترین ویژگی های آن گفته شود.یادگیری فلکس باکس اصلا سخت نیست و بسیار به شما برای طراحی و به خصوص ریسپانیو کردن صفحه وب تان کمک می کند بنابراین سعی کنید در یادگیری مطالب مربوط به فلکس باکس کوشا باشید.

هاست و دامین چیست؟و چه تفاوتی با هم دارند؟

فاطمه تیرانی — Wed, 10 Aug 2022 18:36:52 +0430

برای ورود به دنیای اینترنت باید با هاست (HOST) و دامین (Domain) آشنا بشید.پس اول نگاهی به تعریفشان می اندازیم.domain دامین | Domain دامین یا دامنه در واقع همان آدرس سایتی است که در مرورگر خود برای ورود به سایت وارد می کنید.اگر تا به حال به آن دقت نکرده اید در عکس زیر میتوانید قسمت های مختلف آن را ببینید.بخش های مختلف دامنههمانطور که می بینید آدرس سایت از یک زیر دامنه (www)و دو بخش اصلی نام دامنه (Domain Name) و پسوند آن (Extension) تشکیل شده است. وقتی شخصی از شما آدرس سایتتان را می پرسد یا سوال می کند که چطور میتواند شما را در اینترنت پیدا کند شما نام دامنه خودتان را به ایشان اعلام می کنید.مثلا میگویید:google.comvirgool.ioyour-web.ir انتخاب نام دامنه بستگی زیادی به سلیقه شخصیتان دارد می توانید از اعداد و حروف هم استفاده کنید و در آخر با یک '' . '' نام دامنه را از پسوند آن جدا کنید.تمامی نام های دامنه منحصر به فرد هستند.یعنی که از یک نام دامنه برای دو وب سایت استفاده نمی شود و از هر نام دامنه در دنیا فقط یکی وجود دارد. اما چه کسی روند ثبت دامنه را کنترل می کند؟روند ثبت دامنه فراتر از ثبت کننده های نام دامنه می باشند. در حقیقت یک شرکت اینترنتی به نام ICANN بر روند ثبت نام دامنه ها در دنیا نظارت دارد.هاست | Hostحالا که با مفهوم دامنه آشنا شدیم لازم است بدانیم هاست چیست؟قطعا برای اینکه سایت شما به راحتی در دسترس همه کاربران قرار بگیرد نیاز به منبعی برای ذخیره شدن دارد. این منبع ذخیره باید مدام به اینترنت متصل باشه تا کاربران در هر ساعت از شبانه روز بتوانند به آن دسترسی داشته باشند. به این منبع ذخیره هاست میگویند. هاست به معنی میزبان است.هاستینگ یا میزبانی وب ,کامپیوتر یا سروری است که اطلاعات صفحه وب شما در آن قرار میگیرد و اکثرا شرکت هایی کامپیوتر های خود را در این راستا در اختیار سایت شما قرار می دهند.هاست علاوه بر ذخیر سازی خدمات دیگری هم ارائه می دهد.از جمله:ثبت دامنه: خیلی از میزبان های وب خدمات ثبت دامنه را نیز ارائه می دهند بنابراین می توانید دامنه ی مورد نظر خود را از یک شرکت خریداری کنید و مدیریت آن را نیز توسط همان شرکت انجام دهید.ساخت وب سایت: برخی از ارائه دهندگان میزبانی وب با استفاده از ابزار های ویرایش وب خدمات ساخت وب را نیز برای کاربران انجام می دهند.میزبانی ایمیل: خدمات میزبانی ایمیل پشتیبانی از سخت افزار ها و نرم افزار های لازم برای سرویس دهی وب پس دیتا سنتر چیست؟همانطور که گفتیم میزبانی وب یا هاست وظیفه ذخیره کردن اطلاعات صفحه وب شما را به عهده دارد.اما دیتا سنتر یا همان مرکز داده میتواند یک خانه یا یک اتاق یا یک ساختمان بزرگ مجهز به تهویه , منبع تغذیه اضافی , مهار آتش و دستگاه های امنیتی و... برای جاگذاری سرورها باشد.هاست و دامین چه تفاوتی با هم دارند؟با اینکه هاست و دامنه دو عنصر به هم پیوسته هستند اما با یکدیگر متفاوت اند.دامنه یک سری حرف یا عدد یا علائم اینترنتی است که به موتور جستوجو گر می فهماند تا کجا باید جست و جو کند تا وب سایت مورد نظر شما پیدا شود.هاست فضایی است که اطلاعات صفحه وب شما مربوط به آدرس مورد نظرتان در خود نگهداری می کند.برای فهم بهتر مثلا یکی از کتاب خانه های شهرتان را در نظر بگیرید. کتاب خانه فضایی است که برای نگهداری کتاب ها که همان عنصر های سایت به شمار می روند با یک آدرس مشخص.پس فضای کتاب خانه برابری می کند با میزبانی وب یا هاست و ادرس کتاب خانه شهرتان همان ادرس صفحه وب یا دامنه است.با ینکه دو معقوله هاست و دامین از هم مستقل اند اما به هم پیوسته و بسیار نزدیک هستند. بدیهی است اگر آدرس به درستی در مرورگر وارد نشود صفحه وب موردنظرتان پیدا نمی شود و در مقابل بدون هاست هیچ وب سایتی برای نمایش وجود نخواهد داشت.

فرانت اِند و مهندسی معماری!!

فاطمه تیرانی — Mon, 08 Aug 2022 19:56:25 +0430

فرانت اِند:شما وقتی وارد مکانی میشود, چه خانه باشد چه ساختمان تجاری یا یک استادیوم در وهله اول به در و دیوار آن مکان نگاه می کنید مخصوصا اگر یک مکان مجلل باشد, اولین چیزی که به ذهنتان می رسد این است که مهندس معمار حرفه ای آن را طراحی کرده است و در پشت پرده مهندس عمران به عنوان یک مکمل به ساخته شدن آن مکان کمک کرده است در طراحی سایت هم همچین اتفاقی میوفتد فرانت کار(مهندس معمار) عناصری که در صفحه وب میبیند را به کمک کد نویسی طراحی می کند و بک اِند کار (مهندس عمران) به قابل دسترسی شدن آن کد ها برای همه کمک میکند.بنابراین فرانت اند یا Front End، به بخش قابل مشاهده‌ی یک وب سایت یا نرم افزار توسط کاربران می‌گویند. فرانت اند، کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آن‌ها نمایش می‌دهد تا بتوانند به راحتی از بخش‌های مختلف سایت استفاده کنند. در این بخش، فرم‌های ورودی اطلاعات، صداها، تصاویر، ویدئوها و به صورت کلی هر چیز دیگری که برای کاربر قابل درک باشد، قرار می‌گیرد.زبان های برنامه نویسی فرانت اِند:زبان های برنامه نویسی فرانت اِند شامل HTML ,CSS, JavaScript می شود.به اختصار به بررسی هر کدام از این زبان ها می پردازیم.زبان HTML:این زبان مانند تیر و ستون های یک ساختمان نیمه کاره است که هیچ زیبایی ندارد.درواقع اسکلت اصلی تمام سایت ها است.HTML یا(Hyper Text Markup Language)یک زبان بسیار ساده وپیش نیاز ورود به دنیای طراحی وب است.این زبان هیچ ظاهری از خود ندارد و به کمک زبان CSS شکل و شمایل می گیرد.زبان CSS:طبیعتا خانه بدون گچ کاری سقف و رنگ آمیزی و اضافه کردن عنصر های دیگر هیچ زیبایی نخواهد داشت سند html هم همینطور بنابراین برای زیبا کردن عناصر موجود در صفحه از زبان CSS یا(Cascading Style Sheet)کمک گرفته می شود که یک زبان طراحی برای استایل دهی المان های سایت می باشد.در واقع مشخصات ظاهری سند html را مثل رنگ , فونت , تصاویر پس زمینه,... به دلخواه می توان تغییر داد.زبان جاوا اسکریپت: با استفاده از این زبان می توان سایت طراحی شده به کمک HTML , CSS را از حالت استاتیک خارج کرد و به صورت دلخواه عناصر صفحه را به انیمیشن تبدیل کرد. اما در آخر باید اشاره نمود که زبان جاوا اسکریپت فقط محدود به طراحی سایت نمی شود و در برنامه نویسی موبایل و دسکتاپ نیز استفاده می شود . بنابراین به سبب این انعطاف پذیری بسیار مورد توجه برنامه نویسان قرار می گیرد.