strona www bez tajemnic n.
Download
Skip this Video
Download Presentation
Strona www bez tajemnic

Loading in 2 Seconds...

play fullscreen
1 / 96

Strona www bez tajemnic - PowerPoint PPT Presentation


  • 133 Views
  • Uploaded on

Strona www bez tajemnic. SERWIS WWW. Serwis internetowy jest to: „... informacja zapisana na elektronicznych stronach. Składa się z tekstu, obrazów i grafiki. Jest interaktywny.”

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Strona www bez tajemnic' - annis


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
serwis www
SERWIS WWW
  • Serwis internetowy jest to:

„... informacja zapisana na elektronicznych stronach. Składa się z tekstu, obrazów i grafiki. Jest interaktywny.”

„... wirtualne miejsce w Internecie, dostępne za pomocą niepowtarzalnego adresu. Oferuje informacje w postaci tekstowej i graficznej. Daje się przenieść praktycznie na wszystkie dziedziny życia.”

„...najlepszy sposób na szybką i efektywną komunikację z klientem”

„... miejsce na światowej pajęczynie.”

„... najszybszy sposób na dotarcie do potrzebnych informacji”

funkcje witryny internetowej
FUNKCJE WITRYNY INTERNETOWEJ
  • FUNKCJE INFORMACYJNE
  • FUNKCJE WYSZUKIWAWCZE
  • FUNKCJE TRANSAKCYJNE
  • FUNKCJE KOMUNIKACYJNE
  • FUNKCJE DODATKOWE·       
  • Dostarczanie informacji o firmie
  • Opisywanie produktu lub usługi
  • Publikowanie najnowszych wiadomości
  • Przeszukiwanie bazy danych
  • Udostępnianie przetworzonych informacji
  • Składanie zamówień
  • Prowadzenie sprzedaży
  • Wspieranie sprzedaży tradycyjnej
  • Wspieranie działu obsługi klienta
  • Utrzymywanie stałego kontaktu z dostawcamii dystrybutorami
  • Przekazywanie informacji i wiedzy
  • Udostępnianie atrakcyjnych dodatków zwiększających świadomość marki
dlaczego projektujemy nieprawid owo
DLACZEGO PROJEKTUJEMY NIEPRAWIDŁOWO?
  • Model biznesowy,
  • Architektura informacji – odzwierciedlenie struktury firmy,
  • Projekt strony,
  • Tworzenie treści
  • Strategia odwołań – nie jesteśmy wyspą
  • Brak umiejętności
etapy projektowania
ETAPY PROJEKTOWANIA

Faza analityczno-projektowa

Analiza wymagań

Ustalenie wymagań

Ustalenie zasad pracy

Projekt nawigacji

Projekt funkcjonalny

Plan realizacji

Wdrożenie i testy

Utrzymanie

Realizacja

Aktualizacja

Promocja

analiza wymaga
ANALIZA WYMAGAŃ
  • Co chcemy wykonać i dlaczego?
  • Jaki jest cel pracy?
  • Kto będzie tego używał?
  • Czego klient nie lubi, a co lubi na stronach WWW?
  • Jak będziemy mierzyć sukces?
  • O czym chcemy poinformować naszego gościa,
  • Jak chcemy aby nasz gość zachowywał się podczas pobytu na stronie,
  • W jaki sposób zachęcimy gościa do dłuższych i częstszych wizyt na naszych stronach,
  • Gdzie chcemy dalej skierować naszego gościa.
realizacja testowanie wdro enie
REALIZACJA/TESTOWANIE/WDROŻENIE

REALIZACJA

  • Integracja systemu z zakładanymi platformami programowymi i sprzętowymi
  • Zarządzanie zasobami ludzkimi i kontrolowanie procesu implementacji
  • Budowanie i testowanie komponentów/modułów

TESTOWANIE/WDROŻENIE

  • Testowanie końcowe aplikacji jako spójnej całości w rzeczywistym środowisku pracy
  • Poprawianie błędów wykrytych podczas wewnętrznych testów i na podstawie uwag zwrotnych odbiorców
technologie
TECHNOLOGIE
  • Statyczne: HTML
  • Dynamiczne: PHP, ASP, ASP.NET, CGI
  • Dodatkowe: DHTML, Javascript, Ajax, Java, Flash
niezb dne narz dzia
NIEZBĘDNE NARZĘDZIA

SERWERY WWW

  • Apache Web Server(65% wszystkich stron internetowych na świecie)
  • Internet Information Server(15%)
  • ngix
  • lighttpd
  • Xitami Web Server
niezb dne narz dzia1
NIEZBĘDNE NARZĘDZIA

EDYTORY HTML WYSIWYG, tekstowe

AdobeDreamweaver

Microsoft Office SharePoint Designer

Microsoft Expression Web

CoreEditor

Pajączek NxG

niezb dne narz dzia2
NIEZBĘDNE NARZĘDZIA

PROGRAMY GRAFICZNE/NARZĘDZIOWE

  • Adobe Photoshop
  • Adobe Flash
  • Adobe Fireworks
  • PaintShopPro
  • Adobe Illustrator
  • Corel Photo-Paint
  • GIMP
typy stron portal
TYPY STRONPORTAL
  • Bardzo rozbudowana sieć połączeń
  • Użytkownicy o zróżnicowanych zainteresowaniach
typy stron szkoleniowa
TYPY STRONSZKOLENIOWA
  • Typowy przykład struktury liniowej
  • Uproszczona do minimum nawigacja
typy stron informacje wiadomo ci
TYPY STRONINFORMACJE/WIADOMOŚCI
  • Odbiorcy o mniej sprecyzowanych zainteresowaniach
  • Przewaga form graficznych
typy stron ecommerce
TYPY STRONECOMMERCE
  • Dopracowana do perfekcji nawigacja
  • Elementy graficzne używane raczej oszczędnie
  • Sprawna wyszukiwarka
elementy strony wst p splash screen
ELEMENTY STRONYWSTĘP - SPLASH SCREEN
  • Czasami przed stroną główną pojawia się dodatkowa podstrona z animowanym wprowadzeniem (z reguły zaprojektowanym we Flashu), tzw. intro.
  • Powinna zachęcić (?) internautę do odwiedzenia strony, wprowadzić do jej treści lub zbudować odpowiedni klimat.
  • Potrzebne np. przy niektórych witrynach wielkich korporacji, gdzie konieczny jest wybór kraju czy oddziału.
  • Jeżeli nasza wejściówka jest zwykłą animacją, pamiętajmy o dodaniu przycisku pozwalającego na jej pominięcie.

PRZYKŁAD

elementy strony homepage strona g wna
ELEMENTY STRONYHOMEPAGE – STRONA GŁÓWNA
  • wyjaśnianie, czym zajmuje się serwis WWW i dlaczego warto właśnie jemu poświęcić czas,
  • dawanie łatwego dostępu do wszystkich części serwisu i podkreślanie tych, które są najważniejsze,
  • zachęcanie do głębszego zainteresowania się treścią witryny.

PRZYKŁAD

elementy strony nawigacja
ELEMENTY STRONYNAWIGACJA
  • Bardzo ważny element serwisu

Gdzie jestem ?

Gdzie byłem ?

Dokąd mogę pójść ?

PRZYKŁAD (zły)

elementy strony o nas
ELEMENTY STRONYO NAS
  • Nie jest to konieczność (choć są wyjątki, np. sklepy internetowe),
  • Informacje o firmie
      • wyjaśnienie, iż nie jesteśmy kolejnym bezdusznym sieciowym interesem,
      • podkreślenie mocnych stron,
      • wzbudzenie zaufania klientów.
elementy strony wyszukiwarka
ELEMENTY STRONYWYSZUKIWARKA
  • Indeksowanie zasobów witryny
  • Dobra wyszukiwarka powinna zrzucać z barków odwiedzającego wszystkie niepotrzebne obowiązki:
      • poprawiać błędy ortograficzne i gramatyczne w szukanych ciągach znaków,
      • nie gubić się bez polskich literek (lub – co gorsza – w ich obecności),
      • nie narzucać obowiązku wybierania dziesiątków niejasnych opcji,
      • zawsze zwracać te najbardziej odpowiednie rezultaty.

Zadaniem użytkownika ma być tylko wpisanie w dobrze widoczne pole paru słów i wciśnięcie jedynego przycisku.

elementy strony kontakt
ELEMENTY STRONYKONTAKT
  • Nie uciekajmy przed umieszczaniem na naszych stronach informacji o tym, jak się z nami skontaktować. Uwagi odwiedzających mogą się okazać bezcenne, a i oni będą się czuli docenieni, kiedy ktoś przeczyta i odpowie na nie (w końcu internauci bardzo rzadko piszą bezinteresownie do twórców stron).
  • Adres email + formularz wysyłkowy
elementy strony co nowego
ELEMENTY STRONYCO NOWEGO?
  • W porównaniu do mediów tradycyjnych sieć WWW jest medium bardzo zmiennym
  • Odwiedzając daną witrynę po raz kolejny internauta może się spodziewać wszystkiego – całkiem zmienionego wyglądu, nowych artykułów, drobnych ulepszeń lub... dokładnie tej samej zawartości, co poprzednio.
  • Mając to na uwadze, postarajmy się, aby na stronie umieszczać:
    • czas jej ostatniego uaktualnienia (wystarczy sama data; chyba, że zmieniamy treść kilka razy dziennie); idealnie byłoby, gdyby tego typu informacje pojawiały się także na każdej podstronie,
    • dokładną listę naniesionych zmian.
    • nie piszmy jedynie co się zmieniło, umieszczajmy od razu odnośniki do zmienionych podstron! Jakże irytująca jest informacja „na naszej stronie pojawił się nowy konkurs”, jeżeli nie wiadomo, gdzie tego konkursu szukać...
elementy strony ankieta
ELEMENTY STRONYANKIETA
  • Bardziej doceniony użytkownik będzie częściej wracał na nasze strony
  • Łatwo można przemycić informacje dotyczące naszej firmy
  • Wyniki (nawet niepełne) powinny być ogólnodostępne
elementy strony strona b du
ELEMENTY STRONYSTRONA BŁĘDU

Poprawia wizerunek firmy

Umożliwia pokierowanie użytkownikiem w momencie kiedy serwis zadziałał nieprawidłowo, bądź użytkownik popełnił błąd

elementy strony mapa serwisu
ELEMENTY STRONYMAPA SERWISU
  • Czy książka bez spisu treści ma prawo bytu?
  • Lista wszystkich (lub najważniejszych) podstron
      • pozwala na łatwe rozpoznanie jakie ogólnie treści zawiera serwis oraz w razie potrzeby skieruje odwiedzającego w konkretne miejsce
      • może ona pomóc internautom chcącym szybko znaleźć pożądaną informację
      • będzie nieocenioną pomocą dla osób, które na naszej witrynie po prostu się... zgubiły
projektowanie serwisu hierarchia
PROJEKTOWANIE SERWISUHIERARCHIA

Wizualne skanowanie struktury strony

Wstępne

Dokładniejsze

Rozpoczęcie czytania

projektowanie serwisu hierarchia1
PROJEKTOWANIE SERWISUHIERARCHIA

Prosta, bez przykuwających uwagę punktów, bez struktury graficznej

Lepsza struktura wizualna, kontrast, punkty przykuwające uwagę.

projektowanie serwisu zawarto
PROJEKTOWANIE SERWISUZAWARTOŚĆ
  • Szablonowa budowa serwisu
  • Używanie tych samych elementów na każdej z podstron serwisu
projektowanie serwisu rozmiar strony
PROJEKTOWANIE SERWISUROZMIAR STRONY

Źródło: gemiusRanking, styczeń 2012

projektowanie serwisu d ugo strony
PROJEKTOWANIE SERWISUDŁUGOŚĆ STRONY
  • Krótkie strony:
      • Strona główna
      • Mapy serwisu
      • Strony z grafiką (np. Galeria)
  • Dłuższe strony:
      • Łatwiejsze w utrzymaniu
      • Zawartość łatwiejsza do zachowania na dysku czy wydrukowania
      • Bardziej przypominają dokumenty papierowe
projektowanie serwisu struktura strony
PROJEKTOWANIE SERWISUSTRUKTURA STRONY

Zła, bez jakichkolwiek „punktów zaczepienia”

Dobra, modularna budowa, przejrzysta struktura

projektowanie serwisu nag wek i stopka
PROJEKTOWANIE SERWISUNAGŁÓWEK I STOPKA

Wzmacniają wizerunek firmy

projektowanie serwisu ramki
PROJEKTOWANIE SERWISURAMKI

Strony stworzone na ramkach pozwalają na podział okna przeglądarki na wiele różnych plików HTML

Zaleca się oszczędne stosowanie

Nie wszystkie przeglądarki radzą sobie z ramkami

Trudności w indeksowaniu przez wyszukiwarki

typografia pozycjonowanie tekstu
TYPOGRAFIAPOZYCJONOWANIE TEKSTU
  • Justyfikacja – wyrównanie do obu stron
  • Mechanizm prymitywniejszy niż w edytorach tekstu
  • Problem „rzek”
typografia pozycjonowanie tekstu1
TYPOGRAFIA POZYCJONOWANIE TEKSTU

Poszarpana lewa krawędź tekstu utrudnia czytanie

typografia czcionki
TYPOGRAFIACZCIONKI

Szeryfowe – lepiej się czyta

W S b

Bezszeryfowe – bardziej wyraziste

W S b

typografia czcionki1
TYPOGRAFIACZCIONKI

Times New Roman

W środę jego FC Liverpool zremisował bezbramkowo wyjazdowy mecz z Juventusem Turyn.

Georgia

W środę jego FC Liverpool zremisował bezbramkowo wyjazdowy mecz z Juventusem Turyn.

Verdana

W środę jego FC Liverpool zremisował bezbramkowo wyjazdowy mecz z Juventusem Turyn.

Arial

W środę jego FC Liverpool zremisował bezbramkowo wyjazdowy mecz z Juventusem Turyn.

Trebouche

W środę jego FC Liverpool zremisował bezbramkowo wyjazdowy mecz z Juventusem Turyn.

slide64

TYPOGRAFIACZCIONKI

  • ROZMIAR
    • Niewielki - 10-12-14 punktów
  • KOLOR
    • Kontrastowy w stosunku do tła, najlepiej ciemny
    • Można urozmaicaćróżnymformatowaniem
  • TŁO
    • Urozmaicone
  • Gładkie, jasne, może dzielić stronę na strefy
tekst i t o przyk ady

Tekst i tło - przykłady

Arial

Verdana

Arial

Verdana

tekst tw rcze wyj tki

Tekst – twórcze wyjątki

Times New Roman

Georgia

styl pisania
STYL PISANIA
  • Należy pisać w sposób zwięzły. Objętość tekstu pisanego w Internecie nie powinna przekraczać 50% jego pierwowzoru
  • Krótkie akapity, różne poziomy nagłówków oraz listy wypunktowane
czytelno
CZYTELNOŚĆ
  • Kolor tekstu powinien kontrastować z tłem (raczej ciemne litery na jasnym tle)
  • Gładkie tło
  • Odpowiednio duża czcionka
  • Tekst powinien być nieruchomy
  • Wyrównanie do lewej strony
nag wki
NAGŁÓWKI

UWAGA!! Internauci nie czytają !!!

  • Nagłówekpowinien wyjaśniać o czym jest artykuł, mikrotreść powinna być ultrakrótkim abstraktem makrotreści
  • Powinien być napisany prostym językiem – bez gry słów
  • Pierwsze słowo powinno być najważniejsze
wiadomo ci
WIADOMOŚCI

W Karkonoszach znajduje się wiele uznanych atrakcji przyciągających każdego roku tłumy turystów. W 2004 roku najchętniej odwiedzanymi miejscami były: Szrenica (300000 odwiedzających), wodospad Szkarki (250000), polana jakuszycka (200000) oraz Śnieżne Kotły (12000) i Schronisko pod Łabskim Szczytem (10000)

wiadomo ci1
WIADOMOŚCI

W 2004 roku w Karkonoszach najchętniej odwiedzane były:

  • Szrenica, wodospad Szklarki,
  • polana jakuszycka,
  • Śnieżne Kotły,
  • Schronisko pod Łabskim Szczytem.
odno niki
ODNOŚNIKI
  • Odnośniki nawigacji strukturalnej – formują strukturę przestrzeni informacyjnej, pozwalają poruszać się po tej przestrzeni
  • Odnośniki skojarzeniowe w treści dokumentu
  • Listy typu „zobacz także” – pomagają znaleźć poszukiwane informacje, jeżeli bieżąca strona nie jest właściwa
odno niki1

łącza do:

  • innych, cudzych stron
  • innych stron na naszej witrynie
  • konkretnych miejsc na aktualnie oglądanej stronie
  • plików

ODNOŚNIKI

dobrym zwyczajem jest:

  • podkreślenie linków, wyróżnienie ich innym kolorem i/lub wytłuszczenie.
  • kolor linków to zazwyczaj jakiś odcień niebieskiego
  • Ewentualnie zmiana koloru po najechaniu

NIE jest dobrym zwyczajem:

  • podkreślanie tekstu, który nie jest linkiem
  • Linki w kolorze tekstu na stronie
slide75

ODNOŚNIKI

  • Aby przeczytać informacje o niebieskonosej pszczole miodnej, kliknij tutaj
  • Mamy dodatkowe informacje o niebieskonosej pszczole miodnej
  • Dokumentację można znaleźć klikając tutaj, sterownikitutaj, FAQ – tutaj.
  • Możesz ściągnąć dokumentację, sterowniki, FAQ

internauta zobaczy przede wszystkim trzy wyrwane z kontekstu słowa „tutaj”, które będzie musiał świadomie dopasować do poszczególnych znaczeń.

grafika
GRAFIKA
  • Statyczna
  • Dynamiczna
      • Animowane GIFY
      • Adobe Flash
grafika statyczna

JPG (jpeg) – grafika rastrowa

    • najlepiej do zdjęć
    • dowolna możliwość kompresji obrazu
    • brak przezroczystości

Grafika statyczna

  • GIF - grafika rastrowa
    • najlepiej prosta grafika, z obszarami o jednolitych kolorach
    • lekka kompresja bez utraty jakości
    • posiada przeźroczystość
  • WMF - wektor
    • całkowita skalowalność
    • bardzo prosta, symboliczna grafika
    • niewielka objętość pliku
    • posiada przeźroczystość
grafika statyczna jpeg jpg

Grafika statyczna – jpeg (jpg)

Jakość:

100%

plik:

124 kb

grafika statyczna jpeg jpg1

Grafika statyczna – jpeg (jpg)

Jakość:

80%

plik:

37 kb

grafika statyczna jpeg jpg2

Grafika statyczna – jpeg (jpg)

Jakość:

60%

plik:

26 kb

grafika statyczna jpeg jpg3

Grafika statyczna – jpeg (jpg)

Jakość:

40%

plik:

20 kb

grafika statyczna jpeg jpg4

Grafika statyczna – jpeg (jpg)

Jakość:

20%

plik:

14 kb

grafika statyczna jpeg jpg5

Grafika statyczna – jpeg (jpg)

Jakość:

10%

plik:

10 kb

grafika statyczna jpeg jpg7

Jpegi można przyrządzić w każdym programie graficznym.

Jednak najprostsze programy nie zawsze umożliwiają regulację kompresji

Grafika statyczna – jpeg (jpg)

Jpeg to bitmapa, więc przy powiększeniach pojawia się tzw. raster (tzw: „pikseloza”)

grafika statyczna gif

Podobnie jest z gifami

  • Kompresja działa tym lepiej im więcej jest obszarów o jednolitym kolorze.
  • Kompresja w gifach nie jest regulowana i nie powoduje utraty jakości obrazu

Grafika statyczna GIF

grafika statyczna wektorowa

Najczęściej pliki wmf

  • Typowe cliparty.
  • Prosta grafika, niewielka ilośćkolorów
  • Obraz jest zakodowany do postaci funkcji matematycznych
  • ... i dlatego przy powiększaniu nie pojawia się raster

Grafika statyczna wektorowa

grafika dynamiczna animowane gify1

Grafika dynamiczna: animowane GIFy

  • Dwa przykazania:
  • Bardzo oszczędnie (niewiele na stronie i niewielkie), a najlepiej w ogóle bez
  • Jeżeli musisz, to zrób własny GIF, mały ale z płynną animacją
animacje w flash u

Animacje w Flash’u

  • Witryna – rzuć palenie
  • Smg/Krc
  • Lego
  • strona główna
d wi k

Do strony można dodać dźwięk. Mogą to być sygnały dźwiękowe podkreślające jakąś akcję (np. wciśnięcie przycisku) lub muzyka może grać cały czas.

Najczęściej używane typy plików:

  • pliki WAV – dobra jakość dźwięku, duża objętość pliku,nadaje się wyłącznie do krótkich sygnałów dźwiękowych /pierwszy/ /drugi/ /trzeci/
  • pliki MP3 – dobra jakość, mała objętość – raczej dłuższe fragmenty muzyki /out/
  • pliki MID – przeciętna jakość, wyjątkowo mała objętość pliku, nadaje się do „syntetycznej muzyki”, jako podkładu do strony /bridge/

Dźwięk

obiekty dodatkowe

pokrętło

pasek przewijania

lista

przycisk

przycisk opcji

i wiele innych...

Obiekty dodatkowe