Standardy programowania / Profesjonalna strona internetowa

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.

POLECANE / Nowoczesne strony WWW HTML5 CSS3 Adobe Muse Wordpress