Kolory na stronach WWW


Kolory na stronach internetowych są sprawą kluczową, jeżeli chodzi o estetykę. W poprzednim wpisie napisałem 3 kroki do estetycznej strony. Zawarłem tam informację o tym, że kolory nie powinny być jaskrawe i nie powinno korzystać się z więcej niż 4 kolorów na stronie. W tym wpisie przedstawię sposoby umieszczanie kolorów na stronie WWW.

Po angielsku

div {color: red;}
 Zapisujemy go w sposób przedstawiony powyżej. Kolor przedstawiony jest w postaci języka angielskiego gdzie red oznacza kolor czerwony.


Zapis heksadecymalny (szesnastkowy)

div {color: #ff00ff;}

Gdzie 2 pierwsze znaki oznaczają odcień koloru czerwonego, dwie kolejne koloru zielonego i dwie ostatnie koloru niebieskiego. W powyższym zapisie liczby dają połączenie kolorów czerwonego i niebieskiego co daje kolor fioletowy.

Skrócony zapis heksadecymalny 

div {color: #f0f;}

Stosuje się go jedynie, gdy dwie pierwsze litery są takie same, ponieważ ten zapis bez skracania go wygląda jak zwykły zapis szesnastkowy przedstawiony powyżej.


Zapis RGB (Red, Green, Blue)

div {color: rgb(255,0,0);}

Identycznie jak w zapisie heksadecymalnym z wyjątkiem tego, że kolory przedstawione są w postaci liczb z zakresu od 0 do 255 lub w postaci procentów jak w przykładzie poniżej:

div {color: rgb(100%,0,0);}

W obu powyższych przypadkach zostanie wyświetlony kolor czerwony.

Zapis RGBA

Zupełnie taka sama sytuacja jak z kolorem RGB lecz zapis ten został ulepszony o krycie (przeźroczystość) elementu. Przeźroczystość określamy wartościami od 0 do 1 np. 0.5.

div {color:rgba(255,0,0,0.5);}

Zapis HSL (Odcień, Nasycenie, Jasność) 


Zapis podobny jak w przypadku wyżej przedstawionych sposobów, lecz zamiast kolorów mamy bardziej szczegółowe dane jak nasycenie oraz jasność. Barwa to przedział od 0 do 255, a nasycenie i jasność jako wartość procentowa.

div {color: hsl(255,50%,70%);}

 Zapis HSLA (Odcień, Nasycenie, Jasność, Krycie)

Zapisujemy go w taki sam sposób w jaki kolor HSL, lecz zostało dodane krycie.

div {color: hsl(255,50%,70%,0.5);}

currentColor 

Jest to nic innego jak pobieranie koloru z innego elementu w divie.

div
{
color: red;
background-color: currentColor;
background-color oznacza kolor tła diva i zostanie on pobrany z koloru czcionki "color", który znajduje się powyżej, czyli będzie on czerwony.

3 kroki do estetycznej strony



Tworząc stronę internetową warto pamiętać o kilku ważnych kwestiach. Na pierwszym miejscu jest tematyka i treść zaś dopiero na drugim miejscu cała szata graficzna i inne elementy do których można zaliczyć miedzy innymi PHP i JavaScript. W tym poście zajmiemy się jednak tym drugim punktem a mianowicie szatą graficzną.

Rozmieszczenie elementów


Podczas projektowania szablonu strony internetowej należy pamiętać o jego estetycznym wyglądzie. Jedną z części estetycznego wyglądu jest dbanie o mądre rozmieszczenie elementów w taki sposób, aby nie rozpraszały użytkownika poprzez ich nadmiar. Odwiedzający powinien z łatwością poruszać się po stronie bez zbytnego zastanawiania się gdzie znaleźć np. formularz kontaktowy.

Kolorystyka strony


Powinno wystrzegać się korzystania z wielu kolorów na stronie. Tak jak w przypadku rozmieszczenia elementów rozprasza to uwagę i zniechęca do dalszego przebywania na wybranej witrynie. Korzystaj z maksymalnie 3-4 kolorów aby wyglądał on estetycznie.
Zupełnie wystrzegaj się jaskrawych kolorów. Jest to największy błąd jaki możesz popełnić, który skutecznie odstrasza czytelników.


Prostota


Czy wyobrażasz sobie stronę przepełnioną wyskakującymi okienkami i animacjami? Jeżeli twórca chce się pochwalić umiejętnościami to nie jest to dobrym sposobem. Strona przede wszystkim powinna być prosta i funkcjonalna, a pisząc prosta nie mam na myśli brzydka. Ograniczaj wszystko co zbędne jak już wcześniej wspomniane animacje czy nawet pliki graficzne. Stawiając na prostotę zaoszczędzisz sporo miejsca na hostingu, a czas ładowania strony znacznie się skróci.

Jest to moja propozycja jak powinna wyglądać estetyczna strona. Jeżeli masz jakieś propozycje co mógłbym tu dodać to śmiało daj mi o tym znać w komentarzu.

Jak wstawić szablon na bloga na blogspocie




Czym jest szablon i po co on jest?


Strona internetowa czy też blog jest obrazem, który jest wyświetlany na ekranie monitora na podstawie plików umieszczonych na serwerze. Gdy mamy do czynienia z ogromną stroną internetową lub blogiem, niemożliwym jest dla webdesignera zaprojektowanie setek czy tysięcy stron opartych o ten sam projekt graficzny, lecz definiowany w każdym pliku osobno. Właśnie dlatego powstały szablony.

Szablonem nazywamy zazwyczaj wzorzec strony określający położenie różnych elementów na stronie oraz treści, wielkość i rodzaj czcionki, kolor tła itd. Dlatego strony/blogi są w tych czasach dynamiczne i korzystają one z szablonów.

Pewnym jest, że blogspot nie oferuje jakichś specjalnie eleganckich szablonów i po zrozumieniu na czym to wszystko polega, będziesz chciał wgrać szablon niestandardowy, który spodoba się Tobie i osobą odwiedzającym bloga.


Skąd pobrać darmowy szablon na blogspot?


W internecie znaleźć można wiele stron, które oferują darmowe szablony na blogspot. Mało tego są to szablony w pełni profesjonalne i jedyne co trzeba zrobić, aby taki szablon legalnie posiadać to nie usuwać podpisu autora tego szablonu.

Przykładowe strony z szablonami do pobrania za darmo:


Jak wgrać szablon na bloga


Gdy już pobierzesz szablon musisz go rozpakować programem WinRAR (lub innym programem do rozpakowywania plików) w wybrane miejsce. Gdy już to zrobisz w folderze znajdziesz plik z roszerzeniem .xml Jest to plik szablonu, który będziemy wrzucać. Przejdźmy teraz do odpowiednich kroków:

1. Zrób kopię zapasową szablonu


Kopia zapasowa szablonu jest konieczna, jeżeli przy wgrywaniu szablonu coś pójdzie nie tak, lub jeśli szablon nie będzie nam odpowiadał. Aby zrobić kopię zapasową przejdź w zakładkę Szablon, następnie naciśnij przycisk "Utwórz/przywróć kopię zapasową", który znajduje się w prawym górnym rogu strony. Wyskoczy okienko, w którym wybierasz  "Pobierz pełny szablon" - zapisujesz plik i gotowe.

2. Wgraj szablon 


Będąc w tym samym miejscu po wybraniu "Utwórz/przywróć kopię zapasową" możesz wgrać szablon. Wystarczy wybrać "Wybierz plik", a po wybraniu pliku .xml akceptujemy poprzez "Przekaż" - to wszystko.





Jak wrzucić stronę na hosting przez FTP


Jak wrzucić stronę na hosting przez FTP? Jest to pytanie, które zadać musi sobie każdy webmaster, który chce, aby jego strona została pokazana w internecie. Przez wrzucenie strony internetowej na hosting FTP inni użytkownicy internetu będą mogli na nią wejść poprzez adres URL. Czym jest hosting tłumaczyłem tutaj, teraz przejdźmy do tego czym jest FTP.


FTP - to protokół używany do kopiowania plików między dwoma komputerami w sieci Internet. Użytkownik łączy się z serwerem FTP za pomocą specjalnego programu, nazywanego klientem FTP. 

W naszym przypadku wrzucanie strony na serwer odbędzie się przy pomocy darmowego programu FileZilla - do pobrania tutaj. Gdy już zainstalowaliśmy program to przechodzimy do panelu administracyjnego naszego hostingu i wybieramy naszą stronę internetową. W moim przypadku (korzystam z hostingu SMS ProSerwer.pl i serdecznie go polecam) w panelu administratora mam przycisk o nazwie FTP. Po jego kliknięciu pojawiają mi się wszelkie informacje potrzebne do połączenia się z FTP. Informacje, które nas interesują to:

  • Adres serwera FTP (host)
  • Nazwa użytkownika
  • Hasło
Kiedy mam już wszystkie potrzebne informacje uruchamiamy program. Jednym ze sposobów na połączenie się z serwerem FTP hostingu jest wpisanie wszystkich potrzebnych danych w okienko znajdujące się o góry programu. Wygląda ono tak:


Pole "Port" zostawiamy puste, program sam wybierze odpowiedni port, aby połączyć się z danym hostingiem.

Jeżeli nie chcemy za każdym razem monotonnie kopiować danych do połączenia się z serwerem możemy skorzystać z "Menedżera Stron". Aby go otworzyć naciskamy kombinację klawiszy CTRL+S. W nowo otwartym oknie wybieramy przycisk "Nowy adres" i wypełniamy wszystkie pola jak w poprzednim sposobie. Jedyne co trzeba tutaj zmienić to Typ logowania: Anonimowy na Typ logowania: Normalny.

Tworzenie podstawowego szablonu w CSS





Ten poradnik pokaże Ci, w jaki sposób napisać swój pierwszy, według mnie najprostszy jaki może być szablon strony internetowej przy użyciu CSS. Nie do pomyślenia jest, abyś szablon strony wykonywał na podstawie tabel - te czasy już dawno minęły.

W poprzednich poradnikach pisałem jaka jest struktura HTML i jak umieścić arkusz stylów CSS w pliku HTML - będzie to koniecznie, byś napisał swój pierwszy szablon.

Krok 1

Pierwsze co musisz zrobić to napisać strukturę strony i umieścić CSS w pliku HTML. Nie będę tłumaczył jak to zrobił, można o tym przeczytać w moich wcześniejszych poradnikach.

Krok 2

W tym kroku należy w pliku HTML napisać strukturę divów, które posłużą jako cegiełki szablonu. Czym jest div?  Jest to element blokowy, który stosuje się głównie do tworzenia struktury strony. Chcemy by nasza strona składała się z miejsca gdzie będzie logo, z lewego menu, z treści oraz ze stopki. Przykładowy projekt wygląda tak:


Struktura szablonu znajdowała się będzie pomiędzy znacznikami <body> </body> i będzie wyglądała następująco:


W zamieszczonym przykładzie stworzyliśmy div o id=kontener. Będzie to miejsce, w którym umieszczać będziemy wszystkie divy.

Krok 3

Teraz odwołamy się do naszych divów, które napisaliśmy w pliku HTML. Przechodzimy do pliku style.css i zapisujemy każdego z divów, które stworzone zostały wcześniej. Wygląda to tak:



Można teraz przejść do ustalania odpowiednich wartości dla każdego diva. Będzie to wyglądało w ten sposób:


<

Opis poszczególnych właściwości:


width - szerokość.

height - wysokość.

margin - margines (ustawiony na wartość 0 auto;, by wyrównać diva do środka).

background-color - kolor tła.

float: left; - ustawienie tej wartości przenosi diva na lewą stronę. Ustawiliśmy tą wartość dla #menu i #tresc, ponieważ sprawi to, że divy będą obok siebie.

clear:both; - usuwa formatowanie float, dzięki czemu reszta divów poniżej nie będzie już przesuwania do lewej strony - było to konieczne by stopka pojawiła się na dole strony.


Skomplikowane czy może banalnie proste? Kluczową rolę w posługiwaniu i uczeniu się języka CSS jest znajomość języka angielskiego, bo wszystkie wartości są właśnie w języku angielskim.





Hosting SMS na ProSerwer.pl

logo proserwer.pl

W sieci można znaleźć wiele hostingów, które oferują przeróżne usługi. Należą do nich np. rejestracja domeny, hosting WWW na stronę internetową, CMSy (system zarządzania treścią) i instalatory tych CMSów oraz certyfikaty SSL, które są narzędziem zapewniającym ochronę witryn internetowych, a także gwarantem zachowania poufności danych przesyłanych drogą elektroniczną.

Za takie rarytasy przy większości firm należy podać swoje szczegółowe dane osobowe, w tym PESEL, który jest naszym swoistym, prywatnym identyfikatorem. Płatność odbywa się głównie poprzez przelew.

Wspomnę, że nie jest to opłacona przez ProSerwer.pl reklama. Często korzystałem z tego hostingu i chciałbym się z Wami podzielić jego ofertą i serdecznie polecić go początkującym.

Czym jest ProSerwer?

Być może znasz już tą stronę. Jest ona jednym z tych hostingów, który oferuję płatność SMS, ale nie tylko. Możliwe sposoby zapłaty za usługi to: przelew, SMS, PayPal i PaySafeCard. Możliwości jest sporo, przez co płatność jest wygodna.

Ceny na ProSerwer również nie należą do jakichś niesamowicie wygórowanych. Dla przykładu rejestracja domeny kosztuje 19zł netto przelewem, a przedłużenie jej o kolejny rok to 69zł. Taką domenę można również zamówić przez SMS, lecz cena staje się wtedy wyższa i jej rejestracja wynosi 44zł - nic dziwnego, bo transakcja polega na SMS Premium, czyli część z pieniędzy trafia do firmy, która użycza tej domeny, a reszta do usługodawcy właśnie SMS Premium. Dlatego cena staje się w przybliżeniu 2 razy większa, bo właściciel hostingu dostał tą samą kwotę jakby ktoś zapłacił przelewem.

Oferta

ProSerwer ma w swojej ofercie naprawdę ciekawe rozwiązanie dla tych, którzy potrzebują strony pod wizytówkę, małe forum lub stronę np. drużyny w Counter Strike (tak, grałem w CS'a). Do tych wszystkich stron nie jest potrzebna jakaś ogromna pojemność dyskowa i terabajty miesięcznego transferu. Poza tym strony bez dokupionej domeny mają przyjazny i krótki adres: www.nazwastrony.xaa.pl i są aktywowane do pięciu minut - to na prawdę krótko.

Poniżej znajduje się szczegółowa oferta hostingu za SMS


oferta proserwer.pl

Dodawanie CSS do HTML - czyli jak umieszczać arkusze stylów


Pisanie w samym języku HTML nie jest tym, co satysfakcjonuje każdego. Strona napisana tylko w takim języku nie jest do końca estetyczna i przejrzysta. Poza tym wydaje się troszeczkę przestarzała. Dodanie do strony arkusza stylów CSS jest dobrym rozwiązaniem na ten problem. Służy on w całości za wygląd i rozmieszczenie elementów na stronie, a HTML to jedynie treść. Nie wyobrażam sobie w dzisiejszych czasach strony bez użycia kaskadowego arkusza stylów.

W tym poradniku przedstawię Ci dwie metody w jaki można umieszczać style CSS w plikach HTML.

Wewnętrzny arkusz stylów

Wewnętrzny arkusz stylów znajduje się w środku pliku HTML. Mając już napisaną strukturę strony, wystarczy pomiędzy znacznikami:

<head> </head>
umieścić znacznik:

<style> </style> 
Teraz wystarczy, że zawartość CSS umieszczał będziesz pomiędzy znacznikami <style </style>. Dla przykładu:

<head>
<style>
body
{
margin:0;
background-color:#d3d3d3;
}
</style>
</head>

Zewnętrzny arkusz stylów

Zewnętrzny arkusz stylów polega na tym, że wszystkie style znajdują się w osobnym pliku, a w zawartości pliku HTML jest tylko jedna linijka tekstu, która odnosi się do lokalizacji pliku ze stylami. 

Pomiędzy znacznikami <head> </head> należy umieścić następującą linijkę tekstu:

<a href="style.css" rel="stylesheet" type="text/css">

Pamiętaj jednak, że plik style.css może nazywać się inaczej, ważne jest jedynie rozszerzenie .css oraz to, aby lokalizacja pliku została określona po fragmencie <a href="....". Ten sposób umieszczania stylów jest o wiele lepszy od wewnętrznego arkusza stylów, ponieważ łatwiej połapać się w kodzie, jest on bardziej przejrzysty i łatwiejszy do edycji.