kodowanie: APNG hero

i_want_to_be_a_hero__apng_animated__by_tamalesyatole-d5ht8eu

Wraz z pojawieniem się nowej wersji Xcode w wersji ósmej Apple wprowadził możliwość tworzenia tzw. stickerów do swojego flagowego komunikatora iMessage. W iMessage mamy wsparcie dla czterech formatów plików graficznych: PNG, APNG, GIF, JPEG.

O ile trzy z nich (PNG, GIF, JPEG) to formaty szeroko znane, o tyle APNG jest tu małym wyjątkiem i co ciekawe właśnie APNG i PNG są rekomendowane do tworzenia grafik dla stickerów.

Format APNG został stworzony w 2004 roku przez Stuarta Parmenter oraz Vladimira Vukicevica z fundacji Mozilli a w przeglądarkach zaczął był wspierany od 2007 roku (najpierw w Firefoxie 3). Obecnie APNG jest wspierane przez Firefox’a, SeaMonkey, Safari, Operę (od wersji 15) i Chrome’a (podobno już oficjalnie, a na pewno jako dodatek APNG do Chrome [http://littlesvr.ca/apng/] sekcja Plug-ins and Extensions). Pozostał na placu boju tylko Internet Explorer… na to już nic nie poradzimy 😉

Poniżej małe zestawienie właściwości poszczególnych formatów wspieranych przez iMessage:

format rekomendacja liczba kolorów wsparcie
dla przeźroczystości
wsparcie
dla animacji
PNG tak 16,777,216 8 bitów
APNG tak 16,777,216 8 bitów tak
GIF 256 1 kolor tak
JPEG 16,777,216

Jak widać APNG wspiera także animowane obrazki, podobnie jak GIF. Jest jedno ale. Znaczącą różnicą między GIF’em a APNG jest liczba kolorów, które mogą zawierać obrazki i jest to paleta z tylko 256 kolorami (8 bitów) w przypadku GIF’a, a w przypadku APNG (PNG) mamy do dyspozycji cały 24-bitowy zakres. Podobną przepaść mamy w przypadku kanału z przeźroczystością, gdzie dla GIF’a mamy stworzyć maskę z jednego koloru, a dla APNG (podobnoie jak dla PNG) jest to maska 8 bitowa czyli 256 kolorów (w skali szarości).

Różnicę w wyświetlaniu przeźroczystości można zobaczyć poniżej (GIF po lewej, APNG po prawej):

spinfox spinfox

Co ciekawe APNG ma wsteczną kompatybilność dla przeglądarek, które nie obsługują APNG. W takim wypadku APNG będzie zwykłym PNG i będzie wyświetlał pierwszą klatkę z animacji.

Przy okazji warto wspomnieć o darmowymh narzędziu do tworzenia plików APNG jakim jest APNG Assembler. Dostępny jest na platformę Windows, Mac i linux (starsza wersja z 2014) i pliki do pobrania znajdują się tutaj: [http://apngasm.sourceforge.net]. Ciekawostką jest, że wersja na Mac (być może w wersji na Windows też tak jest) APNG Assembler posiada wbudowany disassembler GIF’ów, więc można od razu skonwertować GIFa na osobne klatki w formacie PNG.

Dostępny też jest konwerter GIF na APNG jako osobna aplikacja [http://gif2apng.sourceforge.net] ale jako wersje uruchamiane z terminala (tylko na Windows posiada GUI), APNG na GIF [http://apng2gif.sourceforge.net] oraz APNG Optimizer [https://sourceforge.net/projects/apng/files/APNG_Optimizer/].

No i tym razem to by było wszystko.

Przydatne linki:

1. [http://littlesvr.ca/apng/] – trochę historii, specyfikacji i narzędzi do APNG

2. [https://people-mozilla.org/\~dolske/apng/demo.html] – prezentacja możliwości APNG

PS. Grafika do artykułu została znaleziona na stronie Deviant art [http://tamalesyatole.deviantart.com/art/I-want-to-be-a-Hero-APNG-Animated-332248278] a jej autorem jest tamaleyyatole z Meksyku 🙂

kodowanie: Markdown w MacDown

Często podczas pracy trzeba stworzyć dokumentację do aktualnego projektu. Do napisania jej można co prawda użyć dowolnego edytora tekstowego, ale najszybciej można ją chyba napisać w języku Markdown, który został stworzony w celu sformatowania tekstu w sposób najbardziej uproszczony, a co za tym idzie bardzo szybko.

Składnia w Markdown jest bardzo prosta i często mówi się, że jeśli ktoś umie pisać emotikony to też potrafić będzie  pisać w Markdown :). Ponieważ formatowanie bazuje na tagach HTML pisanie tesktów jest bardzo szybkie i konwersja takich dokumentów na inne formaty jest też bezproblemowa. Oczywiście jest to język wieloplatformowy więc można jednocześnie pracować nad tekstem na PC, Maku czy Linuxie.

Mały przykład składni w Markdown. Jeśli chcemy stworzyć listę nienumerowaną (z punktorami) możemy w Markdown napisać to tak:

Powyższy kod będzie miał swój odpowiednik w HTMLu czyli:

Wynikiem obu kodów będzie następujący blok:

  • dom jednorodzinny
  • blok
  • fabryka

W którym języku łatwiej i szybciej napisać jakiś sformatowany tekst? Odpowiedź jest chyba prosta. Na końcu artykułu parę linków wprowadzających do Markdown.

Narzędzi do pisania w Markdown jest sporo i tych darmowych i tych komercyjnych. Jednak jednym z nich jest otwarty edytor MacDown oczywiście dla użytkowników Maków. Co ciekawego jest w tym edytorze? Oprócz renderowania HTMLu można też używać tagów TeX’a, GFM czy Jekyll’a. W blokach tekstów źródłowych podświetla składnię całkiem sporej listy języków programowania (aktualna lista znajduje się tutaj). Dodatkowo wspiera także automatyczne uzupełnianie tagów. Jak na darmowe narzędzie jest tego sporo i polecam samego Macdown’a jak i pisanie czegokolwiek w Markdown’ie 🙂

Pomocne linki:

http://www.markdowntutorial.com

http://five.squarespace.com/display/ShowHelp?section=Markdown

http://daringfireball.net/projects/markdown/syntax

kodowanie: BBEdit & C# (CSharp)

Dla programistów, którzy pracują w Unity wiadomym jest, że do pisania wszelkich skryptów używa się MonoDevelop’a dostarczanego razem z Unity. Ale jeśli ktoś lubi inne narzędzie do kodowania (w sumie to podobna mi się to określenie żywcem przeniesione z języka angielskiego, coding) to nie stoi na przeszkodzie by móc używać jakiegokolwiek innego edytora tekstowego.

Tak się akurat składa, że ja do wszelkich tego typu prac (oprócz kodowania w Xcode), używam doskonałego narzędzia jakim jest BBEdit. Czy to jest HTML, assembler (dla małego 8-bitowego Atari), zwykły plik tekstowy, czy też C#, BBEdit jest niezastąpiony. Do każdego z tych języków programowania możliwe jest wyświetlenie składni, a także możliwa jest pomoc podczas pisania kodu podpowiadająca nam słowa kluczowe w danym języku.

Co ciekawe z podobnych udogodnień podczas edycji możemy korzystać w darmowej wersji BBEdit’a TextWranglerze. Podstawową listę modułów językowych można znaleźć na stronie z biblioteką modułów językowych do BBEdit’a. Dodatkowe moduły językowe można pobrać też ze strony BBEdit Extras wiki. Niestety może się zdarzyć, że link do któregoś z nich będzie już nieaktualny. Tak było w przypadku modułu C# & JavaScript for Unity3D, który co prawda prowadzi nas do docelowej strony jednak samego modułu już pobrać nie można.

Wróćmy do współpracy BBedit’a z C#. Wszystko czego potrzebujemy to tzw. CLM, czyli Codeless Language Module. Odpowiedni moduł pobieramy z repozytorium https://github.com/zarinfam/textwrangler-csharp-swift-syntax-highlighting. Jeśli używamy TextWrangler’a to po rozpakowaniu ZIP’a plik csharp.plistkopiujemy do katalogu

w przypadku BBEdit’a ten sam plik kopiujemy do katalogu

Po skopiowaniu pliku restartujemy BBEdit i można zaczynać. Poniżej BBEdit i C# w akcji.

 

Powodzenia w kodowaniu! 🙂