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ą ASPNET. Pokaż wszystkie posty

Czasopismo pro dialog wszystkie numery w pdf

Witam,

Na stronie www:

pro dialog - więcej tutaj

można pobrać wszystkie numery pro dialog wydawnictwa pti (polskie towarzystwo informatyczne).

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

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.

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

Pozycjonowanie bloga blogger optymalizacja pozycjonowania posta

Założyłem serwis internetowy na Blogger .com i natrafiłem na pierwszy problem, jak uzyskać wysokie pozycjonowanie bloga w wyszukiwarce Google.
Domyślnie każdy tytuł strony jest w postaci nagłówek bloga + nagłówek posta.
W związku z faktem, że dla optymalizacja pozycjonowania robotów Google najważniejszy jest tytuł strony www, więc należało by tę kolejność zmienić na nazwa posta + nazwa bloga.

Poniżej rozwiązanie:

W szablonie Waszego bloga w serwisie blogger.com,

poniższy fragment:
zastępujecie:
Ten sposób wystarczy - pod warunkiem, że będziecie dbać o prawidłowe merytoryczne nazwy posta. Skoro tutaj dotarłeś, ta optymalizacja pozycjonowania na początek sposób wystarczy.

Konfiguracja w tym m.in.: pozycjonowanie bloga i optymalizacja pozycjonowania, 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 7, z Firefox od 3.6.3, z Opera od 9.63, z Safari od 5.x i z Chrome od wersji aktualnej