Serwan

Programowanie obiektowe w PHP

10 listopada 2010

Dzięki programowaniu obiektowemu możemy tworzyć rozbudowane programy w uporządkowany sposób. Umożliwia nam to podział programu na odrębne części – klasy. W klasie wyodrębniamy fragmenty programów, które są jakąś logiczną całością, odpowiadającą za jedną funkcjonalność, albo jeden spójny zbiór danych.

Ta logiczna całość może być wykorzystana wiele razy w jednym programie, jak również w innych programach. W miejscu, gdzie chcemy użyć daną klasę, tworzymy obiekt tej klasy. Obiektów może być kilka. Stosujemy je wszędzie tam, gdzie potrzebna jest nam dana funkcjonalność, jeżeli tę funkcjonalność musimy zmienić, robimy to w jednym miejscu – w definicji klasy. Skutki tej zmiany będą widoczne wszędzie tam, gdzie występują obiekty tej klasy.

Podobna sytuacja występuje w przypadku, gdy w programie wystąpi jakiś błąd. Ten sam błąd może wystąpić w wielu miejscach, ale dzięki temu, że program jest oparty na klasach i obiektach tych klas, to przyczyna błędu występuje tylko w jednym miejscu w kodzie całego programu – w definicji klasy. Gdy usuniemy błąd, usterka znika z każdego miejsca, w którym wystąpiła.

I coś, co dla wielu będzie prawdopodobnie najważniejszą zaletą. Umiejętność programowania obiektowego umożliwia używanie frameworków i stosowanie wzorców projektowych, co szalenie ułatwia i przyspiesza proces powstawania programów.

Teraz jak to wygląda w praktyce. Utworzę klasę Notatka

class Notatka
{
	private $autor;
	private $notatka;
 
	public function zapisz_autora($autor)
	{
		$this->autor=$autor;
	}
 
	public function zapisz_notatke($notatka)
	{
		$this->notatka=$notatka;
	}
 
	public function wyswietl()
	{
		echo '<h2>'.$this->autor.'</h2>';
		echo '<p>'.$this->notatka.'</p>';
	}
}
 
$obiekt =new Notatka();
$obiekt->zapisz_autora($_POST['autor']);	
$obiekt->zapisz_notatke($_POST['notatka']);	
$obiekt->wyswietl();

Klasa

Klasa jest prototypem obiektu – strukturą zawierającą zarówno dane (pola klasy) jak i funkcje (metody klasy).
Klasę definiuje się słowem kluczowym class po którym podajemy nazwę klasy, a następnie wewnątrz nawiasów klamrowych definiujemy jej pola i metody.

Obiekt

Obiekt jest instancją klasy zawierającą się w konkretnej zmiennej wykorzystywanej w kodzie programu.
Obiekt danej klasy tworzy się podstawiając do zmiennej instancję klasy tworzoną operatorem new. Dostęp do pól i metod klasy następuje poprzez nazwę zmiennej, operator ->, a następnie nazwę pola lub metody. Dostęp do pól i metod wewnątrz klasy otrzymuje się poprzez referencję $this->

Kwalifikatory dostępu

Definiując wewnątrz klasy pola i metody używamy kwalifikatorów dostępu. Do dyspozycji mamy trzy kwalifikatory dostępu: public, private, protected. Składowe o dostępie public są dostępne zarówno wewnątrz klasy jak i na zewnątrz. Do składowych o dostępie private dostęp istnieje jedynie z wewnątrz klasy, w której składowa została zdefiniowana. Do składowych o dostępie protected dostęp istnieje jedynie z wewnątrz klasy, w której składowa została zdefiniowana, oraz klas potomnych.

Metody

Metody klasy są funkcjami zdefiniowanymi wewnątrz klasy. Stosują się do nich wszystkie zasady związane ze zwykłymi funkcjami z uwzględnieniem kwalifikatorów dostępu.

Pola

Pola klasy są składowymi klasy przechowującymi dane dowolnego typu. Stosują się do nich wszystkie zasady dotyczące zwykłych zmiennych z uwzględnieniem kwalifikatorów dostępu.

Tagi: echo, funkcje, PHP, programowanie obiektowe
Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | 10 komentarzy »

Zabezpieczony: Optymalizacja przetwarzania tablicy w pętli

28 października 2010

Tagi: array_shift(), foreach, PHP, while
Zaszufladkowany do Sekrety Webmasterów | Wprowadź swoje hasło, aby zobaczyć komentarze.

Ile zarabiają informatycy?

21 lipca 2010

Wczoraj czytałem ciekawy artykuł na Wirtualnej Polsce o tym, ile zarabiają informatycy. Publikacja była o tyle interesująca, że podawała zarobki w różnych kategoriach: analityków, administratorów, programistów. Mnie szczególnie zainteresowała stawka dla webmastera i webdevelopera.

Może nie wszyscy są zorientowani w tych pojęciach, więc wyjaśnię. Webmaster to ktoś kto robi z reguły statyczne strony internetowe lub interfejsy stron dynamicznych. Musi znać (X)HTML, CSS, trochę JavaScript. Może zajmować się również grafiką (jak jest dobrym grafikiem, to może nazywać się webdesignerem). Webdeveloper natomiast oprócz wszystkich kompetencji webmastera potrafi również programować, co pozwala mu tworzyć strony dynamiczne, a także najróżniejsze programy dostępne przez przeglądarkę. Do programowania najczęściej używa się języka PHP. Dobrze jest potrafić korzystać z baz danych.

Dlaczego o tym wszystkim piszę? Głównie dla tego, że wiele osób pyta mnie: ile zarabia webmaster, webdeveloper/programista PHP i ile zarabia się po moim szkoleniu. A gdy podam odpowiedź, to mało kto jest z niej zadowolony. Wspomniany na wstępie artykuł jest niezależnym (przynajmniej ode mnie źródłem informacji). Prezentowane w nim kwoty, to prawdopodobnie kwoty brutto i są to jakieś średnie. Z pewnością występują pewne różnice w zależności od miasta i doświadczenia pracownika na danym stanowisku.

Ile więc możesz zarobić po szkoleniu Zawodowy Webmaster? Artykuł podaje, że webmaster zarabia 2900 zł, a webdeveloper 3800 zł. Program szkolenia obejmuje (X)HTML, CSS, JavaScript, PHP, MySQL jest tu więc wszystko, co można wymagać od webdevelopera. Brakuje jedynie doświadczenia i to mierzonego nie w latach, ale w dziesiątkach tysięcy napisanych linii kodu. Początkowy webdeveloper może zarabiać tyle samo, co webmaster – czasami trochę więcej, czasami trochę mniej. Ofert dla webdeveloperów (czasami są to oferty „poszukiwany programista PHP”) jest jednak znacznie więcej, niż dla webmasterów. Jestem pewien, że Zawodowy Webmaster może być świetnym startem do kariery webdevelopera. Oczywiście to dopiero początek pracy i nauki, ale już na tym początku będziesz do przodu o jakieś dwa lata w stosunku do większości samouków, a nawet absolwentów niektórych uczelni (na szkolenia od czasu do czasu trafiają studenci kończący studia i potrzebujący wiedzy i umiejętności do wykonania/napisania prac dyplomowych, semestralnych itp. – stąd znam sytuację absolwentów).

Wszystkich zainteresowanych zapraszam we wrześniu na szkolenie.

Bezrobotnych, którzy chcą mieć Zawodowego Webmastera sfinansowanego przez Urząd Pracy proszę o jak najszybsze zgłoszenie na stronie oferty dla bezrobotnych. W urzędach niektóre decyzje trwają dosyć długo, a i urzędnicy stawiają dziwne warunki. W wielu przypadkach możemy pomóc, ale to wymaga czasu.

Zaszufladkowany do Tymczasowe | 1 komentarz »

Wprowadzenie do ADODB

22 czerwca 2010

Biblioteka ADODB jest warstwą abstrakcyjną pośredniczącą w komunikacji z bazą danych. Dzięki niej aplikacja może być przenoszona między wieloma różnymi systemami baz danych. ADODB obsługuje MySQL, PostgreSQL, Oracle, Interbase, Microsoft SQL Server, Access, FoxPro, Sybase, ODBC i ADO. Ułatwione jest też wysyłanie i odbieranie danych z bazy z poziomu skryptu PHP.

Tworzenie obiektu i nawiązywanie połączenia

Połączenie z bazą za pomocą biblioteki ADODB wygląda następująco:

include("adodb5/adodb.inc.php");
$db = NewADOConnection('mysql');
$db->Connect("127.0.0.1", "root", "haslo", "mojabaza");

W pierwszej linijce włączamy do skryptu bibliotekę ADODB. Ścieżka do pliku adodb.inc.php może być nieco inna – ważne, by wskazywała na wspomniany wcześniej plik. W drugiej linijce tworzymy obiekt komunikacji z bazą danych. Funkcja NewADOConnection() w argumencie przyjmuje symbol bazy danych. Ostatnia linijka łączy obiekt $db z rzeczywistą bazą danych. Metoda Connect pobiera kolejno argumenty: adres bazy danych, nazwa użytkownik, hasło i nazwa bazy danych.

Pobieranie i aktualizacja danych – metoda Execute()

$rs = $db->Execute('SELECT * FROM uzytkownik');
$rs = $db->Execute("UPDATE uzytkownik SET imie=$imie WHERE id=45;");

W metodzie Execute możemy umieścić dowolne zapytanie SQL. Jeżeli będzie to zapytanie pobierające dane, dane będą dostępne w zmiennej $rs

Pobieranie danych i wyświetlanie danych z bazy – metody: GetRow(), GetAll(), GetOne()

Istnieje znacznie wygodniejszy sposób pobierania danych z bazy niż metoda Execute(). Są to metody: GetRow(), GetAll() i GetOne(). W tych metodach umieszczamy tylko zapytania SELECT.

$rs = $db->GetAll('SELECT * FROM user WHERE id<40');
$rs = $db->GetRow('SELECT * FROM user WHERE id=1');
$rs = $db->GetOne('SELECT login FROM user WHERE id=1');

Metoda GetAll() zwraca wiele rekordów – wszystkie będące wynikiem zapytania. Wynik zapisywany jest w tablicy dwuwymiarowej $rs. Elementami tablicy głównej są tablice z polami jednego rekordu pobranego z bazy danych.
Metoda GetRow() zwraca jeden rekord w postaci tablicy jednowymiarowej. Jeżeli zapytanie zwróci więcej danych, zapisany zostanie jedynie pierwszy rekord.
Metoda GetOne() zwraca pojedynczą wartość. Jeżeli zapytanie zwróci więcej danych, zwrócona zostanie jedynie wartość pierwszej kolumny z pierwszego rekordu wyniku zapytania.

Biblioteka ADODB jest dużym ułatwieniem dla każdego programisty. 3 z 6 stron tworzonych na szkoleniu Zawodowy Webmaster wykorzystują ją do wszelkich operacji na bazie danych. Oprócz opisanych powyżej możliwości na szkoleniu wykorzystywane są również złączenia, podzapytania i funkcje agregujące.

Tagi: ADODB, bazy danych, Execute(), GetAll(), GetOne(), GetRow(), PHP, SQL
Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | Brak komentarzy »

Co zyskali uczestnicy szkoleń przez ostatni rok?

16 czerwca 2010

Właśnie mija rok od momentu, kiedy ta strona pojawiła się w Internecie. Niecałe dwa miesiące później odbyło się pierwsze szkolenie, wtedy jeszcze pod nazwą Zawodowy Programista. Wiele osób pisało wtedy do mnie, że chcą być webmasterami a nie programistami. Zmieniłem wówczas nazwę szkolenia, by zainteresowani łatwiej mogli je znaleźć.

Od tego czasu odbyło się kilka szkoleń, pojawiło się szkolenie na płytach, a później przez Internet. Osoby biorące w nich udział mógłbym podzielić na trzy grupy. Grupa pierwsza to entuzjaści – zapaleńcy, którym umiejętność robienia serwisów internetowych potrzebna była do realizacji swoich planów. Ktoś chciał zrobić grę w przeglądarce; kto inny portal dla hodowców psów. Wiele osób ma tego typu pomysły, do realizacji których potrzebują poszerzania swojej wiedzy i rozwinięcia umiejętności. Nie wszyscy jednak wierzą na tyle w swoje pomysły, by podjąć wysiłek i zacząć je realizować. Tym bardziej, tym którzy się zdecydowali, należą się brawa.

Druga grupa to osoby chcące znaleźć lub zmienić pracę w zawodzie webmastera/programisty PHP. Zawód jest dosyć atrakcyjny, a zapotrzebowanie na pracowników ciągle duże.

Przez ostatni rok starałem się monitorować oferty pracy, by orientować się w aktualnych potrzebach rynku i okazuje się, że pracodawcy chcący zatrudnić webmasterów i młodszych programistów PHP najczęściej wymagają dobrej znajomości (X)HTMLa (234), CSSów (215), PHP (167) i MySQLa (109). Liczby w nawiasach to ilość ofert, w których wystąpił wymóg znajomości danej technologii. Czasami oczekują też znajomości JavaScriptu (64), częściej jednak jakiegoś frameworka javascriptowego – najczęściej jQuery (142) – rzadziej Mootools (27), Prototype (19), czy ExtJS (16). Dosyć często jako oddzielną pozycję umieszcza się AJAX (77). Sporadycznie na liście wymagań dodatkowych, najczęściej pod tytułem: „Dodatkowym atutem będzie znajomość” występuje Smarty (16), ADODB (11), Flash (10), XML (7), mod-rewrite (5), PostgreSQL (4).

Nieco więcej wymaga się od webdeveloperów i starszych programistów. Tutaj (X)HTML (205) i CSS (204) najczęściej przesuwano do wymagań dodatkowych, a bywa, że w ogóle się o nich nie wspomina. Standardem jest wymóg udokumentowanego doświadczenia: 1 rocznego (27), 2 letniego (297), lub 3 letniego (52). Na pierwszym miejscu występuje PHP (392), najczęściej jako PHP5 (307), a nawet PHP obiektowe (215). Często wymagana jest znajomość frameworków: Zend Framework (176), Symfony (97), Kohana (52), CakePHP (17) oraz wzorców projektowych (194). Wzorzec MVC (287) jest wymieniany oddzielnie. Z baz danych występują: MySQL (348), PostgreSQL (153), MSSQL (47), SQLite (23), Oracle (16), DB2 (4). Znajomość JavaScriptu (192) jest wymagana łącznie z jQuery (125), ExtJS (56), Mootools (37), Prototype (29). Często występują: XML (88), AJAX (72), Smarty (31). Flash (21) ostatnio występuje dużo rzadziej niż jeszcze pół roku temu. W wymaganiach dodatkowych najczęściej pojawiają się: UML (26), SVN (114), Java (21), Python (24), Perl (15), Pear (36).

Ostatnią grupę uczestników stanowią osoby mające już jakieś doświadczenie z robieniem stron WWW i chcące założyć działalność lub realizować zlecenia z innych firm. Oprócz samego szkolenia tym osobom najbardziej przydaje się e-book „Jak zarabiać na robieniu stron WWW”, dzięki któremu mają szybszy i łatwiejszy start. Jeżeli przyswoją sobie zawartą w nim wiedzę, mogą zaoszczędzić sobie wielu przykrych i dotkliwych finansowo doświadczeń.

Jeżeli odnajdujesz siebie w którejś z tych trzech grup, to jesteś na dobrej stronie, by zrealizować swój cel. Powodzenia.

Zaszufladkowany do Tymczasowe | Brak komentarzy »

Kontakt z pracodawcą/klientem

16 maja 2010

Zleceniodawcy oceniają przede wszystkim wygląd stron w naszym portfolio. Więc jeśli nie mamy sami zdolności plastycznych, to warto nawiązać współpracę z jakimś grafikiem, a nawet kilkoma. Bywają graficy, którzy robią świetne layouty, ale wszystkie w tym samym stylu. Stawki za layout są bardzo zróżnicowane i przeważnie podlegają dużym negocjacjom. Należy jednak uważać bo ich wysokość nie zawsze odzwierciedla poziom wykonanej pracy. Decydując się na droższego grafika, nie zawsze otrzymamy lepszy efekt końcowy.

Jeżeli współpracujemy z grafikiem tylko on-line, możemy napotkać przeszkody komunikacyjne. W czasie spotkania w cztery oczy dużo łatwiej można wytłumaczyć, o co nam chodzi, co i jak chcemy zaprezentować. Zapisując to wszystko w e-mailu możemy nie zostać dobrze zrozumiani. Bardzo ważne jest w takiej sytuacji umieszczenie szczegółowych wskazówek, a nawet szkiców i skrupulatne pilnowanie poprawek. Jeżeli dostajemy projekt, a w nim brakuje jakichś elementów, o których pisaliśmy, należy jak najszybciej zasygnalizować uchybienie i dopilnować, by zostało ono poprawione.

Warto poświęcić nieco więcej czasu i na początku wysłać jak najbardziej przemyślane wskazówki, skrupulatnie opisać wszelkie szczegóły. Jeżeli nie zadbamy o to od początku, to później może się to na nas zemścić.

Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | Brak komentarzy »

Jak wykorzystać selektory cz. 3.

14 maja 2010

Oto ostatnia część opisu selektorów CSS. W tym artykule opiszę selektory odnoszące się do elementów strony, z którymi nastąpiła jakaś interakcja, lub są ich modyfikatorami. Selektory te nazywane są pseudoklasami. Łatwo można je rozpoznać po znaku „:” w selektorze.

Definicja styli nadal znajduje się w pliku „style.css”. Natomiast kod strony „index.html” powinien wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Lorem ipsum</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
Ten akapit jest pierwszym akapitem na tej stronie. Nie jest specjalnie długi, ale za to bez sensu. Jeżeli go nie zrozumiałeś, nie przejmuj się. 7 na 10 naukowców też go nie rozumie. Ostatnie badania dowodzą, że ten akapit nie istnieje.
</p>
<div>
	<p>
	Lorem ipsum dolor sit amet enim. Etiam ullamcorper. <a href="#1">test 1</a> Suspendisse a pellentesque dui, non felis. <a href="#2">test 2</a> <a href="#3">test 3</a> Maecenas malesuada elit lectus felis, <a href="#4">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</div>
<p>Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.</p>
</body>
</html>

Jeżeli chcemy wyróżnić pierwszą linię jakiegoś tekstu, lub pierwszą linię każdego akapitu, możemy zastosować :first-line. W przykładzie poniżej pierwsza linia każdego akapitu zostanie wyświetlona przy pomocy kapitalików.

p:first-line {font-variant: small-caps;}

Można też wyróżnić pierwszą literę powiększając ją…

p:first-letter {font-size: 200%;}

albo pierwsze wystąpienie danego elementu w innym elemenci. W tym przypadku będzie to zmiana koloru pierwszego akapitu. Styl zostanie powtórzony dla kolejnego akapitu, gdyż jest on pierwszym w bloku div.

p:first-child {color: #cc0000;}

Przy pomocy styli można wstawiać dowolną zawartość przed lub po dowolnym elemencie. Np. błękitną gwiazdkę przed każdym odnośnikiem i dodatkowy tekst za blokiem div. Te ustawienia mogą nie działać w starszych przeglądarkach i w IE 8 w widoku zgodności

a:before {content: "*"; color: #00ccff;}
div:after {content: "Tu kończy się blok div"}

Oddzielną grupą pseudoklas są te związane z odnośnikami. Wygląd odnośników można modyfikować w zależności od tego, czy są wskazywane aktualnie kursorem (:hover), zostały już wcześniej odwiedzone (:visited), właśnie zostały kliknięte (:active), lub zostały wybrane klawiszem tabulacji (:focus). Za pomocą pseudoklasy :focus można też wyróżnić pola formularzy, które są aktualnie edytowane. Pseudoklasa :focus może pokrywać się z pseudoklasą :active. Zwykły stan odnośników definiuje się poprzez pseudoklasę :link.

a:link {color: #00cc00; text-decoration: none;}
a:visited {color: #006600; text-decoration: none;}
a:hover {color: #66ff66; text-decoration: underline;}
a:active {color: #ff0000; text-decoration: none;}
a:focus {color: #ff00ff; text-decoration: none;}

Przykładowa strona po zastosowaniu tego selektora wygląda tak:

Ten akapit jest pierwszym akapitem na tej stronie. Nie jest specjalnie długi, ale za to bez sensu. Jeżeli go nie zrozumiałeś, nie przejmuj się. 7 na 10 naukowców też go nie rozumie. Ostatnie badania dowodzą, że ten akapit nie istnieje.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Tagi: CSS
Zaszufladkowany do Sekrety Webmasterów | Brak komentarzy »

Skąd brać klientów

10 maja 2010

Załóżmy, że mamy już imponujące i wystarczająco zróżnicowane portfolio. Umieszczamy je w Internecie i co dalej. Można oczywiście takie portfolio promować, reklamować, pozycjonować w Google, ale jest to dosyć kosztowne i/lub czasochłonne. Pozycjonowanie jak najbardziej kiedyś może się przydać, warto więc, by strona z portfolio była zoptymalizowana pod wyszukiwarki i wpisana do katalogów. Te działania z pewnością zaprocentują w przyszłości.

Na początku nie ma co liczyć, że klienci będą przychodzić do nas sami. To my musimy szukać zleceń. Zresztą po kilku nawet latach nie warto zupełnie rezygnować z poszukiwania zleceń. Nawet gdy przez jakiś czas firmy będą się zabijać przed naszymi drzwiami, to będą też gorsze okresy kiedy umiejętność wyszukiwania zleceń może się okazać dość cenna.

Gdzie zatem należy szukać tych zleceń? W Internecie i w prasie z ogłoszeniami drobnymi. Jeżeli chodzi o prasę, to każdy powinien sam zorientować się w jakich tytułach w jego regionie można znaleźć coś interesującego. W Internecie również można znaleźć wiele serwisów z ogłoszeniami. Będą wśród nich zarówno serwisy regionalne jak i ogólnopolskie. Z tych bardziej znanych mogę polecić zlecenia.przez.net, www.praca-online.pl, oferia.pl, ogloszenia.ngo.pl i gumtree.pl.

Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | Brak komentarzy »

Pierwszy krok

28 kwietnia 2010

Przez wiele lat wykonywania stron internetowych na zlecenia oraz w firmach gdzie szukałem etatu, na pierwszym spotkaniu zawsze padało pytanie: To co pan już zrobił? Nie ma co się dziwić, że to pytanie pada, jak bowiem ma potencjalny zleceniodawca czy pracodawca zweryfikować umiejętności człowieka, którego widzi zazwyczaj po raz pierwszy w życiu? Jeżeli orientuje się choć trochę w temacie, to może zapytać o jakiś szczegół, technologie, trend itp., ale zazwyczaj się nie zna. Wie jakie strony znajdują się w Internecie, wie jakie rozwiązania na swoich witrynach ma konkurencja i to wszystko.

Nawet w firmach internetowych szefowie nie zawsze mają pełną i aktualną wiedzę na temat tworzenia stron. W tym przypadku zazwyczaj w rozmowach rekrutacyjnych uczestniczy doświadczony programista z danej firmy, który może nas dokładnie przepytać i szczegółowo poznać nasze umiejętności. Jednak w przypadku zleceń nasi rozmówcy, będą wiedzieli na ten temat bardzo mało, albo wcale, więc jedynym rozsądnym pytaniem, które będą mogli zadać jest: To co pan już zrobił? To co pani już zrobiła?

Na początek warto więc zrobić kilka stron za darmo: dla siebie, rodziny, znajomych, a nawet fikcyjnych firm. Czasem niektóre fundacje szukają wykonawców stron za małe pieniądze, albo i zupełnie za darmo. Okazji, by zrobić strony do swego portfolio jest więc mnóstwo. Wystarczy się rozejrzeć.

Ile więc tych stron powinienem mieć w swoim portfolio? Im więcej tym lepiej. Jednak mając wykonanych już kilkanaście, czy kilkadziesiąt witryn, warto wybrać z nich te najlepsze, ale nie mniej niż połowę z nadających się w ogóle do pokazania.

Dolna granica też nie istnieje. Nawet jeżeli mamy jedną stronę i widzimy, że ktoś chce zlecić wykonanie witryny, to nie czekajmy, aż przygotujemy jeszcze 5 kolejnych, tylko zgłaszajmy się. W skrajnych przypadkach może udać się nawet bez portfolio.

Teraz pewnie chciałbyś wiedzieć: jak budować portfolio, co musi się w nim znaleźć i co wywiera najlepsze wrażenie i przynosi największe efekty? Odpowiedzi na te pytania zawarłem w e-booku „Jak zarabiać na robieniu stron WWW”, który jest bonusem do szkolenia „Zawodowy Webmaster” w wersji stacjonarnej i e-learningowej.

Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | Brak komentarzy »

Jak wykorzystać selektory cz. 2

20 kwietnia 2010

W poprzednim artykule przedstawiłem selektor uniwersalny, selektor typu, selektory potomka, dziecka i braci. W tym artykule będę kontynuował opis używania kolejnych selektorów.

Definicję styli będziemy nadal umieszczać w pliku „style.css”. Kod strony „index.html” zmienił się w niewielkim stopniu i powinien wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Lorem ipsum</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
	<p>
	Lorem ipsum dolor sit amet enim. <strong class="wielkie">Etiam ullamcorper. <a id="pierwszy" href="#">test 1</a></strong> Suspendisse a pellentesque dui, <span class="wielkie">non felis. <a rel="nofollow" href="#">test 2</a></span> <a href="#">test 3</a> Maecenas malesuada elit lectus felis, <a href="#" rel="follow">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</div>
	<p class="wielkie">Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.
	</p>
</body>
</html>

Często bywa tek, że część właściwości ma być identyczna dla różnych elementów strony. Np. i akapity i elementy div mają mieć identyczne obramowanie, a kolor tła dla każdego z tych elementów ma być inny. Do ustalenia obramowania użyjemy selektora grupowania – selektory poszczególnych elementów umieszczamy oddzielone przecinkiem jeden za drugim przed definicją stylu. Pozostałe właściwości określimy w zwykłych selektorach typów.

div, p {border: 2px solid #ff0000;}
div {background-color: #ff9966;}
p {background-color: #99ff66;}

Przykładowa strona po zastosowaniu tego selektora wyglądała by tak:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Grupować można selektory wszystkich rodzajów. Następny rodzaj selektora to selektor atrybutu. Oto jego przykład:

a[rel] {color: #66ff66;}

a to wygląd strony:

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Selektor wskazał wszystkie odnośniki (elementy „a”) posiadające atrybut „rel” bez względu na jego wartość. Jeżeli chcemy wyróżnić elementy o określonej wartości atrybutu, użyjemy selektora atrybutu o określonej wartości

a[rel="nofollow"] {color: #cc33ff;}

Strona będzie wyglądała tak jako poniżej.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Tym razem wybrane zostały tylko ten odnośnik, którego atrybut „rel” miał wartość „nofollow”.

Selektor klasy pozwala na wybranie wszystkich elementów określonej klasy, albo tylko elementów określonego typu tej klasy. Selektor klasy jest zapisywany z kropką przed nazwą klasy, może być dodany do innego selektora (bez spacji przed kropką), ogranicza wówczas zakres tego selektora do elementów tej klasy:

.wielkie {font-size: large;}
span.wielkie {font-weight: bold;}

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Wszystkie elementy klasy „wielkie” zostały powiększone. Dodatkowo, dzięki drugiej definicji stylu, zawartość elementu „span” została też pogrubiona. Pogrubienie elementu „strong” wynika z samej jego definicji i jest realizowane przez przeglądarkę, a nie style.

Selektor identyfikatora

#pierwszy {border: 4px double #ff0000;}

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Element o identyfikatorze „pierwszy” został otoczony podwójną ramką. Na jednej stronie wczytanej do przeglądarki może znajdować się tylko jeden element o określonym identyfikatorze.

Ciąg dalszy może pojawić się szybciej, jeżeli poniżej pojawi się kilka komentarzy od was.

Tagi: CSS
Zaszufladkowany do Sekrety Webmasterów | Brak komentarzy »