مقدمه‌ای بر 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 یک مزیت مهم دارد. آنهم این است که پیغام نمایش داده شده به کاربر خارج از صفحه وب است و توسط خود مروگر انجام میشود، به این صورت حتی اگر مرورگر در حالت فوکوس هم نباشد، باز هم پیغام به کاربر نمایش داده میشود.

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

(بیشتر…)

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

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

(بیشتر…)

نحوه استفاده از API ویبره در HTML5

  • بوسیله: محسن شفیعی
  • در 1392/09/28 - 22:33
  • نظرات (2)
HTML5

HTML5

کاربران وبی که از موبایل و تبلت استفاده میکنند خیلی بیشتر از قبل شده اند و این آمار روز به روز در حال گسترش است. در آماری که در دسامبر 2013 بدست آمده است از هر 5 دستگاهی که صفحات وب را باز میکنند یکی از آن‌ها موبایل بوده است.

بخش عمده‌ای از اهداف HTML5 هم دربرگیرنده ویژگی‌هایی است که بیشتر آن‌ها در موبایل ها و تبلت ها بیشترین بازدهی را دارند. حالا API جدیدی به نام Vibrate در HTML5 رونمایی شده است که قابلیت این را دارد که ما بتوانیم حالت ویبره را برای گوشی ایجاد کنیم.

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

(بیشتر…)

Application Cache در HTML5

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

اچ تی ام ال 5 – HTML5

همانطور که همه شما میدانید دنیای وب هر روز گسترش پیدا میکند. امروزه اپلیکیشن های بسیاری بر پایه وب ساخته میشود. همانطور که میدانید اپلیکیشن ها میتوانند به صورت آفلاین هم در دسترس کاربران قرار گیرند. اما اپلیکیشن های بر پایه وب برای اینکار چه راه حلی دارند؟ Cache

Cache راه حلی برای ساخت اپلیکیشن های بر پایه وب است. ساختار اولیه Cache موجود در مرورگرها برای اینکار کافی نیست، به همین دلیل HTML5 تکنولوژی به نام Application Cache را توسعه داده است که این امکان را میدهد اپلیکیشن هایی به صورت آفلاین هم بسازیم.

استفاده از Application Cache سه نتیجه خوب برای شما دربر دارد:

1. مرور آفلاین: کاربران میتوانند به صورت آفلاین کل سایت شما را مرور کنند.

2. سرعت: فایلهای کش شده دارای سرعت خیلی بیشتری هستند.

3. کاهش درخواست از سرور: مروگر تنها فایلهایی را از سرور درخواست میکند که تغییر کرده باشند.

Application Cache یا AppCache این امکان را به توسعه دهنده میدهد که انتخاب کند کدام فایل ها را میتواند Cache کند و کدام فایل ها را تنها باید از سرور دریافت کند.

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

(بیشتر…)

نگاهی به عناصر 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 باشد.

(بیشتر…)