Category Archives: Webdesign

CSS3: Nadchodzą dobre czasy dla Webdesignu

Posted on by
7
CSS3: Nadchodzą dobre czasy dla Webdesignu
2010-04-30 11:43

Z wydania na wydanie najnowsze przeglądarki odsłaniają kolejne karty i umożliwiają coraz większą obsługę CSS w wersji 3. Jestem bardzo zadowolony z tego faktu, ponieważ oznacza to przede wszystkim mniej pracy dla ludzi odpowiedzialnych za wygląd stron, o wiele mniejszy czas ładowania strony (mniej obrazków, oraz mniej skryptów), większe możliwości w konfiguracji oraz większą elastyczność w modyfikowaniu wyglądu strony. Niestety w dalszym ciągu w tyle pozostają produkty Microsoftu, ale na szczęście istnieją rozwiązania, które implementują taką funkcjonalność w tych zardzewiałych silnikach :)

Zaokrąglone rogi

Jest to jedna z głównych przyczyn, dla której webmasterzy decydują się używać obrazków tła wszelkich przycisków i elementów na stronie. Na szczęście możemy użyć:

1
2
3

 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;

Niestety w dalszym ciągu Microsoft nie postanowiło wspierać zaokrąglonych rogów w swoich przeglądarkach. Podobny efekt możemy uzyskać w IE poprzez dodanie atrybutu behavior:url(rounded.htc) ale jest to sposób, który dość mocno ingeruje w strukturę drzewa DOM i nie daje pożądanych efektów.

Cień pod tekstem

Efekt ten możemy uzyskać poprzez dodanie następującej wartości:

1

text-shadow:0 1px 1px #FFF;

Jest to bardzo fajny sposób na uzyskanie prowizorycznej wypukłości lub wgniecenia tekstu. Metoda ta sprawuje się bardzo dobrze pod przeglądarkami uruchomianymi na komputerach desktop-owych. Jednak, kiedy oglądałem stronkę pod Operą Mini, tekst był starasznie nieczytelny i rozmazany.

Cień pod elementem blokowym

Cień dla elementów blokowych możemy uzyskać poprzez dodanie takiego oto kodu CSS3 do naszej strony.

1
2
3
4

-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=160, Color='#DDDDDD');

Osadzanie czcionek

Czcionki, które są dostępne we wszystkich przeglądarkach, powoli zaczęły nudzić czytelników. Obojętnie, na którą stronę byśmy nie weszli, zawsze było wiadomo, że zobaczymy na niej jedną z następujących czcionek: Arial, Verdana, Helvetica, Tahoma, Georgia, Times albo ekstrawagancki :) Comic Sans. W CSS3 Będziemy mogli po prostu wrzucić używaną przez nas czcionkę na serwer, a następnie odwołać się do niej za pośrednictwem wartości @font-face.

Gradienty

Gradienty stały się nieodłącznym elementem stron WWW. Widzimy je praktycznie na każdej stronie internetowej. Wiadomo, że do czasu kiedy nie było CSS3 twórcy stron musieli używać obrazków w miejsce gradientów. Musieli, ponieważ od teraz mogą użyć następujących wartości CSS, aby usyskać taki sam efekt:

1
2
3

background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');

Podsumowanie

Oczywiście wszystkie wymienione tutaj własności CSS3 to tylko mały zalążek tego, co będzie będzie dostępne w jego pełnej specyfikacji. CSS3 zostanie w pełni wprowadzony w życie wraz z pojawieniem się standardu HTML5 i będzie oferował dużo dużo więcej, niż tylko to, co zostało wspomniane w tym poście. Niestety prace nad nowym CSS są w dalszym ciągu we wstępnej fazie rozwoju i jeszcze minie spory okres czasu, kiedy w 100% wejdą w w życie. Na szczęście producenci dobrych przeglądarek pomyśleli, żeby wprowadzać do ich produktów obsługę CSS3 i ułatwić tym sposobem życie wszystkim Webmasterom. Jeśli chcielibyście dowiedzieć się więcej o standardzie CSS3, zachęcam Was do zapoznania się z tym dokumentem.

Zbiór użytecznych funkcji JavaScript i jQuery

Posted on by
4
Zbiór użytecznych funkcji JavaScript i jQuery
2010-02-11 09:57

Dzisiaj przedstawiam Wam kilka ciekawych funkcji *.js, które mogą okazać się przydatne przy projektowaniu nowoczesnych serwisów internetowych. Niektóre z tych funkcji wymagają biblioteki jQuery inne natomiast to czysty JavaScript. Mam nadzieje, że funkcje te znajdą zastosowanie w Waszych projektach.

Przypisanie wartości do nieaktywnych elementów formularza

Funkcja ta znajduje zastosowanie przy formatowaniu formularzy HTML. Powoduje ustawienie wartości dla pola INPUT, które jest nieaktywne (blur) lub zostało pozostawione puste. W momencie kliknięcia na ww. element INPUT (focus) funkcja zeruje wartość pola. Rozwiązanie to jest bardzo użyteczne dla designerów, ponieważ pozwala zaoszczędzić miejsce na stronie, a także wprowadzić większą interaktywność do formularzy.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function assignTextToInput(iElement,iString)
{
	jQuery(document).ready(function(){
		if(jQuery(iElement).val() == ""){
			jQuery(iElement).val(iString);
		}
		jQuery(iElement).blur(function () {
			if(jQuery(iElement).val() == ""){
				jQuery(iElement).val(iString);
			}
		});
		jQuery(iElement).focus(function () {
			if(jQuery(iElement).val() == iString){
				jQuery(iElement).val("");
			}
		});
	});
}

Otwieranie linku w nowym oknie zgodne z W3C

Wiadome jest to, że Walidator W3C nie pozwala na umieszczenie atrybutu target=”_blank” w kodzie XHTML, który powoduje otworzenie linku w nowym oknie przeglądarki. Poniższa funkcja doskonale rozwiązuje ten problem. Zamiast atrybutu target=”blank” dodajemy inny atrybut – rel=”nofollow”. Funkcja sprawdza wszystkie linki, czy posiadaja atrybut nofollow i przypisuje im atrybut target=”_blank”. Funkcja ta również usprawnia pracę Googlebot’a i mówi mu, żeby nie uwzględniał tych linków przy indeksowaniu. Warto pamiętać, że ww funkcja nie będzie działać na stronie bez jej uprzedniego wywołania, tak jak ma to miejsce tutaj:

1
2
3
4
5
6
7
8
9
10
11
12
13

function externalLinks() {
	if (!document.getElementsByTagName) return;
 
	var anchors = document.getElementsByTagName("a");
 
	for (var i=0; i<anchors.length; i++) {
 
		var anchor = anchors[i];
   		if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "nofollow")
     		anchor.target = "_blank";
 }
}
window.onload = externalLinks;

Wywoływanie funkcji po załadowaniu DOM

Czasami istnieje potrzebna wywołania funkcji window.onload w paru różnych miejscach kodu. Jeśli używamy biblioteki jQuery problem ten jest rozwiązany poprzez umieszczenie bloku kodu wewnątrz jQuery(document).ready(). Co innego jeśli nie używamy ww biblioteki. Kolejne przypisania funkcji do window.onload wyczyszczą nam wartość poprzedniej funkcji. W tym przypadku z pomocą przychodzi nam poniższa funkcja:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function addLoadEvent(func)
{
	var oldonload = window.onload;
	if (typeof window.onload != 'function')
	{
		window.onload = func;
  	}
	else
	{
		window.onload = function() {
      		if (oldonload) {oldonload();}
      		func();
		}
	}
}

Funkcje operujące na ciasteczkach przeglądarki

Jeśli chcielibyście dodawać, usuwać i sprawdzać zawartość ciasteczek COOKIE poprzez JavaScript, zachęcam do wypróbowania poniższych metod:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}
 
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
 
function checkCookie(cookiename)
{
cookietoCheck=getCookie(cookiename);
if (cookietoCheck!=null && cookietoCheck!="")
  {
  	return true;
  }
else
  {
  if (cookietoCheck!=null && cookietoCheck!="")
    {
	return false;
    }
  }
}

Javascriptowe odpowiedniki funkcji trim, ltrim i rtrim

Poniższe funkcje usuwają puste znaki (whitespace) z ciągów string. Mogą one okazać się przydatne jeśli wykonujesz różnorodne operacje na stringach.

1
2
3
4
5
6
7
8
9
10
11
12
13

function trim(str, chars) {
return ltrim(rtrim(str, chars), chars);
}
 
function ltrim(str, chars) {
chars = chars || "\\s";
return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}
 
function rtrim(str, chars) {
chars = chars || "\\s";
return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}

Wykrywanie czy strona jest odwiedzana przez iPhone i iPod

Tych skryptów osobiście nie testowałem, chociaż wydają się być poprawne. Hmmm a może też po lekkiej modyfikacji wykryją iPada :) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

var deviceIphone = "iphone";
var deviceIpod = "ipod";
var uagent = navigator.userAgent.toLowerCase();
 
function DetectIphone()
{
   if (uagent.search(deviceIphone) > -1)
      return true;
   else
      return false;
}
 
function DetectIpod()
{
   if (uagent.search(deviceIpod) > -1)
      return true;
   else
      return false;
}
 
function DetectIphoneOrIpod()
{
    if (DetectIphone())
       return true;
    else if (DetectIpod())
       return true;
    else
       return false;
}

W miarę upływu czasu będę starał się poszerzać ten zbiór o inne ciekawe funkcje. Do usłyszenia ;)