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

بررسی ها:

اگر غواصی می کنید، لباس خود را فراموش نکنید!

این ایده در اینترنت وجود دارد که «شیرجه رفتن به HTML5» یک کتاب مرجع برای هر طراح صفحه‌آرایی و توسعه‌دهنده وب است. البته من از آنجا رد نشدم و با آن آشنا شدم. می توانم بگویم که این کتاب برای طرفداران واقعی وب است. این یک بررسی یا یک پرش به بالا نیست، بلکه یک غوطه وری واقعی است! بنابراین، شما باید برای آن آماده باشید.

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

طرفداران:

1. دیدم که چگونه همه چیز "از درون" به نظر می رسد.

2. من راز نقل قول "640 کیلوبایت برای همه کافی است" را کشف کردم.

3. تعداد زیادی از"اطلاعات تاریخی" (بعید است در عمل به شما کمک کند، اما قطعا افق های شما را گسترش می دهد).

از معایب:

1. جداول پشتیبانی از تابع HTML5 قدیمی هستند، در صورت لزوم، بهتر است از مرجع آنلاین استفاده کنید.

2. طبق مستندات وب، میکرو دیتا به طرز ناامیدکننده ای قدیمی است و در آن استفاده نمی شود مرورگرهای مدرن. بنابراین می توانید با خیال راحت از فصل 10 صرف نظر کنید، مگر اینکه علاقه ای به نحوه کارکرد میکروداده داشته باشید.

4. در نسخه روسی کتاب از انتشارات "BHV-Petersburg" (2011)، متأسفانه ترجمه کاملاً خشن است و اشتباهات املایی وجود دارد. از عبارت هنر. 68، که نوشته شده است "...هیچ اطلاعاتی در مورد ارجاع دهنده نشت نخواهد داشت"، فقط گریه کردم.

پس از خواندن کتاب تا انتها، مطمئن هستم که شما همچنان میل به یادگیری بیشتر در مورد توسعه وب خواهید داشت. و کتاب های دیگر به شما در این امر کمک می کند.
جزئیات بیشتر در livelib.ru:

مقاله یا کتاب را دوست داشتید؟ با دوستانتان به اشتراک بگذارید:

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

قضاوت بر اساس اکثر مراجع HTML5 تست(به علاوه h5t) سپس اکثر کاربران این تستبیشتر به نتیجه نهایی (مجموع امتیازات)، به عنوان شاخصی که می توان به آن اشاره کرد و مقایسه کرد، به جای جوهر درونی نتیجه به دست آمده، علاقه مند است.

در اصطلاح رایج، این چربی شکم نامیده می شود، و همانطور که حدود یک سال پیش در Lenta.ru به درستی اشاره شد (به پایین مراجعه کنید) - "که HTML5 طولانی تر است."

مثال ها

بیایید با Lenta.ru شروع کنیم، در اینجا یک مرجع به آزمایش یک سال پیش، زمانی که برای اولین بار ظاهر شد، آمده است:

مرورگرها را بررسی کردیم برای سازگاری با آخرین استاندارد وب.
وب سایت html5test.com در ماه مارس در اینترنت ظاهر شد، که همانطور که از نام آن پیداست، بررسی می کند که یک مرورگر خاص چقدر آماده کار با استاندارد وب جدید و بسیار امیدوار کننده HTML5 است.

من همچنین شماره Computer Bild #02(125)/2011 را پیش رو دارم که شامل تست "مقیاس بزرگ" مرورگرها است ("مگا تست 18 صفحه"):

اکثر صفحات وب به زبان فرامتن نوشته شده اند نشانه گذاری HTML. برای نمایش صحیح یک صفحه، مرورگر باید تمام موارد موجود در آن را بخواند. کد منبعبرچسب ها این خط نشان می دهد که مرورگر چه تعداد از 384 صفحه را بدون خطا ارائه کرده است.

300 صفحه از 384 صفحه نتایج تست HTML5 هستند، که 84 صفحه باقی مانده به چه معنا هستند مشخص نشده است. :)

به عنوان جزئیات جالب اضافی:

• همانطور که این روزها مد است (و احتمالاً راحت است)، این آزمایش به عنوان بخشی از یک پروژه ویژه در Github در حال توسعه است. در آنجا همچنین می‌توانید اطلاعاتی درباره باگ‌های باز و رفع‌شده یا جنبه‌های بحث‌برانگیز آزمایش بیابید.
• در صفحه آزمایشی، نیلز از Henri Sivonen به خاطر امکان استفاده از تست های تجزیه HTML5 خود و سایر افرادی که مشارکت داشتند تشکر می کند.

ارتباط با سازمان هایی که استانداردهای وب را ترویج می کنند

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

لطفاً به خاطر داشته باشید که تست HTML5 با W3C یا مرتبط نیست گروه کاری HTML5.

تا آنجا که من می دانم، هیچ سازنده مرورگری هیچ ارتباط رسمی با اشاره به h5t به عنوان معیاری برای پشتیبانی از HTML5 ندارد. (بسیار خوب، به جز از پل روژ، مبشر موزیلا، در مورد IE9 در مقابل Fx4.0.)

h5t چگونه کار می کند؟

ساختار داخلی آزمون را می توان هم مستقیماً از کد صفحه و هم از منابع موجود در github ردیابی کرد. برخلاف Acid3، h5t شامل تولید هیچ کدام نمی شود عکس زیبا، - فقط نتیجه کلیدر قالب نمرات و جزئیات آزمون.

آزمون شامل:

• صفحات آزمایشی (طرح بندی و سبک ها)
• موتوری برای آزمایش، جمع آوری نتایج و نمایش آنها در صفحه
• به طور مستقیم مجموعه ها و تست های داخل آنها را تست کنید.

موتور برای تست

موتور تست شامل چندین است توابع کلیدی(اشیاء):

• startTest - فرآیند تست را شروع می کند.
  یک جزئیات جالب: برای به دست آوردن آمار، html5test نتایج آزمایش های انجام شده توسط کاربران را از طریق BrowserScope API جمع آوری می کند.
• تست - شامل لیستی از مجموعه های آزمایشی است، از طریق هر مجموعه تکرار می شود و نتایج را جمع آوری می کند
  ساده شده، اجرای یک تست به این صورت است:

  test.prototype = (
  مجموعه ها: [ ( عنوان: null , بخش ها: [
  testParsing، testCanvas، testVideo، testAudio، testElements،
  testForm، testInteraction، testMicrodata، testOffline، testSecurity]
  },
  ( عنوان: "مشخصات مرتبط" , بخش ها: [
  testGeolocation، testWebGL، testCommunication، testFiles، testStorage،
  testWorkers، testDevice، testOther ])
  ],

  Initialize: تابع (e, t, c) (
  var r = نتایج جدید (e, t);

  برای (g در این .suites) (
  r.createSuite(this .suites[g].title);

  برای (های موجود در این بخش .suites[g].) (
  جدید (این .suites[g].sections[s])(r);
  }
  }

  C(r);
  }
  }
  

  
  

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

• نتایج - یک نمایش خارجی بر اساس نتایج به دست آمده ایجاد می کند
• بخش، گروه و مورد - بازنمایی منطقیگروه بندی آزمون (در هنگام تولید و نمایش نتایج استفاده می شود)
• داده ها و توابع کمکی:
  • iOS و Android - در یکی از آزمایشات مورد نیاز است (به زیر مراجعه کنید)
  • isEventSupported - بررسی می کند که آیا مرورگر از رویداد مربوطه پشتیبانی می کند یا خیر
  • getRenderedStyle - استایل به دست آمده را از عنصر بازیابی می کند

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

مجموعه های آزمایشی

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

ساختار داخلی آزمون ها ممکن است متفاوت باشد، اما ساختار کلیمجموعه را می توان به وضوح در این مثال مشاهده کرد:

تابع testFiles (نتایج) (این .initialize(نتایج))
testFiles.prototype = (
نام: "فایل ها"
تعداد: 2،

Initialize: تابع (نتایج) (
this .section = results.getSection(this .name);
برای (var i = 1; i<= this .count; i++) { this ["t" + i](); }
},

T1:function() (
این .section.setItem((
عنوان: "FileReader API"
آدرس اینترنتی: "http://dev.w3.org/2006/webapi/FileAPI/#filereader-interface",
گذشت: "FileReader" در پنجره،
ارزش: 10
});
},

T2:function() (
این .section.setItem((
عنوان: "FileWriter API"
آدرس اینترنتی: "http://www.w3.org/TR/file-writer-api/",
گذشت: "FileWriter" در پنجره،
ارزش: 10
});
}
};

* این کد منبع با برجسته کننده کد منبع برجسته شده است.

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

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

تست‌های پیچیده‌تر (مثلاً برای فرم‌های وب) از ساختارهای کمی پیچیده‌تر برای گروه‌بندی نتایج استفاده می‌کنند، اما ماهیت یکسان باقی می‌ماند.

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

h5t چه چیزی را بررسی می کند؟

فهرستی از آنچه که h5t دقیقاً آزمایش می‌کند با ارجاعات (همیشه درست نیست) به مشخصات یا بخش‌هایی از مشخصات را می‌توان مستقیماً در صفحه آزمایشی یافت، بنابراین تکرار آن در اینجا اهمیت چندانی ندارد. درک اینکه در داخل چه اتفاقی می افتد و پشت هر عملکرد آزمایشی چه چیزی وجود دارد بسیار مهمتر است.

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

ترکیب

اولین چیزی که توجه شما را جلب می کند این است که بخش قابل توجهی از عناصر "تأیید شده" در حال حاضر در مشخصات HTML5 گنجانده نشده اند:

برخی از این عناصر از مشخصات HTML5 حذف شدند و به استانداردهای جداگانه (مثلاً HTML Microdata) تفکیک شدند، در حالی که برخی دیگر هرگز در این مشخصات گنجانده نشدند (مثلاً FileAPI).

برخی چیزها به هیچ وجه مستقیماً با استانداردهای وب مرتبط نیستند (کدک ها - امتیاز اضافی برای پشتیبانی داده می شود).

در نهایت، WebGL یک مشخصات شخص ثالث است که مستقیماً به HTML5 مربوط نمی شود (از Canvas برای خروجی نتایج رندر استفاده می کند).

نسبت ها

دومین نکته مهمی که قطعاً قابل توجه است، توزیع امتیازات بین مشخصات مختلف و در داخل مشخصات HTML5 است.

بنابراین، تعداد زیادی امتیاز (90 از 400) به عناصر جدید برای فرم ها اختصاص می یابد - تقریباً یک چهارم از کل مقدار یا یک سوم از امتیازهای اختصاص داده شده به خود HTML5. فرم‌های وب مطمئناً جزء مهمی از مشخصات جدید هستند، اما بعید است که این مؤلفه را امروزه بتوان از نظر تقاضا غالب نامید (برای جزئیات بیشتر به زیر مراجعه کنید).

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

وزن برخی از تست ها و چک ها 1 امتیاز است، برخی 10. در واقع توزیع امتیاز بین تست ها و چک ها اراده و تخیل کامل نویسنده آزمون است.

وضعیت ها

جنبه سوم موضوعی که باید در نظر داشت این است که چه مشخصاتی بررسی می شود و امروز در چه وضعیتی هستند.

اگر شروع به حفاری در داخل کنید، اولین چیزی که به نظر می رسد وضعیت پیش نویس فعلی اکثر مشخصات است:

• HTML5 - پیش نویس کاری، انتظار می رود WD LC در ماه مه داشته باشد
• HTML MicroData - WD
• موقعیت جغرافیایی - توصیه نامزد (تنها استثنا از کل محدوده)
• رویدادهای ارسال پیام وب و سرور - WD LC
• Web Sockets API - WD (تغییرپذیری پروتکل خارج از محدوده این بررسی)
• File API - WD که اخیراً از آستانه اولین نسخه پیش نویس عبور کرده است
• ذخیره سازی وب - WD
• DB نمایه شده - WD
• پایگاه داده وب SQL - کار متوقف شده است، اما نویسنده به کسانی که از فهرست‌بندی فهرست‌شده پشتیبانی نمی‌کنند اجازه می‌دهد امتیاز کسب کنند.
• Web Workers - WD LC
• دستگاه های محلی - در مشخصات W3C نیستند، یک ماه و نیمپیش از این از مشخصات WHATWG حذف شد و با یک API جایگزین شد
• DOM Range/Text Selection یک ویژگی جداگانه از مشخصات دیگری است
• CSSOM View Module/Scrolling - یک ویژگی جداگانه به مشخصات دیگری منتقل شد (نسخه ویرایشی)

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

لطفاً به خاطر داشته باشید که مشخصات در حال آزمایش هنوز در حال توسعه هستند و ممکن است قبل از رسمی شدن تغییر کنند.

بیایید نگاهی دقیق تر به محتوای هر آزمون بیندازیم.

بلوک HTML5

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

تجزیه 5 تست | 11 امتیاز | 2 امتیاز جایزه

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

1. پشتیبانی1 امتیاز
بررسی می کند که "با نصب doctype، مرورگر در حالت Strict کار می کند." در داخل، بررسی می شود که document.compatMode == "CSS1Compat". این ویژگی حالتی را که مرورگر در حال حاضر در آن در حال اجرا است مشخص می کند (Quirks vs. Strict).

در واقع، اگر نوع doctype درستی وجود داشته باشد، مرورگر باید در حالت Strict کار کند، یعنی این بررسی مستقیماً به HTML5 مربوط نمی شود، زیرا حالت سخت باحتی در IE6 که بدیهی است از HTML5 پشتیبانی نمی کند، گنجانده خواهد شد.

2. HTML5 Tokenizer 5 امتیاز
موارد عجیب و غریب مختلفی از تعیین نام ها، ویژگی ها و محتویات عناصر بررسی می شود - در مجموع 19 بررسی برای تجزیه صحیح محتوای داخلی یک عنصر html:

• "";
• "
  "
• "
  "
• "
  "
• ""
• "\u000D"
• "〈〉"
• "ⅈ"
• "𝕂"
• "∉"
• ""
• ""
• ""
• "<!---->"
• "<!---->"
• "-->"
• "-->"

در حالی که بعید است که در زندگی خود با اکثر این موارد روبرو شوید، مهم است که توجه داشته باشید که مشخصات HTML5 تاکید ویژه ای بر تجزیه اسناد و مدیریت صحیح این نمونه ها دارد.

(در واقع، و تقریباً به معنای واقعی کلمه، این تست ها بر اساس تست های تجزیه HTML موزیلا هستند: http://hsivonen.iki.fi/test/moz/detect-html5-parser.html)

3. ساخت درخت HTML5 5 امتیاز
ادامه مبحث تجزیه اسناد - ایجاد پویا عناصر مختلف با همان منبع تست اصلی:

• استنتاج برچسب / ایجاد خودکار برچسب ها (در این مورد بررسی می شود که عنصر html ایجاد شده به صورت پویا دارای عناصر سر و بدنه در داخل باشد).
• ضمنی / عنصر col مورد انتظار در جدول
• تجزیه لیست ها
• حمایت از فرزندپروری
• الگوریتم آژانس پذیرش / تجزیه پیوست های نادرست مانند " آ ب

  سید"

• فضای نام HTML

اظهار نظر: این و آزمایش‌های قبلی تنها آزمایش‌هایی در کل h5t هستند که جزئیات اجرای این یا آن عملکرد را بررسی می‌کنند و ادعا می‌کنند قابلیت همکاری تجزیه اسناد را بررسی می‌کنند.

(تکرار می‌کنم که برخلاف سایر تست‌ها، تست‌های تجزیه از Henri Sivonen به عاریت گرفته شده است، که از جمله به دلیل مشارکت شدید در توسعه تجزیه‌کننده HTML5 برای فایرفاکس 4 شناخته می‌شود. یعنی در واقع، اینها تست‌هایی هستند. در طول توسعه Fx4 اختراع شده است، بنابراین جای تعجب نیست که به طور قابل توجهی از آنها عبور می کند آزمایش انتخابی تغییرات کد که برای نویسنده جالب است.)

اینکه آیا مرورگر از SVG یا MathML پشتیبانی می کند، در واقع بررسی نمی شود

به طور غیرمنتظره ای، اپرا که از لحاظ تاریخی یکی از بهترین پشتیبانی های SVG را دارد، در این آزمون مردود می شود. پشتیبانی True MathML فقط در فایرفاکس موجود است. کروم این تست را حتی بدون پشتیبانی از MathML انجام می دهد (شما می توانید آن را در نمونه های تست موزیلا بررسی کنید).

اظهار نظر: به طور رسمی، محتوای داخلی عناصر svg و ریاضی و قوانین تجزیه/نمایش در مشخصات جداگانه توضیح داده شده است. مشخصات HTML5 می گوید که یک سند باید از درج محتوای SVG از طریق آن پشتیبانی کند

تست بوم 3 | 20 امتیاز

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

ویدیو 7 تست | 31 امتیاز | 8 امتیاز جایزه

این بلوک برای بررسی پشتیبانی مرورگر برای یک برچسب جدید طراحی شده است