Kolorowanie składni kodu PHP, CSS, HTML, JavaScript – poznajcie Prism

Kolorowanie składni kodu PHP, CSS, HTML, JavaScript – poznajcie Prism

Na stronach o tematyce programistycznej często zachodzi potrzeba załączenia do treści wpisu, fragmentu jakiegoś kodu - czy to PHP, HTML, CSS a może polecenia z bazy danych i skryptu JS. No fajnie, załączenie to nie jakiś wielki problem, ale jak zaprezentować to efektywnie, a przede wszystkim w czytelnej formie dla użytkownika?

Rozmiary w CSS względem obszaru roboczego, czyli vw, vh, vmax i vmin

Rozmiary w CSS względem obszaru roboczego, czyli vw, vh, vmax i vmin

Pora przedstawić rozwiązanie, którego sam jakiś czas szukałem. Generalnie wielkość bloków w HTMLu ustala się na podstawie liczby pikseli, procentów. Tymczasem jest również możliwość ustalenia marginesów, wielkości (i innych) dla bloku, względem obszaru roboczego.

Jak złamać długi ciąg znaków w HTML/CSS?

Jak złamać długi ciąg znaków w HTML/CSS?

To nie jest skomplikowana porada, aczkolwiek zauważyłem, że niektórzy zapominają o istnieniu tej "sztuczki" przy tworzeniu stron internetowych. Może się to przydać na przykład wtedy, gdy strona jest "rozciągnięta" przez jedno długie słowo, jeden długi link lub po prostu długi ciąg znaków. Jak się tego pozbyć?

Przewijany pasek społecznościowy Facebook, Twitter, Google Plus

Przewijany pasek społecznościowy Facebook, Twitter, Google Plus

Ostatnio zauważyłem, że coraz więcej blogów umieszcza tak zwane "social slider". Jest to pasek, który cały czas jest widoczny dla użytkownika (nawet przewijając stronę w górę i w dół). W tym pasku umieszcza się linki do Facebooka, Twittera i na przykład Google Plus. Wymieniam tylko te najpopularniejsze, moim zdaniem. Skoro tylu blogerów umieszcza tego typu dodatek na blogu to widocznie jest to użyteczne. Poprawia interakcję, bo użytkownik może polecić treść znajomym i zwiększa oglądalność bloga. Jak więc zrobić taki pasek?

Prosty skrypt galerii zdjęć z efektem Highslide – wersja 2

Prosty skrypt galerii zdjęć z efektem Highslide – wersja 2

Posiadasz wiele fotografii które chciałbyś zaprezentować, lecz nie masz czasu na wykonanie skryptu, który by to wszystko obsługiwał? Poniżej zobaczysz, jak stworzyć prosty silnik galerii zdjęć przy wykorzystaniu technologii Ajax do ich efektywnej prezentacji. Przedstawiam drugą wersję skryptu. Uwzględnia ona Wasze propozycje, które dodawaliście w komentarzach do poprzedniej wersji.

Jak wstawić domyślny tekst do pola wyszukiwarki? (oraz omówienie podstawowych pseudoklas w CSS)

Jak wstawić domyślny tekst do pola wyszukiwarki? (oraz omówienie podstawowych pseudoklas w CSS)

CSS posiada duże możliwości, jeżeli chodzi na przykład o formatowanie tekstu. Możliwe jest także panowanie nad różnymi elementami, jak mają się zachować w określonych przez nas sytuacjach. Jedną z nich jest pole wyszukiwarki na stronie - proste, nie wyróżnia się, ale jest przydatne. Postanowiłem dodać do niego tekst "Wyszukaj artykuł...", można to zrobić poprzez dodanie parametru value. Takie rozwiązanie posiada wadę, jeżeli faktycznie ktoś, będzie chciał skorzystać z wyszukiwarki to będzie musiał kliknąć w to pole, usunąć ten domyślny tekst, wpisać własny i wysłać zapytanie. Teraz pojawia się pytanie, po co utrudniać Użytkownikowi życie, skoro możemy tę drogę skócić.

Zmiana i rozjaśnienie obrazka po najechaniu kursorem

Zmiana i rozjaśnienie obrazka po najechaniu kursorem

To jest odpowiedź na pytanie zadane przez czytelnika tego serwisu - Wojtka. Zamieścił on komentarz pod postem "Prosty skrypt galerii zdjęć z efektem Highslide". Oto jego treść:

Witam, mam dwa takie same zdjęcia (czarno-białe i kolorowe) na początku jest czarno-białe ale chciałbym aby po najechaniu (a:hover) było kolorowe.

W odpowiedzi na powyższy komentarz napisałem, że rozwiązaniem tego problemu jest JavaScript. Ale nie jest to jedyne wyjście z problemu - więcej szczegółów w dalszej części posta.

Podkład muzyczny na stronie

Podkład muzyczny na stronie

Zamierzasz dodać do strony WWW podkład muzyczny, który byłby odtwarzany w tle bez koniecznej ingerencji użytkownika.

Można skorzystać z wbudowanych opcji oferowanych przez przeglądarki internetowe, a także bogatej i funkcjonalnej technologii Flash tworzonej przez Macromedia. W drugim przypadku przedstawiamy listę kilku wartych zainteresowania projektów, które wystarczy "wstawić" na stronę WWW.

Losowy element (tekst, obrazek, cytat)

Losowy element (tekst, obrazek, cytat)

Przydatną rzeczą na stronie WWW może okazać się wyświetlenie losowego tekstu lub obrazka. Tym sposobem można stworzyć bazę cytatów, krótkich porad a nawet bannerów reklamowych - pokazywanych użytkownikowi w sposób rotacyjny. Za każdym razem, gdy strona zostanie odświeżona zostanie wyświetlony nowy obrazek - czyli ta metoda pozwoli nam zaoszczędzić miejsca oraz czasu wczytywania witryny.

Umieszczanie wykresów na stronach www

Umieszczanie wykresów na stronach www

Dobrym pomysłem jest przedstawienie danych numerycznych na stronie internetowej, za pomocą wykresu. Istnieją dwie znane mi metody, na uzyskanie ciekawego efektu końcowego.

Jedną z nich jest wstawienie danych do arkusza kalkulacyjnego typu MS Excel, oraz wygenerowanie na ich podstawie obrazka z wykresem. Druga metoda jest dużo szybsza, sprawniejsza i wymaga mniej wkładu pracy. To liczne gotowe funkcje w PHP, czekające tylko na pobranie i wstawienie na stronę.