طراحی واکنش گرا یا responsive design براساس تکنولوژی های جدیدی پایه گذاری شده که از HTML5 و CSS3 استفاده کرده اند . اگر نگاهی به تغییرات در HTML5 بیاندازیم ، بهتر می توانیم کدی را که نوشته ایم درک کنیم .
بخش ششم – شروع کار با HTML5
طراحی واکنش گرا یا responsive design براساس تکنولوژی های جدیدی پایه گذاری شده که از HTML5 و CSS3 استفاده کرده اند . اگر نگاهی به تغییرات در HTML5 بیاندازیم ، بهتر می توانیم کدی را که نوشته ایم درک کنیم .
کدهای HTML5 پیش نویسی از جدیدترین کدهای HTML می باشد که براساس قوانین کنسرسیوم جهانی وب W3C نوشته شده است . خصیصه های HTML5 در واقع بخشی از تکنولوژی های گسترده ی جدیدی می باشد که W3C آن را تحت عنوان " پلتفرم وب باز " نامگذاری کرده است . که مخلص کلام این است که به ما این امکان را می دهد تا بتوانیم وب سایت و یا نرم افزار تحت وبی بنویسیم که در هر جایی بدرستی کار کند . وقتی افراد به شرایط HTML5 رجوع می کنند ، در واقع از پلتفرم وب باز صحبت به میان می آید .
منافع زیادی در استفاده از HTML5 در پروژه های شما وجود دارد که ما در ادامه مورد بحث قرار خواهیم داد .
دسترسی ( Accessibility )
سایت شما با استفاده از HTML5 از لحاظ دسترس پذیر بودن بسیار ساده تر خواهد شد . در HTML5 جدید تگ های معنادار به خواننده ی نمایشگر اجازه می دهد تا محتویات گوناگون بیشتری را شناسایی کند و این به آن ها اجازه می دهد تا تجربیات بیشتری را برای کاربران سایت فراهم کنند . مضاف بر آن ، HTML5 پشتیبانی از نقش های داده ی ARIA ( Access Rich Internet Application ) را پشتیبانی می نماید ، که به شما مجوز لازم برای مشخص کردن نقش های برای بخش های مختلف یک محتوا را می دهد . این ویژگی زمانی بسیار مفید خواهد بود که شما بخواهید با استفاده از جاوااسکریپت تنها بخشی از صفحه ی خود را بروزرسانی نمایید . بدین ترتیب شما می توانید با استفاده از نقش ARIA تعیین کنید که کدام بخش برای کاربر بروزرسانی گردد .
پشتیبانی از ویدئو و صوت
HTML5 بصورت داخلی از کدهای ویدئویی و صوتی پشتیبانی می کند. یکی از فواید این اتفاق این است که برای دستگاه هایی مثل موبایل ، جهت نمایش ویدئو و صوت دیگر نیازی به نصب اسکریپت خاصی مانند Adobe Flash نبوده و براحتی تصاویر در دستگاه هایی مثل موبایل اجرا خواهند شد .
ذخیره سازی هوشمندانه تر
نسخه های قبلی HTML5 راه اصلی ذخیره ی اطلاعات در سمت کلاینت ، استفاده از کوکی ها بود . یکی از ایرادات این نوع ذخیره سازی این بود که با درخواست سرور این اطلاعات به سمت سرور روانه می شد حتی اگر در سرور استفاده نمی شدند . HTML5 مدل ذخیره سازی داده ی DOM ( document object model ) را تولید کرد ، که شامل ذخیره سازی محلی local storage و ذخیره ی جلسه session storage می شود . یکی از فواید استفاده از DOM ها این است که اطلاعات در سمت کلاینت باقی مانده و با تقاضای HTTP تاثیری در سایز آن نخواهند داشت و همچنین اجازه ی ذخیره ی اطلاعات بیشتری را به شما خواهد داد . در حال حاضر منبع DOM اجازه ی ذخیره ی 5 مگابایت اطلاعات را برای هر دامین به شما خواهد داد .
فعالیت های جدید
API های جاوااسکریپت جدید در HTML5 شما را قادر می سازد تا فعل و انفعال خود در سایت را بهبود بخشید . یک سری از این امکانات عبارتند از قابلیت درگ دراپ drag & drop ، موقعیت جغرافیایی و تاریخچه می باشد . رسیدن به این نوع فعل و انفعالات شما را قادر می سازد تا بتوانید رابط کاربری ساده تر و غنی تری بسازید .
بوم نقاشی یا Canvas
HTML5 المان های متفاوتی در زمینه ی Canvas فراهم می آورد ، که با استفاده از تگ های جدید می توانید جهت ترسیم ها استفاده کنید . که به شما اجازه می دهد تا بتوانید نرم افزارهای اینترنتی غنی تری شبیه آنچه که قبلن توسط نرم افزار Adobe Flash انجام می دادید بسازید .
موبایل
HTML5 بهبودهای فراوانی در زمینه ی نرم افزارهای موبایل ارائه داده است . API های جدید مانند موقعیت جغرافیایی Geolocation به شما این اجازه را می دهد تا موقعیت مکانی کاربر را پیدا کرده و براساس آن ، داده های مختص آن موقعیت را برای کاربر فراهم نمایید .
تگ viewport در HTML5 به شما اجازه می دهد تا عرض viewport و همچنین میزان بزرگنمایی را مشخص نمایید . و همچنین تگی مختص شناسایی دستگاه ها می باشد که با استفاده از آن توسعه دهندگان وب می توانند با شناسایی مرورگرهای مختلف تنظیمات خاص آن مرورگر را ارائه دهند . بطور مثال توسعه دهنده می تواند به IOS بگوید که اگر صفحه ی اصلی نشانه گذاری شده بود باید آن را بصورت تمام صفحه بنمایش در آورد .
پایان قسمت ششم
محمد جعفری فوتمی
قسمت هفتم – جستجو در تکنولوژی های HTML5