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

Strona www bez tajemnic PowerPoint PPT Presentation


  • 88 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


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 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?

  • 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

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Ń

  • 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

  • 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

  • Statyczne: HTML

  • Dynamiczne: PHP, ASP, ASP.NET, CGI

  • Dodatkowe: DHTML, Javascript, Ajax, Java, Flash


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ĘDZIA

EDYTORY HTML WYSIWYG, tekstowe

AdobeDreamweaver

Microsoft Office SharePoint Designer

Microsoft Expression Web

CoreEditor

Pajączek NxG


NIEZBĘDNE NARZĘDZIA

PROGRAMY GRAFICZNE/NARZĘDZIOWE

  • Adobe Photoshop

  • Adobe Flash

  • Adobe Fireworks

  • PaintShopPro

  • Adobe Illustrator

  • Corel Photo-Paint

  • GIMP


STRUKTURA STRONYSEKWENCYJNA


STRUKTURA STRONYHIERARCHICZNA


STRUKTURA STRONYSIECIOWA


UWAGA! ZŁA STRONA

ZOBACZ


ROZWÓJ W CZASIE, AKTUALIZACJA


ROZWÓJ W CZASIE, AKTUALIZACJA


TYPY STRONPORTAL

  • Bardzo rozbudowana sieć połączeń

  • Użytkownicy o zróżnicowanych zainteresowaniach


TYPY STRONSZKOLENIOWA

  • Typowy przykład struktury liniowej

  • Uproszczona do minimum nawigacja


TYPY STRONINFORMACJE/WIADOMOŚCI

  • Odbiorcy o mniej sprecyzowanych zainteresowaniach

  • Przewaga form graficznych


TYPY STRONECOMMERCE

  • Dopracowana do perfekcji nawigacja

  • Elementy graficzne używane raczej oszczędnie

  • Sprawna wyszukiwarka


PERFEKCYJNA WYSZUKIWARKA ?


PERFEKCYJNA WYSZUKIWARKA ?


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 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 STRONYNAWIGACJA

  • Bardzo ważny element serwisu

Gdzie jestem ?

Gdzie byłem ?

Dokąd mogę pójść ?

PRZYKŁAD (zły)


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 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 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 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 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 STRONYANKIETA


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 STRONYSTRONA BŁĘDU


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 STRONYMAPA SERWISU


ELEMENTY STRONYMAPA SERWISU


UWAGA! ZŁA STRONA


PROJEKTOWANIE SERWISUHIERARCHIA

Wizualne skanowanie struktury strony

Wstępne

Dokładniejsze

Rozpoczęcie czytania


PROJEKTOWANIE SERWISUHIERARCHIA

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

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


PROJEKTOWANIE SERWISUZAWARTOŚĆ

  • Szablonowa budowa serwisu

  • Używanie tych samych elementów na każdej z podstron serwisu


PROJEKTOWANIE SERWISUROZMIAR STRONY

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


PROJEKTOWANIE SERWISUROZMIAR STRONY

800x600


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 SERWISUSTRUKTURA STRONY

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

    Dobra, modularna budowa, przejrzysta struktura


    PROJEKTOWANIE SERWISUNAGŁÓWEK I STOPKA

    Wzmacniają wizerunek firmy


    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


    TYPOGRAFIAARKUSZE STYLÓW


    TYPOGRAFIAPOZYCJONOWANIE TEKSTU

    • Justyfikacja – wyrównanie do obu stron

    • Mechanizm prymitywniejszy niż w edytorach tekstu

    • Problem „rzek”


    TYPOGRAFIA POZYCJONOWANIE TEKSTU

    Poszarpana lewa krawędź tekstu utrudnia czytanie


    TYPOGRAFIA POZYCJONOWANIE TEKSTU


    TYPOGRAFIADŁUGOŚĆ TEKSTU


    UWAGA! ZŁA STRONA


    TYPOGRAFIACZCIONKI

    Szeryfowe – lepiej się czyta

    W S b

    Bezszeryfowe – bardziej wyraziste

    W S b


    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.


    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

    Arial

    Verdana

    Arial

    Verdana


    Tekst – twórcze wyjątki

    Times New Roman

    Georgia


    TEKST WIELKOŚĆ LITER


    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ŚĆ

    • 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

    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

    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Ś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 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


    łą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


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


    ODNOŚNIKI


    ODNOŚNIKI


    ODNOŚNIKI – INNE


    GRAFIKA

    • Statyczna

    • Dynamiczna

      • Animowane GIFY

      • Adobe Flash


    • 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)

    Jakość:

    100%

    plik:

    124 kb


    Grafika statyczna – jpeg (jpg)

    Jakość:

    80%

    plik:

    37 kb


    Grafika statyczna – jpeg (jpg)

    Jakość:

    60%

    plik:

    26 kb


    Grafika statyczna – jpeg (jpg)

    Jakość:

    40%

    plik:

    20 kb


    Grafika statyczna – jpeg (jpg)

    Jakość:

    20%

    plik:

    14 kb


    Grafika statyczna – jpeg (jpg)

    Jakość:

    10%

    plik:

    10 kb


    Grafika statyczna – jpeg (jpg)

    Jakość:

    1%

    plik:

    6 kb


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


    • 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


    • 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

    • 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

    • Witryna – rzuć palenie

    • Smg/Krc

    • Lego

    • strona główna


    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


    pokrętło

    pasek przewijania

    lista

    przycisk

    przycisk opcji

    i wiele innych...

    Obiekty dodatkowe


    DZIĘKUJĘ ZA UWAGĘ


  • Login