blog.mmx3.pl na flakerze

Archive for the 'Webdevelopment' Category


Zmiany, plany, status 1

Przepraszam za taką przerwę w postach drodzy czytelnicy. Dużo się działo, wiele się zmieniło w moim życiu.

Pierwszą rzeczą jest to, że w końcu odnalazłem szczęście u boku wspaniałej kobiety, która jak to mówił Ten Typ Mes:

“…dodaje pierwiastek kobiecości do rozmów, nie tylko do ciastek…”

Budzenie się rano z myślą o kimś, który potrafi tak naładować mnie pozytywną energią sprawia, że staje się lepszym człowiekiem.

Kolejną zmianą w moim życiu jest zakończenie etapu freelancera. W poniedziałek rozpoczynam pracę, na etacie. Niestety nie mogę zdradzić gdzie, ponieważ obowiązuje mnie klauzula poufności. Teraz kończę wszystkie projkety, których się podjąłem w ostatnim miesiącu, bo obowiązuje mnie klauzula o zakazie konkurencji.

Przejdźmy zatem do planów. Długie lata temat pracy magisterskiej wydawał mi się sprawą tak abstrakcyjną, że nigdy nie brałem tego pod uwagę. Staneliśmy przed problemem wyboru tematu (Ja i Maciek, z którym to będziemy pisali pracę). Po burzy mózgów doszliśmy do następujących wniosków:

Technologie:

  • PHP – phpAMF  remoting funkcji z php
  • FlashVideo – odtwarzanie vido
  • FLEX – Podstawa aplikacji GUI + Upload Plików
  • MySQL – przechowywanie testów jak i ich wyników

Opis aplikacji:

  1. Tworzenie Testu
    1. Upload pliku z wykładem (vido)
    2. Konwersja server-side avi, mpg, wmv do flv
    3. Ustawianie czasu wyzwalaczy, które będą uruchamiały pytania podczas oglądania materiału
    4. Dodawanie pytań, ustawianie poprawnych odpowiedzi (test jednokrotnego/wielokrotnego wyboru)
    5. Testowy Test, zapisanie drzewa XML do bazy danych
  2. Przeprowadzanie Testu
    1. Materiał Video jest odtwarzany
    2. Odtwarzacz dochodzi do wyzwalacza gdzie znajduje się pytanie
      1. Kontrolki Playera są blokowane
      2. Można jedynie odpowiedzieć na pytanie
      3. Odpowiedź na pytanie jest zapisywane do bazy danych
      4. Odblokowanie kontrolek playera i wznowienie playbacku
    3. Po zakończeniu odtwarzania filmu wyświetla się podsumowanie z wynikiem testu, oraz propozycjami fragmentów, które wypadało by powtórzyć
  3. Statystyki grupy studentów
    1. Informacje dla wykładowcy o najsłabiej opanowanym materiale przez grupę itp.

Po dalszych ustaleniach z promotorem, rozszerzyliśmy zakres funkcjonalności o plugin do systemu e-learningowego OpenSurce o nazwie OLAT, który jest rozwijany na uniwersytecie w Zurychu.

Co do statusu, to co rano budzę się z kacem od YouTube Data API, oraz os-commerce bo muszę freelance skończyć, nim podpiszę umowę.

Pozdrawiam,

mGz

After the session 0

Wszystko zadne, nawet największy kozak w pierwszym terminie. W międzyczasie poszukuje pracy o dziwo nawet czynnie, bo już mój fejm na goldenline się chyba wyczerpał.

W między czasie by mój talent programistyczny nie zardzewiał do reszty zająłem się ambitnym przedsięwzięciem, polegającym na stworzeniu Thema do wordpressa dla mojego znajomego co zajmuje się renowacją starych motorów. O dziwo stworzyłem również własnoręcznie na tablecie Wacom Bamboo wyczesany layout i właśnie jestem w trakcie jego cięcia. Ja rozumiem, że pojęcie wyczesany jest mocno przegięte. Również typografia pozostawia wiele do życzenia, ale to już są pierdoły, którymi można zająć się podczas pisania CSS’ów.

Layout Classic Motor

Layout Classic Motor

Jak to zwykle bywa po dobrze wykonanym obowiązku czas odpocząć więc dnia 7.03 uderzam tutaj:

Wyświetl większą mapę

Tymczasem zostawiam wam coś do przemyśleń, a’propos waszych wymówek w pracy.

Będzie mnie jeszcze można zobaczyć na najbliższym Barcampie oraz marcowym spotkaniu Poznań Adobe User Group

Pozdrawiam wszystkich Allegrowiczów,

mGz

Spotkanie AUG i nadchodzący barcamp 0

Po Wtorkowym spotkaniu Adobe User Group Poznań, na którym mogłem popisać się projektem jaki teraz robię razem z Robertem więcej na ten temat można poczytać na stronie grupy w poście zawierającym debriefing ze spotkania.
13.12.2008 o 13:00 GMT +1 Odbędzie się trzynasty z cyklu Barcamp odbędzie się on w Starym Browarze(Słodownia). Będę na pewno. Amatorom konferencji przy piwie i pizzy gorąco polecam(tylko pizza za friko). Dla osób zainteresowanych dalszymi informacjami zapraszam na Stronę barcamp’u

Walka z wiatrakami 4

Czy zdarzyła się tobie w życiu zawodowym sytuacja kiedy przy ogromnym wysiłku i dziesiątkach godzin przygotowań spotyka cię FAIL!? Read more »

Pro-moted 1

Jak tytuł mówi. Zostałem project managerem. Dodatkowe obowiązki. Kilka projektów w trakcie. Generalnie ciężka jest praca w sektorze IT.

Poza narzekaniem na pracę programuje we Flexie na dużą skalę. Otrzymałem Licencje edukacyjną na Flex Buildera. Dostępne jest to dla wszystkich studentów i uczniów. Wystarczy zarejestrować się na:

http://www.flexregistration.com/

A następnie poczekać z 3 dni aż zweryfikują twoje dane oraz skan legitymacji studenckiej.

Jestem pod dużym wrażeniem developmentu aplikacji we flexie, ponieważ 120 linii kodu to już prawie kompletne GUI plus kolejne 50 linii i już mamy GUI z obsługą eventów. A jak już jesteśmy na tym etapie to wystarczy dopisać logikę i skończyć projekt :)

Już niedługo podeślę link do pierwszego projektu. Planuję wziąść udział w Flex Challenge pomysł na aplikacjię już powstał. Nawet udało się sprecyzować kwazi specyfikację :) Ale to muszę być bardziej Pro niż teraz z Flexem.

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)

Firefox 3 Download day! 2

To już dziś! Ściągnij Firefox 3.0 Rewolucja nadchodzi :-)

Ściągnij FF3!

Następna strona »