HTML5. Strony mobilne

HTML5. Strony mobilne

by Estelle Weyl
Released May 2014
Publisher(s): Helion
ISBN: 97888324689125

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

W trakcie lektury zaczniesz poznawać składnię oraz możliwości HTML, przygotujesz środowisko pracy oraz zdobędziesz potrzebne narzędzia. Kolejne rozdziały to obowiązkowa dawka informacji na temat tworzenia formularzy oraz korzystania z elementów svg, canvas, audio i video. HTML5 dostarcza wielu nowych narzędzi, pozwalających m.in. sprawdzić stan połączenia z siecią, przechowywać dane na komputerze użytkownika lub uzyskać informację o jego lokalizacji. Dzięki tej książce opanujesz je w mig. W tym podręczniku znajdziesz również obszerny opis kaskadowych arkuszy stylów w wersji 3. Pozwolą Ci one błyskawicznie wprowadzać atrakcyjne dla oka efekty. Książka ta jest genialnym źródłem informacji dla wszystkich pasjonatów tworzenia stron i aplikacji internetowych.

Table of contents

  1. HTML5. Strony mobilne
  2. Wprowadzenie
    1. Aplikacje natywne i sieciowe
      1. Przemówienie motywujące (o tym, jak zrezygnować ze starego Internet Explorera)
      2. Dostępne przeglądarki
      3. Aplikacje sieciowe a aplikacje natywne — krótka historia
      4. Udostępnienie pakietu SDK — początek niezależnych aplikacji
    2. Co nowego? Nowe elementy i interfejsy API
      1. Znaczniki do grupowania semantycznego
      2. Formularze
      3. Elementy svg i canvas
      4. Filmy i dźwięk
      5. Interfejs API do geolokalizacji
      6. Dane i pamięć bez połączenia z siecią
      7. Inne interfejsy API
    3. Co nowego w stylach CSS?
      1. Czcionki dostosowane do sieci
    4. Zagadnienia charakterystyczne dla urządzeń przenośnych
    5. Dlaczego powstała ta książka?
      1. Wielkość ekranu
      2. Cele użytkowników
    6. Zawartość książki
    7. Konwencje stosowane w tej książce
    8. Korzystanie z przykładowego kodu
    9. Podziękowania
  3. 1. Przygotowania do nauki interfejsów API HTML5, CSS3 i JavaScriptu
    1. CubeeDoo — gra na urządzenia przenośne napisana w HTML5
    2. Narzędzia programistyczne
      1. Edytor tekstu
      2. Przeglądarka
      3. Narzędzia do debugowania
      4. Debugery stacjonarne
        1. Okna robocze w przeglądarkach mobilnych
      5. Zdalne debugowanie
        1. Narzędzia diagnostyczne na Androida
        2. Weinre
        3. Używanie debugera weinre
        4. Adobe Edge Inspect i Ghostlab
        5. Debugowanie kodu w JavaScripcie za pomocą Aardwolfa
        6. Debuger w BlackBerry 10
    3. Narzędzia do testowania
      1. Emulatory i symulatory
      2. Narzędzia dostępne w internecie
      3. Telefony
        1. Pracownie z przeglądarkami
        2. iOS
        3. Android
        4. Windows
        5. BlackBerry
        6. Nokia
        7. Kindle
        8. WebOS
      4. Testy zautomatyzowane
  4. 2. Przechodzenie na HTML5
    1. Składnia języka HTML5
      1. Elementy
      2. Atrybuty
      3. Atrybuty globalne i atrybuty internacjonalizacji
        1. Atrybut id
        2. Atrybut class
        3. Atrybut title
        4. Atrybut style
        5. Atrybut lang
        6. Atrybut dir
      4. Atrybuty z HTML-a 4, które stały się globalne w HTML5
        1. Atrybut tabindex
        2. Atrybut accesskey
      5. Nowość w HTML5 — globalne atrybuty związane z dostępnością i elementami interaktywnymi
        1. Atrybut hidden
        2. Atrybut contenteditable
        3. Atrybut contextmenu
        4. Atrybut draggable
        5. Atrybut dropzone
        6. Atrybut spellcheck
        7. Atrybuty związane z modułem ARIA
        8. Niestandardowe atrybuty danych z przedrostkiem data-
        9. Atrybuty itemid, itemprop, itemref, itemscope i itemtype
    2. Składnia elementów i atrybutów w HTML-u
      1. Elementy samozamykające
      2. Najlepsze praktyki
      3. Wymagane komponenty
        1. Deklaracja DTD
        2. Element <html>
        3. Element <head>
        4. Element <title>
        5. Element <body>
      4. Elementy ze znacznika <head>
      5. Element <meta> — dodawanie metadanych
        1. Element <meta charset=“UTF-8”>
        2. Znacznik meta description
        3. Znacznik meta keyword
        4. Znacznik <meta http-equiv=“...”>
      6. Znaczniki meta dla aplikacji mobilnych
        1. Znacznik meta viewport
      7. Wartości charakterystyczne dla producentów urządzeń przenośnych
        1. Wartość apple-mobile-web-app-capable
        2. Wartość apple-mobile-web-app-status-bar-style
        3. Wartość format-detection
      8. Znacznik <base> dla strony internetowej
      9. Znacznik <link> jest przydatny nie tylko dla arkuszy stylów
        1. Elementy <link> dla arkuszy stylów
        2. Atrybuty znacznika <link>
        3. Atrybut media
        4. Atrybut rel
        5. Element <style>
        6. Dodawanie elementu <script> do stron internetowych
        7. Stosowanie elementu <noscript> w przeglądarkach z wyłączoną obsługą JavaScriptu
        8. Znacznik <body> z elementami strony
  5. 3. Nowe elementy w HTML5
    1. Elementy sekcyjne w HTML5
      1. Element <section>
      2. Element <article>
      3. Element <section> a element <article>
      4. Element <nav>
      5. Element <aside>
      6. Element <header>
      7. Element <footer>
      8. Nagłówek i stopka w grze CubeeDoo
      9. Stary, ale rzadko używany element <address>
      10. Grupowanie treści — inne nowe elementy HTML5
      11. Element <main>
      12. Elementy <figure> i <figcaption>
      13. Element <hr>
      14. Zmiany atrybutów elementów <li> i <ol>
    2. Nowe tekstowe elementy semantyczne w HTML5
      1. Element <mark>
      2. Element <time>
      3. Elementy <rp>, <rt> i <ruby>
      4. Element <bdi>
      5. Element <wbr>
    3. Zmodyfikowane tekstowe semantyczne elementy
      1. Element <a>
        1. Obsługa odnośników w urządzeniach przenośnych
      2. Zmiany w elementach tekstowych w porównaniu z HTML-em 4
      3. Niezmodyfikowane elementy
    4. Elementy osadzane
      1. Zmiany w elementach osadzanych
        1. Element <iframe>
        2. Element <img>
        3. Element <object>
        4. Element <param>
        5. Element <area>
        6. Element <embed>
    5. Elementy interaktywne
      1. Elementy <details> i <summary>
      2. Elementy <menu> i <menuitem>
        1. Element <menuitem>
      3. Elementy XHTML-a niedostępne w HTML5
    6. Wnioski
  6. 4. Formularze internetowe w HTML5
    1. Atrybuty elementu <input> oraz innych elementów formularzy
      1. Atrybut type
      2. Atrybut required
      3. Wartości minimalne i maksymalne — atrybuty min i max
      4. Atrybut step
      5. Atrybut placeholder
      6. Atrybut pattern
      7. Atrybut readonly
      8. Atrybut disabled
      9. Atrybut maxlength
      10. Atrybut size
      11. Atrybut form
      12. Atrybut autocomplete
      13. Atrybut autofocus
    2. Typy i atrybuty elementu <input>
      1. Ponowne wprowadzenie do typów, o których myślisz, że je znasz
      2. Tekst — <input type=“text”>
      3. Hasła — <input type=“password”>
      4. Pole wyboru — <input type=“checkbox”>
      5. Przycisk opcji — <input type=“radio”>
      6. Przycisk wysyłania — <input type=“submit”>
      7. Przycisk resetowania — <input type=“reset”>
      8. Plik — <input type=“file”>
      9. Ukryte pole — <input type=“hidden”>
      10. Rysunki — <input type=“image”>
      11. Przycisk — <input type=“button”>
      12. Określanie stylów dla elementów <input> różnego typu
    3. Nowe typy elementu <input>
      1. Adres e-mail — <input type=“email”>
      2. Adres URL — <input type=“url”>
      3. Telefon — <input type=“tel”>
      4. Liczby — <input type=“number”>
      5. Przedziały — <input type=“range”>
      6. Wyszukiwanie — <input type=“search”>
      7. Kolory — <input type=“color”>
    4. Elementy <input> związane z datą i godziną
      1. Daty — <input type=“date”>
      2. Data i godzina — <input type=“datetime”>
      3. Lokalna data i godzina — <input type=“datetime-local”>
      4. Miesiąc — <input type=“month”>
      5. Godzina — <input type=“time”>
      6. Tydzień — <input type=“week”>
    5. Sprawdzanie poprawności formularzy
      1. Łatwe poprawianie interfejsu użytkownika za pomocą stylów CSS
        1. Konfigurowanie dymków z komunikatami o błędach
        2. Używanie stylów do zwiększania użyteczności stron
    6. Nowe elementy formularzy
      1. Element <datalist> i atrybut list
        1. Łagodna degradacja dla elementu <datalist>
      2. Element <output>
        1. CubeeDoo
      3. Element <meter>
      4. Element <progress>
      5. Element <keygen>
    7. Inne elementy formularzy
      1. Element <form>
      2. Elementy <fieldset> i <legend>
      3. Elementy <select>, <option> i <optgroup>
      4. Element <textarea>
      5. Element <button>
      6. Element <label>
    8. Wnioski
  7. 5. Elementy svg, canvas, audio i video
    1. Multimedialne interfejsy API w HTML5
      1. SVG
      2. Dołączanie grafiki SVG do dokumentów
      3. Technika Clown Car — SVG i dynamicznie dopasowywana grafika pierwszego planu
      4. Nauka SVG
      5. Format SVG w grze CubeeDoo
      6. Element canvas
        1. Pierwszy element <canvas>
        2. Przykładowy kod wykorzystujący element <canvas>
      7. Element <canvas> a element <svg>
        1. WebGL
    2. Elementy <audio> i <video>
      1. Typy plików multimedialnych
      2. Dodawanie elementu <video> do witryny
      3. Atrybuty elementów <video> i <audio>
        1. Element <track>
      4. Elementy <video> i <audio> a JavaScript
        1. CubeeDoo
      5. Określanie stylu elementu <video>
        1. Dynamiczne dopasowywanie wielkości obrazu
        2. Co warto wiedzieć o stosowaniu elementu <video>?
  8. 6. Inne interfejsy API z HTML5
    1. Aplikacje internetowe działające w trybie offline
      1. Czy urządzenie jest podłączone do sieci?
      2. Pamięć podręczna aplikacji
        1. Plik manifestu pamięci podręcznej
        2. Aktualizowanie pamięci podręcznej
      3. Pamięć lokalna i pamięć sesji
        1. Porównanie z plikami cookie
        2. Używanie pamięci lokalnej do zwiększania wydajności aplikacji dla urządzeń przenośnych
        3. CubeeDoo
      4. Pamięć oparta na SQL-u i bazach danych
        1. Metody bazy Web SQL
        2. Kod do zarządzania rekordami w CubeeDoo
        3. Baza IndexedDB
    2. Wzbogacanie user experience
      1. Geolokalizacja
      2. Sieciowe wątki robocze
      3. Mikrodane
        1. Mikrodane a mikroformaty
        2. Interfejs API mikrodanych
      4. Przekazywanie komunikatów między dokumentami
        1. Technika CORS
        2. Bezpieczeństwo
    3. Specyfikacja ARIA
      1. Dostępność
    4. Wnioski
  9. 7. Przechodzenie na CSS3
    1. CSS — definicje i składnia
      1. Składnia CSS
      2. Używanie zewnętrznych arkuszy stylów — jeszcze o elemencie <link>
        1. Atrybut media
      3. Zapytania media
        1. window.matchMedia
      4. Najlepsze praktyki związane ze stylami CSS
        1. 1. Minimalizuj liczbę żądań HTTP
        2. 2. Stosuj zewnętrzne arkusze stylów
        3. 3. Ujednolicaj pracę przeglądarek za pomocą resetowania lub normalizowania stylów CSS
        4. 4. Używaj możliwie ogólnych stylów, aby łatwo było je zastąpić
        5. 5. Nie stosuj stylów wewnątrzwierszowych ani modyfikatora !important
    2. Selektory CSS
      1. Podstawowe selektory
        1. Selektor typu
        2. Selektor klasy
        3. Selektor identyfikatora
    3. Inne selektory CSS3
      1. Selektory ogólne
        1. Selektor uniwersalny — *
        2. Selektor typów — nazwa elementu
        3. Selektor klas — .klasa
        4. Selektor identyfikatorów — #id
      2. Stosowanie selektorów
      3. Selektory relacyjne — reguły oparte na kolejności kodu
        1. Kombinator potomka — E F
        2. Kombinator dziecka — E > F
        3. Kombinator przyległego brata — E + F
        4. Ogólny kombinator brata — E ~ F
      4. Selektory atrybutów
        1. CubeeDoo
      5. Pseudoklasy
      6. Pseudoklasy określające stan
      7. Pseudoklasy strukturalne
      8. Obliczenia dla pseudoklas nth
        1. Słowa kluczowe odd i even
        2. Pojedyncze elementy
        3. :nth-of-type a :nth-child
        4. Wyrażenia liczbowe
        5. Ćwiczenie
      9. Inne pseudoklasy
        1. Pseudoklasa :target
        2. Pseudoklasa :lang(L)
        3. Pseudoklasa :not(s) (pseudoklasa negacji)
        4. Praktyczny przykład
      10. Pseudoelementy
        1. Pseudoelementy ::before i ::after
        2. Notacja z podwójnym dwukropkiem
    4. Inne selektory — model Shadow DOM
      1. Specyficzność ważniejsza od kaskadowości — specyficzność w stylach CSS
    5. Wnioski
  10. 8. Dodatkowe możliwości dzięki wartościom z CSS3
    1. Wartości kolorów w CSS3
      1. Wartości szesnastkowe
      2. Składnia rgb()
      3. Dodawanie przezroczystości w formacie RGBA
      4. Odcień, nasycenie i jasność — HSL()
      5. CMYK
      6. Nazwane kolory
      7. Słowo kluczowe currentColor
      8. Wartości kolorów w przeglądarkach
        1. Którą składnię powinno się stosować do podawania kolorów?
    2. Jednostki miar w CSS-ie
      1. Wartości określające długość w CSS-ie
        1. Jednostki dpi, dpx i dppx
        2. CubeeDoo
      2. Kąty, czas i częstotliwość
      3. Kąty w CSS-ie
        1. Stopnie
        2. Grady
        3. Radiany
        4. Kąty pełne
      4. Czas
      5. Częstotliwość
        1. CubeeDoo
    3. Porządek GPDL — skrócone deklaracje właściwości i wartości
    4. Wnioski
  11. 9. CSS3 — moduły, modele i grafika
    1. Właściwości modelu pudełkowego z CSS-a
      1. Obramowanie
      2. Właściwość border-style
      3. Właściwość border-color
        1. Tworzenie trójkątów w CSS-ie
      4. Właściwość border-width
      5. Model pudełkowy z CSS-a
      6. Właściwość box-sizing
        1. Marginesy
    2. Nauka CSS3
      1. Właściwość border-radius
        1. Używanie właściwości border-radius w grze CubeeDoo do tworzenia przycisków o natywnym wyglądzie z iPhone’a
    3. Gradienty w CSS-ie
      1. Typy gradientu: liniowy lub kołowy
      2. Gradienty kołowe
      3. Gradienty liniowe
        1. Kąty i kierunki gradientów
        2. Kolory w gradientach
      4. Właściwość background-size
        1. Wartość DPI a właściwość background-size
      5. Gradienty z paskami
      6. Powtarzanie gradientów liniowych
        1. Gradienty w grze CubeeDoo
        2. Kilka grafik tła
        3. Atrakcyjne przyciski i „twarde” punkty zmiany koloru
        4. Narzędzia do tworzenia gradientów
    4. Cienie
      1. Cienie dla tekstu
      2. Ustawianie tekstu za pomocą właściwości width, overflow i text-overflow
        1. Właściwość text-overflow
        2. Właściwość white-space
      3. Cienie pól
      4. Łączenie wszystkich właściwości w grze CubeeDoo
  12. 10. Transformacje, przejścia i animacje w CSS3
    1. Przejścia w CSS-ie
      1. Właściwość transition-property
      2. Właściwość transition-duration
      3. Właściwość transition-timing-function
      4. Właściwość transition-delay
      5. Właściwość skrócona transition
      6. Różne przejścia
    2. Transformacje w CSS3
      1. Właściwość transform-origin
      2. Właściwość transform
        1. Funkcja translate()
        2. Funkcja translateX()
        3. Funkcja translateY()
        4. Funkcja scale()
        5. Funkcja scaleX()
        6. Funkcja scaleY()
        7. Funkcja rotate()
        8. Funkcja rotateX()
        9. Funkcja rotateY()
        10. Funkcja skew()
        11. Funkcja skewX()
        12. Funkcja skewY()
      3. Łączenie wielu transformacji
        1. Funkcja matrix()
      4. Stosowanie przejść dla transformacji
      5. Funkcje transformacji trójwymiarowych
        1. Funkcja translate3d()
        2. Funkcja translateZ()
        3. Funkcja scale3d()
        4. Funkcja scaleZ()
        5. Funkcja rotate3d()
        6. Funkcja perspective()
      6. Inne właściwości transformacji trójwymiarowych
        1. Jeszcze o właściwości transform-origin
        2. Właściwość perspective
        3. Właściwość transform-style
        4. Właściwość backface-visibility
      7. Łączenie wszystkich elementów
    3. Animacje w CSS3
      1. Klatki kluczowe
        1. Stosowanie animacji
        2. Animacja z odbijającą się kulką
        3. Animacje z wykorzystaniem sprite’ów
        4. Animacje w grze CubeeDoo
      2. Przejścia, animacje i wydajność
  13. 11. CSS w projektowaniu RWD
    1. Zapytania media, punkty graniczne i płynny układ
    2. Kilka kolumn
    3. Grafika obramowania
      1. Ustawianie grafiki obramowania
        1. Właściwość border-image-source
        2. Właściwość border-image-slice
        3. Właściwość border-image-width
        4. Właściwość border-image-outset
        5. Właściwość border-image-repeat
        6. Właściwość skrócona border-image
    4. Model flexbox
      1. Właściwość flex
      2. Wykrywanie funkcji za pomocą reguły @supports
    5. Dynamiczne dostosowywanie do wymiarów ekranu
      1. Udostępnianie grafiki
        1. Retina® — wyświetlacze o wysokiej rozdzielczości
        2. Właściwość background-size
        3. Identyfikatory URI danych
        4. Sprite’y
        5. Wywołanie image-set()
        6. Czcionki z ikonami
      2. Maski w CSS-ie — tworzenie przezroczystych plików JPEG
      3. Nagłówek Client-Hints
  14. 12. Projektowanie aplikacji mobilnych
    1. O czym warto pomyśleć przed rozpoczęciem pracy?
    2. Kwestie projektowe
      1. Aplikacje zwiększające produktywność
      2. Rozrywka — wciągające aplikacje
        1. Zabawne aplikacje rozrywkowe
        2. Poważne aplikacje rozrywkowe
      3. Narzędzia
      4. Jaki typ aplikacji będzie odpowiedni dla Ciebie?
    3. Platforma mobilna — bogactwo możliwości
      1. Mały ekran
      2. Mniejsza ilość pamięci
        1. Zarządzanie pamięcią
      3. Jedno okno i jedna aplikacja naraz
      4. Minimalna dokumentacja
      5. Rozważania związane z programowaniem
    4. Tworzenie rozwiązań dla mobilnych przeglądarek z silnikiem WebKit
      1. Pasek stanu
      2. Pasek nawigacji
        1. User experience związany z paskiem nawigacji
        2. Wielkość i kolor paska nawigacji
      3. Rysunek startowy
      4. Ikony na stronie głównej urządzenia
    5. Minimalizowanie ilości danych wprowadzanych z klawiatury
    6. Zachowaj zwięzłość
      1. Stosuj oczywiste rozwiązania
      2. Minimalizuj ilość wprowadzanych danych
      3. Minimalizuj ilość tekstu
    7. Inne kwestie związane z user experience
  15. 13. Urządzenia przenośne i dotyk
    1. Dostosowywanie stron do małych ekranów
      1. Reguła @viewport
    2. Dotknij mnie
      1. Obszary reagujące na dotyk
      2. Zdarzenia związane z myszą i dotykiem
        1. Zdarzenia związane z urządzeniami wskazującymi
        2. Zdarzenia związane z dotykiem
        3. Wykrywanie funkcji na potrzeby zdarzeń związanych z dotykiem
      3. Fikcyjne i rzeczywiste zdarzenia związane z kliknięciem
        1. Kolor wyróżniający dotknięty element
        2. Usuwanie okien dialogowych dla zaznaczonego tekstu
        3. Usuwanie okien dialogowych dla grafiki
        4. Blokowanie przesuwania strony
        5. Właściwość onTouchEnd
        6. Dotknięcia w celu przewijania
    3. Dostęp do sprzętu
      1. Ruch i kierunek poruszania telefonu
      2. Stan urządzenia
        1. Połączenie sieciowe
        2. Bateria
        3. Inne interfejsy API
      3. Natywne aplikacje sieciowe, aplikacje w formie pakietów i rozwiązania hybrydowe
        1. Projekt Apache Cordova (dawniej PhoneGap)
        2. Sencha Touch
        3. Appcelerator Titanium
    4. Testy
  16. 14. Wydajność w środowisku mobilnym
    1. Czas pracy na baterii
      1. Stosuj ciemne kolory
      2. Stosuj format JPEG
      3. Ogranicz ilość kodu w JavaScripcie
      4. Eliminuj liczbę przesyłanych żądań
      5. Akceleracja sprzętowa
        1. Unikaj ponownego wyświetlania i obliczanie układu elementów
    2. Opóźnienie
      1. Zmniejszanie liczby żądań HTTP
        1. Pamięć podręczna przeglądarki
        2. Wspólny plik z kodem w JavaScripcie
        3. Jeden arkusz stylów
        4. Sprite’y z rysunkami
        5. Kompresja grafiki
        6. Identyfikatory URI z danymi i grafika zapisywana wewnątrzwierszowo
        7. Ikony i zestawy znaków
        8. Analizowanie żądań sieciowych
      2. Zmniejszanie wielkości żądań
        1. Minimalizowanie zasobów tekstowych
        2. Kompresowanie plików binarnych
        3. Pakuj wszystkie pliki
        4. Zmniejszanie wielkości rysunków
        5. Rezygnacja z platform JavaScriptu
        6. Minimalizowanie liczby plików cookie
        7. Odraczaj pobieranie niezależnych skryptów
        8. Antywzorce z obszaru wydajności
      3. Pamięć
      4. Optymalizowanie grafiki
        1. Ocenianie korzyści stosowania stylów CSS
        2. Wady i zalety stosowania procesora graficznego
        3. Okno robocze — to, że czegoś nie widać, nie oznacza, że nie sprawia to problemów
        4. Minimalizowanie modelu DOM
        5. Zarządzanie pamięcią
    3. Szybkość reagowania interfejsu użytkownika
      1. Zdarzenia związane z dotykiem
      2. Animacje
    4. Wnioski
  17. A. Selektory CSS-a i specyficzność
    1. Selektory z CSS3
    2. Ściąga z selektorami CSS-a
    3. Specyficzność selektorów CSS-a
    4. Selektory z CSS4
  18. B. O autorze
  19. Indeks
  20. Kolofon
  21. Copyright

Product information

  • Title: HTML5. Strony mobilne
  • Author(s): Estelle Weyl
  • Release date: May 2014
  • Publisher(s): Helion
  • ISBN: 97888324689125