Poradnik przy kawie

Dawno już nie opublikowałem na blogu żadnej notki, ale spieszę z wyjaśnieniem. Być może czytaliście je już na webatech.pl, jeśli nie zapraszam.

Przychodzi kiedyś taki dzień kiedy człowiek chce spróbować czegoś nowego. Ja doszedłem właśnie do takiego etapu i rozpocząłem swoją przygodę w ecommerce ze sklepem Świeżo Palona, do którego odwiedzenia serdecznie zapraszam. Wybór padł na kawę, bo chciałbym promować i zmieniać kulturę jej picia w naszym kraju. Plany ambitne i nie do wykonania w jeden dzień, tydzień, czy miesiąc, ale wierzę, że się uda. Specjalnie, dla czytelników Poradnika Webatech przygotowałem 20 % rabat na zakupy dla pierwszych 15 osób. Wystarczy przy zamówieniu podać kod "poradnik".

Informacja prasowa:
Sklep z ekskluzywną kawą dla smakoszy

Wychodząc naprzeciw potrzebom dzisiejszych kawoszy, przygotowaliśmy ofertę, która zaspokoi nawet najbardziej wymagające podniebienia.

Od dzisiaj Twoja ulubiona kawa będzie smakować o niebo lepiej. Jej niepowtarzalny zapach, aromat i moc wzniosą Cię na wyżyny doznań smakowych. Znajdziesz ją w naszym domu kawy - Świeżo Palona, którego drzwi otwieramy specjalnie dla Ciebie i do którego serdecznie zapraszamy.

W naszym sklepie czekają na Ciebie trzy włoskie mieszanki: Black Velvet, Espresso Royale i Sublime Fusion oraz kilka najlepszych (niekoniecznie najdroższych) kaw jednorodnych o zaskakującym smaku: Brazil Gusto Antico, Colombia Supremo, Ethiopia Washed Sidamo, Papua New Guinea AA Grande Sigri i Salvador SHG Altamira. Zdecydowaliśmy się na taki wybór, chcąc zaprezentować kawy nietuzinkowe, których próżno szukać w innych sklepach. Pragniemy szerzyć kulturę picia kawy i mamy nadzieję zrobić co najmniej doktorat z niekończących się studiów o kawie.

Aktualne ceny sprzedawanej przez nas kawy nie są wygórowane. W naszym asortymencie każdy znajdzie coś dla siebie. Dodatkowo w dziale Akcesoria prezentujemy oryginalne kawiarki typu Moka włoskiej firmy Bialetti, w których robi się "prawdziwe włoskie espresso".

Serdecznie zapraszamy na nasz profil w serwisach społecznościowych Facebook i Flaker. Publikujemy na nich informacje związane z działalnością sklepu i przygotowujemy konkursy.

Blogger z mikroblogami część 1 – integracja z Flakerem (FP)

Mikroblogi przeżywają w na świecie szalony rozwój. W Polsce mamy Blipa, Śledzika, Spinacza i Flakera, który niby jest agregatorem, niby platformą mikroblogów, ale przede wszystkim dysponuje najbardziej zgraną społecznością w polskim świecie mikrotwóców (do której ja rónież się zaliczam – jeśli jeszcze tego nie robisz, to możesz mnie obserwować). Flaker ma rónież całkiem pokaźną liczbę dodatków i aplikacji wykorzystujących jego API. Jednym z nich jest FlakPress - dodatek do twojego bloga, który przy każdym wpisie prezentuje reakcje i komentarze z serwisu Flaker.pl powiązane z danym wpisem.
Dokładniej gdy wchodzisz pierwszy raz na stronę z aktywnym FlakPress’em tworzy się specjalny użytkownik na Flakerze – np. dla poradnika jest to użytkownik poradnik.webatech.pl. Użytkownik ten gromadzi informacje o nowych postach na twojej stronie i do jego wpisów podpinają się komentarze pozostawiane przez użytkowników.
Podpowiem jak zintegrować Flakera z Bloggerem i dodać do niego FlakPress. Wszystko co należy zrobić, to dodać kod skryptu w odpowiednim miejscu.

1. Na początku otwieramy Pulpit nawigacyjny Bloggera dostępny po zalogowaniu na stronie http://blogger.com. Następnie klikamy na link Układ (patrz zrzut poniżej). Spowoduje to otwarcie się nowej strony z możliwością zmian wyglądu bloga.
2. W celu przejścia do edycji kodu, klikamy na zakładkę . Następnie zaznaczamy opcję i po przeładowaniu strony w obszarze w polu tekstowym w kodzie odnajdujemy (stosując skrót wyszukiwania Ctrl + F) znacznik </title>, by wstawić podany w następnym punkcie kod.
3. FlakPress działa dzięki bibliotece jQuery, dlatego w kodzie strony musimy dodać jej pobranie. Wstawiamy również odwołanie do funkcji JS dostępnej na serwerze Flakera, arkusz styli CSS i samą funkcję.
   

   <!-- flakpress -->
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   <script src='http://static0.flaker.pl/static/js/flaker/flaker.blog.js' type='text/javascript'/>
   <link href='http://static0.flaker.pl/static/css/flaker/widgets.css' rel='stylesheet' type='text/css'/>
   <script type='text/javascript'>
       jQuery(function(){
           var flakpress1 = new flaker_c({&quot;target&quot;:&quot;#flakpress_1&quot;, &quot;form_width&quot;:&quot;695px&quot;,&quot;form_add&quot;:1,&quot;show_visits&quot;:1, &quot;show_flaker_button&quot;:1, &quot;show_favs&quot;:1, &quot;show_comments&quot;:1, &quot;show_reactions&quot;:1, &quot;comments_position&quot;:&quot;above&quot;,&quot;height&quot;:&quot;auto&quot;, &quot;bg&quot;:&quot;#fff&quot;,&quot;anonim&quot;:1,&quot;sort&quot;:&quot;asc&quot;,&quot;singlemode&quot;:1,&quot;border&quot;:&quot;auto&quot;});
           flakpress1.blog_init();
         });
   </script>
   <!-- flakpress koniec -->
   

4. Na koniec musimy jedynie wstawić ramkę, czyli znacznik <div> z odwołaniem do Flakera, w odpowiednie miejsce w kodzie. Ja proponu ję umieścić go tuż przed komentarzami. Dlatego ponownie uruchamiamy wyszukiwanie, tyle że tym razem odnajdujemy wyrażenie <b:includable id='comments' var='post'> tuż za nim wstawiamy <div id='flakpress_1'/>.
5. Na koniec, w celu zatwierdzenia nowej konfiguracji klikamy na przycisk . Od teraz komentarze z flakera do naszych wpisów i odwiedziny naszej strony przez flakerowiczów będą wyświetlane na naszym blogu tuż przed komentarzami (patrz zrzut poniżej).
   

Poprawiamy SEO Bloggera część 1: lepsze indeksowanie podstron

Domyślnie Blogger wyświetla tytuły podstron w postaci “tytuł strony + tytuł wpisu”. Jednak by być bardziej widocznym w wyszukiwarce lepiej zdecydować się na odwrotną budowę tytułu podstrony. Okazuje się, że w Bloggerze możemy to prosto zrobić, pokażę jak.

1. Rozpoczynamy od otwarcia Pulpitu nawigacyjnego Bloggera dostępnego na stronie http://blogger.com. Następnie klikamy na link Układ (patrz zrzut poniżej). Spowoduje to otwarcie się nowej strony z możliwością zmian wyglądu bloga.
2. W celu przejścia do edycji kodu, klikamy na zakładkę . Następnie w obszarze w polu tekstowym w kodzie odnajdujemy (korzystając ze skrótu skrót Ctrl + F) wyrażenie <title><data:blog.pageTitle/></title>. W zmiennej blog.pageTitle przechowywany jest tytuł strony, który dodawany jest do kodu HTML dzięki znacznikom <title></title>.
3. Następnie zamiast niego wpisujemy warunek if-else, w którym sprawdzamy czy jesteśmy na stronie głównej bloga (zmienna blog.homepageUrl), jeśli tak to wyświetlamy tylko tytuł bloga. W przeciwnym przypadku tytuł składa się z tytułu wpisu i tytułu bloga połączonych słowem na, które można dowolnie zmienić.
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <title><data:blog.pageTitle/></title>
   <b:else/>
   <title><data:blog.pageName/> na <data:blog.title/></title>
   </b:if>
4. Na koniec, w celu zatwierdzenia nowej konfiguracji klikamy na przycisk . Od teraz nasz tytuł będzie wyglądać inaczej.

Wpis zainspirowany blogiem Devona.

Polonizujemy Bloggera część 4: poprawiamy datę – sposób drugi

Przedstawiony przeze mnie wcześniej opis zmiany daty na polską w Bloggerze można nieco udoskonalić. Korzystając z domyślnego rozwiązania dateHeader skazujemy się na wyświetlanie daty tylko przy pierwszym wpisie (jeśli wybranego dnia jest stworzyliśmy ich kilka). Jednak problem ten można rozwiązać stosując funkcję timestamp, która wykorzystywana jest m.in. do określania czasu dodania komentarza do wpisu. Pokażę jak zmodyfikować ustawienia, by osiągnąć sukces. Poradę przedstawię od strony osoby, która jeszcze nie uruchomiła polskiej daty na swoim blogu.

1. Rozpoczynamy od otwarcia Pulpitu nawigacyjnego Bloggera dostępnego na stronie http://blogger.com. Następnie klikamy na link Układ (patrz zrzut poniżej). Spowoduje to otwarcie się nowej strony z możliwością zmian wyglądu bloga.
2. W celu przejścia do edycji kodu, klikamy na zakładkę . Następnie zaznaczamy opcję i po przeładowaniu strony w obszarze w polu tekstowym w kodzie odnajdujemy (skrót Ctrl + F) wyrażenie
   <span class='date-header'><data:post.dateHeader/></span>  
   Zamiast <data:post.dateHeader/> wpisujemy wywołanie funkcji w JavaScript, którą za chwilę dodamy. Jako argument podajemy już nową zmienną data:post.timestamp. Całe wyrażenie ma wtedy postać:
   <SCRIPT> poprawna_data(&#39;<data:post.timestamp/>&#39;);</SCRIPT>
3. Następnie przechodzimy na początek kodu szablonu i po wierszu:
   <title><data:blog.pageTitle/></title>
   wklejamy wspomnianą funkcję JS:
   
   
   

   <SCRIPT type='text/javascript'>

   //<![CDATA[
   function poprawna_data(date) {
   var data = date.split('/');
   var dzien = data[1], miesiac = data[0], rok = data[2];
   var miesiace = ['0','stycznia','lutego','marca','kwietnia','maja','czerwca','lipca',
   'sierpnia','września','października','listopada','grudnia'];
   document.write(dzien+" "+miesiace[miesiac]+" "+rok); }
   //]]>
   </SCRIPT>
   
   
   
4. Na koniec, w celu zatwierdzenia nowej konfiguracji klikamy na przycisk . To jednak nie wszystko musimy jeszcze zmienić format daty, tak żeby funkcja split(‘/’) mogła zadziałać. W tym celu przechodzimy na główną zakładkę i następnie na .
5. Na nowo otwartej stronie odnajdujemy listę Format znacznika czasu i wybieramy z niej sposób wyświetlania daty z ‘/’, na przykład dla daty 5 września 2009, będzie to 09/05/2009. Na koniec w celu zapisania nowej konfiguracji klikamy na przycisk . Od teraz miesiące na blogu będą podawane we właściwym przypadku i co ważne data będzie występować przy każdym z postów.

Nowy widżet tłumaczący z Google Translate

Kilka tygodni temu opisywałem usługi Google korzystające z serwisu, tudzież API Google Translate. Można je znaleźć pod tagiem Google Translate. Jednak w tym czasie Google postanowił przebudować nieco tą część serwisu, w której do dyspozycji mamy widżet umożliwiający tłumaczenie stron WWW. Pokażę jak z niego skorzystać.

1. Otwieramy stronę http://translate.google.pl i klikamy na link/zakładkę . Zostajemy przeniesieni na nową podstronę serwisu. Zakładamy, że nasza strona jest w języku polskim, dlatego z listy 1. Wybierz język swojej strony internetowej: wybieramy .
2. Domyślnie widżet umożliwia tłumaczenie na wszystkie 52 języki dostępne w usłudze. Jednak jeśli chcemy wybrać tylko te najpopularniejsze w punkcie 2. Wybierz ustawienia opcjonalne: zaznaczamy opcję i na liście wybieramy te, o których wcześniej myśleliśmy.
3. Następnie kopiujemy kod umieszczony w polu oznaczonym punktem 3. i wklejamy go na swoją stronę. Efekt jest następujący (patrz zrzut po prawej). Wystarczy teraz wybrać z listy język i strona zostanie przetłumaczona. Nowością stosowaną przy tej wersji widżeta jest pasek Google Translate, wyświetlany w celach informacyjnych – zawiera m.in. opcje tłumaczenia i wyświetla procent przetłumaczenia strony w trakcie trwania procesu (patrz zrzut poniżej). Zachęcam do testów.

Startujemy z Google Wave

Kiedy udało nam się zdobyć zaproszenie do Google Wave, warto je wykorzystać. Krótko charakteryzując nowy produkt Google można napisać, że jest to multikombajn do komunikacji: połączenie komunikatora internetowego IM (np. takiego jak Gadu-Gadu, czy Miranda) z klientem e-mail do odbierania poczty (np. Gmail, lub inne podobne usługi firm takich jak Wirtualna Polska, Onet, Interia, czy O2). Warto się nim zainteresować  zwłaszcza, że jego kod zostanie udostępniony na otwartej licencji, co zapewni powstanie jego wielu niezależnych implementacji. Na początku pokażę jak zalogować się do Google Wave.

1. Kiedy w naszej skrzynce znajdziemy e-mail od “wave-noreply” z tematem “xaxbxc has invited you to preview Google Wave” możemy czuć się wyróżnieni, bowiem Google rozdaje dostęp do GW poprzez zaproszenia. Scenariusz pozyskiwania nowych użytkowników (znajomych znajomych) jest już sprawdzony, podobny był wykorzystywany w pierwszych latach istnienia Gmaila (poczta Google). Otwieramy zatem wspomniany e-mail i upewniając się, że rzeczywiście jest to zaproszenie od Google klikamy na link, który powinien mieć budowę podobną do tego: https://wave.google.com/wave/invite?a=pre&wtok=90067d7d764d3718&wsig=ABk8uhQYzaN2oOJJhF6_mGHjU6wEOhqI_Q
2. Zostaniemy przekierowani do strony logowania do Wave (patrz poniżej). W celu skorzystania z usługi należy dysponować kontem Google Account (klikamy na link Create an account now i postępujemy według porady Zakładamy konto) lub skorzystać z konta Gmaila (jak założyć konto w Gmailu czytaj w poradniku). Kiedy mamy już stosowne konto to uzupełniamy dane w polach Email (adres e-mail) i Password (hasło). Następnie klikamy na przycisk .
3. Spowoduje to zalogowanie się do Google Wave. Po lewej stronie okna znajdziemy panel , w którym znajdziemy wszystkie przesyłane do nas informacje. Poniżej znajduje się box z kontaktami do osób, które mamy w książce kontaktowej Google (tzw. do tych, do których pisaliśmy e-maile). Centralne miejsce w Wave zajmuje obszar wyświetlający wszystkie fale . Za to najbardziej po prawej znajduje się panel w którym prowadzimy korespondencję i uczestniczymy w tzw. fali komunikacyjnej tzn. właśnie wave. W kolejnych częściach przedstawię jak korzystać z Wave.

Piszemy bloga z Google Sidewiki

Prawdopodobnie jedyną użyteczną funkcją Google Sidewiki jest możliwość dodawania wpisów do Bloggera. Aby skorzystać z Sidewiki musisz najpierw zainstalować Google Toolbar (dostępny na stronie http://google.com/toolbar) i uruchomić Sidewiki. Kiedy będziesz gotowy wystarczy, że przeczytasz poniższą poradę, na końcu której prezentuję wideo objaśniające jak korzystać z funkcji.

1. Na początku otwieramy Firefoksa lub Internet Explorer, bo tylko dla nich dostępny jest Google Toolbar. Następnie wchodzimy na stronę, na temat której chcemy stworzyć wpis i w toolbarze klikamy na ikonę , co spowoduje otwarcie się po lewej stronie sidebara.
2. Jeśli nie jesteśmy zalogowani na konto w Google zobaczymy informację “Aby utworzyć wpis, zaloguj się na konto Google.” Klikamy wtedy na link zaloguj się i w kolejnym oknie, które się otworzy (patrz zrzut ekranowy obok) w polu E-mail wpisujemy adres e-mail konta w serwisie Google (jeśli go nie masz przeczytaj poradę), a w Hasło, hasło do niego. Następnie klikamy na przycisk .
3. Jeśli chcemy opublikować informację na temat całej strony, to nic nie zmieniamy, jednak gdy chcemy skomentować tylko wybrany tekst znajdujący się na danej witrynie, to musimy go najpierw zaznaczyć.
4. Następnie musimy uzupełnić dwa pola: Tytuł wpisu i Pomocne informacje na temat strony (czyli treść wpisu) – patrz zrzut obok.
5. Na koniec pozostaje już tylko wybranie bloga, na którym chcemy opublikować notkę. W tym celu klikamy na link Moje blogi w Bloggerze i z listy wybieramy określony dziennik. W celu akceptacji klikamy na przycisk .
6. Wpis zostanie stworzony na wybranym blogu. Możemy go dodatkowo udostępnić znajomym za pomocą e-maila, facebooka, czy twittera. Stworzony tekst będzie widoczny również w naszym profilu.