RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub

Podobne dokumenty
RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot

Responsywne strony WWW

GRID LAYOUT. Waldemar Korłub. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska

Wykorzystano fragmenty wykładu Krystyny Dziubich GRAFIKA WEKTOROWA. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska.

Strona mobilna i strona responsywna w pozycjonowaniu. Mobile-First Index. Spis treści

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński

Systemy internetowe HTML + CSS - dodatki

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)

Dwie perspektywy responsive web design: user experience i front-end developer

Spis treści. 1. Szerokość witryny WWW

Responsive Web Design

Zadanie utworzenie szablonu kalkulatora

WYZWANIE modernizacji wyglądu witryny internetowej dostosować działanie strony do standardu Progresywnej Aplikacji opracowanego przez firmę Google

Agenda. Co to jest RWD? Dlaczego warto myśleć o RWD w kontekście aplikacji biznesowych? Przykłady. ericpol.com

Układy witryn internetowych

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: Wersja: 1.

Studia Podyplomowe Grafika Komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.

Dokument hipertekstowy

Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap.

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

PORADNIK KODOWANIA: CSS

PROJEKTOWANIE STRON WWW

Krótki przegląd własności języka CSS

SEMINARIUM Dwie perspektywy w projektowaniu na Responsive Web Design (User experience i webdeveloper)

CSS - layout strony internetowej

Powtórzenie materiału: CSS3 Spis treści

Języki programowania wysokiego poziomu. CSS Wskazówki

PROJEKTOWANIE INTERFEJSÓW

Specyfikacja techniczna form reklamowych na urządzenia mobilne

SPECYFIKACJA FORM REKLAMOWYCH

1 LEKCJA. Definicja grafiki. Główne działy grafiki komputerowej. Programy graficzne: Grafika rastrowa. Grafika wektorowa. Grafika trójwymiarowa

Zaawansowane projektowanie stron w CSS

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści

5.1. Światłem malowane

Bezbolesny wstęp do CSS

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...

Co to jest Responsive Design?

GUI - projektowanie interfejsów

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:

1) Naciśnij i przytrzymaj przez 2 sekundy ikonę z menu głównego, następnie naciśnij Potwierdź.

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści

Responsive Web Design:

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Języki programowania wysokiego poziomu. HTML cz.2.

Tworzenie stron internetowych w kodzie HTML Cz 5

I. Wstawianie rysunków

Specyfikacja techniczna form reklamowych na urządzenia mobilne

Wprowadzenie do PhoneGap / Cordova

Responsive Web Design:

Aplikacja Shoper Appstore Powiązane w koszyku REALIZACJA

Wymagania systemowe dla Qlik Sense. Qlik Sense February 2018 Copyright QlikTech International AB. Wszelkie prawa zastrzeżone.

Tworzenie Stron Internetowych. odcinek 5

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>

I. Formatowanie tekstu i wygląd strony

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Dobre Praktyki Tworzenia Stron Internetowych. Część II: Mobilna wersja strony www

Programowanie aplikacji na urządzenia mobilne

Specyfikacja techniczna form reklamowych na urządzenia mobilne

2 Podstawy tworzenia stron internetowych

Wymagania systemowe dla Qlik Sense. Qlik Sense June 2017 Copyright QlikTech International AB. Wszelkie prawa zastrzeżone.

Do użytku z aplikacjami z funkcją skanowania / czytania kodów QR

MOBILNA BANKOWOŚĆ potrzeba czy moda?

Arkusze stylów CSS Cascading Style Sheets

DOKUMENTY CYFROWE. Waldemar Korłub. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska

Notowania Mobilne wersja Java dotykowa. Instrukcja obsługi programu

Elementy div i style CSS w praktyce

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Wymagania systemowe dla Qlik Sense. Qlik Sense June 2018 Copyright QlikTech International AB. Wszelkie prawa zastrzeżone.

Osadzenie pliku dźwiękowego na stronie www

Operacja macro. czyli jak podpisać zdjęcie i zrobić miniaturę. Tworzymy nową akcję. Anna Góra. Zmiana dpi zdjęcia na 300 piks/cal.

2. MATERIAŁ NAUCZANIA

plansoft.org Zmiany w Plansoft.org

Sieciowe Technologie Mobilne. Laboratorium 4

Pozna j nasze możliwości

Mobilne Aplikacje Multimedialne

URL:

Odtwarzacz multimedialny

Tworzenie Stron Internetowych. odcinek 8

Wymagania systemowe dla Qlik Sense. Qlik Sense 3.0 Copyright QlikTech International AB. Wszelkie prawa zastrzeżone.

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

Specyfikacja techniczna form reklamowych na urządzenia mobilne

Założenia projektu: Projekt ma zadanie pokazać praktyczne zastosowanie App Inventor 2, poprzez stworzenie prostej aplikacji do nauki słówek.

Notowania Mobilne wersja Java. Instrukcja obsługi programu

Notowania Mobilne (wersja BlackBerry)


Odtwarzacz multimedialny

HTML (HyperText Markup Language) hipertekstowy język znaczników

CSS. Kaskadowe Arkusze Stylów

2018/10/16 20:47 1/5 3 Ekrany

Dokument hipertekstowy

CMS, CRM, sklepy internetowe, aplikacje Web

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne

Strona Główna & Kategorie

Laboratorium 1: Szablon strony w HTML5

Visual Studio instalacja

PROJEKTOWANIE STRON WWW W4

kim jesteśmy? jesteśmy członkiem IFES oraz PIPT

Podręcznik Google. Cloud Print. Informacje o usłudze Google Cloud Print. Drukowanie przy użyciu usługi Google. Cloud Print.

Transkrypt:

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 monitorami Laptopy Tablety Smartphony

Klasy urządzeń klienckich Desktopy z zewnętrznymi monitorami Panoramiczne, najczęściej format 16:9 lub 16:10 Powyżej 19 cali Rozdzielczości: 1440x900, 1680x1050, 1920x1080, 2560x1440, 4K, 5K Mysz i klawiatura Laptopy Panoramiczne, najczęściej format 16:9 lub 16:10 Powyżej 12 cali Rozdzielczości: 1366x768, 1280x800 i wyższe Mysz, klawiatura, ekran dotykowy

Klasy urządzeń klienckich Tablety Orientacja pozioma lub pionowa, formaty 4:3, 16:9, 16:10 i inne Od 7 do 12 cali Rozdzielczości: 800x600, 1366x768, 1920x1080 i wyższe Ekran dotykowy Smartphony Najczęściej używane w orientacji pionowej Od 3,5 do 6 cali Rozdzielczości: 480x800, 800x1280, 1080x1920 i wyższe Ekran dotykowy

Desktop vs smartphone Desktop Orientacja pozioma Smartphone Orientacja pionowa 19+ cali ok. 5 cali Mysz i klawiatura Duża moc obliczeniowa Szybkie, stałe łącze Ekran dotykowy Procesory mobilne Internet mobilny

6 Mobile vs desktop

7 Mobilny Internet vs aplikacje mobilne

Co jest nie tak z mobilnym Internetem? Jest do kitu! http://www.theverge.com/2015/7/20/9002721/the-mobile-web-sucks Średni czas ładowania stron w mobilnym Internecie: 8 sekund Dla porównania na desktopie: n Cel dla witryn typu ecommerce (np. sklepy internetowe): 2 s n Cel jaki stawia sobie Google: 0,5 s Z każdą sekundą coraz więcej użytkowników rezygnuje Użytkownicy mobilni są na szczęście bardziej cierpliwi n 6-10 sekund oczekiwania przed porzuceniem strony

Co jest nie tak z mobilnym Internetem? Wiele stron ciągle nie jest dostosowanych do urządzeń mobilnych albo nie jest dostosowanych wystarczająco dobrze Google uwzględnia responsywność witryny wyliczając PageRank Pierwszy iphone nie był wcale smartphonem Nie można było instalować dodatkowych aplikacji Był to feature phone z mobilną przeglądarką Safari n ale strony internetowe nie były gotowe na rewolucję mobilną

Co jest nie tak z mobilnym Internetem? To nie oznacza, że powinniśmy zrezygnować z budowania witryn mobilnych Musimy po prostu robić to lepiej! Wiedzę na temat HTML, CSS, JavaScript można wykorzystać do budowania hybrydowych aplikacji mobilnych Aplikacje publikowane w sklepach, które można instalować na urządzeniu mobilnym

Interfejs nie-responsywny Przykład: 01-not-responsive

Wymagania dla stron mobilnych Wyeliminowanie konieczności skalowania strony i przewijania w poziomie Dopasowanie układu i rozmiaru elementów do obszaru wyświetlania (ang. viewport) przeglądarki mobilnej Dopasowanie rozmiaru czcionek w interfejsie Ograniczenie dystansu od szczytu strony do początku je zasadniczej treści Ograniczenie konieczności przewijania w pionie Optymalizacja pod kątem obsługi palcami, a nie kursorem myszy np. kłopotliwe zdarzenie :hover

Jak spełnić te wymagania? Wymuszenie obszaru renderowania strony o szerokości wyświetlacza: <meta name="viewport" content="width=device-width, initial-scale=1"> Wykorzystanie całej szerokości ekranu np. eliminacja zbędnych marginesów Unikanie wyświetlania wielu elementów sąsiadujących ze sobą w poziomie Unikanie bezwzględnych wymiarów dla elementów determinujących układ strony Ukrywanie elementów poza zasadniczą treścią strony

Jak spełnić te wymagania? Różne zestawy stylów dla różnych urządzeń //style wspólne dla wszystkich urządzeń body { font-family:'signika Negative',sans-serif; /*czcionka*/ } //style dla smartphonów @media (max-width: 768px) { /*...*/ } //style dla tabletów @media (min-width: 768px) and (max-width: 992px) { /*...*/ } //style dla desktopów/laptopów @media (min-width: 992px) { /*...*/ } main.css

Obszar wyświetlania strony Szerokość obszaru wyświetlania w dyrektywie @media nie musi przekładać się na rzeczywistą rozdzielczość wyświetlacza Rzeczywista rozdzielczość ekranu a rozdzielczość efektywna Typowe gęstości ekranów: 72-400 dpi (dots per inch) n Pixel ma różne rozmiary fizyczne w zależności od gęstości ekranu Density-independent pixel/device-independent pixel (dip) n Wirtualna jednostka miary pozwalająca na projektowanie interfejsu aplikacji niezależnie od dpi ekranu n Wyświetlenie jednego dip może wymagać więcej niż jednego pixela rzeczywistego n System operacyjny przelicza ilu pikseli użyć dla każdego dip

Responsywny interfejs Przykład: 02-responsive

Organizacja zestawów stylów CSS Różne podejścia: Osobne zbiory atrybutów dla każdej grupy urządzeń n Często też osobne dokumenty HTML, dedykowane urządzeniom n Optymalizacja interfejsu dla każdej grupy z osobna Desktop-first n Domyślne style dla dużych urządzeń n Małe urządzenia dziedziczą style po dużych n W blokach @media { /* */ } zmieniane są style elementów, które nie spełniają mobilnych wymagań Mobile-first n Domyślne style dla urządzeń przenośnych n Duże urządzenia dziedziczą po małych n W blokach @media { /* */ } optymalizowane są style elementów, które mogą skorzystać na większej przestrzeni

Desktop-first /* style dla desktopów/laptopów */ aside { width: 214px; float: left; } main { width: 690px; margin-left: 242px; } /* style dla urządzeń mobilnych */ @media (max-width: 768px) { main, aside { width: auto; margin: 0px; } aside { float: none; } } /*...*/

Desktop-first Istniejące już strony, do których dodawany jest interfejs dla urządzeń mobilnych Istniejące elementy należy dostosować do mniejszych ekranów Jeśli jakiś element zostanie pominięty, interfejs będzie niepoprawnie wyświetlany na małym ekranie

Mobile-first /* style dla urządzeń mobilnych */ main, aside { width: auto; margin: 0px; } /* style dla desktopów/laptopów */ @media (min-width: 992px) { aside { width: 214px; float: left; } main { width: 690px; margin-left: 242px; } } /*...*/

Mobile-first Większość nowych aplikacji internetowych Jeśli interfejs mieści się na małym ekranie, to tym bardziej zmieści się na dużym Może nie będzie optymalny ale zawsze poprawny! Jeśli jakiś element zostanie pominięty, wyświetli się przynajmniej poprawnie

Pytania?