Zadanie 7 (ostatnie). Napisz swoją grę Wąż w JavaScript

Start: 6 maja 2016
Termin nadsyłania rozwiązań: 10 czerwca 2016
Czas potrzebny na wykonanie całego zadania: 16 godzin

Cześć!

Przed Tobą ostatnie, finałowe zadanie. Będziesz mogła wykorzystać swoje umiejętności z JavaScript do napisania własnej gry!

Treść zadania znajduje się tutaj.


Zadanie 6. Stwórz swoją własną stronę internetową

Start: 11 kwietnia 2016

Termin nadsyłania rozwiązań: 4 maja 2016

Czas, który będzie Ci potrzebny na rozwiązanie całego zadania: 8 godzin

 

Cześć!

Kolejne zadanie da Ci możliwość wykorzystania zdobytych dotąd umiejętności - będzie polegało na stworzeniu Twojej własnej strony internetowej.

Co będzie Ci potrzebne

Aby wykonać to zadanie, przyda Ci się znajomość HTML, CSS oraz - opcjonalnie - JavaScript. To dobry moment, aby przypomnieć sobie kurs Khan Academy z zadania nr 2.

Uwaga! Ponieważ chcielibyśmy bardziej docenić Twoją pracę, postanowiliśmy przygotować dla wszystkich uczestniczek większe nagrody-niespodzianki. Im więcej zadań w DressCode rozwiążesz, tym więcej punktów zdobędziesz (1 zadanie = 1 punkt) i tym samym większa będzie Twoja końcowa nagroda. Wszystkie nagrody będziemy rozsyłać w czerwcu 2016.

Twoje zadanie

Twoim zadaniem jest stworzenie strony internetowej, na której opowiesz o swoich zainteresowaniach, rodzinie, zwierzakach domowych, rodzinnym mieście, wymarzonych wakacjach… lub o czymś zupełnie innym, czym chciałabyś się z nami (i całym światem) podzielić.

Twoja strona powinna być zapisana w pliku index.html, style CSS umieść w pliku style.css. Możesz też użyć dowolnych wybranych przez siebie zdjęć lub obrazów.

Twoja strona powinna być napisana tak, aby po otwarciu pliku index.html w przeglądarce (np. Chrome, Firefox, Safari, Internet Explorer) można było ją bez problemu obejrzeć.

Za wykonanie strony przyznawać będziemy pół punktu lub cały punkt - ocena będzie zależeć od tego, w jakim stopniu popiszesz się kreatywnością i jaki wachlarz umiejętności wykorzystasz.

Opublikowanie strony

Jeśli posiadasz konto GMail lub Google, możesz opublikować swoją stronę na Dysku Google - w ten sposób będziesz mogła pochwalić się nią swoim znajomym (a i nam będzie łatwiej obejrzeć efekty Twojej pracy).

Jeśli chcesz opublikować swoją stronę, wykonaj następujące kroki:

  1. Wejdź na stronę http://drive.google.com i zaloguj się na swoje konto Google (to to samo, co konto @gmail).

  2. Umieść folder, w którym masz plik index.html,style.css i inne, na Dysku Google:

3. Sprawdź, czy w Twoim folderze na Dysku Google znajdują się potrzebne pliki. Jeśli tak, to kliknij na nazwę folderu, a następnie wybierz opcję udostępniania:

4. Wybierz “Zaawansowane”

5. Wybierz “Zmień dostęp”

6. Wybierz opcję “Publicznie w internecie” i zapisz zmiany.

7. Następnie w okienku “Ustawienia udostępniania” powinnaś zobaczyć link do udostępniania:

Link będzie w formie:

https://drive.google.com/folderview?id=WAŻNA CZĘŚĆ ZŁOŻONA Z LOSOWYCH LITER&usp=sharing

Skopiuj go sobie, a następnie w pasku przeglądarki wklej odrobinę przerobioną wersję:

googledrive.com/host/WAŻNA CZĘŚĆ Z POPRZEDNIEGO LINKU

Jeśli wszystko dobrze poszło, powinna się załadować Twoja strona :-)

W formularzu zgłoszeniowym będziemy Cię prosić o link do niej (czyli googledrive.com/host/i tak dalej).

Jeśli nie chcesz publikować strony

Jeśli nie masz konta @gmail, albo po prostu nie chcesz udostępniać swojej strony publicznie, wyślij nam wszystkie pliki przez email na dresscode-pl@google.com

Po wykonaniu zadania

Niezależnie od tego, czy publikujesz stronę, czy wysyłasz nam ją e-mailem, wypełnij też ten formularz.

Jeżeli będziesz miała pytania lub wątpliwości, zajrzyj na nasze forum WebMuses Youth, na którym chętnie odpowiemy na wszystkie Twoje pytania.


Zadanie 5. Stwórz własną grę, a nawet dwie!

Start: 17 marca 2016

Termin nadsyłania rozwiązań: 4 kwietnia 2016

Czas, który będzie Ci potrzebny na rozwiązanie całego zadania: 2-3 godziny

 

Cześć! 

Przed Wami kolejne zadanie, po ukończeniu którego będziecie umiały samodzielnie stworzyć grę lub animację.

Zanim zaczniesz

Jeśli nie zrobiłaś tego wcześniej, zarejestruj się na stronie Code Studio, możesz do tego wykorzystać Twoje konto na Facebooku lub Gmailu. Następnie dołącz do klasy DressCode-5, klikając na link: http://studio.code.org/join/MFDAGD. Dzięki temu będziemy mogli zweryfikować Twoje postępy.

Aby wyświetlić stronę w języku polskim, przewiń na dół strony i wybierz w menu “Polski”.

hoc.png

Uwaga! Ponieważ chcielibyśmy bardziej docenić Twoją pracę, postanowiliśmy przygotować dla wszystkich uczestniczek większe nagrody-niespodzianki. Im więcej zadań w DressCode rozwiążesz, tym więcej punktów zdobędziesz (1 zadanie = 1 punkt) i tym samym większa będzie Twoja końcowa nagroda. Wszystkie nagrody będziemy rozsyłać w czerwcu 2016.

Część pierwsza

W pierwszej cześci nauczysz się jak stworzyć własna wersję popularnej gry Flappy Birds. Zacznij tu: https://studio.code.org/flappy/1. W kolejnych krokach dowiesz się, jakie elementy są niezbędne do stworzenia gry oraz jak je połączyć, aby uzyskać określony efekt. W ostatnim kroku wykorzystaj wszystko co poznałaś, aby stworzyć prawdziwą, nie za trudną, ani nie za łatwą wersję gry Flappy Birds.

Za poprawne wykonanie części pierwszej przyznamy Ci pół punktu.

Uwaga! Pamiętaj, żeby po ukończeniu każdej części kliknąć przycisk "Koniec". W przeciwnym razie ostatnie zadanie nie zostanie zaliczone, mimo jego poprawnego wykonania.

Cześć druga

Cześć drugą zacznij od https://studio.code.org/s/gumball/stage/1/puzzle/1, gdzie poznasz kolejne elementy, które możesz wykorzystać przy tworzeniu gier. Dowiesz się o nich, wykonując kolejne etapy. W ostatnim kroku wykorzystaj zdobytą wiedzę do stworzenia własnej gry lub interaktywnej animacji. W przeciwieństwie do części pierwszej, Twoja kreatywność jest ograniczona jedynie dostępnymi elementami!

Za poprawne wykonania cześci drugiej przyznamy Ci pół punktu. Poprawne wykonanie obu części da Ci więc jeden punkt.

Puść wodze fantazji i zaskocz nas swoją kreatywnością!

Uwaga! Pamiętaj, żeby po ukończeniu każdej części kliknąć przycisk "Koniec". W przeciwnym razie ostatnie zadanie nie zostanie zaliczone, mimo jego poprawnego wykonania.

Tłumaczenie: Filmy z instrukcjami z części drugiej nie posiadają polskiego tłumaczenia, dlatego przygotowaliśmy je dla Was:

Po wykonaniu zadań

Wypełnij ten formularz. 

Jeżeli będziesz miała pytania lub wątpliwości, zajrzyj na nasze forum WebMuses Youth, na którym chętnie odpowiemy na wszystkie Twoje pytania.


Zadanie 4. Naucz komputer robić porządki - JavaScript i sortowanie

Start: 17 lutego 2016
Termin nadsyłania rozwiązań: 16 marca 2016
Czas potrzebny na wykonanie całego zadania: co najmniej 8 godzin

Cześć!

Przed Tobą kolejne zadanie, dzięki któremu poznasz podstawowe zasady pisania programów, a także nauczysz się, jak zmusić komputer do robienia rzeczy za Ciebie ;-)

Treść zadania znajduje się tutaj.


Zadanie 3. Sprawdź swoją wiedzę o HTML i CSS w praktyce

Start: 1 lutego 2016
Termin nadsyłania rozwiązań: 15 lutego 2016

Cześć,

Przed Tobą kolejne zadanie, które wymaga użycia zdobytej do tej pory wiedzy o HTML i CSS w praktyce.

Zanim przystąpisz do rozwiązywania:

Jeżeli jeszcze tego nie zrobiłaś, na stronie DressCode kliknij przycisk “Zarejestruj się” i wypełnij krótki formularz rejestracyjny. Następnie powiedz nam coś o sobie w krótkiej anonimowej ankiecie. Ankieta posłuży nam do jak najlepszego dostosowania formy DressCode do Twoich preferencji.

Po rejestracji i wypełnieniu ankiety:

Pobierz na swój komputer plik czat.html. Przycisk pobierania widoczny jest po najechaniu na górę strony.

download.png

Jeśli otworzysz czat.html w przeglądarce (np. Chrome, Firefox, Safari, Internet Explorer), zobaczysz proste okienko czatu. Nie jest ono ani estetyczne, ani czytelne, ponieważ dokument nie zawiera żadnych styli (CSS), a jedynie kod HTML. Twoim zadaniem jest dodanie styli, tak aby czat wyglądał estetycznie i czytelnie.

Gdy podejrzysz źródło strony (w przeglądarce: prawy-klik i Zobacz źródło strony), zobaczysz, że poszczególne elementy HTML zawierają już klasy i identyfikatory. Twoim zadaniem jest ich wykorzystanie. Aby zacząć pracę, stwórz plik style.css (plik czat.html ma już dodaną deklarację w sekcji head) w folderze, do którego pobrałaś plik czat.html. Do edycji wystarczy prosty edytor tekstu - taki jak Notatnik (Windows), TextEdit (MacOS), czy gedit (Linux). Możesz użyć również bardziej zaawansowanych edytorów - takich jak Atom czy Sublime Text, które podkreślą składnię CSS. Po każdej edycji odśwież otwarty w przeglądarce plik czat.html, tak by zobaczyć zmiany.

Uwaga: Wszystkie style należy umieścić w pliku style.css. Nie należy również modyfikować struktury HTML dokumentu.

 

Przykładowe efekty uzyskane przez dodanie stylów do czat.html. Oczywiście Twój czat może wyglądać zupełnie inaczej - w tym zadaniu wszystko zależy od Twojej inwencji :-)

EftnvT9Bg1i.png

for8G7RXwaJ.png

7qoUTiDgCVg.png

yVCWjtM1Bqa.png

 

Gdy będziesz zadowolona z uzyskanych efektów, wypełnij ten formularz. Dla uczestniczek, które w terminie do 15 lutego zgłoszą nam swoje rozwiązania, przewidujemy nagrody-niespodzianki.

Jeżeli będziesz miała pytania lub wątpliwości, zajrzyj na nasze forum WebMuses Youth, na którym chętnie odpowiemy na wszystkie Twoje pytania.


Zadanie 2. Opanuj podstawy HTML i CSS z kursem Khan Academy

Start: 17 grudnia 2015
Termin nadsyłania rozwiązań: 7 lutego 2016

Cześć!

Oto kolejne zadanie, dzięki któremu dowiesz się, jak działają proste strony internetowe.

Zanim przystąpisz do rozwiązywania:

Jeżeli jeszcze tego nie zrobiłaś, na stronie DressCode kliknij przycisk “Zarejestruj się” i wypełnij krótki formularz rejestracyjny. Następnie powiedz nam coś o sobie w krótkiej anonimowej ankiecie. Ankieta posłuży nam do jak najlepszego dostosowania formy DressCode do Twoich preferencji.

Po rejestracji i wypełnieniu ankiety:

Wejdź na stronęhttps://pl.khanacademy.org/- znajdziesz tam wiele ciekawych kursów, które pomogą Ci opanować podstawy programowania w praktyce.

Uwaga: Aby zgłosić nam swoje rozwiązanie zadania, będziesz potrzebowała założyć konto w serwisie Khan Academy. Aby to zrobić, na stronie https://pl.khanacademy.org/ kliknij zielony przycisk “Zacznij się uczyć już teraz”, a następnie wybierz jedną z opcji logowania i postępuj zgodnie z instrukcjami ze strony.

Po założeniu konta i zalogowaniu się, wejdź na swój profil w https://pl.khanacademy.org/ i wybierz opcję “Trenerzy”.

WXRNWfstuX7.png

A w panelu trenerów dodaj DressCode jako swojego trenera, użyj kodu ZXZ8Z5:

HVBG4Y7HXAL.png

Jeżeli zrobisz to poprawnie, to w swoim panelu zobaczysz nasz zespół wśród swoich trenerów:

TQoHahqvdTo.png

Po założeniu konta wybierz na stronie temat “Informatyka”, w nim “Programowanie”, a w nim “Wstęp do HTML/CSS: Tworzenie stron internetowych”. Zadanie w drugim etapie DressCode to właśnie wykonanie wszystkich części tego kursu.

Po wykonaniu wszystkich* części kursu wypełnij ten formularz. Dla dziewcząt, które w terminie do 31 stycznia 2016 zgłoszą nam rozwiązania, przewidujemy nagrody-niespodzianki.

*Uwaga: Sekcje „Web developement tools” oraz „Other ways to embed CSS” nie zostały przetłumaczone na język polski i dlatego ich wykonanie nie jest wymagane. Niemniej, jeżeli język angielski nie jest dla Ciebie problemem, zachęcamy, aby ukończyć również te części.

Jeżeli będziesz miała pytania lub wątpliwości, zajrzyj na nasze forum WebMuses Youth, na którym chętnie odpowiemy na wszystkie Twoje pytania.


Zadanie 1. Koduj z Anną i Elsą

Start: 20 listopada 2015
Termin nadsyłania rozwiązań: 31 grudnia 2015

Cześć!

Oto pierwsze zadanie, które pomoże Ci w nauce programowania.

Zanim przystąpisz do rozwiązywania:

Na stronie DressCode kliknij przycisk „Zarejestruj się” i wypełnij krótki formularz rejestracyjny.

Następnie (jeżeli jeszcze tego nie zrobiłaś) powiedz nam coś o sobie w krótkiej anonimowej ankiecie. Ankieta posłuży nam do jak najlepszego dostosowania formy DressCode do Twoich preferencji.

Po rejestracji i wypełnieniu ankiety:

Wejdź na stronę studio.code.org - znajdziesz tam mnóstwo materiałów do nauki programowania. Aby wyświetlić stronę w języku polskim, przewiń na dół strony i wybierz w menu “Polski”:

(Na marginesie, jeżeli chcesz, możesz założyć sobie konto na tej stronie (może być nawet połączone z Twoim kontem na Facebooku lub Gmailu). Założenie konta nie jest obowiązkowe, ale umożliwi Ci zapisywanie postępów i udostępnianie swoich dyplomów znajomym).

Następnie wybierz na stronie ćwiczenie „Frozen”. Anna i Elsa poprowadzą Cię przez 20 łamigłówek, które wyjaśnią Ci podstawowe idee programowania.

Po rozwiązaniu niektórych łamigłówek zobaczysz linki do swoich rysunków - zapisz je sobie, ponieważ będą potrzebne do otrzymania nagrody.

Uwaga: Błąd w łamigłówce 15 został już naprawiony.

Po wykonaniu wszystkich 20 łamigłówek wypełnij ten formularz. Dla dziewcząt, które w terminie do 31 grudnia zgłoszą nam rozwiązania, przygotowaliśmy nagrody-niespodzianki.

Jeżeli będziesz miała pytania lub wątpliwości, zajrzyj na nasze forum WebMuses Youth, na którym chętnie odpowiemy na wszystkie Twoje pytania.