Tworzenie Stron Internetowych. odcinek 4

Transkrypt

1 Tworzenie Stron Internetowych odcinek 4

2 tabele Tabela służy do uporządkowanego przedstawienia zbioru danych. Oprócz tego klasycznego zastosowania, może byd wykorzystana do układania elementów na stronie. Podstawową strukturę tabeli definiują następujące znaczniki: <table>...</table> - znacznik tabeli... - znacznik wiersza (table row) <td>...</td> - znacznik pojedynczej komórki (table data) np. tabelę o dwóch kolumnach i dwóch rzędach definiujemy: <table> </table> <td>komórka1</td> <td>komórka3</td> <td>komórka2</td> <td>komórka4</td> Liczba komórek w każdym wierszu musi byd taka sama. Elementy stanowiące treśd tabeli lub jej wygląd mogą znajdowad się tylko wewnątrz znaczników <td> i w tytule tabeli. Zaleca się używania wcięd w kodzie tabeli. Ułatwia to jej edycję (przejrzystośd). W komórkach tabel można umieszczad inne elementy HTML, np. akapity, obrazy, listy Tabele można zagnieżdżad, podtabela musi byd umieszczona w <td>.

3 tabele Komórki nagłówkowe <th> Służą do definiowania nagłówków kolumn lub / i wierszy. Praktycznie nie różnią od zwykłych komórek, ale semantycznie mają inne znaczenie. <table> <th> </th> <th>...</th> <th>...</th> <th>...</th> <td>...</td> <td>...</td> <th>...</th> <td>...</td> <td>...</td> </table> Tytuł tabeli Musi znajdowad się bezpośrednio po znaczniku <table>. <table> <caption>tytuł tabeli</caption> (...) </table>

4 tabele Łączenie komórek (colspan i rowspan) Atrybuty te umożliwiają łącznie komórek w pionie i poziomie. Ich użycie zmniejsza ilośd znaczników komórek <td>. Wartośd nadawana tym atrybutom określa liczbę łączonych komórek (n). colspan="n" rowspan="n" Przykład: połączenie dwóch komórek w pierwszym wierszu: <table> <td colspan="2">komórki1,2</td> </table> <td>komórka3</td> <td>komórka4</td> Przykład: połączenie dwóch komórek w pierwszej kolumnie: <table> <td rowspan="2">komórki1,3</td> <td>komórka4</td> </table> <td>komórka2</td>

5 tabele Podział tabeli na sekcje <thead>, <tbody>, <tfoot> Elementy te umożliwiają grupowanie elementów tabeli (wierszy) w częśd nagłówkową, częśd główną i stopkę. W jednej tabeli częśd nagłówkowa i stopka może wystąpid tylko raz. Kolejnośd elemetów <thead>, <tfoot>, <tbody> w <table> musi byd taka, jak jest tu podana. Przykład: <table> <thead> <th>a</th> <th>b</th> <th>c</th> </thead> <tfoot> <td>a</td> <td>b</td> <td>c</td> </tfoot> <tbody> <td>komórka1</td> <td>komórka2</td> <td>komórka3</td> </tbody> </table> W grupę można połączyd dowolną liczbę wierszy. Jeśli zdecydujemy się grupowad wiersze, to każdy wiersz musi się znaleźd w jednej z grup. Grupowanie wierszy ma na celu ich wyróżnienie i łatwiejsze przeglądanie tabeli.

6 tabele Łączenie kolumn w grupy <colgroup> Element <colgroup> i <col> łączą wybrane kolumny w grupę/grupy. Łączenie to pozwala w prosty sposób nadad całej grupie wybrany wygląd. Element ten musi byd umieszczony bezpośrednio po opcjonalnym elemencie <caption>, przed innymi elementami tabeli. <table> <colgroup> <col span="2" style="background-color:green"> <col style="background-color:yellow"> </colgroup> <th>numer</th> <th>nazwa</th> <th>data</th> <td>34768</td> <td>xml</td> <td> </td> </table> Atrybut span określa liczbę kolumn do połączenia w grupę (domyślnie 1). W grupę można połączyd dowolną ilośd kolumn, a w jednej tabeli może byd wiele takich grup.

7 tabele Zagnieżdżanie tabel Tabele można zagnieżdżad w sobie. Tabela (tabele) podrzędna musi znajdowad się w komórkach tabeli nadrzędnej. Zagnieżdżanie może byd wielopoziomowe. <table> <td> <table> <td>...</td> </table> </td> </table>

8 formularze Formularze Formularze umożliwiają przekazywanie danych na serwer. Są sposobem na przepływ informacji od użytkownika do autora. Prosty formularz nie zapewnia bezpieczeostwa przysyłanych danych. Elementami budującymi formularz są <form> oraz pola formularza. Pola przybierają różne postaci. <form> pola formularza </form> Sposób odesłania formularza wskazujemy atrybutem action. Może to byd np. odesłanie na serwer w celu zapisania do pliku/bazy danych lub odesłanie na adres owy: <form action="mailto: adres owy" method="post" enctype="text/plain"> Atrybut method określa sposób przesłania na serwer danych wpisanych w formularz: post wysłanie w body, do przesyłania dużej ilości danych i danych wrażliwych. get wysłanie jako zmienne w URL. Domyślny. Nadaje się do przesyłania małej ilości danych niewrażliwych. Parametr enctype (występuje tylko z post) pozwala zapisad dane uzyskane w formularzu w treśd a w sposób czytelny dla człowieka.

9 formularze Pola formularza tworzone są elementami: <input> umożliwia wpisanie informacji lub wybór opcji. Opis pola <input type="typ" name="nazwa" value="wartośd" /> gdzie name to nazwa pola, value zawiera treśd odsyłanej odpowiedzi (w przypadku pól wyboru odp. z listy), napis na przycisku (dla submit i reset) i tekst domyślny (dla text i password). Atrybut type może mied następujące wartości (przykłady): text pole tekstowe (1 linia) <input type="text" name="imię" value="wpisz imię"> password pole hasła (hasło nie jest szyfrowane) Podaj hasło <input type="password" name="hasło"> radio pole opcji (można wybrad tylko jedną odpowiedź) Wybierz rozmiar <input type="radio" name="rozmiar" value="m"> M checkbox pole wyboru (można wybrad więcej niż jedną odpowiedź) Wybierz kolor <input type="checkbox" name="kolor1" value="niebieski"> niebieski submit wysyłanie formularza (nie posiada atrybutu name, posiada atrybut value) <input type="submit" value="wyślij"> reset wyczyszczenie całego formularza z wprowadzonych danych <input type="reset" value="wyczyść">

10 formularze Pola formularza tworzone są elementami (cd): <label> definiuje opis do pola <input>. Opcjonalny atrybut for pozwala związad opis z polem. <label for="op1">opcja 1</label> <input type="radio" name="wybor" id="op1" value="opcja1"> Lub krócej <label>opcja 1 <input type="radio" name="wybor" value="opcja1"> </label> <textarea> tworzy pole do wpisania tekstu o objętości do 1024 (?) znaków <textarea name="nazwa" rows="x" cols="y" maxlength="n">tekst informujący</textarea> gdzie name jest nazwą pola, rows i cols jego rozmiarem, maxlength maksymalną długością możliwą do wpisania (n znaków). Opcjonalny tekst informujący zostanie wpisany w pole i może to byd jakaś uwaga skierowana od użytkownika.

11 formularze Pola formularza tworzone są elementami (cd): <select> tworzy listę złożoną z kilku opcji do wyboru <select name="nazwa_listy" size="liczba wyświetlanych pozycji" multiple="multiple"> <option value="opcja1">pierwsza opcja</option> <option value="opcja2">druga opcja</option>... </select> gdzie name jest nazwą listy, size ilością wyświetlanych jednocześnie opcji. Jeśli obecny jest atrybut multiple, użytkownik ma możliwośd wybrania wielu opcji jednocześnie. Atrybut value podaje wartośd odpowiedzi, która będzie odesłana. <button> tworzy klikalny przycisk <button type="button" onclick="alert('naciskasz i masz')">naciśnij tu</button> Powyższa linia kodu zawiera JS. Dodatkowe uwagi: Pola formularza można grupowad i opisywad za pomocą <fieldset> i <legend>. Zdania w formularzu, pola, zestawy opcji itd. należy obejmowad jakimiś znacznikami, np. akapitu <p> czy bloku <div>.

12 nowe elementy w HTML5 Nowododane elementy semantyczne (wybrane): <details> zawiera dodatkowe szczegóły, które użytkownik może wyświetlid lub ukryd <summary> dodaje nagłówek do treści zawartej w <details>, jest elementem klikalnym (ukryj/wyświetl zawartośd <details>) <details> <summary>szczegóły wydania</summary> <p> Wydano w roku 2017 przez UWr</p> </details> treśd widoczna treśd ukryta Uwaga: wykorzystując powyższe elementy należy sprawdzid, które przeglądarki i w jakich wersjach je obsługują (

13 tworzenie strony internetowej Jeden z pierwszych kroków przy tworzeniu strony internetowej to zaprojektowanie makiety (szkicu / schematu, wireframe / mock-up / blue print / page schematics). Makieta to instrukcja budowy strony. Zawiera rozmieszczenie najważniejszych elementów strony: przyciski CTA (call to action) / nawigacja, zdjęcia, akapity z tekstem, itd. oraz wyjaśnia ich funkcje. Każdą akcję, którą użytkownik może przeprowadzid na danej stronie musi byd zawarta w makiecie.

14 tworzenie strony internetowej Typy makiet: Makiety lo-fi (oraz Low-fidelity mockups) zawiera podstawowe funkcje. Może byd w formie schematu blokowego lub makiety cieniowanej (gray-box) Makiety hi-fi (High-fidelity mockups) makiety zbliżone do koocowego designu. Pojawiają się tu kolory, zdjęcia, filmy, działające menu, typografia, itd. Makiety można tworzyd różnymi narzędziami, od ołówka i papieru po dedykowane oprogramowanie. Przed makietowaniem należy określid zawartośd / funkcjonalności strony, możliwośd wykonania technologicznego i wygląd. Makietowanie wykonuje zwykle projektant specjalista do spraw użyteczności (user experience / usability).

15 tworzenie układu strony Do tej pory układ strony budowany był na <div> z atrybutem id, np. <div id="header"> nagłówek </div> <div id="menu"> menu nawigacyjne </div> <div id="content"> treść główna strony </div> <div id="footer"> stopka </div> W HTML5 dostępne są nowe (blokowe) elementy semantyczne służące budowaniu układu stron internetowych. Te elementy to: <header> zawiera nagłówek strony, wprowadzenie do niej (może byd tekst lub obraz) <nav> definiuje zestaw odnośników będących menu nawigacyjnym <section> element definiujący części dokumentu (np. rozdział) <article> element zawierający treśd niezależną, mogącą istnied bez reszty strony (np. wpis na forum, komentarz, news) <aside> definiuje zawartośd poboczną, ale związaną tematyczne z resztą strony (np. przypisy) <footer> zawiera informację na temat samej strony (np. podaje autora, zasady wykorzystania treści, dane kontaktowe, ) Więcej o układzie strony przy CSS.

16 tworzenie układu strony Menu nawigacyjne tworzymy wykorzystując listę nieuporządkowaną <ul> (poprawnośd semantyczna). Przykład: <ul> <li><a href="index.html">strona główna</a></li> <li><a href="metody.html">metody pomiarowe</a></li> <li><a href="odnosniki.html">odnośniki</a></li> <li><a href="kontakt.html">kontakt</a></li> </ul>

17 co jest teraz modne w projektowaniu? Ważne cechy nowoczesnej strony internetowej: nowoczesne technologie tworzenie stron w najnowszych standardach (HTML5, CSS3) i poprawnym kodem responsywnośd (Responsive Web Design) automatyczne dostosowanie układu strony do urządzenia wyświetlającego długa strona (longpage) ograniczenie/zastąpienie podstron na rzecz jednej długiej strony (przewijanie zamiast klikania); długa strona główna przedstawia zawartośd przeglądową, szczegóły mogą byd prezentowane na podstronach. pływająca nawigacja menu nawigacyjne przyklejone do krawędzi ekranu, stale dostępne przy przewijaniu strony

18 co jest teraz modne w projektowaniu? Ważne cechy nowoczesnej strony internetowej, cd: duże zdjęcia bardzo dobrej jakości duże zdjęcia dla przykucia uwagi użytkownika i minimalistyczny wygląd elementów towarzyszących (menu), szczegółowa zawartośd przeniesiona do dalszej części strony typografia krój czcionki jako element graficzny oraz duże wyróżniające się nagłówki minimalizm, plaski deseo (flat design) tylko kluczowe elementy w układzie strony, proste kształty i mała liczba kolorów; istotna jest czytelnośd a nie barokowe ozdobniki, cieniowania, pseudo 3D, itd. przyciski widma uproszczone przyciski nawigacji/odnośników: tekst, ramka, przezroczyste tło ikony zastąpienie niektórych tekstów i zdjęd ikonami dla zwiększenia czytelności i ułatwienia nawigacji ruch animacje elementów strony (z umiarem) Przykładowe źródło czcionek fonts.google.com