صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
مقالات
۸۹ مقاله
Filterها در CSS
تا اینجا با Transform ، Transition و Animation آشنا شدیم و یاد گرفتیم چگونه ظاهر و رفتار عناصر صفحه را تغییر دهیم. اما گاهی اوقات لازم است خودِ ظاهر یک تصویر یا عنصر را تغییر دهیم؛ مثلاً یک تصویر را سیاه‌وسفید کنیم، کمی تار کنیم، روشن‌تر یا تیره‌تر کنیم، رنگ آن را تغییر دهیم یا برای آن سایه‌ای متناسب با شکل واقعی تصویر ایجاد کنیم. CSS برای این کار ویژگی بسیار کاربردی filter را در اختیار ما قرار می‌دهد. با استفاده از Filterها می‌توانیم افکت‌های گرافیکی مختلفی را مستقیماً در مرورگر ایجاد کنیم و روی تصاویر، پس‌زمینه‌ها، متن‌ها، Borderها و سایر عناصر اعمال کنیم. این افکت‌ها حتی می‌توانند همراه با transition یا animation استفاده شوند.
Flexbox در CSS
تا اینجا بیشتر ویژگی‌های CSS را برای کنترل ظاهر عناصر یاد گرفتیم؛ از رنگ و فونت و Box Model گرفته تا Position، Transform، Transition، Animation و Filter. اما یک سؤال مهم باقی می‌ماند: چطور عناصر صفحه را به شکل حرفه‌ای در کنار یکدیگر قرار دهیم؟ مثلاً فرض کنید می‌خواهیم سه کارت را کنار هم قرار دهیم، منوی سایت را به صورت افقی بسازیم، یک دکمه را دقیقاً وسط صفحه قرار دهیم یا محتوای داخل یک کارت را در دو طرف آن پخش کنیم. در گذشته برای بسیاری از این کارها از float ، position ، Marginهای مختلف و تکنیک‌های پیچیده استفاده می‌شد. اما Flexbox بسیاری از این مشکلات را بسیار ساده‌تر کرده است. Flexbox یک سیستم Layout یک‌بعدی در CSS است که برای قرار دادن عناصر در یک ردیف یا ستون ، مدیریت فضای آزاد و تراز کردن عناصر طراحی شده است. در Flexbox عناصر می‌توانند متناسب با فضای موجود رشد کنند یا کوچک شوند.
Grid Layout در CSS
در مقاله قبل با Flexbox آشنا شدیم؛ ابزاری قدرتمند برای ساخت Layoutهای یک‌بعدی که در چیدمان عناصر در یک ردیف یا یک ستون بسیار کاربردی است. اما بسیاری از Layoutهای واقعی وب‌سایت‌ها فقط به یک محور محدود نمی‌شوند. برای مثال، یک صفحه داشبورد ممکن است هم‌زمان چند ردیف و چند ستون داشته باشد، یا یک فروشگاه اینترنتی نیاز داشته باشد محصولات را در قالب یک شبکه منظم نمایش دهد. اینجاست که CSS Grid Layout وارد می‌شود. Grid یکی از مهم‌ترین سیستم‌های Layout در CSS است که برای ساخت چیدمان‌های دو‌بعدی بر اساس ردیف و ستون طراحی شده است. با Grid می‌توانیم عناصر را در سلول‌ها قرار دهیم، چند سلول را با هم ترکیب کنیم، Layoutهای پیچیده بسازیم و حتی ساختار کلی یک صفحه را با نام‌گذاری بخش‌ها تعریف کنیم.
طراحی Responsive در CSS
امروزه کاربران با دستگاه‌های بسیار متنوعی وارد وب‌سایت‌ها می‌شوند؛ از گوشی‌های کوچک و تبلت گرفته تا لپ‌تاپ، مانیتورهای بزرگ و حتی نمایشگرهای بسیار عریض. بنابراین نمی‌توانیم یک صفحه وب را فقط برای یک اندازه صفحه طراحی کنیم و انتظار داشته باشیم در تمام دستگاه‌ها ظاهر مناسبی داشته باشد. Responsive Web Design یا طراحی واکنش‌گرا روشی برای طراحی صفحات وب است که باعث می‌شود ساختار، اندازه، فاصله‌ها، تصاویر و سایر بخش‌های صفحه متناسب با فضای موجود تغییر کنند. به عبارت ساده‌تر، صفحه باید خودش را با محیطی که در آن نمایش داده می‌شود تطبیق دهد.
Media Query در CSS
در مقاله قبل با مفهوم Responsive Design آشنا شدیم و دیدیم که یک وب‌سایت باید بتواند خودش را با اندازه‌های مختلف صفحه تطبیق دهد. برای رسیدن به این هدف، CSS ابزارهای مختلفی مانند Flexbox، Grid، واحدهای نسبی، clamp() و minmax() را در اختیار ما قرار می‌دهد. اما گاهی Layout به تغییرات مشخصی نیاز دارد؛ مثلاً در دسکتاپ منوی کامل نمایش داده شود، در موبایل فقط یک دکمه منو دیده شود، یا یک بخش که در دسکتاپ دو ستون دارد در موبایل به یک ستون تبدیل شود.
طراحی RTL با CSS
وقتی برای زبان‌هایی مانند فارسی یا عربی وب‌سایت طراحی می‌کنیم، تنها تغییر جهت متن از چپ به راست به راست به چپ کافی نیست. جهت صفحه روی نحوه قرارگیری متن، فاصله‌ها، Layout، Navigation، فرم‌ها، آیکون‌ها، جدول‌ها و حتی بعضی از رفتارهای ظاهری عناصر تأثیر می‌گذارد. به همین دلیل، طراحی یک سایت فارسی باید از ابتدا با در نظر گرفتن RTL یا Right-to-Left انجام شود. در این مقاله یاد می‌گیریم چگونه یک Layout استاندارد راست‌به‌چپ بسازیم، چه تفاوتی میان direction و text-align وجود دارد، چرا استفاده از ویژگی‌های Logical CSS اهمیت زیادی دارد و چگونه یک صفحه واقعی فارسی مانند سایت «بنو سرویس» را به شکل اصولی RTL کنیم.
استفاده از فونت‌های فارسی در وب
در طراحی یک وب‌سایت فارسی، فونت فقط یک عنصر تزئینی نیست؛ بلکه بخش مهمی از تجربه کاربری و هویت بصری سایت است. انتخاب فونت نامناسب می‌تواند باعث شود متن‌ها سخت خوانده شوند، فاصله خطوط نامناسب باشد، تیترها ظاهر ضعیفی داشته باشند یا حتی ساختار کلی صفحه غیرحرفه‌ای به نظر برسد. از طرف دیگر، استفاده صحیح از فونت در وب فقط به نوشتن font-family محدود نمی‌شود. اگر بخواهیم یک فونت فارسی اختصاصی را در پروژه استفاده کنیم، باید با @font-face ، فرمت فونت، وزن‌های مختلف، font-display ، Fallback Font، اندازه متن، line-height و عملکرد بارگذاری فونت آشنا باشیم.
آشنایی با جاوااسکریپت و کاربردهای آن
اگر به‌تازگی وارد دنیای طراحی و برنامه‌نویسی وب شده‌اید، احتمالاً نام جاوااسکریپت را زیاد شنیده‌اید. جاوااسکریپت یکی از مهم‌ترین زبان‌های برنامه‌نویسی در دنیای وب است و به ما اجازه می‌دهد صفحات وب را از حالت ثابت خارج کنیم و به آن‌ها تعامل، منطق و رفتار پویا اضافه کنیم. در HTML ساختار صفحه را ایجاد می‌کنیم، با CSS ظاهر آن را طراحی می‌کنیم و با جاوااسکریپت می‌توانیم رفتار صفحه را کنترل کنیم. برای مثال، می‌توانیم با کلیک کاربر روی یک دکمه، متنی را تغییر دهیم، یک منو را باز کنیم، اطلاعات یک فرم را بررسی کنیم یا بدون بارگذاری مجدد صفحه با یک سرور ارتباط برقرار کنیم.
متغیرها و انواع داده در جاوااسکریپت
در مقاله قبل با جاوااسکریپت آشنا شدیم و یاد گرفتیم که این زبان چه کاربردی در توسعه وب دارد. همچنین اولین کد جاوااسکریپت خود را اجرا کردیم و با دستورهایی مانند console.log() و alert() آشنا شدیم. حالا وقت آن است که یکی از مهم‌ترین مفاهیم پایه در برنامه‌نویسی را یاد بگیریم: متغیرها. تقریباً در هر برنامه‌ای لازم است اطلاعاتی را در حافظه نگهداری کنیم. برای مثال ممکن است بخواهیم نام کاربر، سن، قیمت یک محصول، وضعیت ورود کاربر یا نتیجه یک محاسبه را ذخیره کنیم. در جاوااسکریپت برای نگهداری این اطلاعات از Variable یا متغیر استفاده می‌کنیم. در این مقاله از پایه یاد می‌گیریم متغیر چیست، چگونه متغیر تعریف کنیم، تفاوت let و const چیست، انواع داده در جاوااسکریپت کدام‌اند و چگونه نوع داده یک مقدار را تشخیص دهیم .
عملگرها در جاوااسکریپت
در مقاله قبلی با متغیرها و انواع داده در جاوااسکریپت آشنا شدیم و یاد گرفتیم چگونه اطلاعات مختلف مانند متن، عدد و وضعیت‌های true و false را در متغیرها ذخیره کنیم. اما ذخیره کردن اطلاعات به‌تنهایی کافی نیست. در یک برنامه واقعی باید بتوانیم روی این اطلاعات محاسبه انجام دهیم، مقادیر را با یکدیگر مقایسه کنیم، شرایط مختلف را بررسی کنیم و چند عبارت منطقی را به هم متصل کنیم . برای انجام این کار در جاوااسکریپت از Operator یا عملگر استفاده می‌کنیم.