HTML5 i CSS3 - ebook
HTML5 i CSS3 - ebook
Książka w przystępny sposób przedstawia najważniejsze zagadnienia związane z tworzeniem stron internetowych dostosowanych do różnych urządzeń. Opisano w niej nowoczesne sposoby tworzenia stron internetowych. Praktyczne przykłady pokazują, w jaki sposób zbudować stronę, która będzie prawidłowo wyświetlana w przeglądarkach zainstalowanych zarówno w komputerach, jak i urządzeniach mobilnych.
Dzięki tej książce dowiesz się, jak zaprojektować w pełni funkcjonalną witrynę. Krok po kroku zbudujesz szkielet strony, a następnie stworzysz szatę graficzną i wypełnisz serwis treścią.
Zobaczysz, że Responsive Web Design jest w rzeczywistości bardzo prostym rozwiązaniem, opartym na HTML5 i CSS3, dzięki któremu stronę tworzysz tylko raz. Nie ma potrzeby budowania różnych witryn dla różnych urządzeń.
Responsive Web Design to Twój klucz do sukcesu i skutecznego zaistnienia w internecie.
Spis treści
Wstęp
Rozdział 1. Strony responsywne
Rozdział 2. Podstawy tworzenia stron internetowych
2.1. HTML5 i struktura dokumentu
2.2. Kaskadowe arkusze stylów CSS
Rozdział 3. Narzędzia
3.1. Edytory
3.1.1. Sublime Text
3.1.2. Adobe Brackets
3.2. Testowanie
3.2.1. Wprowadzenie
3.2.2. W przeglądarce
3.2.3. Adobe Inspect CC
Rozdział 4. Projektowanie
4.1. Makieta
4.2. Projekt graficzny
Rozdział 5. Kodowanie elastycznej strony
5.1. Wprowadzenie
5.2. Struktura dokumentu HTML
5.3. Reset stylów CSS
5.4. Znacznik meta viewport
5.5. Organizacja pracy
5.6. Nagłówek strony
5.6.1. Wprowadzenie
5.6.2. Google Fonts
5.6.3. Określenie wysokości elementu-rodzica
5.6.4. Zapytania medialne
5.6.5. Dynamiczna zmiana klas za pomocą Biblioteki jQuery
5.7. Slogan
5.8. Sekcja Oferta
5.8.1. Układ trójkolumnowy
5.8.2. Responsywne obrazy
5.8.3. Własność box-sizing
5.9. Obszar O nas & Blog
5.9.1. Układ dwukolumnowy
5.9.2. Ukrywanie elementów
5.10. Obszar Nasze realizacje
5.11. Stopka
5.11.1. Wprowadzenie
5.11.2. CSS sprite
5.11.3. Dodanie nowego punktu granicznego
5.12. Podstrony
Rozdział 6. Spis znaczników HTML użytych w książce
Rozdział 7. Kod źródłowy
| Kategoria: | Programowanie |
| Zabezpieczenie: |
Watermark
|
| ISBN: | 978-83-01-18394-3 |
| Rozmiar pliku: | 8,6 MB |
FRAGMENT KSIĄŻKI
Szczególnie obecnie sukces zależy od tego, czy istniejemy w internecie. Jeśli nie mamy strony internetowej lub jest ona wykonana w sposób, który nie spełnia aktualnych standardów, szanse, że nawiążemy z kimś współpracę, są raczej minimalne. Oczywiście są branże, które zadają kłam temu stwierdzeniu, jednak to rzadkość.
Projektując strony internetowe, należy pamiętać, że coraz więcej internautów korzysta z urządzeń mobilnych. Tworzenie stron o sztywnych rozmiarach, które bardzo trudno przegląda się za pomocą smartfonów oraz tabletów, niejednokrotnie może użytkowników bardziej do nas zrazić, niż zachęcić do zapoznania się z tym, co mamy do zaoferowania.
Termin Responsive Web Design działa czasami nieco odstraszająco. Jednak nie należy się go bać. W gruncie rzeczy korzystamy tu głównie z języka HTML5 oraz stylów CSS3, które są podstawowymi narzędziami webmasterskimi.
W książce zostały przedstawione wszystkie etapy tworzenia witryny internetowej, począwszy od makiet oraz layoutów, a skończywszy na zakodowaniu serwisu dla różnych rozdzielczości.1 Strony responsywne
Projektowanie stron internetowych to bardzo szeroki temat, do którego podejście w przeciągu ostatnich kilku lat zmieniło się diametralnie. Początkowo strony można było kojarzyć ze statycznym tekstem i zdjęciami, z czasem zaczęto jednak urozmaicać je różnymi elementami animowanymi. Obecnie na stronach www można umieścić również muzykę czy pliki wideo. Okazuje się jednak, że to za mało. Z chwilą, kiedy na rynku pojawiły się smartfony i tablety, tradycyjne strony internetowe przestały się sprawdzać w stu procentach.
Strona internetowa po wczytaniu do przeglądarki w urządzeniach mobilnych zdecydowanie traci na jakości. Często, aby coś przeczytać, musimy dany fragment strony powiększyć, co z kolei sprawia, że inny fragment nie jest widoczny. Przeglądanie takiej strony bywa irytujące i bardzo niewygodne. Aby rozwiązać ten problem, zaczęto tworzyć strony mobilne. Jednak ich wykonanie najczęściej łączy się z powieleniem całej witryny i zaprojektowaniem jej tylko z myślą o urządzeniach mobilnych. To natomiast wiąże się z dwukrotną aktualizacją strony www – pierwsza aktualizacja dotyczy oczywiście wersji witryny przeznaczonej dla komputerów, druga natomiast wersji zaprojektowanej dla urządzeń mobilnych. Jeżeli aktualizacja jest wykonywana stosunkowo rzadko, można próbować projektować tego typu strony.
O wiele lepszym rozwiązaniem jest Responsive Web Design, w skrócie zwane RWD. To technika projektowania stron, dzięki której uzyskujemy optymalne wyświetlanie treści witryny zarówno na monitorze komputera, laptopa, jak i na wyświetlaczach urządzeń mobilnych. Strona responsywna w porównaniu do tradycyjnej o wiele lepiej dopasowuje się do tych urządzeń, ponieważ już na etapie projektowania zakładamy różne rozdzielczości, w jakich w przyszłości będzie wyświetlana.
Zaletą stron responsywnych jest fakt, że tworząc strony dla różnych urządzeń, nie musimy powielać ich treści. Również aktualizacja treści wymaga od nas zmian tylko w jednym miejscu – nie wykonujemy aktualizacji osobno dla komputerów oraz smartfonów i tabletów. Podczas wczytywania strony do okna przeglądarki automatycznie sprawdzana jest rozdzielczość ekranu urządzenia, z którego korzystamy, po czym ładowane są style, które przeznaczyliśmy dla tej właśnie rozdzielczości. Dzięki takiemu rozwiązaniu mamy pewność, że tekst będzie czytelny, a grafiki nie będą większe niż szerokość ekranu.
Równie istotną sprawą jest nawigacja. Zastosowanie wielopoziomowej nawigacji w urządzeniach o stosunkowo niewielkich rozmiarach jest dość kłopotliwe dla użytkownika. Strony responsywne korzystają z bardzo prostej nawigacji, do której dostęp mamy z każdego miejsca witryny. Zazwyczaj, jeśli używamy smartfonu lub tabletu, widoczny jest niewielki przycisk menu. Wystarczy jedno stuknięcie w przycisk, aby menu zostało wyświetlone i abyśmy mogli wybrać w nim inną podstronę.
