Frontend development. Przyjazny interfejs użytkownika

Tworzenie intuicyjnego GUI

Przedstawiamy nasz sposób na tworzenie atrakcyjnego interfejsu użytkownika. Materiały opisujące reguły tworzenia interfejsu użytkownika / szablonu strony www opierają się na naszym doświadczeniu, którym pragniemy się podzielić. Nie istnieje jeden uniwersalny, najlepszy sposób na np. stworzenie najlepszej strony www. Najważniejszym aspektem jest jakość wytwarzanego kodu:

  • czytelność,
  • zgodność ze standardami (np. PEP8, w3c)
  • nie powielaj kodu (dry - don't repeat yourself)

Nie wolno zapominać o możliwościach jakie dają gotowe biblioteki i środowiska. Nie wymyślajmy ponownie koła, lecz dokonujmy stopniowej ewolucji i innowacyjności w projektach i interfejsach. Naszą intencją nie jest tworzenie kolejnego kursu CSS, czy HTML a wskazanie na co zwrócić uwagę i być może - jakim narzędzią i rozwiązanim warto się przyjrzeć.

Obecnie standardem tworzenia frontendu jest HTML 5, oraz CSS 3. Wiele osób tworzących frontend dla własnych potrzeb nie zdaje sobie sprawy jakie możliwości dają współczesne technologie.Image - HTML5 & CSS3

  • HTML 5 (ang. HyperText Markup Language) to język znaczników opisujący dokument tekstowy. Od roku 2014 jest standardem w stronach internetowych. W porównaniu do poprzednika ma dokładniejszą specyfiakcję, jak również wzbogacone znaczniki. Warto pamiętać o tym, iż nasz dokument HTML to szkielet dokumentu, który jest interpretowalny po stronie klienta przez przeglądarkę internetową i od jej wersji zależy jak wyświetlona zostanie zawartość.
  • CSS 3 (ang. Cascading Style Sheets) to arkusze stylów wpływające na wygląd dokumentu HTML. Za pomocą odpowiednich znaczników możemy dokonać zmian w wyglądzie wygenerowanego dokumentu HTML. Tu również zwracamy uwagę na generowanie tego wyglądu po stronie przeglądarki gościa naszego serwisu www

Trendy w stronach www 2016

Serwisy internetowe jak Onet, Allegro, czy Wirtualna Polska w związku z gigantycznym przyśpieszeniem łącz internetowych pozwalają sobie na wtrącanie załączników w postaci interesujących zdjęć, czy ilustracji. Przepiękne grafiki i ich odpowiednie przetworzenie sprawiają, iż strony ładują się dalej szybko i łatwo. Zadbanie o zgodność ze standardami wpływa na naszą propozycję w wyszukiwarkach internetowych m.in. Google, stąd piszmy kod starannie.

Nie wolno jednak zapominać o klientach korzystających z naszych portali za pomocą urządzeń mobilnych, często odwiedzających nasz portal podczas podróży. Wykorzystywanie łącza operatora GSM wiąże się często z limitami, czy też słabym zasięgiem. Stąd twórcy serwisów internetowych przygotowują dedykowane wersje swojej usługi dla takich klientów i rozdzielczości ekranów.

Jak zapewne drodzy czytelniku zauważyłeś, obecnie rezygnuje się z dodatków na stronach www w postaci bogatych grafik na rzecz lekkich i intuicyjnych ikonek występujących sporadycznie w serwisach internetowych.

A jednak ... czyli intensywny kurs HTML5 i CSS3 w pigułce

Specjalnie dla osób poszukujących kursu HTML5, CSS3 i Django, stworzyliśmy materiały będące uzupełnieniem / podsumowaniem dla materiałów dostępnych w sieci wraz z odniesieniami do Dla studentów opracowania mogą służyć jako pomoce do wykładów i ćwiczeń. Materiały stworzone są w formie krótkich podsumowanie ułatwiające rozpoczęcie pracy z zagadnieniami związanymi z językiem znaczników HTML5 (ang. Hypertext Markup Language), kaskadowymi arkuszami stylów CSS3 (ang. Cascading Style Sheets) i frameworkiem Django w wersji 1.10.8.

Mimo, że wydano już pierwszą wersję alpha Django 2.0 - znacznie więcej materiałów jest dostępnych dla wersji frameworka 1.X. Nie mniej jednak skupiamy się na Django 1.10.8 a nie 1.11.6, ponieważ część bibliotek nie jest jeszcze kompatybilna.

Materiały ułatwią pracę uczestnikom zajęć PJATK INT / TINSSW.

Mtechnology
Opublikowano:
Aktualizacja:

Więcej o frontend?