Vizu - Blog poświęcony technologii CSS/xHTML i moim podróżom.

Kajaczek weekendowy

No i pojechaliśmy na kajaki

Wyjechaliśmy sobie z rana w sobotni piękny dzień. W wypożyczalni Keja w Pułtusku już rano duży ruch, gdyż jest święto więc dużo osób chce miło spędzić wolny czas. Szczęśliwie udaje nam się wypożyczyć kajak. Zabiegany właściciel wypożyczalni nawet nie sprawdza naszych dowodów tylko od razu daje nam kapoki i każe siadać na kajaka i sobie płynąć.

Odpływamy….

Wypłynęliśmy z przystani i skęciliśmy zaraz w lewo w kanał okrążający stare miasto. Na rzece duży ruch, mnóstwo łódek motorowych wędkarzy i innych kajaków. Uczymy się pływać…w końcu to pierwszy raz Narazie koordynacja ruchów nam niezbyt wychodzi, ale z każdą minutą jest lepiej. Po prawej stronie widzimy starówkę Pułtuską. Po kilkunastu minutach wypływamy na Narew i skręcamy w lewo. Płyniemy w strone kleszewa robiąc po drodze przystanek na jedzonko… i przystanki na odpoczynek, gdyż cały czas płyniemy pod prąd co jest dość męczące

Z każdą godziną ludzi nad Wkrą coraz więcej…wędkują…smażą kiełbaski na grillu …itp itd…typowy weekend Śmiesznie było jak jednemu wędkarzowi w żyłkę wpłynęliśmy…trochę się zdenerwował.

Wracając wpłynęliśmy w piękne starorzecze Narwi, gdzie woda praktycznie stała i było znacznie ciszej i mniej ruchliwie niż na głównym korycie rzeki. Płynąc podziwialiśmy lilie wodne i mnóstwo kaczeńców. Było pięknie.

Gdy robiło się późno, z żalem skierowaliśmy się w stronę przystani by oddać kajak. Pani z wypożyczalni policzyła nam 30zł za te 8 godzin które pływaliśmy Nie drogo….. do tego dostaliśmy fajne mapki okolic Pułtuska i puszczy Białej oraz przewodnik po szlakach rowerowych. Na pewno jeszcze tu wrócimy!

Tagi: kajak, kajaki, narew, pułtusk, starówka pułtuska, szlak

Pięć kroków dzięki którym Twoja strona szybko pojawi się w Google

Gdy już założysz stronę, wypadało by ją wypromować, by być rozpoznawanym w sieci. Zaraz po wrzuceniu strony na serwer, jest ona kompletnie nie znana, nie ma żadnych linków do niej prowadzących więc przeglądarki nie mogą jej znaleźć.  Zastanawiasz się co robić…?

Tutaj przedstawiam 5 przydatnych trików sprawiających, że strona w google pojawi się szybko….

1) Dodaj adres swojej strony do Google i innych wyszukiwarek za pomocą funkcji “Submit url”

Na początek czynność najprostsza, aczkolwiek  bardzo ważna. Powiadomimy Google o tym, że nasza strona istnieje. Może nie jest to najszybsza metoda indeksacji jednak na początek w sam raz.

Oczywiście Google nie gwarantuje zarejestrowania każdej wpisanej strony, jednak tym się nie przejmuj. Nie dodawaj więcej niż jednego linka na domenę, no chyba, że subdomena Twojej strony stanowi odrębną witrynę i nie ma do niej linka na głównej stronie.

Tutaj link do strony gdzie możesz zgłosić swoją stronę do Google:
www.google.com/addurl

Yahoo:
search.yahoo.com/info/submit.html

Microsoft Live:
search.live.com/docs/submit.aspx

2) Dodaj mapę XML swojej strony

Po dodaniu strony jedynie przez formularze Submit website, jej zaindeksowanie może zająć dość dużo czasu. Im większa wyszukiwarka (Google jest największa) tym więcej czasu może zająć indeksacja strony.  Jeszcze więcej czasu może zająć dodanie do wyszukiwarki linków wewnętrznych np. drugiego poziomu ponieważ robot Google odkrywa je zwykle dopiero po kilku indeksacjach. Problem ten da się rozwiązać poprzez dodanie mapy XML strony.  Jest to pomocne zwłaszcza w przypadku dużych witryn.

Mapa XML to zazwyczaj plik tekstowy (zapisany z rozszerzeniem XML) który zawiera listę adresów URL twojej witryny. Protokół XML Sitemap jest bardzo prosty więc taką mapę możemy sobie stworzyć sami lub wygenerować za pomocą generatora map XML. XML Sitemap protkół jest wspierany przez Google, Yahoo! i Microsoft więc tą samą mapę strony możemy używać z tymi trzema wyszukiwarkami.

Gdy juz stworzysz mapę, plik musisz wgrać do systemu przeglądarki. Aby dodać mapę do Googli najpierw zarejestruj swoją stronę na Google Webmaster Tools. Jest to świetna stronka z mnóstwem narzędzi i wartościowych informacji dla każdego administratora strony. Znajdziesz na niej różne rankingi strony a także użyteczne raporty włączając raport o rankingu twojej strony pod względem poszczególnych słów kluczowych. Polecamy!

Podobnie mapę XML możesz dodać do Yahoo! poprzez Yahoo! Site Explorer.

Przeglądarka Microsoftu nie daje nam takiej możliwości więc będziesz musiał użyć zwykłego formularza Submit my site .

3) Dodaj artykuł do Wykop.pl albo Digg

Kolejną interesującą rzeczą jaką ostatnio zauważyłem są strony społecznościowe. Jeżeli dodasz artykuł do strony Digg.com lub Reddit albo naszego Wykop.pl i innych, twoja strona zostanie zaindeksowana bardzo szybko. Zwykle artykuły z Wykopu czy Digg pojawiają się w indeksie google po jednym - dwóch dniach. Skorzystaj z tego sposobu jeśli chcesz by Google indeksowało strony twojej witryny bardzo szybko.

Wadą jest to, że URL który dodasz do Wykop.pl pozostaje w indeksie Google przez kilka dni a potem zostaje przeniesiony na znacznie dalszą pozycję. Ale z czasem znów wyjdzie na dobrą pozycję, tylko już po dłuższym czasie…

4) Dodaj Mapę Google

Pobierz klucz API google “Api Key” ze strony http://code.google.com/intl/pl/apis/maps/signup.html i wstaw mini mapkę na swoją stronę.

5) Dużo linków prowadzących do twojej witryny z innych stron dobrej jakości

Kolejną użyteczną metodą na przyspieszenie zaindeksowania twojej strony jest umieszczenie linków do twojej strony na innych witrynach z wysokim Page Rank. Jeżeli znasz kogoś kto posiada popularną witrynę internetową lub bloga, zapytaj czy możesz umieścić swój link. Im więcej linków prowadzących do twojej strony tym twoja witryna będzie wyżej w indeksie i będzie szybciej rejestrowana. Spędź trochę czasu na pisanie interesuących artykułów i umieszczaj je na swojej stronie, to na pewno spowoduje, że dużo linków z innych stron będzie do Twojej witryny prowadziło

http://matthewjamestaylor.com/blog/five-quick-ways-to-get-a-new-website-indexed-by-google

Tagi: google, indeksacja, indeksowanie strony, jak dodać stronę do google?, optymalizacja, seo, wyszukiwarka, wyszukiwarki

Weekendowy wypad na kajaki.

W ten weekend planujemy z koleżanką Evą wypad na kajak do Pułtuska. Zamierzamy wypożyczyć jeden kajaczek i popływać troszkę po Narwi w stronę północną od Pułtuska, czyli pod prąd, po czym zamierzamy wrócić. Jak dobrze pójdzie, cały dzionek spędzimy w kajaku.

Kajak planujemy wypożyczyć w wypożyczalni Keja - http://www.keja.inter-max.pl/ mieszczącej się koło Pułtuskiego ratusza.

Wypożyczalnia znajduje się w prawym dolnym rogu na poniższej mapie. Jest na niej również zaznaczony jeden ze szlaków - Dookoła starówki pułtuskiej.

Więcej informacji napiszę, gdy już ze spływu wrócę C.d.n

Tagi: kajak, kajaki, narew, podróże, pułtusk, spływ kajakowy po narwi

Zaokrąglone rogi z pomocą CSS

Dziś przedstawię jedną z metod na tworzenie zaokrąglonych rogów za pomocą CSS. Jest też wiele innych metod opisanych w internecie, z czasem będę starał się wrzucić i inne metody tworzenia zaokrąglonych rogów.

Na początek stwórz 4 obrazki swoich czterech zaokrąglonych rogów. Większość programów graficznych pozwala na narysowanie kwadratu o zaokrąglonych rogach, który potem można pociąc. Będę używał tego kwadraciku:

wycinamy rogi by otrzymać podobne obrazki:

W miejscu w którym chcę by pojawił się box z zaokrąglonymi rogami tworzymy div dla całej ramki, div dla górnego wiersza i dolnego wiersza (będą z zaokrąglonymi rogami). Pomiędzy tymi dwoma wąskimi Divami dodajemy treść boxa.  Do górnego i dolnego Diva dodajemy lewy narożnik i ustawiamy styl inline na

To sprawia, że obrazek będzie niewidoczny, dopóki nie ustwaimy bezpośrednio jego widoczności w arkuszu stylów.

<div class="roundcont">
   <div class="roundtop">
	 <img src="tl.gif" alt=""
	 width="15" height="15" class="corner"
	 style="display: none" />
   </div>

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing
   elit, sed do eiusmod tempor incididunt ut labore et
   dolore magna aliqua. Ut enim ad minim veniam, quis
   nostrud exercitation ullamco laboris nisi ut aliquip
   ex ea commodo consequat. Duis aute irure dolor in
   reprehenderit in voluptate velit esse cillum dolore eu
   fugiat nulla pariatur. Excepteur sint occaecat cupidatat
   non proident, sunt in culpa qui officia deserunt mollit
   anim id est laborum.</p>

   <div class="roundbottom">
	 <img src="bl.gif" alt=""
	 width="15" height="15" class="corner"
	 style="display: none" />
   </div>
</div>

Jako tło dolnego i górnego diva ustawiamy obrazek tła zawierający obrazki prawych rogów - dolnego i górnego i aktywujemy wyświetlanie obrazków lewych rogów wstawionych poprzez kod HTML.

.roundcont {
	width: 250px;
	background-color: #f90;
	color: #fff;
}

.roundcont p {
	margin: 0 10px;
}

.roundtop {
	background: url(tr.gif) no-repeat top right;
}

.roundbottom {
	background: url(br.gif) no-repeat top right;
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

A tak to wygląda w praktyce:

Powyższy przykład działa w przeglądarkach IE 6.0, Mozilla 1.3, Opera 7 na Windows. Powinien działać w większości nowoczesnych przeglądarek.

Przykład działa również gdy szerokość głównego diva ustawimy na 100%. Tutaj box ponownie. Jedyne co zostało zmienione to parametr width klasy roundcont.

Aby zobaczyć kod, wyświetl źródło strony w przeglądarce

Jeżeli wpis się spodobał, przydał, lub masz do niego uwagi -> Zapraszam do komentowania poniżej.

Tagi: CSS, round, zaokrąglone rogi

100 prostych (surowych) przykładów CSS

Jeżeli szukasz przydatnych przykładów surowego kodu CSS - bez zbędnych ulepszeń, to strona podana w tym artykule będzie dla Ciebie idealna. Przykłady są proste aczkolwiek bardzo funkcjonalne. Pooglądaj sobie źródła stron by przeanalizować kod źródłowy styli. Polecam. LINK DO STRONY

Tagi: przyklady css

Narzędzia CSS: Resetowanie stylów CSS

Celem resetowania arkuszy stylów jest zlikwidowanie wszelkich preformatowań CSS stosowanych przez poszczególne przeglądarki, takich jak domyślne wysokości linii, marginesy i rozmiary czcionek nagłówków i inne.

Poniższy sposób na reset CSS jest sposobem, który warto dostosować do własnych potrzeb.  Nie jest w nim na przykład zdefiniowany domyślny kolor tła i czcionki. Powinieneś ten szablon ulepszyć, edytować aby dostosować go w 100% do własnych potrzeb

Innymi słowy to taki punkt startowy, a nie szablon którego nie powinieneś dotykać.

---

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Tagi: CSS, reset