HTML5. Strony mobilne - ebook

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!

Wprowadzenie (11)

1. Przygotowania do nauki interfejsów API HTML5, CSS3 i JavaScriptu (25)

• 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)

2. Przechodzenie na HTML5 (43)

• Składnia języka HTML5 (43)
  • Elementy (44)
  • Atrybuty (45)
  • Atrybuty globalne i atrybuty internacjonalizacji (45)
  • Atrybuty z HTML-a 4, które stały się globalne w HTML5 (48)
  • Nowość w HTML5 - globalne atrybuty związane z dostępnością i elementami interaktywnymi (50)
• Składnia elementów i atrybutów w HTML-u (54)
  • Elementy samozamykające (55)
  • Najlepsze praktyki (56)
  • Wymagane komponenty (57)
  • Elementy ze znacznika
  • Element - dodawanie metadanych (63)
  • Znaczniki meta dla aplikacji mobilnych (64)
  • Wartości charakterystyczne dla producentów urządzeń przenośnych (66)
  • Znacznik dla strony internetowej (67)
  • Znacznik jest przydatny nie tylko dla arkuszy stylów (67)

3. Nowe elementy w HTML5 (75)

4. Formularze internetowe w HTML5 (97)

• Elementy sekcyjne w HTML5 (75)
  • Element
    (77)
  • Element
    (77)
  • Element
    a element
    (78)
  • Element
    (78)
  • Element
    (79)
  • Element
    (79)
  • Element
    (80)
  • Nagłówek i stopka w grze CubeeDoo (80)
  • Stary, ale rzadko używany element
    (81)
  • Grupowanie treści - inne nowe elementy HTML5 (81)
  • Element (82)
  • Elementy
    i (82)
  • Element

    ---

    (83)
  • Zmiany atrybutów elementów
  • i
    1. (83)
• Nowe tekstowe elementy semantyczne w HTML5 (83)
  • Element (84)
  • Element (85)
  • Elementy
  • Element (86)
  • Element (86)
• Zmodyfikowane tekstowe semantyczne elementy (86)
  • Element (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
      i (92)
    • Elementy
      i (94)
    • Elementy XHTML-a niedostępne w HTML5 (95)
  • Wnioski (96)
  • Atrybuty elementu 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 (107)
    • Ponowne wprowadzenie do typów, o których myślisz, że je znasz (108)
    • Tekst - (108)
    • Hasła - (109)
    • Pole wyboru - (109)
    • Przycisk opcji - (110)
    • Przycisk wysyłania - (111)
    • Przycisk resetowania - (112)
    • Plik - (112)
    • Ukryte pole - (114)
    • Rysunki - (114)
    • Przycisk - (114)
    • Określanie stylów dla elementów różnego typu (114)
  • Nowe typy elementu (115)
    • Adres e-mail - (116)
    • Adres URL - (117)
    • Telefon - (118)
    • Liczby - (119)
    • Przedziały - (121)
    • Wyszukiwanie - (122)
    • Kolory - (122)
  • Elementy związane z datą i godziną (123)
    • Daty - (123)
    • Data i godzina - (125)
    • Lokalna data i godzina - (125)
    • Miesiąc - (125)
    • Godzina - (125)
    • Tydzień - (126)
  • Sprawdzanie poprawności formularzy (127)
    • Łatwe poprawianie interfejsu użytkownika za pomocą stylów CSS (130)
  • Nowe elementy formularzy (132)
    • Element i atrybut list (132)
    • Element (134)
    • Element (135)
    • Element (136)
    • Element (137)
  • Inne elementy formularzy (137)
    • Element
      (137)
    • Elementy
      i (138)
    • Elementy ,i (138) Element (138) </li> <li>Element <button> (139) </li> <li>Element <label> (139)</li> </ul> </li> <li>Wnioski (139)</li></ul><p><strong>5. Elementy svg, canvas, audio i video (141)</strong></p><ul> <li>Multimedialne interfejsy API w HTML5 (141)<br> <ul> <li>SVG (141) </li> <li>Dołączanie grafiki SVG do dokumentów (143) </li> <li>Technika Clown Car - SVG i dynamicznie dopasowywana grafika pierwszego planu (144) </li> <li>Nauka SVG (145) </li> <li>Format SVG w grze CubeeDoo (146) </li> <li>Element canvas (148) </li> <li>Element <canvas> a element <svg> (152)</li> </ul> </li> <li>Elementy <audio> i <video> (154)<br> <ul> <li>Typy plików multimedialnych (154) </li> <li>Dodawanie elementu <video> do witryny (155) </li> <li>Atrybuty elementów <video> i <audio> (155) </li> <li>Elementy <video> i <audio> a JavaScript (159) </li> <li>Określanie stylu elementu <video> (161)</li> </ul> </li></ul><p><strong>6. Inne interfejsy API z HTML5 (165)</strong></p><ul> <li>Aplikacje internetowe działające w trybie offline (165)<br> <ul> <li>Czy urządzenie jest podłączone do sieci? (165) </li> <li>Pamięć podręczna aplikacji (166) </li> <li>Pamięć lokalna i pamięć sesji (170) </li> <li>Pamięć oparta na SQL-u i bazach danych (179)</li> </ul> </li> <li>Wzbogacanie user experience (183)<br> <ul> <li>Geolokalizacja (183) </li> <li>Sieciowe wątki robocze (186) </li> <li>Mikrodane (188) </li> <li>Przekazywanie komunikatów między dokumentami (190)</li> </ul> </li> <li>Specyfikacja ARIA (191)<br> <ul> <li>Dostępność (191)</li> </ul> </li> <li>Wnioski (194)</li></ul><p><strong>7. Przechodzenie na CSS3 (195)</strong></p><ul> <li>CSS - definicje i składnia (196)<br> <ul> <li>Składnia CSS (196) </li> <li>Używanie zewnętrznych arkuszy stylów - jeszcze o elemencie <cke:encoded>%3Clink%3E</cke:encoded> (198) </li> <li>Zapytania media (200) </li> <li>Najlepsze praktyki związane ze stylami CSS (202)</li> </ul> </li> <li>Selektory CSS (206)<br> <ul> <li>Podstawowe selektory (207)</li> </ul> </li> <li>Inne selektory CSS3 (210)<br> <ul> <li>Selektory ogólne (210) </li> <li>Stosowanie selektorów (211) </li> <li>Selektory relacyjne - reguły oparte na kolejności kodu (212) </li> <li>Selektory atrybutów (215) </li> <li>Pseudoklasy (219) </li> <li>Pseudoklasy określające stan (222) </li> <li>Pseudoklasy strukturalne (223) </li> <li>Obliczenia dla pseudoklas nth (224) </li> <li>Inne pseudoklasy (227) </li> <li>Pseudoelementy (229)</li> </ul> </li> <li>Inne selektory - model Shadow DOM (232)<br> <ul> <li>Specyficzność ważniejsza od kaskadowości - specyficzność w stylach CSS (233)</li> </ul> </li> <li>Wnioski (234)</li></ul><p><strong>8. Dodatkowe możliwości dzięki wartościom z CSS3 (235)</strong></p><ul> <li>Wartości kolorów w CSS3 (235)<br> <ul> <li>Wartości szesnastkowe (236) </li> <li>Składnia rgb() (237) </li> <li>Dodawanie przezroczystości w formacie RGBA (238) </li> <li>Odcień, nasycenie i jasność - HSL() (239) </li> <li>CMYK (240) </li> <li>Nazwane kolory (240) </li> <li>Słowo kluczowe currentColor (240) </li> <li>Wartości kolorów w przeglądarkach (241)</li> </ul> </li> <li>Jednostki miar w CSS-ie (244)<br> <ul> <li>Wartości określające długość w CSS-ie (244) </li> <li>Kąty, czas i częstotliwość (247) </li> <li>Kąty w CSS-ie (247) </li> <li>Czas (249) </li> <li>Częstotliwość (249)</li> </ul> </li> <li>Porządek GPDL - skrócone deklaracje właściwości i wartości (249) </li> <li>Wnioski (252)</li></ul><p><strong>9. CSS3 - moduły, modele i grafika (253)</strong></p><ul> <li>Właściwości modelu pudełkowego z CSS-a (254)<br> <ul> <li>Obramowanie (255) </li> <li>Właściwość border-style (256) </li> <li>Właściwość border-color (256) </li> <li>Właściwość border-width (257) </li> <li>Model pudełkowy z CSS-a (257) </li> <li>Właściwość box-sizing (259)</li> </ul> </li> <li>Nauka CSS3 (260)<br> <ul> <li>Właściwość border-radius (261)</li> </ul> </li> <li>Gradienty w CSS-ie (264)<br> <ul> <li>Typy gradientu: liniowy lub kołowy (264) </li> <li>Gradienty kołowe (265) </li> <li>Gradienty liniowe (265) </li> <li>Właściwość background-size (274) </li> <li>Gradienty z paskami (277) </li> <li>Powtarzanie gradientów liniowych (278)</li> </ul> </li> <li>Cienie (282)<br> <ul> <li>Cienie dla tekstu (283) </li> <li>Ustawianie tekstu za pomocą właściwości width, overflow i text-overflow (284) </li> <li>Cienie pól (286) </li> <li>Łączenie wszystkich właściwości w grze CubeeDoo (288)</li> </ul> </li></ul><p><strong>10. Transformacje, przejścia i animacje w CSS3 (293)</strong></p><ul> <li>Przejścia w CSS-ie (294)<br> <ul> <li>Właściwość transition-property (295) </li> <li>Właściwość transition-duration (298) </li> <li>Właściwość transition-timing-function (298) </li> <li>Właściwość transition-delay (299) </li> <li>Właściwość skrócona transition (300) </li> <li>Różne przejścia (301)</li> </ul> </li> <li>Transformacje w CSS3 (302)<br> <ul> <li>Właściwość transform-origin (303) </li> <li>Właściwość transform (304) </li> <li>Łączenie wielu transformacji (308) </li> <li>Stosowanie przejść dla transformacji (309) </li> <li>Funkcje transformacji trójwymiarowych (309) </li> <li>Inne właściwości transformacji trójwymiarowych (311) </li> <li>Łączenie wszystkich elementów (313)</li> </ul> </li> <li>Animacje w CSS3 (315)<br> <ul> <li>Klatki kluczowe (317) </li> <li>Przejścia, animacje i wydajność (323)</li> </ul> </li></ul><p><strong>11. CSS w projektowaniu RWD (325)</strong></p><ul> <li>Zapytania media, punkty graniczne i płynny układ (325) </li> <li>Kilka kolumn (326) </li> <li>Grafika obramowania (328)<br> <ul> <li>Ustawianie grafiki obramowania (329)</li> </ul> </li> <li>Model flexbox (334)<br> <ul> <li>Właściwość flex (337) </li> <li>Wykrywanie funkcji za pomocą reguły @supports (339)</li> </ul> </li> <li>Dynamiczne dostosowywanie do wymiarów ekranu (340)<br> <ul> <li>Udostępnianie grafiki (340) </li> <li>Maski w CSS-ie - tworzenie przezroczystych plików JPEG (346) </li> <li>Nagłówek Client-Hints (346)</li> </ul> </li></ul><p><strong>12. Projektowanie aplikacji mobilnych (349)</strong></p><ul> <li>O czym warto pomyśleć przed rozpoczęciem pracy? (350) </li> <li>Kwestie projektowe (351)<br> <ul> <li>Aplikacje zwiększające produktywność (352) </li> <li>Rozrywka - wciągające aplikacje (353) </li> <li>Narzędzia (354) </li> <li>Jaki typ aplikacji będzie odpowiedni dla Ciebie? (355)</li> </ul> </li> <li>Platforma mobilna - bogactwo możliwości (356)<br> <ul> <li>Mały ekran (356) </li> <li>Mniejsza ilość pamięci (356) </li> <li>Jedno okno i jedna aplikacja naraz (358) </li> <li>Minimalna dokumentacja (359) </li> <li>Rozważania związane z programowaniem (359)</li> </ul> </li> <li>Tworzenie rozwiązań dla mobilnych przeglądarek z silnikiem WebKit (360)<br> <ul> <li>Pasek stanu (360) </li> <li>Pasek nawigacji (361) </li> <li>Rysunek startowy (363) </li> <li>Ikony na stronie głównej urządzenia (364)</li> </ul> </li> <li>Minimalizowanie ilości danych wprowadzanych z klawiatury (365) </li> <li>Zachowaj zwięzłość (365)<br> <ul> <li>Stosuj oczywiste rozwiązania (365) </li> <li>Minimalizuj ilość wprowadzanych danych (365) </li> <li>Minimalizuj ilość tekstu (365)</li> </ul> </li> <li>Inne kwestie związane z user experience (366)</li></ul><p><strong>13. Urządzenia przenośne i dotyk (367)</strong></p><ul> <li>Dostosowywanie stron do małych ekranów (367)<br> <ul> <li>Reguła @viewport (368)</li> </ul> </li> <li>Dotknij mnie (368)<br> <ul> <li>Obszary reagujące na dotyk (369) </li> <li>Zdarzenia związane z myszą i dotykiem (369) </li> <li>Fikcyjne i rzeczywiste zdarzenia związane z kliknięciem (372)</li> </ul> </li> <li>Dostęp do sprzętu (375)<br> <ul> <li>Ruch i kierunek poruszania telefonu (375) </li> <li>Stan urządzenia (376) </li> <li>Natywne aplikacje sieciowe, aplikacje w formie pakietów i rozwiązania hybrydowe (378)</li> </ul> </li> <li>Testy (379)</li></ul><p><strong>14. Wydajność w środowisku mobilnym (381)</strong></p><ul> <li>Czas pracy na baterii (381)<br> <ul> <li>Stosuj ciemne kolory (382) </li> <li>Stosuj format JPEG (382) </li> <li>Ogranicz ilość kodu w JavaScripcie (383) </li> <li>Eliminuj liczbę przesyłanych żądań (384) </li> <li>Akceleracja sprzętowa (385)</li> </ul> </li> <li>Opóźnienie (387)<br> <ul> <li>Zmniejszanie liczby żądań HTTP (388) </li> <li>Zmniejszanie wielkości żądań (392) </li> <li>Pamięć (395) </li> <li>Optymalizowanie grafiki (396)</li> </ul> </li> <li>Szybkość reagowania interfejsu użytkownika (401)<br> <ul> <li>Zdarzenia związane z dotykiem (401) </li> <li>Animacje (402)</li> </ul> </li> <li>Wnioski (403)</li></ul><p><strong>A. Selektory CSS-a i specyficzność (405)</strong></p><p><strong>Skorowidz (413)</strong> </p></cke:body></cke:html>