HTML5

پیش‌نمایش‌های HTML5

مجموعه‌ای از پیش‌نمایش‌ها که آخرین فناوری‌های به‌کاررفته در HTML را در عمل نشان می‌دهند.

HTML5_Logo_128.png

HTML5 آخرین نسخه از مجموعه استانداردهای HTML است، که نشان‌دهنده‌ی دو مفهوم متفاوت است:

  • نسخه‌ای جدید از زبان HTML، با عنصرهای جدید، صفت‌ها و رفتار آن‌ها.
  • مجموعه‌ای بزرگتر از فناوری‌ها که منجر به تولید وب‌سایت‌ها و برنامه‌های قدرتمند و گوناگونی می‌شوند: که به این مجموعه HTML5 و دوستان یا به اختصار HTML5 گفته می‌شود.

این صفحه به منابع متفاوتی از فناوری‌های HTML5 پیوند خورده است، دسته‌بندی شده در گروه‌های مختلف، که هر گروه دربرگیرنده‌ی فعالیتی متفاوت است: semantics (عنصر‌های معناگرا)، که در توضیح هر چه بیشتر و دقیق‌تر محتوا نقش دارند، connectivity (اتصال)، که روش‌های جدیدی برای برقراری ارتباط با سرور معرفی می‌کند، offline & storage (ذخیره‌سازی آفلاین)، که وب‌سایت را برای ذخیره‌ی داده‌های آفلاین و عملکرد بهتر زمانی که مرورگر کاربر در حالت آفلاین قرار دارد بهینه می‌کند، multimedia (محتوای چندرسانه‌ای)، که صوت و تصویر را به عنوان شهروند درجه یک وب معرفی می‌کند، 3D، Graphics & Effects (سه‌بعدی، گرافیک و جلوه‌های تصویری)، که به ارایه‌ی جلوه‌های تصویری پیچیده‌تر منجر می‌شود، performance & integration (عملکرد و جامعیت)، که وب‌سایتی سریع‌تر و در عین حال منطبق‌تر با رایانه‌ی کاربر می‌سازد، device access (دسترسی از طریق سایر دستگاه‌ها)، که اجازه‌ی استفاده‌ی دستگاه‌های ورودی/خروجی بیشتری را می‌دهد، و styling (سبک‌دهی)، که دست توسعه‌دهندگان در ایجاد قالب‌های پیچیده‌تر را باز می‌کند.

Semantics (عنصرهای معناگرا)

بخش‌های مختلف صفحه در HTML5
نگاهی به عنصرهای بخش‌بندی صفحه در HTML5:
<section>, <article>, <nav>, <header>, <footer>, <aside> و <hgroup>.
استفاده از audio و vedio در HTML5
عنصرهای <audio> و <video> با قرارگرفتن در صفحه، اجازه‌ی تغییراتی جدید در نحوه‌ی اجرای محتوای چندرسانه‌ای را می‌دهند.
فرم‌ها در HTML5
نگاهی به بهبودهای ایجادشده در فرم‌های وب، constraint validation API، چند صفت جدید، مقدارهای جدیدی برای <input> صفت type و عنصر جدید <output>.
عنصرهای معناگرای جدید
علاوه بر عنصرهای بخش‌بندی، رسانه و فرم، عنصرهای متعددی مانند <mark>، <figure>، <figcaption>، <data>، <time>، <output>، <progress>، یا <meter> تعداد عنصرهای مجاز HTML5 را افرایش می‌دهند.
بهبودهای ایجادشده در <iframe>
با استفاده از صفت‌هایsandbox، seamless و srcdoc توسعه‌دهندگان می‌توانند میزان امنیت و کارکرد یک عنصر <iframe> را به دقت بررسی کنند.
MathML
استفاده از فرمول‌های ریاضی را به صورت مستقیم در کد، ممکن می‌سازد.
مقدمه‌ای بر HTML5
این مقاله به معرفی مشکلات موجود HTML5 که در طراحی وب یا برنامه‌ی وب ممکن است وجود داشته باشند، می‌پردازد.
مفسر منطبق بر HTML5
مفسر، که بایت به بایت از یک سند HTML را به درخت DOM تبدیل می‌کند، گسترش یافته‌است و به دقت رفتاری که در تمامی حالت‌ها پیش می‌آید بررسی کرده، حتی کد نامعتبر HTML را، که منجر به بهینه‌تر شدن و قابل‌پیش‌بینی‌تر شدن مرورگرهای منطبق با HTML5 می‌شود.

Connectivity (اتصال)

Web Sockets
اجازه‌ی برقراری یک ارتباط پایدار بین صفحه و سرور را می‌دهد که از طریق آن می‌توان به مبادله‌ی داده‌هایی غیر از سند HTML پرداخت.
رخدادهای سمت سرور
سابق بر این سرور تنها با دریافت درخواست از مرورگر (کاربر) می‌توانست به آن پاسخ دهد اما الان می‌تواند این کار را بدون درخواست مرورگر نیز انجام دهد.
WebRTC
این فناوری، که مخفف Real-Time Communication یا ارتباط بلادرنگ است، اجازه‌ی برقراری ارتباط با سایر افراد و کنترل ویدیوکنفرانس به طور مستقیم از مرورگر را می‌هد بدون آن‌که به افزونه‌ای خاص یا برنامه‌ای خارجی نیاز باشد.

Offline & storage (ذخیره‌سازی آفلاین)

منابع آفلاین: حافظه‌ی نهان برنامه
Firefox به طور کامل منابع آفلاین در HTML5 را پشتیبانی می‌کند. سایر مرورگرها نیز این ویژگی را کمابیش پشتیبانی می‌کنند.
رخدادهای آنلاین و آفلاین
Firefox 3 مستندات WHATWG درباره‌ی رخدادهای آنلاین و آفلاین را پشتیبانی می‌کند، که به برنامه‌ها اجازه می‌دهد تشخیص بدهند آیا یک اتصال اینترنت فعال موجود است یا خیر، یا اینکه آیا یک اتصال قطع و وصل می‌شود یا خیر.
نشست سمت-مرورگر WHATWG و ذخیره‌سازی پایدار (در برابر ذخیره‌سازی DOM)
نشست سمت-مرورگر و ذخیره‌سازی پایدار به برنامه‌های وب اجازه می‌دهند که ساختارداده‌های مورد نیاز خود را در مرورگر کاربر ذخیره‌سازی کنند.
IndexedDB
یک استاندارد وب است که برای ذخیره‌سازی داده‌ها با حجم بالا در مرورگر کاربر به کار می‌رود و برای جستجوهای با سرعت بالا بر این داده‌ها با استفاده از اندیس‌ها، صورت می‌پذیرد.
استفاده از فایل‌ها توسط برنامه‌های وب
پشتیبانی از API جدید فایل در HTML5 به Gecko اضافه‌شده است تا برنامه‌های وب بتوانند به فایل‌هایی که کاربر انتخاب می‌کنند دسترسی داشته باشند، که این امر شامل پشتیبانی از فایل‌های چندگانه  با استفاده از عنصر <input> که از نوع فایل می‌باشد، می‌شود یا صفت جدید multiple. همچنین FileReader نیز وجود دارد.

Multimedia (چندرسانه‌ای)

استفاده از audio و vedio در HTML5
عنصرهای <audio> و <video> با قرارگرفتن در صفحه، اجازه‌ی تغییراتی جدید در نحوه‌ی اجرای محتوای چندرسانه‌ای را می‌دهند.
WebRTC
این فناوری، که مخفف Real-Time Communication یا ارتباط بلادرنگ است، اجازه‌ی برقراری ارتباط با سایر افراد و کنترل ویدیوکنفرانس به طور مستقیم از مرورگر را می‌هد بدون آن‌که به افزونه‌ای خاص یا برنامه‌ای خارجی نیاز باشد.
استفاده از API دوربین
اجازه‌ی استفاده، تغییر و ذخیره‌سازی یک تصویر (عکس) را از دوربین رایانه‌ی کاربر می‌دهد.

3D, graphics & effects (سه‌بعدی، گرافیک و جلوه‌های تصویری)

خودآموز Canvas
درباره‌ی عنصر جدید <canvas> و چگونگی رسم نمودارها و سایر اشیا در Firefox بیاموزید.
API متن HTML5 برای عنصرهای <canvas>
API متن در HTML5 توسط عنصرهای <canvas> پشتیبانی می‌شوند.
WebGL
WebGL گرافیک سه‌بعدی را با معرفی APIای که بسیار نزدیک به OpenGL ES 2.0 عمل می‌کند، به صفحات وب می‌آورد که می‌تواند در عنصرهای <canvas> در HTML5 به کار رود.
SVG
فرمتی مبتنی بر XML از تصاویر برداری که به صورت مستقیم می‌تواند در سند HTML به کار رود.

Performance & integration (عملکرد و جامعیت)

Web Workers
به فایل‌های JavaScript اجازه می‌دهد که در پس‌زمینه و بدون این‌که رخدادهای فعال را درگیر خود سازند، اجرا شوند.
XMLHttpRequest سطح ۲
اجازه‌ی برقراری ارتباط بخشی از صفحه با سرور را می‌دهد، تا محتوای پویا را بر اساس فعالیت کاربران یا زمان تغییر دهد. این فناوری پایه و اساس Ajax است.
JIT - کامپایل‌کردن موتورهای JavaScript
نسل‌ جدید موتورهای JavaScript بسیار قدرتمندتر از نسل قبلی هستند که در اجرا و عملکرد برنامه‌های JavaScript بسیار تاثیرگذار هستند.
History API
اجازه‌ی دستکاری تاریخچه (history) مرورگر را می‌دهد که این کار برای صفحاتی که شامل اطلاعات جدید هستند، مفید می‌باشد.
صفت contentEditable: وب‌سایت خود را به یک wiki تبدیل کنید!
HTML5 صفت contentEditable را استاندارد کرده است. درباره‌ی این ویژگی بیشتر بدانید.
کشیدن و رهاکردن
API کشیدن و رهاکردن در HTML5 پشتیبانی از این عملیات را در وب‌سایت‌ها و بین‌ وبسایت‌ها میسر می‌کند. همچنین یک API ساده‌تر را جهت استفاده در extensionها و برنامه‌های مبتنی بر Mozilla شامل می‌شود.
مدیریت Focus در HTML
صفت‌های جدید activeElement و hasFocus  در HTML5 پشتیبانی می‌شوند.
protocol handlerهای مبتنی بر وب
شما اکنون می‌توانید برنامه‌های وب را با استفاده از متد navigator.registerProtocolHandler() به عنوان protocol handler ثبت کنید.
requestAnimationFrame
اجازه‌ی کنترل رندرشدن انیمیشن‌ها را برای دستیابی به عملکردی بهینه، می‌دهد.
Fullscreen API
چگونگی استفاده از حالت تمام‌صفحه را کنترل می‌کند، بدون این‌که واسط کاربری (پیش‌فرض) مرورگر نمایش داده شود.
Pointer Lock API
اجازه‌ی قفل شدن اشاره‌گر (ماوس) روی محتوا را می‌دهد، تا بازی‌ها و برنامه‌های مشابه دیگر مشکل از دست‌رفتن focus را نداشته باشند.
رخدادهای آنلاین و آفلاین
برای ایجاد یک برنامه‌ی وب با قابلیت اجرای آفلاین، شما باید بدانید چه زمانی برنامه‌ی شما واقعا در حالت آفلاین قرار می‌گیرد. همین‌طور باید بدانید چه زمانی برنامه‌ی شما در حالت آفلاین باز می‌گردد.

Device access (دسترسی از طریق سایر دستگاه‌ها)

استفاده از API دوربین
اجازه‌ی استفاده، تغییر و ذخیره‌سازی یک تصویر (عکس) را از دوربین رایانه‌ی کاربر می‌دهد.
رخدادهای Touch
handlerهایی که به رخدادهای ایجادشده توسط کاربری که با صفحه‌ی لمسی کار می‌کند، پاسخ می‌دهد.
استفاده از geolocation
این اجاره را به مرورگر می‌دهد تا موقعیت جغرافیایی کاربر را شناسایی کند.
شناسایی جهت دستگاه
این اجازه را به مرورگر می‌دهد تا هرگاه جهت دستگاهی که مرورگر روی آن کار می‌کند تغییر یافت، اطلاعات آن را دریافت کند. از این ویژگی می‌توان به عنوان یک دستگاه ورودی استفاده کرد برای نمونه (ساخت بازی‌هایی که به تغییر جهت دستگاه واکنش نشان می‌دهند یا منطبق ساختن ظاهر یک صفحه با جهت نمایش دستگاه - افقی یا عمودی).
Pointer Lock API
اجازه‌ی قفل شدن اشاره‌گر (ماوس) روی محتوا را می‌دهد، تا بازی‌ها و برنامه‌های مشابه دیگر مشکل از دست‌رفتن focus را نداشته باشند.

Styling (سبک‌دهی)

CSS گسترش یافته است تا سبک‌دهی به عنصرها را به حالتی پیشرفته‌تر منتقل کند. از این ویژگی‌ها اغلب به عنوان CSS3 یاد می‌شود، از این رو CSS دیگر یک استاندارد یک‌پارچه نیست و ماژول‌های مختلف آن در سطح ۳ نیستند، بعضی در سطح ۱ و بعضی در سطح ۴، با تمام سطح‌های میانی که وجود دارند.

ویژگی‌های جدید در سبک‌دهی تصویر پس‌زمینه
اکنون ایجاد سایه در یک عنصر (جعبه) با استفاده از box-shadow میسر است و تصویرهای پس‌زمینه‌ی چندگانه قابل استفاده هستند.
حاشیه‌هایی جذاب‌تر
اکنون نه تنها می‌توان با استفاده از تصویر‌ها و به کارگیری border-image ،‌حاشیه‌ی عنصرها را ایجاد کرد بلکه کناره‌های گرد (rounded-borders) نیز با استفاده از ویژگی border-radius قابل پیاده‌سازی هستند.
پویانمایی
با استفاده از تبدیلات در CSS برای پویانمایی بین حالت‌های مختلف یا از پویانمایی در CSS جهت پویانمایی بخشی از صفحه بدون نیاز به رخدادهای جاوااسکریپت، شما می‌توانید عنصرهای متحرک در صفحه‌ی خود را کنترل کنید.
بهبودهای ایجاد شده در Typography
توسعه‌دهندگان برای دسترسی به Typography بهتر اکنون کنترل بیشتری دارند. آن‌ها می‌توانند text-overflow و فاصله‌گذاری را کنترل کنند، همچنین سایه‌ای که به متن اعمال می‌شود یا جزییات‌متن را به دقت کنترل کنند. به لطف ویژگی @font-face فونت‌های مختلفی را می‌توان به صفحه‌ی خود پیوست کرد.
لایه‌های نمایشی جدید
در راستای ارتقای انعطاف‌پذیری در طراحی، دو لایه‌ی جدید افزوده شده‌اند: CSS multi-column layout و CSS flexible box layout.

Document Tags and Contributors

Contributors to this page: teoli, hamekas.2003, navid-emami
Last updated by: teoli,