środa, 13 czerwca 2007

Rounded corners

Czyli zaokrąglone rogi - fajnie to wygląda, zleceniodawcom się podoba, graficy starają się wcisnąć to wszędzie ;) Niby wszystko ok, a jednak - jest to prawdziwa kara dla web developera.
Pamiętam moje wojny z grafikami jeszcze w firmie w Polsce - ciągle ich błagałem o zaprzestanie wciskania zaokrąglonych rogów i cieni wszędzie gdzie to tylko możliwe. Powód był prosty - wtedy składałem strony na tabelkach ;) i dla jednego boxa z zaokrąglonymi rogami potrzebowałem conajmniej tabelki 3 x 3 pola - brrr....
Człowiek uczy się na błędach, dodatkowo grafik w firmie w której obecnie pracuje także lubuje się w zaokrąglonych rogach - przyszła więc pora na znalezienie innej metody.

Pierwsze z czym musiałem się zmierzyć to coś na styl paneli, ułożone jeden pod drugim, przeplatane kolory między rzędami, dotego podświetlane po najechaniu kursorem.

 


Kiedyś bez wahania użyłbym tabeli i po kłopocie - kodu by było od groma, ale kto się tym przejmował ;)
Jednak tabelki poszły w odstawkę, a zrobić to trzeba było - dotego chciałem użyć jak najmniej kodu + możliwie mało obrazków.
Wybór padł na dwa obrazki - lewy i prawy w kolorze tła z przeżroczystą częścią odsłaniającą zaokrąglenia.
Więc zrobiłem diva, nadałem mu wymiary i ustawiłem kolor tła - otrzymujemy ładny prostokąt o podanych wymiarach i kolorze, tyle że bez zaokrąglonych rogów.
Ok czas na zaokrąglenia - mamy dwa pliki w tylko jeden element, więc wewnątrz tworzymy drugiego diva lub inny element blokowy. Nadrzędnemu divowi dajemi tło
{background: #C3D4E8 url(lewy.gif) no-repeat left;}
, a wewnętrznemu
{background: url(prawy.gif) no-repeat right;}
i po sprawie, kolor paneli możemy zmieniać przez cssa, z podświetlaniem też nie ma problemu, uważam to za rozwiązanie łatwe i ergonomiczne. Jedyny problem może się pojawić jak ktoś będzie chciał zmienić kolor tła całości - wtedy niestety musimy edytować te dwa pliki.

Druga rzecz - załóżmy, że stronę mamy podzieloną na bloki (oczywiście wszystkie z zaokrąglonymi rogami).
Pierwsze co się nasuwa to użycie obrazków dla każdego rogu, nie powinno być z tym problemu jeśli bloki zawsze były by takie same i zawierały conajmniej 3 elementy blokowe wewnątrz. Rozwiązalibyśmy to podobnie jak na przykładzie powyżej - może troszkę więcej kombinowania, ale nie było by to problematyczne. Ale co jeśli te bloki nie są takie same - nawet nie wiemy jakie będą, bo przecież to dopiero jest projekt, który jak to projekt ulega pewnym modyfikacją ? Rozwiązaniem są nifty corners ;) rozwiązanie tak proste, a zarazem tak genialne, że aż żal go nie użyć - nie potrzebujemy to tego żadnego JavaScriptu, tylko dodajemy troszkę HTML + stylujemy to CSSem.
Zalety tego rozwiązania są ogromne - nie mamy żadnych obrazków, jeśli chcemy zmienić kolor jakiegoś boxu to zmieniamy to tylko w CSSie - działa z prawie każdą przeglądarką - niestety nie udało mi się zmusić IE 5.x do działania, ale jako, że ta przeglądarka to tylko margines, można ją pominąć, lub zastosować komentarze warunkowe i wyciąć poprostu dla tych przeglądarek nifty corners ;)

<_![if _!IE 5]>
nifty corners tutaj
<_![endif]>

należy usuńąć "_" podkreślenia przed !
Dzięki temu strona mimo, że nie posiada zaokrąglonych rogów nadal wyświetla się poprawnie i jest w pełni użyteczna nawet dla IE 5.x

wtorek, 12 czerwca 2007

Safari 3.0 public beta dla Windowsa

Dzisiaj pojawiła się nowa przeglądarka dla Windows.

Apple wypuściło właśnie publiczną betę przeglądarki Safari 3.0

Zapraszam do ściągnięcia i przetestowania. Może i narazie jest zabugowana, ale to wkońcu beta.
Co na początek mogę o niej powiedzieć? - Jest bardzo szybka, wygląd prosty (może wręcz toporny), ale ma to coś, pasek stanu jako tło adresu też bardzo przypadł mi do gustu. Ogólnie wywarła na mnie pozytywne wrażenie, no może poza jedną sprawą, a mianowicie sposów renderowania 'selectów'.
Jeśli w 'selecie' mamy za dużo tekstu, Safari zawija wiersz i dodaje kolejną linię do wyświetlanego 'selecta', wygląda to tak jak na screenie poniżej.
Prezentuje się to może ładnie, jednak przy sztywnych layoutach może to być problemem.



To tyle tak na szybko z pierwszego, ale napewno nie ostatniego kontaktu z Safari ;)
Od dzisiaj wszystko będzie testowane również na Safari.

czwartek, 7 czerwca 2007

Opera vs Firefox i IE

Pierwszy post i odrazu przeglądarki ? A czemu nie ;)

Wiem - troszkę nieładnie z mojej strony stawiać w jednym rzędzie ff i ie - ale chodzi tylko o to, że Ci dwaj to rywale Opery, która niewiedzieć czemu jest niedoceniona przez społeczność.

Nie będę tutaj przytaczał histori Opery - od tego jest google i wiki.

Chciałem się tutaj skupić na tym, dlaczego tak mało ludzi wybiera Operę do codziennego surfowania po internecie.

Zacznijmy od rzeczy którymi Opera się szczyci, a później postarm omówić się je szerzej:

  1. Bezpieczeństwo
  2. Szybkość
  3. Obsługa XHTML i CSS2
  4. Przyjazny interfejs
  5. Gesty myszy
  6. Speed dial
Ad. 1.
Opera nie ma żadnych dziur w bezpieczeństwie (a przynajmniej nikt o żadnej nie wie) - kiedy tylko pojawi się jakaś luka w bezpieczeństwie jest natychmiast łatana. Na chwilę obecną nie ma żadnej odkrytej dziury!

Ad. 2.
Opera jest niezaprzeczalnie najszybszą przeglądarką pod Windows - tutaj zgodni są nawet fani ff.

Ad. 3.
Opera na chwilę obecną jako jedyna przeglądarka pod Windows przechodzi poprawnie test ACID 2  niby nic, a jednak w pracy webdevolepera każdego dnia się marzy, żeby wkońcu wszystkie przeglądarki obsługiwały HTML i CSS w ten sam poprawny sposów. Niestety dla mnie mam nawyk podglądu stron w Operze i kiedy już poskładam stronę, walidującą się i wyglądającą OK przychodzi pora na resztę trójcy, czyli na FireFoxa i Internet Explorera. O ile w FF strona wygląda identycznie, albo prawie identycznie w 90% (strzelam) przypadków, to IE może człowieka doprowadzić do szału. Mówię tutaj oczywiście o wersjach starszych niż 7.0 bo ten jako tako sobie radzi (tzn. jest duzo lepiej, a nie że sobie radzi ;) ). Nie chcę tutaj odbierać niczego FireFoxowi, ale poprostu czasem zawodzi - i mówię tutaj o wersji aktualnej na daną chwilę czyli 2.0.0.4 - starsze wersje sprawiają jeszcze więcej problemów, o starszych wersjach IE nawet nie wspominam - za to powinien ktoś siedzieć.

AD. 4.
Przyjazny interfejs - to powinien być główny atut dla ZU (zwykłych użytkowników), ale nie jest i nie mam pojęcia dlaczego. FireFox zaraz po zainstalowaniu ma wygląd toporny jak stare IE, funkcjonalnością też znacząco nie odbiega, IE jakie jest każdy wie.
Opera odrazu po zainstalowaniu daje nam świetną i darmową przeglądarkę, program pocztowy, klienta sieci torrent i czytnik RSS. Wygląd możemy dowolnie konfigurować - zmieniać skórki, ilość i kolejność przycisków, położenie całych toolbarów, poprostu możemy zrobić co chcemy. Dodatkowo wyszukiwanie na stronie dostępne pod "." (kropką) koloruje nam znalezione ciągi znaków, a szukanie pod "," (przecinkiem) umożliwia wyszukiwanie tylko linków. Jeśli zaś chcemy poszukać czegoś w googlu to nie musimy iść na stronę googla, ani nawet do pola wyszukiwania googla w pole adresu wystarczy wpisać "g szukany text" (g spacja szukany text), jeśli szukana fraza jest conajmniej dwuliterowa to nawet nie musimy wpisaywać tego "g" - po spacji w słowach Opera odrazu wie, że to nie adres i przechodzi na stronę google.com. Menager pobieranie też jest bardzo przyjazny i umożliwia nawet wstrzymanie i wznowienie pobierania. Wszystkie ściągnięte pliki zapisują się w historii pobierania i zachowują się w niej jak pliki fizycznie na dysku, czyli mamy do dyspozycji dwuklik do otwarcia + menu pod prawym przyciskiem myszy.
Historia zamkniętych stron również jest przemyślanym narzędziem, bo ile razy zdażyło Ci się przez przypadek zamknąć kartę ? teraz to nie ma znaczenia ponieważ pod ikonką kosza masz listę zamkniętych kart w danej sesji, więc przywrócenie tej pomyłkowo zamkniętej to kwesia sekundki. Apropo sesji - Opera oczywiście obsługuje również sesje - domyślnie po otwarci przeglądarki ładuje ostatnio używaną, z wszystkimi kartami otwartymi, sesje oczywiście można zapisywać i otwierać wtedy kiedy potrzebujemy.
Kolejną ciekawą sprawą jest menager haseł. Jeśli tylko logujemy się na jakiejś stronie menager zapyta nas czy zapisać login i hasło, jeśli potwierdzimy następnym razem po wejściu na tą stronę wciskamy "ctrl + enter" i Opera uzupełnia za nas pola logowania, jeśli w menagerze mamy więcej opcji wyświetli się stosowne okienko w którym wybieramy stosownego użytkownika. Zakładki - tak nikt teraz nie wyobraża sobie życia bez nich - Opera ma już os bardzo dawna (o ile nie była pierwszą przeglądarką pod Windowsa). W Operze otwarcie nowej zakładki może nastapić na kilka sposobów, mianowicie: klikamy ikonkę "New Tab" albo klikamy dwa razy w puste miejsce na pasku kart, albo klikamy środkowym klawiszem myszy na pustym polu, albo klikamy prawym klawiszem na już istniejącej karcie i wybieramy "New tab". Karty również możemy otwierać "w tle", tzn. klikamy środkowym klawiszem myszy na linku i strona uruchamia się w tle, a my cały czas pozostajemy na stronie z której link prowadził.
Kolajeną ciechawą cechą jest menu pod prawym przycikiem myszki - i tak - jeśli np. wklejamy adres do paska adresu mamy tam odrazu opcję "Wklej i przejdź" - tak proste, a zarazem tak funkjonalne.

Ad. 5.
Gesty myszy - jest to ogromny atut tej przeglądarki i wydaje mi się, że fani FF albo nie wiedzą o tej funkcjonalności w Operze, albo nie chcą wiedzieć. Proste dwa kliknięcia myszą na stronie "lewy prawy" i przechodzimy w historii do przodu, "prawy lewy" i przechodzimy do tyłu, "prawy i ruch scrollem" i możemy przejść do dowolnej zakładki. Wiem, że jest jeszcze więcej gestów myszy związanych z ruchem myszką, ja niestety ich nie używam, więc nie będę ich opisywał. Funkcjonalność ta naprawdę przyspiesza pracę i kiedy pracuję na FireFoxie brakuje mi tego ogromnie.

Ad. 6.
Nowość w Operze to Speed Dial - teraz po otwarciu nowej karty wyświetla się na niej 9 paneli - w każym z nich możemy ustawić inną stronę, a w nim pokaże się jej miniaturka, tak więc po  kliknięciu w żądany panel przechodzimy do wcześniej ustawionej strony - niby mała rzecz a cieszy ;)


Mam nadzieję, że przedstawiłem dość jasno dlaczego uważam Operę za przeglądarkę najlepszą, czy ten artykuł ma na celu promowanie Opery ? - Oczywiście, że tak, należy promować rzeczy dobre i darmowe, a taka właśnie jest Opera. Napewno pominąłem jakieś cechy Opery, ale ciężko opisać wszystko. Napewno też znajdą się fani FF którzy zaczną wypominać mi różne rzeczy, że FF to też ma, i to, i to, a do tego jest plugin czy coś innego, jeszcze więcej zacznie mnie pouczać jak się odmienia słowo FireFox ;) - ale chcę odrazu zwrócić uwagę, że ja w tym artykule pokazuje co mi się w Operze podoba, a nie co mi się w FF nie podoba! FireFoxa używam na codzień dzięki wspaniałemu FireBugowi, ale używam go wsumie tylko do korzystania z FireBuga.
Wiem, że mój artykuł niczego nowego nie wnosi, ale jeśli dzięki niemu chociaż jedna osoba przekona się do Opery to wygrana jest moja ;)

Sponsorem artykułu była Opera ;)

Opera 9 - Always secure with Opera


Żartuję oczywiście - Opera mi nie płaci za reklamę - poprostu ją lubię.

1... 2... 3... START

Witam na moim blogu ;)

Z założeniem bloga zwlekałem już jakiś czas (chyba leń ze mnie) ale przyszła pora na mnie.
Na blogu jak to na blogu - będę pisał o rzeczach "normalnych" (dla mnie) - czyli chciałbym się zająć ogólnie pojętą webmasterką. Może wrzucę czasem coś nie związanego, ale nie będę Was zanudzał postami typu "Dzisiaj wstałem, zjadłem i poszedełm do pracy" ;)

Ważne - muszę znaleść czas zrobienie szablonu tego bloga :P