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

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

(بیشتر…)

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

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

اچ تی ام ال 5 – HTML5

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

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

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

(بیشتر…)

حذف تگ hgroup در HTML5

  • بوسیله: محسن شفیعی
  • در 1392/02/02 - 16:19
  • یک نظر
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

آیا از تگ hgroup استفاده میکنید؟ این زیاد خوب نیست اما این عنصر بزودی در HTML5 حذف خواهد شد.

ما فکر میکنیم که در HTML5 همه چیز در حال اضافه شدن است. مانند اضافه شدن عنصر main, اما اگر تگی هم کارآمد شناخته نشود حذف خواهد شد.

(بیشتر…)

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

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

اچ تی ام ال 5 – HTML5

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

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

(بیشتر…)

نگاهی به 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 میپردازیم.

(بیشتر…)

نکته سریع: 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 باشد.

(بیشتر…)

آموزش کار با 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>

(بیشتر…)

شروعی بر ویدئو در HTML5

  • بوسیله: محسن شفیعی
  • در 1391/10/22 - 23:02
  • نظرات (2)
ویدئو در HTML5

ویدئو در HTML5

در گذشته و حتی امروزه توسعه دهندگان و طراحان وب زمانی که میخواستند یک ویدئو یا صدا را درون سایت خود داشته باشند حتما باید از پلاگین هایی مانند flash یا silverlight استفاده میکردند. اما با وجود HTML5 میتوان به سادگی این عناصر را داخل سایت داشته باشیم.
در این مطلب به چگونگی کار با video در HTML5 میپردازیم.


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

فرمت های ویدئو در وب

اگر میخواهید مطمئن باشید که کاربر مورد نظر شما از هر مرورگری که استفاده میکند بتواند ویدئو را ببینید در ادامه با ما همراه باشید.
(بیشتر…)

  • صفحه 1 از 2
  • 1
  • 2
  • <