ویژگی های HTML5 بالا که برنامه های وب شما را ارتقا می دهند

W3C بیان می کند که: "HTML (زبان نشانه گذاری Hypertext Markup Language) عمدتا به عنوان یک زبان برای توصیف اسناد علمی شناخته شده طراحی شده است، اگر چه طراحی و سازگاری کلی آن در طول سال ها آن را برای توصیف تعدادی از انواع دیگر اسناد استفاده کرده است."

این به این معنی است که HTML برای ایجاد موضوع مبهم که معمولا به عنوان Web Applications نامیده می شود ایجاد نشده است. پنجمین نسخه اصلی HTML (بعنوان مثال HTML5) ویژگی های جدیدی را از جمله CSS3 (فن آوری مرتبط) به GeoLocation و WebStorage معرفی می کند که عمدتا برنامه های کاربردی وب را هدف قرار می دهد.

HTML5 یک چیز بزرگ نیست، بلکه مجموعه ای از ویژگی های فردی است. این در واقع دو چیز است:

پشتیبانی از HTML5 قابل شناسایی نیست و در عوض ما باید شناسایی کنیم که آیا ویژگی خاصی که ما می خواهیم از آن استفاده کنیم، توسط مرورگر (تشخیص ویژگی) پشتیبانی می شود.

مشخصات HTML5 بسته نشده است. ویژگی های بیشتر و بیشتر در توصیه W3C گنجانده شده است.

تصویر زیر یک ایده کوچک از آنچه که در آینده نزدیک می تواند اضافه شود را ارائه می دهد.

طبقه بندی و وضعیت HTML5 - ویژگی های html5 بالا

اما از همه این ویژگی های جالب و شاید مرموز، یک زن و شوهر وجود دارد که باید سعی کنیم بدون هیچ گونه تردید به برنامه های ما اضافه کنیم. بنابراین HTML5 معرفی تگ های جدید است؟ کاملا درست نیست اگر هنوز از HTML به عنوان برچسب ها و براکت های زاویه ای فکر می کنید، بخش مهمی از دست رفته است.

به عنوان مثال، HTML5 فقط برچسب <video> را تعریف نمی کند، بلکه API مربوطه را نیز تعریف می کند. با استفاده از این API، امکان پشتیبانی از فرمت های ویدیویی، توقف، پخش، مکث و یا حتی بدست آوردن میزان دانلود ویدئو فراهم است. شما ممکن است فکر کنید، "من برنامه های سازمانی را ایجاد می کنم، به طوری که این ویژگی ها واقعا در جای مناسب نیست!" خوب، این نمی تواند بیشتر از حقیقت باشد. در دنیای سریع ما، که در موبایل موجود نیست، تقریبا مانند موجود نیست.

بنابراین، هنگام سازگاری یا ایجاد برنامه های کاربردی وب، باید توجه داشته باشیم که کاربران ممکن است جایی که فکر می کنیم (مانند میز کار) باشند. با توجه به این، ما می توانیم برنامه های کاربردی بهتر (به حل مشکلات و پیچیدگی ذاتی طراحی پاسخگو) را با اضافه کردن ویژگی های نرم افزار کمک می کند که بیشتر به کاربر انجام وظایف کمک می کند. بنابراین، ویژگی های HTML5 بالا چیست که نمی توانید از دست بدهید؟

1. موقعیت جغرافیایی

  این ویژگی موقعیت جغرافیایی دستگاه را به دست می آورد. تصور کن:

نمایش اطلاعات بر اساس مکان کاربر

نقشه روز مسیر را برای فروشندگان خود.

دادن دستورالعمل های مربوط به رانندگان تحویل براساس مکان آنها (A):

نقشه Google Embeddable توسط GeoLocation طراحی شده است، یکی از ویژگی های HTML5 برتر

همه این موارد ممکن است اگر مکان کاربر شناخته شده باشد. با این حال، به دلیل این که این اطلاعات می تواند حریم خصوصی کاربر را به خطر بیندازد، موقعیت تنها در صورت پذیرش کاربر در دسترس است - این مجوز در سطح دامنه درخواست می شود:

گفت و گو با درخواست محل سکونت رایانه شما - توسط GeoLocation، یکی از ویژگی های HTML5 برتر است

اگر دستگاه مورد استفاده GPS ندارد، سیستم سعی خواهد کرد یک مکان را براساس آدرس IP ارائه دهد. این، همانطور که ممکن است تصور کنید، دقت آن را کاهش می دهد. حالا چیزهای تکنیکی. برای استفاده از این ویژگی باید روش زیر نامیده شود:

navigator.geolocation.getCurrentPosition (موفقیت، خطا، گزینه ها)

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

I. موفقیت: این یک تابع فراخوانی است که به زودی به عنوان موقعیت بدست می آید. این پارامتر اجباری است

عملکرد عملکرد (موقعیت) {

  var latitude = position.coords.latitude؛

  var longitude = position.coords.longitude؛

}

این تابع فراخوانی یک شی JSON حاوی اطلاعات به دست آمده را دریافت می کند:

تاریخ تایم

سرعت

سرصفحه

ارتفاع

دقت ارتفاع

عرض جغرافیایی

عرض جغرافیایی

دقت

دوم خطا: این یک تابع فراخوانی است که اگر در هنگام به دست آوردن موقعیت دریافت شود خطایی دریافت می شود.

خطای عملکرد (errorStruct) 

  ؛var code = errorStruct.code}

  ؛var msg = errorStruct.message

{

اگر کاربر حاضر به اشتراک گذاری مکان خود را نداشته باشد، این روش نامیده می شود. III گزینه ها: این پارامتر جسم JSON را با تنظیمات ممکن که API می تواند دریافت کند، دریافت می کند:

enableHighAccuracy

تعطیلات

maximumAge

برای کسب اطلاعات بیشتر در مورد این API، لطفا مشخصات W3C را ببینید.

2. دسترسی به دوربین

HTML5 توانایی دسترسی به دستگاه های رسانه ای ارائه شده در دستگاه های تلفن همراه را فراهم می کند: دوربین (تصویر / ویدئو)، میکروفون و غیره. برای استفاده از این ویژگی فقط لازم است برخی ویژگی ها را به تگ فایل آپلود اضافه کنید:

<input type = "file" accept = "image / *؛ capture = camera">

برای استفاده از این ویژگی در پلت فرم OutSystems، فقط از ویجت فایل آپلود استفاده کنید و برچسب های بالا را به ویژگی های پیشرفته اضافه کنید:

IDS OutSystems قادر است ضبط تصویر از دوربین، توسط یکی از ویژگی های HTML5 بالا طراحی شده: دوربین

3. بوم

عنصر بوم بخشی از HTML5 است و اجازه می دهد تا برای ارائه پویا و اسکریپت از اشکال 2D و تصاویر بیت مپ. این به این معنی است که برای انجام کاری شبیه به این:

به طور پویا مربع قرمز در پس زمینه خاکستری ایجاد شده است، کشیده شده توسط یکی از بالا

ویژگی های html5: بوم

برچسب HTML زیر به صورت اول اضافه می شود:

<canvas id = 'example' width = '400' height = '300'>

سپس با استفاده از جاوا اسکریپت، عناصر می توانند در آن کشیده شوند:

var context = example.getContext ('2d')؛

context.fillStyle = 'قرمز'؛

context.fillRect (30، 30، 50، 50)؛

اما چگونه می تواند عنصر بوم به هر حال مفید است؟ خوب، به موارد زیر اجازه می دهد:

امضای جان اسمیت توسط یکی از بهترین ویژگی های HTML5: بوم گرفته شده است

بله، امکان استفاده از بوم برای جمع آوری امضای کاربر امکان پذیر است! (قرص، گوشی هوشمند، و غیره)

4. ذخیره سازی وب

با HTML5، صفحات وب می توانند داده ها را به صورت محلی در مرورگر کاربر ذخیره کنند. پیش از این، با کوکی ها انجام شد. با این حال، ذخیره سازی وب امن تر و سریع تر است. ذخیره سازی پایدار محلی یک منطقه است که برنامه های کاربردی بومی مشتری دارای مزیت نسبت به برنامه های کاربردی وب است. برای برنامه های بومی، سیستم عامل به طور معمول یک لایه انتزاعی برای ذخیره و بازیابی داده های خاص برنامه مانند تنظیمات یا حالت زمان اجرا فراهم می کند. به عبارت ساده، این راه برای صفحات وب برای ذخیره کلمات جفت کلید  ارزش به صورت محلی در مرورگر وب مشتری است. مانند کوکی ها، این داده ها حتی پس از اینکه کاربر دور از وب سایت حرکت می کند، یک تب مرورگر را بسته و یا از مرورگر خارج می شود، ادامه می دهد. بر خلاف کوکی ها، این داده ها هرگز به سرور وب منتقل نمی شوند (مگر اینکه به صورت دستی ارسال شوند). بر خلاف تمام تلاش های قبلی در ارائه ذخیره سازی محلی مستمر، از مرورگرهای وب به طور بومی استفاده می شود، بنابراین حتی زمانی که پلاگین های مرورگر شخص ثالث وجود ندارد. این یکی از آن ویژگیهایی است که هنوز بسیار فرار است. اطمینان حاصل کنید که مشخصات را بخوانید و سپس بررسی کنید که آیا مرورگرهای هدف شما از آن حمایت می کنند یا خیر. در Dive Into HTML5: Storage محلی بیشتر بخوانید.

5. حافظه پنهان برنامه

آشکارساز کش در HTML5 یک ویژگی ذخیره سازی نرم افزاری است که امکان دسترسی به یک برنامه وب را فراهم می کند حتی بدون اتصال به شبکه. همانطور که در Dive Into HTML5 شرح داده شده است:

"در ساده ترین حالت، یک برنامه آفلاین آنلاین لیستی از URL ها - HTML، CSS، جاوا اسکریپت، تصاویر، و یا هر نوع دیگر از منابع است. صفحه اصلی برنامه آفلاین وب به این لیست اشاره می کند که یک پرونده مانیفست است که فقط یک فایل متنی است که در جای دیگر وب سرور قرار دارد. یک مرورگر وب که برنامه های کاربردی آفلاین HTML5 را اجرا می کند لیستی از پرونده های مانیفست را بارگیری می کند، منابع را دانلود می کند، آنها را به صورت محلی ذخیره می کند و به طور خودکار آنها را تغییر می دهد. هنگامی که زمان می آید که شما سعی می کنید بدون اتصال به شبکه به برنامه وب دسترسی داشته باشید، مرورگر وب خود به جای آن به طور خودکار به نسخه های محلی تبدیل می شود. "

این به این معنی است که صفحات به صورت ایستا در مرورگر ذخیره می شوند (دکمه های ارسالی کار نخواهند کرد) و برای مثال فرم ها بایستی با استفاده از Web Storage ذخیره شوند. برای استفاده از این ویژگی، باید یک آگهی تگ را به عنصر HTML اضافه کنید:

<html manifest = "example.appcache">

 ...

</ html>

این به این معنی است که مرورگر متوجه خواهد شد که فایل مانیفست کش است که باید بارگیری شود. در حال حاضر مرورگر می داند که ممکن است صفحه زیر و همچنین دیگران بایستی ذخیره شود. سپس فایل مانیفست کش دارای چند بخش است:

Cache: این بخش نشان می دهد که کدام فایل (تصاویر، CSS، JS، صفحات وب) باید در محلی ذخیره شود.

شبکه: این بخش منابع را نشان می دهد که کاربر باید به صورت آنلاین باشد.

Fallback: این بخش نشان می دهد که چه منابع باید به کاربر داده شود تا در هنگام دسترسی به آنها در حالت آفلاین به آنها دسترسی پیدا کند.

بنابراین، معمولا مانیفست کش به صورت زیر است:

منچستر یونایتد

# 123fe21

# به طور صحیح در حافظه اصلی ذخیره شده است.

کیس:

/favicon.ico

index.html

stylesheet.css

images / logo.png

اسکریپت / main.js

# منابع که کاربر نیاز به آنلاین بودن دارد

شبکه:

*

# در static.html خدمت کنید اگر main.py غیرقابل دسترسی باشد

# به جای تمام تصاویر در تصاویر / بزرگ به جای offline.jpg استفاده کنید

# به جای all.html فایل های offline.html استفاده کنید

FALLBACK:

/main.py/static.html

images / large / images / offline.jpg

اگر rel = "noopener noreferrer" با استفاده از ویژگی ذخیره سازی وب یا manifest cache، ابتدا سعی کنید به Component Forge Offline OutSystems Forward بروید که به هر دو کمک می کند. در نهایت، به یاد داشته باشید که HTML5 در اینجا برای ماندن است. در این مورد آنچه که W3C در مورد آینده استانداردهای وب در ماه ژوئیه 2009 می گوید این است:

"امروز مدیر ادعا می کند که وقتی منشور XHTML 2 Working Group منقضی می شود، به عنوان برنامه ریزی شده در پایان سال 2009، منشور تمدید نخواهد شد. با انجام این کار، و با افزایش منابع در گروه کاری HTML، W3C امیدوار است سرعت پیشرفت HTML5 را تسریع کند و موقعیت W3C را در مورد آینده HTML بیان کند. "

اگر چه ما (توسعه دهندگان) دوست داریم همه مرورگرهای قدیمی را از بین ببریم، متأسفانه نمی توانیم. بنابراین، اگر می خواهید بدانید که یک ویژگی خاص می تواند در یک مرورگر خاص مورد استفاده قرار گیرد، به این سایت ها نگاه کنید: آیا می توانم از HTML5 استفاده کنم یا لطفا. آیا ویژگی های برتر HTML5 وجود دارد که من نادیده گرفته ام؟ موارد مورد علاقه خود را در نظرات به اشتراک بگذارید