• WebKit چیست و چه ارتباطی با CSS دارد؟ موتورهای مرورگر وب - چه هستند و چه هستند خوب، پس به کجا رسیده ایم؟

    • ترجمه

    برای بسیاری از ما توسعه دهندگان، WebKit یک جعبه سیاه است. ما HTML، CSS، JS و یکسری تصاویر را به سمت آن پرتاب می کنیم، و WebKit، به نحوی... جادویی، صفحه وب را به ما می دهد که به نظر می رسد و به خوبی کار می کند.
    اما در واقعیت، چگونه همکارم ایلیا گریگوریک می گوید :

    کیت وب یک جعبه سیاه نیست. این یک جعبه سفید است. و نه فقط سفید، بلکه یک جعبه باز.
    بنابراین، بیایید سعی کنیم مواردی را کشف کنیم:
    • WebKit چیست؟
    • WebKit چیست؟
    • WebKit چگونه توسط مرورگرهای WebKit استفاده می شود؟
    • چرا بسیاری از WebKit ها یکسان نیستند؟
    اکنون، به خصوص پس از انتشار اخباری مبنی بر تغییر اپرا به WebKit، ما توسط بسیاری از مرورگرهای WebKit احاطه شده ایم و گفتن اینکه چه چیزی آنها را متحد می کند و راه خود را به کجا می روند، بسیار دشوار است. در زیر، امیدوارم سعی کنیم این موضوع را روشن کنیم. در نتیجه، می‌توانید تفاوت‌های مرورگر را بهتر شناسایی کنید، اشکالات را به ردیاب صحیح ارسال کنید، و توسعه مرورگرهای متقابل را به طور مؤثرتری انجام دهید. اجازه دهید چند جزء از مرورگرهای مدرن را فهرست کنیم:
    • تجزیه (تجزیه HTML، XML، CSS، جاوا اسکریپت)
    • طرح بندی
    • رندر متن و گرافیک
    • رمزگشایی تصویر
    • تعامل با GPU
    • دسترسی به شبکه
    • شتاب سخت افزاری
    کدام یک در همه مرورگرهای WebKit مشترک هستند؟ تقریباً فقط دو مورد اول.

    هر "پورت" WebKit اجزای باقیمانده را به طور متفاوتی پیاده سازی می کند. بیایید بفهمیم این به چه معناست.

    پورت های WebKit

    «پورت‌های» WebKit زیادی وجود دارد و من آریا هدایت، هکر WebKit و فناوری را ارائه می‌دهم. مدیر Sencha حق دارد در این مورد صحبت کند:

    محبوب ترین ارتباط با مفهوم WebKit معمولاً نسخه WebKit اپل است که روی Mac OS X اجرا می شود (اولین و اصلی ترین کتابخانه WebKit همانطور که می توانید حدس بزنید، رابط های مختلف عمدتاً با استفاده از کتابخانه های بومی Mac OS X اجرا می شوند). به عنوان مثال، اگر یک دکمه مسطح رنگی با شعاع طرح کلی مشخص کنید، WebKit می داند که این دکمه را کجا و چگونه ترسیم کند، در حالی که رندر نهایی دکمه (به عنوان پیکسل در مانیتور کاربر) روی CoreGraphics قرار می گیرد. .

    همانطور که در بالا ذکر کردم، CoreGraphics استفاده شده برای هر پورت WebKit منحصر به فرد است. برای مثال کروم برای مک از Skia استفاده می کند.

    در برخی موارد، WebKit به پلتفرم های مختلف، هم دسکتاپ و هم موبایل "پورت شد". این تغییر معمولاً "درگاه WebKit" نامیده می شود. برای Safari Windows، اپل همچنین به طور مستقل WebKit را برای اجرا در ویندوز با استفاده از کتابخانه CoreFoundation (اجرای محدود) خود "پورت کرد".

    ... با وجود این واقعیت که Safari در ویندوز در حال حاضر مرده است، علاوه بر این، بسیاری از "پورت" های دیگر نیز وجود دارد (لیست کامل را ببینید). گوگل پورت Chromium خود را ایجاد کرده و همچنان از آن پشتیبانی می کند. همچنین WebKitGtk وجود دارد که مبتنی بر Gtk+ است. نوکیا (و اکنون Trolltech که آن را خرید) از پورت WebKit Qt پشتیبانی می کند که به عنوان ماژول QtWebKit محبوب شده است.
    برخی از پورت های WebKit
    • سافاری
      - Safari برای OS X و Safari برای ویندوز دو پورت متفاوت هستند
      - ساخت شبانه WebKit یک ساخت از کد منبع مک "پورت" است که برای سافاری استفاده می شود، فقط جدیدتر
    • سافاری موبایل
      - در یک شعبه خصوصی توسعه یافت، اما بعدا افتتاح شد.
      - کروم برای iOS (از WebView اپل استفاده می‌کند؛ بعداً درباره تفاوت بیشتر)
    • کروم (Chromium)
      - Chrome for Android (مستقیماً از «پورت» Chromium استفاده می کند)
      - Chromium همچنین اساس مرورگرها است: Yandex، Sogou، و به زودی، Opera.
    • مرورگر اندروید
      - از آخرین کد منبع WebKit موجود در زمان انتشار استفاده می کند.
    • حتی پورت های بیشتر: Amazon Silk، Dolphin، Blackberry، QtWebKit، WebKitGTK+، The EFL Port (Tizen)، wxWebKit، WebKitWinCE و غیره
    پورت های مختلف می توانند بر روی وظایف مختلف تمرکز کنند. تمرکز پورت مک، جداسازی بین مرورگر و سیستم عامل، و ارائه اتصالات Obj-C و C++ برای جاسازی موتور رندر در برنامه‌های داخلی است. تمرکز درگاه کرومیوم کاملاً روی مرورگر است. QtWebKit پورت خود را به همراه معماری برنامه های کاربردی کراس پلتفرم خود به عنوان موتور رندر ارائه می دهد که در همه مرورگرهای WebKit رایج است

    ابتدا، بیایید به ویژگی های رایجی که در همه مرورگرهای WebKit استفاده می شود نگاه کنیم:

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

  • و بنابراین، اول از همه، WebKit HTML را به همان روش تجزیه می کند. خوب، با این تفاوت که Chromium در حال حاضر تنها پورتی است که شامل پشتیبانی از رشته‌ها برای تجزیه HTML است.
  • ... بسیار خوب، اما پس از تجزیه HTML، درخت DOM به همین ترتیب ساخته می شود. خب، در واقع Shadow DOM فقط برای پورت Chromium فعال است، به این معنی که ساختار DOM متفاوت است. همچنین برای عناصر سفارشی.
  • ... بسیار خوب، WebKit اشیاء پنجره و سند را برای همه به یک شکل ایجاد می کند. درست است، اگرچه ویژگی ها و ساختارهایی که ارائه می دهند ممکن است به استفاده از پرچم های ویژگی بستگی داشته باشد.
  • ... تجزیه CSS هم همینطور است. خوردن CSS و تبدیل آن به CSSOM بسیار استاندارد است. بله، اگرچه کروم تنها زمانی از پیشوندهای -webkit- پشتیبانی می کند که اپل و سایر مرورگرها از پیشوندهای قدیمی -khtml- و -apple- پشتیبانی می کنند.
  • ... چیدمان ... موقعیت یابی؟ مثل نان و کره است. همه جا همینطوره، درسته؟ خب قبلا! طرح بندی ساب پیکسل و محاسبات چیدمان غنی بخشی از WebKit هستند، اما از پورتی به پورت دیگر متفاوت هستند.
  • فوق العاده

    • بنابراین، دشوار است.

    حال، بیایید سعی کنیم آنچه را که دنیای WebKit مشترک است، خلاصه کنیم...

    آنچه در هر پورت WebKit مشترک است.
    • DOM، پنجره، سند
      کم و بیش
    • CSSOM
    • تجزیه CSS، ویژگی / ارزش
      تفاوت در پیشوندهای سازنده
    • تجزیه HTML و ساخت DOM
      اگر کامپوننت های وب را فراموش کنیم نیز به همین صورت است.
    • چیدمان و موقعیت یابی
      Flexbox، Floats، زمینه قالب بندی بلوک... همه چیز مشترک است
    • ابزارهای رابط کاربری و ابزارهای توسعه دهنده، مانند Chrome DevTools با نام WebKit inspector.
      اگرچه از آوریل گذشته، Safari از Safari Inspector خودش استفاده می‌کند که یک غیر WebKit و منبع بسته است.
    • ویژگی هایی مانند contenteditable، pushState، File API، اکثر SVG، ریاضیات تبدیل CSS، Web Audio API، localStorage
      اگرچه اجرا ممکن است متفاوت باشد. هر پورت می تواند از سیستم ذخیره سازی خود برای ذخیره محلی استفاده کند و می تواند از یک API صوتی متفاوت برای Web Audio API استفاده کند.
    کمی گیج کننده است، بنابراین بیایید سعی کنیم به برخی از تفاوت ها نگاه کنیم، آنچه در پورت های WebKit مشترک نیست.
    • همه چیز مربوط به GPU
      - تبدیل سه بعدی
      - WebGL
      - رمزگشایی ویدیو
    • ارائه 2 بعدی به صفحه نمایش
      - فن آوری های ضد آلیاسینگ
      - ارائه گرادینت های SVG و CSS
    • رندر متن و خط فاصله
    • فن آوری های شبکه (SPDY، پیش رندر، انتقال وب سوکت)
    • موتور جاوا اسکریپت
      - موتور JavaScriptCore در مخزن WebKit است. اما اتصالاتی در WebKit هم برای آن و هم برای V8 وجود دارد.
    • رندر کردن عناصر فرم
    • رفتار تگ های ویدئویی و صوتی و پشتیبانی کدک
    • رمزگشایی تصویر
    • ناوبری به عقب / جلو
      - قسمت pushState()
    • ویژگی های SSL مانند امنیت حمل و نقل دقیق و پین های کلید عمومی
    بیایید به یکی از آنها نگاهی بیندازیم: گرافیک های دوبعدی وابسته به پورت هستند، ما از کتابخانه های کاملاً متفاوتی برای نمایش روی صفحه استفاده می کنیم:

    یا برای پرداختن به جزئیات بیشتر، یک ویژگی اخیرا اضافه شده است: CSS.supports() برای همه پورت‌ها به جز win و wincairo که ویژگی‌های شرطی css3 را فعال نمی‌کنند، فعال شده است.

    اکنون، داریم به فنی می رسیم... وقت آن است که دست به کار شویم. حتی آنچه در بالا گفته شد کاملاً صحیح نیست. این در واقع WebCore است، یک جزء عمومی. WebCore یک طرح بندی، رندر و کتابخانه DOM برای HTML و SVG است و اساساً همان چیزی است که مردم وقتی می گویند WebKit به آن فکر می کنند. در واقع، "WebKit" از نظر فنی لایه ای از اتصال بین WebCore و "پورت ها" است، اگرچه در مکالمه عادی این تمایز تا حد زیادی بی اهمیت است.

    نمودار باید کمک کند:

    بسیاری از اجزای WebKit قابل تغییر هستند (به رنگ خاکستری نشان داده شده است).

    به عنوان مثال، موتور جاوا اسکریپت WebKit، JavaScriptCore، موتور پیش فرض در WebKit است. این در اصل بر پایه KJS (از KDE) از روزهایی است که WebKit به عنوان یک فورک KHTML شروع به کار کرد. در همان زمان، پورت کروم به موتور V8 سوئیچ می کند و از اتصالات DOM منحصر به فرد استفاده می کند.

    فونت ها و رندر متن بخش بزرگی از پلتفرم هستند. 2 مسیر جداگانه برای متن در WebKit وجود دارد: Quick و Hard. هر دو نیاز به پشتیبانی ویژه پلتفرم دارند (که در سمت پورت پیاده‌سازی شده است)، اما Fast فقط باید بداند که چگونه گلیف‌ها (که WebKit برای پلتفرم ذخیره می‌کند)، در حالی که Complex رندر رشته را کاملاً به سطح پلتفرم می‌برد و فقط می‌گوید "این را بکشید". ، لطفا."

    «WebKit مانند یک ساندویچ است. در غیر این صورت، در مورد کرومیوم، بیشتر شبیه تاکو است. تاکوی خوشمزه از فناوری های وب.
    دیمیتری گلازکوف، هکر Chrome WebKit. قهرمان اجزای وب و سایه dom.

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

    Chrome (OS X) Safari (OS X) QtWebKit Android Browser Chrome for iOSرندرینگ شبکه سازی فونت ها جاوا اسکریپت
    اسکیا CoreGraphics QtGui پشته اندروید/اسکیا CoreGraphics
    پشته شبکه کرومیوم شبکه CF شبکه Qt انشعاب پشته شبکه Chromium پشته کروم
    CoreText از طریق Skia CoreText قطعات داخلی Qt پشته اندروید CoreText
    V8 JavaScriptCore JSC (V8 در جای دیگری در Qt استفاده می شود) V8 JavaScriptCore (بدون JITting) *

    * پانوشت در مورد Chrome برای iOS. همانطور که احتمالا می دانید از UIWebView استفاده می کند. با توجه به قابلیت‌های UIWebView، این بدان معناست که فقط می‌تواند از موتور رندرینگ مشابه Mobile Safari، JavaScriptCore (نه V8) و یک مدل تک رشته‌ای استفاده کند. با این حال، برخی از کدها از Chromium قرض گرفته شده است، مانند زیرسیستم شبکه، زیرساخت همگام سازی نشانک، omnibox، معیارها و گزارش خرابی. (همچنین، جاوا اسکریپت آنقدر به ندرت یک گلوگاه در دستگاه های تلفن همراه است که فقدان کامپایلر JITting کمترین تأثیر را دارد.)

    خوب، پس از کجا آمده ایم و بنابراین، همه WebKit ها اکنون کاملاً متفاوت هستند؟ من می ترسم.

    ارزشش را ندارد! پوشش WebKit از تست های "layoutTest" بسیار زیاد است. (28000 تست در آخرین شمارش)، و نه تنها برای توابع موجود، بلکه برای همه رگرسیون های یافت شده. در واقع، هر زمان که ویژگی‌های جدید یا «مخفی» DOM/CSS/HTML-5 را یاد می‌گیرید، مجموعه‌های آزمایشی «layoutTest» معمولاً یک نسخه نمایشی بسیار عالی دارند.

    علاوه بر این، W3C در تلاش است تا مجموعه آزمایشی را استاندارد کند. این به این معنی است که می‌توان انتظار داشت که هم پورت‌های WebKit و هم همه مرورگرهای دیگر با مجموعه‌های آزمایشی یکسانی آزمایش شوند، که ما را به موارد عجیب و غریب کمتر و وب با قابلیت تعامل بیشتر سوق می‌دهد. از همه کسانی که با شرکت در رویداد Test The Web Forward تلاش کردند... از شما متشکرم!

    Opera به تازگی به WebKit منتقل شده است. از این چه خواهد شد؟ رابرت نایمن و راب هاکس قبلاً به این موضوع پرداخته‌اند، اما اضافه می‌کنم که یکی از بخش‌های مهم اعلامیه انتقال اپرا به کرومیوم بود. این بدان معناست که WebGL، Canvas، فرم‌های HTML5، پیاده‌سازی گرافیک دوبعدی، همه این موارد در Chrome و Opera یکسان خواهند بود. همان API و پیاده سازی سطح پایین. از آنجایی که Opera مبتنی بر Chromium است، ممکن است احساس کنید که در حال کاهش حجم کاری خود برای بررسی سازگاری بین Opera و Chrome هستید.
    همچنین باید توجه داشته باشم که تمام مرورگرهای Opera به Chromium منتقل می شوند. یعنی اپرا برای ویندوز، مک، لینوکس و اپرا موبایل (یک مرورگر تلفن همراه تمام عیار). حتی Opera Mini، تین کلاینت، از مزرعه رندر مبتنی بر Presto فعلی خود به مزرعه مبتنی بر Chromium... و ساخت شبانه WebKit تغییر خواهد کرد. این چیه؟ این WebKit است که با همان کد Safari اجرا می شود (اگرچه برخی از کتابخانه های داخلی تغییر کرده اند). این تا حد زیادی توسط اپل اجرا می شود، بنابراین رفتار و مجموعه ویژگی ها با آنچه در Safari پیدا می کنید مطابقت دارد. در بسیاری از موارد، اپل در مورد گنجاندن ویژگی هایی که سایر پورت ها اجرا می کنند یا در حال آزمایش هستند، محافظه کار است. به هر حال، برای استفاده از یک قیاس، به آن فکر کنید... ساخت شبانه WebKit برای سافاری مانند Chromium برای Chrome است.

    برچسب ها را اضافه کنید

    اخیراً با سؤالاتی با برچسب "webkit" روبرو شدم. چنین سوالاتی معمولاً به مسائل وب مربوط به CSS، jQuery، طرح‌بندی‌ها، مشکلات سازگاری بین مرورگرها و غیره مربوط می‌شوند.

    بنابراین "webkit" چیست و چگونه با CSS ارتباط دارد؟ من همچنین متوجه بسیاری از ویژگی های -webkit-... در کد منبع برای وب سایت های مختلف شدم. آیا این دو به هم مرتبط هستند؟

    به روز رسانی

    بنابراین، از پاسخ‌های تاکنون... WebKit یک موتور رندر مرورگر وب HTML/CSS برای Safari/Chrome است. آیا چنین مکانیزم هایی برای IE/Opera/Firefox وجود دارد و تفاوت ها، مزایا و معایب استفاده از یکی نسبت به دیگری چیست؟ آیا می توانم برای مثال از ویژگی های WebKit در فایرفاکس استفاده کنم؟

    سوال آخر ... آیا WebKit توسط IE پشتیبانی می شود؟

    به روز رسانی 2

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

    بنابراین آیا پروژه یا حرکتی برای یک موتور رندر استاندارد وجود دارد که همه مرورگرها از آن استفاده کنند؟ آیا HTML5 مشکلات سازگاری بین مرورگرها را برطرف می کند؟

    اندروید و آیفون - جنگ مرورگرها

    بخش 1. WebKit برای نجات

    توسعه یک برنامه مرورگر مسئول نظارت بر وضعیت شبکه

    در مجموع، پلتفرم های آیفون و اندروید بیش از 100000 برنامه کاربردی برای دانلود از منابع مختلف دارند. این به برنامه های "بومی" اشاره دارد، یعنی. برنامه هایی که با استفاده از SDK مناسب توسعه و مونتاژ می شوند و سپس بر روی دستگاه تلفن همراه نصب می شوند. چنین برنامه‌های «بومی» به طور مؤثری قابلیت‌های فنی یک دستگاه تلفن همراه، از جمله پشتیبانی از شبکه‌های بی‌سیم، بلوتوث و ذخیره‌سازی داده، عملکردهای شتاب‌سنج یا قطب‌نما، و دیگر شگفتی‌های تکنولوژیکی و نوآوری‌هایی را که دستگاه‌های تلفن همراه را برای کاربران جذاب می‌کنند، درک می‌کنند. محبوبیت برنامه‌های «بومی» برای پلتفرم‌های آیفون و اندروید بسیار زیاد است، اما علاوه بر این، دستگاه‌های تلفن همراه فرصت‌های فراوانی را برای توسعه برنامه‌های کاربردی وب فراهم می‌کنند که مدت‌هاست دوران کودکی خود را ترک کرده‌اند و با آنها اینترنت موبایل به بلوغ خاصی رسیده است .

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

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

    • مشکلات نصب: نصب برنامه های وب بدون دردسر است - فقط کافی است آنها را نصب یا در سرور کپی کنید و به مشتریان خود بگویید که در مرورگر به کدام URL اشاره کنند.
    • مسائل مقیاس‌بندی: برنامه‌های کاربردی وب به راحتی به مجموعه‌ای از سرورها در یک مرکز داده با کارایی بالا مقیاس می‌شوند و ابزارهای مدیریت وب‌سایت آماده برای ارائه برنامه‌ها استفاده می‌شوند.
    • مسائل مربوط به بایگانی و بازیابی داده ها: برنامه های کاربردی وب از ذخیره سازی متمرکز داده ها استفاده می کنند و در نتیجه کار بازیابی را در صورت خرابی ساده می کنند.
    • ملاحظات رابط کاربری: ترکیبی از HTML، برگه‌های سبک آبشاری (CSS)، جاوا اسکریپت و گرافیک به شما این امکان را می‌دهد که یک رابط کاربری غنی ایجاد کنید که از نظر عملکرد و ظاهر به طور قابل‌توجهی نسبت به رابط‌هایی که با استفاده از SDK‌های بومی توسعه داده شده‌اند برتری دارد. دومی، به عنوان یک قاعده، قادر به ارائه یک اثر حضور کامل برای برنامه های بازی نیستند و عملکرد لازم را برای پایانه های اطلاعات تعاملی تضمین نمی کنند.
    • سهولت استفاده: بیشتر برنامه ها به عناصر رابط کاربری نیاز دارند که استفاده از آنها ساده و آسان باشد و به شما امکان می دهد به راحتی عملیات روزانه را انجام دهید.

    جذاب‌ترین جنبه مدل توزیع برنامه‌های اینترنتی این است که به نرم‌افزار اجازه می‌دهد تا به نوعی سرویس اشتراک تبدیل شود، راهی سودمند برای ارائه نرم‌افزار. "چطور؟" - شما بپرسید بیایید این موضوع را با جزئیات بیشتری بررسی کنیم.

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

    واقعیت این است که عملاً هیچ پشتیبانی از مرورگرهای وب در دستگاه های تلفن همراه وجود نداشت. با ظهور فناوری به نام WebKit که به لطف آیفون با اطمینان جای خود را در زمینه دستگاه های تلفن همراه باز کرد، وضعیت به طرز چشمگیری تغییر کرد.

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

    پس WebKit چیست؟

    WebKit و HTML5

    WebKit یک موتور مرورگر است که برای پشتیبانی از مرورگر Mobile Safari در پلتفرم آیفون و مرورگر در پلتفرم اندروید استفاده می شود. البته WebKit در سایر دستگاه های تلفن همراه استفاده می شود، اما برای اهداف این مقاله ما خود را به در نظر گرفتن پلت فرم های آیفون و اندروید محدود می کنیم.

    WebKit یک پروژه متن باز است که از توسعه K Desktop Environment (KDE) سرچشمه می گیرد. برنامه های کاربردی وب مدرن برای دستگاه های تلفن همراه تولد خود را مدیون پروژه WebKit هستند. ویژگی های فنی و طراحی یک دستگاه تلفن همراه قطعا نقش مهمی را ایفا می کند، اما کاربران تلفن همراه در درجه اول به محتوا علاقه مند هستند. اگر یک دستگاه تلفن همراه فقط به بخش کوچکی از محتوای اینترنت دسترسی داشته باشد، بعید است که در لیست بالای محبوب ترین دستگاه ها قرار گیرد.

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

    شایان ذکر است که WebKit در رایانه های رومیزی نیز استفاده می شود، مانند مرورگر Safari که مرورگر اصلی پلتفرم Mac OS X است، صرف نظر از اینکه نسخه دسکتاپ باشد یا موتور مرورگر آیفون یا اندروید، WebKit باقی می ماند پیشرفته ترین تکنولوژی موجود که از HTML و CSS پشتیبانی می کند. در واقع، WebKit از سبک‌های CSS پشتیبانی می‌کند که هنوز توسط مرورگرها در موتورهای دیگر رندر نشده‌اند - برای مثال، تعدادی از ویژگی‌هایی که با مشخصات HTML5 تعریف شده‌اند.

    HTML5 مجموعه‌ای از مشخصات فنی اولیه است که فناوری‌های مبتنی بر مرورگر مانند ذخیره‌سازی داده‌های سمت مشتری با پشتیبانی SQL، حرکت‌ها، تبدیل‌ها و غیره را تعریف می‌کند. مشخصات HTML5 هنوز در حال پیشرفت است، اما زمانی که اصول اولیه به وضوح در مرورگرها در اکثر پلتفرم‌ها تعریف و پیاده‌سازی شوند، شروع ساده برنامه‌های کاربردی وب به چیزی از گذشته تبدیل خواهد شد. توسعه برنامه های کاربردی وب بخش قابل توجهی از صنعت توسعه نرم افزار را اشغال خواهد کرد و ما نه تنها در مورد برنامه های کاربردی برای مرورگرهای دسکتاپ، بلکه برای مرورگرهای تلفن همراه نیز صحبت می کنیم. برنامه های کاربردی موبایل از یک محصول جانبی به محصول اصلی در بازار برنامه های کاربردی وب تبدیل می شوند.

    ویژگی های طراحی توسعه اپلیکیشن وب موبایل

    اگر تصمیم دارید بر فناوری های توسعه وب مسلط شوید، انتخاب بسیار محدودی از ابزارها در اختیار دارید. اول از همه، برنامه را می توان مستقیماً روی سرور به عنوان یک فایل حاوی کدهای HTML، CSS و جاوا اسکریپت ایجاد کرد. در این حالت، محتوای HTML را می توان در قالب فایل های HTML ایستا عرضه کرد، یا می توان به صورت پویا از طریق استفاده از فناوری های مختلفی که در سمت سرور کار می کنند، مانند PHP، ASP.NET، Java Servlets و غیره تولید کرد. در هر صورت، برای اهداف این مقاله، همه چیز به کد HTML خلاصه می شود و مهمترین نکته برای ما در اینجا این است که فناوری WebKit به مرورگرها اجازه می دهد HTML را در دستگاه های تلفن همراه ارائه دهند.

    برای اجرای یک برنامه وب در دستگاه تلفن همراه (iPhone یا Android)، کاربر باید یک مرورگر را راه اندازی کند و URL سرویس مربوطه را وارد کند، به عنوان مثال: http://yourcompanyname.com/applicationurl.

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

    نمایش سایت های استاندارد

    موتور WebKit، همراه با رابط کاربری بصری و کاربرپسند پلتفرم‌های iPhone و Android، به شما امکان می‌دهد تقریباً هر وب‌سایت را در دستگاه تلفن همراه خود مشاهده کنید. صفحات وب برخلاف نسل قبلی مرورگرهای موبایل که به صورت تصادفی قطعاتی از محتوا را منتقل می کردند یا اصلاً نمایش نمی دادند، کاملاً درست نمایش داده می شوند. هنگامی که صفحات در یک مرورگر دارای WebKit بارگیری می شوند، محتوای صفحه تمایل به مقیاس دارد. در این مورد، مقیاس طوری انتخاب می‌شود که کل صفحه روی صفحه قرار گیرد، البته به شکل بسیار کاهش یافته و اغلب ناخوانا، همانطور که در شکل 1 نشان داده شده است. تمام عناصر محتوا به طور پیش فرض، مرورگر از پنجره ای با عرض 980 پیکسل استفاده می کند.

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

    صفحات وب با در نظر گرفتن دستگاه های تلفن همراه طراحی شده اند

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

    اگرچه WebKit به یک صفحه وب اجازه می دهد تا به درستی بر روی صفحه نمایش دستگاه تلفن همراه نمایش داده شود، تفاوت های خاصی بین دستگاه های مبتنی بر ماوس مانند لپ تاپ یا رایانه های رومیزی و دستگاه های لمسی مانند تلفن های هوشمند iPhone یا Android وجود دارد. دستگاه های لمسی در ابعاد فیزیکی ناحیه "کلیک"، عدم وجود عملکردی برای نگه داشتن مکان نما بر روی هر عنصر و توالی متفاوتی از رویدادها متفاوت هستند. بنابراین، اگر می‌خواهید وب‌سایتی ایجاد کنید که برای کاربران عادی و تلفن همراه راحت باشد، باید ویژگی‌های زیر را در دستگاه‌های تلفن همراه در نظر بگیرید:

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

    بحث مفصل در مورد این جنبه ها را می توان در مقاله یافت " آیفون در عمل"(به بخش مراجعه کنید). در مقاله ما خود را به در نظر گرفتن مزایای WebKit و نه معایب آن محدود می کنیم.

    بیایید به واضح ترین مشکل کاربران آیفون یا اندروید در هنگام دسترسی به وب سایت ها نگاه کنیم: اندازه صفحه نمایش محدود. در واقع، اندازه صفحه نمایش یک دستگاه تلفن همراه مدرن 320x480 یا 480x320 است، مشروط بر اینکه کاربر ترجیح دهد محتوای وب را در یک پیکربندی افقی مشاهده کند. همانطور که در شکل 1 مشاهده می کنید، WebKit قادر است یک صفحه وب طراحی شده برای کامپیوترهای رومیزی استاندارد را به درستی نمایش دهد. با این حال، هنگامی که یک صفحه وب مقیاس بندی می شود، ممکن است متن برای خواندن بسیار کوچک شود، بنابراین کاربر باید قبل از خواندن متن، پیمایش کند، حرکت کند و بزرگنمایی کند. چگونه با این محدودیت برخورد کنیم؟

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

    متا تگ یک تگ HTML است که در سر یک سند HTML قرار می گیرد. ساده ترین مثال استفاده از تگ viewport به این صورت است: .

    با افزودن این متا تگ به یک صفحه HTML، نمایش آن در پنجره مرورگر موبایل به بهینه ترین شکل مقیاس می شود (شکل 2 را ببینید). مرورگرهایی که از viewport پشتیبانی نمی کنند به سادگی این برچسب را نادیده می گیرند.

    برای تعریف گزینه های بزرگنمایی خاص، مقدار دقیق ویژگی محتوای viewport را مشخص کنید: متا تگ. با تغییر مقدار پارامتر مقیاس اولیه، می توان تصویر را کوچک یا بزرگ کرد. برای پلتفرم های آیفون و اندروید بهتر است از مقادیر 1.0 تا 1.3 استفاده کنید. متا تگ Viewport همچنین از حداقل و حداکثر زوم پشتیبانی می کند که به شما امکان می دهد توانایی کاربر را برای تغییر بزرگنمایی صفحه در هنگام بارگذاری محدود کنید.

    در حالی که ویژگی های طراحی آیفون، به ویژه اندازه صفحه نمایش 320x480، از زمان معرفی تقریباً بدون تغییر باقی مانده است، پارامترهای دستگاه های روی پلت فرم اندروید دارای طیف نسبتاً گسترده ای هستند، زیرا دستگاه های تلفن همراه در این پلت فرم توسط تولید کنندگان مختلف تولید می شوند و برای طیف گسترده ای از گروه های کاربری در نظر گرفته شده است. بنابراین، اگر می خواهید برنامه وب شما در بین کاربران تلفن همراه محبوب باشد، باید تفاوت های احتمالی در اندازه صفحه نمایش، وضوح و ویژگی های طراحی دستگاه های اندرویدی را در نظر بگیرید.

    تجربه نشان داده است که علاوه بر تفاوت های طراحی که بین دستگاه های مختلف تلفن همراه اندرویدی وجود دارد، خود نرم افزار اندروید سعی می کند تنظیمات صفحه وب بارگذاری شده را بسته به ویژگی های مرورگر دستگاه تلفن همراه تنظیم کند. علاوه بر ثبات، پلتفرم اندروید دارای مجموعه ای از ویژگی ها و قابلیت های دائمی در حال تغییر است. بسته به نسخه SDK و سازنده دستگاه، تنظیمات دستگاه Android خاص شما احتمالاً با محیط توسعه شما متفاوت خواهد بود. شکل 4 صفحه تنظیمات مرورگر را در شبیه ساز اندروید V1.6 نشان می دهد. تنظیمات صفحه این فرصت را در اختیار کاربر قرار می دهد تا سطح مقیاس تصویر را روی صفحه تعیین کند (دور، نزدیک، متوسط) یا حالت مقیاس خودکار صفحه را انتخاب کند.

    در دنیای دستگاه های تلفن همراه، ثابت ترین چیز تغییر است، بنابراین توسعه و تجدید بازار نرم افزار موبایل باید مورد توجه قرار گیرد. به عنوان مثال، تنظیمات مرورگر Sprint Hero شامل مجموعه‌ای از گزینه‌ها است که کاملاً با تنظیمات استاندارد مورد استفاده در هنگام بارگذاری یک صفحه وب متفاوت است. مرورگر Hero بر روی پلتفرم اندروید V1.5 و با استفاده از تعدادی تغییرات انجام شده توسط HTC ساخته شده است. خوشبختانه، استفاده از متا تگ viewport، تنظیمات خاص Hero را نادیده می گیرد.

    تا کنون، دیده‌ایم که WebKit کار بسیار خوبی برای بارگذاری یک صفحه وب انجام می‌دهد، البته به شکلی بسیار کاهش یافته و خوانا. سپس با استفاده از متا تگ viewport کنترل نحوه نمایش صفحه در صفحه دستگاه تلفن همراه را گسترش دادیم. اکنون خواندن و پیمایش صفحه نمایش داده شده بسیار ساده تر است. اما این هنوز برای اینکه صفحه ما شبیه یک برنامه وب به نظر برسد و کار کند کافی نیست.

    ساخته شده برای دستگاه های تلفن همراه

    بیایید به بررسی ویژگی های طراحی یک صفحه وب در نظر گرفته شده برای مخاطبان تلفن همراه ادامه دهیم. به عنوان یک مثال خاص، صفحه ثبت نام برای سرویس ایمیل Google GMail را در نظر بگیرید.

    این همان چیزی است که صفحه در پنجره مرورگر دسکتاپ به نظر می رسد:


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

    صفحه نشان داده شده در شکل 6 قطعا برای کاربران موبایل طراحی شده است. صفحه فقط آن دسته از عناصر صفحه را نشان می دهد که کاربر برای کار بیشتر به آنها نیاز دارد - نیازی به پیمایش، حرکت یا بزرگنمایی اضافی نیست.

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

    این واقعاً یک برنامه کاربردی است که برای دستگاه های تلفن همراه طراحی شده است.

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

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

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

    محتوای مخصوص پلتفرم

    گام بعدی توسعه محتوای خاص برای یک پلتفرم موبایل خاص است. این فرمت صفحه و رابط کاربری را طوری تعریف می کند که صفحه حاصل به جای یک وب سایت عمومی استاندارد شبیه یک برنامه کاربردی برای یک پلتفرم خاص باشد. منظور ما از برنامه "بومی" چیست؟

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

    برنامه های آیفون ظاهر و رابط کاربری خاص خود را دارند. یک اسکرین شات از یک آیفون به کسی نشان دهید و، مگر اینکه روز گذشته از ماه افتاده باشد، تقریباً بلافاصله می‌گوید که آیفون است. یک اسکرین شات از یک دستگاه تلفن همراه اندرویدی را به همان شخص نشان دهید، دیگر پاسخ آنقدر واضح نخواهد بود. دلیلش چیست؟ چندین توضیح ممکن وجود دارد. اولا، آیفون خیلی زودتر از دستگاه های مبتنی بر اندروید در بازار ظاهر شد و توانست طرفداران زیادی را به دست آورد. به افرادی فکر کنید که صف می‌کشند تا برای ویژگی‌های محدود آیفون V1، دلار بالایی بپردازند. چه آیفون را دوست داشته باشید یا نه، این محصول اپل در حال حاضر رهبر بازار است. اندروید چطور؟

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

    با گذشت زمان، تعداد دستگاه های اندرویدی در جهان از تعداد آیفون ها پیشی خواهد گرفت. این به این دلیل است که دستگاه‌های اندرویدی توسط شرکت‌های مختلفی ساخته می‌شوند و توسط طیف گسترده‌ای از شبکه‌های داده پشتیبانی می‌شوند. با وجود چنین تعداد قابل توجهی از بازیگران در بازار دستگاه های تلفن همراه اندروید، مطمئناً باید منتظر چندپارگی بازار بر اساس ظاهر و پارامترهای دستگاه ها باشیم. این روند را می توان در رابط کاربری SenseUI از HTC مشاهده کرد. این ظاهر و احساس جذاب توسط Android SDK زیرین پشتیبانی نمی‌شود و با سایر دستگاه‌های Android سازگار نیست. موتورولا، گوگل و ورایزون برای توسعه یک دستگاه DROID جدید مبتنی بر اندروید به نیروهای خود پیوستند. این اولین محصول تجاری در پلتفرم اندروید 2.0 است.

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

    بنابراین، چه کاری باید انجام شود تا ظاهر و رابط برنامه تا حد ممکن به برنامه های "بومی" نزدیک شود؟

    اگر قبل از ظهور وب 2.0 با این چالش روبرو می شدیم، واقعاً یک مشکل جدی بود. تلاش های اولیه برای پشتیبانی از چندین مرورگر مشتری (موبایل و دسکتاپ) به چندین رویکرد متکی بود، به عنوان مثال:

    • توسعه سایت های کاملا موازی
    • تولید محتوای پویا بسته به پارامتر userAgent
    • استفاده از سرورهای پروکسی که می توانند محتوا را بسته به هر دستگاه خاص تغییر دهند. فناوری مشابهی با موفقیت توسط RIM برای دسترسی به ایمیل از دستگاه تلفن همراه مشتری استفاده شد.

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

    خوشبختانه ما مجبور به انجام این کار نخواهیم بود. در عصر WebKit و CSS، می توان با استفاده از شیوه نامه ها و پرس و جوهای رسانه ای، بر تفاوت های ظاهری و رابط دستگاه های تلفن همراه مختلف غلبه کرد که امکان استفاده از سبک های مختلف بسته به نوع خاص دستگاه را فراهم می کند. فناوری پرس و جو رسانه ای به شما امکان می دهد اطلاعاتی در مورد مشتری به دست آورید. به طور سنتی، مرورگر یک مقدار userAgent را برای سرور ارسال می کند که به سرور اجازه می دهد مرورگر خاص را شناسایی کند و محتوایی را که باید برای مشتری ارسال شود، تعیین کند. مرورگر با استفاده از پرسش رسانه ای، سبک صفحه را بر اساس قابلیت های آن انتخاب می کند. مثال زیر انتخاب یک شیوه نامه طراحی شده برای گوشی های هوشمند را نشان می دهد: . و این کوئری یک شیوه نامه دسکتاپ را تعریف می کند: .

    Internet Explorer V6

    در زمان نگارش این مقاله، Internet Explorer V6 تقریباً 20-30٪ از کل بازار مرورگرها را اشغال می کرد، با این حال، بحث در مورد قابلیت های IE V6 خارج از محدوده این مقاله است.

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

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

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

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

    برنامه netmon شامل لیستی از سرورهایی است که باید نظارت شوند. شاخص های کلیدی عملکرد (KPI) برای هر سرور جمع آوری می شود. شاخص های کلیدی عملکرد ابزار اصلی است که دانشجویان MBA سال ها از آن برای ارزیابی وضعیت فعلی یک تجارت استفاده می کنند. از دیدگاه میزبانی وب اپلیکیشن، شاخص های زیر را می توان به عنوان KPI استفاده کرد:

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

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

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

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

    برنامه ما با استفاده کامل از CSS، jQuery و WebKit، نشانگرهای عملکرد به دست آمده را در قالبی آسان برای پیمایش نمایش می دهد تا توجه کاربر را به مناطق مشکل جلب کند. همانطور که قبلاً نیز اشاره کردیم، هدف اصلی از توسعه این اپلیکیشن، امکان اجرای آن بر روی پلتفرم آیفون، اندروید و رایانه رومیزی در مرورگر سافاری است.

    توسعه برنامه نظارت بر شبکه

    صفحات وب مدرن باید به شکلی اعلامی ایجاد شوند که ساختار سازمانی و محتوای صفحه را مشخص کند. مکان یابی و قالب بندی صفحه با استفاده از Cascading Style Sheets (CSS) و در بیشتر موارد جاوا اسکریپت انجام می شود. در واقع، کتابخانه‌های جاوا اسکریپت به قدری محبوب شده‌اند که امروزه استفاده از آن‌ها یک قاعده است نه استثنا. در برنامه مورد بحث در این مقاله، از کتابخانه محبوب جاوا اسکریپت jQuery استفاده خواهیم کرد. برنامه ما روی پلتفرم های آیفون، اندروید و دسکتاپ اجرا خواهد شد. از همان کد HTML استفاده خواهد شد و هرگونه تفاوت لازم در شیوه نامه پیاده سازی خواهد شد. در اینجا لازم به ذکر است که ما آگاهانه هیچ تلاش قابل توجهی برای طراحی ظاهری جذاب برای برنامه انجام نداده ایم. علاوه بر این، رنگ‌های قابل توجهی که با یکدیگر هماهنگ نیستند، عمداً به عنوان پس‌زمینه انتخاب شدند تا توجه بیشتر خواننده را به سازمان‌دهی شیت‌ها جلب کنند. در قسمت 2 ظاهر برنامه را اندکی بهبود خواهیم داد، اما در حال حاضر کد HTML شبیه آنچه در لیست 1 نشان داده شده است.

    فهرست 1. کد HTML برنامه اگر (navigator.userAgent.indexOf("iPhone") != -1) ( document.write("")؛ ) در غیر این صورت اگر (navigator.userAgent.indexOf("Android") != -1 ) (document.write(""); ) else (document.write(""); ) تابع setupTestData() ( try (netmon.initialize(); if (netmon.resources.length > 0) (jQuery.each( netmon .resources,function (index, value) ($("#mainContent").append(netmon.render(index,value)); );$(".serverentry"). $(this) .find(".serveritems").toggle();)); Servers My User Agent

    نگاهی سریع به کد HTML پیشنهادی ویژگی های اصلی زیر را نشان می دهد:

    • کد از دو فایل جاوا اسکریپت خارجی استفاده می کند: یک فایل کتابخانه jQuery و یک فایل کمکی برای برنامه ما.
    • کد از متا تگ viewport برای مقیاس بندی محتوای نمایش داده شده استفاده می کند.
    • شیوه نامه اصلی توسط فایل netmon.css تعریف می شود.
    • پارامتر userAgent برای تعریف شیوه نامه کمکی استفاده می شود. بسته به مقدار آن، استایل شیت برای مرورگر آیفون، اندروید یا دسکتاپ بارگذاری می شود.
    • فرآیند بارگذاری صفحه از jQuery و یک تابع کمکی تعریف شده در فایل netmon.js برای نمایش داده ها استفاده می کند.
    • کد صفحه اصلی از چندین تگ div استفاده می کند.
    • در نهایت، کد حاوی پیوندی به صفحه ای است که رشته userAgent را نشان می دهد. این پیوند هیچ ارتباطی با عملکرد برنامه ندارد و فقط برای اهداف نمایشی استفاده می شود.

    قبل از اینکه وارد جزئیات شیوه نامه ها و فایل netmon.js شویم که در واقع عملیات اصلی برنامه را تعریف می کنند، اجازه دهید نگاهی به برنامه خود در وضعیت فعلی بیاندازیم. لطفاً دوباره توجه داشته باشید که ما از سه شیوه نامه مختلف استفاده می کنیم: یکی برای هر یک از سه پلت فرم پشتیبانی شده. برای اینکه فرآیند توسعه اپلیکیشن بصری تر شود، هر جدول رنگ پس زمینه خود را مشخص می کند. در شکل 9، صفحه ما در مرورگر Desktop Safari باز است و پس زمینه آبی دارد.

    شکل 11 ظاهر برنامه را در پنجره مرورگر آیفون نشان می دهد (رنگ پس زمینه سبز است).

    شیوه نامه اصلی ذخیره شده در فایل netmon.js در فهرست 2 نشان داده شده است.

    فهرست 2. بدنه صفحه سبک اصلی ( رنگ: #888888؛ خانواده فونت: Helvetica؛ اندازه قلم: 14 پیکسل؛ حاشیه: 0 پیکسل؛ بالشتک: 0؛ ) .جزئیات (حاشیه: 0 پیکسل؛ پد: 0 پیکسل؛ رنگ پس‌زمینه: سفید. حاشیه: 1 پیکسل - حاشیه - سمت چپ - 8 پیکسل - حاشیه - پایین - شعاع: 8 پیکسل . BAD ( رنگ: #ff0000; .odd (پس‌زمینه-تصویر: -webkit-gradient(خطی، سمت چپ بالا، پایین سمت راست، از(#ccc) ,به (#999))؛ .cout (پس‌زمینه-تصویر: -webkit-gradient(خطی , سمت چپ بالا, پایین سمت راست, from(#999) ,to (#ccc) ) .serverentry a ( float: right; color: #ffffff; ) .serveritems( color: #000; ) #header h1 ( margin: 0 padding: text-align: #000;

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

  • رنگ بندی صفحه را تغییر دهید. این اجازه می دهد تا اولاً نقش شیوه نامه را به وضوح نشان دهیم و ثانیاً نشان دهیم که چقدر آسان است که بسته به مقدار پارامتر userAgent انتخاب سبک مورد نظر را انتخاب کنیم.
  • اندازه های مختلف فونت را برای پلتفرم های موبایل و دسکتاپ تنظیم کنید.
  • توابع WebKit مربوطه را بررسی کنید. اگر برنامه در مرورگری بدون پشتیبانی WebKit مانند فایرفاکس اجرا شود، این تفاوت قابل توجهی ایجاد می کند.

    • لیست 3 کد فایل iphone.css را نشان می دهد.

    فهرست 3. بدنه فایل iphone.css ( رنگ پس زمینه: #00ff00; ) .serverentry ( -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -webkit-border شعاع پایین سمت چپ: 8 پیکسل

    همانطور که می بینیم، رنگ پس زمینه تگ بدنه سبز است (#00ff00) و اندازه فونت تنظیم شده است تا خواندن آن در صفحه دستگاه تلفن همراه آسان تر شود. در نهایت، اجازه دهید نگاهی به فایل netmon.js بیندازیم، که لیستی از سرورها و تابعی را تعریف می‌کند که داده‌های هر سرور را چاپ می‌کند (در فهرست 4 استفاده شده است). بخشی از کد فایل برای اختصار حذف شده است، متن کامل آن در بخش موجود است.

    فهرست 4. فایل Netmon.js var netmon = ( مقدار دهی اولیه: تابع () ( )، منابع: [ ( نام: "msiservices.com"، homeurl: "http://msiservices.com"، پینگورل: "http:// msiservices.com/netmon.php، وضعیت: "OK"، خلاصه: "OK"، موارد: [ (نام: "DiskSpace"، مقدار: "22.13 GB")، (نام: "Database Up?"، مقدار: "بله") ])، (نام: "سرور 2"، homeurl: "http://someurl"، pingurl: "http://someurl/netmon.jsp"، وضعیت: "OK"، خلاصه: "OK" , آیتم ها: [ (نام: "DiskSpace"، مقدار: "100.8 GB")، (نام: "Database Up?"، مقدار: "Yes") ])، // ورودی های اضافی بریده شده برای اختصار]، رندر: function( index,itm) ( try ( var ret = "; ret += "" ; ret += "" + itm.name + " نمایش
    "; if (itm.status != "OK") ( ret += "-" + itm.summary + "
    "; ) ret += ""; jQuery.each(itm.items,function (j,itemdetail) ( ret += ">" + itemdetail.name + "=" + itemdetail.value + "
    "; ))؛ ret += ""؛ ret += ""؛ بازگشت ret؛ ) catch (e) (بازگرداندن "خطا در رندر مورد [" + itm.name + "] " + e + ""; ) ) ) ;

    اگر نوار وضعیت هر سروری خوب نباشد، ورودی سرور مربوطه به رنگ قرمز نمایش داده می شود، همانطور که از تعریف کلاس در فایل CSS مشاهده می شود. علاوه بر این، اگر بررسی وضعیت سرور، مشکلی را نشان داد (وضعیت خوب نیست)، شرح مختصری از مشکل نیز نمایش داده می شود. شکل های 9-11 نشان می دهد که سرور 4 فضای خالی دیسک در حال اتمام است. وقتی روی خط این سرور کلیک می کنید، یک پیام دقیق در مورد مشکل روی صفحه نمایش داده می شود (شکل 12 را ببینید).

    با کلیک بر روی پیوند نمایش در سمت راست نام سرور، صفحه اصلی آن سرور باز می شود. داشتن چنین پیوندی به دو دلیل بسیار راحت است: اول اینکه شما را از نیاز ناخوشایند به حفظ URL هر سرور نجات می دهد و دوم اینکه شما را از نیاز ناخوشایندتر وارد کردن این URL از صفحه کلید نجات می دهد. دستگاه تلفن همراه شما (حتی راحت ترین).

    بنابراین، اگر ما موفق به اجرای موفقیت آمیز netmon بر روی یک دستگاه تلفن همراه شویم، وظیفه نگهداری سرورها نباید مشکلی ایجاد کند.

    نتیجه گیری

    این مقاله به معرفی اصول توسعه برنامه های کاربردی وب برای آیفون و اندروید با استفاده از فناوری WebKit می پردازد. در قسمت 2، با افزودن قابلیت به روز رسانی داده ها با استفاده از تماس های Ajax، قابلیت های برنامه خود را گسترش خواهیم داد.

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

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

    • استفاده از موتورهای رندر برای ایجاد مرورگر مزایای زیادی دارد:
    • یافتن و رفع خطاهای کد را آسان تر می کند.
    • یک فرصت مناسب برای بهبود یک مؤلفه در چندین برنامه به طور همزمان.
    • فرآیند تغییر رابط گرافیکی اپلیکیشن ساده شده است.

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

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

    نمونه بارز موتور Trident از مایکروسافت است. این به تنهایی در بسیاری از برنامه های کاربردی این شرکت استفاده می شود. با توسعه بنیاد، پروژه های مشتقه نیز توسعه می یابند.

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

    سه گانه

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

    Trident یا MSHTML یک جزء نرم افزاری نسبتاً قدیمی است که توسط مایکروسافت برای نیازهای خود توسعه یافته است. این پروژه از سال 1997 به طور مداوم در حال توسعه بوده است. مورد استفاده در مرورگر وب مایکروسافت - اینترنت اکسپلورر، سرویس گیرنده ایمیل Outlook، Windows Explorer (برنامه ای برای کار با فایل ها) و بسیاری از برنامه های دیگر از این توسعه دهنده.

    با انتشار ویندوز 10، پلتفرم Trident به EdgeHTML تبدیل شد. با قضاوت بر اساس معیارها (تست نرم افزار عملکرد و سرعت)، مایکروسافت اج (مرورگری که بر اساس EdgeHTML ایجاد شده است) به برنامه های محبوبی که برای ایجاد مرورگرهای گوگل کروم و موزیلا فایرفاکس استفاده می شود، رسیده و حتی پیشی گرفته است.

    مارمولک

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

    مزیت دیگر Geko کراس پلتفرم است. بر روی اکثریت قریب به اتفاق سیستم عامل های مدرن کار می کند: هم برای رایانه های شخصی و هم برای دستگاه های تلفن همراه (برخلاف اینترنت اکسپلورر که فقط در سیستم عامل ویندوز کار می کند).

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

    بر اساس Geko، مرورگر اینترنتی محبوب موزیلا فایرفاکس، سرویس گیرنده ایمیل Thunderbird، زمان‌بندی وظایف Sunbird و یک مرورگر وب ناشناس با پشتیبانی داخلی از فناوری‌های Tor VPN ایجاد شد.

    KHTML

    یک پلت فرم کمتر شناخته شده برای ایجاد Konqueror، مدیر فایل KDE استفاده می شود. برای کاربرانی که با سیستم عامل های خانواده لینوکس آشنایی ندارند، جالب است که محبوب ترین موتور دنیا بر اساس این پروژه ساخته شده است که در ادامه به آن پرداخته خواهد شد.

    وب کیت

    این موتور توسط شرکت مشهور جهانی اپل بر اساس راه حل فوق - KHTML توسعه یافته است. این پروژه که در سال 2001 منتشر شد، توسعه فوق العاده ای دریافت کرد و به یکی از پرکاربردترین ها در جهان تبدیل شد.

    بر اساس WebKit، مرورگر وب سافاری ایجاد شد که به طور پیش فرض در دستگاه های iOS و پیشرو در محبوبیت در بین مرورگرها - Google Chrome استفاده می شود. تعداد زیادی از برنامه های مدرن برای پردازش محتوای صفحات وب مبتنی بر WebKit هستند. علاوه بر این، در برنامه محبوب Steam که برای توزیع دیجیتالی بازی های رایانه ای از Valve طراحی شده است، استفاده می شود.

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

    در سال 2013، یک شعبه جدید متعلق به گوگل، Blink، از WebKit جدا شد. این پروژه اساس نسخه 28 کروم (و تمامی نسخه های بعدی) و همچنین برادر منبع باز آن، کرومیوم را تشکیل داد. Chromium برای ایجاد مرورگر محبوب Yandex در روسیه استفاده شد. از نسخه 15، مرورگر اپرا نیز به Blink تغییر مکان داد.

    Presto

    موتور مرورگر Presto که در سال 2003 ایجاد شد، به عنوان پایه ای برای Opera استفاده شد. بیش از 10 سال توسعه یافته است. در سال 2013، توسعه دهندگان Opera تصمیم گرفتند استفاده از Presto را به نفع قدرتمندتر و محبوب تر Blink از گوگل کنار بگذارند. در حال حاضر توسعه پروژه متوقف شده است.

    آیا مقاله مفید بود؟

    بیشتر بخوانید: