Kurs programowania od podstaw - Koszalin

W CKU Koszalin organizowane są bezpłatne kursy programowania. Działy, które są omawiane to:

1. Tworzenie stron internetowych
2. Tworzenie i administracja baz danych
3. Algorytmika
4. Programowanie strukturalne i obiektowe
5. Wykorzystanie języka programowania po stronie przeglądarki
6. Wykorzystanie języka programowania po stronie serwera

Kurs zaczyna się od podstaw budowania stron WWW w kodzie HTML i CSS. Budowane są małe strony, gdzie nacisk kładziony jest na poprawność i przejrzystość kodu. Prowadzący skupiają się na podawaniu treści w najnowszych technologiach; HTML5, CSS3.
Równolegle prowadzone są zajęcia z baz danych i algorytmiki.

Po zakończeniu tych trzech etapów można przejść do konkretnego programowania. Języki, które są przedstawiane to:

• Java Script,
• PHP,
• C++,
• MySQL.

Poznając tajniki programowania od podstaw, sukcesywnie zostają rozbudowywane stronki, które były budowane na początku kursu. Omawiane języki programowania dają duże możliwości do samodzielnej pracy w budowaniu zaawansowanych aplikacji internetowych.

Ponadto omawiane są popularne systemy zarządzania treścią (CMS) oraz sklepy internetowe. Paczki instalowane są na różnych serwerach oraz konfigurowane zgodnie z ich przeznaczeniem. Omawiane zostają między innymi:

• Wordpress,
• Joomla
• PyroCMS,
• PrestaShop,
• Moodle,
• MediaWiki.

Celem każdego kursu jest samodzielne zbudowanie strony internetowej. Każdy słuchacz wybiera sobie tematykę (firmę, produkt, usługę, sklep) i na jej podstawie buduje stronę www. Prowadzący zajęcia indywidualnie rozpatruje każdy problem ze słuchaczem, ponieważ każdy projekt jest inny i wymaga odpowiedniego podejścia do zagadnienia.

Zatem jeżeli chcesz nauczyć się programować i samodzielnie budować strony www to zapraszamy na bezpłatny kwalifikacyjny kurs zawodowy w CKU Koszalin:
Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami

e-aleksandra

Samotny ptak Hasiora

Na terenie CKU Koszalin znajduje się pojedynczy ptak. Ta osamotniona rzeźba wyszła spod rąk słynnego na całym świecie Władysława Hasiora. W 1978 roku udostępniono mu pomieszczenie na warsztatach mechanicznych, gdzie mógł korzystać z maszyn znajdujących się na terenie szkoły (stoły, palniki, urządzenia do cięcia, gięcia i spawania itp.). Hasior bardzo dobrze oceniał pracownię, którą mu przydzielono. Była idealnie dopasowana do jego zadania; przestronna, wysoka i dobrze oświetlona. 

Inspiracją do zbudowania strony internetowej www.ptakihasiora.ckukoszalin.edu.pl było odkrycie ciekawej historii powstania rzeźby „Płomienne Ptaki”. Krok po kroku słuchacze kierunków technik organizacji reklamy oraz technik informatyk naszego Centrum, zbierali materiały i informacje związane z twórczością Władysława Hasiora. Okazało się, że pierwowzór znanej rzeźby został podarowany szkole przez samego twórcę. Do dziś dnia „samotny ptak” stoi przy wjeździe na teren szkoły zapraszając do zainteresowania się postacią Hasiora i wstąpienia w szeregi CKU.

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