
Standardy programowania / Profesjonalna strona internetowa
Tagi: AJAX, AngularJS, Bootstrap, CSS3, HTML5, jQuery, programowanie, RWD, strony www
Autor: Maciej Skrzypczak
Specjalista WordPress / Responsive Developer / Art Designer
I. HTML5
Wykorzystywany do tworzenia struktury stron internetowych, rozmieszczenia treści. W najnowszym wydaniu dodano wiele elementów:
- tagi do zarządzania treścią: header, nav, section, article, aside, figure, figcaption, video, audio, time, footer,
- typy pól input: number, tel, email, url, search, datetime, date,
- atrybuty elementów formularzy,
- elementy api,
- metody DOM.
Aby zachować zgodność ze starszymi przeglądarkami należy dołączyć bibliotekę:
- HTML5 Shiv (github.com/aFarkas/html5shiv).
II. CSS3
Służący do opisu formy prezentacji strony internetowej, rozmieszenia, wyglądu napisów i tła. Aby zapewnić prawidłowe działanie na popularnych przeglądarkach internetowych należy przeresetować wszystkie wartości styli. Do aktualnej wersji dodano nowe:
- znaczniki i właściwości,
- typy mediów (media-query), umożliwiające dopasowanie wyglądu do telefonów komórkowych i tabletów,
- zestaw ikon (fontawesome.io),
- animacje (daneden.github.io/animate.css).
Aby zachować zgodność ze starszymi przeglądarkami należy dołączyć biblioteki:
- selectivizr (github.com/keithclark/selectivizr),
- respond (github.com/scottjehl/Respond).
III. RWD / Bootstrap
Biblioteka CSS zawierająca zestaw narzędzi ułatwiających tworzenie interfejsu graficznego oraz dostosowanie go do telefonów i tabletów. Jest stosowana do stylizacji nawigacji, tekstów, formularzy.
Biblioteka do pobrania:
- Bootstrap (getbootstrap.com).
IV. jQuery
Biblioteka programistyczna dla języka JavaScript, zapewniająca uproszczoną formę dynamicznych modyfikacji strony internetowej, manipulacji drzewem DOM:
- wykrywanie położenia myszy i stanu przycisków,
- wykrywanie przycisków klawiatury,
- tworzenie, modyfikacja i usuwanie fragmentów kodu HTML,
- budowy akcji, projektowania złożonych animacji.
Biblioteki do pobrania:
- jQuery (jquery.com),
- rozszerzenie jQuery UI (jqueryui.com).
Aby wykorzystać funkcje najnowszych przeglądarek należy dołączyć bibliotekę:
- transit (github.com/rstacruz/jquery.transit), zastępujemy funkcję $.animate przez $.transition, aby zachować zgodność ze starszymi przeglądarkami należy dodać kod:
if (!$.support.transition) $.fn.transition = $.fn.animate;
V. AngularJS
Biblioteka dla języka JavaScript zapewnia budowanie struktury stron internetowych zgodnie ze wzorcem MVC (model-widok-kontroler). Umożliwia przypisanie elementów wejściowych i wyjściowych do modelu, takie dwukierunkowe wiązanie danych redukuje ilość kodu i przyspiesza tworzenie aplikacji.
VI. AJAX
Technika tworzenia strony internetowej, w której interakcja użytkownika z serwerem odbywa się bez konieczności przeładowywania. Umożliwia to bardziej dynamiczną interakcję niż w tradycyjnym modelu, w którym każde żądanie nowych danych wiąże się z przesłaniem całej strony internetowej.
VII. WCAG
Standard dostosowania stron internetowych dla osób niepełnosprawnych:
- opisy linków oraz zdjęć,
- kontrast elementów funkcjonalnych i przekazujących treść musi mieć odpowiedni stosunek jasności tekstu do tła:
- co najmniej WCAG AA, 4,5:1 dla małych tekstów i 3:1 dla dużych tekstów,
- najlepiej WCAG AAA, 7:1 dla małych tekstów i 4,5:1 dla dużych tekstów,
- duża wielkość tekstu, tekst o wielkości przynajmniej 18 pt lub 14 pt pogrubiony,
VIII. SEO
Standard optymalizacji stron internetowych dla wyszukiwarek oraz sieci społecznościowych, opisany w artykule Optymalizacja dla wyszukiwarek oraz sieci społecznościowych.