Create WWW

Dziś po krótkiej przerwie pojawiła się strona sejmu. Na zdrowy rozum, informatycy, programiści, autorzy tej strony zabezpieczyli ją na tyle, że żaden haker zabezpieczeń już jej nie złamie.

WchodzÄ…c na stronÄ™ sejmu, na pierwszy rzut oka widzimy wyszukiwarkÄ™. PróbujÄ…c cokolwiek wpisać – można odnieść wrażenie że to tylko taka grafika.

Więc będąc ciekawym, czy to taki niedorobiony element graficzny czy może wyszukiwarka będąca zapewne miejscem prób hakerskich nad przejęciem strony, odpalam Firebuga, narzędzie do przeglądania kodu źródłowego strony. I moim oczom ukazuje się:

Programiści sejmowi widocznie doszli do wniosku, że najlepszym zabezpieczeniem jest ukrycie wyszukiwarki. Co uczynili. Ale osoba ją ukrywająca miała wiedzę z zakresu CSS, więc wg niej ukryć znaczy dopisać:

display:none;

Więc, włączmy sobie tą opcję zmieniając na true:

I już nam wyszukiwarka działa / nie działa:

Każde zapytanie do wyszukiwarki generuje pustÄ… stronÄ™. A premier wÅ‚aÅ›nie na TVN24 mówi o tym, że strony rzÄ…dowe sÅ‚użą do wyszukiwania informacji – hmm… nie strona Sejmu.

Najlepszym sposobem na naprawę funkcjonalności strony jest pozbycie się ich ze strony improwizując grafiką. Oby tak dalej!

Kolejna dawka praktycznych przykładów pokazujących możliwości jQuery. Przeszukując sieć w poszukiwaniu potrzebnych nam w danym momencie nam informacji, nie raz trafiamy na bardzo ciekawe artykuły, prezentujące nam w różny sposób możliwości wyświetlania galerii, zdjęć lub także prezentację zawartości strony. Poniżej zbiór kolejnych kilku ciekawych zastosowań jQuery, tym razem w większości poświęcony wyświetlaniu galerii oraz prezentacji treści.

Podpowiedzi i podglÄ…d obrazków – 3 przykÅ‚ady wykorzystania

Podpowiedzi – kilka przykÅ‚adów w jaki sposób je wykorzystać. Np na mapach…

Kilka sposobów wyświetlenia galerii na stronie (lightboxy itp.)

- Spacegallery

- prettyPhoto – klon lightboxa

- prettyGallery – kolejny sposób wyÅ›wietlania galerii

- NyroModal

- Pirobox jQuery Lightbox – przykÅ‚ady

- Galleriffic – szybkie generowanie galerii

- jQuery Gallery Plugin

- jQuery Lightbox Plugin (balupton edition) – przykÅ‚ady

I na koniec jeszcze prosty pokaz slajdów…

Warto także przeczytać poprzedni wpis także poświęcony możliwościom jQuery. Już niebawem kilka kolejnych zastosowań w postaci przykładów.

W skrócie czym jest jQuery?

jQuery to lekka Biblioteka programistyczna dla języka JavaScript, ułatwiająca współdziałanie JavaScript oraz HTML. (Wikipedia)

jQuery możemy wykorzystać w celu uczynienia naszej strony bardziej interaktywnÄ…, co nada jej bardziej interesujÄ…cy wyglÄ…d dla użytkownika. Wpis ten jest zbiorem 35+ praktycznych przykÅ‚adów wykorzystania tej jQuery na wÅ‚asnej stronie. Warto mieć pod rÄ™kÄ… spisane wartoÅ›ciowe przykÅ‚ady, które pokazujÄ… jak wykorzystać i do czego je zastosować. W pokazanych poniżej przykÅ‚adach wiÄ™kszość zwiÄ…zana z zastosowaniem do obsÅ‚ugi formularza, w miarÄ™ upÅ‚ywu czasu uzupeÅ‚nione zostanÄ… pozostaÅ‚e kategorie…

Wgrywanie plików…

- Multiple File Upload Plugin (jQuery.MultiFile) – pozwala na na wczytanie kilku plików na serwer, bez koniecznoÅ›ci zatwierdzania formularza

- AjaxFileUpload – prosty przykÅ‚ad wgrywania plików na serwer

- Menedżer plików/obrazów – demo

- Menedżer plików/obrazów (wtyczka do edytora FCKeditor) – demo

- Menedżer plików/obrazów (wtyczka do edytora Tinymce) – demo

- http://www.pixeline.be/experiments/jqUploader/test.php Wgrywanie plików za pomocą jq

- Zastosowanie wgrywania plików lub obrazków wewnÄ…trz formularza z wiÄ™kszÄ… iloÅ›ciÄ… pól – demo

Wtyczki pozwalające na zmianę wyglądu pól formularzy!

- jQuery Calculation Plug-in (v0.2) – proste w użyciu funkcje jQuery zastosowane do zwykÅ‚ych funkcji matematycznych.

- jQuery Field Plug-in (v0.9.1) – wtyczka znacznie rozszerzajÄ…ca możliwoÅ›ci elementów formularza.

- Inne spojrzenie na elementy formularza – przykÅ‚ad

- jQuery UI: zmiana wyglÄ…du pola opcji i pola wyboru

- Selectbox – pozwala na zamianÄ™ zwykÅ‚ego elementu selectbox na Å‚adniejszy wyglÄ…dem – demo

- Filtrowanie wprowadzanej zawartości w pola formularza

- Pole wyboru jako obrazek – przykÅ‚ad pokazuje jak zrobić alternatywne i o wiele Å‚adniejsze pola wyboru, niż te jakie nam oferuje standardowo jÄ™zyk HTML.

- Automatycznie powiÄ™kszajÄ…ce/zmniejszajÄ…ce siÄ™ pole tekstowe – dziaÅ‚ajÄ…cy przykÅ‚ad.

- AutouzupeÅ‚nianie pól tekstowych w formularzu – opis przykÅ‚adu

- FCBKcomplete – auto uzupeÅ‚nianie podobne do tego zamieszczonego na Facebooku demo

- Kolejne pola wyboru – pozwalajÄ…ce użyć arkusza CSS oraz etykiety do nadania stylu dla pola wyboru.

- Wtyczka – pozwalajÄ…ca na nadanie stylu dla przycisku opcji dodawanego za pomocÄ… elementu input.

Okienka dialogowe

- jQuery Impromptu

Wtyczki do obsługi obrazków!

- imgAreaSelect – jest wtyczkÄ… pozwalajÄ…ca zaznaczać prostokÄ…tne obszary na obrazku

- Automatyczne skalowanie rozmiaru obrazka

Różne zastosowania…

- Chmura tagów – zredukowano ilość tagów poprzez wyÅ›wietlenie szczegółów tagu jako efekt hover

- jQuery.Preload – demo

- Wtyczka pomagajÄ…ca na podziaÅ‚ stron – przykÅ‚ad

- liScroll – wtyczka jQuery przetwarzajÄ…ca listÄ™ zdefiniowanÄ… za pomocÄ… elementów li na przewijany pasek najnowszych np. wpisów

- Przewijany pokaz pozycji

- Zwija / rozwija dodatkowy tekst oraz dodaje odnoÅ›nik ‘czytaj wiÄ™cej’

GÅ‚osujemy…

- Skrypt paska gÅ‚osowania – oparty na PHP oraz MySQL-u, dziaÅ‚a jak każdy tego typu web 2.0-owy skrypt (gÅ‚osowania odbywa siÄ™ bez przeÅ‚adowania siÄ™ strony)

- Sonda w Ajaksie

Edytory, pozwalajÄ…ce na pracÄ™ w bardzo szybki i wydajny sposób…

- Edytor pól tekstowych w Ajaksie

- przykÅ‚ad – edytor stosujÄ…cy Ajax, umożliwiajÄ…cy zmiany na stronie bez używania do tego przycisku potwierdzajÄ…cego zmiany

Podpowiedzi…

- Skrypt podpowiedzi w JavaScripcie

- Autolink, mailto, highlight – kilka fragmentów kodu do automatycznego generowania w tekÅ›cie odnoÅ›ników typu (http/https/ftp), oraz do tworzenia odnoÅ›ników adresów e-mail i pozwalajÄ…cy na ich podÅ›wietlanie.

- Podgląd wyglądu strony w linku za pomocą wyświetlonej miniatury generowanej przy zastosowaniu strony http://www.websitethumbnails.net. Tworzy miniaturę strony do jakiej odnosi się link, podgląd stworzony zostaje po najechaniu na odnośnik kursorem myszki.

Elementy interfejsu: drzewa, menu, okienka dialogowe…

- Wtyczka jQuery Accordion pozwala tworzyć menu rozwijane / zwijane działające w sposób przypominający akordeon.
–

- Menu, okienka dialogowe, Drzewa, Siatki w Ajaksie

To oczywiście nie koniec listy, z czasem uzbiera się nowa lista wtyczek wartych polecenia, to zaktualizuje ten wpis, dlatego polecam śledzić bloga. Na koniec polecam 3 poniższe artykuły wprowadzające do jQuery.

Zobacz także:

• Wprowadzenie do jQuery
• jQuery – to Å‚atwe!
• jQuery – od czego zacząć?

Muzyka na stronie – temat dość kontrowersyjny. Jako, że sam nie polecam stosowania jakiegokolwiek zagnieżdżania muzyki na stronie www, to czasem nie da rady obejść wymagaÅ„ klienta i pomimo wÅ‚asnych uprzedzeÅ„ trzeba tÄ… muzykÄ™ na stronÄ™ wstawić.
JeÅ›li już wstawiamy muzykÄ™ na stronÄ™, to jedna bardzo ważna zasada – nie katujmy użytkownika danej strony tym, że w momencie gdy przechodzi on na jedna z podstron serwisu musi on sÅ‚uchać zagnieżdżonego fragmentu muzyki po raz kolejny od poczÄ…tku!

W sieci można znaleźć kilka sposobów (ja znalazłem 3 możliwości) na osiągnięcie płynnego odtwarzania muzyki, pozwalającego na jednoczesne przeglądanie zawartości serwisu. Oto one:
- Zastosowanie ramek -> samo wykorzystanie ramek w tym momencie eliminuje jego wykorzystanie,
- Zrobienie caÅ‚ej strony we Flashu – co mi siÄ™ kojarzy równie podobnie jak wspomniane ramki,
- Zastosowanie wyskakujÄ…cego okienka – co jest także zÅ‚e, ale z trojga zÅ‚ego jeszcze do zaakceptowania, oczywiÅ›cie liczÄ…c siÄ™ z irytacjÄ… użytkownika, który zapewne uwielbia jak mu z boku wyskakujÄ… niekontrolowane, niepożądane okna oraz należy siÄ™ liczyć z tym, że wiÄ™kszość użytkowników ma wÅ‚Ä…czonÄ… blokadÄ™ wyskakujÄ…cych niespodzianek.

Przeglądając kilka tygodni temu artykuły w serwisie Nettuts, jeden przykuł moja uwagę. Może nie tyle on co powstały w jego wyniku przykład wykorzystania jQuery do animowanego wczytywania zawartości podstron w jakimś tam serwisie.

DziaÅ‚a on w bardzo prosty sposób. WchodzÄ…c na stronÄ™, wczytana zostaje jej zawartość, w momencie gdy chcemy przejść na podstronÄ™, doczytywana jest tylko treść z okreÅ›lonego diva, czyli wszystko nad znacznikiem div nie jest ponownie wczytywane podczas odÅ›wieżenia strony.

Pojawia się więc możliwość umieszczenia np. odtwarzacza z nieszczęsną muzyką powyżej zawartości, która doczytuje podstrony wykorzystując jQuery.

Przykład: http://medeco.p9.pl/ex/muzyka/

Pomimo znalezienia owego sposobu na wyżej opisany problem (bo opisany przeze mnie sposób w 95% przypadków może z powodzeniem zastąpić wspomniane powyżej) oraz pomimo tego, że nie trzeba stosować prehistorycznego kodu lub robienia całej strony we Flashu, to nie udało mi się wykorzystać go do celu w jakim go wymyśliłem :/.
Powodem było/jest to, że strona jaką ostatnio robiłem i, na której musiałem zastosować muzykę, posiada na każdej podstronie inne tło definiowane w body (czyli w części gdzie nie dochodzi do doczytania podstrony), co nie pozwala na wykorzystanie rozwiązania.
Może ktoś ma jakiś pomysł jak zmienić dodatkowo tło podstrony bez przeładowania? Chyba, że znacie jeszcze inne sposoby na ww. problem?

W każdym bądź razie może komuś się przyda powyższy pomysł na użycie muzyki na stronie .

Oryginalny wpis był przeze mnie umieszczony na prywatnym blogu, gdzie także zapraszam.