ویژگی HTML5

در زمینه طراحی سایت ، حتما می دانید که اصلی ترین و مهم ترین زبانی که در شروع باید بیاموزید ، زبان HTML/CSS است که در این میان ویژگی HTML5 از آن ویژگی هایی است که بهتر است در مورد آن اطلاع خوبی داشته باشید.در این مقاله سعی کردیم به صورت خلاصه به تمام انها اشاره کنیم.
در زمینه بحث طراحی انواع سایت و اپلیکیشن هایی که تحت وب هستند از ویژگی ها و ساختارهای مختلفی میتوان بهره برد که یکی از این موراد HTML است.اما موارد استفاده HTML چیست؟
• ساختار معنایی اطلاعات را توصیف مینماید
• رابط کاربری و فرم های ورود اطلاعات را تولید مینماید
• ظاهر سایت را توصیف می نماید(امروزه این کار منسوخ شده و بر عهده CSS نهاده شده است)
اما جدیدترین نسخه ای که تا به امروز از زبان HTML منتشر شده است ،نسخه HTML5 است که در بسیاری از مرورگر ها قابلیت پشتیبانی از این ورژن وجود دارد.اما ویژگی های نسخه HTML5 چیست؟در ادامه به ذکر این موارد خواهیم پرداخت.برای یادگیری حرفه ای این زبان می توانید در کلاس آموزش HTML/CSS در آکادمی پرتو شرکت نمایید.

کلاس های ذخیره سازی و برنامه های آفلاین(Offline & Storage)
ویژگی مهمی که تحول بسیار بزرگی را در صفحات و برنامه های تحت وب بوجود آورد. توسط این ویژگی ،برنامه های تحت وب با سرعت بیشتری کار میکنند و یا حتی بدون اتصال به اینترنت قابلیت استفاده را دارند.امکاناتی که در این زمینه به نسخه های قبلی اضافه شد تا نسخه 5 را بوجود آورد عبارتند از :
HTML5 App Cache
Local Storage
Indexed DB
File API

ویژگی HTML5

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

کلاس معنایی (Semantics)
توسط کلاس های معنایی در html5 میتوانید بخش های مختلف سایتتان را از دیگر بخش ها جدا نمایید.بعنوان مثال با استفاده از تگ های header , footer , article , nav ,, section و … بخش های سایتتان را از یکدیگر جدا نمایید .

اشکال غیر منظم

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

کلاس اتصال (Connectivity)

با استفاده از این کلاس ها میتوانید ارتباطاتی سریعتر نظیر چت و یا بازی ها را سریعتر انجام دهید.علت این امر نیز انتقال داده ها بین سرور و کلاینت بشکلی سریعتر توسط سوکت های وب (web sockets) است.

کلاس دسترسی به دستگاه ها (Device Access)
توسط استفاده از API موقعیت جغرافیایی که HTML5 ارائه میکند ،برنامه های تحت وب میتوانند اطلاعاتی کاربردی تر را به کاربر مبنی بر اطلاعات جغرافیایی وی ارائه دهند.
برنامه نویس میتواند با استفاده از جاوااسکریپت و همچنین با اجازه کاربر ،به اطلاعات موقعیتی وی دستیابی پیدا نموده و اطلاعاتی که در یک صفحه به او ارائه میدهد را تحت تاثیر قرار دهد.

کلاس چند رسانه ای (Multimedia)
در نسخه های قبلی html از img بصورت پیش فرض پشتیبانی میشود.در نسخه جدید HTML از audio و video پشتیبانی صورت میپذیرد.بنابراین این دو تگ نیز به تگ های تشکیل دهنده صفحات وب افزوده میشوند و دیگر ملزم به استفاده از جاوا اسکریپت و یا فلش نخواهید بود.

کلاس یکپارچه سازی (Preformance & Integration)
در html5 با استفاده از تکنولوژی هایی نظیر XHR و یا Web Worker میتوان نرم افزارهای تحت وب و یا صفحات داینامیک را به شکلی سریعتر و کارامد تر تولید نمود.در صورت استفاده از آن کاربر نیز با سرعت بیشتری میتواند نیازهای خود را برطرف سازد.به عنوان مثال با استفاده از workerها میتوانید کدهایتان را با استفاده از جاوااسکریپت تولید نمایید و در حالیکه کدها در حال اجرا هستند ،کاربر نیز نیازهای خود را با استفاده همزمان از صفحات رفع نماید.

فرم های هوشمندتر

منوهای کشویی ،CHECKBOXها ،جعبه های متن و بطور کلی تمامی فرم ها بصورت هوشمند تری عمل میکنند و به طراحان امکان کنترل بیشتری را جهت ورود اطلاعات صحیح تری میدهند.به عنوان مثال میتوانید فرم ها طوری طراحی نمایید تا صحت اطلاعات را بررسی نمایید.

کلاس گرافیک و افکت (Graphics & Effects)
تا پیش از انتشار نسخه جدید html طراحان وب برای اعمال تغییرات گرافیکی دچار محدودیت های بسیاری بودند.تا پیش از این طراحان ناچار به استفاده از CSS, ،جاوااسکریپت ،فلش و یا افزونه های کمکی استفاده میکردند.اما امروزه با استفاده از HTML5 و CSS3 میتوان توسط SVG ,canvas و WebGL برای کاربران جلوه های بصری ایجاد نمود.به عنوان نموده با استفاده از CSS3 میتوانید امکاناتی نظیر انیمیشن را به ساتتان اضافه نمایید.

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

تگ