var xmlHttp = new XMLHttpRequest();
/*
 * ustawiamy uprawnienia zeby mozna bylo odwolywac sie do innej domeny,
 * lub odpalajac komunikacje z lokalnego pliku
 */
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
//wazne zeby open byl zaraz po ustawieniu uprawnien
xmlHttp.open('get,'http://dowolnadomena.com');

Firefox pyta wtedy urzytkownika o zgodę na połączenie do domeny i można było spokojnie testować aplikacje dopóki… nie pojawił się Firefox 5 .
Mozilla począwszy od Firefox-a 5 w górę wyłączyła funkcjonalność ‘enablePrivilege’. W tym momencie jedyną opcją żeby dewelopować czy testować taki scenariusz korzystając z Firefoxa 5+ mozna:
stworzyć własny plugin który dostarcza taką możliwość lub przewertować MDN i bugzille mozilli i dotrzeć do tego linku https://bugzilla.mozilla.org/attachment.cgi?id=545203
(z wątku bug-a zgłoszonego w powyższej sprawie), gdzie znajduje się Special Powers w formie pluginu dla Firefoxa.

Special Powers jest to zestaw API który normalnie jest częscią Mochitest – frameworka do testów automatycznych używanych do testowania build-ów firefox-a oraz potencjalnych zagrożeń związanych z wykorzystaniem javascriptu czyli wszędzie tam gdzie chcemy żeby nasz skrypt mógł robić to czego nie pownien . Po zainstalowaniu plugina zobaczymy że pojawi się globalny obiekt SpecialPowers. Teraz możemy zmodyfikować powyższy przykład:

//korzystamy z super mocy ^^
var xmlHttp = SpecialPowers.createSystemXHR();
xmlHttp.open('get,'http://dowolnadomena.com');

i stworzyć obiek xmlHttpRequest który posiada uprawnienia łączenia się z innymi domenami.

Warto wiedzieć że Special Powers to nie tylko komunikacja ajax kompletną liste ‘super mocy’ znajdziecie tutaj.

Do tworzenia obiektów/klas w javascripcie wykorzystujemy funkcje:

//deklarujemy funkcje jako konstruktor obiektu
function Parent (value) {
    this.value = value;
}
//tworzymy instancje obiektu
var parentInstance = new Parent();

W javascripcie każdy obiekt posiada swój prototyp oznaczony w języku jako prototype.
Prototyp definiuje zestaw metod, pól które sa tworzone podczas każdej inicjalizacji obiektu przy pomocy słowa kluczowego new tak jak w przykładzie powyżej. Rozwijając powyższy przykład dodamy funkcje getName i getGroup do naszej klasy:

//deklarujemy funkcje jako konstruktor obiektu
function Parent (value) {
    this.value = value;
}
/*
 * dodajemy do prototypu funkcje getName i getGroup,
 * bedą one dostępne w każdym zainicjalizowanym obiekcie
 */
Parent.prototype.getName = function(){
    return 'I am parent';
};
Parent.prototype.getGroup = function(){
    return 'Parent Group';
};
//tworzymy instancje obiektu
var parentInstance = new Parent();
//wywołujemy funkcje utworzonego obiektu
alert(parentInstance.getName());
alert(parentInstance.getGroup());

Mamy naszą podstawową klasę razem z dwoma metodami. Teraz chcielibyśmy zdefiniować obiekt/klasę która dziedziczy po naszym podstawowym obiekcie i przykładowo nadpisuje metodę getName aby zwrócić swoją nazwę. Tworzymy funkcje (konstruktor) obiektu Child. Ponieważ chcemy żeby każda instancja obiektu który dziedziczy posiadała wszystkie metody/pola obiektu Parent do prototypu przypisujemy nową instancje obiektu Parent oraz nadpisujemy metodę getName.

function Child() {
    //konstruktor dla obiektu Child
}
/*
 * Przypisujemy-dziedziczymy metody Parent-a używamy new Parent()
 * żeby do prototypu przypisać nową instancje (kopie) funkcji parenta,
 * w przeciwnym wypadku nadpisując metodę getName nadpisalibyśmy tez
 * metodę getName w prototypie Parenta. Dzięki temu wszystkie funkcje
 * klasy Parent (przy pomocy prototypu) będą dostępne we wszystkich
 * instancjach klasy/obiektu Child.
 */
Child.prototype = new Parent();
//nadpisujemy metode getName
Child.prototype.getName = function () {
    return 'I am Child';
};
//inicjalizujemy obiekt
var childInstance = new Child();
/*
 * Sprawdzamy-wywołujemy funkcje widzimy że Child odziedziczył metodę
 * getGroup oraz że metoda getName została nadpisana.
 */
alert(childInstance.getGroup()); //wyswietli 'Parent Group'
alert(childInstance.getName()); //wyswietli 'I am a Child'

Javascript jako język niestety w dziedziczonych obiektach nie wspiera metody super jak robią to inne języki np. Java, gdzie w funkcji którą nadpisujemy możemy wywołać nadpisywaną funkcje parenta. W javascripcie żeby to zrobić musimy wywołać funkcje prototypu w kontekście naszego obiektu:

Child.prototype.getName = function(){
/*
 * Nie ma metody 'super' wiec wywołujemy metodę z prototypu Parenta
 * w kontekście naszego obiektu poprzez użycie 'call' lub 'apply'
 */
    var superParentName = Parent.prototype.getName.call(this);
    return 'I am Child' + ' my parent said: ' + superParentName;
};
//tworzymy instancje obiektu Child
var childInstance = new Child();
/*
 * sprawdzamy funkcje getName powinna
 * wyswietlić: 'I am Child my parent said: I am Parent'
 */
alert(childInstance.getName());

Ta implementacja dziedziczenia ze względu na wykorzystanie prototypów nosi nazwę javascript prototype inheritance, można znaleźć dziesiątki przykładów podobnych to tego powyżej, w praktyce jednak warto ten przykład usprawnić o kilka elementów. Przede wszystkim warto stworzyć funkcje którą będziemy wykorzystywać do dziedziczenia obiektów, oraz poprawić przypisanie nowej instancji parent-a do prototypu naszego obiektu:

//w momencie wywolanie new Parent() obiekt Child nie posiada definicji funkcji
    Child.prototype = new Parent();

dlatego iż takie przypisanie zakłada że obiekt Parent jest klasą abstrakcyjną i jego konstruktor nie przyjmuję argumentów i nie wywołuje metod które mogą lub zależnie od implementacji powinny się pojawić nadpisane w obiekcie Child. Dużo praktyczniejsza implementacja wyglądała by tak:

/*
 * Ponieważ wszystko w javascripcie jest obiektem i posiada prototyp
 * (funkcje też) zmodyfikujemy prototyp każdej funkcji żeby stworzyć
 * metode do dziedziczenia, w tym przypadku 'this' odwołuje się do
 * naszego obiektu (zamiast Child)
 */
Function.prototype.inherit = function( parentClass, extendWith){
    //tworzymy funkcje tymczasową która wykorzystamy do
    //skopiowania prototypów
    function f(){};
    /*
     * do funkcji przypisujemy prototyp klasy po której dziedziczymy
     * (metody i pola)
     */
    f.prototype = parentClass.prototype;
    /*
     * przypisujemy do naszego obiektu
     * kopie prototypu (nie wywołując konstruktora
     * parenta tylko tymczasowa funkcje)
     */
    this.prototype = new f();
    /*
     * poprawiamy konstruktor (inaczej wskazywałaby na
     * parentClass.prototype.constructor)
     */
    this.prototype.constructor = this;
    /*
     * jeśli jako drugi argument (opcjonalnie) został podany
     * obiekt z funkcjami rozszerzającymi parenta przypisujemy je
     */
    if(extendWith){
        for(var key in extendWith){
            this.prototype[key] = extendWith[key];
        }
    }
};

//deklarujemy obiekt Parent
function Parent (value) {
    this.value = value;
}
/*
 * definiujemy funkcje w prototypie
 * (można zrobić to przy pomocy obiektu jak poniżej)
 */
Parent.prototype = {
    getName: function(){
        return 'Parent';
    },
    getValue: function(){
        return this.value;
    }
};
//Definiujemy konstruktor Child-a
function Child (value) {
    /*
     * wywolujemy konstruktor Parenta w kontekście naszego obiektu
     * zeby przekazac parametry - emulacja 'super'
     */
    Parent.apply(this, arguments);
}
//Wywołujemy metodę inherit którą dodaliśmy do prototypu funkcji (Function)
Child.inherit(Parent, {
    //nadpisujemy metode getName
    getName: function () {
        //ponownie przykład emulacji 'super'
        var parentName = Parent.prototype.getName();
        return 'I am a Child of a ' + parentName;
    }
});
//Tworzymy instancje obiektu Child
var childInstance = new Child('some value');
//sprawdzamy czy wszystko się udało
alert(childInstance.getName());
alert(childInstance.getValue());

Do pisania aplikacji obiektowo w javascripcie również można wykorzystać narzędzia udostępniane przez frameworki javascriptowe. Przykładowo MooTools posiada bardzo fajną implementację obiektowości i dziedziczenia przy pomocy funkcji Class. Ponieważ prawie wszystkie implementacje w dostępnych frameworkach są modyfikacjami powyższego podejścia (prototype inheritance), uważam że warto wiedzieć jak ono działa i jak się je implementuje dlatego że nie zawsze możemy w projekcie skorzystać z MooTools lub innych frameworków.

Zespół Devmeetings.pl przygotował po raz kolejny ciekawy cykl szkoleń.  W Poznaniu, Wrocławiu, Gliwicach i Warszawie zainteresowani będą mogli poznać szczegóły detekcji kolizji. Dla wszystkich którzy chcą się zajmować tworzeniem gier (niekoniecznie w naszym ulubionym języku) jest to zagadnienie pierwszorzędne.

Czego między innymi można się spodziewać?

• Krótkiego i treściwego repetytorium z fizyki
• Szczegółowego przedstawienia sposobów wykrywania kolizji
• Matematyki wektorów
• Omówienia algorytmów optymalizacji wydajności
• Obsługi reakcji na kolizje

Terminy:

• Poznań, 9 lipca
• Gliwice, 16 lipca
• Warszawa, 23 lipca
• Wrocław, 30 lipca

Szkolenie prowadzi Marek Pawłowski.  Miałem przyjemność być, na prowadzonym przez niego,  szkoleniu z tworzenia gier w Javascripcie (wtedy pisaliśmy multiplayerowy Mortal Kombat).

Oczywiście bym zapomniał, szkolenie jest całkowicie za darmo.  Polecam!

Szczegóły i rejestracja na stronie devmeetings.pl

• Asynchronicznego wykonywania skryptów
• File Reader API
• HTML5 Drag and Drop
• Webworkerów
• Walidacji formularzy (HTML5 Forms)
• Iframe sandboxing
• Media Query Listeners

oraz w zakresie CSS-a:

• CSS3 Positioned floats
• CSS3 Grid
• CSS3 multicolumn
• CSS3 flexbox
• CSS3 Gradients

Cieszy mnie to że firma z Redmont poważnie zaczeła inwestować w technologie html5 oraz css3, tworzy przeglądarkę która naprawde bedzie mogła konkurować z Firefoxem czy Google Chromem. Dzięki temu rownież technologie HTML5 będa bardziej używalne w aplikacjach webowych, poniważ przeglądarki z rodziny IE są mimo wszystko najbardziej popularne nie ze względu na ich jakość ale ze względu na to że są preinstalowane na każdej maszynie z windowsem.  IE9 był milowym krokiem dla explorera IE10 idzie jeszcze dalej.

http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/29/ie10-platform-preview-is-out-with-more-html5-and-css3-goodness.aspx

1) Minifikacja Javascriptu i Css-a

Minifikujemy pliki javascriptu i css-a, po usunięciu białych znaków,
oraz optymalizacji zmiennych, usunięciu komentarzy
w javascripcie możemy zyskać nawet 25% wielkości podstawego pliku.
najpopularniejsze narzędzia to:

YUICompressor
Google Closure Compiler

2) Kompresja Gzip

Warto włączyć kompresje Gzip po stronie serwera można zyskać nawet 30%
podstawowej wielkości plików. Warto ją włączyc dla każdego statycznego contentu,
plike HTML (lub wygenerowany HTML przez skrypty na serwerze), CSS i oczywiście
Javascript.

3) Zmniejszenie liczby requestów do serwera

Każdy request do serwera przez przeglądarke kosztuje czas oraz alokacje pamięci i resourców,
warto sprawić aby w naszej aplikacji było jak najmniej requestów po dane do serwera.
Ponieważ jeden request po większą ilość danych zadziała szybciej niż
5 czy 10 requestów po mniejszą ilość danych.

3a) Łączenie plików Javascript i Css

Podczas procesu budowy czy releasowania projektu warto łączyć wszystkie pliki
projektowe javascriptu w jeden to również dotyczy plików css. Zmniejsza to liczbę
requestów do serwera. Nawet jeśli korzystamy z bilbiotek zewnętrznych takij jak
Jquery czy Mootools to również warto przemyślec czy nie umieścić jej ‘zbundlowanej’
w naszym pliku wynikowym. W idealnym świecie dla naszej aplikacji istnieje 1 plik JS i 1 plik css.

3b) Obrazki jako Sprite-y

Zamiast ładować 10 ikon jako osobne pliki, lepiej jest stworzyć jeden plik
graficzny który zawiera wszystkie ikonki i obrazki tła które wykorzystujemy,
i po załadowaniu odpowiednio ustawiając pozycje tła w CSS-sie na danym elemencie
pokazyjemy odpowiednią ikonkę. Dzieki temu np. zamiast 10-ciu requestów po
dane mamy 1. Warto zajrzeć http://css-tricks.com/css-sprites/.

3c) Cache Forever

Warto ustawiać nagłówki ‘Expires’ np na rok albo więcej dla statycznego
contentu. Dzięki temu client przeglądarka bedzie korzystać z lokalnie
zapisanego pliku zamiast wysyłać za każdym razem request po content.
Trzeba wtedy tylko pamiętać żeby przy releasowaniu nowej wersji aplikacji
zmieniać url do pliku, można np. wykorzystać numer aktualnej rewizji w tym celu.

4) Optymalizacja grafiki

Warto korzystać z formatu PNG-8 zamiast PNG-24 możemy zyskać do 50% wielkości
podstawowego pliku. PNG-8 dla IE6 zachowują sie jak pliki GIF (tylko że
nie wspierają animacji) łącznie z przeźzroczystością (zwykłą nie alpha).
Warto zkorzystać z narzędzi takich jak np. http://psydk.org/PngOptimizer.php
do optymalizacji plików png usuwają one z pliku niepotrzebne informacje.

Pliki JPG można zapisać w formacie ‘baseline’ lub ‘progressive’ w praktyce
dla plików większych (niż 10kb) warto stosować ‘progressive’, dla miniatur
‘baseline’ można zyskać do 10% bez utraty jakośći.
warto zajrzec: http://www.smushit.com/ysmush.it/

5) Serwery Plików statycznych oraz Content Delivery Network

Przy większych projektach warto korzystać z sewerów pliów statycznych
dla statycznego contentu oraz z tzw. CDN-ów, np Akamai,
czy Amazon CloudFront można uzuskać dużo szybsze ładowanie content-u
w szczególności dla użytkowników którzy są ‘fizycznie’ oddaleni od naszego
serwera (np. za oceanem). Niestety dobre serwisy CDN są płatne.

Nie poruszałem dodatkowych kwesti dotyczących backendu ale jesłi uważacie że czegoś brakuje na liście lub o czymś zapomniałem zapraszam do dyskusji z chęcia zrobie update.

żródło: microjs.com

Podczas tworzenia aplikacji staram się być minimalistą. Tylko funkcjonalności, które są mi teraz potrzebne. Jak najmniej na przyszłość – wszystko ma działać od zaraz i najważniejsze z jak najmniejszą ilością (czytelnego) kodu. Dlatego zgadzam się z tym z tym co napisał Thomas Fuchs na swoim blogu o bibliotekach takich jak JQuery, Prototype, YUI , MooTools itp.

• takie biblioteki starają się rozwiązać wszystkie problemy i przy takiej skali trudno osiągnąć w każdym aspekcie perfekcję
• takie biblioteki są duże. Być może nie przesadnie wielkie jeżeli mówimy o klasycznych komputerach ale już przy urządzeniach mobilnych ich rozmiar ma znaczenie.
• tworząc strony nie potrzebujemy wszystkich z udostępnionych funkcjonalności

We wspomnianym wpisie Thomas Fuchs zaprezentował parę specjalistycznych frameworków, które realizowały bardzo konkretne zadania a całkiem niedawno stworzył stronę microjs.com gdzie możemy sobie wybrać z kilkudziesięciu bibiotek(a liczba ich prawdopodobnie będzie rosnąć). Wszystkie poniżej 5kb i koncetrują się na jednej funckjonalności.

• wykryciu dostępnych elementów HTML5 i CSS3 (Modernizer)
• obsługi rożnego rodzaju zapisu danych po stronie przeglądarki (Lawnchair)
• animacji (Emile)
• systemie szablonów (Mustache)
• obsługę zdarzeń, elemetów DOM, elementu Canvas, Ajaxa i wielu innych

Dzięki małemu rozmiarowi biblioteki te można łatwiej debugować a dzięki niezależności “w kodzie” łatwo wymienić na inną. Jako plus dodam, że można nauczyć się kilku fajnych rozwiązań analizując ich kod. Brakuje tylko rankingu albo kogoś kto będzie recenzował te biblioteki bo przy dużym wyborze ciężko stwierdzić która jest najlepsza.

Źródła:
Strona z listą micro bibliotek : micro.js
Strona Thomasa Fuchsa: mir.aculo.us

W poprzednim tygodniu wyszła wersja 3 wspomnianego IDE i nie omieszkałem jej przetestować.

Co mi się podoba:

• nowa kolorystyka tła i składni. Jest to oczywiście kwestia gustu ale mi bardzo przypadło do gustu. Jeżeli komuś się nie spodoba może zaimportować sobie wybrany wygląd z TextMate.
• “App Explorer”. Panel z plikami dla tylko jednego projektu. Umożliwia szybkie wyszukanie i zmniejsza bałagan.
• prędkość wyszukiwania! To działa i działa naprawdę szybko! Jestem pod wrażeniem jakbym przesiadł się z malucha do, no powiedzmy, nowego forda
• dużo lepszy UX aplikacji. Bezboleśnie znalazłem nowe funkcjonalności i wykorzystałem je podczas pracy. Cały interfejs jest mniej zaśmiecony i przyjazny. Nie jest oczywiście idealny i nie ma co się ścigać z najlepszymi aplikacjami na MAC-a ale jest dużo, dużo lepiej.
• zintegrowany Terminal. Czasami mi się przydawał (często musiałem odpalać buildy antowe). Nie konieczny ale przyjemny dodatek.
• Aptana 3 jako osobna aplikacja. Wersja 2 i wersja 3 działają zupełnie osobno. Mogłem dzięki temu zainstalować nowy program bez strachu, że w połowie pracy będę musiał walczyć z przywróceniem bardziej stabilnej wersji.
• prędkość działania. Bardzo poprawiona. Aplikacja działała bez problemowo i nie zawiesiła się ani na chwile.
• podpowiadanie składni w CSS-ach (razem z wyszukiwaniem odpowiednich klas z pliku HTML)

Co mi się nie podoba

• UX dalej jest daleko od bycia idealnym. Za dużo opcji, lekko brzydkawy wygląd.
• podpowiadanie JS-a. Niby jest i coś podpowiada ale żeby bardzo pomagał to nie powiem. Dodatkowo czasem w ogóle się nie odpalał.
• czasami źle były wskazywane miejsca błędów. Raz pokazywał je w miejscach które zostały już poprawione a czasami wychodziły dopiero po odpaleniu programu w przeglądarce.

Co jeszcze obiecują(a czego nie przetestowałem)

• możliwość importowania motywów z TextMate
• integrację GitHubem
• Deployment Wizard. Automatyzacja wystawiania projektów Rail-owych(wbudowane wsparcie dla Heroku i Engine yard)

Podsumowanie

Ogólnie jestem bardzo zadowolony i polecam. Aptana 3 sprawiała mi się szybko i była stabilna. Moim zdaniem jest to dużo lepszy edytor od Aptany 2 i warto go sprawdzić w boju.

Strona Aptany

żródło : http://html5boilerplate.com/

Dzisiaj chciałem przedstawić projekt HTML5 Boilerplate i to w czym może być pomocny w codziennej pracy. Nie dajcie się zwieść – nie jest to żaden nowy Javascriptowy framework ale przygotowany szkielet “świeżej” aplikacji i build system pomocny przy tworzeniu wersji produkcyjnych. Dlaczego jest to pomocne rozwiązanie?

Szkielet

Czy też przy rozpoczęciu tworzenia nowej strony wyciągacie gdzieś z odmętów dyskowych swoją własną strukturę? Wszystko ułożone tak jak lubicie – odpowiednie katalogi na obrazki, dokument html z odpowiednim Doctypem i podłączonymi bibliotekami Javascript-owymi itp. To co dostajecie w HTML5BP jest dokładnie czymś takim tylko przygotowanym nie przez jednego człowieka ale przez cały zespół specjalistów frontend-owych. Cały szkielet jest stworzony tak aby działał na wszystkich głównych przeglądarkach (mobilnych także). Ilość zaimplementowanych sztuczek i hacków które zostały tam wrzucone jest naprawdę duża.

• wsparcie cachowania css i javascript
• wparcie mobilnych wersji
• odpowiednie radzenie sobie z rożnymi IE (używanie odpowiedniego silnika i wykrycie)
• modernizer do wykrycia właściwości przeglądarki (feature detection)
• strukturę zgodną z HTML5 i działającą we wszystkich ważnych przeglądarkach
• najlepszy sposób pobierania JQuery
• style resetujące
• zoptymalizowane style przygotowujące stronę do druku
• wieele innych

Aż korci żeby rozebrać wszystko na części pierwsze i posprawdzać które z rozwiązań już stosowałem a które powinienem.  Dokumentacja do projektu jest może trochę chaotyczna (np. brak jasnego rozdzielenia instrukcji co do wykorzystania HTML5BP i Webowych rozwiązań w nim zastosowanych ) ale za to bardzo bogata!

Build system

Tu z kolei coś co pomoże szybciej tworzyć wersje produkcyjne naszej strony. Kilka komend i już mamy wyczyszczoną i zmniejszoną wersję gotową do wrzucenia na produkcję. Wszystko jest oparte o Ant-a więc jeżeli go nie mamy już zainstalowanego (Mac, Linux) to trzeba to zrobić samemu (Windows). Całość oczywiście jest dokładnie rozpisane w dokumentacji HTML5BP. Co możemy więc zautomatyzować?

• łączenie i minimalizację Javascriptów i CSS-ów
• optymalizację plików JPG i PNG
• minimalizację HTML-a
• usuwanie instrukcji console i debugger z kodu.
• wspomaga i przygotowuje plik .htaccess aby wspierał wydajne cachowanie
• kilka innych operacji

Oczywiście pierwsze co chciałem zrobić ,to zastosować te wszystkie operacje na swoim własnym projekcie. Okazało się jednak, że nie udało się tego zrobić tak bezboleśnie jakbym sobie życzył. Po pierwsze musiałem trochę pogrzebać w skrypcie anta, żeby pozbyć się nie chcianych opcji (.htaccesa) bo inaczej cały proces się wywalał. Po dalszych walkach okazało się, że cały build system działa najlepiej z szkieletem stworzonym przez HTML5BP (ewentualnie lekko modyfikowanym w ramach opcji).  Mimo to uważam, że jest to kawał porządnej roboty a wykorzystanie Anta-a powoduje że przy odrobinie pracy możemy wyciągnąć tylko interesujące nas elementy i stworzyć niezależny build system.

Na koniec

Jestem pod wrażeniem ilością wiedzy i przemyślenia wrzuconą w te narzędzia. Moim zdaniem naprawdę może się przydać w codziennej pracy. A nawet jeżeli nie będziecie wykorzystywać wszystkiego co zostało zaoferowane koniecznie sprawdźcie dokumentację zastosowanych rozwiązań webowych.

Jeszcze na koniec prezentacja, którą stworzył Paul Irish na temat wykorzystania HTML5BP.

Strona projektu

Strony wykorzystujące HTML5BP:

Nokia C7 Belgium

Nike Skateboarding

1. Tankworld

Prawdziwa gra! Można pojeździć czołgiem się postrzelać. Na chromie i FF dziala plynnie i bezproblemowo.

2. HelloRacer™ WebGL

Ruchomy model samochodu F1.

3. WebGL Aquarium

Akwarium z rybami. Możecie modyfikować liczbę ryb widoczną na ekranie do porównania wydajności.

4. Fractal Lab

Zaawansowany przykład. Obserwujemy blok i w czasie rzeczywistym możemy zmieniać jego właściwości. Twórcy nawet pokazali video z prezentacją co jest możliwe.

5. Chrysaora

Ocean pełen meduz.

6. Sintel Goes Boom

Trailer filmu wyświetlający się na obracających się kostkach. Super połączenie WebGl-a i Video. W działaniu przypomina trochę inny eksperyment (HTML5 Video Destruction)

Źródło

Jak sami chcecie kodować trochę materiałów :
Lerning WebGl (ang)
Dokumentacja Mozilli(ang)

Podczas warsztatów zaimplementujemy rozbudowaną aplikację typu WebBased IDE. Będzie to edytor JavaScript, uzupełniony o obsługę testów jednostkowy dla pisanego kodu, kontrolę wersji (live), zarządzanie plikami projektu oraz obsługę repozytorium git.

Skorzystamy z następujących rozwiązań:

• NodeJS – najbardziej rozpoznawalna nazwa w świecie serwerowego JavaScriptu, bardzo lekki framework pozwalający na szybkie tworzenie serwerów HTTP lub socketowych. Można go zareklamować zdaniem: “kompletny serwer w kilkanaście linii kodu”.
• RingoJS – gratka dla programistów Javy, framework oparty o interpreter Rhino. Daje możliwość wykorzystania tysięcy istniejących bibliotek języka Java, dedykowany interfejs do Hibernate, tworzenie servletów, a wszystko to z poziomu JavaScriptu. Do tego łatwy deployment, możliwość skorzystania z Google App Engine.
• V8CGI – lekki serwer webowy (moduł Apache’a), wykorzystuje natywny, obecnie najszybszy z istniejących interpreter JavaScriptu V8 (stworzony przez Google). Dobry i szybki robotnik, który pozwoli na sprawne połączenie z bazą danych, kompresję ZIP, obsługę XML, dostarczy mechanizmRPC, możliwość generowania obrazów oraz wiele innych operacji typowych dla rozwiązań webowych.

Szkolenia odbędą się

• Poznań, 14 maja
• Wrocław, 21 maja
• Kraków, 18 czerwca

Ważna wiadomość: szkolenia są za darmo!

Po doświadczeniach z poprzednimi szkoleniami (“gry w JS”) i znając prowadzącego mogę powiedzieć jedno : Polecam!

Pełne informacje o szkoleniu