پروژه نهایی دوره

پروژه شما باید کاملاً ریسپانسیو باشد و حداقل دو breakpoint  داشته باشد.

آیتم های مختلف صفحه بایستی  هنگام اسکرول شدن ظاهر شوند. توضیح بیشتر : لزومی به اعمال این افکت به تمامی بخش ها نیست ولی حداقل آیتم های دو بخش بایستی ابتدا نامرئی باشند و به محض اسکرول شدن به آن بخش ظاهر شوند و از آن به بعد ثابت بمانند. یعنی لازم نیست دوباره نامرئی شوند.

 

 

صفحه نهایی شامل این قسمت ها باید باشد:

                Navbar  : همیشه در قسمت بالای سایت باشد. با کلیک روی گزینه های مختلف آن به بخش مربوطه در صفحه هدایت شویم. این اسکرول شدن باید به نرمی انجام شود. در هنگام حرکت رو به پایین، اگر صفحه از بخش هدر پایینتر باشد، نوبار ناپدید می شود، و اگر کمی به سمت بالا اسکرول کنیم، نوبار دوباره ظاهر می شود.

در حالت دسکتاپ و لپ تاپ بایستی تمام گزینه ها در یک خط در نوبار نمایش داده شود ولی در حالت تبلت و موبایل بایستی گزینه ها مخفی شده با یک منوی بازشونده بتوانیم به گزینه ها دسترسی پیدا کنیم.

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

دکمه های نوبار شامل بخش های اصلی سایت در سمت چپ، و دکمه ورود و ثبت نام در سمت راست است که به صورت modal  باز می شوند. در این پنجره های modal  یک فرم برای ثبت نام/ ورود به سایت وجود دارد.

هدر : شامل یک عکس پس زمینه است که با اسکرول مکانش تغییر نمی کند.

 

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

 

گالری : یک ردیف عکس در سه یا چهار ستون که در حالت موبایل بایستی تک ستونه شود. با کلیک روی هر کدام از عکس ها، سایز اصلی (بزرگتر) عکس در یک پنجره ی modal  باز می شود.

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

عکس های ثابت پس زمینه : علاوه بر هدر سایت، دو عکس دیگر هم به همان صورت عکس ثابت بایستی در سایت قرار بگیرد.

ویدیو : یک ویدیو از آپارات باید داخل سایت قرار دهید. برای این کار استفاده از ویدئو html5  مجاز نیست، ویدیو باید از آپارات بارگذاری شود نه سایت شما. پنجره ی ویدئو باید ریسپانسیو باشد و با کوچک شدن عرض صفحه، کوچک شود.

ماشین حساب مهندسی : یک ماشین حساب مهندسی باید در صفحه اضافه شود. حداقل امکانات این ماشین حساب :

چهار عمل اصلی

لوگاریتم

توان

جذر

سینوس، کسینوس،تانژانت

دکمه های مموری (MC,MR,MS,M+,M-)

 

انتخابگر تاریخ شمسی (date picker)  : در این بخش دو فیلد موجود است که با دکمه ای که کنار هر کدام از این دو فیلد قرار دارد یک تقویم شمسی کوچک با فونت فارسی باز می شود و کاربر یک تاریخ را با کلیک روی روز آن انتخاب می کند تا تاریخ این روز در فیلد مربوطه نوشته شود.

نکته : بخش انتخاب تاریخ و ماشین حساب بایستی در حالت دسکتاپ در کنار هم و درحالت موبایل در زیر هم قرار داشته باشند.

برای این دو بخش می توانید از جاوا اسکریپت، جی کوئری و کتابخانه ها و پلاگین های دیگر هم استفاده کنید ولی سورس کد مربوطه بایستی در داخل پروژه یا درفایل های کنار آن باشد.

 

نقشه گوگل : در کنار قسمت تماس با ما باشد. به نقطه ای در تهران اشاره کند. وقتی موس روی آن است و اسکرول می کنیم، نباید تاثیری بر نقشه داشته باشد ( زوم نکند) زوم بایستی از طریق دکمه های مثبت و منفی امکان پذیر باشد.  امکان تغییر مرکز نقشه هم بایستی موجود باشد.

تماس با ما : فرم تماس با ما و بخش آدرس ها در کنار آن که در حالت موبایل زیر هم قرار می گیرند.

فوتر : شامل یک لینک به یک سایت دلخواه،  یک دکمه "بالا" برای اسکرول به بالای صفحه. این اسکرول باید به نرمی انجام شود و نه به صورت یک پرش.