Strona główna » Programy partnerskie, Tworzenie stron

Wizytówka w html-u

Napisał(a): pzarnecki w dniu 14 October 2009 Brak komentarzy

Witam. W niniejszym odcinku newsletera chciałbym przedstawić sposób, w jaki można szybko i bezboleśnie stworzyć naszą własną stronę www. Nie tak dawno opisywałem w ogóle tę możliwość w OpenOffice, ale skupiłem się wtedy na charakterystyce funkcjonalności OpenOffice. Teraz chciałbym omówić krok po kroku tworzenie strony na wybranym przykładzie. Powiedzmy, że mamy ochotę na stworzenie niewielkiej i nieskomplikowanej stronki o samym sobie. Znajdą się na niej najważniejsze nasze osiągnięcia, podstawowe informacje, słowem strona ma pełnić rolę naszej wizytówki. Możemy ją uzupełnić o inne rzecze, np. formularze kontaktowe itp., ale niekoniecznie. Przedstawione porady są skierowane przede wszystkim do osób zupełnie zielonych w sprawach tworzenia stron internetowych.

Proponuję, aby w pierwszej kolejności zająć się sprawą tła. Powód jest naprawdę banalny. Jak na początku wymyślimy sobie jakieś przyjemne dla oczy tło, to będzie się nam o niebo lepiej pracowało. Mamy trzy możliwości. Po pierwsze możemy ustawić najzwyczajniej kolor tła (osobiście najmniej mi to odpowiada), wstawić grafikę z galerii bądź zewnętrznego pliku. Z pierwszych dwóch możliwości możemy skorzystać klikając prawym przyciskiem myszki w obszarze roboczym i wybierając opcję strona. W zakładce tło znajdują się odpowiednie opcje. Jeśli w menu jako wybierzemy kolor, to pojawią się nam odpowiednie możliwości, jeśli grafika to również.

Tło z galerii nie jest w zasadzie niczym innym, jak wstawianiem grafiki z zewnętrznego pliki. Teoretycznie, możemy korzystając z opisanej wcześniej opcji wybrać odpowiednią grafikę z katalogu OpenOffice. Ale istnieje prostsze, a przede wszystkim o wiele szybsze rozwiązanie – Galeria. W górnym menu narzędzia wybieramy odpowiednią opcję i możemy spokojnie wyszukać odpowiadające nam tło. Klikamy w tym celu na grupę tła, po czym wybieramy najciekawsze naszym zdaniem. Klikamy na nim prawym przyciskiem, wybieramy opcję wstaw→tło→strona. Prosto i szybko.

W następnej kolejności powinniśmy ustanowić domyślny kolor czcionki, który będzie pasował do tła. Przy odrobinie szczęścia nie będzie to potrzebne, bowiem domyśle ustawienia mogą się okazać wystarczające. Jeśli jednak nie, to czcionkę zmieniamy w sposób bardzo podobny do tła. Klikamy prawym przyciskiem myszki, wybieramy znak oraz zakładkę efekty czcionki. W dolnej części znajduje się opcja służąca do zmiany koloru.

Możemy przejść do spraw nieco bardziej technicznych. Skoro strona to nasza wizytówka, a może rodzaj cv online, powinna być czytelna i przejrzysta, a przede wszystkim miła dla oka. Tło już mamy, pozostało nam właściwe rozplanowanie elementów. Zacznijmy od nagłówka. Proponuję, żeby poświęcić mu odrobinę czasu, bowiem od niego zależy w dużej mierze, czy ktoś w ogóle spojrzy na dalszą część. Możemy albo stworzyć klasyczny nagłówek/tytuł w postaci dużego napisu z ewentualnie dobranymi efektami, bądź skorzystać z nieco bardziej rozbudowanej graficznie formy. Omówię najpierw pierwszą.

Generalnie powinniśmy starać się znaleźć coś, co będzie nietypowe i atrakcyjne zarazem. Nie powinien to być w 100% klasyczny nagłówek – ogromna czcionka na środku strony (chyba, że ktoś bardzo sobie tego życzy). Osobiście proponuję połączyć nagłówek ze zdjęciem, dodać może jakiś ciekawy cytat, dobrze charakteryzujący naszą osobę bądź nasze cele (a może po prostu nasze dane teleadresowe). Nagłówkiem może być nasze imię i nazwisko, może jakiś opis w stylu cv (ale nie przesadzajmy).

Niech to wygląda np. w ten sposób. Z lewej strony dajemy nasze zdjęcie (wstaw→z pliku). Po prawej stronie zdjęcia znajduje się nasze imię i nazwisko (czcionka przynajmniej 15, ale też nie za wiele). Pod imieniem i nazwiskiem zamieszczamy dane teleadresowe (bądź wspomniany cytat, jeśli dane to tylko najważniejsze). Po prawej na środku pozostaje dużo miejsca. Możemy zamieścić tam coś w stylu klasycznego nagłówka, np. Słów parę o mnie… czy inne takie. Możemy również w nieco inny sposób. Proponuję skorzystanie z opcji zwanej FontWork. Niestety, jeśli nie chcemy niepotrzebnie szukać, będziemy musieli skorzystać z OpenOffice Writer, bowiem tam znajduje się ona na samym wierzchu, mianowicie jest elementem paska narzędziowego rysowanie, którego brakuje w edytorze stron www. Tworzymy odpowiedni napis we writerze (nie przesadzamy z widowiskowością), po czym kopiujemy go do naszego projektu (o ile wprowadzanie FontWork do projektu nastręcza troszkę problemów, to jego edycja wręcz przeciwnie – narzędzia do edycji włączają się automatycznie po zaznaczeniu obiektu. Możemy go niemalże dowolnie zmodyfikować).

Następnym krokiem jest opracowanie zasadniczej części strony. Jest ona zależna od tego, co zamierzamy powiedzieć za pomocą strony. Jeśli mamy zamiar dokonać tylko i wyłącznie pewnego przedstawienia swojej osoby, to umieszczamy tekst, odpowiednio mniejszy od nagłówków i możemy przejść do dalszych kroków, czyli np. przedstawienia swoich celów życiowych, zaproszenia wszystkich zainteresowanych do kontaktu. Z tym, że jeśli już przygotowujemy stronę, to jej zadaniem bywa z reguły coś więcej. Najprawdopodobniej oferujemy własną osobę w charakterze współpracownika (czytaj: poszukujemy pracy), czyli strona pełni charakter oferty. W związku z tym jej treść winna zostać podzielona na co najmniej kilka podstawowych elementów. Mogą to być np. część przedstawiająca w mniej lub bardziej luźny/sformalizowany sposób nasze doświadczenia, kwalifikacje. Może to być w postaci klasycznego życiorysu. Myślę jednak, że na stronie te treści powinny zostać przedstawione w sposób nieco bardziej autorski, narracyjny, natomiast oficjalne cv proponuję umieścić w „dziale ściągnij”. Jednakże od tej części narracyjnej powinny być wydzielone pewne treści związane z naszymi konkretnymi osiągnięciami, kwalifikacjami, celami życiowymi.

Myślę, że najlepiej zrobić to w sposób przypominający spis treści z tym, że w układzie poziomym np. słów parę o mnie (narracyjna notka biograficzna, rodzaj listu motywacyjnego), do tego cele życiowe, dodajmy osiągnięć parę itd. Jeżeli ktoś ma ochotę to może to również rozwiązać za pomocą przycisków, które znajdują się w pasku narzędziowym formanty (domyślnie włączony, umieszczony tuż nad obszarem roboczym). Na pierwszy rzut oka wyglądają one topornie, lecz w sumie sprawują się całkiem nieźle, zaś ich wygląd przy odrobinie pracy można spokojnie poprawić. Możemy również wstawić tzw. formanty obrazkowe, ale najlepiej jest je wpierw stworzyć poza OpenOffice, co jednak daleko wykracza poza tematykę newslettera. Generalnie osobom niezbyt zaawansowanym w obsłudze OpenOffice i słabiej znającym tematykę OpenOffice nie polecam korzystania z tej możliwości. Myślę, że pozostanie przy klasycznych napisach będzie o wiele lepszą sprawą. Zaś komunikację pomiędzy poszczególnymi elementami strony można zapewnić stosując sekcje i ewentualnie zakładki. Przykład. Napisaliśmy wspomniane elementy. Każdy z nich możemy rozpocząć odpowiednim podtytułem. Jeżeli będziemy pamiętali o tym, że powinny być one odpowiednio sformatowane (np. nagłówek 1, 2, 3, …), to dla programu będą one wyeksponowanymi elementami strony, do których możemy utworzyć odwołanie. Może to być odwołanie działające w obie strony, tj. od spisu treści do określonego elementu i na odwrót. Tworzymy więc kilka kategorii, układamy to w poziomej linii, niekoniecznie alfabetycznie. Powinniśmy to posegregować kierując się ważnością poszczególnych treści (oraz tez ich poziomem merytorycznym).

Przechodzimy następnie do wprowadzania zasadniczych części, pamiętając o rozpoczęciu ich odpowiednio sformatowanym tekstem. Kiedy już to zrobimy, możemy zająć się tworzeniem wewnątrzdokumentowych hiperłączy. Zaznaczamy odpowiednią pozycję w naszym quasi spisie treści. Klikamy następnie na górne menu wstaw i wybieramy stamtąd opcję hiperłącze, po czym zaznaczamy konkretny sposób dowiązania. W naszym przypadku będzie to zakładka dokument oraz znajdująca się w nim opcja cel w dokumencie. Z tej ostatniej będziemy musieli wybrać jeszcze rodzaj celu, czyli nagłówek. Można rzec po kłopocie. Jeśli zakładamy, iż gdzieś na początku był jakiś nadrzędny nagłówek, to bez problemu możemy ustanowić relację w drugą stronę. Na końcu każdej kategorii umieszczamy tekst,grafikę, przycisk, sugerujący powrót na początek strony (np. za pomocą elementu z galerii), po czym tworzymy w tym miejscu hiperłącze do początku dokumentu. Naprawdę prosta, a efektywna sprawa.

Za pomocą przedstawionej metody tworzymy bardzo prostą, aczkolwiek zawierającą interaktywne elementy stronę. Na dodatek jest to niezwykle elegancka strona. Na tym jednak nie powinniśmy zakończyć naszej strony. Wspomniałem we wcześniejszej części newslettera, iż na stronie muszą się znaleźć również jakieś pliki do pobrania. Może być to kilka rodzajów dokumentów, plików. Z jednej strony w dziale download winno się znajdować nasze CV, co najmniej w dwóch, trzech formatacg (pdf, odt, doc). Dzięki temu może ono zostać odczytane u każdej osoby, niezależnie od posiadanego przez nią oprogramowania. Dział download (ściągnij) powinien być jednym z ważniejszych. Tym bardziej, że możemy umieścić w nim również wiele innych kategorii dokumentów. Na przykład, jeśli nasza wcześniejsza praca miała charakter twórczy, w dziale download znajdą się przykłady naszych osiągnięć (bardzo starannie wyselekcjonowane).

Możemy uzupełnić naszą stronę o różnego rodzaju elementy multimedialne. Mogą to być np. animowane teksty. W zasadzie każdy fragment naszej strony możemy za pomocą formatowania znaków przerobić na animację. Tylko powinniśmy uważać, żeby nikogo w ten sposób nie zrazić. Animacja pasuje tylko od czasu do czasu, np. jako wyróżnienie pewnych partii tekstu. Korzystając z Galerii możemy umieścić na stronie np. efekty dźwiękowe, które pojawią się w trakcie naszej nawigacji pomiędzy poszczególnymi częściami tekstu, np. każdorazowo może być inny dźwięk po kliknięciu na inną pozycję spisu treści. Dźwięki przypisuje się przeciągając ikonkę z Galerii w odpowiednie miejsce w obszarze roboczym, najlepiej na przycisk, lub element tekstu. Z Galerii możemy również użyć kolorowych grafik (i nie tylko zresztą) w postaci linii, którymi powinniśmy oddzielić od siebie poszczególne części tekstu.

W kolejnych odcinkach newslettera chciałbym zająć się stworzeniem formularza w OpenOffice, co jest swego rodzaju przedłużeniem niniejszego tekstu. Na zakończenie chciałbym udzielić jeszcze jednej krótkiej rady, dla osób, które chciałyby, aby ich strony były indeksowane odpowiednio przez wyszukiwarki. Takie osoby powinny zadbać o umieszczenie w źródle dokumentu informacji ze słowami kluczowymi i/lub ewentualnie tytułem strony. Obie rzeczy są w sumie niezwykle ważne. Powinniśmy w tym celu dodać do tekstu źródłowego następujące elementy:

  1. <META NAME=KEYWORDS CONTENT=”Słowa kluczowe oddzielone przecinkami np. praca, kwalifikacje, informatyk”> – słowa kluczowe oddające trafnie treść naszej strony.

  2. <META NAME=DESCRIPTION CONTENT=”Słów parę o Janie Kowalskim. Oferta współpracy”> – krótki opis naszej strony

  3. <META NAME=ROBOTS CONTENT=”życiorys”> – informacje dla robotów wyszukiwarek, czy i co mają indeksować

Zauważyłem, że tych istotnych informacji OpenOffice nie umieszcza w dokumencie. Znajdują się za to pozostałe np. autor strony, tytuł. Do źródła strony dostajemy się w następujący sposób: widok→tekst źródłowy html. Jeśli chcemy wrócić do edycji w trybie graficznym po prostu odznaczamy tekst źródłowy html. Teoretycznie wszystko możemy zrobić w trakcie edycji źródła. Nie każdy jednak zna html-a, a Ci znający nie mają raczej czasu na zabawy z tekstem (chyba, że mają przemożną ochotę zabawy z samym tekstem np. w notatniku). Zapraszam do korzystania z OpenOffice oraz do spotkania przy następnym newsletterze.

 

Przemysław Żarnecki

Dodaj komentarz

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Możesz użyć następujących tagów:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Jeśli chcesz, aby przy Twoich komentarzach wyświetlał się Twój Gravatar, zarejestruj się na Gravatar.com.