Archiwum

Archive for the ‘HTML5’ Category

Męczymy TypeScript–Wstęp

Listopad 25, 2014 Dodaj komentarz

Od kilku miesięcy komercyjnie w swoich projektach wykorzystuje to co Microsoft dumnie nazywa warstwą abstrakcji nad JavaScript. Ta warstwa abstrakcji (TypeScript) to open-source’owy projekt, który ma Nam pomóc w pisaniu trudnego w zarządzaniu i rozumieniu JavaScripta.

Pierwsze dni spędziłem rozmyślając po co używać czegoś “nad” JavaScript skoro sam JS w sobie jest trudny do zrozumienia i nauczenia. Wielu programistów ma z nim problem, nawet pracując już jakiś czas w projektach gdzie jest wykorzystywany.

 

Prawda zawsze jest gdzieś po środku i to gdzie ja widzę szansę dla TypeScript to projekty gdzie mamy programistów programujących w językach obiektowych (jak: C#) i dobrze się odnajdujących w tych realiach. A konkrety niżej:

Jaki jest główny benefit? Silne typowanie, klasy, interfejsy, polimorfizm, listy generyczne… mógłbym wymieniać i wymieniać. To wszystko brzmi podobnie do języka z stajni .NET niż JS.

Pytanie co w tym wszystkim robi Microsoft i czemu daje nam technologię, która w ogóle dotyczy języka, którego nie kontrolują. Moja odpowiedź jest dość prosta… Microsoft w momencie anulowania Silverlight skazał się na HTML5 + JS. To skazanie już powoli widać w produktach jakie wypuszcza – nowy portal Azure, Office w przeglądarce, poczta Hotmail czy choćby możliwość pisania aplikacji dla Windows 8 właśnie w tej technologii.
Uczestnicząc w wielu rozmowach wewnątrz Microsoftu czuję, że otworzyły się oczy wielu ludziom i produkt jak ten to była jedynie kwestia czasu. JS jest trudny…w zarządzaniu, trudny z punktu widzenia zasobów ludzkich – to co dostajemy tutaj to pewne uproszczenie.

Kolejne pytanie to to czy w ogóle potrzebujemy TypeScript? Odpowiedź nie jest prosta. Jeżeli rozumiemy JS i mamy zespół, który sobie doskonale z nim radzi to NIE. Jednakże to mały odsetek przypadków. Jeżeli mamy zespół, który dobrze rozumie obiektowe języki programowania – najlepiej C# – chce programować w JS mając solidne podstawy to TypeScript pozwoli im wykorzystać wiedzę, którą mają. Nie zwalnia to nikogo jednak z nauki samego JS.

Ostanie pytanie, które pewnie ma czytelnik w głowie nie znający wcześniej tej technologii… to jak to działa? Świat się nie zmienił i przeglądarki nagle nie posiadły możliwości rozumienia kolejnego języka, nie instalujemy też kolejnych plug-inów. Wszystko odbywa się poprzez kodowanie w dwóch oknach edytora. Z lewej strony piszemy kod TS, a po prawej stronie (raczej do odczytu) widzimy kod JS. Kod JS będzie linkowany do strony, a kod TS będzie pilnował byśmy nie popełniali błędów i przyśpieszał (mam nadzieje) pisanie samej aplikacji.

 

Instalacja

Na początek kilka wartościowych informacji. TypeScript instaluje się automatycznie w Visual Studio 2013 SP1 – każdy kolejny SP4 rozszerza jego funkcjonalność, ale w podstawach to jest tyle ile potrzebujemy by pracować z Visual Studio i TypeScript.

Dla osób, które mają starsze wersje Visual Studio polecam wejście na stronę internetową i doinstalowanie dodatku typescriptlang.org

 

Dodatkowo chciałbym by wszyscy doinstalowali sobie dodatek do Visual Studio o nazwie Web Essentials, który również będzie Nam potrzebny w toku tego mini-kursu.

image

Strona: http://vswebessentials.com/

 

A oto kilka przykładów obrazujących co możemy robić w TypeScript – zanim przejdziemy do szczegółów:

image

Pozostawiam Was z tym wszystkim…i do następnego!

Microsoft i Google współpracują w celu stworzenia lepszego standardu WebRTC 1.1

Wrzesień 22, 2014 Dodaj komentarz

 

WebRTC oryginalnie powstał z pomysłu firmy Google, która stworzyła specyfikację standardu do komunikacji w czasie rzeczywistym (głos, wideo, wiadomości) w przeglądarce internetowej. Kilka dni temu Microsoft i Google podpisały umowę o współpracy przy poprawianiu tego standardu tworząc ORTC, który ma być początkiem tworzenia standardu WebRTC 1.1

Co innowacyjnego obie firmy wnoszą do specyfikacji?

Programiści nie zgadzają się na to by standard ich ograniczał w stosowanych kodekach, obecnie wspierane powinny być iLBC, iSAC, G.711, G.722 oraz VP8 (Google’a). Brakuje np: H.264 i wielu innych dzisiaj stosowanych. Dodatkowo programiści nie mogą sterować, ani technologia na to dotychczas nie pozwalała zmiennością jakości transmisji.

Microsoft prawdopodobnie tym ruchem komunikuje na rynku, że zamierza wspierać w przeglądarkach Internet Explorer WebRTC i jest żywo zainteresowany technologią na tyle, że partycypuje w jej rozwoju.
Jest to o tyle ciekawe, że dotychczas ta firma była już znana z swoich rozszerzeń do tego protokołu choćby na potrzeby niedawno kupionego SKype’a i szeroko w korporacjach wdrażanego Lynca.

Wielkimi krokami zbliża się Microsoft Innovation Summit w Lublinie–to już w środę!

Listopad 11, 2013 Dodaj komentarz

Ostatni raz już zapraszam wszystkich na swój wykład w środę, który odbędzie się w Lublinie podczas konferencji Microsoft Innovation Summit.

Logo

Będę miał przyjemność opowiedzieć o technologii ASP.NET / C# / Visual Studio / CSS i HTML podczas sesji “Zaprogramuj Internet – fascynująca droga po możliwościach”

Całe wydarzenie to doborowe towarzystwo znakomitych prelegentów:

image

Jednym z głównych sponsorów wydarzenia jest moja firma CloudExpert.pl

 

Strona wydarzenia: http://www.innovationsummit.pl/

Internet Explorer 11 przestaje się przedstawiać serwerom jako Internet Explorer–IE walczy o odblokowanie dla siebie Internetu

Nie jest tajemnicą, że dużo i dużych serwisów ma specjalne tagi po stronie klienta i serwera, które sprawdzają z jaką przeglądarką mają do czynienia zanim zaczną obrabiać HTML/CSS/JS. To aspekt historyczny, który w dużej mierze zakładał, że każda przeglądarka inaczej rozumie te elementy (HTML/CSS/JS) przez co potrzeba osobnych plików – a w rzeczywistości rozdzielał użytkowników Chrome/Opery/Firefoxa i Safarii od Internet Explorera, który w teorii wszystko wspierał najgorzej, inaczej i dla niego należało pisać osobne pliki. To tyle teorii.

Wykrywanie Internet Explorera dzisiaj

Po stronie JavaScript często wygladało to tak:

var isIE = navigator.userAgent.indexOf("MSIE") > -1;

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, „Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

A po stronie kodu C# po stronie ASP.NET mogło wyglądać tak:

var isIE = Request.UserAgent.IndexOf("MSIE") > –1; 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, „Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Mniej więcej od Internet Explorer w wersji 2.0 (tak tak, wersji 2.0) Microsoft dodawał do User Agent czyli ciągu znaków jaki jest wkładany do każdego żądania do serwera MSIE.

Przykładowy ciąg znaków:

Internet Explorer 10

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)

a tu jeszcze przykład na Chrome

Chrome 25

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172

Co się zmienia?

Zmienia się kilka rzeczy, najważniejsze to to, że Microsoft usuwa z Internet Explorer kilka elementów języka JavaScript po których można było rozpoznać, że to jest Internet Explorer poza tym przestaje się przedstawiać jako MSIE.

Obecnie ciąg ten będzie wyglądał tak:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

Z ciekawszych pozycji, które zostały oznaczone do usunięcia do finalnej wersji wersji 11.0 Internet Explorer to:

  • attachEvent i detachEvent –> dzisiaj często już zapomniane przez dobrze wspierany addEventListener
  • readyState i onreadystatechange –> często wyparte na rzecz jQuery’owego document ready
  • doScroll –> specyficzne dla IE przesuwanie zawartości w oknie


Z tego co wiem to pierwsza wersja IE, która usuwa elementy.

Obiekt navigator, a wytyczne W3C i HTML5?

Zaczęło mnie zastanawiać dlaczego IE przedstawia się jako Netscape, jeszcze dodatkowo pisze, że jest kompatybilny z Gecko (silnik Firefox). Odpowiedzi na te pytania są na stronie W3C, która standaryzuje HTML5 – link tutaj.

Obiekt nagivator w połączeniu z następującymi opcjami daje nam ciekawe odpowiedzi, wszystkie na szczęście ujęte poniżej:

image

Podsumowanie

Nie wstrzymałbym afery przez to, że Microsoft zamyka pewien rozdział w historii i próbuje wszystkich do tego przekonać. Moment wydania wersji 9.0 to był ten czas kiedy mocno było widać zmianę kierunku. Dzisiaj dostajemy wersję 11, która ma już zaimplementowane wszystkie najważniejsze standardy – w tym długo oczekiwany WebGL. Może warto zacząć traktować tę przeglądarkę z większym szacunkiem? Dla osób, które nie zamierzają, zawsze można zmienić obiekt westchnień w ciągu przedstawiającym się w żądaniach z MSIE na Trident (silnik renderujący strony w Internet Explorer).

Znasz PhoneGap i masz już aplikację dla Android lub iOS–to jest konkurs, który Cię zainteresuje

Czerwiec 24, 2013 1 komentarz

Microsoft organizuje konkurs dla osób, które mają już aplikację dla Android i/lub iOS i chcą ją przeportować dla platformy Windows Phone.

Trik polega na tym, że aplikacja powinna być finalnie napisana w PhoneGap – czyli frameworku HTML, który pozwala pisać aplikacje wieloplatformowe, m.in dla Windows Phone, iOS oraz Android.

Sama idea działania wygląda mniej więcej tak:

Specjalnie nie wdaje się tutaj w szczegóły, ponieważ zamierzam w przyszłości napisać trochę więcej o samej platformie i SDK dla programistów. Dublowanie treści nie ma sensu. Dla tych co chcą się dowiedzieć już dzisiaj trochę więcej zapraszam na stronę twórców technologii http://phonegap.com/

Konkurs trwa do końca miesiąca, więc jest jeszcze parę dni. Wszystkie szczegóły znajdują się tutaj:

Mam nadzieje, że nie dla wszystkich to informacja spóźniona, że ktoś jednak zdąży napisać aplikację i wystartować w konkursie. Powodzenia!

Ile HTMLa w HTMLu czyli co wspiera Nasza przeglądarka

Wieczór, umowa z klientem na biurku, a my wciąż myślimy czy na pewno dobrze robimy pozwalając na zapis "aplikacja internetowa będzie działała w przeglądarce X, Y, Z”… w głowie dwie sprzeczne myśli: jest dobrze, damy radę i druga jest źle, przecież jest tyle różnic…

Jeżeli budując aplikacje dla siebie czyli zamówienie wewnątrz-firmowe czy na zamówienie klienta zewnętrznego zawsze należy pomyśleć nad wpisem dodającym jakie przeglądarki i najlepiej jakie wersje będziemy wspierać i przez jaki czas po oddaniu projektu. Taki zapis uchronił już niejedną firmę przed katastrofą jaka serwują dzisiaj nam firmy Google, Microsoft, Mozilla, Opera… i tak można by wymieniać dając nam silniki “lekko” niekompatybilne.

Dobrym punktem startu są strony, które informują Nas o tym ile poszczególne przeglądarki internetowe wspierają HTML4/HTML5/CSS/JS w swoich silnikach i jak to wsparcie wygląda w rzeczywistości.

Prezentuje pięć (5) serwisów do tego przeznaczonych, wybór należy do Was – liczę na informację zwrotną, którego używacie i dlaczego – albo czego zabrakło w moim spisie i dlaczego uważacie, że był warty wspomnienia.

image

image

image

image

Zapraszam do komentowania!

Kategorie:HTML5, Internet Explorer Tagi:

Zawiało HTML5 i JavaScriptem w Windows 8–kontrolki i interfejs

Grudzień 30, 2012 Dodaj komentarz

Kontrolki

Razem z frameworkiem WinJS otrzymujemy zestaw kontrolek, który jest podobny do tego, jaki otrzymują programiści XAML/C#.

image

Kontrolki definiujemy w kodzie w następujący sposób:

image

Mając możliwość dodatkowo zdefiniować opcji startowych:

<div data-win-control="WinJS.UI.DatePicker"

data-win-options="{maxYear: 2025}"></div>

Powyższa kontrolka prezentuje się następująco:

image

Kontrolka WinJS to jeden lub więcej elementów HTML, które są opakowane logiką w JavaScript oraz ostylowane za nas.

Taką kontrolkę możemy wyszukać w drzewie obiektów, m.in. wykorzystując getElementById.

Interfejs

Aplikacje, które budujemy muszą wspierać trzy różne widoki:

· Pełnoekranowy

· Zwinięty (szerokość 320px)

· Wypełniony (pozostałość miejsca na ekranie po widoku zwiniętym).

Widokiem niewymaganym jest widok portretowy. Rozkład widoków prezentuję poniżej:

image

Wchodząc do pliku default.css widzimy Media Query, które pozwalają na przełączanie się styli między poszczególnymi trybami. Możemy dla przykładu zdefiniować tę samą klasę, a o odmiennych wartościach dla poszczególnych trybów:

@media screen and (-ms-view-state: fullscreen-landscape) {

.klasa {

background-color: green;

}

}

@media screen and (-ms-view-state: filled) {

.klasa {

background-color: red;

}

}

@media screen and (-ms-view-state: snapped) {

.klasa {

background-color: yellow;

}

}

Dodatkowo budując interfejs musimy pamiętać o obsłudze wielu rozdzielczości ekranu. Uruchamiając symulator mamy do wyboru parametry od 1024px do 2560px. Budując interfejs zgodny z tak wielkim rozrzutem rozdzielczości musimy budować interfejs w oparciu o grafiki wektorowe, które w HTML są opisywane w jezyku SVG, albo wykorzystać grafiki zwykłe (jpg, png) w sposób specjalnie zaprojektowany dla Windows.

System Windows 8, klasyfikuje grafiki zwykłe w 3-ch grupach.

image

I przełącza się między nimi automatycznie w zależności od rozdzielczości ekranu użytkownika. Budując aplikację powinniśmy dostarczyć grafiki w trzech różnych formatach (rozdzielczościach) tak by dopasowały się do ekranu użytkownika w jak najlepszy sposób.

Sposób doboru właściwej grafiki jest bardzo prosty. W swoim kodzie wpisujemy, że chcielibyśmy zaprezentować użytkownikowi grafikę w następującej postaci:

<img src="/Obrazki/obrazek.jpg"/>

System jednak poszuka w katalogu obrazka o nazwie:

· obrazek.scale-100.jpg lub

· obrazek.scale-140.jpg lub

· obrazek.scale-180.jpg.

W zależności od rozdzielczości ekranu i gęstości pikseli jaką ma użytkownik na swoim urządzeniu.

Podsumowując ten mini przegląd HTML dla Windows 8

Podsumowując HTML5 i JavaScript otrzymały całkiem nowe życie wraz Windows 8. To już nie jest prosty język skryptowy, to potężna wtyczka do świata systemu operacyjnego, która pozwala budować aplikacje funkcjonalne na równi z tym, co mogą zrobić programiści C# czy Visual Basic.

Jednak powinniśmy być ostrożni w Naszych osądach i podchodzić to tej technologii z rezerwą pamiętaj o tym, że to dopiero wersja 1.0. Jak wiele języków ten też się zmieni, pod ugięciem użytkowników, którzy używają technologii, na co dzień.
Najważniejsze w tym jest to, że zyskują tutaj programiści świata internetowych aplikacji, którzy mogą teraz tworzyć aplikacje dla systemu Windows 8.