Ostatnio przede mną perspektywa zmiany "na lepsze". Nowo powstająca firma dotąd zajmująca się tworzeniem wszelkiego rodzaju logotypów niekoniecznie na rzecz Internetu postanowiła rozszerzyć działalność i jest zainteresowana zatrudnieniem mnie w charakterze kodera. Jak zdąrzyłem się zorientować, będę ostatnim łańcuchem w procesie tworzenia stron WWW. Nie znaczy to, że nie będę mieć wpływu na proces tworzenia, bo już mi wiadomo, że mogę grafika opieprzyć, jeśli coś zrobi do dupy. Tylko powiedzcie mi, co mam powiedzieć komuś, kto tworzył grafikę wektorową i rzeczywiście nie ma pojęcia w czym rzecz? Zresztą, taki grafik ma też swoje plusy, wkońcu jeśli chodzi o samą grafikę, to posiada duże umiejętności i w dobrych rękach (moich) mógłby się stać zabójczym narzędziem do tworzenia grafiki. Ale ten wpis miał być o czymś innym.
Zadajcie sobie pytanie, kto tworzy sieć. Odpowiedź jest prosta. Programista, prawda? Tymczasem jak jest w rzeczywistości i jak to widzę dość często, programista bywa bardzo często postawiony właśnie jako ostatni w przebiegu pracy. Dlaczego tak jest? To pominę, bo nie mam zamiaru tutaj tworzyć wywodów na temat piękna, sztuki oraz odpowiadać na banalne pytania, że piękno jest lepsze niż jego brak. Miałem za to zamiar napisać na temat swojej frustracji z tym związanej. Czy to jest w porządku? W końcu sieć bez grafików mogłaby istnieć, ale bez programistów (lub koderów) już nie. Ale powód mojej frustracji jest inny. Będę dostawać prace od grafika, który pojęcia nie ma o SEO, usability i kodowaniu/programowaniu. Szlag mnie trafia jeszcze z jednego, cholernego powodu. Dlaczego od kodera wymaga się obsługi programów graficznych, a od grafika nie wymaga się obsługi edytora tekstu? Koder nie powinien nawet dotykać Photoshopa albo GIMP-a. Tymczasem w Polsce rzeczywistość jest inna. Mam nadzieję, że ten post będzie dla niektórych powodem do przemyślenia przebiegu pracy.
Powodem wpisu jest moja frustracja w związku z degradacją, jaką mogę doświadczyć. Tworzyłem strony WWW od podstaw i to było dobre. Dobra strona z kilkoma podstronami powstawała u mnie 3-4 godziny. Tymczasem przekodowanie "prostego" szablonu dostarczonego przez początkującego grafika zajęło mi również cztery godziny. Czas ten sam, a różnicę w efekcie widać. Na dodatek mam pewność, że moja strona wyświetli się we wszystkich przeglądarkach poprawnie, bo nie użyłem na niej żadnego hacku. Druga strona tymczasem ma sporo dość różnie obsługiwanych przez przeglądarki rozwiązań i pomimo sprawdzenie jej w wielu przeglądarkach nadal nie mam pewności, czy wszystko będzie działać prawidłowo.
Jak jest według Was? Koder powinien dostawać szablon do zakodowania, czy grafik powinien otrzymywać instrukcje co do potrzebncyh elementów?
Title - najważniejszy znacznik pod kontem optymizacji. Zostało dowiedzione, że jego wpływ na pozycję strony w wynikach wyszukiwania jest relatywnie wysoki. Title należy wstawić w sekcji nagłówka Head strony. Title jest wyświetalny na górnym pasku przeglądarki oraz na zakładkach w przeglądarce. Jego odpowiednie dobranie podnosi nie tylko pozycję, ale wpływa na liczbę wejść z wyszukiwarki a także usability. Maksymalnie w znaczniku title można zmieścić 70 znaków.
Meta Description to jedyny ze znaczników, który posiada jakiekolwiek znaczenie w wynikach wyszukiwania Google. Wiele wyszukiwarek, w tym Google używa tego tekstu jako opisu strony w wynikach wyszukiwania. Nie znaczenia pod kontem pozycjonowania, może mieć za to wpływ na wejścia z wyszukiwarki. Wyszukiwarka zaindelsuje tylko 155 znaków.
Meta Keywords - Znacznik, którego wpływ na pozycję w wynikach wyszukiwania był niegdyś bardzo wysoki. Wykorzystywali to ówcześni pozycjonerzy, którzy spamując Meta Keywords frazami typu sex, viagra, itp. wypływali na wysokie pozycje pod te frazy, mimo, iż content strony często był zupełnie inny. Obecnie jego wartość jest znikoma. Używa go tylko jedna znacząca wyszukiwarka. Mimo wszystko nadal warto go stosować, gdyż wśród katalogów rozpowszechnione jest pobieranie słów kluczowych z tego znacznika, co z kolei przyśpiesza indeksację wpisów.
Nagłówki - Bardzo ważna część optimizacji. Nagłówki podzielone są według istotności. Warto tak zbudować stronę, by występowały na niej trzy najmocniejsze nagłówki: h1, h2 i h3. Pozostałem trzy nagłówki, czyli h4, h5, h6 mają już znacznie mniejsze znaczenie i ich moc porównuje się do mocy pogrubionego tekstu.
Pogrubiony tekst oznacza, iż coś jest dla nas wyjątkowo ważne. Skoro tak, Google daje za to bardzo niewielką premię. Nie warto jednak pisać całego tekstu pogrubionego. Google nie jest tak głupie, nie da się na to nabrać. Do pogrubienia tekstu używa się znaczników B oraz STRONG (oba mają identyczną moc).
Domena oraz struktura URL mają bardzo duży wpływ na pozycję strony w wynikach wyszukiwania. Moc słowa kluczowego w domenie porównuje się z mocą Title oraz H1, czyli jest bardzo duża. W adresie strony należy unikać dziwnych znaków, takich jak #$&? itd. Mogę one wpłynąć na szybkość indeksacji strony lub nawet ją uniemożliwić.
Właściwość alt obrazka to jeden z mniej docenianych obecnie znaczników SEO. Tymczasem ma on duże znaczenie pod kontem optymizacji. Przypuszcza się, iż to właśnie na podstawie popwiązania pomiędzy img alt i samą stroną Google ustawia pozycję w wynikach wyszukiwania obrazków. Poza tym znacznik ten jest standardem W3C a jego pominięcia oznacza błąd walidacji!
rel="nofollow" - znacznik, który jeszcze do niedawna dawał webmasterom ogromną moc w kierowaniu przepływem strumienia PageRank. Link opatrzony tym znacznikiem oznaczał, iż Google ma go nie brać pod uwagę przy ustalaniu wartości PR. Obecnie algorytm ten uległ zmianie i jego stosowanie przynosi znacznie mniejszą korzyść. Jeśli nie chcemy komuś przekazywać mocy to po prostu nie linkujmy do niego. Jeśli już musimy, to decyzja czy wstawić nofollow powinna być przemyślana. Jeśli link dotyczy strony niekonkurencyjnej to znacznik nofollow można sobie darować.
O czym jeszcze należy pamiętać podczas optymizacji strony?
Kiedyś strony www.przyklad.pl i przyklad.pl były dwiema różnymi stronami. Obecnie tak nie jest, ale pewne wskazówki świadczą o tym, że Google nadal nie potrafi zliczać tych stron jako jednej strony i zamiast tego traktuje je jako dwie oddzielne. Lekarstwem na tę paranoję jest przekierowanie 301 np. z adresu bez www na adres z www. To, który jest lepszy jest przedmiotem dyskusyjnym i ciężko jest wydać jednoznaczny osąd.
Sitemap.xml to mapa strony dostarczona w języku semantycznym, który jest preferowanym przez wyszukiwarki. Warto się zapoznać i zaprzyjaźnić z sitemapą. Wyszukiwarki posiadają specjalne strony, w których możemy zgłosić sitemapę, która ułatwi robotom przeszukanie witryny, a co za tym idzie przyspieszy indeksowanie. Ponadto o każdej zmianie możemy powiadomić wyszukiwarkę pingując do jej odpowiedniej strony.
Dobranie odpowiedniego anchor tekstu do wewnętrznych linków również może być przydatne. Przykładowo, jeśli mamy dobrze wypozycjonowaną stronę główną, to PR z niej możemy odpowiednio redystrybuować na inne strony poprzez wstawienie odpowiednich anchor tekstów. To z kolei prowadzi do wzmocnienia tej podstrony.
rel="canonical" jest znacznkiem używanym w przypadku, gdy mamy dwie takie same strony, co jest dość często sytuacją w sklepach internetowych, oraz innych miejscach, gdzie używamy otagowania. rel="canonical" wskazuje na oryginalną stronę, dzięki czemu nie popadamy w Duplicate Content.
Ostatnią ważną rzeczą jest nie poprzestawanie na nauce i zdobywanie nowej wiedzy. Próżność ludzka jest ogromna niczym kosmos. Nawet jeśli ktoś wie coś ciekawego, to dla głupiej sławy podzieli się tym z całym światem za darmo...
Jeśli chcesz poczytać więcej na ten temat to zapraszam na stronę: http://www.seoconsultants.com. Możesz też od razu przejść do http://www.seoconsultants.com/html4/elements/ ,która jest znakomitym źródłem informacji na temat semantyczności, HTML i SEO. Warto też będzie zapoznać się ze wskazówkami dotyczącymi jakości stron od samego konsorcjum W3C.
Jeśli w przeglądarce wpiszesz adres nieistniejącej strony wówczas automatycznie zostanie Tobie przedstawiona strona błędu 404. Przykładowo strona http://madein3w.blogspot.com/sfsgfdg zwraca taki błąd. Analizując tę stronę znajdziemy tam link prowadzący do strony głównej bloga. Czy zawsze tak jest? Sprawdźmy np. Onet: http://www.onet.pl/dasg Tu już jest gorzej. Otrzymujemy jedynie komunikat o kodzie błędu i o przyczynie - strona nie istnieje. W tym wypadku jest ona napisana po angielsku, co przypadkowemu userowi wcale nie pomaga. Jeśli nie zna angielskiego albo języka HTTP to wówczas pozostaje bez odpowiedzi dlaczego strona nie istnieje.
Dlaczego to piszę?
Otóż wcale nie po to, aby zachęcić do pisania obszernych objaśnień na temat przyczyn błędu, lecz aby skonstruować własną stronę błędu, która będzie jednocześnie odnośnikiem do najważniejszych sekcji Twojej strony. :)
Dlaczego to takie ważne?
Otóż wyobraź sobie, że zmieniłeś strukturę URL na stronie. Możesz wykonać przekierowanie 301 na stronę główną albo przekierowanie ze starego adresu na nowy (nieco trudniejsza opcja, ale zdecydowanie lepsza). Nie uchroni cię to jednak przed następującym przypadkiem. Ludzie często przepisują adresy z błędami. Wyobraź sobie, że jeżeli ktoś do Ciebie zalinkuje, ale popełni literówkę, to zamiast mocnego linka masz nic, zero. Co z tym zrobić? Ano właśnie stworzyć stronę, która w takim przypadku przejmie moc linka i go odpowiednio rozdzieli. Myślę, że przydatny post.
XHTML to język, który stworzyło Konsorcjum WWW (W3C). Miał on być następcą HTML. Niestety jak ze wszystkimi dobrymi pomysłami, początkowo spotykają się one z trudnościami nie do przeskoczenia. Tak jest z XHTML.
Po pierwsze to nie twierdzę, że XHTML jest złym językiem. Jego możliwości są na prawdę imponujące i szczerze przyznam, że ich nie ogarniam. Niestety nie ogrania ich także większość webmasterów już nie mówiąc o zwykłych śmiertelnikach, dla których takie pojęcia jak DTD, MIME, czy META oznaczają kuriera na Wyspach albo var szybkiej obsługi w Krakowie.
XHTML nie istnieje.
Wkurzają mnie ludzie, gdy pytają, czy piszę w XHTML - szlag mnie trafia. Dotychczas, mimo wielu publikacji na ten temat świadomość czym jest XHTML jest niezadowalająco niska. Nie byłem w stanie przekonać nikogo, że XHTML to zbytek.
Oczywiście nikt też nie ma pojęcia na temat, że tworzony właśnie HTML5 miał nigdy nie powstać i że zawdzięcza to tylko porażce XHTML. No, ale kto by to wiedział? W końcu wystarczy zerżnąć DTD, wstawić xhtmls i już orgiastyczna przyjemność z posiadania dokumentu z poprawnym XHTML strict!
A gówno prawda. To czy dokument jest traktowany jako xhtml czy html reguluje MIME type application/xhtml+xml. Wszystko co jest bez tego mime type to dla przeglądarki HTML. I nie ważne, że walidator pokazuje, że to jest poprawny XHTML, bo w rzeczywistości jest to niepoprawny XHTML. Tę ironię można chyba zapisać na konto W3C, ale pomińmy tę teorię.
Tak czy śmak, by jakiegokolwiek 'znawcę' nawrócić na HTML ciągle brakowało czegoś...
Do dziś. Bo powiedzcie, czy jest jakieś lepsze świadectwo niż nawrócenie się ortodoksyjnego zwolennika XHTML strict? Sądzę, że wątpię.
Matěj Novák to na pewno nie Polak. Niestety kolejne potwierdzenie, że Czesi wyprzedzają nas technologicznie o dekadę. Historia nawrócenia ortodoksyjnego (tak o sobie pisze autor) wyznawcy XHTML na HTML być może jest tym, co zaszczepi ziarno niepewności wszystkim #słowo uznawane za obraźliwe# uznającym tylko i wyłącznie XHTML.
Zachęcam do przeczytanie wpisu: Dlaczego nie należy używać XHTML MIME Type.
Życzę państwu dobrego przetrawienia tej lektury :)
Czcionka Coca-Coli to chyba najczęściej poszukiwana czcionka świata. Pamiętam, że jeszcze jako nastolatek sam szukałem (bezskutecznie) tej czcionki do Worda. Dziś, dzięki standaryzacji fontów można tę czcionkę zainstalować pod dowolnym systemem i wykorzystywać np. w programach Word (WordPad, OpenOffice Word Proccesor a także Microsoft Word). Na tym nie koniec, bowiem z powodzeniem czcionki tej można użyć w programach graficznych a także zamieścić na stronach WWW.
Instalacja.
Windows.
Czcionka Coca Cola II jest dostępna w formacie TrueType. Oznacza to, że z powodzeniem można ją zainstalować pod systemem Windows i wykorzystywać w jego podstawowych (WordPad, Paint) i zaawansowanych programach (Microsoft Office Word, AAdobe Photoshop). Jak zainstalować czcionkę pod Windows: http://support.microsoft.com/kb/314960/pl.
Mac.
Z Mac-iem mogą być problemy, bowiem .ttf nie jest typowym plikiem czcionki w tym systemie.
WWW.
Najciekawszą możliwością dla czytelników tego bloga będzie z pewnością instalacja na stronie WWW. Istnieją dwie znane mi metody pozwalające na to:
- @font-face - metoda CSS 3.0; wciąż niewspierana przez wszystkie przeglądarki, zwłaszcza przez Internet Explorer (co prawda IE wspiera @font-face, ale w innym niż .ttf formacie); najprostsza w zastosowaniu
- cufón - metoda javascript; brak możliwości zaznaczania tekstu, ale Google indeksuje bez problemu
- sIFR - metoda javascript, najtruniejsza w zastosowaniu; pozwala na zaznaczanie tekstu
Jak zrobić głosowanie za pomocą gwaizdek w HTML/CSS
Jak zrobić gosowanie za pomocą gwiazdek w PHP
Jak zrobić gosowanie za pomocą gwiazdek w PHP wersja 2 poprawiona.
Powyższe przykłady nie są łatwe do zrobienia, wymagają wiedzy i cierpliwości. Jeśli ktoś potrzebuje projekt na wczoraj to może skorzystać z FiveStar. Jest to moduł oryginalnie zaprojektowany przez Lullabot i wspierany przez Acquia. Moduł gwiazdek na Blogger jest dostępny w wersji testowej, ale ja jestem z niego niesamowicie zadowolony. Na dole widać ramkę z proponowanym przez ten moduł wpisem wartym przeczytania.
Wspomnę, że jeszcze, że FiveStar został oryginalnie napisany dla Drupal, a za wspierającą go Acquią stoi sam Buyaert.
Zanim poznałem FiveStar korzystałem z gwiazdek Blogfroga, ale obecnie już z nich rezygnuję, bowiem znam lepsze, a dwa różne systemy głosowania wyglądają głupio.
Na stronie http://html-color-codes.com/ można odnaleźć kody kolorów na stronę www zapisane w języku html. Dodatkowo na w/w stronie mamy do zakupienia plakaty z symbolami kolorów i ich kodem.
