یک پرش سه روزه برای یادگیری HTML5 : بررسی تگ ها

به اولین قسمت از سری مقاله های HTML 5 خوش آمدید!

HTML 5 یکی از بحث های داغ در این روزها می باشد. از این رو تصمیم گرفتیم مقالات آموزشی کاملی در این مورد فراهم کنیم. این مقالات در یک سری سه روزه ارائه خواهند شد. از ویژگی ها و امکانات ساده شروع خواهیم کرد و به مرور و به صورت گام به گام به سمت امکانات پیشرفته آن خواهیم رفت.

[two_third]

نکته: از آنجا که همه دوستان مایکروسافتی به تکنولوژی های سمت سرور نیاز دارند، طبق معمول از C# و ASP.Net نیز استفاده خواهیم کرد.

چه چیزهایی در این مقاله پوشش داده نخواهد شد؟

اگر شما هیچ اطلاعاتی درباره HTML ندارید، این مقاله برای شما مناسب نخواهد بود. در این آموزش به تگ های <br> و <b> و… نخواهیم پرداخت، بلکه نگاهی به مفاهیم جدید در HTML 5 خواهیم داشت.

[/two_third] [one_third_last]

HTML5

[/one_third_last] [divider style=”normal” top=”10″ bottom=”10″]

HTML5

 

فهرست مطالب:

  • معرفی HTML 5
    • تفاوت بین SGML، HTML و XML چیست؟
    • Doc type چیست؟
    • HTML 5 چه تفاوتی با ورژن های قبلی دارد؟
  • ویژگی های جدید HTML 5
  • تمرین ۱ – آشنایی با مفاهیم جدید ساختار یک صفحه
  • تمرین ۲ – دمو با صفات ورودی جدید
    • مقادیر جدید type
    • برخی صفات مفید و کاربردی
  • تمرین ۳- آشنایی با کنترل Datalist
  • تمرین ۴- المنت های خروجی
  • تمرین ۵، ۶ و ۷ – آشنایی با ویژگی اعتبارسنجی HTML 5
    • تمرین ۵ – پیاده سازی اعتبارسنجی با استفاده از صفت “type” مربوط به المنت های ورودی
    • تمرین ۶ – پیاده سازی اعتبارسنجی با استفاده از صفات custom validation
    • تمرین ۷ – سفارشی سازی اعتبارسنجی
  • تمرین ۸، ۹، ۱۰ و ۱۱ – Application Cache در HTML 5
    • تمرین ۸ – Simple Application Cache Demo
    • تمرین ۹ – حل مشکل double refresh
    • تمرین ۱۰ – آشنایی بیشتر با manifest
    • تمرین ۱۱- اهمیت بخش NETWORK
    • Application Caching در مقایسه با Browser Caching

معرفی HTML 5

ابتدا به سراغ برخی مفاهیم و ترمینولوژی جذاب و ناآشنا و البته پایه ای می رویم.

  • تفاوت بین SGML، HTML و XML چیست؟
  • Doc type چیست؟
  • HTML 5 با ورژن های قبلی چه تفاوتی دارد؟
  • آشنایی با HTML

تفاوت بین SGML، HTML و XML چیست؟

  • SGML کوتاه شده عبارت Standard Globalized Markup language است که زبانی برای تعریف Markup استاندارد می باشد. به زبان ساده تر این زبان تعریف می کند که یک داکیومنت باید به چه شکل و ظاهری باشد.
  • HTML کوتاه شده عبارت Hyper Text Markup language است که یک زبان استاندارد Markup برمبنای SGML می باشد و برای ایجاد صفحات وب استفاده می شود. قوانین تعریف Markup در حال حاضر در DTD می باشد که DTD خود از SGML پیروی می کند.
  • XML کوتاه شده عبارت Extensible Markup language است که از SGML مشتق شده است. HTML محدودیت هایی داشت که در XML رفع شده است. XML زیرمجموعه ای از SGML است که برای ارائه و نمایش داده ها استفاده می شود.

Doc type چیست؟

زمانی که شما برای ایجاد یک صفحه وب از ابزارهایی مانند Dreamweaver یا Visual Studio استفاده نمایید، همیشه عبارت زیر را در خط اول داکیومنت مشاهده خواهید کرد:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

آیا تا به حال این سوال برایتان پیش آمده که این خط چیست؟

پاسخ آن ساده است، این خط دستورالعملی است برای مرورگر که از نسخه HTML ای که صفحه وب با آن نوشته شده، اطلاع پیدا کند. ما با doc type به یک DTD ارجاع می دهیم که مشخص می کند داکیومنت HTML باید چه ساختاری داشته باشد، چه تگ هایی مجاز هستند، چه تگ هایی باید والد باشند و چه تگ هایی فرزند و…. به طور خلاصه، DTD حاوی قوانین است.

[one_sixth]

HTML5

[/one_sixth] [five_sixth_last] [tie_list type=”checklist”]

حال HTML برای ما چگونه با Doc type کار می کند؟

اغلب مرورگرها می گویند: “اگر شما DTD هم فراهم نکنید مشکلی نیست. ما HTML را به خوبی می فهمیم. خود HTML قوانین را می فهمد و من می دانم که چطور آن را اجرا کنم!”

به همین دلیل است که اغلب برنامه نویسان درباره DTD و doc type چیزی نمی دانند.

HTML 5 چه تفاوتی با ورژن های قبلی دارد؟

[/tie_list] [/five_sixth_last]

HTML 5 بر مبنای SGML نمی باشد از این رو نیازی به DTD ندارد. روی هم رفته یک زبان Markup جدید می باشد و قوانین پارسر منحصر به خود را دارد. مشخصات و نحوه نگارش آن بسیار شبیه به نسخه های قبلی می باشد اما در مجموع یک زبان جدید است.

Doc type آن نیز بسیار ساده است.

<!DOCTYPE html>

حال همانطور که در W3.org ذکر شده در بالای هر داکیومنت HTML ای لازم است که Doc Type مشخص شود چه HTML4 باشد چه HTML 5. زمانی که این عبارت حذف می شود، مرورگرها از حالت های اجرای مختلفی استفاده می کنند که با برخی مشخصات سازگار نمی باشد. نوشتن Doc Type در یک داکیومنت تضمین می کند که مرورگر مشخصات مربوطه را در بهترین حالت اجرا می کند.

ویژگی های جدید HTML 5 : 

[one_sixth]

HTML5

[/one_sixth] [five_sixth_last]

ایده اصلی که در پشت ویژگی های جدید HTML5 وجود دارد، فراهم کردن یک استاندارد در دنیای برنامه نویسی وب می باشد.

زمان زیادی است که ما برای دستیابی به قابلیت های رایجی مانند DatePicker، انیمیشن، اعتبارسنجی، پخش صدا و ویدئو، مرور آفلاین، multi-threading در سمت کلاینت و… وابسته به کتابخانه ها و افزونه های third party هستیم.

حالا قادر هستیم که با یک روش استاندارد به چنین قابلیت هایی دست پیدا کنیم.

نکته ای برای تازه کارها – استاندارد به این معنی است که همه افراد از یک روش برای دستیابی به یک مورد خاص استفاده می کنند. به طور مثال، شما یک کد اعتبارسنجی یکسان در هر جا مشاهده می کنید (در تمام برنامه های کاربردی). در حال حاضر استانداری وجود ندارد. برخی از اعتبارسنجی جی کوئری استفاده می کنند در حالی که برخی دیگر از ابزار دیگری استفاده می نمایند. اما حالا با HTML5 استاندارد مشخصی وجود خواهد داشت.

[/five_sixth_last]

حالا اجازه دهید که یک به یک آن ها را بررسی کنیم.

تمرین ۱ – آشنایی با مفاهیم جدید ساختار یک صفحه

زمانی که درباره رابط کاربری وب فکر می کنیم، چه چیزی به ذهن ما می آید.

Header(منظور تگ head نیست بلکه عنوان صفحه می باشد)، Footer (پا صفحه)، Navigation bar( منوی راهنما)، محتوای صفحه، تصاویر، توضیح درباره تصاویر و منوی کناری و…

 

[one_third]

HTML5

[/one_third] [one_third]

در سمت چپ یک تصویر ناشناخته و در تصویر سمت راست تصویر طبیعی و معمول یک انسان را مشاهده می کنید.

هر فردی به راحتی می تواند اعضای بدن تصویر سمت راست را شناسایی کرده و یا جای گذاری نماید، به این دلیل که یک الگوی استاندارد دارد. اما این مسئله درباره تصویر سمت چپ صدق نمی کند.

در برنامه نویسی رابط کاربری نیز منطق خاصی باید اعمال شود.

[/one_third] [one_third_last]

HTML5

[/one_third_last]

پیش از این HTML، تگ ها یا المنت های استانداردی برای تعریف بخش های قابل رویت یک داکیومنت مانند header صفحه، footer، محتوای صفحه و… نداشت. برخی افراد از div و استایل های css برای طراحی استفاده می کردند و برخی دیگر از “table…tr..td”.

HTML5

حال با HTML 5 ما تگ هایی برای Hrader، Footer، nav، FigCaption و… داریم که هریک بخش خاصی از صفحه را مشخص می کنند.

این تگ ها،Markup را به صورت یک Markup معنایی در می آورند.

نکته: این تگ ها هیچ مزیت خاصی در اجرای صفحه ایجاد نمی کنند. تنها ساختار HTML ما را با معنی می کنند.

HTML5

تمرین ۲ – دمو با صفات ورودی جدید

مقادیر جدید type

قبل از این برنامه نویسان برای المنت های UI مختلف مانند datepicker، range picker، color picker و… از کتابخانه های مختلفی استفاده می کردند.

اما حالا HTML 5 با معرفی مقادیر جدیدی در صفت type مربوط به المنت های ورودی استاندارد جدیدی را ارائه کرده است.

در ادامه به چند مورد از آن ها نگاهی می اندازیم:

  • Number
<input type="number" name="MyNuberElement" id="MyNumberElement" />

HTML5

  • Range
<input type="range" name="MyRangeElement" id="MyRangeElement"/>
  • HTML5
  • Color
<input type="color" id="MyColorElement" name="MyColorElement" />
  • HTML5
  • Date
<input type="date" id="MyDateElement" name="MyDateElement" />
  • HTML5
  • Time
<input type="time" id="MyTimeElement" name="MyTimeElement"/>
  • HTML5
  • Datetime-local
<input type="datetime-local" id="MyDateTimeLElement" name="MyDateTimeLElement" />
  • HTML5
  • DateTime(شامل time zone)
<input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement"/>
  • HTML5
  • Month
<input type="month" id="MyMonthElement" name="MyMonthElement" />

HTML5

برخی صفات مفید و کاربردی

  • Autofocus

این صفت به ما این امکان را می دهد که یک focus اولیه در زمان بارگزاری صفحه تعریف کنیم.

&hellip;

<label for="birthMonth">Birth Month</label>

<input type="month" id="MyMonthElement" name="MyMonthElement" autofocus />

&hellip;

کد بالا این focus را در زمان بارگزاری صفحه برای اولین بار، روی کنترل “My MonthElement” قرار می دهد.

نکته: در مورد چند کنترلی ها، صفت “autofucus” روی اولین کنترل تنظیم می شود.

  • Placeholder

با استفاده از آن می توانیم در کنترل های ورودی از watermark استفاده کنیم.

<input type="text" placeholder="Enter Value" id="MyPlaceHolderControl"

               name="MyPlaceHolderControl" />

HTML5

تمرین ۳- آشنایی با کنترل Datalist

Datalist یک تگ جدید در HTML 5 می باشد که امکان autocomplete را برای ورودی textbox فراهم می کند. این یک کار بسیار ساده با سه مرحله می باشد.

گام ۱ – ایجاد Datalist

<datalist id="Hobbies">

    <option>Reading books</option>

    <option>Watching movies</option>

    <option>Playing games</option>

</datalist>

گام ۲ – ایجاد کنترل ورودی و اتصال لیست

<input type="text" name="TxtHobbies" value="" list="Hobbies" />

گام ۳ – تست و اجرا

HTML5

تمرین ۴- المنت های خروجی

محاسبات یکی از بخش های مهم هر برنامه ای است و گاهی اوقات ما این مقادیر محاسبه شده را در UI نمایش می دهیم. قبل از HTML 5 هیچ المنت استانداردی برای نمایش این نوع نتایج وجود نداشت. برخی از “span” استفاده می کردند و برخی دیگر از “div” در حالی که بعضی دیگر از “disabled input textbox” استفاده می کردند.

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

در HTML 5 با معرفی Markup استاندارد و معنایی “Output” این مشکل حل شده است.

<div oninput=

        "document.getElementById(MyOutputElement).value =

        (document.getElementById('input1').valueAsNumber) +

        (document.getElementById('input2').valueAsNumber)">

    <input id="input1" name="input1" type="number" value="1"> +

    <input id="input2" name="input2" type="number" value="2"> =

    <output id="MyOutputElement">3</output>

</div>

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

تمرین ۵، ۶ و ۷ – آشنایی با ویژگی اعتبارسنجی HTML 5

اعتبارسنجی یکی از مهم ترین ویژگی های یک برنامه از همان روز اول است. برای پیاده سازی اعتبارسنجی ما از کتابخانه های زیادی مانند اعتبارسنجی جی کوئری، اعتبارسنجی live و… استفاده کردیم.

اما در حال حاضر HTML 5 کد استانداردی برای اعتبارسنجی معرفی کرده است.

تمرین ۵ – پیاده سازی اعتبارسنجی با استفاده از صفت “type” مربوط به المنت های ورودی

گام ۱ – ایجاد تگ Form و اضافه کردن المنت های ورودی مختلف به صورت زیر

<form>

 <table>

  <tr>

    <td>

        <label>E-mail:</label>

        <input type="email" id="email" name="email" />


        <label>URL:</label>

        <input type="url" id="url" name="url" />


        <label>Telephone</label>

        <input type="tel" id="phone" name="phone" />


        <label>Number Demo:</label>

        <input type="number" name="MyNumberElement" id="MyNumberElement" />


        <label>Range Demo:</label>

        <input type="range" name="MyRangeElement" id="MyRangeElement" />


        <label>Color Demo</label>

        <input type="color" id="MyColorElement" name="MyColorElement" />

    </td>

    <td>

        <label>Date Demo</label>

        <input type="date" id="MyDateElement" name="MyDateElement" />


        <label>Time Demo</label>

        <input type="time" id="MyTimeElement" name="MyTimeElement" />


        <label>DateTime Local Demo</label>

        <input type="datetime-local" id="datetime" name=" datetime" />


        <label>Month Demo</label>

        <input type="month" id="month" name="month" />


        <label>Week Demo</label>

        <input type="week" id="MyWeekElement" name="MyWeekElement" />


        <div style="text-align:right">

          <input type="submit" value="validate" />

        </div>

    </td>

  </tr>

 </table>

</form>

نکته: همان طور که مشاهده می کنید، در کد بالا انواع جدید ورودی مانند email، url، tel و… را معرفی کرده ایم. این typeها فقط اعتبارسنجی را ارائه می کنند. هر یک از این ها که اجرا شوند در آخر یک textbox ساده تولید می کنند.

HTML5

همان طور که مشاهده می کنید، مقادیر ورودی اعتبارسنجی شده و زمانی که اعتبارسنجی با خطا مواجه می شود، پیغام های خطای از پیش تعریف شده در popup نمایش داده می شوند.

تمرین ۶ – پیاده سازی اعتبارسنجی با استفاده از صفات custom validation

در HTML 5 صفات جدیدی برای اعتبارسنجی به کنترل های ورودی اضافه شده اند. در ادامه برخی از آن ها را می بینیم.

گام ۱ – ایجاد کنترل های ورودی به صورت زیر

<form>

    <label>ایمیل</label>

    <input type="email" name="TxtEmail"

          id="TxtEmail" required />


    <label>نام کاربری</label>

    <input type="text" name="username"

          id="username" pattern="[a-zA-Z]{5,}" />

    <label>سن</label>

    <input type="number" name="TxtAge"

          id="TxtAge" min="10" max="50" />


    <br /><input type="submit" value="ثبت" />

</form>

توضیحات:

  • Required باعث می شود که textbox یک فیلد اجباری شود.
  • Pattern یک عبارت منظم را اعمال می کند که در اینجا باید حداقل شامل ۵ کاراکتر و حداکثر ۱۰ کاراکتر باشد.
  • صفات Min و Max با کنترل ورودی اعداد کار می کند و کنترل را مجبور می کند که در یک بازه خاصی باشد.

خروجی:

HTML5

تمرین ۷ – سفارشی سازی اعتبارسنجی

ما می توانیم با رویداد “oninvalid” اعتبارسنجی HTML 5 را به صورت کاملا سفارشی سازی دربیاوریم.

گام ۱ – ایجاد کنترل های ورودی، اضافه کردن صفات اعتبارسنجی و پیغام های خطای دلخواه به صورت زیر

<form>

    <label>Email</label>

    <input type="email" name="TxtEmail"

            id="TxtEmail"  required/>

    <span class="MissingEmailSpan invalid">Email Missing</span>

    <span class="InvalidEmailSpan invalid">Invalid email</span>



    <label>User Name</label>

    <input type="text" name="username"

            id="username" pattern="[a-zA-Z]{5,10}"  />

    <span class="InvalidUserNameSpan invalid">Username not matching with pattern</span>


    <label>Age</label>

    <input type="number" name="TxtAge"

            id="TxtAge" min="10" max="50" />

    <span class="AgeIsNotInRangeSpan invalid">Age must be be between 10 and 50</span>

    <span class="InvalidAgeSpan invalid">Invalid Age</span>


    <br /><input type="submit" value="Register" />

</form>

گام ۲- ایجاد یک تگ style و css برای پنهان کردن پیغام های خطا در لحظه اول

<style>

        .invalid {

            display: none;

        }

</style>

گام ۳- پنهان کردن پیغام های خطا در رویداد کلیک submit

<input type="submit" value="Register" onclick="$('.invalid').hide();" />

گام ۴ – ایجاد تابع جاوا اسکریپت Event handler به صورت زیر

function OnInvalidEmail()

{

    event.preventDefault();

    var element = event.srcElement;

    var validity = element.validity;

    if (validity.valueMissing) {

        $('.MissingEmailSpan').show();

    }

    else if (validity.typeMismatch) {

        $('.InvalidEmailSpan').show();

    }

}

مراحل بالا را برای همه کنترل های ورودی تکرار می کنیم.

توضیحات:

  • preventDefault(); – این تابع از رفتار پیش فرض جلوگیری می کند. پیغام خطا را به صورت popup نمایش می دهد.
  • srcElement – کنترلی که شامل داده غیرمعتبر می باشد. در اینجا منظور email textbox می باشد.
  • validity – شامل اطلاعات اعتبارسنجی درباره کنترل است. صفات مهم به صورت زیر هستند:
    • valueMissing – زمانی true می شود که صفت “required” به کنترل اضافه شده باشد و مقدار فعلی خالی باشد.
    • typeMismatch – زمانی true می شود که نوع داده با مقدار خروجی مطابقت نداشته باشد.
    • badInput – زمانی true می شود که داده­ی این کنترل غیرمعتبر باشد. به طور مثال، یک textbox عددی داشته باشیم و کاراکتر الفبایی وارد کنیم.
    • rangeOverflow و rangeUnderflow – زمانی true می شود که number textbox داشته باشیم و مقادیر در بازه مشخص شده نباشند.

گام ۵ – تست و اجرای برنامه

HTML5

تمرین ۸، ۹، ۱۰ و ۱۱ – Application Cache در HTML 5

زمانی که عبارت “Web Apllication” را می شنوید، چه چیزی به ذهن شما می آید؟ آیا اینترنت نیست؟

شما اینترنت دارید ==> پس آنلاین هستید ==> بنابراین می توانید از اپلیکیشن استفاده کنید.

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

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

حالا این امکان با HTML 5 application cache فراهم شده است.

Simple Application Cache Demo

گام ۱ – ایجاد یک  Asp.net Web Forms application جدید

ویژوال استودیو را باز کرده و یک empty asp.net web form ایجاد می کنیم.

گام ۲ – اضافه کردن Style.css

  • روی نام پروژه راست کلیک کرده، یک فولدر جدید اضافه کرده و نام آن را Styles می گذاریم.
  • روی فولدر Styles راست کلیک کرده و Add New Item را انتخاب می کنیم. Style sheet را انتخاب می کنیم و نام آن را css می گذاریم.
  • بلاک کد css زیر را در آن قرار می دهیم.
.DivStyle {

    background-color:silver;								

}

گام ۳ – ایجاد فایل متنی manifest به صورت زیر

  • روی نام پروژه راست کلیک کرده و Add New Item را انتخاب می کنیم. Text file را انتخاب کرده و نام آن را txt می گذاریم.
  • محتوای زیر را در آن قرار می دهیم.
CACHE MANIFEST

# ver 1


CACHE:

/Styles/Style.css

گام ۴ – ایجاد فایلی که می خواهیم Cache شود.

  • روی نام پروژه راست کلیک می کنیم و Add New Item را انتخاب می کنیم. سپس Web Form را انتخاب کرده و نام آن را aspx می گذاریم.
  • محتوای زیر را در آن قرار می دهیم.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>


<!DOCTYPE html>


<html  manifest="MyCache.txt">

<head runat="server">

    <title></title>

    <link href="Styles/Style.css" rel="stylesheet" />

</head>

<body>

    <form id="form1" runat="server">      

    <div class="DivStyle" id="MyDiv">

        Hi, Execution count is 1

    </div>

    </form>

</body>

</html>

گام ۵ – تست و اجرای برنامه

HTML5

گام ۶- آفلاین شدن

HTML5

گام ۷- Refresh کردن صفحه

متوجه خواهید شد که هنوز می توانید برنامه را در مرورگر مشاهده کنید.

گام ۸ – تغییر Web Form

MyPage.aspx را باز کرده و محتوای درون “MyDiv” را تغییر دهید.

<div class="DivStyle" id="MyDiv">

    Hi, Execution count is 2

</div>

گام ۹- تست و اجرای برنامه

[one_sixth]

HTML5

[/one_sixth] [five_sixth_last]

خروجی جدیدی نداریم! برنامه refresh نمی شود.

[/five_sixth_last]

گام ۱۰- فایل manifest را به صورت زیر تغییر می دهیم.

CACHE MANIFEST

# ver 3


CACHE:

/Styles/Style.css

گام ۱۱- صفحه را دوباره Refresh می کنیم.

حالا می توانید تغییرات را در خروجی مشاهده کنید.

توضیحات: بررسی گام به گام

  1. خط اول که “CACHE MANIFEST” می باشد نشان می دهد که این یک فایل manifest است.
  2. در صفحه، صفت manifest مشخص می کند که “aspx” نیاز دارد که Cache شود.
  3. در فایل manifest بخشی با عنوان “CACHE” وجود دارد که شامل فایل های است که لازم هستند تا صفحه aspx در حالت آفلاین به درستی اجرا شود. همه این فایل ها به همراه MyPage.aspx، Cache می شوند.
  4. کاربر در اولین درخواست خود، آخرین محتوا را دریافت می کند و سپس آن ها Cache می شوند. درخواست های بعدی همه نسخه cache شده را دریافت می کنند.
  5. Cache زمانی آپدیت می شود که چیزی در فایل manifest تغییر کند از این رو در فایل manifest درست بعد از کلمه کلیدی “CACHE MANIFEST” یک خط کامنت اضافه شده است. در این مثال، ما آن را به عنوان “ver 2” ذکر کردیم اما می تواند هر چیزی باشد.
  6. زمانی که کاربر درخواستی را ارسال می کند اگر محتوای درخواست شده Cached browser باشد نسخه cache شده برگردانده می شود اما مرورگر به صورت همزمان در پشت زمینه، درخواستی برای manifest ارسال می کند و چک می کند که آیا manifest در سرور تغییری کرده است یا خیر. به این صورت نسخه Cache شده آپدیت می شود. اما همانطور که گفتیم این کار در پشت زمینه انجام می شود بنابراین درخواست فعلی، نسخه قبلی را دریافت می کند. به همین دلیل نیاز به دو refresh داریم.

HTML5

تمرین ۹ – حل مشکل double refresh

برای این کار به سادگی کد زیر را در صفحه قرار می دهیم.

 

<script>

    window.applicationCache.onupdateready = function (e) {

        applicationCache.swapCache();

        location.reload();

    }

</script

رویداد onupdateready به محض آپدیت شدن Cache اجرا می شود.

نکته: توجه داشته باشید که بعد از هر تمرین cache برنامه را به طور دستی پاک کنید. اگر از chrome استفاده می کنید، می توانید از روش زیر استفاده نمایید:

  • روی آیکون gear کلیک کرده و به setting بروید.
  • Advanced setting را باز کنید.
  • روی content setting کلیک کنید.
  • روی All cookies and site data کلیک نمایید.

HTML5

  • در کادر جستجو localhost را وارد کرده و روی آیکون delete کلیک نمایید.

HTML5

تمرین ۱۰ – آشنایی بیشتر با manifest

“CACHE” تنها قسمت در فایل  manifest نیست. موارد دیگری نیز وجود دارد:

  • NETWORK – اگر یک صفحه را cache می کنید باید تمامی منابع در آن را نیز مشخص نمایید. یعنی تمام فایل های css، js،  تصاویر و… که در آن صفحه استفاده شده اند.

بخش NETWORK این امکان را به ما می دهد چیزهایی را که نمی خواهیم Cache کنیم، لیست کنیم.

  • FALLBACK – در برخی موارد می خواهیم یک سری منابع را زمانی که آفلاین هستیم با منابع دیگری جایگزین کنیم. مثلا زمانی که آنلاین هستیم همه چیز “قرمز” باشد، زمانی که آفلاین شدیم “سبز” شود.

FALLBACK این امکان را به ما می دهد.

اجازه دهید با مثالی آن را بهتر درک کنیم.

گام ۱ – ایجاد یک Asp.Net Web Forms Application

ویژوال استودیو را باز کرده و یک empty asp.net web form جدید ایجاد می کنیم.

گام ۲ – ایجاد فایل های stylesheet

  • روی نام پروژه راست کلیک کرده و فولدری با نام Styles می سا زیم.
  • روی فولدر Styles راست کلیک کرده و Add New Item را انتخاب می کنیم، سپس style sheet را انتخاب کرده و نام آن را css می گذاریم.
  • بلاک css زیر را در آن قرار می دهیم.
.Div1 {

    background-color:silver;

{
  • روی فولدر Styles راست کلیک کرده و Add New Item را انتخاب می کنیم، سپس style sheet را انتخاب کرده و نام آن را css می گذاریم.
  • بلاک css زیر را در آن قرار می دهیم.
.Div3 {

    background-color:silver;

}
  • روی نام پروژه راست کلیک کرده و فولدری با نام OfflineStyles ایجاد می کنیم.
  • روی فولدر OfflineStyles راست کلیک کرده و Add New Item را انتخاب می کنیم، سپس style sheet را انتخاب کرده و نام آن را css می گذاریم.
  • بلاک css زیر را در آن قرار می دهیم.
.Div3 {

    background-color:lightblue;

{

گام ۳ – ایجاد فایل متنی manifest به صورت زیر:

  • روی نام پروژه راست کلیک کرده و Add New Item را انتخاب کرده و نام آن را txt می گذاریم.
  • محتوای زیر را در آن قرار می دهیم:
CACHE MANIFEST

# ver 1


CACHE:

/Styles/Style.css

# Comment &ndash; Style.css will be cached with page


NETWORK:

/Styles/Style2.css

# Comment &ndash; Style2.css will be available only online


FALLBACK:

OnlineStyles\Style3.css OfflineStyles\Style4.css

# Comment &ndash; Style3.css will be used when online and style4.css will be cached and used when application is offline

گام ۴ – ایجاد فایلی که می خواهیم Cache شود

  • روی نام پروژه راست کلیک کرده و Add New Item را انتخاب کرده و یک Web Form با نام aspx ایجاد می کنیم.
  • محتوای زیر را در آن قرار می دهیم.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>

<!DOCTYPE html>


<html  manifest="MyCache.txt">

<head runat="server">

    <title></title>

    <link href="Styles/Style.css" rel="stylesheet" />

    <link href="Styles/Style2.css" rel="stylesheet" />

    <link href="OnlineStyles/Style3.css" rel="stylesheet" />

    <script>

        window.applicationCache.onupdateready = function (e) {

            applicationCache.swapCache();

            location.reload();

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">      

    <div class="Div1" id="MyDiv1">

        Hi, Execution count is 1

    </div>  

    <div class="Div2" id="MyDiv2">

        Hi, Execution count is 1

    </div>  

    <div class="Div3" id="MyDiv3">

        Hi, Execution count is 1

    </div>

    </form>

</body>

</html>

گام ۵- اجرای برنامه

HTML5

گام ۶ – آفلاین شدن

HTML5

گام ۷ – Refresh صفحه

HTML5

همان طور که مشاهده می کنید، style2.css cache نشده است و style3.css با style4.css جایگزین شده است.

تمرین ۱۱-  اهمیت بخش NETWORK

سوالی که ممکن است پرسیده شود این است که اگر این قسمت را فراهم نکنیم چه اتفاقی می افتد؟

فرض کنید در مثال بالا از Network استفاده نمی کردیم.

گام ۱  –  پاک کردن Cache

مراحلی که در تمرین ۸ ذکر شد، دنبال  می کنیم.

گام ۲ – بخش NETWORK را حذف کرده و برنامه را اجرا می کنیم.

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

گام ۳ – Refresh کردن صفحه

حالا بدون متوقف کردن برنامه آن را refresh می کنیم و خروجی زیر ظاهر می شود.

HTML5

شما آنلاین هستید اما هنوز style2.css اعمال نشده است چرا که اپلیکیشنی که cache شده از Cache لود می شود.

زمانی که style2.css را در بخش NETWORK مشخص می کنیم، همیشه آن فایل را از محل آنلاین لود می کند. اگر آنلاین باشید، کار خواهد کرد و در غیر این صورت لود نخواهد شد.

Application Caching در مقایسه با Browser Caching

Browser caching در سطح فایل کار می کند. مرورگر به صورت اتوماتیک فایل ها را cache می کند تا هزینه درخواست های متوالی را کاهش دهد. این کار باعث کار کردن برنامه در حالت آفلاین نمی شود، زیرا برای اجرای برنامه فایل هایی لازم است که ممکن است در cache وجود نداشته باشند.

Application Caching در سطح اپلیکیشن کار می کند. روی تراکنش ها کار می کند. در اینجا اپلیکیشن، یعنی صفحه ای که شامل صفات manifest، تمامی منابع مشخص شده در قسمت CACHE و FALLBACK می باشد. اگر یکی از این منابع به درستی cache نشود، اپلیکیشن در حالت آفلاین کار نخواهد کرد.

خب این از پرش اول ! چطور بود ؟

HTML5

امیدوارم لذت برده باشید.

[button color=”red” size=”medium” link=”https://dl.mspsoft.com/dl2/BozorgMehr/HTML3DayPDF/HTML_5_-_Day_1.pdf” icon=”” target=”true”]دانلود فایل PDF[/button]

فاطمه زکایی

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

نوشته‌های مرتبط

دیدگاه‌ها

*
*

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

    حسام پاسخ

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

    لینک پرش دوم رو لطفا در انتهای همین صفحه بیاورید. :))))))

    تشکر فراوان

ما یک پرسشنامه‌ی کوچولو داریم، که قول میدیم وقتتون رو خیلی نمی‌گیره، ولی کلی به ما کمک می‌کنه، چون هم assessment مونه ,و هم شما به ما در این زمینه کمک میکنید.بزن بریم