Szukaj na tym blogu

Tworzenie stron

Tworzenie stron wymaga użycia rożnych narzędzi np. edytorów, przeglądarek, programów graficznych i innych wspomagających proces projektowania i edycji.  To również znajomość technologii (HTML, CSS) oraz zasad ich użycia (np. RWD, WCAG)

Zadania:

Tematy:
  • Wytyczne WCAG
  • Projektowanie (logiczne, graficzne, HTML, CSS)
  • Kolorystyka i typografia (identyfikacja)
  • Edytory (kodu, wizualne, grafiki rastrowej i wektorowej)
  • Przeglądarki (w tym narzędzia deweloperskie)
  • Inne (metainformacje, ikona strony)
  • RWD, UI/UX

Projektowanie

Projektowanie logiczne

rozmieszczeniu elementów w konkretnych miejscach witryny

RWD

RWD (ang. Responsive web design)
technika projektowania strony www, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna przeglądarki, na której jest wyświetlany np. przeglądarki, smartfonów czy tabletów
Techniki:
  • stosowanie rozmiarów w procentach (np. obrazów, fontów)
  • reguły warunkowe CSS
  • atrybut <meta name="viewport"...

WCAG

WCAG 
(ang. Web Content Accessibility Guidelines) wytyczne dla dostępności treści internetowych (postrzegalność, funkcjonalność, zrozumiałość, solidność) oraz trzy poziomy ich spełnienia.
Techniki:
  • Aby dostosować stronę internetową dla niewidomych, nadać wyświetlanym za pomocą znacznika img obrazom atrybut alt.
  • Zalecane atrybuty (np. lang w określeniu języka strony lub elementu, title w elemencie skrutu abbr)
  • Inne atrybuty (np. target w elementach a, )

Edytory

Edytory kodu 

Przykładowe edytory formatujące składnię języków programowania (zalecane przez CKE):
  • Notepad ++, 
  • Atom, 
  • Sublime Text, 
  • Brackets, 
  • Visual Studio Code

Edytory wizualne WYSIWYG

  • programy (wycofane z egzaminów zawodowych, obecnie wręcz zakazane)
  • składniki aplikacji internetowych (np. CMS) -

Przykład interaktywny 2. Edytor Ckeditor basic


Edytor WYSIWYG (ang. what you see is what you get) to program wspomagający tworzenie stron internetowych, którego sposób działania można w polskim tłumaczeniu określić jako „otrzymujesz to, co widzisz”.
Programami tego typu są:
  • Adobe Dreamweaver
  • BlueGriffon
  • Ckeditor - aplikacja przeglądarkowa

Inne programy

  • Emulatory przeglądarek (np. Browser Sandbox) umożliwiające testowanie działania witryny internetowej w wielu przeglądarkach i różnych wersjach.
Więcej na:
Aktualizacja
Etykiety: , , , ,