niedziela, 26 stycznia 2014

CSS Sprite - menu z jednego pliku

Patrząc na stronę internetową można zauważyć, że w dzisiejszych  czasach strony grafiką stoją. Grafika w formie różnych plików (png, jpg, gif) wypełniają stronę zwiększając jej atrakcyjność. Jednak im więcej grafik tym bardziej strona i serwer są przeciążone. Na przykładzie menu pokażemy jak zmienić kilka grafik w jedną. Służy do tego CSS Sprite.
KodHTML w nawigacji:
<nav>
<ul>
<li><a class="firma" href="">O firmie</a></li>
<li><a class="oferta" href="">Oferta</a></li>
<li><a class="przepisy" href="">Przepisy</a></li>
<li><a class="produkty" href="">Produkty</a></li>
<li><a class="kontakt" href="">Kontakt</a></li>
</ul>
</nav>
Kod CSS powyższe nawigacji:
nav ul li {display: inline;}
nav ul li a {color: #666; font-weight: bold; text-decoration: none; padding: 15px 0 12px 60px;}
nav ul li a.firma {background: url(img/nav_firma.png) no-repeat;}
nav ul li a.oferta {background: url(img/nav_oferta.png) no-repeat;}
nav ul li a.przepisy {background: url(img/nav_przepisy.png) no-repeat;}
nav ul li a.produkty {background: url(img/nav_produkty.png) no-repeat;}
nav ul li a.kontakt {background: url(img/nav_kontakt.png) no-repeat;}

Wynik działania kodu:


W powyższym przykładzie przy każdej pozycji menu jest wczytywana nowa grafika. Aby zamienić kilka grafik w jedną należy w programie graficznym połączyć je ze sobą. Nowy plik zapisujemy pod nazwą "nav.png".

Zmieniamy kod CSS:
nav ul li a.firma {background: url(img/nav.png) 0px 0px no-repeat;}
nav ul li a.oferta {background: url(img/nav.png) 0px -50px no-repeat;}
nav ul li a.przepisy {background: url(img/nav.png) 0px -100px no-repeat;}
nav ul li a.produkty {background: url(img/nav.png) 0px -150px no-repeat;}
nav ul li a.kontakt {background: url(img/nav.png) 0px -205px no-repeat;}

Należy zwrócić uwagę na to, że teraz wczytujemy tylko jeden plik (nav.jpg). W kodzie występują dwa parametry Xpx i Ypx. Pierwsza wartość pracuje po osi OX (góra dół), a druga wartość po osi OY (lewo prawo). W tym przypadku podnosimy plik nav.png do góry dlatego mamy ujemne wartości.

Teraz zmienimy akcje przycisków. Chcemy, żeby po najechaniu myszką na przycisk tekst zmienił kolor na pomarańczowy, a obrazek był w skali szarości. W programie graficznym dodajemy szare bloki poniżej kolorowych:

Kod dla akcji :hover wygląda następująco:
nav ul li a.firma:hover {background: url(img/nav.png) 0px -252px no-repeat;color: #ff6010;}
nav ul li a.oferta:hover {background: url(img/nav.png) 0px -302px no-repeat;color: #ff6010;}
nav ul li a.przepisy:hover {background: url(img/nav.png) 0px -352px no-repeat;color: #ff6010;}
nav ul li a.produkty:hover {background: url(img/nav.png) 0px -402px no-repeat;color: #ff6010;}
nav ul li a.kontakt:hover {background: url(img/nav.png) 0px -457px no-repeat;color: #ff6010;}



Powyższe zadanie było wykonywane na zajęciach "Aplikacje internetowe" na kierunku Technik informatyk.
e-aleksandra

środa, 8 stycznia 2014

Jak trafiłem do CKU w Koszalinie

Jako latarnik Polski Cyfrowej Równych Szans (PCRS) z gminy Polanów w ostatniej chwili się zgłosiłem na drugi Ogólnopolski Zjazd z Latarników, który odbywał się w połowie września 2013 roku w Olsztynie. 

Latarnicy w projekcie PCRS to wolontariusze organizujący i prowadzący zajęcia z zakresu podstaw obsługi komputera i internetu dla osób wykluczonych cyfrowo, czyli m.in. dla lokalnej społeczności seniorów. Mimo, iż był to 2-gi zjazd w trakcie trwania projektu PCRS to ja uczestniczyłem po raz pierwszy. Zjazd okazał się rewelacyjnie zorganizowany, podczas którego odbyło się wiele świetnych paneli wykładowych warsztatowych i dyskusyjnych, ale co ważniejsze była to świetna okazja do spotkania i poznania znakomitych, młodych i ciekawych ludzi. O samym zjeździe więcej o projekcie możecie przeczytać tutaj.

W tym miejscu chyba już powinienem wrócić do głównego wątku tego wpisu „Jak trafiłem do CKU…” – w skrócie można by było powiedzieć, że dzięki Zjazdowi Latarników PCRS. Ponieważ to na zjeździe poznałem młodą i wspaniałą przewodniczącą latarników naszego regionu koszalińskiego, a jak się okazało w długiej drodze powrotnej nauczyciela Centrum Kształcenia Ustawicznego w Koszalinie. To podczas powrotu koleżanka Aleksandra przybliżyła mi swoją pracę i poinformowała, iż w CKU można ukończyć szkołę policealną lub kurs kwalifikacyjny oraz zdobyć tytuł technika informatyka i to bezpłatnie.

Ponieważ od dłuższego czasu interesuje mnie szeroko pojęta informatyka to od jakiegoś czasu myślałem o tym by nauczyć się tworzenia stron internetowych, ale tak od podstaw, czyli trochę tak jak kursanci latarników uczą się podstaw obsługi komputera i internetu. Ze względu, iż w pracy poza prowadzeniem zajęć dla seniorów, obsługą i konserwacją urządzeń komputerowych zajmuje się uaktualnianiem i prowadzaniem serwisu internetowego firmy, to jednak niestety ja tej strony internetowej nie tworzyłem od podstaw, a tylko zarządzam panelem administracyjnym tej witryny zobacz tutaj, podobnie jak kilkoma innymi (Buszyno, Stowarzyszenie PFS).

Zatem nadarzyła się okazja by podwyższyć swoje kwalifikacje, po wymianie kontaktu z latarniczką Olą, która wysłała mi linki do oferty CKU, a następnie po zapoznaniu się z przesłanymi informacjami postanowiłem złożyć dokumenty i dołączyć do grona grupy I semestru kursu E14. Na zajęcia zacząłem uczęszczać z lekkim poślizgiem czasowym, bo od października. Wówczas się okazało, że opiekunem mojej grupy jest wcześniej poznana latarniczka p. Aleksandra. Również na pierwszym zjeździe w październiku wybierano tzw. samorządy klasowe, a że w grupie nie było chętnych na lidera to pani wychowawczyni (hmm… chyba po znajomości :) ) zaproponowała moją osobę do tego zaszczytnego grona.

Tak właśnie trafiłem i rozpocząłem naukę w CKU, a tym samym nowy rozdział z podwyższania kwalifikacji w swoim życiu.
Romano