Studia Podyplomowe Grafika Komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.
|
|
- Tomasz Małek
- 8 lat temu
- Przeglądów:
Transkrypt
1 Ćwiczenia Responsive Web Design Praca własna dr inż. Robert Banasiak
2 Wprowadzenie Coraz więcej użytkowników korzysta z Internetu w urządzeniach mobilnych w celu przeglądania stron internetowych. Warto zadbać o użyteczność strony na urządzeniach przenośnych. Rozdzielczości urządzeń mobilnych Pierwszym krokiem do stworzenia responsywnej strony internetowej jest zastanowienie się nad rozdzielczościami wyświetlaczy urządzeń przenośnych, na których strona będzie prezentowana. W głównej mierze interesuje nas szerokość. Rozdzielczości ekranów urządzeń mobilnych jest sporo. Zestawienie najpopularniejszych z nich możemy znaleźć tutaj: Biorąc pod uwagę obecne trendy technologiczne szerokość naszej strony będzie przyjmować takie wartości dla poszczególnych urządzeń: 1050px (komputer) 950px (tablet poziomo) 750px (tablet pionowo) 450px (telefon poziomo) 300px (telefon pionowo) Layout strony Po ustaleniu wymiarów przejdźmy do stworzenia prostego layoutu strony. Postanowiliśmy, że nasz layout będzie wyglądał tak:
3 Nie jest on przypadkowy - zaplanowaliśmy go tak, aby w łatwy sposób można było dopasować go do urządzeń mobilnych o małej szerokości. Warto podkreślić, iż nie wszystkie strony da się zrobić jako responsywne (nie uda nam się przecież przenieść nagłówka na sam dół czy też stopki na samą górę). Warto więc dokładnie zaplanować swój layout, aby można było go swobodnie dopasowywać do poszczególnych szerokości. Nasz został zaplanowany, aby na urządzeniach z najmniejszą rozdzielczością nasza strona wyświetlała się w następujący sposób: Szkielet strony w HTML5 Wiemy jak ma wyglądać nasza strona, przejdźmy więc do programu Dreamweaver CS6 i zajmijmy się kodem HTML. Dla naszego layoutu szkielet wyglądać będzie w sposób następujący (dodaliśmy również zawartość naszej strony): <!DOCTYPE HTML> <html lang="pl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>strona responsywna</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <!-- header --> <header> <img src="images/header.jpg" alt=""/> </header> <!-- sidebar --> <aside> <nav> <ul> <li><a href="#">start</a></li> <li><a href="#">o firmie</a></li> <li><a href="#">oferta</a></li> <li><a href="#">galeria</a></li> <li><a href="#">kontakt</a></li> </ul> </nav> </aside>
4 <!-- main --> <section id="main"> <h1>rwd tutorial</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum tempus mi, maximus volutpat urna sollicitudin vitae. Vivamus rutrum mi sit amet commodo rutrum. Suspendisse potenti. Sed a ullamcorper eros. Maecenas dapibus erat mi, a egestas ipsum cursus volutpat. Aliquam posuere mi at consectetur convallis. Cras vitae ligula eget leo ultrices hendrerit nec sed ex. Morbi at ipsum rhoncus, dictum elit in, consectetur lorem. Aliquam suscipit diam sit amet mauris luctus, a egestas magna pharetra. Donec laoreet viverra risus nec fermentum. Maecenas gravida lectus vel ante commodo bibendum. Donec ac pellentesque mi.</p> </section> <!-- footer --> <footer> <p>footstep.pl 2013</p> </footer> </div> </body> </html> Z ważniejszych rzeczy do odnotowania w powyższym kodzie jest to, że arkusz stylów znajduje się w folderze pod nazwą 'css', obrazy znajdują się w folderze 'images' a także dodana została linijka: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> aby zdefiniować szerokość okna przeglądarki dla Media Queries. Formatowanie CSS3 Nasz szkielet jest gotowy, możemy teraz zająć się arkuszem styli CSS, aby nasza strona nabrała odpowiedniego wyglądu. My ustaliliśmy jej szerokość na 1050px tak więc nasz kod CSS wygląda tak: * {padding:0;margin:0; html {width:100%;height:100%; body {font-family:arial, Helvetica, Sans-serif;font-size:14px; line-height:1.5; font-weight:400; color:#434343; background:#fff;.container {width:1050px; margin:0 auto; header {margin:25px 0; header img {width:100%; aside {float:left;width:30%; margin:0 0 25px; aside nav ul {list-style:none; aside nav ul li {margin-bottom:1px; aside nav ul li a {display:block;text-decoration:none; color:#000; background:#ffc000; padding:8px 20px; aside nav ul li a:hover{background:#212121; color:#fff; #main {float:right;width:65%;margin:0 0 25px; footer {clear:both;color:#fff; background:#121212; padding:15px 0 15px 30px;
5 Teraz nasza strona wygląda tak: Można powiedzieć, że strona jest prawie gotowa. Nam jednak zależy na stronie responsywnej Responsywność strony Aby nasza strona stała się stroną responsywną musimy dodać do naszego arkusza CSS warunki Media Queries. Aby posługiwać się warunkami Media Queries musimy dowiedzieć się czym one są i jak działają. Przedstawmy przykładową linię kodu CSS zawierającą warunek Media all and (max-width: 800px) and (min-width: 600px) { /* style css */ W kodzie powyżej został podany warunek który definiuje, że wpisane w nawias klamrowy style będą aktywne tylko dla szerokości okna przeglądarki mniejszej niż 800px gdyż ustaliliśmy wartość maxwidth na 800px i dla szerokości okna przeglądarki większej niż 600px gdyż ustaliliśmy wartość minwidth na 600px. Tak więc wpisane style będą aktywne gdy szerokość okna przeglądarki będzie zawierała się w przedziale od 800px do 600px. Możemy również stosować taki all and (min-width: 600px) { /* style css */ W takim przypadku nie mamy górnej granicy czyli max-width i warunek będzie spełniany za każdym razem kiedy szerokość okna przeglądarki będzie większa niż 600px. Analogiczna sytuacja jest z all and (max-width: 800px) { /* style css */
6 W takim przypadku nie mamy dolnej granicy czyli min-width tak więc warunek będzie spełniany za każdym razem kiedy szerokość okna przeglądarki będzie mniejsza niż 800px. Teraz przejdźmy do ustalania warunków CSS Media Queries dla naszej strony. Najłatwiejszym sposobem jest rozpisanie sobie wszystkich naszych szerokości umieszczając je w warunkach Media Queries bez podawania wartości oraz usuwając skrajne screen and (min-width: px) { /* style dla 1050px screen and (max-width: px) and (min-width: px) { /* style dla 950px screen and (max-width: px) and (min-width: px) { /* style dla 750px screen and (max-width: px) and (min-width: px) { /* style dla 450px screen and (max-width: px) { /* style dla 300px */ Z pierwszego warunku odpowiadającego za wyświetlanie strony na komputerach usunęliśmy górną granicę 'max'. Tym samym ustaliliśmy że ten warunek będzie spełniany dla każdej szerokości większej niż ta którą zdefiniujemy. To samo dotyczy najmniejszego warunku. Tutaj usunęlismy wartość 'min' sprawiając, że warunek będzie spełniany dla każdej szerokości poniżej. 1050px (komputer) Mając przygotowany szkielet możemy zdefiniować wartości dla naszych warunków. Zacznijmy od największego czyli odpowiedzialnego za wyświetlanie strony na komputerach. Wiemy, że nasza strona w tym warunku ma mieć szerokość 1050px, musi więc wyświetlać się w oknie przeglądarki większym niż 1050px tak, aby nie pojawił się na dole poziomy pasek przewijania. Dodajmy jeszcze do naszej wartości 50px 'luzu' na pionowy pasek przeglądania otrzymując w ten sposób wartość 1100px, którą to zastosujemy w pierwszym screen and (min-width: 1100px) { /* style dla 1050px */ 950px (tablet orientacja pozioma) Czas na kolejny warunek. We wcześniejszym zdefiniowaliśmy wartość 1100px jako wartość 'min'. W tym warunku musimy przyjąć tę wartość jako wartość 'max' (aby zachować ciągłość przedziałów). Wartość 'min' określamy w taki sam sposób jak robiliśmy to w poprzednim warunku tak więc otrzymujemy 1000px (950px szerokość strony plus 50px screen and (max-width: 1100px) and (min-width: 1000px) { /* style dla 950px */
7 750px (tablet orientacja pionowa) Kolejny warunek. Sytuacja analogiczna do screen and (max-width: 1000px) and (min-width: 800px) { /* style dla 750px */ 450px (telefon orientacja screen and (max-width: 800px) and (min-width: 500px) { /* style dla 450px */ 300px (telefon orientacja pionowa) W tym przypadku nie mamy wartości 'min' tak więc przepisujemy tylko do wartości 'max' wartość 'min' z poprzedniego screen and (max-width: 500px) { /* style dla 300px */ Możemy teraz przejść do wpisywania w przygotowane warunki style CSS dla naszej screen and (min-width: 1100px) {.container {width:1050px; margin:0 screen and (max-width: 1100px) and (min-width: 1000px) {.container {width:950px; margin:0 screen and (max-width: 1000px) and (min-width: 800px) {.container {width:750px; margin:0 screen and (max-width: 800px) and (min-width: 500px) {.container {width:450px; margin:0 screen and (max-width: 500px) {.container {width:300px; margin:0 auto; Jak widzimy wartość atrybutu margin jest dla każdego warunku taka sama więc możemy wyciągnąć ją poza warunki aby nie powtarzać jej w każdym z nich:.container {margin:0 screen and (min-width: 1100px) {.container {width:1050px;
8 @media screen and (max-width: 1100px) and (min-width: 1000px) {.container screen and (max-width: 1000px) and (min-width: 800px) {.container screen and (max-width: 800px) and (min-width: 500px) {.container screen and (max-width: 500px) {.container {width:300px; Z uwagi na to ze na rynku istnieje jeszcze wiele urządzeń mobilnych również takich o wyświetlaczach z rozdzielczością mniejsza niż 300px dobrym rozwiązaniem będzie zamiana dla najmniejszego warunku wartości szerokości strony z podanej w pikselach na procentową. Zastosujmy więc szerokość 90% całej dostępnej szerokości (max-width: 500px) {.container {width:90%; W tym momencie nasza strona jest już responsywna, lecz przy małych rozdzielczościach staje się nieczytelna. Zróbmy jeszcze porządek w taki sposób, aby z układu dwukolumnowego powstał układ jedno kolumnowy, pamiętając oczywiście o pogrupowaniu odpowiednio powtarzających się (min-width: 1100px) {.container {width:1050px; aside {width:30%; #main (max-width: 1100px) and (min-width: 1000px) {.container {width:950px; aside {width:30%; #main (max-width: 1000px) and (min-width: 800px) {.container {width:750px; aside {width:30%; #main (max-width: 800px) and (min-width: 500px) {.container {width:450px; aside, #main (max-width: 500px) {.container {width:90%; aside, #main {width:100%;
9 Tym prostym sposobem udało nam się stworzyć w pełni responsywną stronę. Pamiętajmy jednak, że nie da się jednoznacznie sprecyzować tworzenia stron responsywnych. Na zajęciach skorzystaliśmy z Media Queries i przetestowaliśmy jedynie ich podstawowe działanie. Istnieją również inne sposoby uzyskania takiego samego efektu np. wykorzystując JavaScript. Nasza wcześniejsza wersja opierała się o stałe wartości pikselowe. Stosując takie rozwiązanie nasza strona dla określonych rozdzielczości przeglądarki ma przypisaną konkretną stałą szerokość. Jak najbardziej gwarantuje to poprawne wyświetlanie się strony, jednak istnieje ryzyko, że dla pewnych rozdzielczości mogą pojawić się po bokach strony puste przestrzenie. Nie jest to pożądane zarówno ze względów estetycznych, jak i ekonomicznych - nie ma potrzeby marnować dostępną przestrzeń na wyświetlaczu, skoro możemy wykorzystać ją w całości. Aby dokonać modyfikacji skupimy się jedynie na arkuszu styli CSS. Kod HTML pozostanie niezmieniony. Aby oprzeć naszą stronę o wartości procentowe musimy zmodyfikowac element '.container'..container {width:90%;max-width:1050px;margin:0 auto; Jak widać nadaliśmy mu szerokość na 90% dostępnej przestrzeni oraz ustaliliśmy jego maksymalną szerokość na 1050px. Następnym krokiem będzie modyfikacja naszych warunków Media Queries. Zdefiniowaliśmy już style dla naszego elementu '.container' pozostało nam tylko uporządkowanie układu kolumn na naszej stronie. We wcześniejszej wersji ustaliliśmy, że zmiana układu z dwukolunowego do jednokolumnowego ma następować przy szerokości przeglądarki 800px. W tym przypadku możemy skorzystać z takich warunków Media (min-width: 800px) { /* tutaj style powyżej 800px (max-width: 800px) { /* tutaj style poniżej 800px */ Zastosowanie takich warunków umożliwi nam zdefiniowanie stylów dla szerokości przeglądarki powyżej 800px oraz poniżej 800px. Uzupełnijmy nasze warunki o odpowiednie (min-width: 800px) { aside {width:30%; #main (max-width: 800px) { aside, #main {width:100%; Teraz cały nasz kod CSS powienien wyglądać teraz tak: * {padding:0;margin:0; html {width:100%;height:100%;
10 body {font-family:arial, Helvetica, Sans-serif;font-size:14px;line-height:1.5; font-weight:400;color:#434343;background:#fff;.container {width:90%;max-width:1050px;margin:0 auto; header {margin:25px 0; header img {width:100%; aside {float:left;margin:0 0 25px; aside nav ul {list-style:none; aside nav ul li {margin-bottom:1px; aside nav ul li a {display:block;textdecoration:none;color:#000;background:#ffc000;padding:8px 20px; aside nav ul li a:hover{background:#212121;color:#fff; #main {float:right;margin:0 0 25px; footer {clear:both;color:#fff;background:#121212;padding:15px 0 15px 30px;margin:0 0 (min-width: 800px) { aside {width:30%; #main (max-width: 800px) { aside, #main {width:100%; Jak widać takie rozwiązanie pozwoliło nam znacznie zmniejszyć zawartość arkusza CSS, a nasza strona wykorzystuje teraz znacznie większą cześć wyświetlacza przy mniejszych rozdzielczościach, przez co zyskuje na czytelności. W ramach pracy własnej zapraszam do opracowania własnej koncepcji serwisu opartego na szablonie responsywnym.
Księ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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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 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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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 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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ół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ółowoDZIENNIK URZĘDOWY WOJEWÓDZTWA ŚLĄSKIEGO
DZIENNIK URZĘDOWY WOJEWÓDZTWA ŚLĄSKIEGO Katowice, dnia 14 czerwca 2017 r. Poz. 3641 UCHWAŁA NR VII/4/2017 RADY MIEJSKIEJ W BIERUNIU z dnia 25 maja 2017 r. w sprawie przyjęcia logo Miasta Bierunia oraz
Bardziej szczegółowoSystem 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ółowoefaktura walidator Instrukcja integracji komponentów webowych v2012.04.11
efaktura walidator Instrukcja integracji komponentów webowych v2012.04.11 Syriusz sp. z o.o. Rzeszów 2012 EFAKTURA INSTRUKCJA INTEGRACJI KOMPONENTÓW WEBOWYCH str. 2 Spis treści 1. Informacje ogólne...3
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ół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ół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ół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ół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ółowoSystem identyfikacji miasta
475 13.08. System identyfikacji miasta Spis treści 1. Charakterystyka budowy logotypu 05 1.1 Logotyp 1.1.1 logotyp 06 1.1.2 czcionka logotypu 09 1.1.3 wielkości, typy czcionek stosowanych w komunikacji
Bardziej szczegółowoIdentyfikacja wizualna miejskich jednostek organizacyjnych
Identyfikacja wizualna miejskich jednostek organizacyjnych Spis treści 1. Charakterystyka budowy logotypu 3 05 1.1 Logotyp 1.1.1 1.1.1 logotyp Logotyp /miejsce pochodzenia 4 06 1.1.2 Logotyp/rodzina 5
Bardziej szczegółowoObecnie jedynym słusznym rozwiązaniem jest wdrożenie strony responsywnej. Strona responsywna to po prostu responsywny szablon.
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
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 Identyfikacji Wizualnej WERSJA 1.0 (ONLINE)
Księga Identyfikacji Wizualnej WERSJA 1.0 (ONLINE) LOGOTYP KSIĘGA IDENTYFIKACJI WIZUALNEJ / LOGOTYP / GENEZA I CZĘŚCI SKŁADOWE 3 Logo Polskiego Związku Hokeja na Lodzie jest znakiem o charakterze przedstawiającym.
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ół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ół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ół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ół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 ZNAKU 2015 OPRACOWANIE DEEFORM STUDIO 1
KSIĘGA ZNAKU 2015 OPRACOWANIE DEEFORM STUDIO 1 Symbol zbudowany na bazie pierwszej litery nazwy miasta J. Dodatkowo, w górnej części ukryto fragment herbu, co jest odniesieniem do historii Jarocina. Znak
Bardziej szczegółowoYellow Crocodiles W TELEGRAFICZNYM SKRÓCIE AGENCJA 360
Yellow Crocodiles W TELEGRAFICZNYM SKRÓCIE AGENCJA 360 STUDIO FOTO sesje zdjęciowe STRATEGIE kampanie reklamowe konkursy eventy VISUAL & OUTDOOR tablice i oznakowania litery przestrzenne LED billboardy
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ół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ół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ółowoHTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>.
Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie
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ół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ółowoKatalog Systemu Identyfikacji Wizualnej Planetarium
Katalog Systemu Identyfikacji Wizualnej Planetarium Planetarium Niebo Kopernika jest najnowocześniejszym tego typu obiektem w Europie. Jako część Centrum Nauki Kopernik jego misją jest rozbudzanie ciekawości
Bardziej szczegółowoStrategia Komunikacji Wizualnej Marki Ogicom
Strategia Komunikacji Wizualnej Marki Ogicom spis tresci: System Identyfikacji Wizualnej (CI) 3 Symbol firmowy 4 Pole podstawowe i ochronne 4 Siatka modułowa 5 Zestawienia kolorów 6 Zestawienia kolorów
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ół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ół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ółowo1.1 Logotyp. 1.1.1 Logotyp Podstawowa wersja logotypu
1.1 Logotyp 1.1.1 Logotyp Podstawowa wersja logotypu Podstawowe kolory występowania logo to ciemny błękit (100% cyan, 75% magenta), błękit (100%) i biel tła. Logotyp w podstawowej wersji kolorystycznej
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 KUDOWA ZDRÓJ
SYSTEM IDENTYFIKACJI WIZUALNEJ KUDOWA ZDRÓJ Opracowanie: Agencja Reklamowa ADV. ul. Grunwaldzka 54 60-311 Poznań tel. 061 661 60 10 fax 061 661 60 11 www.adv.net.pl Spis treści Wstęp Logo -wersje podstawowe
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ółowoKSIĘGA ZNAKU I SYSTEM IDENTYFIKACJI WIZUALNEJ COP19 WARSZAWA 2013
KSIĘGA ZNAKU I SYSTEM IDENTYFIKACJI WIZUALNEJ COP19 WARSZAWA 2013 SPIS TREŚCI I. Księga znaku 1. Idea znaku 2. Logo wersja podstawowa 3. Logo wersja skrócona 4. Logo wersja skrócona, pozioma 5. Logo wersja
Bardziej szczegółowoEuropejski sektor e-commerce, e-fulfilment i nowe miejsca pracy
Europejski sektor e-commerce, e-fulfilment i nowe miejsca pracy PAŹDZIERNIK 2015 Trwający od kilku lat rozwój sektora e-commerce wymusza na podmiotach działających w tym sektorze szereg działań służących
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ółowoZASADY STOSOWANIA LOGOTYPÓW POLITECHNIKI KOSZALIŃSKIEJ
ZASADY STOSOWANIA LOGOTYPÓW POLITECHNIKI KOSZALIŃSKIEJ SPIS TREŚCI I WSTĘP... 5 II LOGO... 8 1. Logo Politechniki Koszalińskiej... 9 budowa logo... 9 pole podstawowe logo... 9 wersja podstawowa logo...
Bardziej szczegółowoLogo na siatce modułowej 4. Przykłady poprawnego zachowania pola ochronnego 7. Przykłady niepoprawnego zachowania pola ochronnego 8
KSIĘGA ZNAKU spis treści Symbolika znaku 2 Budowa znaku 3 Logo na siatce modułowej 4 Pole znaku 5 Pole ochronne znaku 6 Przykłady poprawnego zachowania pola ochronnego 7 Przykłady niepoprawnego zachowania
Bardziej szczegółowoSystem Identyfikacji Wizualnej dla Projektu e-zdrowie. dla Logotypu e-zdrowie w języku polskim
System Identyfikacji Wizualnej dla Projektu e-zdrowie dla Logotypu e-zdrowie w języku polskim 1 System Identyfikacji Wizualnej dla Projektu e-zdrowie zawiera opis konstrukcji podstawowych elementów identyfikacji
Bardziej szczegółowoSYSTEM IDENTYFIKACJI WIZUALNEJ MARKI TAURON
SYSTEM IDENTYFIKACJI WIZUALNEJ MARKI TAURON 1 SPIS TREŚCI 6. Teczka....55 7. Galanteria biurowa.... 57 7.1. Notatka ze spotkania.... 58 7.2. Bloczki biurowe.... 59 8. Pieczątka.... 60 3. Submarki i logo
Bardziej szczegółowoWNIOSKI Z BADANIA FGI NAUCZYCIELI SZKOLNYCH I PRZEDSZKOLNYCH REALIZOWANEGO W RAMACH PROJEKTU. Zespół Ekonomii Edukacji, Instytut Badań Edukacyjnych
WNIOSKI Z BADANIA FGI NAUCZYCIELI SZKOLNYCH I PRZEDSZKOLNYCH REALIZOWANEGO W RAMACH PROJEKTU Zespół Ekonomii Edukacji, Instytut Badań Edukacyjnych W niniejszej prezentacji pokazane są najważniejsze wnioski
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ółowoSystem Identyfikacji Wizualnej Euro-Centrum Park Naukowo-Technologiczny
Euro-Centrum Euro-Centrum LOGO - wersja podstawowa Logo Grupy Euro-Centrum składa się ze znaku graficznego oraz liternictwa. Znak graficzny zbudowany z dwóch dynamicznych form, które układają się w kształt
Bardziej szczegółowoSYSTEM INFORMACJI WIZUALNEJ DLA MUZEUM KULTURY KURPIOWSKIEJ W OSTROŁĘCE
SYSTEM INFORMACJI WIZUALNEJ DLA MUZEUM KULTURY KURPIOWSKIEJ W OSTROŁĘCE I. KOLORYSTYKA. TYPOGRAFIA 3. MOTYWY DEKORACYJNE iały: kolor tła oraz motywów dekoracyjnych RAL 906 CMYK 0/0/0/0 Rodzina krojów pisma
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ół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ół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ółowoWyniki za III kwartał i 9 miesięcy 2010
Wyniki za III kwartał i 9 miesięcy 2010 Październik 2010 Paliwa z Biomasy Odnawialna Energia Wiatru Outsourcing Przemysłowy Plan Prezentacji Przegląd działalności Obecna działalność Projekty w fazie wdrażania
Bardziej szczegółowo