آموزش ساخت وب سایت یک صفحه ای [بایگانی]

ho3inamini

دوشنبه 09 دی 1392, 23:13 عصر

سلام دوستان
کسی میتونه راهنمایی کنه که نحوه ساخت یک سایت تک صفحه ای مثل این سایت چه جوریه؟
http://demo.smartaddons.com/#sj-onepage

mahdavi1456

چهارشنبه 11 دی 1392, 10:21 صبح

دقیقا مثل این اگه بخواید یه کم کارتون سخت میشه. جی کوئری به شدت استفاده شده. یه قسمت رو هم دیدم با Ajax زده بود. بیشتر هم با توابع scroll جی کوئری کار کرده. برای شروع پیشنهاد میدم این دسته توابع رو مطالعه کنید.

ho3inamini

چهارشنبه 11 دی 1392, 22:46 عصر

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

jalil_gh

پنج شنبه 12 دی 1392, 11:03 صبح

اگه منظورتون همون single page باشه که برای ساخت اینطور سایت‌ها اکثرا از فریم‌ورک های جاوااسکریپت مثل backbonejs یا angularjs و یا ... استفاده میشه. این فریم‌ورک‌ها یه جور امکان برنامه‌نویسی به صورت mvc در سمت کلاینت رو به ما میدن. اکثر این فریم‌ورکها امکاناتی برای مدل سازی داده ها به ما میدن و راهکارهایی برای ارتباط این داده‌ها به view. بعضی‌هاشون به صورت درونی امکان ایجاد تمپلت در سمت کلاینت رو دارن. امکاناتی برای مدیریت url دارن. و ...
یه راه ساده برای ساخت همچین سایت‌هایی بدون استفاده از این فریم‌ورک‌ها میتونه به این صورت باشه که شما کل صفحه رو لود می‌کنید و قسمت‌هایی از اون رو مخفی می‌کنید. بعد هر وقت روی لینک خاصی کلیک شد می‌تونید قسمت فعلی رو مخفی کنید و قسمت جدیدی رو نشون بدید. این کارا رو راحت می‌تونید با جی‌کوئری انجام بدید.
سناریوی پیشرفته تر میتونه به این صورت باشه که شما قالب اصلی و صفحه اصلی سایت رو لود می‌کنید. بعد هر وقت روی یه لینکی کلیک شد چک می‌کنید که آیا صفحه مورد نظر با اون لینک هست یا نه. اگه بود که نشون می‌دید و اگه نبود با ایجکس لود می‌کنید و به صفحتون اضافه می‌کنید و نشونش میدید.

من این صفحه رو (http://www.yadsaz.ir/reading/) با backbonejs نوشتم. این فریم‌ورک یه امکانی داره به اسم router که شما می‌تونید با اون url رو مدیریت کنید. هر وقت روی یک لینک خاصی کلیک می‌کنید، url عوض می‌شه یه قسمت خاصی از صفحه آپدیت میشه. به این صورت شما می‌تونید یه صفحه خاص رو در یک حالت خاص بوکمارک کنید، از دکمه‌های back و forward مرورگر استفاده کنید و می‌تونید صفحه رو رفرش کنید.

یکی از مضراتی که این صفحات دارن اینه که گوگل یا بقیه، داده‌هایی رو که با ایجکس لود میشه رو نمیتونن ایندکس کنن. (البته خود گوگل راه‌کارهایی برای رفع این مشکل ارائه داده).