Ptaszor i jego blog! Lol…

W całym Internecie jest wiele ciekawych i godnych polecenia fragmentów kodu, jakie możemy wykorzystać na tworzonych stronach. Sam ich używam i chciałem choć kilka fajnych fragmentów kodu zebrać w jednym miejscu. Co prawda nie możliwe jest zebranie ich wszystkich, ale te kilka zastosowań Mootools przyda się nie tylko mi.

W skrócie czym jest Mootools znajdziemy w kursie:

Przykłady Mootools:

- TimeSpinner : widget wyboru czasu (mootools)

- Colorpicker pozwala na wizualny wybór koloru (mootools)

- Galeria w Mootools

- Bardzo ładny widget systemu do głosowania - oparty o Mootols oraz o PHP5 (mootools)

- Auto uzupełnianie listy w polu tekstowym (mootools)

- Rozmiar czcionki (mootools)

- Tworzenie tabel w oparciu o HTML-a (mootools)

- Siatka tabeli z obsługą edycji w linii (mootools)

- DrasticCloud jest chmurką tagów, która używa bazy MySQL jako źródło danych. Ma możliwość wielu konfiguracji. (mootools)

- DrasticMap jest komponentem opartym na Ajaksie, który wyświetla dane z bazy MySQL na mapie Google. (mootools)

- Lightbox, który obsługuje nie tylko obrazki, animacje flash, pliki video, mp3 oraz elementy języka html. (mootools)

- fValidator to JavaScriptowe narzędzie do prostego sprawdzania czy odpowiednie pola formularza zostały wypełnione. (mootools)

- MooFlow jest galerią opartą na JavaScripcie. (mootools)

- Ładny i użyteczny kalendarz (mootools)

- Time Picker wykorzystujący interfejs drag and drop (mootools)

- Kolejny edytor in-line (mootools)

- Suwak do zaokrąglania rogów okna (mootools)

- Dynamiczna zmiana wysokości elementu (mootools)

- Animowane menu od mootols - przykład menu prosto ze strony głównej frameworka. Trzeba przyznać robi wrażenie i to nie małe na osobach oglądających te menu po raz pierwszy. Dość częstym komentarzem jest: “działa jak by to było we Flashu, ale nie jest…“;

Poradnik implementacji, zastosowania kodu mootools został opisany na blogu, znajdziecie tam też gotowe przykłady (mootools).

- Kolejne menu w (mootools)

- Videobox: Lightbox dla filmów (działa z:Youtube, Metacafe, Google Video, iFilm i z plikami flash użytkownika) (mootools)

- Przesuwany pasek kart, których zawartość się zmienia podczas przechodzenia pomiędzy kartami (mootools)

- Obracana galeria (mootools)

- Demonstracja narzędzia do generowania elementów formularza (mootools)

- Tworzenie listy rzeczy do zrobienia (mootools)

- Edytor postów, wiadomości itd. (mootools)

- Obrazek panoramy (mootools)

- Przeciąganie za pomocą myszki bloku (mootools)

- Nakładka gmaps - po kliknięciu na odnośnik, przenoszeni jesteśmy we wskazane miejsce (mootools)

- Wtyczka do tworzenia panelu bocznego (3 sposoby) (mootools)

- Wyświetla ostatnie dziesięć nagłówków z najnowszych wiadomości (mootools)

- Skrypt do sprawdzania poprawności formularza (mootools)

- sLedit edytor testu, obrazków oraz innych kontrolek (mootools)

- Powiększanie / pomniejszanie pola tekstowego (mootools)

- PBBDatePicker v1.1 - cztery sposoby na wyświetlenie kalendarza (mootools)

- JibberBook - księga gości (mootools)

- Rozdzielacze (mootools)

- Imago - kolejna galeria zdjęć (mootools)

- Pasek postępu (mootools)

- MooPix - pokaz slajdów w oparciu o zdjęcia zamieszczone na Flickrze (mootools)

- Poziome menu (mootools)

- Zaokrąglone rogi prostokąta (mootools)

- ReMooz - galeria podobna do opartej na Lightboxie (mootools)

Ok, niebawem kolejna porcja przydatnych kodów…

Zobacz także:

• CSS - 35 praktycznych zastosowań!
• Kurs Mootools

Teraz oficjalnie na temat, o którym pisałem…

Wirtualny piknik z dokumentacją JavaScript

W dniach 30 czerwca - 1 lipca zespół Aviary.pl organizuje pierwszy na
świecie weekend tłumaczenia Mozilla Developer Center (MDC).

Pomysł jest prosty: spotykamy się w sobotę i niedzielę o 10:00 na IRC
(kanał #aviarypl na irc.mozilla.org), skupiamy na danej kategorii lub
temacie, i pomagając sobie wzajemnie, tłumaczymy i poprawiamy wybrane
artykuły. Wewnątrz zespołu nazwaliśmy takie wydarzenia “sprintami”,
które docelowo mają uzupełniać ciągłą i codzienną pracę ochotników,
którzy pod kierunkiem Tomka Sokoła, tłumaczą od 2 lat polskie MDC.

Zapraszamy serdecznie do wzięcia udziału w tym wydarzeniu. Zaczynamy od
dokumentacji JavaScript. Przygotowaliśmy listę artykułów, które chcielibyśmy przejrzeć i poprawić.

Taki model pracy jest szczególnie skierowany do wszystkich osób, które
nie mają dużo wolnego czasu, ale mają energię i chcą pomóc. Nawet mając
jedynie godzinę wolnego czasu, możecie przyłączyć się do nas w ten
weekend i zrobić coś dobrego Nie jest wcale konieczna znajomość
języka angielskiego - czytanie gotowych tłumaczeń i poprawianie
stylistyki to jedno z zadań, które wymaga przede wszystkim dobrej woli,
a jest nam bardzo potrzebne.

Wierzymy, że takie sprinty dadzą nam szansę pracować z ludźmi spoza
zespołu i maksymalnie wykorzystać energię dobrej woli, a Wam dadzą
szansę przyłączyć się i pomóc nam w naszym projekcie bez żadnych
zobowiązań i przy minimalnych kosztach wdrożenia się w model pracy.

Będzie dużo dobrej, wspólnej zabawy, a dla aktywnych planujemy mozillowe
gadżety :). Więcej informacji: wiki zespołu Aviary.pl.

Do zobaczenia w ten weekend!

Dodatkowe informacje znajdują się u Marka.

Chciałbym wszystkich zaprosić na pierwszy sprint MDC PL, który został zaplanowany na weekend 30.06 - 01.07 br.. Aviary.pl organizuje tego typu “imprezę”, aby przeprowadzić QA zawartości polskiego MDC. Bardzo fajnie by było gdyby jak najwięcej osób przyłączyło się do sprawdzania tych artykułów. Postanowione zostało, że zaczniemy od Dokumentacji JavaScript, wybrane zostało pierwsze 25 artykułów. Bardzo mile widziane byłoby gdyby fachowcy od JS spojrzeli na te artykuły surowym okiem.

Na MDC PL jest już przerzucona cała dokumentacja JavaScript z wersji angielskiej. Część artykułów wymaga jeszcze przetłumaczenia, lecz właśnie po to, jak i po to aby artykuły były najwyższej jakości - te sprinty będą organizowane co jakiś czas. Czy często czy nie, pokaże ten pierwszy. Dlatego podobna informacja już niebawem ma się pojawić na kilku grupach dyskusyjnych oraz ogólnie w Internecie.

Jeśli będę znał więcej szczegółów dotyczących sprintów - napisze na pewno. Oczywiście każdego zapraszam do pomocy. Wystarczy mieć konto na MDC PL i każdy może edytować, poprawiać, sprawdzać i tłumaczyć zawartość nie tylko tych 25 artykułów. A więc… pomożecie?

No właśnie - potrzebujemy chętnego, który wykona poniżej zamieszczone w postaci odnośników pliki obrazków, które zostaną wykorzystane w Przewodniku po języku JavaScript 1.5. Przewodnik ten jest już na ukończeniu i praktycznie pozostały do przetłumaczenia te obrazki oraz artykuły należące do nich.
Acha jeszcze jedna prośba do kogoś chętnego podjęcia się ich wykonania to są małe wymagania:

• Format pliku graficznego - musi to być *.png
• Obrazki należy wykonać w wersji pl oraz en

Jest ich nie wiele, poniżej podaje odnośniki bezpośrednio do obrazków:

1. http://developer.mozilla.org/wiki-images/pl/c/c9/Hier01.gif
2. http://developer.mozilla.org/wiki-images/pl/8/8d/hier02.gif
3. http://developer.mozilla.org/wiki-images/pl/6/6c/hier04.gif
4. http://developer.mozilla.org/wiki-images/pl/b/b3/hier05.gif
5. http://developer.mozilla.org/wiki-images/pl/6/6b/Obja.gif
6. http://developer.mozilla.org/wiki-images/pl/8/8d/hier03.gif

Chętnego ich wykonania prosiłbym o kontakt ze mną lub z Diablownikiem, dzięki któremu - ten przewodnik niebawem będzie w pełni po polsku.

Mark Finkle na swoim blogu opublikował wersję beta prostego walidatora XUL.

Chcąc go użyć wystarczy kod języka XUL wkleić w pole formularza i sprawdzić jego poprawność.

Aktualnie walidator sprawdza poprawność i semantyczność kodu XUL. Kod jest sprawdzany na podstawie kilku zasad jakie zostały założone przed jego zaprojektowaniem. Walidator jest ciągle w fazie testów i wszelkie uwagi są mile widziane przez autora. Zapowiada on także jego rozbudowę w formie dodania kolejnych zasad.

Walidator XUL - strona testowa

Kod walidatora jest oparty na pliku JavaScript, który jest jego silnikiem xulcheck.js oraz na pliku zasad xulschema.json.

Dawno nie pisałem nic na temat XUL-a, lecz postaram się to nadrobić. Między czasie tłumaczyłem trochę dokumentację XUL, znajdującą się na MDC w wersji PL. Przy okazji tego tłumaczenia znalazłem kilka fajnych elementów, które pokaże w miarę tego i następnych postów o XUL-u. Od następnej wersji pomyślałem, że warto dodać wszystkie posty o XUL z mojego bloga w formacie *.pdf. Taki mały zbiór :), który bym rozszerzał co dwa lub trzy nowe posty jakie napisze nt. języka XUL. Ok, zajmijmy się pracą ze
skryptami w języku XUL.

W jaki sposób możemy stworzyć obsługę zdarzeń, funkcji? Odpowiedź: za pomocą JavaScriptu (a ściślej z DOM). Sposób działania DOM polega na tworzeniu drzewa elementów. Więcej o samym DOM znajdziecie na MDC.

Pierwszym naszym przykładem będzie przycisk z kodem JavaScriptu.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="test-przycisku"
			title='Zastosowanie JS'
			xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<button id='name' label='Przycisk skryptu' /> 
</window>

Wyświetli:

Zobacz plik

Powyższy kod jest tylko ‘nieżywym’ przyciskiem, aby go ‘ożywić’ dodajmy do elementu button:

<button id='name' label='Przycisk skryptu' onclick='alert("Cześć");' /> 

Zobacz plik

W powyższym przykładzie, zwrócę tylko uwagę na zamieszczaniu w zdarzeniu onclick, tekstu w cudzysłowach.

Ok, tyle jeśli chodzi o JS w XUL-u na dziś, lecz to jeszcze nie koniec bo chciałem Wam bardzo fajny element znaleziony podczas tłumaczenia dokumentacji XUL. W kolejnym poście postaram się dodać i omówić element script. Teraz o…

Element colorpicker:

Paleta kolorów, z której użytkownik może wybrać jedną komórkę siatki z kolorem poprzez kliknięcie w nią. Spójrzmy na prosty kod elementu:

<colorpicker type="button"/>

Przykład tego elementu wygląda natomist tak:

Tym kolorowym akcentem zapraszam na kolejną porcję XUL-a. Gwarantuje, że będzie o wiele wiele dłuższa.

BTW: Ma ktoś jakiś fajny pomysł na aplikację, którą można by było wykonać w XUL-u?

Zobacz także:

• Dokumentacja XUL
• Kurs XUL