Powszechnie znanym rozwiązaniem tego problemu jest zmniejszenie rozmiaru zdjęć i poddanie ich kompresji, czy to korzystając z programów komercyjnych (np. Adobe Photoshop), czy też darmowych (np. IrfanView). Jendakże w takich sytuacjach należy pójść na kompromis – albo zmniejszamy rozmiar zdjęcia (rezygnując z pokazania istotnych szczegółów), albo poddajemy go większej kompresji (tracąc na jakości zdjęcia). Pozostaje więc pytanie, czy istnieje jakaś metoda (poza metodą prób i błędów), która pozwalałaby zachować istotne szczegóły i rozmiar zdjęcia, a jednocześnie jakość zdjęcia przy małym rozmiarze pliku JPEG? Okazuje się, że tak.

Serwis internetowy JPEGmini http://www.jpegmini.com pozwala nam na zmniejszenie rozmiarów plików jpeg bez widocznej przez przeciętnego użytkownika internetu utraty jakości zdjęcia. Według autorów tego narzędzia, opiera się on na „analizie zdjęcia przy użyciu detektora jakości imitującego sposób postrzegania obrazów przez człowieka i dodatkowo autorskiego systemu kompresji”.

Jak widzimy na poniższym obrazku zdjęcie oryginalne o rozmiarach 2928 x 1952 pikseli o rozmiarze pliku 4006 KB zostało poddane algorytmowi kompresji oferowanemu przez serwis JPEGmini. Po kompresji rozmiar zdjęcia pozostał taki sam tj. 2928 x 1952 pikseli, natomiast rozmiar pliku został znacząco, bo aż sześciokrotnie pomniejszony do 662 KB.

Taki sposób obróbki wielu zdjęć może znacząco wpłynąć na odwiedzalność serwisu przez użytkowników końcowych, zapewniając komfort przeglądania zdjęć wstawionych w pola tekstowe CMS NetPanel.

Zapewne kiedyś, w jakimś serwisie użyłeś lightboxa, chciałeś obejrzeć galerię a tu… “Usterka!”. Najpierw zdziwienie,  potem zażenowanie, złość, aż w końcu wściekłość, arghhhh. “Będę musiał robić teraz css’y nie tylko dla IE6, IE7, IE8 ale też dla IE9?” Galeria, która działała bez problemu na wszystkich przeglądarkach, nawet w telefonach i była jedną z najpopularniejszych używanych w serwisach nagle w Twojej nowej IE 9 nie działa.

Po kliknięciu w dowolne miejsce serwisu ekran wyszarza się, a zdjęcia otwierają się po prostu w nowym oknie.

Nie panikuj i weź się w garść!
Ściągnij nową bibliotekę prototype w wersji 1.7 – http://www.prototypejs.org/ albo po prostu nową wersję Lightbox v2.05 ze strony http://www.lokeshdhakar.com/projects/lightbox2/

Nie, nie mam zamiaru obrażać wszystkich użytkowników internetu, chciałbym tylko zwrócić uwagę osób decydujących o wyglądzie i zawartości stron internetowych, na ten fakt. Słowo „leniwy” ma prawdopodobnie wyłącznie pejoratywne znaczenie, ja nie mam takiego zamiaru, ale celowo go użyłem, aby podkreślić istotę naszego funkcjonowania w sieci. Jak najłatwiej, jak najszybciej… jak najtaniej.

Projektując stronę internetową, czy zarządzając zawartością już działającej strony, trzeba mieć to na uwadze i najistotniejsze elementy podać odwiedzającemu witrynę „na tacy”. Bardzo często właściciel lub administrator strony uważa, że skoro wystarczy kliknąć tu i tam, żeby dotrzeć do tej informacji, to wszystko jest w porządku. Odwiedzający tego raczej nie zrobi (przez odwiedzający mam na myśli „przeciętnego Kowalskiego”, można więc w pewnym sensie powiedzieć, że większość).

Musimy selekcjonować i hierarchizować informacje, aby w pierwszej kolejności przedstawić te najważniejsze. Ewentualnie odpowiednio je pogrupować i wyróżnić na tle pozostałych elementów serwisu. Z pewnością zetkniemy się z problemem, że wszystko jest istotne, ale niestety musimy wybierać. Niemożliwe, żeby wszystko było równie ważne, cytując klasyka:

„Nobody likes two different kinds of eggs equally. You like one more than the other and I wanna know which.” *

Parafrazując:  zawsze coś lubimy bardziej, coś jest ważniejsze. Nawet jeżeli nie jest to stan permanentny, to w danej chwili coś wybieramy, np. informacja o szczegółach oferty pracy powinna być łatwo dostępna w czasie prowadzenia rekrutacji na ważne stanowisko, w innym momencie, przegra w konkurencji z inną istotną wiadomością. Jeszcze inaczej to ujmując (znów cytując klasyka):

„Gonią Cię Niemcy! Musisz wybrać…” **

wyrzucasz swojego iPhone’a, czy iPad’a?! ;)

Zastanawiałem się jaki przytoczyć przykład, dwóch zdecydowanie różnych stron, ale o bardzo zbliżonej specyfice działalności. Proponuję operatorów telefonii komórkowej. Można z dużym prawdopodobieństwem założyć, że odwiedzający tego rodzaju serwis mają bardzo podobne cele, np. zapoznać się z ofertą, znaleźć numer kontaktowy do biura obsługi, poznać aktualne promocje, itp. Poniżej prezentuję dwa przykłady stron, które moim zdaniem zasadniczo różnią się pod tym względem. Proszę zwrócić uwagę, że na stronie Ery nawet bez powiększania obrazka można zorientować się, że jest to strona dotycząca telefonii komórkowej i gdzie „skierować pierwsze kroki” aby zapoznać się z ofertą. Ze strony Orange możemy się za to dowiedzieć, jak radzi sobie polska reprezentacja w piłce nożnej. Wyobraźmy sobie, że są to strony dwóch zupełnie nowych firm na rynku. Pomińmy przywiązanie do marki, wpływ reklam i inne tego rodzaju czynniki… Na której stronie pozostanie użytkownik szukający “nowego telefonu”?

Chciałbym równocześnie zaznaczyć, że nie przeprowadzam tutaj żadnego testu porównawczego stron. Oczywiście mogą być różne strategie i filozofie prowadzenia firmowego serwisu internetowego. Jest to jedynie przykład na selekcję i hierarchizowanie informacji.

Serwis era.pl z dnia 22-go marca 2011

Serwis orange.pl z dnia 22-go marca 2011

Różnica dotyczy wyłącznie jej formy. Obecnie telefon służy do prowadzenia rozmów wideo, korzystania z komunikatorów internetowych, obsługi poczty elektronicznej, serfowania po internecie i wielu innych czynności… Ponieważ telefony wyposażone są we własne systemy operacyjne, możliwe jest instalowanie kolejnych aplikacji rozszerzających ich funkcjonalności. W dużej mierze dzięki temu mogą funkcjonować dwie technologie dedykowane urządzeniom mobilnym: fotokody i rozszerzona rzeczywistość (augmented reality). Obie jeszcze sporadycznie wykorzystywane w Polsce, ale z ogromnymi perspektywami. Dynamiczny rozwój rynku smartphone’ów, w połączeniu z szerokimi możliwościami zastosowań marketingowych obu technologii, z pewnością prędzej czy później zostanie zauważony przez marketerów. W 2010 roku po raz pierwszy zostało sprzedane więcej smartphone’ów niż komputerów, a szacuje się, że w 2011 roku zostanie sprzedanych kolejne 400 milionów tych urządzeń.

Paradoksalnie rozszerzona rzeczywistość może być bardziej znanym pojęciem, ponieważ coraz częściej stosowana jest w różnego rodzaju akcjach promocyjnych, z wykorzystaniem komputerów osobistych. W tym zakresie istnieje również wiele możliwości ciekawych rozwiązań i interakcji z użytkownikami, co pozwala tworzyć interesujące kampanie reklamowe. Natomiast wykorzystanie mało znanej technologii wciąż przyciąga uwagę odbiorców i stanowi wartość dodaną kampanii. Prawdziwe możliwości tej technologii drzemią jednak w zastosowaniach mobilnych, jeżeli tylko w świadomości użytkowników, telefon komórkowy przestanie być urządzeniem służącym do komunikacji głosowej na odległość. W tej chwili z pewnością łatwiej przekonać potencjalnego odbiorcę reklamy do instalacji oprogramowania na jego komputerze niż w telefonie (choć często to właśnie w smartphone’ie odbywa się to zdecydowanie szybciej i bez większych komplikacji).  Bardzo dynamiczny rozwój rynku mobilnego powoduje, że dzień kiedy Klienci odkryją możliwości swoich “telefonów” jest bardzo bliski, a wtedy z pewnością powstanie wiele apliakcji usprawniających nasze codzienne życie, np. zwiedzanie miasta, czy udział w imprezach masowych, jak na przykładzie poniżej.

Augmented Reality daje bez wątpienia większe możliwości, jest po prostu bardziej zaawansowana technologicznie niż wspomniane fotokody. Nie jest więc niczym dziwnym, że jej masowe użycie wiąże się z koniecznością przełamania pewnych barier wśród potencjalnych użytkowników. Dlaczego jednak stosunkowo łatwe w obsłudze i użyteczne narzędzie jak fotokody nie jest jeszcze w powszechnym użyciu? Mały czarno-biały kwadracik wydrukowany na plakacie, ulotce, wizytówce, czy wyświetlony na ekranie monitora może zaoszczędzić każdemu z nas odrobinę czasu. Przechodząc obok plakatu informującego o ciekawym koncercie, możecie wyjąć swój telefon i kierując aparat fotograficzny na odpowiednie miejsce tego ogłoszenia, zostać automatycznie przeniesionym do miejsca w internecie, w którym sprzedawane są bilety. Nie trzeba nic wpisywać, nic zapamiętywać, nic wyszukiwać po powrocie do domu. Wystarczy telefon z odpowiednią aplikacją i połączeniem z siecią (o aparacie nie wspominam, bo trudno już znaleźć “słuchawkę” bez niego).  W fotokodzie może być zaszyta dowolna informacja, może to być po prostu notatka tekstowa (zawsze to szybciej niż ją wstukiwać, nawet jeżeli mamy model z pełną klawiaturą qwerty), może być wpis w kalendarzu, czy wizytówka z danymi kontaktowymi.  Technologia wydaje się taka prosta i ułatwiająca zwykłe, codzienne czynności… Dlaczego więc tak rzadko u nas spotykana?

Kluczem wydaje się być tutaj przełamanie stereotypu, że telefon służy do “dzwonienia”. To co nazywamy telefonem, w rzeczywistości jest najbardziej osobistym komputerem, który zawsze mamy przy sobie i który możemy wykorzystać na wiele sposobów. Jeżeli chcecie zacząć korzystać z fotokodów, oprogramowanie możecie pobrać np. z takiej strony, a przetestować je na naszej wizytówce poniżej. Po zainstalowaniu programu, będziecie mogli odszyfrować informacje “ukryte” w biało-czarnych kwadratach, które spotkacie na swojej drodze. Naturalnie nie wszystkich… ale z pewnością rozpoznanie, co jest fotokodem, a co po prostu czarnym kwadratem… ;)

Fakty na temat serwisu Facebook.com*:

600 milionów użytkowników serwisu na świecie
5,5 miliona użytkowników w Polsce
50% aktywnych użytkowników loguje się do serwisu codziennie
45 minut średnio dziennie użytkownik spędza w serwisie
130 znajomych ma przeciętny użytkownik serwisu
20 milionów użytkowników klika Lubię to! każdego dnia
1,5 miliona lokalnych firm posiada aktywne strony w serwisie
3 miliony aktywnych stron w serwisie

Przykład przywitania użytkownika

Powyżej przedstawiony opis i dane to fakty. Coś obiektywnego, z czym nie można się nie zgodzić. Można natomiast różnie je interpretować. Większość menadżerów marek i właścicieli firm, prędzej czy później dostrzego jednak szansę i nowe możliwości jakie dają media społecznościowe. Niemal równocześnie z tą myślą często pojawia się jednak świadomość przeszkód i problemów, główną z nich można byłoby sformułować mniej więcej tak:
“Kolejny kanał komunikacji, to kolejne działania, które wymagają nakładów, głównie w postaci poświęconego czasu (własnego lub pracowników).”

Integrując własny serwis internetowy wiele działań możemy jednak zautomatyzować i zdecydowanie ograniczyć wykorzystanie tego ograniczonego zasobu, jakim jest nasz czas pracy. Jednym ze sposobów na zminimalizowanie nakładu pracy, przy jednoczesnym aktywnym uczestniczeniu w życiu tej społeczności i wyraźnym zaznaczeniu swej obecności, jest integracja własnego serwisu internetowego z kilkoma podstawowymi mechanizmami portalu Fecoobok.com. Dzięki czemu wyeliminujemy podwójną pracę związaną z publikacją treści oraz zachęcimy osoby odwiedzające nasz serwis do interakcji, wykorzystując znane im funkcjonalności, które przyczyniły się do tak dynamicznego rozwoju społeczności internetowych. Naturalnie nie zastąpi to pracy osoby odpowiedzialnej za komunikację w social media, może jednak ją zdecydowania ułatwić i usystematyzować.

Przykład wizytówki

Integracja serwisu internetowego z Facebook.com
Zdobądź 10 stopni wtajemniczenia!

1. Założenie i konfiguracja strony marki w serwisie Facebook.com.
2. Wizytówka Facebook na stronie z informacją o liczbie sympatyków marki i prezentacja losowo wybranych osób z tego grona.
3. Przywitanie użytkownika w serwisie z imienia i nazwiska oraz jego zdjęciem profilowym.
4. Przycisk Lubię to! przy artykułach lub produktach.
5. Połączenie CMS (systemu zarządzania treścią)  z Facebook.com – publikacja na stronie skutkuje wpisem na stronie marki w Facebook.
6. Życzenia na urodziny użytkownika + specjalna oferta dla tego użytkownika z okazji urodzin.
7. Polecanie strony marki tym znajomym, którzy jej jeszcze nie lubią.
8. Komentarz dodany przez użytkownika w serwisie skutkuje publikacją na stronie marki w Facebook.
9. Kupony rabatowe lub inne prezenty dla osób z Facebook w zamian za publikację wpisu promującego markę na ich tablicy.
10. Logowanie do serwisu danymi z Facebook bez konieczności wypełniania formularza rejestracyjnego przez użytkownika.

Przykład polecania strony znajomym

* Źródło:  InternetStats.pl

<div id="fb-root"></div>
<script src="http://connect.facebook.net/pl_PL/all.js"></script>
<script>
	FB.init({
		apiKey: 'KLUCZ_API',
		status: true,
		cookie: true,
		xfbml: true
	});
</script>

Do publikowania informacji na tablicy wykorzystujemy metodę FB.ui.

FB.ui ({
		method: 'stream.publish',
		message: 'Podróżuję autokarem Eurolines Polska, a za ten wpis dostałem prezent w postaci 15% rabatu na zakup biletu. Wybieracie się w podróż po Europie? Chcecie tańszy bilet? Wejdźcie na www.eurolines-polska.pl !',
		attachment: {
			name: 'Autokarem z rabatem!',
			caption: 'Eurolines Polska',
			description: ('Przewozy międzynarodowe, linie i autokary międzynarodowe'),
			href: 'http://www.eurolines-polska.pl',
			media: [{
				type: 'image',
				href: 'http://www.eurolines-polska.pl',
				src: 'http://www.eurolines-polska.pl/images/fb_logo.jpg'
			}]
		},
		action_links: [{
			text: 'Chcesz tańszy bilet?',
			href: 'http://www.eurolines-polska.pl'
		}],
		user_message_prompt: 'Rabat na bilet za jedno kliknięcie? To możliwe! Wystarczy, że klikniesz "publikuj"'
	},
	function(response) {
		if (response && response.post_id) {

			// Można ustawić cookie zapamiętujące akceptację użytkownika
			// oraz zaprezentować odpowiedni komunikat, wysłać email, itp.
		}
		else {
			// Można ustawić cookie zapamiętujące rezygnację użytkownika
		}
	});

Przy pomocy Facebook Connect możemy nie tylko publikować posty na tablicy użytkowników, ale również ułatwić np. rejestrację pobierając dane z profilu FB czy sugerować użytkownikowi znajomych, którzy w przeszłości odwiedzili serwis. Wszystko zależy od pomysłu.

Linki tekstowe

Link tekstowy musi przede wszystkim informować o miejscu do którego się odnosi lub o akcji, która po jego kliknięciu zostanie uruchomiona (np. otwarcie nowego okna, pobranie pliku itp.). Hiperłącza powinny wyróżniać się od reszty tekstu.

Możemy to osiągnąć, jeżeli zastosujemy podkreślenie, pogrubienie lub inny kolor. Pamiętajmy jednak o użytkownikach posiadających różne schorzenia wzroku, gdyż mogą oni np. nie zauważyć linku w innym kolorze.

Przykład CSS:

a { text-decoration:  underline; color: #aa2525; }
a:visited { color:#aa2525; }
a:hover { color: #fff; background: #0c4265; text-decoration: none; }
a:focus, a:active {color:#fff; background: #0c4265; text-decoration:none; }

W przedstawionym przykładzie domyślnie znacznik  <a> jest podkreślony text-decoration: underline;. Zwróćmy uwagę na dynamiczne pseudoklasy hover oraz focus. Polecenie a:hover {color: #fff; background: #0c4265;} powoduje, że po wskazaniu kursorem myszy na link jego tło będzie granatowe, podczas gdy kolor samego tekstu zmieni się na biały. Dzięki temu odnośnik będzie lepiej zauważalny i dostępny dla użytkowników mających problemy ze wzrokiem.

Zdarza się, że internauta nie posługuje się myszką. Dlatego warto zastosować polecenie a:focus {color: #fff; background: #0c4265;}. Wpisanie tej linii sprawi, że link będzie „podświetlony” za każdym razem, gdy zostanie zaznaczony np. za pomocą klawisza tabulatora.

Treść linku powinna być zrozumiała poza kontekstem. Programy czytające umożliwiają nawigowanie po stronie, za pomocą skrótów klawiaturowych, analizując witrynę np. po nagłówkach, listach, polach formularza, akapitach czy po linkach. Niewidomi użytkownicy często korzystają z tej możliwości, dlatego nie możemy dopuścić do sytuacji, w której aplikacja będzie odczytywać hiperłącza, jako „link więcej”, „link tutaj”, „link czytaj więcej” itp.

Linki graficzne

Wszystkie grafiki pełniące funkcję odnośników, które umieszczone są na stronie, musimy wyposażyć w atrybut alt. Pierwsza wytyczna WCAG 1.0 mówi o tym, że:

„Należy zapewnić odpowiednik tekstowy dla każdego nietekstowego elementu (np: poprzez „alt” czy „longdesc”). Obejmuje to: obrazy, reprezentacje graficzne tekstu, przyciski graficzne”.

Bez tego parametru niewidomi użytkownicy, korzystający z przeglądarek tekstowych, lub internauci, którzy mają wyłączoną opcję pobierania grafiki nie będą mogli uzyskać informacji na temat miejsca, do którego odwołuje się dany link. W takiej sytuacji program czytający odczyta adres url, natomiast przeglądarki tekstowe oraz te z wyłączona opcją pobierania grafiki pokażą tylko jego nazwę.

Nawigacja

Pamiętajmy o tym, by skonstruować odpowiedni i przejrzysty system nawigacji. Zwykle kiedy użytkownik wchodzi na nie znaną stronę WWW, spodziewa się, że menu główne będzie umieszczone po lewej stronie serwisu, wyszukiwarka u góry ekranu, a logo w lewym górnym rogu. Jeżeli skonstruujemy serwis biorąc pod uwagę te oczekiwania, wtedy ułatwimy internautom sprawne poruszanie się po witrynie. Dodatkowo musimy dopilnować, by nawigacja na każdej podstronie wyglądała tak samo. Osoby, które odwiedzą nasz serwis, powinny też wiedzieć, w którym miejscu witryny obecnie się znajdują. Możemy o to zadbać tworząc:

• jednoznaczne tytuły stron, np.:

  <title>Oferta - Agencja IArt</title>

  

• ścieżkę okruszków, np.:

  Jestes tutaj: <a href="/">Strona główna</a> - <a href="/akty-prawne">Akty prawne</a>

  

• możliwość zaznaczenia w menu bieżącego elementu.
  

Warto też wspomnieć o innym mechanizmie, który osobom niewidomym ułatwi poruszanie się po serwisie. W sytuacji, gdy na stronie jest dużo informacji (nagłówków, akapitów, list itd.) dotarcie do konkretnej wiadomości, za pomocą skrótów klawiaturowych, może być uciążliwe. Zwłaszcza jeśli weźmiemy pod uwagę to, że program czytający za każdym razem, kiedy strona zostanie załadowana lub odświeżona zaczyna czytać ją od samego początku. Problem ten możemy rozwiązać, stosując na stronie kotwice.

HTML

<ul>
   <li><a href="#mm">Przejdź do menu głównego</a></li>
   <li><a href="#txt">Przeskocz do treści</a></li>
   <li><a href="?p=map#txt">Mapa strony</a></li>
</ul>
...
<h2><a name="mm">Menu</a></h2>
...
<h2><a name="txt">O nas</a></h2>

Dzięki odnośnikom „Przeskocz do menu głównego” i „Przeskocz do treści” możemy pominąć część materiałów, która przy każdorazowym przejściu na podstronę serwisu byłaby odczytywana.

Natomiast lista, w której znajdują się odnośniki w standardowym widoku przeglądarki, nie będzie widoczna, jeżeli zastosujemy klasę hide.

CSS

.hide {
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    top:0;
    left:-10000px;
}

Na zrzucie obok widać serwis widzialni.eu z wyłączonymi stylami, czyli mniej więcej tak jak widzi go screen reader.

Na górze znajdują się linki, które pomijają powtarzające się na każdej podstronie informacje. W standardowym widoku nie są widoczne.

Zupełnym przeciwieństwem była natomiast ostatnia prelekcja tego dnia, którą wygłosił profesor Lawrence Lessig, jeden z najbardziej znanych na świecie specjalistów w zakresie prawa autorskiego w internecie. Moim skromnym zdaniem zdecydowanie najlepiej przygotowana prezentacja na całej konferencji (ta opinia jest tym bardziej subiektywna, że z przyczyn organizacyjnych nie mogłem zobaczyć wszystkich prezentacji, ale o tym za chwilę). Niesamowicie wciągająca przemowa, idealnie wygłoszona i znakomicie odebrana przez audytorium, co wydaje się szczególnie istotne w przypadku z pozoru mało porywającego tematu prawniczego.

Krótka historia przedstawiona przez profesora Lessig’a sprowadza się do tego, że przebrnęliśmy przez okres kiedy kultura była “tylko do odczytu”, tworzona przez wąską grupę twórców. Kiedyś ludzie przekazywali sobie utwory, np. poprzez wspólne wykonywanie pieści, które z czasem również ulegały modyfikacji. Obecnie dzięki serwisom opartym na treściach generowanych przez użytkowników możemy wrócić do tego stanu rzeczy, gdzie każdy może wykazać się swoją kreatywnością. Wymaga to jednak pewnego społecznego kontraktu, który mogłaby stanowić np. licencja Creative Commons.

Drugi dzień to trudne wybory. Prelekcje odbywały się równolegle w trzech salach, więc każdy mógł wytyczyć swoją indywidualną ścieżkę. Jak niemal każde rozwiązanie, również i to, ma swoje plusy i minusy. W tym miejscu koniecznie należy zaznaczyć, że organizatorzy stanęli na wysokości zadania i za pomocą słynnego już “jajka zegarowego”, trzymali w ryzach prelegentów, dzięki czemu wystąpienia odbywały się rzeczywiście równolegle i w przerwach można było zmienić salę. Nie mniej jednak, prawdopodobnie żadnemu uczestnikowi nie udało się być w trzech salach równocześnie, a w niektórych momentach byłoby to wskazane…

Na temat wystąpień w tym dniu można byłoby mówić wiele, szczególnie, że było ich około 50. Niewątpliwe na uwagę zasługuje jednak fakt, że wystąpienie Maćka Budzicha, prowadzącego blog www.mediafun.pl zostało przeniesione do auli, ponieważ sala w której prelekcja miała się odbyć nie pomieściła wszystkich zainteresowanych. Maciek mówił o ciekawych kampaniach reklamowych w blogosferze i przede wszystkim zasadach jakim należy się kierować we współpracy, które okazały się zadziwiająco proste… Ogólnie mówiąc powinny one bazować na szczerości i zaufaniu ;)
Głównie z powodu tych wielu wystąpień z drugiego dnia, których nie mogłem zobaczyć, jedyna moja uwaga organizacyjna: brak nagrań z tych prelekcji, które można byłoby zobaczyć po zakończeniu konferencji. Myślę, że dodatkową zaletą tego rozwiązania byłoby ułatwienie poniedziałkowych powrotów do rzeczywistości… (jak można było zauważyć na aktywnie używanym podczas konferencji tagu Blipa, w niektórych przypadkach byłoby to użyteczne)

Dla wytrwałych, którzy mimo dwóch wieczornych spotkań integracyjnych, dotarli trzeciego dnia na aulę WSIiZ, organizatorzy przygotowali m.in.:

• premierowy pokaz Internet Explorera 9 beta,
• praktyczny poradnik Rafała Hana dla posiadaczy lub planujących uruchomienie startupu;
• case kampanii wizerunkowej piwa Budweiser Budvar z udziałem Facebook’a i Drevnego Kocura, przedstawiony przez agencję Pride & Glory;
• kilka (czasem gorzkich) prawd na temat handlu Internetowego od Tomasza Karwatki z Divante;
• spostrzeżenia Pawła Tkaczyka odnośnie aktualnych metod budowania wizerunku marki w sieci.

Pozwolę sobie użyć bardzo ogólnego sformułowania i powiem, że nowa przeglądarka Microsoftu, nie zaskoczyła… Podobnie z resztą jak pozostałe wymienione przeze mnie prezentacja, ale te w zupełnie innym sensie. Nawet mocno zmęczeni już uczestnicy konferencji z pewnością nie nudzili się na tych wystąpieniach. Wszystkie były znakomicie przygotowane i przedstawione, nawet z odpowiednim kontrastem i wielkością czcionek na slajdach, w przeciwieństwie do kilku z pierwszego dnia ;)

Rafał Han przedstawił podstawowe zasady rozmowy pomysłodawcy z potencjalnym inwestorem, wszystkie wskazówki były bardzo cenne, mniej lub bardziej oczywiste, ale najbardziej spodobało mi się stwierdzenie, że pomysł musi być po prosu “bright”, które ma wiele odpowiedników w języku polskim. David Szczepaniak, tradycyjnie już energetycznie i z humorem, przedstawił w jaki sposób powstał pomysł i jak jest promowana czeska wiewiórka, zachęcająca do czeskiego piwa. Tomasz Karwatka jak zwykle rzeczowo i fachowo przedstawił wybrane dane istotne w branży e-commerce, zwracając szczególnie uwagę na koszty pozyskania Klientów.

Na koniec prezentacja Pawła Tkaczyka, choć nie była ostatnia chciałbym nią zakończyć tę opowieść, ponieważ dla mnie najciekawsza w ostatnim dniu – “Marka w internecie nie potrzebuje strony www. Branding i social graph”. Dość obrazoburcza teoria została poparta kilkoma przykładami i choć nikt z sali nie odwiedził strony Burger Kinga, a wszyscy wiedzieli o aktualnej akcji promocyjnej z udziałem blogera, to nie wydaję mi się, żeby zmierzch firmowych witryn internetowych był tak bliski jak przedstawił to prowadzący. Raczej odebrałem to wystąpienie jako silny sygnał, że poza stroną internetową istnieje już bardzo wiele istotnych narzędzi, które marka w Internecie powinna również wykorzystywać. Może nawet skoncentrować się na nich, wyjść do Klientów, przyciągnąć ich uwagę. Co z resztą prezes agencji Midea bardzo jasno powiedział: “follow the attention” i “jumping the waves”, to najbardziej zapamiętane hasła tej prelekcji.

Na koniec nie pozostaje mi nic innego jak pogratulować organizatorom i prelegentom udanej imprezy. Bez wątpienia jest to ciekawe wydarzenie i warto już teraz zaplanować wizytę w Rzeszowie we wrześniu przyszłego roku.

Na wielu serwisach wygląd tego pola nie zakłóca estetyki i harmonii odbioru, jednakże w niektórych przypadkach, mówiąc krótko, pole całkiem nie pasuje do ogólnego wyglądu strony. Czy możemy coś na to poradzić? Tak. Przy odrobinie wprawy i znajomości CSS możemy poprawić niektóre elementy wyglądu okienka takie jak krój czcionki, jej kolor, wielkość, siatkę miniaturek z zdjęciami/obrazkami profilowymi użytkowników, itp.

Pierwszą rzeczą, którą należy zrobić jest zalogowanie się na Facebook’u do profilu, który chcemy promować. Następnie klikamy w link Edytuj element Strona znajdujący się po lewej stronie pod zdjęciem/obrazkiem profilowym.

Na stronie, gdzie dokonujemy edycji ustawień klikamy w link Promuj na pomocą pola Lubię to!

Na ekranie z ustawieniami pola Lubię to! Wprowadzamy niezbędne informacje takie jak URL profilu, szerokość, ilość wyświetlanych osób itp. (najważniejszą dla nas informacją jest numer identyfikacyjny ID wyświetlany na końcu URL – należy go zapamiętać). Po wypełnieniu formularza klikamy w przycisk Get Code. Pokaże nam się okienko z gotowym kodem do wklejenia standardowego pola Lubię to!. Mamy tu do wyboru 2 możliwości: osadzenie pola za pomocą znacznika <iframe> (niestety nie da nam to żadnych możliwości jego edycji) lub osadzenie za pomocą tagów XFBML API Facebook’a (które wykorzystamy). Klikamy w przycisk Zrobione.

Przechodzimy na stronę http://www.facebook.com/developers/apps.php i klikamy w przycisk Stwórz nową aplikację. Po utworzeniu aplikacji musimy zapamiętać klucz API.

Na stronie docelowej, gdzie będzie się pokazywać pole Lubię to! wklejamy poniższy kod, w oznaczone miejsca wstawiając zapamiętany klucz API oraz numer identyfikacyjny ID.

<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("klucz API");</script>
<fb:fan profile_id="numer identyfikacyjny ID" connections="8" width="250" height="290"></fb:fan>

Po przetestowaniu strony powinno się pokazać standardowe pole Lubię to!.

Nadszedł czas na zmiany. Wewnątrz znacznika <fb:fan> wklejamy poniższy kod, podając URL do pliku CSS, w którym określimy własne ustawienia wyglądu elementów pola.

css="url_do_pliku.css"

Ostatnia linijka naszego kodu powinna wyglądać teraz następująco:

<fb:fan profile_id="numer identyfikacyjny ID" connections="8" width="250" height="290" css="url_do_pliku.css"></fb:fan>

Nadszedł czas na nadanie własnych stylów elementom pola Lubię to!. Tworzymy nowy plik CSS, oczywiście z nazwą taką samą, jak ta podana w znaczniku <fb:fan>. Wewnątrz pliku możemy teraz umieścić klasy, które zmodyfikują wygląd danego elementu. Poniżej podane są niektóre z nich wraz z krótką charakterystyką za co odpowiadają.

• .fan_box .full_widget {} – ogólny wygląd pola
• .fan_box .full_widget .connect_top {} – górna część pola
• .fan_box .full_widget .connect_top a {} – link w górnej częsci pola obok zdjęcia/obrazka profilowego
• .fan_box .full_widget .connect_top a:hover {} – to samo co wyżej po najechaniu wskaźnikiem myszy
• .fan_box .full_widget .connect_top a span {} – nazwa profilu w linku
• .fan_box .profileimage {} – zdjęcie/obrazek profilowy
• .fan_box .connections {} – dolna część pola: użytkownicy oraz tekst “Następująca liczba znajomych lubi stronę:”
• .fan_box .connections span.total {} – ilość użytkowników przy powyższym tekście
• .fan_box .connections .connections_grid {} – siatka z użytkownikami, którzy to lubią
• .fan_box .connections_grid .grid_item {} – poszczególne elementy siatki
• .fan_box .connections_grid .grid_item .name {} – nazwa wyświetlana pod zdjęciem/obrazkiem profilowym użytkowników

Wewnątrz powyższych klas możemy użyć większości atrybutów CSS, które zmienią wygląd naszego pola Lubię to!. Poniżej przedstawiamy przykładowe pole z własnym wyglądem elementów oraz link do pliku CSS, które je definiuje.

Przykładowe pole Lubię to! oraz plik .css określający jego wygląd.

Niestety tak przygotowane pole Lubię to! Nie spełnia kryterów walidacji ustanowionych przez W3C z powodu braku znacznika <fb:fan> w specyfikacji XHTML. Najprostszym sposobem na poradzenie sobie z tym faktem jest wykorzystanie pliku fbObjectValidationV2.js dostępnego na stronie http://www.ka-mediendesign.de/blog/fbml-in-xhtml-neue-version/. Do kodu wyświetlającego nasze pole Lubię to! wstawiamy:

<script src="fbObjectValidationV2.js" type="text/javascript"></script>

Natomiast znacznik <fb:fan> ujmujemy w komentarz HTML:

<!-- FBML <fb:fan profile_id="numer identyfikacyjny ID" connections="8" width="250" height="290" css="url_do_pliku.css"></fb:fan> FBML -->

Cały nasz kod wygląda teraz następująco:

<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("klucz API");</script>
<!-- FBML <fb:fan profile_id="numer identyfikacyjny ID" connections="8" width="250" height="290" css="url_do_pliku.css"></fb:fan> FBML -->
<script src="fbObjectValidationV2.js" type="text/javascript"></script>

Przy testowaniu naszego pola może okazać się, że po dokonaniu zmian w pliku CSS odpowiadającym za wygląd pola Lubię to! nie zmienia się nic w jego wyglądzie. Spowodowane jest to cachowaniem pliku. Sposobem na obejście problemu jest dodawanie do adresu url do pliku CSS dodatkowej wartości ?1 i kolejne jej zwiększanie po zmodyfikowaniu pliku CSS (?2, ?3, itd.).

<!-- FBML <fb:fan profile_id="numer identyfikacyjny ID" connections="8" width="250" height="290" css="url_do_pliku.css?1"></fb:fan> FBML -->

Tak zmodyfikowane w nieznacznym stopniu pole Lubię to! pozwoli na dostosowanie go do ogólnego wyglądu estetycznego naszego serwisu.

Wytyczne

Nim zaczniemy modyfikację lub budowę serwisu internetowego musimy zapoznać się z dokumentem WCAG 1.0 (WCAG 2.0) (Web Content Accessibility Guidelines). Jest to zbiór dokumentów opublikowanych przez WAI (Inicjatywa Dostępności do Sieci – inicjatywa organizacji W3C), który zawiera wskazówki, dotyczące tworzenia dostępnych witryn internetowych. Stosowanie się do nich gwarantuje, że tworzony serwis będzie bardziej przyjazny dla wszystkich odwiedzających stronę użytkowników, bez względu na wykorzystywane oprogramowanie, sprzęt oraz na dysfunkcję danego internauty. Jednocześnie witryna będzie bardziej widoczna w Sieci. Jednym słowem wytyczne pomogą nam stworzyć czytelny, zrozumiały i łatwy w nawigacji serwis.

Oto kilka wskazówek, jakie znajdziemy w dokumencie WCAG, które pomogą nam stworzyć dostępną stronę internetową:

• odseparowuj strukturę od prezentacji (CSS),
• dostarcz w pełni samodzielny tekst. Jeśli część treści lub nawigacji ma inną formę należy dostarczyć odpowiednik tekstowy,
• pamiętaj o osobach z dysfunkcjami. Strona powinna być dostępna dla osób ze słabym, wzrokiem i słuchem.
• stwórz serwis w taki sposób, by był możliwy do odczytania na więcej niż jednym rodzaju urządzenia,
• używaj jak najbardziej prostego języka,
• zbuduj zrozumiały mechanizm nawigacyjny i dostarcz informację o ogólnym rozmieszczeniu serwisu (tzn. mapę strony, spis treści).

Rola znaczników

Tekst na stronach internetowych jest podstawowym sposobem przekazywania informacji dlatego musimy postarać się o to, by użyte w nim znaczniki HTML jednoznacznie opisywały jego strukturę.

W języku HTML znaczniki formatujące tekst możemy podzielić na dwie podstawowe kategorie – tzn.:

• znaczniki formatujące – ich zadaniem jest zmiana wyglądu tekstu: pogrubienie  <b>, pochylenie <i>, podkreślenie <u> . Znaczniki te powinny być wykorzystywane tylko w celach poprawienia estetyki, a nie po to, by zaznaczyć ważną informację.
• znaczniki semantyczne – ich zadaniem jest określenie znaczenia danego fragmentu tekstu (nagłówek – <h1> ,<h2>, itd.; mocne wyróżnienie – <strong>; zmiany – <ins>, <del>; akronim – <acronym>). Natomiast sposób w jaki treści zostaną przedstawione zależy od  przeglądarki (klienta HTTP)

Podczas budowy serwisu WWW należy zwrócić szczególną uwagę na zastosowanie znaczników semantycznych. Dzięki nim programy czytające, (screen reader) używane przez osoby niewidome i niedowidzące, mogą w prawidłowy sposób zinterpretować i odczytać treść strony. Oczywiście  znaczniki semantyczne mają ogromne znaczenie również dla robotów wyszukiwarek (choćby google), które odwiedzają codziennie nasze serwisy.

Rodzaje czcionek

Rozróżniamy dwa typy rozmiarów czcionki – tzn. bezwzględne i względne. W wypadku tych pierwszych rozmiar ustawiony jest na sztywno  – najpopularniejszą jednostką w tej grupie jest piksel (px). Jednak W3C zalicza ją do czcionek względnych, gdyż jej wielkość zależy od rozdzielczości urządzenia, np. wielkości ekranu, czy funkcji drukarki. Niestety zastosowanie tej miary ma jedną poważną wadę – przeglądarka MS Internet Explorer w wersji 7.0 i niżej nie potrafi zmieniać rozmiaru tekstu. Wśród innych jednostek bezwzględnych wyróżniamy: punkt (pt), picę (pc), milimetr (mm), centymetr (cm) oraz cal (in).

Rozmiar jednostek względnych określa stosunek bieżącego elementu do komponentu nadrzędnego. Dlatego też do kategorii tej zaliczymy takie miary jak procent (%), wysokość x (ex) oraz stopień pisma (em).

Jest tak wiele różnych schorzeń wzroku, że trudno jednoznacznie stwierdzić jaki rozmiar czcionki jest najbardziej odpowiedni. Zastosowanie zbyt małej spowoduje szybkie zmęczenie oczu, zaś wykorzystanie zbyt dużej obniży estetykę strony.  Rozmiar musimy  zdefiniować w ten sposób, by użytkownik mógł swobodnie powiększać go z poziomu przeglądarki internetowej. Dlatego też najlepiej jest użyć jednostki em, która zapewni nam odpowiednie proporcje wielkości  przy skalowaniu.