طراحی سایت – HTML5 – پشتیبانی از مرورگرها

پشتیبانی مرورگرها از HTML5

HTML5 در بیشتر مرورگرهای مدرن پشتیبانی می شود. همچنین همه مرورگرهای قدیمی و جدید به صورت خودکار المان های ناشناخته را به عنوان المان inline در نظر می گیرند.

شما می توانید هنگام طراحی سایت به مرورگرهای قدیمی HTML5 را بیاموزید یا به عبارت دیگر نحوه برخورد این مرورگرهای قدیمی با المان های ناشناخته را تعیین کنید.

شما حتی می توانید به IE5 در (ویندوز XP 2001) بیاموزید که چگونه با المان های ناشناخته رفتار کند.

همه به یاد داریم که در گذشته تست و سازگار سازی طراحی سایت با مرورگر IE6 عذاب آورترین بخش از پروسه طراحی سایت به شمار می رفت.

تعریف المان های معنایی به عنوان بلوک عناصر

HTML5 هشت المان معنایی جدید معرفی کرده است. همه این المان ها block-level هستند.

المان های HTML همیشه block-level یا inline هستند. یک المان block-level همه فضای المان مادر یا در برگیرنده خود را اشغال می کند. مرورگرها معمولا المان block-level را با یک خط جدید قبل و بعد از آن نمایش می دهند.

برای اینکه اطمینان حاصل کنیم که مرورگرها قدیمی نیز این المان ها را به عنوان block در نظر می گیرند باید مقادیر CSS این المان ها را خودمان مقداردهی کنیم:

header, section, footer, aside, nav, main, article, figure {
        display: block;
 }

اضافه کردن عناصر جدید به HTML

المان های جدید را نیز می توان به صفحه html با ترفند زیر معرفی کرد. در این مثال یک المان به نام <myHero> به یک صفحه وب HTML به هنگام طراحی سایت اضافه شده و برای آن style تعریف شده است:

<!DOCTYPE html>
<html>
<head>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
      display: block;
      background-color: #dddddd;
      padding: 50px;
      font-size: 30px;
  } 
  </style> 
</head>
<body>

<h1>A Heading</h1>
<myHero>My Hero Element</myHero>

</body>
</html>

دستور جاوا اسکریپت زیر برای ساخت المان جدید در مرورگر IE9 و قدیمی تر ضروری است.

document.createElement("myHero")

مشکل IE8

روش بالا را برای تمامی المان های جدید html5 می توان استفاده کرد. البته IE8 و نسخه های پیش از آن امکان تغییر style المان های ناشناخته را نمی دهد. خوشبختانه Sjoerd Visscher یک کتابخانه به نام HTML5Shiv برای حل این مشکل ساخته است. HTML5Shiv یک راه حل javascript برای امکان تغییر ظاهر المان های HTML5 در نسخه های قبل از IE9 است.

در طراحی سایت به HTML5Shiv برای ایجاد سازگاری اینترنت اکسپلورر قبل از نسخه 9 نیاز دارید.

روش استفاده از HTML5Shiv در طراحی سایت

HTML5Shiv در داخل بخش <head> قرار می گیرد.

 HTML5Shiv یک فایل جاوااسکریپت است که باید در داخل تگ <script> آدرس دهی شود.

زمانیکه از تگ های <article> یا <section> یا <aside> یا <nav> یا <footer> در طراحی سایت استفاده می کنید باید از HTML5Shiv نیز بهره ببرید.

آخرین نسخه HTML5Shiv از github قابل دانلود است یا می توانید مستقیما از نسخه CDN آن در مسیر زیر استفاده کنید.

https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

نحوه استفاده از HTML5Shiv به صورت زیر است:

<head>
  <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->
</head>

مثال استفاده از HTML5Shiv در طراحی سایت

اگر نمی خواهید HTML5Shiv را دانلود کرده و در وب سایت خود قرار دهید می توانید مانند مثال زیر از نسخه CDN استفاده کنید.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <![endif]-->
 </head>
 <body>
    <section>
      <h1>Famous Cities</h1>
      <article>
         <h2>London</h2>
         <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
      </article>
      <article>
         <h2>Paris</h2>
         <p>Paris is the capital and most populous city of France.</p>
       </article>
       <article>
         <h2>Tokyo</h2>
         <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
       </article>
     </section>
 </body>
</html>

 

طراحی سایت – HTML5 – قابلیت های جدید

از زمانيکه HTML 4.01 در سال 1999 به عنوان يک استاندارد طراحی سایت معرفي شد خيلي موارد در اينترنت و حتي در مورد کاربران و نيازهاي آنها در دنیای طراحی سایت تغيير کرده است. امروزه بسياري از قابليت هاي HTML 4.01 منسوخ شده يا مورد استفاده قرار نميگيرد. بيشتر ويژگيهايي منسوخ و بي استفاده از HTML5 حذف شده اند يا در مورد بعضي از آنها بازنگريهايي صورت گرفته است.

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

<canvas>

تگتوضيحات
<canvas>از اين تگ براي ترسيم گرافيک هاي دو بعدي از طريق کدنويسي (معمولا جاوا اسکريپت) استفاده ميشود

تگ هاي مربوط به رسانه

تگتوضيحات
<audio>تعريف محتواي صوتي
<video>تعريف محتواي تصويري – فيلم و کليپ
<source>تعريف منابع مختلف براي صدا و تصوير
<embed>تعريف يک بخش براي برنامه خارجي يا يک محتواي تعاملي – پلاگين
<track>تعريف متن براي <audio> و <video>

المان هاي فرم

تگتوضيحات
<datalist>يک فهرست از حالت هاي پيش فرض براي کنترل هاي ورودي
<keygen>تعريف يک توليد کننده جفت کليد براي فرم ها
<output>تعريف نتيجه يک خروجي

المان هاي معنايي و ساختاري

HTML5 المان هايي جديدي را براي ساختار دادن به متون وب به شرح زير در بر گرفته است:

تگتوضيحات
<article>تعريف يک مقاله
<aside>تعريف يک محتواي در کنار متن اصلي
<bdi>جهت تعريف متن در جهتي غير از جهت اصلي که خارج از آن در نظر گرفته شده
<command>تعريف يک دکمه دستوري که کاربر مي تواند آن را فعال نمايد
<details>تعريف جزييات بيشتر
<dialog>تعريف يک پنجره dialog
<summary>تعريف بخش قابل مشاهده از يک تگ <details>
<figure>تعريف محتواي خود شامل مانند عکس ، نمودار و …
<figcaption>تعريف يک عنوان براي تگ <figure>
<footer>تعريف يک بخش پاييني براي يک صفحه يا بخش
<header>تعريف يک بخش بالايي براي يک صفحه يا بخش
<mark>جهت برجسته کردن متن
<meter>تعريف يک واحد اندازه گيري
<nav>لينک هاي پيمايش صفحات
<progress>نمايش پيشرفت يک وظيفه
<section>تعريف يک بخش از متن
<time>تعريف تاريخ و زمان
<wbr>تعريف يک خط جديد

المان هاي حذف شده از HTML5

تگ هاي زير نيز از HTML5 حذف شده اند:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

طراحی سایت – HTML5 – مقدمه

HTML5 چیست؟

HTML5 جدیدترین استاندارد برای HTML است که امروزه در طراحی سایت مورد استفاده قرار می گیرد.

همانطور که می دانید نسخه قبلی از HTML یعنی HTML 4.01 در سال 1999 معرفی شد. از آن زمان تا به حال خیلی موارد در دنیای وب دچار دگرگونی و تغییر شده است.

پروژه HTML5 چطور آغاز شد؟

HTML5 دست پخت مشترک W3C و WHATWG است. WHATWG روی وب فرم ها و برنامه های کاربردی و W3C روی XHTML 2.0 کار می کرد. در سال 2006 تصمیم براین شد که هردو سازمان روی نسخه جدیدی از HTML کار کنند که نتیجه آن HTML5 شد.

مجموعه ای قراردادها و قوانین به شرح زیر برای شروع کار در نظر گرفته شد:

  • تعریف ویژگی های جدید بر مبنای HTML ، CSS ، JAVASCRIPT و DOM
  • کاهش نیاز به پلاگین های خارجی مانند FLASH
  • بهبود مدیریت خطا
  • استفاده از دستورات بیشتر به جای کدنویسی – scripting
  • HTML5 نباید به دستگاه خاصی وابسته باشد
  • پروسه توسعه باید عمومی باشد

HTML5 <!DOCTYPE>

در HTML5 فقط یک تعریف <!DOCTYPE> داریم و آن به سادگی کد زیر است:

<!DOCTYPE html>

کد زیر حداقل کدی است که برای طراحی یک صفحه وب سایت با HTML5 به آن نیاز دارید:

<!DOCTYPE html>
 <html>
  <head>
  <title>Title of the document</title>
  </head>
  <body>
  The content of the document......
  </body>
 </html> 

ویژگیهای جدید HTML5

بعضی از مهمترین ویژگیهای جدید در HTML5 به شرح زیر است:

  • المان <canvas> برای ترسیم دو بعدی
  • تگ های <video> و <audio> برای پخش چند رسانه ای – صدا و فیلم
  • پشتیبانی از ذخیره سازی محلی
  • تگ های جدید وابسته به محتوا در طراحی سایت مانند <article> ، <footer> ، <header> و …
  • کنترل های جدید برای فرم ها مانند تقویم ، تاریخ ، جستجو ، ایمیل و …