معرفی و دانلود کتاب طراحی‌های خلاقانه رابط کاربری وب سایت (HTML - CSS - jQuery)

معرفی کتاب طراحی‌های خلاقانه رابط کاربری وب سایت (HTML - CSS - jQuery)

کتاب طراحی‌های خلاقانه رابط کاربری وب سایت (HTML - CSS - jQuery) تالیف محمود خاوریان، روش‌هایی برای ساختن ده نوع رابط کاربری را آموزش می‌دهد. شما به صورت عملی از تگ‌های HTML و خصوصیات CSS استفاده می‌کنید و گام به گام درس‌ها و پروژه‌های گفته شده در کتاب را طراحی می‌کنید.

دلیل استفاده از کلمه خلاقانه در نام کتاب این است که به طور معمول برای آموزش انواع رابط کاربری در کتاب‌های آموزشی، ساده‌ترین فرم‌ها در نظر گرفته می‌شود اما در کتاب طراحی‌های خلاقانه رابط کاربری وب سایت (HTML - CSS - jQuery) انواع جذابیت‌های گرافیکی و جلوه‌های بصری برای ساخت رابط‌ها آموزش داده می‌شود.

درس‌های کتاب طراحی‌های خلاقانه رابط کاربری وب سایت (HTML - CSS - jQuery) شامل چه مباحثی است؟

در درس اول، شیوه ساختن یک کادر برای جست‌وجوی انیمیشن آموزش داده می‌شود. اگر روی ذره‌بین کلیک کنید کادر باز می‌شود. در این کادر متنی که باید جست‌وجو شود، بنویسید. آیکن ذره بین به یک دایره سبز رنگ بزرگ تبدیل می‌شود. قرار دادن علامت ضربدر به این معنی است که با کلیلک کردن روی آن باعث بسته شدن کادر می‌شود.

در درس دوم، شیوه ساختن یک فرم برای ورود یا ثبت نام آموزش داده می‌شود که دو بخش دارد. یک بخش دارای متن و تصویر است و بخش دیگر دو سربرگ به نام‌های REGISTER و LOGIN دارد. سربرگ REGISTER که برای ثبت نام فعال و قابل نمایش می‌شود که سه کادر متنی برای نام کاربری، ایمیل و کلمه عبور دارد. با کلیک کردن روی عبارت LOGIN فعال می‌شود و دو کادر متنی ایمیل و کلمه عبور ظاهر می‌شود.

در درس سوم کتاب روش ساختن یک منوی افقی واکنش گرا (Responsive) آموزش داده می‌شود. این منو در دستگاه‌های دارای پهنای صفحه نمایش کوچک تر از 768 پیکسل به صورت یک ایکون نمایش داده می‌شود. اگر روی آن کلیک کند منو به صورت یک لیست عمودی باز می‌شود. در دستگاه‌هایی که پهنای صفحه نمایش بیشتر از 768 پیکسل است منو عادی و به صورت افقی نمایش داده می‌شود.

در چهارمین درس کتاب طراحی‌های خلاقانه رابط کاربری وب سایت (HTML - CSS - jQuery) جزییات روش ساخت یک اسلایدر تصاویر را خواهید آموخت. اسلایدرها چند تصویر را در یک قاب نمایش می‌دهند و این امکان را ایجاد می‌کنند که با استفاده از دکمه تغییر کنند.

در درس پنجم می‌آموزید که چگونه یک لیست اعلانات (Notification) بسازید. احتمالا قبلا در سایت‌های مختلف نمونه‌هایی از این رابط کاربری را دیده اید. در این مورد آیکنی از یک زنگوله نمایش داده می‌شود، با کلیک کردن روی آن، لیستی از پیام‌های دریافت شده نشان داده می‌شود. کلیک کردن دوباره روی زنگوله باعث بسته شدن لیست می‌شود.

درس ششم ساختن یک Side bar (نوار کناری) را آموزش می‌دهد که برای نمایش آدرس شبکه‌های اجتماعی مهم کاربرد دارد. در سمت چپ صفحه آیکن شبکه‌های اجتماعی نشان داده می‌شود که با قرار دادن نشانگر موس روی آن‌ها، بزرگتر شده و نام شبکه نشان داده می‌شود.

در درس هفتم می‌آموزید که جدول قیمت ایحاد کنید. در این حالت چند کادر برای مقایسه کردن انواع کالاها یا خدمات نمایش داده می‌شود و کاربر می‌تواند آن‌ها را انتخاب کند و بخرد. هر ستون جدول یک آیکن، عنوان سرویس، هزینه سرویس و مشخصات آن را دارد. در پایان هر ستون هم یک دکمه برای خرید وجود دارد.

در درس هشتم نحوه ساخت یک گالری تصویر آموزش داده می‌شود. در این گالری، با استفاده از چند دکمه کاری می‌کنیم که تصاویر به صورت فیلتر شده نمایش داده شوند، به این صورت که دو دسته‌بندی برای تصاویر در نظر می‌گیریم: تصاویر گوشی و تصاویر دوربین.

درس نهم این کتاب به آموزش ساخت یک کارت پروفایل انیمیشنی اختصاص دارد. این کارت پروفایل حاوی یک تصویر، نام، نشانی و توضیحاتی درباره تخصص فرد دارای کارت پروفایل است. همچنین دکمه‌هایی برای ارسال پیغام و دنبال کردن در پایین کارت و سه آیکن برای دنبال کردن فرد در شبکه‌های اجتماعی نمایش می‌دهیم.

در دهمین و آخرین درس کتاب طراحی‌های خلاقانه رابط کاربری وب سایت (HTML - CSS - jQuery) نیز نحوه ساخت یک منوی جذاب انیمیشنی آموزش داده می‌شود. «منوی بازشو» یا «منوی گسترشی» به این صورت است که ابتدا به صورت یک کادر کوچک مستطیلی با گوشه‌های گرد، نمایش داده می‌شود. در صورتی که روی آن کلیک شود، منو به طور افقی باز شده و آیتم‌های آن، نمایش داده می‌شوند.

کتاب طراحی‌های خلاقانه رابط کاربری وب سایت (HTML - CSS - jQuery) مناسب چه کسانی است؟

این کتاب مناسب کسانی است که با HTML و CSS آشنا هستند اما تسلط و مهارت کافی برای استفاده از آن‌ها را ندارند.

در بخشی از کتاب طراحی‌های خلاقانه رابط کاربری وب سایت (HTML - CSS - jQuery) می‌خوانیم:

خاصیت position یکی از ویژگی‌های CSS است که برای تعیین موقعیت عناصر در صفحه وب مورد استفاده قرار می‌گیرد. یکی از مقادیر مهم این خاصیت، relative است. با استفاده از این مقدار، موقعیت عنصر نسبت به مکان فعلی تنظیم می‌شود. یکی دیگر از مقادیر این خاصیت، absolute است که برای دکمه و کادر متنی موجود در فرم از این مقدار استفاده خواهیم کرد تا نسبت به فرم موقعیت دهی شوند.

هنگامی‌که مقدار absolute را به ویژگی position یک عنصر اختصاص دهیم، می‌توانیم عنصر را نسبت به اولین عنصر پدری که مقدار relative دارد جابجا کنیم. اگر هیچ کدام از عناصر پدر این عنصر مقدار relative را نداشته باشند، عنصر نسبت به کل صفحه یا همان عنصر body تغییر موقعیت می‌دهد.

در کدهای بالا برای پهنای فرم از مقدار 270 پیکسل استفاده شده است. برای اینکه تغییرات روی عناصر فرم بهتر دیده شود، به طور موقت از این عدد استفاده کرده ام، اما بعداً مقدار آن را به 50 پیکسل تغییر خواهیم داد.

همچنین در پایان هم کاری می‌کنیم که با کلیک کردن روی دکمه جست‌وجو، پهنای فرم با مقدار 270 پیکسل تنظیم شود، یعنی پهنای فرم افزایش پیدا کند.

ارتفاع فرم با مقدار 50 پیکسل تنظیم شده است. خاصیت padding هم با 8 پیکسل تنظیم شده، بنابراین بین لبه‌های فرم و محتوا 8 پیکسل فاصله ایجاد می‌شود.

فهرست مطالب کتاب

مقدمه
قبل از شروع ...
درس اول: فرم جستجوی انیمیشنی
درس دوم: فرم ثبت نام و ورود به سایت
درس سوم: منوی افقی ریسپانسیو
درس چهارم: اسلایدر تصاویر
درس پنجم: لیست پایین افتادنی اعلانات سایت
درس ششم: نوار کناری حاوی آیکن شبکه های اجتماعی
درس هفتم: جدول قیمت ها
درس هشتم: گالری تصاویر با امکان فیلتر کردن تصاویر
درس نهم: کارت پروفایل انیمیشنی
درس دهم: منوی بازشوی انیمیشنی