Witaj na SKI! Witryna prowadzona przez entuzjastów informatyki ☺

Kwalifikacja E.14


Prosty slider dla każdego! – JavaScript tutorial

Slider jest często używany przy tworzeniu stron internetowych by efektywnie przedstawić zdjęcia wyświetlające się po określonym czasie.

Zaczynając zabawę musimy stworzyć nowy projekt. Następnie tworzymy prostą klasę o nazwie „slider” gdzie w środku niej dodajemy zdjęcia (w moim przypadku będą to tylko 3 zdjęcia). Nasze multimedia powinny być zadeklarowane w jednej klasie.

zdj_slider1

Dodajemy także kod css do naszego pliku (Ja wykonam to w sekcji head). W środku css dodajemy trzy linie kodu którę będą odpowiadać klasie „zdjecia” zawartej w naszym znaczniku <img>.

zjd_slider2

Trzy linie kodu pozwalają nam:

  • display: none; – zdjęcia nie będą wyświetlane dopóki nie będziemy tego chcieli
  • width: 750px; – maksymalna szerokość zdjęć będzie miała 750 pikseli
  • height: 322px; – maksymalna wysokość będzie miała 322 pikseli
  Wygląd mamy już ustawiony. Czas nadszedł stworzyć animacje używając JavaScript. Aby przeglądarka zorientowała się że piszemy skrypt musimy umieścić go w <body> pomiędzy znacznikami <script></script>    

zdj_slider3

Cały ten skrypt odpowiada z naszą animacje przejścia do kolejnych zdjęć:

  • pierwsze dwie linię naszego skryptu odpowiadają za wywołanie skryptu i stworzenia zmiennej liczba
  • W funkcji, zmienna var x pobiera element z naszej klasy „zdjecia”
  • prosta pętla for odpowiada za niewyświetlanie zdjęć
  • zapis liczba++ informuje o tym że do wartości liczba dodajemy 1 (liczba+1)
  • instrukcja warunkowa if mówi że jeśli liczba będzie większa niż długość x to wartość liczby zamieniamy na jeden
  • w ostatniej lini kodu mam do czynienia z opóźnieniem czasowym
 

+ zobacz więcej

Kalkulator średniej ważonej

– Psze pani a jaką mam średnią na koniec?
– A weź se dziecko policz na skiprzeworsk

Zasady

Ocena z plusem: ocena+0.5 (5+ = 5.5)

Ocena z minusem: ocena-0.25 (5- = 4.75)

Wpisując oceny z +/- używamy kropek, a nie przecinków!

Ocena musi być z przedziału od 1 do 6

+ zobacz więcej

Animowane pole formularza

Znudzeni prostym wyglądem formularza logowania? Wszystkie wyglądają tak samo? Czas to zmienić, do dzieła!


Do naszego formularza będziemy potrzebować jedynie dwóch plików, pliku html i css. W pierwszym z nich tworzymy prostą strukturę strony z znacznikiem <form> oraz trzema inputami. Nie zapomnijmy o tym żeby nadać formularzowi klasę lub id ponieważ będziemy musieli się do niego odnieść.


Dla zainteresowanych zostawiam zdjęcie jak powinien wyglądać ten „skomplikowany kod”. :p


form html

Czas w końcu zabrać się za wygląd. Musimy odwołać się do naszych inputów znajdujących się w formularzu w moim przypadku o klasie box. Aby to zrobić musimy skorzystać z kwadratowych nawiasów i określić typ naszego pola wprowadzania. My skorzystamy z typów text oraz password, przecież nie chcemy żeby „somsiad” nie widział jakie mamy hasło. Po wystylizowaniu formularza według naszego uznania za pomocą pseudoklasy focus wykonamy animacje. Po kliknięciu w wybrane pole ustawimy większą szerokość pola oraz zmienimy kolor obramowania dla lepszego efektu. Na końcu zadbajmy jeszcze o nasz nagłówek wzbogacając go o kilka linijek kodu.


formcss

Kliknij w pola formularza aby wybróbować!



Login

+ zobacz więcej

Proste mapowanie obrazu – poradnik

Mapowanie obrazu to bardzo ciekawa rzecz w kontekście tworzenia stron internetowych. Pozwala to sprawić, że grafiki na naszej stronie będą w pewien sposób interaktywne. Za pomocą kilku linijek kodu możemy sprawić, że obrazek na naszej stronie zostanie sporą mapą odsyłaczy, bądź odnośników do funkcji. Jedyne czego potrzebujemy to przygotowanej grafiki w odpowiednim rozmiarze (to bardzo ważne) i darmowego programu do obróbki grafiki – GIMPa. Oczywiście, tradycjonaliści mogą sobie odczytywać współrzędne z Painta, ale przyznajcie – komu by się chciało.

Więc przechodząc już do rzeczy, przygotowujemy sobie grafikę i otwieramy GIMPa. Ładujemy nasz obraz i wchodzimy w zakładkę: Filtry -> Strony WWW -> Mapa obrazu. W tym momencie nasz interfejs wygląda tak:

p1

Do wyboru mamy 3 kształty – prostokąt, koło, wielokąt. Do prostszych projektów można używać pierwszych dwóch, lecz gdy chcemy, by nasze odnośniki miały dokładne kształty zalecam użyć wielokątów. A więc bierzemy się do zaznaczania!

p2

Po zakończeniu zaznaczania możemy wybrać do czego dany obszar będzie się odnosił – jak widać jest wiele opcji – w tym przypadku wybieram stronę WWW. To samo powtarzamy przy kolejnych figurach.

p3

Po wszystkim klikamy: Plik -> Zapisz jako… i zapisujemy jako plik z rozszerzeniem *.map. Otwieramy plik w edytorze tekstu i voila – mamy gotowy kod na stronę!

p4

Noo… prawie gotowy, musimy zmienić źródło obrazu z „[img] (zaimportowany]” na faktyczną ścieżkę do obrazu. I pamiętajmy – wartość po usemap i map name musi być taka sama!
PS. W trzecim obszarze nie ma odnośnika do strony, bo znajdzie się takowy do funkcji JS – zresztą sprawdźcie sami niżej!

img + zobacz więcej

Prosta animacja w CSS!

Chcecie zrobić prostą animację nie wykorzystując javascriptu? Nic prostszego.


Do dzieła!

Na początku tworzymy prostą listę punktowaną w pliku html o dowolnym tekście pamiętając aby każdą literę zapisać w osobnej linii.


(więcej…) + zobacz więcej

Odliczanie do wakacji 2019! – JavaScript + tutorial

Długie dni, krótkie noce, imprezy i spotkania ze znajomymi, brak szkoły, grille i ogniska… Któż z nas nie tęskni za wakacjami? No właśnie, pewnie każdy już nie może się doczekać powrotu lata i kolejnych niezapomnianych wakacyjnych chwil. Aby ułatwić Wam odliczanie do tego upragnionego dnia powstał oto ten niesamowity zegar – zegar odliczający czas do wakacji!
A może chcecie zrobić taki sami? Nic trudnego!


(więcej…) + zobacz więcej

Zajęcia pozalekcyjne z programowania

W dniu 06.12.2018 odbyła się kolejna lekcja zajęć dla klas szkół podstawowych dotyczących pisania stron internetowych w językach HTML, CSS. Uczniowie na zajęciach poznali podstawowe pojęcia dotyczące języka CSS oraz wykonali prostą stronę używając znaczników div.

Poniżej widzimy efekt pracy w kodzie html:
Html


Oraz w kodzie kaskadowego arkusza stylów:
CSS


Oto końcowy wygląd strony:

Strona

+ zobacz więcej
Linus Torvalds
Linus Benedict Torvalds (ur. 28 grudnia 1969 w Helsinkach) – fiński programista, twórca jądra Linux oraz systemu kontroli wersji git. Należy do społeczności Finów szwedzkojęzycznych. Uczęszczał na Uniwersytet Helsiński. Poprzez stworzenie jądra Linux nadał impuls do gwałtownego rozwoju wolnego oprogramowania. Sam należy do zwolenników powstałego później ruchu otwartego oprogramowania... Czytaj dalej »

Kalendarz

Październik 2019
P W Ś C P S N
« cze    
 123456
78910111213
14151617181920
21222324252627
28293031  

Archiwum

Font Resize
Contrast