Archiwum tagu: tworzenie stron www

Projekt MZK Stargard

Kilka dni temu zakończyliśmy z sukcesem kolejny projekt. Strona przygotowana została dla Miejskiego Zakładu Komunikacji w Stargardzie Szczecińskim.

mzk1

Dzięki udoskonaleniom strona zyskała nie tylko nową szatę graficzną, ale również funkcjonalny układ, dzięki któremu pasażerowie szybko znajdą potrzebne informacje.

Nowa strona zyskała aprobatę Dyrektora MZK Stargard. Mamy nadzieję, że mieszkańcom miasta Stargard Szczeciński spodoba się nowa przejrzysta strona Zakładu Komunikacji, gdyż z myślą o nich ją zaprojektowano.

ZAPRASZAMY DO STRONY MZK STARGARD


Najczęstsze błędy marketingu w sieci

Dzisiaj internet jest strategią biznesową, która pomaga realizować konkretne cele przedsiębiorstwa. Rzecz w tym, że przedsiębiorcy często w internecie tylko “bywają”, ograniczając swoje działania marketingowe do posiadania witryny. To błąd, bo gdy w grę wchodzi walka o zaangażowanie (i portfele) najcenniejszych internautów – tzw. prosumentów – warunkiem koniecznym skutecznych działań jest stała obecność marki w sieci.

Zaniedbanie, czyli monolog z klientem

Wyzwaniem nie jest zbudowanie serwisu internetowego, ale sprawienie, że ta witryna wygeneruje pożądane efekty biznesowe. Jednak sam serwis nie zawsze wystarcza. Wiele kategorii produktów i usług jest szeroko omawianych na forach internetowych i dużej liczbie serwisów tematycznych – to tam toczy się realna walka o Klienta. Przedsiębiorcy mogą zaniedbywać ten fakt, jednak nie zatrzyma to fali dyskusji i rekomendacji  inicjowanych przez potencjalnych klientów. Chcąc wykorzystać potencjał sieci firmy muszą nie tylko informować, ale prowadzić pro-aktywny dialog.

Próżność, czyli jak sprawić, by klienci się o Tobie dowiedzieli

Aby  marka odniosła sukces potrzebuje klientów – podobnie, jak strony internetowe przedsiębiorstw potrzebują internautów. Często popełnianym błędem jest nadmierne skupienie na estetyce serwisu i bogatych animacjach – choć wizerunkowo wydaje się to trafny zabieg, okazuje się, że witryny wykonane w technologii Flash są prawie całkowicie nieprzyswajalne dla Google! Ale jak wiemy, już na etapie projektowania  można znacząco zwiększyć dotarcie do potencjalnych klientów poprzez wykorzystanie szeregu technik wspomagających pozycjonowanie w sieci (czyli obecność na pierwszej stronie wyników Google).

Pozycjonowanie nie jest jedyną techniką budowania zasięgu i ruchu w serwisie, choć niewątpliwie najbardziej efektywną kosztowo. Niestety wiele przedsiębiorstw wykazuje się grzechem próżności, uznając za sukces samo posiadanie serwisu internetowego bez zapewnienia mu właściwej liczby użytkowników.

Brak konsekwencji, czyli jak utrzymać stałą relację z klientem

Do tego doskonale nadają się konkursy, loterie i programy konsumenckie. To właśnie one są motorem napędzającym skomputeryzowanych konsumentów do zapoznania się z ofertą marki. Regularny newsletter i inne formy komunikacji bezpośredniej mogą zbliżyć konsumenta do marki i budować jego lojalność, co znacząco obniża tzw. efekt switchingu, czyli chęć odejścia do konkurencji. Kardynalnym zaniedbaniem jest unikanie tej formy kontaktu, jeżeli model biznesowy firmy opiera się na produktach bądź usługach kupowanych wielokrotnie.

Krótkowzroczność, czyli jak pobudzić rekomendacje produktowe

Większość marek, aby zaistnieć w świecie społeczności, potrzebuje czegoś więcej niż oznajmienia światu faktu swojego istnienia. Tym czymś jest tzw. reason-to-talk, czyli wszystko to, co sprawia, że marka staje się magnetyczna i ciśnie się na usta konsumentów. Oczywiście, sama obecność w mediach społecznościowych (lub samo tylko posiadanie strony internetowej) z pewnością nie spowoduje trwałego wzrostu sprzedaży. Trzeba sprawić, aby procentowało to w postaci fali rekomendacji marki na forach i platformach społecznościowych – czyli tam, gdzie coraz częściej podejmowane są decyzje o wyborze firmy i produktu.

Nieobecność w wyszukiwarkach, czyli co należy wiedzieć o pozycjonowaniu marki w sieci

Warunkiem stałego (i prawie darmowego) wsparcia platformy marki w sieci jest przygotowanie jej z myślą o tym, by dać się odnaleźć w sieci (tzw. SEM – search engine marketing). Jako że rynek zdominowany jest przez Google, zadaniem agencji jest spełnienie szeregu warunków, które sprawiają, że wyszukiwarka ta „polubi” naszą platformę. Okazuje się, że nawet konstrukcja notek PR-owych dystrybuowanych w sieci może mieć wpływ na wyniki w Google! Warto wiedzieć, jakimi prawami rządzi się ta wyszukiwarka, by wykorzystać jej potencjał dla naszego biznesu.

Braku synergii, czyli jak skutecznie integrować działania

Marki pragnące na stałe zaistnieć w sieci potrzebują nie tyle stron internetowych, co platform długookresowego wsparcia. Okazuje się, że strony internetowe brandów w większości kategorii odnotowują rekordy popularności w okresie wsparcia kampanią internetową, ale po jej zakończeniu zainteresowanie użytkowników spada niemal do… zera. Jak przeciwdziałać temu zjawisku, wykorzystując potencjał zintegrowanej komunikacji marketingowej? Jednym z rozwiązań jest wytworzenie wspomnianego wcześniej pracującego na korzyść marki reason-to-talk .

Nieopamiętanie, czyli jak kontrolować koszty i kalkulować korzyści

Możliwości, jakie dają media interaktywne, są z roku na rok coraz większe. Istnieje m.in. szereg narzędzi, które można traktować zupełnie indywidualnie, jak niezależne kanały dotarcia, ale ich prawdziwy potencjał wynika ze zintegrowanego działania. W marketingowym kotle łatwo przez nieuwagę utopić bardzo duże budżety. Tymczasem sztuka polega na optymalizacji kosztów i takiej konstrukcji media-mixu, aby zmaksymalizować zwrot z inwestycji (ROI).

Źródło: www.wirtualnemedia.pl


Style CSS

Za pomocą języka XHTML tworzymy strukturę, jak np. tabele, tytuły czy akapity, a korzystając ze stylów nadajemy im odpowiednie właściwości i formatowanie, np. kolor, pogrubienie, pochylenie, tła, wielkość liter i inne elementy odpowiedzialne za kształt i wygląd.

Wystarczy więc przypisać do tytułu strony nazwę stylu, np. “glowny” i zdefiniować w jednym miejscu, jakie właściwości ma mieć główny tytuł. Może być pogrubiony, niebieski, napisany czcionką Arial o wielkości 16 pikseli. Wszystkie tytuły główne mogą mieć ten sam styl zapisany w jednym pliku. Jest to bardzo przydatne, gdy nagle musimy zmienić wygląd tytułów. Wtedy wystarczy w jednym miejscu zmienić właściwości stylu “glowny” i efekt będzie widoczny od razu na wszystkich stronach we wszystkich tytułach oznaczonych tym stylem. Prawda, że rewelacyjny wynalazek? Takie podejście pozwala szybko zmienić kolorystykę, kształt czy właściwości określonego stylu przypisanego konkretnym elementom HTML.

Jak zdefiniować swoje style?

Własne style możesz nazwać dowolnie, w sposób dla Ciebie czytelny. Mogą nazywać się np. “naglowek”, “akapitczerwony” lub “pogrubienie”. Aby je stworzyć musisz zadeklarować je w osobnym pliku lub wprost na wybranej stronie WWW.

W nagłówku strony, w sekcji head umieść swoją definicję stylu pomiędzy tagami style.

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
  <style type="text/css"><!--

    h1, td { color: green; }
    .naglowek { color: red; font-size:16px; }
    .pogrubiony { font-weight: bold; }

  --></style>
 <meta http-equiv="Content-type" content="text/html;
charset=ISO-8859-2" />
 <title>tytuł strony</title>
</head>
<body>

  Dalsza treść strony, gdzie będą używane Twoje style...

</body></html>

W przykładzie został zdefiniowany jeden styl dla elementów h1 i td i dwa style o nazwach “naglowek” i “pogrubiony”. Najłatwiejszą notacją (bo style można definiować na kilka sposobów) i chyba najczęściej spotykaną jest przypisanie stylu do elementu HTML. Inną popularną notacją jest kropka i nazwa stylu. Kropka określa, że styl jest selektorem klasy, czyli oznacza, że klasa będzie miała nadaną przez nas nazwę, którą można potem użyć w definicji klasy dla elementu HTML.

Brzmi nieco zawile? Ale teorią się nie przejmuj, ważniejsza jest praktyka. Pamiętaj o kropce i za nią umieść nazwę stylu. Następnie w nawiasach klamrowych musisz opisać jakie cechy będzie miał stworzony przez Ciebie styl.

Wszystkie tytuły h1 i komórki tabeli td będą miały kolor zielony (color: green;) Nagłówek ma mieć czerwony kolor (color: red;) i wielkość 16 pikseli (font-size: 16px;). Styl pogrubiony będzie tylko pogrubiony (font-weight: bold;).

Dowolny element HTML, który ma mieć styl naglowek powinien mieć atrybut class z nazwą naszego stylu (ale już bez kropki):

<p class="naglowek">Nagłówek strony</p>

Bez problemu możesz ten styl przypisać kilka razy do różnych elementów na stronie:

<p class="naglowek">Nagłówek strony</p>
<div class="naglowek">Inny nagłówek strony</div>
<a href="http://www.reporter.pl" class="naglowek">Duży link</a>

Kropka oznacza, że wszystkie elementy na stronie (polecenia XHTML), dla których zdefiniujesz klasę “naglowek” będą miały ten styl. Gdy przypiszesz styl do elementu XHTML, tylko te elementy mają określone właściwości (tak zrobiliśmy z komórkami tabeli i tytułami h1).

Jak już wiesz, aby kawałek tekstu miał pogrubiony styl, wystarczy go zdefiniować z kropką na początku:

.pogrubiony { font-weight: bold; }

Tak określony styl może się odnościć do dowolnych elementów XHTML - możesz pogrubić akapity, tabele, linki i generalnie wszystkie tagi języka XHTML. Dodając przed kropką nazwę elementu XHTML, możesz ograniczyć działanie tego stylu tylko do wybranych poleceń języka XHTML. Zastosujmy pogrubienie tylko w akapitach:

p.pogrubiony { font-weight: bold; }

I użyjmy go w praktyce:

<p class="pogrubiony">TYLKO TEN tekst zostanie pogrubiony</p>
<div class="pogrubiony">Ten tekst nie zostanie pogrubiony</div>
<a href="http://reporter.pl" class="pogrubiony">Link bez pogrubienia</a>

Takie podejście pozwala stworzyć wiele stylów o nazwie “pogrubiony”, ale każdy będzie odnosił się tylko do określonego elementu języka HTML:

p.pogrubiony { font-weight: bold; }
br.pogrubiony { font-weight: bold; color: red; }

Łatwo zapamiętać, że brak nazwy elementu przed kropką dotyczy wszystkich tagów HTML, a wyszczególniona nazwa przed kropką we własnej definicji stylu ogranicza działanie stylu tylko do tego elementu języka HTML.

Jest jeszcze jeden zapis własnej definicji stylu, gdzie zamiast kropki stosuje się znak #:

#zielony { color: green; }

Tym razem odwołanie do stylu nie następuje przez podanie atrybutu class, ale przez identyfikator elementu, czyli atrybut id:

<p id="zielony">zielony akapit</p>

Ważną rzeczą jest, aby na jednej stronie nie było dwóch elementów HTML (np. dwóch lub więcej akapitów), które mają taką samą nazwę ID. Identyfikator jest unikatowy. Jeżeli chcesz stosować więcej identyfikatorów musisz je np. ponumerować:

#zielony1 { color: green; }
#zielony2 { color: green; }
#zielony3 { color: green; }

<p id="zielony1">zielony akapit</p>
<span id="zielony2">zielony akapit</span>
<p id="zielony3">zielony akapit</p>

Tutaj również można ograniczyć zakres działania stylu dla wybranego elementu dodając jego nazwę przed definicją stylu:

p#zielony { color: green; }

W praktyce zapis z identyfikatorami id nie jest często stosowany, ponieważ z definicji każdy element XHTML musi mieć inny identyfikator i tych styli byłoby bardzo dużo. Natomiast styl zapisany w ten sposób ma zastosowanie w dynamicznym HTML, a więc w powiązaniu z JavaScriptem i DOMem, gdzie odwołania do elementów HTML możliwe są poprzez identyfikatory id.

Zdecydowanie najczęściej spotykany jest przykład pierwszy, gdzie po kropce podajesz nazwę stylu, a w nawiasach określasz wszystkie style i parametry jakie mają być przypisane do danej nazwy. Potem w elementach HTML wystarczy za pomocą atrybutu class przypisać określoną nazwę stylu, aby go użyć w dowolnym miejscu na stronie.

Dołączanie stylów

Jednym ze sposobów jest umieszczenie stylów wprost przy elemencie, którego dotyczy korzystając z atrybutu style. Można w ten sposób nadać konkretny styl wybranemu elementowi HTML, bez konieczności stosowania arkusza zewnętrznego lub wewnętrznego:

<p style="color:red; font-size:16px;">
dowolny akapit
</p>

Takie rozwiązanie jest stosowane wyjątkowo, gdy trzeba zmienić wygląd jednego elementu (lub kilku elementów) na stronie lub nadpisać wygląd konkretnego elementu HTML, który wcześniej został zadeklarowany w stylach zewnętrznych lub osadzonych na stronie.

Nie powinno się stosować stylów wprost w elementach HTML, ponieważ trudno je potem znaleźć w kodzie strony i kłopotliwe jest ich poprawianie. Mimo chaosu, jaki może wprowadzić taki zapis, jest on w praktyce dosyć często stosowony z lenistwa, bo łatwiej dokonać zmiany stylu konkretnego elementu niż wypisywać wszystkie style w zewnętrznym arkuszu i potem przypisywać każdy ze stylów do poszczególnych elementów.

Definicje stylów można umieścić wprost na konkretnej stronie WWW, w sekcji nagłówkowej strony, czyli pomiędzy tagami <head> i </head>, np. zaraz po określeniu tytułu dla strony:

<head>
  <meta http-equiv="Content-type" content="text/html;
charset=ISO-8859-2" />
  <title>Tytuł strony </title>
  <style type="text/css"><!--

  body, p {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
  a { text-decoration: none; }
  .menu:active {color: navy; }
  .menu:link {color: navy; }
  .menu:visited {color: navy; }
  .menu:hover {color: #3333cc; }

  --></style>
</head>

Style są umieszczone wprost na konkretnej stronie WWW i nawet jeżeli ktoś skopiuje stronę na dysk lokalny i nie będzie miał połączenia z Siecią, w dalszym ciągu style będą w dokumencie zachowane.

To bardzo dobry sposób osadzania stylów w przypadku języków skryptowych (np. PHP), ponieważ style można dołączyć z jednego pliku za pomocą dyrektywy include.

Nieco gorzej jest z wykorzystaniem tej metody w wypadku statycznych stron HTML, gdyż modyfikacja stylu wymaga zmodyfikowania zapisu na wszystkich stronach należących do witryny. Wtedy wygodniej skorzystać z metody dołączenia zewnętrznego arkusza z dowolnego miejsca w Sieci lub z wybranego katalogu na stronie WWW.

Zamiast osadzać style CSS na stronie można je dołączyć z zewnętrznego pliku za pomocą elementu link:

<head>
  <meta http-equiv="Content-type" content="text/html;
charset=ISO-8859-2" />
  <title>Tytuł strony </title>
  <link rel="stylesheet" type="text/css" href="/style.css" />
</head>

Można też podać pełną ścieżkę do serwera i dołączać więcej niż jeden arkusz stylów:

<link rel="stylesheet" type="text/css" href="http://serwer1/style.css" />
<link rel="stylesheet" type="text/css" href="http://serwer2/style.css" />

Dołączany plik style.css powinien zawierać od razu definicje stylów, jak poniżej:

body, p {
  font-family: Arial, sans-serif;
  font-size: 14px;
}
a { text-decoration: none; }
input { width: 200px; }

Ten sposób dołączania stylów jest bardzo wygodny, ponieważ w praktyce istnieje tylko jeden plik ze stylami, który może być dołączany z dowolnej lokalizacji w Sieci. Modyfikacje wystarczy przeprowadzać tylko w jednym pliku. Jego wadą jest to, że podczas zapisywania strony na dysk, style mogą zostać zgubione i bez dostępu do pliku ze stylami strona może prezentować się mało ciekawie.

Dopuszczalna jest również kombinacja zastosowania stylów z zewnętrznego pliku w stylach znajdujących się na stronie:

<style type="text/css"><!--

@import url(http://serwer.pl/katalog/style.css)
body, p {
  font-family: Arial, sans-serif;
  font-size: 14px;
}
a { text-decoration: none; }

--></style>

W tym celu można skorzystać z polecenia @import dołączającego do stylów na stronie dodatkowe style znajdujące się w pliku w dowolnym miejscu w sieci. Style znajdujące się poniżej dołączanego stylu mogą rozszerzyć style z pliku lub zastąpić je na konkretnej stronie.

O stylach można by napisać całkiem sporą książkę, a przedstawione powyżej podstawy mają tylko zaznajomić Cię z tematyką i pomóc szybko zacząć je stosować na stronach. Mam nadzieję, że ten krótki, ale treściwy wstęp, nieco wyjaśnił Ci posługiwanie się stylami w praktyce.

Powodzenia!


Zanim stworzysz swoją stronę www

Chcesz mieć stronę, ale nie wiesz co na niej umieścić…

Na szczęście jest wiele elementów, które są wspólne dla różnych witryn.

Po pierwsze,

Kontakt

Zacznij od strony kontaktowej - może to być adres e-mail, telefon, ulica, miasto, mapka opisująca jak do Ciebie dojechać. Jeżeli lubisz zaskakiwać podaj np. szerokość i długość geograficzną. Jeżeli ktoś ma GPS może dotrzeć do Ciebie wykorzystując dane satelitarne.

O autorze/O firmie/O serwisie

Napisz kilka zdań o sobie - kim jesteś, co robisz, ile masz lat, czym się interesujesz. Możesz też dodać swoje zdjęcie. Firmy w tym miejscu opisują zwykle swoją historię, ofertę, dokonania. Możesz też napisać kilka zdań o serwisie - do kogo jest kierowany, co można w nim znaleźć.

Nowości/Informacje prasowe

Wydziel stronę, na której opisywać będziesz zmiany i zapowiedzi nowych tekstów. Firmy tworzą zwykle sekcję dla prasy, aby dziennikarze mogli pobierać najnowsze doniesienia. Pomyśl o Newsletterze. Jeżeli chcesz mieć kontakt z czytelnikami daj im możliwość pozostawienia adresów e-mail. Mając bazę mailingową, możesz wysyłać im co jakiś czas informacje o nowościach. Jednak uważaj! Nie udostępniaj jej innym, jeżeli czytelnicy nie wyrazili na to zgody. Chroń dane czytelników, bo jeżeli trafią w niepowołane ręce, nigdy więcej ludzie Ci nie zaufają.

Katalog stron WWW

Spis podobnych witryn poukładany tematycznie. Umieść też adresy swojej konkurencji - nie zaszkodzi. Gdy ktoś będzie chciał zgłębić temat wejdzie do innych serwisów. I to nic, że teraz ucieknie z Twojej strony, ale będzie do niej wracał, bo wie, że tylko u Ciebie znajdzie kompletny zestaw adresów internetowych.

Ankieta

Ważna rzecz - zadając pytania poznasz bliżej swoich odbiorców i lepiej dostosujesz serwis do ich wymogów. Jest wiele typów ankiet, więc też musisz przemyśleć, które będą Ci najbardziej odpowiadać.

Co jeszcze…

Oczywiście, każda strona ma swoje specyficzne działy. Jeżeli prowadzisz serwis o muzyce to pewnie przedstawisz sylwetki muzyków, wywiady, książki, nagrania w MP3, teksty piosenek. Gdy myślisz o serwisie turystycznym opiszesz trasy wycieczek, schroniska, hotele, podasz rozkłady jazdy pociągów, pogodę na najbliższe dni w różnych regionach. Jeżeli masz serwis finansowy, rozsądne jest podanie aktualnych kursów walut. W prywatnym serwisie możesz opisać swoje hobby, ulubione książki, pokazać własną twórczość, opisać drzewo genealogiczne rodziny.

Jednak zanim cokolwiek zrobisz, przemyśl jak to zrobisz!


Zawód webmaster

Wiele osób marzy o tym, aby być szefem dla siebie. Wiele osób podejmuje takie działania, lecz albo nie mają zbyt dużej motywacji lub też ich projekty nie wytrzymują konkurencji. Jednym ze sposobów na zarabianie jest tworzenie stron www. W dzisiejszych czasach, jest to biznes bardzo dobry i wiele firm czy osób prywatnych zajmuje się tym sektorem. W dobie internetu konieczne jest posiadanie strony www. Dotyczy to przede wszystkim firm, które muszą mieć w internecie swoje miejsce. Projektowaniem stron www zajmuje się bardzo wiele firm, także osób prywatnych. Jednak znalezienie dobrej usługi jest kłopotliwe. Wiele młodych osób myśli, że wystarczy znajomość HTML i mogą zająć się programowaniem stron www, a jest to nie prawdą. Wiele osób tworzy strony www nie ceniąc własnego czasy i biorąc za projekty grosze. Dotyczy to bardzo wielu młodych firm, które nie zawsze umieją przetrwać na rynku stron internetowych. Dobra strona www musi kosztować i jest to koszt spory. Jednak możemy przy tym projekcie wymagać. Strony tworzone przez firmy zajmujące się tworzeniem stron internetowych, to strony unikatowe. Takie projekty są bardzo wartościowe. Często do tych stron, tworzona jest grafika w autorskim projekcie, dzięki czemu strona jest bardzo unikatowa. W przypadku firm, ma to kolosalne znaczenie, bo strona internetowa, to bardzo ważna wizytówka. Duże projekty, także wymagają profesjonalnego podejścia do wykonywanej strony, którego nie mają młode osoby. Dobry webmaster uczy się wiele miesięcy i rzadko kiedy wykonuje projekty, które są wymagające lub zbytnio odpowiedzialne. Dlatego też, nie należy wierzyć osobom ogłaszającym się, że wykonają projekt strony za grosze. Takie strony nie mają żadnej wartości.


Własna strona www

W dzisiejszych czasach każda firma powinna mieć swoją stronę internetową. Bez strony w sieci nie ma mowy o rozwoju firmy, czy nawet o zdobywaniu nowych klientów. Dlatego tak dużym powodzeniem cieszą się wykonywane na zamówienie strony internetowe. Gdzie ich szukać? Przede wszystkim należy zastanowić się, co na naszej stronie ma się znaleźć. Dobrze, aby w momencie wyboru wykonawcy mieć już mniej więcej sprecyzowany projekt. Oczywiście firmy zajmujące się wykonywaniem stron na pewno nam chętnie doradzą, jakie rozwiązanie najlepiej wybrać. Jednak każdy z nas, surfując po sieci, wie, jak mogą wyglądać strony czy sklepy, i mamy też mniej więcej wyobrażenie, co nam się podoba. Dobrze, jeśli agencji interaktywnej wykonującej pokażemy przykłady tego, co nam się podoba, i dlaczego. Jeśli chodzi o funkcjonalność, na pewno dostaniemy wiele porad w samej firmie wykonującej. Jako laicy nie znamy się na tym, możemy popełnić wiele błędów. To, że naszym ulubionym kolorem jest mieszanka pomarańczowego z fioletem, nie oznacza, że sklep właśnie w tych kolorach będzie najlepiej wyglądał. Dlatego projektując stronę warto posłuchać grafików i ich porad. Bądź co bądź są to profesjonaliści, którzy znają się na rzeczy i nie jeden funkcjonujący sklep internetowy już skonstruowali. Należy też zdać sobie sprawę z tego, że większość sklepów oparta jest o już wcześniej istniejące skrypty. Oznacza to, że nie można w nich dokonać zbyt wielu zmian, choć oczywiście można je dostosować do własnych wymagań. Jednak każda poważniejsza zmiana będzie się wiązała z dopłatami, a nawet z o wiele wyższą ceną ze zlecenie, ponieważ sklep trzeba będzie tworzyć od zera, zamiast podpierać się gotowymi szablonami. Ale to przecież nic dziwnego, że za jakość i wyjątkowość trzeba płacić.


Firmowa strona na gotowym CMS

Jak wiadomo, to firmy są najczęściej klientami agencji zajmujących się tworzeniem stron www. Wiele z nich chce mieć strony stworzone w profesjonalny i funkcjonalny sposób. Taki, aby móc samemu nimi zarządzać, by zaoszczędzić cenny czas i pieniądze. Dlatego też każde biuro, które zajmuje się tworzeniem stron internetowych używa skryptów do zarządzania treścią. Obecnie nie ma lepszego sposobu na praktyczną i ciekawą stronę www. Popularność CMS jest bardzo duża. Strony budowane na takich skryptach, są łatwe w obsłudze. Nawet największy laik jest w stanie obsłużyć taki skrypt. Cała praca firmy oferującej tworzenie stron www opartych na CMS to wstawienie treści, wykonanie grafiki i skonfigurowanie systemu wedle potrzeb klienta. Praca taka nie jest zbyt wymagająca jeśli chodzi o profesjonalnego programistę, który zajmuje się tworzeniem stron www na co dzień, jest jednak bardzo trudna do wykonania dla osoby, która nie miała z tym nigdy do czynienia.
Firma zajmująca się tworzeniem stron www jest zadowolona, bo klienci mają szybko i sprawnie zbudowaną stronę, klient jest zadowolony, bo może cieszyć się bardzo szybko powstałą stroną www. Co również jest bardzo istotne, skrypty te można bardzo szybko rozbudować, jeśli zaistnieje taka potrzeba. Wśród stron królują znane już wszystkim CMS, jak Joomla czy Drupa, ale też tworzone są skrypty personalne, na potrzeby biur zajmujących się tworzeniem stron www. Nikogo już nie dziwi, że kompletną stronę firmową można postawić zaledwie w kilka godzin.


Kilka zasad pisania w XHTML

Podczas tworzenia stron WWW trafisz na wiele niedogodności. Ponieważ istnieje kilkanaście przeglądarek stron WWW, niektóre polecenia mogą w nich dawać odmienny efekt. Czasem strona z niezamkniętymi poleceniami lub tabelami (co jest oczywiście błędem) będzie wyglądała poprawnie pod Internet Explorerem. Zdarzy się i tak, że poprawna strona, wykorzystująca standard języka XHTML zalecany przez organizację W3C mimo wszystko nie będzie dobrze pokazywana przez jakąś przeglądarkę. Ludzie będą chcieli stronę drukować, wysyłać mailem, zapisywać na dysku, przeglądać w telefonach komórkowych. O wszystkich potrzebach użytkownika musisz pomyśleć!

Pisząc w XHTML większość elementów to pary poleceń. Jest element otwierający i zamykający, np. tytuł został otoczony parą <title> i </title>. Dzięki temu przeglądarka wie, co ma wyświetlić na belce jako tytuł strony. Jeżeli w treści strony jakiś wyraz otoczysz parą elementów <b> i </b> zostanie on pogrubiony (b to skrót od angielskiego słowa bold).

Znając pary poleceń możesz z tekstem robić dowolne rzeczy. Tak na prawdę nie musisz uczyć się par - wystarczy pamiętać nazwę polecenia, bo konstrukcja jest zwykle taka sama: <polecenie></polecenie> lub ewentualnie <polecenie />, czyli forma zamknięcia elementów, które w starszym HTMLu nie miały pary, np. <br />.

Elementy XHTML mogą mieć jeszcze atrybuty. Oznacza to, że możesz zmieniać właściwości tych poleceń. Jeżeli chcesz utworzyć połączenie z inną stroną WWW wystarczy, że do elementu a dodasz atrybut href określający adres innej strony. W praktyce wygląda to następująco:

<a href="http://www.projektowanie-stron.szczecin.pl/">
odnośnik do www.projektowanie-stron.szczecin.pl</a>

Polecenia i atrybuty muszą być pisane małymi literami. Wymaga tego język XHTML. W niezalecanym już języku HTML 4.01 i we wcześniejszych, wielkość znaków nie miała znaczenia.

Pewnie domyślasz się, że aby wstawić na stronę jakiś obrazek, trzeba użyć elementu odpowiedzialnego za grafikę i wskazać mu, jaki obrazek ma wstawić. Element img odpowiada za obrazki (img to skrót od słowa image). Ma wiele atrybutów, a jednym z nich jest src (czyli source - źródło obrazka). Użyjmy ich ustalając od razu wymiary obrazka (atrybut width i height) oraz opis alternatywny (atrybut alt)…

<img src="/g/logo.gif" width="120" height="60"
alt="logo serwisu"/>

I oto mamy obrazek. Pamiętaj jeszcze, że wartości atrybutów powinno się umieszczać w cudzysłowach. Dzięki temu przeglądarka może je prawidłowo zidentyfikować. Pewnie chcesz mieć “klikalny” obrazek, który jest odnośnikiem do innego serwisu? Połączmy więc dotychczasową wiedzę:

<a href="http://www.projektowanie-stron.szczecin.pl"><img
src="/g/logo.gif" width="120" height="60"
alt="logo serwisu" border="0" /></a>

Nie jest to skomplikowane, choć pojawił się kolejny atrybut: border=”0″, który powoduje, że znika ramka otaczająca obrazek (oznaczająca, że obrazek jest odnośnikiem). Nie chcę ramki, bo szpeci logo - dlatego prawie zawsze element img w odnośnikach ma wyłączoną ramkę…

Kolejna istotna zasada to kolejność otwierania i zamykania poleceń. Nie powinno się robić czegoś takiego:

<i>kilka <b>przykładowych</i> wyrazów</b>

Element i definiuje przekreślenie, ale zanim został on zamknięty, otwarto element b (pogrubienie), a następnie zamknięto i zamiast b. Są one założone “na krzyż”. Wygląda to mało czytelnie i nie jest zgodne z regułami, pomimo tego, że przeglądarka może pokazać efekt dobrze… Oto prawidłowa kolejność:

<i>kilka</i> <b><i>przykładowych</i> wyrazów</b>

To nic, że trzeba było użyć kilka razy i, ale opłaciło się. Przykład jest bardziej czytelny. W skomplikowanych dokumentach ma to ogromne znacznie. Dlatego podczas tworzenia strony zwracaj uwagę na jej czytelność. Nie przez przypadek wielu autorów robi charakterystyczne wcięcia w kodzie HTML. Ułatwia to odczytanie kodu po latach, gdy sam autor nie pamięta co miał na myśli tworząc stronę…

Zauważ, że już potrafisz tworzyć odnośniki i wstawiać grafikę. Każdy akapit (blok tekstu) określa polecenie p. Te informacje wystarczają aby pokusić się o eksperymenty z Twoją pierwszą stroną WWW.

Jednak, aby poznać wszystkie elementy i atrybuty języka XHTML, potrzeba bardzo dużo czasu. Dobrym treningiem jest podglądanie innych witryn i sprawdzanie, jak autorzy poradzili sobie z wykonaniem różnych efektów. Ucząc się na przykładach poznasz wiele technik i metod tworzenia stron.

Powodzenia!


Nowoczesne strony www

Internet to nowoczesność, ciężko wyobrazić sobie życie bez poruszania się w sieci. Równie trudno wyobrazić sobie dobrą firmę czy działalność, bez reklamy w Internecie.
Idealnym sposobem na pozyskanie szerszego grona klientów, jest założenie własnej strony www. Wirtualny świat rozwija się bardzo szybko i obecnie możemy znaleźć w nim niemalże wszystko. Tworzenie stron internetowych jest dość czasochłonnym zajęciem, jednak warto się tym zainteresować i zlecić profesjonalnej firmie stworzenie jak najlepszej strony. Agencja interaktywna w dodatku taka, która ma już renomę i doświadczenie, stworzy dla nas idealną stronę, zareklamuje tym samym naszą działalność, a co za tym idzie zwiększy nasze szanse na zyski. To Internet jest obecnie głównym źródłem pozyskiwania informacji, mało kto nie zrobił choćby raz zakupów przez Internet. Podobnie jest z prowadzeniem biznesu - trudno wyobrazić sobie nowoczesną firmę, rozwijającą się technologicznie bez własnej strony internetowej. Każdej firmie zależy na profesjonalnym marketingu. Takim jest obecnie marketing internetowy.
A więc jeśli mamy nowoczesną stronę www, ogłaszamy szerokiej grupie ludzi o tym, że istniejemy, że jesteśmy godnymi partnerami biznesowymi, w dodatku robimy to wszystko właściwie bezpłatnie. Płacimy za stworzenie naszej strony, następnie jesteśmy szefami przed własnymi komputerami, oszczędzamy na czynszach czy wynajmach lokali pod działalność. Reklama to połowa sukcesu. Ponadto trzeba iść z postępem i jeśli mamy szansę rozwijać swój biznes na szerszą skalę, dlaczego mielibyśmy się przed tym bronić? Dobra firma stworzy nam idealną stronę internetową i z pewnością nie będziemy zawiedzeni, zwłaszcza kiedy zyski zaczną nagle wzrastać.


Dobór kolorów na stronie internetowej

Projektując wygląd strony, warto zwrócić uwagę na dobór kolorów. Każda przeglądarka stron www pozwala uzyskać na ekranie jednocześnie 256 różnych kolorów, jednak tylko 216 z nich poprawnie wyświetlają wszystkie przeglądarki internetowe. Używając “bezpiecznego” zestawu barw masz pewność, że kolor zostanie pokazany tak samo w każdym systemie operacyjnym (paleta 256 kolorów w systemie Windows nie odpowiada tym samym kolorom systemowym w komputerze Macintosh). Jeżeli użyjesz większej ilości kolorów, mogą one zostać zamienione do podobnych kolorów z podstawowego zestawu barw, czyli wspomnianych, “bezpiecznych” 216 kolorów.

Dowolny kolor składa się z trzech podstawowych barw: czerwonej, zielonej i niebieskiej, czyli tzw. RGB (R - red, G - green, B - blue). Do dyspozycji mamy 256 odcieni każdego z tych kolorów i poprzez ich mieszanie otrzymujemy dowolny inny kolor. Kolor RGB zapisywany jest w postaci #RRGGBB, gdzie RR to zapisany szesnastkowo (heksadecymalnie) kolor czerwony (red), GG to kolor zielony (green), a BB to kolor niebieski (blue). Oznacza to, że każdy kolor może przyjmować wartości od 00 do FF. W stylach CSS pojawia się jeszcze zapis dziesiętny koloru RGB w postaci rgb(RR,GG,BB), gdzie każda składowa może przyjmować wartości od 0 do 255. Bezpieczne kolory operują wielokrotnością liczby 33 w systemie szesnastkowym (00, 33, 66, 99, CC, FF) i 51 w systemie dziesiętnym (0, 51, 102, 153, 204, 255).

Można też używać nazw kolorów. Obecnie dostępnych nazw jest 140, niektóre z nich to: white (kolor biały - #FFFFFF), black (kolor czarny - #000000), green, blue, fuchsia, yellow, lime, olive, purple, teal, silver, red, navy, maroon, gray, aqua. Należy jednak pamiętać, że nie w pełni odpowiadają one bezpiecznej palecie, np. zapis szesnastkowy koloru maroon to #800000. Oczywiście, nie ma takiego w tablicy bezpiecznych kolorów!

Można nie zwracać uwagi na różnicę jeśli umieszczamy tylko zielony napis lub zieloną tabelę. Wtedy nawet lepiej stosować nazwy, bo nie trzeba zastanawiać się, jak zapisać kolor zielony za pomocą #RRGGBB. Informacja ta zaczyna nabierać znaczenia wyłącznie przy łączeniu bitmapy (GIF, JPEG) z kolorami na stronie www wprowadzonymi np. takimi instrukcjami:

color: #00ff66; - ustala kolor czcionki za pomocą stylu,
background-color: #00ff66; - ustala kolor tła za pomocą stylu.

Obecnie nie zaleca się stosowania atrybutów HTML. Powinno się je zamieniać na style CSS. W stylach, w miejsce #RRGGBB można wpisać kolor w postaci szesnastkowej (np. #CCFFCC), nazwy angielskiej (np. maroon) lub wartości RGB - rgb(20,20,99). Oto odpowiedniki:

alink - a:active { color: #RRGGBB; }
bgcolor - background-color: #RRGGBB;
color - color: #RRGGBB;
link - a:link { color: #RRGGBB; }
text - color: #RRGGBB;
vlink - a:visited { color: #RRGGBB; }

Projektując wygląd strony można również skorzystać ze znajdujących się w internecie serwisów wspomagających dobieranie kolorów i projektujących bezpieczne zestawy barw dla tabel, linków, tekstu czy tła.