Archive for Internet

Going social

2011-04-09 11:29

W odpowiedzi na rosnące społeczne zapotrzebowanie (ta, jasne ;]) i trudny do zignorowania potencjał tzw. social medias, poczułem się w obowiązku włączenia w ten wciąż dziwny dla mnie, ale będący niewątpliwie rzeczywistością trend. Tak więc oto postanowiłem “uspołecznić” bloga, tworząc mu stronę na Facebooku i dodając wspaniałe przyciski Like! tu i ówdzie…

Cóż, trzeba iść z duchem czasu – w końcu to już dokładnie 500 postów :-)

Tags: ,
Author: Xion, posted under Internet, Website » 8 comments

Przenośne aplikacje mobilne

2011-04-05 21:07

Odkryłem niedawno bardzo ciekawy projekt o nazwie jQuery Mobile. Jego założeniem jest uproszczenie procesu tworzenia aplikacji na różne platformy mobilne poprzez dostarczenie odpowiednio przenośnego frameworka webowego. Powstałe przy jego pomocy “aplikacje” (a tak naprawdę odpowiednio spreparowane strony) mają wyglądać i działać tak samo na większości przenośnych urządzeń takich jak smartphone‘y i tablety.

Całkiem interesujące, prawda? Jeszcze ciekawsze jest to, że mimo bycia wciąż w stadium alpha (wersję alpha 4 wydano parę dni temu) całość działa już bardzo dobrze i rzeczywiście spełnia większość swoich obietnic. Oczywiście nie każdemu może uśmiechać się “programowanie w HTML” (;D), ale tutaj jest ono dość ładnie zorganizowane w warstwę interfejsu (odpowiednio spreparowane tagi HTML) i logiki (kod JavaScript wykorzystujący jQuery). Ta pierwsza pozwala między innymi na umieszczanie kilku stron w jednym pliku i efektowne przełączanie miedzy nimi:

  1. <div data-role="page" id="menu">
  2.     <div data-role="content">
  3.         <ul data-role="listview">
  4.             <li><a href="#one">One</a></li>
  5.             <li><a href="#two">Two</a></li>
  6.         </ul>
  7.     </div>
  8. </div>
  9. <div data-role="page" id="one">
  10. ...
  11. </div>
  12. <div data-role="page" id="two">
  13. ...
  14. </div>

Przejścia pomiędzy stronami nieźle imitują natywny UI platform mobilnych, gdyż są zrealizowane przy pomocy javascriptowych animacji zaimplementowanych w jQuery. Co więcej, jak widać powyżej odnośniki mogą być zwykłymi linkami (<a>). Czego zaś nie widać to to, że przy okazji przechodzenia między stronami historia przeglądarki – a więc chociażby przyciski Wstecz i Dalej – działa zgodnie z przewidywaniami i “nie psuje” zachowania aplikacji.
Naturalnie samo przełączanie stron to nie wszystko, bo wypadałoby przecież coś na nich pokazać :) Tutaj jQuery Mobile też prezentuje się dobrze, bo niejako automagicznie dba o odpowiedni wygląd elementów aplikacji poprzez stosowanie wbudowanego zestawu “mobilnych” stylów CSS. Zmieniają one wygląd tekstu, linków oraz pól formularzy na taki, który dobrze udaje kontrolki natywnego interfejsu. No, a przynajmniej może uchodzić za takowy w przypadku urządzeń pracujących pod kontrolą iOS-a, bo właśnie do interfejsu tego systemu aplikacje jQuery Mobile są najbardziej podobne.

Niemniej także na innych platformach (chociażby Androidzie) rezultat zastosowania tego frameworka jest więcej niż zadowalający. Wydaje mi się aczkolwiek, że podobne rozwiązania chwilowo wyprzedzają jeszcze trochę swój czas. Ich podstawowym mankamentem jest brak sensownych dojść z przeglądarki internetowej do większości ciekawych podsystemów urządzeń mobilnych, takich chociażby jak kamera; póki co dostępne są chyba tylko usługi lokalizacyjne. Nie da się więc w ten sposób tworzyć skomplikowanych aplikacji, korzystających ze sprzętu czy bardziej zaawansowanych funkcjonalności systemu.
Jeśli jednak chodzi o proste rozwiązania oparte na tekście, obrazkach i formularzach – a więc jako szeroko pojęte front-endy do zdalnych repozytoriów z danymi – to jQuery Mobile może być dobrą alternatywą dla mozolnego portowania aplikacji między różnymi platformami. Podobnie zresztą rzecz ma się z mobilnymi wersjami zwykłych stron internetowych.

Tags: , , ,
Author: Xion, posted under Applications, Internet, Programming » 8 comments

To jest częściowo nietypowa notka

2011-01-04 23:55

Notka rozpoczyna się od stwierdzenia jednego lub kilku raczej oczywistych faktów, których autor w dość sztampowy sposób używa w celu rozpoczęcia tematu. Najczęściej przywołuje w tym celu swoje nieodległe w czasie doświadczenia związane z tymże tematem, które czasami prowadzą do mniejszej lub większej (częściej mniejszej) zmiany przekonań. Reszta pierwszego paragrafu zazwyczaj podporządkowana jest dobrnięciu do jego końca w sposób, który sprawi wrażenie spójnego wywodu. Jednocześnie jednak sam koniec jest celowo trochę kontrastowy, co ma na celu lekkie zaskoczenie czytelnika i przekonanie jego podświadomości, że lektura reszty może nie być wcale taką stratą czasu na jaką wygląda.


Gdyby był związany bardziej,
miałby bardziej odpowiedni podpis.

Środkowa część służy zrazu dalszemu rozwinięciu opisu zjawiska, którym to w tym przykładzie jest pewien specyficzny rodzaj humoru. Często jest to wspomagane odpowiednim formatowaniem tekstu, aplikowanym zazwyczaj do pojedynczych słów, które autor z jakiegoś dziwnego powodu uważa za ważne, zwykle zresztą błędnie. Nierzadko są to jego własne wymysły terminologiczne (jak choćby określenie wspomnianego rodzaju humoru jako metasatyry), wyróżnione formatowaniem tylko dlatego, iż bez niego nikt nie zwróciłby na nie najmniejszej uwagi. Byłoby to zresztą niezwykle pożyteczne, jako że ich adekwatność pozostawia zwykle wiele do życzenia.
Następnie przytaczane są różne argumenty lub przykłady tudzież elementy opisywanego zjawiska, wybrane zazwyczaj spośród tych, do których prowadzą linki z trzeciej strony wyników wyszukiwania w Google (albowiem powszechnie wiadomo, że wszyscy zatrzymują się na pierwszej, więc w ten sposób uzyskuje się gwarancję oryginalności źródeł). Pozycje te bardzo często uformowane są w postać listy wypunktowanej, ponieważ nadaje im ona pozory dobrze zorganizowanej struktury (co natychmiast podnosi wiarygodność) przy jednoczesnym unikaniu zbytniego formalizmu, nieodłącznej cechy listy numerowanej.

  • Pierwszy element jest niemal na pewno w jakiś sposób domyślny, oczywisty, sztampowy lub nawet nieco nudny. Dzięki temu czytelnik może łatwo odnieść go do swoich własnych doświadczeń, bo na pewno się z nim zetknął, jeśli tylko ma cokolwiek wspólnego z opisywanym zagadnieniem. Kiedy chodzi o ów specyficzny i interesujący rodzaju humoru ochrzczony mianem metasatyry, za pierwszy przykład posłuży artykuł na stronie internetowej – głównie dlatego, że tekst może być uznany za względnie nudny, kiedy porównamy go do występujących dalej obrazków i filmów.
  • Pozycje środkowe są celowo najciekawsze, najprzydatniejsze i najbardziej interesujące. W ten sposób autor chce nagrodzić tych zdesperowanych wytrwałych czytelników, którzy z jakiejś niepojętej przyczyny czytają notkę w całości zamiast zachować się bardziej racjonalnie, tj. rzucić okiem na wstęp i zobaczyć, czy zakończenie było trafne. Dla nich przewidziane są najlepsze przykłady ilustrujące zjawisko, czyli generyczny reportaż programu informacyjnego oraz trailer dowolnego oscarowego filmu ostatnich lat.
  • Końcowe przykłady bywają doprawione szczyptą humoru, który okazjonalnie nawet wydaje się w pewien sposób zabawny. O wiele częściej jednak taki nie jest i dlatego czytelnik z ulgą znajduje te przypadki, w których autor całkowicie z niego zrezygnował i zamiast tego posłużył się odpowiednio relewantnym obrazkiem z xkcd. (Jako iż powszechnie wiadomo, że xkcd ma pasujący obrazek do dokładnie wszystkiego).

Ostatni paragraf lub dwa są aż do bólu przewidywalne, gdyż trudno spodziewać się tu czego innego niż podsumowania. Wskazuje ono na główną linię rozumowania z części środkowej lub też zbiera wspólne cechy podanych przykładów, takie jak punktowanie powtarzalnych, szablonowych form imitowanych przez metasatyrę przy jednoczesnym dokładnym trzymaniu się tychże form. Jeśli autor ma akurat dobry dzień, uda mu się celnym zdaniem wskazać sedno zagadnienia (a więc efekt komiczny spowodowany paradoksalnością wspomnianych cech tego humoru), jednakże zawsze będzie to inne zdanie niż to, które w jego zamyśle miało takim być. Definitywne zakończenie czytelnik przyjmuje z westchnieniem ulgi, aczkolwiek zupełnie bez zaskoczenia, bowiem było ono dla niego od początku całkiem oczywiste.

Niekiedy notka uzupełniona jest o komentarz małym drukiem, o treści która w jakiś pokrętny sposób odnosi się do całości notki. Na pewno aczkolwiek nie wspomina ona o nadużywaniu odrobinę zbyt wysublimowanego języka oraz występujących gromadnie, w gruncie rzeczy niepotrzebnych linkach do Wikipedii.

Tags: ,
Author: Xion, posted under Culture, Internet, Website » 15 comments

Odchudzanie lisa

2010-10-29 20:04

Jak można przeczytać tu i ówdzie (a potem sprawdzić u źródła), premiera czwartej wersji przeglądarki Firefox przesunie się z końca tego roku na początek przyszłego. Zwolennicy tzw. bardziej nowoczesnych przeglądarek zapewne skorzystają z okazji, by używać tego faktu jako argumentu na rzecz tezy, że Ognisty Lis pozostaje w tyle pod względem szybkości, zgodności z sieciowymi standardami oraz estetyki i komfortu interfejsu.
Nawet jako jego użytkownik muszę przyznać, że przynajmniej ostatni z tych zarzutów faktycznie może być zasadny – ale tylko pod jednym zastrzeżeniem, które w przypadku Firefoksa jest po prostu nie fair. O ile bowiem FF3.6 out-of-the-box jest faktycznie dość siermiężny, o tyle nadrabia to z nawiązką możliwościami konfiguracji, których nie można w uczciwym zestawieniu pominąć.


Standardowy interfejs Firefoksa

Żeby jednak nie być gołosłownym pozwolę sobie pokazać, jak w kilku krokach możemy ów niezbyt imponujący, standardowy interfejs przekształcić w coś bardziej ‘nowoczesnego’. Mój opis można będzie potem potraktować jako swego rodzaju konstruktywną ripostę w świętych wojnach przeglądarkowych :)

Tags: , ,
Author: Xion, posted under Applications, Internet » 20 comments

Sztuczki z adresem e-mail

2010-10-14 10:04

Chcę dzisiaj wspomnieć o kilku ciekawostkach dotyczących tego, co każdy posiada – czyli adresu e-mail. Wydawałoby się, że nie ma tutaj niczego do odkrycia, jako że wszyscy już dawno zdążyliśmy się już przyzwyczaić do poczty elektronicznej i formatu adresów, które ona używa. Jak to jednak okazuje się zwykle w takich sytuacjach, w rzeczywistości przynajmniej kilka trików nie musi być wcale powszechnie znanych :)

I tak pierwszym z nich jest fakt, że część adresu specyficzna dla użytkownika (ta przed znakiem @) może być łańcuchem znaków zawartych w cudzysłowach. Między nimi ulegają wtedy pewnemu poluzowaniu reguł odnośnie dopuszczalnych znaków i dozwolone stają się chociażby spacje. Reasumując, zupełnie poprawny jest adres w rodzaju:

  1. "Jan Kowalski"@somewhere.com

Jest tu jednak pewien haczyk. Otóż serwery pocztowe niekoniecznie muszą takie adresy akceptować. Samo RFC (nr 5321) przestrzega przed potencjalnymi problemami, zalecając nieużywanie cudzysłowów, jeśli… chcemy otrzymywać jakąś pocztę :)
Do czego więc mogą się one przydać? Chociażby do adresów, które wykorzystuje się wyłącznie jako nadawcze, wysyłając np. zautomatyzowane wiadomości do użytkowników jakiejś sieciowej usługi, na które ci nie powinni odpowiadać.

Drugą rzeczą wartą odnotowania jest to, że część adresu następująca po znaku @ niekoniecznie musi być nazwą domeny. Dopuszczalne są mianowicie adresy IP w zwyczajowej postaci kropkowej. Aby je odróżnić przyjęto konwencję, że powinny być zawarte w nawiasach kwadratowych:

  1. test@[192.168.0.1]

Pozwala to chociażby – jak sugeruje powyższy przykład – na testowanie serwerów pocztowych bez konieczności posiadania domeny.

Wreszcie, trzeci trik różni się od dwóch pozostałych tym, że może być rzeczywiście przydatny w prawdziwym świecie ;D Chodzi mianowicie o to, że część adresu przed znakiem @ (specyficzna dla użytkownika) może być interpretowana przez jego serwer pocztowy w dowolny sposób. To sprawia, że ów serwer może udostępniać dodatkowe feature‘y z nią związane.
Typowym i częstym przykładem jest możliwość tworzenia tagów adresowych, wspomagających sortowanie wiadomości. Zwykle dzieje się to za pomocą plusa (+) lub myślnika (-), co w sumie skutkuje adresem w rodzaju:

  1. user+stuff@server.com

Jeśli server.com obsługuje tagi w takim właśnie formacie, to wiadomości trafiające na powyższy adres zostaną umieszczone w skrzynce użytkownika user, ale pod etykietą stuff. Co to dokładnie znaczy, zależy od serwera; najpewniej będzie to przydzielenie wiadomości do osobnego folderu lub dodatkowe kryterium pomocne przy wyszukiwaniu.
Z popularnych serwisów hostujących pocztę tagi oferuje Google Mail, właśnie w powyższym formacie z plusem.

Tags:
Author: Xion, posted under Internet » 6 comments

Przekierowania do innych URL-i

2010-10-09 18:18

Potrzeba automatycznego przekierowania strony WWW do innego adresu URL pojawia się całkiem często. Dość typowe są na przykład serwisy typu download, gdzie faktyczne ściągnięcie pliku poprzedzone jest krótkim oczekiwaniem i odpowiednim komunikatem. Służy to głównie temu, by użytkownik omyłkowo nie rozpoczął procesu ściągania więcej niż raz.

Przyjrzyjmy się dzisiaj sposobom na dokonywanie takich przekierowań. Jeśli bowiem chwilę się nad tym zastanowić, to okazuje się, że można je przeprowadzać na różnych poziomach protokołów HTTP i nie tylko. Wśród możliwych metod można wyróżnić choćby takie:

  • Javascript i window.location. Ustawienie tej właściwości na adres URL powoduje automatyczne wykonanie przekierowania. Do działania wymaga to naturalnie obsługi Javascriptu po stronie klienta, więc może służyć do odfiltrowania tych klientów, którzy nie spełniają tego warunku. Dotyczy to na przykład przeglądarek tekstowych, takich jak Lynx.
  • Znacznik <meta>. HTML przewiduje możliwość odświeżenia strony po określonym czasie, z opcjonalnym przekierowaniem do innego URL-a. Korzysta się w tym celu ze znacznika &lt;meta>:
    1. <meta http-equiv="Refresh" content="10; http://other.url.com">

    Właśnie ta metoda jest zwykle wykorzystywana do implementacji wspomnianego na początku opóźnionego ściągania plików.

  • Kody 3xx odpowiedzi HTTP. Protokół HTTP przewiduje możliwość zwrócenia przez serwer kodu odpowiedzi, powodującego (przynajmniej w założeniu) przekierowanie do innego adresu (przekazanego w nagłówku Location). Istnieje cała grupa takich kodów o numerach zaczynających się od 300, jak na przykład 301 (Moved Permanently), będący trwałym przekierowaniem, czy 302/307 (Found/Temporary Redirect), wskazujące na mniej lub bardziej tymczasowe odesłanie do innego adresu.
  • Rekordy CNAME w DNS. Jeszcze niżej w warstwie sieciowej położone są “przekierowania” z użyciem systemu DNS (Domain Name System) i rekordów CNAME (lub DNAME), które to można ustawiać dla swoich domen. Gdy są obecne i wykorzystywane przez serwer DNS, wówczas klient pytający o adres IP związany z domeną (np. www.a.com) będzie poinstruowany, by użył innej nazwy (np. foo.b.net) i ponowił zapytanie. Takie “przekierowanie” nie będzie raczej widoczne dla użytkownika w wysokopoziomowych programach takich jak przeglądarki WWW, a co najwyżej w narzędziach sieciowych typu ping.

Jeśli przypadkiem zastanawiamy się, który rodzaj przekierowania powinniśmy zastosować, to spieszę z odpowiedzią, że prawie na pewno dobrym wyborem będzie któryś z dwóch środkowych elementów listy. Uzasadnieniem jest tu głównie chęć współpracy z robotami wyszukiwarek internetowych. Nie powinniśmy mianowicie spodziewać się, by uruchamiały one kod Javascript na przeglądanych przez siebie stronach, bo kosztowałoby to je zbyt dużo zasobów. Z drugiej strony istnieje też duża szansa, że nie będą one “świadome” “przekierowań” dokonywanych na poziomie systemu DNS, przez co mogą one potraktować dostępność tych samych treści z dwóch różnych adresów jako świadome duplikowanie contentu i próbę ich oszukania.

W grę wchodzą naturalnie jeszcze kwestie praktyczne. Nie każdy dysponuje własną domeną lub możliwością zmiany jej rekordów DNS. Nie każdy może też zmieniać ustawienia serwera HTTP, na którym funkcjonuje jego serwis. Wtedy przydatne są przekierowania dokonywane po stronie klienta np. za pomocą tagów HTML.

Tags: , , ,
Author: Xion, posted under Internet » 2 comments

position w CSS

2010-09-27 15:52

Niniejsza notka ma specyficzne przeznaczenie. Chociaż nie zdziwiłbym się, gdyby dla wielu osób okazała się interesująca i przydatna, to jej głównym celem jest przechowanie dla mnie pewnej wiedzy, której ogarnięcie zajęło mi całkiem sporo czasu. Tak, chodzi właśnie o tytułowy atrybut position z CSS i jego działanie.

A zatem… Jak nazwa jednoznacznie sugeruje, atrybut ten ma dużo wspólnego z określaniem umiejscowienia elementu wyświetlanego dokumentu. Nie zawiera on jednak pozycji jako takiej, lecz sposób jej wyznaczania. Jest to więc atrybut wyliczeniowy, którego możliwe wartości są następujące:

  • static – domyślny sposób pozycjonowania. Element zostanie umieszczony i będzie wyświetlany w miejscu, które wynika z położenia jego znacznika w źródle dokumentu, czyli w ciągu otaczającego go tekstu. (Jeśli oczywiście sam ten tekst nie został jakoś fikuśnie wypozycjonowany). Atrybuty określające współrzędne (left, top, itd.) są ignorowane.
  • relative – bardzo podobne do powyższego. Różnica polega na tym, że tutaj wspomniane atrybuty są wykorzystywane i mają wpływ na to, gdzie element jest wyświetlany. Ich punktem odniesienia jest “normalna” pozycja elementu w ciągu tekstu. Znanym przykładem są “wciskane” linki, polegające na przesunięciu łącza odrobinę w prawo i w dół, by dać wrażenie jego wciśnięcia:
    1. a:active {
    2.     position: relative;
    3.     left: 2px;
    4.     top: 2px;
    5. }

    To, czego position:relative nie robi, to rzeczywista zmiana położenia elementu. Nawet jeśli jest on wyświetlany gdzie indziej, tekst będzie nadal łamany według jego normalnego położenia – tak samo jak przy position:static.

  • absolute – tzw. pozycjonowanie absolutne, które w rzeczywistości jest… względne. (Ah, ta logika webdesignu ;>). Przy tym ustawieniu element jest mianowicie wyjęty z normalnego ciągu tekstu, co czasem określa się jako stworzenie nowej warstwy (layer). Jego pozycja jest wówczas określana (atrybutami left itd.) względem elementu go zawierającego, którym to jest najbliższy element nadrzędny o pozycjonowaniu innym niż static… Proste i nieskomplikowane, prawda? ;-)
  • fixed – stała pozycja. Stałość polega na tym, że element nie zmienia swojego położenia podczas przewijania strony, bo punktem odniesienia jest dla niego okno przeglądarki. Tak jak w przypadku absolute, tutaj również tworzy on warstwę wyjęta z normalnego ciągu tekstu.

Tyle teoria. W praktyce mamy kilka typowych przypadków użycia. Prawdopodobnie najbardziej skomplikowanym z nich jest zastosowanie position:absolute ze względu na jego dziwne wymaganie odnośnie elementu zawierającego. Jeśli go nie uszanujemy, wówczas nasz ‘absolutnie’ wypozycjonowany element jako punkt odniesienia przyjmie cały obszar dokumentu, czyli element <body>. Aby temu zapobiec, należy otaczającemu go pojemnikowi ustawić position na relative:

  1. <div id="container" style="position: relative">
  2.     <div id="layer" style="position: absolute; top: 10px; left: 5px;">...</div>
  3. </div>

Wizualnie nic on się wtedy nie zmieni (jeśli sam nie zawiera atrybutów w stylu left, itp.), natomiast będzie on mógł być kontenerem dla elementów z position:absolute.

Tags: ,
Author: Xion, posted under Internet » 1 comment
 


© 2017 Karol Kuczmarski "Xion". Layout by Urszulka. Powered by WordPress with QuickLaTeX.com.