10 основных инструментов для создания сайтов ASP.NET

1. 1. Sprite и Image Optimization Framework
2. 2. Microsoft Ajax Minifier
3. 3. ySlow
4. 4. ELMAH
5. 5. Пингдом
6. 6. Host Tracker
7. 7. Проверка орфографии в HTML
8. 8. IIS SEO Toolkit
9. 9. LinqPad
10. 10. .NET Reflector

Недавно я создал простой общедоступный веб-сайт, созданный с помощью ASP.NET для моей компании по адресу Superexpert.com , Я был удивлен количеством бесплатных инструментов, которые я использовал, чтобы собрать сайт. Поэтому я подумал, что было бы интересно создать список необходимых инструментов для создания веб-сайтов ASP.NET. Эти инструменты одинаково хорошо работают как с веб-формами ASP.NET, так и с ASP.NET MVC.

После прочтения Стива Соудерса двух (очень отличных) книг о работе переднего сайта Высокопроизводительные веб-сайты а также Еще быстрее веб-сайтов Я был очень чувствителен к производительности сайта. Согласно Золотому правилу Соудерса:

« Сначала оптимизируйте производительность интерфейса, именно на это тратится 80% или более времени отклика конечного пользователя»

Вы можете использовать приведенные ниже инструменты для уменьшения размера изображений, файлов JavaScript и CSS-файлов, используемых приложением ASP.NET.

1. Sprite и Image Optimization Framework

CSS-спрайты были впервые описаны в статье, написанной для A List Apart под названием CSS-спрайты: поцелуй смерти среза изображения , Когда вы используете спрайты, вы объединяете несколько изображений, используемых веб-сайтом, в одно изображение. Затем вы используете хитрость CSS для отображения определенных субизображений из объединенного изображения на веб-странице.

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

Тем не менее, большинство людей избегают использования спрайтов, потому что они требуют много работы. Вам нужно объединить все изображения и написать правильные правила CSS для отображения подизображений. Microsoft Sprite и Image Optimization Framework позволяют вам избежать всей этой работы. Каркас объединяет изображения для вас автоматически. Кроме того, инфраструктура включает элемент управления ASP.NET Web Forms и помощник ASP.NET MVC, который позволяет легко отображать подизображения. Вы можете загрузить Sprite и Image Optimization Framework из CodePlex по адресу http://aspnet.codeplex.com/releases/view/50869 ,

Инфраструктура Sprite и Image Optimization была написана Морганом МакКлином, который работал в офисе рядом с моим в Microsoft. Морган был страшным умным стажером из Канады, и мы обсуждали Framework, пока он создавал его (я был очень рад узнать, что он работает над этим).

Морган добавил в эту платформу несколько замечательных расширенных функций. Например, платформа Sprite и Image Optimization поддерживают так называемое встраивание изображений . Когда вы используете вставку изображения, фактическое изображение сохраняется в файле CSS. Вот пример того, как выглядит вставка изображения:

.Home_StephenWalther_small-JPG

{

ширина: 75px;

высота: 100px;

фон: URL (данные: изображение / png; base64, iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAIAAABB1lpeAAAAB

GdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjA8AAP1SAACBQAAAfXkAAOmLAAA85QAAGcxzPIV3AAAKL

s + zNfREAAAAASUVORK5CYII =) без повтора 0% 0%;

}

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

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

К сожалению, существуют некоторые важные ошибки, о которых вам необходимо знать при использовании Sprite и Image Optimization Framework. Есть обходные пути для этих Gotchas. Я планирую написать об этих Gotchas и обходных путях в будущей записи в блоге.

2. Microsoft Ajax Minifier

По возможности вы должны объединять, минимизировать, сжимать и кэшировать с заголовком далекого будущего все ваши файлы JavaScript и CSS. Microsoft Ajax Minifier позволяет легко минимизировать файлы JavaScript и CSS.

Не путайте минификацию и сжатие. Вы должны сделать оба. Согласно Соудерсу, вы можете уменьшить размер файла 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

инструмент ySlow это бесплатное дополнение для 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 в «Желтом экране» (даже если сообщение об ошибке никогда не отображалось фактическому пользователю).

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

5. Пингдом

Я использую Pingdom, чтобы убедиться, что веб-сайт Superexpert.com всегда работает. Вы можете подписаться на Pingdom, посетив Pingdom.com , Вы можете использовать Pingdom для мониторинга одного сайта бесплатно.

На веб-сайте Pingdom вы настраиваете частоту, с которой ваш веб-сайт проверяется. Я проверяю, что веб-сайт Superexpert.com работает каждые 5 минут. У меня есть служба Pingdom, которая проверяет, может ли она получить строку «Свяжитесь с нами» с домашней страницы сайта.

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

6. Host Tracker

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

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

Обратите внимание, что Host-Tracker пропинговал веб-сайт Superexpert.com из 68 мест, включая Рубе, Франция и Скрантон, Пенсильвания.

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

7. Проверка орфографии в HTML

Почему Visual Studio не имеет встроенной проверки орфографии? Не знаю - я всегда находил это загадочным. К счастью, однако, бывший член команды ASP.NET написал бесплатную проверку орфографии, которую вы можете использовать со своими страницами ASP.NET.

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

Самый быстрый способ добавить расширение проверки правописания HTML в Visual Studio - это выбрать пункт меню «Инструменты», «Extension Manager» в Visual Studio. Нажмите на онлайн-галерею и найдите HTML Spell Checker:

8. IIS SEO Toolkit

Если люди не могут найти ваш сайт через Google, вам даже не стоит создавать его. У Microsoft есть отличное расширение для IIS, названное Инструментарий поисковой оптимизации IIS что вы можете использовать для выявления проблем с вашим сайтом, которые повредили бы его рейтинг страницы. Вы также можете использовать этот инструмент для быстрого создания карты сайта для своего веб-сайта, которую вы можете отправить в Google или Bing. Вы даже можете создать карту сайта для веб-сайта ASP.NET MVC.

Вот как выглядит обзор отчета для веб-сайта Superexpert.com:

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

9. LinqPad

Если ваш веб-сайт ASP.NET обращается к базе данных, вы должны использовать LINQ to Entities с 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:

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

Дайте мне знать, если есть какие-либо инструменты, которые вы используете ежедневно при создании сайтов ASP.NET.