Miesięczne archiwum: Lipiec 2008

Bli??ej Natury

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

  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:

    Za animacj? naszej mapy b?dzie odpowiada?:

    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

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.

Czytaj dalej

??rodowisko Webdevelopera comming soon

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)