Miesięczne archiwum: Kwiecień 2010

SyntaxHighlighter – kod na stronie

syntaxhighlighter

Prowadząc na przykład serwis o programowaniu, warto użyć komponentu, który w przyjazny sposób zaprezentuje nam kod na stronie. SyntaxHighlighter to komponent który rozpoznaje około 20 języków. Okno z kodem jest ponumerowane (na linie kodu) tak jak w prawdziwym edytorze. Komponent oferuje kilka funkcji. Po pierwsze można otworzyć kod w nowym oknie w którym nie jest on już sformatowany, co ułatwia jego zaznaczanie. Po drugie przycisk, który kopiuje kod do schowka. No i trzecia opcja drukowanie kodu.

syntaxhighlighter

Link: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Demo
Licencja LGPL

Highcharts – profesjonalene wykresy

highcharts

Highcharts jest biblioteką komponentów wykresów zbudowanym z JavaScript. Biblioteka zapewnia szeroki wachlarz wykresów, które można zastosować do przedstawienia finansowych wykresów. Wykresy Highcharts cechują się płyną animacja podczas ładowania co czyni je bardziej atrakcyjniejszymi. Biblioteka wykresów jest dostępna za darmo do użytku domowego komercyjna wersja jest jednak płatna od 80$ – 360$

highcharts

Link: http://www.highcharts.com/demo/
Licencja: Darmowa, Płatna do użytku komercyjnego

Elegant Accordion elegannckie strony w jQuery i CSS3

Elegant Accordion

Libię takie bajery, proste i stylowe. Takie przesuwane zakładki ( z ang. akordeon) świetnie nadają się na stronę np. z meblami lub tkaninami. Prosty tutorials pokaże jak szybko umieścić komponent na stronie. Komponent wymaga jQuery oraz przeglądarka musi obsługiwać CSS3 w przeciwnym razie nie będzie widać całego efektu.

Elegant Accordion

Wymagania: jQuery, CSS3
Linki: http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/
Licencja: Darmowa

Animal Captcha – zwierządka zamiast liter w MooTools :)

Animal Captcha

Captcha to zabezpieczenie przed spamerami, które polega na tym ze zanim wyśle się jakąś wiadomość system musi sprawdzić „czy internauta jest człowiekiem”. Inaczej mówiąc, system musi sprawdzić  czy wiadomości nie wysyła  jakiś mechanizm to zamieszczania spamu. Jest to sprawa dość uciążliwa dla ludzi, ponieważ  kody są bardzo niewyraźnie wygenerowane, a to wszytko po to, aby jak najbardziej utrudnić życie spamerom. Cierpią na tym oczywiście ci prawdziwi użytkownicy, bo przecież automat nie wkurzy się, jeżeli źle wpisze kod z obrazka :). Projekt Animal Captcha ma szanse rozpocząć nowa drogę w zabezpieczaniu formularzy, ponieważ nie opiera on się na logicznej symbolice ale na percepcji wzrokowej rozumianej tylko przez ludzi. Nie jestem przekonany czy akurat Animal Captcha będzie dobrym systemem zabezpieczeń. Łatwo mi jest wyobrazić sobie mechanizm. który na przykład odczytuje piksele z obrazka a administrator systemu spamowego przyporządkuje obrazki do zwierzęcia tworząc w ten sposób bazę wiedzy. Zdjęcia musiał by być coraz nowsze, zmieniać odcienie, kontrast, kolorystykę itp. zachowując tym samym swoją czytelność. No ale jak coś jest mało popularne to często jest bardziej bezpieczne z racji tego ze nie ma chętnych na ich łamanie.  Komponent wyświetla 9 obrazków na którym trzeba wskazać odpowiednie zwierzątka.

Animal Captcha

Wymagania: MooTools Framework
Link: http://code.google.com/p/animalcaptcha/
Licencja

Foto Galeria w CSS3 i jQuery

css3 jquery fotogallery

Bardzo fajna galeria wykonana w jQuery i CSS3. Jest tylko jedna uwaga. CSS3 nie jest jeszcze standardem. Jest obsługiwany przez większość przeglądarek, ale nie przez największą Internet Explorer. Galeria nie dział też na Operze, a na Chrome widać pikseloze :) No ale czepiać się nie można bo to nie jest standard, ale mogli by się pospieszyć :)

css3 jquery fotogallery

Wymagania: CSS3, jQuery
Linki: http://css-tricks.com/examples/CSS3PhotoGallery/
Licencja: Darmowa

Google maps w jQuery

google_map_jquery

Tworząc proste mapki w Google maps API nie trzeba kierować się tutorialami na stronie Google. Duż0 prościej jest użyć jQuery. Różnica miedzie Google maps API a jQuery tkwi w prostocie ponieważ możemy wyświetlić mapkę używając praktycznie 3 linijek kodu. Inne rzeczy mogą zająć nie wiele więcej linijek kodu. Na podanej poniżej stronie znajduje się 27 sposobów na wykorzystanie Google maps z użyciem jQuery.

google_map_jquery

Wymagania: jQuery
Link: http://www.mayzes.org/googlemaps.jquery.html
Licencja: MIT, GPL

Pupunzi – zakładki w jQuery

mb_tabset

Zakładki to bardzo pomysłowa rzecz, rozwiązują kilka problemów natury koncepcyjnej :) Ten komponent zakładek udostępnia kilka ciekawych funkcji. Przede wszystkim można umieszczać jedną zakładkę w drugiej. Po drugie zakładki można ustawiać w kolejności. Zakładki nie przełączają się od razu, ale towarzyszy im szybkie i płynne przejście. Komponent korzysta z biblioteki jQuery.

mb_tabset

Wymagania: jQuery
Link: http://pupunzi.com/#mb.components/mb.tabset/tabset.html
Licencja MIT, GPL