PROGRAMOWANIE i WEBMASTERKA http://www.wvista.pl Informacje i porady dla programistów i webmasterów. Wersja bardzo beta Sun, 05 Sep 2010 13:05:22 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Podstawy CSS http://www.wvista.pl/index.php/2010/09/podstawy-css/ http://www.wvista.pl/index.php/2010/09/podstawy-css/#comments Sun, 05 Sep 2010 13:03:54 +0000 admin http://www.wvista.pl/?p=35 Niniejszy wpis adresowany jest do webmasterów, lub może lepiej: do właścicieli stron internetowych, którzy nie bardzo mają pojęcie o tworzeniu stron internetowych ale zarządzają np. blogiem i od czasu do czasu, niewielkim nakładem sił chcieli by np. dodać na swoją stronę jakiś element i zmodyfikować jego wygląd. Jeśli masz jakiekolwiek doświadczenie z CSS myślę, że lekturę poniższego artykułu możesz sobie odpuścić, jeśli natomiast jesteś początkującym webmasterem, który korzysta z gotowych szablonów i chciałbyś zmodyfikować wygląd swojej strony lub dodanego na nią gadżetu, ten wpis może cię zainteresować i, mam nadzieję, czegoś nauczyć.


Co to jest CSS? Kompletne podstawy

Skrót css pochodzi od angielskiej frazy Cascading Style Sheets (po polsku: Kaskadowe Arkusze Stylu). Za pomocą owego CSS’a określamy wygląd, położenie, kolory itp. elementów na stronie internetowej. O ile język HTML opisuje strukturę danych na stronie, pozwala grupować dane, osadzać elementy (np. zdjęcia i grafiki), określa działanie elementów (np. link), o tyle CSS, jak było powiedziane powyżej, pozwala na określenie wyglądu tychże danych. Tak naprawdę pewne elementy języka HTML i CSS niekiedy się pokrywają np. pogrubienie tekstu można zrealizować poprzez umieszczenie go w tagach<b>…</b> lub użycie stylu ‘font-weight:bold’, zmianę koloru tła można uzyskać poprzez ustawienie html’owego atrybutu bgcolor lub css’owego background itd.

Gdzie umieszczona jest informacja o wyglądzie elementu na stronie?

Kiedy w przeglądarce internetowej wprowadzasz adres strony, owa przeglądarka z reguły pobiera z serwera plik zapisany w języku HTML (piszę ‘z reguły’ ponieważ nie zawsze jest to prawda, możesz pobierać przecież bezpośrednio obrazki, pliki binarne, PDF’y itd. ale znakomita większość przesyłanych w internecie danych to właśnie HTML). Jak było powiedziane powyżej HTML opisuje strukturę danych zawartych na stronie. Możesz np. grupować niektóre dane w tzw. kontenery np. <div>To jest tekst pomiędzy znacznikami DIV, za pomocą CSS będzie mu można nadać określony wygląd lub określić jego położenie</div>, określać funkcję/działanie np: <a href=’adres strony’>To jest link po kliknięciu, którego przejdziesz na stronę określoną przez atrybut href</a>, umieszczać na stronie grafikę <img src=’adres obrazka’> itd. Każdemu elementowi strony, zawartemu między znacznikami (tagami), w powyższych przykładach DIV i A, lub opisanymi przez IMG możemy, za pomocą stylów określić wygląd i pozycję na stronie. Aby to osiągnąć należy określić styl elementu. Można to osiągnąć na dwa sposoby:

  1. Dodać styl bezpośrednio do interesującego nas elementu
  2. a) umieścić style bezpośrednio na stronie ale nie w elemencie lub b) dodać do strony Kaskadowy Arkusz Stylu (czyli CSS)

W pierwszym przypadku styl opisujemy za pomocą atrybutu ’style’ dodanego do tagu HTML np. <div style=’color:blue’>…</div>, <img style=’width:300px’> (określamy kolor tekstu między tagami DIV i szerokość obrazka na 300 pikseli – ale szczegóły później)

Druga opcja jest nieco bardziej skomplikowana bo nasze style elementów umieszczamy poza owymi elementami, których może być przecież sporo i należy określić, który styl tyczy się którego elementu. O tym z chwilę, najpierw odpowiedzmy na pytanie: gdzie? W przypadku 2a styl elementów umieszczamy na stronie HTML pomiędzy tagami <style> … </style> z reguły zaraz za znacznikiem </head>, w przypadku 2b dodajemy do naszej strony HTML plik o rozszerzeniu .css. Robimy to np. poprzez dodanie w sekcji ‘head’ czegoś takiego: <LINK rel=stylesheet type=”text/css” href=”plik_stylu.css” />.

Podsumujmy, styl elementów naszej strony możemy umieścić w:

1) Bezpośrednio w elemencie,np:
<div style="background: blue; color: yellow;">Ten blok tekstu będzie w kolorze żółtym na niebieskim tle</div>
2) W pliku HTML w tagach <style>, np:
<head>
....
</head>
<style>
.zoltoniebieski {background:blue;color:yellow}
.waski {width:200px}
</style>
3) W zewnętrznym pliku styli dołączanym do naszej strony HTML,np:
<head>
....
<LINK rel=stylesheet type="text/css" href="plik_stylu.css" />
</head>

Gdzie umieścić style strony/CSS strony?

No dobrze, jeśli mamy trzy sposoby umieszczania informacji o stylach, to który z nich wybrać? Wbrew pozorom odpowiedź jest bardzo prosta. Strony publikowane w sieci powinny posłużyć się sposobem trzecim, a więc umieszczać style w dołączanym pliku CSS. Dlaczego? Są na to dwa główne powody: wydajność i wygoda.

Wydajność – w dobrze zaprojektowanych witrynach, jeden plik css ‘obsługuje’ wiele stron (taki sam plik dołączony jest do wielu, być może wszystkich stron witryny), przeglądarka raz pobiera taki plik a później korzysta z jego lokalnej kopii na komputerze przeglądacza – mamy więc zaoszczędzony transfer i moc serwera, a przeglądaczowi szybciej otwierają się strony.

Wygoda – zdecydowanie łatwiej jest modyfikować/poprawiać wygląd strony, że nie wspomnę o czytelności źródła, mając zewnętrzny plik css, nie mówiąc o tym, że jeśli zdecydujemy się na redesign strony, w niektórych przypadkach, wystarczy podmienić tylko plik stylu i gotowe.

Dwa pierwsze sposoby świetnie sprawdzają się na etapie projektowania strony. Nie musimy ‘biegać’ po kilku plikach, wszystko mamy w jednym miejscu. Ja osobiście, projektując jakiś element, używam notorycznie styli w elementach lub w sekcji <style> kiedy całość jest gotowa przenoszę je do zewnętrznego pliku css.

Selektory, czyli co do czego

Przechodzimy powoli do ‘mięsa’, czyli do określania stylu elementów i tworzenia pliku CSS. Jak było powiedziane wcześniej, w przypadku zdefiniowania stylu jako atrybutu elementu, nie mamy, z oczywistych powodów, problemów z określeniem, któremu elementowi styl ten jest przypisany. W przypadku umieszczenia stylu na zewnątrz, musimy mieć sposób określenia, któremu elementowi odpowiada dany styl. W tym celu używamy tzw. selektorów

Typowy opis stylu w pliku .css lub między tagami <style> wygląda tak:
selektor {definicja stylu}, dokładna składnia: [selektor] {[definicja stylu]}
np.
div {color:blue;border:1px solid black}
.zolty {color:yellow}
#pomarancz {background:orange}
</div>

Selektor niczym nie poprzedzony odnosi się do wszystkich elementów zawartych między tagami określonymi przez ten selektor. W powyższym przykładzie, wszystkie elementy DIV strony html będą miały tekst koloru niebieskiego i będą otoczone czarną ramką o grubości jednego piksela

Selektor poprzedzony kropką odnosi się do elementów danej klasy, czyli elementów posiadających atrybut class=’nazwa_klasy’, np. <div class=”zolty”>..</div>, <a class=”zolty”>>link</a>. W naszym przykładzie elementy o klasie ‘zolty’ będą miały żółty kolor tekstu

Selektor poprzedzony krzyżykiem (#) wskazuje na element o identyfikatorze określonym nazwą selektora, czyli na element z ustawionym atrybutem id=’ident’ np. <div id=’pomarancz’>

Style przetwarzane są sekwencyjnie czyli w jeśli nastąpi konflikt (dwa selektory pasują do jednego elementu), decyduje styl późniejszy. W naszym przypadku jeśli w pliku HTML wystąpi <div class=”zolty”> kolor tekstu w między tagami DIV będzię żółty nie niebieski

Selektory można łączyć!!! (trzy wykrzykniki bo to bardzo ważna cecha) np. div.zolty dopasuje się do wszystkich div’ów z klasy ‘zolty’, nie dopasuje się do np. <p class=”zolty”> Selektor .zolty div odpowiada wszystkim div’om w elemencie o klasie zolty

Kilka selektorów może mieć taką samą definicję stylu w tym przypadku selektory oddzielamy przecinkiem. Np. div, td.zolty, a.zolty

Powyższy krótki opis selektorów nie wyczerpuje wszystkich ich możliwości ale myślę, że na początek to wystarczy. Podałem tu najważniejsze i najczęściej używane selektory CSS.

Dla rozjaśnienia i nabrania wprawy jeszcze kilka przykładów
p, div // wszystkie elementy <P> i <DIV>
p.moj-paragraf //wszystkie elementy <P class='moj-paragraf'>
.moja-klasa // wszystkie elementy z atrybutem class='moja-klasa' niezależnie od użytego tagu
#obiekt01 // element o id='obiekt01', niezaleznie od użytego tagu
div#obiekt01 // element o id='obiekt01' ale tylko jeśli jest DIV'em
#obiekt01 a // wszystkie linki w elemencie o id='obiekt01'
.klasa a // wszystkie linki w elementach klasy .klasa
.klasa01 a,.klasa02 a // wszystkie linki w elementach klasy .klasa01 i klasy .klasa02

Niektóre definicje stylu

Aby wpis był pełny podam poniżej, w dość dużym skrócie, niektóre, częściej używane, definicje stylu. Prawdopodobnie już niedługo pojawią się na tym blogu wpisy dokładniej opisujące to zagadnienie. Na razie jednak aby uświadomić jak to wszystko wygląda kilka przykładów. Pełną listę definicji stylów można znaleźć np. tu: http://www.w3schools.com/css/ (strona w języku angielskim ale jedna z popularniejszych i najlepszych)

Właściwość Opis Przykłady
color kolor tekstu color:yellow, color:#909090
background wygląd tła (nie tylko kolor) background:yellow, background:url(‘obrazek-tla.jpg’)
border obramowanie elementu border:1px solid black (czarna ramka o grubości jednego piksela)
margin odstęp od elementów zewnętrznych margin:10px (odstęp ze wszystkich stron 10 pikseli), margin 10px 20px 5px 15px (odstęp od góry, prawej, dołu, lewej)
padding odstęp wewnętrznych elementów od skraju elementu opisywanego stylem padding:20px (20 pikseli odstępu od skraju elementu)
width szerokość elementu width:200px (dwieście pikseli)
height wysokość elementu height:200px (dwieście pikseli)
font-family czcionka tekstu w elemencie font-family:tahoma (tekst będzie wypisany ‘tahomą’)
font-size wielkość czcionki font-size:10px, font-size:60%
font-weight pogrubienie tekstu font-weight:normal, font-weight:bold, font-weight:600
text-decoration dekoracja tekstu text-decoration:underline (podkreślenie), text-decoration:line-through (przekreślenie)

To na razie tyle podstaw CSS, już niedługo, mam nadzieję, że w przeciągu kilku dni, postaram się popełnić więcej wpisów na temat CSS dla początkujących. Bądźcie cierpliwi.

]]> http://www.wvista.pl/index.php/2010/09/podstawy-css/feed/ 0 CSS3 Narzędzie Online http://www.wvista.pl/index.php/2010/04/css3-narzedzie-online/ http://www.wvista.pl/index.php/2010/04/css3-narzedzie-online/#comments Thu, 01 Apr 2010 17:13:19 +0000 admin http://www.wvista.pl/?p=28 Ostatnich kilka wpisów poświęciłem nowej wersji kaskadowych arkuszy stylu, czyli CSS3. To nie koniec, będzie dużo więcej na ten temat. A na razie, jeśli ktoś chce sobie wizualnie obejrzeć niektóre nowości CSS3 to polecam darmowe narzędzie do wizualizacji tychże, na które właśnie ostatnio trafiłem.

Autorem narzędzia jest producent programu ‘Style Master’ – firma ‘westciv’. Style Master powstał już w 1998 roku i był podobno pierwszym edytorem CSS. Sprzedawany jest do tej pory o czym można przeczytać na stronie firmy….

Ale do rzeczy. Narzędzie, które chcę polecić znajduje się tu: http://westciv.com/tools/shadows/. (Świadomie podaje link do konkretnej wizualizacji bo strona główna może nie przyciągnąć tak uwagi).

Oprócz podlinkowanej wizualizacji cieniowania tekstu, znajdują się tam narzędzia do wizualizacji cieniowania box’ów/kontenerów, gradientów (linear i radial), transformacji (przesunięcie, skalowanie, obrót, pochylenie) i text-stroke.

Polecam uwadze, narzędzie jest wykonane bardzo starannie, ładnie i efektownie, włącznie z przesuwanymi suwakami i oknem wyboru koloru. Kilka ruchów i już wiadomo o co chodzi, a oprócz wizualizacji, dostajemy także gotowy kod dla mozilli lub webkit’a (chrome), który już nie tak trudno przerobić na inne przeglądarki lub na CSS3 jak będzie już gotowy i obsługiwany.

]]> http://www.wvista.pl/index.php/2010/04/css3-narzedzie-online/feed/ 0 Co Nowego w CSS3 część 2 http://www.wvista.pl/index.php/2010/03/co-nowego-w-css3-czesc-2/ http://www.wvista.pl/index.php/2010/03/co-nowego-w-css3-czesc-2/#comments Wed, 31 Mar 2010 21:32:03 +0000 admin http://www.wvista.pl/?p=24 W poprzednim wpisie Nowości w CSS3 przedstawiłem kilka nowych właściwości kolejnej wersji kaskadowych arkuszy stylu, pisałem  między innymi o zaokrąglonych rogach,  ramkach graficznych i gradientowych, cieniowaniu tekstu i cieniowaniu box’ów, kolorach we współrzędnych hsla i rgba, przezroczystości. W tym wpisie kontynuuje szybki przegląd nowości w CSS3. Jak pisałem poprzednio, teraz tylko sygnalizuje nowe cechy CSS, później postaram się opisać je dokładniej.


Zobaczmy jakie jeszcze przydatne rzeczy możemy znaleźć w nowym CSS.

Fonty

Czy miałeś kiedyś sytuację, że klient dla którego robiłeś stronę upierał się, że chce taki, a nie inny font na stronie i tłumaczenie mu, że to nie jest taka prosta sprawa aby ustawić dowolny font na stronie html, nie przynosiło żadnych rezultatów? Ja miałem. Klient na szczęście dał się w końcu przekonać ale zanim to nastąpiło musiałem przekopać się przez setki stron internetowych szukając rozwiązania. (na marginesie – są rozwiązania pozwalające na ‘wgranie’ na stronę własnej czcionki ale nie są one takie hop-siup) .

Począwszy od CSS3 nie powinno już być kłopotów z ustawieniem dowolnej czcionki na stronie. CSS3 oferuje bowiem regułę @font-face pozwalającą ‘wgrać’ plik z czcionkami. Wygląda to tak:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

Po użyciu takiej reguły, postępujemy już normalnie ustawiając nazwę naszego fontu, czyli np:

h3 {font-family:Delicious}

Kilka kolumn w jednym divie (multi-column)

cSS3 oferuje nam trzy selektory do wielokolumnowego łamania tekstu.

column-count: 3;
column-gap: 1em;
column-rule: 1px solid black;

column-count określa liczbę kolumn
column-gap określa margines kolumny
column-rule określa jak ma wyglądać rozdzielenie kolumn

Powyższy styl wyświetli coś takiego (Najnowszy Chrome i FF wyświetlają kolumny, użytkownicy IE i Opery prawdopodobnie nie zobaczą efektu podziału na kolumny):

Cras urna metus, aliquam sed, condimentum eget, pellentesque scelerisque, massa. Nullam et est id augue blandit tincidunt. Ut consectetuer, justo eleifend varius facilisis, tortor lorem pharetra nunc, ac sodales purus nunc semper tortor. Integer nec urna. Praesent scelerisque, ipsum nec aliquet volutpat, sem ante sagittis risus, sed condimentum magna libero luctus elit. Donec pede purus, hendrerit non, laoreet vel, porta ut, neque. Cras eu lacus. Pellentesque tempus mattis magna. Nullam id nisl. Quisque dolor lorem, commodo ac, pharetra sed, nonummy nec, nulla. Mauris purus. Suspendisse eget mauris nec justo eleifend vestibulum. Nunc ut eros sed pede pretium congue. Etiam in elit ut nisi ultrices hendrerit. Cras vulputate ultrices quam. Curabitur venenatis. Cras sed nisi.

I ostatnia nowość w CSS3 na teraz:

Resizing

Resizing to możliwość zmiany wielkości elementów na stronie przez użytkownika. Poniższy przykład działa jedynie w najnowszym Chromie. Info dla tych, którzy nie widzą efektu. Poniższy box można rozciągać we wszystkie strony, ciągnąc za prawy dolny róg.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Kod tego stylu jest następujący:

width: 200px; height: 100px; border: 1px solid; resize: both; overflow: auto;

selector resize może przyjmować wartości both, horizontal i vertical. Można dodać także ograniczenia dolne min-width i min-height oraz górne max-width i max-height

I na koniec jeszcze przypomnienie, że w powyższym tekście wykorzystałem przykłady z http://www.css3.info/preview/

Ciąg dalszy ‘Co Nowego w CSS3′ nastąpi …

]]> http://www.wvista.pl/index.php/2010/03/co-nowego-w-css3-czesc-2/feed/ 1 Nowości w CSS3 http://www.wvista.pl/index.php/2010/03/nowosci-w-css3/ http://www.wvista.pl/index.php/2010/03/nowosci-w-css3/#comments Tue, 30 Mar 2010 20:53:11 +0000 admin http://www.wvista.pl/?p=20 Przyglądam się ostatnio nieustająco nowemu standardowi kaskadowych arkuszy stylu czyli CSS3. Standard jest cały czas opracowywany i nie wiadomo kiedy będzie gotowy ale nowe wersje przeglądarek już go powoli implementują. W tym artykule zobaczymy co nas czeka, a czeka nas webmasterów naprawdę rewolucja bo CSS3 ułatwi nam pracę znakomicie … co prawda, długa droga jeszcze do lekkiego życia webdesignera bo wszyscy, którzy tworzą strony wiedzą, że trzeba zadbać także o użytkowników archaicznych wersji przeglądarek no ale po jakimś czasie …

Poniżej mały wstęp do nowości w CSS3 z przykładami. Na razie tylko przedstawiam pokaz możliwości nowego standardu (widoczny dla tych, którzy mają przeglądarki z zaimplementowaną obsługą przedstawianych właściwości). W następnych wpisach na tym blogu postaram się zając dokładniej każdą z omawianych, nowych funkcji CSS3.

Co nas czeka w CSS3

Poniżej wykorzystałem przykłady z www.css3.info. Niektóre przykłady są ‘podrasowane’ pod FF 3.6 (obecnie najnowszy), tam gdzie nie działa standardowy CSS3 dodany jest prefix -moz, np. -moz-box-shadow. Ergo, najlepiej oglądać tą stronę pod Fire Fox’em. Uwaga. Większość przykładów nie będzie działać pod IE z wersją 8 włącznie.

Ramki (Borders)

‘Gradientowe’ kolorowe ramki, podajemy kolor dla każdej ‘warstwy’ ramki

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

Przykład kolorowej ramki:

Lorem Ipsum

Graficzne ramki (border-image)
Jako obramowanie do elementów możemy wykorzystać grafiki. Przykład można znaleźć tu: Border image CSS3

Zaokrąglone ramki (border-radius)

W końcu skończy się męka z popularnym zaokrąglaniem ramek :) . Poniższy przykład jest trochę oszukany, wykorzystuje prefiksy przeglądarek ‘-moz-border-radius:5px;-webkit-border-radius:5px;…’, w CSS3 powinno działać po prostu ‘border-radius’

Lorem Ipsum

Cieniowanie (Box-Shadow)

Lorem Ipsum

<div style="border-shadow:10px 10px 0px #909090;-moz-box-shadow: 10px 10px 0px #909090;background:black;color:white;padding:10px;border-radius:5px;-moz-border-radius:5px">Lorem Ipsum</div>

Kolory (colors)

kolory HSL (Hue, Saturation, Luminance) i HSLA

Z nadejściem CSS3 kolory będzie można podawać we współrzędnych HSL czyli Hue, Saturation, Luminance (Barwa,Nasycenie,Luminacja) i HSLA (A jak alpha-przezroczystość)

Przykład:
<div style="background-color: hsl(0,100%, 50%);"></div>
<div style="background-color: hsla(120,100%, 50%, 0.4);"></div>

kolory RGBA

Do istniejącej już w poprzednich wersjach możliwości podawanie koloru we współrzędnych RGB dojdzie możliwość podawania dodawania przezroczystości

<div style="background: rgba(255, 0, 0, 0.2);"></div>

Przezroczystość

Parametr określający przezroczystość stanie się standardem. Do tej pory przeglądarki implementowały go po swojemu.

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>

Tekst (Text)

Cieniowanie tekstu (text-shadow)

Bardzo efektowna właściwość. Ten przykład powinien być widoczny pod FF 3.6, Chrome 4.1 i Operą 10.1 (pod IE najnowszym nie działa)

Lorem Ipsum

<div style="font-size:20px;text-shadow: 2px 2px 2px #000;">Lorem Ipsum</div>

To na razie tyle nowości, oczywiście podane powyżej przykłady to tylko niewielka część możliwości CSS3 – więcej postaram się pokazać w następnych wpisach. Możecie także spodziewać się rozwinięcia informacji o poszczególnych nowościach CSS3 włącznie z moimi testami, bo jak pisałem na wstępie, przyglądam się temu standardowi bacznie.

Edycja: Część druga przeglądu nowości CSS3 znajduje się tu: Co Nowego w CSS3 cz.2

]]> http://www.wvista.pl/index.php/2010/03/nowosci-w-css3/feed/ 1 Dobry Edytor HTML – PSPad http://www.wvista.pl/index.php/2010/03/dobry-edytor-html-pspad/ http://www.wvista.pl/index.php/2010/03/dobry-edytor-html-pspad/#comments Tue, 30 Mar 2010 11:38:20 +0000 admin http://www.wvista.pl/?p=15 Każdy webmaster i programista wie jak ważny jest dobry edytor kodu. Często, co prawda, spotyka się zdanie, że dobrą stronę czy nawet cały serwis można zrobić w prostym edytorze np. windows’owym notatniku (notepad.exe) bo to umiejętności, a nie narzędzia, są wyznacznikiem dobrego programisty. No tak, przyznam rację, że bez umiejętności ani rusz ale pójdę o zakład, że z dwóch webmasterów/programistów o podobnej wiedzy i umiejętnościach lepiej, szybciej i bardziej przejrzyście wykona projekt ten, który ma do tego lepsze narzędzia. Czemu nie ułatwić sobie pracy jeśli ułatwienie to jest znaczące, a przy tym darmowe.

Niniejszy artykuł nie jest rankingiem edytorów html, nie znajdziecie w nim porównań, punktacji itd. Moim celem jest przedstawienie i polecenie jednego tylko edytora – darmowego PSPad’a. Wynika to z prostej przyczyny. Miałem to szczęście, że PSPad był dobrych kilka lat temu jednym z pierwszych edytorów, które testowałem. Używam go do dziś i nie czuję potrzeby zmiany. Wystarcza mi w zupełności więc tak na prawdę nawet nie bardzo znam inne narzędzia tego typu i każda próba porównań byłaby nieuczciwa i, siłą rzeczy, nie potrafiłbym opisać precyzyjnie innych programów. PSPad ma wszystko czego mi trzeba (a nawet więcej), a to co bym ewentualnie w nim zmienił albo dodał to sprawy marginalne. Zobaczmy więc co potrafi rzeczony PSPad.

PSPad – Dobry Darmowy Edytor HTML (a właściwie edytor kodu)

Na stronie Jana Fiali, twórcy PSPad’a (http://www.pspad.com/en/) znajdujemy informacje (niestety brak jest strony po polsku ale sam edytor jest spolszczony), że program ten przeznaczony jest dla tych którzy:

  • pracują z różnym oprogramowaniem
  • lubią i potrzebują kolorowanie składni
  • potrzebują niewielkiego narzędzia z prostymi funkcjami (myślę, że tu autor porównuje swój darmowy edytor z płatnymi kobyłami Microsoftu, czy Borlanda)
  • szukają narzędzia, które obsługuje zwykły tekst
  • chcą zaoszczędzić czas
  • potrzebują elastycznego narzędzia, które umożliwia dodawanie rozszerzeń
  • chcą zaoszczędzić pieniądze pracując na profesjonalnym narzędziu (PSPad darmowy jest także w zastosowaniach komercyjnych)

Co oferuje PSPad

Poniżej znajduje się lista niektórych cech edytora z moim komentarzem

  • Praca z projektami – niezwykle przydatne przy pracy nad wieloma projektami
  • Praca z wieloma dokumentami w tym samym czasie (MDI)
  • Zapamiętywanie sesji – po zamknięciu edytora i ponownym otwarciu, edytor uruchamia się w stanie sprzed zamknięcia (automatycznie otwiera dokumenty) – bardzo wygodne, znakomicie pomaga zaoszczędzić czas
  • Klient FTP – edycja dokumentów online
  • Makra i makro rekorder
  • Porównywanie dokumentów z podświetlaniem różnic- zgrabnie zrobione
  • Szablony (templates)
  • Podświetlanie składni – wbudowane rozpoznawanie kilkunastu języków
  • Możliwość konfiguracji i tworzenia własnych reguł podświetlania składni
  • auto-korekcja – tą opcję akurat wyłączyłem, bo czasem jest denerwująca :)
  • Podgląd HTML – oczywiście bez tego żaden webmaster się nie obejdzie
  • edytor HEX – rzadko używany ale czasem przydatny
  • wbudowana biblioteka TiDy do sprawdzania poprawności HTML
  • zintegrowana wersja Lite (darmowa) edytora CSS – TopStyle
  • eksport do formatów RTF, HTML, TeX
  • możliwość zaznaczania i kopiowania bloków (kolumn) tektu
  • przeformatowywanie i kompresja HTML
  • znajdowanie i podświetlanie sparowanych nawiasów i tagów – bardzo potrzebne
  • eksplorator kodu
  • we wbudowanych narzędziach: pipeta koloru, okno wyboru koloru, konwerter jednostek, generator MD5
  • praca z plikami kodowanymi w formatach: UTF-8, ISO-8859-2, ANSI, CP859, UTF-16 LE, UTF-16 BE, OEM
  • obsługa plików w formacie DOS, UNIX, MAC
  • i wiele, wiele innych

Powyższa lista to tylko część z dobrodziejstw, które oferuje darmowy edytor PSPad. W wieloletniej z nim pracy brakuje mi może jednej rzeczy: rozpoznawania formatów kodowania – kilka razy zdarzyło mi się otwarcie pliku kodowanego w sposób A z ustawioną opcją kodowania B i zapisanie tego pliku – efekt utrata polskich znaków; za pewną wadę można by także uznać małą liczbę kodować znaków narodowych … no ale jeśli robimy strony w języku polskim lub angielskim nie powinno mieć to znaczenia – mamy ISO-8859-2 i UTF-8

Gorąco polecam ten edytor, kto go niezna nich go sprawdzi. Tu jeszcze raz link: PSPad (wersja angielska, opis, download, właściwości itd)

]]> http://www.wvista.pl/index.php/2010/03/dobry-edytor-html-pspad/feed/ 0 Drukowanie Tła Strony HTML http://www.wvista.pl/index.php/2010/03/drukowanie-tla-strony-html/ http://www.wvista.pl/index.php/2010/03/drukowanie-tla-strony-html/#comments Wed, 24 Mar 2010 15:06:58 +0000 admin http://www.wvista.pl/?p=11 Większość nowoczesnych przeglądarek internetowych domyślnie nie drukuje tła strony. Ma to sens, ponieważ w większości przypadków, drukując stronę chodzi nam o to aby przelać na papier tekst na niej zawarty, a drukowanie to niepotrzebne dodatkowe zużycie toneru. Są jednak wyjątki. Czasami potrzebujemy wydrukować tło, gdyż inaczej wydruk może nie być czytelny. Przykładem niech będą tu np. krzyżówki dostępne w internecie. Na stronie Krzyżówki można znaleźć skrypt umożliwiający rozwiązywanie krzyżówek online. Co jednak, gdy chcielibyśmy taką krzyżówkę wydrukować aby rozwiązać ją w później, spokoju, na papierze, bez komputera.

Wydruk krzyżówki bez tła wyglądałby jak kratownica bez zaznaczonych pól ciemnych i jasnych – żadną miarą nie dałoby się jej rozwiązać, no chyba, że ktoś lubi dodatkowe utrudnienia i chce się domyślać ile liter ma wpisywane hasło. W takim i podobnych przypadkach musimy zrezygnować z oszczędności na tonerze i tło jednak wydrukować.

Jak to zrobić? Jak wydrukować tło strony html?. Można oczywiście zrobić graficzny zrzut strony i wydrukować obraz ale są prostsze sposoby.


Wydruk html z tłem i bez tła

W popularnych przeglądarkach istnieje możliwość ustawienia drukowania tła. Gdzie się ona znajduje? W najnowszych wersjach przeglądarek sprawdźcie ‘Podgląd Wydruku/Ustawienia’, powinien tam znajdować się checkbox ‘Drukuj kolory i obrazy tła’ (IE7), ‘Drukuj tło (kolory i obrazy)’ (FF 3.6). Checkbox ten należy oczywiście zaznaczyć. Jeśli na karcie ustawień w podglądzie wydruku brak jest możliwości ustawiania żądania wydruku tła, spróbujcie poszukać go w ustawieniach przeglądarki według poniższej podpowiedzi:

  • Internet Explorer (IE) - Narzędzia/Opcje Internetowe/Zaawansowane/ w sekcji ‘Drukowanie’ należy zaznaczyć pole ‘Drukuj kolory i obrazy tła’
  • FireFox (FF) – Plik/Ustawienia Strony/Drukuj Tło (kolor oraz obrazki)
  • Opera - Plik/Opcje wydruku/Drukuj Tło Strony
  • Chrome – brak opcji, Chrome powinien domyślnie drukować tło (uwaga Chrome nie ma podglądu wydruku)

Tak przy okazji, na marginesie. Przeglądarka Chrome, z niewiadomych przyczyn, nie posiada możliwości podglądu wydruku. Można sobie z tym mankamentem poradzić w dość łatwy sposób. Wystarczy zainstalować driver typu PDF Printer (PDF Writer) czyli program symulujący drukarkę i drukujący do pliku PDF zamiast na urządzenie.

]]> http://www.wvista.pl/index.php/2010/03/drukowanie-tla-strony-html/feed/ 0 Kreator Formularzy HTML http://www.wvista.pl/index.php/2010/03/kreator-formularzy-html/ http://www.wvista.pl/index.php/2010/03/kreator-formularzy-html/#comments Sat, 20 Mar 2010 15:03:29 +0000 admin http://www.wvista.pl/?p=7 Każdy kto ma jakieś doświadczenie webmasterskie na pewno spotkał się z problemem tworzenia formularzy na stronę www. Zadanie to jest o tyle niewdzięczne, że trzeba, oczywiście w zależności od ilości danych w formularzu, wklepać dość dużo kodu, zadbać o format danych wprowadzanych przez użytkownika, co np. w przypadku pola z datą nie jest takie proste, nie mówiąc już o samym wyglądzie formularza. Formularze html można oczywiście tworzyć ‘na piechotę’ ale można też posłużyć się, stworzonymi do tego celu, kreatorami (generatorami) formularzy html.

Jednym z takich, bardzo eleganckich, łatwych w obsłudze, intuicyjnych i w pełni WYSYWIG, generatorów jest kreator umieszczony na stronie phpform.org. Jest to kreator online umożliwiający w błyskawicznym tempie tworzenie dość zaawansowanych formularzy html. Wizard tego generatora składa się z trzech stron.

Na pierwszej z tych stron wybieramy wygląd, a właściwie kolorystykę formularza (25 templatek do wyboru). Na drugiej dodajemy i edytujemy w bardzo łatwy sposób pola formularza – do wyboru mamy standardowe pola html tzn. pola tekstowe (jedna linia i wiele linii <textarea>), checkbox’y, combobox’y, pola upload’u plików oraz niestandardowe, czyli np. data, godzina, cena, adres www, imię i nazwisko, telefon, email, dana liczbowa. Właściwości tych pół możemy w łatwy sposób, w ograniczonym zakresie, wizualnie edytować. Na trzeciej stronie, po zapisaniu formularza, mamy możliwość podglądu utworzonego dzieła i ewentualnej jego edycji lub ściągnięcia wygenerowanych plików.

O ile generacja niektórych pól ‘dodatkowych’ np. ‘imię i nazwisko’ przyśpiesza nam jedynie tworzenie strony, o tyle pole z wyborem daty wyposażone w dołączony, otwierany po kliknięciu, kalendarz na pewno uatrakcyjni niejeden formularz.

Pliki, które musimy ‘wgrać’ do naszej aplikacji, ściągamy z kreatora w jednym pliku zip. Po rozpakowaniu znajdujemy tam kilka plików, z których najważniejsze (być może będziemy je modyfikować) to form.html (kod html naszej formatki) i view.css. Dodatkowo dostajemy jeszcze plik view.js (javascript obsługujący formularz), obrazki (png i gif), plik htc i opcjonalnie plik javascript obsługujący ‘wyskakujący’ kalendarz.

Ocena narzędzia:

    Zalety:

  • Elegancja wykonania i elegancki wygląd generowanych formularzy
  • Intuicyjność, a co za tym idzie łatwość obsługi od pierwszego razu
  • Bardzo szybkie tworzenie formularzy
  • Możliwość dodania opisów pól (helpów dla użytkownika)
  • Dodatkowe, niestandardowe pola
  • Kalendarz w wyborze daty
  • Pełny kod z możliwością modyfikacji (formularz nie korzysta w trakcie działania z plików na innych serwerach)
    Wady

  • Brak walidacji na poziomie javascript wprowadzonych danych. Np. pole numeryczne pozwala na wprowadzenie liter, zatwierdzenie nie buntuje się przy wprowadzeniu miesiąca o numerze 13, czy godziny 25:67:89
  • Brak możliwości zmiany atrybutu ‘name’ pól formularza z poziomu kreatora WYSYWIG (można zmienić w plikach)

Aby pokazać, kilka razy podkreślaną w powyższym tekście, elegancję narzędzia, poniżej znajduje się wygenerowany przez nie przykładowy formularz html, którego tworzenie nie trwał dłużej niż 2 minuty. Wygląd jest w 100% oryginalny, zmodyfikowane (zmiany w otzrymancyh plikach) jest jedynie działanie klawisza ‘Wyślij’

]]> http://www.wvista.pl/index.php/2010/03/kreator-formularzy-html/feed/ 2 Usunięcie Obramowania Linku http://www.wvista.pl/index.php/2010/03/usuniecie-obramowania-linku/ http://www.wvista.pl/index.php/2010/03/usuniecie-obramowania-linku/#comments Sat, 20 Mar 2010 14:28:25 +0000 admin http://www.wvista.pl/?p=5 Jako, że niniejszy wpis jest pierwszym merytorycznym, potraktujmy go jako rozgrzewkę i spróbujmy rozwiązać dość prosty problem – jak usunąć obramowanie linku po jego kliknięciu. Hmmm, ugryzłem się właśnie w język, bo jak się zna rozwiązanie, to wydaje się ono dość proste ale znaleźć je może być nie tak łatwo tym bardziej, że ukrycie obramowania w różnych przeglądarkach wykonuje się inaczej.

Aby zobaczyć o co dokładnie chodzi, kliknijcie w poniższy link:

Link Testowy

Uwaga! Pod niektórymi przeglądarkami np. Chrome 4.0 ramka może nie być widoczna, tu nasz problem więc nie istnieje

Po kliknięciu powinno pokazać się niebieskie, kropkowane (dotted) obramowanie (nazywane czasem markizą). Czasami, zwłaszcza gdy link jest graficzny (obrazek) lub tło strony gryzie się z kolorem obramowania, a kliknięcie nie przenosi nas na inną stronę bo link obsługiwany jest np. javascript’em, taka ramka może razić i należałoby ją ukryć. Jak to zrobić?

Starsze wersje IE (Internet Explorera) reagowały na atrybut linka hidefocus=true, było to jednak typowe rozwiązanie jedynie dla IE. Obecnie, prawdopodobnie od wersji 7, Internet Explorer powinien obsługiwać bardziej uniwersalną, css’ową, metodę usunięcia obramowania *:focus {outline:none}. Sprawdźmy:

Link bez obramowania

Powyższy link wygląda następująco:

<a href='javascript:void(0)' hidefocus=true style="outline:none">Link bez obramowania</a>

Powyższe rozwiązanie powinno działać pod wszystkimi przeglądarkami. Ja osobiście testowałem je na IE6, IE8, FF3.0, Operze 10, Chrome 4. Gdyby jednak ktoś odkrył przeglądarkę, na której obramowanie dalej występuje, proszę dać znać w komentarzach, a postaramy się jakoś zawalczyć.

]]> http://www.wvista.pl/index.php/2010/03/usuniecie-obramowania-linku/feed/ 0 Witaj, świecie! http://www.wvista.pl/index.php/2010/03/witaj-swiecie/ http://www.wvista.pl/index.php/2010/03/witaj-swiecie/#comments Sat, 20 Mar 2010 13:27:01 +0000 admin http://mmdfactory.home.pl/wvista_nowa/?p=1 Zaczynamy po zmianie. Portal wvista.pl powstał kilka lat temu jeszcze przed premierą Windows Visty i miał na celu informowanie o tym, jak się później okazało, nie bardzo udanym systemie. Przed ukazaniem się następcy Visty – Windows 7 dodany został kanał informujący także o tym ‘OeSie’.

Ponieważ oba systemy są już jakiś czas na rynku, Vista odchodzi w niebyt, a Windows 7 coraz bardziej się zadamawia, postanawiamy nieco zmienić profil działalności portalu. Od teraz, nasz serwis będzie prowadzony w formie blogu i w znakomitej większości poświęcony będzie szeroko pojętemu programowaniu i webmasteringowi. Zapraszamy.

PS. Poprzednia wersja serwisu nadal działa ( jak długo będzie online, sami nie mamy pojęcia :) ) – i dostępna jest tutaj: Windows Wieści

]]> http://www.wvista.pl/index.php/2010/03/witaj-swiecie/feed/ 0