Ostatnio potrzebowałem na szybko stworzyć "ładne guziki", będące odnośnikami do wartych wyeksponowania części serwisu - jako że elementów takich było by kilka(naście) na łamach całego serwisu i jako iż nie przepadam za stosowaniem grafiki tam, gdzie nie trzeba wymyśliłem coś, co w moich odczuciach jest ładnym guzikiem z zastosowaniem samego HTML i CSS.
To jest ładny, gładki button!
Rozwiązanie takie daje mi możliwość zmienienia koloru guzika poprzez łatwą modyfikację 2(4) parametrów w CSS. Przejdźmy do kodu, na początek HTML:
<a href="#" class="fancyButton><span>To jest ładny guzik</span></a>
Jak widać całość jest semantycznie poprawna - ktoś mógłby się upierać, że SPAN nie jest potrzebny i można go wstawić dynamicznie za pomocą CSS, może i można, nie wszędzie działa - starałem by rozwiązanie ładnie się degradowało w starszych przeglądarkach (w IE6 prawie działa).
Koniec dygresji, CSS:
.fancyButton {
background: #0066CC;
border: 1px solid #0066CC;
display: inline-block;
height: 48px;
line-height: 48px;
font: 24px/48px "Trebuchet MS","Trebuchet",Arial,Helvetica,sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.fancyButton:hover {
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
}
.fancyButton span {
background: #53A9FF;
border: 1px solid #53A9FF;
color: white;
display: block;
text-align: center;
padding: 0px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 50%;
}
Na pierwszy rzut oka widać, że rozwiązanie nie będzie działać w starszych przeglądarkach - do zaokrąglenia używam border-radius, do przeźroczystości opacity - przeglądarki, które nie obsługują tych rozwiązań wyświetlą po prostu dwu-kolorowy prostokąt bez efektu najazdu (można go osiągnąć na sztywno zmieniając kolory w :hover, ale tracimy wygodę zmiany koloru w wielu guzikach na raz).
Demonstracja oraz informacje o degradacji w starszych przeglądarkach
URL Trackback
<OBJECT> to tag pozwalający na osadzanie np. obiektów multimedialnych na stronach WWW - najczęściej spotykamy się z nim np. na YouTube, gdzie w ten sposób osadzany jest odtwarzacz Flash.
Internet Explorer w wersji 6 radośnie ignoruje sobie ten tag i wymaga zastosowania tagu <EMBED> dlatego często obiekty osadzane są tak jak poniżej:
<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/sDsAPMhuABU&hl=pl_PL&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/sDsAPMhuABU&hl=pl_PL&fs=1" type="application/x-shockwave-flash" width="480" height="295" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
Dzięki zastosowaniu takiej notacji, zarówno IE6 jak i nowsze przeglądarki poprawnie wyświetlają daną treść. Oczywiście, żeby nie było różowo, są i tutaj haczyki - jeden właśnie spowodował zmarnowanie 30 minut mojego życia.
O ile jak już wcześniej wspomniałem IE6 przy napotkaniu tagu <OBJECT> w HTML zignoruje go, o tyle przetworzy jego zawartość i wyświetli dane z <EMBED> o tyle zupełnie inaczej ma się to z obiektami dynamicznie wstawianymi do DOMu poprzez Java Script - w takim wypadku IE6 ignoruje zarówno <OBJECT> jak i całą jego zawartość. Rozwiązaniem w takim wypadku jest "wyłuskanie" <EMBED> ze wstawianego kodu HTML i wyświetlenie tylko tego jednego znacznika dla IE6.
URL Trackback
Każdy, kto interesuje się kulturą pracy w Google wie, że pracownicy mogą poświęcić 20% swojego dnia pracy na rzeczy nie związane z ich głównym zajęciem takie jak tworzenie nowych produktów lub praca w innych zespołach. Oczywiście wszelkie stworzone w ten sposób projekty stają się automatycznie własnością Google, ale to już inna sprawa.
Jednym z efektów pracy w 20% jest Google Browser Size. Stwierdzić, że jest to prosta aplikacja jest lekkim nadużyciem - jest to diabelnie prosta aplikacja.
Zadaniem Browser Size jest pokazanie jaką część strony widzą użytkownicy różnych rozdzielczości ekranów bez konieczności przesuwania strony. Dodatkowo widzimy procentową ilość osób, które zobaczą elementy mieszczące się w oknie przeglądarki (uwaga, nie jest to wartość informująca, ile osób używa danej rozdzielczości - informuje ile osób przegląda stronę z oknem przeglądarki - a dokładniej oknem dokumentu - w tym lub wyższym rozmiarze [1]).
Osobiście uważam, że narzędzie to nie będzie się cieszyć dużym powodzeniem - po pierwsze nie bierze pod uwagę tego, że większość stron jest centrowana, przez co efekt pomiaru jest zniekształcony (poprawia się to, jeżeli przeskalujemy okno przeglądarki), a po drugie decyzja o tym, gdzie umiejscowić dany element powinna być podejmowana już na etapie tworzenia grafiki serwisu przez webdesignerów, a nie w momencie kodowania strony.
[1] edycja, zgodnie ze stroną O Projekcie jest to wielkość okna, a nie rozdzielczość
URL Trackback
Parę dni temu na reddicie moją uwagę przykuł artykuł opisujący nowatorską - wciąż rozwijaną - technikę tworzenia kodu HTML nazywaną Zen Coding.
Całe założenie opiera się na wykorzystaniu składni podobnej do tej znanej z selektorów CSS, która za pomocą odpowiednich narzędzi wbudowanych w edytor (więc nie jest to sama ideologia, ile technologia) jest szybko przekształcana na kod HTML. Może to wydawać się zagmatwane i nie jasne, ale wystarczy spojrzeć na poniższy przykład:
Jeżeli w edytorze wpiszemy ciąg znaków div#content>h1+p, który na pierwszy rzut oka wygląda dokładnie jak selektor CSS3, zostanie on zamieniony na następujący kod:
<div id="content">
<h1></h1>
<p></p>
</div>
Jak widać, Zen Coding oszczędził nam dosyć dużej ilości kliknięć w klawiaturę. Poza przekształcaniem prostych łańcuchów elementów mechanizm pozwala na dodawanie ID i nazw klas, powielanie elementów oraz numerowanie kolejnych znaczników:
E - wstawia element danego typu
E#id - wstawia element oraz nadaje mu parametr ID o zadanej wartości
E.class - wstawia element nadając mu wybraną klasę
E>N - wstawia element, po czym informuje parser, że kolejny element jest jego potomkiem
E+N - wstawia dwa elementy jako potomki tego samego rodzica
E$*N - wstawia N takich samych elementów, znaczek $ zostanie zastąpiony itteratorem
Najbardziej skomplikowanym może wydawać się ostatni zapis - jednak jest on dosyć prosty kiedy już go ujrzymy. Co np. wygeneruje taki kod: ul>li.item-$*5>a? Jeżeli ktoś podał poprawną (umieszczoną niżej) odpowiedź, to praktycznie może zacząć już korzystać z Zen Coding ;-)
<ul>
<li class="item-1"><a></a></li>
<li class="item-2"><a></a></li>
<li class="item-3"><a></a></li>
<li class="item-4"><a></a></li>
<li class="item-5"><a></a></li>
</ul>
Oczywiście jest to tylko podstawowa funkcjonalność - ZC oferuje także np. skróty dla CSS oraz gotowe szablony HTML jednak to rozwijania składni HTML będziemy używać najczęściej.
Na razie Zen Coding doczekało się oficjalnego wsparcia w następujących edytorach:
- TextMate
- Aptana
- Coda
- NetBeans
- Espresso
- Web IDE
- TopStyle
- Sublime Text
- Dreamweaver
To ja poproszę jeszcze o wsparcie dla PhpEd ;-)
Poniżej zamieszczam filmik, demonstrujący wykorzystanie Zen Coding dla zademonstrowania jak wpływa on na szybkość programowania:
URL Trackback
Ten wpis ma raczej rodzaj notki dla siebie na przyszłość niż jakiegoś objaśnienia jak poprawnie stosować HTTPS.
Już drugi raz zdarzyło mi się, że mimo iż HTML wyglądał poprawnie Internet Explorer 6 zgłaszał problemy z nie zaufanymi treściami na witrynie. Pierwszy odruch - pewnie jakiś klient wstawił obrazek z innego serwera i na sztywno linkuje do http://serwer.
Niestety, nic z tego - IE w swojej łasce nawet nie powie nam czego nie załaduje. Zostaje grzebanie ręczne - eliminowanie po kolei kawałków HTML i sprawdzanie co nam psuje szyki.
Jak się okazuje, niebezpieczeństwem dla IE jest NASZ komputer a dokładnie <iframe>, który jest mi potrzebny do małych magicznych tricków, a który jako domyślnie podany src ma ... about:blank. Tak, about:blank nie jest poprzedzone https:// więc traktujemy jako niebezpieczną witrynę.
Rozwiązanie na szybko? Zrób plik pusty.html i niech to on domyślnie ładuje się w ramce. Niestety - jeden minus - IE podwójnie wyświetli komunikat o certyfikacie - raz dla strony, raz dla treści w ramce. Niby można tworzyć <iframe> dynamicznie przez JS, ale miało być rozwiązanie na szybko.
URL Trackback
Przed chwilą dzięki Redditowi trafiłem na stronkę Dive Into HTML5 opisującą nowości, jakie przynosi nam HTML5.
Strona wyglądem przypomina książkę - nic w tym dziwnego, ponieważ z tego co pisze autor po ukończeniu dzieła zostanie ono wydane w wydawnictwie O'Reilly (znanego z licznych serii książek z dziedziny IT i nie tylko).
Jak można wywnioskować, strona jest w trakcie tworzenia - na razie autor pokrótce opisał element . Pozostaje zaglądać na stronę częściej. Ja na pewno będę ;-)
URL Trackback
