2 grudnia 2010

Obiekt Flash zgodny z XHTML1.1

Współczesne witryny internetowe składają się z wielu elementów prezentujących ich zawartość i design. Na początku warto przytoczyć, co wchodzi w skład elementów prezentujących wygląd witryn internetowych, tzn.: kaskadowe arkusze stylów, tzw. CSS, elementy graficzne, animacje itp. Dziś chciałbym zająć się ostatnim wspomnianym elementem, a dokładniej animacjami – obiektami typu SWF.

Co odróżnia obiekty SWF od pozostałych elementów? Odpowiedź jest dość prosta. Większość elementów możemy bez problemu osadzić w dokumencie XHTML. Z obiektami SWF jest podobnie, jednak występuje jeden „mały” mankament – zgodność ze standardem XHTML udostępnionym przez konsorcjum W3C.

Do niedawna, aby umieścić animację SWF w dokumencie HTML wystarczyła deklaracja:

HTML:
<object width="400" height="100">
  <param name="movie" value="somefilename.swf" />
  <embed src="plik.swf" width="400" height="100"></embed>
</object>


Niestety, powyższa deklaracja nie spełnia najnowszego standardu XHTML 1.1. Z pomocą przychodzi skrypt AC_RunActiveContent wykorzystujący JavaScript do poprawnego wyświetlenia obiektu SWF.

Jak więc użyć skrypt do wyświetlenia elementu SWF? Spójrzmy na poniższy kod:

HTML:
<!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" />
  <script src="AC_RunActiveContent.js" type="text/javascript"></script>
  <title>Obiekt Flash zgodny z XHTML1.1</title>
</head>
<body>
 <script type="text/javascript">

 AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0', 'width', '400', 'height', '100', 'src', 'zrodlo', 'quality', 'high', 'pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'movie', 'zrodlo');
 </script>
 <noscript>
   <p>Twoja przeglądarka nie obsługuje JavaScript.</p>
 </noscript>             
</body>
</html>


Na samym początku, w sekcji nagłówkowej <head>, należy umieścić odniesienie do pliku skryptu:

HTML:
<script src="AC_RunActiveContent.js" type="text/javascript"></script>

W sekcji <body> w znaczniku <script> umieszczamy kod JavaScript odpowiedzialny za wyświetlanie obiektu SWF:

JavaScript:
AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0', 'width', '400', 'height', '100', 'src', 'zrodlo', 'quality', 'high', 'pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'movie', 'zrodlo');

Jak możemy zauważyć, skrypt przyjmuje kilka parametrów:
- codebase: identyfikuje lokalizację Flash Playera (przeglądarka automatycznie pobierze Playera, jeśli nie został wcześniej zainstalowany),
- width: szerokość animacji w pikselach,
- height: wysokość animacji w pikselach,
- src: określa lokalizację pliku .swf (podajemy bez rozszerzeń),
- quality: jakość wyświetlanej animacji (low, high, autolow, autohigh, best),
- pluginspage: określa lokalizację Flash Playera, który użytkownik może pobrać w przypadku braku oprogramowania),
- movie: określa lokalizację pliku .swf (podajemy bez rozszerzeń).

Wymienione powyżej parametry należy umieszczać w skrypcie w następujący sposób:

JavaScript:
AC_FL_RunContent(‘parametr’, ‘wartość’, ‘parametr’, ‘wartość’, ... ,‘parametr’, ‘wartość’);

Szczegółowy opis niewspomnianych w tym artykule opcjonalnych parametrów i opisany skrypt AC_FL_RunContent dostępny jest na stronie internetowej Adobe: http://www.adobe.com/devnet-archive/activecontent/.

Dodatkowo po znaczniku zamykającym </script> został umieszczony fragment kodu HTML, który zostanie wywołany w sytuacji, gdy przeglądarka internetowa nie będzie w stanie obsłużyć JavaScript.

HTML:
<noscript>
  <p>Twoja przeglądarka nie obsługuje JavaScript.</p>
</noscript>


Na zakończenie kod został poddany walidacji na stronie internetowej konsorcjum W3C http://validator.w3.org/


Zaprezentowany sposób zagnieżdżania obiektów SWF w dokumentach HTML jest zgodny ze standardem XMTML 1.1 i pozwala w dowolny sposób skonfigurować animację Flash. Niestety, gdy użytkownik wyłączy obsługę JavaScript w przeglądarce internetowej, skrypt nie zostanie uruchomiony. Mam nadzieję, że zaprezentowany sposób stanowi alternatywę pomiędzy zgodnością standardów W3C, a prezentacją danych na stronach internetowych.

13 października 2010

CSS3 - Kolejne przykłady

W ostatnim poście nawiązałem do nowego standardu kaskadowych arkuszy stylów CSS3. Dziś chciałbym wam przedstawić kolejne zagadnienia związane z trzecią wersją arkuszy. Na wstępie poruszę kwestię nowych modeli barw. Następnie pokażę, jak w prosty sposób zdefiniować i wykorzystać niestandardowe fonty w dokumentach HTML. Na zakończenie zaprezentuję zastosowanie właściwości tła w CSS3.

Na dobry początek wykonamy pojemnik, który posłuży nam w poniższych przykładach.
CSS:
div {
     background-color: #e55;
     color: #fff;
     height: 70px;
     width: 300px;
     text-align: center;
     border: 3px solid #fff;
     font-family: tahoma;
     padding: 5px;
}



Zastosowanie modelu RGBA
RGBA jest rozszerzeniem modelu RGB, który oprócz standardowych składowych R – red, G – green i B – blue, zawiera stopień przezroczystości oznaczony literą A – alpha channel.

W CSS3 stopień przezroczystości przyjmuje wartości z zakresu od 0 do 1. Wartość 0 – pełna przezroczystość, 1 – brak przezroczystości, np.: .50 – element jest nieprzezroczysty w 50%.
CSS:
.rgb_a {
        background-color: rgba(100,125,153,.5);
}

HTML:
<div class="rgb_a">Tło RGBA i przezroczystości 50%</div>

Uzyskaliśmy następujący efekt:
Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.



Zastosowanie modelu HSL
HSL to model, w którym każda z barw opisana jest w przestrzeni trójwymiarowej.  Model składa się z trzech współrzędnych:
H (Hue) – barwa z przedziału 0 – 360º,
S (Saturation) – nasycenie od 0 do 100%,
L (Lightness) – światło białe od 0 do 100%.
CSS:
.hs_l {
       background-color: hsl(240,100%,50%);
}

HTML:
<div class="hs_l">Tło HSL</div>

Uzyskany efekt:
Jak widać otrzymaliśmy barwę identyczną do składowych RGB o wartości R=0,G=0,B=255. Model barw HSL jest podobny do modelu HSV, którego dziś nie będę szczegółowo opisywał. Przykładowo, jeżeli ustawimy nasycenie L=0% otrzymamy kolor czarny, a gdy L=100% -  kolor biały.

Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.



Zastosowanie modelu HSLA
HSLA jest rozszerzeniem modelu HSL, który został wzbogacony o stopień przezroczystości oznaczony literą A – alpha channel. Jak wspomniano powyżej wartość 0 – pełna przezroczystość, 1 – brak przezroczystości.
CSS:
.hsl_a {
        background-color: hsla(120,100%,50%,.4);
}

HTML:
<div class="hsl_a">Tło HSLA i przezroczystości 40%</div>

Efekt:
Stosując powyższy kod, otrzymaliśmy barwę identyczną do składowych RGB o wartości: R=0,G=255,B=0 i przezroczystości 60%.

Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.



Niestandardowe fonty
Niejednokrotnie początkujący deweloperzy zastanawiali się, jak wykorzystać niestandardowe czcionki w dokumentach HTML. Wiele firm i instytucji używa własnych fontów w dokumentach i listach, więc czemu nie wykorzystać ich na stronie www? Dzięki CSS3 możemy zdefiniować i dowolnie wykorzystać czcionki Open-Type (.otf) i True-Type (.ttf).
CSS:
@font-face {
            font-family: "nowy_font";
            src: url(xtrusion.ttf);
}
.fonty {
        font-family: nowy_font;
        font-size: 40px;
}

HTML:
<p class="fonty">Moja nowa czcionka.</p>
W pierwszym kroku zadeklarowałem czcionkę w dokumencie CSS, wskazując źródło i nazwę. W kroku drugim utworzyłem klasę „fonty”, w której wykorzystałem wcześniej zadeklarowaną czcionkę „nowy_font”.

Otrzymany efekt:
Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.



Właściwość „background-size” - rozmiar graficznego tła
Dzięki właściwości „background-size” jesteśmy w stanie określić rozmiar i układ tła dowolnego elementu. Właściwość może przyjąć wartości względne i bezwzględne oraz: „auto”, „cover”, „contain”.

a) wartości względne i bezwzględne
Stosując wartości bezwzględnie, np. „background-size: 20% 50%”, ustalimy rozmiar graficznego tła na 20% wzdłuż osi X i 50% wzdłuż osi Y. Wartości względne zachowują się w identyczny sposób.
CSS:
.tlo {
      background-image: url(tloa.jpg);
      background-size: 20px 50px;
      -moz-background-size: 20px 50px;
      -o-background-size: 20px 50px;
      -webkit-background-size: 20px 50px;
      -khtml-background-size: 20px 50px;
}

HTML:
<div class="tlo">Tło X-20%, Y-50%</div>

b) wartość – „auto”
Szerokość i wysokość zostanie automatycznie dopasowana do obszaru elementu.
CSS:
.tlo1 {
       background-image: url(tloa.jpg);
       background-size: auto;
       -moz-background-size: auto;
       -o-background-size: auto;
       -webkit-background-size: auto;
       -khtml-background-size: auto;
}

HTML:
<div class="tlo1">auto</div>

c) wartość – „cover”
Wartość zachowuje proporcje najkrótszego boku i pokrywa cały obszar elementu.
CSS:
.tlo2 {
       background-image: url(tloa.jpg);
       background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       -webkit-background-size: cover;
       -khtml-background-size: cover;
}

HTML:
<div class="tlo2">cover</div>


d) wartość – „contain”
„Contain” zachowuje proporcje najdłuższego boku i pokrywa cały obszar elementu.
CSS:
.tlo3 {
       background-image: url(tloa.jpg);
       background-size: contain;
       -moz-background-size: contain;
       -o-background-size: contain;
       -webkit-background-size: contain;
       -khtml-background-size: contain;
}

HTML:
<div class="tlo3">contain</div>
Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.



Właściwość „background-clip” - tło przyległe do obramowania
Właściwość „background-clip” pozwala kontrolować zachowanie tła względem obramowania elementu.

a) Wartość „padding-box” ustawi tło pod obramowaniem.
CSS:
.clip {
       background-image: url(tlo1.jpg);
       border: dotted 5px #000;
       background-clip: padding-box;
       -moz-background-clip: padding;
       -webkit-background-clip: padding;
}

HTML:
<div class="clip">padding-box</div>


b) Wartość „border-box” nie ustawi tła pod obramowaniem.
CSS:
.clip1 {
        background-image: url(tlo1.jpg);
        border: dotted 5px #000;
        background-clip: border-box;
        -moz-background-clip: border;
        -webkit-background-clip: border; 
}

HTML:
<div class="clip1">border-box</div>
Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.

Reasumując przedstawione powyżej przykłady, pragnę zwrócić uwagę na obsługę CSS3 w przeglądarkach internetowych. Od ostatniego czasu zauważyłem dość istotny postęp w rozwoju przeglądarek: Firefox, Safari, Chrome i Opera. Na końcu stawki wciąż pozostanie Internet Explorer, jednak jak donoszą twórcy IE, najnowsza wersja przeglądarki będzie obsługiwać CSS3.

A na zakończenie powyższe przykłady: css3.zip.
Nie ponoszę odpowiedzialności za błędy i następstwa powstałe wskutek działania programu i kodu. Pobierasz i użytkujesz na własną odpowiedzialność.

7 września 2010

Rzut oka na CSS3.

Czy pamiętacie czasy, kiedy witryny internetowe tworzyło się tylko i wyłącznie przy pomocy HTML-a lub innych „wizjonerskich” narzędzi? Z uśmiechem na twarzy śmiało można powiedzieć, że ewolucja webdevelopingu postępuje w dość szybkim tempie, a co za tym idzie - zmieniają się rozwiązania i technologie. Cóż, tak to już bywa…

Dziś chciałbym wam przedstawić ciekawe rozwiązania kaskadowych arkuszy stylu poziomu trzeciego, w skrócie - CSS3. Na początku warto wspomnieć, że nad CSS-em trzecim wciąż trwają prace i nie został w pełni ukończony.
CSS3 to przede wszystkim wygoda, ale również problem z obsługą stylów w przeglądarkach internetowych. Najnowsze popularne przeglądarki, takie jak: Firefox, Chrome, Safari czy Opera nie powinny mieć trudności z obsługą CSS3. Jedynym mankamentem dla deweloperów pozostaje od dłuższego czasu Internet Explorer. Jak dotąd, żadna z wersji IE nie wspiera w zadowalający sposób CSS3. Sytuacja ma ulec zmianie wraz z pojawieniem się najnowszej, dziewiątej wersji IE. Na razie sporo „gimnastyki” dostarcza deweloperom stosowanie alternatywnych rozwiązań. Zatem zacznijmy:

Na początek zróbmy pojemnik, którym będziemy się posługiwać w dzisiejszym poście.
CSS:
div {
     background-color: #e55;
     color: #fff;
     height: 57px;
     width: 300px;
     text-align: center;
     border: 3px solid #fff;
     font-family: tahoma;

     padding: 5px;
}



Przezroczystość – opacity:
Aby uzyskać przezroczystość naszego pojemnika, zdefiniuję trzy klasy, w których wykorzystam właściwość opacity z różnymi wartościami. Opacity przyjmuje wartości z zakresu od 0 do 1. Wartość 0 – pełna przezroczystość, 1 – brak przezroczystości np. opacity:.60 – element jest nieprzezroczysty w 60%.
CSS:
.p10 {opacity: .1;}
.p50 {opacity: .50;}
.p70 {opacity: .70;}


Następnie użyję powyższych klas w pojemnikach.
HTML:
<div class="p10">Ten element jest nieprzezroczysty w 10%</div>
<div class="p50">Ten element jest nieprzezroczysty w 50%</div>
<div class="p70">Ten element jest nieprzezroczysty w 70%</div>


Otrzymałem następujący efekt:
Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.


Zachowanie tekstu, gdy szerokość znacznika jest krótsza od wyrazu – word-wrap:
Wyobraźmy sobie sytuację, w której mamy pojemnik o określonej szerokości. Do tego pojemnika chcemy umieścić np. adres internetowy, jednak jak się później okazuje, tekst nie mieści się w pojemniku. Z pomocą przychodzi word-wrap. Jak to działa? Domyślnie właściwość word-wrap przyjmuje wartość normal. Poniżej efekt naszego pojemnika:
A teraz dodam do pojemnika klasę zawierającą właściwość word-wrap z parametrem break-word:
CSS:
.zawin {word-wrap: break-word;}

HTML:
<div class="zawin">Bardzo_długie_słowo,_które_teraz_mieści_się_w_moim_pojemniku.</div>

I uzyskamy następujący efekt:
Działa we wszystkich przeglądarkach.


Transformacje dwuwymiarowe – transform
Transform, czyli transformacje. W CSS3 to bardzo dobre narzędzie do niestandardowej zmiany stanu elementu. Dzisiaj opiszę następujące funkcje transformacji:
a) rotate (rotacja),
b) scale (skalowanie),
c) skew (pochylenie),
d) translate (przesunięcie).

Ad a) Rotacja – rotate
Korzystając z wcześniej już zdefiniowanego pojemnika dodam do niego klasę zawierającą styl rotacji. Jak łatwo zauważyć wartość funkcji rotate jest podawana w stopniach.
CSS:
.obroc {
       -moz-transform: rotate(90deg);
       -webkit-transform: rotate(90deg)
       -o-transform: rotate(90deg);
       transform: rotate(90deg);

}

HTML:
<div class="obroc">Obrócę pojemnik o 90 stopni!</div>

Uzyskaliśmy następujący efekt:



Ad b) Skalowanie – scale
Ok, co powiecie, aby nasz pojemnik dodatkowo powiększyć przy użyciu funkcji scale? Funkcja scale może przyjmować następujące wartości:
- scale(wartość) – funkcja proporcjonalnie przeskaluje element,
- scale(wartoscX,wartoscY) – funkcja przeskaluje element według podanych proporcji osi X i Y.
HTML:
<div class="skaluj">Przeskaluję pojemnik!</div>

CSS:
.skaluj {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);

}

Powiększyliśmy pojemnik o 20% w osi X i Y.
lub
CSS:
.skaluj {
        -moz-transform: scale(1.2,1.3);
        -webkit-transform: scale(1.2,1.3);
        -o-transform: scale(1.2,1.3);
        transform: scale(1.2,1.3);

}

Powiększyliśmy pojemnik o 20% wzdłuż osi X i o 30% wzdłuż osi Y.
Jeżeli chcemy pomniejszyć element stosujemy wartości z zakresu (0 – 0.9) np. wartość 0.5 pomniejszy element o połowę.


Ad c) Pochylenie – skew
Teraz pochylmy nasz pojemnik przy pomocy funkcji skew. Funkcja skew, podobnie jak scale może przyjmować następujące wartości:
- skew(wartość) – kąt pochylenia w stopniach osi X,
- skew(wartoscX,wartoscY) – kąt pochylenia w stopniach osi X i Y.
HTML:
<div class="pochyl">Pochylę pojemnik!</div>

CSS:
.pochyl {
        -moz-transform: skew(15deg);
        -webkit-transform: skew(15deg);
        -o-transform: skew(15deg);
        transform: skew(15deg);

}

Pojemnik został pochylony o 15 stopni wzdłuż osi X.
lub
CSS
.pochyl {
        -moz-transform: skew(15deg, 20deg);
        -webkit-transform: skew(15deg, 20deg);
        -o-transform: skew(15deg, 20deg);
        transform: skew(15deg, 20deg);

}

Pojemnik został pochylony o 15 stopni wzdłuż osi X i 20 stopni wzdłuż osi Y.



Ad d) Przesunięcie – translate:
A na koniec zobaczmy jak działa przesunięcie przy pomocy funkcji translate.
Translate podobnie jak inne funkcje, może przyjmować następujące wartości:
- translate(wartość) – przesunięcie wzdłuż osi X o zadaną wartość,
- translate(wartoscX,wartoscY) – przesunięcie wzdłuż osi X i Y o zadane wartości.
HTML:
<div class="przesun">Przesunę pojemnik!</div>

CSS:
.przesun {
         -moz-transform: translate(15px);
         -webkit-transform: translate(15px);
         -o-transform: translate(15px);
         transform: translate(15px);

}

Pojemnik został przesunięty o 15px w prawo wzdłuż osi X.
lub
CSS:
.przesun {
         -moz-transform: translate(15px, 20px);
         -webkit-transform: translate(15px, 20px);
         -o-transform: translate(15px, 20px);
         transform: translate(15px, 20px);

}

Pojemnik został przesunięty o 15px w prawo wzdłuż osi X i 20px w dół wzdłuż osi Y.
Stosując wartości ujemne, przesuniemy element w lewo lub w górę.

Przedstawione powyżej zastosowania działają w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.


Zaokrąglone krawędzie - border-radius:
Bardzo ciekawym rozwiązaniem zastosowanym w CSS3 jest zaokrąglanie krawędzi. W dość prosty sposób jesteśmy w stanie zaokrąglić dowolną krawędź elementu w przykładowy sposób:
HTML:
<div class="okrag">Zaokrąglone krawędzie w CSS3</div>

A teraz dopiszemy fragment CSS odpowiedzialny za zaokrąglenie wszystkich rogów pojemnika.
CSS:
.okrag {
       -moz-border-radius: 45px;
       -webkit-border-radius: 45px;
       border-radius: 45px;

}

Tak oto za pomocą border-radius otrzymaliśmy poniższy efekt:

W kolejnym kroku przedstawię, jak zaokrąglić wybraną krawędź / krawędzie pojemnika.
CSS:
.okrag {
       -moz-border-radius-topleft: 55px;  
       -webkit-border-top-left-radius: 55px;   
       border-top-left-radius: 55px;

}

Otrzymamy następujący efekt:
Jak widać z powyższego kodu CSS, właściwość border-top-left-radius zaokrągliła nam lewą górną krawędź pojemnika, w podobny sposób jesteśmy wstanie zaokrąglić dowolną krawędź elementu.

Przedstawione powyżej zastosowania działają w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.


Cienie – text-shadow i shadow
Właściwość text-shadow pozwala na dodanie cienia dla dowolnego tekstu.
HTML:
<p class="cien">Czas na cień!</p>

CSS:
p.cien {text-shadow: #ABC 20px -12px 2px;}


Pierwsza wartość określa kolor cienia, druga przesunięcie w lewo (wartości dodatnie) lub prawo (wartości ujemne). Trzecia wartość określa przesunięcie w dół (wartości dodatnie) lub w górę (wartości ujemne). Ostatnia wartość to promień rozmycia cienia tekstu.

W podobny sposób działa właściwość shadow, którą można zastosować np. do cieni pojemników.
HTML:
<div class="cienie">Czas na cień!</div>

CSS: .cienie {
        -moz-box-shadow: #011 12px 11px 5px;
        -webkit-box-shadow: #011 12px 11px 5px;
        box-shadow: #011 12px 11px 5px;

}
Przedstawione powyżej zastosowania działają w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.


Wypełnienie gradientem - linear-gradient.
Jeszcze niedawno, aby wykonać prosty przycisk na stronę internetową, byliśmy zmuszeni korzystać z gotowych obrazków lub nagimnastykować się z pojemnikami. Dziś chciałbym przedstawić prosty sposób realizacji tła gradientowego w CSS3. Przedstawiony poniżej przykład działa tylko i wyłącznie w najnowszej wersji przeglądarki Firefox.

Tworzymy pojemnik, który będziemy chcieli wypełnić gradientem:
HTML:
<div class="gradient">Mój gradient!</div>
A teraz dopiszmy fragment, który realizuje tło gradientu liniowego.

CSS:
.gradient {background: -moz-linear-gradient(45deg, #F00, #0F0);}
Uzyskamy poniższy efekt:
Pierwsza wartość kodu CSS określa kierunek wypełnienia gradientu w stopniach. Druga i kolejne wartości określają kolory wypełnienia - kolorów może być wiele.

Dodatkowo możemy ustawić ilość zajmowanego w elemencie koloru:
CSS:
.gradient {background: -moz-linear-gradient(45deg, #F00 90%, #00F);}

Druga wartość ustawia kolor #F00 na 90% objętości elementu.



Podsumowując, pragnę zwrócić uwagę na możliwości, jakie daje najnowsza wersja CSS, ale również na problemy, z jakimi borykają się deweloperzy. Świat przeglądarek internetowych rozwija się w bardzo szybkim tempie. Miejmy więc nadzieję, że nie trzeba będzie długo czekać, aż większość przeglądarek spełni najnowszy standard CSS3.

A na zakończenie powyższe przykłady css.zip.
Nie ponoszę odpowiedzialności za błędy i następstwa powstałe wskutek działania programu i kodu. Pobierasz i użytkujesz na własną odpowiedzialność.

30 sierpnia 2010

Niebezpieczny Facebook

Z pewnością niejednokrotnie słyszeliście o zagrożeniach płynących z portali społecznościowych. Osobiście podchodziłem do tematu z lekką dozą dystansu, jednak w ostatnim tygodniu sam byłem świadkiem procederu rozpowszechniania złośliwego oprogramowania przez portal Facebook. Dziś nie będę poruszał podstawowych kwestii bezpieczeństwa i zachowań użytkownika, lecz skupię się na aplikacjach portalu. Na początku warto zaznaczyć, że każdy użytkownik może sam stworzyć dowolną aplikację i rozpowszechnić ją wśród swoich znajomych oraz w całym serwisie. Właśnie w taki sposób rozpoczyna się „łańcuszek” złośliwego oprogramowania. Pomijając proces tworzenia aplikacji, skupmy się na zasadzie działania.

Jak to działa?
Jest to bardzo proste… Deszczowy niedzielny wieczór – aby go sobie umilić, użytkownik Kowalski przeszukuje dostępne aplikacje. Znajduje kilka aplikacji, z których zamierza skorzystać. W tych kilku aplikacjach znajduje się właśnie ta jedna, „zarażona” złośliwym kodem. Użytkownik, aby skorzystać z aplikacji, zezwala na jej dostęp do swojego profilu, a następnie aplikacja automatycznie rozpoczyna działanie złośliwego kodu. Warto zaznaczyć, że zdarzają się aplikacje, które nie pytają o zezwolenie, tylko link przekierowuje nas na inną stroną z pominięciem zabezpieczeń Facebooka.
Przykład.
Pewien z moich znajomych uruchomił złośliwą aplikację w portalu Facebook. Po chwili aplikacja rozesłała do wszystkich jego znajomych wiadomość zachęcającą do kliknięcia w link do aplikacji.

koplin.pl


Właśnie w taki sposób aplikacja zaraża kolejnych użytkowników. W przypadku, kiedy skusimy się kliknąć w zarażony link, sami roześlemy spam do naszych znajomych.

Poniżej widoczny jest proceder, w którym aplikacja zaraziła następnego znajomego, a moja skrzynka wiadomości zapełnia się spamem.

koplin.pl


Co zwróciło moją uwagę?
Wiadomość, jaką dostałem pochodziła od mojego przyjaciela, z którym na co dzień rozmawiam w języku ojczystym. Jak widać treść wiadomości jest w języku angielskim, co zakwalifikowało wiadomość jako podejrzaną.

Jak uchronić się przed podobnymi przypadkami?
- Używaj tylko zaufanych aplikacji!
- Nie uruchamiaj każdej znalezionej aplikacji!
- Zwracaj uwagę na linki w wiadomościach!
- Nie klikaj w każdy napotkany link portalu!

Mam nadzieję, że w dość prosty sposób opisałem, jak łatwo możemy stać się ofiarą złośliwego oprogramowania. Warto zwrócić uwagę, na co klikamy i od kogo pochodzi dany link. Warto pamiętać, że najlepszą ochroną przed złośliwym oprogramowaniem rozpowszechnianym wśród użytkowników portali społczenościowych, jest zasada ograniczonego zaufania.

7 lipca 2010

Drukowanie komponentów jTable w Javie

Z pewnością większość deweloperów zastanawia się jak, w prosty sposób przygotować i wydrukować komponent JTable dostępny w bibliotece Swing. Z pomocą przychodzi metoda print() dostępna w javax.swing.JTable. Metoda print() przygotowuje tabele do druku, pobiera dane i wysyła je do drukarki. Jeżeli proces drukowania przebiegnie poprawnie metoda zwróci wartość typu boolean true lub false, jeśli użytkownik przerwie drukowanie.

Przykład komponentu jTable:


Metoda print() w najprostszej postaci występuje w formie bezparametrowej oraz rozbudowanej, kiedy przyjmuje kilka parametrów. Dziś przedstawię prosty i użyteczny sposób wykorzystania metody.

a) jTable1.print();
Metoda drukuje tabelę i wyświetla okno dialogowe drukowania.
Przy implementacji należy pamiętać o wyjątkach: SecurityException, PrinterException.

try {
    Table1.print();
    }
catch (Exception e) {
     System.err.println(e);
    }


b) jTable1.print(PrintMode printMode);
Metoda drukuje tabelę i wyświetla okno dialogowe drukowania.

Parametr printMode określa tryb drukowania i przyjmuje dwie wartości:
- PrintMode.FIT_WIDTH – automatyczne skalowanie tabeli w celu dopasowania szerokości,
- PrintMode.NORMAL – drukowanie aktualnego rozmiaru, w razie potrzeby następuje rozkład tabeli na wiele stron, zarówno kolumn jak i wierszy.
Przy implementacji należy pamiętać o wyjątkach: SecurityException, PrinterException.

try {
    jTable1.print(PrintMode.NORMAL);
    }
catch (Exception e) {
     System.err.println(e);
    }


c) jTable1.print(PrintMode printMode, MessageFormat headerFormat, MessageFormat footerFormat);
Metoda drukuje tabelę i wyświetla okno dialogowe drukowania, jak w punkcie b), dodatkowo określa nagłówek i stopkę dokumentu.

Parametr headerFormat określa nagłówek dokumentu, może przyjąć następujące wartości:
null – drukuj bez nagłówka,
new MessageFormat(„Mój nagłówek”) – wyświetli nagłówek dokumentu.

Parametr footerFormat określa stopkę dokumentu, może przyjąć następujące wartości:
null – drukuj bez stopki,
new MessageFormat(„Moja stopka”) – wyświetli stopkę dokumentu.
Aby w łatwy sposób ponumerować strony w dokumentach, można zastosować następujące rozwiązanie:
new MessageFormat(„Strona nr: {0}”)
Przy implementacji należy pamiętać o wyjątkach: SecurityException, PrinterException.

try {
    jTable1.print(PrintMode.FIT_WIDTH, new MessageFormat("Języki programowania"), new MessageFormat("Stopka str. nr: {0}"));
    }
catch (Exception e) {
     System.err.println(e);
    }

Przykład wydruku tabeli za pomocą powyższego kodu:



d) jTable1.print(PrintMode printMode, MessageFormat headerFormat, MessageFormat footerFormat, boolean showPrintDialog, PrintRequestAttributeSet attr, boolean interactive);
Metoda drukuje tabelę w ściśle określony sposób, jak w punkcie c), rozszerzając o dodatkowe atrybuty drukowania.

Parametr showPrintDialog odpowiada za wyświetlenie okna dialogowego drukowania:
true – wyświetl okno,
false – nie wyświetlaj okna.

Parametr attr określa dodatkowe atrybuty drukowania na podstawie klasy HashPrintRequestAttributeSet np. orientacje wydruku, rozmiar papieru itd., wartość null oznacza, że metoda nie przyjmuje żadnych dodatkowych atrybutów.

Parametr interactive ustawia, czy drukowanie ma się odbyć w trybie interaktywnym, wartość true – tryb interaktywny, false – bez trybu interaktywnego.

Przy implementacji należy pamiętać o wyjątkach: SecurityException, PrinterException, HeadlessException.

try{
    javax.print.attribute.PrintRequestAttributeSet attr=new javax.print.attribute.HashPrintRequestAttributeSet();
    attr.add(javax.print.attribute.standard.OrientationRequested.PORTRAIT);
    jTable1.print(PrintMode.NORMAL, new MessageFormat("Tytuł"), new MessageFormat("stopka"), false, attr, true);
    }
catch (Exception e) {
     System.err.println(e);
    }

Przykład okna dialogowego drukowania:



A na zakończenie przykład programu wykorzystujący wszystkie metody zawarte w tym artykule. Program został zrealizowany w środowisku programistycznym NetBeans IDE 6.9.
print.java

Nie ponoszę odpowiedzialności za błędy i następstwa powstałe wskutek działania programu i kodu. Pobierasz i użytkujesz na własną odpowiedzialność.

23 czerwca 2010

UIManger w Javie, czyli zmiana wyglądu aplikacji.

Witajcie, po dłuższej przerwie :). Dziś, chciałbym wam przedstawić bardzo przydatną wskazówkę w Javie, a dokładniej UIManager. Pewno niejednokrotnie wielu z was zastanawiało się jak zmienić klasyczny wygląd okien aplikacji napisanych przy pomocy architektury biblioteki Swing w Javie. Pokrótce przedstawię jak w prosty sposób zmienić wygląd aplikacji okienkowych. Na sam koniec przedstawię w jaki sposób ustawić odpowiedzi komunikatów JOptionPane w języku polskim.

Do zamiany wyglądu aplikacji służą trzy statyczne metody dostępne w klasie UIManager.

UIManager.setLookAndFeel(String);
Dzięki metodzie setLookAndFeel(String); jesteśmy w stanie przekazać kwalifikowaną nazwę podklasy LookAndFeel, która z kolei odpowiada za wygląd i zachowanie komponentów. Warto zaznaczyć, że klasa ta powinna istnieć i być dostępna, w przeciwnym wypadku metoda zwróci wyjątek: java.lang.ClassNotFoundException. Metodę setLookAndFeel(String) powinno umieścić się w pierwszych liniach kodu konstruktora klasy, w której zamierzamy zmienić wygląd.

Przykład:
public class UIM extends javax.swing.JFrame {

public UIM() {
try {
    UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");
    }
catch (Exception e) {
      System.err.println("Bład podczas ładowania wyglądu okna.");
     }
initComponents();
}

public static void main(String args[]) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                new UIM().setVisible(true);
            }
        });
    }
}

Jakie argumenty może przyjmować funkcja setLookAndFeel(String)?
„com.sun.java.swing.plaf.windows.WindowsLookAndFeel” – styl Windows (dostępny tylko w systemach Windows).
„com.sun.java.swing.plaf.motif.MotifLookAndFeel” – styl CDE/Motif (dostępny na wszystkich platformach).
„com.sun.java.swing.plaf.gtk.GTKLookAndFeel” – styl GTK+ (dostępny w systemach Solaris, Linux z GTK+).
„javax.swing.plaf.mac.MacLookAndFeel” – styl MAC (dostępny tylko na systemach MAC OS).
„javax.swing.plaf.metal.MetalLookAndFeel” – styl Metal (dostępny na wszystkich platformach – standardowy wygląd Java Swing).
„com.sun.java.plat.windows.WindowsClassicLookAndFeel” – styl klasyczny Windows (dostępny w niektórych systemach Windows).

Poniżej przedstawiam wygląd niektórych styli:

Wygląd Metal:


Wygląd Windows:


Wygląd CDE/Motif:


Następną metodą klasy UIManager, którą warto poznać jest:
getSystemLookAndFeelClassName();. Metoda zwraca natywny wygląd systemu, na którym została uruchomiona aplikacja.
Inaczej mówiąc, jeżeli uruchomimy aplikację na systemie MAC OS i wywołamy metodę: UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName()); uzyskamy wygląd systemu zawarty w podklasie: „javax.swing.plaf.mac.MacLookAndFeel”. Natomiast, gdy uruchomimy aplikację pod system Windows uzyskamy styl „com.sun.java.swing.plaf.windows.WindowsLookAndFeel”.

Dodatkowo warto zwrócić uwagę na metodę: getCrossPlatformLookAndFeelClassName(), która przywraca standardowy wygląd Javy.
np.:
UIManager.setLookAndFeel(UIManager. getCrossPlatformLookAndFeelClassName());


Kolejnym problemem, z jakim spotykają się początkujący programiści Javy, jest ustawienie polskich komunikatów w JOptionPane. Warto zadbać, aby w naszej aplikacji użytkownik nie był zmuszony korzystać z przycisków „Cancel”, „Yes”, „No” lub „OK”. Z pewnością lepszą alternatywą będzie stworzenie własnych odpowiedzi np. „Anuluj”, „Zatwierdź”, „Tak”, „Nie”.
Zmiana treści komunikatów odbywa się przez metodę klasy UIManager.put(Object key, Object value); Najprostszym sposobem zmiany treści komunikatów będzie umieszczenie w metodzie main() następującego kodu:

UIManager.put("OptionPane.yesButtonText", "Tak");
UIManager.put("OptionPane.noButtonText", "Nie");
UIManager.put("OptionPane.cancelButtonText", "Anuluj");
UIManager.put("OptionPane.okButtonText", "OK");

Jako pierwszy parametr, który chcemy zmienić, a następnie wartość tekstową dla danego komunikatu.
OptionPane.yesButtonText – przycisk zatwierdzający wykonanie operacji,
OptionPane.noButtonText – przycisk odmawiający wykonania operacji,
OptionPane.cancelButtonText – przycisk anulowania operacji,
OptionPane.okButtonText – przycisk potwierdzenia wykonania operacji.

Aby lepiej zrozumieć przedstawione zagadnienia, przedstawiam prostą aplikację prezentującą zmianę wyglądu aplikacji napisaną w środowisku NetBenas IDE 6.9 przy użyciu wirtualnej maszyny Javy JDK 6 U 20:
UIManager.java

Nie ponoszę odpowiedzialności za błędy i następstwa powstałe wskutek działania programu i kodu. Pobierasz i użytkujesz na własną odpowiedzialność.

29 maja 2010

Paralell nie dla AMD?

W ostatnim poście pisałem o zaletach programowania równoległego przy użyciu pętli Paralell.For w .NET 4.0. Zafascynowany tematem obliczeń równoległych przeprowadziłem kilka testów z użyciem procesorów rodziny Intel. Wyniki otrzymane z pomiarów potwierdziły przekonanie, że nowa pętla to naprawdę dobre, szybkie i skuteczne narzędzie. Oczywiście, im wyższej klasy procesor, tym szybkość i różnice pomiędzy standardową pętlą for, a Paralell.For rosły wraz z modelem procesora.

Kilka dni temu wraz z moim bliskim znajomym (którego imię i nazwisko zostanie dla Was tajemnicą ;) ) rozpoczęliśmy testy na czterordzeniowym procesorze AMD Athlon X4 620 3.07 GHz. Wyniki, które uzyskaliśmy, wprawiły nas w osłupienie. Pomijając szybkość obliczeń, które trwały naprawdę chwilę, udowodniliśmy, że Paralell na tym procesorze przegrywa… i to niestety dość znacznie. Zdecydowaliśmy się wykonać serię pomiarów - po 10 dla każdego współczynnika, a następnie uśrednić otrzymane wyniki. Poniżej prezentujemy wykres otrzymanych wyników na procesorze AMD Athlon X4.

Paralell w AMD
Testowano: AMD Athlon X4 620 2.60@3.07GHz, RAM:2.00GB, 32 bitowy Windows 7 Ultimate.

Powyższe dość zaskakujące wyniki wykazują, że zwykła pętla for jest dwukrotnie szybsza od pętli Paralell. Nasuwa się więc pytanie, czy firma z Redmond zoptymalizowała nowe rozwiązania tylko pod procesory Intel? Oczywiście, czytając doniesienia prasowe przed wejściem na rynek nowej wersji .NET czy też Windows 7, można było zauważyć dość zaawansowaną współpracę pomiędzy korporacjami. Zastanawiający jest fakt, czy opisany problem dotyczy tylko jednej, kilku serii procesorów, czy może wszystkich procesorów AMD? Dziś, niestety, nie potrafię odpowiedzieć na te pytania. Mam nadzieję, że wkrótce opublikuję odpowiedź.

Dla wszystkich osób zainteresowanych współpracą i tematem udostępniam w moim profilu e-mail kontaktowy.

Na koniec chciałbym podziękować wszystkim moim przyjaciołom, którzy poświęcili swój cenny czas na przeprowadzenie analizy i testów.

22 maja 2010

Obliczenia równoległe w .NET 4.0 - Parallel.For

W ostatnim czasie obliczenia równoległe stały się dość ważnym i popularnym pojęciem w programowaniu. Wielordzeniowe procesory z dnia na dzień stają się standardowym wyposażeniem każdego komputera. Coraz to większe obciążenia obliczeniowe procesorów powodują poszukiwanie nowych rozwiązań z zakresu tworzenia aplikacji wykorzystujących więcej niż jeden rdzeń procesora.

W dość prosty sposób chciałbym wprowadzić pojęcie TPL (Task Parallel Library), ilustrując działanie nowe pętli programowej Parallel.For dostępnej w .NET 4.0.

Na początku zapoznajmy się z budową pętli Parallel.For.
Ogólny schemat pętli wygląda następująco:

Parallel.For(a,b,delegate(int i)
{
  //ciało pętli
});

Warto zauważyć, że pętla Parallel.For to tak naprawdę statyczna metoda z trzema argumentami. Pierwsze dwa argumenty przekazują początek zakresu pętli 'a' oraz koniec 'b', natomiast trzeci z nich określa delegata.

Pętla Parallel.For znajduje się w przestrzeni nazw "System.Threading.Tasks;"

usign System.Threading.Tasks;

Przeanalizujmy przykład:
Zakładamy, że nasza dość prosta aplikacja ma wykonać serię dość skomplikowanych obliczeń matematycznych. Celem aplikacji będzie porównanie wydajności standardowej pętli for, z pętlą Parallel.For.

Pomijając etap tworzenia interfejsu użytkownika skupmy się na obliczeniach. Do wykonania mamy serię obliczeń wyrażoną metodą:

private void Oblicz(int i, int wsp)
{
  for (int j = 0; j < 10000+wsp; j++)
      {
        wynik+=Math.Sqrt(wsp*i+Math.Sqrt((j+1))*Math.Sqrt(i+1))*j+i;
      }
}


Pomijając sens powyższego wzoru załóżmy, że metoda Oblicz(int i, int wsp) przyjmuje dwa argumenty:
- wsp: współczynnik zmiany złożoności obliczeń (większy od 0),
- i: kolejne iteracje porównywanej pętli.

Dodajmy na formę naszej aplikacji dwa przyciski typu Button oraz jedno pole typu textBox.

Następnie dodajmy obsługę zdarzenia przycisków.
Na początku skupmy się na pierwszej standardowej pętli for (przycisk 1):

private void button1_Click(object sender, EventArgs e)
{
  try
      {
       int wsp = Int32.Parse(textBox1.Text);
       DateTime poczatek = DateTime.Now;
       for (int i = 0; i < 500 * wsp; i++)
           {
            Oblicz(i, wsp);
           }
       DateTime koniec = DateTime.Now;
       TimeSpan czas = koniec - poczatek;
       MessageBox.Show("Czas wykonania pętli for: " + czas.Seconds + " s : "+czas.Milliseconds + " ms");
      }
  catch
      {
       MessageBox.Show("Podano błędny zakres. Zakres > 0. Preferowana wartość 4");
      }
}


Jak widać zadaniem metody jest wywołanie kolejnej metody Oblicz(i, wsp) o określonej ilości iteracji. Zadanie zostało zrealizowane zwykłą programową pętlą for. Dodatkowo po wykonaniu obliczeń wyświetlimy komunikat o czasie, jaki potrzebował procesor na wykonanie obliczeń.

Następnie wykonamy takie same obliczenia wykorzystując pętlę Parallel.For, jednocześnie zwracając czas jaki potrzebował procesor na wykonanie obliczeń. Poniżej kod obsługi drugiego przycisku:

private void button2_Click(object sender, EventArgs e)
{
  try
     {
       int wsp = Int32.Parse(textBox1.Text);
       DateTime poczatek = DateTime.Now;
       Parallel.For(0,500*wsp, delegate(int i)
       {
         Oblicz(i, wsp);
       });
       DateTime koniec = DateTime.Now;
       TimeSpan czas = koniec - poczatek;
       MessageBox.Show("Czas wykonania pętli for: " + czas.Seconds + " s : " + czas.Milliseconds + " ms");;
     }
  catch
        {
          MessageBox.Show("Podano błędny zakres. Zakres > 0. Preferowana wartość 4");
        }
}


Pole typu textBox służy do wprowadzania wartości współczynnika 'wsp'. Zakładamy, że im większa wartość współczynnika, tym program wykona więcej obliczeń. Oczywiście wartość ta musi być większa od zera!
Preferuję testowanie programu na współczynniku z zakresu (0,9>.


Porównanie dwóch pętli względem czasu i przyjętego współczynnika (wsp).


Testowano: Intel Core 2 Duo T5800 2.00GHz, RAM:2.00 GB, 32 bitowy Windows 7 Professional.

Z wykresu możemy zauważyć ponad dwukrotny zysk używając pętli Parallel.For, który uzyskałem na dwurdzeniowym procesorze.

Mam nadzieję, że ten prosty przykład przestawił jak duży potencjał zawiera programowanie równoległe i TPL. Zachęcam do szerszego zapoznania się z tematem pętli Parallel.For

Pliki źródłowe opisanej aplikacji w środowisku Visual Studio C# 2010 Express, .NET 4.0.

Nie ponoszę odpowiedzialności za błędy i następstwa powstałe wskutek działania programu i kodu. Pobierasz i użytkujesz na własną odpowiedzialność.