CSS/JS wewnątrz czy zewnątrz?

Żyjemy w takich czasach, że nie ma w internecie strony, która nie użyłaby stylów css, lub JavaScript. Jest to jedna z technik wspomagająca prezentacje treści. Niestety wielu webmasterów kod css umieszcza bezpośrednio wewnątrz pliku odpowiadającego za wyświetlenie zawartości strony. To najczęściej spotykany błąd, dlaczego?

Umieszczając kod wewnątrz pliku index.html,  pająk wyszukiwarki musi przedzierać się przez coś, czym nie jest zainteresowany. Współczesne wyszukiwarki coraz bardziej są odporne na nieprzyjazne strony i radzą sobie, ale mimo to warto żyć z nimi w zgodzie. Robot zanim ujrzy interesującą go treść musi najpierw przejść przez stertę kodu css/js.

Jeżeli kod znajduję się w zewnętrznym pliku to roboty mają możliwość swobodnego czytania i analizowania treści. Twoja witryna również staję się bardziej czytelna pod względem jakości kodu. Dzięki temu masz swego rodzaju ład.

Wyjątek od reguły może stanowić przypadek, w którym potrzebne Ci jedynie kilka atrybutów z css czy javasctript. Dwie linijki kodu nie zaszkodzą 😉

Dzięki temu małemu zabiegowi otrzymujemy dodatkowy plus w oczach Google oraz stajemy się bardziej przyjaźni dla wyszukiwarek.

Jak szybko sprawdzić wygląd strony w innych przeglądarkach?

Strona w innych przeglądarkach

Dzisiaj chciałbym zaprezentować bardzo przydatne narzędzie. Na pewno wiele razy instalowałeś różne przeglądarki, aby sprawdzić jak w nich wygląda Twoja strona. Jest to uciążliwe, bo po co mieć na dysku kilka programów z których rzadko korzystamy? W internecie znalazłem ciekawy projekt “Browsershots”. Po uzupełnieniu formularza w kilka, lub kilkadziesiąt minut otrzymamy zrzuty ekranów z najpopularniejszych przeglądarek. Jak tego użyć?

Jest to bardzo proste. Aby sprawdzić kompatybilność witryny wejdź na browsershots.org. W polu “wpisz adres URL” podaj adres strony, którą chcesz sprawdzić. Poniżej znajduję się pięć kolumn z nazwami programów. Pierwsze dwie, są to Linuxowe przeglądarki, a trzy pozostałe dla Windowsa. Zaznacz tylko te przeglądarki, które chcesz sprawdzić, ponieważ im więcej wybranych opcji tym dłużej będziesz czekał na zdjęcie obrazu. Wybierz tylko najnowsze wersje i kliknij zielony przycisk “Wyślij”. Teraz pozostało poczekać, aż zostaną stworzone zrzuty ekranu. Długość oczekiwania zależy od czasu kolejki ;-). Podczas generowania obrazów, warto od czasu do czasu wcisnąć przycisk “przedłuż”.

Jak dodać favicon?

Favicon to mała ikonka o rozmiarach 16×16, lub 32×32 piksele wyświetlana przed adresem strony w polu adresowych. Wyświetlana jest również jako ikonka nowej karty, a także po dodaniu do ulubionych zostaje umieszczona w zakładkach. Można rzec, że to szczegół… ale często o nim zapominamy, a to błąd. W przypadku braku favicona zostanie wyświetlona taka szara czy niebieska kartka z zagiętym prawym górnym rogiem (firefox). Jest dużo stron w sieci, które nie stosują ikony, dlatego jest to powód do wyróżnienia swojej witryny spośród tłumu.

Są trzy metody stworzenia favicon

  1. Photoshopa + wtyczka
    Osoby, które są w posiadaniu programu graficznego Photoshop mogą w prosty sposób stworzyć własną ikonkę. Podstawowa wersja nie obsługuję zapisu rozszerzenia .ico, ale z pomocą idzie nam pewna darmowa wtyczka. Odwiedź stronę Telegraphic, znajdziesz tam “ICO (Windows Icon) Format”. Pobierz i rozpakuj plik do folderu Plug-Ins, który znajdziesz w katalogu instalacyjnym Photoshop. Po tej czynności będziesz miał możliwość zapisu grafiki w rozszerzeniu .ico
  2. Program graficzny + generator
    Jeżeli posiadasz dowolny program graficzny (niekoniecznie Photoshop) możesz stworzyć ikonkę, a następnie prze konwertować za pomocą generatora online
  3. Generator online
    Nie masz programu graficznego? Skorzystaj z kolejnego generatora dzięki, któremu stworzysz favicona.
    Za pomocą małych kwadratów możesz narysować ikonkę.


Mamy już favicon, teraz pora na umieszczenie go na stronie internetowej. Umieść favicona z rozszerzeniem .ico oraz .png w głównym katalogu serwera. Następnie między nagłówkami <head></head> dodaj poniższy kod:

<link rel=”shortcut icon” href=”favicon.ico” />

lub

<link rel=”icon” href=”favicon.png” type=”image/gif” />

Od tej pory będziesz miał własną ikonkę przy adresie strony. Tworząc grafikę nie mamy wielkiego pola do popisu, ponieważ rozmiar koniecznie musi być 16×16, lub 32×32. Dlatego jako wygląd favicona dodaj swoje logo, albo pierwszą literę domeny, ewentualnie dwie w przypadku dwuczłonowej nazwy. Jeżeli nazwa domeny jest Twoim imieniem i nazwiskiem umieść swoje inicjały. Przed konwertowaniem do .ico koniecznie zapisz plik graficzny z rozszerzeniem .png, a tło powinno być przeźroczyste, ponieważ różne przeglądarki mają, różne tła i Twoja ikonka może nieciekawie wyglądać. Pamiętaj sekret tkwi w szczegółach ;- )

Dekalog wskazówek dla profesjonalnego bloga

Zapoznaj się z podstawowymi zasadami panującymi w świecie bloggerów. Aby zacząć generować ruch musisz tworzyć bloga “pod użytkownika”. Wczuj się w role zwykłego internauty i zastanów czego chcesz się dowiedzieć. Jakich informacji potrzebujesz. Czy znalazłeś to czego oczekiwałeś? Konkurencja nie śpi więc jeżeli zaczynasz przygodę z blogowaniem, koniecznie przeczytaj poniższe wskazówkami, w celu zwiększenia atrakcyjności Twojej strony.

  1. Dodaj blog do najpopularniejszych wyszukiwarek internetowych.
  2. Daj użytkownikom możliwość podzielenia się wpisem ze znajomymi. (Lubię to, wykop, etc.).
  3. Pisz zgodnie z ortografią oraz linkuj między artykułami.
  4. Analizuj statystyki za pomocą Google Analytics.
  5. Nie ufaj programom typu “dopalacze page rank” oferowanych przez sprzedawców. Najczęściej oferowane są na aukcjach allegro.
  6. Pisz na blogu przynajmniej dwa razy w tygodniu.
  7. Jeżeli dany użytkownik skomentuję Twój wpis negatywnie, włącz się (grzecznie) do dyskusji. Pole z opcją komentowania właśnie po to jest, aby każdy mógł wydać swoją opinie.
  8. Dodaj stronę do popularnych katalogów i precli. Wybierz tylko te najbardziej wartościowe.
  9. Wygląd strony powinien być przejrzysty. Nie dodawaj zbędnych widgetów.
  10. Stwórz kanał RSS, aby umożliwić czytelnikom subskrypcje.

Treść na stronę w 20 minut

Każdy z nas ma jakieś obowiązki. Jedni chodzą do pracy, drudzy kształcą się. Jak wiemy zdarza się, że ciężko znaleźć czas na napisanie nowego artykułu na blogu. Zapoznaj się ze wskazówkami, które usprawnią te działania. W rezultacie możemy napisać nowy wpis wciągu dwudziestu minut. Szybkie pisanie nie oznacza spadku jakości. Poniższe punkty dedykowane są głównie krótkim wpisom. Dłuższe wymagaj nieco większego nakładu pracy i czasu 🙂

  • Twórz listę pomysłów – z doświadczenia wiem, że jakąś cześć czasu poświęcamy na szukanie tematu. Rozwiązaniem jest zapisywanie tego co nam przyjdzie do głowy podczas zwykłych codziennych czynności. Sam tak robię 🙂 Zapisuję w zwykłym notatniku w komputerze, a jeżeli nie mam do niego dostępu to jako wersja robocza sms.
  • Brak weny – są sytuację, kiedy człowieka upuszcza wena twórcza. Należy zostawić to na później. Na siłę szukając zdań, wyrazów tracimy tylko czas.
  • Wypunktowanie – zastanawianie się nad  powiązaniami między akapitami bywa czasochłonne, aby uniknąć tego zdarzenia pisz w postaci listy (tak jak ja teraz). Użyj wypunktowania, lub listy numerowanej.
  • Jeżeli podczas tworzenia treści wpadnie Ci do głowy ciekawy pomysł na nowy akapit, koniecznie zapisz go pod spodem. Dzięki temu nie zapomnisz o nim, a zyskasz na czasie.
  • Naszym celem jest stworzenie wpisu wciągu 20 minut, dlatego nie nastawiajmy się na to, że napiszemy epos :).
  • Słownik – przygotuj sobie słownik, który pomoże Ci szybko i sprawnie sprawdzić dane słowo. Przeglądarki obsługują już podkreślanie błędów ortograficznych. Natomiast wyrazy bliskoznaczne należy samemu poszukać. Osobiście do tego celu używam InfoBota na GG 🙂 Dostępny jest pod numerem 100. Wystarczy wpisać swb wyraz.
  • Błędy –  wszelkiego rodzaju błędy poprawiaj na bieżąco. Zostawianie na później zgromadzi tylko ich ilość, a szukanie pochłonie kolejne minuty.
  • Chwila zapomnienia – odetnij się od rzeczywistości, wyłącz telewizor, telefon, radio*. Skup się na tym co chcesz zrealizować. Poświęcając czas teraz – będziesz miał czas później.
  • *Muzyka – są osoby, którym muzyka pomaga w sprawniejszym funkcjonowaniu (zaliczam się do tej grupy). Jeśli Tobie również to pomaga, włącz swojego ulubionego artystę.

Znasz jeszcze jakieś dodatkowe techniki pomagające skrócić czas tworzenia nowego wpisu? Chcesz coś dodać z własnego doświadczenia?  Podziel się z czytelnikami i swoje propozycje umieść w komentarzach.