با استفاده از UI ،HTML 5 سایت خود را بهتر کنید
HTML5 در 28 اکتبر 2014 منتشر شد. با وجودی که چندین سال از انتشارش گذشته است ، هنوزبسیاری از وبسایت های قدیمی وجود دارند که از پتانسیل کامل HTML 5 استفاده نمی کنند. اگر شما یکی از صاحبان همان نوع سایت ها هستید در این مقاله به شما خواهیم گفت اگر از HTML5 استفاده نکنید چه ویژگی هایی را از دست خواهید داد .
شبکه جهانی وب چندین دهه است که بوجود آمده است ، اما همیشه کار با رسانه ها (media) سخت بوده است . در ابتدا قرار بود فقط اطلاعات متنی و خیلی کم ازعکس در آن استفاده شود . حالا در سال 2018 ، ما انتظار داریم که انیمیشن در وبسایت ها زیاد باشد چیز هایی از قبیل انیمیشن های css ، video ، audio یا حتی طراحی های بامزه ، ما از وبسایت ها درخواست های زیادی داریم در این مقاله به شما نشان خواهیم داد که چگونه html5 به شما کمک میکند و به این نیاز ها پاسخ میدهد
علاوه بر این HTML5 لیست طولانی از المان های جدید HTML را ارائه می دهد . در این مقاله ، می خواهیم درباره بعضی از المان های کلیدی صحبت کنیم و بگوییم چگونه این المان ها کار طراحی وبسایت را آسان کرده اند.
Input Type های جدید
Input Type های زیادی وجود دارد . input یک روش ویژه ای برای تعامل با کاربر از طریق UI با یک فرم است. امروزه راه های بسیاری برای تعامل با کاربر وجود دارد . HTML5 رایج ترین روشهایی که کاربر با یک فرم ارتباط برقرار می کند را معرفی کرده است . روش هایی مثل Color picker ، DateTime input ، جست و جو و ... .برای مثال برای استفاده از جست و جو جدید از کد ریز استفاده میکنیم.
<input type="search" name="mysearchinput">
این مهم است که خود مرورگر مقاصد شما را برای یک input بفهمد . این بدان معنی است که یک مرورگر می تواند برای هر input ، به طور متفاوتی باکس های جست و جو را استایل دهی کند و با CSS به راحتی انتخاب می شود.
Audio Element
یکی از المان های مهم که میخواهیم مورد بحث قرار دهیم Audio element می باشد برای استفاده از آن به صورت زیر تعریف میشود:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
برای Palcyback ، Pause ، کاهش صدا و ... استفاده میشود . در گذشته اگر میخواستید خودتان یک AudioPlayer را کد نویسی کنید یا حتی اگر میخواستید از کتابخانه های 3rd party برای این کار استفاده کنید این کار ممکن بود برای شما هزینه داشته باشد یا آن چه نباشد که باب میل شماست.
Video Element
Audio element شبیهVideo element است. Audio element به شما امکان playback میدهد به همان شکل video element به شما امکان پخش ویدیو را می دهند.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
این المان به سادگی همان Audio element است . شما باز هم میتوانید از مرورگر برای فراهم کردن کار هایی مثل play ، pause ، Stop و ... استفاده کنیم و با یک المان روی صدا ها تاثیر بگذارید . قبل از استفاده از این المان ، این کار به راحتی انجانم نمیشد .بعلاوه چنین المانی ، امکان آپدیت المان های ویدیویی HTML 5 را فراهم میکند ، در نتیجه شما میتوانید از ویژگی های جدید آن بهرمند شوید.
استفاده از یک Video Player سفارشی
استفاده از المان ویدیویی جدید به معنی اینکه دیگر شما نمیتوانید از کتاب خانه های 3rd party استفاده کنید نیست.گاهی اوقات ممکن است ورژن اولیه ی video player ای که مرورگر فراهم میکند مد نظر شما نباشد و همه ی ویژگی هایی را که شما به آن نیاز دارید را پوشش ندهد. استفاده از video player هایی مثل Cloudinary, VideoJS و Plyrمی تواند تعاملات جالبی با ویدیو را فراهم کند که شما نمی توانید آن ها را با المان های اولیه ی ویدیویی داشته باشید
نتیجه گیری
در این مقاله راه های مختلفی را که می توانید از ویژگی های HTML5 استفاده کنید را به شما ارائه دادیم .در گذشته شما مجبور به ساخت کتاب خانه های پیچیده ی javascript برای ساخت محتوای ویدیویی بودید اما امروزه این کار ها بسیار آسان شده است . امیدواریم که این مقاله شما را به استفاده از HTML5 در وبسایت هایتان تشویق کند.
نظرات کاربران
0 نظر