3 2 1 koder start

Firefox Developer Edition

dlaczego jest dobry do nauki programowania

Przeglądarka dla twórców stron WWW – ma wbudowane narzędzia specjalnie dla programistów (HTML, CSS, JavaScript

Podgląd kodu strony na żywo – możesz zobaczyć strukturę HTML i style CSS każdej strony bezpośrednio w przeglądarce

Pierwszą stronę – możemy zapisać utworzyć z przeglądarki 🙂 i edytować ja w notatniku

Kod strony – będzie identyczny jak w notatniku (Uwaga!!! To jest tylko w kodzie wykonywanym po stronie klienta np. HTML)

Visual Studio Code

dlaczego warto używać tego edytora

Obsługa wielu języków – nadaje się do HTML, CSS, JavaScript, PHP, Pythona i wielu innych języków.

Wieloplatformowy – działa na Windows, Linux i macOS, więc możesz używać tego samego edytora na różnych komputerach.

Podpowiadanie składni (IntelliSense) – podpowiada znaczniki, funkcje, nazwy plików, co przyspiesza pisanie kodu i zmniejsza liczbę błędów.

Rozszerzenia (Extensions) – można doinstalować dodatki, np. formatowanie kodu, motywy kolorów, podgląd HTML na żywo.

XAMPP SERWER

jest dobry do nauki programowania WWW

Gotowy pakiet „wszystko w jednym” – w jednym instalatorze dostajesz serwer Apache, bazę danych MariaDB/MySQL i obsługę PHP, więc nie musisz wszystkiego konfigurować osobno.

Wsparcie dla PHP i baz danych – idealny do nauki dynamicznych stron, formularzy, logowania użytkowników i prostych aplikacji webowych

Środowisko jak na prawdziwym hostingu – strony działają „jak na serwerze w internecie”, więc to, co zrobisz lokalnie, łatwo przeniesiesz później na hosting.

Strona na lokalnym serwerze
XAMPP

otwieramy stronę przez serwer

W serwerze – jest już Apache, PHP i baza danych. Dzięki temu przeglądarka (np. Firefox Developer) może otwierać strony spod adresu http://localhost, tak jakby były w sieci.

Gdzie zapisujemy pliki strony – wszystkie pliki HTML, CSS, obrazki i skrypty umieszczamy w katalogu htdocs przycisk „Explorer” dostaniesz się do serwera katalogu z którego otwiera się strona

(np. C:\xampp\htdocs\1).

Zastosowanie w nauce programowania WWW – XAMPP pozwala ćwiczyć zarówno zwykłe strony HTML, jak i dynamiczne aplikacje PHP z bazą danych, czyli środowisko bardzo zbliżone do tego, z którym spotkamy się w pracy lub na egzaminach. O czym trochę później 🙂

Imię i nazwisko:

Pytanie 1 ?

Dlaczego Firefox Developer Edition jest dobrym wyborem do nauki programowania WWW?

Ponieważ jest przeglądarką dla twórców stron WWW i ma wbudowane narzędzia dla programistów HTML, CSS i JavaScript.
Dobrze. Firefox Developer Edition ma wbudowane narzędzia deweloperskie, które ułatwiają naukę tworzenia stron WWW.
Ponieważ nie wyświetla żadnego kodu strony, więc nie rozprasza początkujących.
Źle. Właśnie możliwość podglądu kodu strony jest jedną z najważniejszych zalet Firefox Developer Edition.
Ponieważ służy wyłącznie do oglądania gotowych filmów w internecie.
Źle. Firefox Developer Edition jest przeglądarką z narzędziami dla programistów, nie tylko do oglądania filmów.
Ponieważ automatycznie generuje cały kod strony bez udziału użytkownika.
Źle. Przeglądarka nie pisze kodu za nas, ale pomaga go analizować i testować.

Pytanie 2 ?

Co daje podgląd kodu strony na żywo w przeglądarce Firefox Developer Edition?

Możliwość zobaczenia struktury HTML i stylów CSS oraz natychmiastowego efektu wprowadzanych zmian.
Dobrze. Inspektor w Firefox Developer umożliwia podgląd HTML, CSS i szybką zmianę wyglądu strony.
Tylko możliwość zmiany tapety pulpitu systemu Windows.
Źle. Narzędzia deweloperskie dotyczą zawartości strony WWW, a nie ustawień pulpitu.
Automatyczne poprawianie wszystkich błędów logicznych w programie.
Źle. Podgląd kodu pomaga znaleźć błędy, ale ich poprawienie nadal należy do programisty.
Tylko możliwość odczytania adresu URL strony.
Źle. Adres URL widać w pasku adresu, a podgląd kodu służy do analizy struktury strony.

Pytanie 3 ?

W scenariuszu z plikiem strona.htm pierwszą prostą stronę zapisujemy i możemy edytować w Notatniku. Co jest wtedy prawdą o kodzie strony?

Kod HTML zapisany w pliku w Notatniku jest taki sam, jak kod, który przeglądarka wykonuje po stronie klienta (np. znaczniki <html>, <head>, <body>).
Dobrze. Dla kodu wykonywanego po stronie klienta (np. HTML) treść pliku i kod wczytany przez przeglądarkę są identyczne.
Notatnik dopisuje automatycznie dodatkowy kod PHP, którego Firefox nigdy nie widzi.
Źle. Notatnik jest prostym edytorem tekstu i niczego sam nie dopisuje.
Kod w przeglądarce zawsze różni się od pliku, bo jest automatycznie szyfrowany.
Źle. Dla zwykłego HTML kod w pliku i kod w przeglądarce jest taki sam, nie jest szyfrowany.
Kod HTML jest wykonywany tylko po stronie serwera, więc w Notatniku nie da się go obejrzeć.
Źle. HTML jest interpretowany po stronie klienta, dlatego można go swobodnie edytować w Notatniku.

Pytanie 4 ?

Dlaczego Visual Studio Code jest wygodnym edytorem do nauki wielu technologii WWW?

Ponieważ obsługuje wiele języków, takich jak HTML, CSS, JavaScript, PHP, Python i inne, w jednym środowisku.
Dobrze. Visual Studio Code pozwala pracować z wieloma językami w jednym edytorze.
Ponieważ można w nim pisać tylko w jednym języku, co upraszcza naukę.
Źle. Zaletą VS Code jest właśnie obsługa wielu języków programowania.
Ponieważ nie pokazuje żadnych błędów składni, więc nic nie rozprasza.
Źle. VS Code podkreśla błędy składni i pomaga je poprawiać.
Ponieważ nie pozwala instalować żadnych rozszerzeń ani dodatków.
Źle. Jedną z zalet VS Code jest możliwość instalowania wielu rozszerzeń.

Pytanie 5 ?

Co oznacza, że Visual Studio Code jest edytorem wieloplatformowym?

Można go zainstalować i używać na systemach Windows, Linux i macOS.
Dobrze. Wieloplatformowość oznacza działanie na różnych systemach operacyjnych.
Działa tylko na jednym konkretnym komputerze w pracowni szkolnej.
Źle. VS Code można zainstalować na wielu komputerach i różnych systemach.
Wymaga osobnej licencji dla każdego pliku HTML.
Źle. Visual Studio Code jest darmowy i nie wymaga licencji na plik.
Oznacza, że można w nim pisać tylko w jednym języku programowania.
Źle. Wieloplatformowość dotyczy systemów operacyjnych, a nie liczby języków.

Pytanie 6 ?

Która funkcja Visual Studio Code pomaga przyspieszyć pisanie kodu i zmniejszyć liczbę literówek?

Funkcja podpowiadania składni (IntelliSense), która sugeruje znaczniki, funkcje i nazwy plików.
Dobrze. IntelliSense podpowiada elementy kodu i pomaga unikać błędów.
Zmiana koloru motywu edytora na ciemny.
Źle. Motyw wpływa na wygląd, a nie na poprawność składni.
Automatyczne usuwanie wszystkich komentarzy z pliku.
Źle. Komentarze są często potrzebne i nie służą do podpowiadania składni.
Blokadę możliwości wpisywania nowych linii kodu.
Źle. VS Code ma pomagać w pisaniu kodu, a nie go blokować.

Pytanie 7 ?

Jaka jest główna zaleta używania pakietu XAMPP przy nauce programowania WWW?

W jednym instalatorze dostajemy serwer Apache, bazę danych MariaDB/MySQL i obsługę PHP, więc nie trzeba wszystkiego konfigurować osobno.
Dobrze. XAMPP to gotowy pakiet „wszystko w jednym” dla programisty WWW.
XAMPP służy wyłącznie do edycji obrazków i filmów.
Źle. XAMPP jest pakietem serwerowym, a nie programem graficznym.
XAMPP działa tylko wtedy, gdy mamy połączenie z prawdziwym serwerem w internecie.
Źle. XAMPP tworzy lokalny serwer na naszym komputerze.
XAMPP umożliwia wyłącznie testowanie statycznych plików tekstowych bez HTML.
Źle. XAMPP służy właśnie do obsługi stron HTML, PHP i pracy z bazami danych.

Pytanie 8 ?

Dlaczego XAMPP jest szczególnie przydatny do nauki dynamicznych stron WWW (np. logowanie użytkowników, formularze)?

Ponieważ zawiera obsługę PHP i baz danych, co pozwala tworzyć i testować dynamiczne aplikacje webowe.
Dobrze. PHP wraz z bazą danych jest podstawą wielu dynamicznych stron WWW.
Ponieważ blokuje wykonywanie jakiegokolwiek kodu po stronie serwera.
Źle. XAMPP właśnie umożliwia wykonywanie kodu po stronie serwera, np. w PHP.
Ponieważ automatycznie projektuje wygląd strony bez udziału użytkownika.
Źle. Wygląd strony nadal projektuje programista, XAMPP daje tylko środowisko serwerowe.
Ponieważ usuwa wszystkie formularze z kodu HTML podczas uruchamiania strony.
Źle. Formularze są ważną częścią dynamicznych stron i XAMPP ich nie usuwa.

Pytanie 9 ?

Gdzie należy zapisać pliki strony (HTML, CSS, obrazki, skrypty), aby były poprawnie otwierane przez lokalny serwer XAMPP?

W katalogu htdocs, na przykład w folderze C:/xampp/htdocs/1.
Dobrze. Katalog htdocs jest domyślnym katalogiem, z którego XAMPP serwuje strony.
Wyłącznie na pulpicie użytkownika, obok innych skrótów.
Źle. Pliki muszą być w katalogu htdocs, aby były widoczne pod adresem http://localhost.
W dowolnym folderze, ale zawsze pod nazwą dokument.txt.
Źle. Nazwy plików i miejsce zapisu mają znaczenie, a htdocs jest katalogiem serwera.
W folderze systemowym sterowników karty graficznej.
Źle. Foldery sterowników nie mają związku z lokalnym serwerem WWW.

Pytanie 10 ?

Pliki strony zostały zapisane w katalogu C:/xampp/htdocs/1. Jaki adres należy wpisać w przeglądarce, aby otworzyć tę stronę przez lokalny serwer XAMPP?

http://localhost/1
Dobrze. Katalog 1 w htdocs jest widoczny pod adresem http://localhost/1.
file:///C:/xampp/htdocs/1
Źle. Ten adres otwiera plik bez użycia serwera; chcemy skorzystać z serwera pod adresem http://localhost.
http://1/localhost
Źle. Poprawny adres zaczyna się od http://localhost, a potem podajemy nazwę katalogu.
https://xampp/htdocs/1
Źle. To nie jest standardowy adres lokalnego serwera XAMPP. Używamy http://localhost.

Pytanie 11 ?

Co trzeba zrobić w programie XAMPP Control Panel, aby strona pod adresem http://localhost/1 mogła się poprawnie wyświetlić w przeglądarce?

Włączyć serwer Apache, klikając przycisk Start przy module Apache.
Dobrze. Bez uruchomionego Apache lokalny serwer WWW nie działa i adres http://localhost/1 nie będzie dostępny.
Wyłączyć wszystkie moduły, aby przeglądarka nie była obciążona.
Źle. Wyłączenie Apache uniemożliwi działanie lokalnego serwera.
Kliknąć przycisk Stop przy Apache, zanim wpiszemy adres w przeglądarce.
Źle. Musimy Apache uruchomić (Start), a nie zatrzymywać.
Zamiast Apache uruchomić wyłącznie moduł bazy danych, bo to wystarczy.
Źle. Do obsługi stron WWW potrzebny jest serwer Apache; sama baza danych nie wystarczy.

Wygenerowanych certyfikatów w tym module: 0