Graficzna i innowacyjna gazeta w eRepublik

Ostatnio przy okazji grania w eRepublik postanowiłem powrócić do graficznej formy gazety, jaką kilka miesięcy temu zaprezentowałem – odbiło się to z mieszanymi uczuciami, po części spora ilość graczy była bardzo zaciekawiona taką ideą, jednak również spora część twierdziła, że gazeta ładuje się zbyt wolno i zabiera znacznie więcej czasu… Postanowiłem więc wymieszać dwa style – zrobić gazetę po części graficzną, po części tekstową. Odrobina zabawy, metodą prób i błędów, a osiągnąć możemy całkiem przyzwoite efekty…
Ba… nawet mój ostatni artykuł o bugach w eRepublik spotkał się nie tylko z ogromnym entuzjazmem (dzięki!), ale również z próbami „edukowania się” czyimś wzorem (image). Nie nazwałbym prób zrobienia podobnej gazety do mojej plagiatem, gdyby ktoś po prostu wykorzystywał podobne rozwiązania… ale żeby kopiować te same guziki i próbować je przerobić zamiast zapytać…

Jeżeli znajdziesz ciekawe sztuczki, pozwalające dodawać do gazety różne elementy, których tutaj nie wymieniłem – skontaktuj się ze mną! Z pewnością za Twoją zgodą dodam opis tej sztuczki tutaj, podając autora (link do profilu lub link referencyjny)…

Wracając do sprawy – na wstęp od razu mówię, że gazeta pół-graficzna, jaką widzicie poniżej nie wymaga więcej czasu niż zwykła gazeta… Czemu akurat określenie „pół-graficzna”? Bowiem część Waszej gazety może być wykonana sposobem graficznym, przykładowo logo i guziki, zaś reszta to zwykły tekst wpisywany w oknie przeglądarki, w samej grze.

Pewnie od razu powiecie, że trzeba się znać na HTML, PHP, albo innych pierdołach… Nie. Po prostu nie.
Wystarczy poznać zaledwie trzy rzeczy, zapisać sobie gdzieś na boku w notatniku i wykorzystywać przy pisaniu gazety. Potem wszystko opiera się na kopiuj z notatnika, wklej do eRepa. Redagowanie Kuriera ePolskiego w eRepublik zajmuje mi dokładnie tyle samo, co każdemu innemu autorowi, który pisze tekst. Tylko z jedną różnicą – przed pisanym tekstem i po nim wstawiam gotowy kod skopiowany z notatnika, który odpowiada za grafiki. Wszystko – 10 sekund więcej roboty, a jaki efekt!

Jedyne, co zajmie nam nieco czasu, to zaprojektowanie naszej gazety…

Rzecz pierwsza podstawowa…

Nie publikuj artykułu, który chcesz używać do testowania lub próbowania wprowadzenia tych sztuczek, od razu zapewnisz sobie rangę spamera, a ludzie zapamiętają sobie Twój nick – by później omijać wszelkie Twoje publikacje szerokim łukiem.
Pierwsze kilka artykułów postaraj się napisać normalnie, bez używania sztuczek… Dopiero później, gdy Twój artykuł nie będzie już na liście ostatnich tekstów i nie zdobył sobie popularności wykorzystaj go do testowania. Przyznam się, że również posiadam jeden taki artykuł, stary jak świat, który służy mi wyłącznie do testów :-)

Projekt

Powinniśmy ustalić sobie pewną wizję, jak nasza gazeta będzie wyglądać. Należy jednak zapamiętać jedną, podstawową, niepodważalną i najważniejszą rzecz:

eRepublik automatycznie i bez naszej zgody daje między obrazkami białą linię, więc jeżeli chcemy dać dwa obrazki jeden pod drugim, które powinny tworzyć jedną całość – to się nie uda. Erepublik wlepi nam między nimi biały pasek, trzeba to uwzględnić przy projekcie.

Podczas projektowania należy uwzględnić poza tym kilka rzeczy – wykorzystywać możemy jedynie podstawowe znaczniki HTML, te które nam się przydadzą najbardziej to oczywiście znaczniki odpowiadające za link oraz obrazek. Żadnych tabel, stylów, czy innych rzeczy raczej nie wciśniemy. Sprawa kolejna to szerokość grafik jakie chcemy użyć w projekcie – pojedyncza grafika nie może mieć więcej niż 400×350 pikseli, powyżej tych rozmiarów ulega automatycznemu zmniejszeniu.

Białe tło – Twój przyjaciel, a zarazem wróg

Białe tło, jak wspominałem wyżej pojawia się, gdy dajemy jeden obrazek pod drugim, a chcemy je połączyć w całość. Dlatego przy projektowaniu gazetki najlepiej wykorzystywać to tło w taki sposób, by łączyło się w całość – przykładowo nasze logo ma białe ramy, białe tło, albo biały gradient (patrz moje). Czym bardziej złożony chcemy mieć projekt nagłówka (przykładowy poniżej), tym więcej musimy przewidywać – jeżeli chcemy dać najpierw logo, potem np. guziki kontaktowe, jak w moim przypadku musimy mieć na uwadze, że pomiędzy górą, a dołem wkradnie się biała linia.

Wykonanie

W jednej linii możemy dać nawet kilka obrazków, jednak nie mogą one być szersze niż treść artykułu – by wszystko się ładnie kupy trzymało. Oczywiście da się wstawić takie, co wyjdą za ramy strony… ale po co?
Logo jakie wykorzystamy w gazecie to już tylko nasza wyobraźnia – ważne, by wykonać dwie czynności – sprawdzić szerokość (w moim przypadku zalecam 540 pikseli), jaką ma tekst w artykule oraz pociąć ten obrazek na kilka równych części (każda mniejsza niż 400px szerokości i 350 wysokości). Najlepiej każdą część zrobić na 180 pikseli, wówczas osiągniemy 540, co powinno się ładnie komponować.
Dobrze by było, by części miały tą samą wysokość, chociaż nie sprawdzałem, czy „połączą się” jeżeli będą miały inne – może to przynieść ciekawe efekty.

Pamiętajcie – nie róbcie zbyt dużo linków prowadzących poza eRepublik. Wszelkiego rodzaju reklamy, czy elementy prowadzące do prywatnych stron, for, chatów, czy innych rzeczy mogą zostać uznane przez adminów eRepublik za reklamę!

Jak to wygląda w praktyce?
Projekt naszego loga dzielimy sobie na części.

Użyć do tego możemy byle jakiego programu, nawet Painta, liczy się to, by części nie były źle pocięte – dlatego tniemy, co do piksela.
To, jak poukładamy sobie te części, to już nasza wola i wyobraźnia, warto przewidzieć tutaj jedną rzecz – mianowicie, że obrazek może być linkiem. Więc podobnie, jak w Kurierze ePolskim można stworzyć pod logiem guziki odsyłające do np. rozmowy na GG.
Prócz topu, możemy sobie wykonać stopkę, która również może być różnie zbudowana. Może ona prezentować Wasze firmy (co za tym idzie linki do tych firm), dokonania… co chcecie. Wyobraźnia jest ogromna, a ograniczeniem jest tylko fakt, że trzeba to jakoś pociąć na poszczególne segmenty obrazki.

Kod

Każdy kto zna się, co najmniej lekko na HTML ogarnie jednym ruchem wszystko samemu, więc… jeżeli bawiłeś się w HTML, a takich ludzi jest raczej większość, sam się domyślisz jak skleić linka z obrazkiem.
Jak wspominałem powyżej, używać możemy podstawowych znaczników HTML, przede wszystkim odpowiadających za obrazki oraz linki. Rzecz pierwsza – jak stworzyć obrazek, by następnie dać jeden obok drugiego, co zaowocuje, że się „skleją”.

<img src="LINK" />

W miejsce link wstawiamy odnośnik np. do wrzuconego obrazka na tinypic.com, nie dajemy tutaj żadnych spacji, jedynie po img.

<a href="LINK">Treść linku</a>

W miejsce link wstawiamy odnośnik, np. do adresu, który otwiera nasz profil, albo adres do utworzenia wiadomości PW na nasz profil. Spacja jest tylko po a.

Tworzymy zatem tyle img src obok siebie (bez spacji między nimi), ile mamy obrazków w poziomie w naszym logu. W zamieszczonym tutaj przykładzie Kuriera ePolskiego są to trzy obrazki obok siebie, metodą prób i błędów znajdziemy taką łączną szerokość, by jeden nie spadał niżej.

<a href="gg:XXXX">XXXX</a> – tworzy odnośnik do rozmowy na GG, gdzie XXXX jest numerem, przed numerem jest dwukropek!

<img src="LINK" title="XYZ" /> – tworzy obrazek, zawierający tytuł pojawiający się po najechaniu

Możemy również sprawić, by obrazek był w konkretnym miejscu artykułu – np. po lewej albo po prawej. Ramki możemy dodać tworząc obrazki już wcześniej zawierające np. białą ramkę.

<img src="LINK" align="right" /> – zamiast right możemy również left

Teraz, jak stworzyć obrazek, który jest linkiem… łączymy po prostu jedno z drugim.

<a href="LINK1"><img src="LINK2" /></a> – jak widzimy z przodu mamy odnośnik, a potem za wartość tego odnośnika obrazek.

Pewnie wielu z Was, tych którzy nie bawili się w HTML lub nie bawili się w innowacyjne gazety, zacznie panikować w stylu „ile tu kodu…”. Nie prawda – jak już sobie go zrobisz, to potem tylko „kopiuj wklej”.
Ważne jest, by skopiować kod prawidłowo, nie wstawiać niepotrzebnych spacji… To teraz mała zabawa, spróbujcie rozszyfrować poniższy kod. Robiąc dalej nasz schemat po prostu wklejamy kod obrazka, za kodem obrazka – bez spacji i enterów, co spowoduje, że jeden wstawi się obok drugiego i osiągniemy taki efekt. Jeżeli chcemy by środkowy „klocek” był linkiem zamiast samego img src, dajemy powyższy kod – link z obrazkiem. I cacy!

Sztuczki

Jedną z najpopularniejszych sztuczek jest ta, którą wymieniłem przy okazji wyżej – swój numer GG jako link. Możemy wstawiać linki do wielu różnorodnych komunikatorów, jednak trzeba zaznaczyć – bywa, że eRep nie lubi niektórych linków i tworzy z nich np. listę, a nie odnośnik – tak jest z linkami z YouTube.
Do niektórych komunikatorów poza samym linkiem można wstawić ikonkę statusu.

Przy projektowaniu gazetki z użyciem sztuczek należy pamiętać, o „legendarnym białym tle”.

Kod HTML do Skype
Kod HTML do Tlena
Kod HTML do AQQ
Kod HTML do Gadu-Reklama

Uzyskanie guzika graficznego do wysyłania PW w eRepublik nie powinno raczej nikomu sprawić trudności:

<a href="http://www.erepublik.com/pl/messages/compose/xxxxxxx"><img src="LINK" /></a> – gdzie XXXXXX to numer naszego profilu, a LINK to adres obrazka.

Sztuczki możemy wykonywać na różnorodne sposoby i z pewnością jeszcze bardzo wiele takich sztuczek się znajdzie… Główna metoda, to kombinowanie z tzw. ID i CLASS, czyli przeglądanie jak wyglądają źródła stron w eRepulik – otwieramy stronę, klikamy Widok i Źródło strony i próbujemy zastosować różne zamieszczone tam CLASS i ID do linków czy obrazków.
Ale to już jazda, dla bardziej zainteresowanych… i niestety, nie przedstawię tutaj sztuczki, jak zrobić guzik do Vote czy Subscribe, bowiem zaraz masa gazet posiadałaby przed komentarzami ogromne obrazki zapraszające do subowania.

Inne sztuczki, jeżeli się pojawią lub ktoś mi podeśle – jak mówiłem, zamieszczę za pozwoleniem i podpisując kto taką sztuczkę nadesłał.