آشنایی با 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 بخوانید.

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

مقدمه‌ای بر Imports در HTML

  • بوسیله: محسن شفیعی
  • در 1393/02/03 - 12:40
  • یک نظر
Html Imports

Html Imports

HTML Imports تکنولوژی جدیدی است که میتواند نحوه ساخت سایتها را به نحوی تغییر دهد. در‌ واقع با استفاده از Imports میتوانید فایل‌های HTML را درون فایلهای دیگر فراخوانی (Import) کنید. اینکار چند مزیت دارد، که شامل قابلیت ساخت مجموعه‌ای از کدهای HTML, CSS و JavaScript که میتواند بین اپلیکیشن شما در اشتراک باشد و یا حتی میتواند درون وب به اشتراک گذاشته شود.

در حالی که این امکان نیز وجود دارد که با استفاده از AJAX، عملیات Imports را در JavaScript به صورت تمیزتری انجام داد.

در ادامه این مطلب میخواهیم این ویژگی را با ویژگی Template در HTML که قبلاً معرفی کردیم ترکیب کنیم.

(بیشتر…)

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

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

اچ تی ام ال 5 – HTML5

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

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

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

(بیشتر…)

استفاده از تگ use در SVG

  • بوسیله: محسن شفیعی
  • در 1392/12/25 - 13:30
  • دیدگاه‌ها برای استفاده از تگ use در SVG بسته هستند
Scalable Vector Graphics

Scalable Vector Graphics

روز به روز استفاده از آیکون فونت ها و SVG در حال افزایش است. اما انتظار میرود که SVG پیشتاز، در استفاده از آیکون ها و اشکال مختلف در صفحات وب باشد. زیرا SVG دارای قابلیت های بیشتری نسبت به آیکون فونت است و شما میتوانید میتوانید انیمیشن های مختلفی بر روی آن به کار ببرید، و یا با کدهای CSS به آن استایل بدهید و فیلترهای مناسب روی آن بگذارید و یا هر زمان که خواستید میتوانید آیکون یا شکل را تغییر دهید.

ما نیز سعی داریم بیشتر با SVG آشنا شویم. اگر هیچ زمینه ای در رابطه با SVG ندارید، میتوانید مطلب قبلی با عنوان راهنمای کامل SVG را مطالعه کنید.

در این مطلب میخواهیم با تگ use در SVG آشنا شویم. در ادامه مطلب همراه ما باشید…

(بیشتر…)

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

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

اچ تی ام ال 5 – HTML5

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

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

(بیشتر…)

معرفی 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 و نحوه کار آن آشنا شویم.

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

(بیشتر…)

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

  • بوسیله: محسن شفیعی
  • در 1392/09/07 - 23:44
  • نظرات (8)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

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

اما فایلهایی با فرمت PDF یا تصاویر، معمولاً در خود مرورگر باز می‌شوند و مستقیماً دانلود نخواهند شد. معمولاً برای اینکه مرورگر را مجبور کنیم که از باز کردن فایل خودداری کند و آن فایل را فقط دانلود کند از کدهای سمت سرور استفاده میکردیم، اما حالا با استفاده از خاصیت download میتوانیم به مرورگر بگوییم که آن فایل را دانلود کرده و آن را باز نکند.

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

(بیشتر…)

نگاهی به عناصر HTML5 بخش دوم

  • بوسیله: محسن شفیعی
  • در 1391/11/16 - 20:24
  • نظرات (4)
عناصر HTML5

عناصر HTML5

در بخش اول این مطلب “نگاهی به عناصر HTML5” در باره عناصر جدید HTML5 مانند header , footer و nav صحبت کردیم. در بخش دوم این مطلب درباره عنصر جدیدی به نام main صحبت خواهیم کرد.

طبق تعریف W3 عنصر main دربرگیرنده محتوای اصلی صفحه HTML است. این عنصر هیچ تاثیر نمایشی در صفحه ندارد و دارای Outline نیست.

همانطور که میدانید شما میتوانید از عناصر header و footer و nav به هر تعدادی که بخواهید در صفحه استفاده کنید اما عنصر main مانند body عمل میکند. و فقط یکی از آن در صفحه باید باشد. همچنین این عنصر نباید فرزند هیچ یک از عناصر article , aside , footer , header و nav باشد.

(بیشتر…)