نگاهی به ویژگی‌های جدید HTML 5

اشاره:

سال 1991 بود که «تیم برنرز لی» یک زبان نشانه‌گذاری ساده برای توصیف مستندات تحت وب ارائه کرد. اين زبان پایه و اساس زبان HTML فعلی بود كه امروز دنیای وب را فرا گرفته است. در سال 1995 زبان HTML2 با خصوصیات مختلف از جمله جدول‌ها و فرم‌ها معرفی شد. مدتی بعد، درست در زمانی که رقابت مرورگرهای شرکت‌های مختلف از جمله مایکروسافت و نت‌اسکیپ در ارائه امکانات و قابلیت‌ها بالا گرفته بود، HTML3 از میان امکاناتی که هریک از این مرورگرها پیاده‌سازی کرده بودند، به عنوان یک استاندارد جدید معرفی شد. HTML4 که آخرین عرضه رسمی آن در سال 1999 بود، بسیاری از ویژگی‌ها به CSS منتقل شد و استفاده از آن ویژگی‌ها به شکل سنتی آن در اسناد وب نهی شد. دو شکل مختلف از نسخه 4 تحت عنوان Transitional و Strict وجود دارد که در اولی با وجود آن‌که ویژگی‌های یاد شده نهی شده، اما همچنان پشتیبانی می‌شود، اما در دومی به‌طور کامل حذف شده است. از سال 1999 تا کنون با وجود معرفی XHTML به عنوان نسخه سخت‌گیرانه‌تر HTML، شاهد هیچ عرضه رسمی دیگری از HTML نبوده‌ایم و با وجود تحولات بسیار در زمینه وب و پیدایش نیازهای جدید، نسخه جدیدی از آن ارائه نشده است. در شکل 1 زمان عرضه نسخه‌های مختلف این زبان به تصویر کشیده شده است.

بوم گرافیکی
اغلب افراد، ارائه تصویری و بصری اطلاعات را بهتر و سریع‌تر درک می‌کنند. به‌عنوان مثال، در صورت ارائه  یک سری اطلاعات آماری عددی، به‌شكل یک جدول و یک نمودار دایره‌ای (Pie Chart)، در اغلب موارد نمودار دایره‌ای تأثیر بهتری روی کاربر و میزان درک وی از مطلب ارائه شده خواهد داشت. اما استفاده از یک فایل گرافیکی برای نمایش چنین نموداری چند عیب دارد. یکی آن‌که حجم فایل‌های تصویری به میزان قابل توجهی از فایل‌های متنی بیشتر است. اگر از این اشکال نیز به‌دليل مزیت ارائه گرافیکی و بصری بودنش چشم‌پوشی‌کنیم، از این اشکال که محتوای آن به‌صورت پویا قابل تغییر نیست نمی‌توان به راحتی چشم‌پوشی کرد. به این معنا که اگر فایل تصویری را با نرم‌افزار گرافیکی مانند فتوشاپ یا نرم‌افزار تولیدکننده نمودار مانند اکسل طراحی می‌کنیم، در صورتی‌که اطلاعات درون تصویر تغییر کند ناچار به ویرایش فایل تصویری هستیم. البته، در برخی موارد می‌توان راه‌حل‌هایی مانند برنامه‌نویسی سمت کاربر یا سمت سرویس‌دهنده برای تولید پویا و بي‌درنگ خروجی‌های تصویری از اطلاعات ارائه داد. اما این کار نیز نسبت به امکان جدید HTML5 تحت عنوان بوم گرافیکی یا canvas مشکل‌تر و پرهزینه‌تر خواهد بود. این عنصر که با تگ canvas مشخص می‌شود به طراحان وب این امکان را می‌دهد که در مثال فعلی ما با استفاده از اطلاعات موجود در پایگاه داده، به سرعت یک نمودار دایره‌ای همانند آنچه در شکل 3 مشاهده می‌کنید، تولید کرده و به کاربر نمایش دهد. ضمن این‌که با استفاده از واسط‌های برنامه‌نویسی درنظر‌گرفته شده می‌توان بین سند وب و کاربر تعامل ایجاد کرد. به عنوان مثال، می‌توان اسکریپتی نوشت که به کلیک کاربر روی بخش‌های مختلف نمودار دایره‌ای تولید‌شده پاسخ مناسب بدهد. همچنین امکان استفاده از متن درون بوم گرافیکی نیز فراهم شده است که انعطاف‌پذیری آن را افزایش می‌دهد.

شكل 3

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

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

ویژگی‌های جدید فرم‌ها
این روزها دیگر کمتر کسی است که با فرم‌های وب سروکار نداشته باشد. ثبت نام، ارسال نظر در تالارهای گفت‌وگو، ارسال ایمیل و… بدون استفاده از فرم‌ها امکان‌پذیر نخواهد بود. در HTML5 ساختار فرم‌ها تغییرات پایه‌ای فراوانی داشته که به دلیل عمده بودن این تغییرات، از آن به عنوان نسخه دوم فرم‌های وب (Web Forms 2.0) یاد می‌کنند. این نسخه از فرم‌های وب، ویژگی‌های جدید و امکانات متعددی را در اختیار برنامه‌نویسان وب قرار می‌دهد که به وسیله آن‌ها رسیدگی به اطلاعات دریافتی و داده‌های ورودی به شکل ساده‌تر و کاراتری انجام مي‌شود. مهم‌ترین امکان اضافه شده به نسخه جدید فرم‌های وب، اعتبارسنجی داده‌های ورودی است که علاوه‌بر استفاده از قابليت‌‌هاي مختلف، امکان بهره‌گیری از توانمندی جملات باقاعده (Regular Expressions) نیز به آن اضافه شده که بر انعطاف‌پذیری آن افزوده است. در حال حاضر، توسعه‌دهندگان وب برای اعتبارسنجی محتویات فرم‌ها از کدهای جاوااسکریپت (سمت کاربر) یا زبانی مانند PHP (سمت سرویس دهنده) استفاده می‌کنند. اما در Web Forms 2.0 این کار بسیار ساده‌تر و سریع‌تر انجام می‌شود. به عنوان مثال، در یک فرم با یک فیلد نام کاربری و یک فیلد ایمیل، هنگام ارسال داده‌ها باید خالی نبودن فیلدها و صحت ساختار آدرس ایمیل وارد شده بررسی شود. این کار در نسخه جدید فرم‌های وب با اضافه کردن بخش‌های پررنگ مشخص شده در کد زير مشاهده می‌شود:

<form>
<label>Username:*</label>
<input type=”text” name=”username” required />
<label>Email:*</label>
<input type=”text” name=”email” required email />
<input type=”submit” name=”submit” value=”submit” />
</form>

علاوه‌بر این، نوع ورودی جدیدی نیز با عنوان ايميل تعریف شده که با انتساب آن به صفت type می‌توان از صحت ساختار ایمیل ورودی اطمینان حاصل کرد:

<input type=”email” name=”email” />

مرورگرهایی که از این نوع ورودی پشتیبانی نمی‌کنند آن را به عنوان یک فیلد متنی معمولی از نوع text در نظر می‌گیرند. از دیگر امکاناتی که به فرم‌ها اضافه شده می‌توان به انتخابگر تاریخ و slider (با نوع range) اشاره کرد که پیش از این برای در اختیار داشتن چنین امکاناتی ناچار به استفاده از اسکریپت بودیم. انواع ورودی که به نسخه جدید فرم‌ها اضافه شده‌اند، عبارتند از:

* tel
* search
* url
* email
* datetime
* date
* month
* week
* time
* datetime-local
* number
* range
* color

شكل 4- Attributeهاي مربوط به رويدادها در HTML 5 (رويدادهاي جديد، موجود از نسخه 4 و حذف شده)

استفاده مستقیم SVG و MathML
در نسخه جدید HTML این امکان وجود دارد که به طور مستقیم از SVG و MathML درون سند وب خود استفاده کنید. نمونه ساده‌ای از کد مربوط به کاربرد این ویژگی را در ادامه مشاهده می‌کنید:

<!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
<svg> <circle r=”50” cx=”50” cy=”50” fill=”green”/> </svg>
</p>

همان‌طور که می‌دانید SVG و MathML زبان‌های نشانه‌گذاری استاندارد مبتنی بر XML هستند که از اولی برای توصیف گرافیک برداری دوبعدی و سه‌بعدی و از دومی برای توصیف فرمول‌های ریاضی در وب استفاده می‌شود. ترکیبات پیچیده‌تر نیز امکان‌پذیر است. به عنوان مثال، می‌توان با استفاده از عنصر foreignObject درون SVG از کدهای MathML و حتی خود HTML استفاده کرد.

پشتیبانی مرورگرها
هر مرورگر برای پیاده‌سازی استانداردهای وب و ارائه امکانات مختلف ویژگی‌ها و قوانین خاص خود را دارد که از یک مرورگر به دیگری و حتی بین نسخه‌های مختلف یک مرورگر متفاوت است. بنابراین، طبیعی است که هر مرورگر با سیاست و سرعت کار خود، پشتیبانی از HTML5 را به ویژگی‌های خود اضافه کند. اپل، موزیلا و اپرا به عنوان پیشگامان توسعه HTML5 در WHATWG پیش از سایرین بسیاری از ویژگی‌های این زبان را در مرورگرهاي خود پیاده‌سازی کرده‌اند. در کنار این‌ها، کروم شرکت گوگل نیز با پشتیبانی وسیع از بيشتر ویژگی‌های HTML5 از نخستین مرورگرهایی بوده که به سرعت به استقبال این زبان رفته است و در میزان پشتیبانی از آن، از سایر رقیبان خود پیشی گرفته و بیشترین درصد را به خود اختصاص داده است. شرکت مایکروسافت نیز با وجود این‌که در گروه اولیه توسعه HTML5 نبوده، اما در IE8 بخش‌هایی از آن پشتیبانی می‌شود به علاوه پشتیبانی از این زبان، یکی از ویژگی‌های نسخه جديد مرورگر مايكروسافت، یعنی IE9  است. اما در حال حاضر در میان مرورگرهای مطرح دنیا سهم اینترنت اکسپلورر در پشتیبانی از HTML5 کمتر از سایرین است. البته، طراحی این زبان به روشي بوده که می‌توان با استفاده از اسکریپت و پلاگین، پشتیبانی از آن را به مرورگرهای قدیمی‌تر نیز افزود که البته، این کار چندان ضروری به نظر نمی‌رسد. گفته می‌شود، برای کسانی که قصد دارند هرچه سریع‌تر به توسعه برنامه‌های مبتنی بر HTML5 بپردازند، در حال حاضر، اپرا بهترین پیاده‌سازی را برای خصوصیاتی که تا‌کنون پشتیبانی کرده، ارائه داده و سافاری گزینه دیگری است که بلافاصله بعد از اپرا پیشنهاد شده است. بنابراین، با این‌که انتظار می‌رود HTML5 در سال 2012 به‌طور رسمی به عنوان یک استاندارد معرفی شود، اما این مسئله به آن معنی نیست که برای توسعه نرم‌افزارهای کاربردی وب با این زبان باید تا آن زمان صبر کنیم. بلکه با پشتیبانی گسترده مرورگرها از HTML5 و تکمیل آن در آینده نزدیک می‌توان کار با این زبان جذاب را خیلی زودتر آغاز کرد.

HTML5 و Flash
بسیاری از کارشناسان و تحلیل‌گران معتقدند، روز استاندارد شدن HTML5 و فراگیر شدن آن روز مرگ Flash خواهد بود و عده‌ای این دو فناوری را رقیب یکدیگر ندانسته و آن‌ها را از هم جدا می‌دانند. به گفته شرکت ادوبی، فلش در 99 درصد اینترنت نفوذ کرده و حذف آن به سادگی امکان‌پذیر نخواهد بود. ما در ادامه تلاش خواهیم کرد، به بررسی و مقایسه ویژگی‌های مشترک این دو فناوری بپردازیم.
یکی از نقاط ضعف فایل‌های فلش در صفحات وب، سنگینی بار‌گذاری نسبت به کدهای متنی و استفاده بیش از حد انتظار از منابع سیستم است. از آنجا که HTML5 و تمام قابلیت‌های آن مبتنی بر متن است شاید اگر از عهده انجام اموری که ما از فلش انتظار داریم بر بیاید، در آن زمینه جایگزینی مناسب برای فلش باشد. زيرا در آن صورت حتی به نصب نرم‌افزار جانبی Flash Player نیز نیازی نخواهد بود و تمام مرورگرهای سازگار، اساساً از آن پشتیبانی خواهند کرد. ضمن این‌که فلش از برخی از پلتفرم‌ها از جمله برخی از محصولات شرکت اپل مانند آي‌فون و iPad حذف شده که این از میزان فراگیری آن کاسته است. البته، در آزمايش‌هاي انجام شده بین این دو فناوری در ویندوز و مک، برنده مشخصی در کارایی تعیین نشده است. ضمن این‌که باید در نظر داشت که بسیاری از جلوه‌ها و قابلیت‌های پیشرفته فلش در HTML5 وجود ندارد و اساساً تعریف نشده است. بنابراین، مستقل از پاره‌اي تعصب‌های کاربران فلش، در برخی زمینه‌ها، کاربردها و سطح انتظارات، HTML5 به هیچ عنوان پاسخ‌گو نخواهد بود. به عنوان نمونه، گوگل در سرویس جی‌میل خود برای آپلود همزمان فایل‌ها بر پایه فلش کار کرده است که این کار با HTML5 امکان‌پذیر نیست. البته، ممکن است گفته شود که این کار بدون استفاده از فلش و با استفاده از اسکریپت‌های موجود نیز قابل انجام است که ما با وجود تأیید این حرف یادآور این نکته می‌شویم که در آن صورت ما دیگر بر قابلیت‌های HTML5 تکیه نكرده و از زبان دیگري کمک‌گرفته‌ایم. به عنوان مثال دیگر، بازی‌های بسیار پیچیده و جلوه‌های تصویری پیشرفته‌ای با فلش طراحی شده‌اند که معادل‌سازی آن‌ها با HTML5 امکان‌پذیر نیست. مورد ديگري كه در مقايسه اين دوفناوري بايد مطرح شود، قیمت آن‌ها است. HTML5 یک زبان رایگان و فلش یک نرم‌افزار گران‌قیمت است و استفاده از یک ابزار گران‌قیمت برای همه امكان‌پذير نیست. همان‌طور که مشاهده می‌کنید، در مجموع نمی‌توان گفت، در این مقایسه کدام یک برنده‌اند. هرکدام از این دو در زمینه‌ای بر دیگری ارجحیت دارد. اما آنچه مسلم است آن است که HTTML5 آینده وب در بسیاری از تعاملات ساده کاربران شامل گرافیک برداری دوبعدی و سه‌بعدی، نمودار، صوت، ویديو و… خواهد بود. اما در جایی که نیاز به امکانات پیشرفته‌تر احساس می‌شود، ناگزیر به استفاده از فلش یا به‌کارگیری توانمندی‌های نرم‌افزارهای دیگری مانند Silverlight یا جاوا یا ترکیبی از آن‌ها خواهیم بود.

شكل 5- تگ‌هاي جديد و تگ‌هاي حذف شده در HTML 5