آموزش طراحی سایت (HTML CSS Javascript) | آتریا

html5

SSE چیست؟

SSE مخفف کلمات Server-Sent Events است و امکان دریافت پیام های یک طرفه از سمت سرور بصورت اتوماتیک را فراهم می کند.

(SSE (Server-Sent Events - پیام های یک طرفه

SSE قابلیت جدیدی در Html5است که به مرورگر این امکان را می دهد تا Updateهای ارسالی از طرف سرور را دریافت کند.

این قابلیت در گذشته بصورت دیگری وجود داشته است، هر زمان که Updateی ایجاد می شد صفحه وب برای دریافت Update مجبور بود آنرا درخواست نماید. اما با SSE این کار بصورت اتوماتیک و پشت پرده صورت می گیرد.

مثال هایی از SSE: تغییر عناوین خبرها، نتایج ورزشی، تغییر در شاخص ها و نمودارهای سایت های اقتصادی و ...

پشتیبانی مرورگرها

مرورگرهای Firefox, Opera, Chrome, Safari امکان دریافت پیام های یک طرفه از سمت سرور را پشتیبانی می کنند.

توجه: Internet Explorer امکان ارسال پیام های یکطرفه را پشتیبانی نمی کند.

دریافت اطلاعات ارسالی از سرور

شیء EventSource برای دریافت اطلاعات در Updateهای ارسالی از طرف سرور به کار می رود.

بلافاصله بعد از ایجاد شیء EventSource، این شیء تمام رویدادهایی که در URL تنظیم شده اتفاق می افتد را گوش می دهد (Listening).

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

مثال (SSE چیست؟)

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

خودتان امتحان کنید »

توضیح کد بالا:

در خط اول یک شی جدید EventSource با نام source ایجاد کرده و صفحه demo_sse.php را به عنوان URL یا آدرس فایلی که Update را به صفحه ارسال می کند تعیین کرده ایم.
- هر زمان که Update جدیدی دریافت شود رویداد onmessage اجرا می شود.
- هر زمان که رویداد onmessage اجرا می شود نتیجه خروجی در عنصر با id معادل "result" به روز رسانی می شود. (آپدیت ارسالی در شی event.data قرار دارد)

چک کردن پشتیبانی مرورگر از SSE

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

قطعه کد زیر بررسی می کند که آیا مرورگر از متد SSE پشتیبانی می کند یا خیر و کد لازم را در هر صورت اجرا می نماید:

if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code.....
}
else
{
// Sorry! No server-sent events support..
}

کد سمت سرور

برای اینکه مثال بالا عمل کند باید صفحه ای وجود داشته باشد که قابلیت تولید و ارسال Update را داشته باشد. برای مثال یک صفحه PHPیا ASP

کد سمت سرور برای ارسال آپدیت بسیار ساده است. کافی است در صفحه PHP یا ASP، مقدار خاصیت Content-Type صفحه را بر روی مقدار text/event-stream تنظیم نمایید. حالا می توانید جریان ارسال اطلاعات را شروع نمایید.

کد PHP:

<?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();
?>

کد ASP به زبان VB:

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

توضیح کد:

مقدار خاصیت Content-Type صفحه را بر روی مقدار text/event-stream تنظیم نمایید.
مشخص نمایید که صفحه نباید اطلاعات را Cashe (ذخیره) نماید.
داده ها را برای ارسال آماده نمایید، همواره با کلمه data شروع می شود.
با استفاده از متد ()Flush، نتیجه را به صفحه درخواست کننده ارسال نمایید.

شیء EventSource

در مثال بالا از رویداد onmessage برای دریافت پیام، استفاده شده است. اما رویدادهای دیگری که در دسترس اند شامل موارد زیر است:

رویداد	توضیحات
onopen	زمانی که یک اتصال به سرور برقرار شود، اتفاق می افتد.
onmessage	زمانی اتفاق می افتد که یک پیام دریافت شود.
onerror	زمانی که یک خطا رخ دهد اتفاق می افتد.

اجرای کدهای javascript در پشت پرده
Web Worker یک کد JavaScript است که در پشت پرده، بدون اینکه بر کارآیی صفحه تأثیری داشته باشد، اجرا می شود.
web worker چیست؟
زمان اجرای اسکریپت ها در صفحات HTML، تا زمانی که اجرای اسکریپت تمام نشود، صفحه به کلیک ها و درخواست های کاربر پاسخ نمی دهد.
Web Worker یک کد JavaScriptاست که در پشت پرده، مستقل از اسکریپت های دیگر بدون اینکه بر روی کارآیی و عملکرد صفحه تاثیری داشته باشد اجرا می شود. با استفاده از این متد می توان در حین اجرای اسکریپت ها، به صورت عادی به کار با صفحه پرداخته و به کلیک کردن و انجام سایر امور مورد نظر خود بپردازید.
پشتیبانی مرورگرها

مرورگرهای Internet Explorer 10, Firefox, Opera, Chrome, Safari متد Web Worker را پشتیبانی می کنند.
مثال Web Worker در HTML5
در مثال زیر، یک Web Worker ساده ایجاد کرده ایم که با کلیک روی دکمه "Start Worker" شروع به شمارش اعداد می کند:
مثال (اجرای کدهای javascript در پشت پرده)
<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>
خودتان امتحان کنید »
آیا مرورگر از Web Worker پشتیبانی می کند؟
در مرحله اول باید چک کرد که آیا مرورگر ما از متد Web Worker پشتیبانی می کند یا خیر:
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
ایجاد فایل Web Worker
در متد Web Worker کدهای JavaScript مورد نظرمان را در یک فایل خارجی بنام "demo_workers.js" و در بیرون از صفحه قرار می دهیم.
کد زیر یک کد ساده JavaScript است که عمل شمارش را انجام می دهد و فقط به عنوان یک مثال مطرح شده است:
var i=0;

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

timedCount();
مهمترین نکته در کد بالا متد ()postMessage است، که مقدار خروجی تابع را بصورت یک پیام به صفحه ارسال می کند.
توجه:از Web Workerها به صورت معمول برای کارهای ساده ای مانند مثال بالا، استفاده نمی شود و بیشتر برای کارهایی که CPU زیادی مصرف می کنند، استفاده می شود.
ایجاد یک شیء Web Worker
اکنون که فایل خارجی Web Worker را در اختیار داریم باید از صفحه HTML، آنرا فراخوانی کنیم.
این کار بوسیله یک شی Web Worker انجام می شود. کد زیر ابتدا چک می کند که آیا یک شی Web Worker وجود دارد یا خیر، سپس درصورتی که شی وجود نداشته باشد، یک نمونه جدید ساخته و فایل "demo_workers.js" را اجرا می کند.
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
برنامه کد موجود در فایل را اجرا کرده و جواب (Message) را به صفحه برمی گرداند.
حالا از طریق Web Worker می توانیم پیام ها را دریافت و یا ارسال کنیم.
رویداد "onmessage" را به شیء Web Worker، اضافه می کنیم:
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
هنگامی که جواب از Web Worker برمی گردد، رویداد "onmessage" رخ می دهد و کد داخل آن اجرا می شود. اطلاعات برگشتی از Web Worker در event.data نگهداری می شود.
خاتمه دادن به یک Web Worker
زمانی که یک شیء Web Worker ایجاد می شود، تا زمانی که به کار آن خاتمه ندهید، برای دریافت پیام های ارسالی گوش می دهد. (حتی بعد از پایان اسکریپت خارجی)
برای خاتمه دادن به کار یک Web Worker و آزاد کردن منابع مرورگر و کامپیوتر، از متد ()terminate استفاده کنید:
w.terminate();
Web Worker و DOM
از آنجایی که Web Workerها در فایل های خارجی تعریف می شوند، اشیاء JavaScript زیر نمی توانند به آن دسترسی داشته باشند:
- شیء window
- شیء document
- شیء parent
ذخیره صفحات بر روی کامپیوتر کاربر
در HTML5 به سادگی می توان یک نسخه offline از برنامه وب را با ایجاد یک فایل Manifest ساخت.
Application Cache چیست؟
Html5قابلیت جدیدی را با نام Application Cache به کاربران وب ارائه داده است و امکان ذخیره شدن صفحات مرور شده بر روی کامپیوتر کاربر و مشاهده آنها را در زمان قطع ارتباط با اینترنت (offline) را فراهم می کند.
Application Cache سه مزیت را در اختیار کاربران قرار می دهد:
- مرور offline: کاربران می توانند صفحات مورد نظر را حتی در زمان offline، نیز مشاهده نمایند.
- سرعت بالاتر: صفحات ذخیره شده بر روی کامپیوتر کاربر با سرعت بیشتری لود و فراخوانی می شوند.
- کاهش حجم اطلاعات ارسالی از سرور: باعث کاهش حجم اطلاعات ارسالی از سرور شده و مرورگر فقط صفحاتی که تغییر کرده اند، را مجددا فراخوانی می کند.
پشتیبانی مرورگرها

مرورگرهای Internet Explorer 10+, Firefox, Opera, Chrome, Safari متد Application Cache را پشتیبانی می کنند.
مثالی از یک صفحه HTML با قابلیت Application Cashe
مثال زیر، یک صفحه وب با قابلیت مرور offline صفحات در کامپیوتر کاربر را نشان می دهد. در این صفحه قابلیت Application Cache فعال است. توجه نمایید که این خاصیت در حالت عادی، فعال نیست.
مثال (ذخیره صفحات بر روی کامپیوتر کاربر)
<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>
خودتان امتحان کنید »
فعال نمودن قابلیت Application Cache
برای فعال کردن این قابلیت، در تگ <html>، خاصیت manifest را با نام فایل manifest تنظیم نمایید:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
هر صفحه ای که خاصیت manifest برای آن تنظیم شده باشد، با هر بار مشاهده کاربر در حافظه ذخیره می شود (Cached). اگر خاصیت manifest مشخص نشده باشد، صفحه مورد نظر در حافظه ذخیره نمی شود (مگر اینکه بطور مستقیم صفحه مورد نظر را در فایل manifest مشخص نمایید.)
فرمت رایج برای ذخیره فایل های manifest، فرمت "appcache." است.
فایل Manifest
فایل Manifest یک فایل متنی ساده است و به مرورگر می گوید که چه چیزهایی را باید و نباید Cache نماید.
این فایل شامل 3 قسمت اصلی است:
- Cashe ManiFest:فایل های تعیین شده در این قسمت، در هر بار مشاهده کاربر، دانلود و Cache خواهند شد.
- Network:فایل های تعیین شده در این قسمت نیازمند وجود ارتباط اینترنتی به سرور بوده و هیچگاه ذخیره نمی شوند.
- Fallback: فایل یا فایل های ذخیره شده در این قسمت، در صورتی که به هر دلیل صفحه مورد نظر کاربر، قابل دسترسی نباشد، فراخوانی می شوند. (به جای فایل اصلی)
در این قسمت به تشریح خط به خط فایل Manifest می پردازیم:
CACHE MANIFEST
در خط اول، ذکر عبارت CACHE MANIFEST الزامی است:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
در فایل Manifest بالا، لیست فایل هایی که باید Cache شوند آورده شده است، یک فایل CSS، یک عکس با فرمت gif. و یک فایل JavaScript
زمانی که فایل Manifest اجرا می شود مرورگر 3 فایل تعیین شده را از سرور سایت، دانلود و ذخیره می کند. بنابراین هر زمان که کاربر به اینترنت متصل نباشد، سایر فایل های جانبی صفحه (مثل تم یا اسکریپت ها) نیز قابل دسترس خواهند بود.
NETWORK
در قسمت بعدی، عبارت Network قرار داده می شود. فایل هایی که در زیر عبارت Network تعیین شوند هیچگاه توسط مرورگر Cache نخواهند شد:
NETWORK:
login.asp
از علامت ستاره (*) می توانید برای نشان دادن اینکه تمام فایل ها، نیاز به ارتباط اینترنتی دارند استفاده نمایید:
NETWORK:
*
FALLBACK
در قسمت آخر نیز، عبارت FALLBACK قرار داده می شود. در صورتی که صفحه به هر دلیلی قابل دسترسی و مشاهده نباشد، فایلی که در زیر این عبارت تعیین شود، نشان داده خواهد شد.
در مثال زیر، فایل "offline.html" در صورتی که ارتباط با اینترنت میسر نباشد، بجای تمام فایل هایی که در پوشه /html/ قرار دارند، بکار خواهد رفت:
FALLBACK:
/html/ /offline.html
Update و به روز رسانی فایل های Cache شده
فایلی که بر روی کامپیوتر کاربر ذخیره می شود بدون تغییر باقی می ماند. مگر اینکه یکی از حالات زیر اتفاق بیافتد:
- کاربر اطلاعات Cache شده مرورگر را پاک کند.
- فایل Manifest تغییر کند.
- Application Cache بصورت برنامه ریزی شده تغییر کند.
مثال - فرم نهایی فایل MANIFEST
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html
توجه:خطوطی که با کاراکتر "#" شروع می شوند، توضیحات اند (comments)، اما علاوه بر این، می توان از آن برای اهداف دیگری نیز استفاده نمود. مرورگر پس از ذخیره صفحه بر روی کامپیوتر کاربر، همواره صفحه ذخیره شده را نمایش داده و اگر فایل اصلی تغییر کند به کاربر اطلاع نمی دهد، مگر اینکه فایل Manifest آنرا Update کنید. یکی از راه های دوباره Cache کردن فایل ها توسط مرورگر، این است که تاریخ و نسخه مشخص شده در خط Comment را تغییر دهید.
نکاتی درباره Application Cache
در استفاده از این قابلیت و اینکه چه فایل هایی را بر روی کامپیوتر کاربران Cache می کنید، دقت نمایید.
مرورگر پس از ذخیره صفحه برروی کامپیوتر کاربر، همواره صفحه ذخیره شده را نمایش داده و اگر فایل اصلی تغییر کند به کاربر اطلاع نمی دهد. مگر اینکه فایل Manifest آنرا Update کنید.
همچنین مرورگرهای مختلف محدودیت مشخصی در حجم فایل های ذخیره شده لحاظ می کنند (معمولا مرورگرها، حداکثر 5 مگابایت برای ذخیره فایل های هر سایت اختصاص می دهند)
مقدمه آموزش HTML5
آموزش HTML5 (اچ تی ام ال 5) - معرفی
HTML5 (اچ تی ام ال 5) یک استاندارد جدید برای HTMLاست.
نسخه قبلی HTML یعنی HTML 4.01 در سال 1999 آمده است و از آن سال تا کنون، وب تغییرات زیادی کرده است.
HTML5(اچ تی ام ال 5) هنوز در حال پیشرفت است. با این حال مرورگرهای اصلی، بیشتر عناصر و APIهای جدید در HTML5 (اچ تی ام ال 5) را پشتیبانی می کنند.
آموزش HTML5 (اچ تی ام ال 5) با استفاده از مثال ها در هر فصل
در این خودآموز، برای آموزش HTML از صدها مثال استفاده شده است.
به کمک ویرایشگری که در اختیارتان است، می توانید سند HTML را ویرایش کنید و با کلیک روی یک دکمه، نتیجه را مشاهده کنید.
مثال (مقدمه آموزش HTML5)
<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls>
<source src="/movie.mp4" type="video/mp4">
<source src="/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>
خودتان امتحان کنید »
برای مشاهده نتیجه کد بالا روی دکمه "خودتان امتحان کنید" کلیک کنید.
HTML5 (اچ تی ام ال 5) چگونه شروع شد؟
HTML5 (اچ تی ام ال 5) یک همکاری بین W3C و WHATWG است و در سال 2006 تصمیم گرفتند که یک نسخه جدید از HTML را ایجاد کنند.
- W3C مخفف World Wide Web Consortium است و روی XHTML 2.0 مشغول کار بوده است.
- WHATWG مخفف Web Hypertext Application Technology Working Group است و روی وب فرم ها و Applicationها مشغول کار بوده است.
بعضی از قوانین که در HTML5 (اچ تی ام ال 5) بنا نهاده شد:
- ویژگی های جدید باید براساس DOM, CSS, HTML و JavaScript باشد.
- کاهش نیاز به Pluginهای خارجی (مانند Flash)
- بهبود مدیریت خطا
- افزایش نشانه گذاری(markup) برای کاهش اسکریپت نویسی در صفحات وب
- HTML5 (اچ تی ام ال 5) باید مستقل از دستگاه باشد.
- پروسه های پیشرفت باید برای عموم قابل رویت باشد.
اعلان <DOCTYPE!>
<DOCTYPE!> یک تگ HTML نیست بلکه یک اعلان است و به مرورگر می گوید چه نسخه HTMLی در صفحه استفاده شده است.
در HTML5 (اچ تی ام ال 5) تنها یک اعلان <DOCTYPE!> وجود دارد و بسیار ساده است:
<!DOCTYPE html>
آموزش یک مثال ساده
در مثال زیر، یک صفحه HTML5 (اچ تی ام ال 5) با حداقل تگ های مورد نیاز آورده شده است:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>
آموزش ویژگیهای جدید در HTML5 (اچ تی ام ال 5)
بعضی از ویژگیهای خیلی جالب که در HTML5 (اچ تی ام ال 5) آموزش خواهید دید:
- آموزش عنصر <canvas> برای نقاشی دو بعدی
- آموزش عنصر <video> و <audio> برای پخش صدا و تصویر
- آموزش ذخیره سازی محلی (Local)
- آموزش عناصر <article>, <footer>, <header>, <nav>, <section> برای مشخص کردن محتوی
- آموزش ابزارهای جدید برای ساخت فرم، مانند: تقویم، تاریخ، زمان، ایمیل، آدرس وب و جستجو
پشتیبانی از HTML5 (اچ تی ام ال 5) در مرورگرها
HTML5 (اچ تی ام ال 5) هنوز یک استاندارد رسمی نیست، و مرورگرها بصورت کامل آنرا پشتیبانی نمی کنند.
اما مرورگرهای اصلی (Safari, Chrome, Firefox, Opera, Internet Explorer) ویژگی های جدید HTML5 (اچ تی ام ال 5) را در نسخه های جدیدشان اضافه کرده اند.