Paweł Rabinek blog

Archiwum kategorii 'Strony WWW'

Praca dla webmastera

Szybkie ogłoszenie. Jest praca dla webmastera. Wymagana znajomość XHTML i CSS zgodnie ze standardami, składanie szablonu z pociętego PSD. Tabelkowcom podziękujemy :) Mile widziane podstawy JavaScript i umiejtność tworzenia kodu strony z uwzględnieniem aspektów SEO. Jeśli znasz podstawy PHP to też na plus. Praca w Bydgoszczy. Czytaj dlalej »

Żegnaj AZ.pl – Witaj Site5.com

…czyli o hostingu w USA. Z początkiem maja kończy mi się okres konta hostingowego na Az.pl. Cena za przedłużenie 193.98zł brutto. Transfer miesięczny na koncie Początek to 16GB, co już mi nie wystarczało.
Czytaj dlalej »

16.04.2008 | Komentarzy: 3 »

Kategorie: Strony WWW

Opera Mini 4 beta 2

Kilka dni temu ukazała się druga beta Opery Mini 4. Zawiera kilka bardzo fajnych ulepszeń, z czego najważniejsze to:

  • tryb landscape, czyli przeglądanie stron trzymając telefon w poziomie
  • możliwość tworzenia własnych wyszukiwarek tak jak to jest w desktopowej Operze
  • wsparcie dla szyfrowanych połączeń (banki itp)
  • nowa strona startowa z multiwyszukiwarką

i kilka innych, o których możecie przeczytać w oryginalnej liście zmian.

Muszę przyznać, że tryb landscape jest super. Przy rozdzielczości 320×240 mojego telefonu, da się w miarę przyjemnie przeglądać większość stron WWW.

Wygląda to mniej więcej tak (przepraszam za fatalną jakość fotek):
Opera Mini
Przed przybliżeniem

Opera Mini zoom
Przybliżone.

I pomyśleć, że w dzień premiery nowej wersji, pisałem na blogu Jakuba, że sterowanie myszką w telefonie jest troche nieintuicyjne. Odwołuję to – można się szybko przyzwyczaić :)

O samej Operze Mini już kiedyś pisałem, wspominałem też o niedogodnościach Internetu w telefonie, ale teraz muszę przyznać, że Opera Mini 4 to spory krok do przodu. Internet na małych ekranach powoli staje się… normalny :-)

02.09.2007 | Komentarzy: 2 »

Kategorie: GSM, Programy, Strony WWW

Wirenode – strony WWW dla telefonów

Pół roku temu opisywałem system ankiet dla telefonów komórkowych Mobiode.com. Niedawno jeden z autorów projektu, Tomas Randus przedstawił mi nowy projekt: Wirenode.com.

Tworzymy strony internetowe dla telefonów GSM

Wirenode to platforma oferująca możliwość stworzenia własnej, prostej strony WWW, dostosowanej do wyświetlania na małych ekranach (telefony komórkowe, PDA itp). Oferuje całkiem sporo możliwości. Do dyspozycji mamy dosyć prosty edytor WYSIWYG, umożliwiający poza edycją tekstu, także wstawianie linków i zdjęć (które możemy wyszukać w Google Images). W łatwy sposób możemy dodawać nowe podstrony naszego mobilnego serwisu, a potem dokonywać ich edycji. Całość możemy podglądać w symulatorze telefonu komórkowego. Ważną informacją jest też fakt, że nasza mobilna strona WWW, jest przechowywana na serwerze Wirenode, więc nie musimy martwić się o hosting. Otrzymujemy własną subdomenę *.wirenode.mobi. Dodatkowo możemy skorzystać z własnej domeny internetowej (oczywiście jeśli taką posiadamy).

Wersja beta

Projekt jest w fazie rozwojowej, więc póki co musicie się zadowolić filmikiem prezentującym możliwości systemu (dostępny także w wysokiej rozdzielczości):

Dzięki uprzejmości Tomasa, otrzymałem testowy login i hasło do systemu, dzięki czemu w 5 minut stworzyłem bardzo prostą stronkę WWW dla telefonów komórkowych:

http://xradar.wirenode.mobi/

Jest ona dosyć ograniczona, ale poświęciłem na nią naprawdę tylko kilka minut :) Platforma Wirenode daje o wiele większe możliwości. Z chęcią czekam na finalną wersję projektu, o czym na pewno się dowiecie.

20.08.2007 | Komentarzy: 5 »

Kategorie: GSM, Strony WWW

IE, JavaScript i bug związany z onclick.

Pisanie aplikacji internetowych wymusza na mnie konieczność stosowania JavaScriptu. Niestety nigdy wcześniej nie korzystałem z jego dobrodziejstw i z obiektowego modelu dokumentu DOM. Ponieważ jestem samoukiem i nie bardzo mam czas na naukę z kursów, pewne proste problemy próbuję rozwiązywać sam. No i raz się naciąłem… Stracone 3 godziny przez głupi błąd w Internet Explorerze.

Miałem do zrobienia prostą rzecz: przycisk w formularzu który tworzy swoją kopię, a samego siebie deaktywuje. Była to mała część formularza w którym użytkownik miał możliwość dodawania kolejnych pól, ale tutaj nie jest to istotne.

Rozwiązałem to prostą funkcją JavaScript wykorzystującą DOM:

function addButton(counter)
{
// pobiera div id="buttons"
box = document.getElementById("buttons");

// tworzy element input wraz z atrybutami
btn = document.createElement("input");
btn.setAttribute("type", "button");
btn.setAttribute("value", (counter+1)+". Add new button");
btn.setAttribute("name", "myButton"+(counter+1));
btn.setAttribute("onclick", "addButton("+(counter+1)+"); this.disabled = true;");

// dodaje element input do div id="buttons"
box.appendChild(btn);
}

Całość w gotowym przykładzie 1.

Funkcja dodaje nowe przyciski, a ich nazwy zawierają kolejne liczby. Proste prawda? Działa poprawnie w Operze i Firefoxie. Okazało się jednak, że w IE to nie działa. Dodawany jest nowy przycisk, jednak jego metoda onclick w IE zupełnie nie działa. Dosyć to dziwne prawda? Nie znam się na JS, dopiero zaczynam w tej dziedzinie, ale powinno to działać…

Dogłębna analiza, sprawdzanie Firebugiem i nic, wszystko wydaje się być ok, ale w IE dalej nie działa.

W końcu poszukiwania w Google pomogły rozwiązać ten problem. Okazało się, że IE ignoruje metodę onclick elementów dodawanych dynamicznie

Rozwiązałem to przez własność innerHTML elementu w którym znajdują się przyciski:

function addButton(counter)
{
// pobiera div id="buttons"
box = document.getElementById("buttons");

// dodaje HTML do div id="buttons"
div = document.createElement("div");
div.innerHTML = '<input type="button" value="'+(counter+1)+'. Add new button" name="myButton'+(counter+1)+'" onclick="addButton('+(counter+1)+'); this.disabled = true;" />';

box.appendChild(div);
}

Całość w gotowym przykładzie 2.

Możliwe, że ten kod można napisać lepiej – nie jestem specem od JavaScriptu. Dodatkowo każdy przycisk musiałem utworzyć w nowym divie, aby nie kasować poprzednich. Rozwiązanie to nie jest zbyt eleganckie i ma nie wiele wspólnego z DOMem, ale działa w IE, Operze i Firefoxie, co bardzo mnie ucieszyło.

Podsumowanie

Moje początki z JavaScriptem i AJAXem są dosyć ciężkie. Na szczęście Damian Wielgosik udostępnia świetny kurs JavaScript. Ponieważ jednak nie mam zbyt wiele czasu aby wgłębiać się w JS, zastosuję w przyszłych projektach jeden z AJAXowych frameworków, na przykład mootools albo jQuery. Za jQuery przemiawiają dwa nowe kursy po polsku pisane przez Damiana Wielgosika i Piotra Petrusa.

08.08.2007 | Komentarzy: 5 »

Kategorie: Strony WWW

Dobry WYSIWYG online?

Znacie jakiś? Mam na myśli taki WYSIWYG, który można wrzucić na stronę WWW jako podmianka dla <textarea>. Pewnie zaraz posypią się mnie gromy, ze wysiwygi są złe i nie dobre. Racja, zgadzam się z tym w pełni. Generują więcej śmieci niż można to sobie wyobrazić…

Ale co powiedzieć klientowi, który chce mieć możliwość edycji treści na swojej stronie WWW? Zwykłe pole tekstowe nie wchodzi w rachubę, klient nie zna HTML i nie zamierza poznać, bo po co mu to? I tu trzeba zainstalować jakiś edytor wysiwyg. Tylko jaki?

Do tej pory stosowałem tinyMCE (tinymce.moxiecode.com). Jest darmowy, prosty w instalacji, łatwy w konfiguracji. Wygląda jak MS Word i jest dosyć intuicyjny, dlatego podoba się klientom. Problem w tym, że generuje HTMLową sieczkę! Font, fonta, fontem pogania, masakra. Już nie wspomnę o tym, że psuje to walidację. To jest pół biedy. Jeśli stronę serwuję jako application/xhtml+xml, to strona zupełnie się wykrzacza, trzeba zmienić na zwykły text/html. To dodatkowo uniemożliwia generowanie kanałów ATOM dla strony. Dodatkowo lubi się zamulić, jest tak rozbudowany, że przy implementacji w projekcie wyłączam wiele funkcji.

Czas znaleźć alternatywę…

FCK Editor (fckeditor.net), żałość – nie działa nawet pod Operą.

Jedyne dwa jakie wydają się być rozsądne, to XStandard XHTML WYSIWYG Editor (xstandard.com) i SPAW Editor (solmetra.com). Xstandard Editor jest zgodny z XHTML, jednak jego podstawową wadą jest to, że jest to plugin do przeglądarek, więc klienci musieliby go zainstalować. SPAW Editor natomiast wydaje się być świetnym rozwiązaniem. Nie jest to typowy edytor w javascript, jak tinyMCE. Jego instalacja jest trochę.. inna. Jest on darmowy do projektów niekomercyjnych, jednak licencja na jedną stronę komercyjną to już 30 Euro. W sumie cena znośna. Jeśli go przetestuję, to będzie relacja :)

A może znacie jakieś dobre edytory WYSIWYG online?

26.06.2007 | Komentarzy: 35 »

Kategorie: PHP, Strony WWW

Lista plików na serwerze i htaccess

Często zdarza się tak, że chcemy aby po podaniu linka do konkretnego katalogu na serwerze, wyświetliła się lista wszystkich plików jakie znajdują się w tym katalogu. Większość serwerów jednak nie zezwala na to (ze względów bezpieczeństwa) i wyświetla komunikat HTTP 403 Forbidden, You don’t have permission to access… (brak dostępu). Co jednak gdy chcemy umożliwić przeglądanie zawartości katalogu?

Z pomocą przychodzi sławny już plik .htaccess.

W katalogu, w którym chcemy uzyskać listę plików, umieszczamy plik .htaccess o następującej zawartości:

Options +Indexes

Od teraz działa wyświetlanie listy plików w katalogu :) Pokazuje się znane wszystkim Index of / a pod spodem lista plików. Jeśli chcemy uniemożliwić przeglądanie katalogu, w pliku .htaccess wstawiamy linijkę Options -Indexes (z minusem).

To jednak nie wszystko. Mamy dodatkowe opcje, które możemy ustawić:

IndexIgnore *.png *.avi
IndexOptions +FancyIndexing
DirectoryIndex mojplik.html

Pierwsza linijka IndexIgnore *.png *.avi sprawi, że pliki z rozszerzeniami PNG i AVI nie będą widoczne. Możemy dzięki temu ukryć część plików przed niepowołanymi osobami.

Linia IndexOptions +FancyIndexing sprawia, że lista plików zawiera ikonki i w ogóle jest ładniejsza ;) Wygląd listy można uprościć wstawiając linię IndexOptions -FancyIndexing (z minusem).

Ostatnia linijka DirectoryIndex mojplik.html pozwoli nam wyświetlić dowolny plik, zamiast listy plików w katalogu (ot taki bajer).

Mam nadzieję, że komuś się przyda :)

26.05.2007 | Komentarzy: 18 »

Kategorie: SEO, Strony WWW

MobiOde – ankiety w telefonie

Miesiąc temu skontaktował się ze mną prawdopodobnie jedyny Czech, który czyta tego bloga – Tomas Randus z firmy Wirenode. Zachęcił mnie do zapoznania z nową usługą jego firmy jaką jest MobiOde. MobiOde jest systemem ankiet i niby nie byłoby w tym nic nowego i oryginalnego, gdyby nie fakt, że ankiety wypełnia się telefonem komórkowym.

Pewnie myślicie, że znów wysyłanie SMSów i tym podobne „wyłudzacze” – nic z tych rzeczy. Całość działa przez przeglądarkę internetową w telefonie komórkowym (w zasadzie każdy telefon GSM ma taką, nawet stary już Siemens C35). Wystarczy założyć konto na stronie MobiOde i już można tworzyć nowe ankiety, całość działa podobnie jak znany w Polsce system Webankieta. Następnie otrzymujemy linka na którego możemy wchodzić przy pomocy dowolnego telefonu GMS.

Komu może przydać się MobiOde?

Na pewno może okazać się pomocne wszystkim prowadzącym portale internetowe, usługi internetowe oraz związane z telefonią komórkową. Jak wiadomo z ankiet można wyciągnąć sporo informacji o naszych klientach, więc w zasadzie zakres stosowania MobiOde jest bardzo rozległy.

Co oferuje MobiOde?

W bezpłatnym pakiecie mamy możliwość utworzenia jednej ankiety, wyniki możemy eksportować do formatu Excel. W płatnych pakietach możemy podpiąć ankietę do naszej domeny, zmienić jej wygląd oraz rozsyłać link do naszych klientów poprzez wiadomość SMS.

Jak to działa?

Zwyczajnie :) Zakładamy konto, tworzymy ankietę. Otrzymujemy link do naszej ankiety. Utworzyłem testową ankietę, którą można zobaczyć pod adresem http://ankieta-testowa.mobiode.mobi. Na moim telefonie (Sagem myx5-2 z przeglądarką Opera Mini) wygląda to tak:

Ankieta w Operze Mini

Na tym samym telefonie z przeglądarką Openwave:

Ankieta w Openwave

Na bardzo starym Siemensie C35 (przez mały rozmiar wyświetlacza, całość nie mieści się na ekranie):

Ankieta na Siemensie C35

Jak widać wystarczy bardzo stary telefon, aby wypełnić taką ankietę. Dodatkowo podczas tworzenia ankiet, mamy możliwość podglądu w emulatorze zintegrowanym z panelem MobiOde:

Emulator telefonu komórkowego MobiOde

System wymaga jednak pewnego dopracowania. Przeglądając wyniki ankiety w panelu, nie ma możliwości oglądania odpowiedzi tekstowych. Dodatkowo brakuje graficznej reprezentacji wyników (wykresy itp), choć przypuszczam, że zostanie to dodane. Strona MobiOde jest w języku angielskim, jednak ankiety można tworzyć w języku polskim, nie stanowi to żadnego problemu.

Podsumowując, MobiOde jest jedynym jaki spotkałem, systemem ankiet, które można rozpowszechniać i wypełniać za pośrednictwem telefonów komórkowych. Z pewnością jest to nowatorski pomysł, dający nowe możliwości zbierania informacji.

Powyższy artykuł nie jest reklamą, stanowi jedynie moją, niezależną opinię o usłudze MobiOde. Pozdrowienia dla Tomasa Randusa :)

29.04.2007 | Komentarzy: 9 »

Kategorie: GSM, Hardware, Strony WWW

Opera Mini zawsze pod ręką

Ostatnio śmiałem się z kolegi, który nie mógł uruchomić i poprawnie skonfigurować Opery Mini na swoim telefonie, Sony Ericsson K750. Ostatecznie udało mu się :-) Przyznam, że sam nigdy nie miałem Opery we własnej komórce, bo w sumie po co? Ale jakoś dziś mnie natchnęło żeby spróbować…

Ściągnąłem Operę w polskiej wersji językowej na mojego Sagema Myx 5-2. Zainstalowałem, wszystko poszło sprawnie.

Opera Mini + Sagem Myx 5-2

Teraz wypadałoby skonfigurować połączenie z Internetem. W opcjach telefonu miałem tylko WAP_GPRS. Na tym profilu działały MMSy i domyślna przeglądarka WAP – Openwave. Ok, ale potrzebny jest profil INTERNET_GPRS a nie WAP, więc wchodzę do zdalnej konfiguracji GPRS na stronie Simplusa. Nie ma profilu INTERNET dla mojego telefonu. Trudno, poszukałem i znalazłem, że APN to www.plusgsm.pl a IP to 212.2.96.51. Dodałem profil, włączam moją nową przeglądarkę.

Opera Mini, splash screen

Pierwsze uruchomienie, więc będzie trzeba coś poustawiać. „Dla zapewnienia bezpieczeństwa przeglądania potrzebne są losowe dane.”

Opera Mini, konfiguracja 1

Test połączenia z Internetem, wciskam OK.

Opera Mini, testowanie

Wykonuje się test, co jakiś czas pytany jestem o zgodę na połączenie z jakiś serwerem, klikam OK.

No i w końcu:

Opera Mini, failed test

Nie udało się, tylko czemu?

Zacząłem kombinować w profilach, sprawdziłem co się tylko dało, nic nie pomogło.

W końcu odkryłem, że Aplikacje/Gry mają oddzielny profil dla połączeń, który jest w Menu/Aplikacje a nie ma go w Menu/Ustawienia… Bez komentarza, szukanie tego zajęło mi godzinę. Dodałem tam taki profil jak powyżej. Uruchamiam jeszcze raz Operę, znów ten test:

Opera Mini, testing...

Udało się!

Opera Mini, connected

Klikam OK i włącza się domyślna strona w Operze Mini. Super, działa! Włącza się domyślna strona Przeglądarki Opera:

Opera Mini, home

Oczywiście jako pierwszy, wpisuję adres mojej strony:

Opera Mini + xradar.net

Nagle wyskakuje prośba o akceptacje licencji Opery… Trochę w dziwnym momencie, no ale potem już się nie pokazuje.

Opera Mini, license

A tak prezentuje się moja strona:

Opera Mini + xradar.net (2)

Wygląda w miarę przyjaźnie dla oka, w końcu sprawdzałem ją kiedyś w demie Opery Mini, o czym już pisałem w tekście Mały błąd małej Opery.

No to super, sprawdźmy jeszcze jakąś stronę. Nie wiem czemu odruchowo wpisałem wykop.pl. Wykop niestety nie jest już tak przyjemny dla oka…

Opera Mini + wykop.pl

Podsumowując, godzina stracona na konfigurację Opery wynikała raczej z ułomności telefonu, niż samej Opery. Przeglądarka śmiga aż miło. Teraz zawsze będę mógł coś sprawdzić w Internecie, bez względu na to gdzie się znajduje. Dodatkowo jeśli Twój telefon obsługuje EDGE, to realna prędkość może być rzędu 230kbps. Mój telefon niestety posiada tylko GPRS, więc dla mnie to tylko 80kbps.

Dlaczego Opera Mini jest lepsza od domyślnej przeglądarki WAP? Po pierwsze, to nie przeglądarka stron WAP, tylko normalnych stron WWW. Po drugie – cena. W Simplusie pakietowa transmisja danych przez WAP to 3zł za każde 100kB (naliczane co 10kB), a poprzez Internet GPRS to tylko 61gr (ale naliczane już co 100kB). W nowej sieci PLAY, jest 50gr za 100kB. Jak widać, WAP jest 5 razy droższy…

18.03.2007 | Komentarzy: 14 »

Kategorie: GSM, Programy, Strony WWW

Narzędzie SEO dla Opery

Dawno, dawno temu pisałem o pluginie Opera PageRank, który był bardzo prostym javascriptem wyświetlającym wskaźnik PageRank przeglądanej strony. Dziś na blogu Adama Dziury znalazłem informację o wtyczce SEObar dla Opery.

Opera SEO

Co tu wiele mówić – jest super!

Prezentuje nam:

  • PageRank,
  • ilość zaindeksowanych stron,
  • link do strony,
  • obecność w katalogach.

Dane udostępnia z serwisów Google, Yahoo!, MSN, Yandex i Rambler. Dodatkowo nasze seo-okienko posiada takie narzędzia jak:

  • podkreślanie linków nofollow, noindex i wychodzących,
  • whois,
  • link do robots.txt,
  • link do google cache,
  • ilość linków na stronie,
  • podgląd meta tagów,
  • podgląd nagłówków HTTP,

Okienko można zmniejszyć do małego kwadracika lub zupełnie zamknąć. Istnieje także możliwość dostosowania wyświetlanych informacji w zależności od naszych potrzeb oraz określenia miejsca okienka na stronie WWW.

Całość to tak zwany UserJS. Aby zainstalować SEObar w Operze, należy w menu
Narzędzia > Preferencje > Zaawansowane > Zawartość > JavaScript wybrać katalog w którym będziemy przechowywać nasze skrypty JS dla Opera, a następnie zapisać do tego katalogu plik JS pobrany ze strony SEObara. Więcej o UserJS można dowiedzieć się na stronie Opery.

Podsumowując, uważam, że jest to bardzo dobry dodatek do Opery. Warto byłoby go rozbudować o na przykład Netsprint czy Onet, no ale i tak jest dobrze.

Skrypt SEObar można pobrać ze strony Mike’a Samokhvalova. Jest tam także dokładny opis w języku angielskim. Polecam.

13.03.2007 | Komentarzy: 2 »

Kategorie: Programy, SEO, Strony WWW