طراحی قالب وردپرس

HTML5 و آینده وب

طراحی HTML5
اصول مقدماتی کدنویسی HTML5 چه هستند؟

شروع سند با  : <!DOCTYPE html> است و مانند xHTML سایر توضیحات اضافی ندارد.

در نگاه اول به HTML5، تگهای جدیدی جلب توجه می کنند. ما با تگهای ساختاری مانند <header> و <footer> و <canvas> ، <audio> و … سر و کار داریم. تگهای ساختاری جدید:

<header>

تگ هدر شامل اطلاعات مقدماتی برای یک بخش یا صفحه است. این می تواند شامل هر چیزی از هدر اسناد عادی ما (اطلاعات نام تجاری) تا لیستی از تمام مطالب موجود در سند ما باشد.

<nav>

تگ منو برای یک بخش از یک پرونده که حاوی پیوندهایی به صفحات دیگر و یا لینک به بخش های همان صفحه می باشد استفاده میشود. (ایجاد منوهایی که به نام Navigation است)

<section>

تگ “قسمت” نشان دهنده یک بخش عمومی یا بخش کاربردی سند است.  این قسمت شبیه بخش <div>  عمل می کند با این تفاوت که نقش جداسازی بخشی از سند را ایفا میکند.

<article>

تگ مقاله نشان دهنده بخشی ازصفحه که می تواند به تنهایی نقش ایفا کند مانند: یک پست وبلاگ ، مطلبی از انجمن ، نظرات ارائه شده کاربر و یا هر مورد  مستقل از محتوا.

<aside>

نشان دهنده محتوا مربوط به بخش اصلی سند است.

<footer>

این تگ برای مشخص کردن پانویس نه تنها صفحه، بلکه هر یک از بخش های موجود در صفحه است .

html5

عناصر <header>  و <footer> نه تنها برای جداسازی بالا و پایین صفحه در سند استفاده می شوند بلکه نشان دهنده   header و  footer هر بخش از سند نیز میباشد.
مزایای استفاده از این عناصر ساختاری است که عمدتا به دلیل این واقعیت است که برای موتورهای جستجو خیلی خوب تعریف شده و راه حل مناسبی را برای ساختار سند به موتور جستجو ارائه می دهد.

مزایای استفاده از HTML5

  • توسعه API : به راحتی می توان آنرا با سایر سیستم ها و زبان ها مچ کرد.
  • ذخیره داده ها به صورت آفلاین: برنامه ای مانند Thunderbird و Outlook به شما این امکان را می دهند تا به داده های قدیمی خود در حالی که آفلاین هستید دسترسی پیدا کنید، HTML5 نیز این امکان را به شما میدهد.
  • کشیدن و رها کردن(drag & drop) : بنابر تعریف API ، به فرآیند کشیدن و رها کردن اطلاق میشود.
  • صوت و تصویر(video & audio) : صوت و تصویر سبب ایجاد تغییرات عظیمی در قرار دادن رسانه ها در سند HTML  تلقی میشود و کار را برای طراحان حرفه ای وب بسیار ساده کرده است.
  • منطقه جغرافیایی(geolocation): هدف آن تعیین اطلاعات منطقه ای از طریق کامپیوتر یا ابزار همراه و تبلت و … کاربر است.

کاربرد HTML5 در گوشیهای تلفن همراه

برای استفاده موثر از HTML5 باید قادر به کنترل محیطی باشیم که HTML5 در آن استفاده می شود.با توجه به اینکه Webkit راه را برای HTML5 هموار کرده است، میتوانیم تمرکز خود را معطوف به ابزاری کنیم که توسط Webkit پشتیبانی میشوند.

چگونه میتوانیم گامی به جلو برداریم؟

در اینجا به ذکر مواردی میپردازیم که با توجه به آنها میتوانیم در جهت مثبت گامی به جلو برداریم:

•    نامگذاری DIV معنایی: هماهنگی معنایی اسامی DIV با عناصر جدید HTML5 به شما در استفاده از اسامی و همچنین کارکرد جدید آن کمک خواهد کرد.
•    جا به جایی با javascript
•    ایجاد عناصر جدید با استفاده از javascript: به شما این امکان را میدهد که عناصر جدید را در اینترنت اکسپلورر تبدیل کنید. (زیرا نسخه های قدیمی IE از این تکنولوژی جدید وب ساپورت نمی کند!)

document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
document.createElement('figure');
document.createElement('time');
  •   ساخت برنامه های خاص برای مرورگرها : همانطور که در بالا ذکر شد ، همه چیز در مورد کنترل محیط است، اگر بتوانیم محیط را کنترل کنیم میتوانیم ویژگیهای مورد نظر کاربر را بهتر کنترل کنیم. این دقیقا همان کاریست که گوگل با استفاده از Google Wave  در حال انجام آن است.

google-wave

•    تمرکز بر روی تلفن همراه: با در اختیار داشتن عامل کاربر میتوانیم برنامه ای طراحی کنیم که از HTML5 برای دستگاههای مورد نظر استفاده کنیم. در حال حاضر، بهترین پلت فرم تست تلفن همراه آی فون است.

نتیجه گیری

از HTML5 به عنوان یک زبان نشانه گذاری (کدنویسی) قدرتمند یاد میشود و این بر عهده ما است تا از آن به بهترین شکل استفاده کنیم. ما میتوانیم داده ها به صورت آفلاین در اختیار داشته باشیم، با استفالده از ترکیب تکنولوژی انیمیشن های پیچیده خلق کنیم.

برای کدنویسی HTML5 می توانید آرنیکاوب را انتخاب خود قرار دهید.

خواندن مطالب زیر را نیز به شما پیشنهاد میکنیم:

دیدگاهها و نظرات کاربران عزیز

سوال یا نظری دارید؟ بنویسید و ارسال کنید.