CSS3 wprowadza wiele nowych funkcji ułatwiając webdeweloperom stylowanie stron internetowych. Jako, że niestety nie został on jeszcze uznany za standard cała ta funkcjonalność nie jest dostępna w poszczególnych przeglądarkach, a to z czego możemy skorzystać zazwyczaj wywołujemy dodając odpowiedni prefix (np. -moz). Pomęczyć się z prefixami zawsze można, szczególnie że dodając kilka linii kodu do pliku css zaoszczędzamy sporo czasu uzyskując pożądany efekt bez niepotrzebnego kombinowania.
Z większością przeglądarek problemu nie ma, sytuację jednak komplikuje (jak zawsze) dzieło firmy Microsoft. Firma ta stara się jak może, ale spora część rynku jest „opanowana” przez starsze wersję ich aplikacji, które nie są w stanie wyświetlić jakiegokolwiek stylu wprowadzonego przez CSS3.
Przeczytaj resztę wpisu »
Podczas generowania obrazków za pomocą biblioteki GD języka PHP napotkałem problem z wycentrowaniem tekstu. W przypadku centrowania według osi X (poziomego) wszystko było w porządku. Schody pojawiły się gdy chciałem tekst wyśrodkować w pionie (oś Y). Problematyczne okazały się głównie polskie znaki diakrytyczne… ale nie tylko, gdyż i wszelkiego rodzaju nawiasy czy cudzysłowy powodowały ten sam efekt.
Wyśrodkować w pionie jest prosto wystarczy obliczyć wynik wzoru:
Y = (wysokość obrazka - wysokość tekstu) / 2
Do wypisywania tekstu na obrazku używam funkcji imagettftext. W funkcji tej trzeba podać kilka parametrów a w nich między innymi położenie X oraz Y początku tekstu. Więc wartość z wyżej wymienionego wzoru powinna być tu idealna. I tu pierwsza niespodzianka: Y nie jest liczone o lewego-górnego rogu płótna – Y to tak zwane położenie baseline tekstu. I na to znalazło się rozwiązanie – drobna modyfikacja wzoru który teraz wyglądałby następująco:
Y = (wysokość obrazka + wysokość tekstu) / 2
Żeby pobrać wysokość tekstu używam funkcji imagettfbbox. I tu pojawił się kolejny problem – funkcja ta zwraca (po odpowiednim obliczeniu) wysokość wypisanego tekstu a nie „wysokość” baseline czcionki. Do tego jeszcze dodać trzeba, że mimo iż czcionki posiadają ten sam baseline nie mają one jednej wielkości (wysokości) – inną wysokość będzie miała literka „A” a inna na przykład „y”. Dlatego jedynym rozwiązaniem jest obliczenie osobno szerokości tekstu i osobno wysokości, z tym że obliczamy wysokość dla litery która będzie najmniej „wystawała” poza baseline – ja używam do tego małego „a”. Niestety takie rozwiązanie wymaga podwójnego użycia funkcji imagettfbbox.
Ostatnio kilka nowości znalazło miejsce w moim systemie zarządzania treścią. Większość z nich to drobnostki jednak dwie zasługują na przybliżenie na łamach tego bloga.
Przeczytaj resztę wpisu »
Po dłuższym czasie nareszcie mój blog doczekał się swojego indywidualnego wyglądu (interfejsu). Do tej pory nie mogłem jakoś znaleźć czasu na jego „odświerzenie” czyli zmianę domyślnej skórki teraz mi się jednak to udało. Na pewno kilka osób zauważyło, że w ostatnim tygodniu wygląd bloga zmieniał się powoli acz nieubłaganie.
No a skoro już jest wygląd nowy to czas na wypełnienie bloga treścią, a raczej uzupełnienie kilku działów bo wypełnić to on się sam wypełni z czasem :P
Czasami przydaje się informacja o rozmiarze obrazka, który można pobrać w dość prosty sposób – no chyba, że nie chcemy go umieszczać na stronie. W takim wypadku też idzie uzyskać taką informację. Wystarczy utworzyć obiekt img w pamięci i załadować do niego dany obrazek (właściwość src) w zdarzeniu onload uzyskamy wtedy dostęp do rozmiarów tego obrazka. Poniżej przykładowy kod :)
-
var img = new Image();
-
img.onload = function() {
-
alert(‚szerokość: ‚ + this.width + ‚px\nwysokość: ‚ + this.height + ‚px’);
-
}
-
img.src = ‚sciezka do obrazka’;
Wygląda na to, że Google ma problem z renderowaniem swoich map na elementach ukrytych (czy to przez display: none czy position: absolute). Mapa w takim wypadku jest źle centrowana. Dzieje się tak zapewne dlatego, że obiekty ukryte nie są przez przeglądarki renderowane i google maps ma wtedy problem z określeniem wielkości elementu, który go ma zawierać. Można na szczęście obejść tę niedogodność wywołując zdarzenie zmiany rozmiary (resize) mapy.
Dla wersji 2 Api kod będzie wyglądał następująco:
map.checkResize();
natomiast wersja 3 Api wymaga trochę więcej kodu :
google.maps.event.trigger(map, 'resize');
gdzie map to obiekt mapy.
Przeglądarka Chrome firmy Google niestety nie obsługuje zdarzenia onclick dla tagu option w select. Oczywiście poprawniejsze jest użycie onchange samego elementu select jednak czasami zachodzi potrzeba wywołania zdarzenia onclick dla option i wtedy Google Chrome sprawia nam problemy. Na całe szczęście nie są one duże i można je w łatwy sposób rozwiązać symulując zdarzenie onclick w zdarzeniu onchange select’a – starczy do tego poniższa linia:
this.options[this.selectedIndex].onclick();
Przyszło mi reinstalować system i po przetestowaniu kilku dystrybucji postanowiłem pozostać wierny Ubuntu. Ściągnąłem więc i zainstalowałem najnowszą wersję (11.04). Niestety trochę się rozczarowałem. Po długich walkach z radiówką i kartą graficzną (które w wcześniejszej wersji były obsługiwane bez problemu) przyszedł czas na wydajność. Przeszukanie internetu z pomocą wujka Google zaowocowało pewnym rozwiązaniem. Otóż winny po części okazał się Compiz – może nie za wydajność jako taką lecz za płynność działania. Dla ścisłości Compiz poinstalowany był w wersji 1.0.9.4. W internecie były 2 rozwiązania:
- Downgrade Compiz’a
- Odpowiednia configuracja Compiz’a
Pierwsza z nich mi jakoś się nie uśmiechała. Na szczęście druga bardzo prosta w implementacji okazała się wyjątkowo skuteczna. Wystarczyło w opcjach wtyczki OpenGL wyłączyć Synchronizację z VBlank. Przyśpieszyło to płynność wszystkich animacji.
Jeden problem z głowy teraz tylko znaleźć proste rozwiązanie na szybsze uruchamianie aplikacji :P
Ostatnio mi się zdarzyło, że musiałem poprawić bardzo denerwujący błąd w starym skrypcie, który wykorzystywał jedną z wczesnych wersji mootools’a. Problem występował oczywiście tylko w Internet Explorerze (testowano na wersji 7) a polegał na tym, że funkcja toQueryString() powodowała błąd „obiekt nie obsługuje takiej metody”. Dlaczego tak się działo nie mam zielonego pojęcia jednak zmusiło mnie to do napisania alternatywnej funkcji wykonywanej gdy mootools’owa funkcja zawiedzie. Nie jest ona może taka ładna i prosta w użyciu jak ta mootools’owa ale działa. Poniżej kod tej funkcji:
-
function toQueryString(elem) {
-
var queryString = [];
-
var elements = [];
-
try {
-
var elements1 = elem.getElements(‚input’);
-
if (elements1[0]) elements = elements.concat(elements1);
-
var elements2 = elem.getElements(‚select’);
-
if (elements2[0]) elements = elements.concat(elements2);
-
var elements3 = elem.getElements(‚textarea’);
-
if (elements3[0]) elements = elements.concat(elements3);
-
} catch(e) {
-
}
-
if (elements[0]) {
-
elements.each(function(el){
-
if (!el.name || el.disabled) return;
-
var value = null;
-
switch (el.tagName.toLowerCase()) {
-
case ‚select’: value = el.value; break;
-
case ‚textarea’: value = el.value; break;
-
case ‚input’:
-
if (el.type == ‚radio’ || el.type == ‚checkbox’) {
-
if (el.checked) value = el.value;
-
} else {
-
value = el.value;
-
}
-
break;
-
}
-
if (value != null) queryString.push(el.name + ‚=’ + encodeURIComponent(value));
-
});
-
}
-
return queryString.join(‚&’);
-
}
Oczywiście funkcja ta wymaga mootools’a – nie ma jednak różnicy którego :)
Da się zauważyć że PSP wyposażone zostało defaultowo w przeglądarkę stron internetowych. Da sięrównież zauważyć, że nie wszystkie a raczej większość obecnych stron nie będzie działać prawidłowo na tej przeglądarce.
Dlaczego ?
A no wygląda na to że sama przeglądarka pozostała daleko w tyle za standardami. Jej obsługa „nowoczesnych” technologii jest dość ograniczona. Posiada obsługę flasha – ale tylko do pewnego stopnia. Tak samo jest również z JavaScript.
Język JavaScript został w tej przeglądarce potraktowany mocno po macoszemu. Spora część funkcji, metod czy wartości po prostu nie działa (nie zostały zaimplementowane). A jak już działa to niekoniecznie w sposób prawidłowy.
Przykładem może być chociażby className. Właściwość className istnieje w implementacji JavaScript na tej przeglądarce. Można ją odczytać, ba … można ją nawet zapisać … ale co z tego skoro zmieniając klasę danego elementu html przeglądarka ta nawet nie drgnie … po prostu nie zareaguje na tę zmianę.
Jaki jest powód takich ograniczeń ? Proste niedopracowanie ? Bezpieczeństwo ? A może po prostu chęć jak największych zysków, które SONY ma z gier. Nie wiem … wiem, że taki stan jest na chwilę obecną, a czy zostanie to zmienione w kolejnych aktualizacjach oprogramowania ? … Mam nadzieje że tak :)
Ehh… jako, że trochę bawię się wpisanie różnorakich skryptów i programów fakt ten mnie po prostu wkurza …
Da się zauważyć że PSP wyposażone zostało domyślnie w przeglądarkę stron internetowych. Da się również zauważyć, że nie wszystkie a raczej większość obecnych stron nie będzie działać prawidłowo na tej przeglądarce.
Dlaczego tak jest ?
A no wygląda na to że sama przeglądarka pozostała daleko w tyle za standardami. Jej obsługa „nowoczesnych” technologii jest dość ograniczona. Posiada obsługę flasha – ale tylko do pewnego stopnia. Tak samo jest również z JavaScript.
Język JavaScript został w tej przeglądarce potraktowany mocno po macoszemu. Spora część funkcji, metod czy wartości po prostu nie działa (nie zostały zaimplementowane). A jak już działa to niekoniecznie w sposób prawidłowy.
Przykładem może być chociażby className. Właściwość className istnieje w implementacji JavaScript na tej przeglądarce. Można ją odczytać, ba … można ją nawet zapisać … ale co z tego skoro zmieniając klasę danego elementu html przeglądarka ta nawet nie drgnie … po prostu nie zareaguje na tę zmianę.
Jaki jest powód takich ograniczeń ? Proste niedopracowanie ? Bezpieczeństwo ? A może po prostu chęć jak największych zysków, które SONY ma z gier. Nie wiem … wiem, że taki stan jest na chwilę obecną, a czy zostanie to zmienione w kolejnych aktualizacjach oprogramowania ? … Mam nadzieje że tak :)
Ehh… jako, że trochę bawię się wpisanie różnorakich skryptów i programów fakt ten mnie po prostu wkurza ….