10 Основні інструменти для створення веб-сайтів ASP.NET

  1. 1. Спрайт і рамки оптимізації зображення
  2. 2. Microsoft Ajax Minifier
  3. 3. ySlow
  4. 4. ELMAH
  5. 5. Пінгдом
  6. 6. Хост-трекер
  7. 7. Перевірка правопису HTML
  8. 8. Інструментарій IIS SEO
  9. 9. LinqPad
  10. 10. NET Reflector

Нещодавно я створив простий публічний веб-сайт, створений ASP.NET для моєї компанії Superexpert.com . Я був здивований кількістю безкоштовних інструментів, які я закінчив, використовуючи веб-сайт. Тому мені здалося, що було б цікаво створити список необхідних інструментів для створення веб-сайтів ASP.NET. Ці інструменти працюють однаково добре як з ASP.NET Web Forms, так і з ASP.NET MVC.

Прочитавши Стіва Соудерса дві (дуже відмінні) книги про продуктивність веб-сайту Високопродуктивні веб-сайти і Навіть швидше веб-сайти , Я був дуже чутливий до продуктивності веб - сайту. За Золотим правилом Соудерса:

" Спочатку оптимізуйте продуктивність інтерфейсу, де витрачається 80% або більше часу відповіді кінцевого користувача"

Можна використовувати наведені нижче інструменти, щоб зменшити розмір зображень, файлів JavaScript і файлів CSS, які використовуються програмою ASP.NET.

1. Спрайт і рамки оптимізації зображення

CSS-спрайти вперше описані в статті, написаній для A List Apart Спрайт CSS: Поцелуй смерті зображення Slicing . Під час використання спрайтів ви можете об'єднати декілька зображень, що використовуються веб-сайтом, в одне зображення. Далі ви використовуєте хитрість CSS для відображення окремих під-зображень із комбінованого зображення на веб-сторінці.

Основною перевагою спрайтів є те, що вони зменшують кількість запитів, необхідних для відображення веб-сторінки. Запит на одне велике зображення відбувається швидше, ніж запит декількох невеликих зображень. Загалом, чим більше ресурсів - зображень, файлів JavaScript, CSS-файлів - які повинні бути переміщені по дроту, тим повільніше ваш сайт.

Однак більшість людей уникає використання спрайтів, оскільки вони вимагають багато роботи. Потрібно об'єднати всі зображення і написати правильні правила CSS для відображення під-зображень. Microsoft Sprite і Image Optimization Framework дозволяють уникнути всієї цієї роботи. Каркас об'єднує зображення для вас автоматично. Крім того, в основу входить керування веб-формами ASP.NET і помічник ASP.NET MVC, що полегшує відображення суб-зображень. Ви можете завантажити Сприт і Оптимізацію зображень з CodePlex за адресою http://aspnet.codeplex.com/releases/view/50869 .

Сприт і Оптимізація зображень були написані Морганом МакКліном, який працював у офісі, розташованому поруч з моєю компанією Microsoft. Морган був страшним розумним стажером з Канади, і ми обговорювали рамки, поки він будував його (я був дуже радий дізнатися, що він працює над цим).

Morgan додав деякі великі додаткові можливості до цієї системи. Наприклад, Sprite і Image Optimization Framework підтримує те, що називається вбудованим зображенням . Коли ви використовуєте вбудоване зображення, фактичне зображення зберігається у файлі CSS. Нижче наведено приклад того, як зображення вбудовується:

.Home_StephenWalther_small-jpg

{

ширина: 75px;

висота: 100px;

фон: url (дані: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAIAAABB1lpeAAAAB

GdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjA8AAP1SAACBQAAAfXkAAOmLAAA85QAAGcxzPIV3AAAKL

s + zNfREAAAAASUVORK5CYII =) не повторюється 0% 0%;

}

Фактичне зображення (в даному випадку зображення, яке відображається на домашній сторінці сайту Superexpert.com) зберігається у файлі CSS.

Якщо ви відвідуєте веб-сайт Superexpert.com, то завантажується дуже мало окремих зображень. Наприклад, всі зображення з червоною рамкою на скріншоті нижче використовують спрайт CSS:

На жаль, є деякі значні Gotchas, які ви повинні знати, коли використовуєте Sprite і рамки оптимізації зображення. Існують обхідні шляхи для цих Гочас. Я планую написати про ці Gotchas та обхідні шляхи у майбутньому входженні blog.

2. Microsoft Ajax Minifier

По можливості можна комбінувати, зменшувати, стискати та кешувати з далеким майбутнім заголовком всі ваші файли JavaScript і CSS. Microsoft Ajax Minifier дозволяє легко зменшити JavaScript і CSS файли.

Не плутайте мініфікацію і стиснення. Ви повинні зробити обидва. За словами Souders, ви можете зменшити розмір файлу JavaScript ще на 20% (у середньому), зменшивши файл JavaScript після стиснення файлу.

Коли ви зменшуєте JavaScript або CSS-файл, ви використовуєте різні трюки, щоб зменшити розмір файлу, перш ніж стискати файл. Наприклад, ви можете зменшити файл JavaScript, замінивши довгі імена змінних JavaScript короткими іменами змінних і видаливши непотрібні пробіли і коментарі. Ви можете зменшити CSS-файл, виконуючи такі дії, як замінити довгі назви кольорів, такі як #ffffff з більш короткими еквівалентами, такими як #fff.

Microsoft Ajax Minifier був створений співробітником Microsoft Рон Логан. Внутрішньо цей інструмент використовувався кількома великими веб-сайтами Microsoft. Ми також активно використовували цей інструмент у команді ASP.NET. Я переконав Рона опублікувати інструмент на CodePlex, щоб кожен у світі міг скористатися ним. Інструмент можна завантажити зі списку ASP.NET Ajax веб-сайт і прочитати документацію для інструмента тут .

Я створив інсталятор для Microsoft Ajax Minifier. При створенні інсталятора я також створив завдання збірки Visual Studio, що полегшує мінімізацію всіх ваших файлів JavaScript і CSS, коли ви автоматично збираєтеся в Visual Studio. Читати Швидкий старт Ajax Minifier щоб дізнатися, як налаштувати завдання збирання.

3. ySlow

The ySlow tool це безкоштовна надбудова для Firefox, створена компанією Yahoo, що дозволяє перевірити інтерфейс вашого веб-сайту. Наприклад, ось поточні результати тестування для веб-сайту Superexpert.com:

Веб-сайт Superexpert.com має загальний бал B (не ідеальний, але не поганий). Інструмент ySlow не ідеальний. Наприклад, веб-сайт Superexpert.com отримав недостатню оцінку F для того, щоб не використовувати мережу доставки вмісту, навіть якщо веб-сайт використовує Мережа доставки вмісту Microsoft Ajax для файлів JavaScript, таких як jQuery.

Після публікації веб-сайту в світі, ви хочете, щоб веб-сайт не стикався з будь-якими проблемами і що він залишається живим. Я використовую наступні інструменти для контролю веб-сайт Superexpert.com тепер, коли він живий.

4. ELMAH

ELMAH виступає за модулі журналу помилок і обробники для ASP.NET . ELMAH дозволяє записувати будь-які помилки, які відбуваються на вашому веб-сайті, щоб ви могли переглянути їх у майбутньому. Ви можете завантажити ELMAH безкоштовно з сайту Сайт проекту ELMAH .

ELMAH прекрасно працює з веб-формами ASP.NET і ASP.NET MVC. Ви можете налаштувати ELMAH для зберігання помилок у ряді різних магазинів, включаючи XML-файли, журнал подій, базу даних Access, базу даних SQL, базу даних Oracle або комп'ютерну оперативну пам'ять. Ви також можете налаштувати ELMAH, щоб надсилати вам повідомлення про помилки, коли вони трапляються.

За замовчуванням доступ до ELMAH можна отримати, запитувавши сторінку elmah.axd з веб-сайту з встановленим ELMAH. Ось як виглядає сторінка elmah з веб-сайту Superexpert.com (ця сторінка захищена паролем, оскільки секретна інформація може бути виявлена ​​в повідомленні про помилку):

Якщо натиснути на певне повідомлення про помилку, ви зможете переглянути оригінальне повідомлення про помилку ASP.NET Yellow Screen (навіть якщо повідомлення про помилку ніколи не було показано фактичному користувачеві).

Я встановив ELMAH, скориставшись новим менеджером пакунків для ASP.NET з іменем NuGet (спочатку названий NuPack). Ви можете прочитати деталі про NuGet в наступному запис у блозі Скотта Гатрі. Ти можеш завантажити NuGet від CodePlex.

5. Пінгдом

Я використовую Pingdom, щоб переконатися, що веб-сайт Superexpert.com завжди працює. Ви можете зареєструватися на Pingdom, відвідавши Pingdom.com . Ви можете використовувати Pingdom для моніторингу одного сайту безкоштовно.

На веб-сайті Pingdom ви налаштовуєте частоту, на якій ваш сайт отримує повідомлення. Я переконуюсь, що веб-сайт Superexpert.com працює кожні 5 хвилин. Я маю службу Pingdom, щоб переконатися, що вона може отримати рядок "Contact Us" з домашньої сторінки веб-сайту.

Я маю службу Pingdom, щоб переконатися, що вона може отримати рядок Contact Us з домашньої сторінки веб-сайту

Якщо ваш сайт знижується, ви можете налаштувати Pingdom так, щоб він відправляв повідомлення електронної пошти, Twitter, SMS або iPhone. Я використовую програму iPhone Pingdom, яка виглядає так:

Я використовую програму iPhone Pingdom, яка виглядає так:

6. Хост-трекер

Якщо ваш веб-сайт знижується, вам потрібно визначити, чи є це проблемою з вашою локальною мережею або якщо ваш веб-сайт відсутній для всіх. Я використовую веб-сайт під назвою Host-Tracker.com, щоб перевірити, наскільки погано сайт.

Ось як відображається веб-сайт Host-Tracker для веб-сайту Superexpert.com, коли веб-сайт може бути успішно розгорнуто з усього світу:

com, коли веб-сайт може бути успішно розгорнуто з усього світу:

Зверніть увагу, що Host-Tracker переглянув веб-сайт Superexpert.com з 68 місць, включаючи Roubaix, Францію та Scranton, PA.

Я маю на увазі налагодження в широкому сенсі. Під час створення веб-сайту я використовую такі інструменти, щоб переконатися, що я не зробив помилку.

7. Перевірка правопису HTML

Чому у Visual Studio немає вбудованої перевірки правопису? Не знаю - я завжди вважав це таємничим. На щастя, колишній член команди ASP.NET написав безкоштовну перевірку правопису, яку можна використовувати зі своїми сторінками ASP.NET.

Я знаходжу перевірку орфографії незамінною. Легко обманювати себе, що ви здатні до ідеального написання. Я завжди супер збентежений, коли я дійсно запустити інструмент перевірки орфографії і виявити всі мої орфографічні помилки.

Найшвидший спосіб додати розширення HTML перевірки орфографії до Visual Studio - вибрати пункт меню Інструменти, Менеджер розширень у Visual Studio. Натисніть онлайн-галерею та знайдіть HTML-перевірку правопису:

8. Інструментарій IIS SEO

Якщо люди не можуть знайти ваш веб-сайт через Google, то ви навіть не повинні його створювати. Microsoft має велике розширення для IIS з ім'ям Інструментарій для пошукової оптимізації IIS які можна використовувати для ідентифікації проблеми з веб-сайтом, що може зашкодити його рейтингу сторінки. Ви також можете скористатися цим інструментом для швидкого створення мапи сайту для свого веб-сайту, яку можна надіслати до Google або Bing. Ви навіть можете створити карту сайту для веб-сайту ASP.NET MVC.

Ось як виглядає огляд звіту для веб-сайту Superexpert.com:

com:

Зверніть увагу, що на сайті Sueprexpert.com було багато порушень. Наприклад, існує 65 випадків, коли сторінка має розірване гіперпосилання. Ви можете розібратися в цих порушеннях, щоб ідентифікувати точну сторінку та місце, де відбуваються ці порушення.

9. LinqPad

Якщо ваш веб-сайт ASP.NET звертається до бази даних, то ви повинні використовувати LINQ до юридичних осіб з Entity Framework. Використання LINQ передбачає деяку магію. Запити LINQ, написані на C #, перетворюються на SQL-запити. Якщо ви не пильнуєте про те, як ви пишете запити LINQ, ви могли б ненавмисно створити дійсно поганий сайт.

LinqPad є безкоштовним
інструмент, який дозволяє експериментувати з вашими запитами LINQ. Він навіть працює з Microsoft SQL CE 4 і Azure.

Ви можете використовувати LinqPad для виконання запиту LINQ to Entities і побачити результати. Ви також можете використовувати його, щоб побачити результуючий SQL, який виконується з базою даних:

10. NET Reflector

Я використовую .NET Reflector щодня. Інструмент .NET Reflector дозволяє виконувати будь-які збірки та розбирати збірки в код C # або VB.NET. Ви можете використовувати .NET Reflector, щоб побачити «Вихідний код» збірки, навіть якщо у вас немає фактичного вихідного коду. Ви можете завантажити безкоштовну версію .NET Reflector з Сайт Redgate .

Я використовую. NET Reflector в першу чергу, щоб допомогти мені зрозуміти, що код робить всередині. Наприклад, я використав .NET Reflector з Sprite і Image Optimization Framework, щоб краще зрозуміти, як працює помічник MVC Image. Ось частина розібраного коду з класу помічник Image:

Ось частина розібраного коду з класу помічник Image:

У цьому записі в блозі, я обговорив кілька інструментів, які я використовував для створення веб-сайту Superexpert.com. Це інструменти, які я використовую для поліпшення продуктивності, поліпшення SEO, перевірки часу роботи або налагодження веб-сайту Superexpert.com. Всі інструменти, обговорювані в цьому блозі, є безкоштовними. Крім того, всі ці інструменти працюють як з веб-формами ASP.NET, так і з ASP.NET MVC.

Дайте мені знати, якщо є які-небудь інструменти, які ви використовуєте щодня при створенні веб-сайтів ASP.NET.