EpicWEB.pl

webdesign, programowanie, phat lewt!

Ostatni projekt

ddrpl.com

Ostatnie wiadomości

Google Chrome OS - Nowy system operacyjny

Na oficjalnym blogu Google pojawił się właśnie wpis o tym, że gigant planuje wydanie własnego systemu operacyjnego czerpiącego dużo z boomu na Cloud Computing.

Oczywiście Google nie ma zamiaru pisać od zera całego systemu -Google Chrome OS to tak naprawdę zestaw narzędzi działających na firmowym menadżerze okien pod kontrolą systemu GNU/Linux. Wg. zapewnień autorów notki system ma być lekki, pracować na procesorach x86 oraz ARM, co nie jest wielką niespodzianką biorąc pod uwagę podwaliny Linuxowe.

System przeznaczony ma być dla użytkowników wykorzystujących komputer głównie do pracy oraz do przeglądania internetu. Dzięki zastosowaniu w/w Cloud Computing nasze dane będą dostępne dla nas z wielu różnych urządzeń - po prostu większość informacji przechowywana będzie na zasobnych serwerach Google.

Planowana data wydania systemu to druga połowa 2010 roku - zostaje nam tylko czekać na wczesne bety ;-)

Skracanie tekstu do N linijek + link "więcej"

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:

  1. działa pod każdą z testowanych przeglądarek
  2. wyświetla się (chociaż "niepoprawnie") w przeglądarkach nie obsługujących CSS
  3. 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

include() i require() a open_basedir

Ostatnio spędziłem parę godzin szukając, dlaczego nie mogę includwać plików w swoich serwisach - okazało się, że winny jest open_basedir, który ustawiony jest dla konkretnej ścieżki, i include() (oraz inne funkcja otwierające pliki) tam właśnie zaczynają szukać plików, które mają wczytać - i nie przeszukują podkatalogów.

Popularne, i wszędzie sugerowane rozwiązanie:

<?
#a.php
include('podkatalog/b.php');

#podkatalog/b.php
include('plik.php');

Gdzie plik.php znajduje się w tym samym katalogu co a.php mimo, że wydaje się logiczne i w większości wypadków działa, może okazać się, że dzięki open_basedir przestało.

Rozwiązania?

a) wyłączyć dyrektywę open_basedir w php.ini (i masie podrzędnych, jeżeli masz dużo hostów virtualnych)
b) podawać ścieżki względne lub bezwzględne do dołączanych plików, np. tak:

<?
include('../plik.php');

# albo lepiej

include(dirname(__FILE__)  . '/../plik.php');

Wycinanie znaków regionalnych oraz specjalnych ze zmiennej

Czas temu napisałem skrypt, który konwertował tytuły postów na linki SEO-friendly, czyli wywalał pliterki i zamieniał na bez-ogonkowe odpowiedniki, wywalał znaki specjalne etc. Niestety, poległ na czymś wklejonym z Worda. Nowa wersja jest nieco krótsza i wygląda tak:

It’s How Everyone Builds It zażółć gęślą jaźń !@#$%^&*()_+=-[]{}\\|;:\'<>?,./
<?
$string = iconv('UTF-8', 'UTF-8//IGNORE', $string);
$string = iconv('UTF-8', 'ASCII//TRANSLIT', $string);
$string = str_replace(' ', '-', trim(preg_replace('/([^a-zA-Z\s])/Us','', $string)));
echo $string;

W wyniku da nam ładne

Its-How-Everyone-Builds-It-zazolc-gesla-jazn-zazolc