Strona www bez tajemnic
This presentation is the property of its rightful owner.
Sponsored Links
1 / 96

Strona www bez tajemnic PowerPoint PPT Presentation


  • 80 Views
  • Uploaded on
  • Presentation posted in: General

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.”

Download Presentation

Strona www bez tajemnic

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


Strona www bez tajemnic

Strona www bez tajemnic


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


Struktura strony sekwencyjna

STRUKTURA STRONYSEKWENCYJNA


Struktura strony hierarchiczna

STRUKTURA STRONYHIERARCHICZNA


Struktura strony sieciowa

STRUKTURA STRONYSIECIOWA


Strona www bez tajemnic

UWAGA! ZŁA STRONA

ZOBACZ


Strona www bez tajemnic

ROZWÓJ W CZASIE, AKTUALIZACJA


Strona www bez tajemnic

ROZWÓJ W CZASIE, AKTUALIZACJA


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


Strona www bez tajemnic

PERFEKCYJNA WYSZUKIWARKA ?


Strona www bez tajemnic

PERFEKCYJNA 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 ankieta1

ELEMENTY STRONYANKIETA


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 strona b du1

ELEMENTY STRONYSTRONA BŁĘDU


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


Elementy strony mapa serwisu1

ELEMENTY STRONYMAPA SERWISU


Elementy strony mapa serwisu2

ELEMENTY STRONYMAPA SERWISU


Strona www bez tajemnic

UWAGA! ZŁA STRONA


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 rozmiar strony1

PROJEKTOWANIE SERWISUROZMIAR STRONY

800x600


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 arkusze styl w

    TYPOGRAFIAARKUSZE STYLÓW


    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 pozycjonowanie tekstu2

    TYPOGRAFIA POZYCJONOWANIE TEKSTU


    Typografia d ugo tekstu

    TYPOGRAFIADŁUGOŚĆ TEKSTU


    Strona www bez tajemnic

    UWAGA! ZŁA STRONA


    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.


    Strona www bez tajemnic

    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


    Tekst wielko liter

    TEKST WIELKOŚĆ LITER


    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


    Strona www bez tajemnic

    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ń.


    Strona www bez tajemnic

    ODNOŚNIKI


    Strona www bez tajemnic

    ODNOŚNIKI


    Odno niki inne

    ODNOŚNIKI – INNE


    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 jpg6

    Grafika statyczna – jpeg (jpg)

    Jakość:

    1%

    plik:

    6 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 gify

    Grafika dynamiczna: animowane GIFy


    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


    Dzi kuj za uwag

    DZIĘKUJĘ ZA UWAGĘ


  • Login