انیمیشن inline در SVG

  • بوسیله: محسن شفیعی
  • در 1393/01/06 - 15:50
  • نظرات (4)
Scalable Vector Graphics

Scalable Vector Graphics

اشکال موجود در SVG را به چندین روش میتوان به حالت animation در آورد که در این مطلب ما با تگ animate و تگهای مشابه آن کار خواهیم کرد و خصوصیات آن را شرح میدهیم.

در این مطلب علاوه بر انیمیشن inline کمی نیز با نحوه رسم اشکال در SVG آشنا میشویم.

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

(بیشتر…)

استفاده از تگ 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 برای هر دومین است، و همینطور اطلاعات آن‌ها به سمت سرور فرستاده نمیشود.

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

(بیشتر…)

بهینه سازی سایت برای IOS

  • بوسیله: محسن شفیعی
  • در 1392/11/21 - 15:45
  • نظرات (9)
Mobile Web App

Mobile Web App

همانطور که همیشه گفتیم استفاده از گوشی های هوشمند برای وبگردی هر روز در حال افزایش است. سیستم عامل IOS نیز یکی از پرطرفدارترین سیستم عامل ها برای وبگردی محسوب میشود. در این مطلب میخواهیم نحوه شخصی سازی و بهینه کردن سایت ها و وب اپلیکیشن ها را برای سیستم عامل ISO بررسی کنیم.

(بیشتر…)

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

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

اچ تی ام ال 5 – HTML5

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

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

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

(بیشتر…)

وب زیباتر با Canvas

  • بوسیله: محسن شفیعی
  • در 1392/10/20 - 0:01
  • نظرات (4)
Canvas

Canvas

روزهای پنچشنبه و جمعه اگر روز کاری یا درسی نباشند، بهترین روز برای پرورش ایده‌ها و فکرهای تازه است. خب بهترین بخش برای کار کردن با HTML5 کدام است؟ مطمئناً Canvas یکی از جواب‌های شما است.

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

(بیشتر…)

معرفی 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 خود ایجاد کنید.

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

(بیشتر…)

آموزش ساخت ایمیل ریسپانسیو

  • بوسیله: محسن شفیعی
  • در 1392/10/02 - 17:32
  • نظرات (8)
ایمیل ریسپانسیو

ایمیل ریسپانسیو

در این پست آموزش ساخت ایمیل به صورت ریسپانسیو داده خواهد شد به صورتی که در تمام سرویس های ایمیل، شامل گوشی های هوشمند و اپلیکیشن های ایمیل درست نمایش داده شود. در این روش میخواهیم تا حد امکان از مدیا کوئری ها کمتر استفاده کنیم و قالب را به صورت شناور (fluid) طراحی کنیم.

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

(بیشتر…)