Programowanie serwisów www

web constructionKwalifikacja VCC Programowanie serwisów www kierowana jest do przyszłych deweloperów oraz osób zainteresowanych tworzeniem stron internetowych. Szczególny nacisk jest położony na praktyczne przekazanie wiedzy poprzez ćwiczenia i zadania. Grupę docelową stanowią osoby zainteresowane efektywnym zgłębieniem wiedzy we wspomnianej tematyce. Kurs jest tak zaplanowany, aby nawet osoba bez doświadczenia szybko i bezproblemowo została wdrożona i zapoznana z podstawowymi pojęciami teoretycznymi związanymi z tematyką kursu. Dzięki takiemu podejściu uczestnik po ukończeniu szkolenia i aktywnym uczestnictwie będzie stosował zdobyte umiejętności praktyczne we własnych projektach. Cały kurs bazuje na darmowym oprogramowaniu, dzięki czemu zminimalizowane są koszty związane z nauką i tworzeniem własnego warsztatu pracy. Ponadto zdobyte w ten sposób umiejętności stanowią doskonałą bazę do rozpoczęcia stosowania komercyjnych programów w przyszłości, jeśli zajdzie taka potrzeba. Duży nacisk jest kładziony na podstawy tworzenia grafiki WWW, gdyż z punktu widzenia przeciętnego użytkownika, jest to pierwsza zauważalna cecha każdej strony. Następnie uczestnik kursu zostanie zapoznany z językiem HTML, w którym tworzone są strony internetowe. Liczne przykłady i ćwiczenia w praktyczny sposób obrazują stosowanie poszczególnych elementów języka. Kolejnym etapem edukacji są kaskadowe arkusze stylów (CSS), które stanowią swoiste uzupełnienie języka HTML i nieodłączny element kreowania i edytowania wyglądu współczesnych stron internetowych. Ważnym elementem współczesnego Internetu są bazy danych. W związku z tym podręcznik zawiera kurs języka PHP, dzięki czemu wyjaśniona zostanie przy okazji kwestia komunikacji z bazą danych MySQL. Ostatnim programistycznym elementem kursu będzie poznanie składni i zastosowania języka skryptowego JavaScript. Dzięki temu tworzone strony będą cechowały się większą interaktywnością, poprzez reakcję na zdarzenia, sprawdzanie poprawności formularzy lub budowanie elementów nawigacyjnych. Ostatnim etapem kursu jest tematyka pozycjonowania oraz optymalizacji stron tak, aby wyszukiwarki umieszczały znalezioną stronę na jak najwyższym miejscu w wynikach wyszukiwania.

liczba godzin szkolenia

  • Zalecana liczba godzin szkoleniowych 50

Czas trwania egzaminu

  • 30 min - część teoretyczna
  • 45 min - część praktyczna
Program szkolenia

Grafika WWW
1.1. Podstawowe pojęcia i teoria

  • Barwa
  • Nasycenie
  • Modele przestrzeni barw
  • RGB
  • RGBA
  • CMYK
  • HSV
  • Głębia koloru
  • Jednostki miary
  • Piksel
  • Rozdzielczość
  • Kompresja
  • Grafika wektorowa i rastrowa
  • Popularne formaty plików graficznych

1.2. Obsługa programu do tworzenia i edycji grafiki rastrowej

  • Prezentacja interfejsu użytkownika
  • Okno obrazu
  • Główny przybornik (Toolbox)
  • Opcje narzędzia
  • Warstwy, kanały, ścieżki
  • Pędzle, desenie, gradienty
  • Popularne czynności
  • Otwieranie obrazu w programie
  • Sprawdzanie informacji o obrazie i zmiana trybu
  • Tworzenie nowego obrazu
  • Zapisywanie obrazu
  • Zmiana wymiarów obrazu
  • Kompresja i przezroczystość obrazu
  • Przycinanie – kadrowanie obrazu
  • Odbicie warstwy
  • Obrót obrazu
  • Przesunięcie
  • Rysowanie prostej linii
  • Warstwy
  • Tworzenie nowej warstwy
  • Właściwości warstw
  • Informacje uzupełniające i porady
  • Maski
  • Tekst i czcionki
  • Dekorowanie tekstu za pomocą gotowego skryptu
  • Dodawanie czcionek
  • Menu kontekstowe warstwy tekstowej
  • Zapoznanie z podstawowymi narzędziami
  • Zaznaczenie – oddzielanie obiektu od tła
  • Szybka maska
  • Wypełnienie kubełkiem
  • Gradient
  • Pędzel
  • Gumka
  • Aerograf
  • Klonowanie
  • Łatka
  • Rozmywanie / Wyostrzanie
  • Rozsmarowanie
  • Rozjaśnienie / Wypalenie
  • Narzędzia przekształcania
  • Ścieżki
  • Język HTML

2.1. Internet – podstawowe pojęcia

  • Adresacja
  • Internet a WWW
  • Usługa internetowa
  • WWW
  • Przeglądanie stron internetowych WWW
  • Omówienie wybranych terminów internetowych

2.2. Obsługa programu do projektowania stron internetowych

  • Popularne czynności
  • Zmiana języka programu
  • Tworzenie nowego pliku
  • Zmiana kodowania pliku
  • Instalacja dodatkowej wtyczki
  • Transfer plików na serwer FTP

2.3. Obsługa klienta FTP – publikacja strony

  • Wprowadzenie do HTML
  • DHTML
  • XML
  • XHTML
  • Komponenty języka (X)HTML
  • Znaczniki
  • Atrybuty
  • Encje i referencje
  • Typy danych
  • Deklaracja typu dokumentu
  • Zawartość dokumentu (X)HTML
  • Typ dokumentu
  • Ogólna struktura dokumentu
  • Metaznaczniki
  • Definicje stylów
  • Skrypty
  • Elementy blokowe
  • Elementy wewnątrzwierszowe
  • Znaki specjalne
  • Elementy organizacyjne
  • Pozostałe elementy
  • Połączenie wszystkich składników

2.4. Porządkowanie i walidacja dokumentów
2.5. Struktura tekstu

  • Akapit
  • Podział wiersza
  • Nagłówki
  • Sekcja
  • Cytat blokowy
  • Tekst przeformatowany
  • Pozioma linia

2.6. Tekst

  • Znacznik
  • Znacznik
  • Pozostałe znaczniki

2.7. Kolory
2.8. Listy

  • Lista ponumerowana
  • Lista punktowana
  • Lista definicji

2.9. Rysunki

  • Wymiary i rozmieszczenie rysunku
  • Przeplot i przezroczystość grafiki

2.10.Łącza

  • Typy łączy
  • Tworzenie kotwic

2.11. Tabele

  • Formatowanie tabeli

2.12. Formularze

  • Wstawianie formularza
  • Etykiety
  • Pole tekstowe
  • Pole hasła
  • Przyciski opcji
  • Pole wyboru
  • Lista wyboru
  • Obszar tekstowy
  • Przyciski
  • Informacje dodatkowe

2.13. Osadzanie obiektów multimedialnych na stronie

  • Wstawianie mapy Google
  • Wstawianie filmu z serwisu YouTube
  • Animowany obraz
  • Kaskadowe arkusze stylów

3.1. Definiowanie stylów
3.2. Kaskada stylów

  • Tworzenie reguł stylów
  • Selektory – dopasowywanie elementów
  • Dopasowanie według typu
  • Selektor uniwersalny
  • Dopasowanie według klasy
  • Dopasowanie według identyfikatora
  • Dopasowanie za pomocą określonych atrybutów
  • Mechanizm selektorów dla hierarchii
  • Pseudoklasy
  • Definiowanie stylów łączy

3.3. Dziedziczenie
3.4. Wartości i jednostki

  • Standardowe jednostki miar
  • Miary rozdzielczości ekranu
  • Miary względne
  • Wartości w postaci słów kluczowych
  • Funkcje związane z kolorami i adresami URL

3.5. Właściwości czcionek

  • Rodzaje czcionek
  • Rozmiar czcionki
  • Styl czcionki
  • Interlinia

3.6.Formatowanie tekstu

  • Wyrównanie tekstu
  • Wcięcie tekstu
  • Odstępy między literami i słowami
  • Dekorowanie tekstu
  • Obiekty przestawne

3.7. Obramowanie i marginesy

  • Dodawanie obramowania
  • Grubość obramowania
  • Styl obramowania
  • Kolor obramowania
  • Dodawanie odstępu
  • Dodawania marginesu

3.8.Definiowanie stylów tabeli

  • Obramowanie tabeli
  • Odstępy w tabeli
  • Kolory i tło
  • Kolor pierwszoplanowy
  • Kolor tła
  • Obraz jako tło
  • Powtarzanie i przewijanie obrazu tła

3.9. Formatowanie list

  • Zmiana punktora
  • Położenie punktora
  • Punktor rysunkowy

3.10. Pozycjonowanie elementów na stronie

  • Pozycjonowanie statyczne
  • Pozycjonowanie względne
Wyposażenie sali szkoleniowej
  • pomieszczenie o odpowiedniej kubaturze w stosunku do liczby uczestników kursu, spełniająca wymogi obowiązujących przepisów BHP,
  • średniej klasy komputery dla uczestników (co najmniej 2 GB pamięci operacyjnej z prawami administratora) z pprogramowaniem:
    • GIMP
    • Notepad++
    • FileZilla
    • XAMPP
  • komputer dla trenera z oprogramowaniem,
  • rzutnik
  • flipchart.
Opis stanowiska egzaminacyjnego

Do przeprowadzenia egzaminu / zajęć potrzebny jest:

Średniej klasy komputera (co najmniej 2 GB pamięci operacyjnej z prawami administratora).
Oprogramowanie:

  • GIMP
  • Notepad++
  • FileZilla
  • XAMPP.
Podręczniki
Select

Programowanie serwisów www

  • Autor: Łukasz Rybski
  • Wydawca: Fundacja VCC
100 zł/brutto Zamów podręcznik przez system CRM dla partnerów
Opis

Podręcznik kierowany jest do przyszłych deweloperów oraz osób zainteresowanych tworzeniem stron internetowych. Materiały zawarte w podręczniku pozwalają na szybką naukę tworzenia aplikacji internetowych oraz grafiki WWW, posługiwania się językiem HTML, w którym tworzone są strony internetowe, a także obsługi kaskadowych arkuszy stylów (CSS), stanowiących nieodłączny element kreowania oraz edytowania wyglądu stron internetowych. Publikacja porusza także bardzo ważny element Internetu, którymi są bazy danych, dlatego też zawarto w niej kurs języka PHP oraz zagadnienia komunikacji z bazą danych MySQL. Istotnym elementem nauki jest również poznanie składni oraz zastosowania języka skryptowego JavaScript. Dzięki tej umiejętności tworzone strony wyróżniają się m.in. większą interaktywnością i sprawniejszą nawigacją. Wśród poruszonych w publikacji zagadnień znajduje się także tematyka pozycjonowania oraz optymalizacji stron.

O wyjątkowości tej lektury świadczy duża liczba przykładów, wskazówek ćwiczeń oraz zadań wraz z kluczem odpowiedzi, umożliwiających praktyczne zastosowanie nabytej wiedzy.

Niniejszy podręcznik dedykowany jest do prowadzenia kształcenia w systemie VCC. Zawarte w nim treści pozwalają na przygotowanie się do certyfikowanego egzaminu VCC Select Competences – Programowanie serwisów www.

 

Przykładowy Egzamin
Test teoretyczny
Zadania praktyczne

1. Skrót HTML oznacza
a) Hypter Text Markup Language
b) Hyperlinks and test Markup Language
c) Home Tool Markup Language
d) Żadna z odpowiedzi
2. Kto zajmuje się standaryzacją stron internetowych
a) Microsoft
b) Mozilla
c) Netscape
d) The World Wide Web Consortium

3. Największy nagłówek reprezentuje znacznik HTML
a) <head>
b) <big_h>
c) <h6>
d) <h1>

4. Który znacznik XHTML reprezentuje nową linię
a) <break/>
b) <nl/>
c) <br/>
d) Żadna z odpowiedzi

5. Który znacznik wpływa na wygląd czcionki
a) <b>
b) <u>
c) <i>
d) Wszystkie odpowiedzi poprawne

6. Aby stworzyć odnośnik w HTML należy użyć znacznika
a) <a href=”http:// www.humaneo.pl „> www.humaneo.pl </a>
b) <a name=”http://www.humaneo.pl”> www.humaneo.pl </a>
c) <a url=”http:// www.humaneo.pl „> www.humaneo.pl </a>
d) <a>http:// www.humaneo.pl </a>

7. Jak otwiera się odnośnik w nowym oknie przeglądarki
a) <a href=”url” new>
b) <a href=”url” target=”_blank”><i>
c) <a href=”url” target=”new”>
d) Żadna z odpowiedzi

8. Listę numerowaną w HTML tworzy znacznik
a) <ol>
b) <ul>
c) <li>
d) <list>

9. Jakiego znacznika HTML należy użyć aby wstawi obraz
a) <image src=”obraz.gif” alt=”MójObraz” />
b) <img src=” obraz.gif” alt=” MójObraz ” />
c) <img alt=” MójObraz „> obraz.gif</img>
d) <img href=” obraz.gif” alt=” MójObraz ” />

10. Aby odwołać się do zewnętrznego stylu należy użyć znacznika
a) <style src=”mystyle.css” />
b) <stylesheet>mystyle.css</stylesheet />
c) <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
d) Żadna z odpowiedzi

11. Aby zdefiniować wewnętrzny styl należy użyć znacznika
a) <style>
b) <scripts>
c) <css>
d) <csstyle>

12. Jak wstawiany jest komentarz w CSS
a) //komentarz
b) #komentarz
c) /*komentarz*/
d) ‘komentarz

13. Aby zmienić kolor tła w CSS należy użyć właściwości
a) bgcolor:
b) color:
c) background-color:
d) Żadna z odpowiedzi

14. Jak ustawić kolor wszystkich znaczników <H2> w CSS?
a) H2 {background-color:#aaaaaa}
b) H2 {bg-color:#aaaaaa}
c) H2.all {background-color:#bbbbbb}
d) Żadna z odpowiedzi

15. Jak zmienić kolor elementu w CSS
a) bgcolor:
b) text-color:
c) text-color=
d) color:

16. Który znacznik CSS jest prawidłowy dla pogrubienia wszystkich znaczników <p>?
a) p {text-size:bold}
b) p {font-weight:bold}
c) <p style=”text-size:bold”>
d) <p style=”font-size:bold”>

17. Jak wyświetlić odnośniki bez podkreślenia
a) a {decoration:no_underline}
b) a {underline:none}
c) a {text-decoration:none}
d) Żadna z odpowiedzi

18. Żeby zmienić czcionkę elementu w CSS należy użyć
a) f:
b) font:
c) font-family:
d) font-cut:

19. Żeby ustawić lewy margines elementu należy użyć
a) left-margin:
b) margin-left:
c) margin:
d) indent:

20. Wewnątrz którego Tagu umieszczany jest kod JavaScript?
a) <js>
b) <javascript>
c) <scripting>
d) <script>

21. Aby wypisać w JavaScript łańcuch „Witaj!” należy użyć
a) response.write(„Witaj!”)
b) dokument.write(„Witaj!”)
c) („Witaj!”)
d) „Witaj!”

22. Wyrażenie y=x++; w JavaScript powoduje
a) Podstawienie do zmiennej y wartości x+1
b) Podstawienie do zmiennej y wartości x
c) Podstawienie do zmiennej y wartości x + x
d) Żadna z odpowiedzi

23. Definiując funkcję w JavaScript należy
a) Zdefiniować typ zwracanych danych
b) Użyć instrukcji funcion
c) Użyć instrukcji fn
d) Żadna z odpowiedzi

24. Zdarzenie Change w JavaScript ma zachodzi, gdy
a) Ładowana jest strona
b) Ładowanie strony zostanie zakończone
c) Zawartość pola formularza ulega zmianie
d) Żadna z odpowiedzi

25. Aby móc korzystać ze zdarzeń w JavaScript należy
a) Skorzystać z procedur obsługi zdarzeń
b) Nic nie trzeba robić nowe przeglądarki wyręczają programistę
c) Zdefiniować typ zwracanych danych w procedurze obsługi zdarzeń
d) Żadna z odpowiedzi

26. W przestrzeni bartw RGB biały kolor otrzymywany jest przez połączenie kolorów
a) Zielony, czerwony, fioletowy
b) Zielony, czerwony niebieski
c) Żółty, błękitny, fioletowy
d) Żadna z odpowiedzi

27. CMYK to
a) Technika odwzorowania kolorów z ekranu monitora na papierze
b) Przestrzeń barw
c) Bezstratna kompresja kolorów
d) Żadna z odpowiedzi

28. Skrót SERP odnosi się do
a) Matematycznego algorytmu stworzonego przez Google
b) Tworzenia kilku kopii jednego dokumentu
c) Wymiany linków
d) Wynik wyszukiwania w wyszukiwarce

29. Skrót SEO odnosi się do
a) Wymiany linków
b) Wyniku wyszukiwania w wyszukiwarce
c) Optymalizacji dla wyszukiwarek internetowych
d) Matematycznego algorytmu stworzonego przez Google

30. Serwer DNS jest używany do
a) Anonimizacji w sieci
b) Zmiany nazwy domenowej na adres IP
c) Zmiany adresu IP na nazwę domenową
d) Żadna z odpowiedzi

Zadanie 1
Stworzyć baner podobny do poniższego rysunku. Kopia wzoru jest dostępna również w załączonym pliku dodatkizad1_wzor.png. Sugerowany czas wykonania zadania 15 min.

pobrane

Zadanie 2

Stworzyć witrynę składającą się z dwóch podstron. Pierwsza index.xhtml napisana w XHTML 1.0, druga przetworz.php napisana w HTML 4.01. Sugerowana deklaracja typu dokumentu transitional lub strict. W katalogu dodatki znajdują się pliki zad2_wzor1.png oraz zad2_wzor2.png, które przedstawiają docelowy wygląd witryny. Sugerowany czas wykonania zadania 75 min. Przestrzeganie zasad optymalizacji kodu dla wyszukiwarek internetowych jest również punktowane (DTD, META, atrybuty elementów, sposób organizacji kodu).