مطالعه موردی - HTML5 در deviantART muro

مایک دیویی
Mike Dewey

معرفی

در 7 آگوست 2010، deviantART تولد 10 سالگی خود را جشن گرفت. ما تولد خود را با راه اندازی یک ابزار طراحی HTML5 به نام deviantART muro جشن گرفتیم. این ابزار می تواند به عنوان یک برنامه وب مستقل و همچنین یک ابزار طراحی سبک وزن برای افزودن تصاویر به نظرات انجمن استفاده شود.

جامعه deviantART با اشتیاق فراوان از این ابزار طراحی جدید استقبال کرد و خود این ابزار اکنون به اندازه برخی از ویژگی های وب با اندازه مناسب ترافیک می بیند. از زمان راه‌اندازی، یک طراحی جدید با استفاده از deviantART muro تقریباً هر 5 ثانیه یک بار ارسال می‌شود. اینها فقط تعداد نقشه هایی هستند که تکمیل شده اند. بسیاری دیگر شروع شده بودند و ذخیره نشده بودند.

مقاله زیر پیشینه ای در مورد نحوه استفاده ما از HTML5، چرایی انتخاب ما برای استفاده از فناوری هایی که انجام دادیم، و چیزهایی که من هنگام نوشتن یکی از اولین برنامه های کاربردی HTML5 کامل برای یک وب سایت بزرگ کشف کردم، ارائه می دهد.

سوابق من

در اواخر سال 2005، من یکی از توسعه دهندگانی بودم که مسئول ابزار طراحی مورد استفاده در Draw Here بودم. این ابزار یک ابزار گرافیتی وب بود که توسط یک بوک مارکلت راه اندازی شد. از آن برای کشیدن تصاویر در هر صفحه وب استفاده می شد. Draw Here در ابتدا با استفاده از SVG ایجاد شد (Firefox 1.5 beta به تازگی منتشر شده بود؛ این یکی از اولین مرورگرهایی بود که از SVG پشتیبانی می کرد).

در اینترنت اکسپلورر، ما SVG را در پس‌زمینه ایجاد می‌کردیم، اما طراحی را با استفاده از VML رندر می‌کردیم. WebKit در آن زمان از SVG پشتیبانی نمی کرد، بنابراین من کد خود را برای رندر کردن SVG با استفاده از بوم (که یک فناوری جدید در آن زمان فقط در WebKit بود) منتقل کردم. در یک نقطه، من حتی یک پورت ساختم تا کد SVG ما بتواند با استفاده از یک دسته از عناصر div که به هم چسبانده شده‌اند، در مرورگرهای قدیمی‌تر ارائه شود. (البته این بیشتر یک شوخی بود تا نشان دهد که می توان آن را انجام داد و استفاده از آن به طرز دردناکی کند بود).

در دوران اوج خود، از Draw Here برای ساخت حدود 100 طراحی در روز استفاده می شد. آنقدر کامل بود که بتوان آن را چیزی فراتر از یک آزمایش نامید، هرچند که صیقل نهایی یک برنامه وب اصلی را نداشت. در اواسط سال 2006، این پروژه رها شد، اگرچه سایت هنوز هم در حال لنگیدن است - بیشتر فقط برای پوزخند.

فن آوری های مورد استفاده توسط deviantART muro

به دلیل سابقه استفاده از فناوری‌های مختلف HTML5 در روزهای اولیه، از من خواسته شد که توسعه‌دهنده اصلی در deviantART muro باشم. هر کسی که در حال خواندن این مقاله است احتمالاً می تواند بفهمد که چرا ما تصمیم گرفتیم به جای فناوری مبتنی بر پلاگین مانند Silverlight یا Flash، از HTML5 استفاده کنیم. ما چیزی می خواستیم که قوی باشد و همچنین چیزی که از استانداردهای باز استفاده کند.

تصمیم گیری بین Canvas و SVG

ما تصمیم گرفتیم لایه طراحی را با استفاده از بوم انجام دهیم. برخی از مردم ممکن است تعجب کنند که چه زمانی باید از بوم استفاده کنند و چه زمانی باید از SVG استفاده کنند. همپوشانی های زیادی در کارهایی که می توان با این دو فناوری انجام داد وجود دارد - همانطور که Draw Here ثابت کرد، هر دو فناوری را می توان برای ایجاد یک برنامه طراحی استفاده کرد.

من متوجه شده ام که SVG عالی است اگر بخواهید دسته ها را برای اشیایی که کشیده اید نگه دارید. برای مثال، اگر می‌خواهید کاربر بتواند یک خط بکشد، و سپس بتواند بیت‌هایی از خط را بکشد تا شکل آن را تغییر دهد، این کار با استفاده از SVG نسبتاً بی‌اهمیت خواهد بود. اما همین کار با استفاده از بوم بسیار ناخوشایند است.

وقتی از بوم استفاده می‌کنید، چیزهایی را روی بوم شلیک می‌کنید و سپس آن را فراموش می‌کنید. یک بوم خالی و یک بوم که به مدت یک ساعت روی آن کشیده شده بود، در کد دقیقاً یکسان عمل می کنند و تقریباً ردپای حافظه یکسانی دارند. در حالی که یک برنامه ترسیم شطرنجی معمولاً با آتش بسیار خوب کار می کند و فناوری را فراموش می کند، برخی چیزها را سخت می کند. به عنوان مثال، ایجاد یک تابع لغو سریع در بوم بسیار سخت تر از SVG است. در SVG، شما فقط می‌توانید یک دسته را تا چندین خط آخری که قرار داده‌اید نگه دارید، و لغو کردن فقط به حذف آن اشیاء است. با بوم، هنگامی که یک خط نقاشی می شود، نمی دانید زیر آن چه چیزی وجود دارد، بنابراین حذف خط مستلزم ترسیم مجدد ناحیه ای است که در آن قرار داشته است.

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

با استفاده از بوم

بوم در پنج سال گذشته راه طولانی را پیموده است. با Draw Here، ما در واقع پورت بوم من را منتشر نکردیم، زیرا عملکرد خوب نبود. حالا، فکر می‌کنم، می‌توان گفت که احتمالاً بهتر از آنچه تصور می‌کنید، عمل می‌کند. پاک کردن بخش بزرگی از بوم و ترسیم مجدد اشکال پیچیده معمولاً می تواند با سرعتی بیشتر از تصور انسان اتفاق بیفتد. تنها چیزی که گاهی اوقات خیلی کند است، استفاده از getImageData () برای نمونه‌برداری از پیکسل‌ها است. سرعت عملیات مشخصاً به اندازه بوم بستگی دارد، اما در یک بوم بزرگ، انجام getImageData() در زمان نامناسب می‌تواند به اندازه‌ای طول بکشد که کاربر احساس کند برنامه کاربردی کند است.

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

انتخاب کننده رنگ
انتخاب کننده رنگ

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

وقتی به ذهنم رسید که فقط از یک بوم استفاده کنم، ویجت را با یک عنصر DOM و چند خط جاوا اسکریپت ساختم. deviantART muro از گره های بوم در همه جا استفاده می کند. هر لایه یک بوم است، و تغییر ترتیب لایه ها فقط با تغییر شاخص z است. پالت بزرگنمایی 'navigator' که نمای کوچک شده ای از ناحیه طراحی را نشان می دهد، فقط بوم دیگری است که گهگاه با استفاده از بوم های لایه به عنوان تصاویر منبع، drawImage() را فراخوانی می کند. حتی مکان‌نمای ناحیه ترسیم (دایره‌ای دو رنگ که اندازه را بسته به اندازه قلم مو و بزرگ‌نمایی تنظیم می‌کند) بوم نقاشی است که در زیر ماوس شناور است.

دلیل اینکه ما نسبت به سایر فناوری‌های HTML5 با بوم آزادتر عمل کردیم این است که کتابخانه ExplorerCanvas Google امکان شبیه‌سازی بوم در اینترنت اکسپلورر را فراهم می‌کند. این من را به بخش بعدی من هدایت می کند.

اینترنت اکسپلورر (IE)

دلیل اصلی اینکه بیشتر وب سایت های بزرگ هنوز از HTML5 استفاده نمی کنند این است که نمی خواهند کاربران اینترنت اکسپلورر خود را از دست بدهند. من مطمئن هستم که اولین سوالی که در ذهن اکثر توسعه دهندگان وجود دارد وقتی می شنوند که deviantART یک برنامه طراحی HTML5 ساخته است، "در مورد IE چه کار شد؟"

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

ما تصمیم گرفتیم که هر ویژگی جالبی را که با استفاده از مشخصات HTML5 به ذهن می‌رسد ایجاد کنیم، سعی کنیم آن را در اینترنت اکسپلورر کار کنیم، و اگر نتوانست کار کند، فقط یک حالت ظاهر می‌کنیم که توضیح می‌دهد این ویژگی در دسترس نیست زیرا مرورگر هنوز یک استاندارد وب را پیاده سازی نکرده است.

ما در ابتدا سعی کردیم کارها را با ExplorerCanvas (exCanvas) گوگل انجام دهیم. به طرز شگفت آوری در تقلید از بوم برای بسیاری از چیزها خوب است. هرچند یک نقطه ضعف دارد. هر ضربه ای که روی بوم ایجاد می شود یک شی DOM در ترجمه زیرین VML است. برای بسیاری از چیزهایی که ممکن است با بوم امتحان کنید، این خوب است، اما برخی از براش‌های deviantART muro از لایه‌بندی تعداد زیادی سکته مغزی در کنار هم، اشکال ایجاد می‌کنند. وقتی اینترنت اکسپلورر با VML مواجه می شود که هزاران گره در خود دارد - حتی روی یک ماشین سریع - می افتد و می میرد. به همین دلیل، برای بسیاری از فراخوان‌های ترسیمی، در واقع باید وارد و کدنویسی در VML واقعی می‌شدیم و از ترفندهایی استفاده می‌کردیم که گره‌ها را به هم متصل می‌کردیم و از دستور move برای تعیین جایی که باید شکاف وجود داشت استفاده کنیم. بسیاری از کنترل‌های کوچک و چیزهای دیگر در رابط از یک برچسب بوم استفاده می‌کنند، زیرا آن کاربردهای کوچک معمولاً با exCanvas به خوبی کار می‌کنند.

علاوه بر اینکه برخی از کارها با exCanvas کار می کنند، به کاربران پیشنهاد کردیم که در صورت نصب افزونه Google Chrome Frame، بتوانند از نسخه Internet Explorer خود استفاده کنند. Google Chrome Frame یک افزونه است که موتور رندر Google Chrome را در اینترنت اکسپلورر جاسازی می کند. از دیدگاه کاربر، آنها همچنان از مرورگری که با آن آشنا هستند استفاده می کنند. اما، در زیر جلدها، صفحه ما با قابلیت‌های HTML5 کروم و جاوا اسکریپت سریع‌تر رندر می‌شود.

می‌دانستم که قرار است پورت کردن چیزها برای کار با Chrome Frame آسان باشد، اما متوجه نشدم که چقدر ساده است. شما فقط یک متا تگ اضافی قرار می دهید و... و تمام، همه چیز در IE شروع به کار می کند.

خلاصه

کار با فناوری های جدید در مشخصات HTML5 بسیار لذت بخش است و می توانم بگویم که همه چیزهایی که من استفاده کردم قطعاً برای بهترین زمان آماده است. حتی اگر به چیزهایی نیاز دارید که بدون عیب و نقص روی اینترنت اکسپلورر کار کنند، تعداد شگفت انگیزی از کارها وجود دارد که می توانید با ترکیب canvas و exCanvas انجام دهید. و نوشتن یک لایه ترجمه بین SVG و VML نیز به طرز شگفت انگیزی قابل انجام است. هنگامی که شروع به استفاده از این فناوری می کنید، مانند قدم گذاشتن در دنیای کاملاً جدیدی است.

منابع