نویسنده: علی باقری نیا
تاریخ: ۲۲,تیر,۱۳۹۲
آخرین ویرایش: ۰۳ بهمن ۱۳۹۵
بدون دیدگاه
715 بازديد

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

  سال 1991 بود که «تیم برنرز لی» یک زبان نشانه‌گذاری ...

امتیاز دهید :

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

  • اشاره:

    در سال ۲۰۰۴، اپل، موزیلا و اپرا گروهی با عنوان WHATWG (سرنام Web Hypertext Application Technology Working Group) تشکیل دادند که به معرفی HTML5 و داغ شدن بحث آینده وب منجر شد. با معرفی ویژگی‌های این نسخه، گمانه‌زنی‌ها درباره آینده برخی نرم‌افزارها و شرکت‌ها در دنیای وب مطرح شد که از جمله مهم‌ترین آن‌ها می‌توان به نرم‌افزار Flash شرکت ادوبی و قالب مشهور آن اشاره کرد که در مواردی، عناوین اصلی خبرهای سایت‌های فعال در زمینه وب و فناوری اطلاعات را تشکیل می‌دادند.

     

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

     

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

    شکل ۳

    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

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

     

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

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

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

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

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

    شکل ۵- تگ‌های جدید و تگ‌های حذف شده در HTML 5

  • تازه های وردپرس رو از کانال تلگرام خانه وردپرس دنبال کنید