Ptaszor i jego blog! Lol…

W skrócie czym jest jQuery?

jQuery to lekka Biblioteka programistyczna dla języka JavaScript, ułatwiająca współdziałanie JavaScript oraz HTML. (Wikipedia)

jQuery możemy wykorzystać w celu uczynienia naszej strony bardziej interaktywną, co nada jej bardziej interesujący wygląd dla użytkownika. Wpis ten jest zbiorem 35+ praktycznych przykładów wykorzystania tej jQuery na własnej stronie. Warto mieć pod ręką spisane wartościowe przykłady, które pokazują jak wykorzystać i do czego je zastosować. W pokazanych poniżej przykładach większość związana z zastosowaniem do obsługi formularza, w miarę upływu czasu uzupełnione zostaną pozostałe kategorie…

Czytaj całość…

Nie całe półtora roku temu wspominałem o tym, że coś w końcu się ruszyło z tłumaczeniem rekomendacji Konsorcjum W3C, zrobiłem nawet zrzut – istniejącej wtedy liczby tłumaczeń.

Pisząc wtedy:

Dzisiaj z samego rana odwiedziłem ponownie witrynę, na której są zawarte polskie rekomendacje. Zostałem bardzo miło zaskoczony, bo mimo, że niedawno jeszcze byłem na tej stronie to dziś ujrzałem zmiany. Tymi zmianami to są dodane nowe tłumaczenia specyfikacji. Szczególnie dużo tłumaczeń poświęcono WAI.

Od tamtego momentu lista ta nabrała dość pokaźnych rozmiarów bo na dzień dzisiejszy nie wygląda ona tak marnie jak wtedy.

Wtedy było udostępnionych 27 tłumaczeń, natomiast na dzień dzisiejszy mamy ich 66.

Ale… No właśnie, zawsze musi być jakieś ale…
A teraz pokrótce ta mniej miła część dotycząca kilkunastu zawartych tam tłumaczeń. Któregoś dnia zacząłem przeglądać i czytać na wyrywki kilka tłumaczeń, ku mojemu zdziwieniu na stronach zatwierdzony przez organizację o dużej renomie jaką jest Konsorcjum W3C – dosłownie nikt (tak przypuszczam) nie kwapi się do robienia jakiejkolwiek korekty (choćby pod względem stylistycznym, o ortach nie mówię) materiałów jakie są podczepiane jako Polskie wersje językowe – wybranych tematów, zagadnień itd..

Pomyślałem sobie – OK – spróbuje co nieco oczyścić pierwszy lepszy dokument, z różnych takich potworków oraz kfiatków – w ostateczności w okresie miesiąca poprawiłem kilka tłumaczeń tej samej grupy osób, opisałem wszelkie zmiany jakie powinny wystąpić, oznaczyłem w których momentach coś jest nie tak, gdzie są orty itp. Poniżej zrzut z Gmaila z jednym z pierwszych listów jakie do nich wysłałem:

Odpowiedzi – nigdy nie otrzymałem, ale po pewnym okresie w końcu odezwał się Pan i potem też Pani kierujący tą grupą tłumaczy, twierdzili, że wszystkie moje poprawki do nich dotarły – zmiany będą wprowadzone do połowy stycznia lub początku lutego 2007 r. Oczywiście – z poprawek (jak widać) nici… Pisałem kilkanaście razy, ale nikt z tej firmy czy grupy nie raczy odpisać, zaktualizować zawartość swoich stron – w szczególności gdy dostaje się listę błędów i poprawek :/

Najbardziej zabawne z tego wszystkiego, to jest chyba proces podpinania stron z danym tłumaczeniem w danej wersji językowej. Wystarczy wysłać na grupę W3C, że jest to takie i takie tłumaczenie z odnośnikiem do tłumaczenia, a z obserwacji moich wynika, że po kilku godzinach link jest weryfikowany i to tłumaczenie z błędami trafia na oficjalną stronę z tłumaczeniami. Czyli weryfikacja, jeśli w ogóle występuje, to na jakiej zasadzie?

Szkoda tylko, że Ci co narobili sporo czasem błędów – nie chcą skorzystać z praktycznie gotowych poprawek i wolą, aby potworki straszyły w Sieci! O wiele lepiej by było gdyby takie tłumaczenia były najpierw wrzucane na jakieś Wiki? Wtedy kilka osób na pewno by pomogło poprawić jakość tłumaczeń… A dopiero potem wstawiać je na przykład na strony mało dostępne (dla większości) pod względem późniejszych zmian.

Przed momentem znalazłem kilkanaście filmików szczegółowo opisujących kluczowe usługi Google! AdWords, AdSensa, Aplikacje internetowe i inne. Powiem Wam, że bardzo fajnie się ich słucha, gdyż jesteśmy dosłownie prowadzeni za rączkę. Na pewno milej się ich słucha niż czyta pomoc Google która czasem jest dość chaotyczna.

Aplikacje Google

Pierwsze kroki w AdWords cz.1

Pierwsze kroki w Google AdWords, część 2

Na czym polega reklama w Google

Tak, to prawda! Ostatnio będąc we Wrocławiu postanowiłem zapisać się na Kurs WWW. Jako, że webmaster ze mnie dobry (chyba) to postanowiłem zapisać się na owy kurs z dwóch powodów:

• Pierwszym powodem jest to, że po tygodniu będę miał dyplom Ministerstwa Edukacji o ukończeniu takiego kursu, co zapewne się przyda do portfolio,
• Drugim powodem jest to, że chcę sprawdzić czego właściwie można się na takim kursie nauczyć?!

Działając przez ponad dwa lata w Osiolki.net wiem, że poziom pisanych stron w Polsce nie jest doskonały. Chcąc sprawdzić skąd się to bierze wpadłem na ww. pomysł . Także dziś rano (tzn. w niedziele) pojechałem zapisać się na kurs który potrwa, bagatela 30 godzin! Jak by nie patrzeć w 30 h to raczej nikt nie będzie umiał pisać stron. Ale z drugiej strony, może się mylę. Kurs odbędzie się w Prominet Collage i oferuje następujący program:

CEL KURSU:
- błyskawiczne i profesjonalne zdobycie wiedzy z zakresu tworzenia stron WWW,
- poznanie wybranych zastosowań i narzędzi informatycznych z danego zagadnienia.
Kurs prowadzony jest w formie warsztatów podczas których każdy z uczestników wykona własną działającą stronę WWW.

CZAS TRWANIA:
30 godzin
Kurs realizowany jest w systemie codziennym od poniedziałku do piątku w godz. od 9.00 do 13.00.

CO UMOŻLIWIA KURS:
- uzyskanie kwalifikacji projektanta stron www, potwierdzonych zaświadczeniem o ukończeniu kursu na druku Ministerstwa Edukacji Narodowej.

PROGRAM KURSU obejmuje m.in.:
1. Wprowadzenie - 1 godz.
- podstawy działania sieci Internet
- wprowadzenie do technologii WWW i HTML
2. Przeglądarki WWW - 1 godz.
3. HTML - 10 godz.
- struktura dokumentu
- czcionki
- bloki
- odsyłacze
- wykazy
- tabele
- style
- ramki
- formularze
4. Przegląd programów wspomagających tworzenie stron - 4 godz.
5. Umieszczanie stron na serwerze WWW - 4 godz.
6. Java Script - wprowadzenie - 2 godz.
7. Wstawianie gotowych elementów Java Script do ston WWW - 2godz.
8. Tworzenie elementów multimedialnych w technologii Flash -6 godz.

Zostałem poinformowany, że kurs zacznie się około 15 listopada, z miłą chęcią zdam relację z jego przebiegu. Przynajmniej na własnej skórze dowiem się jak się uczy przyszłych webmasterów w szkołach oraz na jakich metodach się to robi. Aż mnie ciekawi, czy od razu zostanie podjęta walka z divami, czy dla uproszczenia pozostanie wytłumaczone jak robić strony w tabelkach :/, albo nie daj Boże na ramkach (grr… zgroza).

Feel the Summer – 24.08.2007 – Lubsza – Basen (noc atrakcji)… DJ Dragon, DJ Noiserr, DJ Miter, DJ Ziro, DJ Andree…
Czas umilą Wam ładne, super fajne striptizerki w swoim świetnym tańcu GO GO!

Niezmiernie mi miło poinformować Was, że organizuję plenerową imprezkę Techno "Feel the Summer" i chciałbym Was oficjalnie zaprosić na noc pełną niezapomnianych wrażeń.

Feel the Summer – poczujmy więc lato…

Impreza została przygotowywana ze szczególną starannością i precyzją, aby w czasie jej trwania maksymalizować Wasze zadowolenie i podziw w czasie trwania eventu jak i po jego zakończeniu.

Najbliższy event, nad którym pracujemy od kilku tygodni będzie czymś, co Was totalnie zaskoczy, nie będzie to zwykła imprezka a ogromne show przygotowane z wielką pompą.

Dlatego serdecznie zapraszam do częstego odwiedzania strony WWW, aby nie przegapić najnowszych informacji nt. Wspomnianego wydarzenia!

Oczywiście zapraszamy Was, wraz z Waszymi przyjaciółmi, podzielcie się tymi informacjami ze znajomymi o nadchodzącej imprezie.

Dzięki Wam możemy stworzyć coś co trudno "ubrać" w słowa! Jedyne, co musicie zrobić to przyjść/przyjechać na mega imprezę 24 sierpnia i pokazać wszystkim, że to lato będzie inne niż wszystkie poprzednie!

Żyjecie?! Tak?! To koniecznie bądźcie 24 sierpnia w Lubszy i zabierzcie ze sobą wszystkich znajomych.

Może nie każdy w to od razu uwierzy co tutaj przeczyta, ale na wstępie zapowiadam, że to prawda! Jeszcze nigdy w Lubszy nie było takiej imprezy plenerowej, z tak powalającym wachlarzem atrakcji jaki przygotowali organizatorzy Feel the Summer!

Powered by Targeo® | AutoMapa®

24 sierpnia będzie to wyjątkowa impreza dla wszystkich, tych którzy zagoszczą w Lubszy na terenie basenu, gdyż oprócz takich atrakcji jak znani DJ’e, którzy zagrają najlepsze kawałki swego repertuaru, wspierani wysoką klasą nagłośnienia i oświetlenia, będziemy mogli zobaczyć na żywo taniec Go-Go.

W skrócie podpowiem, będzie to impreza jakiej dawno nie było w województwie Opolskim…

Uwaga!

Wisienką na naszym imprezowym torcie będzie występ czterech znanych Dj’i na jednej imprezie.

• DJ Dragon
• DJ Noiserr
• DJ Ziro
• DJ Miter
• DJ Andree

Wszystko dla Was! Dodatkowo syto zaopatrzone bary i punkt gastronomiczny, który będzie "opiekował się Waszymi żołądkami".

Na Feel the Summer będziecie mogli wejść przez bramę główną (już na dwie godziny przed rozpoczęciem imprezy), aby uniknąć późniejszych kolejek.

O wasze auta zadba parking strzeżony na 1000 pojazdów…

Jeśli ktoś ma ochotę przybyć to już teraz może dopisać się do księgi osób, które przybędą.

BTW:Wieki nie pisałem na blogu, praca, praca, praca – postaram się wrócić do regularnego pisania, a ta reklama powyżej to taki mój mały pomysł, który realizowałem przez ostatnie 5 tygodni. Z jakim skutkiem, już dziś się przekonamy…

Po już dawnej zapowiedzi w końcu postanowiłem się szerzej przyjrzeć nowemu elementowi języka HTML 5 – czyli czym jest canvas?

Ok, na początek zobaczmy jak wygląda ten nowy i tajemniczy element <canvas>:

<canvas id="pierwszy_przyklad" width="150" height="150"></canvas>

Element Canvas posiada tylko dwa atrybuty; są nimi height i width. W powyższym przykładzie użyliśmy ich, ale w rozmiarach jakie sami chcieliśmy nadać naszej grafice. Są one opcjonalne i mogą być również określane jako własności DOM lub zasady CSS. Kiedy atrybuty wysokości i szerokości nie są określone, to wtedy obiekt <canvas> będzie posiadał wielkości domyślne czyli; 300 pikseli długości i 150 pikseli wysokości.

Elementu <canvas> możemy nadać takie same style jak normalne; obrazy (margines, obramowanie, tło, itd.). Kiedy do elementu <canvas> nie ma przypisanych żadnych stylów, to wtedy canvas będzie całkowicie przezroczysty.

Narysujmy, więc coś…

Wykonajmy nasz pierwszy rysunek za pomocą elementu canvas. Tworzymy pierwszą stronę, która będzie zawierała nasz powyższy kod elementu canvas, lecz samo wstawianie kodu nic nam nie wyświetli, a co dopiero cokolwiek ma narysować.
Chcąc rozpocząć rysowanie musimy zastosować metodę DOM getContext. Każdy element canvas posiada metodę DOM zwaną getContext do uzyskania dostępu do funkcji rysujących. Metoda getContext może przyjąć tylko jeden parametr, który to jest trybem rysowania. Aktualnie jest dostępny tylko jeden tryb i jest to tryb 2d. W przyszłości będziemy mogli zobaczyć tryb 3d, lecz teraz pozostajemy przy trybie 2d.
Korzystając z kolejnej metody DOM – getElementById, zdefiniujemy pierwszą linię skryptu pozwalającego nam na rozpoczęcie rysowania za pomocą elementu Canvas. Metoda ta pozwoli nam na uzyskanie dostępu do drugiej metody getContext, dzięki której mamy dostęp do trybu rysowania:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

Starsze wersje przeglądarek?!

Firefox w wersji 1.0 i starsze jego wydania oraz np. Internet Explorer w wersji 6 nie potrafią rozpoznać elementu Canvas. Co teraz?
Potrzebujemy metody chroniącej przeglądarki, które nie wspierają canvas, przed uruchomieniem naszego skryptu. Można tego łatwo dokonać wykonując test metody getContext. Kawałek górnego kodu wyglądał będzie tak:

var canvas = document.getElementById('canvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // kod rysowania
}

Do kodu należy dodać jeszcze wyrażenie if, aby przeglądarka nie potrafiąca wczytać Canvas, nie próbowała tego zrobić.

Łączenie kodu

Połączę teraz wszystko, tworząc nam szablon podstawowego dokumentu do innych przykładów:

<html>
  <head>
    <title>Szablon elementu Canvas</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('pierwszy_przyklad');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 2px solid black; }
    </style>
  </head>
  <body onload="draw();">

    <canvas id="pierwszy_przyklad" width="150" height="150"></canvas>

  </body>
</html>

SZABLON – pobierz!

Wracając do kodu i spoglądając na skrypt zobaczymy, że została wywołana funkcja draw, która zostanie raz wywołana, kiedy zakończy się ładowanie strony (poprzez umieszczenie atrybuty onload w znaczniku body).

Ok, pierwsze koty za płoty . Utworzyliśmy szablon, który posłuż nam niedługo jako podkład pod bardziej zaawansowane przykłady. Niebawem kolejne części opisu Canvas, a między czasie odsyłam do korzystania z zasobów Mozilla Developer Center.

Treść wraz przykładami została opracowana na podstawie Przewodnika po canvas, będącego częścią MDC PL.

Pewien czas temu znalazłem w sieci, gdzieś na jakiejś stronie bardzo ładnie wyglądający efekt powiększania obrazka. Jest on widoczny na moim blogu od jakiegoś czasu:

Jak widać na powyższym zrzucie po kliknięciu w obrazek na blogu jesteśmy przenoszeni do pełnego wymiaru klikniętego obrazka, ale żeby to nie wyglądało tak brzydko, podczas kliknięcia uruchamiany jest plik lightbox.js i lightbox.css plus do tego trzy pliki graficzne; overlay.png, close.gif i loading.gif.

Aby zaimplementować ten ładny efekt na naszej stronie wystarczy do kodu strony dopisać w <head> następujący fragment:

<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/lightbox.js"></script>

U mnie skrypt i arkusz stylów znajduje się w katalogu lightbox.

Po dodaniu tegoż kodu, aby zadziałał nam skrypt i żebyśmy zobaczyli ten efekt to do odnośnika, który prowadzi do obrazka, który chcemy zobaczyć musimy dodać atrybut rel="lightbox". Powyżej pokazany jest obrazek będący odnośnikiem, a teraz kliknij zwykły odnośnik wywołujący ten efekt. Jego kod:

<a href='http://medeco.p9.pl/wordpress/wp-content/uploads/2007/02/podglad_obrazkow.png' title='Tytuł odnośnika' rel="lightbox">kliknij zwykły odnośnik</a>

Oprócz atrybutu rel możemy dodać atrybut title, który zostanie wyświetlony jako tytuł naszego powiększonego obrazka.

Ok, efekt ładny i przyda Wam się na pewno. Robi wrażenie. Chciałbym Was jeszcze prosić, o to że gdyby ktoś znał autora skryptu niech poda – bo ja nie pamiętam nawet z jakiej strony to “podwędziłem”

Całość załączam w spakowanym zipem folderze: lightbox.zip

Przed kilkoma dniami do usługi Google Sitemaps została dodana nowa opcja “Linki“.

Czym jest Google Sitemaps?

Konto narzędzi Google dla webmasterów zawiera informacje o dodanych do niego witrynach, mapach witryn i ich najnowszych aktualizacjach. Do konta można również dodać nowe mapy witryn, które mają być zaindeksowane przez Google.

Nowa opcja “Linki”

Dodanie nowej opcji pozwala nam na zobaczenie, kto i z jakiej strony linkuje do naszego adresu. Podczas sprawdzania można się natchnąć nie raz na ciekawe miejsca gdzie jest umieszczony link do naszej strony. Do tej pory można było to sprawdzać dodając w polu wyszukiwarki Google napis “link:” lub “site:” przed adres naszej strony lub domeny do której chcieliśmy znaleźć wszystkie odnoszące się wpisy w sieci.

Dodatkowo możemy znaleźć wszystkie linki wewnętrzne naszej strony, które są zindeksowane w Google. Jest to przydatne narzędzie dla tych którzy lubią szczegółowo przeglądać statystyki i chcą wiedzieć kto jak i skąd odwiedza naszą stronę lub bloga.

Polecam wypróbować – pomaga na pewno w zaistnieniu w wyszukiwarce .

Więcej: Blog Google (PL)

Jak wynika z licznika zamieszczonego na planecie Mozilli, jeszcze tylko ok 8 godzin i powinna zostać wydana druga alpha Firefoksa w wersji trzeciej.

Od dłuższego czasu na Mozilla Developer Center PL, aktualizuje spis tego, co już zostało zaimplementowane w nowym Firefoksie. I tu moja mała prośba: Jeśli macie chwilę, są tam oznaczone (na razie) dwa artykuły z flagami “Pomóż w tłumaczeniu“. Oznaczają one że artykuły należałoby przetłumaczyć na wersję polską.
Podobnie robiliśmy jak miał wyjść Fx 2, wtedy pomogliście (choć zostały jeszcze dwa do przetłumaczenia, ale było ich sporo). W każdym bądź razie podam do nich też odnośniki, może ktoś znajdzie chwilkę i je doprowadzi do końca.

Artykuły związane z Firefoksem 3, które są do przetłumaczenia:

• Firefox 3 dla programistów
• Zmiany w Gecko 1.9 wpływające na wyświetlanie stron
• Miejsca

Artykuły związane z Firefoksem 2, które są do przetłumaczenia:

• Storage
• Zmiany w motywie graficznym w Firefoksie 2

Jeśli chodzi o artykuły dotyczące wersji trzeciej to zapewne pojawi się ich jeszcze sporo, lecz nieco później.

Kolejna krótka porada zaczerpnięta z mozilla links, a dotyczy ona panelu bocznego w Firefoksie. Cóż to za panel?

Panel boczny to fragment okna przeglądarki, który może zawierać dowolne, przydatne informacje. Mogą to być zakładki, historia lub też dowolna wybrana przez użytkownika strona.

Standardowo w Firefoksie mamy ten panel umieszczony z lewej strony okna. A co z tymi użytkownikami, którzy nie lubią korzystać z takiego położenia panelu? Przestawmy wspomniany lewy panel boczny na prawy (panel będzie się pojawiał po przeciwnej stronie okna przeglądarki).

Podobnie jak w poprzednim poście dodajemy poniższy kawałek kodu do pliku userChrome.css

/* Wyświetla panel po przeciwnej stronie */
#browser {
-moz-box-direction: reverse;
}

Jak widać mój pasek historii już jest po prawej stronie przeglądarki.