Na tym blogu znajdziesz mnóstwo informacji o efektywnym tworzeniu stron WWW.

Jeśli chcesz, aby Twoje witryny działały szybciej, lepiej to dobrze trafiłeś.

Pokażę Ci jak tworzyć projekty, które będą się wyświetlać poprawnie na każdej popularnej przeglądarce w sieci. Wiele informacji tyczy się też zagadnienia SEO oraz optymalizacji pod kątem szybkości ładowania się strony WWW.

Jak zarobić na grafice komputerowej

bank zdjęć - grafika komputerowaWiadomo, że graficy komputerowi w różnego rodzaju bardziej renomowanych firmach potrafią zarobić naprawdę przyzwoite pieniądze. Co natomiast z amatorami, którzy tworzą grafikę dla własnej przyjemności i od czasu do czasu dostają jakieś zlecenie?

Jak się okazuje nasze prace wykonywane w programach komputerowych czy też tworzone przez nas zdjęcia możemy sprzedawać do tak zwanych banków zdjęć stockowych. Do tematu podejdziemy na przykładzie strony http://pl.depositphotos.com/, czyli stosunkowo nowego banku zdjęć, ale bardzo szybko się rozwijającego i proponującego całkiem przyzwoite stawki dla dostawców plików graficznych.

Jak zostać dostawcą? Przede wszystkim musimy zarejestrować się na stronie i przesłać kilka naszych przykładowych prac do oceny, żeby wstąpić do grona dostawców. Jeśli już zarejestrujemy się w programie możemy przesyłać dowolną ilość naszych prac. Oczywiście każdy nasz plik graficzny przed wgraniem do systemu podlega moderacji. Jeśli zastanawiamy się czy nasze pracę będą nadawały się do serwisu możemy przejrzeć pliki innych twórców na stronie http://depositphotos.com/category/Vectors.html. Naturalnie powinniśmy zdawać sobie sprawę z tego, że nasze prace muszą być najwyższej jakości, a jeśli chcemy na nich odpowiednio zarobić powinniśmy również wybrać bardziej popularne dziedziny. Jak wyglądają nasze zarobki? Przede wszystkim uzyskujemy dochody za sprzedaż naszych zdjęć w postaci prowizji od 40 do 60 % w zależności od naszego stażu w programie i ilości wgranych przez nas zdjęć. Jeśli dostarczamy wysokiej jakości zdjęcia możemy również zgłosić się do odpowiedniego programu promocji dostawców, w którym otrzymujemy również płatność w momencie wgrania naszego zdjęcia – 0,10$ za zdjęcie, ale do wgrania 500 zdjęć. Oczywiście Depositphotos zapewnia nam również opcje kupna zdjęć, jeśli mamy takie zapotrzebowanie. Na początku możemy przetestować sobie bezpłatny abonament na 7 dni, dostępny na stronie http://pl.depositphotos.com/free-photos.html, podczas którego będziemy mogli pobierać do 5 zdjęć dziennie (zdjęcia z całych zasobów serwisu i dowolnej wielkości). Okazuje się, że temat zdjęć stockowych i grafiki komputerowej staje się coraz bardziej popularny, a jeśli wykonujemy dobre prace, możemy na tym nieźle zarobić.

Autor wpisu: Marek Michałowski

Strona WWW w obiektowym PHP

php logoPisałem wcześniej o możliwości wczytywania poszczególnych elementów strony WWW z plików za pomocą funkcji include. Istnieje bardziej zaawansowana metoda tworzenia projektów stron internetowych. Niesie ona za sobą dużo większe możliwości związane z obiektowym PHP. Główną zaletą tworzenia witryn obiektowo to fakt, iż większość pracy wykonują za nas klasy, musimy jedynie zaktualizować tą, w której treść jest zmienna. Jak łatwo się domyślić, nic nie jest oczywiście doskonałe, HTML’em.

Poniżej przedstawić chciałbym strukturę strony napisanej w obiektowym PHP.

<?php
require ('stale.inc'); // zainkludowanie stałych elementów strony
 
class Podstrona extends Strona
{
   public function Pokaz() // użycie funkcji Pokaz() do wyświetlenia strony
   {
      echo "<html>\n<head>\n";
      $this->PokazTytul();
      $this->PokazKeywords();
      $this->PokazStyle();
      echo "</head>\n<body>\n";
      $this->PokazNaglowek();
      $this->PokazMenu($this->Przyciski); // pokazanie przycisków
      echo $this->Zawartosc; // zmienna zawartość strony
      $this->PokazStopke();
      echo "</body>\n</html>";
   }
}

Jak łatwo zauważyć każda klasa tyczy się konkretnej części witryny [podobnie jest używając include lub require]. Plik strona.inc posiada wszystkie klasy, tzn. PokazTytul, PokazNaglowek itd. Przy pisaniu kodu HTMl przeplatanego z PHP warto zapamiętać, że czasem nie opłaca się wszystkiego zamykać z echo. Lepiej zamknąć kod PHP [?>] i otworzyć go ponownie po dłuższej części kodu HTML [<?].
Taki schemat wykonania strony WWW daje nam również łatwiejsze napisanie kodu odpowiedzialnego za ukazanie aktywnego przycisku. Wystarczy przyrównać ciąg znaków występujący po nazwie naszej domeny do nazwy klasy, która aktualnie jest wyświetlana.

Np. mając stronę http://webdesign.grzegorzbielak.pl/podstrona.php przyrównujemy „podstrona” do nazwy naszej klasy [nie uwzględniając wielkości liter].

Projektowanie wizytówek

projektowanie wizytówekProjektowanie profesjonalnych wizytówek to jedna z ważniejszych kwestii w działalności każdego grafika freelancera.  Powinien on, oprócz podstawowych umiejętności projektowych, posiadać wiedzę na temat wydruków wizytówek.

Mowa tu formacie kolorów, rozmiarze dokumentu, czy samej wizytówki. Warto też zainteresować się tu stworzeniem takiej wizytówki w grafice wektorowej, która znacznie lepiej radzi sobie z wydrukami – ich ostrością, skalowaniem, gdyż wszystkie elementy zapisywane są w niej jako odrębne kształty. Oczywiście przy tak małym rozmiarze Photoshop bez trudów sobie poradzi, problemy pojawiają się dopiero przy formatach rzędu A3 czasem nawet A4.

Warto wspomnieć też o specyfikacji dokumentu przeznaczonego do projektowania wizytówek [załóżmy, że wybieramy format standard]:

90x50mm – 300 dpi – CMYK.

Wizytówki podzielić możemy na grupy pod następującymi względami:

Rozmiar:

  1. Standard - 90×50 mm.
  2. Euro - 85×50 mm lub 85×55 mm.

Typ:

  1. Jednostronne – 4+0.
  2. Dwustronne - 4+4.

Papier:

  1. Kreda.
  2. Karton.
Uszlachetnienia:
  1. Folia błysk.
  2. Folia matowa.
Poniżej przedstawić bym chciał kilka bardzo ciekawych projektów wizytówek:

 

wizytówka - projekt graficzny
wizytówka - projekt
wizytówka - projekt
wizytówka - projekt
wizytówka - projekt
wizytówka - projekt

17 stron, które musisz poznać

Inspiracje dla grafików

Inspiracje dla grafikówKażdy grafik freelancer, który stara się, aby każdy jego nowo powstały projekt był lepszy od poprzedniego powinien korzystać ze stron z pracami innych grafików. Przez słowo „korzystać” rozumiem przeglądanie, porównywanie ze swoimi, uczenie się nowych trików graficznych…

Inspiracje znaleźć możemy wszędzie, przede wszystkim w Internecie na stronach takich jakie przedstawione są poniżej, w reklamach w telewizji, na mieście, w samej naturze czy zdjęciach i tapetach na pulpit.

Warto poszukać kilka fanpage’ów najbardziej znanych i utalentowanych grafików komputerowych i na bieżąco śledzić ich prace, linki jakie udostępniają. Często dzielą się oni swoją wiedzą, a w Internecie, głównie na stronach obcojęzycznych, znaleźć możemy ciekawe i pouczające wywiady z nimi. Nie wolno zapinać też o wyszukiwarce grafiki Google, trzeba jedynie wpisać trafne słowa kluczowe, podpowiedzieć mogę, że lepiej robić to w języku angielskim, dużo szybciej znajdziemy to, czego szukamy.

Zacząć bym chciał od moich ulubionych stron:

  1. http://dribbble.com/
  2. http://www.behance.net/
  3. http://365psd.com/

Warto też odwiedzić portfolia najlepszych grafików na świecie:

  1. http://www.pirogov.ru/
  2. http://www.designbombs.com/
  3. http://ricardogimenes.com/

Oprócz tego warte uwagi są również blogi dotyczące tworzenia stron WWW i grafiki komputerowej:

  1. http://www.creatyna.pl/
  2. http://inspiredology.com/
  3. http://ilovetypography.com/

Nie można pominąć oczywiście stron ze świetnymi tutorialami:

  1. http://psd.tutsplus.com/
  2. http://net.tutsplus.com/
  3. http://vector.tutsplus.com/
  4. http://www.web-tutorials.pl/
  5. http://www.planetphotoshop.com/category/tutorials

Na stronach z tapetami również znaleźć możemy wiele grafik/zdjęć które staną się dla nas swego rodzaju inspiracją:

  1. http://500px.com/
  2. http://interfacelift.com/wallpaper/downloads/date/any/
  3. http://wallpaperswide.com/

Mam nadzieję, że każdy znajdzie na stronach coś, czego szukał. Lista będzie aktualizowana wraz z nowo odkrytymi przeze mnie, ciekawymi pozycjami.

Tagi details oraz meter w HTML5

HTML5 ikonka

HTML5 ikonkaCoraz większa liczba projektantów stron będzie używać HTML5, gdyż stawać się on będzie standardem w tworzeniu stron internetowych. Jest znacznie uproszczony względem swojej poprzedniej wersji, ale przede wszystkim daje dużo większe możliwości.

Dziś opisać chciałbym działanie nowych tagów – details oraz meter.

Details z angielskiego znaczy szczegóły, jest to tag, dzięki któremu możemy ukryć interesujące nas informacje i wyświetlić jest po kliknięciu w wyżej wymieniony wyraz, tzn.  szczegóły. Jest to bardzo przydatne, wcześniej podobny efekt nie był możliwy do wykonania w czystym HTML, musielibyśmy skorzystać z kombinacji JavaScript i CSS. Poniżej pokażę kod odpowiedzialny za taki właśnie efekt:

<section class="webdesign_details">
<h1>Tworzenie stron w HTML5</h1>
<details>
- najnowsze rozwiązania
- efektywniejsze pozycjonowanie
- wysoka wartość semantyczna strony
</details>
</section>

Ten kod wyświetli nam nagłówek stopnia a pod spodem trójkąt z napisem szczegóły, po którego kliknięciu wyświetli się nam lista zalet tworzenia stron w HTML5.

Drugim tagiem, na który chciałbym zwrócić uwagę to meter. Jest to nic innego jak pasek ładowania, tyle, że statyczny. Wyświetla on progres, stan „załadowania” jakiegoś komponentu, skryptu…  Oto jak wygląda jest kod:

<p>Strona załadowana:</p>
połowie: <meter min=0 max=20 value=10 style='width: 200px;'></meter><br>
w 25%: <meter min=0 max=20 value=5></meter>

Powyższy kod wyświetli nam taki rezultat:

meter w html5

Więcej o tworzeniu stron w HTML5 dowiedzieć się możecie na http://grzegorzbielak.pl/

Konfiguracja pliku .htaccess

dostęp do witryny

dostęp do witrynyOstatnim razem pisałem o ciekawej i niezwykle przydatnej funkcji php include, która pozwala nam na wczytywanie zawartości plików na strony WWW.

Dziś zajmiemy się konfiguracją naszej witryny z poziomu http. Nie wszyscy projektanci stron wiedzą, że z łatwością możemy przekierowywać konkretne podstrony na inne czy ustalać ścieżki stron błędów.

Wszystko za sprawą jednego pliku wgranego za serwer. Mowa o .htaccess. Tak! Nie posiada on nazwy! Z poziomu Windows jego utworzenie jest bardzo trudne, zapewne nie da się tego zrobić tradycyjnymi sposobami.

W celu jego utworzenia najlepiej ściągnąć dość popularny program o nazwie Total Commander, w nim bez problemów stworzymy plik bez nazwy. Może nie stworzymy, a edytujemy już istniejący plik .txt. Robimy to zaznaczając go prawym przyciskiem myszy i klikając F6 na klawiaturze. Następnie na końcu ścieżki usuwamy wszsytko co jest przed kropką i zmieniamy rozszerzenie .txt na .htaccess.

Wiec do rzeczy, zacznijmy od budowy pliku .htaccess. Ptzykładowy może wyglądać tak:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !^grzegorzbielak.pl [NC]
RewriteRule ^(.*)$ http://grzegorzbielak.pl%{REQUEST_URI} [R=301,L]
 
RewriteRule ^pozostale.php /portfolio.php [R=301,L]

A teraz zajmijmy się omawianiem poszególnych linijek. Zacznijmy od ustalenia dla naszej witryny jednego, jednolitego adresu bez WWW [będzie on wyglądał tak: http://grzegorzbielak.pl]:

RewriteBase /
RewriteCond %{HTTP_HOST} !^grzegorzbielak.pl [NC]
RewriteRule ^(.*)$ http://grzegorzbielak.pl%{REQUEST_URI} [R=301,L]

A jak ustalić konkretny tekst dla błędu 404, a jak konkretny plik dla błędu 403:

ErrorDocument 404 "Brak określonego dokumentu na serwerze!"
ErrorDocument 403 /blad403.html

Oprócz tego plik .htacess daje nam możliwość ustalenia priorytetu dla wczytywania się plików index. Robimy to za pomocą takiej komendy [pliki ładować się będą w kolejności od lewej do prawej]:

DirectoryIndex index.php index.html poprawki.html

Jest to przydatne, gdy przeprowadzamy poprawki na naszej stronie. Możemy wtedy użyć [nie trzeba usuwać żadnych plików z serwera!]:

DirectoryIndex poprawki.html

Bardzo przydatne jest też przekierowanie z podanych adresów http na inne [z stary.php na nowy.php]:

RewriteRule ^stary.php /nowy.php [R=301,L]

Podobnie się ma sprawa jeśli chodzi o przekierowania z subdomen do katalogów:

RewriteCond %{HTTP_HOST} subdomena.grzegorzbielak.pl
RewriteCond %{REQUEST_URI} !katalog/
RewriteRule (.*) katalog/ [L]

Myślę, że wielu grafików freelancerów i projektantów stron WWW skorzysta z tego co oferuje nam plik .htaccess.

Dla opornych przygotowałem ten plik do pobrania.

htaccess

Powered by WordPress | Designed by: NewWpThemes | Thanks to Free WordPress Themes