Archive for Lipiec, 2008

Save The Developers 0

Akcja pod którą podpisuje się wszystkimi nibynóżkami.

http://www.savethedevelopers.org/

Trochę się pozmieniało 0

Witam czytelników,

Zmiany jakie dopadły mnie w ciągu ostatnich tygodni:

  • Posiadam już wyższe wykształcenie
  • Jestem na studiach Magisterskich
  • Zrobiłem już ponad 1000 km Fiestą
  • Zacząłem pisać w Adobe AIR
  • Nie używam “kurwa” w commitach na SVN’ie

Pozdrawiam :)

Bliżej Natury 1

Weekend, wycieczka autem “pod Poznań” (87,6 Km).  Spanie w namiocie. Deszcz, wilgoć, komary. Wszystko po to by odstresować się przed egzaminem wstępnym na studia II stopnia i spotkać się z Martą po 2 tygodniach rozłąki. Pełen energii i pogryzień spowodowanych przez Culex pipiens molestus. Wracam do Poznania by dostać się na studia. I podgonić projekty w pracy :)

Pozdro

GoogleMaps + Wordpress Szybki Kurs 5

  1. Wstęp

    Dawno nic o google maps nie pisałem zatem przedstawie wam kurs jak do statycznej strony np z kontaktem dodać mapę googla z kilkoma efektami. Ktoś pewnie zapyta: “po co? Przecież jest dokumentacja na googlemaps.com” Ja pokażę krok po kroku co i jak. Nie obraźcie się jeśli ten tutorial będzie wyglądał jak artykuł z “Komputer świata”.

  2. Pobieramy GoogleMaps API key

    1. Rozpoczynamy pracę od wejścia na stronę: http://code.google.com/apis/maps/
    2. Zgadzamy się z warunkami umowy licencyjnej i podajemy adres naszej strony:
    3. Gdy strona jest już zarejestrowana mamy dostęp do API key’a oraz do przykładowego skryptu.
  3. Piszemy Skrypt

    1. Tworzymy dwie rzeczy najpierw katalog js/ w katalogu wp-content/themes/nasztheme/ plik gmaps.js
    2. Kodujemy zdarzenie document.ready by załadować mapę.
      window.onload = function() {
      if (GBrowserIsCompatible()) {
      //Inicjalizacja mapy poprzez tworzenie obiektu
      var map = new GMap2(document.getElementById("map"));
      }else{
      alert("sorry but your browser sux hard. update it and come again!");
      }
      });
    3. Ustawiamy środek mapy i zoom
      map.setCenter(new GLatLng(35.083956, 103.710938), 4);
    4. Dodajemy kontrolki do mapy:
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
    5. Dodajemy punkt na mapie
      var lat = 0;
      var lng = 0;
      var point = new GLatLng(lat, lng);
      var marker = new GMarker(point);
      map.addOverlay(marker);
    6. Możemy jeszcze dodać dymek z opisem punktu lub adresem
      map.openInfoWindow(point, 'To jest nasz punkt!');
    7. Czyszczenie mapy z wszystkich markerów i InfoWindow odbywa się za pomocą polecenia:
      map.clearOverlays();
  4. Modyfikujemy Template

    Modyfikacja template polega na edycji pliku header.php plus ewentualnie można dodać kilka linii css w style.css
    Najpierw zostawmy wszystkie style i temu podobne
    Musimy w sekcji head dwie linie:

    <head>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=TUTAJ_WSTAWIAMY_API_KEY" type="text/javascript"></script>
     <script src="<?php bloginfo('template_directory'); ?>/js/gmaps.js.php" type="text/javascript">
    </script>
    </head>
    
  5. Umieszczamy Mapkę w kontakcie

    Sprawa prosta. Publikujemy nową stronę. Nazywamy ją kontakt.

    I dodajemy do niej naszą mapkę:
    <div id="map"></div>
    Można przy okazji ją również ostylować.
    <div id="map" style="width: 100%; height: 400px;"></div>

  6. First Run

    Nim odpalimy po raz pierwszy naszą mapkę. To najpierw pamiętajmy o wrzuceniu na serwer wszystkich plików. Nie wiem czy zbyt wiele wymagam ale biorę za pewnik to że potraficie obsługiwać jakiegokolwiek klienta FTP.
    Zatem wrzucamy pliki:
    wp-content/themes/nasztheme/js/gmaps.js
    wp-content/themes/nasztheme/header.php

  7. Efekty

    Wszyscy doskonale zdają sobie z tego sprawę że strona musi być efektowna. Można też użyć cytatu:

    - Aplikacja?
    - Ma być droga i robić biiip

    No to sprawa prosta żeby zadbać o tzw. “Wow Effect” (nie mylić z Word Of Warcraft) możemy zastosować małą animację. Dla dużego odsetka klientów ten cytat jest

    Np. Jeżeli Firma ma trzy oddziały w mieście to możemy zrobić takie coś:

    1. Na starcie ładujemy logo firmy
    2. Pokazujemy siedzibę główną, wyświetlamy dymek
    3. Pokazujemy pozostałe siedziby w odstępach czasowych i wyświetlamy dymek z adresem i telefonem

    By zaimplementować taki skrypt nie potrzebujemy dużo dodatkowej wiedzy z dziedziny javascript’u. Po pierwsze musimy wiedzieć jak używać funkcji:

    window.setInterval(function() {
    //tutaj implementujemy swoją funkcje bądź wywołujemy już wcześniej zaimplementowaną
    }, 4000);
    //4000 to czas w milisekundach czyli w tym wypadku 4 sekundy.

    Za animację naszej mapy będzie odpowiadać:

    //dodajemy marker
    var marker = new GMarker(point);
    map.addOverlay(marker);
    //wyświetlamy dymek
    map.openInfoWindow(point, 'tekst o odzdziale');
    //przesuwamy mapę
    map.panTo(point);

    Gdzie point to element z tablicy gdzie zdefiniowaliśmy oddziały firmy.

    Po wyświetleniu trzeba wyczyścić mapę za pomocą:

    map.clearOverlays();

  8. Podsumowanie

    W sumie zastanawiam się czemu piszę taki tutorial, ponieważ jest gotowy plugin do wordpress’a który rozwiązuje problemy z googlemaps. Konfigurowalny z wp-admin z ładnego formularza.

    Może tylko po to by nauczyć się korzystać z narzędzi, które ułatwią nam pracę i nauczą pisać dobre javascripty. Zachęcam do prób z kodowaniem map by Googlemaps. I zapewniam że GoogleMaps API nie gryzie :)

Środowisko Webdevelopera 10

Wstęp

Wygoda pracy to chyba podstawa sukcesu każdego programisty, ponieważ zapewnia nieprzerwanego skupienia. Programista skupiony nie robi głupich błędów. Nie przeczytał całego wykopu, ani joemonster’a. Jeżeli komfortowo może kodować to nic więcej do szczęścia mu nie potrzeba, no może za wyjątkiem odrobiny motywacji. Jednak nie mówię tutaj o klimatyzowanych biurach na 22 piętrze, a o oprogramowaniu.

Z góry przestrzegam, że tekst ten jest w 100% subiektywny i przedstawia tylko i wyłącznie moje zdanie. Nie zgadzasz się? To zapraszam do dyskusji w komentarzach.

Read more »

Poznań Adobe User Group Member. 0

Z dumą informuje, że zostałem członkiem grupy użytkowników adobe w Poznaniu. Najbliższe spotkanie odbędzie się 18 lipca.

Będę miał małą prezentacje dotyczącą Adobe AIR pt. “Hello Word”

Zapraszam wszystkich chętnych. Szczegółowy plan spotkania dostępny na:

augpoznan.eu

Środowisko Webdevelopera comming soon 0

Witam wszystkich czytelników. Nadchodzi wielkimi krokami dzień publikacji artykułu o środowisku webdevelopera. Tekst jest już napisany. Linki do stron z dodatkowymi zasobami już są. Teraz muszę porobić screenshoot’y, sprawdzić pisownię i można publikować.

Tymczasem w piątek mam jak narazie najważniejszy egzamin w życiu (Licencjacki), więc datę publikacji mogę przybliżyć do przyszłego weekendu.

Ponad to muszę jeszczę edytować obecny theme wordpressowy, ponieważ jest problem z kolejnymi stronami wpisu. I muszę dodać nawigację między stronami artykułu.

Mam nadzieję, że ktoś to przeczyta w całości bo jest dosyć długie :-) . Grupę docelową stanowią zarówno początkujący jak i bardziej zaawansowani  programiści aplikacji webowych (mowa przedewszystkim o php)