وبسایت ATK — تولیدکننده تجهیزات کمکحرکتی
پروتوتایپ کامل وبسایت B2B هفتصفحهای، کامپایلشده در یک فایل HTML مستقل و بدون نیاز به هاست
درباره کارفرما
ATK یک تولیدکننده و عمدهفروش ایرانی تجهیزات کمکحرکتی است — واکر تاشو، عصای تنظیمشونده، صندلی حمام و توالت، فریم ایمنی توالت و عصای زیربغلی — که از سال ۱۳۸۷ فعالیت میکند و محصولاتش را به داروخانهها و توزیعکنندگان سراسر کشور میفروشد. برخلاف بسیاری از رقبا که صرفاً واسطه فروش هستند، ATK روی تولید داخلی و کنترل کیفیت تمرکز دارد.
دامنه پروژه و نقش من
طراحی و ساخت یک پروتوتایپ کامل وبسایت هفتصفحهای B2B — صفحه اصلی، درباره ما، تماس، کاتالوگ محصولات، و صفحه اختصاصی برای هر یک از ۷ محصول — که در نهایت همه در یک فایل HTML مستقل کامپایل شد تا بدون نیاز به هاست یا دیپلوی قابل بررسی باشد.
قابلیتهای اصلی
چالشهای اصلی
باگهای خاص RTL در CSS
رفتار justify-content: flex-end در فلکسباکسهای RTL دقیقاً برعکس انتظار بصری است؛ لازم بود این ناهماهنگیهای چیدمان که در توسعه معمول LTR-محور دیده نمیشوند شناسایی و اصلاح شوند.
ادغام ۱۱ صفحه مستقل در یک فایل
بهجای بارگذاری واقعی صفحات، یک روتر سبک سمت کلاینت (مبتنی بر hash/نام فایل) ساختم که بخشها را نمایش/مخفی میکند.
تداخل شناسههای تکراری (ID)
چند صفحه بهطور مستقل از شناسههای یکسان (مثل mainProductImg یا rfq) استفاده کرده بودند؛ راهحل، بازنویسی جاوااسکریپت برای محدودکردن جستجوی DOM به بخش صفحه فعال، بهجای تکیه بر getElementById سراسری بود.
باگ ساختاری ناشی از ادغام
یک div پوششی هیرو که قبل از نوار ناوبری باز و بعد از آن بسته میشد، وقتی نوار ناوبری بهعنوان مارکآپ مشترک استخراج شد، یک تگ بستهشدن یتیم بهجا گذاشت و محتوا بیصدا از ظرف صفحه موردنظرش بیرون نشت میکرد. این مشکل با یک اسکریپت اختصاصی بررسی تعادل/تودرتویی div شناسایی شد، نه صرفاً بازبینی چشمی.
تحویل کاملاً آفلاین و بدون وابستگی
همه فونتها و عکسها بهصورت base64 مستقیم در HTML جاسازی شدند (بدون هیچ درخواست خارجی)، تا فایل در هر مرورگری و بدون سرور بهتنهایی کار کند.
نتیجه
یک پروتوتایپ کامل و قابلارائه که بدون نیاز به هاست یا زیرساخت، مستقیماً قابل بررسی توسط تیم ATK بود و مبنای تصمیمگیری درباره طراحی نهایی سایت قرار گرفت.
تصاویر پروژه
