Archiwa

Mapa Polski i SVG

Istnieje wiele technik na pokazanie mapy Polski, np. flash lub html + css. Każda z nich ma swoje wady i zalety. Warto jednak zwrócić uwagę na format grafiki wektorowej SVG (ang. Scalable Vector Graphics). Pliki, o tej zawartości, z reguły mają rozszerzenie .svg lub .svgz (dokument SVG skompresowany w formacie gzip). Trzeba pamiętać też o tym, aby z serwera był wysyłany z mime-type image/svg+xml.

Przygotowanie zawartości wektorowej nie jest łatwe, jeśli mielibyśmy robić to ręcznie. Z pomocą jednak przychodzi nam narzędzie o nazwie Inkscape – bezpłatny program do grafiki wektorowej. Nie wspiera[......]

26-03-2010 | kategoria: Artykuły, CSS, HTML i XHTML, Skrypty | Komentarze (0)

Tooltips – eleganckie title do elementów

Niekiedy chcemy w naszych projektach urozmaicić wygląd naszego domyślnego atrybutu title i stworzyć eleganckie tzw. tooltip-y. W internecie jest już sporo różnych rozwiązań na ten temat. Na pewno nie zaszkodzi podać i własne rozwiązanie, pozwalające na ulepszenie atrybutu title. Takie „bezobsługowe” tooltip-y.

Podstawowe cechy to:

Jeśli masz wyłączony JavaScript, to dostępny jest domyślny atrybut title.
Rozdzielenie kodu JavaScript i CSS.
Możliwość dowolnej kombinacji stylów dla naszego tooltip-a.
Bezobsługowe działanie, czyli poza samym title="test", nic nie trzeba robić.

W załączonym przyk[......]

13-03-2010 | kategoria: CSS, HTML i XHTML, JavaScript | Komentarze (0)

Zrzut „ekranu” przeglądarki

Podczas pracy nierzadko chcemy komuś przekazać coś, co widzimy w oknie swojej przeglądarki (zrzut okna przeglądarki), np. może to dotyczyć jakiegoś komunikatu o błędzie. Tradycyjnie wykonalibyśmy to przez kliknięcie w CTRL+Print Screen i to, co zostało skopiowane do bufora pamięci moglibyśmy wkleić do dowolnego programu graficznego. Jest to dość uciążliwe, a tym bardziej dla osób, które nie do końca potrafią to zrobić.

Niemniej jednak z pomocą może nam przyjść ciekawa wtyczka do przeglądarki Firefox, która nazywa się Screengrab!. Działanie jej jest dość proste. Po instalacji w prawym dolnym r[......]

16-01-2010 | kategoria: HTML i XHTML, Programowanie, Przeglądarki | Komentarze (0)

Przełączanie widoczne / niewidoczne – javascript + css

Czasem chcemy, aby dany element pojawiał się lub znikał po klinięciu w inny element, np. opcje w ten sposób można pokazywać. Jednym ze sposobów może być stworzenie linka Opcje i podpięcie do niego opcji pokaż / ukryj.

Zastosowanie tutaj linka ma drobną zaletę: kliknięcie od razu kieruje nas do podanego w linku zasobu. Niemniej jednak można kod podany przez nas przerobić tak, aby działał dla każdego elementu. Kolejną sprawą jest to, że wystarczy nadać elementowi a klasę toggle i potem za pomocą JavaScript-u odpowiednio je odnaleźć i podpiąć funkcję. Zatem zaczynamy po kolei.

Najpierw musimy zeb[......]

30-12-2008 | kategoria: CSS, HTML i XHTML, Programowanie, Skrypty | Komentarze (0)

Poprawne osadzanie Flash w (X)HTML bez javascript-u i poprawka Eolas dla IE

Jest wiele sposobów na poprawne osadzanie flash-a w (X)HTML-u. My proponujemy rozwiązanie, które:

do uruchomienia flash-a nie wymaga javascript-u
nie wymaga znacznika
załatwia problem aktywacji flash-a po poprawce Eolas dla IE za pomocą javascript-u

Najpierw prosty kod html dla każdej przeglądarki uruchamiający flash-a:

Alternatywna zawartość w przypadku braku flash-a.

Standardowo parametry flashvars przekazujemy przez , ale przy poprawce Eolas dla Internet Explorera (IE):

// Fix activating flash, qt, etc. objects
fixFlash = function() {
theObjects =[......]

21-05-2008 | kategoria: Flash, HTML i XHTML | Komentarze (1)

Mapa Polski – tylko HTML i CSS

Stworzenie mapy, w zasadzie jakiejkolwiek, zawsze stawiało pytanie: jak to zrobić? A może lepiej: w czym to zrobić?

Generalnie możliwości jest wiele, ale my skupimy się na stworzeniu mapy używając do tego tylko HTML i CSS. Tak, jak było to w przypadku mapy świata, tak w tym przypadku przygotowanie takiej mapy to 2 kroki:

Przygotowanie odpowiednio pociętej grafiki, czyli wszystkie województwa i cała mapa Polski w jednym obrazku.
Przygotowanie arkusza stylów z odpowiednimi przesunięciami bloków ....

Cały trick polega na tym, aby odpowiednio przesuwać tło w momencie zdarzenia hover/focus.[......]

22-01-2008 | kategoria: CSS, HTML i XHTML | Komentarze (6)

Quiz – znajomość elementów HTML i właściwości CSS

Ile pamiętasz elementów html, a ile właściwości CSS? Może łatwo się przekonać o tym biorąc udział w quizie na znajomość elementów HTML i właściwości CSS.

21-12-2007 | kategoria: CSS, HTML i XHTML | Komentarze (0)

Edytor WYSIWYG w 2007 roku

Który wybrać edytor WYSIWYG? Nie jest to wcale takie proste,ale test Evaluation of WYSIWYG editors (2007) na pewno nam to ułatwi. Przetestowano wiele funkcjonalności kilkunastu edytorów WYSIWYG i podsumowano wyniki w jednej tabeli.

7-12-2007 | kategoria: HTML i XHTML | Komentarze (0)

Błędna interpretacja przez IE atrybutu alt w znaczniku img

Internet Explorer w wersji 6 w znaczniku img atrybut alt traktuje również jako title. Alt jest do czegoś innego, niż pokazywanie krótkiej informacji w tzw. dymku. Alt funkcjonuje gdy:

obrazek się dopiero ładuje
z jakiś powodów obrazek nie może być wczytany, np. zły adres url do niego
masz wyłączoną grafikę
używasz przeglądarki tekstowej
używasz screenreadera (przeglądarki czytającej na głos)
wyszukiwarki przeszukują zasoby

Można temu zapobiec przez niewielki skrypt poprawiający ten błąd:

function noAltTooltip(){
images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++)
{
var ti[......]

10-08-2007 | kategoria: HTML i XHTML, Skrypty | Komentarze (0)

HTML i XHTML – najczęściej zadawane pytania (FAQ)

Autor przekładu: Robert Błaut (Źródło: http://standards.blaut.biz/xhtml-faq/)
Lokalizacja dokumentu: http://quiris.klub.chip.pl/w3c/xhtml-faq.htm

Dokument ten jest tłumaczeniem oryginalnego HTML and XHTML Frequently Answered Questions.
Przekład jest nienormatywny i może zawierać błędy powstałe w czasie tłumaczenia. Status normatywny posiada jedynie oryginalna wersja w języku angielskim dostępna pod adresem http://www.w3.org/MarkUp/2004/xhtml-faq.