سبد (0)

html5

  • SSE چیست؟

    23 شهریور 1397

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

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

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

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

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

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

     Firefox Opera Google Chrome Safari

    مرورگرهای 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

    زمانی که یک خطا رخ دهد اتفاق می افتد.
    READ MORE

  • آموزش HTML5

    02 آذر 1399

    آموزش 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) را در نسخه های جدیدشان اضافه کرده اند.

    READ MORE

  • اجرای کدهای javascript در پشت پرده

    23 شهریور 1397

    Web Worker یک کد JavaScript است که در پشت پرده، بدون اینکه بر کارآیی صفحه تأثیری داشته باشد، اجرا می شود.

    web worker چیست؟

    زمان اجرای اسکریپت ها در صفحات HTML، تا زمانی که اجرای اسکریپت تمام نشود، صفحه به کلیک ها و درخواست های کاربر پاسخ نمی دهد.

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

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

    Internet Explorer Firefox Opera Google Chrome Safari

    مرورگرهای 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
    READ MORE

  • ذخیره صفحات بر روی کامپیوتر کاربر

    23 شهریور 1397

    در HTML5 به سادگی می توان یک نسخه offline از برنامه وب را با ایجاد یک فایل Manifest ساخت.

    Application Cache چیست؟

    Html5قابلیت جدیدی را با نام Application Cache به کاربران وب ارائه داده است و امکان ذخیره شدن صفحات مرور شده بر روی کامپیوتر کاربر و مشاهده آنها را در زمان قطع ارتباط با اینترنت (offline) را فراهم می کند.

    Application Cache سه مزیت را در اختیار کاربران قرار می دهد:

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

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

    Internet Explorer Firefox Opera Google Chrome Safari

    مرورگرهای 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 مگابایت برای ذخیره فایل های هر سایت اختصاص می دهند)

    READ MORE

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

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