Damian Zawada Damian.Zawada@praktyki.onmicrosoft.com sabre2800@hotmail.com

Narzędzia

Drobny pokaz możliwości www.beautyoftheweb.com

Czy HTML5… istnieje? Odpowiedź na to pytanie jest trochę bardziej skomplikowana niż mogłoby się wydawać.

Krótka lekcja historii  W3C (1 października 1994 roku) zrzesza ponad 400 organizacji. Ostatni zatwierdzony standard HTML4 1998 rok. HTML5 tak naprawdę jeszcze nie skończony. Jednak Microsoft na najlepszej drodze do osiągnięcia celu ;)

Proces zatwierdzania znaczników

Jak wygląda sprawa aktualnie

Ktoś mógłby powiedzieć, że jest słabo ale wbrew pozorom jest całkiem nieźle, bo mimo wszystko dostajemy kilka fajnych bajerów.

Składniowe rzeczy Jedną z fajniejszych rzeczy jest fakt, że w HTML5 nie musimy domykać znaczników!!! Nie ma również potrzeby wstawiania cudzysłowu w ścieżce, oraz znaczenie straciła wielkość liter.

Kilka przykładów <img src=„usmiech/jpg” /> == <img src=„usmiech.jpg”> <img src=„usmiech.jpg „/>==<img src=usmiech.jpg/> <img src = usmiech.jpg>==<iMG sRc=usmiech.jpg>

Video/audio

Zaczniemy od video <video id=„video” controls autoplay> <source src=„jakies.mp4”type=„video/mp4”/> </video>

Obsługiwane formaty

No to teraz audio <audio id=„audio” src=„jakies.mp3” controls> </audio> Atrybuty: src, autoplay, controls, preload

Wygląd odtwarzaczy audio

Obsługiwane formaty audio

Tagi semantyczne

Najpopularniejsze ID

Tagi semantyczne bardziej ogólnie

<canvas> Znacznik ten pozwala dynamicznie renderować grafikę 2D, oraz bitmapy. Canvas zawiera region z parametrami height i width. Wykorzystuje się go przy animacjach, grach, budowaniu grafów. Pracuje na niskim poziomie.

Przykład <canvas id="example" width="200" height="200"> Twoja przeglądarka lami :P</canvas> var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);

<svg> Jest rozwijane przez W3C. Format grafiki wektorowej zarówno statycznej jak i dynamicznej. Należy do rodziny XML. Istnieje szansa, że zastąpi format grafiki wektorowej Adobe.

Przykład

<svg> czy <canvas> ???

Podsumowanie Nowy HTML daje nam dużo więcej możliwości, chociażby ze względu na wsparcie sprzętowe o którym wcześniej można było tylko marzyć. Mogę wyjawić, że to przyszłość  Na koniec zdjęcie lemura.

Pytania?????????

Dziękuję za uwagę!!! Zapraszam na dalsze prezentacje  TAADAAAAAAAAAAMMMMM!!! Dziękuję za uwagę!!! Zapraszam na dalsze prezentacje 