Obecnie jedynym słusznym rozwiązaniem jest wdrożenie strony responsywnej. Strona responsywna to po prostu responsywny szablon.
|
|
- Stanisław Pietrzak
- 6 lat temu
- Przeglądów:
Transkrypt
1 Strony responsywne są nowością jeżeli chodzi o strony przeznaczone dla urządzeń mobilnych. Tworzenie stron określonych mianem responsywnych daje nam bardzo dużą elastyczność i wiele możliwości. Strony responsywne same dostosowują się do rozdzielczości urządzenia, na którym są przeglądane, niezależnie czy jest to PC, urządzenie mobilne czy telewizor. Strony przystosowane do telefonów Od czasu pojawienia się systemu Android oraz telefonów komórkowych, użytkownicy mobilni stanowią bardzo duży procent odwiedzających. Napisanie strony, która nie jest przystosowania do telefonów jest w dzisiejszych czasach nieodpowiedzialne. Ryzykując w ten sposób musimy liczyć się z faktem stracenia dużej liczby potencjalnych odbiorców i klientów. Nie będę się rozpisywał za wiele na temat stron mobilnych, ponieważ napisałem już o tym artykuł mobilna wersja strony na telefon. W poprzednim artykule omawiam rozwiązanie, polegające na tworzeniu stron mobilnych w tradycyjny sposób. Zwykle polegało to na przygotowaniu drugiej wersji serwisu, i podmienianiu w zależności od wykrytego systemu. Czasem podmieniany był cały szablon a w innych wypadkach przekierowanie na inną domenę serwisu. Czym jest strona responsywna? Obecnie jedynym słusznym rozwiązaniem jest wdrożenie strony responsywnej. Strona responsywna to po prostu responsywny szablon. Strona responsywna lub ang. responsible web design (RWD) to strona, która dopasowuje swoją szerokość i układ elementów do rozdzielczości na jakiej jest wyświetlana. Bardzo dobrze współpracują z flat design aczkolwiek nie jest zasadą ich łączenie. Strony responsywne narodziły się od wersji CSS3 (arkusza stylów w wersji 3) ponieważ mocno rozbudowano możliwości Media Queries. Został on wtedy poszerzone o nowe możliwości min-width oraz max-width, dzięki którym możliwe jest rozpoznawanie rozdzielczości okna użytkownika. W zależności od wykrytych rozdzielczości, wczytujemy różne arkusze stylów, które tę samą strukturę HTML wyświetlają w całkiem inny sposób. Niektóre elementy są przesuwane, niektóre (te mniej ważne) całkowicie znikają. Jak wspomniałem, koncepcja stron responsywnych oraz flat design narodziły się prawie równocześnie i są często łączone. Flat design koncepcja projektowania szablonów stron, której głównym założeniem jest Karol Trybulec p-programowanie.pl 1
2 prostota. Elementy strony są kwadratowe lub prostokątne, nie występują Cienie ani dodatkowe ozdoby. Strona jest uproszczona do maksimum, co przekłada się na większą czytelność i przejrzystość szablonu. Najważniejsze zalety stron responsywnych to: brak konieczności aktualizacji treści w dwóch różnych miejscach (istnieje tylko jedna wersja serwisu) brak zamieszania z przekierowaniem domen, przełączaniem szablonów oraz detekcją urządzeń nie trzeba się martwić o duplicate-content jest to sposób oficjalnie rekomendowany przez Google dostosowuje się nie tylko do różnych urządzeń, ale także do różnych rozdzielczości ekranu (jest najbardziej elastycznym rozwiązaniem) Jeżeli składasz zamówienie na stronę to strona responsywna będzie kosztować Cię więcej. Jeżeli wykonasz ją sam, wszystko będziesz miał za darmo. O stronach responsywnych można przeczytać wiele innych informacji koniec lania wody. Tworzenie strony responsywnej Niezależnie czy chcesz zrobić stronę responsywną od początku, czy chcesz przerobić stary szablon na szablon responsywny, musisz wiedzieć o kilku najważniejszych rzeczach. Pierwszym krokiem zawsze jest dodanie odpowiednich meta-tagów. Zapewniają one poprawne wyświetlanie strony na urządzaniach mobilnych, m.in. zapobiegają skalowaniu. 1 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Meta-tag viewport zapewnia poprawne dostosowanie szerokości oraz brak powiększenia. Jeżeli zapomnisz go umieścić, strona będzie prezentować się źle. Kolejnym najważniejszym krokiem jest zaplanowanie kompozycji szablonu. Musisz zdecydować jakie elementy mają być wyświetlane na pełnej rozdzielczości, a jakie na telefonie. W standardowej konfiguracji, na pełnej rozdzielczości wyświetlana jest część główna strony oraz boczne menu, co daje razem dwie kolumny. Oczywiście niektóre strony mogą wcale nie mieć menu, lub mieć aż 2 boczne kolumny + środkowa będąca treścią strony. Musisz mieć świadomość, że każda strona dopasowana do urządzań mobilnych musi być zbudowana na jednej kolumnie. Jedna kolumna jest jedynym rozwiązaniem, jakie zapewnia nam poprawne skalowanie. Kiedy szablon ma jedną kolumnę, ustawiamy jego Karol Trybulec p-programowanie.pl 2
3 szerokość na width:100%, dzięki temu szerokość kolumny dopasuje się do ekranu niezależnie od jego wielkości. Takiej samej zasady trzymam się na tym blogu. Wdrożyłem proste rozwiązanie szablonu responsywnego. W pełnej okazałości strona posiada 2 kolumny, po zmianie wielkości okna cała prawa kolumna menu znika. Wiąże się to oczywiście z ukryciem niektórych informacji ale nie ma innego wyjścia. Musisz przemyśleć, jakie informacje zostaną ukryte dla użytkowników urządzeń mobilnych. Ja telefonom wyświetlam tylko logo + menu + treść strony. Znika ankieta, wtyczka facebooka, linki oraz informacje o autorze. Niestety na ekranie nie zmieścimy tyle co na Gdybym się uparł, mógłbym zmieścić jeszcze jeden moduł w układzie jednej kolumny, nad menu lub pod menu, jednak nie są to informacje niezbędne więc nic nie stoi na przeszkodzie aby je ukryć. Jeżeli zastanowisz się nad kompozycją, czas wziąć się za arkusz stylów /*najwieksza rozdzielczosc only screen and (max-width: 1000px) { #prawe_menu { display: block; } } /*średni telefon lub only screen and (max-width: 680px) { #prawe_menu { display: none; } } Jak widzisz są tu tylko dwie reguły Media queries. To ile ich dodasz zależy od Twojego serwisu. Umieszczenie tego kodu w arkuszu stylów powoduje, że dla urządzeń z szerokością ekranu w granicach 1-680px prawe menu znika, natomiast dla urządzeń z rozdzielczością większą niż 680px menu się pojawia. Osobiście na blogu stosuję 3 takie reguły i więcej mi nie potrzeba, używam flat design więc blog posiada mało elementów. Rozbudowane serwisy posiadają po 5-7 reguł, które znacząco zmieniają wygląd strony nawet przy nieznacznych zmianach rozdzielczości. Istnieje ważna zasada podczas planowania kompozycji. Możesz a nawet musisz ukrywać odpowiednie elementy na mniejszych rozdzielczościach używając display: none. Nie wolno natomiast utworzyć dwóch osobnych menu, jednego dla telefonów drugiego dla komputerów. Nie można pokazywać ich i ukrywać w zależności od wykrytej rozdzielczości. Jest to powielanie treści, przez co strona może być nieciekawa dla wyszukiwarki, a w ekstremalnym wypadku grozi banem duplicate-content. Na stronie muszą znajdować się pojedyncze elementy, a ich położeniem sterujemy za pomocą arkusza stylów. Karol Trybulec p-programowanie.pl 3
4 Responsywne menu Budowa responsywnego menu nie należy do najłatwiejszych i wymaga dużo pracy. Menu responsywne charakteryzuje się tym, że zawsze jest poziome i rozwija się dopiero po kliknięciu. Należy wykonać je w CSS oraz JQuery. Ja skorzystałem z gotowej wtyczki o nazwie SlickNav, zamienia ona moje poziome menu na responsywne menu. Ja podaję tylko nazwę dla kontenera wyjściowego #menu2, do którego zostanie przekonwertowane menu główne. Efekt jest następujący: Nie musisz używać systemu WordPress aby użyć skryptu SlickNav. SlickNav jest profesjonalnym i dobrze wykonanym narzędziem. Korzystają z niego strony osób prywatnych jak i firm. Skrypt ten jest na tyle popularny, że bardzo często spotykamy go w płatnych szablonach. Dodatkową zaletą jest to, że SlickNav jest całkowicie darmowy także na stronach komercyjnych. Przerobienie menu na menu responsywne to dwie linijki kodu. Jedynym warunkiem do użycia tego skryptu jest posiadanie menu zbudowanego w hierarchii ul li. Obrazki Ważnym aspektem, na który należy zwrócić szczególną uwagę są obrazki. W szablonie Karol Trybulec p-programowanie.pl 4
5 responsywnym obrazki muszą się automatycznie skalować wraz z szerokością strony. Aby osiągnąć taki efekt, można dodać do arkusza stylów takie globalne ustawienie dla obrazków: 1 img{ 2 max-width: 100%; 3 height:auto; 4 width:auto; 5 } Oczywiście reguła sprawdzi się tylko dla obrazków będących statyczną częścią treści strony np. zdjęć w artykule strony. Elementy graficzne szablonu Jeżeli korzystasz z koncepcji flat-design a więc uproszczenia strony do minimum budowa szablonu nie będzie skomplikowana. Tak jak w przypadku obrazków, szerokość elementów graficznych (np. logo lub tytuł menu) powinna być podana w wartościach procentowych. Jeżeli nie jest możliwe ustalenie wartości procentowych, należy ustawić wartości procentowe dla pojemnika będącego rodzicem, a następnie podmieniać element graficzny (np. logo) na mniejsze gdy braknie na nie miejsca w zależności od wykrytej rozdzielczości. Tworząc szablon responsywny możemy ustalać wysokość elementów graficznych stosując bezwzględną jednostkę px. Wynika to z faktu, że strona zbudowana na jednej kolumnie, musi dostosować się do urządzenia poziomo, pionowo nigdy miejsca nam nie braknie. Strony ze skomplikowaną szatą graficzną Jeżeli jesteś właścicielem jakiejś firmy, ze skomplikowanym motywem graficznym (np. restauracje), niezbędna podczas przeróbki będzie pomoc grafika, który wykonywał szablon strony. W takim wypadku przeważnie dla większości elementów graficznych nie można ustalić szerokości procentowej, ponieważ w przypadku zmiany rozmiaru okna grafika będzie niewyraźna (skalowanie). Niestety, w takim konkretnym przypadku, wszystkie elementy graficzne trzeba ukrywać i zastąpywać mniejszymi odpowiednikami. Rozmiary elementów i czcionek W szablonie responsywnym powinniśmy używać jednostek procentowych. Priorytetem jest Karol Trybulec p-programowanie.pl 5
6 nadanie procentowej szerokości, aby mogła się zmieniać wraz ze zmianą rozdzielczości. Nie powinniśmy ustalać sztywnych rozmiarów wszelkich obrazków, one także powinny skalować się razem z szablonem. Wartości stałe powinniśmy natomiast nadawać czcionkom, trudno przewidzieć jak będzie wyglądać czcionka, której rozmiar zależny jest od innych elementów. Ja na blogu stosuję rozmiar 15-16px i jest to jednostka stała. Czcionki dla komputerów PC są średnio o 1-2px większe niż czcionki dla urządzeń mobilnych. Testowanie strony responsywnej Bardzo dobry dodatek do testowania naszego szablonu udostępnia najnowsza wersja przeglądarki Firefox. Pozwala ona z opcji włączyć Narzędzia dla twórców witryn > Widok responsywny. Dzięki temu możemy podglądać stronę w różnych zestawieniach rozdzielczości: Prosty szablon responsywny Nie przeczę, że zbudowanie zaawansowanej strony w sposób responsywny może być trudne i czasochłonne. Jednak prosty szablon na potrzeby bloga, każdy da radę zrobić samodzielnie. Przykładem jestem ja ponieważ dałem radę najpierw napisać dla siebie szablon w koncepcji flat design, a po kilku miesiącach przerobić go na szablon responsywny. Pokażę Ci jak Karol Trybulec p-programowanie.pl 6
7 łatwo stworzyć prosty responsywny szablon. Na potrzeby artykułu stworzyłem mało skomplikowany szkielet szablonu. Jego kod HTML jest następujący: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>szablon responsywny!</title> </head> <body> <div id="header"> <div id="logo"><h1>logo strony</h1></div> </div> <div id="wrapper"> <div id="content">lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est.<br><br> Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.</div> <div id="menu"> <h5>menu główne</h5> <ul> <li><a href="#">strona główna</a></li> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> </div> </div> </body> </html> Posiada też kod CSS: Karol Trybulec p-programowanie.pl 7
8 /* ogólne */ * {margin:0px; padding: 0px;} body { font: 16px Verdana; line-height:1.6; background: #EDE6DE; } #wrapper { width:90%; overflow:hidden; margin: auto; } a {color: #354458;} /* logo */ #header { height:100px; background: #354458; margin: 10px ; } #header h1 {padding: 20px; color: #E9E0D6;} /* tresc */ #content { width:75%; background: #EB7260; float:left; padding:1%; overflow:hidden; } /* menu */ #menu { background: #548BC2; width:20%; float:right; padding:1%; overflow:hidden; } #menu h5 {padding:3px 3px 15px 3px; font-size:14px;} #menu ul li {list-style-type:none; padding: 10px;} Szablon na na wszystkich rozdzielczościach wygląda tak samo. Jedyną jego zaletą jest szerokość wyrażona w procentach, więc dostosowuje się do szerokości okna przeglądarki. Oto efekt: Nie ma co analizować kodu ponieważ jest to podstawowy szkielet szablonu, najprostszy jaki mógł powstać. W kodzie HTML #content znajduje się wcześniej niż #menu. Z jednej strony jest to lepsze rozwiązanie ze względu na SEO, z drugiej gorsze jeżeli będziemy brać pod uwagę np. osoby niepełnosprawne. Chceby aby szablon był responsywny i aby prawe menu przesuwało się na górę i zamieniało w menu poziome. W tym celu musimy dodać do arkusza stylów znacznik media queries zmieniający kod CSS poniżej określonej rozdzielczości. Ja użyję rozdzielczości Karol Trybulec p-programowanie.pl 8
9 progowej 900px. Aby menu przeskoczyło na górę, trzeba nadać mu atrybut position: absolute. To przez to, że w kodzie HTML menu jest w kodzie jako drugie. Skoro będzie to menu poziome, należy ustawić jego szerokość na width: 100%. Należy także zwiększyć szerokość treści strony, ponieważ obecnie zajmuje ona tylko 75%. Po przeskoczeniu menu powinna zajmować width: 98%. Aby linki w menu układały się poziomo wystarczy zmienić im atrybut display i ustawić go na inline. To już wszystko. Ostatnim zabiegiem kosmetycznym jest ukrycie napisu Menu główne oraz dodanie poziomych kresek po każdym elemencie menu. Cały opisany kod wygląda następująco: only screen and (max-width: 900px) { 2 #menu {width:88%; position:absolute; height:30px;} 3 #menu h5 {display: none;} 4 #menu ul li {display: inline; } 5 #menu ul li:after {content: " ";} 6 #content {width: 98%;position:relative; top: 30px;margin-top:5%;} 7 } Dodaję go na końcu arkusza stylów, szablonu zaprezentowanego wyżej. Oto efekt podczas zmiany wielkości okna: Karol Trybulec p-programowanie.pl 9
10 Mimo, że dodałem tylko jeden element media queries zmieniający orientację menu, szablon będzie poprawnie wyświetlany na wszystkich urządzeniach mobilnych oraz na wszystkich rozdzielczościach. W kodzie CSS brakuje skalowania obrazków, jednak te nie zostały użyte w przykładzie. Myślę, że tworzenie stron w sposób responsywny to nie dodatkowa umiejętność i nowa technologia dla bogatych, tylko standard, którego trzeba się trzymać podczas Karol Trybulec p-programowanie.pl 10
11 projektowania strony lub bloga. Jak widzisz, prosty zabieg dopasowania strony do rozdzielczości, wymaga tylko kilku dodatkowych linijek. Przykład szablonu zaprezentowanego w artykule możesz zobaczyć klikając w link Karol Trybulec p-programowanie.pl 11
System Identyfikacji Wizualnej
System Identyfikacji Wizualnej Hurtownie Elektryczne KOPEL Sp. z o. o. SPIS TREŚCI Logotyp Wersja podstawowa i dopuszczalne 6 Wersje kolorystyczne 7 Tabela kolorów 8 Pole ochronne 9 Kolorystyka tła 10
Bardziej szczegółowoKREATOR NIESAMOISTNA CZĘŚĆ WYDAWNICTWA
KREATOR NIESAMOISTNA CZĘŚĆ WYDAWNICTWA 008 przy konwersji generowany automatycznie Pozycja 6 (typ daty) wartość S (w 99% przypadków) Pozycja 7-10 DATA1 np 2014 Pozycja 11-14 ### Pozycja 15-17 (m. wydania
Bardziej szczegółowoSYSTEM IDENTYFIKACJI WIZUALNEJ
SYSTEM IDENTYFIKACJI WIZUALNEJ 1 Ogólnopolski Festiwal Miłośników Fantastyki POLCON 2017 odbywa się w tym roku pod hasłem Tchnienie Wschodu. To zwrócenie uwagi na wschód, Lublin jako najsilniejszy ośrodek
Bardziej szczegółowoWZORNIK TABLIC TURYSTYCZNYCH NA OBSZARZE LGD TRZY KRAJOBRAZY
WZORNIK TABLIC TURYSTYCZNYCH NA OBSZARZE LGD TRZY KRAJOBRAZY na rzecz Rozwoju Obszarów Wiejskich Niniejszy dokument określa standardy projektowania informacyjnych tablic turystycznych na obszarze Lokalnej
Bardziej szczegółowoKsięga znaku. Copyright MARR S.A. - Małopolska Agencja Rozwoju Regionalnego S.A. All rights reserved
Księga znaku Spis treści 1. Logotyp 1.1 Konstrukcja znaku 1.2 Pole ochronne znaku 1.3 Minimalne wielkości 1.4 Kontra 1.5 Opcjonalne wersje 1.6 Niedozwolone modyfikacje 2. Kolory 1.1 Logotyp - konstrukcja
Bardziej szczegółowoResponsywne strony WWW
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach: Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px;
Bardziej szczegółowoPrzykładowy plik pdf do testowania załączników
Przykładowy plik pdf do testowania załączników Anonim 1 Pierwsza Lorem ipsum dolor sit amet consectetuer pede et in natoque ut. Consectetuer commodo vitae consectetuer volutpat Vivamus ut elit sit nulla
Bardziej szczegółowoEkran startowy mapa z punktami. premium
Ekran startowy mapa z punktami 3D 3D premium QR Widok 3D z fu k ją awiga ji #14 2D #13 #11 QR #12 Widok 3D z fu k ją awiga ji (bez firm) #14 2D #13 #11 QR #12 Skaner kodów QR Chmurka z opisem wybranego
Bardziej szczegółowoProjekt: SYSTEM INFORMACJI DLA DZIELNICY WISŁA. System Informacji dla Dzielnicy Wisła
Projekt: SYSTEM INFORMACJI DLA DZIELNICY WISŁA Koncepcja graficzna informacji kierunkowej, miejscowej i planów oraz wzorniczy projekt nośników systemu informacji. Zleceniodawca: Zarząd Mienia m. st. Warszawy
Bardziej szczegółowobyś cieszył się zielenią
motyw Obrazem przewodnim jest napis / nazwa wraz z zielonym elementem ściętej trawy o grubości Wersja podstawowa elementów kroju pisma. Dopuszczalne, w przypadku bardzo małych rozmiarów bądź niemożności
Bardziej szczegółowo4. Materiały reklamowe
4. 4.1 Zasady konstrukcji layoutów - grid Nadrzędną, główna zasadą konstruowania przestrzeni poszczególnych projektów graficznych jest modułowy podział parzysty formatu. Wysokość i szerokość medium dzielona
Bardziej szczegółowoMETROPOLITALNE FORUM WÓJTÓW, BURMISTRZÓW, PREZYDENTÓW I STAROSTÓW
1. Geneza znaku przeniesienie treści na obraz + + OBSZAR/ TEREN CZĘŚĆ WSPÓLNA / NAKŁADANIE SIĘ WSPÓLNYCH INTERESÓW ENERGIA / RUCH PRZEZ WZAJEMNE WSPIERANIE 2. Opis budowy i proporcji znaku (wraz z siatką
Bardziej szczegółowoPOKAZUJEMY UCZYMY ZASPAKAJAMY POTRZEBĘ POZNANIA
EKSPOZYCJA: Bezkresne bogactwo oceanów reprezentowane w logo przez największe ssaki morskie: Długopłetwiec (Megaptera novaeangliae), zwany też humbakiem. POKAZUJEMY UCZYMY ZASPAKAJAMY POTRZEBĘ POZNANIA
Bardziej szczegółowoZałącznik do Uchwały VI/46/13 Senatu PWSZ w Pile z dnia 17.01.2013 r. SYSTEM IDENTYFIKACJI WIZUALNEJ
Załącznik do Uchwały VI/46/13 Senatu PWSZ w Pile z dnia 17.01.2013 r. SYSTEM IDENTYFIKACJI WIZUALNEJ WPROWADZENIE System Identyfikacji Wizualnej (SIW) jest zestawem znaków, dozwolonych wzorców i reguł
Bardziej szczegółowoZałącznik do Uchwały XIII/76/17 Senatu PWSZ w Pile z dnia r. SYSTEM IDENTYFIKACJI WIZUALNEJ
Załącznik do Uchwały XIII/76/17 Senatu PWSZ w Pile z dnia 28.09.2017 r. SYSTEM IDENTYFIKACJI WIZUALNEJ WPROWADZENIE System Identyfikacji Wizualnej (SIW) jest zestawem znaków, dozwolonych wzorców i reguł
Bardziej szczegółowoZasady przygotowania referatu, artykułu, publikacji
Zasady przygotowania referatu, artykułu, publikacji Objętość referatu Objętość 16-20 stron + bibliografia + streszczenie; Układ strony Rozmiar:A4 Orientacja: Pionowa Marginesy: lewy 3 cm, pozostałe 1,5
Bardziej szczegółowoPorównanie efektywności algorytmu ewolucyjnego z metodą podziału i ograniczeń dla problemu komiwojażera
Porównanie efektywności algorytmu ewolucyjnego z metodą podziału i ograniczeń dla problemu komiwojażera Teodor Niżyński 14 listopada 2016 1 Wstęp teoretyczny Lorem ipsum dolor sit amet, consectetur adipiscing
Bardziej szczegółowoStudia Podyplomowe Grafika Komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.
Ćwiczenia Responsive Web Design Praca własna dr inż. Robert Banasiak Wprowadzenie Coraz więcej użytkowników korzysta z Internetu w urządzeniach mobilnych w celu przeglądania stron internetowych. Warto
Bardziej szczegółowoIdentyfikacja wizualna WĘGLOKOKS S.A.
Identyfikacja wizualna WĘGLOKOKS S.A. 1 Identyfikacja wizualna WĘGLOKOKS S.A. Czerwiec 2013 r. (wersja 02-2013) Identyfikacja wizualna WĘGLOKOKS S.A. 3 1. Logo 3 1.1. Logo wersja pozioma 1.2. Logo wersja
Bardziej szczegółowoKsięga znaku Swiss Contribution
Zasady stosowania znaku 2. Wersja podstawowa znaku 3. Forma i budowa znaku 4. Kolory dla znaku kolorowego i monochromatycznego 5. Liternictwo w znaku 6. Pole ochronne znaku 7. Swiss Contribution w ciągu
Bardziej szczegółowo2nośniki identyfikacji
2nośniki identyfikacji 2 s p i s t r e ś c i nośniki identyfikacji 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 typografia w materiałach Jubileuszowych wizytówka papier podstawowy / wersja polska papier podstawowy
Bardziej szczegółowoBRAND BOOK. Ośrodek Rehabilitacji Jeży Jerzy dla Jeży w Kłodzku
BRAND BOOK Ośrodek Rehabilitacji Jeży Jerzy dla Jeży w Kłodzku IDEA: Konstrukcja logo fundacji Jerzy dla Jeży jest zamierzona w taki sposób, aby łatwo kojarzyła się odbiorcy z przedmiotem działalności,
Bardziej szczegółowoIDENTYFIKACJA WIZUALNA
LOGOTYP POLE OCHRONNE KOLORY PODSTAWOWE I UZUPE NIAJ CE 2 RGB PANTONE CMYK RGB PANTONE CMYK R 02, G 03, B 05 PANTONE 425 C C 0, M 0, Y 0, K 74 R 9, G 208, B 65 PANTONE 382 C C 34, M 0, Y 85, K 0 0/0/0/74
Bardziej szczegółowoSystem identyfikacji wizualnej
System identyfikacji wizualnej System identyfikacji wizualnej Jelenia Góra 2012 Opracowanie: BOOSTER. s.c. 58-500 Jelenia Góra ul. Mickiewicza 13/1 office@booster.pl www.booster.pl Spis treści 1. Logotyp
Bardziej szczegółowoKSIĘGA IDENTYFIKACJI WIZUALNEJ NFOŚiGW. Cz. 3 PODRĘCZNIK STOSOWANIA OZNACZEŃ Z UŻYCIEM LOGOTYPU NFOŚIGW DLA PODMIOTÓW ZEWNĘTRZNYCH
KSIĘGA IDENTYFIKACJI WIZUALNEJ NFOŚiGW Cz. 3 PODRĘCZNIK STOSOWANIA OZNACZEŃ Z UŻYCIEM LOGOTYPU NFOŚIGW DLA PODMIOTÓW ZEWNĘTRZNYCH 2015 Spis treści. Cz. 3 A Cz. 3 B Artykuł sponsorowany w prasie. Siatka
Bardziej szczegółowoSystem identyfikacji wizualnej
Wersja - 01 25.07.2018r. System identyfikacji wizualnej Spis Treści KSIĘGA ZNAKU STANDARYZACJA MATERIAŁÓW FIRMOWYCH 1.0 Standaryzacja znaku 4.0 Materiały firmowe 1.1 Charakterystyka 4.1 Wizytówki 1.2 Symbolika
Bardziej szczegółowostruktura i funkcja białka seminarium M.Eng. Michal Adam Michalowski
struktura i funkcja białka seminarium M.Eng. Michal Adam Michalowski michal.michalowski@uwr.edu.pl michaladamichalowski@gmail.com michal.michalowski@uwr.edu.pl https://mmichalowskiuwr.wordpress.com/ Sienkiewicza
Bardziej szczegółowoBUDOWA LOGO. logo. sygnet. logotyp. PE NE LOGO - sk³ada siê z dwóch elementów ustawionych poziomo wzglêdem siebie (sygnet, logotyp).
Ksiêga znaku BUDOWA LOGO PE NE LOGO - sk³ada siê z dwóch elementów ustawionych poziomo wzglêdem siebie (sygnet, logotyp). logo sygnet logotyp Strona 2 BUDOWA LOGO C.D. Centurion Old Odstêp miêdzy znakami
Bardziej szczegółowoAkademia Ignatianum w Krakowie
Akademia Ignatianum w Krakowie Wydział Filozoficzny Instytut Filozofii Imię Nazwisko Pełny tytuł pracy Praca licencjacka Promotor pracy: prof. dr. hab. Jan Nowak Oświadczam, że ta praca licencjacka została
Bardziej szczegółowoWYMOGI REDAKCYJNE PUBLIKACJI
WYMOGI REDAKCYJNE PUBLIKACJI Objętość artykułu min 20 tys. znaków tekstu głównego max 15 stron (wraz z bibliografią i streszczeniami) cały plik Układ strony Rozmiar:B5 Orientacja: Pionowa Marginesy: lewy
Bardziej szczegółowoALFABETYCZNY SPIS MAREK WĘDKARSKICH
KATALOG HANDLOWY 0/0 ALFABETYCZNY SPIS MAREK WĘDKARSKICH Marka Dystrybutor Strona Marka Dystrybutor Strona KATALOG HANDLOWY 0/0 Ulica zmyślona Tel. + Y, marka Z, marka X, marka Y, marka Z, marka Ulica
Bardziej szczegółowoRysunki i tabele. Spis tre±ci. 1 Zadania na wykorzystanie pakietu sidecap. Bo»ena Wo¹na Szcze±niak. 22 listopada 2014
Rysunki i tabele Bo»ena Wo¹na Szcze±niak 22 listopada 2014 Wybierz dowolny rysunek i tabele. Nast pnie napisz kod w LATEX, który wygeneruje tego pdf-a zgodnie z wyja±nieniami znajduj cymi si w spisie tre±ci.
Bardziej szczegółowoKsięga znaku. Uniwersytet Medyczny w Łodzi
Księga znaku Uniwersytet Medyczny w Łodzi 2009 Spis Treści 1 Spis treści micza 2 Koperty 4 Wizytówka 6 Papier firmowy 11 Elementy kompozycji 12 Konstrukcja projektu 13 Pozycja logo 14 Pozycja logo jednostki
Bardziej szczegółowoINFORMATOR WYDAWNICZY
INFORMATOR WYDAWNICZY 2016 Charakterystyka pisma O nas Działy tematyczne Magazyn Utrzymanie Ruchu & Diagnostyka jest obecny na rynku od 2011 roku i plasuje się w czołówce pism branżowych. Staramy się przekazać
Bardziej szczegółowoKSIĘGA ZNAKU CBSS POLISH PRESIDENCY 2015-2016
CBSS POLISH PRESIDENC CBSS POLISH PRESIDENC SPIS TREŚCI LOGO OPIS STOSOWANIE ZNAKU JAKO MOTWU GRAFICZNEGO WERSJE LOGO KONSTRUKCJA LOGO WERSJA ANGIELSKA KONSTRUKCJA LOGO WERSJA POLSKA POLE OCHRONNE WERSJA
Bardziej szczegółowoZostań jego bohaterem. Co zrobić, żeby turysta nas pokochał? KASIA I MACIEJ MARCZEWSCY, FUNDACJA RUSZAJ W DROGĘ!
Co zrobić, żeby turysta nas pokochał? RUSZAJ W DROGĘ! to: 1. FUNDACJA promująca polską turystykę w Polsce 2. BLOG podróżniczy z pomysłami na wycieczki po Polsce 3. KLUB cykl 16+ prezentacji podróżniczych
Bardziej szczegółowoPodstawowe Zasady Systemu Identyfikacji Wizualnej Województwa Zachodniopomorskiego
Podstawowe Zasady Systemu Identyfikacji Wizualnej Województwa Zachodniopomorskiego 2 SYSTEM IDENTYFIKACJI WIZUALNEJ Aktualizacja założeń strategii marki zakreśliła nową perspektywę komunikacji marki także
Bardziej szczegółowoW razie jakichkolwiek pytań prosimy o kontakt mailowy:
Prezentujemy Państwu przykładowe slajdy w dwóch nowych wzorach prezentacji. Obydwa layouty są elastyczne, dając wiele możliwości układu tekstu, zdjęć i infografk. W razie jakichkolwiek pytań prosimy o
Bardziej szczegółowoIdentyfikacja wizualna WĘGLOKOKS KRAJ Sp. z o.o. Luty 2014 r. (wersja 01-2014)
Identyfikacja wizualna WĘGLOKOKS KRAJ Sp. z o.o. Luty 2014 r. (wersja 01-2014) 1. Logo 5 1.1. Logo wersja podstawowa 1.2. Logo wersja pełna 1.3. Logo wersja podstawowa - warianty GKW oraz WCG 1.4. Logo
Bardziej szczegółowoKsięga znaku logo. Klub Buldoga Angielskiego w Polsce
Księga znaku logo. Klub Buldoga Angielskiego w Polsce Spis treści 1. Godło 2. Opis oraz znaczenie logo 3. Warianty logotypu, wersje mono i achromatyczne 4. Konstrukcja znaku 5. Pole ochronne znaku 6. Pole
Bardziej szczegółowoafisze, plakat, billboardy afisze plakat billboardy ogłoszenia prasowe ogłoszenie prasowe pionowe ogłoszenie prasowe poziome
3. przykłady 3.1. 3.1.1. 3.1.2. 3.1.3. afisze, plakat, billboardy afisze plakat billboardy 3.2. broszury 3.3. 3.3.1. 3.3.2. ogłoszenia prasowe ogłoszenie prasowe pionowe ogłoszenie prasowe poziome 3.4.
Bardziej szczegółowoWstęp. Niniejsza Księga Identyfikacji Wizualnej stanowi kompendium wiedzy na temat systemu wizualnego Szlaku Piastowskiego.
Wstęp Niniejsza Księga Identyfikacji Wizualnej stanowi kompendium wiedzy na temat systemu wizualnego Szlaku Piastowskiego. Przed rozpoczęciem pracy z identyfikacją Szlaku Piastowskiego należy dokładnie
Bardziej szczegółowoPRZYWÓDZTWO I KOMUNIKACJA W BIZNESIE WYSTĄPIENIA PUBLICZNE. Filip Januszewski
PRZYWÓDZTWO I KOMUNIKACJA W BIZNESIE WYSTĄPIENIA PUBLICZNE Filip Januszewski Plan zajęć Wprowadzenie Przed prezentacją W czasie prezentacji I. Wprowadzenie Rodzaje wystąpień publicznych Wystąpienia informacyjne
Bardziej szczegółowoSzlak Piastowski. Księga znaku. Spis treści
Szlak Piastowski Księga znaku Spis treści 02 04 05 06 07 08 09 10 12 13 podstawowa wersja znaku geneza znaku budowa i proporcje pole podstawowe znaku kolorystyka warianty achromatyczne warianty monochromatyczne
Bardziej szczegółowoArtykuł branżowy (opcja bezpłatna)
Cennik reklamowy Artykuł branżowy (opcja bezpłatna) Materiał dedykowany danej tematyce branżowej, najchętniej mieszczący się w ramach poszczególnych działów wydania, z ograniczeniem niewymieniania nazw
Bardziej szczegółowoTemat i cel konsultacji
Interfejs urzędnika: NOWA KONSULTACJA Celem konsultacji jest określenie... Wymagane jeszcze 320 znaków Lista głównych pytań ID Treść pytania Inne jednostki UM [1] Lokalizacja przejazdu kolejowego Wydział
Bardziej szczegółowoZARZĄDZENIE NR 67/2018 WÓJTA GMINY POSTOMINO. z dnia 5 marca 2018 r.
ZARZĄDZENIE NR 67/2018 WÓJTA GMINY POSTOMINO w sprawie określenia wzoru graficznego pism sporządzanych w Urzędzie Gminy Postomino oraz ich elementów technicznych Na podstawie art. 33 ust. 1 i 3 ustawy
Bardziej szczegółowoKREATOR KSIĄŻKA. 008 przy konwersji generowany automatycznie. 020 ISBN bez myślników, w polu 920 powtarzamy z myślnikami
KREATOR KSIĄŻKA 008 przy konwersji generowany automatycznie Pozycja 6 (typ daty) wartość S (w 99% przypadków) Pozycja 7-10 DATA1 np 2014 Pozycja 15-17 (m. wydania książki, kod kraju) pl# Pozycja 18-21...
Bardziej szczegółowoKsięga Identyfikacji Wizualnej ŻAGLE Warmii i Mazur
Księga Identyfikacji Wizualnej ŻAGLE Warmii i Mazur część A LOGO Wersja podstawowa - pełna A/01. Wersja podstawowa i uzupełniająca Wersja uzupełniająca - skrócona Zaleca się używanie podstawowej wersji
Bardziej szczegółowoZASADY STOSOWANIA. LOGOTYPU AS Progres
ZASADY STOSOWANIA LOGOTYPU AS Progres 1) LOGOTYP 2) TYPOGRAFIA 3) LAYOUT 4) KOLORYSTYKA LOGOTYP FORMA PODSTAWOWA ZNAKU I ODWRÓCONA (W KONTRZE) STOWARZYSZENIE SIEMACHA 2016 strona 2 LOGOTYP FORMA PODSTAWOWA
Bardziej szczegółowologo Elektronek Laboratorium Nauki i Zabawy ZAJĘCIA DLA DZIECI 18M 2 ZAJĘCIA DLA DZIECI 4 8 LAT ZAJĘCIA DLA DZIECI 2 4 LAT GALERIA O NAS KONTAKT ZAJĘĆ
DZIECI 18M 2 DZIECI 2 4 DZIECI 4 8 Witamy w Elektronku Laboratorium Nauki i Zabawy! metus, at faucibus lorem. Sed lobortis tempor vehicula... DZIECI 18M 2 czytaj więcej DZIECI 2 4 czytaj więcej DZIECI
Bardziej szczegółowoManual Systemu Identyfikacji Wizualnej dla Struktur Rządowych Rzeczypospolitej Polskiej
Manual Systemu Identyfikacji Wizualnej dla Struktur Rządowych Rzeczypospolitej Polskiej AUTORZY: Jakub Lorek Michał Porada Jan Węcławik SPIS TREŚCI: logo 4 typografia 11 papier firmowy 13 wizytówka 14
Bardziej szczegółowoSYSTEM IDENTYFIKACJI WIZUALNEJ WOJEWÓDZTWA ZACHODNIOPOMORSKIEGO
SYSTEM IDENTYFIKACJI WIZUALNEJ WOJEWÓDZTWA ZACHODNIOPOMORSKIEGO I. LOGO WOJEWÓDZTWA ZACHODNIOPOMORSKIEGO 1. Standaryzacja znaku Forma podstawowa logo Forma uzupełniająca logo Konstrukcja znaku Pole podstawowe
Bardziej szczegółowoLaTeX to epub the easy way Wersja: 5 z drobnymi modyfikacjami!
LaTeX to epub the easy way Wersja: 5 z drobnymi modyfikacjami! Wojciech Myszka 2010-10-01 23:15:50 +0200 2 Spis treści 1 Jak powstawała ta książka 7 1.1 L A TEX to epub the easy way......... 8 1.2 Pliki........................
Bardziej szczegółowoKsięga Identyfikacji Wizualnej
Księga Identyfikacji Wizualnej Spis treści. Logotyp 5.. Logotyp budowa znaku 6.. Logotyp wersja podstawowa i dodatkowa 7.. Logotyp warianty kolorystyczne poziom 8.. Logotyp warianty kolorystyczne pion
Bardziej szczegółowo64 BGK BAZOWA KSIĘGA MARKI NOŚNIKI IDENTYFIKACJI
64 BGK BAZOWA KSIĘGA MARKI NOŚNIKI IDENTYFIKACJI Dragon Rouge 04 66 BGK BAZOWA KSIĘGA MARKI Druki fi r m o w e Dragon Rouge 04 7. Visual language guidelines Poniższy szablon komunikatu prasowego ma charakter
Bardziej szczegółowoPozycjonowanie elementów
Tematy: Warstwy Pływanie i tamowanie elementów Kolejnym zagadnieniem związanym z kaskadowymi arkuszami stylów jest pozycjonowanie elementów. Dzięki tej funkcji można tworzyć strony o wyszukanych kształtach,
Bardziej szczegółowoZASADY STOSOWANIA. LOGOTYPU Com-Com Zone
ZASADY STOSOWANIA LOGOTYPU Com-Com Zone 1) LOGOTYP 2) TYPOGRAFIA 3) LAYOUT 4) KOLORYSTYKA LOGOTYP FORMA PODSTAWOWA ZNAKU I ODWRÓCONA (W KONTRZE) STOWARZYSZENIE SIEMACHA 2016 strona 2 LOGOTYP FORMA PODSTAWOWA
Bardziej szczegółowo4. Druki i dokumenty
4. 4. z użyciem godła UMK 59 8x 7x System Identyfikacji Wizualnej y yy prof. dr hab. Andrzej Tretyn 3 REKTOR tel. +48 56 654 9 5 tel. kom.: +48 60 34 567 fax: +48 56 654 9 44 e-mail: rektor@umk.pl www.umk.pl
Bardziej szczegółowoLogo - wariant nr 1. Opis R. 02. str 2
Księga znaku R. 02 Logo - wariant nr 1 Nowe logo jest odświeżeniem starego znaku Gminy Tuszów Narodowy. Zawiera te same elementy, w podobnym układzie, narysowane od nowa dla poprawienia czytelności logo
Bardziej szczegółowoKsięga znaku SWISSSTANDARDS.PL
Księga znaku SWISSSTANDARDS.PL 1 KOLOR SKALA SZAROŚCI WARIANT 1 str. 2 / / str. 3 / / ZNAK POD, WARIANTY str. 4 / / str. 5 / / SKALO str. 6 / / KOLORY DLA KOLOROWEGO, MONOCHROMATYCZNEGO str. 7 / / str.
Bardziej szczegółowoKsięga identyfikacji wizualnej Szwajcarsko-Polskiego Programu Współpracy Część 1 - Księga znaku Swiss Contribution
Księga identyfikacji wizualnej Szwajcarsko-Polskiego Programu Współpracy Część 1 - Księga znaku Swiss Contribution 2 Zasady stosowania znaku 1. Filozofia znaku 2. Wersja podstawowa znaku 3. Forma i budowa
Bardziej szczegółowoIdea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot
Idea of responsive web design Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot Czym tak właściwie jest responsive web design? Jest to podejście do projektowania stron internetowych w taki
Bardziej szczegółowoIdentyfikacja Wizualna Pomorskiego Klastra ICT
Identyfikacja Wizualna Pomorskiego Klastra ICT Projekt finansowany w ramach Regionalnego Programu Operacyjnego dla Województwa Pomorskiego na lata 2007-2013 Logotyp Wersja podstawowa Godło logotypu oparte
Bardziej szczegółowoPOLE OCHRONNE WERSJE NIEDOZWOLONE MODYFIKACJE 10. 11. KOPERTA 12. TECZKA 13.
Księga IDENTYFIKACJI WIZUALNEJ SPIS TREŚCI TYPOGRAFIA I KOLORYSTYKA FIRMOWA 1. 2. TYPOGRAFIA KOLORYSTYKA LOGO 3. 4. 5. 6. 7. 8. ODMIANY KONSTRUKCJA POLE OCHRONNE SKALOWANIE WERSJE NIEDOZWOLONE MODYFIKACJE
Bardziej szczegółowodlaczego taka osoba miałaby odwiedzić naszą stronę internetową,
Jak powstają strony internetowe - 6 kroków Krok 1 - Definiowanie wymagań nowej witryny Zespół projektowy, wraz z właścicielem witryny, precyzuje wymagania wobec nowej strony internetowej. Oczekiwania właściciela
Bardziej szczegółowoPRZEWODNIK IDENTYFIKACJI WIZUALNEJ MARKI
PRZEWODNIK IDENTYFIKACJI WIZUALNEJ MARKI upaid Integrator płatności mobilnych i internetowych, partner MasterCard Mobile. Integrujemy firmy m-commerce i e-commerce, systemy płatności, banki, operatorów
Bardziej szczegółowoSystem Identyfikacji Wizualnej
System Identyfikacji Wizualnej 2 Znak Podstawowa wersja znaku prezentowana jest na jednolitym białym tle. Dopuszczalne jest też umieszczanie znaku na jednolitym tle czarnym. W przypadku aplikacji podstawowej
Bardziej szczegółowoRESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub
RESPONSYWNE Waldemar Korłub INTERFEJSY Klasy urządzeń klienckich Responsywne style CSS Wytwarzanie Aplikacji Internetowych KASK ETI Politechnika Gdańska Klasy urządzeń klienckich Desktopy z zewnętrznymi
Bardziej szczegółowoUCHWAŁA NR XXXI/270/12 RADY MIEJSKIEJ W WYSZKOWIE. z dnia 28 grudnia 2012 r.
UCHWAŁA NR XXXI/270/12 RADY MIEJSKIEJ W WYSZKOWIE z dnia 28 grudnia 2012 r. w sprawie ustanowienia znaku promocyjnego (logo) Gminy Wyszków oraz zasad jego używania i wykorzystywania Na podstawie art. 18
Bardziej szczegółowoKsiążka znaku ADVERTISING/MEDIA/COMMUNICATION
Książka znaku ADVERTISING/MEDIA/COMMUNICATION Spis treści 1. Godło 2. Wersja podstawowa znaku 3. Wersja czarno-biała 4. Wersja achromatyczna 5. Konstrukcja znaku 6. Pole ochronne znaku 7. Pole podstawowe
Bardziej szczegółowoopracowano na potrzeby:
księga znaku 2 opracowano na potrzeby: CENTURION-R Sp. z o.o. ul. Łany 1, 38-500 Sanok tel. +48 13 465 38 80 sekretariat tel. +48 13 465 38 81 tel. +48 13 465 38 82 marketing fax +48 13 465 38 88 e-mail:
Bardziej szczegółowoKsięga wizualizacji znaku Programu Rozwoju Obszarów Wiejskich na lata 2007-2013
Księga wizualizacji znaku Programu Rozwoju Obszarów Wiejskich na lata 2007-2013 Księga wizualizacji znaku Programu Rozwoju Obszarów Wiejskich na lata 2007-2013 Europejski Fundusz Rolny na rzecz Rozwoju
Bardziej szczegółowom o d u s W MIEJSCU PUBLICZNYM ORAZ UTWARDZENIE POWIERZCHNI
m o d u s BUDOWA ELEMENTÓW MAŁEJ ARCHITEKTURY GRUNTU - OZNAKOWANIE ŚCIEŻEK BIEGOWYCH W PARKU LOTNIKÓW W KRAKOWIE PARK LOTNIKÓW W KRAKOWIE 44/17, 44/33, 44/30, 44/24, 44/18, 43/16, 43/19 obr. 16 ŚRÓDMIEŚCIE;
Bardziej szczegółowoLaboratorium 1: Szablon strony w HTML5
Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony
Bardziej szczegółowoRESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub
RESPONSYWNE Waldemar Korłub INTERFEJSY Klasy urządzeń klienckich Responsywne style CSS Wytwarzanie Aplikacji Internetowych KASK ETI Politechnika Gdańska Klasy urządzeń klienckich Desktopy z zewnętrznymi
Bardziej szczegółowoBarbara Ostrowska, Krzysztof Spalik Instytut Badań Edukacyjnych
Barbara Ostrowska, Krzysztof Spalik Instytut Badań Edukacyjnych 2011 2014 Rozdźwięk między wiedzą szkolną a wiedzą praktyczną Przyczyny Nauczanie bierne bez obserwacji, i eksperymentów Nauczanie wiadomości,
Bardziej szczegółowoSYSTEM IDENTYFIKACJI WIZUALNEJ
SYSTEM IDENTYFIKACJI WIZUALNEJ SPIS TREŚCI. 1. ZNAK FIRMOWY 1.01 Wersja podstawowa, wersja skrócona 1.02 Alternatywna wersja znaku firmowego 1.03 Siatka modułowa wersji podstawowej 1.04 Siatka modułowa
Bardziej szczegółowoKSSE Logo Manual Logo i nośniki identyfikacji
Logo i nośniki identyfikacji Katowicka Specjalna Strefa Ekonomiczna 2018 Logo Katowicka Specjalna Strefa Ekonomiczna 2018 Logo Konstrukcja znaku Logo Wersja podstawowa Wersja minimalna 20 mm Logo Wersja
Bardziej szczegółowoTworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 1 Podstawy tworzenia stron internetowych Agenda Podstawy stron internetowych Przegląd języka HTML Wprowadzenie
Bardziej szczegółowoDokument hipertekstowy
Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością
Bardziej szczegółowoKSIĘGA IDENTYFIKACJI WIZUALNEJ. PERSONA Sp z.o.o. - Corporate Guideline 2015
KSIĘGA IDENTYFIKACJI WIZUALNEJ PERSONA Sp z.o.o. - Corporate Guideline 2015 PERSONA - Księga identyfikacji wizualnej 1. Identyfikacja wizualna 3 2. Podstawowe zasady i konstrukcja znaku 4 3. Pole ochronne
Bardziej szczegółowoDESIGN QUALITY TECHNOLOGY. Księga identyfikacji wizualnej wytyczne stosowania
DESIGN QUALITY TECHNOLOGY Księga identyfikacji wizualnej wytyczne stosowania by DESIGN QUALITY TECHNOLOGY 1 LOGO 3 TYPOGRAFIA 2 Forma podstawowa z claimem 5 Forma uproszczona bez claimu 6 Forma podstawowa
Bardziej szczegółowoPRZEWODNIK IDENTYFIKACJI WIZUALNEJ Niezależnego Zrzeszenia Studentów
opracowanie: Tomasz Ryś tomasz.rys@nzs.org.pl +48 55 329 63 współpraca: Jakub Pluta jakub.pluta@nzs.org.pl +48 62 518 356 spis treści znak...3 11 logotyp ogólnopolski...12 21 logotyp jednostki...22 32
Bardziej szczegółowoKsięga tożsamości marki ENEA
Księga tożsamości marki ENEA A Logotyp i nazwa A.1 Nazwa ENEA to nazwa powstała dzięki modyfikacji słowa ENERGIA - podstawowego produktu firmy. Dzięki ograniczeniu w nowym słowie ilości spółgłosek, stało
Bardziej szczegółowoZARZĄDZENIE NR 73/09 PREZYDENTA MIASTA SZCZECIN z dnia 24 lutego 2009
ZARZĄDZENIE NR 73/09 PREZYDENTA MIASTA SZCZECIN z dnia 24 lutego 2009 w sprawie wprowadzenia wzorów druków i oznaczeń systemu identyfikacji wizualnej Urzędu Miasta Szczecin Na podstawie art. 33 ust. 3
Bardziej szczegółowoZASADY STOSOWANIA. LOGOTYPU SIEMACHA Spot
ZASADY STOSOWANIA LOGOTYPU SIEMACHA Spot 1) LOGOTYP 2) TYPOGRAFIA 3) LAYOUT 4) KOLORYSTYKA LOGOTYP FORMA PODSTAWOWA ZNAKU I ODWRÓCONA (W KONTRZE) STOWARZYSZENIE SIEMACHA 2016 strona 2 LOGOTYP FORMA PODSTAWOWA
Bardziej szczegółowo3. Druki i dokumenty
3. 3. Wzór wizytówki ogólnej UMK 8x 7x NIP: 879 07 7 9 Regon: 0000034 konto bankowe: 0 60 0 0000 0000 6090 894 y yy 7y Pozycja logo UMK (poziom) jest ściśle określona. Znak umieszczony jest na białym tle
Bardziej szczegółowoOCTOPUS STREET KSIĘGA ZNAKU. Identyfikacja wizualna Globlife Justyna Kołodziejczak Luty 2013
KSIĘGA ZNAKU Identyfikacja wizualna Globlife Justyna Kołodziejczak Luty 2013 1. LOGO SPIS TREŚCI X.X 1.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 1.10 1.11 Wstęp... O MARCE... O ZNAKU... O LOGOTYPIE Logo podstawowe...
Bardziej szczegółowoInterfejs komunikacyjny z platformą Click4Mobile 2.0
Interfejs komunikacyjny z platformą Click4Mobile 2.0 Spis treści 1 Wstęp... 2 2 Architektura rozwiązania.... 2 3 Sposoby komunikacji.... 3 4 Struktura dokumentu xml... 3 4.1 Publisher... 3 4.2 Settings...
Bardziej szczegółowoIDENTYFIKACJA WIZUALNA. 17 Wizytówka personalizowana 18 Teczka A4 19 Segregator
IDENTYFIKACJA WIZUALNA. BRANDBOOK. SPIS TREŚCI WSTĘP 02 Podstawowe informacje LOGOTYP 03 Wersja podstawowa 04 Wersja podstawowa pozioma 05 Wersja monochromatyczna 06 Wersja w odcieniach szarości 07 Pole
Bardziej szczegółowo1.1. Logotyp Wersja podstawowa. Znak 8OO LAT OPOLA w wersji podstawowej występuje na jednolitym, białym tle.
1. L GOTYP 1.1 Wersja podstawowa 1.2 Wersja podstawowa na ciemnym tle 1.3 Wersja monochromatyczna 1.4 Wersja anglojęzyczna 1.5 Obszar minimalny 1.6 Obszar bezpieczny 1.7 Obszar minimalny 1.8 Wielkość minimalna
Bardziej szczegółowoDanuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Bardziej szczegółowoTECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 02.11.2016 r.) 1) Mediaqueries - szablon podstawowy Przykład z szablonu strony który dostosowuje się w zalezności od dostępnej szerokości ekranu dostępny jest pod
Bardziej szczegółowoUniwersytet Przyrodniczy w Lublinie identyfikacja wizualna. Identyfikacja wizualna
Identyfikacja wizualna 2 Część I. LOGO Część II. System Identyfikacji Wizualnej A. Akcydensy B. Poligrafia C. Multimedia 3 Część I. LOGO 4 Tekst Istota Logo 5 Podstawą konstrukcji znaku jest wartość x,
Bardziej szczegółowoSPIS TREŚCI LOGO LOGO WE LOVE ENGINES LOGO GLOBAL COVERAGE I WIX INSTITUTE KOLORY FONT IKONY KAMPANIA 2017 HASŁO KEY VISUALS
BRAND GUIDELINES SPIS TREŚCI LOGO LOGO WE LOVE ENGINES LOGO GLOBAL COVERAGE I WIX INSTITUTE KOLORY FONT IKONY 3 5 6 7 8 11 KAMPANIA 2017 HASŁO KEY VISUALS WYTYCZNE DO TWORZENIA LAYOUTÓW PRZYKŁADY LAYOUTÓW
Bardziej szczegółowoSpis treści. Symbolika. System identyfikacji wizualnej. Słowniczek
Księga tożsamości Księga tożsamości Spis treści Słowniczek Symbolika I. Znak graficzny I.1 znak graficzny I.2 wersja pełna znaku I.3 wersja uproszczona znaku I.4 wersja typograficzna znaku I.5 podstawowa
Bardziej szczegółowoSpis treści. Szlak Piastowski Brand Manual. Marzec 2014. Wstęp. Kolorystyka Kolorystyka podstawowa Kolorystyka rozszerzona
Szlak Piastowski Brand Manual Marzec 2014 Spis treści Wstęp Logo Logo Wersja podstawowa Geneza znaku Budowa i proporcje Kolorystyka Warianty achromatyczne Warianty monochromatyczne Pole ochronne Pole ochronne
Bardziej szczegółowoArchiwum Instytutu Techniki Cieplnej Przygotowanie manuskryptu rozdziału monografii Instrukcja dla autorów
Archiwum Instytutu Techniki Cieplnej Przygotowanie manuskryptu rozdziału monografii Instrukcja dla autorów Ziemowit Ostrowski * Instytut Techniki Cieplnej, Politechnika Śląska e-mail: ziemowit.ostrowski@polsl.pl
Bardziej szczegółowo