Prezentacja na temat HTML5
Link do prezentacji
Prezentację przygotowałem na Seminarium dyplomowe inżynierskie na wydziale EiTI PW. Nie miała ona żadnego związku z tematem mojej pracy inżynierskiej, ale nie było takiego wymogu. Dlatego też wolałem zrobić prezentację na jakiś nieco ciekawszy temat, który będzie dla mnie bardziej interesujący w przygotowaniu i prezentacji. Nie jest ona szczególnie odkrywcza, ale myślę, że wyszła na tyle ciekawie, że warto się nią podzielić z szerszym gronem osób.
Prezentacja jest przygotowana w formie strony HTML5, więc również sama w sobie przedstawia możliwości nowych technologii. Takie rozwiązanie umożliwia również prezentację opisywanych elementów z HTML5 na prawdziwym przykładzie, poprzez umieszczenie ich po prostu na slajdach, zamiast jakichś suchych screenów czy ciągłego przełączania między prezentacją a przeglądarką.
Założyłem sobie, że wykonam ją od zera bez żadnych dodatkowych bibliotek takich jak np. jQuery i udało się to osiągnąć. Jest to zatem w 100% prezentacja możliwości funkcji wbudowanych w przeglądarkę. Wykorzystane są między innymi animacje z CSS3 oraz History API, jak również oczywiście elementy opisywane na slajdach.
Nawigacja odbywa się za pomocą przycisków widocznych po najechaniu na górną część slajdu lub za pomocą klawiszy strzałek na klawiaturze.
Na samym początku znajduje się w niej krótka historia rozwoju HTML wyjaśniająca skąd się wziął i dokąd zmierza HTML5. Na kolejnych slajdach znadują się opisy i przykłady działania takich nowych elementów specyfikacji jak:
- elementy <canvas>, <audio> i <video>
- elementy blokowe: <header>, <footer>, <nav>, <section>, <article>
- elementy <progress> i <meter>
- atrybut contenteditable
- natywne drag&drop
- WebStorage: localStorage i sessionStorage
- geolokalizacja
Ponieważ prezentacja w dużym stopniu korzysta z nowinek w specyfikacji HTML5 do w pełni poprawnego działania wymaga stosunkowo aktualnej wersji przeglądarki internetowej. Była przygotowywana pod kątem Chrome 13, gdyż w momencie jej tworzenia ta przeglądarka oferowała najlepsze wsparcie dla opisywanych technologii. Dlatego też niektóre funkcje mogą nie działać w 100% poprawnie w innych przeglądarkach.