Zacznij korzystać z HTML5

Zacznij korzystać z HTML5
Ten przewodnik jest dostępny do pobrania jako bezpłatny plik PDF. Pobierz ten plik teraz . Zachęcamy do kopiowania i udostępniania tego znajomym i rodzinie.

Spis treści

§1. Wstęp





§2 – Znacznik semantyczny



§3–Formularze





§4 – Średni

§5–CSS3 Transformacje i animacje



§6–Wystarczy JavaScript

§7–Kreatywne płótno



§8 – Gdzie dalej?

1. Wstęp

Słyszałeś o tym: HTML5. Wszyscy go używają. Jest ogłaszany jako zbawca Internetu, który pozwala ludziom tworzyć bogate, angażujące strony internetowe bez uciekania się do używania Flasha i Shockwave.



Ale co to właściwie jest?

Cóż, nie jest to łatwe pytanie. W tym samouczku HTML5 postaramy się udzielić odpowiedzi. HTML5 służy do opisu naprawdę zróżnicowanej grupy rzeczy. To standard pisania stron internetowych. To zbiór interfejsów API. To nowy sposób na dodanie interaktywności do stron internetowych.

HTML5 to wszystko i wiele więcej. Więc o czym jest ta książka?

W tym samouczku HTML5 zakładam, że w pewnym momencie dotknąłeś HTML i CSS. Być może stworzyłeś własny motyw Wordpress lub edytowałeś kiedyś układ MySpace. Być może czytałeś własny przewodnik po XHTML MakeUseOf . Chodzi o to, że zakładam, że znasz się na stronach internetowych i to, co omawiamy w tym przewodniku, nie będzie ci zbyt obce.

Celem tego przewodnika nie jest nauczenie Cię całości HTML5. To byłoby całkowicie poza zakresem tej książki. Celem jest delikatne wprowadzenie do tych niesamowitych nowych technologii internetowych i pokazanie kilku fajnych sposobów włączenia ich do swoich witryn.

Dlaczego chcesz się uczyć HTML5?

To uczciwe pytanie. Czy w świecie smartfonów i aplikacji naprawdę ważne jest nauczenie się programowania stron internetowych?

Wierzcie lub nie, ale bardzo często pisze się aplikacje na smartfony przy użyciu technologii HTML5. Do niedawna aplikacja Facebook na Androida była pisana przy użyciu HTML5, CSS i JavaScript.

Blackberry to kolejna duża firma, która jest niezmiernie zainteresowana HTML5. Jest to oczywiste w najnowszej iteracji ich mobilnego systemu operacyjnego, Blackberry OS 10, gdzie aktywnie zachęcają programistów do tworzenia aplikacji na ich telefony przy użyciu technologii internetowych.

Nowe smartfony z Firefox OS działają również w całości na aplikacjach HTML5. Praktyczna znajomość HTML5 jest niezbędna w dzisiejszym klimacie smartfonów.

Ponadto nauka HTML5 jest dobra dla Twojej kariery. Nie wierzysz mi? Według Indeed.com , średnia roczna pensja programisty HTML5 to aż 89 000 USD. Ponieważ coraz więcej firm zmienia swoje strony internetowe w celu korzystania z technologii HTML5, programiści znający stos HTML5 są poszukiwani – teraz bardziej niż kiedykolwiek.

1.1 Wymagania wstępne

Ten samouczek HTML5 zakłada kilka rzeczy. Po pierwsze, zakłada, że ​​wiesz, jak działa sieć i że wiesz, jak stworzyć podstawową stronę internetową. Powinieneś być w stanie sklecić razem niektóre elementy HTML i być w stanie zaprezentować niektóre informacje w przeglądarce internetowej. Widząc i

tagi nie są zbyt zniechęcające i nie boisz się ubrudzić sobie rąk jakimś kodem źródłowym.

Po drugie, ten przewodnik zakłada, że ​​wiesz, czym jest CSS i jak działa. Nie oczekujemy, że będziecie geniuszami projektowania, ani nie oczekujemy, że poznacie całą specyfikację CSS z własnej kieszeni. Powinieneś jednak być w stanie zastosować stylizację do elementu na stronie internetowej, być w stanie połączyć się z plikiem CSS i znać różnicę między identyfikatorem a klasą oraz wiedzieć, jak zastosować stylizację do każdego z nich.

Jeśli drapiesz się po głowie, nie martw się. Jedną z najlepszych rzeczy w HTML i CSS jest to, że jest to naprawdę bardzo proste. W rzeczywistości MakeUseOf ma niesamowity przewodnik XHTML, który bardzo szybko przyniesie Ci prędkość.

Po przeczytaniu tego przewodnika możesz również zapoznać się z następującymi artykułami:

Będziesz także potrzebował nowoczesnego edytora tekstu i przeglądarki. Każda wersja Internet Explorera starsza niż IE 9 i niektóre starsze wersje Safari, Chrome i Firefox będą miały problemy z wieloma funkcjami będącymi częścią HTML5 i mogą uniemożliwić korzystanie z tego przewodnika.

W rezultacie zachęcamy do pobrania nowoczesnej przeglądarki. Polecam Google Chrome i będę go używał w każdym przykładzie.

Poza tym wszystko, czego będziesz potrzebować, to chęć do nauki. Aha, i edytor tekstu.

1.2 Edytory tekstu do tworzenia stron internetowych

Twój edytor tekstu jest tym, czego będziesz używać do pisania kodu. Być może zastanawiasz się, czym jest edytor tekstu.

Cóż, po pierwsze nie jest to edytor tekstu. Programy takie jak Microsoft Word i Apple's Pages są całkowicie nieodpowiednie do tworzenia stron internetowych. Dzieje się tak, ponieważ dołączają one dodatkowe informacje do plików HTML, CSS i JavaScript, które utrudniają odczytanie przez przeglądarkę.

Edytor tekstu wyrzuca znaki do pliku tekstowego i niewiele więcej. Pozwala to na tworzenie plików, które nie mają dodatkowego formatowania i mogą być zapisywane z dowolnym wybranym rozszerzeniem.

Twój komputer jest już wyposażony w jeden. Jeśli używasz komputera z systemem Windows, Notatnik jest edytorem tekstu, który prawdopodobnie został zainstalowany.

Na Macu sytuacja jest nieco inna. OS X ma cztery różne edytory tekstu. Nazywają się one Vim, Emacs, Pico i Nano. Jednak w przeciwieństwie do Notatnika, wszystkie działają w terminalu.

Jest to trochę onieśmielające dla osób, które są nowe w tworzeniu stron internetowych i nie powinny być używane przez osoby, które są nowe w tworzeniu oprogramowania. Nie będziemy ich używać w tym przewodniku. Jednak, gdy nabierzesz pewności w zakresie oprogramowania i tworzenia stron internetowych, zdecydowanie warto przyjrzeć się Vimowi i Emacsowi. Oba są potężnymi edytorami tekstu, a po opanowaniu mogą zaoszczędzić mnóstwo czasu.

W systemie Linux domyślny edytor tekstu różni się w zależności od dystrybucji. W Ubuntu jest to prawdopodobnie Gedit , który jest dość przyjemnym edytorem tekstu, który nie różni się zbytnio od Notatnika.

Jednak na tym kursie będziemy pisać nasz kod przy użyciu trzech różnych narzędzi.

Pierwszym z nich jest Sublime Text 2 . Szczerze nie mogę tego wystarczająco polecić. Zawiera wszystkie rzeczy, które ułatwiają życie początkującemu programiście. Po pierwsze, dzięki kolorowaniu niektórych części kod będzie łatwiejszy do odczytania. Po drugie, pozwala łatwo przełączać się między plikami i zarządzać całymi projektami plików. Jest to idealne rozwiązanie do przełączania się między plikami i edytowania wielu bitów kodu w locie.

Trzeci to konsola JavaScript wbudowana w Google Chrome. To pozwala nam napisać JavaScript i zobaczyć, jak działa natychmiast i będzie używane do wyjaśniania podstawowych pojęć programistycznych.

Druga to strona internetowa o nazwie Codepen.io. Ta niezwykła strona internetowa umożliwia kodowanie HTML, CSS i Javascript w przeglądarce i jest bezpłatna. Pozwoli ci to również natychmiast zobaczyć zmiany.

2. Znaczniki semantyczne

W tym rozdziale dowiesz się o znacznikach semantycznych oraz o tym, jak organizować kod w oparciu o jego zawartość.

Do niedawna kod HTML był na ogół organizowany za pomocą tagów. Pozwoliło to na utworzenie grupy elementów, a następnie nadanie im stylizacji.

To zadziałało, ale było miejsce na ulepszenia. Problem z tagami polegał na tym, że nie były semantyczne. Div tak naprawdę nic nie znaczy.

Znaczniki semantyczne to nowa funkcja w HTML5. Wprowadza nowe znaczniki, które działają tak samo jak znacznik „div”, ale służą do oznaczania wspólnych części strony.

Jak więc działają? Rozważmy następujący kod.

W tym kawałku kodu mamy pasek nawigacyjny, tytuł i listę. Nie różni się to zbytnio od większości witryn, na których prawdopodobnie kiedykolwiek wejdziesz, kiedy się nad tym zastanowisz.

co oznacza tryb niskiego poziomu danych?

Zajrzyjmy do artykułu na temat MakeUseOf. Zauważysz, że część strony jest zarezerwowana wyłącznie do przechodzenia do innych artykułów. Zauważysz również, że istnieje inna część strony zawierająca słowa, które składają się na artykuł. U góry strony zobaczysz nagłówek zawierający logo MakeUseOf i kilka innych linków.

Kiedy się nad tym zastanowisz, wiele stron internetowych przestrzega tych konwencji. Większość stron internetowych ma część zarezerwowaną do nawigacji. Zwykle mają treść. Najprawdopodobniej mają nagłówek.

Tagi semantyczne to tagi, które pozwalają zdefiniować części witryny, które są powszechnie spotykane na większości witryn. Nie dodają niczego do strony, ale umożliwiają grupowanie tagów na podstawie ich zawartości i stosowanie stylizacji do tych grup.

Więc pamiętasz ten kod, który mieliśmy wcześniej? Przyjrzyjmy się temu z dodanymi znacznikami semantycznymi.

Jak widać, kod jest znacznie łatwiejszy do odczytania. Wiesz, które części są jakimi i nie ma dwuznaczności. Jest to ważne, ponieważ ułatwia pisanie dobrego, czystego kodu. Jeśli kiedykolwiek zdecydujesz się zostać profesjonalnym projektantem stron internetowych, stanie się to najważniejsze – nigdy nie wiesz, kto będzie czytał twoją pracę.

Przyjrzyjmy się więc kilku bardziej semantycznym znacznikom.

2.1 Sekcja

Sekcja jest naprawdę przydatnym tagiem. Służy do pobierania ogromnych obszarów informacji i treści oznaczonych nagłówkiem lub tytułem. Pomyśl o tym jak o rozdziale w książce. Rozdział ma tytuł, a także może zawierać obrazki, diagramy, wykresy i słowa. Etykieta sekcji byłaby używana do zawierania tego wszystkiego.

2.2 Artykuł

Tag artykułu jest używany do tego, jak brzmi; Zawierające treści, takie jak post na blogu lub artykuł z wiadomościami. Ta treść powinna być oddzielona od reszty bloga i nadal mieć spójny sens.

2.3 Na bok

Ten znacznik jest zarezerwowany dla treści, które są związane ze stroną internetową, ale nie stanowią jej integralnej części. Może to być kilka faktów związanych z wiadomościami lub biografią użytkownika bloga.

2.4 Nagłówek

Wiele stron internetowych ma pasek u góry strony, który zawiera logo, niektóre informacje dotyczące witryny i być może kilka linków. W znaczniku semantycznym użyjesz tagu Header, aby to wszystko zawierać.

2.5 Nawigacja

Ten element jest zarezerwowany dla części nawigacyjnej Twojej witryny. Zawierałby linki do innych witryn internetowych lub do innych stron w witrynie. W kontekście MakeUseOf może to być część strony, która znajduje się pod nagłówkiem.

Ten tag jest zarezerwowany dla dolnej części strony. Tutaj możesz umieścić dane kontaktowe, informacje o prawach autorskich, mapę lub linki do swojej strony „o mnie”.

2.7 Sprawdź się

  • Co to jest znacznik semantyczny i do czego służy?
  • Tworzę stronę internetową i chcę użyć znacznika semantycznego, aby zawierała biografię o mnie. Którego mam używać?

3. Formularze

Jeśli kiedykolwiek zajmowałeś się projektowaniem stron internetowych, prawdopodobnie wiesz, jak stworzyć prosty formularz w HTML. Jeśli jesteś naprawdę sprytny, prawdopodobnie wiesz, jak przejąć informacje, które otrzymasz z formularza i jak coś z nimi zrobić, np. umieścić je w bazie danych.

Formularze są niezwykle ważne. Stanowią podstawę większości rzeczy, które robimy w Internecie. Za każdym razem, gdy tworzysz aktualizację statusu w swojej ulubionej sieci społecznościowej, kupujesz coś w Amazon lub wysyłasz wiadomość e-mail, prawdopodobnie używasz formularza HTML.

Prawdopodobnie nie wiedziałeś, że sposób, w jaki tworzymy formularze, radykalnie się zmienił w HTML5. Jest też znacznie lepszy. W tym rozdziale przyjrzymy się kilku fajnym rzeczom, które możesz teraz zrobić, używając tylko zwykłych, starych znaczników.

Więc co jest takiego fajnego w nowym sposobie pisania formularzy w HTML5? Po pierwsze, możesz upewnić się, że niektóre pola muszą być wypełnione, aby przesłać, po prostu zmieniając znaczniki samego formularza. Ponadto nie musisz już pisać gór JavaScript lub PHP, aby to zrobić. To banalnie proste.

Po drugie, możesz upewnić się, że Twoi użytkownicy mogą przesyłać do formularza tylko określone typy informacji. Załóżmy więc, że masz witrynę internetową dla swojej listy mailingowej i chcesz, aby ludzie mogli przesyłać tylko rzeczywiste adresy e-mail? Możesz to zrobić, używając tylko HTML5. To naprawdę jest niesamowicie potężne.

Po trzecie, możesz poprawić wygląd swoich formularzy, umieszczając w niektórych polach symbole zastępcze. Dzięki temu będą one znacznie bardziej intuicyjne, ponieważ możesz pokazać swoim użytkownikom przykład tego, czego oczekujesz od formularza.

3.1 Ulepszanie formularza

Spójrzmy więc na formularz i zobaczmy, jak możemy go ulepszyć.

Ta forma jest dość prosta. Pobiera imię, adres e-mail i ulubiony kolor, a następnie pozwala użytkownikowi je przesłać. Nie zawiera on weryfikacji tego, jakie informacje są w nim umieszczane, i nic nie powstrzymuje użytkowników przed przesłaniem tego formularza z pustymi polami. Zmieńmy to wszystko.

Tak więc pierwszą rzeczą, którą będziemy chcieli zrobić, to upewnić się, że pole e-mail zawiera tylko wiadomość e-mail. Kiedyś było to naprawdę trudne zadanie, ponieważ trzeba było tworzyć wszelkiego rodzaju tajemne kody Regex. Cóż, już nie. Wystarczy zmienić typ danych wejściowych z „tekst” na „e-mail”. Gdy spróbujesz przesłać ten formularz z bełkotem, będzie narzekać i nalegać na przesłanie e-maila.

3.2 Typy i wzorce wejściowe

Istnieją inne typy danych wejściowych, których możesz wymagać. Należą do nich numery telefonów, adresy internetowe, formularze wyszukiwania, a nawet próbniki kolorów! Ponieważ HTML5 stale się rozwija, jest oczywiste, że wkrótce będziemy mogli określić więcej typów danych wejściowych w najbliższej przyszłości.

Ponadto w przypadku takich rzeczy jak numery telefonów, które różnią się w zależności od lokalizacji, można określić wzorce danych wejściowych. Są one tworzone przy użyciu czegoś, co nazywa się „wyrażeniami regularnymi” i są dość skomplikowane, ale niezmiernie potężne.

Będziemy również chcieli podać przykład wiadomości e-mail w naszym polu, aby użytkownik nie miał wątpliwości co do tego, co musi przesłać. To naprawdę proste. Po prostu utwórz nowy atrybut „placeholder” z przykładowym adresem e-mail.

Zamierzamy upewnić się, że nasze pole „Ulubiony kolor” jest wymagane. W ostatnim nawiasie ostrym (>) w tagu wejściowym e-mail wpisz po prostu „wymagane”. Otóż ​​to. Teraz, gdy spróbujesz przesłać formularz bez wartości, wyświetli się komunikat o błędzie.

Naprawdę niesamowitą rzeczą w tych komunikatach o błędach jest to, że użytkownik nie musi ich pisać ani pisać żadnego kodu, aby je utworzyć. Po prostu zmieniasz pole, aby było wymagane, i po prostu działa. Mając to na uwadze, można je dostosować, jeśli chcesz.

To było niesamowicie krótkie wprowadzenie do potęgi formularzy w HTML5. Jeśli chcesz przeczytać więcej, polecam odwiedzić te linki.

Dalsza lektura:

  • Sztuczki CSS – Napiszmy znaczniki semantyczne
  • Doktor HTML5 – porozmawiajmy o semantyce

3.3 Sprawdź się

W przyszłym tygodniu są twoje urodziny i chcesz utworzyć formularz rejestracyjny, aby wiedzieć, ile ciasta potrzebujesz. Otwórz edytor tekstu i utwórz formularz z następującymi polami.

  • Nazwa
  • Adres e-mail
  • Numer telefonu
  • Alergie

Upewnij się, że pola imię i nazwisko, adres e-mail i numer telefonu są obowiązkowe, a pola e-mail i numer telefonu mają ustawione typy danych wejściowych „e-mail” i „tel”. Utwórz symbol zastępczy dla pola alergii o wartości „pyłek, jajka, quiche”.

Baw się formą. Spróbuj przesłać wymagane pola jako puste i wstaw znaki nieliczbowe w polu numeru telefonu. W polu e-mail wstaw coś, co nie jest adresem e-mail. Co się dzieje?

4. Średnia

Kiedyś jedynym sposobem, w jaki można było wstawić wideo lub audio na stronę internetową, było użycie czegoś takiego jak Flash, Shockwave lub SilverLight.

To nie było idealne. Po pierwsze, żaden z tych frameworków nie działał tak dobrze na urządzeniach mobilnych. Po prostu nie były przystosowane do współczesnego świata smartfonów i tabletów.

adapter wifi nie działa w systemie Windows 10

Ponadto były to formaty zastrzeżone. W rezultacie użytkownicy Linuksa i OS X mogli uzyskać dość drugorzędne wrażenia lub nawet nie mogli korzystać z usług multimedialnych, ponieważ nie były one dostępne dla ich platformy.

Wreszcie mieli skłonność do bycia powolnym. Gdybyś był na słabym lub starszym komputerze, nie miałbyś dobrego doświadczenia podczas oglądania wideo przy użyciu tych struktur. Flash był szczególnie znany z tego.

4.1 Jak HTML5 sprawia, że ​​wideo i dźwięk są niesamowite?

HTML5 zmienił to, umożliwiając programistom internetowym umieszczanie wideo i audio na swoich stronach internetowych za pomocą zaledwie kilku linijek kodu. Działa świetnie na urządzeniach mobilnych i działa na każdej nowoczesnej przeglądarce internetowej.

W rezultacie duże firmy, takie jak YouTube, Vimeo i Netflix, korzystają z rewolucji HTML5. Dlaczego do nich nie dołączysz?

4.2 Wszystko o kodekach

W tym rozdziale dowiesz się, jak wykorzystać moc HTML5 do umieszczania audio i wideo na swoich stronach internetowych.

Po pierwsze, będę musiał zacząć od zastrzeżenia. Chociaż możesz używać wideo HTML5 w każdej nowoczesnej przeglądarce internetowej, nie działa ona tak samo w każdej przeglądarce. Kodeki używane przez każdą przeglądarkę różnią się. W przeglądarce Internet Explorer możesz używać wideo MP4. Chrome jest nieco bardziej hojny i umożliwia korzystanie z wideo WebM, MP4 i Ogg Theora. Opera jest nieco bardziej restrykcyjna i pozwala tylko na korzystanie z wideo Theora i WebM.

W rezultacie musisz być trochę sprytny, jeśli chodzi o wstawianie wideo na swoją stronę internetową. Zobaczmy więc, jak to działa.

4.3 Rozpoczęcie od wideo

Na początek będziesz musiał stworzyć kilka otwierających i zamykających znaczników. To tutaj będziesz tworzyć linki do swoich plików wideo. Ale najpierw będziesz chciał ustawić plakat. Co to znaczy?

Cóż, kiedy czekasz na załadowanie filmu, osoba odwiedzająca Twoją witrynę może zobaczyć zdjęcie, które odnosi się do filmu. Aby to zrobić, po prostu nadaj tagom wideo atrybut „plakat” z wartością obrazu, do którego chcesz utworzyć link. To powinno wyglądać tak.

Następną rzeczą, którą będziemy chcieli zrobić, jest stworzenie awaryjnego rozwiązania. Co to znaczy? Załóżmy więc, że używasz jednej ze starszych, mniej niesamowitych przeglądarek. Wiele z tych starszych przeglądarek nie obsługuje wideo HTML5 i dlatego nie może odtwarzać wideo HTML5. Będziesz chciał zostawić im wiadomość informującą ich, że będą chcieli uaktualnić swoją przeglądarkę i że dopóki tego nie zrobią, nie będą mogli oglądać Twojego filmu.

Aby to zrobić, po prostu napisz wiadomość w tagach wideo. Nic więcej nie jest wymagane. Kiedy to zrobisz, pozostanie ci kod, który wygląda tak.

Teraz dodajmy trochę wideo. Mam zamiar przetestować to w Google Chrome, więc połączę się z filmem MP4. Aby to zrobić, tworzę tag Source i nadaję mu atrybut src, który ma wartość wideo, które chcę dołączyć.

Moja strona jest teraz gotowa do otwarcia w mojej przeglądarce internetowej. Połączyłem się z filmem, który jest naprawdę duży, przez co po otwarciu widać tylko plakat.

4.4 Dodawanie dźwięku

Audio można wstawić na twoją stronę internetową w sposób, który bardzo przypomina sposób, w jaki wstawiliśmy wideo na naszą stronę.

Po pierwsze, tworzy się kilka znaczników audio. Te znaczniki audio zawierają atrybut „kontroli”. Daje to użytkownikowi odwiedzającemu stronę możliwość wstrzymywania, odtwarzania do tyłu i do przodu odtwarzanego dźwięku.

Następnie dołącz tag źródłowy do pliku MP3, do którego chcesz utworzyć link. Nie musisz się tak bardzo martwić, jeśli chodzi o kompatybilność kodeków. Najnowsze przeglądarki internetowe mają możliwość odtwarzania dźwięku MP3, chociaż dobrą praktyką jest dołączenie plików „.ogg” i „.wav” – tak na wszelki wypadek.

Na koniec możesz utworzyć rezerwę dla starszych przeglądarek. Odbywa się to w ten sam sposób, w jaki utworzyłeś kreację zastępczą dla swojego filmu.

Wynik końcowy wygląda trochę tak.

Kiedy otworzysz to w przeglądarce internetowej, powinno to wyglądać trochę tak.

4.5 Sprawdź się

  • Jaki jest cel umieszczania plakatu w tagach wideo?
  • Jakich kodeków nie możesz używać w Internet Explorerze?
  • Gdybym chciał mieć możliwość wstrzymania niektórych dźwięków, jaki atrybut dodałbyś do tagu „audio”?

Dalsza lektura:

5. Transformacje i animacje CSS3

CSS tradycyjnie był używany do obsługi układu i projektowania strony internetowej. To wciąż prawda, ale w swojej najnowszej iteracji zyskał zdolność obsługi animacji i przekształceń elementów i obrazów.

Ludzie zrobili niesamowite rzeczy z CSS3, od stworzenia cyfrowego zegara po napisanie pełnej gry w Ponga. Ktoś nawet użył go do odtworzenia napisów wstępnych do Mad Men. To naprawdę potężna technologia, która po opanowaniu może być wykorzystana do dodania niesamowitego poziomu funkcjonalności do Twojej strony internetowej.

W tym rozdziale przedstawię krótkie wprowadzenie do CSS3 i pokażę, jak dodać niesamowite efekty do swojej strony.

Najpierw przejdź do codepen.io i utwórz nowe pióro. Będziemy używać tego jako naszej przestrzeni roboczej na czas trwania tego rozdziału.

Zaczniemy od prostoty i stworzymy prostą transformację obrazu, która po najechaniu kursorem obraca obraz o 3 stopnie. Przede wszystkim utwórz znacznik div i nadaj mu identyfikator. W poniższym przykładzie nadałem mu identyfikator 'muo'.

5.1 Efekty najechania CSS

W tym div dołącz wybrany obraz. Dołączyłem kopię logo dla MakeUseOf.

Następnie będziesz musiał napisać kilka reguł arkusza stylów. W poniższym przykładzie utworzyłem górny i lewy margines, aby nadać obrazowi trochę miejsca. Dołączyłem również ciekawie wyglądającą regułę arkusza stylów, która zaczyna się od '#muo:hover'. Co to jest?

Kiedy dołączasz ':hover' do reguły arkusza stylów, czy to do elementu, identyfikatora czy klasy, skutecznie mówisz przeglądarce, aby zastosowała ten styl, gdy mysz zarządza elementem. Całkiem fajnie, prawda?

Wewnątrz reguły „#muo:hover” znajduje się wiersz z napisem „-webkit-transform: rotate(3deg)”. Jak na pewno się domyśliłeś, mówi to przeglądarce, aby obróciła ten element div o trzy stopnie.

Warto jednak zauważyć, że ten tag działa tylko w Chrome i Safari. Jeśli chcesz, aby Twój kod działał w przeglądarce Firefox lub Internet Explorer 9 i nowszych, zmień plik CSS, aby zawierał następujące wiersze.

Teraz po najechaniu na obraz wygląda to tak:

5.2 Używanie CSS3 do zmiany rozmiaru obrazów

Dlaczego więc na tym poprzestać? Czy wiesz, że możesz również użyć metody „przekształcenia”, aby powiększyć lub zmniejszyć obraz. Zmieńmy nasz plik CSS, aby zawierał następujące wiersze.

Jak widać, dodaliśmy teraz nową regułę transformacji, ale tym razem mówimy jej, aby zrobił coś, co nazywa się „skalowaniem”. To naprawdę piękny sposób na zwiększenie rozmiaru obrazu. Pobiera dwa parametry (liczby, które widzisz w nawiasach) i reprezentują one wielkość, o jaką zwiększasz wysokość i szerokość elementu.

Jak widać z kodu, zamierzam zwiększyć rozmiar logo div MakeUseOf o 50%. Możesz to sprawdzić, najeżdżając na nie kursorem. Zobaczysz, że teraz logo „MakeUseOf” jest teraz znacznie bardziej rozciągnięte.

To było bardzo łagodne wprowadzenie do transformacji CSS3. Pomimo tego, że CSS3 jest rzeczywiście bardzo nowy, możesz teraz zobaczyć, że możesz za jego pomocą wykonać wiele bardzo interesujących manipulacji.

5.3 Sprawdź się

  • Jak zastosować stylizację do elementu po najechaniu?
  • Jak obrócić obraz za pomocą CSS3?
  • Jak skalować obraz za pomocą CSS3?
  • Co się stanie, jeśli przekażesz metodę transformacji „translate(50px, 50px)”?

Dalsza lektura:

Skały HTML5 – Prezentacja

6. Wystarczy Javascript

Jeśli chcesz używać skryptu w swojej przeglądarce internetowej, musisz użyć Javascript. Niestety, nie ma na to dwóch sposobów. To język, który ma wielu fanów i wielu krytyków. Jak języki idą, ma wiele brodawek. Nie bez powodu najbardziej godna uwagi książka o języku nosi tytuł „Javascript: The Good Parts”.

Nie da się nauczyć Cię obsługi JavaScript w jednym rozdziale. Nie to jest tutaj celem. Celem jest nauczenie Cię wystarczającej ilości JavaScript, abyś mógł zrozumieć następny rozdział, który dotyczy wykorzystania technologii zwanej Canvas do tworzenia rysunków i animacji.

6.1 Dostęp do konsoli

W tym celu użyjemy konsoli JavaScript wbudowanej w każdą kopię przeglądarki Google Chrome. Aby uzyskać do niego dostęp, możesz kliknąć prawym przyciskiem myszy dowolną stronę internetową, a następnie nacisnąć „Sprawdź element”. Następnie kliknij „Konsola”. Powinieneś to zobaczyć.

Tradycją jest, że pierwszym programem, jaki kiedykolwiek napisał początkujący programista, jest program „Hello World”. Jest to prosty program, który wypisuje frazę „Hello World” i niewiele więcej. W konsoli wpisz 'console.log('Witaj świecie!');.

6.2 Twój pierwszy program

Więc co dokładnie zrobiliśmy? Po pierwsze, nazwaliśmy coś, co nazywa się „console.log”. Jest to kawałek kodu wbudowany w komputer, który po prostu drukuje wszystko, co mu powiesz. Następnie dołączyliśmy do niego kilka nawiasów i umieściliśmy w podwójnym cudzysłowie „Hello World”. Nazywa się to „przekazywaniem argumentów”, a typ argumentu, który przekazaliśmy, nazywa się łańcuchem. Ilekroć chcesz zrobić coś z użyciem liter i znaków specjalnych, po prostu musisz użyć pojedynczych cudzysłowów. Jeśli jednak chcesz coś zrobić za pomocą liczb, zwykle nie musisz używać cudzysłowów, jak pokazano poniżej.

6.3 Zmienne w JavaScript

Możesz również przekazać zmienne do „console.log”. Zmienne brzmią skomplikowanie, ale tak naprawdę są tylko przestrzenią do umieszczania porcji informacji. Często są to cyfry lub litery. Aby to zrobić, deklarujesz zmienną za pomocą słowa kluczowego 'var', nadajesz jej nazwę, a następnie ze znakiem równości nadajesz jej wartość. Utworzę więc zmienną o nazwie „hello”, a następnie nadaję jej wartość „Hello World!”. Następnie przekażę to do pliku console.log.

Zauważ, że nie przekazałem 'hello' do pliku console.log za pomocą cudzysłowów. To dlatego, że chciałem wydrukować na konsoli zawartość „hello”, a nie samego „hello”.

6.4 Jakie funkcje robią?

Może to być trochę żmudne przepisywanie tego samego kawałka kodu w kółko, dlatego właśnie z tego powodu piszemy funkcje. Funkcje są prostsze niż myślisz. Wszystko, czym są, to fragmenty kodu, które możemy ponownie wykorzystać bez ponownego przepisywania tego samego kodu. Poniżej stworzyliśmy funkcję o nazwie 'sup' i przekazujemy jej argument w nawiasach, który jest następnie logowany na ekranie. Wywołujemy 'sup' wysyłając do konsoli 'sup('Witaj świecie!');'.

6.5 Powtarzanie akcji z pętlą „For”

Załóżmy, że chcesz wykonać tę samą czynność określoną liczbę razy. Z tego powodu używamy pętli 'for'. Na początku wyglądają przerażająco, ale są tak łatwe do zrobienia, gdy je zrozumiesz. Zaczynasz od napisania 'for()'.

W tych nawiasach będziemy chcieli utworzyć zmienną, która zlicza, ile razy wykonaliśmy akcję. Otrzymujemy więc coś, co wygląda tak 'for(var i = 0;)'.

Następnie chcemy sprawdzić, czy nie spełniłem warunku. Więc w tym przypadku chcemy zobaczyć, że jest mniej niż 10. Więc po średniku piszemy „i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Jeśli i jest mniej niż 10, chcemy dodać go o jeden, a potem coś zrobić. Więc stawiamy 'i = i + 1'. Nasza pętla jest prawie skończona: 'for(var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Potem będziemy chcieli wykonać akcję. Tak więc, po ostatnich nawiasach, zapisujemy kilka nawiasów klamrowych i pomiędzy nimi zapisujemy console.log wartość i. Spowoduje to utworzenie licznika, który liczy do dziewięciu.

Ostatnie dwie konstrukcje programistyczne, którym będziemy się przyglądać, to instrukcje „if” i pętle „while”.

6.6 Oświadczenia Jeżeli

Instrukcja „if” wykonuje akcję, jeśli spełnione są określone kryteria. Są one podobne do pętli „for” w budowie i działają w następujący sposób. Załóżmy, że masz zmienną o nazwie „cheeseburgery” i chcesz sprawdzić, czy ma ona wartość „smaczne”. Jeśli tak, chcesz wyświetlić na ekranie „mniam, cheeseburgery”. Aby to zrobić, napisałbyś coś takiego.

Zwróć uwagę, jak napisałem 'if(cheeseburgers == 'smaczne')'. Używasz podwójnej lub potrójnej równości, aby sprawdzić równość i pojedynczej równości, aby przypisać wartość.

6.7 Pętle póki

Na koniec pętla „while” wykonuje akcję, gdy spełnione są kryteria. Więc wyobraź sobie, że chcesz logować „mniam, cheeseburgery”, podczas gdy cheeseburgery są równie smaczne. Aby to zrobić, napisałbyś co następuje.

Warto zauważyć, że spowodowałoby to wejście w nieskończoną pętlę i należy unikać wykonywania akcji na wartości, która prawdopodobnie się nie zmieni. Może to spowodować zablokowanie przeglądarki lub brak działania kodu.

Jak wspomniałem wcześniej, było to bardzo krótkie wprowadzenie do konstrukcji programistycznych w JavaScript. Zachęcamy do przeczytania więcej na ten fascynujący, choć ogromny temat.

6.8 Sprawdź się

  • Chcę odliczać od 30. Napisz pętlę „for”, która by to zrobiła.
  • Chcę utworzyć zmienną o nazwie „makeuseof” i nadać jej wartość „awesome”. Jak to się robi?
  • Chcę utworzyć funkcję, która po wywołaniu drukuje 'MakeUseOf Is Awesome'. Napisz tę funkcję.

Dalsza lektura:

7. Kreatywne płótno

Canvas to fajna technologia, która pozwala rysować obrazy i tworzyć animacje bez konieczności korzystania z Flasha lub Silverlight. Ludzie używali go do tworzenia dziwacznych i wspaniałych rzeczy, w tym symulatora suszarki do włosów i różnych gier wideo. To wspaniała i niezgłębiona technologia, w tym samouczku przedstawię ci krótkie wprowadzenie do niej.

Warto zauważyć, że Canvas działa tylko w nowoczesnych przeglądarkach internetowych. Jeśli używasz starej wersji IE, Chrome lub Firefox, możesz nie być w stanie prześledzić tego rozdziału. Jeśli tak jest, powinieneś rozważyć pobranie najnowszej wersji Google Chrome, czyli przeglądarki internetowej, w której stworzyłem ten samouczek.

7.1 Pierwsze kroki z Canvas

Przede wszystkim będziesz musiał otworzyć przeglądarkę internetową i przejść do codepen.io. Utwórz nowy długopis.

Teraz będziemy musieli zadeklarować element canvas. Utwórz dwa otwierające i zamykające znaczniki Canvas. W nich powinieneś przekazać mu trzy atrybuty. Są to szerokość i wysokość elementu Canvas wraz z identyfikatorem, który mu nadajesz. Podobnie jak poprzednio, kiedy wstawiałeś wideo, powinieneś dołączyć wiadomość zastępczą.

Teraz będziemy chcieli napisać kod JavaScript, który będzie rysował coś na ekranie. Zaczniemy od podstaw i stworzymy prosty czerwony kwadrat.

Stworzymy zmienną (nazwałem ją 'demo'), a następnie wybierzemy element canvas i przypiszemy go do tej zmiennej. Aby to zrobić, używasz document.getElementByID() i przekazujesz identyfikator elementu, który chcesz wybrać.

Druga linia w naszym skrypcie tworzy kolejną zmienną o nazwie 'context', a następnie wywołuje na niej 'demo.getContext('2d')'. To powiedziało przeglądarce, że będziemy pracować nad obrazem 2D, a następnie przekazało niezbędne funkcje, których potrzebujemy, aby rysować na ekranie.

Trzecia i czwarta linia to te, które faktycznie rysują na ekranie. Trzecia linia wypełnia prostokąt kolorem czerwonym, podczas gdy czwarta linia wywołuje fillRect, która ustawia go i określa jego długość i szerokość.

Nie jest to jednak imponujące. Zróbmy coś bardziej zaawansowanego i użyjmy magii JavaScript i Canvas, aby stworzyć MakeUseOf zupełnie nowe logo.

7.2 Kształty i tekst

Usuńmy naszą czwartą linię i zastąpmy ją taką, która umieszcza nasz prostokąt w lewym górnym rogu i rozciąga go na długość naszego płótna.

Pierwsze dwa argumenty określają, gdzie chcemy umieścić oś x i y kształtu. Na razie ustawmy te dwa na „0”. Trzeci argument odnosi się do szerokości kształtu. Ustawmy to na '200', a następnie pozostawmy czwarty argument na '50'. Teraz powinieneś mieć coś, co wygląda trochę tak.

To świetny początek, ale w ogóle nie wspomina o MakeUseOf. Dodamy więc trochę tekstu. Stwórzmy zmienną zawierającą 'makeuseof' i nazwiemy ją 'MakeUseOf'.

Następnie będziemy chcieli utworzyć kolejną zmienną kontekstową. Nazwij to „context2” i upewnij się, że jest to 2d. Właśnie tym będziemy pisać nasz tekst.

Chcemy, aby nasz tekst był pomalowany na niebiesko i nakładał się na nasz czerwony kwadrat. Tak więc, tak jak poprzednio, będziemy chcieli nadać mu styl wypełnienia „niebieski”. Teraz wybierzemy cechy naszego tekstu. Chcemy, aby był duży, 20px, sformatowany pogrubioną czcionką i czcionką Arial. Wywołujemy czcionkę na context2 i przypisujemy jej wartość 'bold 20px arial'.

Ponieważ chcemy, aby ten tekst nałożył się na nasze poprzednie czerwone pole, musimy wywołać 'textBaseLine' w kontekście2 i nadać mu wartość top. Po zakończeniu wywołujemy 'fillText' na context2 i przekazujemy mu zmienną zawierającą nasz tekst oraz współrzędne x i y, w których zamierzamy umieścić nasz tekst. Wynik końcowy naszego kodu jest mniej więcej taki.

Obraz tworzony przez kod wygląda tak.

7.3 Słowo na płótnie

Chociaż było to niesamowicie podstawowe wprowadzenie do Canvas, powinieneś zrozumieć, że jest to również niesamowicie rozbudowana technologia, a do tego niezwykle potężna. Poradnik ten służył po prostu jako wstęp do tworzenia grafiki przy użyciu tej nowej technologii.

jak wyczyścić okna dysku 10

7.4 Sprawdź się

  • Dodaj następujący slogan do utworzonego obrazu: „Najlepsza strona technologiczna w historii!”
  • Utwórz pętlę „for”, która działa przez dziesięć iteracji. Sprawdź, czy możesz przesunąć rysunek w dół płótna, piksel na raz.
  • Zawijaj swój rysunek w funkcję. Co się stanie, jeśli tego nie zadzwonisz?

Dalsza lektura:

8. Gdzie dalej?

Dziękuję za przeczytanie mojego niesamowicie krótkiego przewodnika po nowych technologiach znalezionych w HTML5. Nie można zaprzeczyć, że HTML5 to technologia przyszłości. Jest przyjmowany przez większość technologii, ponieważ jest łatwy do napisania i potężny ponad miarę. Ludzie cały czas robią z nim niesamowite rzeczy i nie mam wątpliwości, że w przyszłości będziesz jedną z tych osób. Jestem zaszczycony, że mogłem być częścią Twojej podróży do dzikiego i wspaniałego świata HTML5.

Błagam, abyście się dalej uczyli. Kontynuuj kodowanie. Kontynuuj zdobywanie kolejnych poziomów i doskonalenie, a już po chwili będziesz korzystać z technologii przedstawionych w tym krótkim przewodniku, aby tworzyć wspaniałe produkty.

Udział Udział Ćwierkać E-mail Czy warto uaktualnić do systemu Windows 11?

Windows został przeprojektowany. Ale czy to wystarczy, aby przekonać Cię do przejścia z Windows 10 na Windows 11?

Czytaj dalej Powiązane tematy
  • Wordpress i tworzenie stron internetowych
  • HTML5
  • Długa forma
  • Przewodnik po długim kształcie
O autorze Mateusz Hughes(386 opublikowanych artykułów)

Matthew Hughes jest programistą i pisarzem z Liverpoolu w Anglii. Rzadko można go znaleźć bez filiżanki mocnej czarnej kawy w dłoni i absolutnie uwielbia swojego Macbooka Pro i swój aparat. Możesz przeczytać jego bloga na http://www.matthewhughes.co.uk i śledzić go na Twitterze pod adresem @matthewhughes.

Więcej od Matthew Hughesa

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować