با استفاده از UI ،HTML 5 سایت خود را بهتر کنید

دسته بندی محصولات

با استفاده از UI ،HTML 5 سایت خود را بهتر کنید

1397/05/10 2542
WebDesign , Html , 4.3 از 16 رای

HTML5 در 28 اکتبر 2014 منتشر شد. با وجودی که چندین سال از انتشارش گذشته است ، هنوزبسیاری از وبسایت های قدیمی وجود دارند که از پتانسیل کامل HTML 5 استفاده نمی کنند. اگر شما یکی از صاحبان همان نوع سایت ها هستید در این مقاله به شما خواهیم گفت اگر از HTML5 استفاده نکنید چه ویژگی هایی را از دست خواهید داد .

 با استفاده از UI ،HTML 5 سایت خود را بهتر کنید

شبکه جهانی وب چندین دهه است که بوجود آمده است ، اما همیشه کار با رسانه ها (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 هایی مثل CloudinaryVideoJS  و Plyrمی تواند تعاملات جالبی با ویدیو را فراهم کند که شما نمی توانید آن ها را با المان های اولیه ی ویدیویی داشته باشید

نتیجه گیری

در این مقاله راه های مختلفی را که می توانید از ویژگی های HTML5 استفاده کنید را به شما ارائه دادیم .در گذشته شما مجبور به ساخت کتاب خانه های پیچیده ی javascript  برای ساخت محتوای ویدیویی بودید اما امروزه این کار ها بسیار آسان شده است .  امیدواریم که این مقاله شما را به استفاده از HTML5 در وبسایت هایتان تشویق کند.

4.3 از 16 رای

نویسنده : تم شاپ

بزرگترین مرجع خرید و فروش قالب های حرفه ای

اگر می‌خواهید مقالات ویژه ما و قالب های رایگان را در ایمیل خود داشته باشید ، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد اعضای خانواده تم شاپ 20391 نفر

نظرات کاربران

0 نظر

درج نظر مخصوص اعضای سایت می باشد .

با استفاده از UI ،HTML 5 سایت خود را بهتر کنید بازبینی شده توسط تم شاپ در 8/1/2018. با استفاده از UI ،HTML 5 سایت خود را بهتر کنید HTML5 در 28 اکتبر 2014 منتشر شد. با وجودی که چندین سال از انتشارش گذشته است ، هنوزبسیاری از وبسایت های قدیمی وجود دارند که از پتانسیل کامل HTML 5 استفاده نمی کنند. اگر شما یکی از صاحبان همان نوع سایت ها هستید در این مقاله به شما خواهیم گفت اگر از HTML5 استفاده نکنید چه ویژگی هایی را از دست خواهید داد . رتبه : 4.3