arezoo_66
یک شنبه 05 تیر 1390, 08:49 صبح
سال 1991 بود که «تیم برنرز لی» یک زبان نشانه‌گذاری ساده برای توصیف مستندات تحت وب ارائه کرد. اين زبان پایه و اساس زبان HTML فعلی بود كه امروز دنیای وب را فرا گرفته است. در سال 1995 زبان HTML2 با خصوصیات مختلف از جمله جدول‌ها و فرم‌ها معرفی شد. مدتی بعد، درست در زمانی که رقابت مرورگرهای شرکت‌های مختلف از جمله مایکروسافت و نت‌اسکیپ در ارائه امکانات و قابلیت‌ها بالا گرفته بود، HTML3 از میان امکاناتی که هریک از این مرورگرها پیاده‌سازی کرده بودند، به عنوان یک استاندارد جدید معرفی شد. HTML4 که آخرین عرضه رسمی آن در سال 1999 بود، بسیاری از ویژگی‌ها به CSS منتقل شد و استفاده از آن ویژگی‌ها به شکل سنتی آن در اسناد وب نهی شد. دو شکل مختلف از نسخه 4 تحت عنوان Transitional و Strict وجود دارد که در اولی با وجود آن‌که ویژگی‌های یاد شده نهی شده، اما همچنان پشتیبانی می‌شود، اما در دومی به‌طور کامل حذف شده است. از سال 1999 تا کنون با وجود معرفی XHTML به عنوان نسخه سخت‌گیرانه‌تر HTML، شاهد هیچ عرضه رسمی دیگری از HTML نبوده‌ایم و با وجود تحولات بسیار در زمینه وب و پیدایش نیازهای جدید، نسخه جدیدی از آن ارائه نشده است. در شکل 1 زمان عرضه نسخه‌های مختلف این زبان به تصویر کشیده شده است.
http://www.shabakeh-mag.com/data/gallery/2011/6/html5a_s.jpg (http://www.shabakeh-mag.com/Data/Gallery/2011/6/Html5a.jpg)
شكل 1- روند پيشرفت نسخه‌هاي HTML
در سال 2004، اپل، موزیلا و اپرا گروهی با عنوان WHATWG (سرنام Web Hypertext Application Technology Working Group) تشکیل دادند که به معرفی HTML5 و داغ شدن بحث آینده وب منجر شد. با معرفی ویژگی‌های این نسخه، گمانه‌زنی‌ها درباره آینده برخی نرم‌افزارها و شرکت‌ها در دنیای وب مطرح شد که از جمله مهم‌ترین آن‌ها می‌توان به نرم‌افزار Flash شرکت ادوبی و قالب مشهور آن اشاره کرد که در مواردی، عناوین اصلی خبرهای سایت‌های فعال در زمینه وب و فناوری اطلاعات را تشکیل می‌دادند. ما در اين نوشتار به جنبه‌های فنی اين جريان‌ها خواهیم پرداخت و وارد بحث‌های جانبی آن نخواهیم شد.
یکی از مزیت‌هایی که در HTML5 مشاهده می‌شود، بهبود روش توصیف داده‌ها است. به عنوان مثال، در نسخه فعلی HTML، تگ اختصاصی برای تعریف ساختار صفحه وجود ندارد و این کار عموماً با استفاده از تگ div و تعریف کلاس انجام می‌شود که نمونه‌ای از آن در شکل 2-الف نمایش داده شده است. این کار ممکن است از سایتی به سایت دیگر متفاوت باشد و مرورگر به دلیل آن‌که در همه حالت‌ها با یک تگ مواجه می‌شود، با محتویات آن‌ها به صورت یکسان رفتار می‌کند. اما در HTML5 ساختار معنایی مشخصی برای توصیف محتوای صفحه در نظر گرفته شده است. همان‌طور که در شکل 2- ب مشاهده می‌کنید، برای هر بخش تگ به‌خصوصی در نظر گرفته شده و به همین دلیل، مرورگر بخش‌های مختلف را از هم تشخیص می‌دهد. این کار در کنار نمایش بهتر و بهبود معنایی ساختار می‌تواند استفاده‌های متعدد دیگری نیز داشته باشد. به عنوان مثال، یک موتور جست‌وجو می‌تواند به‌طور دقیق تشخیص دهد که کدام بخش از سند حاوی محتویات اصلی صفحه است و سایر بخش‌ها از قبیل header، nav و... را نادیده بگیرد. زيرا به احتمال زیاد آن بخش‌ها اطلاعات مهمی نخواهند داشت.
http://www.shabakeh-mag.com/data/gallery/2011/6/html5ba_s.jpg (http://www.shabakeh-mag.com/Data/Gallery/2011/6/HTML5ba.jpg)
شكل 2- الف: الف: تعريف ساختار يك صفحه وب در HTML4
http://www.shabakeh-mag.com/data/gallery/2011/6/html5bb_s.jpg (http://www.shabakeh-mag.com/Data/Gallery/2011/6/HTML5bb.jpg)
شكل 2- ب: ب: تعريف ساختار يك صفحه وب در HTML5
مشخصات سند
تعیین نوع سند و همچنین character set در HTML5 بسیار ساده‌تر شده است و بر‌خلاف نسخه فعلی دیگر نیازی نيست از عبارت‌های طولانی مانند كد زير كه معمولاً به‌خاطر سپردن آن‌ها دشوار است، استفاده كنيد:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
در نسخه فعلی، تعیین نوع سند برای ادامه تفسیر آن و تعیین چگونگی توصیف تگ‌ها لازم است. اما در نسخه جدیدکه نمونه‌ای از کد آن را در ادامه مشاهده می‌کنید، این کار علاوه‌بر کوتاهی و سادگی، دلخواه است و ذکر نکردن آن در تفسیر کد، خللی ایجاد نخواهد کرد. این کار تنها برای مرورگرهای فعلی و قدیمی که نیازمند تعیین نوع سند هستند، در نظر گرفته شده و شاید در آینده به این شکل مختصر هم نیازی نباشد.
<!doctype html>
<html>
<head>
<meta charset=»UTF-8”>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
همان‌طور که مشاهده می‌کنید، روش تعیین Character Set نیز نسبت به شکل فعلی مختصرتر شده است.
عنصر figure
کد زیر را که در حال حاضر برای توصیف یک تصویر به کار می‌رود، در نظر بگیرید:
<img src=”path/to/image.jpg” alt=”About image” />
<p>Image of Mars.</p>
متأسفانه در نسخه فعلی HTML راه ساده یا مفهومی برای انتساب یک عنوان متنی به یک تصویر وجود ندارد. این مسئله در نسخه جدید با معرفی عنصر figure و استفاده از عنصر figcaption در ترکیب با آن، همانند آنچه در قطعه کد بعد مشاهده می‌کنید، برطرف شده است:
<figure>
<img src=”path/to/image.jpg” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
با این روش قادر خواهیم بود بین یک عنوان متنی با تصویر مربوط یک ارتباط معنایی برقرار کنیم.
ارسال پیام بین دامنه‌های مختلف
به دلایل امنیتی و به منظور حفظ حریم افراد، مرورگرهای وب از تأثیر اسناد روی یکدیگر در دامنه‌های مختلف جلوگیری می‌کنند. با وجود اینکه چنین ویژگی امنیتی، بسیار مهم است، اما در صورتی که این اقدام به منظور حمله و به قصد خرابکاری هم نباشد و حتی هدف مثبتی هم درمیان باشد، در هر صورت از ارتباط بین صفحات در دو دامنه متفاوت جلوگیری می‌شود. در HTML5 یک سیستم تبادل پیام معرفی شده که به اسناد وب اجازه می‌دهد، مستقل از دامنه با یکدیگر ارتباط برقرار کنند و این کار را به شکلی انجام می‌دهند که امکان سوء استفاده و انجام حمله‌هاي XSS غير‌ممكن شود. برای این منظور ابتدا باید بررسی شود که دامنه ارسال‌کننده پیام، اجازه چنین کاری را دارد یا خیر. در صورت مجاز بودن آن دامنه، پیام بررسی می‌شود که آیا باید به کاربر نشان داده شود یا باید پاسخ آن به ارسال‌کننده بازگردانده شود.
ویرایش بصری و مستقیم عناصر صفحه
به منظور بالا بردن سطح تعامل کاربران با صفحات وب به روش‌هاي جدید، قابلیتی در نظر گرفته شده که با استفاده از آن می‌توان اجازه ویرایش بخشی از صفحه و محتویات آن را به کاربر داد. با مقداردهی صفت Contenteditable با یکی از مقدارهای true و false (درست و نادرست) می‌توان تعیین کرد که کدام‌یک از بخش‌های صفحه می‌تواند توسط کاربران قابل تغییر باشد. این امکان می‌تواند برای سایت‌هایی به سبک ویکی‌پدیا که در آن محتوا توسط کاربران تولید و ویرایش می‌شود، مفید واقع شود.
استفاده دیگر صفت Contenteditable ساخت قالب (template) برای صفحات وب خواهد بود. به این ترتیب که می‌توانید اجازه باز کردن و ویرایش را به بخش‌های مشخصی از یک صفحه وب بدهید و سایر بخش‌ها را که نباید تغییر کنند، قفل کنید. این قابلیت در اموری مانند وبلاگ‌نویسی به کاربرانی که تخصص کافی در طراحی صفحات وب و زبان HTML ندارند، این فرصت را می‌دهد که محتوای موردنظر خود را به‌طور امن و بدون تأثیر در نواحی حساس که باید توسط کاربران ماهرتر تغییر داده شوند، در محل مورد نظر وارد کنند. در سطح دیگر شما می‌توانید با انتساب مقدارهای on یا off به تمام صفحه قابلیت ویرایش بدهید یا این قابلیت را غیرفعال کنید. این امکانات می‌توانند نقطه آغاز موجی از تحولات و رویکردهای جدید در دنیای وب باشند.
دسترسی به عناصر از طریق نام کلاس
در یک سند وب ممکن است برخی از عناصر با اختصاص نام یک کلاس به آن‌ها، در یک دسته قرار بگیرند و به این ترتیب از سایر عناصر متمایز شوند. در حال حاضر، امکان دسترسی به عناصر عضو یک کلاس در زبان HTML پشتیبانی نمی‌شود و توسعه‌دهنده در صورت نیاز به این کار می‌تواند از جاوا اسکریپت استفاده کند. اما در HTML5 متدی در نظر گرفته شده که با فراخوانی آن می‌توان به عناصری که در یک کلاس قرار دارند، دسترسی پیدا کرد. بعد از استفاده از این متد که در واقع نوعی انتخابگر محسوب می‌شود، فهرستي از عناصر را در اختیار خواهیم داشت که می‌توان عمليات مورد نظر را روی آن انجام داد.
عنصر ویديویی
از این پس برای استفاده از فایل‌های ویديویی در اسناد وب به برنامه‌های جانبی نیاز نخواهیم داشت. با استفاده از عنصر video قادر خواهید بود، فایل ویديویی خود را به منظور پخش در مرورگرها به صفحات وب خود ضمیمه کنید. برخی ازسایت‌های فعال در ارائه خدمات ویديویی هم‌اکنون ازاین قابلیت استفاده کرده‌اند تا افرادی که از مرورگرهای سازگار با HTML5 استفاده می‌کنند برای پخش این نوع فایل‌ها به نصب نرم‌افزارهای جانبی نیازی نداشته و تنها به قابلیت‌های مرورگر خود متکی باشند.
عنصر صوتی
برای پخش فایل‌های صوتی نیز می‌توانیم از عنصر جدید audio استفاده کنیم. البته، در حال حاضر مرورگرهای مختلف با این بخش به شکلی متفاوت برخورد می‌کنند. به عنوان مثال، فایرفاکس با رسیدن به این بخش به دنبال یک فایل با قالب ogg می‌گردد و سافاری در پی یک فایل mp3 خواهد گشت. اپرا نیز تنها با فایل‌های wav کار می‌کند. بنابراین، شاید لازم باشد تا مشخص شدن تکلیف این مسئله از دو نسخه فایل صوتی استفاده کنیم. هر مرورگر در صورتی که فایل مورد نظر خود را در تگ source پیدا نکند به راحتی آن را نادیده گرفته و به تگ بعد خواهد رفت.
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3” />
<a href=”file.mp3”>Download this file.</a>
</audio>
منبع:http://www.shabakeh-mag.com/Article.aspx?id=1004836
http://www.shabakeh-mag.com/data/gallery/2011/6/html5a_s.jpg (http://www.shabakeh-mag.com/Data/Gallery/2011/6/Html5a.jpg)
شكل 1- روند پيشرفت نسخه‌هاي HTML
در سال 2004، اپل، موزیلا و اپرا گروهی با عنوان WHATWG (سرنام Web Hypertext Application Technology Working Group) تشکیل دادند که به معرفی HTML5 و داغ شدن بحث آینده وب منجر شد. با معرفی ویژگی‌های این نسخه، گمانه‌زنی‌ها درباره آینده برخی نرم‌افزارها و شرکت‌ها در دنیای وب مطرح شد که از جمله مهم‌ترین آن‌ها می‌توان به نرم‌افزار Flash شرکت ادوبی و قالب مشهور آن اشاره کرد که در مواردی، عناوین اصلی خبرهای سایت‌های فعال در زمینه وب و فناوری اطلاعات را تشکیل می‌دادند. ما در اين نوشتار به جنبه‌های فنی اين جريان‌ها خواهیم پرداخت و وارد بحث‌های جانبی آن نخواهیم شد.
یکی از مزیت‌هایی که در HTML5 مشاهده می‌شود، بهبود روش توصیف داده‌ها است. به عنوان مثال، در نسخه فعلی HTML، تگ اختصاصی برای تعریف ساختار صفحه وجود ندارد و این کار عموماً با استفاده از تگ div و تعریف کلاس انجام می‌شود که نمونه‌ای از آن در شکل 2-الف نمایش داده شده است. این کار ممکن است از سایتی به سایت دیگر متفاوت باشد و مرورگر به دلیل آن‌که در همه حالت‌ها با یک تگ مواجه می‌شود، با محتویات آن‌ها به صورت یکسان رفتار می‌کند. اما در HTML5 ساختار معنایی مشخصی برای توصیف محتوای صفحه در نظر گرفته شده است. همان‌طور که در شکل 2- ب مشاهده می‌کنید، برای هر بخش تگ به‌خصوصی در نظر گرفته شده و به همین دلیل، مرورگر بخش‌های مختلف را از هم تشخیص می‌دهد. این کار در کنار نمایش بهتر و بهبود معنایی ساختار می‌تواند استفاده‌های متعدد دیگری نیز داشته باشد. به عنوان مثال، یک موتور جست‌وجو می‌تواند به‌طور دقیق تشخیص دهد که کدام بخش از سند حاوی محتویات اصلی صفحه است و سایر بخش‌ها از قبیل header، nav و... را نادیده بگیرد. زيرا به احتمال زیاد آن بخش‌ها اطلاعات مهمی نخواهند داشت.
http://www.shabakeh-mag.com/data/gallery/2011/6/html5ba_s.jpg (http://www.shabakeh-mag.com/Data/Gallery/2011/6/HTML5ba.jpg)
شكل 2- الف: الف: تعريف ساختار يك صفحه وب در HTML4
http://www.shabakeh-mag.com/data/gallery/2011/6/html5bb_s.jpg (http://www.shabakeh-mag.com/Data/Gallery/2011/6/HTML5bb.jpg)
شكل 2- ب: ب: تعريف ساختار يك صفحه وب در HTML5
مشخصات سند
تعیین نوع سند و همچنین character set در HTML5 بسیار ساده‌تر شده است و بر‌خلاف نسخه فعلی دیگر نیازی نيست از عبارت‌های طولانی مانند كد زير كه معمولاً به‌خاطر سپردن آن‌ها دشوار است، استفاده كنيد:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
در نسخه فعلی، تعیین نوع سند برای ادامه تفسیر آن و تعیین چگونگی توصیف تگ‌ها لازم است. اما در نسخه جدیدکه نمونه‌ای از کد آن را در ادامه مشاهده می‌کنید، این کار علاوه‌بر کوتاهی و سادگی، دلخواه است و ذکر نکردن آن در تفسیر کد، خللی ایجاد نخواهد کرد. این کار تنها برای مرورگرهای فعلی و قدیمی که نیازمند تعیین نوع سند هستند، در نظر گرفته شده و شاید در آینده به این شکل مختصر هم نیازی نباشد.
<!doctype html>
<html>
<head>
<meta charset=»UTF-8”>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
همان‌طور که مشاهده می‌کنید، روش تعیین Character Set نیز نسبت به شکل فعلی مختصرتر شده است.
عنصر figure
کد زیر را که در حال حاضر برای توصیف یک تصویر به کار می‌رود، در نظر بگیرید:
<img src=”path/to/image.jpg” alt=”About image” />
<p>Image of Mars.</p>
متأسفانه در نسخه فعلی HTML راه ساده یا مفهومی برای انتساب یک عنوان متنی به یک تصویر وجود ندارد. این مسئله در نسخه جدید با معرفی عنصر figure و استفاده از عنصر figcaption در ترکیب با آن، همانند آنچه در قطعه کد بعد مشاهده می‌کنید، برطرف شده است:
<figure>
<img src=”path/to/image.jpg” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
با این روش قادر خواهیم بود بین یک عنوان متنی با تصویر مربوط یک ارتباط معنایی برقرار کنیم.
ارسال پیام بین دامنه‌های مختلف
به دلایل امنیتی و به منظور حفظ حریم افراد، مرورگرهای وب از تأثیر اسناد روی یکدیگر در دامنه‌های مختلف جلوگیری می‌کنند. با وجود اینکه چنین ویژگی امنیتی، بسیار مهم است، اما در صورتی که این اقدام به منظور حمله و به قصد خرابکاری هم نباشد و حتی هدف مثبتی هم درمیان باشد، در هر صورت از ارتباط بین صفحات در دو دامنه متفاوت جلوگیری می‌شود. در HTML5 یک سیستم تبادل پیام معرفی شده که به اسناد وب اجازه می‌دهد، مستقل از دامنه با یکدیگر ارتباط برقرار کنند و این کار را به شکلی انجام می‌دهند که امکان سوء استفاده و انجام حمله‌هاي XSS غير‌ممكن شود. برای این منظور ابتدا باید بررسی شود که دامنه ارسال‌کننده پیام، اجازه چنین کاری را دارد یا خیر. در صورت مجاز بودن آن دامنه، پیام بررسی می‌شود که آیا باید به کاربر نشان داده شود یا باید پاسخ آن به ارسال‌کننده بازگردانده شود.
ویرایش بصری و مستقیم عناصر صفحه
به منظور بالا بردن سطح تعامل کاربران با صفحات وب به روش‌هاي جدید، قابلیتی در نظر گرفته شده که با استفاده از آن می‌توان اجازه ویرایش بخشی از صفحه و محتویات آن را به کاربر داد. با مقداردهی صفت Contenteditable با یکی از مقدارهای true و false (درست و نادرست) می‌توان تعیین کرد که کدام‌یک از بخش‌های صفحه می‌تواند توسط کاربران قابل تغییر باشد. این امکان می‌تواند برای سایت‌هایی به سبک ویکی‌پدیا که در آن محتوا توسط کاربران تولید و ویرایش می‌شود، مفید واقع شود.
استفاده دیگر صفت Contenteditable ساخت قالب (template) برای صفحات وب خواهد بود. به این ترتیب که می‌توانید اجازه باز کردن و ویرایش را به بخش‌های مشخصی از یک صفحه وب بدهید و سایر بخش‌ها را که نباید تغییر کنند، قفل کنید. این قابلیت در اموری مانند وبلاگ‌نویسی به کاربرانی که تخصص کافی در طراحی صفحات وب و زبان HTML ندارند، این فرصت را می‌دهد که محتوای موردنظر خود را به‌طور امن و بدون تأثیر در نواحی حساس که باید توسط کاربران ماهرتر تغییر داده شوند، در محل مورد نظر وارد کنند. در سطح دیگر شما می‌توانید با انتساب مقدارهای on یا off به تمام صفحه قابلیت ویرایش بدهید یا این قابلیت را غیرفعال کنید. این امکانات می‌توانند نقطه آغاز موجی از تحولات و رویکردهای جدید در دنیای وب باشند.
دسترسی به عناصر از طریق نام کلاس
در یک سند وب ممکن است برخی از عناصر با اختصاص نام یک کلاس به آن‌ها، در یک دسته قرار بگیرند و به این ترتیب از سایر عناصر متمایز شوند. در حال حاضر، امکان دسترسی به عناصر عضو یک کلاس در زبان HTML پشتیبانی نمی‌شود و توسعه‌دهنده در صورت نیاز به این کار می‌تواند از جاوا اسکریپت استفاده کند. اما در HTML5 متدی در نظر گرفته شده که با فراخوانی آن می‌توان به عناصری که در یک کلاس قرار دارند، دسترسی پیدا کرد. بعد از استفاده از این متد که در واقع نوعی انتخابگر محسوب می‌شود، فهرستي از عناصر را در اختیار خواهیم داشت که می‌توان عمليات مورد نظر را روی آن انجام داد.
عنصر ویديویی
از این پس برای استفاده از فایل‌های ویديویی در اسناد وب به برنامه‌های جانبی نیاز نخواهیم داشت. با استفاده از عنصر video قادر خواهید بود، فایل ویديویی خود را به منظور پخش در مرورگرها به صفحات وب خود ضمیمه کنید. برخی ازسایت‌های فعال در ارائه خدمات ویديویی هم‌اکنون ازاین قابلیت استفاده کرده‌اند تا افرادی که از مرورگرهای سازگار با HTML5 استفاده می‌کنند برای پخش این نوع فایل‌ها به نصب نرم‌افزارهای جانبی نیازی نداشته و تنها به قابلیت‌های مرورگر خود متکی باشند.
عنصر صوتی
برای پخش فایل‌های صوتی نیز می‌توانیم از عنصر جدید audio استفاده کنیم. البته، در حال حاضر مرورگرهای مختلف با این بخش به شکلی متفاوت برخورد می‌کنند. به عنوان مثال، فایرفاکس با رسیدن به این بخش به دنبال یک فایل با قالب ogg می‌گردد و سافاری در پی یک فایل mp3 خواهد گشت. اپرا نیز تنها با فایل‌های wav کار می‌کند. بنابراین، شاید لازم باشد تا مشخص شدن تکلیف این مسئله از دو نسخه فایل صوتی استفاده کنیم. هر مرورگر در صورتی که فایل مورد نظر خود را در تگ source پیدا نکند به راحتی آن را نادیده گرفته و به تگ بعد خواهد رفت.
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3” />
<a href=”file.mp3”>Download this file.</a>
</audio>
منبع:http://www.shabakeh-mag.com/Article.aspx?id=1004836