OptArt - Twój sukces w sieci!

WordCamp 2011

admin — Tue, 20 Dec 2011 10:57:28 +0000

Tradycją naszą staje się aktywna obecność na corocznych konwentach WordCamp. I w tym roku z niecierpliwością czekaliśmy na 9 dzień ostatniego miesiąca roku – pierwszy z dwóch konferencyjnych dni.

Spotkanie WordCamp odbyło się tym razem w Poznaniu. Późnym przedpołudniem bo już o 10.30 rozpoczęło się pierwsze wystąpienie. Na naszego prelegenta musieliśmy poczekać do 14.00 następnego dnia, ale cóż – było warto, a czas “oczekiwania” się nie dłużył.

Konrad Dzwinel zaprezentował się z tematem Plugin czyli luka bezpieczeństwa. Dla uczestników konferencji stworzyliśmy tablice dotyczące zabezpieczania WordPress’a i pluginów – zapewniamy, że mogą okazać się bardzo pomocne w codziennej pracy. Zarówno owe tablice jak i całą prezentację udostępniamy czytelnikom naszego bloga. Zapraszamy do pobrania i zapoznania się z ich treścią.

Prezentacja Tablica1 Tablica2

Optymalność a wydajność

admin — Sat, 05 Nov 2011 10:37:17 +0000

Trzecia odsłona Optymalności – Wydajność; na naszym Blogu już dziś.

Co to jest?

Wydajność serwisów internetowych omawiana jest w kontekście badań zespołów tworzących Yahoo i Google oraz narzędzi dla webmasterów stworzonych przez te firmy: YSlow i PageSpeed. Poniżej przedstawiamy w punktach sugestie dotyczące kodu HTML i CSS, ich wpływ na wydajność i komentarz odnoszący się do Optymalności kodu w szerszym jej rozumieniu:

Zmniejszenie rozmiarów HTML. Zmniejszenie ilości kodu to zmniejszenie wielkości przesyłanych plików. Proponowane metody to wycinanie nieobowiązkowych tagów zamykających oraz innych nie będących niezbędnymi danych (type dla script, style, meta encoding, inne). Druga metoda nie niesie negatywnych konsekwencji i jest wręcz zgodna ze zmianami zachodzącymi w specyfikacji HTML. Natomiast pierwsza, prowadzi do nieczytelności kodu, utrudniając jego odczyt i modyfikację w przyszłości, w związku z czym nie jest polecana.
Odpowiednia konfiguracja JavaScript. Ustawienie pewnych atrybutów umożliwia modyfikację domyślnego, liniowego ładowania strony:
Ustawienie atrybutu async dla asynchronicznego ładowania skryptów;
Ustawienie atrybutu defer dla ładowania skryptów po przetworzeniu strony.
Dobór odpowiedniego formatu i kompresji obrazków.
Uniknięcie efektu ponownego obliczania pozycji i właściwości elementów (ang. reflow).
Efekt ten wynika ze stosowania efektów JavaScript, dodawania „w locie” klas i identyfikatorów, nowych elementów oraz nie definiowania rozmiarów obrazków wewnątrz dokumentu HTML.
Zmniejszenie wielkości plików CSS. Należy używać deklaracji jednokrotnie (grupowanie). Powinno się przy tym uważać, by nie uczynić arkusza stylów mniej czytelnym i tym samym trudniejszym w zarządzaniu. Przykładowo, lepszym zapisem będzie:

h1, h2 {color: #000;} h2, h3 {font-size: 16px;} h1 {font-size: 18px;} h3 {color: #ddd;}

niż:

h1 {color: #000; font-size: 18px;}
h2 {color: #000; font-zize: 16px;}
h3 {color: #ddd; font-size: 14px;}

Jednak w bardziej rozbudowanych przypadkach może to powodować problemy w edycji. Oszczędność ilości kodu i jego lepszą czytelność można również uzyskać stosując zapisy skrócone, np.:

p {
font: italic 12px / 16px Arial;
padding: 5px 0 10px;
}

zamiast:

p {
font-family: Arial;
font-style: italic;
font-size: 12px;
line-height: 16px;
padding-top: 5px;
padding-bottom: 10px;
}

Używanie efektywnych selektorów CSS. W implementacji Mozilli (i prawdopodobnie pozostałych przeglądarek), każda reguła czytana jest „od prawej do lewej”. Przeglądarka dla każdego kolejnego poziomu decyduje, czy reguła ma zastosowanie dla konkretnego elementu dokumentu HTML czy nie. W związku z tym im mniej zagnieżdżeń, tym szybsze dopasowanie reguł. Twórcy serwisów internetowych często poprzedzają regułę dla elementu o konkretnym ID, listą identyfikatorów elementów nadrzędnych. Jest to niepotrzebne ze względu na unikalność identyfikatorów w obrębie dokumentu HTML:

#id1 {…}
#id1 #id2 {…}
#id1 #id3 {…}
#id1 #id3 #id4 {…}

Równie częste i równie niepotrzebne jest odnoszenie się przed identyfikatorem do typu elementu:

ul#nav_top {…}
div#header {...}

Rzadziej spotykane w kodzie CSS nieefektywne selektory, to odwołania do elementów uniwersalnych, nie zawężające w żaden sposób pola wyszukiwania:

* ul {…}
body div {…}
html form {…}

Zalecenia Google w tej kwestii posuwają się do używania klas nawet tam, gdzie nie jest to konieczne, jeśli tylko można uczynić selektory CSS bardziej szczegółowymi. Jednak w ten sposób wprowadza się nadmiar w kodzie HTML, w związku z czym nie jest to polecana przez autora pracy technika.

Dodawanie CSS w sekcji head dokumentu HTML. Wyświetlanie strony wstrzymywane jest do załadowania przez przeglądarkę wszystkich arkuszy stylów. W związku z tym umieszczanie stylów w treści dokumentu powoduje efekt „białego ekranu”.
Zmniejszenie liczby zapytań HTTP. RTT (ang. Round-trip time) to czas, jaki zajmuje klientowi wysłanie zapytania o dany element i serwerowi wysłanie odpowiedzi. Twórca serwisów internetowych nie ma wpływu na czas pojedynczego RTT, natomiast zmniejszając liczbę pobieranych elementów może wpłynąć na liczbę zapytań.

Jest to do osiągnięcia przez:

zmniejszanie liczby pobieranych obrazków (technika CSS Sprites – łączenie wielu obrazków tła w jeden, mapy obrazków);
zmniejszanie liczby pobieranych arkuszy stylów (łączenie wielu plików tworzonych w procesie kodowania strony w jeden);
zmniejszanie liczby pobieranych skryptów JavaScript.

Rozwiązania sytuacji sprzecznych zaleceń

Przedstawione we wcześniejszych wpisach zalecenia, w wielu wypadkach były wspólne dla kilku aspektów optymalności kodu. Zazwyczaj dbając nawet tylko o jeden z aspektów szeroko pojętej optymalności, podnoszona jest problematyka innych obszarów dotyczących jakości kodu. W toku tworzenia serwisów internetowych zdarzają się jednak sytuacje, gdy wytyczne są ze sobą sprzeczne. Przykładem takiej sytuacji może być chociażby zagadnienie wydajności i użyteczności kodu CSS. Najwydajniejsze rozwiązanie to przypisanie każdemu z elementów, osobnego identyfikatora. Jednak użyteczność takiego kodu jest co najmniej dyskusyjna.

Wydaje się, że dobrym rozwiązaniem sytuacji sprzecznych zaleceń może być zastosowanie kaskady na wzór rozwiązania znanego z CSS. Pierwszeństwo powinny mieć tu zalecenia dostępności. Nadrzędnym celem tworzenia serwisów internetowych jest wszakże przekaz informacji, a więc kluczowe znaczenie ma możliwość łatwego dostępu do nich. Kolejnym istotnym elementem jest użyteczność. Zalecenia z tej grupy zagadnień sprawiają, że użytkowanie serwisu jest wygodne.

Następnym elementem jest SEO, czyli zagadnienia warunkujące łatwość odnalezienia serwisu poprzez wyszukiwarki internetowe. Wydajność została wymieniona jako ostatni element ze względu na tempo wzrostu mocy obliczeniowych tak komputerów stacjonarnych, jak i urządzeń mobilnych oraz na równie szybki wzrost szerokości pasma internetowego dla użytkownika końcowego.

Rysunek: Procent łączy szerokopasmowych w Polsce

Należy mieć na uwadze, że w specyficznych sytuacjach przedstawiona powyżej hierarchia może nie być najodpowiedniejsza. Dla przykładu, serwisy dedykowane dla urządzeń mobilnych za kluczowe mogą uznać aspekty wydajności.

Optymalność a SEO

admin — Thu, 25 Aug 2011 07:44:36 +0000

Kolejna odsłona optymalności to SEO. Dziś powiemy kilka słów na ten temat.

Co to jest?

SEO (ang. Search Engine Optimisation) to powszechnie przyjęta nazwa procesu optymalizacji serwisów internetowych pod kątem wyszukiwarek. Jest to jedna z części bardziej ogólnie pojmowanego pozycjonowania. Uwzględnia również działania poza samą stroną internetową, takie jak pozyskiwanie odnośników do serwisu czy tworzenie zaplecza (czyli powiązanych tematycznie stron posiadających odnośniki do strony pozycjonowanej).

Algorytmy tworzenia rankingów stron internetowych, w tym algorytmu najpopularniejszej wyszukiwarki, Google, są tajne. Dlatego działania związane z SEO opierają się na wytycznych dla twórców stron internetowych publikowanych na stronach wyszukiwarek oraz na wynikach przeprowadzanych przez pozycjonerów testów. Wyniki tych ostatnich ulegają jednak z czasem zmianom ze względu na ciągły rozwój algorytmów oceny stron.

Główne techniki SEO

Techniki wykorzystywane w optymalizacji stron pod kątem wyszukiwarek omówimy na podstawie ogólnie znanych zaleceń oraz wytycznych stworzonych przez firmę Gogle dla webmasterów. W związku z tym, zawarty jest w nich od razu stosunek twórców wyszukiwarek do poszczególnych technik. Należy zauważyć, że nie ma dowodów na to, że nieprzestrzeganie niektórych z wytycznych wpływa negatywnie na pozycję strony. Nie można jednak założyć, że nie będzie miało takiego wpływu w przyszłości.

Ogólnie znane zalecenia:

Treść na stronie powinna być unikalna i wartościowa dla potencjalnego użytkownika, powinna też posiadać odpowiednią gęstość słów kluczowych (około 5%).
Każda strona w sekcji meta powinna mieć określone unikalne i odpowiadające treści strony, elementy title (tytuł strony), keywords (słowa kluczowe), description (opis).
Żadna treść na stronie nie powinna być dostępna jedynie dla przeglądarek obsługujących JavaScript i Iframe. Techniki te nie są zaimplementowane w robotach wyszukiwarek.

Poniżej przedstawiamy zasady określone na stronie Google wraz z komentarzem:

Należy unikać ukrytego tekstu i ukrytych linków. Częstą praktyką SEO jest dodawanie tekstów ukrytych dla użytkownika poprzez style CSS. Są one jednak widoczne w kodzie strony oraz dla przeglądarek tekstowych. Ma to na celu zwiększenie gęstości słów kluczowych na stronie oraz stosunku objętości kodu do właściwej treści serwisu. Według pozycjonerów ma wpływ na ocenę strony. Techniki te jednak są stosunkowo łatwe do wykrycia i mogą szybko spowodować zablokowanie strony.
Nie powinno się stosować technik takich jak maskowanie (ang. cloaking) lub podstępne przekierowania. Techniki takie wprowadzają użytkownika w błąd, są też wykorzystywane do wyłudzania haseł do kont bankowych czy stron internetowych. Wykrycie takich działań powoduje wpisanie strony do listy niebezpiecznych stron i wyświetlanie przed wejściem na stronę odpowiedniego komunikatu informującego użytkownika o zagrożeniu.

Rysunek: Powiadomienie o zagrożeniu przed wejściem na podejrzaną stronę w przeglądarce Chrome, źródło: http://www.webdevelopersnotes.com/

Nie należy wysyłać do Google automatycznych zapytań. Pozycjonerzy często tworzą oprogramowanie automatycznie odpytujące Google o wyniki dla danego hasła. Pozwala to na zautomatyzowanie procesu śledzenia pozycji strony. Zbyt wiele zapytań z jednego adresu w określonym czasie powoduje jednak czasową blokadę możliwości dalszego ich wysyłania z tego adresu.
Nie powinno się zamieszczać na stronach słów kluczowych niezwiązanych z treścią. Pozycjonerzy często wypełniają stronę jak największą liczbą słów kluczowych. Bywa, że część z nich jest niezwiązana z treścią strony. Może to powodować trafienie na stronę osób nie zainteresowanych jej tematyką, co wpływa niekorzystnie na jakość wyników wyszukiwania.
Nie należy tworzyć wielu stron, poddomen ani domen powielających tę samą treść. Zalecenie to odnosi się do rozpowszechniającego się obecnie problemu powielania w Internecie tych samych treści. Pomijając kwestie prawne, takie działania sprawiają że wyszukując niektórych hasła, ciężko dotrzeć do wartościowych informacji, nie będących kopią innych stron. Z punktu widzenia pozycjonerów jest to z kolei łatwy sposób na szybkie stworzenie wielu stron posiadających odnośniki do strony pozycjonowanej.
Nie należy tworzyć stron, które działają destrukcyjnie, np. wyłudzają dane, instalują wirusy, konie trojańskie i inne szkodliwe oprogramowanie. Strony tego typu często wykorzystują literówki we wpisywanych przez użytkowników nazwach domen lub ukryte przekierowania opisane w jednym z wcześniejszych punktów.
Powinno się unikać stron przejściowych (ang. doorway), tworzonych wyłącznie dla wyszukiwarek oraz wszelkich programów stowarzyszeniowych generujących jedynie pliki cookie, a nie oryginalną treść. Jedną z technik pozycjonerskich jest tworzenie dwóch wersji strony, z których jedna jest wyświetlana dla użytkowników, druga dla robotów rozróżnianych np. po adresie IP. Powoduje to również fałszowanie wyników wyszukiwania i jest obecnie wykrywane przez wyszukiwarkę Google.
Jeśli witryna uczestniczy w programie stowarzyszeniowym, musi zawierać również przydatne treści. Należy dawać użytkownikom dobry powód do odwiedzenia danej witryny: unikatową i użyteczną treść

Optymalność serwisów w językach HTML 5 i CSS 3: CSS 3

admin — Tue, 09 Aug 2011 15:21:22 +0000

Dzisiejszy wpis to kontynuacja tego, o czym pisaliśmy tydzień temu. Wtedy omawialiśmy optymalność w kontekście HTML 5, dziś zajmiemy się stylowaniem, czyli CSS 3.

CSS 3

W CSS 3 w wielu miejscach wprowadzono zmiany upraszczające tworzenie kodu stron internetowych. Jakie? CSS 3 przede wszystkim umożliwia generowania elementów warstwy prezentacji bezpośrednio przez atrybuty i właściwości a nie, jak do tej pory, statyczne obrazki. Zmiany i ich wpływ na sposób kodowania typowych elementów stron internetowych omawiamy poniżej:

Obramowania

border-colors – tworzenie gradientów z obramowań
border-image – tworzenie obramowań z obrazków

div {border-image: url(border.png) 10 10 10 10 round round;}

border-radius – jedna z najciekawszych z wymienionych właściwości. Pozwala na zaokrąglanie elementów HTML. Zaokrąglenia są często stosowanie w projektach graficznych i do tej pory powodowały konieczność tworzenia wielu nadmiarowych grafik i elementów do przeniesienia na kod HTML/CSS.

#border-radius {
 border-radius: 15px;
 background:#ccc;
 padding:10px;
 width:400px;
 }

Ilustracja 6: Przykład właściwości border-radius

Jedno z krótszych znalezionych w sieci rozwiązań problemu zaokrąglonych rogów ma następującą obszerność:

HTML:


 Test Headline
 
 This is a short sample paragraph.
 And another one.

CSS:

.sidebox {
 margin: 0 auto; /* center for now */
 width: 17em; /* ems so it will grow */
 background: url(sbbody-r.gif) no-repeat bottom right;
 font-size: 100%;
 }
 .boxhead {
 background: url(sbhead-r.gif) no-repeat top right;
 margin: 0;
 padding: 0;
 text-align: center;
 }
 .boxhead h2 {
 background: url(sbhead-l.gif) no-repeat top left;
 margin: 0;
 padding: 22px 30px 5px;
 color: white;
 font-weight: bold;
 font-size: 1.2em;
 line-height: 1em;
 }
 boxbody {
 background: url(sbbody-l.gif) no-repeat bottom left;
 margin: 0;
 padding: 5px 30px 31px;
 }

box-shadow – równie ciekawa właściwość pozwalająca na tworzenie cieni naokoło elementów HTML. Implementacja w poprzednich wersjach CSS wymagała wielu nadmiarowych elementów blokowych z wygenerowanymi w programie graficznym obrazkami.

#box-shadow {
 -webkit-box-shadow: 10px -10px 5px #888;
 margin-top: 10px;
 padding: 5px 5px 5px 15px;
 overflow:hidden;
 background:#ccc;
 width:400px;
 }

Ilustracja 7: Przykład właściwości box-shadow

Tła

wielokrotne tła – możliwość, która pozwoli uniknąć tworzenia nadmiarowych elementów blokowych tylko po to, by nadać określonemu fragmentowi strony kilka teł.

#element {
 background:
 url(body-top.gif) top left no-repeat,
 url(body-bottom.gif) bottom left no-repeat,
 url(body-middle.gif) left repeat-y;
 }

background-size – daje możliwość ustawienia rozmiaru obrazka tła. Właściwość interesująca przy ustawieniu wielkości obrazka tła w procentach, na przykład jako zajmującego zawsze 50% wysokości boksu.
background-clip, background-origin – pozwalają zmienić sposób wyliczania pozycji tła (background-position)
gradienty – CSS 3 pozwala na stworzenie teł zawierających płynne przejście od jednego do drugiego koloru. Możliwość taka to ułatwienie ewentualnej modyfikacji kolorystyki w przyszłości. Zachodzi również przyspieszenie ładowania serwisu poprzez redukcję jednego zapytania HTTP. Kosztem jest tu większe obciążenie przeglądarki klienta. W poprzednich wersjach CSS konieczne było (w wypadku graficznych butonów) albo stosowanie stałej szerokości, nieskalującej się do zmiennej ilości tekstu wewnątrz, albo stosowanie technik takich jak Sliding Doors, wymuszających użycie dodatkowego elementu okalającego tekst i rozbicie grafiki tła na 2 części.

Kolory

W CSS3 wprowadzono nowe możliwości definiowania kolorów. Poza dotychczas dopuszczalnymi predefiniowanymi nazwami (color:white), wartościami heksadecymalnymi (color:#fff), wartościami w formacie RGB (color:rgb(255,255,255)), dodano możliwość definiowania kolorów w formacie HSL oraz określenia stopnia przeźroczystości:

HSL (ang. hue, saturation, lightness – barwa, nasycenie, średnie światło białe) to bardziej intuicyjny model odwzorowania kolorów: manipulując poszczególnymi wartościami kolor finalny zmienia się zgodnie z oczekiwaniami, na co nie można liczyć w wypadku formatu RGB.
HSLA to ten sam format z dodaną czwartą wartością: kanałem alfa (ang. alpha channel) definiującym stopień przeźroczystości.
RGBA to rozwinięcie o kanał alfa standardu RGB
opacity – możliwość określenia kanału alfa niezależnie od kolorów.

Ilustracja 8: Paleta kolorów uzyskana w różnych paletach

Efekty tekstowe

text-shadow – tworzy cień wokół tekstu. Zaproponowany już w specyfikacji CSS2, jednak dopiero obecnie powszechnie interpretowany przez przeglądarki.

Ilustracja 9: Przykład zastosowania text-shadow

#shadow {text-shadow: 1px 1px 1px #CCC;}

word-wrap – pozwala na łamanie długich wyrazów, nie mieszczących się w otaczającym je elemencie.

Ilustracja 10: Wykorzystanie word-wrap

#word-wrap {word-wrap: break-word;}

Interfejs użytkownika

box-sizing – zmienia sposób obliczania wielkości elementów blokowych (box model), zamiast domyślnego traktowania obramowania jako części zewnętrznej elementu, jest on wliczany do wnętrza.
resize – definiuje możliwość zmieniania rozmiarów danego elementu przez użytkownika. Właściwość często wykorzystywana przy tworzeniu pól tekstowych formularzy.

Selektory

W wersji trzeciej CSS wprowadzono odrębny moduł odpowiadający za selektory. Moduł jest obecnie w fazie „propozycji do rekomendacji”. Nowe selektory umożliwiają łatwiejsze dotarcie do elementów wymagających ostylowania, bez tworzenia zbędnych klas czy nadmiarowego kodu wynikającego z obejmowania przez selektor również niepożądanych elementów. Należy zauważyć, że nowe selektory wprowadzane są do przeglądarek niemal równocześnie z selektorami dodanymi już do specyfikacji CSS 2, a które niestety wcześniej nie doczekały się implementacji. Przy korzystaniu z nowych selektorów należy mieć na względzie ich wolniejszą interpretację w obecnych wersjach przeglądarek, wobec selektorów klas i identyfikatorów.

E[foo^="bar"] – element, którego wartość atrybutu foo rozpoczyna się dokładnie ciągiem znaków bar

E[foo$="bar"] – element, którego wartość atrybutu foo kończy się dokładnie ciągiem znaków bar
E[foo*="bar"] – element, którego wartość atrybutu foo zawiera ciąg znaków bar
E:root- element, który jest drzewem dokumentu dla elementu E (w HTML 4 element html)
E:nth-child(n) – n-ty element podrzędny elementu nadrzędnego do E
E:nth-last-child(n) – jak wyżej, licząc od ostatniego elementu
E:nth-of-type(n) – n-ty element podrzędny elementu nadrzędnego do E danego typu
E:nth-last-of-type(n) – jak wyżej, licząc od ostatniego elementu
E:first-child, E:last-child – pierwszy i ostatni element podrzędny elementu nadrzędnego do E, E:first-child to odpowiednik E:nth-child(1)
E:first-of-type, E:last-of-type – pierwszy i ostatni element podrzędny elementu nadrzędnego do E danego typu
E:only-child – element nie mający rodzeństwa
E:only-of-type – element nie mający rodzeństwa danego typu
E:empty – odpowiada pustym elementom zawierającym treść dokumentu, np.:
E:target – pozwala na ostylowanie elementu, do którego prowadzi odnośnik w postaci http://adres#identyfikator
E:enabled, E:disabled – odnoszą się do aktywnych i nieaktywnych elementów interfejsu użytkownika
E:checked – odnosi się do zaznaczonych elementów interfejsu, na przykład elementów input typu radio lub checkbox
E:not(s) – pozwala na wybór elementów nie spełniających kolejnego selektora, na przykład button:not([DISABLED])

Przykładowe zastosowania nowych selektorów:

zmiana tła dla co drugiego wiersza tabeli:

li:nth-child(odd)  {background:#ccc;}

specyficzny styl dla pierwszego lub ostatniego elementu listy (tło, obramowanie, czy marginesy):

li:first-child {border:none;}

Inne moduły

Układ wielokolumnowy – stanowi odrębny moduł nowej specyfikacji CSS. Umożliwia zdefiniowanie kolumn tekstu albo poprzez określenie ich liczby (column-count), albo ich szerokości (column-width). Możliwe jest również zdefiniowanie szerokości przerwy między kolumnami poprzez właściwość column-gap.
font-face – umożliwia korzystanie w realizacjach z niestandardowych czcionek. Pozwala na ich zadeklarowanie z wskazaniem miejsca, skąd mogą zostać pobrane, a następnie na korzystanie z wcześniej zadeklarowanych nazw:

@font-face { font-family: NazwaCzcionki; src: url('AdresCzcionki.otf'); }
 h1 {font-family: NazwaCzcionki}

Problemem w implementacji font-face stanowią licencje na czcionki, często ograniczające tego typu użycie oraz brak ustalonego standardowego formatu czcionek. Niemniej jednak możliwość użycia @font-face znacznie upraszcza proces dodawania nagłówków i innych treści zaprojektowanych z użyciem nietypowej czcionki. Dotychczasowe rozwiązania to generowanie dla każdego tekstu statycznych obrazków, co ma oczywiste wady, albo korzystanie z bibliotek JavaScript (Cufon, Typeface.JS,inne), co z kolei dawało czasami zaskakujące efekty ze względu na brak poprawnej interpretacji CSS i pojawiające się konflikty z innymi skryptami JavaScript.

calc – niestety jeszcze nie wprowadzony w żadnej przeglądarce, zapowiadający jednak dużą zmianę w sposobie tworzenia kodu CSS, moduł nowej specyfikacji. Pozwala na dynamiczne obliczanie wartości np. szerokości czy wysokości boksu.

Przykład sytuacji, gdzie w tej chwili konieczne były sztuczne obejścia problemu lub konieczność ustawienia stałych wymiarów:

#wrapper {width:1000px;}
 div {padding:20px; width:50%;}

W tym wypadku szerokość zamierzona to 500px, będzie jednak po dodaniu odstępu poziomego wynosić 540px;. W przyszłości będzie można uzyskać efekt ten następującym kodem:

div {width:calc(50% - 40px);

SEO a CSS 3

CSS 3 wprowadza usprawnienia pozwalające twórcy serwisu internetowego na redukcję ilości kodu HTML. Dzięki nowym elementom i ich właściwościom możliwe jest łatwe tworzenie zaokrąglonych rogów, cieni, gradientów, przezroczystości i wielu innych elementów warstwy prezentacji, których jedynym możliwym do tej pory odwzorowaniem były obrazki umieszczane jako tła nadmiarowych elementów div.

Wydajność w kontekście CSS 3

Omawiane wcześniej zagadnienia wydajności selektorów CSS odnoszą się również do nowych selektorów zaproponowanych w odrębnym module specyfikacji CSS 3. Badania dowiodły, że są one wolniejsze niż wybór elementów po identyfikatorze lub klasie. Wydaje się jednak, że zysk w postaci lepszego, łatwiej zarządzalnego kodu jest tu wart ewentualnych kosztów w wydajności strony. Należy zauważyć, że problem wydajności selektorów stoi już od dawna przed twórcami frameworków techniki AJAX. Z każdą nową wersją najpopularniejszych frameworków da się zauważyć większą wydajność stosowanych rozwiązań. Podobnego kierunku należy się spodziewać w wypadku przeglądarek.

Uważam Rze

admin — Fri, 17 Jun 2011 19:43:25 +0000

Optymalność serwisów w językach HTML 5 i CSS 3: HTML 5

admin — Fri, 10 Jun 2011 08:47:13 +0000

Mając już rozeznanie na temat optymalności i dostępności pora zająć się szczegółowo tymi zagadnieniami w kontekście języków HTML5 oraz CSS3. Zacznijmy od HTML5.

HTML 5

W języku HTML 5 uproszczono wiele fragmentów kodu, umożliwiając ich łatwiejsze tworzenie oraz czyniąc kod bardziej optymalnym w świetle przyjętej definicji optymalności. Poniżej przedstawiamy najistotniejsze zmiany:

Deklaracja typu dokumentu.

Przykładowa deklaracja dla XHTML 1.0 w wersji strict:

Dla HTML 5 wystarcza natomiast:

Drzewo dokumentu.

Typowa deklaracja dla strony w języku XHTML:

Obecnie wystarczająca forma to:

Deklaracja kodowania.

Dotychczas używana deklaracja kodowania:

Ponieważ typ text/html jest traktowany przez wiodące przeglądarki jako domyślny, stał się nieobowiązkowy. Skrócona wersja ma następującą postać:

Analogiczna sytuacja ma miejsce w wypadku typów innych podstawowych dołączanych plików – skryptów JavaScript i arkuszy CSS: