مشخصه جدید Scoped در HTML5

  • بوسیله: محسن شفیعی
  • در 1392/01/04 - 18:00
  • نظرات (5)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

مشخصه جدید به نام Scoped در HTML5 بوجود آمده است که مخصوص تگ استایل است. اگر این مشخصه را به تگ استایل بدهیم باعث میشود قوانینی که در تگ استایل نوشتیم فقط برای تگ والد و فرزندان تگ والد اعمال شود. به همین دلیل تگ استایل باید داخل خود body تعریف شود.

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

(بیشتر…)

ضبط صدا و ویدئو در HTML5

  • بوسیله: محسن شفیعی
  • در 1392/01/02 - 18:04
  • نظرات (5)
WebRTC

WebRTC

مقدمه

ضبط صدا و ویدئو همیشه به عنوان یک کار سخت در توسعه وب شناخته شده است. برای سالهای زیادی برای اینکار به پلاگین هایی مانند Flash و Silverlight وابسته بودیم.

ولی HTML5 برای نجات آمده است. در واقع HTML5 کاری کرده است که میتوان به سخت افزار کاربر دسترسی پیدا کرد. ابزارهای GeoLocation, Orientaion API, WebGL و Web Audio API نمونه های خوبی هستند. این ابزارها به طور باور نکردنی خیلی قدرتمند هستند که با استفاده از APIهای سطح بالای JavaScript میتوان به سطوح زیرین سخت افزار کاربر دسترسی پیدا کرد.

در این آموزش مقدمه ای بر API جدید navigator.getUserMedia() که این اجازه را میدهد به میکروفون و دوربین کاربر دسترسی داشته باشیم.

(بیشتر…)

راهنمای کامل SVG

  • بوسیله: محسن شفیعی
  • در 1391/12/28 - 17:37
  • نظرات (15)
راهنمای کامل SVG

راهنمای کامل SVG

SVG یک فرمت برای استفاده از تصاویر وکتور است. شما میتوانید در برنامه Adobe Illustrator خروجی با فرمت SVG بگیرید. اما چیزهایی هست که ابتدا باید بدانید.

چرا استفاده از SVG توصیه میشود؟

  • حجم فایل کم است و به خوبی فشرده شده است.
  • میتواند به هر سایز دلخواهی تغییر اندازه بدهید بدون اینکه از وضوح آن کم کند (در بعضی مواقع خیلی کم).
  • در صفحه نمایش های Retina به خوبی نمایش داده میشود.
  • میتواند به صورت تعاملی و کنترلی طراحی شود.

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

(بیشتر…)

نگاهی به Datalist در HTML5

  • بوسیله: محسن شفیعی
  • در 1391/11/30 - 17:57
  • نظرات (3)
نگاهی به Datalist در HTML5

نگاهی به Datalist در HTML5

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

در سال های گذشته ما با استفاده از Javascript باید اینکار را انجام میدادیم اما در HTML5 به لطف تگ datalist به راحتی میتوان چنین لیست هایی برای راحتی کاربر درست کرد.

کار  به این صورت است که ابتدا لیستمان را درون تگ datalist درست میکنیم سپس به input مربوطه میرویم و با استفاده از خاصیت list لیستمان را به input متصل میکنیم. اما بر اساس Mozilla Developer Network خاصیت list برای inputهای از نوع hidden, checkbox, radio, file و button وجود ندارد.

(بیشتر…)

ساخت کنترل های سفارشی برای ویدئو در HTML5

  • بوسیله: محسن شفیعی
  • در 1391/11/29 - 21:43
  • یک نظر
ساخت کنترل های سفارشی برای ویدئو در HTML5

ساخت کنترل های سفارشی برای ویدئو در HTML5

در HTML5 به سادگی میتوان کنترل های سفارشی برای پخش ویدئوها ساخت. حتی این امکان را به شما میدهد که بتوانید دکمه های اضافی مانند حرکت سریع به جلو را بسازید. این کارها با استفاده از APIهای جاوا اسکریپت قابل انجام است. اگر در مورد ویدئو در HTML5 چیزی نمیدانید به مطلب “شروعی بر ویدئو در HTML5” مراجعه کنید.

در این مطلب به آموزش ساخت کنترل های سفارشی برای ویدئو در HTML5 میپردازیم.

(بیشتر…)

فاویکون(Favicon): نقش در حال تغییر

  • بوسیله: محسن شفیعی
  • در 1391/11/23 - 19:07
  • یک نظر
فاویکون(Favicon): نقش در حال تغییر

فاویکون(Favicon): نقش در حال تغییر

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

امروزه از فاویکون به عنوان یکی از مقاصد تجاری استفاده میشود. زیرا میتوان با استفاده از این قابلیت نمایی زیبا از سایت را به کاربر نشان داد.

مفهوم فاویکون اولین بار در IE در سال 1999 بوجود آمد. فایلی با فرمت ico. که در ریشه هاست با نام favicon.ico قرار دارد. از آن زمان تا به حال خیلی چیز تغییر پیدا کرده اند. از این قابلیت امروزه در بسیاری از وسایل استفاده میشود.

نحوه استفاده

در HTML5 برای خصوصیت rel این قابلیت مقدار icon را انتخاب کرده است.

(بیشتر…)

نکته سریع: roleها در HTML5

  • بوسیله: محسن شفیعی
  • در 1391/11/18 - 21:18
  • نظرات (4)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

در HTML5 شما میتوانید قسمت های مختلف سایت را با استفاده از roleها به مرورگر بشناسانید. مهمترین roleهایی که باید از آنها آگاه باشید در زیر لیست شده اند:

  • banner – مخصوص تگ header است و مشخص کننده اسم سایت است
  • search – مخصوص فرم Search
  • main – مخصوص مشخص کردن بخش اصلی صفحه. اطلاعات بیشتر
  • navigation – برای هر کدام از منوها. عموما برای عنصر nav استفاده میشود.
  • contentinfo – شامل اطلاعاتی در مورد صفحه مانند کپی رایت و لینک های حریم خصوصی

این مشخصه ها در سئو تاثیر بسزایی دارند.

برای اضافه کردن role به یک تگ به این صورت عمل میکنیم:

<header role=”banner”> آپارنت </header>

برای اطلاع از تمامی roleها به این صفحه مراجعه کنید: W3 – The Roles Model

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

(بیشتر…)

آموزش Drag and Drop در HTML5

  • بوسیله: محسن شفیعی
  • در 1391/11/04 - 10:54
  • نظرات (6)
آموزش Drag and Drop در HTML5

آموزش Drag and Drop در HTML5(عکس را زیاد جدی نگیرید)

قبل به وجود آمدن HTML5 ما برای استفاده از ویژگی Drag and Drop حتما لازم بود از کتابخانه هایی مثل jQuery یا MooTools استفاده کنیم. حالا با استفاده از HTML5 ما میتوانیم ویژگی های Drag and Drop را پیاده سازی کنیم.

برای اینکه به یک عنصر این قابلیت را اضافه کنیم باید ویژگی draggable=true را به آن بدهیم. این ویژگی API های دیگری هم دارد که عبارتند از dragstart, drag, dragend, dragenter, dragleave, dragover و drop که از اینها هم میتوانیم استفاده کنیم.

خب APIهایی که در بالا نوشتیم نیاز به توضیح ندارد. حالا میرویم که یک عنصر قابل درگ کردن درست کنیم.

(بیشتر…)

آموزش کار با Canvas

  • بوسیله: محسن شفیعی
  • در 1391/10/30 - 16:00
  • نظرات (7)
آموزش کار با Canvas

آموزش کار با Canvas

 

عنصر Canvas این امکان را توسعه دهندگان وب میدهد که گرافیک سایت خودشان را در سایت طراحی بکنند مانند یک عکس و حتی بیشتر. از مزایای آن میتوان به کاهش درخواست های HTTP به دلیل کم کردن استفاده شما از عکس و کاهش زمان بارگذاری وب سایت اشاره کرد. همچنین این عنصر به شما این امکان را میدهد که گرافیک های سفارشی مثل چارت ها و نمودار ها را به راحتی در سمت کلاینت طراحی بکنید. پیش از این, این کارها در سمت سرور انجام میشد.

 


عنصر Canvas

عصنر Canvas دارای خاصیت های id و height و width میباشد. خب اولین Canvas خود را میتوانید به صورت زیر بنویسید.

<canvas id="myCanvas" width="400" height="300" >
    Your web browser deos not support canvas!
</canvas>

(بیشتر…)