شناسایی پشتیبانی مرورگرها در CSS3 با استفاده از supports@

  • بوسیله: محسن شفیعی
  • در 1392/11/19 - 13:45
  • نظرات (5)
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

قبلاً در مطلبی، با عنوان ویژگی‌های جدید در مرورگر کروم، نگاهی کوتاه به ویژگی supports@ در CSS3 داشتیم. با استفاده از این قانون میتوانید بفهمید که آیا مرورگر از ویژگی مورد نظر شما در CSS پشتیبانی میکند یا خیر. با استفاده از این ویژگی دیگر نیازی به کتابخانه‌هایی مانند Modernizr نداریم.
در این مطلب این ویژگی را به صورت دقیقتری بررسی میکنیم.
در ادامه مطلب همراه ما باشید…

(بیشتر…)

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

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

اچ تی ام ال 5 – HTML5

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

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

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

(بیشتر…)

Dart: زبان جدید گوگل

  • بوسیله: محسن شفیعی
  • در 1392/11/02 - 18:20
  • نظرات (10)
Dart

Dart

Dart زبان برنامه نویسی جدید گوگل برای ساخت اپلیکیشن های تحت وب ساخت یافته است. شما میتوانید آن را بر روی سرور و کلاینت اجرا کنید. گوگل این نکته را هم تأیید و هم انکار کرده است که قرار است Dart جایگزینی برای زبان JavaScript باشد. مطمئناً گوگل بسیار خوشحال می‌شود که توسعه دهندگان از زبانی استفاده کنند که توسعه آن را خودش بر عهده دارد.

هنوز زود است در مورد وضعیت آینده Dart صحبت شود اما میتوان پیشبینی کرد که وضعیت دارت مشابه VBScript در Internet Explorer با شکست مواجه شود.

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

(بیشتر…)

تغییر در کلاس‌ها با استفاده از جاوا اسکریپت

  • بوسیله: محسن شفیعی
  • در 1392/10/24 - 10:02
  • نظرات (3)
جاوا اسکریپت - JavaScript

جاوا اسکریپت – JavaScript

در بیشتر پروژه ها، front-end developerها احتیاج دارند که تغییری در کلاس‌های یک عنصر با استفاده از جاوا اسکریپت ایجاد کنند، که بیشتر هم اینکار را با استفاده از کتابخانه jQuery انجام میدهند، که البته وجود متد toggleClass این نیاز را بیشتر کرده است.

خود جاوا اسکریپت در ابتدا لیست کلاس‌ها را به صورت یک رشته میداد که برای اضافه یا حذف کردن کلاس از درون آن باید، با توابعی مانند indexOf یا توابعی دیگر که مربوط به رشته هستند با کلاس کار کرد. اما حالا دیگر نیازی به کتابخانه jQuery نداریم، زیرا جاوا اسکریپت دست به کار شده و شیئی به نام classList را ایجاد کرده است، که انتظارات همه را برآورده میکند.

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

(بیشتر…)

وب زیباتر با 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 خود ایجاد کنید.

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

(بیشتر…)

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

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

HTML5

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

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

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

(بیشتر…)

نکته سریع: خطایابی بهتر جاوا اسکریپت با console.table

  • بوسیله: محسن شفیعی
  • در 1392/09/14 - 10:08
  • نظرات (2)
جاوا اسکریپت - JavaScript

جاوا اسکریپت – JavaScript

قبلاً در آپارنت در مطلب بررسی کارایی کدهای جاوا اسکرپت یکی از متدهای console به نام time را بررسی کردیم. اما در این مطلب میخواهیم متد دیگری به نام table را معرفی کنیم.

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

(بیشتر…)

راهنمایی مقدماتی در استفاده از three.js

  • بوسیله: محسن شفیعی
  • در 1392/06/19 - 20:59
  • نظرات (2)
threeJs Demo

threeJs Demo

اگر مطالب آپارنت را دنبال کرده باشید در مطلب “مروری سریع بر WebGL” با WebGL و کتابخانه threejs اندکی آشنا شدیم. در این مطلب با استفاده از کتابخانه three.js میخواهیم مدلهای سه بعدی که میسازیم را روی مرورگر نشان دهیم.

مشاهده دمو

منبع: teamtreehouse.com

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

(بیشتر…)