Projektowanie witryn

Ile kosztuje strona internetowa?

admin — Tue, 08 Mar 2011 10:18:45 +0000

Takie pytanie najczęściej słyszymy od naszych klientów. Odpowiedź na nie jednak nie jest prosta. Cena zależy od wielu czynników, jakich? Między innymi od ilości zakładek oraz ich zawartości. Strona internetowa składająca się z 5 zakładek może zawierać zwykłe teksty i zdjęcia, może również zawierać tabelę czy elementy animowane, formularze itp. Kolejną rzeczą która ma istotny wpływ na koszt jest panel administracyjny. Wpływa on znacząco na koszt produkcji serwisu internetowego. Koszt wdrożenia panelu również jest zależny od stopnia jego zaawansowania. Możemy zdecydować się na edycję jedynie tekstów, możemy również mieć możliwość edycji galerii, cenników, referencji itp. Przy projektowaniu stron www ważne jest aby schemat tworzenia serwisu przygotowany był już na starcie. Ułatwi to pracę grafika, programisty i ułatwi również wycenę serwisu.

Screengrab – rób screencshoty

admin — Wed, 02 Mar 2011 07:29:22 +0000

Czasami w naszej pracy pojawia się konieczność zrobienia screenshota zawartości całej strony (chociaż by do naszego porfolio). Screengrab to małe narzędzie/wtyczka do firefoxa która umożliwia za pomocą dwóch kliknięć zrobienie screenshota widzialnej części ekranu lub też całej zawartości strony. Screenshota można skopiować do schowka bądź zapisać na dysku. Wtyczkę można pobrać z oficjalnego repozytorium mozilli.

Flash – płynne przejścia między zdjęciami

admin — Mon, 19 Oct 2009 13:32:24 +0000

Zaczynamy od wczytania pierwszego zdjęcia na warstwie pierwszej (layer 1). Następnie klikamy prawym przyciskiem myszki na pierwszej klatce w/w warstwy i zaznaczamy “create motion tween”. Ustawiamy się następnie na klatce 50 i wciskamy F6, następnie na klatce 60 i znów F6.
Teraz tworzymy nową warstwę (layer 2) i wczytujemy na niej drugie zdjęcie. Projektowanie stron www jest jak widać zajęciem mało absorbującym, jednak wymagającym nabrania nieco wprawy i doświadczenia. Następnie przeciągamy klatke ze zdjęciem na klatkę numer 50. Klikamy prawym i wybieramy “create motion tween”. Następnie ustawiamy się na klatce 60 tej samej warstwy (layer 2) i klikamy F6. To samo robimy na klatce 110.

Mamy tym samym dwie warstwy z dwoma zdjęciami, musimy dodać teraz przejście między zdjęciami. Pierwszemu zdjęciu na warstwie pierwsze w klatce 60 ustawiamy przezroczystość alpha 0%, natomiast zdjęciu drugiemu w klatce 50 też alpha 0%. Tym sposobem zdjęcie pierwsze będzie znikać w tym samym czasie gdy zdjęcie drugie będzie się pojawiać. Powstanie w ten sposób efekt płynnego przejścia. Aby był on płynniejszy możemy przyśpieszyć ilość klatek na sekunde np. do 30. (ustawienia dokumentu). Dalsza część kursu już wkrótce! Zapraszamy do czytania pozostałych artykółów w blogu, co umili oczekiwanie na kolejne części tutoriala!

A w między czasie zapraszam do przeczytania krótkiego tutoriala dotyczącego instalacji Lightboxa

1. Pierwszy krok to pobranie skryptu ze strony autora: http://www.huddletogether.com/projects/lightbox2/ oraz wgranie go na serwer w miejsce gdzie znajdują się pliki naszego serwisu.

2. Następnie w headzie strony umieścić należy link do pliku css oraz do skryptu:

3. Ostatnio etap to dołożenie rel=”lightbox” do linku do obrazka tak aby wyglądał on w ten sposób:

Więcej informacji na temat projektowania stron www w oparciu o dodatki JavaScript, znajdziesz także na blogu projektowanie-stron-www.eu .

Przygotowanie projektu graficznego cz.1

admin — Wed, 15 Jul 2009 10:55:02 +0000

Pierwszym etapem tworzenia stron jest przygotowanie projektu graficznego. Posłużyć mogą ku temu różnorakie edytory graficzne. Najpopularniejsze z nich na chwile obecną to Adobe Photoshop oraz Corel Photopaint. Tworzenie projektu graficznego rozpoczynamy od ustalenia pola edycji grafiki. Im większy serwis tym jego szerokość w px też większa. Standardowo przyjmijmy szerokość 850-900px, szerokość taka wydaje się optymalna dla większości serwisów.

Kolejny etap polega na wykorzystaniu twórczej inwencji projektanta. Projektujemy logo, menu oraz wszelkie elementy serwisu. Istotną kwestią jest dobór odpowiednich kolorów tak aby odpowiadały one specyfikacji i przeznaczeniu serwisu. Inna kolorystyka odpowiednia będzie dla serwisów biznesowych – gdzie dominują kolory biały, szary oraz niebieski – generalnie kolory stonowane, a inna dla serwisów rozrywkowych dla dzieci. Dobrym sposobem jest tworzenie stron www, których przygotowanie opiera się na cięciu szablonów graficznych. Jest to o tyle wygodne, że jeszcze przez pocięciem szablonu, można przesłać go klientowi w formie obrazka JPG.

Techniki tworzenia stron WWW

admin — Tue, 07 Jul 2009 07:55:40 +0000

Tworząc serwis internetowy można posłużyć się kilkoma językami programowania. Każdy z nich ma swoje wady oraz zalety może także być wykorzystany w mniejszym lub większym stopniu. Projektując serwis należy zastanowić się, jakie elementy mają w nim się znajdować oraz jakimi językami posłużyć się, aby wykonać dane elementy w najlepszy sposób. Aktualnie wyróżnić można trzy najpopularniejsze modele stron internetowych:

1. Strony HTML – są to wszelkie strony wykonane w oparciu o język HTML. Zaletą tego języka oraz czynnikiem, który wpływa na jego popularność jest nieskomplikowana składnia.

2. Strony FLASH – wykonane są w całości przy zastosowaniu technologii tworzenia animacji Adobe Flash. Ogromną zaletą tej techniki jest fakt, iż pozwalają ona na tworzenie bardzo dynamicznych, pełnych animacji, przykuwających uwagę Internauty stron internetowych. Wadą natomiast jest to, że wyszukiwarki internetowe nie widzą treści zapisanych wewnątrz animacji, przez co strona nie widnieje na wysokich pozycjach w wynikach wyszukiwania. Ma to ogromne znaczenie w przypadku serwisów internetowych firm gdyż utrudnia im dotarcie do klientów.

3. Strony hybrydowe – wykonane są one w oparciu o język HTML posiadające także elementy stworzone za pomocą Adobe Flash. Dzięki temu łączą prostotę i praktyczność wykonania z przykuwającą uwagę formą.

Tworzenie stron WWW w oparciu o język HTML

admin — Mon, 06 Jul 2009 14:10:38 +0000

Do projektowania stron internetowych wykorzystuje się przede wszystkim język HTML, którego podstawy zaprezentuję w dzisiejszym artykule. Swoją pierwszą stronę WWW możesz wykonać np. w Notatniku. Kiedy zapiszesz jej rozszerzenie jako *.HTML, strona będzie dostępna do uruchomienia nawet z pulipitu.

Aby zaprojektować stronę internetową musisz poznać przede wszystkim strukturę jej kodu, który najprościej mówiąc wygląda następująco:

To co widzimy wyżej to najprosztsza strona WWW, która po zapisaniu działa, ale nie wyświetla niczego, ponieważ jeszcze niczego jej nie podyktowaliśmy. Spróbujemy więc wpisać następujący kod:

To jest tekst tej strony.

Po zapisaniu i uruchomieniu naszej strony, widzimy, że na ekranie pojawia się tekst “To jest tekst tej strony”. Tak więc wiemy już, że informacja zawarta w części BODY pojawia się na ekranie. Poznajmy więc pierwszą komendę HTML, która umożliwia pogrubienie tekstu. Komenda ta to jak Bold. Jeżeli umieścimy jakiś tekst pomiędzy a , to tekst ten będzie pogrubiony:

To jest tekst tej strony.

W efekcie na ekranie zobaczymy: To jest tekst tej strony. Spróbujmy teraz zmienić kolor czcionki. W tym celu używamy polecenia , gdzie RED to nazwa koloru czerwonego po angielsku. Możemy ją zmieniać na dowolną inną typu BLUE, PINK czy GREEN. Podobnie jak pogrubienie czcionki, kolor również musimy zamknąć czyli użyć na końcu . Wygląda to w ten sposób:

To jest tekst tej strony.

Otrzymujemy: To jest tekst tej strony. Łatwe prawda? Komendy możemy oczywiście łączyć:

To jest tekst tej strony.

W tym momencie na ekranie otrzymamy: To jest tekst tej strony.

Jak widać projektowanie stron WWW nie jest niczym trudnym. Trzeba jedynie opanować podstawowe komeny języka HTML i już można tworzyć barwne witryny internetowe. Do tego odrobina znajomości programów graficznych i strony nabierają profesjonalnego kształtu.