Adriano - WEB is Brutal

AngularJS – czyli JS i HTML na dopalaczach

AngularJS

Pamiętam swoje pierwsze spotkanie z jQuery – nie wiem kiedy to było, ale wyglądało to tak: zobaczyłem, a po chwili już używałem. Tak samo było z Angularem.

Co dało nam jQuery? Przede wszystkim wygodę, bo w kilku liniach można wykonać coś, co w czystym JavaScripcie wymaga już odrobinę więcej wysiłku. Podobnie dzięki AngularJS można podejść do aplikacji webowych nieco inaczej – tworząc je szybciej i wygodniej. Dodatkowo taką aplikację webową można stworzyć po prostu dobrze dzięki łatwiejszej organizacji kodu.

Pomiędzy akapitami...

Większość z Was korzysta z Google Readera, który już w poniedziałek przestanie działać - najwyższa pora aby znaleźć inne rozwiązanie dla siebie i zasubskrybować bloga raz jeszcze - ja używam teraz Feedly, serwis ten jest OK, polecam :)

Wydajniejsze pokazy slajdów dzięki CSS3

rotat9r

Na wielu stronach można znaleźć animowane pokazy slajdów (obrazy, teksty, itd) - jednak ciągle są wykorzystywane stare skrypty które używają animacji JavaScript zamiast bardziej wydajnych animacji CSS3.

Popularną wtyczką jest jQuery Cycle - to rozwiązanie niby idealne bo proste. Ale już nie dzisiaj...
Obsługa CSS3 jest już tak powszechna, że należy już bezwzględnie zapomnieć o ciężkich rotatorach.

Alternatywą jest rotat9r działający w oparciu o JS, ale gdzie główną siłą napędową jest właśnie CSS3.

CSS - Reaktywujemy :visited

Krótko: dzisiaj o :visited, zmianach, 'obchodzeniu' tych zmian i o samym pomyśle wprowadzania tego typu ograniczeń. Pokażę jak zrobić dla linków ikonki dzięki którym będzie można rozróżnić linki odwiedzone, od tych nieodwiedzonych (z uwzględnieniem nowych ograniczeń).

Czekają nas zmiany (na plus i na minus) dotyczące pseudoklasy :visited związane z prywatnością. W przeglądarce Safari 5 zmiany już wprowadzono, a w Firefoksie 'nowe zasady' będą obowiązywać już za niedługo. Użytkownicy Firefoksa 4.0b1 już mogą dostrzec, że na wybranych stronach 'coś nie działa'. Kiedy miliony użytkowników Firefoksa zaktualizuje swoje przeglądarki, to już o nowym podejściu do :visited będzie trzeba pamiętać (większości nie da się już lekceważyć).

Ograniczenia są dość duże, ale nie oznacza to konieczności rezygnacji z naszej pomysłowości.

Flash? Nie, dziękuje - nietypowe menu w jQuery

Dzisiaj zaprezentuję prostą sztuczkę na stworzenie takiego przykładowego menu bez najmniejszego wykorzystania Flasha. Niektórym na początek może wydawać się to nawet niemożliwe, ale jednak - JavaScript w połączeniu z grafiką wiele potrafi.

Metoda wykonania jest banalnie prosta. Czasami dziwię się, dlaczego twórcy stron tworząc nawet najdziwniejsze menu, ciągle bazują na starej zasadzie - poruszaj elementem: góra, dół, lub: prawo, lewo. Wiadomo, z jednej strony użyteczność, ale z drugiej trochę odmienności nikomu też nie zaszkodzi (z umiarem i w odpowiednim miejscu, tworząc np. portfolio). Ja do tej pory spotykałem jedynie strony we Flashu które łamały tą zasadę wykazując nieco, nazwijmy to 'kreatywności', co jednak nie zawsze wychodziło.

CSS - style dla elementów 'nieoznaczonych'

Czasami zdarza się taka sytuacja kiedy mamy dostęp jedynie do fragmentu kodu HTML (bez możliwości jego zmiany), a musimy przypisać określony kod CSS danym elementom nie mając tzw 'punktu zaczepnego' do którego możemy się odnieść.

(Opisywane tutaj rozwiązania są bardzo proste dla osób znających CSS w stopniu przynajmniej podstawowym. W dalszej części opiszę rozwiązania nieco bardziej 'zaawansowane' w porównaniu z tymi pierwszymi).

Ostatnio na blogu umieściłem boksy reklamowe z Blogvertising.pl (milionów na tym nie zarabiam, ale mam zamiar przeznaczyć te 'kilka groszy' na reklamę własnego bloga). Reklama inwazyjna nie jest, więc nic nie tracę. Jednak nie podobał mi się ten specyficzny niebieski kolor obrazka z tekstem 'wykup box' [zobacz]. Postanowiłem go zmienić na coś co będzie nieco mniej niebieskie. Jak widać (po prawej) udało się.

Dzisiaj dostałem e-maila z pytaniem jak można coś takiego osiągnąć. Tak więc odpowiadam.. ;)

Inteligentne menu w CSS

Ostatnio wszelkiego rodzaju menu zbudowane wyłącznie z użyciem CSS'a stały się popularne.Po co używać JavaScriptu jeśli te same możliwości daje na sam CSS? No właśnie. CSS w połączeniu z grafiką też ma duże możliwości. Jednak zauważyłem, że minusem takich rozwiązań jest konieczność rezygnacji z płynnej dynamiczności. Nie spotkałem do tej pory menu CSS które mogłoby przykładowo pochwalić się płynnym przejściem tła z jednego elementu do drugiego.
Postanowiłem sprawdzić czy uda mi się ten problem jakoś rozwiązać...

I tak powstało to: dynamiczne menu z płynnym efektem przejścia.

Upiększanie czcionek poprzez CSS

Zauważyłem ostatnio w sieci ciekawy trend zamieniania zwykłych tekstowych nagłówków, na nagłówki 'Flashowe'. Wygląda to zazwyczaj tak. Dzięki temu możemy cieszyć się na stronie (między innymi) czcionkami które trudno jest użyć 'standardowymi' metodami.

Oczywiście oprócz plusów, są też i minusy takiego rozwiązania (związane z użytecznością i dostępnością strony). Zobacz: "Flash to zło". Jednak wady tego rozwiązanie można z łatwością wyeliminować - wystarczy CSS.

Formularze - 3 x submit

Czasami istnieje potrzeba, aby umieścić w jednym formularzu kilka przycisków 'submit' - zobacz przykład. W przeglądarkach Internet Explorer i Opera zauważymy, że niezależnie od wybranego pola tekstowego podświetlony zostanie zawsze pierwszy submit (screen).

Z punktu widzenia użyteczności, takie zachowanie przeglądarek nie jest mile widziane. Użytkownicy będą wprowadzani w błąd - podświetlenie innego submit'a będzie mylnie sugerowało jego użycie.

Flash to zło

Flash

Z czym kojarzy się Tobie 'Flash'? Z natrętnymi reklamami, z ciekawymi i humorystycznymi gierkami, a może z filmami dostępnymi wprost w przeglądarce?Flash ma bardzo szerokie zastosowanie: od multimedialnych prezentacji, aż po wspomniane reklamy.Łatwość osiągnięcia wyników efektowniejszych niż w przypadku standardowych metod (xHTML, CSS, JS), stała się dla Flash'a głównym sprzymierzeńcem w opanowaniu Globalnej Sieci. Jednak coś poszło nie tak - w Internecie wciąż dominuje 'czysty tekst' i nic nie wskazuje na szybką zmianę tej sytuacji.

Gdy białe jest czarne, a czarne jest białe

Projektowanie stron - wszystko zazwyczaj wygląda tak samo (w uproszczeniu): najpierw pomysł, następnie odpalamy program graficzny i tworzymy. Później gdy nasze dzieło jest 'ok' zaczynamy cięcie grafiki. (X)HTML i wszystko ładnie się układa. Dla pewności sprawdzamy stronę na kilku najpopularniejszych przeglądarkach i gdy jesteśmy zadowoleni z efektów swojej pracy, umieszczamy stronę w Sieci. Pozycjonujemy, reklamujemy, wszyscy są zadowoleni ...
Czy na pewno wszystko jest tak jak powinno być?