10 niezbędnych narzędzi do tworzenia stron internetowych ASP.NET

  1. 1. Sprite i Image Optimization Framework
  2. 2. Microsoft Ajax Minifier
  3. 3. ySlow
  4. 4. ELMAH
  5. 5. Pingdom
  6. 6. Host Tracker
  7. 7. Sprawdzanie pisowni HTML
  8. 8. IIS SEO Toolkit
  9. 9. LinqPad
  10. 10. Reflektor .NET

Niedawno stworzyłem dla mojej firmy prostą publiczną stronę internetową utworzoną przy użyciu ASP.NET Superexpert.com . Byłem zaskoczony liczbą darmowych narzędzi, które wykorzystałem do stworzenia strony internetowej. Dlatego pomyślałem, że interesujące będzie stworzenie listy podstawowych narzędzi do tworzenia stron ASP.NET. Narzędzia te działają równie dobrze z ASP.NET Web Forms i ASP.NET MVC.

Po przeczytaniu Steve'a Soudersa dwie (bardzo doskonałe) książki na temat wydajności strony internetowej Witryny internetowe o wysokiej wydajności i Nawet szybsze witryny internetowe , Byłem bardzo wrażliwy na wydajność strony internetowej. Według Złotej zasady Souders Performance:

Najpierw zoptymalizuj wydajność frontonu, czyli 80% lub więcej czasu reakcji użytkownika końcowego”

Możesz użyć poniższych narzędzi, aby zmniejszyć rozmiar obrazów, plików JavaScript i plików CSS używanych przez aplikację ASP.NET.

1. Sprite i Image Optimization Framework

Duszki CSS zostały po raz pierwszy opisane w artykule napisanym dla A List Apart Sprite'y CSS: Pocałunek śmierci obrazowania . Gdy używasz sprite'ów, łączysz wiele obrazów używanych przez witrynę w jeden obraz. Następnie używasz sztuczek CSS do wyświetlania poszczególnych podobrazów z połączonego obrazu na stronie internetowej.

Podstawową zaletą ikon jest to, że zmniejszają liczbę żądań wymaganych do wyświetlenia strony internetowej. Żądanie pojedynczego dużego obrazu jest szybsze niż żądanie wielu małych obrazów. Ogólnie rzecz biorąc, im więcej zasobów - obrazów, plików JavaScript, plików CSS - które muszą zostać przeniesione przez przewód, tym wolniejsza jest strona.

Jednak większość ludzi unika używania sprite'ów, ponieważ wymagają one dużo pracy. Musisz połączyć wszystkie obrazy i napisać odpowiednie reguły CSS, aby wyświetlić podobrazy. Microsoft Sprite i Image Optimization Framework pozwala uniknąć tej pracy. Ramy automatycznie łączą obrazy. Ponadto struktura zawiera formant ASP.NET Web Forms i pomocnika ASP.NET MVC, który ułatwia wyświetlanie podobrazów. Możesz pobrać Sprite and Image Optimization Framework z CodePlex at http://aspnet.codeplex.com/releases/view/50869 .

Program Sprite and Image Optimization Framework został napisany przez Morgana McCleana, który pracował w biurze obok kopalni w Microsoft. Morgan był przerażającym inteligentnym stażystą z Kanady i rozmawialiśmy o Ramach podczas jego budowania (byłem bardzo podekscytowany, gdy dowiedziałem się, że nad tym pracuje).

Morgan dodał kilka wspaniałych zaawansowanych funkcji do tego środowiska. Na przykład Sprite i Image Optimization Framework obsługuje coś, co nazywa się wstawianiem obrazu . Gdy używasz wstawiania obrazu, rzeczywisty obraz jest zapisywany w pliku CSS. Oto przykład, jak wygląda wstawianie obrazów:

.Home_StephenWalther_small-jpg

{

szerokość: 75px;

wysokość: 100px;

background: url (data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAIAAABB1lpeAAAAB

GdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjA8AAP1SAACBQAAAfXkAAOmLAAA85QAAGcxzPIV3AAAKL

s + zNfREAAAAASUVORK5CYII =) no-repeat 0% 0%;

}

Rzeczywisty obraz (w tym przypadku zdjęcie, które jest wyświetlane na stronie głównej witryny Superexpert.com) jest przechowywane w pliku CSS.

Jeśli odwiedzasz stronę Superexpert.com, pobieranych jest bardzo niewiele oddzielnych obrazów. Na przykład wszystkie obrazy z czerwoną ramką na poniższym zrzucie ekranu korzystają z ikonek CSS:

Niestety, istnieje kilka znaczących Gotchów, o których musisz wiedzieć, gdy używasz Sprite i Image Optimization Framework. Istnieją obejścia dla tych Gotchów. Zamierzam napisać o tych Gotchach i obejściach w przyszłym wpisie na blogu.

2. Microsoft Ajax Minifier

Kiedy tylko jest to możliwe, powinieneś łączyć, minimalizować, kompresować i buforować z dalszym nagłówkiem wszystkich plików JavaScript i CSS. Microsoft Ajax Minifier ułatwia zminimalizowanie plików JavaScript i CSS.

Nie mylić minifikacji i kompresji. Musisz zrobić obie rzeczy. Według Soudersa można zmniejszyć rozmiar pliku JavaScript o dodatkowe 20% (średnio), minimalizując plik JavaScript po skompresowaniu pliku.

Po zminimalizowaniu pliku JavaScript lub CSS używasz różnych sztuczek, aby zmniejszyć rozmiar pliku przed skompresowaniem pliku. Na przykład możesz zminimalizować plik JavaScript, zastępując długie nazwy zmiennych JavaScript krótkimi nazwami zmiennych i usuwając niepotrzebne białe znaki i komentarze. Możesz zminimalizować plik CSS, wykonując takie czynności, jak zastąpienie długich nazw kolorów, takich jak #ffffff, krótszymi odpowiednikami, takimi jak #fff.

Microsoft Ajax Minifier został stworzony przez pracownika Microsoftu, Rona Logana. Wewnętrznie to narzędzie było używane przez kilka dużych witryn firmy Microsoft. Korzystaliśmy również z tego narzędzia w zespole ASP.NET. Przekonałem Rona, aby opublikował narzędzie w CodePlex, aby wszyscy na świecie mogli z niego skorzystać. Możesz pobrać narzędzie z ASP.NET Ajax strona internetowa i przeczytaj dokumentację narzędzia tutaj .

Stworzyłem instalator dla Microsoft Ajax Minifier. Podczas tworzenia instalatora stworzyłem również zadanie budowania Visual Studio, aby ułatwić zminimalizowanie wszystkich plików JavaScript i CSS za każdym razem, gdy tworzysz kompilację w Visual Studio automatycznie. Przeczytać Ajax Minifier Quick Start aby dowiedzieć się, jak skonfigurować zadanie kompilacji.

3. ySlow

The Narzędzie ySlow to darmowy dodatek do Firefoksa stworzony przez Yahoo, który umożliwia testowanie frontonu witryny. Oto na przykład aktualne wyniki testów na stronie Superexpert.com:

Strona Superexpert.com ma ogólny wynik B (nie doskonały, ale nie zły). Narzędzie ySlow nie jest idealne. Na przykład witryna Superexpert.com otrzymała ocenę F za niepowodzenie, ponieważ nie korzystała z sieci dostarczania treści, nawet jeśli witryna korzystała z Microsoft Ajax Content Delivery Network dla plików JavaScript, takich jak jQuery.

Po opublikowaniu strony internetowej na świecie, chcesz mieć pewność, że witryna nie napotka żadnych problemów i że pozostanie na żywo. Używam następujących narzędzi do monitorowania witryny Superexpert.com teraz, gdy jest na żywo.

4. ELMAH

ELMAH to skrót od Error Logging Modules and Handlers dla ASP.NET . ELMAH umożliwia rejestrowanie błędów, które zdarzają się na Twojej stronie, abyś mógł je przeglądać w przyszłości. Możesz pobrać ELMAH za darmo z Strona internetowa projektu ELMAH .

ELMAH świetnie współpracuje zarówno z ASP.NET Web Forms, jak i ASP.NET MVC. Możesz skonfigurować ELMAH do przechowywania błędów w wielu różnych sklepach, w tym w plikach XML, dzienniku zdarzeń, bazie danych Access, bazie danych SQL, bazie danych Oracle lub w pamięci RAM komputera. Możesz także skonfigurować ELMAH, aby wysyłała do Ciebie komunikaty o błędach, gdy się pojawią.

Domyślnie możesz uzyskać dostęp do ELMAH, prosząc o stronę elmah.axd ze strony internetowej z zainstalowanym ELMAH. Oto jak wygląda strona elmah ze strony Superexpert.com (ta strona jest chroniona hasłem, ponieważ tajne informacje mogą zostać ujawnione w komunikacie o błędzie):

Po kliknięciu określonego komunikatu o błędzie można wyświetlić oryginalny komunikat o błędzie Yellow Screen ASP.NET (nawet jeśli komunikat o błędzie nigdy nie był wyświetlany rzeczywistemu użytkownikowi).

Zainstalowałem ELMAH, korzystając z nowego menedżera pakietów dla ASP.NET o nazwie NuGet (pierwotnie o nazwie NuPack). Poniżej możesz przeczytać szczegóły dotyczące NuGet wpis na blogu autor: Scott Guthrie. Możesz pobierz NuGet z CodePlex.

5. Pingdom

Używam Pingdom, aby sprawdzić, czy witryna Superexpert.com jest zawsze dostępna. Możesz zarejestrować się w Pingdom, odwiedzając stronę Pingdom.com . Możesz użyć Pingdom do monitorowania jednej strony za darmo.

Na stronie Pingdom konfigurujesz częstotliwość wysyłania pingów przez Twoją witrynę. Sprawdzam, czy witryna Superexpert.com działa co 5 minut. Mam usługę Pingdom, aby sprawdzić, czy może pobrać ciąg „Skontaktuj się z nami” ze strony głównej witryny.

Mam usługę Pingdom, aby sprawdzić, czy może pobrać ciąg „Skontaktuj się z nami” ze strony głównej witryny

Jeśli Twoja witryna ulegnie awarii, możesz skonfigurować Pingdom, aby wysyłał e-mail, alert na Twitterze, SMS lub iPhone. Używam aplikacji Pingdom na iPhone'a, która wygląda tak:

Używam aplikacji Pingdom na iPhone'a, która wygląda tak:

6. Host Tracker

Jeśli Twoja strona internetowa nie działa, musisz określić, czy jest to problem z Twoją siecią lokalną, czy też Twoja strona jest niedostępna dla wszystkich. Korzystam ze strony o nazwie Host-Tracker.com, aby sprawdzić, jak źle działa witryna.

Oto, co wyświetla strona Host-Tracker dla witryny Superexpert.com, gdy witryna może zostać pomyślnie wysłana z dowolnego miejsca na świecie:

com, gdy witryna może zostać pomyślnie wysłana z dowolnego miejsca na świecie:

Zauważ, że Host-Tracker pingował stronę Superexpert.com z 68 lokalizacji, w tym Roubaix, Francja i Scranton, PA.

Mam na myśli debugowanie w najszerszym możliwym znaczeniu. Podczas tworzenia witryny używam następujących narzędzi, aby sprawdzić, czy nie popełniłem błędu.

7. Sprawdzanie pisowni HTML

Dlaczego Visual Studio nie ma wbudowanego modułu sprawdzania pisowni? Nie wiem - zawsze uważałem to za tajemnicze. Na szczęście jednak były członek zespołu ASP.NET napisał darmowy moduł sprawdzania pisowni, którego można używać ze stronami ASP.NET.

Nieodzowne jest sprawdzanie pisowni. Łatwo się oszukiwać, że jesteś zdolny do doskonałej pisowni. Zawsze jestem bardzo zawstydzony, gdy uruchamiam narzędzie do sprawdzania pisowni i odkrywam wszystkie błędy ortograficzne.

Najszybszym sposobem dodania rozszerzenia sprawdzania pisowni HTML do programu Visual Studio jest wybranie opcji menu Narzędzia, Menedżera rozszerzeń w programie Visual Studio. Kliknij Galeria online i wyszukaj Sprawdzanie pisowni HTML:

8. IIS SEO Toolkit

Jeśli ludzie nie mogą znaleźć Twojej witryny za pośrednictwem Google, nie powinieneś nawet zadawać sobie trudu, aby ją utworzyć. Microsoft ma świetne rozszerzenie dla IIS o nazwie IIS Search Engine Optimization Toolkit których możesz użyć, aby zidentyfikować problem ze swoją stroną internetową, który zraniłby jej pozycję na stronie. Możesz także użyć tego narzędzia, aby szybko utworzyć mapę witryny dla swojej witryny, którą możesz przesłać do Google lub Bing. Możesz nawet wygenerować mapę witryny dla strony ASP.NET MVC.

Oto jak wygląda przegląd raportów dla witryny Superexpert.com:

com:

Zauważ, że strona Sueprexpert.com miała wiele naruszeń. Na przykład istnieje 65 przypadków, w których strona ma uszkodzone hiperłącze. Możesz pogłębić te naruszenia, aby zidentyfikować dokładną stronę i lokalizację, w której występują te naruszenia.

9. LinqPad

Jeśli Twoja witryna ASP.NET uzyskuje dostęp do bazy danych, powinieneś używać LINQ do Entities z Entity Framework. Korzystanie z LINQ wymaga trochę magii. Zapytania LINQ napisane w języku C # są konwertowane na zapytania SQL. Jeśli nie zwracasz uwagi na to, jak piszesz swoje zapytania LINQ, możesz niechcący zbudować naprawdę źle działającą stronę.

LinqPad jest darmowy
narzędzie, które umożliwia eksperymentowanie z zapytaniami LINQ. Współpracuje nawet z Microsoft SQL CE 4 i Azure.

Możesz użyć LinqPad, aby wykonać zapytanie LINQ to Entities i zobaczyć wyniki. Możesz również użyć go, aby zobaczyć wynikowy SQL, który zostanie wykonany na bazie danych:

10. Reflektor .NET

Używam .NET Reflector codziennie. Narzędzie .NET Reflector umożliwia wykonanie dowolnego montażu i demontaż złożenia w kod C # lub VB.NET. Możesz użyć .NET Reflector, aby zobaczyć „Kod źródłowy” zespołu, nawet jeśli nie masz rzeczywistego kodu źródłowego. Możesz pobrać bezpłatną wersję .NET Reflector z Strona internetowa Redgate .

Używam .NET Reflector przede wszystkim, aby pomóc mi zrozumieć, co kod działa wewnętrznie. Na przykład użyłem .NET Reflector z Sprite i Image Optimization Framework, aby lepiej zrozumieć, jak działa pomocnik MVC Image. Oto część zdemontowanego kodu z klasy Image helper:

Oto część zdemontowanego kodu z klasy Image helper:

W tym wpisie na blogu omówiłem kilka narzędzi, których użyłem do stworzenia witryny Superexpert.com. Są to narzędzia, których używam, aby poprawić wydajność, poprawić SEO, zweryfikować czas działania lub debugować stronę Superexpert.com. Wszystkie narzędzia omówione w tym wpisie na blogu są bezpłatne. Ponadto wszystkie te narzędzia współpracują zarówno z ASP.NET Web Forms, jak i ASP.NET MVC.

Daj mi znać, jeśli są jakieś narzędzia, których używasz codziennie podczas tworzenia stron ASP.NET.