ضعیفبد نیستمتوسطخوبعالی (1 votes, average: 5٫00 out of 5)
Loading...

آموزش طراحی وب – قسمت چهارم HTML5-Part2

با نام و یاد خداوند یگانه

با ادامه آموزش طراحی وب در خدمت شما کاربران گرامی میهن لرن هستیم.

آموزش فارسی طراحی وب - HTML5
آموزش فارسی طراحی وبHTML5

در ادامه درس HTML5 ، در این قسمت خواهیم آموخت :

  • کار با عنصر SVG جهت تولید گرافیک برداری دو بعدی
  • SSE در html5
  • اجرای کد ها در پشت پرده – Web Workers
  • موقعیت یابی جغرافیایی – Geolocation API
  • ذخیره داده ها – Web Storage
  • میکرودیتا – MiroData
  • بانک اطلاعاتی – Web SQL
  • دخیره نسخه آفلاین سایت – Application Cache

عنصر SVG برای رسم گرافیک برداری در صفحات وب

در قسمت پیشین عنصر Canvas را جهت رسم گرافیک بصورت بیت مپ در صفحات وب به شما معرفی کردیم. و اما در این قسمت قصد معرفی عنصر جدید (Scalable Vector Graphics)SVG در اچ تی ام ال 5 را جهت رسم گرافیک بصورت گرافیک برداری به شما داریم. یک اصلاحیه مربوط به قسمت قبل : عنصر Canvas گرافیک برداری نیست و با زوم کردن دچار افت کیفیت می شود چون ساختار آن بر اساس پیکسل می باشد و اشتباها در ویدئو گفته شد که تگ Canvas بر اساس گرافیک برداری است، این اصلاحیه مربوط به قسمت قبل.

و اما چرا SVG، میدانیم که Canvas که در درس قبلی رسم گرافیک در صفحات وب را با ان یادگرفتیم با SVG که هم اکنون می خواهیم یادبگیریم کار یکسانی انجام میدهند، در اینجا تفاوت های میان آنها را ذکر میکنیم و به خودتان واگذار میکنیم که بخواهید در طراحی هایتان از کدام عنصر استفاده کنید.

در ابتدا بهتر است بگوییم کلا از دو نوع گرافیک برای محاسبات گرافیکی استفاده می شود، گرافیک برداری(vactor) و بیت مپ(bitmap)، بیت مپ از فرمت های رایجی چون gif, jpg, png استفاده می کند که از پیکسل های مستقل و با رنگ های مختلف تشکیل می شوند. اما گرافیک برداری مانند SVG که فرمت هایی چون svg, ai, eps دارد بواسطه نقطه ها و خطوط تعریف می شود و با تغییر اندازه عناصر گرافیکی کیفیت آنها حفظ می شود و این برای وب ایده آل است. همچنین یک ویژگی جالب دیگر که ما با SVG می توانیم داشته باشیم اینکه تصاویری که با این عنصر ایجاد میکنیم و درون آن متنی می نویسیم آن متن براحتی قابل جستجو است و مثل یک متن می باشد! و این برای موتور های جستجو نیز عالی است که محتوای تصاویر را می توانند بخوانند این دقیقا در مقابل تصاویر بیت مپ می باشد.

گرافیک برداری (مورد استفاده در عنصر SVG)بیت مپ (مورد استفاده در عنصر canvas)

-مستقل از Resolution و مناسب برای وب سایت های ریسپانسیو

-پشتیبانی از رویداد ها.

-برای رندرینگ های بزرگ مناسب است همانند نقشه های گوگل.

-برای ساخت بازی مناسب نیست.

-کیفیت با زوم کردن افت نمی کند.

-حجم کمتر.

-وابسته بهResolution

-افت کیفیت با زوم کردن.

-برای ساخت بازی مناسب است.

حالا که با مزایا و معایب هر کدام آشنا شدید، این را بر عهده خودتان می گذاریم که بسته به نیازتان از کدام یک در طراحی های خود استفاده کنید. تصاویر SVG را به راحتی می توانید توسط هر ویرایشگری متنی همراه با HTML5 ایجاد کنید و یا می توانید توسط نرم افزار های Illustrator و Inkscape به تولید این تصاویر بپردازید. همچنین لازم به ذکر است که بگوییم فناوری SVG در سال 2001 توسط کنسرسیوم جهانی وب W3C پیشنهاد شده و هم اکنون نیز ورژن جدید آن در html5 بواسطه تگ های XML برای رسم تصاویر دو بعدی قابل استفاده می باشد، درصورتی که در اچ تی ام ال 4 این امکان وجود ندارد.

عنصر SVG برای رسم اشکال، خود شامل عناصر زیر می شود:

 

  • Rectangle <rect>
  • Circle <circle>
  • Ellipse <ellipse>
  • Line <line>
  • Polyline <polyline>
  • Polygon <polygon>
  • Path <path>

هم اکنون شروع به رسم یک دایره با استفاده از کد زیر می کنیم:

<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
</svg>

عنصر svg را تعریف می کنیم و طول و عرض آنرا مشخص می کنیم.

سپس عنصر circle را برای رسم دایره درون آن استفاده میکنیم و از دو صفت cx و cy برای مشخص کردن مرکز و r برای مشخص کردن شعاع دایره استفاده میکنیم. Stroke-width اندازه ضخامت حاشیه و stroke هم رنگ حاشیه و fill هم مشخص کننده رنگ درون دایره می باشد.

نمونه کد زیر هم برای رسم مستطیل می باشد که در آن فقط طول و عرض مشخص می شود و توسط style رنگ fill یا داخل و stroke یا حاشیه ایجاد شده :

<svg width=”400″ height=”110″>
<rect width=”300″ height=”100″ style=”fill:rgb(0,255,255);stroke-width:3;stroke:rgb(255,100,0)” />
</svg>

 

همچنین صفت x و y هم می توان برای عنصر rect مشخص کرد و در واقع x همان margin یا فاصله از سمت چپ و y از سمت بالا می باشد و خصوصیت rx و ry که برای منحنی کردن حاشیه ها می باشد.

نمونه کد زیر برای رسم خط می باشد:

<svg height=”210″ width=”500″>
<line x1=”0″ y1=”0″ x2=”200″ y2=”200″ style=”stroke:rgb(255,0,0);stroke-width:2″ />
</svg>

X1 و y1 مشخص کننده نقطه شروع می باشند و x2 و y2 مشخص کننده نقطه پایان.

رسم بیضی:

<svg height=”140″ width=”500″>
<ellipse cx=”200″ cy=”80″ rx=”100″ ry=”50″
style=”fill:yellow;stroke:purple;stroke-width:2″ />
</svg>

Cx و Cy مشخص کننده نقطه مرکزی، و rx شعاع بصورت افقی و ry شعاع بصورت عمودی.

همچنین می توان چندین شکل روی هم کشید، همانند تصویر زیر:

HTML5 SVG Ellipse

رسم ستاره:

<svg height=”210″ width=”500″>
<polygon points=”100,10 40,198 190,78 10,78 160,198″
style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;” />
</svg>

مقدار اول یا 100 مربوط می شود به نقطه اولین راس ستاره و اخرین مقدار یا 198 نیز مربوط میشود به راس ضلع سمت راست.

در مثال زیر هم رسم لوگو را مشاهده می کنید که شامل کد های رنگ بصورت گرادیانت، کد بیضی و کد نوشتن متن در svg می باشد:

<svg height=”130″ width=”500″>
<defs>
<linearGradient id=”grad3″ x1=”0%” y1=”0%” x2=”100%” y2=”0%”>
<stop offset=”10%” style=”stop-color:rgb(255,255,0);stop-opacity:1″ />
<stop offset=”100%” style=”stop-color:rgb(255,0,0);stop-opacity:1″ />
</linearGradient>
</defs>
<ellipse cx=”190″ cy=”70″ rx=”85″ ry=”55″ fill=”url(#grad3)” />
<text fill=”#ffffff” font-size=”45″ font-family=”Verdana” x=”150″ y=”86″>
SVG</text>
</svg>

درون عنصر svg برای ایجاد طیف رنگی ابتدا تگ defs را باز میکنیم سپس بر اساس نوع گرادیانت که در درس گذشته نیز معرفی شد یکی از تگ های linearGradient برای طیف رنگ خطی و یا radialGradient برای طیف رنگ دایره ای می نویسم.
به تگ linearGradient یک ای دی دادیم چون پایین که بخواهیم انرا با تگ ellipse مرتبط کنیم نیاز می شود. در اینجا ما دو رنگ قرمز و زرد را داریم، اولی زرد و دومی قرمز در بالا اگر x1 را 100% بدهیم بطور کامل شکل ما قرمز رنگ می شود و یا اگر x2 را هم 0% دهیم به همین شکل ولی برای ایجاد یک طیف رنگی مقادیری متضاد هم می دهیم. و همانطور که گفتیم تگ stop اولی برای رنگ زرد که مقدار انرا 10% داده ایم و تگ دوم برای رنگ قرمز که مقدار 100% تا طیف رنگ بوجود بیاید.
در پایین هم تگ ellipse را داریم که قبلا اموختیم و انرا از طریق id با رنگ گرادینت مرتبط کرده ایم.
برای نوشتن متن درون آن از عنصر text استفاده کرده ایم، رنگ متن را با خصوصیت fill مقدار داده ایم و بقیه خصوصیت که مشخص هست چه هستند x و y هم مختصات قرار گیری متن درون شکل می باشد.

SVG-Star-Logo

و اما اگر بخواهیم چندین خط متن با svg بنویسیم به شکل زیر باید از این عنصر استفاده کنیم و برای تعریف هر خط جدید یک tspan بنویسیم:

<svg height=”90″ width=”200″>
<text x=”10″ y=”20″ style=”fill:red;”>Several lines:
<tspan x=”10″ y=”45″>First line.</tspan>
<tspan x=”10″ y=”70″>Second line.</tspan>
</text>
</svg>

و برای لینک دار کردن متن هم همان تگ a را بکار می بریم فقط بجای href می نویسیم xlink:href :

<svg height=”30″ width=”250″ xmlns:xlink=”http://www.w3.org/1999/xlink”>
<a xlink:href=”http://www.mihanlearn.net/” target=”_blank”>
<text x=”0″ y=”15″ fill=”red”>I love MihanLearn!</text>
</a>
</svg>

تاکنون همه عناصر اصلی svg را اموختیم. این عنصر قدرت بالا در ایجاد گرافیک و انیمیشن دارد و ما می توانیم اشیا را بصورت متحرک نیز در صفحه حرکت دهیم که خود جای بحث و اموزش بسیار دارد و در آینده یک اموزش کامل می توانیم از svg و مثال های مختلف ان بسازیم. جهت تمرین بیشتر می توانید به سایت w3schools رفته که سرفصل های استاندارد اس وی جی را شامل می شود.

آموزش SSE در HTML5
SSE یا Server-Side-Event قابلیت جدیدی است که در اچ تی ام ال 5 بوجود آمده است و این امکان را فراهم می کند تا بصورت خودکار پیام های سرور دریافت شود.
اگر بخواهیم مثالی بزنیم تا این قابلیت را درک کنید مثل اینکه در یک سایت خبری هستید و بعد از چند لحظه متوجه تغییر در عناوین خبری می شوید و یا در یک سایت هستید که نموداری از قیمت ها را به شما نشان میدهد و بعد از مدتی نمودار تغییر می کند و به این شکل تمامی آپدیت هایی که از سمت سرور ارسال می شود توسط مرورگر دریافت می شود.
برای دریافت اطلاعات از سرور شما نیاز به تعریف یک شی EventSource دارید.

var source=new EventSource(“sse.php”);
source.onmessage=function(event)
{
document.getElementById(“result”).innerHTML+=event.data + “<br>”;
};

یک صفحه داریم به نام sse.php که قرار است اپدیت ها را برای ما ارسال کند پس در اول مشخص شده که از کجا باید اپدیت دریافت شود. وقتی اپدیتی ارسال شود رویداد خط دوم یعنی onmessage اجرا می شود و زمانی که این رویداد ارسال می شود نتیجه ان در عنصری که ای دی ان result است نمایش داده می شود، مثلا درون یک div که ای دی ان result که مشخص کرده ایم است. اپدیت درون event.data قرار دارد.
و سمت سرور نیز باید درون فایلی که اپدیت می خواهد ارسال کند یک کد بنویسید. بعنوان مثال یک صفحه پی اچ پی، به کد زیر توجه کنید:

<?php
header(‘Content-Type: text/event-stream’);
header(‘Cache-Control: no-cache’);

$time = date(‘r’);
echo “data: The server time is: {$time}\n\n”;
flush();
?>

در آن صفحه مقدار content-type باید برابر با text/event-stream قرار گیرد تا جریان ارسال اطلاعات بوجود اید. همچنین مشخص شده که صفحه نباید کش شود و داده هایی که میخواهیم ارسال شوند باید همیشه با data شروع شوند و متد flush هم باعث ارسال اطلاعات به صفحه ای که داده ها را درخواست می کند می شود.

کد های پشت پرده / web workers
جاوا اسکریپت برای اجرا در یک محیط تک رشته ای طراحی شده است، به این معنی می باشد که اسکریپت ها نمی توانند بطور همزمان اجرا شوند. یک حالت را در نظر بگیرید که شما نیاز دارید به اجرای رویداد های UI، پرس و جو ها و پردازش مقدار زیادی از داده های API و.. در این حالت جاوا اسکریپت مرورگر شما هنگ خواهد کرد بدلیل استفاده زیاد از پردازنده.

Big Loop - HTML5

و اما در این بین نقش web worker چیست؟

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

ادامه اموزش را در یک مثال دنبال می کنیم:

<p>Count numbers: <output id=”result”></output></p>
<button onclick=”startWorker()”>Start Worker</button>
<button onclick=”stopWorker()”>Stop Worker</button>
<br><br>

<script>
var w;

function startWorker()
{
if(typeof(Worker)!==”undefined”)
{
if(typeof(w)==”undefined”)
{
w=new Worker(“demo_workers.js”);
}
w.onmessage = function (event) {
document.getElementById(“result”).innerHTML=event.data;
};
}
else
{
document.getElementById(“result”).innerHTML=”Sorry, your browser does not support Web Workers…”;
}
}

function stopWorker()
{
w.terminate();
}
</script>

مثال بالا یک نمونه ساده می باشد که عمل شمارش را انجام میدهد.

کد اول بررسی میکند که آیا مرورگر پشتیبانی می کند یا خیر :

if(typeof(Worker)!==”undefined”)
{
// Yes! Web worker support!
// Some code…..
}
else
{
// Sorry! No Web Worker support..
}

سپس اگر مرورگر پشتیبانی کند(که تمامی مرورگر های جدید این قابلیت را پشتیبانی می کنند) با کد

w=new Worker(“demo_workers.js”);

یک شی ورکر ایجاد می کنیم و فایل های جاوا مورد نظرمان را درون این فایلی که مشخص کرده ایم قرار می دهیم یعنی demo_workers.js .

در واقع کد زیر درون فایل قرار دارد:

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout(“timedCount()”,500);
}

timedCount();

postMessage خروجی تابع را به صفحه می فرستد.

هنگامی که پاسخ بر میگردد رویداد w.onmessage اجرا می شود به همراه کد های درون آن و اطلاعات برگشتی درون event.data ذخیره می شوند.

کد w.terminate(); هم باعث خاتمه دادن می شود.

پس یادگرفتید که چگونه چندین کد اسکریپت در پشت پرده اجرا کنید!

 

موقعیت یابی جغرافیایی / Geolocation API
توسط این قابلیت جدید می توانید موقعیت کاربر را به او نشان دهید، البته هنگامی که خود کاربر اجازه به اشتراک گذاری موقعیت مکانی خود را بدهد.
به نمونه کد زیر توجه کنید:

<p id=”Geo”>Click the button to get your coordinates:</p>
<button onclick=”getLocation()”>Show My Location</button>
<script>
var x=document.getElementById(“Geo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}
</script>

در کد بالا یک دکمه قرار دادیم تا درصورتی که کاربر بخواهد از موقعیتش مطلع شود روی آن دکمه کلیک کند. وقتی روی دکمه کلیک شود تابع getLocation اجرا می شود و ابتدا با دستور if بررسی می شود که ایا مرورگر از این api پشتیبانی میکند(برای مرورگر های قدیمی که پشتیبانی نمی کنند یک پیام مبنی بر عدم پشتیبانی نشان می دهد که در کد مشاهده می کند) در صورت پشتیبانی ادامه کد اجرا می شود و توسط متد getCurrentPosition موقعیت فعلی از ای اس پی یا توسط جی پی اس گرفته می شود. همچنین چند متد دیگر داریم مثل watchPosition که مکان جدید کاربر را بر می گرداند و دنبال می کند البته اگر روی گوشی موبایل جی پی اس داشته باشید و یا متد clearWatch که متد watchPostition را لغو می کند.
تابع showPosition در بالا نیز اطلاعات تابع قبلی را گرفته و در قالب HTML در صفحه نمایش میدهد عرض و طول جغرافیایی موقعیت کاربر را.
همچنین می توانید موقعیت را دریافت کرده و آن را روی نقشه نشان دهید:

<body>
<p id=”Geo”>Click the button to get your position:</p>
<button onclick=”getLocation()”>Show Me on Map</button>
<div id=”mapholder”></div>
<script src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script>
var x=document.getElementById(“Geo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}

function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById(‘mapholder’)
mapholder.style.height=’250px’;
mapholder.style.width=’500px’;

var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById(“mapholder”),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:”You are here!”});
}

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML=”User denied the request for Geolocation.”
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML=”Location information is unavailable.”
break;
case error.TIMEOUT:
x.innerHTML=”The request to get user location timed out.”
break;
case error.UNKNOWN_ERROR:
x.innerHTML=”An unknown error occurred.”
break;
}
}
</script>
</body>

تابع showPosition را نگاه کنید؛ عرض جغرافیایی را در lat میریزیم و طول را در lon سپس این مشخصات را با استفاده از google.maps.LatLng(lat, lon) به نقشه گوگل می دهیم. کد کاملا واضح و گویا می باشد. علاوه بر نقشه قسمتی دیگر هم داریم یعنی تابع showError تا در صورتی که خطایی پیش آید به کاربر اعلام کند بر اساس case های قرار داده شده.
همچنین بواسطه getCurrentPosition می تواند داده هایی دیگر مثل سرعت (coords.speed) ، ارتفاع از سطح دریا یا نمایش جهت(coords.heading) را نیز داشته باشید.

ذخیره داده ها / Web Storage
HTML5 دو مکانیزم جدید مشابه کوکی ها برای ذخیره داده ها سمت کاربر معرفی کرده است.
کوکی ها هنگامی که داده ها زیاد میشد مشکلاتی داشتند از قبیل اینکه:
– کاهش سرعت در انتقال برخی داده ها
– درخواست ها بدون رمزنگاری ارسال می شد
– فضای کافی برای ذخیره داده وجود نداشت (فضا محدود به 4 کیلوبایت بود)
اما در اچ تی ام ال 5 اینگونه نیست و می توانیم مقدار زیادی داده را ذخیره کنیم بدون اینکه تاثیر منفی روی کارایی سایت بگذارد.
دو روش ذخیره سازی وجود دارد:
session storage : این داده ها فقط برای یک جلسه می باشند. در واقع وقتی وارد یک سایت شده اید جلسه ایجاد شده و حتی در تب های دیگر در همان پنجره اگر صفحات دیگر ان سایت را باز کنید همان سشن برقرار است ولی با بستن پنجره از بین می رود.
local storage : این داده ها منقضی نمی شوند.
به مثال زیر توجه کنید، این مثال مربوط به سشن می باشد:

<script type=”text/javascript”>
if( sessionStorage.hits ){
sessionStorage.hits = Number(sessionStorage.hits) +1;
}

else{
sessionStorage.hits = 1;
}
document.write(“Total Hits :” + sessionStorage.hits );
</script>

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

<script>
function clickCounter()
}
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById(“result”).innerHTML=”You have clicked the button ” + localStorage.clickcount + ” time(s).”;
{
else
}
document.getElementById(“result”).innerHTML=”Sorry, your browser does not support web storage…”;
{
{
</script>
</head>
<body>
<p><button onclick=”clickCounter()” type=”button”>Click me!</button></p>
<div id=”result”></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>

همچنین ممکن است گاهی ذخیره داده ها و پایداری انها بصورت Local مشکلات امنیتی داشته باشد و بهتر است بعد از اتمام سشن آنها نیز حذف شوند. برای حذف تنظیمات Local Storage شما می توانید از متد زیر استفاده کنید:
localStorage.remove(‘key’)
key همان مقداری می باشد که می خواهید حذف شود ولی اگر بخواهید تمامی تنظیمات را حذف نمایید می توانید از متد زیر استفاده کنید:
localStorage.clear()
و در مثال هم میتوان نمونه کد زیر را ذکر کرد:

<script type=”text/javascript”>
localStorage.clear();

// Reset number of hits.
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
}

else{
localStorage.hits = 1;
}
document.write(“Total Hits :” + localStorage.hits );

</script>

میکرودیتا – Microdata

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

میکروداده اجازه می دهد تا عناصر سفارشی خود را تعریف کنید و خصوصیات سفارشی خود را در صفحات وب تعبیه کنید. در سطح بالا میکرودیتا یک گروه از مقادیر name-valueشامل می شود.

گروه ها items نامیده می شوند ،و هر مقدار name-value یک ویژگی یا خصوصیت(property) است. مثال: برای ایجاد یک ایتم از صفت itemscope استفاده می شود. برای افزودن یک خصوصیت به یک آیتم هم از صفت itemprop استفاده می کنیم.

     <div itemscope>

         <p>My name is <span itemprop=”name”>Saeed</span>.</p>

        My birthday is:

         <time itemprop=”birthday” datetime=”1971-08-04″>

           Aug 4th 1995

         </time>

     </div>

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

Itemprop نیز خصوصیت آیتم را تعریف می کند.

به نمونه کد زیر توجه کنید، با استفاده از میکرودیتا یک شخص معرفی شده است:

 

<section itemscope itemtype=”http://schema.org/Person”>

        Hello, my name is

        <span itemprop=”name”>John Doe</span>,

        I am a

        <span itemprop=”jobTitle”>graduate research assistant</span>

        at the

        <span itemprop=”affiliation”>University of Dreams</span>.

        My friends call me

        <span itemprop=”additionalName”>Johnny</span>.

        You can visit my homepage at

        <a href=”http://www.mihanlearn.net” itemprop=”url”>www.mihanlearn.net</a>.

        <section itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>

               I live at

               <span itemprop=”streetAddress”>1234 Peach Drive</span>,

               <span itemprop=”addressLocality”>Warner Robins</span>,

               <span itemprop=”addressRegion”>Georgia</span>.

        </section>

</section>

 

Item   Type: http://schema.org/Person

   name = John Doe

   jobTitle = graduate research assistant

affiliation = University of Dreams

additionalName = Johnny

url = http://www.johnnyd.com

address = Item(1)

Item 1

Type: http://schema.org/PostalAddress

streetAddress = 1234 Peach Drive

addressLocality = Warner Robins

addressRegion = Georgia

و یا از نمونه کد زیر برای معرفی یک فیلم استفاده شده است:

<div itemscope itemtype=”http://schema.org/Movie”>

<h1 itemprop=”name”>Avatar</h1>

<div itemprop=”director” itemscope itemtype=”http://schema.org/Person”>

Director: <span itemprop=”name”>James Cameron</span>

(born <time itemprop=”birthDate” datetime=”1954-08-16″>August 16, 1954</time>)

</div>

<span itemprop=”genre”>Science fiction</span>

<a href=”../movies/avatar-theatrical-trailer.html” itemprop=”trailer”>Trailer</a>

</div>

 

بانک اطلاعاتی – Web SQL
در اچ تی ام ال 5 می توان دستورات مربوط به بانک اطلاعاتی را نیز اجرا کرد که در زیر جهت الگو گرفتن چند نمونه کد را برایتان می آوریم.
برای باز کردن بانک اطلاعاتی از متد زیر استفاده می کنیم:
var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
که پارامتر های آن از اول به آخر : نام بانک اطلاعاتی، ورژن، توزیحات و اندازه آن می باشد.
دستور زیر یک جدول بنام LOGS در بانک اطلاعاتی mydb ایجاد می کند:

var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);

db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
});

دستور زیر جهت درج در جدول با استفاده از مقادیر استاتیک داده شده استفاده می شود:

var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, “foobar”)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, “logmsg”)’);
});

درج در جدول با استفاده از مقادیر پویا:

var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);

db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id,log) VALUES (?, ?’), [e_id, e_log];
});

برای خواندن از جدول از دستور زیر استفاده می شود:

db.transaction(function (tx) {
tx.executeSql(‘SELECT * FROM LOGS’, [], function (tx, results) {
var len = results.rows.length, i;
msg = “<p>Found rows: ” + len + “</p>”;
document.querySelector(‘#status’).innerHTML += msg;

for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}

}, null);

ذخیره نسخه آفلاین سایت – Application Cache
اپلیکیشن کش یکی از ویژگی های جدید html5 می باشد که این امکان را به ما میدهد صفحات وب را ذخیره کنیم و در زمان آفلاین بودن(قطع بودن اینترنت) آنها را مرور کنیم. از مزیت های این روش مرور آفلاین صفحات و کاهش حجم درخواست صفحات از سرور چراکه فقط هنگامی یک صفحه تغییر کند درخواست می شود در غیر اینصورت خیر.
برای فعال کردن این ویژگی باید در تگ html از صفت manifest استفاده کنید، همانند مثال زیر:

<html manifest=”demo.appcache”>

در هر صفحه ای که بخواهید اپلیکیشن کش را فعال کنید باید خصوصیت manifest را برای ان قرار دهید و در جلو این صفت نام یک فایل را مشاهده می کنید که با پسوند appchache یعنی پسوند فایل های manifest ذخیره شده است، اما این فایل شامل چه محتویاتی می باشد، به مثال زیر توجه کنید:

CACHE MANIFEST
# comment!
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

قسمت اول که Cashe ManiFest یعنی فایل هایی که کاربر وقتی صفحه را مشاهده کرد باید ذخیره و cache شوند.
در قسمت دوم یا Network فایل هایی که نباید کش شوند.
و در قسمت سوم یا FallBack مشخص شده که اگر به هر دلیلی مانند قطع اتصال اینترنت فایل های درون html نمایش داده نشوند بجای آن فایل offline.html نمایش داده شود.

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

دانلود
دانلود اموزش طراحی وب – قسمت 4 – اچ تی ام ال 5

دانلود فیلم آموزشی

مشاهده آنلاین

دانلود کتاب الکترونیکی HTML5 – قسمت دوم (قسمت چهارم اموزش طراحی وب)

دانلود فایل های تمرینی این قسمت

کیفیت فیلم آموزشی : فوق العاده بالا / 720p – زمان :  1 ساعت و 8 دقیقه – حجم : 110 مگابایت

امیدواریم که این قسمت از آموزش طراحی وب نیز مورد پسندتان بوده باشد. در قسمت بعدی CCS و CSS3 را فراخواهیم گرفت.

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

همچنین ببینید

آموزش فارسی فریم ورک لاراول

آموزش فریم ورک لاراول – قسمت نهم

به نام خالق زیبایی ها با نهمین قسمت از مجموعه پر طرفدار “آموزش فریم ورک …

11 دیدگاه

  1. مشتاقانه منتظر ادامه ی این اموزش هستیم

  2. واقعاجمله ای در شان شما برای این همه بزرگواری و زحمت
    پیدا نمیکنم. اجرتون با خدا. خیلی خسته نباشید.

  3. با سلام خدمت شما
    خیلی خیلی ممنون از شما
    فقط یه پیشنهادی دارم میشه اول این دوره رو تموم کنید بعد برید سره دوره های دیگه مثلا شبکه…

  4. دکوراسیون داخلی

    بسیار عالی و کامل بود ممنون

  5. خسته نباشید
    منتظر لینک هستیم…

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *