WYKŁAD 3 RESPONSYWNE WITRYNY INTERNETOWE CZĘŚĆ 1
|
|
- Izabela Rosińska
- 8 lat temu
- Przeglądów:
Transkrypt
1 WYKŁAD 3 RESPONSYWNE WITRYNY INTERNETOWE CZĘŚĆ 1
2 PROJEKTOWANIE RESPONSYWNE (responsive web design, RWD) Responsive design to rozwiązanie, które polega na wprowadzeniu do arkusza CSS styli warunkowych przy pomocy tak zwanych media queries. Rozwiązanie to wymaga gruntownego przemyślenia układu strony internetowej oraz zaprojektowania jej działania na każdym urządzeniu z osobna. Dzięki temu możliwe jest wykonanie tylko jednej aplikacji internetowej, na której interfejs i prezentacja treści będzie zmieniała się w zależności od potrzeb.
3 PROJEKTOWANIE RESPONSYWNE
4 MEDIA QUERIES Media queries to wyrażenia warunkowe, które umożliwiają rozpoznanie parametrów urządzenia, na którym wyświetlana jest aplikacja internetowa i zastosowanie styli CSS określonych specjalnie dla niego. <link rel="stylesheet" type="text/css" media="screen" href="sansserif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css"> <link rel="stylesheet" media="screen and (color)" href="example.css" />
5 MEDIA QUERIES Media Queries wprowadzone w CSS3 pozwalają zdefiniować style dla poszczególnych elementów w zależności od wielkości okna, orientacji wyświetlacza itd. Wartość jest zazwyczaj podawana jako wartość liczbowa, wyjątki to orientation (portrait lub landscape) oraz grid, który nie przyjmuje żadnej wartości. Dla pozostałych cech to odpowiednio: jednostki długości dla szerokości i wysokości, liczba bitów dla palety i głębi kolorów oraz urządzeń monochromatycznych, stosunek dla proporcji obrazu oraz dpi bądź dpcm dla rozdzielczości.
6 REGUŁY MEDIA warunek1, warunek2, (...), warunek-n { /* kod css dla urządzeń spełniająch podane warunki */ screen { * { font-family: sans-serif } screen and (min-width: 400px) and (max-width: 700px) { not screen and (color) { /* kod css dla urządzeń nie posiadających kolorowego ekranu */ }
7 MEDIA QUERIES Reguły media queries bazują na cechach nośnika, takich jak: Szerokość: width, min-width, max-width Wysokość: height, min-height, max-height Szerokość urządzenia: device-width, min-device-width, max-device-width Wysokość urządzenia: device-height, min-device-height, max-device-height Orientacja: orientation
8 MEDIA QUERIES Proporcje obrazu: aspect-ratio, min-aspect-ratio, max-aspect-ratio Proporcje obrazu urządzenia: device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio Głębia koloru: color, min-color, max-color Paleta kolorów: color-index, min-color-index, max-color-index Urządzenia monochromatyczne: monochrome, min-monochrome, maxmonochrome Rozdzielczość: resolution, min-resolution, max-resolution Technika wyświetlania: scan Siatka: grid
9 MEDIA QUERIES MEDIUM Medium to nic innego, jak typ urządzenia, na którym jest wyświetlany dokument HTML. all - dla wszystkich typów urządzeń aural - dla syntezatorów mowy i dźwięku braille, embossed - dla urządzeń przeznaczonych dla niewidomych handheld - bezprzewodowe urządzenia ręczne print - dla podglądu wydruku projection - dla prezentacji projektorowych screen - dla komputerów z kolorowym ekranem tty - dla urządzeń z ograniczonymi możliwościami wyświetlania tv - dla telewizora
10 MEDIA QUERIES WYBRANE CECHY NOŚNIKÓW 1. Szerokość (analogicznie wysokość) : medium and (width: szerokość) medium and (min-width: szerokość) medium and (max-width: szerokość) 2. Wysokość urządzenia (analogicznie szerokość) medium and (device-height: wysokość) medium and (min-device-height: wysokość) medium and (max-device-height: wysokość) 3. Orientacja (landscape, portrait) medium and (orientation: orientacja)
11 REGUŁA MEDIA QUERIES <head> <meta name="viewport" content="width=device-width, initialscale=1"> </head> width=device-width ustawia szerokość strony adekwatną do szerokości wyświetlacza urządzenia initial-scale=1 ustawia poziom powiększenia podczas pierwszego uruchomienia strony.
12 PUNKTY PRZEŁAMANIA (RWD BREAKPOINTS) /*========== Mobile First Method ==========*/ /* Custom, iphone Retina only screen and (min-width : 320px) { } /* Extra Small Devices, Phones only screen and (min-width : 480px) { } /* Small Devices, Tablets only screen and (min-width : 768px) { } /* Medium Devices, Desktops only screen and (min-width : 992px) { } /* Large Devices, Wide Screens only screen and (min-width : 1200px) { }
13 PUNKTY PRZEŁAMANIA (RWD BREAKPOINTS) /*========== Non-Mobile First Method ==========*/ /* Large Devices, Wide Screens only screen and (max-width : 1200px) { } /* Medium Devices, Desktops only screen and (max-width : 992px) { } /* Small Devices, Tablets only screen and (max-width : 768px) { } /* Extra Small Devices, Phones only screen and (max-width : 480px) { } /* Custom, iphone Retina only screen and (max-width : 320px) { }
14 TWITTER BOOTSTRAP CZĘŚĆ 2
15 TWITTER BOOTSTRAP Twitter Bootstrap to jeden z najbardziej popularnych framework ów do tworzenia responsywnych i przyjaznych urządzeniom mobilnym stron internetowych. Bootstrap to framework oparty o język HTML, kaskadowe arkusze stylów CSS oraz język skryptowy JavaScript. To zestaw gotowych rozwiązań, bibliotek i narzędzi, które można wykorzystać przy tworzeniu stron internetowych albo ich prototypów. Bootstrap v.3 jest całkowicie darmowy.
16 BOOTSTRAP TO: Darmowy front-end owy framework do szybszego i łatwiejszego tworzenia responsywnych aplikacji webowych; Zbiór opartych o HTML i CSS oraz JavaScript wzorców obejmujących: typografię, formularze, przyciski, tabele, nawigację, okna dialogowe i inne; PAMIETAMY! Projektowanie responsywne oznacza tworzenie aplikacji webowych w taki sposób, żeby automatycznie dopasowywały się do rozmiarów urządzenia, na którym są wyświetlane.
17 ZALETY Łatwy w użytku: wymaga jedynie podstawowej wiedzy o HTML i CSS. Responsywny: CSS dostosowany do smartfonów, tabletów i urządzeń desktopowych. Podejście mobile-first: style dla telefonów tworzą podstawę frameworka; Kompatybilny: oferuje wsparcie i kompatybilność pomiędzy wszystkimi popularnymi przeglądarkami.
18 WADY Nadmierna standaryzacja: wszyscy używają Bootstrap, więc strony stają się podobne; Rozmiar: w wersji pełnej główny plik css po zminimalizowaniu zajmuje 120 kb; Brak krytycyzmu nie zawsze potrzeba tak dużej biblioteki do realizacji konkretnego zadania. Konflikty między różnymi bibliotekami, np. jquery-ui.
19 GENEZA Sierpień 2011 r. pierwszy Bootstrap utworzony przez Marka Otto i Jacoba Thorntona z Twittera, 16-kolumnowy system siatki. Luty 2012 r. Bootstrap v.2.0, 12-kolumnowy system siatki, rozwiązania responsywne, LESS. Sierpień 2013 r. Bootstrap v.3.0, poprawiony grid i rozwiązania responsywne, LESS. Czerwiec 2014 r. najpopularniejszy project na GitHubie. Sierpień 2015 r. Bootstrap v.4.0 alpha, SASS, flexbox.
20 INSTALACJA Bootstrap występuje w jednej z trzech form: Jako gotowe pliki JS i CSS Jako pliki źródłowe z LESS Jako pliki źródłowe z SASS Do pobrania na lub przy użyciu: Bowera npm Composera
21 STRUKTURA HEAD <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head>
22 STRUKTURA BODY <body> <h1>hello, world!</h1>. <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
23 CONTAINER I CONTAINER-FLUID Bootstrap wymaga elementu container, który otacza zawartość strony. Element ten służy do określania, jakiej szerokości będzie strona..container - strona będzie konkretnej szerokości zależnej od urządzenia;.container-fluid strona będzie wypełniała całą szerokość ekranu urządzenia. Ważne: Elementów o class= container nie można zagnieżdżać.
24 SYSTEM SIATKI GRID Bootstrap oparty jest o siatkę (grid) składającą się z 12 kolumn. Pojedyncze kolumny można grupować tworząc szersze kolumny. col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col 4 col 4 col 4 col 4 col 8 col 6 col 6 col 12
25 KLASY SIATKI GRID Siatka jest responsywna i automatycznie zmienia się wraz z rozmiarem ekranu kolumny się zwężają lub wchodzą pod siebie w zależności od potrzeb i ustawień. System grid operuje na 4 klasach: xs (dla telefonów) sm (dla tabletów) md (dla urządzeń desktopowych) lg (dla dużych rozdzielości) Klasy można łączyć, tworząc dynamiczne rozwiązania.
26 JAK TO ZROBIĆ? Tworzymy rząd warstwę zawierającą kolumny <div class="row">. W rzędzie tworzymy kolumny suma numerów w kolumnach powinna wynosić maksimum 12 <div class= col-sm-8 >. <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div>
27 PRZYKŁAD 3 KOLUMNY <div class="row"> <div class="col-sm-4">col 4</div> <div class="col-sm-4">col 4</div> <div class="col-sm-4">col 4</div> </div> col 4 col 4 col 4
28 PRZYKŁAD 2 RÓŻNE KOLUMNY Dwie kolumny dla desktopów i po jednej dla tabletów. <div class="row"> <div class="col-sm-12 col-md-4">col 4</div> <div class="col-sm-12 col-md-8">col 8</div> </div> Dektop: col 4 col 8 Tablet: col 4 col 8
29 ELEMENTY BOOTSTRAPA 3 CZĘŚĆ 3
30 NAWIGACJA Bootstrap oferuje własne menu górne, które również jest responsywne: <nav class="navbar navbar-default">
31 NAWIGACJA DODATKOWE KLASY.navbar-inverse.navbar-fixed-top.navbar-fixed-bottom.navbar-right
32 FORMULARZE Bootstrap udostępnia trzy rodzaje formularzy: Formularz wertykalny (domyślnie) Formularz liniowy Formularz horyzontalny Wszystkie trzy rodzaje korzystają z następujących znaczników. <form role="form"> <div class="form-group"> - otacza etykietę i kontrolkę formularza.form-control klasa dodana do <input>, <textarea> oraz <select>
33 PRZYKŁAD FORMULARZ WERTYKALNY
34 PRZYKŁAD FORMULARZ LINIOWY <form class= form-inline > Elementy ułożone do lewej strony.
35 PRZYKŁAD FORMULARZ HORYZONTALNY <form class= form-horizontal > Elementy ułożone z zastosowaniem systemu siatki Bootstrapa..form-group zachowuje się jak.row.
36 PRZYCISKI - TYPY Bootstrap udostępnia 7 rodzajów przycisków: <button type="button" class="btn btn-default">default</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <button type="button" class="btn btn-link">link</button>
37 PRZYCISKI TYPY Każdy z tych typów może (nie musi) otrzymać jeden ze stanów:. active przycisk wygląda jak wciśnięty;.disabled przycisk przestaje być klikalny. <button type="button" class="btn btn-primary active"> Primary button</button> <button type="button" class="btn btn-default active"> Button</button> <button type="button" class="btn btn-primary disabled"> Primary button</button> <button type="button" class="btn btn-default disabled"> Button</button>
38 PRZYCISKI - ROZMIARY Ponadto można korzystać z kilku różnych rozmiarów przycisków..btn-lg.btn-md.btn-sm.btn-xs.btn-block <button type="button" class="btn btn-primary btn-sm">small button</button> <button type="button" class="btn btn-primary btn-lg btnblock">block level button</button>
39 PRZYCISKI DROPDOWN Co ciekawe, Bootstrap oferuje również zestaw przycisków typu dropdown:
40 IKONY Bootstrap posiada również własny zestaw skalowalnych ikon: <span class="glyphicon glyphicon-search"></span>
41 POZOSTAŁE Okna modal Tooltipy Popovers Bages Alerts Images Breadcrumbs Pagination I wiele innych
42 DZIĘKUJĘ ZA UWAGĘ MATERIAŁY POMOCNICZE
Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl
ootstrap 1/15 Bootstrap Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 11 kwietnia 2015 Bootstrap 2/15
PROJEKTOWANIE STRON WWW
Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW dr inż. Robert Banasiak PROJEKTOWANIE STRON WWW RESPONSIVE WEB DESIGN
Responsive Web Design
Responsive Web Design Zmieniamy Internet na plus Adrian Gadzina Kilka słów o mnie Autor bloga 7pl.pl Web is Brutal Miłośnik Androida Pasjonat kolarstwa (MTB + szosa) Programista aplikacji mobilnych i stron
TECHNIKI 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
Idea 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
Dwie perspektywy responsive web design: user experience i front-end developer
Dwie perspektywy responsive web design: user experience i front-end developer M O B I L E T R E N D S C O N F E R E N C E & A W A R D S 2 0 1 3 K r a k ó w 2 1-2 2 l u t y 2 0 1 3 R O Z D Z I A Ł 0 1 Czym
W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:
Projektowanie aplikacji internetowych (zajęcia 6.03.2017 r.) Zajęcia: grupa 3: środa 16:00-17:30 Prowadzący: Dr inż. Marcin Zieliński marcin.zielinski@uj.edu.pl pokój: B-2-33 (Zakład Fizyki Jądrowej) konsultacje:
Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap.
Kod szkolenia: Tytuł szkolenia: FRONT-END Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap. Dni: 5 Opis: Adresaci szkolenia Kurs przeznaczony jest zarówno dla
RESPONSYWNE 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
RESPONSYWNE 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
Systemy internetowe HTML + CSS - dodatki
Systemy internetowe HTML + CSS - dodatki West Pomeranian University of Technology, Szczecin; Faculty of Computer Science HTML 5 Sekcja to tematyczna grupa treści (dane kontaktowe, materiały dydaktyczne,
Danuta 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
Wprowadzenie do PhoneGap / Cordova
Wprowadzenie do PhoneGap / Cordova Urządzenia mobilne a desktopowe W 2010 roku Mary Meeker opublikowała raport, w którym przewidywała, że w 2014 roku ilość użytkowników mobilnych przekroczy liczbę osób
Bootstrap to tzw. front-end framework, czyli platforma ułatwiająca projektantom błyskawiczne przystąpienie do tworzenia interfejsu strony WWW.
Bootstrap Bootstrap to tzw. front-end framework, czyli platforma ułatwiająca projektantom błyskawiczne przystąpienie do tworzenia interfejsu strony WWW. Przygotowanie do pracy z Bootstrapem Przede wszystkim
Responsywne 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;
Szybko, prosto i tanio - ale czy na pewno?
Szybko, prosto i tanio - ale czy na pewno? Krzysztof Ścira Adrian Gadzina Kilka słów o nas Krzysztof Ścira Absolwent studiów pierwszego stopnia i jednocześnie student studiów 2 stopnia na AGH Zawodowo
SEMINARIUM Dwie perspektywy w projektowaniu na Responsive Web Design (User experience i webdeveloper)
Katalizator Innowacji - usługi doradcze dla biznesu realizowane w modelu audytu benchmarkowego. Projekt współfinansowany przez Unię Europejską z Europejskiego Funduszu Rozwoju Regionalnego. Dotacje na
GRID LAYOUT. Waldemar Korłub. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska
GRID LAYOUT Waldemar Korłub Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska Pozycjonowanie elementów na stronie 2 Atrybuty position/float Rozwiązania z czasów przed rewolucją mobilną FlexBox
Studia 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
Laboratorium 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
Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
Układy witryn internetowych
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym
Strona mobilna i strona responsywna w pozycjonowaniu. Mobile-First Index. Spis treści
Spis treści Strona mobilna i strona responsywna w pozycjonowaniu Mobile-First Index Jak sprawdzić, czy strona jest dostosowana do urządzeń mobilnych? Mobile-First Index pod kątem pozycjonowania stron.
Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
Aplikacje internetowe
Temat: Język HTML i style CSS Aplikacje internetowe Pracownia specjalistyczna, studia podyplomowe, rok 2011/2012 1. Stwórz formularz HTML pozwalający na rejestrację użytkownika w aplikacji internetowej.
Bootstrap w 24 godziny / Jennifer Kyrnin. Gliwice, cop Spis treści
Bootstrap w 24 godziny / Jennifer Kyrnin. Gliwice, cop. 2016 Spis treści O autorce 9 Wprowadzenie 11 CZĘŚĆ I PIERWSZE KROKI Z PLATFORMĄ BOOTSTRAP Godzina 1. Co to jest Bootstrap i dlaczego powinieneś tego
Kompresja stron internetowych
Kompresja stron internetowych Patryk Jar Tech 3 Camp, 18 czerwca 2013 r. O mnie Patryk Jar Webdeveloper Nor-sta (nor-sta.eu) yarpo.pl 2 3 Agenda Lepszy kod w przeglądarce Mniej żądań HTTP Mniej danych
Specyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop. 2017 Spis treści O autorach 11 Wprowadzenie 13 CZĘŚĆ I ROZPOCZĘCIE PRACY Lekcja 1. Co oznacza publikowanie treści w sieci
Przygotowanie do nowoczesnego programowania po stronie przeglądarki. (HTML5, CSS3, JS, wzorce, architektura, narzędzia)
Program szkolenia: Przygotowanie do nowoczesnego programowania po stronie przeglądarki (HTML5, CSS3, JS, wzorce, architektura, narzędzia) Informacje: Nazwa: Kod: Kategoria: Grupa docelowa: Czas trwania:
Pierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
Dokument 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ą
LESS - CSS dla leniwych
LESS - CSS dla leniwych Tomasz Dziuda Główny programista w GavickPro dziudek@gmail.com Twitter: @dziudek zebymniezapomnial.tumblr.com Czym jest LESS? Alternatywy 1. SASS (Ruby) 2. Turbine (PHP) 3. CSS
Podstawy (X)HTML i CSS
Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z
Tomasz Grześ. Systemy zarządzania treścią, cz. II
Tomasz Grześ Systemy zarządzania treścią, cz. II Panel administracyjny Panel administracyjny pozwala na zarządzanie wszystkimi elementami pakietu, m.in. zarządzanie użytkownikami, edycję stron, instalowanie
Agenda. Co to jest RWD? Dlaczego warto myśleć o RWD w kontekście aplikacji biznesowych? Przykłady. ericpol.com 2013-06-20 2
Agenda Co to jest RWD? Dlaczego warto myśleć o RWD w kontekście aplikacji biznesowych? Przykłady 2013-06-20 2 Ericpol Ericpol - fakty Na polskim rynku od 22 lat Siedziba w Łodzi Biura: Kraków, Warszawa
Laboratorium 1: Pierwszy projekt w Angular
Laboratorium 1: Pierwszy projekt w Angular https://angular.io/ https://www.jetbrains.com/webstorm/ Ćwiczenie 1. Tworzenie środowiska Praca z aplikacjami frontendowymi wymaga instalacji: Node.js: https://nodejs.org/en/download/
Elementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 4 CSS mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie konceptu stylów tworzenie różnych typów reguł stylów Style służą do zmiany wyglądu elementów
za pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści
E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, 2014 Spis treści Przewodnik po podręczniku 8 Wstęp 10 1. Hipertekstowe języki znaczników 1.1. Elementy i znaczniki
Tworzenie gadgetów Windows Vista/7. Krzysztof Jeliński Toruń 2011
Tworzenie gadgetów Windows Vista/7 Krzysztof Jeliński Toruń 2011 Gadżety Małe specjalizowane aplikacje, które są projektowane tak, aby wykonywały proste zadania (zegary, kalendarze, powiadamiacze RSS lub
Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
Ikona aplikacji. Ikona aplikacji to grafika wyświetlająca się na ekranie ipada. Służy do uruchomienia aplikacji Salesbook.
Wytyczne graficzne Ikona aplikacji Ikona aplikacji to grafika wyświetlająca się na ekranie ipada. Służy do uruchomienia aplikacji Salesbook. 01 Ikona aplikacji 01 Standardowa ikona aplikacji Salesbook
Kaskadowe arkusze stylów (CSS)
Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do
Wykorzystano fragmenty wykładu Krystyny Dziubich GRAFIKA WEKTOROWA. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska.
Wykorzystano fragmenty wykładu Krystyny Dziubich GRAFIKA WEKTOROWA Waldemar Korłub Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska Grafika rastrowa 2 Plik graficzny jako siatka pixeli (bitmapa)
Tworzenie Stron Internetowych. odcinek 6
Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą
Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style="float: left">pierwsza treść, zdjęcie, tabele lub cokolwiek </div>
Wykorzystanie znacznika DIV. Znacznik można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy dowolną treść. Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie
Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37
Spis treści Wstęp 13 CZĘŚĆ I JĘZYK SIECI 17 Rozdział 1 Wprowadzenie do HTML5 19 Tworzenie przy pomocy znaczników: przegląd 20.Wprowadzanie nowych elementów HTML5 21 Korzystanie z kontynuowanych znaczników
Tworzenie Stron Internetowych. odcinek 9
Tworzenie Stron Internetowych odcinek 9 Prosta galeria oparta na HTML Najprostszym sposobem zbudowania galerii zdjęć jest wykorzystanie tylko HTML i CSS. Strona główna galerii składa się miniatur zdjęć,
Sierpień 2015 rozwiązanie plik: index.htlm
Sierpień 2015 rozwiązanie plik: index.htlm strona główna //ustalamy położenie wyświetlania
STRONY INTERNETOWE mgr inż. Adrian Zapała
1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText
2 Podstawy tworzenia stron internetowych
2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument
HTML5 Nowe znaczniki header nav article section aside footer
Specyfikacja HTML5 wprowadza nowe znaczniki pozwalające w łatwy i intuicyjny sposób budować szkielet strony, który przez zmniejszenie ilości kodu jest czytelniejszy i łatwiejszy w utrzymaniu, pozwala poza
Opis wykonania zadania
Zadanie 5.3 Prowadzenie strony internetowej IHAR-PIB dla popularyzacji i promocji wiedzy o postępie biologicznym i wynikach uzyskiwanych w trakcie realizacji programu wieloletniego Cel zadania Popularyzacja
Aplikacje WWW - laboratorium
Aplikacje WWW - laboratorium HTML + CSS Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej składającej się z zestawu stron w języku HTML. Ćwiczenia można wykonać na dowolnym komputerze,
Tworzenie Stron Internetowych. odcinek 5
Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r. i r.) 1) Podstawowa struktura dokumentu hipertekstowego HTML - przypomnienie
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 25.10.2017 r. i 8.11.2017 r.) 1) Podstawowa struktura dokumentu hipertekstowego HTML - przypomnienie witamy w HTML 5
Agenda. Wstęp Zmiany Co nowego dla web developerów? Nowości we front-end developingu Czego spodziewać się może końcowy użytkownik?
Agenda Wstęp Zmiany Co nowego dla web developerów? Nowości we front-end developingu Czego spodziewać się może końcowy użytkownik? Podsumowanie Drupal 8 w liczbach 26 nowych modułów 6 608 plików 247 597
plansoft.org Zmiany w Plansoft.org
Zmiany w Plansoft.org Mapy Google... 1 Tworzenie mapy... 2 Wprowadzanie szerokości i długości geograficznej... 2 Tworzenie mapy... 2 Dostosowanie wyglądu mapy... 3 Ograniczanie liczby zasobów do wyświetlenia
Rys. 3. Kod elementów na stronie po dodaniu kontrolek podstawowych.
1 2 Kontrolki standardowe WP7 Michał Ręczkowicz, Opublikowano: 2012-02-08 http://msdn.microsoft.com/pl-pl/library/rozpoczecie-pracy-z-windows-phone--kontrolki-standardowe W tym samouczku dowiesz się, jakie
Tworzenie stron internetowych w kodzie HTML Cz 5
Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia
Kadry Optivum, Płace Optivum
Kadry Optivum, Płace Optivum Jak seryjnie przygotować wykazy absencji pracowników? W celu przygotowania pism zawierających wykazy nieobecności pracowników skorzystamy z mechanizmu Nowe wydruki seryjne.
Podstawy technologii WWW
Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer
Tworzenie Stron Internetowych. odcinek 5
Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja
WYKŁAD 1 TECHNOLOGIE FRONT-END CZĘŚĆ 1
WYKŁAD 1 TECHNOLOGIE FRONT-END CZĘŚĆ 1 TROCHĘ HISTORII strona internetowa Webmaster - grafika, baza, programowanie, layout (Photoshop, MySQL, PHP, HTML, CSS, JS) strona internetowa Grafik - grafika (Photoshop,
Referat z przedmiotu Technologie Internetowe SPIS TREŚCI
SPIS TREŚCI 1.Dwie metody przekazu danych do serwera 2 2.Metoda GET przykład 3 3.Metoda POST przykład 4 4.Kiedy GET a kiedy POST 5 5.Szablony po co je stosować 7 6.Realizacja szablonu własną funkcją 8
PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, 351203 O STRUKTURZE PRZEDMIOTOWEJ
PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, 351203 O STRUKTURZE PRZEDMIOTOWEJ Systemy baz danych 1. 2 Wstęp do baz danych 2. 2 Relacyjny model baz danych. 3. 2 Normalizacja baz danych. 4. 2 Cechy
Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.
Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie
2. Prezentacja wizualna
2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędów
CSS & SASS / SCSS - Wprowadzenie do stylów, techniki zaawansowane oraz preprocesory
Kod szkolenia: Tytuł szkolenia: CSSSASS CSS & SASS / SCSS - Wprowadzenie do stylów, techniki zaawansowane oraz preprocesory Dni: 3 Opis: Adresaci szkolenia Adresatami szkolenia są wszystkie osoby posiadające
Archiwum DG 2016 PL-SOFT
2 1 to kompleksowe narzędzie ochrony Twoich danych genealogicznych utworzonych w programie Drzewo genealogiczne. Aplikacja nie wymaga instalacji na komputerze i jest uruchamiana bezpośrednio z dysku USB.
Mailingi HTML. Specyfikacja techniczna
Mailingi HTML Specyfikacja techniczna Informacje wstępne Grupa Morizon S.A. zastrzega sobie prawo do odmowy emisji materiałów reklamowych bez podania przyczyny, w szczególności gdy ich jakość techniczna
SPECYFIKACJA FORM REKLAMOWYCH
SPECYFIKACJA FORM REKLAMOWYCH Spis treści I. ZAŁOŻENIA OGÓLNE... 3 II. PODSTAWOWE FORMATY REKLAMOWE... 4 III. FORMATY RICH MEDIA... 5 IV. DOBRE PRAKTYKI KREACJE RICH MEDIA... 7 2 I. Założenia ogólne 1.
Cascading Style Sheets
Cascading Style Sheets Dlaczego stosować style? Specyfikacja The World Wide Web Consortium (www.w3c.org) Style wewnętrzne lokalne W sekcji BODY: To jest
I. Dlaczego standardy kodowania mailingów są istotne?
1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego
Rysunek otaczany przez tekst
Tekst i obrazy 1 Rysunek otaczany przez tekst Wprowadzanie obiektu graficznego Rozmiar ramki: width= 200 deklaruje się tylko
Witryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
PORADNIK KODOWANIA: CSS
PORADNIK KODOWANIA: CSS Przygotowane przez Jakuba Skórzyńskiego SPIS TREŚCI Wstęp... 3 Jak zacząć?. 4 Składnia 5 Klasy i unikaty.. 7 Rzeczy ważne 8 Najważniejsze komendy 9 Porady i Triki. 11 2 Wstęp Nazywam
Zadanie 1. Tworzenie nowej "strony sieci WEB". Będziemy korzystad ze stron w technologii ASP.NET.
Zadanie 1. Tworzenie nowej "strony sieci WEB". Będziemy korzystad ze stron w technologii ASP.NET. Ważne! Przy pierwszym uruchomieniu Visual Studio zostaniemy zapytani, jaki ma byd podstawowy język programowania
I. Formatowanie tekstu i wygląd strony
I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:
Efektywne tworzenie aplikacji webowych z wykorzystaniem AngularJS, HTML5 i JavaScript
Kod szkolenia: Tytuł szkolenia: HTML5/ANG Efektywne tworzenie aplikacji webowych z wykorzystaniem AngularJS, HTML5 i JavaScript Dni: 5 Opis: Adresaci szkolenia: Kurs przeznaczony jest dla programistów
Webowy generator wykresów wykorzystujący program gnuplot
Uniwersytet Mikołaja Kopernika Wydział Fizyki, Astronomii i Informatyki Stosowanej Marcin Nowak nr albumu: 254118 Praca inżynierska na kierunku informatyka stosowana Webowy generator wykresów wykorzystujący
Instrukcja platformy wideo
Instrukcja platformy wideo Wstęp Platforma wideo służy do dystrybucji bezpłatnych filmów w Polskim Języku Migowym wyjaśniających osobom Głuchym jak załatwiać sprawy w urzędzie oraz jak wypełniać formularze.
URL: http://www.ecdl.pl
Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo
O stronach www, html itp..
O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)
ABC 2002/XP PL EXCEL. Autor: Edward C. Willett, Steve Cummings. Rozdział 1. Podstawy pracy z programem (9) Uruchamianie programu (9)
ABC 2002/XP PL EXCEL Autor: Edward C. Willett, Steve Cummings Rozdział 1. Podstawy pracy z programem (9) Uruchamianie programu (9) Obszar roboczy programu (10) o Pasek tytułowy (10) o Przyciski Minimalizuj
BIBLIOTEKA BLOKÓW JABLOTRON 100 SYSTEM
BIBLIOTEKA BLOKÓW JABLOTRON 100 SYSTEM Zawartość INORMACJE OGÓLNE... 3 WSTAWIANIE BLOKÓW W PROGRAMIE AutoCAD... 3 UWAGI DOTYCZĄCE WSTAWIANIA I DRUKOWANIA BLOKÓW... 4 Przykład... 5 ZESTAWIENIE BLOKÓW...
Laboratorium 6 Tworzenie bloga w Zend Framework
Laboratorium 6 Tworzenie bloga w Zend Framework Przygotowanie bazy danych 1. Wykonaj skrypt blog.sql, który założy w bazie danych dwie tabele oraz wpisze do nich przykładowe dane. Tabela blog_uzytkownicy
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 12.10.2016 r.) Zajęcia: grupa 2: środa 12:00-13:30 Prowadzący: Dr inż. Marcin Zieliński marcin.zielinski@uj.edu.pl pokój: B-2-33 (Zakład Fizyki Jądrowej) konsultacje:
DODAJEMY TREŚĆ DO STRONY
DODAJEMY TREŚĆ DO STRONY SPIS TREŚCI Pasek narzędzi i wyszukiwarka aplikacji... 2 Dodawanie portletów... 3 Widok zawartości stron... 4 Zawartość portletu... 5 Ikonki wybierz oraz dodaj zawartość stron...
Dostępne nośniki reklamowe
Dostępne nośniki reklamowe Nazwa Wymiar (px) Waga Format Billboard 750x100 40 kb gif, jpg, swf Doublebillboard 750x200 40 kb gif, jpg, swf Widebillboard 950x200 50 kb gif, jpg, swf Skyscraper 120x600 40
1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3
DODAJEMY TREŚĆ DO STRONY 1. Dockbar, CMS + wyszukiwarka aplikacji... 2 2. Dodawanie portletów... 3 Widok zawartości stron... 3 Omówienie zawartości portletu (usunięcie ramki itd.)... 4 3. Ikonki wybierz
Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0
Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0 UWAGA 1: Przed dokonaniem jakichkolwiek zmian, zalecamy skopiować wcześniej kod html modułu do pliku na lokalnym dysku. W przypadku problemów ułatwi
Specyfikacja techniczna form reklamowych na urządzenia mobilne
Specyfikacja techniczna form reklamowych na urządzenia mobilne Aktualizacja: 01.07.2013 Spis treści 1. Zasady ogólne... 3 2. Formy reklamowe w m.interia.pl... 4 2.1. Mobileboard... 4 2.2. High Mobileboard...
Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.
Spis treści: 1 Podstawy pracy z aplikacją... 2 1.1 Układ strony... 2 strona 1 z 7 1 Podstawy pracy z aplikacją InDesign jest następcą starzejącego się PageMakera. Pod wieloma względami jest do niego bardzo
CSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.
Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać