Kiedy nie używać flasha?

Samuel Ryan napisał:

Niedawno zdałem sobie sprawę, że już od 10 lat robię witryny we Flashu. Technologia ta przebyła długą drogę od czasów Flasha 4, gdy pierwszy raz wgryzałem się w ActionScript, generowanie kluczowych klatek i pikselowe fonty. Przez te wszystkie lata widziałem i zrobiłem wiele projektów. Niektóre z nich wykorzystywały Flasha w bardzo użyteczny sposób, inne zaś były zupełnie bezsensowne. Bywało, że wdrożenie Flasha szkodziło firmie, odciągało od celu istnienia witryny i prowadziło do kiepskich wyników (a do tego stworzenie takiej strony kosztowało firmę niemało). W świecie, w którym zbyt wiele firm chce mieć flashowe witryny, i zbyt mało projektantów potrafi sobie dobrze z Flashem radzić, dobrze jest trzymać się krótkiej listy miejsc, w których Flasha nie powinno być (za nielicznymi wyjątkami).[…]

Więcej: Sześć miejsc strony WWW, w których pod żadnym pozorem nie powinno być Flasha.

Jak stworzyć stronę do wydruku

Po stworzeniu fantastycznie wyglądającej strony warto zastanowić się jak nasza strona będzie wyglądała na wydruku. To ważne, bo ile razy zdarzyło się wam po prostu wydrukować stronę w celu dalszego jej wykorzystania, do przeczytania w podróży czy też do spokojnego zaznaczenia sobie co ciekawszych fragmentów?

Comparison of sans and sans-serif fonts.Obrazek z Wikipedia

Faktycznie w przypadku blogów można z tym troszkę dyskutować, ale tylko troszkę. W przypadku pozostałych stron nie da się z tym dyskutować, ponieważ jest to absolutna konieczność.

Stronę buduje wielu elementów z których wiele nie wnosi niczego o wydruku, ba nawet go psując, powodując że drukarka wypluwa o kartkę czy dwie z dużo, bo wydrukowało się kilka menu, jakieś nagłówki, jakieś nikomu na wydruku niepotrzebne stopki. W wersji pesymistycznej jest jeszcze gorzej: na pierwszej stronie mamy menu zajmujące 1/3 szerokości wydruku, a potem 20 kartek z wydrukiem wąskiej kolumny z treścią. Z drugiej strony nie ma na wydruku informacji, które mogą być przydatne, które umożliwią szybszy kontakt biznesowy czy też zapewnią nową wizytę w przypadku przekazania kartki dalej.

Sprawdź czy twoja strona dobrze wygląda na wydruku:

Czytaj dalej Jak stworzyć stronę do wydruku

501 Not Implemented

Po raz pierwszy w życiu użyłem statusu błędu 501. Sam status jest statusem bardzo ciekawym i jako taki nigdy nie powinien wystąpić w gotowej aplikacji. Informuje on, że wszystko jest właściwie w porządku, oprócz tego, że pytana funkcjonalność nie została zaimplementowana.

Świetnie taki błąd sprawdza się natomiast w czasie pracy nad aplikacją, informując developera o brakach funkcjonalnych.

Moje użycie polega na wyświetleniu właśnie 501-nki wtedy kiedy nie znajdujemy pliku  z definicją modelu lub pliku z definicją widoku.

Na sam koniec trzeba to jeszcze będzie przepuścić  przez jakiegoś helpera, który powie, czy przypadkiem to co znajduje się w requeście nie kwalifikuje się do wyrzucenia błędu 404.

Lista ikonek – tworzymy podcień

Wcześniejszy wpis w którym opisane było tworzenie listy ikonek pod tytułem pozwolił na wytworzenie następującej listy ikonek.

ikony-bez-cienia.png

Ładnie toto wygląda, jest małe i wygodne. Ale może by tak dodać jeszcze cień pod każdą z graficzek?

ikony-z-cieniem.png

Sposoby na uzyskanie czegoś takiego są dwa. Jeden polega na takiej modyfikacji pierwotnego pliku, żeby cienie były w nim obecne. Drugi polega na dołożenia cienia pod każdy z elementów, co niestety wiążę się z dodatkową grafiką. Przedstawię ten drugi.

HTML się nie zmienił:
<ul>
<li class="d"><a href="#">d</a></li>
<li class="t"><a href="#">t</a></li>
<li class="w"><a href="#">w</a></li>
<li class="a"><a href="#">a</a></li>
<li class="b"><a href="#">b</a></li>
<li class="c"><a href="#">c</a></li>
</ul>

CSS wygląda tak

<style type="text/css">
li
{
background:red url(shadow.gif);
list-style:none;
margin:0;
float:left;
margin-right:3px;
padding-bottom:5px;
padding-right:4px
}
a
{
background-image:url(socicons.gif);
display:block;
width:16px;
height:16px;
text-indent:-99em
}
li.t a{background-position:-16px}
li.w a{background-position:-32px}
li.a a{background-position:-48px}
li.b a{background-position:-64px}
li.c a{background-position:-80px}
</style>

Jeżeli porównasz do poprzedniego rozwiązania zauważysz że nie ma za dużych zmian.

Jak wytworzyć sam cień w Photoshopie?

  1. Utwórz obrazek o wymiarach 22×22.
  2. Wypełnij go tym tłem które potrzebujesz.
  3. Utwórz nową warstwę.
  4. Na nowej warstwie utwórz kwadrat leżący w górnym lewym rogu o wymiarach 16×16.
  5. Wypełnij go kolorem tła.
  6. Dodaj cień z ustawieniami
    1. Przezroczystość 50%.
    2. Kąt 135.
    3. odległość 3px.
  7. Zapisz jako obrazek na stronę www.
  8. Używaj.

Piliki użyte w przykładzie

Wszystkie użyte pliki możesz pobrać (zawiera plik psd): ikony-podcien.zip

Inne podejścia do tematu list

Lista ikonek pod artykułem

W 8 kroków do zmniejszenia ilości obrazków na stronie Łukasz Sobek rozprawia się z prezentacją odnośników do portali społecznościowych. Wywiązała się dość burzliwa dyskusja wraz z przykładami jak to zrobić: Semantyka HTML: lista nieuporządkowana i ten wpis prawie rozwiązuje zagadnienie.

Dlaczego prawie?

Są w nim dwa niedociągnięcia: nadmiarowy span oraz „display:none” którego należy unikać, ze względu na „nieczytanie” przez czytniki głosowe. Skoro nie widać, to nie trzeba czytać, prawda?

Jak to poprawić?

Usunąć tag „span”

Jest … niepotrzebny.

<ul>
<li class="d"><a href="#">del.icio.us</a></li>
<li class="t"><a href="#">technorati</a></li>
<li class="w"><a href="#">wykop</a></li>
</ul>

Schować tekst za pomocą tekst indent

<style type="text/css">
li{
background-image:url(socicons.gif);
list-style:none;
margin:0;
float:left;
margin-right:2px
}
a{
display:block;
width:16px;
height:16px;
text-indent:-99em
}
li.t{background-position:-16px}
li.w{background-position:-32px}
</style>

Inne uwagi

  • ograniczyć nadmiarowy css
  • ograniczyć nadmiarowe identyfikatory

I to by było na tyle.

dodaj feeda artykułów po tagu

Chwilę temu we wpisie: dodaj feeda z wynikami wyszukiwania poradziłem jak dodać feeda z wynikami wyszukiwani, dlatego nie będę przepisywał tamtego artykułu.

Dzisiaj dodamy feeda z wpisami dla danego tagu.

Kod należy dodać w pliku używanego szablonu w sekcji „head”.

if ( is_tag() ) {
echo '<link rel="alternate" type="application/atom+xml" title="' . get_bloginfo('name') . ': tag: : ' .
single_tag_title("", false) . '" href="' . get_tag_link($tag_id) . 'feed/" />';
}

Oczywiście wpis jest bardzo prosty i obejmuje tylko serwisy z kanoniczną postacią adresów URL.

Oznaczanie artykułów

Wypisując porady dotyczące budowania strony, szczególnie te tagowane jako poradnik webmaster doszedłem do wnioski, że należy je oznaczać, prezentując ich stopień trudności, ponieważ czasem wpisy dotyczą rzeczy podstawowych, a czasem rzeczy bardzo zaawansowanych. Co oznacza, że pojawią się dodatkowe oznaczenie, dzięki któremu łatwo będzie się można zorientować do jakiej grupy należy dany wpis.

Zdecydowałem, że podzielę informację na 3 poziomy:

  1. podstawowy (oznaczony na zielono oraz liczbą 1)
  2. zaawansowany (oznaczony na pomarańczowo  oraz liczbą 2)
  3. ekspercki (oznaczony na czerwono oraz liczbą 3)

Jeszcze nie zdecydowałem, ani nie wymyśliłem jak to zaprezentować graficznie, ale… mam nadzieję, że w prosty sposób ułatwi to odbiór.

Dodatkowo część artykułów, np. ten, nie będzie oznaczany żadnym poziomem i będą adresowane do wszystkich poziomów.

Jak sądzicie?