منو

قابلیت های پیشرفته Html 5(قسمت بیستم)

قابلیت های پیشرفته Html 5
لیست جلسات
DatoosTech img Course

قسمت اول

مقدمه html

DatoosTech img Course

قسمت دوم

چهارچوب اصلی صفحه های وب

DatoosTech img Course

قسمت سوم

تگ های فراخوانی

DatoosTech img Course

قسمت چهارم

خواص استاندارد تگ های HTML

DatoosTech img Course

قسمت پنجم

تگ های قاب بندی متن

DatoosTech img Course

قسمت ششم

ایجاد لینک در html

DatoosTech img Course

قسمت هفتم

ایجاد جدول در html

DatoosTech img Course

قسمت هشتم

لیست ها در html

DatoosTech img Course

قسمت نهم

فرم ها در html

DatoosTech img Course

قسمت دهم

کنترول ها در html

DatoosTech img Course

قسمت یازدهم

تصاویر در html

DatoosTech img Course

قسمت دوازدهم

استایل در html

DatoosTech img Course

قسمت سیزدهم

آدرس های اینترنتی (url)

DatoosTech img Course

قسمت چهاردهم

اسکریپت ها در Html

DatoosTech img Course

قسمت پانزدهم

تقسيم بندی صفحه و متن در Html

DatoosTech img Course

قسمت شانزدهم

رويدادهای HTML

DatoosTech img Course

قسمت هفدهم

کنترل های ذاتی HTML

DatoosTech img Course

قسمت هجدهم

خواص جدید کنترل ها در HTML 5

DatoosTech img Course

قسمت نوزدهم

اجرای مدیا در Html

DatoosTech img Course

قسمت بیستم

قابلیت های پیشرفته Html 5

DatoosTech img Course

قسمت بیست و یکم

طراحی اشیای گرافیکی

DatoosTech img Course

قسمت بیست و دوم

لیست تگ های Html

مطالب این جلسه

drag & drop عناصر در صفحات وب :

یکی از قابلیت های هیجان انگیز و جالب HTML 5 ، این است که شما می توانید کاری کنید عنصر مورد نظرتان در صفحه وب ، قابل جابه جا شدن باشد . به عبارت دیگر کاربر بتواند آن را از نقطه ای به نقطه دیگر drag & drop کند .

برای مثال شما می توانید کدی طراحی کنید تا کاربر بتواند یک عکس را از مکان اولیه آن به یک مکان دوم که تعیین نموده اید ، به وسیله موس بلند کرده و جابه جا کند .

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

کد لازم برای dargable ( قابل جابه جا بودن ) یک عکس و سپس انتقال آن در جدول زیر به شما نمایش داده شده است . به کد دقت کنید . در ادامه هر مرحله از کد را توضیح داده ایم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style=" width:200px; height:150px; border:2px solid #000 " >
</div>
<img id="drag1" src="../images/html5.gif" draggable="true" ondragstart="drag(event)" width="200px" height="150">
</body>
</html>
پیش نمایش

ذخیره سازی اطلاعات کاربران در صفحات وب ( Web Storage & Cookie )

یکی از فابلیت ها و ویژگی های جدید که به HTML 5 ، اضافه شده است ، امکان ذخیره و بازیابی اطلاعات کاربران در صفحات وب توسط خاصیت web storage است .

برای مثال شما هنگامی که وارد یک سایت شده و نام کاربری و رمز عبور خود را وارد می کنید ، مرورگر این اطلاعات را به خاطر می سپارد . در بازدید از صفحات دیگر همان سایت دیگر لازم نیست ، مجددا اطلاعات کاربری خود را وارد نمایید . یا مثلا فردا که به آن سایت سر می زنید ، متوجه می شوید از قبل در سایت log in شده اید .

با این امور آشنا هستید . تکرار آنها برای تشریح بیشتر مسئله است . این کارها در HTML 4 و یا در PHP توسط کوکی ها cookies انجام می شوند . اما در HTML 5 به جای کوکی ها ، قابلیت درون ساخته ایی اضافه شده است ، که کار آنها را انجام می دهد .

مسلما با مفهوم کوکی آشنا هستید ، اما برای یادآوری به توضیح مجدد cookie و کار آن می پردازیم .

کوکی چیست ؟

کوکی یک قطعه اطلاعات است که سرور بر روی کامپیوتر کاربر ذخیره کرده و در مراجعات کاربر به همان سایت ، از آن اطلاعات برای شناسایی وی استفاده می کند . این اطلاعات معمولا راجع به شناسه کاربری ، رمز عبور ، تنظیمات یک کاربر بر روی سایت و ... می باشد . زمانی که کاربر به وسیله کامپیوتر خود همان سایت را باز می کند ، مرورگر اطلاعات کوکی ها را به سرور ارسال می کند . از کوکی برای بازیابی اطلاعات کاربری و یا سایر تنظیماتی که کاربر در یک سایت ایجاد کرده است ، در مراجعات بعدی به همان سایت استفاده می شود .

web storage چیست ؟

توسط web storage در HTML 5 ، اطلاعات کاربران می تواند به صورت محلی در مرورگر و کامپیوتر کاربر ذخیره شود .

web storage از کوکی ها مطمئن تر و سریعتر بوده و حجم بالاتری از اطلاعات را می توان به وسیله آن ذخیره نمود . اطلاعات ذخیره شده در web storage فقط در زمان هایی که به آنها نیاز است ، ارسال می شوند ، برخلاف کوکی ها که با هر بار درخواست صفحه ، آنها نیز ارسال می شوند . اطلاعات کاربران به وسیله این خاصیت ، توسط جفت های نام و مقدار ذخیره می شوند . این جفت شامل یک نام منحصر به فرد و یک مقدار دلخواه است . در ادامه به تشریح ، نحوه استفاده از این قابلیت می پردازیم ، اما ابتدا به بررسی سازگاری آن با مرورگرهای مطرح می پردازیم .

پشتیانی مرورگرهای مختلف از خاصیت web storage

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

به وسیله خروجی می توانید پشتیبانی مرورگرتان را از این خاصیت مشاهده نمایید .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
<script type="text/javascript">
if (typeof(Storage) !== "undefined") {
document.write("Yes! localStorage and sessionStorage support!");
}
else {
document.write("Sorry! No web storage support..");
}
</script>
</head>
<body>
</body>
</html>
پیش نمایش

انواع حالت ها و اشیای شی web storage :

دو نوع شی و حالت برای نگهداری و دخیره اطلاعات کاربر توسط شی web storage وجود دارد . در لیست زیر به معرفی این دو حالت پرداخته ایم . برای دریافت اطلاعات بیشتر راجع به هر کدام بر روی نام آن کلیک نمایید :

شی localStoarge : این شی برای نگهداری اطلاعات به مدت طولانی استفاده می شود . اطلاعات ذخیره شده توسط این شی بر روی کامپیوتر کاربر قرار گرفته و با بسته شدن مرورگر و یا خاموش کردن کامپیوتر از بین نمی روند و در آینده قابل بازیابی هستند .

شی sessionStorage : این شی برای نگهداری اطلاعات به صورت موقت به کار رفته و در حافظه موقت کامپیوتر کاربر ذخیره می شود . با بسته شدن صفحه جاری در مرورگر و خاموش شدن کامپیوتر ، این اطلاعات نیز از بین رفته و دیگر قابل بازیابی نیستند .