تکنیک های جدید در HTML5.1 برای طراحی وب سایت
انتشار استاندارد جدید HTML5 در چند ساله گذشته، توانست تحول عظیمی در طراحی وب سایت ایجاد کند.در چند سال گذشته ویژگی های جدیدی در طراحی وب سایت ایجاد شد.
در طراحی وب سایت انتشار استاندارد جدید HTML5 در چند ساله گذشته، توانست تحول عظیمی ایجاد کند. HTML5 نه تنها دارای ویژگی های جدیدی بود بلکه بیشتری ایراداتی که در HTML4 وجود داشت را رفع کرده بود. امروزه شما وب سایت های زیادی را می توانید مشاهده کنید از جدیدترین ویژگی ها و استانداردهایی که در HTML5 در دوسال گذشته انتشار یافته است در طراحی سایت حرفه ای خود استفاده می کنند. در واقع می توان گفت که از HTML5 مدرن استفاده می کنند.
در فوریه 2015، W3C شروع به کار برروی پیش نویس ورژن HTML5.1 کرد تا بتواند مواردی که در ورژن قبلی باز بود، تکمیل کند. در نوامبر 2016 و پس از فرازونشیب های فراوان متخصصان این شرکت توانستند یک پیش نویس نهایی از HTML5.1 ارائه دهند. اما فعلا بسیاری از خصوصیات داخلی آن به دلیل طراحی ضعیف حذف گردیدند.
در حالی که W3C برروی توسعه HTML5.1 فعالیت میکند، خبر از تهیه پیشنویس برای تولید HTML5.2 داد که در اواخر 2017 کامل و معرفی می گردد.
در این مقاله طراحی وب سایت ما قصد داریم که در ویژگی هایی که در این زبان جدید وجود دارد به شما معرفی کنیم ، هرچند که یکی از مشکلات این زبان عدم تطابق با مرورگرها می باشد اما بعضی از مثال ها را می تواند در تمامی آن ها را به راحتی تست و بررسی کرد.
تکنیک های جدید HTML5.1 در طراحی وب سایت
منو context با استفاده از عنصر menu و menuitems
در پیش نویس HTML5.1 دو نوع منو معرفی شده است: context و toolbar. الان منو toolbar دیگر از بین رفته و کمتر به آن توجه شده است. در منو context که برروی صفحه راست کلیک می کردیم و عناصر منو به ترتیب زیر هم برای ما نشان داده می شد. این هنوز در این ورژن جدید باقی مانده است فقط با این تفاوت که تغییراتی در آن ایجاد شده است.
در طراحی وب سایت برای ایجاد منو می توانید از تگ <menu> استفاده کنید که شامل چندین عناصر <menuitem> و بعد آن را به هر عنصری با استفاده از ویژگی contextmenu ترکیب کنید.
هر <menuitem> می تواند یک یا سه نوع زیر را داشته باشد:
•Checkbox – برای انتخاب یا غیرانتخاب کردن یک گزینه
•Command – برای اجرای یک عملیات با استفاده از کلیک
•Radio – برای انتخاب یک گزینه از گروه
برای مثال دستور زیر که توسط این خاصیت نوشته است در مرورگر فایرفاکس 49 به خوبی اجرا می شود اما کروم آن را پشتیبانی نمی کند.
دستور HTML آن به صورت زیر است:
<"p contextmenu="popup-menu>
Right click here to see the context menu.
<p/>
<"menu type="context" id="popup-menu>
<menuitem type="checkbox" checked="true">Checkbox</menuitem>
<menuitem type="command" label="Command" onclick="alert('Hey!')">Checkbox</menuitem>
<menuitem type="radio" name="group1" checked="true">Radio button 1</menuitem>
<menuitem type="radio" name="group1">Radio button 2</menuitem>
<menuitem type="checkbox" disabled>Disabled menu item</menuitem>
<menu/>
و دستور CSS آن به صورت زیر نوشته می شود:
}p
;width: 160px
;background: #744D8B
;padding: 10px 30px
;color: white
;display: inline-block
{
}p:hover
;background: #8456a0
{
اگر مرورگر شما آن را پشتیبانی کند، باید شکلی شبیه زیر برای شما در هنگام راست کلیک باز شود:
عناصر Details و Summary :
تگ های جدید <detail> و <summary> باعث پیدا و پنهان شدن با کلیک برروی عنصر دیگر می شوند. این ویژگی قبلا در طراحی وب سایت با جاوااسکریپت انجام می گردید اما الان در این ورژن می توان با این دو عنصر انجام داد. کد نوشتن آن به صورت زیر است:
دستور HTML آن:
<section>
<h2>Red panda</h2>
<p>
The red panda's local names differ from place to place. The Lepcha people call it sak nam. In Nepal, the species is called bhalu biralo (bear-cat) and habre.
<p/>
<details>
<summary>
Distribution and habitat
<summary/>
<p>
The red panda is endemic to the temperate forests of the Himalayas, and ranges from the foothills of western Nepal to China in the east. Its easternmost limit is the Qinling Mountains of the Shaanxi Province in China. Its range includes southern Tibet, Sikkim and Assam in India, Bhutan, the northern mountains of Burma, and in south-western China, in the Hengduan Mountains of Sichuan and the Gongshan Mountains in Yunnan.
<p/>
<details/>
<details>
<summary>
Curious facts
<summary/>
<p>
The red panda's local names differ from place to place. The Lepcha people call it sak nam. In Nepal, the species is called bhalu biralo (bear-cat) and habre.
<p/>
<p>
The red panda was recognized as the state animal of Sikkim in the early 1990s, and was the mascot of the Darjeeling Tea Festival.
<p/>
<details/>
<section/>
دستور CSS:
}body
;'font-family: 'Roboto
;color: #333
;font-size: 1.1em
{
}section
;max-width: 500px
{
}details
;background: #f0f0f0
;padding: 20px
;margin-bottom: 5px
{
}summary
;cursor: pointer
;font-weight: bold
;font-size: 1.1em
{
نوع ورودی های بیشتر:
در این ورژن سه نوع به مجموعه نوع ورودی(input type) اضافه شده است که شامل week، month و datetime-local است.
در دو مورد اول شما می توانید هفته و ماه را انتخاب کنید. در مرورگر کروم هر دو مورد پشتیبانی کامل می گردد.
در پیش نویس HTML5.1 برای طراحی وب سایت، دو نوع datetime و datetime-local معرفی شده است. فرق این دو مورد در این است که در datetime-local کاربر فقط می تواند زمان برحسب موقعیت زمانی محلی خودش انتخاب کند اما در دیگری هر امکان انتخاب هر زمانی وجود دارد. البته بعدا در توسعه های بیشتری که صورت گرفت، نوع datetime حذف گردید و فقط نوع دوم استفاده می گردد.
Datetime-local شامل دو بخش است که می توانند به صورت اتوماتیکی و با گزینه انتخاب شوند یا به صورت دستی وارد گردند.
در زیر یک نمونه کد برای شما نوشته ایم که فعلا فقط در مرورگر کروم عمل میکند.
کد HTML:
<h2>Week, month and datetime-local inputs</h2>
<p>Select a value to see how it appears in JavaScript.</p>
<section>
<div>
<label>Week</label>
<input type="week" onchange="showValue('week', event.target.value)">
<span id="week"></span>
<div/>
<div>
<label>Month</label>
<"(input type="month" onchange="showValue('month', event.target.value>
<span id="month"></span>
<div/>
<div>
<label>Datetime local</label>
<"(input type="datetime-local" onchange="showValue('datetime-local', event.target.value>
<span id="datetime-local"></span>
<div/>
<section/>
دستور CSS:
}body
;'font-family: 'Roboto
;color: #333
{
}section
;font-size: 1.2em
{
}div
;margin-bottom: 10px
;padding: 15px 6px
;width: 400px
;background: #f3f3f3
{
}label
;width: 120px
;display: inline-block
; text-align: right
{
}input
;width: 180px
;vertical-align: text-top
{
دستور جاوااسکریپت:
}(function showValue(id, value
; document.getElementById(id).innerHTML = value
{
عکس های رسپانسیو ( واکنش گرا) در طراحی وب سایت
برای واکنش گرا کردن عکس در طراحی وب سایت رسپانسیو چندین خصوصیات جدید به HTML5.1 اضافه شده است که دیگر نیازی به کدنویسی با CSS نیست.
ویژگی scrset عکس:
با استفاده از ویژگی و بسته به چگالی و اندازه پیکسل صفحه، می توانید لیستی از منابع عکس های متغیر ایجاد کنید. این ویژگی به مرورگرها این امکان را می دهد که بسته به کیفیت اندازه صفحه، عکس متناسب را انتخاب کنند. برای مثال می توانید از تعیین کنید که عکس هایی با رزولوشن پایین تر برای ابزارهای موبایل انتخاب شود.
در کد زیر به عنوان نمونه برای شما نوشته شده است، یک عکس به عنوان عکس کلی درج شده است و سپس در همان تگ عکس تعریف کرده ایم که بسته به نوع پیکسل صفحه چه کیفیتی از عکس را انتخاب کند. در طراحی وب سایت های فروشگاهی این مساله خیلی مهم است، چونکه باعث افزایش سرعت بارگذاری وب سایت می گردد.
"=img src="images/low-res.jpg" srcset>
,images/low-res.jpg 1x
,images/high-res.jpg 2x
"images/ultra-high-res.jpg 3x
<
زمانی که نسبت پیکسل برابر یک باشد عکس low-res نشان داده می شود و به همین ترتیب برای بقیه نسبت ها این نکته تکرار می شود.
شما همچنین می توانید به جای نسبت پیکسل از اندازه صفحه استفاده کنید و به جای x از w استفاده کنید. یعنی برای مثال زمانی که اندازه صفحه 600 پیکسل است، از عکس low-res استفاده شود.
"=img src="images/low-res.jpg" srcset>
,images/low-res.jpg 600w
,images/high-res.jpg 1000w
" images/ultra-high-res.jpg 1400w
<
ویژگی sizes عکس:
با استفاده از این ویژگی می توانید بسته به اندازه صفحه ای که کاربر استفاده می کند، عکس متناسب را انتخاب کنید. روش کار این تگ به این صورت است که مقدار اندازه صفحه را به اندازه اختصاص داده شده به عکس تبدیل کرده و با استفاده از ویژگی srcset عکس را انتخاب می کند.
"img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw
,srcset="images/low-res.jpg 600w
,images/high-res.jpg 1000w
"images/ultra-high-res.jpg 1400w
<
در مثال بالا مقدار width عکس 50درصد صفحه تعریف می شود و اگر اندازه width برابر با 40 em باشد، عرض عکس را 100 درصد می کند و بعد به تناسب مناسب ترین عکس را انتخاب می کند.
عکس picture عکس:
اگر هیچ فضای کافی برای تغییر اندازه عکس نسبت به هر صفحه وجود نداشته باشد و شما نیاز دارید که عکس های متفاوت به طور کامل نشان دهید، می توانید از عنصر picture استفاده کنید.
در نوشتن دستور آن به جای تگ <img> از تگ <picture> استفاده می کنید و بعد به صورت زیر می نویسید:
<picture>
"=source media="(max-width: 20em)" srcset>
,images/small/low-res.jpg 1x
,images/small/high-res.jpg 2x
"images/small/ultra-high-res.jpg 3x
<
"=source media="(max-width: 40em)" srcset>
,images/large/low-res.jpg 1x
,images/large/high-res.jpg 2x
"images/large/ultra-high-res.jpg 3x
<
<"img src="images/large/low-res.jpg>
<picture/>
اعتبار سازی فرم با استفاده از دستور form.reportvalidity():
یکی از ویژگی های جدید برای تولید فرم در طراحی وب سایت است . این متد امکان بررسی ورودی را می دهد و بسته به درست یا غلط بودن آن، یک مقدار بولین به شما نشان می دهد. Reportvalidity() کاملا شبیه متد قبلی است اما یک ویژگی اضافه دارد که خطا را به کاربر در مرورگر نشان می دهد.
دستور آن به صورت زیر نوشته می شود:
دستور HTML:
<h2>Form validation</h2>
<p>A validation error should immediately appear when you open this CodePen.</p>
<form>
<label>
</ Mandatory input <input type="text" name="first-name" required
<label/>
<button type="submit">Submit</button>
<form/>
دستور CSS:
}body
;'font-family: 'Roboto
;color: #333
{
}form
;margin-bottom: 10px
;padding: 6px
;width: 380px
;background: #f3f3f3
{
}input
;width: 180px
;vertical-align: middle
{
دستور جاوااسکریپت:
;()document.querySelector('form').reportValidity
Allowfullscreen برای فریم ها
یک ویژگی از نوع بولین برای فریم ها است که به شما می گوید آیا می توانید با استفاده از متد requestfullscreen() محتوا به صورت تمام صفحه نشان بدهید یا خیر.
بررسی حروف با استفاده از متد element.forcespellcheck()
این متد، حروف و کلمات را از نظر نوشتن بررسی می کند. این ویژگی تا به حال در هیچ مرورگری وجود نداشته است و اولین بار است که ایجاد شده است.
تعدادی از ویژگی هایی که در پیش نویس HTML5.1 اول ایجاد شده اند اما بعدا به دلیل طراحی ضعیف یا مشکلاتی حذف شدند، ویژگی inert و dialog بود.
ویژگی inert:
این ویژگی برای غیر فعال کردن عنصر child استفاده می گردید.
ویژگی dialog:
یک اجرای بومی برای پاپ آپ ویندوز بود.