W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:

Wielkość: px

Rozpocząć pokaz od strony:

Download "W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:"

Bogusław Borkowski
7 lat temu
Przeglądów:

1 Projektowanie aplikacji internetowych (zajęcia r.) Zajęcia: grupa 3: środa 16:00-17:30 Prowadzący: Dr inż. Marcin Zieliński pokój: B-2-33 (Zakład Fizyki Jądrowej) konsultacje: każdy środa 9:30-10:30 (+ po umówieniu się przez ). strona: Tematyka zajęć oraz zasady zaliczenia: Do zaliczenia ćwiczeń wymagane będzi przygotowanie 2 pojektów dotyczących poznawanych technologii: A. Projekt indywidualny: Przygotowanie aplikacji wraz z fazą określania wymagań i funkcjonalności (dokumentacją). Projekt w architekturze klient serwer z proponowanym wzorcem projektowym MVC. Projekt powinien uwzględniać przygotowanie elementów front-endu oraz back-endu. B. Projekt zespołowy: 1) Grupy 3-4 osobowe. 2) Najpierw analiza potrzeby biznesowej (omówienie funkcjonalności). 3) Identyfikacji technologii (front-end i back-end). 4) Implementacja z podziałem na etapy z przypisaniem określonych zadań dla członków zespołu. 5) Przygotowanie dokumentacji i prezentacja. Praca w danej osoby w ramach zespołu będzie oceniana indywidualnie. 1) Podstawowa struktura dokumentu hipertekstowego HTML ( Hiper Text Markap Language) Znacznik służy do kwalifikacji obszaru tekstu (w ogólności dowolnej informacji). Kwalifikacja polega na umieszczeniu tekstu pomiędzy znacznikiem otwierającym i znacznikiem zamykającym: <znacznik> Tekst </znacznik> W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje: <znacznik atrybut= " wartość " > Tekst </znacznik> Podstawowa struktura dokumentu HTML (5) wygląda następująco: <!DOCTYPE html> <html lang="pl"> <head>

2 <title> Witamy w HTML 5 </title> <meta charset="utf-8" /> <script src="js_file.js"></script> <link rel="stylesheet" href="css_file.css" /> </head> <body>  <h1> Witamy w HTML 5 </h1> </body> </html> Elementy zaznaczone na czerwono nie są obowiązkowe, ale obecnie bez nich nie da się stworzyć nowoczesnej witryny internetowej. 2) Kaskadowe arkusze stylów - CSS: Pozwalają na oddzielenie warstwy formatu od warstwy danych (treści). Stylizacja strony (witryny) odbywa się w osobnym pliku. W arkuszach stylów stosujemy formułę: selektor1, selektor2,... { cecha1: wartość; cecha2: wartość; cecha3: wartość; ; } Selektor - jest to nazwa identyfikująca znacznik dla którego przeglądarka ma przypisać styl. Cecha - Własność jaką chcemy określić dla danego selektora. Wartość -

3 Przykład użycia klas: <style type="text/css"> h1 { font-family: Verdana; }.wazny { color: blue; }.bwazny { color: red; }.bbwazny {color: green;} </style> // monżna deklarować HEXem // #FFFFFF - biały // # czarny <h1> Tekst standardowy pisany Verdana </h1> <h1 class="wazny"> Tekst wazny </h1> <h1 class="bwazny"> Tekst bardzo wazny </h1> <h1 class="bbwazny"> Tekst bardzo bardzo wazny </h1> 3) Twitter Bootstrap - podstawy użytkowania Biblioteka Bootstrap (a właściwie Twitter Bootstrap) jest zestawem gotowych wzorców i elementów CSS które służą do budowy responsywnych (RWD) stron internetowych. Adres strony projektu to: Biblioteka Bootstrap ma ułatwiać tworzenia responsywnych ale stron internetowych, które będą wyświetlać się na dowolnym urządzeniu (PC, smartphone, tv etc). Dla realizacji tego celu Bootstrap wprowadza system tzw. Gridu (siatki) która dzieli obszar okna przeglądarki na 12 kolumn i dowolną ilośc wierszy. Dzięki temu jest możliwe stworzenie czterech niezależnych widoków na najpopularniejsze szerokości ekranu. Do tego celu wykorzystywana jest klasa podstawowa container. Ma ona cztery możliwości dopasowania się do urządzenia: - Dla szerokości ekranu poniżej 768px, klasa container ustawia automatyczną szerokość dla elementu blokowego. - Dla szerokości powyżej 768px, klasa container ustawia 750px dla elementu blokowego. - Dla szerokości powyżej 992px, klasa container ustawia 970px dla elementu blokowego. - Dla szerokości powyżej 1200px, klasa container ustawia kontener na 1170px dla elementu blokowego. Podstawowy element na stronie klasy container powinien wyglądać następująco: <div class="container"> Treść strony Siatka Booststrap: system ten składa się z wierszy i kolumn w których umieszczane są poszczególne elementy strony. Wiersz pełni rolę lokalizatora poziomego elementów na stronie i powinien być umieszczony w następujący sposób w kontenerze:

4 <div class="container"> <div class="row"> Treść strony Bootstrap dzieli dostępną przestrzeń kontenera w ramach jednego wiersza na 12 kolumn. Po przekroczeniu tej liczby na wiersz kolejna kolumna przejdzie do nowej linii. Dzięki już wspomnianym sztywnemu podziałowi na poszczególne dostępne szerokości ekranu Bootstrap udostępnia 4 rodzaje kolumn: - Komputery PC (duże ekrany > 1200 px, dla tego typu urządzeń mamy dostępną klasę: col-l-*, gdzie zamiast gwiazdki możemy wstawić liczbę od 1-12, która oznacza liczbę kolumn. Kolumny te mają zadaną szerokość dla ekranów powyżej 1200 px. Natomiast jeśli szerokość będzie mniejsza to kolumny ustawią się jedna pod drugą. Należy jednak pamiętać, że w żadnym wypadku nie należy przekroczyć w sumie liczby 12. Tzn. że możemy mieć na stronie np. 1 kolumnę o szerokości 6 jednostek oraz 3 kolumny o szerokości 2 jednostki. W sumie jest to 12 jednostek. Przykładowo: <div class="container"> <div class="row"> <div class="col-lg-1">.col-lg-1... <div class="col-lg-1">.col-lg-1 - Laptopy powyżej 992px: klasa col-md-* zasada jest ta sama co poprzednio (tutaj plusem jest to że ta klasa będzie działać również na PC). - Tablet powyżej 768px: klasa col-sm-*. - Smartphony poniżej 768px: klasa col-xs-*. Istotnym elementem systemu siatki jest możliwość przesuwania kolumn przez wprowadzenie tzw. Offsetu. Podobnie jak poprzednio dostępna jest klasa która przesuwa daną kolumnę o żądaną jednostkę (w ilości kolumn) dla zadanej szerokości ekranu: col-?-offset-*, gdzie? oznacza wybraną szerokość ekrany (lg, md, sm, xs), a gwiazdka liczbę kolumn o ile ma zostać przesunięta dana kolumna. Przykład: <div class="row"> <div class="col-md-4">.col-md-4 <div class="col-md-4 col-md-offset-4">.col-md-4 +.col-md-offset-4 Przesuwamy druga kolumnę w stosunku do pierwszej o 4 jednostki, pamiętając cały czas że suma nie może przekroczyć 12. Wiersze i kolumny można zagnieżdżać. Należy przy tym pamiętać, że każdy nowy zagnieżdżony wiersz znów ma dostępne 12 kolumn które możemy podzielić i zagnieżdżać. Więcej informacji na temat siatki dostępnej jest w dokumentacji Bootstrap:

5 4) Biblioteka jquery ( ) - wprowadzenie Biblioteka napisana w języku JavaScript o lekkim charakterze, obsługująca przestrzenie nazw z mechanizmem łatwej rozszerzalności umożliwiająca manipulowanie elementami struktury DOM (Document Object Model). Aby dodać funkcjonalności biblioteki jquery do naszej aplikacji, musimy ją tą bibliotekę jako skrypt używając znaczników <script>: <!DOCTYPE html> <html> <head> <title>pierwsza strona z jquery</title> <script type= text/javascript src= jquery min.js ></script> </head> <body> <h1>testujemy bibliotekę jquery</h1> </body> </html> Pierwszą funkcją ją możemy napisac jest wyświetlenie komunikatu: <head> <title>pierwsza strona z jquery</title> <script type= text/javascript src= jquery min.js ></script> <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); }); </script> </head> Zaprezentowana konstrukcja: $(document).ready( ); tworzy nowy obiekt na podstawie argumentu document i wykonuje na nim metodę ready(). Jest to skrótowy zapis składni jquery gdzie znak $ wskazuje na przestrzeń nazw jquery. Konstrukcja ta w wersji pełnej wygląda następująco: Dodatkowo metoda ready() jest tak naprawde funkcją obsługi zdarzenia ready, oznaczająca załadowanie całego dokumentu hipertekstowego. Natomiast funkcja która jest przekazywana jako argument funkcji ready() jest tzw. funkcją anonimową, (bez nazwy) i w tym konkretnym wypadku pełni rolę wywołania zwrotnego tzw. callbacka. Jako że większość, metod jquery chemy wykonywać po załadowaniu dokumenty hiperteksotwego można tą konstrukcję skrócić jeszcze bardziej do:

6 $(function(){ alert( Pierwsza operacja jquery ); }); Funkcja ta realizuje proste wyświetlanie komunikaty alert().

Podobne dokumenty

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 02.11.2016 r.) 1) Mediaqueries - szablon podstawowy Przykład z szablonu strony który dostosowuje się w zalezności od dostępnej szerokości ekranu dostępny jest pod