Myśli czwartego po buddzie chrystusie_&_mahomedzie Marka Śmierć napisane czterowymiarowo

Witam, Wszystkich na nowym blogu dedykowanym programistom prowadzącym własne firmy developerskie i innym miłośnikom komputerów. Będę starał się łączyć informatyków korzystających z produktów: Microsoft i Embarcadero (dawniej Borland) oraz OpenSource. Znajdziesz tutaj m.in. zagadnienia z: PHP, ASP, Delphi, C++, C#, SQLServer, MySQL, Oracle, SQL, Linux, Unix, Windows, środowisko programistyczne Visual, - Gier, Audio/Video, Matematyki, Grafiki 3D.

Pokazywanie postów oznaczonych etykietą HTML5. Pokaż wszystkie posty

Informatyczne książki wszech czasów top 20 z ostatnich 40 lat

Informatyczne książki wszech czasów top 20 z ostatnich 40 lat:

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

stworzony według strategii mini-max:

Kółko i krzyżyk ONLINE: Gra kółko i krzyżyk

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');

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.

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

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

Ciasteczka cookies na własnej stronie www blogu blogger wordpress

Jak dodać informacje o ciasteczkach do blogger i wordpress (ciasteczka w blogger - wordpress) Co to są cookies - ciasteczka?

Cookies, tzw. "ciasteczka": dane utworzone przez serwer Web w formie znaczników (np. czasowych), które są przechowywane na komputerze użytkowników. Umożliwiają to stronie Web śledzenie zwyczajów i upodobań użytkownika, a także - przy współpracy z przeglądarką internetową - na przechowywanie ich na własnym twardym dysku.
Cookies mogą zawierać zakres adresów URL, dla których obowiązują. Kiedy przeglądarka napotka ponownie taki URL, wysyła odpowiadające mu cookies do serwera Web. Na przykład jeśli identyfikator użytkownika został przechowany w cookie, oszczędzi to owej osobie wpisywania ciągle tych samych informacji w czasie dostępu do tego serwisu po raz drugi czy kolejny. Poprzez śledzenie historii ciasteczka pozwalają witrynie Web na dostosowanie stron oraz stworzenie indywidualnej konstrukcji dla danego właściciela.
Możesz ustawić przeglądarkę tak, żeby nie obsługiwała cookies lub też ostrzegała przed zaakceptowaniem ciasteczka.

Tworzymy komunikat o wykorzystaniu plików cookies na własnej stronie WWW, na własnym blogu: Blogger i WordPress.

Pobieramy jeden z poniższy plików:

1. Pobierz (wersja dla kodowania UTF-8) ciasteczka

2. Pobierz (stron z kodowaniem ISO-8859-2) cookies

3. Pobierz (dla stron Win-1250) cookies

Umieszczamy pobrany kod na własnej stronie www, między znacznikami:
<body></body>.

To wszystko od tej chwili każdy odwiedzający Twojego bloga, czy stronę www - będzie informowany, że używasz cookies.

Uwaga: Dla Blogger i Wordpress zastąp linie:

na linię:

Jest to konieczne w innym przypadku na Twoim blogu zgłoszony zostanie wyjątek i nie pozwoli zapisać szablonu.
Gdy stosujesz powyższe skrypty zapisuj je zawsze w szablonie, najlepiej na końcu tuż przed znacznikiem </body>.

Oraz pamiętaj, że linia:
<script src="https://polityka-ciasteczek.pl/polityka-ciasteczek-cookies-skrypt/jquery-last.min.js"></script>
może okazać się zbędna,

gdy jQuery jest już umieszczone na Twojej stronie www.

Jednak w takim przypadku musisz zmodyfikować (część) pliku:
<script type="text/javascript" src="https://polityka-ciasteczek.pl/polityka-ciasteczek-cookies-skrypt/js.js"></script>
do takiej postaci:

Gotowe rozwiązanie dla kodowania UTF-8 i przerobiony plik jest do pobrania: tutaj

Mój blog to ma nic nie stoi na przeszkodzie, aby było to na Twoim blogu.

Moc prawna: Dziennik ustaw

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:

$("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.

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.

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

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.

Dołącz do Naszego klanu graczy Diablo 3:

Polski klan graczy Diablo 3

I to by było na tyle miłej zabawy, :)

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.

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!

Co to jest curl:
patrz tutaj (język ang.)
i
tutaj.

Co to jest token:
patrz tutaj (język ang.)
i
tutaj.

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.

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ą].

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.
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.

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.

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.

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

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.)

Mercurial Eclipse konfiguracja i instalacja

W tym post-cie opiszę jak korzystać z Mercurial (systemu kontroli wersji) w Eclipse.

Więcej o Mercurial:
tutaj
Więcej o systemie kontroli wersji:
tutaj

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

Miłej zabawy!

Subversion SVN system kontroli wersji
Git rozproszony system kontroli wersji

<br> znak końca wiersza linii w blogger.com i SyntaxHighlighter

Tworząc kolejne post-y na blogger.com natrafiłem na pewien problem dotyczący wyświetlania znacznika: <br> lub jak kto woli znacznika: <br/> i chciałem się z Wami podzielić moimi spostrzeżeniami i gotowymi rozwiązaniami jak sobie z tym fantem poradzić.

O tuż, aby na Waszym blogu w blogger.com wyświetlać niezinterpretowane znaczniki <br> (<br/>), czyli widoczne napisy "<br>" lub "<br/>" - należy:

W opcjach post-a ustawić:
Opcje -> Tryb tworzenia -> Pokaż dokładnie kod HTML
a nie przypadkiem:
Opcje -> Tryb tworzenia -> Interpretuj wpisany kod HTML

I to wystarczy pod warunkiem, że jesteśmy w trybie Nowy post, a nie w trybie HTML!
Gdy jesteśmy w trybie HTML musimy wszędzie tam gdzie chcemy wstawić znacznik <br> (<br/>) [widoczny w post-cie w nienaruszonej formie] używać:

< zamiast <
i > zamiast >
a w środku br.

Czyli: <br> lub dla drugiej wersji <br/>

Uwaga! - opcje ustawiane w post-cie:
a) Opcje->Podziały wierszy->Używaj tagu <br>
i
b) Opcje->Podziały wierszy->Naciskaj klawisz "Enter", aby dodawać podziały wierszy
nie mają znaczenia.

Służą tylko do zdefiniowania:

1. Czy w trybie Nowy post gdy przechodzimy do nowych wierszy przy pomocy klawisza ENTER, w trybie HTML pojawią się znaczniki: <br/> - gdy użyjemy opcji a) pojawią się <br/>, gdy użyjemy opcji b) pojawią się puste wiersze;
2. Czy w trybie HTML do nowych wierszy przechodzimy przy pomocy klawisza ENTER, czy też znacznika: <br> (<br/>) - gdy użyjemy opcji a) trzeba przechodzić do nowych wierszy przy pomocy znacznika <br> (<br/>), gdy natomiast użyjemy opcji b) wystarczy wciskać ENTER.

No dobra, a co z SyntaxHighlighter na blogger.com.
Ufff - i na to jest rozwiązanie, ale trzeba być ostrożnym i decyzję podjąć od razu gdy rozpoczynamy przygodę z tworzeniem własnego bloga na blogger.com. Od razu czyli w momencie, gdy po raz pierwszy umieszczamy SyntaxHighlighter na naszym blogu w blogger.com.
Gdy na początku tworzenia bloga zdecydujemy, aby nasz SyntaxHighlighter umożliwiał wyświetlanie znaczników: <br> (<br/>) [widoczne w post-cie w SyntaxHighlighter - w nienaruszonej formie] to mój sposób jest ok, tak samo gdy zdecydujemy się już na samym początku, aby nasz SyntaxHighlighter interpretował te znaczniki jako przejście do nowej linii i ich nie wyświetlał, to mój sposób również jest też ok.
Pisząc mój sposób, mam na myśli to co umożliwia SyntaxHighlighter i JEST TO JEDYNE MOŻLIWE ROZWIĄZANIE - INNEGO NIE MA!

No dobra dość gadania, pora przejść do konkretów.

Służy do tego poniższa opcja konfiguracyjna oprogramowania SyntaxHighlighter:

SyntaxHighlighter.config.stripBrs = true;
lub
SyntaxHighlighter.config.stripBrs = false;

Sami możemy zdecydować na co się decydujemy.

Nie będę tutaj opisywał samego oprogramowania SyntaxHighlighter, ponieważ nie jest to tematem tego post-a oraz już to zrobiłem w innym post-cie.
Zapraszam do lektury:
KOLOROWANIE SKŁADNI KODU SyntaxHighlighter

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:

Pliki do pobrania:
1. Przykład użycia - HTML
-Zobacz
2. Przykład użycia - XHTML
-Zobacz
3. Przykład użycia - HTML5
-Zobacz

Miłej zabawy!

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.

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);

$('#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

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.).

I to by było na tyle miłej zabawy, :)

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.

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

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

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/

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]

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.

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, :)

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;

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.).

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.).

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!
  }

</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&gt.

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.).

Druga - II: <script /> method

Zaczynamy od przykładu:

Użycie (korzystamy z kolorowania dla JavaScript):

/**
  * 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ć:

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.).

Krok III (konfiguracja):

Konfiguracja jest opisana na stronie Twórcy narzędzia.
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.)