آشنایی با عنصر track در تگ video

  • بوسیله: محسن شفیعی
  • در 1393/04/02 - 22:03
  • نظرات (4)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

ویژگی بسیار مناسبی که به HTML5 اضافه شده است، پشتیبانی از نمایش و پخش ویدئو و صوت به صورت پیشفرض و بدون هیچ پلاگینی است که توسط تگ های video و audio امکان‌ پذیر است. در مورد نحوه استفاده از این عناصر در مطلبی با عنوان شروعی بر ویدئو در HTML5 قبلاً مورد بحث قرار دادیم.

اما در این مطلب میخواهیم با تگ track که مخصوص استفاده در داخل این عناصر است، آشنا شویم. توسط این تگ میتوانیم درون ویدئو چندین زیرنویس را تعریف کنیم و کاربر با توجه به زبان مورد نظر خود، زیرنویس مورد نظر را انتخاب کرده و به تماشای ویدئو بپردازد.

توسط این تگ میتوانیم استایل مناسب را نیز به زیرنویس ها بدهیم.

در ادامه مطلب همراه ما باشید…

(بیشتر…)

نحوه ایجاد عناصر سفارشی در HTML

  • بوسیله: محسن شفیعی
  • در 1393/02/28 - 22:18
  • نظرات (9)
Web Components

Web Components

همانطور که میدانید در HTML تگ هایی به صورت پیشفرض وجود دارند که مخصوص عملیات خاصی در مرورگر هستند مانند تگ های p و a یا هر تگ دیگری که از آن استفاده میکنیم. در HTML5 ویژگی جدیدی به نام Custom Elements اضافه شده است که بخشی از Web Component است که با استفاده از آن میتوانید خودتان عناصر جدید با نام های جدید بسازید.

این ویژگی برای استفاده از Componentها که به صورت متعدد در یک اپلیکیشن استفاده می‌شوند مناسب است.

در ادامه مطلب همراه ما باشید…

(بیشتر…)

آشنایی با Web Component در HTML5

  • بوسیله: محسن شفیعی
  • در 1393/02/27 - 15:07
  • نظرات (5)
Web Components

Web Components

عموما در همه زبان‌های برنامه نویسی کتابخانه‌هایی به صورت آماده وجود دارند که برنامه نویسان از آن‌ها استفاده میکنند، و همینطور یک سیستمی نیز برای مدیریت کتابخانه‌ها و وابستگی‌های آن‌ها وجود دارد که کار برنامه نویسان را در نصب آن‌ها آسان میکند.

حالا همین مبحث تحت عنوان Web Component در HTML5 بوجود آمده است. شما با استفاده از Web Component میتوانید بخش‌های مختلف سایت خودتان را تحت عنوان یک Component اضافه کنید. و از این Componentها در سایت‌های دیگری نیز استفاده کنید مانند Pluginها که یکبار نوشته می‌شوند و چندین بار مورد استفاده و نصب قرار میگیرند.

Web Component خودش به چندین مبحث تقسیم میشود. به عبارتی دیگر برای اینکه شما بتوانید یک Web Component بسازید باید حدود 4 مبحث دیگر از HTML5 را یاد داشته باشید. از این 4 مبحث ما دو مبحث آن تحت عنوان Templates و HTML Import را بررسی کردیم. دو مبحث دیگر نیز با نام های Custom Elements و Shadow DOM وجود دارند که در آینده بررسی میکنیم.

اما هم‌اکنون نیز شما میتوانید از Web Component استفاده کنید. در سایت customelements.io میتوانید میتوانید Web Componentهای ساخته شده و رایگان را مشاهده و از آن‌ها استفاده کنید.

همچنین در سایت webcomponents.org میتوانید مطالب بیشتری در مورد Web Component بخوانید.

منتظر مطالب بعدی در این زمینه باشید.

نگاهی به خاصیت Ping در HTML5

  • بوسیله: محسن شفیعی
  • در 1393/01/30 - 22:37
  • نظرات (8)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

قبلا در مطلبی به خاصیت download در تگ a اشاره کردیم که با استفاده از آن به مرورگر میگفتیم که به جای باز کردن فایل آن را دانلود کند. در این مطلب میخواهیم خاصیت ping در تگ a را بررسی کنیم. همانطور که از اسم این خاصیت برمی آید، هر بار که کاربری روی لینکی کلیک کند که دارای این خاصیت است، مرورگر یک ping به فایل مشخص شده در این خاصیت انجام میدهد.

اما این عمل برای چه کاری مناسب است. اینکار برای اینکه بفهمیم روی لینک های ما چند نفر کلیک کرده اند، مناسب است، که البته اینکار توسط روشهای دیگری نیز انجام می شود، که با این روش میتوان اصولی تر این کار را انجام داد. البته میتوان فایده های دیگری نیز برای این خاصیت به ازای هر پروژه در نظر گرفت.

نحوه استفاده از این خاصیت را در ادامه مطلب ببینید…

(بیشتر…)

آشنایی با page visibility api در HTML5

  • بوسیله: محسن شفیعی
  • در 1393/01/16 - 14:34
  • نظرات (3)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

با استفاده از page visibility api در HTML5 میتوان وضعیت صفحه را در مرورگر کاربر تشخیص داد. برای مثال اگر کاربر روی صفحه دیگری فوکوس کرده باشد و صفحه ما مخفی باشد با استفاده از این API میتوان اینگونه تغیییرات را مطلع شد.

این API در وضعیت Recommendation قرار دارد و میتوان با آسودگی از آن استفاده کرد.

در ادامه مطلب همراه ما باشید…

(بیشتر…)

آشنایی با Notification API در HTML5

  • بوسیله: محسن شفیعی
  • در 1392/12/05 - 19:31
  • نظرات (7)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

بوسیله Notification API میتوانید رویداد های رخ داده جدید مانند رسیدن یک پیام، پایان یافتن یک رویداد یا هر چیز دیگری را به کاربر اطلاع دهید. اما شاید بگویید، برای اینکار که به API احتیاج نداریم و با استفاده از جاوا اسکریپت یا حتی یک alert ساده هم میتوان اینکار را انجام داد، این جمله هم درست است، اما Notification API یک مزیت مهم دارد. آنهم این است که پیغام نمایش داده شده به کاربر خارج از صفحه وب است و توسط خود مروگر انجام میشود، به این صورت حتی اگر مرورگر در حالت فوکوس هم نباشد، باز هم پیغام به کاربر نمایش داده میشود.

در ادامه مطلب همراه ما باشید…

(بیشتر…)

Web Storage در HTML5

  • بوسیله: محسن شفیعی
  • در 1392/11/26 - 18:43
  • نظرات (4)
HTML5

HTML5

برای ذخیره اطلاعات در سمت کاربر، تنها گزینه پیش روی ما استفاده از Cookie است. توسط Cookie ما میتوانیم اطلاعات را به صورت name/value ذخیره کنیم. اما Cookie دارای ضعفهایی نیز است. در Cookie تنها میتوان 4KB اطلاعات را ذخیره کرد و همچنین در هربار درخواست HTTP، اطلاعات کوکی نیز به سمت سرور فرستاده میشود. بنابراین حتی اگر محدودیت حافظه هم وجود نداشته باشد، باز هم استفاده از Cookie برای ذخیره اطلاعات در سمت کاربر کار اشتباهی است.

اما HTML5 ویژگی جدیدی به نام Web Storage را معرفی کرده است. Web Storage نیز مانند کوکی ها به صورت name/value هستند و مقدار حافظه آن‌ها به طور میانگین در مرورگهای مختلف 5MB برای هر دومین است، و همینطور اطلاعات آن‌ها به سمت سرور فرستاده نمیشود.

در ادامه این مطلب بیشتر با این ویژگی آشنا میشویم.

(بیشتر…)

معرفی API مکان یابی در HTML5

  • بوسیله: محسن شفیعی
  • در 1392/11/08 - 16:57
  • دیدگاه‌ها برای معرفی API مکان یابی در HTML5 بسته هستند
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

تا به حال در آپارنت APIهای مختلفی از تکنولوژی HTML5 را معرفی و تست کردیم. در این مطلب میخواهیم GeoLocation API را بررسی کنیم. توسط این API میتوانیم محل نسبتاً دقیق کاربر در محیط واقعی را بدست بیاوریم.

برای مثال مرورگر فایرفاکس به این صورت عمل میکند: اگر برنامه‌ای بخواهد از این ویژگی استفاده کند، ابتدا از کاربر اجازه میگیرد، در صورت موافقت کاربر، فایرفاکس اطلاعات wireless access points نزدیک و IP کاربر را به سرویس ارائه دهنده geolocation، که گوگل است میفرستد و این سرویس با استفاده از این اطلاعات محل کاربر را مشخص میکند و به صورت مختصات آن را برمیگرداند.

در ادامه مطلب همراه ما باشید

(بیشتر…)

معرفی API تمام صفحه (full screen) در HTML5

  • بوسیله: محسن شفیعی
  • در 1392/10/08 - 18:32
  • یک نظر
Full screen api

Full screen api

با استفاده از API تمام صفحه یا Full screen در HTML5 میتوانید سایت یا حتی عنصری مشخص را به صورت تمام صفحه به کاربر نمایش دهید. اینکار مخصوصاً در موبایل ها برای ایجاد تمرکز بیشتر کاربر، بر روی سایت، یا عنصر مربوطه، بسیار خوب است.

در این مطلب قرار است با این API و نحوه کار آن آشنا شویم.

در ادامه مطلب همراه ما باشید…

(بیشتر…)

معرفی تگ template در HTML5

  • بوسیله: محسن شفیعی
  • در 1392/10/05 - 10:11
  • نظرات (6)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

وب اپلیکیشن های به روز با استفاده از دستکاری DOM یا همان ساختار درختی صفحه HTML، تغییرات خودشان را در صفحه اعمال میکنند. برای مثال یک جدول را در نظر بگیرید. قرار است ما اطلاعات مورد نظرمان را بوسیله Ajax از سرور دریافت و درون این جدول نمایش دهیم. این اطلاعات باید به جدول متصل شوند. اما چگونه؟ توسعه دهندگان دو راه حل پیش رو دارند:

1- با استفاده از جاوا اسکریپت تگ های DOM را درون رشته ساخته و سپس به صفحه اضافه میکنند. اینکار آسان به نظر میرسد، اما این روش مشکل امنیتی دارد و اجرای حملات XSS بیشتر میشود. بعضی از توسعه دهندگان هم برای اینکه کار ساده‌تر شود کل HTML را با Ajax می‌فرستند که باعث می‌شود حجم داده‌ها خیلی زیادتر از قبل شود.

2- راه حل دیگر ایجاد یک سطر خالی درون HTML است که به عنوان یک Template مورد استفاده قرار بگیرد. که البته باید آن را از دید کاربر خارج کنید. در این روش با اینکه همه چیز از دید کاربر مخفی است اما باز هم درخواست های HTTP که ممکن است درون آن وجود داشته باشد، انجام میشوند.

هیچ کدام از دو راه حل روش استانداردی نبودند، تا زمانیکه HTML5 تگ جدیدی به نام template را معرفی کرد. با استفاده از تگ template شما میتوانید یک تمپلیت یا prototype برای ساختار DOM خود ایجاد کنید.

در ادامه همراه ما باشید…

(بیشتر…)

  • صفحه 1 از 3
  • 1
  • 2
  • 3
  • <