حال که با تکنولوژی جدید HTML5 آشنا شدید و از فواید آن با خبر گشتید ، اجازه دهید تا در مورد برخی تغییرات در هسته ی مرکزی آن آشنا شویم .
بخش هفتم – جستجو در تکنولوژی های HTML5
حال که با تکنولوژی جدید HTML5 آشنا شدید و از فواید آن با خبر گشتید ، اجازه دهید تا در مورد برخی تغییرات در هسته ی مرکزی آن آشنا شویم .
بخش doctype
بخش doctype به مرورگر شما می گوید که چگونه سند را تجزیه و تحلیل نماید . در نتیجه این بخش مهمترین بخش سند شما بوده و باید در اولین خط کدهای HTML شما قرار گیرد . doctype ویرایش قبلی نه تنها سند را بعنوان HTML4 معرفی میکرد ، بلکه لینکی به مشخصات این سند ارائه می نمود که شبیه خط زیر بود :
نسخه ی جدید doctype در HTML بسیار ساده است ، و شما نیازی به مشخص نمودن نوع سند و یا لینکی به مشخصات آن نخواهید داشت . مانند زیر :
این تغییر به این علت می باشد که تغییرات در HTML بروز بوده و مرورگر بخش های جدید مشخصات را در پروسه ی استانداردسازی های خود خواهد گرفت . این ایده باعث خواهد شد تا تغییرات در آینده بدون اینکه تغییری در سند بوجود آید اضافه گردد .
تگ های جدید در HTML
هنگامی که شما برای اولین بار یک سند HTML5 را باز می کنید ، اولین چیزی که توجه شما را جلب خواهد کرد این است که تگ های معنایی جدیدی را در میان سند مشاهده خواهید نمود . که معمول ترین آن ها بشرح زیر خواهد بود :
یک مثال ساده برای اینکه بفهمید از این تگ ها در یک سند HTML به چه صورت استفاده می شود را در زیر خواهید دید :
تگ های متای جدید
افزون بر تگ های جدیدی که در HTML5 مشاهده کردید ، تگ های متای جدیدی هم به آن اضافه شده است .
متا تگ viewport
مهمترین متا تگ اضافه شده ، متا تگ viewport می باشد . این متا تگ در واقع توسط سافاری موبایل اضافه شد تا به توسعه دهندگان وب اجازه دهد تا بفهمند که عرض صفحه و همچنین مقیاس آن چقدر می باشد . اگر این متا تگ بدرستی استفاده نشود می تواند نتایج وحشتناکی برای کاربران و تجربه ی آن ها در وب سایت شما داشته باشد .
مقادیر استفاده شده در متا تگ viewport ، شامل مقادیر جدا شده با کاما می باشد که در ادامه مقادیر قابل استفاده در آن را خواهید دید :
1- Width : پنهای viewport
2- Initial-scale : مقیاس سایت هنگامی که در ابتدا بارگزاری می گردد .
3- User-scalable : بطور پیش فرض ، کاربر می تواند سایت را بزرگنمایی کند و تنظیم “user-scalable" به مقدار no می تواند آن را غیرفعال نماید . این تنظیم می تواند به قابلیت دسترس پذیر بودن سایت شما برای کاربران صدمه بزند .
4- Maximum-scale : به شما اجازه می دهد تا تعیین کنید که کاربر تا چه میزان می تواند سایت را بزرگنمایی کند . هر چند که این گزینه به اندازه ی گزینه ی user-scalable بد نمی باشد اما باز هم می تواند به دسترس پذیر بودن سایت شما صدمه بزند و برای آن مضر باشد .
اگر شما این متا تگ را به یک سایت غیر واکنش گرا اضافه می کنید، شما باید viewport را حساس به یک پنهای خاص کنید تا بتوانید سایت را براحتی بنمایش در آورید . بطور مثال اگر شما یک سایت به پنهای 980px دارید که بصورت وسط چین درآمده است ، شما مطمئنن می خواهید که یک فاصله ای با حاشیه ها داشته باشید ، بنابراین شما می توانید viewport را به مقدار 1024px تنظیم نمایید که در زیر نمونه ی آن را می بینید :
در طراحی واکنش گرا شما می خواهید که پهنای viewport به اندازه ی دستگاهی شود که در آن بنمایش در می آید . در اینجا دو مسئله ی کلیدی وجود دارد : اول ، شما در کدهای css خود طوری کدنویسی می کنید که viewport به اندازه ی دستگاه مورد نظر شما در آید . دوم اینکه شما با استفاده از متا تگ viewport به دستگاه می گویید که این سند برای نمایش در این دستگاه بهینه شده و نیازی نیست تا سایت را براساس بزرگنمایی پیش فرض بارگزاری کند .
برای اینکه پنهای viewport را به اندازه ی پهنای دستگاه مورد نظر خود درآورید شما باید مقدار پهنای viewport را به device-width به جای اینکه از اندازه ی مشخصی استفاده کنید تنظیم کنید . شما همچنین می خواهید که از میزان بزرگنمایی پیش فرض که همان یک هست استفاده کنید بنابراین مقدار initial-scale را به 1 تنظیم می نمایید . این عملیات را در زیر می توانید مشاهده کنید :
آیکون های لمسی اپل
یکی دیگر از متا تگ های جدید ، آیکون های لمسی اپل می باشد . که شما با استفاده از آن می توانید آیکونی را که iOS اپل برای کاربرانی که وب سایت را بعنوان پیش فرض انتخاب می کنند استفاده می کند را تعیین نمایید . اینکار را در مثال زیر مشاهده می کنید :
فرم های وب
ورودی های فرم های وب در HTML5 ارتقا پیدا کرده اند . در ویرایش قبلی ما محدود به radio , checkbox , text بودیم ، اما در نسخه ی جدید ما دارای محدوده ی وسیعی از این کنترل ها در فرم های خود می باشیم .
1. Search
2. Email
3. url
4. tel
5. number
6. range
7. date
8. month
9. week
10. time
11. datetime
12. datetime-local
13. color
یکی از فواید کنترل های جدید این است که مرورگر می تواند بر اساس آن ها کنترل های مناسب را رندر کند . بطور مثال هنگامی که شما از کنترل email استفاده می کنید یک دستگاه موبایل در روی کیبورد خود علائم و نشانه های مربوط و مناسب ایمیل را بنمایش در می آورد . و یا هنگامی که از یک کنترل date استفاده می کنید به جای نمایش اعداد و حروف برای شما یه انتخاب گر تاریخ را بنمایش در می آورد . این موارد باعث می شود تا کاربر تجربه ای خوب در سایت شما داشته و در ورود اطلاعات بسیار سریع تر عمل نماید . یک مثال ساده از کنترل های جدید را در زیر می بینید :
هنگامی که شما به این فیلد در یک گوشی موبایل می رسید ، گوشی ای مانند آیفون اپل با سیستم عامل iOS7 در مرورگر خود کنترل را به صورتی که در زیر می بینید به نمایش در می آورد :
هنگامی که این کنترل را در یک مرورگر دسکتاپ اجرا می کنید ، یک کنترل اولیه برای تاریخ را مانند زیر مشاهده می کنید :
HTML5 به شما اجازه می دهد تا یک کنترل placeholder به ورودی های خود اضافه نمایید ؛ که در واقع در آن شما می توانید برای کاربری مثالی از ورودی مورد نظر را بنمایش در آورید تا بعنوان راهنما مورد استفاده قرار گیرد . یک مثال از افزودن خصیصه ی placeholder را در ادامه می بینید :
هنگامی که این کنترل در مرورگر بارگزاری می شود شما می توانید یک متن خاکستری رنگ را درون کنترل ورودی داده مشاهده کنید :
در HTML5 شما می توانید براحتی کنترل های اعتبارسنجی را اضافه نمایید ، برای نمایش اینکه چگونه می توان اینکار را انجام داد ، بگذارید تا به دو مثال در این زمینه بپردازیم .
برای اضافه کردن یک ورودی که ورود آن اجباریست شما براحتی می توانید با اضافه نمودن required به آن فیلد اینکار را انجام دهید :
هنگامی که شما روی دکمه ی ارسال کلیک می کنید ، به کاربر پیامی مبنی براینکه باید در این ورودی چیزی را وارد نماید نمایش داده می شود .
اگر شما می خواهید یک ایمیل را اعتبارسنجی کنید کافیست تا نوع داده را به email تنظیم کنید . و در نتیجه پیام مورد نظر به این شکل نمایش داده می شود .
پایان قسمت هفتم
محمد جعفری فوتمی
قسمت هشتم – Polyfilling