Author Archives: d(O_o)b

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.

Przydatne programy: Droplr i Cinch

Posted on by
Reply
Przydatne programy: Droplr i Cinch
2010-04-26 20:41

Ostatnio natrafiłem na dwie proste, a za razem ciekawe aplikacje na MAC OSX. Pierwsza z nich nazywa się Droplr i jest ona darmowym programikiem służącym do skracania linków i publikowania ich bezpośrednio na własne konto Twittera. Muszę przyznać, że aplikacja ta jest bardzo intuicyjna i prosta w konfiguracji. Najbardziej podoba mi się to, że jej ikonka jest widoczna obok ikonek systemowych w prawym górnym rogu ekranu i możemy na nią upuścić dosłownie wszystko, od hiperłączy przez teksty, a na obrazkach kończąc. Jeśli przeciągniemy i upuścimy na nią obrazek z naszego dysku twardego, Droplr automatycznie wrzuci go na własne serwery i po chwili pokaże nam piękny, skrócony link, który zaprowadzi nas do lokalizacji, gdzie został on uploadowany. Aplikacja ta jest bardzo przydatna dla wszystkich tych, którzy publikują krótkie posty za pośrednictwem serwisu Twitter.

Kolejnym ciekawym programem jest również Cinch. Jest to aplikacja, która implementuje funkcjonalność zmiany rozmiaru okien (dzielenia na pół lub maksymalizacji) i ich wyrównania do krawędzi, taką jaką znamy z Aero Snap w systemie Windows 7. Wystarczy przeciągnąć okno blisko krawędzi, a program narysuje ramkę i pokaże jakie rozmiary będzie miało okno po upuszczeniu. Ta aplikacja, niestety nie jest darmowa. W momencie, kiedy piszę tego posta, aplikację można kupić za 7$. A jeśli uważacie, że nie warto wydawać pieniędzy, na aplikacje tego typu, polecam Wam również sprawdzić darmową opcję, która nazywa się Better Touch Tool i oferuje taką samą funkcjonalność, jednak nie mogę się na jej temat wypowiedzieć, ponieważ nie miałem okazji jej przetestować.

IVONA WebReader czyli gadające strony WWW

Posted on by
Reply
IVONA WebReader czyli gadające strony WWW
2010-04-26 00:47

W tym poście postaram się przybliżyć troszkę projekt IVONA WebReader – aplikacji internetowej mającej na celu udźwiękowienie praktycznie każdej (nie chronionej hasłem) strony internetowej. Produkt ten powoli zajmuję stabilną pozycję na rynku, ponieważ jest on wykorzystywany przez sporą liczbę państwowych instytucji, które pragną dostosować swoją stronę do potrzeb osób niewidomych. IVONA WebReader został również umieszczony na mojej stronie. Możecie go zobaczyć w prawym górnym rogu tego artykułu (szary guzik z napisem odsłuchaj).

Instalacja usługi

Instalacja tej usługi jest stosunkowo prosta i nie wymaga od klienta znajomości jakiegokolwiek języka programowania. Wystarczy zalogować się w serwisie IVONA, kliknąć w link Moje Konto (w prawym górnym rogu), a następnie przejść do zakładki zatytułowanej WebReader. Pojawi się tam strona ze statusem usługi na której będziemy mogli aktywować produkt. Podobnie jak inne aplikacje na rynku, IVONA WebReader możemy aktywować w 30-sto dniowej wersji Trial lub wykupić abonament na rok, dwa lub trzy lata. Gdy usługa zostanie aktywowana, możemy przejść do kolejnego kroku, jakim jest ustawianie parametrów naszego odtwarzacza. Kreator został podzielony na 4 główne kroki:

Wybierz głos i ustaw parametry

Na tym etapie konfigurujemy parametry odtwarzacza. W pierwszej kolejności wybieramy jeden z głosów IVONA, którym będą czytane treści naszych stron internetowych (rzecz jasna dla stron w języku polskim wybieramy głosy polskie itd.). Możemy również ustawić prędkość syntezowanych zdań oraz ich głośność (głośność syntezy nie wpływa na początkową wartość głośności odtwarzacza, po prostu nagranie będzie syntezowane ciszej, tak więc zalecam ustawienie tego parametru na 100%). Kolejnymi parametrami są wartości odpowiadające za wygląd i zachowanie odtwarzacza. Zmiany jakie dokonamy będą na bieżąco pokazywane w okienku podgląd odtwarzacza. Możemy tutaj określić jego wymiary, zachowanie kiedy odtwarzacz jest spauzowany oraz jego wyrównanie (do lewej lub prawej). Kiedy udało się już skonfigurować wszystkie opcje dostępne w tym kroku, możemy przejść dalej klikając przycisk „Następny” umiejscowiony na samym dole strony.

Dopasuj kolory

Jak sama nazwa wskazuje, w tym kroku dobieramy kolory odtwarzacza. Można skorzystać z gotowych wariantów kolorystycznych lub stworzyć swój własny niepowtarzalny wygląd dopasowany do Twojej strony. IVONA WebReader umożliwia ustawienie wartości kolorów dla jego tła, przycisków lub konturu oraz ustawienie jego przezroczystości. Dzięki opcji podglądu będziesz mógł na bieżąco obserwować jak prezentuje się odtwarzacz o wybranych przez Ciebie parametrach. Uwaga ! Zalecam również ustawienie wartości koloru tła Twojej strony. IVONA WebReader używa tego parametru podczas wyświetlania pod przeglądarkami Opera ponieważ produkty z tej rodziny nie pozwalają na osadzenie odtwarzacza w trybie z przeźroczystym tłem, tak jak ma to miejsce pod innymi przeglądarkami.

Sporządź listę domen

W tym kroku definiujesz listę domen, na których będzie osadzony produkt IVONA WebReader. Domeny (lub sub-domeny) wpisujemy w wyznaczone pole tekstowe, a następnie klikamy na przycisk „Dodaj”. Krok ten jest niezbędny do prawidłowego działania odtwarzacza i ma on na celu zabezpieczenie Twojego odtwarzacza przed innymi, którzy chcieliby go użyć na własnych stronach. Listę domen będziesz mógł w każdej chwili edytować w dziale Zabezpieczenia

Wygeneruj kod

To ostatni krok który musimy przejść, aby otrzymać kod, który będziemy mogli skopiować do źródła strony internetowej. Na tym etapie należy określić, które elementy strony mają zostać udźwiękowione. Możemy tutaj zaznaczyć, czy WebReader ma rozpoznawać treść do czytania umieszczoną wewnątrz znaczników (np. „p”,”body”, „table”) lub też treść umieszczoną wewnątrz dowolnych znaczników posiadających atrybut class (wybieramy opcje class= i podajemy wartość tego atrybutu) lub id (wybieramy opcje id= i podajemy wartość tego atrybutu). Jeśli ktokolwiek miałby trudności z tym krokiem proponuję zapoznać się z tym dokumentem.

Możliwośći

IVONA WebReader umożliwia odsłuchiwanie zawartości stron pod każdą dobrą przeglądarką na rynku. Działa również pod przeglądarkami dostępnymi na nowoczesnych telefonach komórkowych (np. Safari Mobile, Opera Mini, Skyfire). Po kliknięciu w przycisk Odsłuchaj następuje osadzenie obiektu Flash, który jest odpowiedzialny za odtwarzanie dźwięku oraz za interfejs użytkownika. W przypadku przeglądarek mobilnych zostajemy bezpośrednio przekierowani na plik MP3, który otwiera się w domyślnym oprogramowaniu dostępnym na telefonie (np. Windows Media Player, czy Quick Time). Najfajniejszą opcją w tej aplikacji jest moim zdaniem to, że nie musimy generować odtwarzacza dla każdej zmiany na stronie. IVONA WebReader automatycznie pobiera aktualną wersję strony internetowej i generuje na jej podstawie dźwięk z syntezą mowy.

Dostępność dla osób niewidomych oraz słabowidzących

IVONA WebReader, w przeciwieństwie do większości aplikacji napisanych w technologi Adobe Flash, jest w pełni kompatybilny z oprogramowaniem typu screen-reader, ponieważ jest on widoczny dla niego jako zwykły link, a nie obiekt Flash. Oczywiście przeglądarka musi sama w sobie wspierać tryb Accessibility i umożliwiać przełączanie się między kolejnymi elementami na stronie za pomocą klawisza Tab. Kiedy osoba z wadą wzroku będzie się przełączać między kolejnymi elementami strony i natrafi w końcu na link IVONA WebReader, oprogramowanie screenreader przeczyta jej (w zależności od wybranego języka odtwarzacza) następujące zdanie:

IVONA Webreader. Wciśnij Enter by rozpocząć odtwarzanie

IVONA Webreader. Press Enter to begin reading

Po wciśnięciu klawisza Enter, następuje rozpoczęcie odtwarzania, i w tym momencie możemy używać skrótów klawiszowych dostępnych w aplikacji (Enter – spauzuj/wznów odtwarzanie, klawisze numeryczne od 0 do 9 – poziom głośności, strzałki lewo i prawo – skok o 5 sekund w przód lub wstecz). Warto jeszcze wspomnieć o bardzo ważnym skrócie klawiszowym, jakim jest Ctrl+Spacja. Wciśnięcie tej kombinacji, niezależnie od tego, na jakim elemencie html-owym znajduję się focus, spowoduje rozpoczęcie odtwarzania artykułu.

Podsumowanie

Moim zdaniem produkt IVONA doskonale nadaje się do udźwiękowienia praktycznie każdej strony internetowej. Jest on łatwy w konfiguracji i nie wymaga instalowania dodatkowych komponentów po stronie serwera. Jedyne co mi się w nim nie podoba jest to, że syntezator słabo radzi sobie z artykułami, które przeplatają się dwoma językami (jak np. moja strona, na której jest dużo nazw własnych w języku angielskim), ale mam nadzieje, że w miarę upływu lat będzie coraz lepszy pod tym względem. Cena, jaką musimy zapłacić, jest też niemała, jak na polską kieszeń, ale należy się z tym pogodzić, iż ceny oprogramowania opartego o syntezę mowy, nigdy nie zaliczały się do tych najtańszych. Nie mniej jednak zachęcam każdego właściciela dobrej strony internetowej do zapoznania się z tym produktem, ponieważ nie możemy zapominać o ludziach, którzy na prawdę mają ograniczony dostęp do zasobów internetu, a oprogramowanie z syntezą mowy na pewno ułatwiłoby im odszukanie najważniejszych informacji na stronie.

Core Data Framework – z czym to się je?

Posted on by
2
Core Data Framework - z czym to się je?
2010-03-15 22:42

Core Data to technologia opracowana przez Apple Inc. wprowadzona w życie wraz z pojawieniem się systemu Mac OSX Tiger (oraz w wersji 3.0 iPhone OS). Jest to jeden z głównych frameworków dostępnych w API Cocoa, który odróżnia tą bibliotekę od wszystkich innych dostępnych na rynku. Idea Core Data polega na utworzeniu modelu obiektów (klas) w graficznym edytorze dostępnym w Xcode (2.0 i wyżej), a następnie wykorzystaniu gotowego modelu w kodzie naszej aplikacji oraz w oprogramowaniu Interface Builder.

Główne funkcje Frameworku Core Data to
- integracja z mechanizmem Cocoa Bindings
- odpowiedzialność za wczytywanie i zapisywanie plików
- odpowiedzialność za mechanizmy undo i redo

Możemy wybrać sposób zapisu/odczytu danych spośród 3 dostępnych:
-pliki XML – zastosowanie doskonale sprawdza się przy projektowaniu i testowaniu
-baza danych SQLite – szybki i skalowalny sposób na przechowanie danych
-postać binarna – do bardziej zaawansowanych zastosowań

Z początku, kiedy zaczynałem swoją przygodę z programowaniem w Objective-C, często natrafiałem na pojęcie Core Data w różnych ksiązkach i kursach, ale nie wiedziałem za bardzo jak podejść do tego tematu, więc zacząłem poszukiwania w internecie. Ponieważ temat jest na tyle szeroki, że można było by napisać o tym pracę magisterską, nie chcę tutaj opisywać dokładnej struktury i dokumentacji tego frameworku, a raczej podać źródła do sprawdzonych rozwiązań, przydatnych kursów i przykładowych zastosowań. Zatem do dzieła ;)

Core Data w oficjalnej dokumentacji

Core Data Programming Guide
Core Data Utility Tutorial
Core Data Snippets
Xcode Entity Modeling Tools for Core Data

Ciekawe artykuły o Core Data

Core Data Class Overview
Core Data – Wikipedia

Tutoriale

Building Core Data Application
Cocoa for Scientists: iTunes-ifying a Core Data App
Drag and Drop Rearranging in Table Views with Core Data

Z czasem będę poszerzał tą listę o inne ciekawe pozycje. Chciałbym tutaj dawać sprawdzone artykuły, ale najpierw potrzebuję troszkę czasu by je ogarnąć :) Niestety wszystkie powyższe odnośniki prowadzą do artykułów i kursów w języku angielskim. Gdyby ktokolwiek znalazł inne ciekawe artykuły o Core Data napisane w języku polskim, proszę o kontakt lub pozostawienie ich tutaj w komentarzach.

Personas w Firefox 3.5 opóźniają pracę przeglądarki!

Posted on by
Reply
Personas w Firefox 3.5 opóźniają pracę przeglądarki!
2010-03-09 15:03

Właśnie odinstalowałem dodatek Personas, który zainstalował mi się wraz z najnowszą wersją Firefoxa i muszę przyznać, że mój „Płonący lis” nagle odżył. Przez długi okres czasu zastanawiałem się dlaczego moja przeglądarka zaczęła wolniej chodzić. A nie ma nic bardziej irytującego niż spowalniająca CPU przeglądarka, zwłaszcza jeśli pracuje się na co dzień w Internecie. Z początku myślałem, że jest to spowodowane jakimiś innym oprogramowaniem, które zainstalowałem na Macu. Dziwny był również fakt, iż mimo tego, że miałem zainstalowane Personas, to miałem je wyłączone i korzystałem z domyślnego wyglądu Firefoxa, do którego zdążyłem się przyzwyczaić przez parę lat. Dlatego radzę wszystkim ceniącym sobie wydajność komputera, odinstalować ten dodatek.

Nie rozumiem dlaczego Mozilla decyduje się na wypuszczenie najnowszej wersji przeglądarki wraz z wtyczką, która znacznie opóźnia pracę systemu. Moim zdaniem ludzie odpowiedzialni za przyszłość Firefoxa powinni pracować nad zwiększeniem wydajności pracy tego programu, a nie na odwrót. Warto również zwrócić uwagę na poczynania firmy Google, której produkt ma o wiele krótszy czas ładowania przeglądarki, a jest stosunkowo młodszy od Firefoxa. Poza tym uważam, że dodatki typu Personas nie powinny mieć w ogóle racji bytu na systemie takim jak Mac OSX, gdzie prawie każda dobra aplikacja posiada ustandaryzowane i intuicyjne GUI.

Pozycjonowanie stron interntowych w wielkim skrócie

Posted on by
Reply
Pozycjonowanie stron interntowych w wielkim skrócie
2010-02-26 19:10

Pozycjonowanie stron możemy podzielić na 2 główne kategorie:

Pozycjonowanie na stronie – sprowadza się do poprawnego sformatowania kodu strony (nagłówków, akapitów, obrazków itp) oraz opisania jej tak, aby była ona przejrzysta dla robotów.
Pozycjonowanie poza stroną - polega na umieszczaniu jak największej ilości prawidłowo opisanych odnośników do strony.

W tym artykule postaram się przybliżyć pozycjonowanie poza stroną, ponieważ z upływem lat stało się ono znacznie ważniejsze od pozycjonowania na stronie, ze względu na różne sztuczki i oszustwa, jakie stosowali twórcy stron, żeby ponieść ich pozycje. Aby wypozycjonować stronę internetową musimy zadbać o to, aby jak najwięcej linków kierowało bezpośrednio do niej. W tym celu możemy umieścić informacje o naszej stronie na ogólnie dostępnych katalogach stron i wyszukiwarkach. Na tych stronach podajemy zazwyczaj adres do naszej strony, słowa kluczowe oraz krótki opis. Ważne jest to żeby !dokładnie! przemyśleć opis strony oraz słowa kluczowe i konsekwentie używać tych samych przy dodawaniu nowych wpisów do wcześniej wspomnianych serwisów. Poniżej przedstawiam kluczowe (moim zdaniem) pozycje:

http://www.dmoz.org/ - Największy otwarty katalog
http://dir.yahoo.com/ – Katalog stron Yahoo
http://www.altavista.com/addurl/default – Katalog Altavista
http://www.google.pl/addurl/ – Dodaj stronę do wyszukiwarki Google
http://www.bing.com/webmaster/ – Dodaj stronę do wyszukiwarki Bing
http://maps.google.com/ – Umieść swoją firmę w serwisie Mapy Google
http://www.google.com/local/add/ – Centrum Lokalnych Biznesów Google

Zalecam również wyszukanie w Googlach stron dla fraz „Katalog Stron”, „Otwarty Katalog Stron”, „Katalog Seo”, „Darmowy katalog”, „Dodaj stronę do katalogu” etc. Na serwisach, które znajdziemy dla podanych fraz możemy pododawać informacje o naszej stronie internetowej. Należy pamiętać o tym, że im więcej linków do strony tym więcej będzie miała ona odwiedzin, a co za tym idzie będzie miała lepszą pozycję w wynikach wyszukiwania. Istotna jest również kwestia dodawania informacji do sprawdzonych i pewnych katalogów czy serwisów. Linki umieszczone na wiarygodnych, tematycznych i regionalnych stronach/forach mają o wiele większe znaczenie dla pozycjonowania.

http://yellowpages.pl/
http://www.gery.pl/
http://www.dodaj.pl/
http://dodano.pl/
http://www.vorbis.pl/
http://katalog.orx.pl/
http://www.seokatalog.pl/
http://www.webwweb.pl/
http://www.netsprint.pl/serwis/addurl

Możemy również umieszczać linki do naszej strony na różnego rodzaju blogach, forach internetowych, a nawet serwisach społecznościowych (facebook, nasza klasa, twitter, blip, myspace i inne). Innymi słowy możemy, umieszczać linki do naszej strony tam, gdzie istnieje prawdopodobieństwo pozyskania nowych klientów i odwiedzających. Ciekawym pomysłem może okazać się także poproszenie partnerów biznesowych, aby umieścili linki na swoich serwisach internetowych.

Czasami warto rozpatrzeć opcję dodania strony do płatnych katalogów lub reklamy na innym serwisie. Dla przykładu jeśli mamy piekarnię działającą tylko w obrębie Trójmiasta, warto pomyśleć o zareklamowaniu się na podstronach portalu trójmiasto.pl, gdansk.pl, gdynia.pl, piekarnie.pl, piekarnie.trojmiasto.pl itp. Możemy również wykupić domenę regionalną (piekarnia.gdańsk.pl) o ile taka opcja instnieje.

Ciekawe narzędzia:

Google Anatytics – to stronach internetowa, na której można sprawdzić statystyki odwiedzin naszej strony internetowej. Dostępna jest ona pod adresem http://www.google.com/analytics/ po wcześniejszym zalogowaniu się do usługi.

Alexa – to miejsce w którym możemy sprawdzić aktualną pozycję naszej strony. Strona dostępna jest pod adresem http://www.alexa.com/.

Ranking.net.pl – sprawdź aktualny Page Rank Twojej strony pod adresem http://www.ranking.net.pl/.

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 ;)

Snippety w środowisku Xcode

Posted on by
Reply
Snippety w środowisku Xcode
2010-01-19 23:20

Ostatnią godzinkę spędziłem na poszukiwaniu sposobu dodawania własnych snippetów w środowisku Xcode, aż w końcu natrafiłem na pewien ciekawy artykuł Scratching an Xcode Snippet, w którym autor opisuje parę sposobów jak można to zrobić. Moim zadaniem, najciekawszym i najprostszym ze sposobów jest zainstalowanie darmowej wtyczki do Xcode o nazwie: Completion Dictionary , która pozwala nam, nie tylko, tworzyć własne snippety, ale także zarządzać tymi, które instalują się razem z paczką. Zachęcam gorąco do pobierania :)

Pobierz: Completion Dictionary

Swoją drogą polecam Wam również zapoznanie się z produktami firmy Objective Development, która wyprodukowała ww. wtyczkę. Przy okazji znalazłem tam kilka ciekawych i darmowych aplikacji, które również dla Was mogą okazać się przydatne.