جایگاه HTML در طراحی
در طراحی و پیاده سازی صفحات وب و application های تحت وب، تکنولوژی های متعددی مورد استفاده قرار می گیرند که هر کدام کاربرد خاص خود را دارند. در این بین کاربردها و اهداف اصلی استفاده از HTML را در دو مورد زیر می توان خلاصه کرد:
- توصیف ساختار معنایی اطلاعات
- تولید رابط کاربری و فرم های ورود اطلاعات
البته از HTML برای توصیف ساختار ظاهری اطلاعات هم استفاده می شود که امروزه این کار تقریبا منسوخ شده و این وظیفه به
CSS محول شده است. به عبارت دیگه CSS برای جدا کردن ساختار ظاهری از ساختار معنایی ابداع شد. و بنابراین امروزه استفاده از تگهایی نظیر font و center و همچنین استفاده ازattribute هایی نظیر bgcolor و width داخل HTML تقریبا منسوخ شده است. در راستای جدا کردن ساختار ظاهری از HTML حتی استفاده از table برای طراحی ساختار صفحات هم به نوعی منسوخ دانسته شده و به جای آن از طراحی های مبتنی بر div و CSS استفاده میشود.
فرایند تکامل HTML5
HTML 4 در سال ۱۹۹۷ منتشر شد. با گذشت زمان نیاز به ایجاد تغییرات برای برآوردن نیازهای جدید احساس میشد. روند کند توسعه استانداردهای وب که تحت نظارت W3C انجام میشد باعث شد تا گروه
WHATWG متشکل از علاقمندان و نمایندگانی از شرکت های فعال در این عرصه نظیر Mozilla ، Opera و Apple در سال ۲۰۰۴ تشکیل شود. حاصل کار چند ساله این گروه در اواسط سال ۲۰۰۷ برای تدوین استاندارد HTML5 مورد قبول W3C واقع شد. HTML5 نسخه شماره ۵ زبان اصلی World Wide Web یعنی HTML است. این نسخه در تاریخ ۲۲ ژانویه ۲۰۰۸ بوسیله کنسرسیوم وب جهانی (W3C) منتشر شد. ایده ابتدایی این نسخه از HTML در سال ۲۰۰۴ در WHATWG کلید خورد. این گروه کاری شامل شرکت های بزرگی مانند AOL، Apple، Google، IBM، Microsoft، Mozilla، Nokia، Opera و … می باشد.
نشانه های جدید
HTML 5 عناصر و ویژگی های جدیدی به تگ ها (tag) ها اضافه کرده است. از لحاظ تکنیکی بعضی از این تگ ها به div و span شبیه هستند. به عنوان مثال تگ جدید nav و تگ جدید footer از این دسته هستند. بعضی دیگر از تگ های جدید مخصوص موتور های جستجو (برای ایندکس کردن اطلاعات) ، دستگاه های دارای صفحه کوچک (مانند موبایل) و یا خواننده های صوتی می باشند مانند تگ های جدید audio و video. همچنین بعضی از عناصر حذف شده اند. مانند تگ center.
چه امکاناتی را میتوان از Html5 انتظار داشت؟
- فضای آفلاین: Google Gears را میشناسید؟ HTML5 قرار است چیزی شبیه آن در خود داشته باشد. برای مثال میتوان باHTML5 ایمیلهای خود را به صورت آفلاین خواند. مثال دیگر این است که سایتها میتوانند برخی از اطلاعات خود را بر روی سیستم شما ذخیره کنند و این یعنی چند برابر سرعتی که الان داریم درست مثل یک "ابر کوکی".
- اشکال غیر منظم: با امکانات کنونی تنها شکلی که میتوان برای قسمتهای صفحه داشت مستطیل است در حالیکه در HTML5 دیگر از این محدودیت ها خبری نیست. میتوانید از هر گوشه صفحه بهترین استفاده را ببرید. حتی میتوانید تنها با کد نویسی تصاویر, نمودارها و هرچیزی را که فکر کنید در صفحه خود داشته باشید. دیگر مجبور به استفاده از فلش یا افزونه های دیگر نیستید.
- پخش صوت و ویدیو به صورت مستقل: اگر مطلب قبلی من در مورد فایرفاکس و پخش ویدیو بدون هیچ افزونه راخوانده باشید با این قابلیت آشنا هستید. این یعنی اینکه دیگر لازم به استفاده از Flash برای پخش ویدیو و صدا نیستید. به راحتی میتوان از یک خط کد برای اینکار استفاده کرد و در عین حال تمام قابلیتهایی نظیر عقب و جلو کردن, ذخیره ویدیو و … را در اختیار داشته باشید.
- مکان یابی: HTML5 میتواند مکان شما را تشخیص دهد و نتایج جستجو را بر حسب مکان شما سفارشی کند و یا اینکه ورودی های twitter شما را برچسب گذاری کند.
- فرمهای هوشمندتر: جعبه های متن, checkbox ها, منوهای کشویی و تمام عناصر یک فرم هوشمندانه تر عمل خواهند کرد و به شما امکانات بیشتری برای کنترل اطلاعات خواهند داد. برای مثال شما میتوانید هنگام ورود اطلاعات صحت و اعتبار آنها را کنترل کنید. همچنین عناصر فرم تعامل بیشتری با هم خواهند داشت.
- تمرکز بر برنامه های تحت وب: آینده ازآن برنامه های آنلاین خواهد بود. HTML5 این امکان را میدهد که یک برنامه تحت وب بدون هیچ مشکلی با هر نوع سیستمی سازگار باشد و به کاربران این فرصت را میدهد تا بدون استفاده از ابزاری خاص از یک برنامه لذت ببرند. با HTML5 میتوان ابزارهای چت، انجمن، سایتهای drag-and-drop نوشت.
تفاوت ها با HTML 4
لیست تعدادی از تفاوت های HTML 5 با HTML 4 به طور خلاصه (تعداد کمی از نمونه ها نمایش داده شده است) عبارتند از:
- عناصر جدید – section, video, progress, nav, meter, time, aside, canvas
- عناصر صفحه – header, section, footer, figure
- ویژگی های جدید برای تگ Input – date/time, email, url
- ویژگی های جدید – ping, charset, async
- ویژگی های عمومی (به تمامی عناصر قابل اعمال هستند) – id, tabindex,repeat
- عناصر حذف شده – center, font, strike
تغییرات HTML5
تغییرات HTML5 بیشتر در رابطه با هر چه بهتر برآوردن دو هدفی است که پیشتر گفته شد.
» تگ های جدیدی که برای توصیف بهتر ساختار معنایی اطلاعات افزوده شده عبارتند از:
section , article , aside, header , footer , nav , dialog , figure
» تغییرات جدید برای طراحی بهتر فرم های ورود اطلاعات، افزوده شدن انواع جدیدی از input نظیر :
datetime, datetime-local, date, month, week, time, number, range, email, url
تگ های جدید output و datalist
» برخی از تگ های جدید برای پویا تر شدن محتوا و رابط کاربری:
audio, video, canvas, meter, progress, event-source, …
مشاهده لیست کامل تغییرات (در سایت W3C)
برای مشاهده تگ های جدید اضافه شده به نسخه ۵ و توضیح کوتاهی در مورد هر یک، به صفحه HTML 5 Reference مراجعه نمایید. تگ های جدید با (NEW) مشخص شده است. (در سایت W3schools)
ساختار کلی یک صفحه وب مبتنی بر HTML۵
همانطور که گفته شد HTML5 تغییرات بسیاری نسبت به نسخه پیشین خود داشته است. یکی از مهمترین ویژگی های HTML5 مشخص نمودن نوع محتوا است که میتواند تحولی در عرصه موتورهای جستجو باشد به این صورت که شما با مشخص کردن مکان دقیق مطالبتان، آنها را از قسمتهای دیگر سایت که همیشه ثابت هستند جدا کرده و باعث دستهبندی صحیح محتوا برای موتورهای جستجو میشوید.
در اینجا با تصویری ساده درباره این قابلیت HTML5 توضیح می دهیم.
همانطور که در تصویر مشاهده میکنید تمامی قسمتها توسط تگهایی از یکدیگر جدا شدهاند و این، کار را برای موتورهای جستجو راحت میکند.
در ادامه توضیح کوتاهی در مورد تگ های موجود در تصویر ارائه می دهیم:
<header>
همانطور که از نامش پیداست مکان دقیق سربرگ سایت را مشخص میسازد و تمامی عناصر مربوط به سربرگ بین دو تگ
<header> و </header> قرار میگیرند به صورت زیر:
<header>
.
.
</header>
<aside>
محتوای سایت که در کنار صفحه و جدا از محتوای اصلی تعریف شده و با محتوای قسمت های دیگر صفحه مرتبط می باشد در تگ <aside> قرار می گیرند. لینک های صفحه در این قسمت قابل تعریف می باشند.
<section>
از این تگ برای تعریف بخش ها در صفحه استفاده می شود. فصل ها ، سرصفحه ، پاورقی ، بخش های مربوط به تبلیغات و یا هر بخش دیگر از صفحه با این تگ مشخص و مجزا می گردد.
<article>
جهت تعریف محتوای خارجی از تگ <article> استفاده می شود. محتوای خارجی می تواند یک مقاله خبری از ارائه دهنده های خارجی، یک متن از وبلاگ و یا یک متن از یک بخش یا هر چیز دیگر از یک منبع خارجی باشد.
<footer>
تگ <footer> همانطور که از نامش پیداست برای مشخص کردن مکان پابرگ سایت یا وبلاگ استفاده میشود و تمامی عناصری که در قسمت پابرگ صفحه قرار میگیرند بین دو تگ <footer> و </footer> قرار میگیرند.
در اینجا جا دارد کمی هم درباره ساختار یک صفحه وب صحبت کنیم.
در نسخه قدیمی HTML یعنی نسخه ۴ آن برای شروع کدنویسی هر صفحه باید استاندارد آن صفحه تایید میشد که با کد زیر مشخص میشود:
<!DOCTYPE html PUBLIC "-//W۳C//DTD XHTML ۱.۰ Transitional//EN" "http://www.w۳.org/TR/xhtml۱/DTD/xhtml۱-transitional.dtd">
<html xmlns="http://www.w۳.org/۱۹۹۹/xhtml">
اما در HTML۵ دیگر لازم نیست دو خط کد بنویسید تا استاندارد بین المللی HTML را مشخص کنید و فقط کافی است با کد زیر در ابتدای کدها، استانداردتان را مشخص کنید:
<!DOCTYPE html>
همانطور که مشاهده کردید کدها در HTML۵ بسیار بهینهتر از گذشته شده اند
تگهای بسیاری در نسخه جدید جایگزین چندین خط کد شدهاند.
به عنوان مثال برای مشخص کردن نوع کاراکتر صفحه و تنظیم آن به UTF8 در نسخه قبلی باید کد زیر نوشته می شد:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
اما حالا در نسخه جدید فقط کافی است از کد زیر استفاده کنید:
<meta charset="UTF-۸">
این کدها در مورد فایلهای موجود در صفحه سایت نیز صدق میکنند. شما قبلا برای قراردادن یک اجرا کننده صوتی یا تصویری در سایت باید از چندین خط کد استفاده میکردید و برای داشتن یک اجرا کننده خوشساخت باید دست به دامان جاوا اسکریپت و فلش میشدید ولی در HTML5 به راحتی و فقط با یک تگ میتوانید یک اجرا کننده فایلهای صوتی و تصویری با ظاهری زیبا داشته باشید.
سازگاری مرورگرها با HTML5
اکثر مرورگر ها به غیر از IE همگام با استاندارد ها پیش میروند و کم و بیش از استاندارد های جدید پشتیبانی میکنند. هم اکنون نسخه های بتای firefox3 و opera9.5 تا حدودی از HTML5 پشتیبانی میکنند. قطعا زمانیکه HTML5 از پیش نویس خارج شده و کاربردی شود این مرورگر ها هم از نسخه بتا خارج شوند، میتوان انتظار داشت تا از HTML5 و CSS3 پشتیبانی قابل قبولی داشته باشند. با توجه به این که اکثر کاربران این مرورگرها از نسخه های آپدیت استفاده میکنند در آینده نزدیک مشکل خاصی با این مرورگرها وجود نخواهد داشت. اما IE که متاسفانه حدود ۷۵ درصد از کاربران وب از آن استفاده میکنند. بعید به نظر میرسد که در آینده نزدیک (و یا حتی دور) پشتیبانی قابل قبولی از HTML5 و CSS3 داشته باشد. IE6 در سال ۲۰۰۱ منتشر شد و در سال ۲۰۰۵ نسخه ی ۷ این مرورگر در حالی منتشر شد که پیشرفت چشمگیری نسبت به نسخه قبل نداشت و حتی هنوز از CSS2 هم پشتیبانی خوبی نداشت. و اگر مایکروسافت این روند را در پیش بگیرد نمیتوان به IE8 امیدوار بود.
HTML5، طراحان وب و مرورگرها
از آنجایی که سازگاری یکسان همه مرورگرها با استاندارد های وب ظاهرا" رؤیایی بیش نیست. لذا طراحان وب چاره ای ندارند جز اینکه خودشان طرح ها یشان را با مرورگر ها سازگار کنند. برای مثال برای پشتیبانی از canvas در IE میتوان از explorercanvas استفاده کرد که در واقع canvas شبیه سازی شده با استفاده از جاوااسکریپت و vml است.
HTML5 و CSS3 برای راحت تر و بهتر شدن طراحی بوجود آمده اند ولی با توصیفاتی که ذکرش رفت، طراحی با تکنولوژی های جدید و در عین حال سازگار بودن با تمام مرورگرها کار را دشوار تر میکند. اما چاره ای نیست چون گذر از این مراحل برای پیشرفت لازم است حتی اگر دشوار باشد و حتی اگر موانعی نظیر IE بر سر راه باشد.
نکته: XHTML5 در واقع همان HTML5 با رعایت قوانین XML هست. ولی در مورد XHTML2.0 بر خلاف XHTML1 که بر اساس HTML4 توسعه یافته، XHTML 2.0 کاملا مستقل از HTML5 هست و حتی با XHTML 1.1 هم سازگاری ندارد.
برای آشنایی هر چه بیشتر با نسخه ۵ HTML مشاهده ویدئویی در این مورد خالی از لطف نیست.
زمان ویدئو تقریبا" ۴۲ دقیقه بوده و برای مشاهده آنلاین آن داشتن اینترنت پر سرعت الزامی است.
» لینک ویدئو: http://www.vimeo.com/6691519
» زبان: English
» زمان: ۴۱:۵۵ دقیقه
منابع:
http://www.w3schools.com
http://www.pcpedia.ir
http://forum.downloadina.com
http://www.faroxa.com
منبع فارسی:
http://www.webexpress.ir
توضیحاتی درباره HTML 5
