x

 

ARTYKUŁY - VARIA


OCENA mocne: 2, słabe: 0
zobacz komentarze

Zunifikowany poradnik - wszystko o tworzeniu blogów w jednym miejscu!

04-02-2021, 13:19, Unikalnych wejść: 1796 , autor: kuboll112
ARTYKUŁY
VARIA

W tym poradniku pokażę wam co zrobić, żeby wasze blogi/artykuły, które wrzucacie na Mój Football Manager były bardziej funkcjonalne i przejrzyste. Dowiecie się m in. czego unikać tworząc swój projekt i jak wykorzystać niektóre narzędzia, wtyczki, formatowanie na MFM. Tutorial dotyczy tylko okienka na zdjęciu poniżej (w poradniku dla ułatwiania będę posługiwać się takimi nazwami paneli jak je określiłem na zdjęciu), które otworzy nam się po zalogowaniu i kliknięciu przycisku + Dodaj RM, MB czy EG. Możecie pomóc w rozbudowywaniu tego poradnika. Osoby, które podsuną najciekawsze pomysłu zostaną wyróżnione, a więcej o tym na samym końcu.

 

Zalecam też przeczytać:
Jak korzystać z panelu blogowego Mój Football Manager? Tutorial - jesień/zima 2017. (Mahdi, 23-11-2017)

 


1. Skrót klawiszowy CTRL+A.

Razem z właścicielem strony, Mahdim, za którego aprobatą powstał cały tutorial, jesteśmy zgodni, że tekst własnego bloga/artykułu najlepiej najpierw stworzyć w zewnętrznym edytorze tekstowym, później dopiero formatować na MFM. Są użytkownicy, którzy jednak od razu piszą blog na stronie, bo uważają, że tak jest szybciej i właśnie im dedykuję 1 punkt. Chciałem w nim przypomnieć jeden z najczęściej używanych przeze mnie skrótów klawiszowych przy tworzeniu długiego tekstu. Portal MFM to blogi, a blog to opowieść, sprawozdanie, które niejednokrotnie składa się z rozbudowanych zdań i akapitów. Zachęcam, ażeby w trakcie pisania własnego tekstu od razu na stronie, nie patrzeć na formatowanie, najlepiej zmienić jego wygląd już po jego utworzeniu. Kiedy mamy już przygotowany blog w polu roboczym, klikamy na niego (bez przełączania na Źródło dokumentu), żeby pojawił się tam kursor i wykonujemy skrót klawiszowy Ctrl+A, po czym zaznacza się nam cały obszar roboczy i wtedy możemy swobodnie zmienić czcionkę dla całości, nadać justowanie i inne. Może wam się wydawać to błahostka, ale nie raz widać, że ktoś ma część tekstu od lewej do prawej, część wyjustowaną, a tak (najprawdopodobniej) uda wam się utrzymać porządek bloga. Sprawdzałem i w 3 różnych przeglądarkach ten popularny skrót działa tak samo (Mozilla, Chrome, Microsoft Edge), nie zaznaczy wam nic po za polem roboczym.

 

 

2. Odsyłacz w nowej karcie:

Idąc za ciosem, drugi punkt poradnika też będzie prezentacją dosyć łatwej akcji na stronie, więc zacznijmy. Przy tworzeniu nowego odnośnika, najpierw piszemy tekst, pod którym będzie się ukrywał nasz link (w moim przypadku będzie to wyraz tabela), później zaznaczamy go kursorem i wreszcie wybieramy ikonkę Wstaw edytuj/odnośnik z panelu akcji:

 

 

W oknie, które się nam otworzy wklejamy oczywiście swój link w polu Adres URL i żeby nasz odsyłacz uruchamiał się w nowej karcie, wybieramy kartę Obiekt docelowy i na liście rozwijanej zaznaczamy Nowe okno (_blank):

 

 

 

Teraz nasz link uruchomiony lewym przyciskiem myszy włączy się w nowej karcie. Oczywiście jest wielu użytkowników, którzy klikają w odnośnik rolką myszki czy właśnie z przekory prawym myszy i Otwórz odnośnik w nowej karcie, jednak dzięki takiemu formatowaniu unikniemy wielu pomyłek.

Podobną operację możemy wykonać na obrazku, jeżeli chcecie żeby ten wyświetlał się w nowej karcie po kliknięciu. Na panelu akcji znajdujemy i wybieramy Obrazek, i w oknie, które nam się otworzy - wklejamy adres swojego obrazka (Adres URL).

 

 

 

Następnie przechodzimy do karty Hiperłącze i w polu Adres URL dajemy identyczny adres obrazka jak wcześniej, następnie z listy rozwijanej Obiekt docelowy wybieramy Nowe okno (_blank). I gotowe, a taka operacja jest wskazana szczególnie przy wstawianiu dużych fotografii czy zrzutów ekranu.

 

 

3. Poprawna tabela dla wersji mobilnej; 100%:

Tabele w HTML są dla niektórych użytkowników zbyt skomplikowane, dlatego tworzą je w programach zewnętrznych, po czym na stronie umieszczają tylko ich screeny (swoją drogą: MFM poleca hosting zdjęć imgur.com), chociaż.. tabelka tworzona w języku HTML ma swoje zalety, przykładowo do pojedynczej komórki możemy wrzucić obrazek (.jpg, .png, i inne), a tego efektu nie uzyskamy w arkuszu kalkukacyjnym Excel. Na MFM jednym kliknięciem stworzycie tabelę, która będzie miała kod html'owski (później pojawi się on w Źródle dokumentu), klikając na tę ikonę w panelu akcji:

 

 

.. ale musicie się mieć na baczności i żeby wyjaśnić wam na czym polega problem posłużę się zrzutem ekranu zrobionym z mojego telefonu Xiaomi Redmi Note 9, działającym na Androidzie. Coś tu jest nie tak:

 

 

Oczywiście, nie można winić Mistrza Ceremonii, weche za wstawienie na MFM tabeli, która na telefonach wychodzi poza panel wysłanego bloga, bo publikacja była bardzo długa i miała wiele kolumn, ale jeżeli chcecie to możecie sprawić, żeby wasze tabele zawsze mieściły się w "ramach" bloga tak na komputerze jak i w wersji mobilnej. Wystarczy przy tworzeniu tabeli zamienić Szerokość z domyślnego 500 na 100%. Tak rozpoczęta tabela "będzie robiła wszystko" żeby zmieścić się we wspomnianych ramach bloga, m in. będzie dążyła do zmniejszenia czcionki, obrazków i w razie konieczności pozawija linie.

 

 

4. Tło dla ciemnego obrazka:

Strona MFM wykonana jest w odcieniach szarości, dlatego ciemne obrazki oraz czcionka są mniej widoczne ze względu na "brak kontrastu". Oto przykład loga Juventusu z przezroczystym tłem:

 

 

Możecie w bardzo prosty sposób dodać do tego obrazka białe tło (przykładowo, bo na MFM można używać kolorów po nazwach HTML, X Window czy też w zapisie szesnastkowym), które będzie z nim kontrastować i da fajny efekt na stronie. Żeby to zrobić, tworzymy Tabelę, która składa się z 1 komórki czyli ma 1 wiersz (tr) i 1 kolumnę (td), oprócz tego szerokość - 100% i grubość obramowania - 0.

 

 

Do utworzonej komórki (w polu roboczym) wklejamy naszą grafikę przedstawiającą czarne logo Juventusu, po czym odszukujemy tabelę w Źródle dokumentu.

 

 

Nie bez przyczyny podkreśliłem na czerwono linijkę bgcolor="white" (bg to skrót od background), bo sam ją dopisałem w Źródle dokumentu dla całego wiersza tabeli (tr), mogłem to samo zrobić dla komórki (td), efekt byłby taki sam. Otrzymałem taki:

 

 

To bardzo prosty przykład nadania tła dla obrazka, można też pobawić się z div'ami, ale wtedy też trzeba zwracać uwagę na czynniki poboczne. Ja preferuję to proste rozwiązanie.

 

5. Czcionka Comic Sans MS:

W tym punkcie po raz drugi chciałbym się odnieść do wersji mobilnej strony MFM, bo dzisiaj jest ona tak samo ważna jak ta desktopowa, ja osobiście 95% blogów czy artykułów przeglądam właśnie na telefonie. Zrobiłem test czcionek dostępnych w panelu akcji na portalu i okazało się, że czcionka Comic Sans MS nie jest poprawnie obsługiwana na telefonach, nie odczytuje zdecydowanej większości polskich znaków, co zobaczycie tutaj:

 

 

Przed publikacją swojego bloga czy artykułu radzę zastanowić się nad użyciem czcionki Comic Sans MS, bo w wersji mobilnej strony myfootballmanager.pl zobaczymy tzw. "krzaki", jak wyżej. CS MS nie odczytuje także niektórych liter ze znakami diakrytycznymi, używanymi w innych językach, na innych klawiaturach.

 

6. Tweet na stronie:

Twitter to portal społecznościowy o globalnym zasięgu i tak jak w przypadku filimików z yt (poradnik o tym jak dodać je na portalu wstawiał już kiedyś Mahdi, ja przypominam o tym w kolejnym punkcie, 6)), na MFM da się także osadzić tweety użytkowników tej strony (swoje także, to bez znaczenia). Najpierw wchodzimy na twitter i pod interesującym nas wpisem klikamy Share, a później Copy link to Tweet.

 

 

Każdy tweet ma swój unikalny identyfikator. Tak wygląda adres url mojego tweeta, na niebiesko podkreśliłem jego numer itd, ale później będzie nam potrzebny cały link:

 

 

Teraz wchodzimy do zakładki iFrame, którą wybieramy z panelu akcji:

 

 

W polu Adres URL w zakładce Ogólne - wklejamy cały link naszego tweeta, jednak poprzedzony on musi być takim hasłem/linkiem: https://twitframe.com/show? (na 1 screenie zaznaczone na niebiesko), a w polu id w zakładce Zaawansowane - wpisujemy następujące hasło: twitter-widget.

 

 

 

Musimy także pamiętać o nadaniu Szerokości i Wysokości naszej ramki (iFrame), ja dla tych pól przydzieliłem wartości, odpowiednio 550 (standardowy tweet ma taką właśnie szerokość i dlatego też ją zalecam) i 580 (wysokość tweeta musimy sobie ustalić ręcznie, żeby uniknąć pustego pola pod interaktywną ramką, naszym iFrame) i otrzymałem coś takiego:

 

 

Jeżeli chcecie, żeby was tweet zajmował mniej miejsca na stronie, możecie podczas jego tworzenia w iFrame zmniejszyć Wysokość i zaznaczyć opcję Włącz pasek przewijania (w kodzie źródłowym ramki, scrolling="no" zmieni nam się na scrolling="yes").

 

 

Ja po zaznaczeniu tej opcji i zmianie Wysokości na 400 otrzymałem taki efekt:

 

 

7. Okno youtube na stronie:

Ramka iFrame może być używana w różnych okolicznościach, nie tylko dla osadzania tweetów na stronie (jak w przykładzie wcześniej, punkcie 6), ale też m in. do prezentowania w swoim blogu filmików z youtube (definicja iFrame z Wikipedii: element języka HTML, umożliwiający zawieranie dokumentu HTML wewnątrz innego dokumentu HTML). Żeby wkleić okno youtube do swojego projektu, najpierw otwieramy filmik, który chcielibyśmy pokazać na stronie i klikamy na przycisk Udostępnij, który znajduje się pod nim:

 

 

Następnie klikamy ikonę, pod którą znajduje się napis Umieść:

 

 

Pokaże nam się kod HTML, który możemy od razu wstawić do Źródła dokumentu naszego bloga (na zdjęciu pod Umieść film):

 

 

Jeżeli zrobimy wszystko zgodnie z instrukcją to otrzymamy taki efekt:

 

 

Możemy też osadzić okienko youtube na blogu innym sposobem, mianowicie kopiujemy sam link (na screenie podkreślony na czerwono), który jest tylko częścią kodu pod Umieść film:

 

 

I wklejamy go do Adres URL po wcześniejszym kliknięciu iFrame z panelu akcji na MFM. Jeżeli nadamy ramce Szerokość 600 i Wysokość 400, to otrzymamy identyczny efekt jak pierwszym sposobem (taka różnica, że nie musimy bawić się w kodzie źródłowym, HTML), ja dla przykładu dam teraz wartości 650x450 i też będzie poprawnie, okienko nam się rozciągnie (nie zalecam zmieniać szerokości dla tweeta z punktu 6, bo nie otrzymamy tego samego efektu, wtyczna yt jest inna):

 

 

Powrót do przeszłości:
Pięć kroków, czyli jak dodać okno You Tube w blogu - tutorial (Mahdi, 09-02-2016)

 

8. Tekst sformatowany:

Jestem niemal pewien, że listy rozwijanej Format użyliście raz, zobaczyliście co na niej jest, po czym ją porzuciliście. Opcje w niej zawarte (Nagłówek 1, Nagłówek 2, Nagłówek 3, Nagłówek 4, Nagłówek 5, Nagłówek 6, Tekst sformatowany, Adres, Normalny (DIV)) umożliwiają gradację tekstu i osobiście sam ich nie używam, z wyjątkiem Tekstu sformatowanego:

 

 

Właśnie wybranie opcji Tekst sformatowany z tej listy rozwijanej da wam efekt, którego nie uzyskacie formatując tekst na własną rękę (czarny tekst w białej, zaokrąglonej ramce, efekt zobaczycie dopiero po Zapisaniu bloga, zmiany nie zobaczycie w podglądzie ani podczas tworzenia/edycji bloga). Sami spójrzcie:

 

Tekst sformatowany

 

Według mnie wygląda on genialnie, kiedy chcemy przykładowo pokazać adres jakiegoś folderu w Windowsie. Na przykładzie adresu gry Football Manager 2021 na Steamie (dodałem jeszcze kursywę):

 

Program Files (x86)\Steam\SteamApps\common\Football Manager 2021

 

Prawda, że niezły efekt? To samo tyczy się listy rozwijanej Style blokowe, jest tam kilka fajnych opcji i nie sugerujcie się ani nie myślcie, że to tylko "jakaś tam czcionka", którą sami uzyskacie, najlepiej sobie posprawdzać na własną rękę.

 

9. Jak przygotować screen do publikacji:

To największa bolączka graczy FM-a, którzy chcieliby się dzielić zdjęciami ze swojego świata gry: wynikami, tabelami, zawodnikami. Kilka lat temu Mahdi napisał poradnik poparty filmikiem, gdzie zobaczycie jak poprawnie naszykować screen do publikacji na Mój Football Manager:

 

Powrót do przeszłości v2:
Nagrane trzy lata temu. lecz wciąż aktualne! Football Manager - jak przygotowywać screeny do publikacji. (Mahdi, 02-07-2018)

 

A tutaj sam filmik z tego poradnika:

 

 


Specjalne podziękowania dla osób, które pomogły przy tworzeniu tego poradnika:

 

Mahdi
Wicemistrz Polski FM 2015, Mistrz Polski FM 2017, FM 2019, FM 2020, FM2021 i FM2022, 3. miejsce w Polsce FM 2018, Typer Sezonu 2020/21 - 2. miejsce, Typer Sezonu 2021/22 - 3. miejsce


Komentarzy: 10665

Grupa: Root Admin

Ranga: Ojciec Założyciel

Ranga sponsorska: Sponsor Główny

Dołączył: 2015-03-20

Poziom ostrzeżeń: 0

 

Wasza profilowa miniatura też może zostać uwieczniona powyżej, czekam po prostu na ciekawe pomysły dotyczące tego, jakie akcje można jeszcze opisać w tutorialu, te potrzebne i te dodatkowe, bo fajnie byłoby jakby poradnik był stale aktualizowany i osobiście chciałbym żeby nie była ten artykuł nie był pracą jednostki, ale zespołową. Pomysły możecie wysyłać w komentarzu pod tutorialem (jak na razie, bo później dam też kontakt fb i twitter) i możecie być pewni, że wasze wyróżnienie nie zaginie w odmętach portalu, gdyż w przeciągu tygodnia, na MFM pojawi się boczny banner z odsyłaczem do tego artykułu (wtedy też dam kontakt fb i twitter).


Autor: kuboll112

KOMENTARZE

Mahdi
Wicemistrz Polski FM 2015, Mistrz Polski FM 2017, FM 2019, FM 2020, FM2021 i FM2022, 3. miejsce w Polsce FM 2018, Typer Sezonu 2020/21 - 2. miejsce, Typer Sezonu 2021/22 - 3. miejsce


Komentarzy: 10665

Grupa: Root Admin

Ranga: Ojciec Założyciel

Ranga sponsorska: Sponsor Główny

Dołączył: 2015-03-20

Poziom ostrzeżeń: 0

04-02-2021, 13:29 , ocenił powyższy materiał: mocne - Lecę budować Ci pomnik

Jeżeli ktoś będzie miał jakieś pytanie lub temat, który warto dodać do poradnika - proszę dodawać komentarze. Pomyślałem, że fajnie by było mieć wsystkie rzeczy o blogowaniu w jednym miejscu; do tej pory były rozrzucone w artykułach gdzieś tam pomiędzy upływającymi latami...

Podziękowania dla kubolla112, który włożył w ten materiał mnóstwo serca i pracy.

ElHarnas


Komentarzy: 423

Grupa: Wirtualny Menedżer

Ranga: Chluba Mój Football Manager

Dołączył: 2018-05-25

Poziom ostrzeżeń: 0

04-02-2021, 14:57 , ocenił powyższy materiał: mocne - Doceniam to, co robisz

Świetna robota. Nie omieszkam skorzystać z niektórych rozwiązań.
Obecnie online: brak użytkowników online
Copyright © 2015-24 by Łukasz Czyżycki