HTML5 Strony mobilne

Autor: Estelle Weyl

ISBN: 978-83-246-8912-5

Ilość stron: 440

Data wydania: 07/2014

Format: 168x237

Wydawnictwo: HELION

Wykorzystaj potencjał HTML5 na urządzeniach mobilnych!

HTML5 to prawdziwa rewolucja w świecie stron WWW i aplikacji internetowych. Jego potencjał oraz możliwości zaskoczyły niejedną osobę. Wykorzystywany jest do tworzenia atrakcyjnych, intuicyjnych i dynamicznych stron WWW. To nie wszystko! Dzięki HTML5 i CSS3 możesz także stworzyć aplikację działającą na urządzeniach z systemami Android lub iOS. Chcesz zobaczyć, jak to osiągnąć?

Jeśli tak, to trafiłeś na świetną książkę, która wprowadzi Cię w świat nowoczesnych stron i aplikacji. 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.

Dzięki tej książce:
• poznasz składnię HTML5 i CSS3
• zaznajomisz się z możliwościami API
• zbudujesz zaawansowaną stronę lub mobilną aplikację internetową

Sprawdź, jak stworzyć aplikację internetową działającą na platformie Android lub iOS.

Spis treści:

Wprowadzenie (11)

CubeeDoo - gra na urządzenia przenośne napisana w HTML5 (26)
Narzędzia programistyczne (28)

Edytor tekstu (28)
Przeglądarka (28)
Narzędzia do debugowania (29)
Debugery stacjonarne (30)
Zdalne debugowanie (32)

Narzędzia do testowania (37)

Emulatory i symulatory (38)
Narzędzia dostępne w internecie (39)
Telefony (40)
Testy zautomatyzowane (42)

Elementy (44)
Atrybuty (45)
Atrybuty globalne i atrybuty internacjonalizacji (45)
Atrybuty z HTML-a 4, które stały się globalne w HTML5 (48)

Elementy samozamykające (55)
Najlepsze praktyki (56)
Wymagane komponenty (57)
Elementy ze znacznika <head> (62)
Element <meta> - dodawanie metadanych (63)
Znaczniki meta dla aplikacji mobilnych (64)
Wartości charakterystyczne dla producentów urządzeń przenośnych (66)
Znacznik <base> dla strony internetowej (67)
Znacznik <link> jest przydatny nie tylko dla arkuszy stylów (67)

Element <section> (77)
Element <article> (77)
Element <section> a element <article> (78)
Element <nav> (78)
Element <aside> (79)
Element <header> (79)
Element <footer> (80)
Nagłówek i stopka w grze CubeeDoo (80)
Stary, ale rzadko używany element <address> (81)
Grupowanie treści - inne nowe elementy HTML5 (81)
Element <main> (82)
Elementy <figure> i <figcaption> (82)
Element <hr> (83)
Zmiany atrybutów elementów <li> i <ol> (83)

Element <mark> (84)
Element <time> (85)
Elementy <rp>, <rt> i <ruby> (85)
Element <bdi> (86)
Element <wbr> (86)

Zmodyfikowane tekstowe semantyczne elementy (86)

Element <a> (86)
Zmiany w elementach tekstowych w porównaniu z HTML-em 4 (88)
Niezmodyfikowane elementy (89)

Elementy osadzane (90)

Zmiany w elementach osadzanych (90)

Elementy interaktywne (92)

Elementy <details> i <summary> (92)
Elementy <menu> i <menuitem> (94)

Wnioski (96)

Atrybuty elementu <input> oraz innych elementów formularzy (99)

Atrybut type (99)
Atrybut required (99)
Wartości minimalne i maksymalne - atrybuty min i max (100)
Atrybut step (101)
Atrybut placeholder (101)
Atrybut pattern (102)
Atrybut readonly (104)
Atrybut disabled (104)
Atrybut maxlength (105)
Atrybut size (105)
Atrybut form (105)
Atrybut autocomplete (106)
Atrybut autofocus (107)

Typy i atrybuty elementu <input> (107)

Ponowne wprowadzenie do typów, o których myślisz, że je znasz (108)
Tekst - <input type="text"> (108)
Hasła - <input type="password"> (109)
Pole wyboru - <input type="checkbox"> (109)
Przycisk opcji - <input type="radio"> (110)
Przycisk wysyłania - <input type="submit"> (111)
Przycisk resetowania - <input type="reset"> (112)
Plik - <input type="file"> (112)
Ukryte pole - <input type="hidden"> (114)
Rysunki - <input type="image"> (114)
Przycisk - <input type="button"> (114)
Określanie stylów dla elementów <input> różnego typu (114)

Nowe typy elementu <input> (115)

Adres e-mail - <input type="email"> (116)
Adres URL - <input type="url"> (117)
Telefon - <input type="tel"> (118)
Liczby - <input type="number"> (119)
Przedziały - <input type="range"> (121)
Wyszukiwanie - <input type="search"> (122)
Kolory - <input type="color"> (122)

Elementy <input> związane z datą i godziną (123)

Daty - <input type="date"> (123)
Data i godzina - <input type="datetime"> (125)
Lokalna data i godzina - <input type="datetime-local"> (125)
Miesiąc - <input type="month"> (125)
Godzina - <input type="time"> (125)
Tydzień - <input type="week"> (126)

Sprawdzanie poprawności formularzy (127)

Łatwe poprawianie interfejsu użytkownika za pomocą stylów CSS (130)

Nowe elementy formularzy (132)

Element <datalist> i atrybut list (132)
Element <output> (134)
Element <meter> (135)
Element <progress> (136)
Element <keygen> (137)

Inne elementy formularzy (137)

Element <form> (137)
Elementy <fieldset> i <legend> (138)
Elementy <select>, <option> i <optgroup> (138)
Element <textarea> (138)
Element <button> (139)
Element <label> (139)

Wnioski (139)

5. Elementy svg, canvas, audio i video (141)

SVG (141)
Dołączanie grafiki SVG do dokumentów (143)
Technika Clown Car - SVG i dynamicznie dopasowywana grafika pierwszego planu (144)
Nauka SVG (145)
Format SVG w grze CubeeDoo (146)
Element canvas (148)
Element <canvas> a element <svg> (152)

Elementy <audio> i <video> (154)

Typy plików multimedialnych (154)
Dodawanie elementu <video> do witryny (155)
Atrybuty elementów <video> i <audio> (155)
Elementy <video> i <audio> a JavaScript (159)
Określanie stylu elementu <video> (161)

Aplikacje internetowe działające w trybie offline (165)

Czy urządzenie jest podłączone do sieci? (165)
Pamięć podręczna aplikacji (166)
Pamięć lokalna i pamięć sesji (170)
Pamięć oparta na SQL-u i bazach danych (179)

Wzbogacanie user experience (183)

Geolokalizacja (183)
Sieciowe wątki robocze (186)
Mikrodane (188)
Przekazywanie komunikatów między dokumentami (190)

Specyfikacja ARIA (191)

Dostępność (191)

Wnioski (194)

7. Przechodzenie na CSS3 (195)

CSS - definicje i składnia (196)

Składnia CSS (196)
Używanie zewnętrznych arkuszy stylów - jeszcze o elemencie <link> (198)
Zapytania media (200)
Najlepsze praktyki związane ze stylami CSS (202)

Selektory CSS (206)

Podstawowe selektory (207)

Inne selektory CSS3 (210)

Selektory ogólne (210)
Stosowanie selektorów (211)
Selektory relacyjne - reguły oparte na kolejności kodu (212)
Selektory atrybutów (215)
Pseudoklasy (219)
Pseudoklasy określające stan (222)
Pseudoklasy strukturalne (223)
Obliczenia dla pseudoklas nth (224)
Inne pseudoklasy (227)
Pseudoelementy (229)

Inne selektory - model Shadow DOM (232)

Specyficzność ważniejsza od kaskadowości - specyficzność w stylach CSS (233)

Wnioski (234)

8. Dodatkowe możliwości dzięki wartościom z CSS3 (235)

Wartości kolorów w CSS3 (235)

Wartości szesnastkowe (236)
Składnia rgb() (237)
Dodawanie przezroczystości w formacie RGBA (238)
Odcień, nasycenie i jasność - HSL() (239)
CMYK (240)
Nazwane kolory (240)
Słowo kluczowe currentColor (240)
Wartości kolorów w przeglądarkach (241)

Jednostki miar w CSS-ie (244)

Wartości określające długość w CSS-ie (244)
Kąty, czas i częstotliwość (247)
Kąty w CSS-ie (247)
Czas (249)
Częstotliwość (249)

Porządek GPDL - skrócone deklaracje właściwości i wartości (249)
Wnioski (252)

9. CSS3 - moduły, modele i grafika (253)

Właściwości modelu pudełkowego z CSS-a (254)

Obramowanie (255)
Właściwość border-style (256)
Właściwość border-color (256)
Właściwość border-width (257)
Model pudełkowy z CSS-a (257)
Właściwość box-sizing (259)

Nauka CSS3 (260)

Właściwość border-radius (261)

Gradienty w CSS-ie (264)

Typy gradientu: liniowy lub kołowy (264)
Gradienty kołowe (265)
Gradienty liniowe (265)
Właściwość background-size (274)
Gradienty z paskami (277)
Powtarzanie gradientów liniowych (278)

Cienie (282)

Cienie dla tekstu (283)
Ustawianie tekstu za pomocą właściwości width, overflow i text-overflow (284)
Cienie pól (286)
Łączenie wszystkich właściwości w grze CubeeDoo (288)

10. Transformacje, przejścia i animacje w CSS3 (293)

Przejścia w CSS-ie (294)

Właściwość transition-property (295)
Właściwość transition-duration (298)
Właściwość transition-timing-function (298)
Właściwość transition-delay (299)
Właściwość skrócona transition (300)
Różne przejścia (301)

Transformacje w CSS3 (302)

Właściwość transform-origin (303)
Właściwość transform (304)
Łączenie wielu transformacji (308)
Stosowanie przejść dla transformacji (309)
Funkcje transformacji trójwymiarowych (309)
Inne właściwości transformacji trójwymiarowych (311)
Łączenie wszystkich elementów (313)

Animacje w CSS3 (315)

Klatki kluczowe (317)
Przejścia, animacje i wydajność (323)

11. CSS w projektowaniu RWD (325)

Zapytania media, punkty graniczne i płynny układ (325)
Kilka kolumn (326)
Grafika obramowania (328)

Ustawianie grafiki obramowania (329)

Model flexbox (334)

Właściwość flex (337)
Wykrywanie funkcji za pomocą reguły @supports (339)

Dynamiczne dostosowywanie do wymiarów ekranu (340)

Udostępnianie grafiki (340)
Maski w CSS-ie - tworzenie przezroczystych plików JPEG (346)
Nagłówek Client-Hints (346)

12. Projektowanie aplikacji mobilnych (349)

O czym warto pomyśleć przed rozpoczęciem pracy? (350)
Kwestie projektowe (351)

Aplikacje zwiększające produktywność (352)
Rozrywka - wciągające aplikacje (353)
Narzędzia (354)
Jaki typ aplikacji będzie odpowiedni dla Ciebie? (355)

Platforma mobilna - bogactwo możliwości (356)

Mały ekran (356)
Mniejsza ilość pamięci (356)
Jedno okno i jedna aplikacja naraz (358)
Minimalna dokumentacja (359)
Rozważania związane z programowaniem (359)

Tworzenie rozwiązań dla mobilnych przeglądarek z silnikiem WebKit (360)

Pasek stanu (360)
Pasek nawigacji (361)
Rysunek startowy (363)
Ikony na stronie głównej urządzenia (364)

Minimalizowanie ilości danych wprowadzanych z klawiatury (365)
Zachowaj zwięzłość (365)

Stosuj oczywiste rozwiązania (365)
Minimalizuj ilość wprowadzanych danych (365)
Minimalizuj ilość tekstu (365)

Inne kwestie związane z user experience (366)

13. Urządzenia przenośne i dotyk (367)

Dostosowywanie stron do małych ekranów (367)

Reguła @viewport (368)

Dotknij mnie (368)

Obszary reagujące na dotyk (369)
Zdarzenia związane z myszą i dotykiem (369)
Fikcyjne i rzeczywiste zdarzenia związane z kliknięciem (372)

Dostęp do sprzętu (375)

Ruch i kierunek poruszania telefonu (375)
Stan urządzenia (376)
Natywne aplikacje sieciowe, aplikacje w formie pakietów i rozwiązania hybrydowe (378)

Testy (379)

14. Wydajność w środowisku mobilnym (381)

Czas pracy na baterii (381)

Stosuj ciemne kolory (382)
Stosuj format JPEG (382)
Ogranicz ilość kodu w JavaScripcie (383)
Eliminuj liczbę przesyłanych żądań (384)
Akceleracja sprzętowa (385)

Opóźnienie (387)

Zmniejszanie liczby żądań HTTP (388)
Zmniejszanie wielkości żądań (392)
Pamięć (395)
Optymalizowanie grafiki (396)

Szybkość reagowania interfejsu użytkownika (401)

Zdarzenia związane z dotykiem (401)
Animacje (402)

Wnioski (403)

A. Selektory CSS-a i specyficzność (405)