Darmowe artykuły

Archiwum kategorii ‘Darmowe artykuły’

Kontakt z pracodawcą/klientem

niedziela, 16 Maj 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 »

Skąd brać klientów

poniedziałek, 10 Maj 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

środa, 28 Kwiecień 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 »

Selektory CSS

sobota, 3 Kwiecień 2010

Większość osób używających CSS posługuje się kilkoma podstawowymi selektorami, a przecież ich ilość jest znacznie większa. Wraz z ilością używanych selektorów rosną możliwości formatowania różnych elementów na stronie.

Zachęcam do przetestowania poniższych selektorów i dzielenia się uwagami na dole strony.

selektor typu np. p: ustala określone cechy dla wszystkich elementów p
selektor uniwersalny *: pozwala ustalić określone cechy dla wszystkich elementów strony
selektor potomka np. td li: ustala określone cechy dla elementów li leżących wewnątrz elementów td niekoniecznie bezpośrednio.
selektor dziecka np. div > p: ustala określone cechy dla elementów p leżących bezpośrednio wewnątrz elementów div.
selektor braci np. span + a: ustala określone cechy elementów a leżących bezpośrednio za elementami span.
grupowanie selektorów np. h2, h3: ustala określone cechy dla wymienionych elementów
prosty selektor atrybutu np.: h3[class]: ustala określone cechy dla elementów h3 jeżeli mają ustaloną wartość atrybutu class. Można podać kilka atrybutów, wtedy cechy elementu będą ustalone jeżeli element ma ustalone wszystkie wymienione atrybuty np.: h3[class][title]
selektor atrybutu o określonej wartości np.: h3[class=”header”]: ustala określone cechy dla elementów h3 jeżeli mają ustaloną wartość atrybutu class na header. Analogicznie jak w poprzednim wypadku można podać kilka atrybutów z wartościami lub bez.
selektor klasy np.: .header: ustala określone cechy dla elementów jeżeli mają atrybut class ustawiony na header.
selektor identyfikatora np.: #jeden: ustala określone cechy dla elementu o wartości atrybutu id ustawionym na jeden. Identyfikator musi jednoznacznie określać tylko jeden element w dokumencie.
pierwsza linia np.: p:first-line: ustala określone cechy dla pierwszej linii elementów p
pierwsza litera np.: p:first-letter: ustala określone cechy pierwszej literze elementów p jeżeli ich zawartość rozpoczyna tekst.
selektor przed np.: p:before: wstawia podaną zawartość przed elementami p.
selektor po np.: p:after: wstawia podaną zawartość po elementach p.
selektor podstawowy np.: a:link: ustala określone cechy dla nie klikanych elementów a.
selektor odwiedzony np.: a:visited: ustala określone cechy dla klikniętych elementów a.
selektor wskazany np.: a:hover: ustala określone cechy dla elementów a wskazanych myszą.
selektor aktywny np.: a:active: ustala określone cechy dla klikanych elementów a.
selektor zogniskowania np.: a:focus: ustala określone cechy dla elementu a wybranego klawiszem tabulacji (oprócz odnośników stosuje się do pól formularzy, w których umieszczono kursor).
selektor pierwszego dziecka np.: div:first-child: ustala określone cechy dla pierwszego elementu div

Selektory można ze sobą łączyć. Należy przy tym uważać na spacje. Selektor „p .opis” wskazuje inne elementy niż „p.opis”. Pierwszy wskazuje na elementy klasy opis zawarte w znacznikach p, a drugi wskazuje na znaczniki p z ustawioną klasą opis.

Uwaga!!! Nową stronę należy przetestować w różnych przeglądarkach. Zwłaszcza w IE 6 nie wszystkie selektory działają. Na szczęście ta przeglądarka mocno traci na popularności i w zasadzie można ją już pominąć.

Tagi:CSS
Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | 3 komentarzy »

Jak zrobić stronę squeeze page i galerię internetową – darmowe fragmenty.

wtorek, 9 Marzec 2010

Jestem niesamowicie podekscytowany ofertą, którą dla Ciebie przygotowuję. TAKIEGO szkolenia jeszcze nie prowadziłem, ale nie o tym chciałem… By umilić Ci oczekiwanie na premierę „Zawodowego Webmastera” w nowej formie i w niewiarygodnie niskiej cenie przygotowałem dwa fragmenty z szkolenia wideo. Jutro możesz otrzymać kolejne dwa fragmenty. Wystarczy, że na dole strony, w okienku komentarza napiszesz, co jest Twoim największym problemem w robieniu stron internetowych, lub zarabianiu na robieniu stron? Jeżeli odpowiesz na to pytanie, jutro na wpisany w formularzu adres dostaniesz wiadomość z linkiem do kolejnych części nagrania i hasłem dostępu.

Powiększ nagranie na cały ekran przy pomocy przycisku umieszczonego na dole po lewej stronie odtwarzacza Zmień rozmiar

Jeżeli przycisk powiększania nie działa, skorzystaj z linku do powiększonej wersji tego filmu

Wiesz już, że programowanie stron www jest dla Ciebie?
Chcesz nauczyć się jeszcze więcej konkretnych umiejętności?
Zależy Ci na bezpośrednim kontakcie z doświadczonym trenerem it i programistą?
Chcesz wiedzieć jak zarabiać najwięcej na robieniu stron niezależnie od tego, czy jesteś pracownikiem w czyjejś firmie, czy wolnym strzelcem?

Jeśli odpowiedziałeś „TAK” przynajmniej raz, to szkolenie „Zawodowy Webmaster czyli jak tworzyć profesjonalne strony www” jest dla Ciebie.
~~Oczekuj w najbliższy czwartek specjalnej oferty na to szkolenie w nowej formie i w niewiarygodnie niskiej cenie.~~

Do zobaczenia
Leszek Sewastianowicz

P.S. Wyjątkowo atrakcyjna oferta będzie obowiązywała tylko przez 24 godziny od daty publikacji, więc bądź czujny, zapisz sobie datę 11.03.2010 w organizerze, kalendarzu, czy notatniku. Albo po prostu poproś najbliższą Ci osobę, by Ci przypomniała o tym w najbliższy czwartek.

Tagi:wideo
Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | 9 komentarzy »

Jak wstawić tekst na stronę?

środa, 24 Luty 2010

Zawartość strony może być dość zróżnicowana. Same teksty mogą zostać ujęte w akapity, nagłówki, listy itp. Generalnie można te elementy podzielić na blokowe i liniowe. Elementy na stronie są umieszczane przy pomocy znaczników tych elementów np. znacznikami elementu p czyli akapitu są <p> i </p>

Elementy blokowe

Elementy blokowe to takie, które bez względu na to, czy wstawimy je w nowej linii czy bezpośrednio za inną zawartością w tej samej linii, na stronie będą zawsze umieszczane w nowej linii. Również treści wpisane za elementami blokowymi będą przenoszone poniżej jego ostatniej linii. Elementami blokowymi są: nagłówki (h1, h2, h3, h4, h5, h6), cytat (blockquote), blok/sekcja (div), akapit (p), tekst preformatowany (pre), listy i elementy list (ul, ol, li dt, dd, dl).

Elementy liniowe

Elementy liniowe łączą się w jednej linii z elementami je poprzedzającymi i z elementami następującymi po nich. Do elementów liniowych należą: skrót (abbr), akronim (acronym), przejście do nowej linii (br), odniesienie do źródła cytatu (cite), kod (code), podkreślenie znaczenia fragmentu tekstu (em), cytat (q), wydzielenie fragmentu tekstu (span), wyróżnienie (strong). Wszystkie te elementy w mniejszym lub większym stopniu określają znaczenie treści, którą zawierają. Jest też kilka elementów liniowych odpowiedzialnych jedynie za prezentacje treści. Są to: pogrubienie tekstu (b), powiększenie tekstu (big), pochylenie tekstu (i), pomniejszenie tekstu (small), tekst w dolnym indeksie (sub), tekst w górnym indeksie (sup). Ze względu na to, że identyczny efekt można osiągnąć przy pomocy styli CSS, elementy te nie są zalecane.

Stronę zazwyczaj rozpoczyna tytuł. Do jego umieszczenia najlepiej użyć nagłówka pierwszego stopnia (<h1></h1>). Jest to nagłówek domyślnie wyświetlany największą czcionką, ale sposób wyświetlania można zmienić stosując style css. Każdy kolejny stopień nagłówków, a jest ich 6 (od <h1></h1> do <h6></h6>), jest coraz mniejszy i mniej istotny. Nagłówki są elementami blokowymi. Treść nagłówka umieszczamy między jego znacznikami np. (<h1>Tytuł strony</h1>). Treścią nagłówków oprócz tekstu mogą być wszystkie elementy liniowe.

Elementy blokowe w większości nie mogą zawierać innych elementów blokowych. Wyjątkami są tu elementy div, które mogą zawierać zarówno elementy liniowe, jak i blokowe, w tym inne bloki div. Drugim wyjątkiem są elementy blockquote, które nie tyle mogą, co muszą zawierać bezpośrednio inny element blokowy. Również elementy ul i ol wewnątrz siebie bezpośrednio mogą zawierać jedynie elementy li.

Element pre służy do wstawiania treści preformatowanych, w których chcemy zachować oryginalny układ białych znaków (spacji, tabulatorów, przejść do nowej linii). Nie może zawierać elementów: img, object, big, small, sub, sup. W przypadku umieszczania na stronie kodów programów lepiej jest użyć elementu code.

Znacznik <br /> jest znacznikiem przejścia do nowej linii. Kilka takich znaczników umieszczonych jeden za drugim powoduje powstanie większych odstępów na stronie. Jest to znacznik bardzo przydatny podczas tworzenia stron, gdyż przeglądarka ignoruje standardowe przejście do nowej linii.

Znacznik <span></span> jest elementem liniowym i służy do formatowania przy pomocy kaskadowych arkuszy styli wydzielonych fragmentów tekstów.

Znacznik odnośnika <a href=”strona.html”>strona</a> jest istotą Internetu. Pozwala na powiązanie ze sobą odrębnych dokumentów. Zawartością odnośnika jest najczęściej ciąg znaków, który można kliknąć, by otworzyć nowy dokument na stronie, lub przenieść się na zupełnie inną stronę, ale może to być również grafika np.: <a href=”strona.html”><img src=”zdjecie.jpg” alt=”zdjęcie” /></a>. Atrybut href określa miejsce docelowe odnośnika. Jeżeli jest to dokument naszego serwisu wystarczy podać względną ścieżkę do odpowiedniego pliku np.: <a href=”strony/strona4.html”>Strona 4</a>. Natomiast gdy tworzymy odnośnik do innej strony, podajemy jej pełny adres np.: <a href=”http://www.strona.pl/strony/strona4.html”>xxx</a> Za pomocą odnośników można też przenieść się do etykiety – odpowiedniego miejsca na stronie (przeglądarka automatycznie przewinie stronę do żądanego miejsca). Tego typu odnośniki konstruuje się w następujący sposób: <a href=”#etykieta”<xxx>/a>. Po znaku „#” w atrybucie „href” umieszczamy nazwę etykiety. Ta sama nazwa musi się znajdować w miejscu docelowym w atrybucie „id” dowolnego znacznika np. <h3 id=”etykieta”>nagłówek xx</h3>. Etykieta może znajdować się również na innej stronie. Odnośnik do takiej etykiety może wyglądać następująco: <a href=”http://www.strona.pl/strony/strona4.html#etykieta”>xxx</a>. Po adresie strony wstawiamy znak „#”, a po nim nazwę etykiety. Element a nie może zawierać innych elementów a.

Tagi:HTML, XHTML
Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | Brak komentarzy »

Podstawy stron WWW – XHTML

piątek, 19 Luty 2010

(X)HTML

Kod strony internetowej składa się ze znaczników języka html reprezentujących zdefiniowane elementy strony tj. odnośniki, akapity, tabele itp. Znacznik jest to ciąg znaków pomiędzy symbolami „<” i „>” np. <body>, <table>. Większość znaczników ma swoje wersje otwierające i zamykające, w których po symbolu „<” umieszcza się znak „/” np. <span> </span>. Znaczniki takie wpływają na wszystko co się pomiędzy nimi znajduje. Znaczniki nie mające swoich wersji zamykających zapisujemy w formie <br> na stronach w języku HTML lub <br /> w przypadku stosowania języka XHTML. Często znaczniki posiadają atrybuty modyfikujące ich wygląd lub funkcjonowanie np. <img src=”przykład.jpg” alt=”przykład” />. Nazwę atrybutu umieszcza się za nazwą znacznika, po spacji, następnie stawia się znak równości i w cudzysłowie ustawia się wartość atrybutu. Specyfikacja języka zaleca, by nie umieszczano przerw pomiędzy nazwą atrybutu, znakiem równości, znakami cudzysłowu i wartością atrybutu.

W kodzie strony możemy również umieścić komentarze. Wszystko, co zostanie umieszczone pomiędzy „<!-–” a „-–>”, nie będzie widoczne na stronie. Komentarze mogą posłużyć m.in. do umieszczania własnych uwag lub ukrycia fragmentów strony. Komentarzy nie można w sobie zagnieżdżać.

Struktura dokumentu składa się z trzech głównych elementów: znaczników <html></html>, w których zawiera się cały kod strony zapisany w HTMLU lub XHTMLU, znaczników <head></head> obejmujących część nagłówkową wpływającą na różne aspekty funkcjonowania strony w Internecie, ale nie wyświetlającą żadnych elementów na stronie, oraz znaczników <body></body> stanowiących główną część strony, wyświetlaną w przeglądarce. W znaczniku <body> nie można umieszczać tekstu w sposób bezpośredni. Tekst musi znajdować się w dodatkowych znacznikach.

html 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<!--komentarz -->
<body>
</body>
</html>

xhtml 1.0

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<!--komentarz -->
<head>
<title>Tytuł</title>
</head>
<body>
</body>
</html>

xhtml 1.1

<?xml version="1.0" encoding="ISO-8859-2"?>
<!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>
<title>Tytuł</title>
</head>
<body>
<!--komentarz -->
</body>
</html>

Tagi:HTML, XHTML
Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | 2 komentarzy »

Formularze na stronie www

poniedziałek, 4 Styczeń 2010

Formularz na stronie www jest bardzo użytecznym narzędziem zwiększającym interakcje z użytkownikiem. Formularze mogą służyć do wysyłania wiadomości, zbierania informacji o odwiedzających stronę, składania zamówień, przesyłania parametrów do skryptów itp.

<form action="form.php" method="post">
	<div>
		Miejsce na pola formularza
	</div>
</form>

Formularz jest wstawiany za pomocą znaczników „<form></form>”. Najczęściej podajemy w nich dwa parametry: action – adres skryptu przetwarzającego dane z formularza oraz method – metodę wysyłania danych. W powyższym przykładzie przetwarzaniem danych z formularza zajmie się skrypt umieszczony w pliku form.php, a dane wysłane zostaną metodą POST.

Istnieją dwie metody wysyłania formularzy: GET i POST. Przy użytej metodzie GET dane wysyłane do skryptu dołączane są do adresu URI (ang. Uniform Resource Identifier – Ujednolicony Identyfikator Zasobów) np. www.serwan.pl/form.php?zmienna=wartosc. W takim adresie bardzo łatwo można zmienić nie tylko wartość zmiennej, ale również jej nazwę. W niektórych przypadkach może to spowodować niechciane przez twórcę lub właściciela strony rezultaty. Dane GET pozostają w historii przeglądarki. Z tego względu nie należy przekazywać tą metodą danych poufnych np. numerów kart kredytowych. Przesyłanie danych metodą GET jest też ograniczone limitem długości URI, który w przeglądarce Internet Explorer wynosi 2048, a może być też obcinany na różnych urządzeniach pośredniczących.

Dużo bezpieczniejsze jest używanie metody POST. W tej metodzie dane przesyłane są w protokole HTTP, co ogranicza możliwość ich podejrzenia i zmodyfikowania. Nie ma też limitu wielkości dla tych danych.

Kontrolki formularzy nie powinny być umieszczane bezpośrednio pomiędzy znacznikami „<form></form>”. Powinno się to robić wewnątrz dodatkowych znaczników np. bloku div lub tabeli.

<form action="form.php" method="post">
	<div>
		Imię: 
		<input type="text" name="imie" />
		Hasło: 
		<input type="password" name="haslo" />
		Akceptuję regulamin: 
		<input type="checkbox" name="akcept" value="q" checked=”checked” />
		Kobieta: 
		<input type="radio" name="plec" value="kobieta" />
		Mężczyzna: 
		<input type="radio" name="plec" value="mezczyzna" />
		Rok urodzenia: 
		<select name="rok">
			<option>1998</option>
			<option>1997</option>
			(...)
		</select>
		Zainteresowania: 
		<select name="zainteresowania[]" multiple="multiple">
			<option value=”1”>Pływanie</option>
			<option value=”2”>Muzyka</option>
			(...)
		</select>
		<textarea name="komentarz">Wpisz komentarz </textarea>
		<input type="hidden" name="nr" value="354634" />
		<input type="submit" value="wyślij" />
	</div>
</form>

Większość kontrolek formularza to pola „input”. Ich rola i funkcje są zróżnicowane w zależności od atrybutu „type”. Wartości z tych pól będą dostępne w skrypcie php poprzez nazwy – atrybut „name”. Wartości pól mogą być określone w atrybutach „value”. Domyślną wartością atrybutu „type” jest „text”. Pola tego typu pozwalają na wprowadzenie krótkiej informacji tekstowej w pojedynczej linii. Jeżeli chcemy, by pole zawierało od razu jakiś tekst, należy umieścić go w atrybucie „value”. Do wpisywania haseł przeznaczony jest typ „password”. Od typu „text” różni go jedynie maskowanie wpisywanych znaków kropkami. Pole typu „checkbox” jest polem wyboru mającym postać małego kwadratu do zaznaczania i odznaczania myszką. Po wysłaniu formularza z zaznaczonym polem „checkbox” w skrypcie pod nazwą z atrybutu „name” tego pola dostępna będzie wartość z atrybutu „value” lub 1, jeżeli „value” nie zdefiniowano. Aby umieścić w formularzu zaznaczone pole „checkbox” należy dodać atrybut „checked” o wartości „checked”.

Pola opcji czyli przełączniki w formie kółek do zaznaczania (zaznaczenie jednego automatycznie odznacza inne) uzyskujemy stosując typ „radio”. Pola tego typu są grupowane ze sobą dzięki identycznej wartości atrybutu „name”. Tylko jedno pole o takim samym atrybucie „name” może być zaznaczone. W skrypcie php dostępna będzie wartość właśnie z tego zaznaczonego pola. Typ „hidden” pozwala dołączyć do formularza dane nie wprowadzane przez osobę wypełniającą formularz, a wygenerowane na stronie. Możemy w ten sposób dołączać informacje o stronie, z której dana osoba weszła, stronie na której został wypełniony formularz (jeżeli mamy kilka identycznych formularzy na różnych stronach takie informacje mogą okazać się bardzo przydatne), informacje o ustawieniach i personalizacji strony itp.

Ostatni typ pola input, który opiszę jest przyciskiem wysyłającym formularz. Typem tym jest „submit”. Poza wyglądem charakterystyczną jego cechą jest to, że wartość atrybutu „value” jest wyświetlana jako tekst przycisku.

Poza elementami „input” w formularzu mogą znaleźć się inne kontrolki. Pole tekstowe do wpisywania wielu linii tekstu otrzymujemy dzięki znacznikom „<textarea></textarea>”. Znacznik ten posiada atrybut „name” natomiast nie posiada atrybutu „value”. Wartością wyświetlaną w formularzu i przesyłaną do skryptu php jest tekst pomiędzy znacznikiem otwierającym i zamykającym. Listę wyboru uzyskujemy wstawiając znaczniki „<select></select>”, a między nimi „<option></option>” dla każdej pozycji na liście. Atrybut „name” jest definiowany dla zancznika „<select>”, a „value” dla znaczników „<option>”. Nazwami wyświetlanymi na liści będą teksty pomiędzy znacznikami „<option></option>”. Jeżeli nie zdefiniujemy atrybutów „value”, to wartością znacznika będzie tekst wyświetlany. Domyślnie wybrany jest pierwszy element listy. Można to zmienić umieszczając w wybranym znaczniku „<option>” atrybut „selected” o wartości „selected”. Jeżeli potrzebujemy listy, z której można wybrać jednocześnie kilka opcji, to do znaczników „<select></select>” należy dodać atrybut „multiple” o wartości „multiple”, a do atrybutu name dodać na końcu „[]” – dzięki temu odpowiednia zmienna w skrypcie php będzie tablicą. Wybór wielu pozycji na takiej liście odbywa się poprzez przytrzymanie klawisza „ctrl” na klawiaturze i klikaniu wybranych pozycji.

O odbieraniu danych w php napiszę wkrótce.

Tagi:formularze, HTML, XHTML
Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | Brak komentarzy »

Podstawy wyświetlania danych w php

piątek, 27 Listopad 2009

Częstym problemem programistów (nie tylko początkujących) jest optymalizacja kodu. Tymczasem mało kto przejmuje się najprostszymi metodami odciążania serwera. Bo czy jest coś prostszego i bardziej powszechnego niż wyświetlanie tekstu przez php. W tym tekście zajmę się instrukcją echo, ale przedstawione zasady są dosyć uniwersalne i przez większość osób niestety zaniedbywane.

echo jest najprostszą instrukcją do wyświetlania tekstu. Można wywołać ją z tekstem przekazanym przez zmienną:

<?php
$tekst='Ala ma kota.';
echo $tekst;
?>

przez łańcuch znaków umieszczony w apostrofach:

<?php
echo 'Ala ma kota.';
?>

lub łańcuch znaków umieszczony w cudzysłowie:

<?php
echo "Ala ma kota.";
?>

Wszystkie trzy sposoby wyświetlą dokładnie to samo. Można też przekazać do instrukcji echo tekst razem ze zmiennymi.

<?php
$zwierz='kota';
echo "Ala ma $zwierz.<br />";
$zwierz='tygrysa';
echo "Ala ma $zwierz.";
?>

Efektem powyższego będą dwie linijki tekstu:

Ala ma kota.
Ala ma tygrysa.

Zmienne umieszczone w cudzysłowie zostaną zinterpretowane. Inaczej jest w przypadku apostrofów. Kod w postaci:

<?php
$zwierz='kota';
echo 'Ala ma $zwierz.<br />';
$zwierz='tygrysa';
echo 'Ala ma $zwierz.';
?>

da efekt nieco odmienny:

Ala ma $zwierz.
Ala ma $zwierz.

Czysty tekst lepiej jest umieszczać w apostrofach niż w cudzysłowie. Cała zawartość cudzysłowu jest przetwarzana przez php co bardziej obciąża serwer. Przy jednej linijce i małej liczbie odwiedzin można to pominąć, ale przy większym serwisie to już jest różnica. Umieszczając tekst ze zmiennymi najlepiej jest stosować apostrofy dla tekstu, a zmienne dołączać operatorem konkatenacji (czyli kropki).

<?php
$zwierz='kota';
echo 'Ala ma '.$zwierz.'.<br />';
$zwierz='tygrysa';
echo 'Ala ma '.$zwierz.'.';
?>

Tu efekt będzie zgodny z oczekiwaniami, a przy tym serwer mniej obciążony.

Ala ma kota.
Ala ma tygrysa.

Jeżeli już ktoś upiera się przy cudzysłowie, to nie ma powodu stosować operatora konkatenacji. Dwie pierwsze linie kodu będą dawały identyczny efekt i podobnie obciążają serwer. Trzecia linia jest bardziej przyjazna dla procesora.

<?php
echo "Zamówienie nr" . $numer . " zostało przyjęte przez " . $user;
echo "Zamówienie nr $numer zostało przyjęte przez $user";
echo 'Zamówienie nr' . $numer . ' zostało przyjęte przez ' . $user;
?>

Tagi:echo, PHP
Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | Brak komentarzy »

Co mogę zrobić z jQuery?

wtorek, 10 Listopad 2009

Framework (biblioteka?) jQuery zyskuje sobie coraz większą popularność. Nadal jednak wiele osób nie do końca wie, co to jest i jak tego używać. JQuery jest lekką biblioteką JavaScript często nazywaną frameworkiem. W rzeczywistości jest to jeden plik, który można pobrać z adresu http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js. Zapisujemy go w katalogu głównym strony i włączamy go umieszczając w sekcji nagłówkowej strony linijkę:

Tworzymy kolejny plik z rozszerzeniem „js” np. test.js i dołączamy go do strony w podobny sposób jak bibliotekę:

Ważne jest, by biblioteka była włączona jako pierwsza, w przeciwnym razie nie będzie widoczna w pliku test.js

Pisząc ten artykuł zakładam, że dysponujesz wiedzą i umiejętnościami przynajmniej na poziomie szkolenia wideo „Twoja własna prywatna strona wizytówka”, które jest umieszczone na tej stronie w dziale „Sekrety Webmasterów”.

Na początku wstawimy na stronę cztery bloki div i w każdym z nich umieszczamy krótki tekst np. div1, div2, itd. Na stronie te teksty powinny ułożyć się jeden pod drugim. Pod blokami div umieścimy listę nieuporządkowaną. Kompletny kod xhtml 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>Serwan. Co mogę zrobić z jQuery?</title>
	<script type ="text/javascript" src="jquery-1.3.2.js"></script>
	<script type ="text/javascript" src="test.js"></script>
</head>
<body>
	<div>div1</div>
	<div>div2</div>
	<div>div3</div>
	<div>div4</div>
 
	<ul style="clear: left;">
		<li>Moduł 1: Twoja własna strona WWW wizytówka.</li>
		<li>Moduł 2: Squeeze page</li>
		<li>Moduł 3: Twoja super oferta</li>
		<li>Moduł 4: Galeria internetowa</li>
		<li>Moduł 5: Katalog Twoich produktów</li>
		<li>Moduł 6: Portal społecznościowy</li>
	</ul>
</body>
</html>

Teraz w pliku test.js piszemy:

$(document).ready(function()
{
	$('div').css({'margin': '12px', 'border': 'solid 2px #006600', 'padding': '10px', 'width': '20%', 'background-color' : '#99ffcc', 'font-weight' : 'bolder'})
});

Początkiem każdego skryptu jQuery jest wywołanie funkcji $(). $() jest tak naprawdę aliasem funkcji głównej frameworka – jQuery(). Wywołanie $() zwraca obiekt, na rzecz którego wywołujemy metodę ready(). Parametrem metody ready() jest funkcja anonimowa, czyli pozbawiona nazwy. Jej definicja występuje w miejscu wywołania. Funkcja, która jest parametrem metody ready() jest wywoływana natychmiast po wczytaniu całej strony html/xhtml. Następnie pobieramy kolejny obiekt lub obiekty posługując się selektorami. W tym przypadku selektorem jest div czyli wszystkie elementy <div></div> na aktywnej stronie. Dla wybranego obiektu/obiektów wywołujemy metodę css(), która ustawia dla tych obiektów style css zdefiniowane w argumencie metody.

Nie jest to nic niezwykłego. Podobny efekt można osiągnąć używając stylów css. Czasem jednak i taka możliwość może się przydać, np. przy uzależnieniu stylów od tego, czy przeglądarka obsługuje JavaScript, czy nie.

Kolejne instrukcje również wpisujemy wewnątrz funkcji będącej argumentem metody ready(), czyli przed końcowymi nawiasami „});”. Tym razem zmienimy położenie bloków div w reakcji na zdarzenie kliknięcia w dowolnym obszarze strony czyli na elemencie body.

$('body').click(function()
{
	$('div').css({'float': 'left'});
});

Po najechaniu kursorem myszy na jeden z bloków div, wywołujemy dla niego animowane przekształcenie do podanych w argumencie metody animate() stylów.

$('div').mouseenter(function()
{
	$(this).animate({padding: '18px', margin: '8px', borderWidth: '4px'}, 300);
});

Podobnie możemy zrobić przy opuszczeniu bloku div.

$('div').mouseleave(function()
{
	$(this).animate({padding: '10px', margin: '20px', borderWidth: '2px'}, 200);
});

Klikając na jeden z bloków możemy ukrywać i pokazywać listę ul z zastosowaniem różnych efektów. Każdy blok div prezentuje inny efekt. Aby bloki były rozróżniane, należy dodać do nich identyfikatory: a, b , c i d. Identyfikator klikniętego właśnie bloku pobieramy przy pomocy metody attr() i wstawiamy do zmiennej atrybut. Zmienną tę sprawdzamy w instrukcji switch i dla odpowiednich wartości wywołujemy odpowiednie części kodu. Instrukcja if($(‘ul’).is(‘:hidden’)) służy do sprawdzenia, czy lista została ukryta, czy też nie.

$('div').click(function()
{
	var atrybut=$(this).attr('id');
	switch(atrybut)
	{
		case 'a':
			if($('ul').is(':hidden'))
			{
				$('ul').show(700);
			}
			else
			{
				$('ul').hide(1600);
			}
			break;
		case 'b':
			if($('ul').is(':hidden'))
			{
				$('ul').slideDown(700);
			}
			else
			{
				$('ul').slideUp(1600);
			}
			break;
		case 'c':
			if($('ul').is(':hidden'))
			{
				$('ul').fadeIn(700);
			}
			else
			{
				$('ul').fadeOut(1600);
			}
			break;
		case 'd':
			$('ul').fadeTo(1700, 0.10).fadeTo(700, 0.90);
			break;
	}
});

Teraz przejdziemy do elementów li listy ul. Zapis ‘li:first’ wybiera pierwszy element li. Po przesunięciu kursorem myszy nad tym elementem wszystkie parzyste elementy listy (elementy są indeksowane od 0) zostaną zformatowane przy pomocy zadeklarowanych stylów (‘li:even’ oznacza elementy parzysta).

$('li:first').mousemove(function()
{
	$('li:even').css({'background-color': '#99ccff'});
});

Zapis ‘li:last’ wybiera ostatni element li. Po przesunięciu kursorem myszy nad tym elementem wszystkie nieparzyste elementy listy zostaną zformatowane przy pomocy zadeklarowanych stylów (‘li:odd’ oznacza elementy nieparzysta).

$('li:last').mousemove(function()
{
	$('li:odd').css({'background-color': '#ffccff'});
});

Zastosowań i możliwości jQuery jest o wiele więcej. Często jQuery wykorzystuje się do efektownej prezentacji grafiki, prezentacji komunikatów, wstępnej validacji formularzy i do prostego posługiwania się technologią AJAX. Do jQuery napisano też wiele interesujących pluginów.

Tagi:JavaScript, jQuery
Zaszufladkowany do Darmowe artykuły, JavaScript, Sekrety Webmasterów | 7 komentarzy »