Na stronie www:
można pobrać wszystkie numery pro dialog wydawnictwa pti (polskie towarzystwo informatyczne).
Pokazywanie postów oznaczonych etykietą PHP. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą PHP. Pokaż wszystkie posty
Czasopismo pro dialog wszystkie numery w pdf
Witam,
Na stronie www:
można pobrać wszystkie numery pro dialog wydawnictwa pti (polskie towarzystwo informatyczne).
Na stronie www:
można pobrać wszystkie numery pro dialog wydawnictwa pti (polskie towarzystwo informatyczne).
Informatyczne książki wszech czasów top 20 z ostatnich 40 lat
Informatyczne książki wszech czasów top 20 z ostatnich 40 lat:
Jak napisać program na zamianę stopni celcjusza na fahrenheita - algorytm w c++
Witam,
W tym post-cie wytłumaczę Wam jak napisać algorytm zamiany stopnie celcjusza na farenhajta.
Źródła - C++ (Program zamiany stopnie celsjusza na fahrenheita):
Opis:
1. - główna funkcja algorytm - wynikiem funkcji jest stopień fahrenheita ze stopnia celsjusza;
2. - program demonstrujący, działanie algorytmu;
W tym post-cie wytłumaczę Wam jak napisać algorytm zamiany stopnie celcjusza na farenhajta.
Źródła - C++ (Program zamiany stopnie celsjusza na fahrenheita):
Opis:
1. - główna funkcja algorytm - wynikiem funkcji jest stopień fahrenheita ze stopnia celsjusza;
2. - program demonstrujący, działanie algorytmu;
Wszystkie pliki z źródłami (w tym exe do uruchomienia):
Program zamiany stopnie celsjusza na fahrenheita
Gra kółko i krzyżyk algorytm gry strategia mini-max
Witam,
IDEĄ TEGO artykułu, jest pokazanie najprostszego możliwego rozwiązania na zaimplementowanie internetowej gry kółko i krzyżyk osadzonej w dowolnej przeglądarce internetowej.
Algorytm kółko i krzyżyk
gra ma dwie opcje: myślący i nieinteligentny komputer według mini-max
- do Ciebie należy zawsze pierwszy ruch rozpoczynający rywalizacje gry kółko i krzyżyk.
I to by było na tyle miłej zabawy, :)
IDEĄ TEGO artykułu, jest pokazanie najprostszego możliwego rozwiązania na zaimplementowanie internetowej gry kółko i krzyżyk osadzonej w dowolnej przeglądarce internetowej.
Algorytm kółko i krzyżyk
stworzony według strategii mini-max:Algorytm kółko i krzyżyk
gra ma dwie opcje: myślący i nieinteligentny komputer według mini-max
- do Ciebie należy zawsze pierwszy ruch rozpoczynający rywalizacje gry kółko i krzyżyk.
I to by było na tyle miłej zabawy, :)
Każdy mój artykuł, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od 7, z Firefox od 3.6.3, z Opera od 9.63, z Safari od 5.x i z Chrome od wersji aktualnej
Jak używać przycisk (button) oraz input korzystając z jQuery
Witam,
W tym krótkim poście pokaże bardzo szybko jak używać button oraz jak używać przycisk input przy pomocy z jQuery.
Często wprowadzamy atrybut "disabled" do input w form lub do przycisk button
Ten atrybut jest bezargumentowy!
Do usunięcia input, przycisku button oraz aby wyłączyć input, przycisk button należy korzystając z jQuery wpisać kod:
$("input").removeAttr('disabled');
Do wstawienia input, button przycisk oraz żeby włączyć input, button przycisk powinno się korzystając z jQuery użyć kodu:
$("input").attr('disabled','disabled');
W tym krótkim poście pokaże bardzo szybko jak używać button oraz jak używać przycisk input przy pomocy z jQuery.
Często wprowadzamy atrybut "disabled" do input w form lub do przycisk button
Ten atrybut jest bezargumentowy!
Do usunięcia input, przycisku button oraz aby wyłączyć input, przycisk button należy korzystając z jQuery wpisać kod:
$("input").removeAttr('disabled');
Do wstawienia input, button przycisk oraz żeby włączyć input, button przycisk powinno się korzystając z jQuery użyć kodu:
$("input").attr('disabled','disabled');
Każdy mój artykuł, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od 7, z Firefox od 3.6.3, z Opera od 9.63, z Safari od 5.x i z Chrome od wersji aktualnej.
Jak zdobyć więcej lajków followersów likes na facebook blogu instagram
IDEĄ TEGO POSTA, jest pokazanie najprostszego możliwego rozwiązania na zaimplementowanie lajków followersów likes na facebook blogu instagram stronie WWW osadzonej w dowolnej przeglądarce internetowej.
SPOŁECZNOŚCI (SOCIAL) można wykorzystać do pozyskania więcej lajków followersów likes!
Dotyczą one: facebook, twitter, instagram, google+, youtube, NK, LinkedIn, Myspace, Blip, Xing, Wykop i WIELE WIĘCEJ.
Każdy, nawet nie znający się na programowaniu, w 15 minut może mieć przyciski "jak zdobyć więcej" lajków followersów likes u Siebie.
Kod można wykorzystać także do zamieszczania Swoich dodatkowych wstawek social - aby zdobyć więcej odwiedzających na facebook blogu instagram.
A tak to cudeńko (Jak zdobyć więcej lajków followersów likes) wygląda:
NO to zaczynamy!!!
Poniżej gotowe rozwiązanie, które jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.
Pod spodem jest jego dokładny opis oraz inne zagadnienia, które stanowią jego rozszerzenie.
Źródło:
Opis będzie się składał z rzeczy najważniejszej.
Aby to cudeńko działało, należy utworzyć konto w: www.addthis.com.
Oraz w ustawieniach założyć Publisher Profiles.
Po tej czynności dostaniemy: pubid, który zastępujemy moim: katmpbsoft, w linii 97:
I to by było na tyle miłej zabawy, :)
SPOŁECZNOŚCI (SOCIAL) można wykorzystać do pozyskania więcej lajków followersów likes!
Dotyczą one: facebook, twitter, instagram, google+, youtube, NK, LinkedIn, Myspace, Blip, Xing, Wykop i WIELE WIĘCEJ.
Każdy, nawet nie znający się na programowaniu, w 15 minut może mieć przyciski "jak zdobyć więcej" lajków followersów likes u Siebie.
Kod można wykorzystać także do zamieszczania Swoich dodatkowych wstawek social - aby zdobyć więcej odwiedzających na facebook blogu instagram.
PONIŻEJ JEST W PEŁNI DZIAŁAJĄCY LINK DO TEGO CO OPISAŁEM POWYŻEJ (HTML5, XHTML i HTML 4) - wystarczy kliknąć i masz:
Patrz tutaj
Patrz tutaj
A tak to cudeńko (Jak zdobyć więcej lajków followersów likes) wygląda:
NO to zaczynamy!!!
Poniżej gotowe rozwiązanie, które jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.
Pod spodem jest jego dokładny opis oraz inne zagadnienia, które stanowią jego rozszerzenie.
Źródło:
Opis będzie się składał z rzeczy najważniejszej.
Aby to cudeńko działało, należy utworzyć konto w: www.addthis.com.
Oraz w ustawieniach założyć Publisher Profiles.
Po tej czynności dostaniemy: pubid, który zastępujemy moim: katmpbsoft, w linii 97:
I to by było na tyle miłej zabawy, :)
Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od 7, z Firefox od 3.6.3, z Opera od 9.63, z Safari od 5.x i z Chrome od wersji aktualnej
How to use the button and input using jQuery
Hello,
Often introduced attribute "disabled" to forms or to input of the form or other button.
This attribute is no arguments!
To disable it using jQuery should be:
To enable it using the jQuery should be:
Often introduced attribute "disabled" to forms or to input of the form or other button.
This attribute is no arguments!
To disable it using jQuery should be:
$("input").removeAttr('disabled');To enable it using the jQuery should be:
$("input").attr('disabled','disabled');
Each of my posts, in a greater or lesser extent relating to the internet programming is always compatible with IE from version 7, Firefox from version 3.6.3, Opera from version 9.63, Safari from version 5.x and Chrome from current version.
Joomla pozycjonowanie stron www
Założyłem serwis internetowy (stronę WWW) w Joomla i natrafiłem na pierwszy problem, jak pozycjonować poszczególne strony, podstrony, tematy, serwis, wpisy w wyszukiwarce Google.
Domyślnie każdy tytuł stron, podstron, tematów, serwisu, wpisów jest w postaci: tylko globalny tytuł witryny lub tylko globalny tytuł strony, podstrony, tematu, serwisu, wpisu.
W związku z faktem, że dla robotów Google, zajmujących się pozycjonowaniem najważniejszy jest tytuł strony WWW, więc należało by ustawić tytuł (strony, podstrony, tematu, serwisu, wpisu) + tytuł strony WWW.
Poniżej rozwiązanie:
W panelu administracyjnym Waszego serwisu internetowego (strony WWW) - joomla,
ustawiamy:
Panel Administratora -> Konfiguracja -> Konfiguracja Globalna -> Nazwa Witryny -> tu wpisujecie globalny tytuł
oraz
Panel Administratora -> Konfiguracja -> Konfiguracja Globalna -> Optymalizacja Dla Wyszukiwarek -> Nazwa Witryny Do Tytułów Stron -> i ustawiamy koniecznie "Po"
Uwaga! - "Po" dlatego, aby tytuł: stron, podstron, tematów, serwisu, wpisów, był przed globalnym tytułem strony WWW, ponieważ, globalny tytuł strony WWW może być bardzo długi, a roboty Google za najważniejsze uważają początek tytułu i stopniowo ważność ta spada.
Rysunek:
Ten sposób wystarczy - pod warunkiem, że będziecie dbać o prawidłowe merytoryczne tytuły: stron, podstron, tematów, serwisu, wpisów.
Domyślnie każdy tytuł stron, podstron, tematów, serwisu, wpisów jest w postaci: tylko globalny tytuł witryny lub tylko globalny tytuł strony, podstrony, tematu, serwisu, wpisu.
W związku z faktem, że dla robotów Google, zajmujących się pozycjonowaniem najważniejszy jest tytuł strony WWW, więc należało by ustawić tytuł (strony, podstrony, tematu, serwisu, wpisu) + tytuł strony WWW.
Poniżej rozwiązanie:
W panelu administracyjnym Waszego serwisu internetowego (strony WWW) - joomla,
ustawiamy:
Panel Administratora -> Konfiguracja -> Konfiguracja Globalna -> Nazwa Witryny -> tu wpisujecie globalny tytuł
oraz
Panel Administratora -> Konfiguracja -> Konfiguracja Globalna -> Optymalizacja Dla Wyszukiwarek -> Nazwa Witryny Do Tytułów Stron -> i ustawiamy koniecznie "Po"
Uwaga! - "Po" dlatego, aby tytuł: stron, podstron, tematów, serwisu, wpisów, był przed globalnym tytułem strony WWW, ponieważ, globalny tytuł strony WWW może być bardzo długi, a roboty Google za najważniejsze uważają początek tytułu i stopniowo ważność ta spada.
Rysunek:
Ten sposób wystarczy - pod warunkiem, że będziecie dbać o prawidłowe merytoryczne tytuły: stron, podstron, tematów, serwisu, wpisów.
Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej
Steam Community Widget Counter Strike
Witam,
IDEĄ TEGO POSTA, jest pokazanie najprostszego możliwego rozwiązania na zaimplementowanie wysuwanego paska bocznego z kanałem STEAM Community osadzonych w dowolnej przeglądarce internetowej, szczególnie przydatnego dla graczy CounterStrike.
Pasek boczny można wykorzystać w dowolny sposób! - bazuje częściowo na kodzie: patrz tutaj
Ja pokażę jak je połączyć z STEAM.
Każdy, nawet nie znający się na programowaniu, w 15 minut może mieć wysuwany pasek bocznych współpracujących z najpopularniejszymi grami korzystającymi z STEAM, np.: CounterStrike.
Narzędziem programistycznym będzie biblioteka jQuery w wersji 1.7.0 bazująca na JavaScript oraz język do tworzenia stron internetowych HTML w najnowszej wersji 5.
NO to zaczynamy!!!
Poniżej gotowy kod, który jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.
KOD HTML 5 i jQuery:
PODSUMOWANIE:
Wystarczy że wszystko to co jest w części HEAD i wszystko to co jest w części BODY skopiujesz na Swoją stronę WWW do HEAD i BODY - dzięki temu masz STEAM na Swojej stronie WWW.
I to by było na tyle miłej zabawy, :)
IDEĄ TEGO POSTA, jest pokazanie najprostszego możliwego rozwiązania na zaimplementowanie wysuwanego paska bocznego z kanałem STEAM Community osadzonych w dowolnej przeglądarce internetowej, szczególnie przydatnego dla graczy CounterStrike.
Pasek boczny można wykorzystać w dowolny sposób! - bazuje częściowo na kodzie: patrz tutaj
Ja pokażę jak je połączyć z STEAM.
Każdy, nawet nie znający się na programowaniu, w 15 minut może mieć wysuwany pasek bocznych współpracujących z najpopularniejszymi grami korzystającymi z STEAM, np.: CounterStrike.
Narzędziem programistycznym będzie biblioteka jQuery w wersji 1.7.0 bazująca na JavaScript oraz język do tworzenia stron internetowych HTML w najnowszej wersji 5.
PONIŻEJ JEST W PEŁNI DZIAŁAJĄCY LINK DO TEGO CO OPISAŁEM POWYŻEJ - gotowe rozwiązanie, wystarczy kliknąć i masz:
Patrz tutaj
Patrz tutaj
NO to zaczynamy!!!
Poniżej gotowy kod, który jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.
KOD HTML 5 i jQuery:
<!DOCTYPE html>
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!--
/*
Plugin Name: Steam Widget KatMPBSoft
Plugin URI: https://www.katmpbsoft.pl/Blog/Steam/steam.htm
Author: Mark Bilski (KatMPBSoft)
Version: 1.0
Author URI: https://katmpbsoft.blogspot.com
Author URI: https://www.katmpbsoft.pl/index_en.htm
ALL IS FREE FOR COMMERCIAL USE
*/
-->
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
//<[!CDATA[
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#steam").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#steam").stop(true,false).animate({right: "-170px"}, 500 );
});
});
//]]>
</script>
<!--WIDGET STEAM-->
<div id="steam" style="right: -170px; z-index: 9997; background: #000000; padding: 0px; width: 170px; height: 398px; position: fixed; top: 264px; border: 0px solid #000000">
<a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="https://www.katmpbsoft.pl/BLOG/Paski/steam.png" />
<div style='background-color:#000000;'>
<script type="text/javascript" src="https://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('968cf80f-c1c6-423b-ba75-26275d84486e');</script>
<noscript>Get the <a href="https://www.widgetbox.com/widget/steam-community-group-the-black-night-gamin">Steam Community :: Group :: The Black Night Gamin</a> widget and many other <a href="https://www.widgetbox.com/">great free widgets</a> at <a href="https://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="https://support.widgetbox.com/">More info</a>)</noscript>
</div>
</div>
<!--END WIDGET STEAM-->
</body>
</html>
PODSUMOWANIE:
Wystarczy że wszystko to co jest w części HEAD i wszystko to co jest w części BODY skopiujesz na Swoją stronę WWW do HEAD i BODY - dzięki temu masz STEAM na Swojej stronie WWW.
I to by było na tyle miłej zabawy, :)
Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej
Formularz PHP Token captch hacking
PAMIĘTAJ!!!
Ten i kolejne materiały z cyklu łamania zabezpieczeń IT na moim blogu są tylko do celów edukacyjnych i pogłębiania swojej wiedzy, aby stać się lepszymi programistami i lepszymi administratorami serwerów oraz lepszymi administratorami serwerów baz danych.
Nie wolno moich przykładów wykorzystywać do niecnych celów, gdyż jest to karane i co więcej będę sam ścigał takie osoby.
Ten i kolejne materiały z cyklu łamania zabezpieczeń IT na moim blogu są tylko do celów edukacyjnych i pogłębiania swojej wiedzy, aby stać się lepszymi programistami i lepszymi administratorami serwerów oraz lepszymi administratorami serwerów baz danych.
Nie wolno moich przykładów wykorzystywać do niecnych celów, gdyż jest to karane i co więcej będę sam ścigał takie osoby.
Witam,
W tym post-cie pokażę jak można złamać podstawowe zabezpieczenia na wszystkich witrynach internetowych - mowa tu jest o token-ach.
Pokażę to na przykładzie witryny: www.moja11.pl.
Czyli w skrócie: za pomocą curl podłączamy się do dowolnej strony WWW i łamiemy zabezpieczenia w naszym przypadku: token-a.
Jest to pierwsza część na moim blogu dotycząca łamania zabezpieczeń komputerowych (zabezpieczeń IT).
W kolejnej post-cie opiszę: jak używać multi-curl do spamowania witryn internetowych (spamowania baz danych witryn internetowych do wielkich rozmiarów sięgających kilku lub nawet kilkudziesięciu GB - w przeciągu jednej doby [24 godzin]) - [zawsze jest lepiej spamować bazy danych niż serwery FTP, gdyż usługodawcy hostingowi zawsze mniejsze rozmiary dają na powierzchnie bazy danych niż na powierzchnie serwera FTP].
Zaczymamy!
Ok, wiemy co to jest curl i co to jest token. Co dalej!
Poniżej kod, który podłącza się do witryny internetowej: www.moja11.pl i wysyła formularz z menu kontakt - pomimo tego, że jest on zabezpieczony token-em.
Uwaga! - Często wiele witryn internetowych nie ma nawet zabezpieczenia w formie token-u i wtedy wystarczy sam curl, bez części poniższego kodu, który łamie token.
PAMIĘTAJ!!!
Ten i kolejne materiały z cyklu łamania zabezpieczeń IT na moim blogu są tylko do celów edukacyjnych i pogłębiania swojej wiedzy, aby stać się lepszymi programistami i lepszymi administratorami serwerów oraz lepszymi administratorami serwerów baz danych.
Nie wolno moich przykładów wykorzystywać do niecnych celów, gdyż jest to karane i co więcej będę sam ścigał takie osoby.
Ten i kolejne materiały z cyklu łamania zabezpieczeń IT na moim blogu są tylko do celów edukacyjnych i pogłębiania swojej wiedzy, aby stać się lepszymi programistami i lepszymi administratorami serwerów oraz lepszymi administratorami serwerów baz danych.
Nie wolno moich przykładów wykorzystywać do niecnych celów, gdyż jest to karane i co więcej będę sam ścigał takie osoby.
Aby kod działał dla innej witryny internetowej musimy linię 13, 16 i 20,21,22 oraz 23 dostosować do innej atakowanej witryny.
Służy do tego program: Fiddler - https://www.fiddler2.com/fiddler2/
Poniższy rysunek pokazuje jakie parametry trzeba z niego pobrać dla witryny: www.moja11.pl, dla innych witryn internetowych postępujemy analogicznie.
Program fiddler śledzi ruch z Twojego komputera do komputera atakowanego i na odwrót.
Czyli należy wejść na dowolną witrynę internetową i wykonać ręcznie poprzez przeglądarkę internetową czynność którą będzie wykonywał nasz program do ataku.
Ukaże się nam w programie fiddler wysłany formularz [tak jak jest pokazane na powyższym rysunku], należy z niego pobrać wszystkie pola i wstawić w linię 16.
Linia 13 jest uzależniona od długości token-u - gdy inna witryna internetowa będzie miała inną długość token-u należy zamiast 32,32 wstawić odpowiednią wartość [dwukrotnie tę samą].
PAMIĘTAJ!!!
Ten i kolejne materiały z cyklu łamania zabezpieczeń IT na moim blogu są tylko do celów edukacyjnych i pogłębiania swojej wiedzy, aby stać się lepszymi programistami i lepszymi administratorami serwerów oraz lepszymi administratorami serwerów baz danych.
Nie wolno moich przykładów wykorzystywać do niecnych celów, gdyż jest to karane i co więcej będę sam ścigał takie osoby.
Linia 16 jest skonfigurowania dla trzeciego wystąpienia ciągu 32 litero-cyfrowego, gdyż dopiero w trzecim wystąpieniu jest token w kodzie atakowanej witryny internetowej.Ten i kolejne materiały z cyklu łamania zabezpieczeń IT na moim blogu są tylko do celów edukacyjnych i pogłębiania swojej wiedzy, aby stać się lepszymi programistami i lepszymi administratorami serwerów oraz lepszymi administratorami serwerów baz danych.
Nie wolno moich przykładów wykorzystywać do niecnych celów, gdyż jest to karane i co więcej będę sam ścigał takie osoby.
Gdyby token znajdował się, np. na drugim miejscu w kodzie atakowanej strony WWW należało by wstawić:
curl_setopt($ch, CURLOPT_POSTFIELDS, 'contact[name]=test&contact[email]=test@test.pl&contact[phone]=506123456&contact[question]=test&contact[_csrf_token]='.$match[1]
Linie 20,21,22 i 23 - służą tylko do celów estetycznych, aby wyświetliła się nam cała odpowiedź atakowanej witryny internetowej.Dla każdej atakowanej witryny internetowej trzeba podmienić adresy WWW w atrybucie: href.
Jeżeli witryna internetowa umożliwia wysyłanie formularzy tylko po zalogowaniu się, to też nie problem. Wystarczy założyć konto z przeglądarki internetowej i potem się tylko zalogować poprzez curl, a następnie wysłać formularz.
A logowaniu do witryn internetowych poprzez curl będzie można poczytać w moim trzecim post-cie dotyczącym łamania zabezpieczeń IT. Będzie tam przykład, który wykona dokładnie to samo co zademonstrowany program do ataku z tego post-a, ale dodatkowo będzie się logował do witryny internetowych - która tego wymaga, aby wysłać formularz nawet zabezpieczony tokenem.
Ciekawostka:
Często witryny internetowe wymagają przy wypełnianiu formularza podania, np.: adresu email, lub np.: telefonu komórkowego, lub wymagają innych danych.
Gdy chcemy na takich witrynach internetowych pomimo ich zakazu: "wysłania formularza bez podania wymaganych danych" i tak wysłać im formularz, np.: bez podania numeru telefonu - TO MÓJ PROGRAM, który pokazałem w tym post-cie doskonale się do tego nadaje - pod warunkiem, że sprawdzanie (walidacja) odbywa się w kodzie JavaScript, a nie w kodzie PHP.
Często witryny internetowe wymagają przy wypełnianiu formularza podania, np.: adresu email, lub np.: telefonu komórkowego, lub wymagają innych danych.
Gdy chcemy na takich witrynach internetowych pomimo ich zakazu: "wysłania formularza bez podania wymaganych danych" i tak wysłać im formularz, np.: bez podania numeru telefonu - TO MÓJ PROGRAM, który pokazałem w tym post-cie doskonale się do tego nadaje - pod warunkiem, że sprawdzanie (walidacja) odbywa się w kodzie JavaScript, a nie w kodzie PHP.
URUCHOM ONLINE - URUCHOM ONLINE - URUCHOM ONLINE
A poniżej jest to samo, ale z błędnym tokenem - jest wtedy informacja: [csrf token: CSRF attack detected.]:
URUCHOM ONLINE BAD - URUCHOM ONLINE BAD
PAMIĘTAJ!!! !!!
Ten i kolejne materiały z cyklu łamania zabezpieczeń IT na moim blogu są tylko do celów edukacyjnych i pogłębiania swojej wiedzy, aby stać się lepszymi programistami i lepszymi administratorami serwerów oraz lepszymi administratorami serwerów baz danych.
Nie wolno moich przykładów wykorzystywać do niecnych celów, gdyż jest to karane i co więcej będę sam ścigał takie osoby.
Ten i kolejne materiały z cyklu łamania zabezpieczeń IT na moim blogu są tylko do celów edukacyjnych i pogłębiania swojej wiedzy, aby stać się lepszymi programistami i lepszymi administratorami serwerów oraz lepszymi administratorami serwerów baz danych.
Nie wolno moich przykładów wykorzystywać do niecnych celów, gdyż jest to karane i co więcej będę sam ścigał takie osoby.
Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej
Widget Followers & Follow pasek boczny Twitter
IDEĄ TEGO POSTA, jest pokazanie najprostszego możliwego rozwiązania na zaimplementowanie wysuwanego paska bocznego osadzonego w dowolnej przeglądarce internetowej z TWARZAMI TWITTER.
Pasek boczny można wykorzystać w dowolny sposób!
Narzędziem programistycznym będzie biblioteka jQuery w wersji 1.7.0 bazująca na JavaScript oraz język do tworzenia stron internetowych HTML w najnowszej wersji 5.
NO to zaczynamy!!!
Poniżej gotowy kod, który jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.
KOD HTML 5 i jQuery:
OPIS:
1. W części HEAD jest dołączony skrypt: jQuery;
2. W części BODY mamy skrypt napisany w jQuery, który służy do wysuwania paska bocznego z TWARZAMI TWITTER;
3. W części BODY mamy także kod HTML z warstwą [div id="twitter2_3"], która przechowuje TWARZE TWITTER.
Pasek boczny można wykorzystać w dowolny sposób!
Narzędziem programistycznym będzie biblioteka jQuery w wersji 1.7.0 bazująca na JavaScript oraz język do tworzenia stron internetowych HTML w najnowszej wersji 5.
PONIŻEJ JEST W PEŁNI DZIAŁAJĄCY LINK DO TEGO CO OPISAŁEM POWYŻEJ - gotowe rozwiązanie, wystarczy kliknąć i masz:
Patrz tutaj
Patrz tutaj
NO to zaczynamy!!!
Poniżej gotowy kod, który jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.
KOD HTML 5 i jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body bgcolor="#0000FF">
<script type="text/javascript">
//<[!CDATA[
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#twitter2_3").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#twitter2_3").stop(true,false).animate({right: "-304px"}, 500 );
});
});
//]]>
</script>
<!--WIDGET TWITTER-->
<div id='twitter2_3' style='right: -300px; z-index: 9998; background: #ffffff; padding: 0px; width: 300px; height: 437px; position: fixed; top: 157px; border: 0px solid #FFFFFF'>
<a href='#'/><img src='https://www.katmpbsoft.pl/BLOG/Twitter/twitter.png' style='position: absolute; left:-33px; top:3px'/>
<div style='background-color:#809EFF;'>
<!-- Required HTML -->
<div id="twitter-box"></div>
<script>
var tw_user = 'KatMPBSoft';
var tw_width = 300;
var tw_height = 440;
var no_face = 20;
var tw_color='dark';
(function() {
var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
tw_box.src = '//50.63.179.86/twitter/tw.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
})();
</script>
<!-- Required HTML -->
</div>
</div>
<!--KONIEC WIDGET TWITTER-->
</body>
</html>
OPIS:
1. W części HEAD jest dołączony skrypt: jQuery;
2. W części BODY mamy skrypt napisany w jQuery, który służy do wysuwania paska bocznego z TWARZAMI TWITTER;
3. W części BODY mamy także kod HTML z warstwą [div id="twitter2_3"], która przechowuje TWARZE TWITTER.
Więcej o bibliotece: FAN BOX TWITTER poniżej:
Patrz i pobierz (język ang.)
Patrz i pobierz (język ang.)
Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej
Mercurial Eclipse konfiguracja i instalacja
W tym post-cie opiszę jak korzystać z Mercurial (systemu kontroli wersji) w Eclipse.
Aby używać Mercurial w Eclipse należy zainstalować: mercurialeclipse, które pobieramy z adresu WWW [Pobieramy będąc w Eclipse w zakładce służącej do pobierania nowego oprogramowania ("plug-in"-u)]: https://mercurialeclipse.eclipselabs.org.codespot.com/hg.wiki/update_site/stable
Strona WWW projektu mercurialeclipse: tutaj
Instrukcja jak korzystać z mercurialeclipse (a tym samym z Mercurial) jest tutaj: patrz
Ale to nie wystarczy należy jeszcze pobrać i zainstalować oprogramowanie: TORTOISEHG ze strony WWW - patrz i pobierz
Trzeba to zrobić dlatego, aby mercurialeclipse, wiedział jakiego pliku exe (programu-klienta: Mercurial) ma używać do wykonywania.
Ścieżkę do pliku exe podajemy w Eclipse: "Windows->Preferences->Team->Mercurial->Mercurial Executable:"
Do składowania swoich repozytoriów Mercurial korzystamy z darmowego do zastosowań komercyjnych serwisu internetowego: BITBUCKET [Patrz tutaj].
Po utworzeniu repozytorium na bitbucket.org, możemy łączyć się z nim poprzez Nasze Eclipse na dwa sposoby:
1. Zwyczajnie poprzez https. Przy próbie łączenia się ze zdalnym repozytorium zostaniemy poproszeni o login i hasło do naszego konta bitbucket.org.
Lub
2. Poprzez ssh. Aby łączyć się poprzez ssh należy wygenerować klucz prywatny i publiczny na Swoim komputerze przy pomocy programu PuTTYgen - pobierz [trwa to kilka minut]
Klucz publiczny należy dołączyć do serwisu: bitbucket.org na Naszym koncie - patrz zdjęcie:
Przed łączeniem się Eclipse z bitbucket.org poprzez ssh, należy uruchomić program Pageant (stąd go można pobrać: pobierz), aby przy każdym połączeniu nie podawać go od nowa.
W serwisie bitbucket.org, wybór łączenia podajemy w tym miejscu:
A tak wygląda okno ECLIPSE z Mercurial:
Miłej zabawy!
Aby używać Mercurial w Eclipse należy zainstalować: mercurialeclipse, które pobieramy z adresu WWW [Pobieramy będąc w Eclipse w zakładce służącej do pobierania nowego oprogramowania ("plug-in"-u)]: https://mercurialeclipse.eclipselabs.org.codespot.com/hg.wiki/update_site/stable
Strona WWW projektu mercurialeclipse: tutaj
Instrukcja jak korzystać z mercurialeclipse (a tym samym z Mercurial) jest tutaj: patrz
Ale to nie wystarczy należy jeszcze pobrać i zainstalować oprogramowanie: TORTOISEHG ze strony WWW - patrz i pobierz
Trzeba to zrobić dlatego, aby mercurialeclipse, wiedział jakiego pliku exe (programu-klienta: Mercurial) ma używać do wykonywania.
Ścieżkę do pliku exe podajemy w Eclipse: "Windows->Preferences->Team->Mercurial->Mercurial Executable:"
Do składowania swoich repozytoriów Mercurial korzystamy z darmowego do zastosowań komercyjnych serwisu internetowego: BITBUCKET [Patrz tutaj].
Po utworzeniu repozytorium na bitbucket.org, możemy łączyć się z nim poprzez Nasze Eclipse na dwa sposoby:
1. Zwyczajnie poprzez https. Przy próbie łączenia się ze zdalnym repozytorium zostaniemy poproszeni o login i hasło do naszego konta bitbucket.org.
Lub
2. Poprzez ssh. Aby łączyć się poprzez ssh należy wygenerować klucz prywatny i publiczny na Swoim komputerze przy pomocy programu PuTTYgen - pobierz [trwa to kilka minut]
Klucz publiczny należy dołączyć do serwisu: bitbucket.org na Naszym koncie - patrz zdjęcie:
Przed łączeniem się Eclipse z bitbucket.org poprzez ssh, należy uruchomić program Pageant (stąd go można pobrać: pobierz), aby przy każdym połączeniu nie podawać go od nowa.
W serwisie bitbucket.org, wybór łączenia podajemy w tym miejscu:
A tak wygląda okno ECLIPSE z Mercurial:
MERCURIAL - Przykład mojego użycia
Patrz tutaj
Patrz tutaj
Miłej zabawy!
Okrągłe tabele div z dynamicznym rozmiarem w HTML, XHTML i HTML5
W tym post-cie opiszę jak napisać stronę WWW w HTML, XHTML i HTML5 z dynamicznym rozszerzającym się div-em - zmieniającym wysokość z zaokrąglonymi rogami.
Strona WWW - dynamiczny div wykonany jest w: HTML, XHTML i HTML5.
KODY ŹRÓDŁOWE HTML5:
Opis:
1. W tagu style określamy style dla div-ów dynamicznych, m.in.: obrazki (zaokrąglone div-y), wysokość i szerokość oraz background-repeat w celu zdefiniowania, który div ma się zmieniać dynamicznie według osi y (wysokość);
2. W części body tworzymy ramki w kolejności: wynik (globalna - obejmująca wszystkie pozostałe div-y), góra, środek (tu wstawiamy to co chcemy [to co nas interesuje] - wysokość zmieni się automatycznie) i dół;
3. i gotowe, ależ to proste - :);
4. Uwaga - poniżej pokazuje również kody dla HTML i XHTML:
a) dla XHTML kod jest ten sam, zmienia się tylko nagłówek html;
b) dla HTML też zmienia się nagłówek html oraz dochodzi kod:
Miłej zabawy!
Strona WWW - dynamiczny div wykonany jest w: HTML, XHTML i HTML5.
KODY ŹRÓDŁOWE HTML5:
Opis:
1. W tagu style określamy style dla div-ów dynamicznych, m.in.: obrazki (zaokrąglone div-y), wysokość i szerokość oraz background-repeat w celu zdefiniowania, który div ma się zmieniać dynamicznie według osi y (wysokość);
2. W części body tworzymy ramki w kolejności: wynik (globalna - obejmująca wszystkie pozostałe div-y), góra, środek (tu wstawiamy to co chcemy [to co nas interesuje] - wysokość zmieni się automatycznie) i dół;
3. i gotowe, ależ to proste - :);
4. Uwaga - poniżej pokazuje również kody dla HTML i XHTML:
a) dla XHTML kod jest ten sam, zmienia się tylko nagłówek html;
b) dla HTML też zmienia się nagłówek html oraz dochodzi kod:
Pliki do pobrania:
1. Przykład użycia - HTML
-Zobacz
2. Przykład użycia - XHTML
-Zobacz
3. Przykład użycia - HTML5
-Zobacz
1. Przykład użycia - HTML
-Zobacz
2. Przykład użycia - XHTML
-Zobacz
3. Przykład użycia - HTML5
-Zobacz
Miłej zabawy!
Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej
Odliczanie czasu w dół PHP Countdown
W tym post-cie przedstawię użyteczny mechanizm odliczania czasu w dół.
Skrypt, który pokaże można osadzić w kodzie: HTML, PHP lub ASP.NET.
Skorzystam i omówię przeznaczoną do tego celu bibliotekę bazującą na JQuery o nazwie:
jQuery Countdown.
Zaczynamy od razu od kodu i jego omówienia.
(Uwaga - Możesz też pobrać wszystkie wymagane skrypty i zamiast internetowej lokalizacji skryptów [https://keith-wood.name/...] - wprowadź Swoją lokalizację skryptów).
Często programiści w tym Ja, gdy tworzą projekty programistyczne pobierają wszystkie skrypty na Swój komputer (lokalnie), aby umieścić je w Swoim projekcie programistycznym, a następnie w projekcie na serwerze produkcyjnym do komercyjnego użytku.
Dlaczego? - a no dlatego, bo np. za 5 lat projekt z którego pobraliśmy skrypty może już nie istnieć lub np. serwer ze skryptami może chwilowo nie odpowiadać, mogą być prace konserwacyjne, a jak masz wszystkie skrypty u Siebie, to Ci nic nie grozi, Twój projekt programistyczny zawsze będzie funkcjonował.
Wady - w zasadzie tylko jedna, jak stworzysz projekt oddany do użytku komercyjnego z pobranymi skryptami, a w między czasie wyjdzie nowa wersja skryptów, komercyjna strona internetowa (komercyjny serwis internetowy) będzie korzystał ze starych wersji skryptów.
W tym post-cie skorzystamy z internetowej lokalizacji skryptów.
W części <HEAD>:
W części <BODY> - dla języka polskiego:
W części <BODY> - dla języka angielskiego:
Powyższy kod uruchamia skrypt jQuery przy użyciu: $(function () { .. });
Następnie tworzy zmienną austDay (ustawia na datę rozpoczęcia mistrzostw świata w piłce nożnej w Brazyli);
Następnie w kolejnej linii jest uruchamiany skrypt opisywanej biblioteki: jQuery Countdown w technice uruchamiania jQuery;
Ostatnia linia skryptu to odwołanie się do zmiennej bibliotek: jQuery Countdown, w celu ustawienia formatu daty.
Poza skryptem jest także dołączona warstwa, <div id="defaultCountdown"></div> która wstawia obiekt "licznika w dół" na stronę WWW.
I to by było na tyle miłej zabawy, :)
Skrypt, który pokaże można osadzić w kodzie: HTML, PHP lub ASP.NET.
Skorzystam i omówię przeznaczoną do tego celu bibliotekę bazującą na JQuery o nazwie:
jQuery Countdown.
Zaczynamy od razu od kodu i jego omówienia.
Etap I:
Importujemy biblioteki jQuery i jQuery.countdown.js oraz importujemy style.
(Uwaga - Możesz też pobrać wszystkie wymagane skrypty i zamiast internetowej lokalizacji skryptów [https://keith-wood.name/...] - wprowadź Swoją lokalizację skryptów).
Często programiści w tym Ja, gdy tworzą projekty programistyczne pobierają wszystkie skrypty na Swój komputer (lokalnie), aby umieścić je w Swoim projekcie programistycznym, a następnie w projekcie na serwerze produkcyjnym do komercyjnego użytku.
Dlaczego? - a no dlatego, bo np. za 5 lat projekt z którego pobraliśmy skrypty może już nie istnieć lub np. serwer ze skryptami może chwilowo nie odpowiadać, mogą być prace konserwacyjne, a jak masz wszystkie skrypty u Siebie, to Ci nic nie grozi, Twój projekt programistyczny zawsze będzie funkcjonował.
Wady - w zasadzie tylko jedna, jak stworzysz projekt oddany do użytku komercyjnego z pobranymi skryptami, a w między czasie wyjdzie nowa wersja skryptów, komercyjna strona internetowa (komercyjny serwis internetowy) będzie korzystał ze starych wersji skryptów.
W tym post-cie skorzystamy z internetowej lokalizacji skryptów.
W części <HEAD>:
<style type="text/css">
@import "https://keith-wood.name/css/jquery.countdown.css";
#defaultCountdown { width: 240px; height: 45px; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Etap II:
W części <BODY> - dla języka polskiego:
<!-- wersja polska -->
<!-- pamiętaj, że w wersji polskiej musisz dodać dwa skrytpy jednocześnie z zachowaniem kolejności: jquery.countdown.js i jquery.countdown-pl.js -->
<script type="text/javascript" src="https://keith-wood.name/js/jquery.countdown.js"></script>
<script type="text/javascript" src="https://keith-wood.name/js/jquery.countdown-pl.js"></script>
<script type="text/javascript">
$(function () {
var austDay = new Date();
austDay = new Date(2014, 6-1 , 12);
$('#defaultCountdown').countdown({ until: austDay });
$('#year').text(austDay.getFullYear());
});
</script>
<div id="defaultCountdown"></div>
W części <BODY> - dla języka angielskiego:
<!-- wersja angielska -->
<script type="text/javascript" src="https://keith-wood.name/js/jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var austDay = new Date();
austDay = new Date(2014, 6-1 , 12);
$('#defaultCountdown').countdown({ until: austDay });
$('#year').text(austDay.getFullYear());
});
</script>
<div id="defaultCountdown"></div>
Omówienie - ETAPU II:
$(function () {
var austDay = new Date();
austDay = new Date(2014, 6-1 , 12);
});
var austDay = new Date();
austDay = new Date(2014, 6-1 , 12);
$('#defaultCountdown').countdown({ until: austDay });
$('#year').text(austDay.getFullYear());});
Powyższy kod uruchamia skrypt jQuery przy użyciu: $(function () { .. });
Następnie tworzy zmienną austDay (ustawia na datę rozpoczęcia mistrzostw świata w piłce nożnej w Brazyli);
Następnie w kolejnej linii jest uruchamiany skrypt opisywanej biblioteki: jQuery Countdown w technice uruchamiania jQuery;
Ostatnia linia skryptu to odwołanie się do zmiennej bibliotek: jQuery Countdown, w celu ustawienia formatu daty.
Poza skryptem jest także dołączona warstwa, <div id="defaultCountdown"></div> która wstawia obiekt "licznika w dół" na stronę WWW.
Poniżej dwa przykłady działania powyższych kodów dla języka polskiego i języka angielskiego, sama czysta strona HTML.
Abyś błyskawicznie zrozumiał kod i od razu mógł umieszczać go u Siebie!
Uwaga - nie można na jednej stronie mieszać języków, stąd dwa linki.
DATA ODLICZANIA USTAWIONA JEST NA DZIEŃ ROZPOCZĘCIA MISTRZOSTW ŚWIATA W PIŁCE NOŻNEJ W BRAZYLI
countdown PL
countdown EN
Abyś błyskawicznie zrozumiał kod i od razu mógł umieszczać go u Siebie!
Uwaga - nie można na jednej stronie mieszać języków, stąd dwa linki.
DATA ODLICZANIA USTAWIONA JEST NA DZIEŃ ROZPOCZĘCIA MISTRZOSTW ŚWIATA W PIŁCE NOŻNEJ W BRAZYLI
countdown PL
countdown EN
Odwołanie do twórców skryptu (można tam między innymi przeczytać o różnych stylach wyświetlacza, jest także dołączona dokumentacja).
Patrz tutaj (język ang.).
Patrz tutaj (język ang.).
I to by było na tyle miłej zabawy, :)
Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej
Wysuwany pasek boczny na stronie Facebook Twitter Youtube
IDEĄ TEGO POSTA, jest pokazanie najprostszego możliwego rozwiązania na zaimplementowanie wysuwanych pasków bocznych osadzonych w dowolnej przeglądarce internetowej.
Paski boczne można wykorzystać w dowolny sposób!
Ja pokażę jak je połączyć z Facebook, Twitter, Google+, Youtube i NK.
Każdy, nawet nie znający się na programowaniu, w 15 minut może mieć 5 wysuwanych pasków bocznych współpracujących z najpopularniejszymi serwisami społecznościowymi: facebook, twitter, google+, youtube i nasza-klasa.
Narzędziem programistycznym będzie biblioteka jQuery w wersji 1.7.0 bazująca na JavaScript oraz język do tworzenia stron internetowych HTML w najnowszej wersji 5.
Kod jest powtarzalny dla każdego serwisu społecznościowego, nie ma znaczenia czy jest to: facebook, twitter, youtube, google+, czy też nasza-klasa.
Co więcej może służyć dla innych serwisów społecznościownych jak: linkedin (https://www.linkedin.com), flickr (https://www.flickr.com), myspace (https://www.myspace.com), fotka (https://www.fotka.pl), wykop (https://www.wykop.pl), czy goldenline (https://www.goldenline.pl) oraz wielu innych.
Kod można go również wykorzystać do zamieszczania Swoich wstawek programistycznych.
Ważne - Zademonstruję w tym post-cie również jak umieścić wysuwane paski boczne na Swoim blogu w serwisie internetowym: blogger.com oraz jak na tym blogu używać biblioteki JQuery, które jest niezbędna do funkcjonowania wysuwanych pasków bocznych.
Jak sami widzicie u mnie już to funkcjonuje i nic nie stoi na przeszkodzie, aby u Was to też funkcjonowało.
Uwaga - gdy używamy pasków bocznych na blogger.com, w Swoim blogu, przeglądarka Internet Explorer, nie ma płynnej animacji wysuwania pasków, ale dotyczy to tylko serwisu blogger.com.
NO to zaczynamy!!!
Poniżej gotowy kod, który jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.
Pod spodem kodu jest jego dokładny opis oraz inne zagadnienia, które stanowią jego rozszerzenie.
KOD HTML 5 i jQuery:
GOOGLE+ - przygotowane dla paska bocznego
Linie kodu odpowiadające za połączenie z google+ dla HTML w wersji 5 (aby działało to dla Twojej strony google+ podmieniasz linię 4 i 19 [widoczną poniżej], a dokładnie atrybuty href="" i data-href=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
YOUTUBE - przygotowany dla paska bocznego
Linie kodu odpowiadające za połączenie z youtube dla HTML w wersji 5 (aby działało to dla Twojej strony youtube podmieniasz linię 5 [widoczną poniżej], a dokładnie atrybut src=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
NK - przygotowana dla paska bocznego
Linie kodu odpowiadające za połączenie z nasza-klasa dla HTML w wersji 5 (aby działało to dla Twojej strony nasza-klasa podmieniasz linię 11 [widoczną poniżej], a dokładnie atrybut uid:):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
Mając tak przygotowane serwisy społecznościowe umieszczone na odpowiednia spreparowanych warstwach (div-ach), przystępujemy do użycia JQuery.
Linie kodu odpowiadające za obsługę jQuery dla HTML w wersji 5 służą do animacji wysuwanych poszczególnych pasków bocznych - każdego z osobna:
I to już wszystko, pozostaje jeszcze do omówienia kwestia osadzenia pasków bocznych w serwisie blogger.com, na Swoim blogu.
Robimy to w głównym szablonie Swojego bloga i postępujemy identycznie jak dla zwykłej strony www.
Blog w serwisie blogger.com jest zawsze zgodny z HTML w wersji 5, więc opisane powyższe kody sa jak najbardziej kompatybilne.
Wszystko co było opisane i co znajduje się w części HEAD umieszczamy w naszym szablonie bloga tuż przez końcem znacznika </head>.
Wszystko co było opisane i co znajduje się w części BODY umieszczamy w naszym szablonie bloga tuż przez końcem znacznika </body>.
Wyjątek stanowi część kodu jQuery, która na stronie www, nie powiązanej z blogger.com, była umieszczona tuż za znacznikiem <body>, w serwisie blogger.com na naszym blogu musi być w części HEAD, tuż przez końcem znacznika </head>
I to by było na tyle miłej zabawy, :)
Paski boczne można wykorzystać w dowolny sposób!
Ja pokażę jak je połączyć z Facebook, Twitter, Google+, Youtube i NK.
Każdy, nawet nie znający się na programowaniu, w 15 minut może mieć 5 wysuwanych pasków bocznych współpracujących z najpopularniejszymi serwisami społecznościowymi: facebook, twitter, google+, youtube i nasza-klasa.
Narzędziem programistycznym będzie biblioteka jQuery w wersji 1.7.0 bazująca na JavaScript oraz język do tworzenia stron internetowych HTML w najnowszej wersji 5.
Kod jest powtarzalny dla każdego serwisu społecznościowego, nie ma znaczenia czy jest to: facebook, twitter, youtube, google+, czy też nasza-klasa.
Co więcej może służyć dla innych serwisów społecznościownych jak: linkedin (https://www.linkedin.com), flickr (https://www.flickr.com), myspace (https://www.myspace.com), fotka (https://www.fotka.pl), wykop (https://www.wykop.pl), czy goldenline (https://www.goldenline.pl) oraz wielu innych.
Kod można go również wykorzystać do zamieszczania Swoich wstawek programistycznych.
PONIŻEJ JEST W PEŁNI DZIAŁAJĄCY LINK DO TEGO CO OPISAŁEM POWYŻEJ (tylko: HTML5 i XHTML - po najechaniu. Uwaga: Jak wykorzystujesz HTML 4.01 to skorzystaj z linku dla HTML 4.01) - gotowe rozwiązanie, wystarczy kliknąć i masz:
Patrz tutaj
Patrz tutaj
PONIŻEJ JEST W PEŁNI DZIAŁAJĄCY LINK DO TEGO CO OPISAŁEM POWYŻEJ (dla wszystkich: HTML5 i XHTML oraz HTML 4.01 - po kliknięciu) - gotowe rozwiązanie, wystarczy kliknąć i masz:
Patrz tutaj
Patrz tutaj
KTO KORZYSTA Z NASZYCH PASKÓW:
https://www.italomondo.cba.pl/
https://www.perfumerianiebieska.pl/
https://77gerda.blogspot.com/
https://www.klimacold.pl/
https://www.p4you.pl/
https://www.naprawykomputerowe.com.pl/
https://www.czarnowo.cba.pl/
https://www.ec.edu.pl/
https://nagranialektorskie.cba.pl/
https://zpp.net.pl/
https://www.italomondo.cba.pl/
https://www.perfumerianiebieska.pl/
https://77gerda.blogspot.com/
https://www.klimacold.pl/
https://www.p4you.pl/
https://www.naprawykomputerowe.com.pl/
https://www.czarnowo.cba.pl/
https://www.ec.edu.pl/
https://nagranialektorskie.cba.pl/
https://zpp.net.pl/
Ważne - Zademonstruję w tym post-cie również jak umieścić wysuwane paski boczne na Swoim blogu w serwisie internetowym: blogger.com oraz jak na tym blogu używać biblioteki JQuery, które jest niezbędna do funkcjonowania wysuwanych pasków bocznych.
Jak sami widzicie u mnie już to funkcjonuje i nic nie stoi na przeszkodzie, aby u Was to też funkcjonowało.
Uwaga - gdy używamy pasków bocznych na blogger.com, w Swoim blogu, przeglądarka Internet Explorer, nie ma płynnej animacji wysuwania pasków, ale dotyczy to tylko serwisu blogger.com.
NO to zaczynamy!!!
Poniżej gotowy kod, który jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.
Pod spodem kodu jest jego dokładny opis oraz inne zagadnienia, które stanowią jego rozszerzenie.
KOD HTML 5 i jQuery:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!--WIDGET GOOGLE+-->
<!-- Place this tag in the <head> of your document -->
<link href="https://plus.google.com/108803486747646510695" rel="publisher" /><script type="text/javascript">
window.___gcfg = {lang: 'pl'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>
<!--KONIEC WIDGET GOOGLE+-->
</head>
<body>
<script type="text/javascript">
//<[!CDATA[
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#googleplus2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#googleplus2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#facebook2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#facebook2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#twitter2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#twitter2_2").stop(true,false).animate({right: "-300px"}, 500 );
});
jQuery("#youtube2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#youtube2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#nk2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#nk2_2").stop(true,false).animate({right: "-300px"}, 500 );
});
});
//]]>
</script>
<!--WIDGET FACEBOOK-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="facebook2_2" style="right: -304px; z-index: 9999; background: #ffffff; padding: 0px; width: 300px; height:550px; position: fixed; top: 50px; border: 2px solid #3B95D8">
<a href="#"></a><img style="position: absolute; left:-33px;" src="facebook.png" />
<div class="fb-like-box" data-href="https://www.facebook.com/pages/KatMPBSoft/145582058840684" data-width="300" data-height="550" data-show-faces="true" data-stream="true" data-header="false"></div>
</div>
<!--KONIEC WIDGET FACEBOOK-->
<!--WIDGET TWITTER-->
<div id="twitter2_2" style="right: -300px; z-index: 9998; background: #ffffff; padding: 0px; width: 300px; height: 437px; position: fixed; top: 157px; border: 0px solid #FFFFFF">
<a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="twitter.png" />
<div style='background-color:#809EFF;'>
<!-- STARY KOD TWITTER - już nie wspierany przez Twitter Widget
<script charset="utf-8" src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 20,
interval: 6000,
width: 300,
height: 350,
theme: {
shell: {
background: '#809EFF',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#ff0000'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: false,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('KatMPBSoft').start();
</script>
-->
<!-- NOWY KOD TWITTER - wspierany przez Twitter Widget-->
<a class="twitter-timeline" href="https://twitter.com/KatMPBSoft" data-widget-id="278760694994837504">Tweets by @KatMPBSoft</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<!--KONIEC WIDGET TWITTER-->
<!--WIDGET NASZA-KLASA-->
<div id="nk2_2" style="right: -300px; z-index: 9997; background: #ffffff; padding: 0px; width: 300px; height: 398px; position: fixed; top: 264px; border: 0px solid #FFFFFF">
<a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="nk2.png" />
<div style='background-color:#2B608C;'>
<script type="text/javascript" src="https://0.s-nk.pl/script/nk_widgets/nk_widget_core"></script>
<script type="text/javascript" src="https://0.s-nk.pl/script/nk_widgets/nk_widget_code"></script>
<script type="text/javascript">
new NkWidgetSledzikShoutList({
user: {
uid: 4807950
},
theme: {
widget_border_color: '#2B608C',
widget_background_color: '#ffffff',
header_text_color: '#ffffff',
header_background_color: '#2b608c',
stripe_background_color: '#a1d262',
shout_text_color: '#475058',
shout_date_color: '#9aa7b2',
shout_link_color: '#2b74b0',
shout_border_color: '#e1e7ed'
},
count: 10,
width: 300,
height: 400
}).init()
</script>
</div>
</div>
<!--KONIEC WIDGET NASZA-KLASA-->
<!--WIDGET YOUTUBE-->
<div id="youtube2_2" style="right: -304px; z-index: 9996; background: #ffffff; padding: 0px; width: 300px; height: 104px; position: fixed; top: 367px; border: 2px solid #3C3C3C">
<a href="#"></a><img style="position: absolute; left:-33px;" src="youtube.png" />
<iframe id="fr" src="https://www.youtube.com/subscribe_widget?p=KatMPBSoft" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>
</div>
<!--KONIEC WIDGET YOUTUBE-->
<!--WIDGET GOOGLE+-->
<div id="googleplus2_2" style="right: -304px; z-index: 9995; background: #ffffff; padding: 0px; width: 300px; height: 118px; position: fixed; top: 474px; border: 2px solid #00569F">
<a href="#"></a><img style="position: absolute; left:-33px;" src="google.png" />
<!-- Place this tag where you want the badge to render -->
<div class="g-plus" data-href="https://plus.google.com/108803486747646510695" data-width="300" data-height="131" data-theme="light"></div>
</div>
<!--KONIEC WIDGET GOOGLE+-->
</body>
</html>
FACEBOOK - przygotowany dla paska bocznego
Linie kodu odpowiadające za połączenie z facebook dla HTML w wersji 5 (aby działało to dla Twojej strony facebook podmieniasz linię 14 [widoczną poniżej], a dokładnie atrybut data-href=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
Linie kodu odpowiadające za połączenie z facebook dla HTML w wersji 5 (aby działało to dla Twojej strony facebook podmieniasz linię 14 [widoczną poniżej], a dokładnie atrybut data-href=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
Tylko w części BODY:
<!--WIDGET FACEBOOK-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="facebook2_2" style="right: -304px; z-index: 9999; background: #ffffff; padding: 0px; width: 300px; height:550px; position: fixed; top: 50px; border: 2px solid #3B95D8">
<a href="#"></a><img style="position: absolute; left:-33px;" src="facebook.png" />
<div class="fb-like-box" data-href="https://www.facebook.com/pages/KatMPBSoft/145582058840684" data-width="300" data-height="550" data-show-faces="true" data-stream="true" data-header="false"></div>
</div>
<!--KONIEC WIDGET FACEBOOK-->
Nastąpiła zmiana kodu Twitter Widget - globalnie w całym Internecie dla Twitter - nasz skrypt już jest do niego dostosowany.
Informacja dla Wszystkich tych, którzy korzystają ze starej wersji skryptu dla Twitter.
TWITTER - przygotowany dla paska bocznego
Linie kodu odpowiadające za połączenie z twitter dla HTML w wersji 5 (aby działało to dla Twojej strony twitter podmieniasz linię 36 [widoczną poniżej], a dokładnie atrybut setUser('')):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
To jest dla starej wersji widget twitter już nie wspieranej przez twitter widget.
Dla nowych wersji twitter widget stosujesz linie 40,41 i 42.
Oraz korzystasz z tego linku: patrz - warunek musisz być zalogowany na Swoim konto twitter i musisz utworzyć Swój własny widget twitter na Swoim koncie twitter.
Informacja dla Wszystkich tych, którzy korzystają ze starej wersji skryptu dla Twitter.
TWITTER - przygotowany dla paska bocznego
Linie kodu odpowiadające za połączenie z twitter dla HTML w wersji 5 (aby działało to dla Twojej strony twitter podmieniasz linię 36 [widoczną poniżej], a dokładnie atrybut setUser('')):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
To jest dla starej wersji widget twitter już nie wspieranej przez twitter widget.
Dla nowych wersji twitter widget stosujesz linie 40,41 i 42.
Oraz korzystasz z tego linku: patrz - warunek musisz być zalogowany na Swoim konto twitter i musisz utworzyć Swój własny widget twitter na Swoim koncie twitter.
Tylko w części BODY:
<!--WIDGET TWITTER-->
<div id="twitter2_2" style="right: -300px; z-index: 9998; background: #ffffff; padding: 0px; width: 300px; height: 437px; position: fixed; top: 157px; border: 0px solid #FFFFFF">
<a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="twitter.png" />
<div style='background-color:#809EFF;'>
<!-- STARY KOD TWITTER - już nie wspierany przez Twitter Widget
<script charset="utf-8" src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 20,
interval: 6000,
width: 300,
height: 350,
theme: {
shell: {
background: '#809EFF',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#ff0000'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: false,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('KatMPBSoft').start();
</script>
-->
<!-- NOWY KOD TWITTER - wspierany przez Twitter Widget-->
<a class="twitter-timeline" href="https://twitter.com/KatMPBSoft" data-widget-id="278760694994837504">Tweets by @KatMPBSoft</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<!--KONIEC WIDGET TWITTER-->
GOOGLE+ - przygotowane dla paska bocznego
Linie kodu odpowiadające za połączenie z google+ dla HTML w wersji 5 (aby działało to dla Twojej strony google+ podmieniasz linię 4 i 19 [widoczną poniżej], a dokładnie atrybuty href="" i data-href=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
W części HEAD:
<!--WIDGET GOOGLE+-->
<!-- Place this tag in the <head> of your document -->
<link href="https://plus.google.com/108803486747646510695" rel="publisher" /><script type="text/javascript">
window.___gcfg = {lang: 'pl'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>
<!--KONIEC WIDGET GOOGLE+-->
W części BODY:
<!--WIDGET GOOGLE+-->
<div id="googleplus2_2" style="right: -304px; z-index: 9995; background: #ffffff; padding: 0px; width: 300px; height: 118px; position: fixed; top: 474px; border: 2px solid #00569F">
<a href="#"></a><img style="position: absolute; left:-33px;" src="google.png" />
<!-- Place this tag where you want the badge to render -->
<div class="g-plus" data-href="https://plus.google.com/108803486747646510695" data-width="300" data-height="131" data-theme="light"></div>
</div>
<!--KONIEC WIDGET GOOGLE+-->
YOUTUBE - przygotowany dla paska bocznego
Linie kodu odpowiadające za połączenie z youtube dla HTML w wersji 5 (aby działało to dla Twojej strony youtube podmieniasz linię 5 [widoczną poniżej], a dokładnie atrybut src=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
Tylko w części BODY: <!--WIDGET YOUTUBE--> <div id="youtube2_2" style="right: -304px; z-index: 9996; background: #ffffff; padding: 0px; width: 300px; height: 104px; position: fixed; top: 367px; border: 2px solid #3C3C3C"> <a href="#"></a><img style="position: absolute; left:-33px;" src="youtube.png" /> <iframe id="fr" src="https://www.youtube.com/subscribe_widget?p=KatMPBSoft" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe> </div> <!--KONIEC WIDGET YOUTUBE-->
NK - przygotowana dla paska bocznego
Linie kodu odpowiadające za połączenie z nasza-klasa dla HTML w wersji 5 (aby działało to dla Twojej strony nasza-klasa podmieniasz linię 11 [widoczną poniżej], a dokładnie atrybut uid:):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
Tylko w części BODY:
<!--WIDGET NASZA-KLASA-->
<div id="nk2_2" style="right: -300px; z-index: 9997; background: #ffffff; padding: 0px; width: 300px; height: 398px; position: fixed; top: 264px; border: 0px solid #FFFFFF">
<a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="nk2.png" />
<div style='background-color:#2B608C;'>
<script type="text/javascript" src="https://0.s-nk.pl/script/nk_widgets/nk_widget_core"></script>
<script type="text/javascript" src="https://0.s-nk.pl/script/nk_widgets/nk_widget_code"></script>
<script type="text/javascript">
new NkWidgetSledzikShoutList({
user: {
uid: 4807950
},
theme: {
widget_border_color: '#2B608C',
widget_background_color: '#ffffff',
header_text_color: '#ffffff',
header_background_color: '#2b608c',
stripe_background_color: '#a1d262',
shout_text_color: '#475058',
shout_date_color: '#9aa7b2',
shout_link_color: '#2b74b0',
shout_border_color: '#e1e7ed'
},
count: 10,
width: 300,
height: 400
}).init()
</script>
</div>
</div>
<!--KONIEC WIDGET NASZA-KLASA-->
Mając tak przygotowane serwisy społecznościowe umieszczone na odpowiednia spreparowanych warstwach (div-ach), przystępujemy do użycia JQuery.
Linie kodu odpowiadające za obsługę jQuery dla HTML w wersji 5 służą do animacji wysuwanych poszczególnych pasków bocznych - każdego z osobna:
W części HEAD:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
W części BODY:
<script type="text/javascript">
//<[!CDATA[
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#googleplus2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#googleplus2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#facebook2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#facebook2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#twitter2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#twitter2_2").stop(true,false).animate({right: "-300px"}, 500 );
});
jQuery("#youtube2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#youtube2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
jQuery("#nk2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#nk2_2").stop(true,false).animate({right: "-300px"}, 500 );
});
});
//]]>
</script>
I to już wszystko, pozostaje jeszcze do omówienia kwestia osadzenia pasków bocznych w serwisie blogger.com, na Swoim blogu.
Robimy to w głównym szablonie Swojego bloga i postępujemy identycznie jak dla zwykłej strony www.
Blog w serwisie blogger.com jest zawsze zgodny z HTML w wersji 5, więc opisane powyższe kody sa jak najbardziej kompatybilne.
Wszystko co było opisane i co znajduje się w części HEAD umieszczamy w naszym szablonie bloga tuż przez końcem znacznika </head>.
Wszystko co było opisane i co znajduje się w części BODY umieszczamy w naszym szablonie bloga tuż przez końcem znacznika </body>.
Wyjątek stanowi część kodu jQuery, która na stronie www, nie powiązanej z blogger.com, była umieszczona tuż za znacznikiem <body>, w serwisie blogger.com na naszym blogu musi być w części HEAD, tuż przez końcem znacznika </head>
I to by było na tyle miłej zabawy, :)
Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej
Kolorowanie składni kodu SyntaxHighlighter 2 i 3 - blogger, HTML i PHP
W tym post-cie przedstawię narzędzie do kolorowania (podświetlania) składni (ang. syntax highlighting) - o nazwie SyntaxHighlighter.
Techniki syntax highlighting używa się najczęściej do wyróżniania elementów składniowych kodu źródłowego programu (np. słów kluczowych, komentarzy) w edytorze tekstu za pomocą koloru oraz atrybutów. Funkcja ta dostępna jest obecnie w większości programistycznych edytorach tekstu i we wszystkich narzędziach programistycznych.
Nic nie stoi na przeszkodzie, abyś sam cieszył się z funkcji: "Kolorowania składni", które oferują narzędzia programistyczne na Swoim blogu (w tym na blogger), czy też w Swoim projekcie programistycznym (np. w kodzie xhtml [html], wyprodukowanym z PHP).
Zademonstruję i opiszę użycie narzędzia SyntaxHighlighter w najnowszej wersji 3, które umożliwia technikę syntax highlighting. Demonstracja i opis będzie obejmował blogi (z głównym naciskiem na blogger) oraz strony internetowe (serwisy internetowe) w PHP, choć nie tylko.
ZACZYNAMY, powodzenia!:
Legenda:
a - odnosi się do bloga;
b - odnosi się do PHP;
1b.: Umieść poniższy kod w Twoim projekcie programistycznym w pliku PHP;
(Uwaga - dotyczy tylko opisu dla PHP: Możesz też pobrać wszystkie wymagane skrypty i zamiast internetowej lokalizacji skryptów [https://alexgorbatchev.com/pub/sh/current/...] - wprowadź Swoją lokalizację skryptów).
Często programiści w tym Ja, gdy tworzą projekty programistyczne pobierają wszystkie skrypty na Swój komputer (lokalnie), aby umieścić je w Swoim projekcie programistycznym, a następnie w projekcie na serwerze produkcyjnym do komercyjnego użytku.
Dlaczego? - a no dlatego, bo np. za 5 lat projekt z którego pobraliśmy skrypty może już nie istnieć lub np. serwer ze skryptami może chwilowo nie odpowiadać, mogą być prace konserwacyjne, a jak masz wszystkie skrypty u Siebie, to Ci nic nie grozi, Twój projekt programistyczny zawsze będzie funkcjonował.
Wady - w zasadzie tylko jedna, jak stworzysz projekt oddany do użytku komercyjnego z pobranymi skryptami, a w między czasie wyjdzie nowa wersja skryptów, komercyjna strona internetowa (komercyjny serwis internetowy) będzie korzystał ze starych wersji skryptów.
Skrypty z językami programistycznmi dołącza się dlatego, aby narzędzie SyntaxHighlighter, potrafiło je rozpoznać i właściwie "Pokolorować".
W związku z faktem, że blog jest dla wszystkich programistów Microsoft, Embarcadero (Borland) i OpenSource użyłem wszystkich dostępnych w danej chwili.
Następny krok (Krok II):
2a2b.: Teraz już możesz na Swoim blogu lub w Swoim projekcie programistycznym umieszczać "Kolorowanie składni";
Są dwie metody - każda ma swoje zalety i wady (patrz poniżej - Krok IV):
Pierwsza - I: <pre> method
Zaczynamy od przykładu:
Użycie (korzystamy z kolorowania dla JavaScript):
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
Wynik użycia:
Gdy kod programistyczny znajduje się pomiędzy: <pre> </pre>, czyli jest tekstem preformatowanym (więcej czytaj tutaj), wtedy nie może zawierać np. znaków: < i > muszą one zostać zamienione odpowiednio na tzw. encje: < i >
Konsekwencją tego jest fakt, że aby "Pokolorować", np. kod xhtml (html) - znacznika "a", należy zamienić <a href> na <a href>.
W powyższym przykładzie jest podobny przypadek, instrukcja JS:
Jeśli narzędzie programistyczne nie zamienia kodu na encje, a chcemy użyć metody: <pre> method, musimy to zrobić ręcznie.
Można posłużyć się narzędziem do zamiany kodu na kod z encjami:
Polskie narzędzie online do zamiany kodu xhtml (html) - "tekstu" na kod xhtml (html) - "tekst" z encjami
Druga - II: <script /> method
Zaczynamy od przykładu:
Użycie (korzystamy z kolorowania dla JavaScript):
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
//it works!
}
Wynik użycia:
W przypadku tej metody nie ma co się rozpisywać wystarczy na początku każdego kolorowanego kodu wstawić:
Ja na swoim blogu użyłem następującej konfiguracji i się z Wami ją podzielę.
Na bazie pierwszego linku dokonałem konfiguracji:
Pierwsza linia kodu jest ważna dla blogów - musi być ustawiona na true, gdy umieszczamy narzędzie SyntaxHighlighter na blogger. Gdy korzystamy z SyntaxHighlighter, we własnych projektach programistycznych ustawaimy na false.
Druga, trzecia i czwarta linia zmienia domyślne angielskie nazwy na ich odpowiedniki polskie.
Druga linia dla opisu: pokaż źródło.
Trzecia linia dla opisu: drukowanie.
Czwarta dla opisu: kopiowanie dla schowka.
W starszych wersjach SyntaxHighlighter, czyli w wersji 2.1 i starszych, każde "Kolorowanie składni" miało własne menu z 4 ikonami: "viewSource", "print", "copytoclipboard" oraz "?".
W wersji 3 nie wiadomo dlaczego to menu się nie pojawia, ale na wszelki wypadek postanowiłem przetłumaczyć te ikony na język polski.
Być może już niedługo pojawi się uaktualnienie wersji 3, która będzie wyświetlała menu.
Zrzut ekranu z wersji 2 zamieszczam pod spodem, abyście wiedzieli o co chodzi:
Piąta linia mojej konfiguracji, wyłącza aktywne linki z "Kolorowanego składni" kodu, aby nie można na nie "klikać".
Na bazie drugiego linku dokonałem konfiguracji: Dzięki temu zmieniłem wygląd - szablon "Kolorowania składni".
Można wybierać z pośród kilku dostępnych szablonów.
Wady opiszę na przykładzie pierwszego "Kolorowania składni" tego posta, tym z 34 liniami.
Gdy używamy metody: <script /> method, każde wystąpnie </script>, zamyka "Kolorowanie składni", obojetnie czy było czy nie było: ]]>.
Jest to problem, gdyż nie można umieszczać "Kolorowania składni" z otwartym <script> i zamknietym </script>. A jak widzicie w moim przypadku jest użyte otwarcie i zamknięcie script. Taki jest kod w "Kolorowaniu składni" i taki musi pozostać.
Zdecydowałem się w takim razie na użycie w moim mniemaniu metody trudniejszej, czyli metody: <pre> method. I wszystko byłby ładnie, ale musiałem dokonać zamiany kodu JavaScript, na kod JavaScript z encjami.
Poszło bez problemu.
Metoda: <pre> method się sprawdza, poza jednym ale: jak ładuję się strona www - mój blog, przez krótką chwilę widzicie, czysty tekst bez "Kolorowania składni", dopiero po 1 sekundzie zamienia się na kod JavaScript "Pokolorowany".
Metoda: <script /> method nie ma tego problemu, gdy strona się ładuję nic się nie wyświela, po załadowaniu wyświetla się od razu "Pokolorowany" kod - też to możecie zaobserwować na moim blogu w tym post-cie, w każdym innym "Kolorowaniu składni", poza tym z 34 liniami.
W zasadzie w przypadku metody: <pre> method, też można obejść ten problem, poprzez nie zamienianie kodu na kod z encjami, ale jest to ryzykowane, bo "Pokolorowany" kod, może nie odpowiadać rzeczywistości. W moim przypadku gdy testowałem tego posta, jak nie dokonałem zamiany kodu JS na kod JS z encjami, pierwsze trzy linie nie odpowiadały rzeczywistości, brakowało na końcu znaków "/". Niestey nie ma na to rozwiązania - w każdym bądź razie narzędzie SyntaxHighlighter, tego nie umożliwia.
Podsumowanie - Moim Zdaniem: Używamy zawsze metody: <script /> method, a gdy jest konieczność, np. zamykania znacznika script, korzystamy z metody: <pre> method zawsze z kodem zamienionym na encje, pamiętając równocześnie o niedogodności związenej z ładowaniem strony www, o której wspominałem wcześniej.
Trzeba być elastycznym w doborze metod!!!
Techniki syntax highlighting używa się najczęściej do wyróżniania elementów składniowych kodu źródłowego programu (np. słów kluczowych, komentarzy) w edytorze tekstu za pomocą koloru oraz atrybutów. Funkcja ta dostępna jest obecnie w większości programistycznych edytorach tekstu i we wszystkich narzędziach programistycznych.
Nic nie stoi na przeszkodzie, abyś sam cieszył się z funkcji: "Kolorowania składni", które oferują narzędzia programistyczne na Swoim blogu (w tym na blogger), czy też w Swoim projekcie programistycznym (np. w kodzie xhtml [html], wyprodukowanym z PHP).
Zademonstruję i opiszę użycie narzędzia SyntaxHighlighter w najnowszej wersji 3, które umożliwia technikę syntax highlighting. Demonstracja i opis będzie obejmował blogi (z głównym naciskiem na blogger) oraz strony internetowe (serwisy internetowe) w PHP, choć nie tylko.
ZACZYNAMY, powodzenia!:
Legenda:
a - odnosi się do bloga;
b - odnosi się do PHP;
Pierwszy krok
1a.: Umieść poniższy kod w szablonie Twojego bloga;1b.: Umieść poniższy kod w Twoim projekcie programistycznym w pliku PHP;
(Uwaga - dotyczy tylko opisu dla PHP: Możesz też pobrać wszystkie wymagane skrypty i zamiast internetowej lokalizacji skryptów [https://alexgorbatchev.com/pub/sh/current/...] - wprowadź Swoją lokalizację skryptów).
Często programiści w tym Ja, gdy tworzą projekty programistyczne pobierają wszystkie skrypty na Swój komputer (lokalnie), aby umieścić je w Swoim projekcie programistycznym, a następnie w projekcie na serwerze produkcyjnym do komercyjnego użytku.
Dlaczego? - a no dlatego, bo np. za 5 lat projekt z którego pobraliśmy skrypty może już nie istnieć lub np. serwer ze skryptami może chwilowo nie odpowiadać, mogą być prace konserwacyjne, a jak masz wszystkie skrypty u Siebie, to Ci nic nie grozi, Twój projekt programistyczny zawsze będzie funkcjonował.
Wady - w zasadzie tylko jedna, jak stworzysz projekt oddany do użytku komercyjnego z pobranymi skryptami, a w między czasie wyjdzie nowa wersja skryptów, komercyjna strona internetowa (komercyjny serwis internetowy) będzie korzystał ze starych wersji skryptów.
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='https://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script language='javascript' type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.strings.viewSource = "Podgląd źródła"; SyntaxHighlighter.config.strings.print = "Drukuj"; SyntaxHighlighter.config.strings.copyToClipboard = "Kopiuj do schowka"; SyntaxHighlighter.defaults['auto-links'] = false; SyntaxHighlighter.all(); </script>
Zaczerpnięty powyższy kod bazuje na źródle Twórcy narzędzia.
Akapit - Basic Steps
Patrz tutaj (język ang.).
Akapit - Basic Steps
Patrz tutaj (język ang.).
W powyższym kodzie są umieszczone skrypty wszystkich dostępnych w chwili pisania postu języków programowania wspieranych przez SyntaxHighlighter.
Ich lista jest dostępna na stronie Twórcy narzędzia.
Patrz tutaj (język ang.).
Ich lista jest dostępna na stronie Twórcy narzędzia.
Patrz tutaj (język ang.).
Skrypty z językami programistycznmi dołącza się dlatego, aby narzędzie SyntaxHighlighter, potrafiło je rozpoznać i właściwie "Pokolorować".
W związku z faktem, że blog jest dla wszystkich programistów Microsoft, Embarcadero (Borland) i OpenSource użyłem wszystkich dostępnych w danej chwili.
Następny krok (Krok II):
2a2b.: Teraz już możesz na Swoim blogu lub w Swoim projekcie programistycznym umieszczać "Kolorowanie składni";
Są dwie metody - każda ma swoje zalety i wady (patrz poniżej - Krok IV):
Pierwsza - I: <pre> method
Zaczynamy od przykładu:
Użycie (korzystamy z kolorowania dla JavaScript):
<pre class="brush: js">
/*** SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
</pre>
Wynik użycia:
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
Gdy kod programistyczny znajduje się pomiędzy: <pre> </pre>, czyli jest tekstem preformatowanym (więcej czytaj tutaj), wtedy nie może zawierać np. znaków: < i > muszą one zostać zamienione odpowiednio na tzw. encje: < i >
Konsekwencją tego jest fakt, że aby "Pokolorować", np. kod xhtml (html) - znacznika "a", należy zamienić <a href> na <a href>.
W powyższym przykładzie jest podobny przypadek, instrukcja JS:
counter <= 10
- w pliku xhtml (html) w części dotyczacej JavaScript wyprodukowanym z PHP ma postać:
counter <= 10
Jeśli narzędzie programistyczne nie zamienia kodu na encje, a chcemy użyć metody: <pre> method, musimy to zrobić ręcznie.
Można posłużyć się narzędziem do zamiany kodu na kod z encjami:
Polskie narzędzie online do zamiany kodu xhtml (html) - "tekstu" na kod xhtml (html) - "tekst" z encjami
Zaczerpnięty powyższy opis metody I - bazuje na źródle strony Twórcy narzędzia.
Akapit - <pre> method
Patrz tutaj (język ang.).
Akapit - <pre> method
Patrz tutaj (język ang.).
Druga - II: <script /> method
Zaczynamy od przykładu:
Użycie (korzystamy z kolorowania dla JavaScript):
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
/*** SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
//it works!
}
]]></script>
Wynik użycia:
W przypadku tej metody nie ma co się rozpisywać wystarczy na początku każdego kolorowanego kodu wstawić:
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
a na końcu, gdy już nie chcemy kolorować wstawić:
]]></script>
Zaczerpnięty powyższy opis metody II - bazuje na źródle strony Twórcy narzędzia.
Akapit - <script /> method
Patrz tutaj (język ang.).
Akapit - <script /> method
Patrz tutaj (język ang.).
Krok III (konfiguracja):
Konfiguracja jest opisana na stronie Twórcy narzędzia.
Patrz tutaj (język ang.).
oraz
Patrz tutaj (język ang.).
Patrz tutaj (język ang.).
oraz
Patrz tutaj (język ang.).
Ja na swoim blogu użyłem następującej konfiguracji i się z Wami ją podzielę.
Na bazie pierwszego linku dokonałem konfiguracji:
Pierwsza linia kodu jest ważna dla blogów - musi być ustawiona na true, gdy umieszczamy narzędzie SyntaxHighlighter na blogger. Gdy korzystamy z SyntaxHighlighter, we własnych projektach programistycznych ustawaimy na false.
Druga, trzecia i czwarta linia zmienia domyślne angielskie nazwy na ich odpowiedniki polskie.
Druga linia dla opisu: pokaż źródło.
Trzecia linia dla opisu: drukowanie.
Czwarta dla opisu: kopiowanie dla schowka.
W starszych wersjach SyntaxHighlighter, czyli w wersji 2.1 i starszych, każde "Kolorowanie składni" miało własne menu z 4 ikonami: "viewSource", "print", "copytoclipboard" oraz "?".
W wersji 3 nie wiadomo dlaczego to menu się nie pojawia, ale na wszelki wypadek postanowiłem przetłumaczyć te ikony na język polski.
Być może już niedługo pojawi się uaktualnienie wersji 3, która będzie wyświetlała menu.
Zrzut ekranu z wersji 2 zamieszczam pod spodem, abyście wiedzieli o co chodzi:
Piąta linia mojej konfiguracji, wyłącza aktywne linki z "Kolorowanego składni" kodu, aby nie można na nie "klikać".
Na bazie drugiego linku dokonałem konfiguracji: Dzięki temu zmieniłem wygląd - szablon "Kolorowania składni".
Można wybierać z pośród kilku dostępnych szablonów.
Krok IV (wady i zalety obu metod z Kroku II):
Wady opiszę na przykładzie pierwszego "Kolorowania składni" tego posta, tym z 34 liniami.
Gdy używamy metody: <script /> method, każde wystąpnie </script>, zamyka "Kolorowanie składni", obojetnie czy było czy nie było: ]]>.
Jest to problem, gdyż nie można umieszczać "Kolorowania składni" z otwartym <script> i zamknietym </script>. A jak widzicie w moim przypadku jest użyte otwarcie i zamknięcie script. Taki jest kod w "Kolorowaniu składni" i taki musi pozostać.
Zdecydowałem się w takim razie na użycie w moim mniemaniu metody trudniejszej, czyli metody: <pre> method. I wszystko byłby ładnie, ale musiałem dokonać zamiany kodu JavaScript, na kod JavaScript z encjami.
Poszło bez problemu.
Metoda: <pre> method się sprawdza, poza jednym ale: jak ładuję się strona www - mój blog, przez krótką chwilę widzicie, czysty tekst bez "Kolorowania składni", dopiero po 1 sekundzie zamienia się na kod JavaScript "Pokolorowany".
Metoda: <script /> method nie ma tego problemu, gdy strona się ładuję nic się nie wyświela, po załadowaniu wyświetla się od razu "Pokolorowany" kod - też to możecie zaobserwować na moim blogu w tym post-cie, w każdym innym "Kolorowaniu składni", poza tym z 34 liniami.
W zasadzie w przypadku metody: <pre> method, też można obejść ten problem, poprzez nie zamienianie kodu na kod z encjami, ale jest to ryzykowane, bo "Pokolorowany" kod, może nie odpowiadać rzeczywistości. W moim przypadku gdy testowałem tego posta, jak nie dokonałem zamiany kodu JS na kod JS z encjami, pierwsze trzy linie nie odpowiadały rzeczywistości, brakowało na końcu znaków "/". Niestey nie ma na to rozwiązania - w każdym bądź razie narzędzie SyntaxHighlighter, tego nie umożliwia.
Podsumowanie - Moim Zdaniem: Używamy zawsze metody: <script /> method, a gdy jest konieczność, np. zamykania znacznika script, korzystamy z metody: <pre> method zawsze z kodem zamienionym na encje, pamiętając równocześnie o niedogodności związenej z ładowaniem strony www, o której wspominałem wcześniej.
Trzeba być elastycznym w doborze metod!!!
Na strony Twórcy narzędzia są opisane wady i zalety (o których wspominałem i inne nie poruszone w tym post-cie) każdej metody.
Akapit - <pre> method - PROBLEMS
Akapit - <script /> method - PROBLEMS
Patrz tutaj (język ang.)
Akapit - <pre> method - PROBLEMS
Akapit - <script /> method - PROBLEMS
Patrz tutaj (język ang.)
Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej