Ostatnio potrzebowałem na szybko stworzyć "ładne guziki", będące odnośnikami do wartych wyeksponowania części serwisu - jako że elementów takich było by kilka(naście) na łamach całego serwisu i jako iż nie przepadam za stosowaniem grafiki tam, gdzie nie trzeba wymyśliłem coś, co w moich odczuciach jest ładnym guzikiem z zastosowaniem samego HTML i CSS.
To jest ładny, gładki button!
Rozwiązanie takie daje mi możliwość zmienienia koloru guzika poprzez łatwą modyfikację 2(4) parametrów w CSS. Przejdźmy do kodu, na początek HTML:
<a href="#" class="fancyButton><span>To jest ładny guzik</span></a>
Jak widać całość jest semantycznie poprawna - ktoś mógłby się upierać, że SPAN nie jest potrzebny i można go wstawić dynamicznie za pomocą CSS, może i można, nie wszędzie działa - starałem by rozwiązanie ładnie się degradowało w starszych przeglądarkach (w IE6 prawie działa).
Koniec dygresji, CSS:
.fancyButton {
background: #0066CC;
border: 1px solid #0066CC;
display: inline-block;
height: 48px;
line-height: 48px;
font: 24px/48px "Trebuchet MS","Trebuchet",Arial,Helvetica,sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.fancyButton:hover {
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
}
.fancyButton span {
background: #53A9FF;
border: 1px solid #53A9FF;
color: white;
display: block;
text-align: center;
padding: 0px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 50%;
}
Na pierwszy rzut oka widać, że rozwiązanie nie będzie działać w starszych przeglądarkach - do zaokrąglenia używam border-radius, do przeźroczystości opacity - przeglądarki, które nie obsługują tych rozwiązań wyświetlą po prostu dwu-kolorowy prostokąt bez efektu najazdu (można go osiągnąć na sztywno zmieniając kolory w :hover, ale tracimy wygodę zmiany koloru w wielu guzikach na raz).
Demonstracja oraz informacje o degradacji w starszych przeglądarkach
URL Trackback
Zapewne nie jeden raz wracaliście z kina mówiąc, że efekty specjalne były na tak niskim poziomie, że widać było słaby rendering albo potwory wyglądały jak te ze wczesnych Godzilli. Takie efekty, to i Wy mogli byście zrobić. Prawda?
To zobaczcie, ile z tych efektów przegapiacie:
Oglądałem ten filmik parę razy i po prostu nie mogę wyjść z wrażenia. Dzięki goshki za linka :)
URL Trackback
Parę dni temu na reddicie moją uwagę przykuł artykuł opisujący nowatorską - wciąż rozwijaną - technikę tworzenia kodu HTML nazywaną Zen Coding.
Całe założenie opiera się na wykorzystaniu składni podobnej do tej znanej z selektorów CSS, która za pomocą odpowiednich narzędzi wbudowanych w edytor (więc nie jest to sama ideologia, ile technologia) jest szybko przekształcana na kod HTML. Może to wydawać się zagmatwane i nie jasne, ale wystarczy spojrzeć na poniższy przykład:
Jeżeli w edytorze wpiszemy ciąg znaków div#content>h1+p, który na pierwszy rzut oka wygląda dokładnie jak selektor CSS3, zostanie on zamieniony na następujący kod:
<div id="content">
<h1></h1>
<p></p>
</div>
Jak widać, Zen Coding oszczędził nam dosyć dużej ilości kliknięć w klawiaturę. Poza przekształcaniem prostych łańcuchów elementów mechanizm pozwala na dodawanie ID i nazw klas, powielanie elementów oraz numerowanie kolejnych znaczników:
E - wstawia element danego typu
E#id - wstawia element oraz nadaje mu parametr ID o zadanej wartości
E.class - wstawia element nadając mu wybraną klasę
E>N - wstawia element, po czym informuje parser, że kolejny element jest jego potomkiem
E+N - wstawia dwa elementy jako potomki tego samego rodzica
E$*N - wstawia N takich samych elementów, znaczek $ zostanie zastąpiony itteratorem
Najbardziej skomplikowanym może wydawać się ostatni zapis - jednak jest on dosyć prosty kiedy już go ujrzymy. Co np. wygeneruje taki kod: ul>li.item-$*5>a? Jeżeli ktoś podał poprawną (umieszczoną niżej) odpowiedź, to praktycznie może zacząć już korzystać z Zen Coding ;-)
<ul>
<li class="item-1"><a></a></li>
<li class="item-2"><a></a></li>
<li class="item-3"><a></a></li>
<li class="item-4"><a></a></li>
<li class="item-5"><a></a></li>
</ul>
Oczywiście jest to tylko podstawowa funkcjonalność - ZC oferuje także np. skróty dla CSS oraz gotowe szablony HTML jednak to rozwijania składni HTML będziemy używać najczęściej.
Na razie Zen Coding doczekało się oficjalnego wsparcia w następujących edytorach:
- TextMate
- Aptana
- Coda
- NetBeans
- Espresso
- Web IDE
- TopStyle
- Sublime Text
- Dreamweaver
To ja poproszę jeszcze o wsparcie dla PhpEd ;-)
Poniżej zamieszczam filmik, demonstrujący wykorzystanie Zen Coding dla zademonstrowania jak wpływa on na szybkość programowania:
URL Trackback
Home.pl jest jednym z nielicznych, popularnych, usługodawców, którzy udostępniają usługę CRON. No, prawie - jest to ich implementacja, która polega na okresowym wywoływaniu plików PHP, Perla, Pythona lub CGI - dzięki temu możemy zaimplementować np. automatycznie rozsyłający się newsletter etc.
W swojej dokumentacji Home.pl stwierdza:
Środowisko uruchomieniowe skryptów jest identyczne ze środowiskiem, w jakim uruchamiane są skrypty na serwerach wirtualnych. W praktyce wywołanie takie niewiele różni się od zwykłego wywołania GET po protokole HTTP.
Dla mojej małej główki równa się to z czymś takim:
telnet mojadomena.pl 80
GET /cron-hourly.php HTTP/1.1
Host: mojadomena.pl
Connection: Close
Co się jednak okazuje? Panowie z Home poszli na łatwiznę i nawet o tym nie wspomnieli - otóż CRON po prostu skanuje FTP w poszukiwaniu odpowiednich plików i wywołuje je przez interpreter CLI.
Efekt? Zmienna $_SERVER['HTTP_HOST'] ma złą wartość - zamiast mojadomena.pl znajdziemy tam home.pl - i tak, dowiedziałem się o tym "the hard way" kiedy nagle dostałem maila, który zamiast z adresu info@mojadomena.pl przyszedł z info@home.pl
Update - okazuje się, że problemem nie jest zła informacja w HTTP_HOST, ale jej .. brak. A w tym wypadku Home sam dodaje swoją domenę do adresu. Poniżej przykład wysyłanych informacji (wysłane print_r($_SERVER) na mój adres (zamieniłem login serwera na "LOGIN" w celu ochrony prywatności):
To: btm@anfo.pl
Subject: Cron na home
From: info@home.pl
Array
(
[QUERY_STRING] =>
[REQUEST_METHOD] => GET
[REMOTE_HOST] => localhost
[REMOTE_ADDR] => 127.0.0.1
[DOCUMENT_ROOT] => /
[SERVER_SOFTWARE] => IdeaCron
[SERVER_PROTOCOL] => HTTP/1.0
[GATEWAY_INTERFACE] => CGI/1.1
[PATH] => /bin
[TMP] => /tmp
[TMPDIR] => /tmp
[SERVER_ID] => LOGIN@home
[SERVER_NAME] => LOGIN.home.pl
[SERVER_ADMIN] => LOGIN@home.pl
[SCRIPT_NAME] => /cron-5min.php
[SCRIPT_FILENAME] => /cron-5min.php
[REQUEST_URI] => /cron-5min.php
[PATH_INFO] => /cron-5min.php
[PATH_TRANSLATED] => /cron-5min.php
[PHP_SELF] => /cron-5min.php
[REQUEST_TIME] => 1253531102
[argv] => Array
(
)
[argc] => 0
)
URL Trackback
Ostatnio przypadło mi w firmie robić projekt, który nie dość, że jako tło strony wykorzystuje animowany Flash, to całość strony znajduje się na przeźroczystej warstwie (spod której widać w/w Flasha), a na niej jest jeszcze menu na przeźroczystej warstwie.
Oczywiście w dobie nowoczesnych przeglądarek wykorzystujących silniki Mozilli, Webkit czy Opery nie jest to duży problem, o tyle z IE nie jest już tak różowo. Jasne - można odpowiedni efekt uzyskać używając filtrów dzięki czemu jako tło można poprawnie wyświetlić PNG, jednak ma to swoje minusy.
Najpoważniejszym z nich jest niewątpliwie problem z linkami znajdującymi się na owej warstwie - często zdarza się, że stają się one nie klikalne - powszechnym jest uważanie, że podczas nakładania filtru zmienia się z-index warstwy i fizycznie przesłania ona tekst (nie działają linki, nie da się zaznaczać tekstu etc.).
Oczywiście jest to wersja nie do zaakceptowania jako iż dużo osób, w tym klient, używa jeszcze Internet Explorer 6. Na szczęście projekt jest w miarę nie skomplikowany, więc można było zastosować inną technikę.
Zamiast jednej warstwy z tekstem i przeźroczystym tle zastosowałem dwa DIV-y - jeden zawiera tekst i ogólnie treść strony, drugi zaś przeźroczyste tło i dzięki zastosowaniu position: absolute i z-index ustawiony jest tak, by znajdował się pod DIV-em zawierającym treść strony.
Dodatkowo dodałem jeszcze kawałek kodu Java Script który ustawia wymiary obu DIV-ów na jednakowe.
document.getElementById('bgOverlay').style.height = document.getElementById('content').scrollHeight + 'px';
document.getElementById('bgOverlay').style.width = document.getElementById('content').scrollWidth + 'px';
Zobacz przykład - oczywiście głównie chodzi o użytkowników IE6, pozostałe przeglądarki poprawnie wyświetlają PNG i takie zabiegi są niepotrzebne.
URL Trackback
Na wypadek gdyby ktoś miał konto na www.hosteurope.de lub u ich resellerów (np. hosting w eHost.pl.
Traf chciał, że przypadkiem skasowałem, zamiast przesunąć ważny folder - mały, bo mały, 300mb z 15gb serwera. Po pierwszych sekundach paniki przyszło opamiętanie - mam backup! Backup z przed 10 dni, akurat nic nie było zmieniane!
Niestety, backup zrobiłem z poziomu Virtuozzo i jak się okazuje, jest to obraz dysku. Po konsultacji z eHost, dowiedziałem się, że uprzejmi panowie z Niemiec jasne, że są w stanie odzyskać ten jeden folder za mnie. Za jedyne 25EUR za każde rozpoczęte 15 min pracy.
Zostaje jeszcze druga opcja - backup z teraz, restore starej kopii, zgranie plików, restore nowej kopii. Zgadnijcie, którą opcję wybrałem. Podpowiedzią może być godzina dodania notki ;-)
Małe podsumowanie:
- zrobienie backupu 15gb - 1:20h
- restore starego backupu - 1:13h
- zgranie plików - 0:15h
- restore nowego backupu - 1:13h
Czyli jestem jakieś4 godziny w plecy, ale jeżeli panowie w Niemczech mieli by to robić, to zakładam, że zajęło by to im z 2 godziny, czyli 200EUR. Odeśpię kiedy indziej ;-)
Notka nie ku przestrodze (F6! F6! To zawsze jest F6 w mc, nie F8!) i dla potomnych, bo niestety Virtuozzo nie ma informacji ile jeszcze zajmie operacja, a Google nie pomogło. Uwaga - podczas restore w panelu będzie pokazana zajętość dysku - skacze od 0% do 10% (1% co ~10 minut) a potem już skacze na tyle, ile de-facto zajmuje i trzeba ponownie uruchomić VPS!
URL Trackback
Po raz kolejny w pracy padło ciekawe pytanie - czy da się zrobić tak, by kolor przekreślenia tekstu był inny niż sam tekst - była to cena w sklepie i tak lepiej wyglądało grafikowi. Dać się da, ale jeden haczyk - wszystko powinno dać się edytować za pomocą edytora WYSIWYG i klient nie ma nigdzie widzieć HTML. Oczywiście im mniej roboty dla Java Script / preg_replace tym lepiej.
Pierwszy pomysł jaki przyszedł mi do głowy ("Podejście 2") to zmniejszenie wysokości kontenera tekstu i zastosowanie overflow: visible. Oczywiście, o ile problem rozwiązany w 5 sekund w Firefox i innych nowych przeglądarkach, o tyle w Internet Explorer 6 dalej nic. Postanowiłem pójść dalej tym tropem - kilka expression w CSS później i rozwiązanie działa też w IE6. Niestety - poza zwiększeniem wykorzystania CPU przez przeglądarkę - ma też inne błędy (opisane w przykładach).
Kolejne rozwiązanie ("Podejście 1") - mogło by wydawać się oczywiste - to osadzenie w tagu <del> dodatkowego <span>, nadanie odpowiednich kolorów odpowiednim znacznikom i gotowe. Niestety, jak już wspomniałem, klient nie będzie oglądał HTML a jedynie wprowadzał go poprzez FCK Editor - więc zostaje albo JS (który można wyłączyć) albo przepisywanie HTML przed wyświetleniem (a wtedy w czasie edycji nie będzie widać przekreślenia).
W ten sposób doszliśmy do kolejnego podejścia ("Podejście 3") - tym razem satysfakcjonującego moje potrzeby - mały GIF w tle. Proste? Można jeszcze prościej - zamiast GIFa w tle dajmy obrazek 1 pixelowy w CSS za pomocą zapisu data (ok, ok - nie działa pod IE6 więc zastajemy przy GIFie ;-))
Tok myślenia oraz ostateczne rozwiązanie można podejrzeć tutaj. Starałem się sprawdzić pod wszystkim co mam pod ręką (IE6, IE8, FF3, Opera 9, Chrome 2 i Safari 4) i wygląda, że działa poprawnie. Czego to Ci graficy nie wymyślą ;-)
URL Trackback
Kilka lat temu z potrzeby chwili napisałem skrypt do sprawdzania formularzy HTML za pomocą JavaScript przed ich wysłaniem - miał on z założenia być prosty i służyć do weryfikowania formularzy kontaktowych, składających się głównie z pól tekstowych tj. "imię i nazwisko", "adres e-mail" oraz "treść wiadomości".
Z czasem skrypt ewoluował, został dodany do firmowego CMSu i zaczął być szerzej używany. Postanowiłem nieco odświeżyć kod - wzbogacić go o parę opcji i przerobić na obiektowy. W ten sposób vForm przekształcił się w cValidate i dorobił numerka 1.1
Sam skrypt można zobaczyć w akcji i przetestować on-line. Będę wdzięczny za uwagi, jeżeli komuś coś nie działa lub działa nie poprawnie.
Instalacja skryptu jest banalnie prosta - wystarczy dołączyć do strony bibliotekę, do pól, które chcemy sprawdzić dodać odpowiednie klasy (więcej na ten temat na stronie demonstracyjnej oraz w samym źródle skryptu) i przed wysłaniem formularza wywołać metodę cValidate.validate(obj) (gdzie obj to Obiekt formularza do sprawdzenia).
P.S. Proszę wziąć pod uwagę, że nie ma to być rozbudowany skrypt opierający się na rozbudowanych bibliotekach pokroju jQuery czy MooTools więc jego możliwości są ograniczone - przypominam, że ma służyć on raczej do weryfikacji prostych formularzy kontaktowych oraz być łatwy i szybki do implementacji.
URL Trackback
Problem
Ostatnio zdarzyło mi się, że klient uparcie chciał by na stronie wyświetlał się dokładnie 4 linijki z wpisanego testu i by na końcu pojawiało się "więcej" prowadzące do rozwinięcia artykułu.
Ile razy tłumaczyłem klientowi, że niestety nie mamy kontroli nad tym ile tekstu się wyświetli, ponieważ nawet jeżeli ograniczę, że ma pojawiać się tylko 250 znaków, to i tak literka "W" zajmuje więcej niż "I" i wpis składający się z samych "szerokich" liter i tak znów nie wpasuje się w szablon.
Od razu nasuwa się jedno rozwiązanie - użyć czcionki o stałej szerokości znaków np. Courier New. Niestety, czcionka ta nie grzeszy szczególną pięknością.
Ziell na swoim blogu poruszył temat opisując własność CSS "text-overflow". Jednak rozwiązanie to ma swoje (wypunktowane w w/w poście) minusy, które skreślały je dla tego konkretnego zastosowania.
Tekst, który miał być wyświetlony nie zawierał żadnych znaczników HTML - żadnych akapitów, nowych linijek - pisany "ciurkiem" i w 100% przypadków zajmował ponad 4 linijki - dlatego rozwiązanie, które zastosowałem jest dla tego konkretnego przypadku idealne.
Rozwiązanie
Rozwiązanie może jest mało eleganckie - ale ma dwie niewątpliwe zalety:
- działa pod każdą z testowanych przeglądarek
- wyświetla się (chociaż "niepoprawnie") w przeglądarkach nie obsługujących CSS
- jest wygodne dla SEO, chociaż jak się Google połapie, to może dać po łapach ;-)
Poniżej efekt zabiegu, jaki poczyniłem, u niektórych już na pierwszy rzut oka można będzie dowiedzieć się, co i jak działa:
Ten akapit powinien zawierać tylko dwie linijki tekstu. Jeżeli zawiera więcej, oznacza to, że jednak nie wszystko działa tak jak powinno :-) A teraz trochę lorem: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur enim erat, dignissim nec vehicula eget, hendrerit pretium dolor. Sed lacinia arcu ut elit luctus pellentesque tempus justo scelerisque. Morbi congue tempus venenatis. Duis et nibh id ante tempor condimentum non non nulla. Phasellus in dui ac eros vehicula tempus vel eget turpis. Aenean venenatis neque ac turpis mattis nec vulputate mauris gravida. ... więcej
Jak widać (mam nadzieję) zamierzony efekt został osiągnięty - cały przykład tak na prawdę jest dużo dłuższy i składa się z dwóch tagów:
p {
width: 600px;
height: 40px;
border: 1px solid #D3D3D3;
overflow: hidden;
position: relative;
}
Powyższy kod ustala wymiary kontenera (akapitu), dodaje ramkę i ustala pozycjonowanie na relatywne. Dodatkowo parametr overflow gwarantuje nam, że tekst nie "wyleje" się z elementu tylko zostanie przycięty do odpowiednich rozmiarów.
a {
position: absolute;
bottom: 5px;
right: 3px
display: block;
padding-left: 5px;
background: white;
}
Tu dla odmiany dodajemy link do pełnej treści wiadomości, który ustawiamy używając position: absolute w dolnym prawym rogu kontenera, nadajemy mu wyświetlanie jako element blokowy (by padding działał poprawnie) i ustalamy białe tło by przesłonił znajdujący się pod nim tekst.
Przeglądarki, które obsługują CSS wyświetlą ładne dwie linijki i link "więcej", pozostałe wyświetlą pełen tekst a następnie link.
Jak już zaznaczyłem, rozwiązanie to działa tylko wtedy, gdy mamy pewność, że tekst na 100% wypełni nasz kontener, w innym wypadku efekt może być następujący:
Ten akapit dla odmiany ma nie więcej tekstu niż dwie linijki i wygląda trochę mało elegancko - chociaż też można go stosować. ... więcej
URL Trackback
