Moja pasja programowanie...

Robiąc dla kolegi szablon pod WordPress podpatrzyłem łatwy sposób na zrobienie daty wpisu w postaci kartki z kalendarza. Rozwiązanie mi się spodobało i wstawiłem takie coś u siebie na blog. Moim zdaniem prezentuje się o wiele lepiej niż wcześniejszy format daty. Jak wstawić takie coś na swojego joggera? Wystarczy wykonać kilka kroków: 1. Wgrywamy plik kalendarz.png na serwer 2. Do arkusza styli dodajemy kod:

div.data {
        height: 36px;
        width: 26px;
        background-image: url('/files/kalendarz.png');
        font: normal 10px Arial, Helvetica, sans-serif;
        color: #666666;
        text-align: center;
        line-height: 100%;
        float: left;
        margin: 2px 2px 0px 0px;
}
div.data span {
        height: 16px;
        display: block;
        font: normal 12px Arial, Helvetica, sans-serif;
        color: black;
        text-align: center;
        padding-top: 5px;
}

3. W miejsce gdzie ma się wyświetlić data wklejamy:

<div class="data"><span><ENTRY_DATE_DAY/></span> <ENTRY_DATE_MONTH/></div>

Aby nazwa miesiąca ukazywała się w postaci 3 liter należy w panelu administracyjnym w zakładce Szablony | Nazwy własne | Miesiące wyedytować pola stycznia, lutego, marca itp.

6 komentarzy

Po kilku dniach pracy nad modyfikacją JGallery udało mi się zakończyć prace nad wersją testową JAGallery. Działanie skryptu można zobaczyć na stronie http://jony.com.pl/galeria/. Do rozwiązania został jeden problem po stronie PHP, a mianowicie błąd podczas tworzenia miniaturek z dużych obrazków. Widać go w galerii Domek po kliknięciu w jedną z pierwszych jedenastu miniaturek. Kod skryptu można pobrać pod adresem http://jony.com.pl/pliki/JAGallery.rar

Dodaj komentarz

Dzisiaj światło dzienne ujrzała nowa wersja skryptu JGallery. W wersji 3.6.2 nie ma rewelacyjnych zmian. Został poprawiony jedynie błąd, który powodował przekraczanie limitu czasu na wykonanie skryptu. Rozwiązaniem okazało się pomijanie miniaturek już istniejących oraz ustawienie w nagłówku maksymalnego czasu wykonania (30 sekund). Taki limit powinien wystarczyć, aby "zminiaturkizować" średniej wielkości galerię, a jeśli zostanie on przekroczony wystarczy odpalić ponownie skrypt, który przerobi resztę plików. Jednocześnie chcę powiadomić, że niedługo zacznę prace nad AJAX`ową wersją galerii. Będzie ona oparta o ten sam skrypt, jednak jej wyświetlanie będzie obsługiwane przez AJAX.

Dodaj komentarz

WYSIWYG (ang. What You See Is What You Get co znaczy dosłownie To Co Widzisz Jest Tym Co Otrzymasz) to akronim stosowany w informatyce dla określenia metod, które pozwalają uzyskać wynik w publikacji identyczny lub bardzo zbliżony do obrazu na ekranie. [Źródło: pl.wikipedia.org]

W skrócie mówiąc jest to tym, co mamy w edytorach tekstu (np. Word). Aby określić wygląd dokumentu umieszczonego w formularzu na stronie internetowej trzeba stosować html, lub znaczniki BBCode. Nie każdy jednak zna html i nie każda strona obsługuje znaczniki BBCode. Od niedawna dostępne są komponenty na stronę internetową, które pozwalają z bardzo prosty sposób umieścić edytor WYSIWYG w oknie przeglądarki. Mnie zainteresował projekt TinyMCE. Jest on bardzo prosty w instalacji i wymaga niewielkiej ingerencji w kod źródłowy strony. Nawet początkującemu webmasterowi dodatnie takiego edytora nie powinno zająć dłużej niż 3-4 minuty. Aby umieścić TinyMCE na stronie należy pobrać pliki oraz pakiet językowy. Folder z plikamy umieszczamy na serwerze. W kodzie strony, na której chcemy umieścić edytor należy w sekcji head dodać kod:

<script language="javascript" type="text/javascript" src="sciezka_do_pliku/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    language : "pl",
    entity_encoding : "raw",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,bullist,numlist,indent,separator,undo,redo,separator,link,unlink,anchor,image,separator,code", 
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    auto_cleanup_word : true,
    plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,fullscreen", 
    plugin_insertdate_dateFormat : "%m/%d/%Y",
    plugin_insertdate_timeFormat : "%H:%M:%S",
    extended_valid_elements : "a[name|href|target=_blank|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]", 
    fullscreen_settings : {
        theme_advanced_path_location : "top",
        theme_advanced_buttons1 : "fullscreen,separator,preview,separator,cut,copy,paste,separator,undo,redo,separator,search,replace,separator,code,separator,cleanup,separator,bold,italic,underline,strikethrough,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,help", 
        theme_advanced_buttons2 : "removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor",
        theme_advanced_buttons3 : "sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print" 
    }
});
</script>

I gotowe. Od tej pory w każdym polu textarea będzie widoczny edytor. Można zmieniać jego ustawienia zgodnie z instrukcjami zamieszczonymi na stronie producenta. Kod który podałem wyświetla jedynie najważniejsze funkcje, aby rozmiary panelu edytora były jak najmniejsze.

Edit: Na własnym przykładzie przekonałem się, że domyślne kodowanie znaków zawiera błąd w wyświetlaniu litery "ó", która pokazywana jest jako ó Sposobem na to okazało się dodanie

entity_encoding : "raw" 

do kodu wywołującego. Treść artykułu jest już poprawiona.

2 komentarze

Na świecie, a ostatnio także w Polsce zagościła moda na twitter`a. Jest to system powiadamiania znajomych o czynności, którą w tej chwili wykonujemy. Mojego twitter`a można znaleźć pod opcją szukaj. Przedstawię łatwy sposób na umieszczenie takiego skryptu na swojej stronie/blogu. Pierwszą rzeczą jaką należy zrobić jest rejestracja na stronie http://twitter.com. Serwis ten posiada możliwość dodawania nowych wpisów poprzez Jabbera. Wystarczy podać swój identyfikator podczas rejestracji lub w ustawieniach oraz wysłać podaną treść do twitter@twitter.com . Przejdźmy teraz do samego skryptu. Serwis Twitter udostępnia API do skryptów JavaScript, dzięki któremu można znacznie przyspieszyć wstawienie gadżetu na stronę/blog. Na końcu strony (przed tagami) </body></html> należy umieścić kod:

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/TWÓJ_NICK.json?callback=twitterCallback&count=1"></script>

gdzie TWÓJ_NICK zastępujemy tym, podanym podczas rejestracji. Kod ten wywoła funkcję twitterCallback (o niej za chwilę) jako parametr zwracając obiekt z danymi zawierającymi nasze wpisy. Wspomnianą funkcję musimy napisać sami. Ja posłużyłem się przerobionym nieco przykładem z oficjalnej strony serwisu. Stwórzmy zatem plik twitter.js z taką oto zawartością:

function przetworzCzas(dodane) {
  var teraz = new Date();
  var roznica = (teraz - dodane)/1000;

  if (roznica < 60) {
    return 'mniej niż minutę temu';
  } else if(roznica < 120) {
    return 'minutę temu';
  } else if(roznica < (60*60)) {
    return (parseInt(roznica / 60)).toString() + ' minut temu';
  } else if(roznica < (120*60)) {
    return 'godzinę temu';
  } else if(roznica < (24*60*60)) {
    return 'około ' + (parseInt(roznica / 3600)).toString() + ' godzin temu';
  } else if(roznica < (48*60*60)) {
    return 'dzień temu';
  } else {
    return (parseInt(roznica / 86400)).toString() + ' dni temu';
  }
}

function twitterCallback(Obiekt) {
        var kodHTML = '';
        var blok = $('twitter');
        for(i = 0; i < Obiekt.length; i++) {
                var date = new Date(Obiekt[i].created_at);
                var czas = przetworzCzas(date);
                kodHTML +=  "<li><span>[ " + czas + " ]</span><br/>" +Obiekt[i].text+"</li>";
        }
        blok.innerHTML = kodHTML;
}

Jak widać oprócz funkcji twitterCallback(); umieściłem także przetworzCzas(), która wyświetli nam nie datę, a czas jaki upłynął od dodania wpisu. W powyższym przykładzie posłużyłem się biblioteką prototype, która nieco ułatwia tworzenie skryptów JS. Jej kod można pobrać z http://jony.jogger.pl/files/prototype.js. W kodzie HTML naszej strony należy umieścić odwołania do tych skryptów. W sekcji <head> umieszczamy kod:

<script type="text/javascript" src="twitter.js"></script>
<script type="text/javascript" src="prototype.js"></script>

Ostatnią rzeczą jaka nam została jest ustalenie miejsca, w którym ma się wyświetlać nasz twitter. W wybrane miejsce w kodzie HTML należy wstawić:

<h2>Twitter</h2>
<ul id="twitter">
</ul>

Można także określić odpowiednie style dla tych elementów, które poprawią wygląd naszego twittera.

2 komentarze