standardy-projektowania-stron-internetowych

Standardy programowania stron internetowych

Tagi: AJAX, AngularJS, Bootstrap, CSS3, HTML5, jQuery, RWD, SEO, strona internetowa

Maciej Skrzypczak

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ę:

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:

Aby zachować zgodność ze starszymi przeglądarkami należy dołączyć biblioteki:

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:

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:

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.


Współpracowałem

  • rzeczpospolita
  • uniwersytet-warszawski
  • parkiet
  • plk
  • qualitysolicitors
  • espeo
  • slik
  • dupont-tyvek
  • ekiosk
  • sigma
  • emma
  • caselogic
  • gusmahome
  • oltravel
  • laszkiewicz
  • stilnovisti
  • digimania
  • bong
  • wdf
  • mgfinance
  • tam-pol
  • stage-vision
  • bestpharma
  • ipgo