Archiwum

Archive for Listopad 2012

Internet Explorer–śmiała reklama

Listopad 30, 2012 Dodaj komentarz

Ostatnio Microsoft coraz ciekawiej podchodzi do swojego wizerunku i nie boi się trudnych, nie poprawnych politycznie reklam.

To ostatnie dzieło bardzo szeroko komentowane przez blogerów i całą rzeszę internautów:

Internet Explorer–Do you know this guy?

Wideo prezentuje coraz popularniejszą postawę “Nie wiem, ale się wypowiem”, ale też nie umniejsza roli temu, że Microsoft jako firma trochę przespał marketing, poprawki, standardy w przeszłości zmieniając się jednak mocno teraz.

Polecam wszystkim na chwile zobaczyć przykłady wsparcia HTML5 i CSS3.
Link do przykładów.

HTML5 Application Cache–naprawiamy błędy

Listopad 23, 2012 Dodaj komentarz

W poprzednim artykule pisałem o tym jak wdrożyć na swojej stronie internetowej Application Cache dostępny w HTML5.
Wdrożenie to jednak nie wszystko, okazuje się że często dochodzi do problemów, są one spowodowane dwoma rzeczami:

  • błędami ludzkimi
  • błędami w obsłudze standardu w różnych przeglądarkach

 

Plik manifest – za dużo plików

Otrzymuje od programisty następujący plik appcache.manifest

image

i zastanawia co najmniej kilka kwestii:

  • nie ma indeksu wersji w pliku, np: #v1
  • powinniśmy jako dobra praktyka dodać sekcję CACHE: , bo standard HTML5 jest dość chwiejny i może im się zmienić coś w dokumentach i nagle inny nagłówek będzie domyślny (mamy jeszcze 2 inne dostępne).
  • Kilka wersji jQuery, zwykłego oraz UI – powinna być jedna wykorzystywana w aplikacji.
  • linkowane są biblioteki w wersji pełnej i minimalistycznej.
  • linkowane są pliki, które służą do budowania IntelliSense w Visual Studio.

To wszystko pobiera nieświadomy użytkownik, bo kazaliśmy to zrobić jego przeglądarce internetowej.

AppCache – błędy i brak działania

Mimo tego, że każemy ściągać wiele plików, których może nie wykorzystujemy to nie jest największy problem. Okazuje się, że technologia jest nieodporna na błędy i jak tylko, któryś z zasobów zdefiniowanych w pliku manifest nie będzie istniał cache’owanie przestanie działać.
Nie przedając faktów popatrzmy na załadowaną stronę w Internet Explorer (z narzędziami dla programistów –> uruchamiamy przez F12)

image

Otrzymujemy informację, że coś poszło nie tak, ale nie wiemy co.

Uruchamiamy Chrome również z narzędziami dla programistów:

image

Bingo! Wiemy co się stało… nie działa cache’owanie ponieważ brakuje pliku na serwerze, który był wpisany w manifest. Kto by pomyślał, że drobny błąd wyłączy wszystko.

Jak to wygląda po poprawkach

W Chrome możemy podglądać jak wygląda lokalny Application Cache

image

 

Podsumowanie

Analizujmy strony wynikowe, analizujmy pracę Naszych pracowników, uczmy się!

HTML5 Application Cache–umieszczamy pliki po stronie przeglądarki internetowej

Listopad 23, 2012 Dodaj komentarz

To fakt, strony internetowe ważą dzisiaj nie mało, nie chce wchodzić w dyskusję czy to dobrze czy źle, bo pewnie skończylibyśmy na tym, że “źle, ale to zależy od…”.

Smutek ogarnia człowieka jak sobie myśli, że za każdym wejściem na stronę muszę ściągać dużo danych (i tym samym serwować je użytkownikom).

image

Jest na to jednak rozwiązanie – jeżeli jesteśmy pewni że duża część tego co użytkownik ściąga przechodząc od ekranu do ekranu to te same elementy, możemy poprosić jego przeglądarkę Internetową o to by zachowała u siebie lokalnie część naszej strony, w tym obrazki i skrypty.

HTML5 przychodzi nam z pomocą

HTML5 wprowadza do przeglądarek internetowych obsługę przechowywania pików po stronie klienta do obsługi trybu offline aplikacji, ale też do tego by nie było potrzeby ściągania plików wchodząc na stronę raz następny.

Dotychczas wiele przeglądarek internetowych (w jakiś mniej lub bardziej rozgarnięty sposób) realizowało ten pomysł, ale to co dostajemy teraz w ramach ApplicationCache Interface to mechanizm ustandaryzowany, opisany i miejmy nadzieje zaimplementowany w każdej przeglądarce tak samo.

Po co się interesować tematem?

  • Tryb offline – możemy przechowywać całą stronę po stronie klienta, bez potrzeby posiadania dostępu do Internetu
  • Prędkość – nie musimy wczytywać z Internetu plików, które już raz ściągnęliśmy. Oszczędzamy transfer i przy okazji strony działają szybciej
  • Wydajność – zmniejszamy obciążenie serwera i łącza internetowego przy serwerze

 

Tworzymy plik manifestu

W naszym wypadku plik, zawierający informacje dla przeglądarki internetowej będzie w głównym folderze aplikacji. Tworzymy zwykły plik tekstowy z zawartością mówiącą, które pliki warto pamiętać

CACHE MANIFEST

#v1

http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1-vsdoc.js
http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1.js
http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1.min.js

zapisujemy plik jako appcache.manifest i dodajemy do strony internetowej

image

Wyjaśniamy manifest

Plik manifest składa się z:

  • nagłówka CACHE MANIFEST
  • wersji pliku, to ważne bo dzięki temu będziemy mogli mówić przeglądarkom że coś się zmieniło i ma od nowa pobrać elementy – tu: #v1
  • linki do zasobów

Plik manifest może być bardziej skomplikowany, możemy zrobić coś takiego:

CACHE MANIFEST

#v1

CACHE:
http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1-vsdoc.js

NETWORK:
http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1.js

FALLBACK:
http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1.min.js

w tym:

  • CACHE – jak w pliku manifest nie napiszemy nic (nie damy sekcji) to właśnie standardowo przeglądarka wpisuje wszystkie zasoby do sekcji CACHE. Sekcja oznacza, że elementy będą zachowane na dysku i ładowane z dysku za każdym następnym użyciem
  • NETWORK– to zasoby bezpośrednio wymagające Internetu.
  • FALLBACK– to miejsce gdzie możemy wskazać co ma się załadować w razie braku możliwości załadowania oryginalnego elementu, np: /twarz.jpg /offline.jpg (jak nie da się załadować twarz.jpg załaduje się offline.jpg).

 

Cieszymy się od teraz cache.

Publikacja aplikacji w Windows Store

Listopad 23, 2012 Dodaj komentarz

Tworząc artykuł poczyniłem dwa założenia:

  • mamy aktywne konto w Windows Store
  • mamy gotową aplikację, którą chcemy włożyć do sklepu

 

Tworzymy paczki

Odpalamy Visual Studio z Naszym projektem i klikamy prawym przyciskiem myszy na projekcie wybierając
Store->Create App Packages

sotre1

Logujemy się do sklepu WIndows Store (bardzo ważne, musimy się zalogować kontem, które ma uprawnienia do sklepu Window Store, w tym do modyfikacji aplikacji)

sotre2

Visual Studio prezentuje nam listę aplikacji dodanych poprzez stronę internetową usługi. Jeżeli nie ma Naszej aplikacji możemy ją dodać klikając Reserve Name.

store4

Bardzo ważne okno, w którym wybieramy platformy jakie będziemy chcieli obsługiwać oraz wersję aplikacji widoczną dla osób przeglądających sklep

store5

Po chwili paczki są już gotowe do wysłania do sklepu

store6

Wystarczy pójśc do odpowiedniego folderu i je skopiować przez stronę do weryfikacji.

store7

Weryfikujemy program

Visual Studio ma w sobie zaszyte proste testy aplikacji, które potrafią znaleźć podstawowe błędy. Polecam sprawdzić swój program przed wysyłką.

Testy uruchamiają się po wybraniu w oknie z podsumowaniem tworzenia paczek przycisku Launch Windows App Certification Kit

store9

Po około 10 minutach wiemy, czy jest sens wysyłać aplikacje do sklepu

store10

Dodajemy do sklepu

Wchodzimy na portal dla programistów Windows 8 i dodajemy wszystkie informacje o naszej aplikacji oraz paczki wygenerowane przez Visual Studio.

store3

Pozostaje już tylko czekać. Powodzenia!

Content/Type w Azure Storage–uważaj!

Listopad 23, 2012 1 komentarz

Używam bardzo popularnego narzędzia Azure Storage Explorer, który pozwala w prosty sposób sterować rzeczami jakie mamy w Azure Storage.

Od pewnego czasu całą zawartość statyczną stron PlaceChallenge wynoszę z hostowania pod serwerem aplikacyjnym (IIS/Apache) do magazynu danych Storage, który oferuje chmura Azure. Jest to bardzo wygodna opcja, ponieważ prócz znacznego poprawienie wydajności samej aplikacji (serwera aplikacyjnego) zdejmując z niego obowiązek hostowania plików i utrzymywania połączeń z przeglądarkami mam replikowany geolokalizacyjnie magazyn plików.

Niestety aplikacja Azure Storage Explorer często nie pilnuje typów plików jakie uploadujemy, co widać na załączonym obrazku:

image

część plików ma Content-Type application/octet-stream a część prawidłowy czyli application/javascript.

Nic by się nie stało, bo przecież przeglądarki chociaż widzą, że dostały coś dziwnego to jakoś to wszystko pokazują (poniżej narzędzia programistyczne Internet Explorer 10):

image

to jednak część przeglądarek mobilnych już nie jest tak tolerancyjna.

Pilnujcie się wrzucając pliki na Storage, i poprawcie wszystko co już tam macie.

image

Idziesz na szkolenie z Windows 8 & Azure?–checklista dla Ciebie

Listopad 13, 2012 4 komentarze

Ostatnio jest gorący okres jak chodzi o sprawy związane z Windows 8. Firma Microsoft oraz ośrodki szkoleniowe organizują bardzo dużo wydarzeń, w tym też szkoleń, na których każdy z Nas może nauczyć się programowania.

Jako jeden z trenerów takich szkoleń postanowiłem stworzyć checklistę dla osób, które wybierają się na szkolenie gdzie trzeba mieć własnego laptopa.

Zakres szkolenia

Szkolenia obecnie są zbudowane z dwóch bloków tematycznych:

  • Windows 8 – od podstaw interfejsu do programowania
  • Windows Azure – w kontekście połączenia aplikacji w chmurze i aplikacji Windows 8
Instalujemy niezbędne narzędzia

Podstawowym narzędziem w jakim będziemy programować to Visual Studio 2012. Jeżeli mamy firmę lub zamierzamy ją mieć polecam zarejestrować się za darmo w programie BizSpark gdzie owo oprogramowanie w wersji najwyższej będzie dostępne za darmo:

  • Rejestracja w BizSpark – tutaj
  • Aktywacja oprogramowania dla siebie – tutaj
  • Aktywacja oprogramowania dla pracowników – tutaj

Jeżeli nie zamierzamy rejestrować się w BizSpark jest darmowa wersja Express do ściągnięcia tutaj.

Kolejnym krokiem jest instalacja SQL 2012 Express Edition, które znajdziemy tutaj .

Kolejnym krokiem jest instalacja Web Platform Installera, który znajdziemy tutaj.
Po uruchomieniu tego narzędzia musimy doinstalować elementy związane z Windows Azure:

clip_image002

w naszym przypadku należy zainstalować:

  • Windows Azure SDK 1.8
  • Windows Azure Libraries for .NET 1.8
  • Windows Azure SDK
Testujemy czy działa

Uruchamiamy Visual Studio 2012 i tworzymy nowy projekt Windows Store:

image

i wciskamy F5 – otrzymamy komunikat

image

Potwierdzamy i logujemy się podając dane do konta LiveId. Od teraz możemy pisać aplikacje na Windows 8.

Tworzymy kolejny projekt, tym razem związany z platformą chmury Windows Azure:

image

W kolejnym oknie dodajemy dwie role (nie jest to wymóg)

image

i po zaakceptowaniu wybieramy F5 – powinniśmy otrzymać komunikat, że tworzy się emulator storage:

image

po wybraniu OK uruchomi się projekt testowy.
Gdyby się okazało, że otrzymujemy komunikat podobny do tego

image

oznacza to że musimy ponownie zainstalować/naprawić SQL Server 2012 Express.

Na koniec

Jeżeli mamy konto BizSpark to mam jeszcze na koniec kilka propozycji…oczywiście jak mamy siłę, możemy:

  • otworzyć sobie dostęp do konta w sklepie Windows Store – tutaj opis.
  • otworzyć sobie dostęp do konta Windows Azure – tutaj opis.

UWAGA!!!

Firmy szkoleniowe rozdają karty prepaid, które umożliwiają zarejestrowanie się w Azure, ale nie pozwalają na rejestrację w Windows Store – uważajcie na to i jak chcecie mieć dostęp podawajcie numery waszych kart – w tej kwestii nie ma wyjścia.

Powodzenia na szkoleniu!

WebMatrix 2–edytuje i zapisuje strony www

Listopad 11, 2012 Dodaj komentarz

Przez wiele poprzednich lat uciekałem od WebMatrixa nie widząc w ogóle dla niego sensu w moim eco-systemie aplikacji developerskich. Nie wiedziałem co czego mogę go użyć i w czym może być lepszy niż moje ulubione Visual Studio.

Ostatnio jednak zaczynam zmieniać zdanie, nie zmieniłem go, ale zaczynam się na nowo bawić WebMatrixem szukając dla niego miejsca na dłużej na moim dysku.

Czy jest WebMatrix?

To program do wspomagania pisania, projektowania i wdrażania stron internetowych.

image

Możemy go zainstalować na swoim dysku albo bezpośrednio z strony internetowej Microsoftu, lub co ja robię ze względu na wygodę z Microsoft Web Platform Installera dostępnego tutaj.

image

App Gallery

Wybierając opcję App Gallery otrzymujemy dostęp do galerii projektów, w tym dużej ilości open-source, które po przystosowaniu możemy wysłać na swój serwer lub do chmury Windows Azure

image

W jednym z następnych artykułów napiszę jak wysłać jedną ze stronek do chmury Azure.

Templates

Opcja pozwala na stworzenie aplikacji w ramach prostych dostępnych (i możliwych do doinstalowania) szablonów stron.

image

Wybierając na przykład HTML

image

została stworzona za nas proteza (plik html) strony, którą możemy modyfikować. Na starcie otrzymujemy dostęp na jakim porcie jest hostowana oraz gdzie na dysku jest zapisana

image

Wybierając Files mamy dostęp do kodu strony i działający IntelliSense (jak dobrze, przekonam się wkrótce)

image

Dodatki

WebMatrix ma możliwość doinstalowywania dodatków, które mają nam ułatwić pracę.

image

Są wśród nich takie perełki jak emulator iPhone czy iPada oraz system do testowania Naszych stron na zewnętrznych serwerach, gdzie zostanie poddany testom na różnych systemach operacyjnych i przeglądarkach…brzmi to ciekawie, jak działa w praktyce, jeszcze mam nadzieję, będę miał okazję opisać.

image

image

Podsumowanie

Daje szanse WebMatrixowi, szczególnie, że Microsoft położył duży nacisk na integracje z Windows Azure o czym jeszcze napiszę, a co zaprezentuję na razie tylko w postaci prostego screena:

image