Wikiprojekt:GLAM/layout/

Lista elementów

Button

Przycisk może być używany w każdym miejscu jako wyróżniający się link. Najlepiej używać jako przycisku jako linku do strony gdzie można dowiedzieć się więcej informacji. W przeciwieństwie do zwykłego linku, przycisk jest elementem wyróżniającym się, przez co bardziej zachęca do akcji.

Przykład

Tekst buttonu

{{Wikiprojekt:GLAM/layout/Button|text=Tekst buttonu|target=Test2}}

H2a

Nagłówek do sekcji stylizowany tak by wyraźnie odróżniać się od treści a zarazem wnosić elementy tożsamości wizualnej witryny.

Przykład

Zobacz inne projekty realizowane w ramach GLAM

{{Wikiprojekt:GLAM/layout/H2a|text=Zobacz inne projekty realizowane w ramach GLAM}}

H2b

Nagłówek sekcji stylizowany, z dodatkową mniej wyróżnioną sekcją opisową tak by wyraźnie odróżniać się od treści a zarazem wnosić elementy tożsamości wizualnej witryny. Przy okazji wprowadza miejsce na dodatkowy opis — na przykład na tekst akcji czy zachęty do działania.

Przykład

Poznaj 
Galerię FARAS

{{Wikiprojekt:GLAM/layout/H2b|tekst 1=Poznaj|tekst 2=Galerię FARAS}}

Banner

Banner główny układu strony — element identyfikacji wizualnej zawierający logo jako plik SVG, plik tła z obrazem typu JPG oraz teksty opisowe z nazwą i krótkim opisem projektu.

Przykład

Wikiprojekt:GLAM

Testowy projekt

{{Wikiprojekt:GLAM/layout/Banner
|background=Akademia Platońska 2018 10.jpg
|link=Wikiprojekt:GLAM
|logo=GLAM_Logo_(DACH)_white.svg
|text line 1=Wikiprojekt:GLAM
|text line 2=Testowy projekt
|top=-25
}}

Menu

Menu główne projektu.

Przykład

• Galeria Faras
• projekt
• zdjęcia
• artykuły
• galeria
• zespoły

{{Wikiprojekt:GLAM/layout/Menu
|nazwa menu=Galeria Faras |color=red
|link=Strona główna
|Strona_1=projekt
|Strona_2=zdjęcia
|Strona_3=artykuły
|Strona_4=galeria
|Strona_5=zespoły
}}

MenuLink

Pomocniczy szablon, używany wewnątrz menu. Niezalecane użycie poza nim.

Przykład

Menu link

{{Wikiprojekt:GLAM/layout/MenuLink|target=Strona główna|text=Menu link}}

Box

Box to element składający się z dwóch składników: otwierającego BoxOpen oraz zamykającego BoxClose.

Służy do grupowania elementów tekstowych i graficznych powiązanych ze sobą w zwarty układ. Box może mieć tło zdefiniowanego koloru. W układach wielokolumnowych stanowi podstawowy typ kontenera. Jest stosowany na przykład do ekspozycji sekcji kontakt na stronie głównej.

Przykład

Nagłówek H2a

Donec nibh augue, euismod nec ante vel, porttitor dignissim mi. Nam porttitor cursus sem id rhoncus. Curabitur finibus mauris quis enim malesuada facilisis. Aenean a est metus. Morbi at tristique turpis. Vivamus lobortis condimentum urna, tempus hendrerit neque blandit consequat. Nam ultricies tellus nisi, ut porttitor orci posuere a.

{{Wikiprojekt:GLAM/layout/BoxOpen}}
{{Wikiprojekt:GLAM/layout/H2a|text=Nagłówek H2a}}
Donec nibh augue, euismod nec ante vel, porttitor dignissim mi. Nam porttitor cursus sem id rhoncus. Curabitur finibus mauris quis enim malesuada facilisis. Aenean a est metus. Morbi at tristique turpis. Vivamus lobortis condimentum urna, tempus hendrerit neque blandit consequat. Nam ultricies tellus nisi, ut porttitor orci posuere a.
{{Wikiprojekt:GLAM/layout/BoxClose}}

BoxA

Przykład

Wikipedysta

• Zdobywaj odznaki i kolejne poziomy

---

Instytucja

• Sprawdź jakie profity da współpraca
• Zobacz wcześniejsze realizacje

{{Wikiprojekt:GLAM/layout/BoxA
|section 1 title = Wikipedysta
|section 1 text = * Zdobywaj odznaki i kolejne poziomy
|section 2 title = Instytucja
|section 2 text = * Sprawdź jakie profity da współpraca
* Zobacz wcześniejsze realizacje
}}

BoxB

Przykład

Zbiory

Corem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.

Zobacz więcej

{{Wikiprojekt:GLAM/layout/BoxB
|header=Zbiory
|text=Corem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
|button target=Target
|button text=Zobacz więcej
}}

BoxC

Przykład

Zespół

matematycznych, od rozpowszechniania kolekcji obrazów, filmów i zasobów edukacyjnych Matemateca Instytutu Matematyki i Statystyki Uniwersytetu w São Paulo.

Czytaj więcej

{{Wikiprojekt:GLAM/layout/BoxC
|header=Zespół
|text=matematycznych, od rozpowszechniania kolekcji obrazów, filmów i zasobów edukacyjnych Matemateca Instytutu Matematyki i Statystyki Uniwersytetu w São Paulo.
|button target=Kontakt
|button text=Czytaj więcej
}}

BoxD

Przykład

Cele i efekty projektu

matematycznych, od rozpowszechniania kolekcji obrazów, filmów i zasobów edukacyjnych Matemateca Instytutu Matematyki i Statystyki Uniwersytetu w São Paulo. Te media, już przesłane do Wikimedia Commons na wolnych licencjach, ilustrują hasła takie jak tablica Galtona, kąt spoczynku i postać Chladniego. Wkład występuje w różnych projektach. Są to: Wikipedia, Wikimedia Commons, Wikidata i Wikibooks. Zapraszamy wszystkich do zapoznania się i przyczynienia się do rozpowszechniania treści!

Czytaj więcej

7

artykułów do tej pory

Strony projektu

5

dotychczasowe zdjęcia

Zobacz i wykorzystaj pliki z projektu zgromadzone w Wikimedia Commons

{{Wikiprojekt:GLAM/layout/BoxD
|header=Cele i efekty projektu
|text=matematycznych, od rozpowszechniania kolekcji obrazów, filmów i zasobów edukacyjnych Matemateca Instytutu Matematyki i Statystyki Uniwersytetu w São Paulo. Te media, już przesłane do Wikimedia Commons na wolnych licencjach, ilustrują hasła takie jak tablica Galtona, kąt spoczynku i postać Chladniego. Wkład występuje w różnych projektach. Są to: Wikipedia, Wikimedia Commons, Wikidata i Wikibooks. Zapraszamy wszystkich do zapoznania się i przyczynienia się do rozpowszechniania treści!
|target=Page
|link text=Czytaj więcej
|pages={{PAGESINCAT:GLAM-wiki Centrum Nauki Kopernik}}
|pages text=artykułów do tej pory
|pages link=:Kategoria:GLAM-wiki Centrum Nauki Kopernik
|pages link text=Strony projektu
|images=5
|images text=dotychczasowe zdjęcia
|images link=c:Category:Files contributed by Copernicus Science Centre
|images link text=Zobacz i wykorzystaj pliki z projektu zgromadzone w Wikimedia Commons
}}

ImageBox

Przykład

AGAD Najstarsza zachowana morska mapa nawigacyjna Zatoki Gdańskiej

{{Wikiprojekt:GLAM/layout/ImageBox
|image=AGAD Najstarsza zachowana morska mapa nawigacyjna Zatoki Gdańskiej.jpg
|size=750
|caption=AGAD Najstarsza zachowana morska mapa nawigacyjna Zatoki Gdańskiej
}}

ProminentNumber

Przykład

140

plików w Commons

{{Wikiprojekt:GLAM/layout/ProminentNumber|count=140|text=plików w Commons}}

News

Wpis w aktualnościach

Przykład

Artykuł | 19 września 2017

Jakieś przykładowe wydarzenie w aktualnościach

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper vulputate tempor. Mauris elit nulla, facilisis in elementum sed, pharetra et nisi. Cras at enim tellus. Quisque ornare lectus ac consectetur mattis. Sed vulputate tellus at sollicitudin aliquam. Fusce in neque egestas, suscipit leo eu, dignissim massa. Morbi ac augue orci.

{{Wikiprojekt:GLAM/layout/News
 |image=001_Wild_Golden_Eagle_and_Majinghorn_Pfyn-Finges_Photo_by_Giles_Laurent.jpg
 |date=19 września 2017
 |title=[[Lorem ipsum|Jakieś przykładowe wydarzenie w aktualnościach]]
 |text=Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper vulputate tempor. Mauris elit nulla, facilisis in elementum sed, pharetra et nisi. Cras at enim tellus. Quisque ornare lectus ac consectetur mattis. Sed vulputate tellus at sollicitudin aliquam. Fusce in neque egestas, suscipit leo eu, dignissim massa. Morbi ac augue orci.
 }}

Footer

Stadardowa stopka, wspólna dla wszystkich stron.

Przykład

Śledź nas w mediach społecznościowych:

Śledź globalny biuletyn GLAM:

Kontaktuj się z nami:

{{Wikiprojekt:GLAM/layout/Footer}}

Wikiprojekt:GLAM/layout/Zliczarka zdjęć

Szablon umieszcza się na oddzielnej stronie, która będzie aktualizowana przez ListeriaBota.

Przykładowy kod

{{subst:Wikiprojekt:GLAM/layout/Zliczarka zdjęć}}

Układy

Wikiprojekt:GLAM/layout/Columns2Hero

Przykładowy kod

{{Wikiprojekt:GLAM/layout/Columns2Hero}}
'''Pierwsza kolumna'''
tekst

'''Druga kolumna'''
tekst
{{Wikiprojekt:GLAM/layout/ColumnsClose}}

Wikiprojekt:GLAM/layout/Columns3

Przykładowy kod

{{Wikiprojekt:GLAM/layout/Columns3}}
{{Wikiprojekt:GLAM/layout/ColumnsClose}}

Wikiprojekt:GLAM/layout/ColumnsClose

Element zamykający do wszystkich pozostałych elementów typu Column.

Przykładowy kod

{{Wikiprojekt:GLAM/layout/ColumnsClose}}

Wikiprojekt:GLAM/layout/Grid

Rozpoczyna układ typu siatka, w którym liczba kolumn automatycznie dostosowuje się do ilości dostępnego miejsca

Przykładowy kod

{{Wikiprojekt:GLAM/layout/Grid}}
{{Wikiprojekt:GLAM/layout/GridClose}}

Wikiprojekt:GLAM/layout/GridClose

Element zamykający do elementu Grid.

Przykładowy kod

{{Wikiprojekt:GLAM/layout/GridClose}}

Motyw projektu

Definiowanie motywu

Motyw kolorystyczny definiuje się w pliku CSS. Przykład takiego pliku przedstawiono poniżej.

.glam-accent-background {background: #8e6e45; color: #fff;}
.glam-accent-color {color: #8e6e45;}
.glam-accent-border {border-color: #8e6e45;}

Przykład ten składa się z trzech reguł, po jednej w każdej linii:

1. Elementy wypełnione kolorem motywu: należy wskazać kolor tła (w przykładzie jest to #8e6e45) oraz kolor tekstu (w przykładzie #fff).
2. Elementy, gdzie czcionka jest w kolorze motywu: należy wskazać kolor czcionki (w przykładzie #8e6e45).
3. Elementy, które mają obramowanie w kolorze motywu: należy wskazać kolor obramowania (w przykładzie #8e6e45).

Podanie powyższych reguł jest opcjonalne. Ich pominięcie spowoduje, że odpowiednie elementy będą korzystały z domyślnego koloru zamiast koloru motywu (czyli z ciemnoszarego).

Definiując kolory, należy pamiętać o odpowiednim kontraście między kolorem tła a kolorem tekstu. Oznacza to, że czasem korzystne będzie użycie nieco innych kolorów dla tła boksów i dla czcionki w kolorze motywu.

Model zawartości

Aby stronę dało się dołączyć jako arkusz stylów, musi mieć model zawartości „Oczyszczony CSS”. Próba dołączenia stron innego typu poskutkuje komunikatem o błędzie w miejscu szablonu Styles. Model zawartości to właściwość, która mówi oprogramowaniu MediaWiki, w jaki sposób należy daną stronę interpretować. Aktualny model można sprawdzić, klikając „Informacje o tej stronie” w panelu narzędziowym.

Nadanie tytułu, który kończy się na .css nie zawsze będzie wystarczające. Poniżej podano dwie metody, które pozwolą uzyskać stronę o odpowiednim modelu zawartości.

Metoda 1. (bez pomocy administratora)

1. Utwórz stronę w przestrzeni Szablon:. Jej nazwa musi się kończyć rozszerzeniem .css, np. Szablon:GLAM/Faras/theme.css. Utworzy się strona o poprawnym modelu zawartości.
2. Wypełnij stronę treścią, jak podano wyżej.
3. Przenieś stronę w miejsce docelowe, np. Wikiprojekt:GLAM/Faras/theme.css (skorzystaj z opcji „Przenieś” w menu narzędziowym). Model zawartości nie ulegnie zmianie.

Metoda 2. (wymaga pomocy administratora)

1. Utwórz stronę pod docelową nazwą.
2. Wypełnij stronę treścią, jak podano wyżej.
3. Poproś administratora interfejsu lub administratora o zmianę modelu zawartości tej strony na „Oczyszczony CSS”.

Przydatne linki

• Kalkulator kontrastu kolorów – Zgodnie z wytycznymi WCAG kontrast między tekstem a tłem powinien wynosić przynajmniej 4,5:1. Dla dużej czcionki (>18 punktów lub >14 punktów dla pogrubionego tekstu) wystarczy 3:1.
• Narzędzie do określania odcieni koloru – Generuje listę ciemniejszych i jaśniejszych odcieni podanego koloru. Może być przydatne, aby wybrać odpowiednio jasny lub ciemny kolor pasujący np. do zdjęcia lub logotypu.

Szablon Styles

Szablon służy do osadzenia na stronie arkusza stylów, który definiuje wygląd wszystkich powyższych komponentów. Ponadto, istnieje możliwość wskazania dodatkowego arkusza, odpowiadającego za określenie motywu kolorystycznego.

Przykład

{{Wikiprojekt:GLAM/layout/Styles|theme=Wikiprojekt:GLAM/Faras/theme.css}}

Szablon nie ma widocznego efektu w miejscu jego umieszczenia, jedynie oddziałuje na wygląd innych komponentów. Szablon można wstawić w dowolnym miejscu strony, choć zaleca się umieszczenie go na początku.

Wykorzystywane klasy CSS

Wszystkie komponenty są stylizowane z wykorzystaniem klas CSS, do których odnoszą się deklaracje w głównym arkuszu stylów. Zawarty jest tam również podstawowy motyw kolorystyczny, wykorzystujący kolor ciemnoszary. Dostępne są cztery klasy motywu:

• glam-accent-background – stosowana do wszystkich elementów z tłem w kolorze motywu. Powinna deklarować kolor tła (background) oraz kolor czcionki (color), co jest szczególnie istotne dla ciemnych kolorów wiodących.
• glam-accent-color – wykorzystywana dla elementów z tekstem w kolorze motywu. Powinna deklarować kolor czcionki (color).
• glam-accent-border – używana w przypadku elementów posiadających obramowanie w kolorze motywu. Powinna deklarować kolor ramki (border-color).
• glam-box-background – dodatkowa klasa, określająca kolor tła szablonów Box. Domyślnie jest to jasnoszary, nie musi być określany przez motyw, jeśli nie ma takiej potrzeby.

ToDo

• Parametry
• Dokumentacja
  • Dokumentacja dla Columns2Hero i Columns3
• Przykłady
• Przenieść do: https://pl.wikipedia.org/wiki/Wikiprojekt:GLAM/layout/
• Sprawdzić czy Bot uaktualnia liczbę plików: https://listeria.toolforge.org/. https://listeria.toolforge.org/botstatus.php#id_6plwiki
  • uaktualnia tylko jednorazowo (już działa poprawnie)
• Przenieść elementy wizualne do stylu dla layoutu
• Przygotować TemplateData

Zasoby

• wzorcowe style z projektu Wiki Loves Living Heritage
• Szablon z projektu Wiki Loves Living Heritage
• Inny przycisk
• Moduły i szablony MediaWiki
• help pl