Archiwa tagu: Javascript

Adobe Flash Pro CS6 — nowe funkcje i narzędzia

Jesteśmy kilka godzin po światowej premierze Adobe Creative Suite 6 i przyszedł czas na przyjrzenie się nowym funkcjom, narzędziom i zmianom jakie nas czekają w popularnych aplikacjach z numerkiem CS6. W tym artykule zobaczymy co nowego oferuje program do tworzenia animacji — Flash Professional. Jak działa i wygląda ten program miałem okazję zobaczyć podczas warsztatów Reviewers Workshop w Monachium przed niespełna miesiącem. Teraz opiszę wam co tam widziałem.

Pudełko do Flash Pro CS6

Pudełko do Flash Pro CS6

Podobno „Flash is dead“, choć w obliczu wersji CS6 nie jest to takie pewne. Twórcy i programiści z Adobe stopniowo rozszerzają możliwości tego programu, przez co nowy Flash Professional staje się narzędziem do tworzenia animacji w HTML5, Javascripcie i CSS3 na potrzeby internetu, gier i urządzeń mobilnych. Oczywiście natywne wsparcie dla formatu flashowego SWF pozostaje na swoim miejscu, ale nie jest już jedynym rozwiązaniem. Jest to też odpowiedź na blokadę flashowego pluginu w urządzeniach firmy Apple, a przecież w dzisiejszych czasach nie można sobie pozwolić na ignorowanie tak dużego rynku.

Tworzenie animacji w HTML5 bazuje na integracji z grupą javascriptowych bibliotek pod wspólną nazwą CreateJS. Dzięki temu możemy eksportować projekty flashowe do postaci przyjaznej dla przeglądarek internetowych, smartfonów i tabletów. Z tym toolkitem powiązana jest kolejna nowa funkcja: tworzenie sprite-sheet’ów, szczególnie przydatnych jeśli pracujemy nad animacjami. Spritesheet to poszczególne ramki animacji ułożone obok siebie w jednym pliku graficznym — wygląda to podobnie jak sprite w CSS. Funkcja ta została dodana do Flasha CS6, ponieważ jedynie przy pomocy spritesheetów można eksportować animacje flashowe do HTML5.

Spritesheet we Flashu Pro CS6

Spritesheet we Flashu Pro CS6, źródło: © Adobe

Adobe rozwija też we Flashu funkcjonalności umożliwiające tworzenie aplikacji na urządzenia przenośne. Jedną z takich funkcjonalności są natywne elementy interfejsów poszczególnych modeli smartfonów i tabletów, przez co nie musimy tych elementów tworzyć samemu. Te elementy można pobrać ze strony internetowej Adobe.

Powyższa funkcja jest przydatna przy automatycznym tworzeniu aplikacji AIR bezpośrednio z Flasha. Projekt flashowy może zatem teraz być wyeksportowany do postaci binarnej i odtworzony w jakimkolwiek urządzeniu z zainstalowanym AIR Runtime. Nowością jest też dodawanie zdarzeń w takich aplikacjach, które są wywoływane przez gesty na ekranach dotykowych. Potem można włączyć symulację takiej aplikacji i myszką testować zachowanie aplikacji po wykonaniu odpowiedniego gestu.

Widać więc, że Flash, z zamkniętego środowiska do tworzenia interaktywnych stron internetowych, przekształca się w narzędzie do tworzenia animacji i aplikacji bazujących na otwartych technologiach (poza AIR’em oczywiście). Myślę, że jest to krok w dobrym kierunku, tym bardziej, że format flashowski SWF będzie coraz mocniej wypierany przez HTML5 i Javascript.

Wymagania techniczne

Mac: procesor wielordzeniowy, MacOS X, 2GB RAM (3GB zalecane), 4GB miejsca na dysku, Java Runtime Environment 1.6

Windows: procesor wielordzeniowy, Windows XP lub 7, 2GB RAM (3GB zalecane), 3.5GB miejsca na dysku, Java Runtime Environment 1.6

Adobe Dreamweaver CS6 — nowe funkcje i narzędzia

Jesteśmy kilka godzin po światowej premierze Adobe Creative Suite 6 i przyszedł czas na przyjrzenie się nowym funkcjom, narzędziom i zmianom jakie nas czekają w popularnych aplikacjach z numerkiem CS6. W tym artykule zobaczymy co nowego oferuje program do tworzenia serwisów internetowych i aplikacji mobilnych — Dreamweaver. Jak działa i wygląda ten program miałem okazję zobaczyć podczas warsztatów Reviewers Workshop w Monachium przed niespełna miesiącem. Teraz opiszę wam co tam widziałem.

Pudełko do Dreamweavera CS6

Pudełko do Dreamweavera CS6

Dreamweaver to program-kombajn, który początkowo służył do wizualnego tworzenia stron internetowych. Oczywiście dalej jest to jego główną funkcją, ale coraz więcej narzędzi przeznaczonych jest do tworzenia mobilnej treści. W wersji CS6 dostajemy jeszcze większą integracją z frameworkiem jQuery Mobile, dzięki któremu możemy budować mobilne wersje stron internetowych z łatwością i pewnością, że będzie ona spełniała standardy i będzie wyglądała dobrze na wszystkich urządzeniach i przeglądarkach. Dodany został panel jQuery Swatches, dzięki któremu możemy jednym kliknięciem zmieniać skórki całych stron www i aplikacji. Integracja z Adobe PhoneGap umożliwia za to tworzenie natywnych aplikacji na smartfony i tablety.

Płynne układy siatkowe to też nowość — i też są powiązane z światem mobilnego internetu. Coraz częściej strony internetowe projektowane są tak, aby dostosowywać swój układ, treść i grafikę do wielkości ekranu użytkownika. Teraz możemy projektować nasze layouty za pomocą płynnych divów i kontenerów, a Resolution Switcher szybko przełącza nas pomiędzy widokami komputera, tabletu i telefonu.

Kolejna nowość to panel CSS Transitions, dzięki którym możemy na żywo tworzyć animowane przejścia i efekty, które są potem kodowane w CSS3. Oznacza to koniec z zapamiętywaniem nowych reguł CSS i przełączaniu się pomiędzy widokiem kodu i przeglądarki.

W Dreamweaverze CS6 dodano też integrację z usługą Business Catalyst, która umożliwia hostingowanie projektu na serwerach Adobe, a także umożliwia wykorzystanie wielu typowych funkcjonalności, charakterystycznych dla serwisów web 2.0, takich jak koszyki sklepowe, czy zarządzanie serwisem z panelu administracyjnego.

Wymagania techniczne

Mac: procesor wielordzeniowy, MacOS X, 512MB RAM, 1.8GB miejsca na dysku, Java Runtime Environment 1.6, QuickTime 7.6.6

Windows: procesor wielordzeniowy, Windows XP lub Vista lub 7, 512MB RAM, 1GB miejsca na dysku, Java Runtime Environment 1.6, QuickTime 7.6.6

Poza granicami akcji, czyli pisanie skryptów do Photoshopa

Automatyzacja pracy w Photoshopie może przyprawić o ból głowy lub odgłos zachwytu. Mało którzy użytkownicy tego programu naprawdę używają operacji (dziwne słowo na angielskie „actions“, dla mnie to po prostu akcje). Bo przecież żeby naprawdę potrzebować akcji/operacji, ktoś musi mieć do obrobienia tysiące zdjęć — po to właśnie akcje zostały stworzone — by zapisywać sekwencje czynności powtarzanych stale na każdym dokumencie.

Ale zostanie nam tylko jakaś część tych użytkowników, jeśli zapytamy się o znajomość ograniczeń akcji — a jest ich całkiem dużo. Chociażby przenoszenie warstw z jednego dokumentu do drugiego z zachowaniem położenia. Czy też wpisywanie określonego tekstu w określonej pozycji. Tego akcje nie potrafią zrobić. Czytaj dalej

Photoshop’ w JavaScripcie: kod źródłowy i omówienie

Wreszcie przyszedł czas na zamieszczenie kodu źródłowego mojej mini-aplikacji do obróbki fotografii w przeglądarkach www. Projekt nazywa się Woof i został napisany głównie w javascripcie ze wsparciem w php po stronie serwera. Podczas pracy inspirowałem się i korzystałem z pomysłów i rozwiązań biblioteki Pixastic autorstwa Jacoba Seidelina. Działającą wersję Woofa można przetestować na woof​.psboy​.pl. Kod źródłowy można pobrać poniżej:

woof_0.1_psboy.pl

Zamieściłem także folder projektowy środowiska NetBeans, więc jeśli korzystasz z tego programu, wystarczy otworzyć projekt i wszystkie pliki będą dostępne do edycji.

Mam nadzieję, że komuś przyda się ten projekt do napisania czegoś większego i bardziej zbliżonego do shopo-ideału :) Poniżej kilka wyjaśnień i uwag co do poszczególnych plików i ich funkcji w działaniu całej aplikacji.

Cały silnik Woofa napisany jest w javascripcie i wykorzystuje najnowsze techniki opisane w szeroko pojętej specyfikacji HTML5, głównie canvasy, czyli obiekty html na których można przeprowadzać operacje z pikselami. W języku PHP napisano kontener dla aplikacji, oraz moduł wysyłania plików na serwer oraz ich usuwania. Tu przy okazji polecam zapoznanie się ze sposobem asynchronicznego (ajaxowego) przesyłania plików na serwer bez konieczności stosowania flasha. Struktura aplikacji wygląda następująco:

img/ - w tym folderze umieszczane są chwilowo pliki do obróbki, po załadowaniu pliku i jego miniaturki, pliki źródłowe są usuwane fizycznie z serwera.

del.php — skrypt php do usuwania plików, jest wywoływany ajaxowo przez funkcję image_open() w pliku woof.js.

loadimage.php — skrypt ładujący pliki na serwer do folderu img/, zwróćcie uwagę na ostatnie linijki tego skryptu, tam bowiem następuje poinformowanie silnika o powodzeniu lub nie wysyłania pliku.

woof.js — główny skrypt Woofa, zawiera definicję obiektu Woof, większość parametrów, zmiennych i funkcji do obsługi aplikacji.

woof_actions.js — zawiera funkcje i algorytmy obróbki zdjęć. Tu znajdują się funkcje balansu kolorów, miksera kanałów, poziomów itd.

woof_ui.js — zawiera akcje interfejsu użytkownika, czyli np. kliknięcia, przesunięcia suwaków, obsługa okien dialogowych — wykorzystuje gęsto bibliotekę jQuery.

To wszystko :)

jQuery i JavaScript: dynamiczne okna dialogowe

Okna dialogowe podobne do tych z tradycyjnych aplikacji, to dziś w internecie chleb powszedni. Są „trendi“ bo pojawiają się i znikają natychmiast, na sposób ajaxowy. To zawsze się podoba, bo przybliża internetowe aplikacje do ich offline’owych przodków.

Kiedy zaczynałem moje zmagania z ajaxem i asynchronicznymi połączeniami serwer-przeglądarka, szukałem gotowych recept na obsługę okien dialogowych. Musiało to być rozwiązanie oparte na bibliotece jQuery. Jeśli nie wiesz co to jquery — jest to bodaj najczęściej obecne wykorzystywana biblioteka-framework JavaScripta. Jej głównym zadaniem jest usprawnienie programowania w tym języku, poprzez gotowe funkcje spełniające powszednie zadania.

Zatem szukałem. Najpierw na stronie jQuery, gdzie znalazłem kilka pluginów do tworzenia okien dialogowych — ale jak wiele skryptów w sieci były one niesamowicie rozbudowane i skomplikowane. Znalazłem też kilka innych stron i blogów, których przykłady i skrypty pozwoliły mi napisać samemu dwie proste funkcje — do otwierania (pokazywania) okien, oraz do ich zamykania. Obie funkcje poniżej. Pamiętaj, że musisz dołączyć bibliotekę jQuery razem z tym skryptem. Inaczej przeglądarka nie wykryje skrótu $ i jego metod.

[sourcecode language=„jscript“]
* Pokaż okno dialogowe
* @param what — klasa diva do otwarcia, np ‚.okno’
* @param w — szerokość okna w pikselach
*/
function showdial(what, w) {
var wd = $(window).width();
var hg = $(window).height();
// przesuwamy okno do środka
$(‚.’+what).css({width:w});
var dialLeft = (wd/2) — ($(„.“+what).width()/2);
var dialTop = 50;
// dial_over to id diva przyciemnionego tła,
// uniemożliwia ono interakcję z innymi elementami strony.
$(‚#dial_over’).css({height:hg, width:wd}).show();
$(‚.’+what).css({left:dialLeft,top:dialTop}).show();
}

/**
* Zamknij okno
* @param co — klasa diva do zamknięcia.
*/
function kill(co) {
$(‚#dial_over’).hide();
$(‚.’+co).hide();
}[/sourcecode]

Do tego potrzebujemy odpowiednie ustawienia stylizacji CSS divów okna dialogowego i tła. Oto one:

[sourcecode language=„css“]
#dial_over {
width:100%;
height:100%;
/* przezroczystość */
filter:alpha(opacity=50);
–moz-opacity:0.5;
–khtml-opacity:0.5;
opacity:0.5;
background:#000;
position:absolute;
left:0px;
top:0px;
z-index:100;
display:none;
}

#dial {
background:#fff;
/* cień pod oknem */
–moz-box-shadow:1px 1px 5px #555;
–webkit-box-shadow:1px 1px 5px #555;
box-shadow:1px 1px 5px #555;
display:none;
top:30px;
z-index:200;
position:absolute;
/* zaokrąglone rogi, nie działają w IE */
–o-border-radius: 5px;
–webkit-border-radius: 5px;
–moz-border-radius: 5px;
border-radius: 5px;
text-align: left;
}[/sourcecode]

Na koniec: do każdego diva okna dialogowego musisz dołączyć id=„dial“ oraz class=„twojaklasa“, gdzie twojaklasa to nazwa klasy, którą będzie wywoływać funkcja showdial(). Zatem kompletny div będzie wyglądał tak:

[sourcecode language=„html“]
<div id=‚dial’ class=‚klasa’><em>tu jego treść</em></div>
[/sourcecode]

To wszystko! całość działa z powodzeniem na kilku stronach i aplikacjach. Funkcje zostały przetestowane w Firefoxie, Chrome, Operze, Safari i IE. Działa wszędzie.