Struktura

Struktura HTML składa się z trzech elementów.

• container – element który wyznacza nam obszar centrowania.
• blockOuter – element przezroczysty, przejściowy służy tylko do pozycjonowania elementu docelowego.
• blockInner – element docelowy, który jest centrowany, może zawierać dowolną treść.

Jak to działa?

W przeglądarkach kompatybilnych z CSS 2.1 sprawa jest dosyć prosta.
Rozwiązanie opiera się na atrybucie display. Formatujemy bloki, aby wyświetlały się jak tabelka i wypośrodkowujemy treść w pionie jak dla komórki tabeli.

W przypadku przeglądarek IE6 i IE7 rozwiązanie jest bardziej skomplikowane.
Tu opiera się na atrybucie position. Ograniczeniem jest, że musimy mieć z góry określoną wysokość elementu container.
Element blockOuter ustawiamy tak, aby zaczynał się od połowy elementu container. Natomiast element blockInner przesuwamy o połowę elementu blockOuter. Te dwa zabiegi powodują, że element docelowy blockInner jest dokładnie na środku elementu container.

Teraz wystarczy oba rozwiązania połączyć w całość. Proponuję robić to za pomocą komentarza warunkowego w HTML – tak aby IE dostało dodatkowe/korygujące style. W efekcie uzyskujemy nowoczesny kod dla dobrych przeglądarek i modyfikujemy tylko starsze.

Gotowy przykład

SEM – Search Engine Marketing, czyli marketing w wyszukiwarkach – ogół działań promocyjnych (kampanie linków sponsorowanych, pozycjonowanie i optymalizacja stron WWW), które mają na celu uzyskanie jak najlepszych pozycji serwisu w (zarówno naturalnych, jak i płatnych) wynikach wyszukiwania, na wybrane słowa / frazy kluczowe wpisywane przez użytkowników w zapytaniu do wyszukiwarki.

Rozpoczynam od definicji SEM z wikipedii*, ale czynię to w określonym celu. SEM i SEO często są ze sobą mylone. SEM to pojęcie szersze, jak mówi definicja są to wszelkie działania promocyjne, natomiast SEO polegające na optymalizacji stron WWW jest częścią SEM.

Działania SEO można podzielić na trzy główne obszary działań:

• przyjazne adresy URL
• konfiguracja serwerów
• kod HTML

Dzięki stosowaniu zasad SEM/SEO możliwe będzie osiągniecie wyższych miejsc w wyszukiwarkach, a co za tym idzie zwiększenie popularności optymalizowanego serwisu.

1. Przyjazne adresy URL – o czym należy pamiętać

• Najlepiej gdy użycie przyjaznych adresów url jest uwzględnione na etapie zbierania wymagań. Znacznie łatwiej wdrożyć takie rozwiązanie na samym początku prac, będzie to szybsze i tańsze niż późniejsze modyfikacje.
• Przyjazny link musi odpowiadać treścią zawartości strony
• Strony wykonane we flashu bardzo rzadko używają przyjaznych linków
• Może zaistnieć sytuacja, w której w ramach jednego serwisu do strony X prowadzą dwa przyjazne lecz różne linki. Należy unikać nadmiarowych linków – jedna strona może posiadać jeden link, dzięki temu znika ryzyko dublowania treści.
• Zdarzenia zachodzące na stronie powinny mieć swoje odbicie w Urlu

1 2	Np.     poczta.php -> poczta.php -> poczta.php napisz.php -> wyslij.php -> dziekujemy.php

• Nie stosujemy linków w js przez onclick

1	< a href =”#” onclick=”…” >...< /a >

• Dobrze gdy treść linka odpowiada treścią stronie do której linkuje. Lepiej unikać tworzenia linków ‘więcej’ lub ‘kliknij tutaj’
• Umieszczając na stronie linki w postaci grafik konieczne jest dodanie atrybutów alt i title. To samo dotyczy prezentacji zdjęć, grafik. Treść zawarta w atrybucie alt pomoże odnaleźć zdjęcie przez wyszukiwarkę.
• Należy unikać rozwiązania w którym wiele wywołań znajduje się pod jednym Urlem np. foto.php pod którym znajdują się dziesiątki zdjęć
• Wprowadzając nowe wersje aplikacji należy utrzymywać przyjęty na początku standard nazewnictwa
  /category/01.html
  /category_01.html

2. Konfiguracja serwerów

• Zawsze tylko przez jedną domenę dostajemy się na stronę – unikamy podwójnego adresowania. Z innych adresów dostajemy się na właściwą stronę za pomocą przekierowania stałego 301. Przekierowanie 301 przenosi page rank strony.
• Należy unikać tymczasowego przekierowania 302 ponieważ służy ono wyłącznie do zmian tymczasowych
• Strony błędów, np. 404, powinny być zaprojektowane w sposób umożliwiający użytkownikowi łatwy powrót do korzystania z serwisu. Aby to osiągnąć na stronach błędów umieszcza się mapy strony, wyszukiwarkę lub linki do pomocy.

3. Kod HTML

• Zachowanie semantyki HTMLa wpływa pozytywnie na pozycję w wyszukiwarkach
• Dobrze gdy każda strona posiada własny odpowiadający treści tytuł
• Usuwamy nadmiarowy kod HTML
• Strona powinna się walidować
• Jeśli serwis stworzony jest we flashu należy stworzyć kopię strony w htmlu dla osób nie korzystających z flasha. Ważne, aby zachować identyczną treść.

Artykuł powstał na podstawie wykładu dotyczącego SEM wygłoszonego podczas konferencji INFOSHARE 2009 w Gdańsku
* Definicja SEM znajduje się pod adresem http://pl.wikipedia.org/wiki/Marketing_w_wyszukiwarkach_internetowych

Na wstępie chciałbym przedstawić i omówić możliwe wartości elementu w css  a mianowicie „position”. Może on przyjąć następujące wartości.

• static (statyczne)
• relative (relatywne)
• absolute (absolutne)
• fixed (ustalone)

Pozycjonowanie statyczne
Elementy z position:static. Jest to wartość domyślna dla wszystkich elementów. Umieszczenie elementu zależy od pozycji w dokumencie.

Pozycjonowanie relative
Elementy z position:relative. Możemy przesunąć element w dowolnym kierunku od miejsca w którym by się znalazł domyślnie.
Możliwości przesunięcia to top, bottom, left, right. Jeśli przesuniemy element nadając mu top:10px to element przesunie się o 10px w dół. Zajmuje on miejsce tam gdzie powinien być domyślnie wyświetlany a pokazywany jest w innym miejscu. Można nadawać też wartości ujemne.
Tak pozycjonowany element staje się kontenerem dla wszystkich innych, które są absolutnie w nim pozycjonowane.

Pozycjonowanie absolut
Elementy z position:absolute. Możemy przesunąć element w dowolnym kierunku od miejsca położenia w kontenerze. Kontenerem są elementy z position relative, absolute, fixed. Gdy niema takiego elementu nadrzędnego to wybiera go przeglądarka. Może to być body ale nie musi.
Możliwości przesunięcia to top, bottom, left, right. Elementy pozycjonowane w ten sposób nie zajmują miejsca w dokumencie. Możemy więc przenieść element poza widzialny obszar w przeglądarce.

position:relative i position:absolute

Pozycjonowanie fixed
Elementy z position:fixed. Możemy przesunąć element w dowolnym kierunku od miejsca położenia kontenera, którym w tym przypadku zawsze jest okno przeglądarki.
Możliwości przesunięcia to top, bottom, left, right. Elementy pozycjonowane w ten sposób nie zajmują miejsca w dokumencie. Możemy więc przenieść element poza widzialny obszar w przeglądarce.
Niestety ten typ pozycjonowanie nie jest obsługiwany w IE6.

z-index
Elementy pozycjonowane mają wagę widoczności elementu na osi-z czyli warstwy. Widoczność określa nam atrybut z-index. Czym wartość liczbowa jest większa tym większy jest priorytet widoczności.

position relative, absolut w IE6 – błędy IE

Zakładamy że „blok” znajduje się zawsze w „kontenerze”

1. Kontener ma ustaloną wysokość i overflow:auto. Jeżeli wewnątrz znajduje się blok  z position:relative o wysokości dłuższej niż kontener, blok ten wycieknie poza obszar kotenera i będzie widoczny scrollbar. Błąd występuje w IE6.
2. Jeżeli nadamy elementowi body właściwości margin:0 auto i szerokość w px i umieścimy w nim blok z position:relative, to podczas zmiany wielkości okna w przeglądarce blok będzie zachowywał się jak z position:fixed. Błąd występuje w IE6.
3. Jeżeli kontener ma właściwość position:relative a blok zawarty wewnątrz position:absolute, to nadając blokowi właściwość bottom powodujemy że IE6 nie umieści go tam gdzie powinien lub blok nie będzie widoczny.
4. Stosując jednocześnie w bloku właściwości top:0 i bottom:0 lub left:0 i right:0 powodujemy że blok rozciągnie się nam na 100% wielkości kontenera. Niestety żadna wersja IE tnie interpretuje tego w ten sposób.
5. Jeżeli kontener ma szerokość o wartości nieparzystej i position:relative, to nadając blokowi wewnątrz właściwości position:absolute i width:100%. IE6 zaokrągli nam szerokość do parzystej odejmując 1px. (np. szerokość kontenera ma 101px to IE6 przeliczy to jako 100px dla bloku)
6. Jeżeli kontener ma position:relative i wielkość o wartości nieparzystej, a blok posiada position:absolute i nadamy mu właściwości right bądź bottom to przeliczając IE6 odejmie 1px źle pozycjonując element.
7. Jeżeli wypozycjonujemy blok nad tagiem select to w IE6 select zawsze będzie przebijał się na zewnątrz niezależnie od ustawionych wartości z-index.

Struktury kodowania w HTML i css  przedstawione powyżej są często spotykane przy wytwarzaniu layoutu. Warto je znać projektując stronę internetową, która ma być kompatybilna z IE6. I oczywiście modyfikować przedstawione rozwiązania bądź stosować inne.

Rozpoznawanie wersji IE7.
Zmienił się User-Agent gdzie widnieje teraz wersja 7.0. Kody Js mające na celu sprawdzenie typu przeglądarki powinny uwzględniać IE7.

http://blogs.msdn.com/ie/archive/2005/04/27/412813.aspx

CSS – Box Model Zmiana w box model. Atrybuty „width” i „height” zawsze trzymają rozmiar box-a w IE 7, już nie nie poszerzają do wielkości kontentu wychodzącego za te wymiary jak to miało miejsce w IE 6.

CSS – Nie działające hacki spod IE6

* html – * html .foo{} – hack z dopisywaniem * html.

_ – .foo{_height: 100px;} – hack z używaniem podkreślenia przed atrybutem.

/* */ – .foo\{height /* */: 300px;} – hack z użyciem komentarza po nazwie atrybutu, atrybut był niewidoczny dla IE 6

html > body , head+body , head:first-child + body – selektory nieobsługiwane przez IE6 które używane były aby ukryć atrybut przed przeglądarką działają w IE7 i są interpretowane.

http://msdn.microsoft.com/en-us/library/bb250496.aspx

SSL, HTTPS

SSL 2.0 – wsparcie jest domyślnie wyłączone

HTML scriptlets – są domyślnie wyłączone

HTTPS – strony muszą dostarczyć aktualny podpis cyfrowy dla ich Dns-ów

HTTPS – Kod HTTP nie może być dołączony do strony z HTTPS

http://msdn.microsoft.com/en-us/library/bb250503(VS.85).aspx

ActiveX

Pod IE7 jesteśmy pytani czy chcemy uruchomić ActiveX, zainstalować wtyczkę, dodatkowe zabezpieczenia. Nie jesteśmy pytani przy zaakceptowanych wcześniej ActiveX, Ściąganych przez IE7 lub powszechnych zaakceptowanych na listach kontrolnych.

http://msdn.microsoft.com/en-us/library/bb250471.aspx

Linki